From b6c8010aeca3e6059262e0c78a36c7a5cea2e9bd Mon Sep 17 00:00:00 2001
From: lixuguang <lixuguang@gmail.com>
Date: Wed, 20 Sep 2023 10:18:35 +0000
Subject: [PATCH] Site updated: 2023-09-20 10:18:34

---
 .../index.html                                |  607 ++
 2013/06/26/CSS-Triangle-Circle/index.html     |  623 ++
 .../Read-Let-your-boss-promote-you/index.html |  780 ++
 .../index.html                                |  688 ++
 .../index.html                                |  656 ++
 2017/08/30/Vue-VSCode-Snippets/index.html     |  777 ++
 2017/08/30/Vue-basic/index.html               |  739 ++
 2017/08/30/npm-source/index.html              |  608 ++
 .../use-GitHub-Hexo-Next-make-blog/index.html |  658 ++
 2017/10/12/VSCode-ESLint/index.html           |  597 ++
 2017/10/12/us-gitment/index.html              |  620 ++
 2017/10/12/web-quanzhan/index.html            |  606 ++
 2017/12/12/Git-Shell/index.html               |  641 ++
 2019/12/27/Actions/index.html                 |  607 ++
 .../27/Vue-Component-Communication/index.html |  615 ++
 2019/12/30/begin-learn-java/index.html        |  591 ++
 2019/12/31/GoodBye-2019/index.html            |  621 ++
 2019/12/31/gitlab-cicd/index.html             |  664 ++
 .../12/31/weichat-h5-compatibility/index.html |  618 ++
 2020/01/01/Hello-2020/index.html              |  593 ++
 2020/01/02/21-Day-Challenge-01/index.html     |  599 ++
 2020/01/02/FE-guide-Closure/index.html        |  602 ++
 2020/01/02/FE-guide-dataType/index.html       |  655 ++
 2020/01/02/FE-guide-instanceof/index.html     |  590 ++
 2020/01/02/FE-guide-new/index.html            |  608 ++
 2020/01/02/FE-guide-prototype/index.html      |  646 ++
 2020/01/02/FE-guide-this/index.html           |  591 ++
 .../index.html"                               |  610 ++
 2020/01/03/FE-guide-Generator/index.html      |  589 ++
 .../03/FE-guide-Map-FlatMap-Reduce/index.html |  602 ++
 2020/01/03/FE-guide-Module/index.html         |  601 ++
 2020/01/03/FE-guide-Promise/index.html        |  592 ++
 2020/01/03/FE-guide-async-Proxy/index.html    |  589 ++
 2020/01/03/FE-guide-async-await/index.html    |  603 ++
 .../01/03/FE-guide-call-apply-bind/index.html |  596 ++
 2020/01/03/FE-guide-copy/index.html           |  621 ++
 .../03/FE-guide-debounce-throttle/index.html  |  605 ++
 2020/01/03/FE-guide-inherit/index.html        |  597 ++
 2020/01/03/FE-guide-store/index.html          |  628 ++
 .../index.html                                |  586 ++
 2020/01/04/Algorithm/index.html               |  734 ++
 2020/01/05/FE-guide-ArrayOprs/index.html      |  617 ++
 2020/01/05/FE-guide-about-reduce/index.html   |  604 ++
 2020/01/05/FE-guide-currying/index.html       |  595 ++
 2020/01/05/FE-guide-vuepress/index.html       |  589 ++
 2020/01/09/FE-guide-Net/index.html            |  970 ++
 2020/01/09/FE-guide-data-structure/index.html |  706 ++
 2020/01/09/career/index.html                  |  599 ++
 2020/01/09/do-it-yourselfery-jsonp/index.html |  590 ++
 .../index.html                                |  620 ++
 2020/01/13/FE-guide-inherit2/index.html       |  667 ++
 .../13/Javascript-Design-Pattern/index.html   |  665 ++
 .../13/do-it-yourselfery-promise/index.html   |  623 ++
 2020/01/13/hexo-search/index.html             |  596 ++
 2020/01/22/Es6-arrowFunc-arguments/index.html |  583 ++
 2020/01/22/FE-guide-safe/index.html           |  635 ++
 2020/01/22/Wepack-Tips/index.html             |  622 ++
 2020/02/11/SSR/index.html                     |  609 ++
 2020/02/11/restful-architecture/index.html    |  602 ++
 2020/02/12/print-table-problem/index.html     |  591 ++
 2020/02/12/vue-proxyTable-problem/index.html  |  586 ++
 .../index.html                                |  651 ++
 .../index.html                                |  693 ++
 .../index.html                                |  645 ++
 2020/02/24/Vue-plug-in-development/index.html |  606 ++
 .../index.html                                |  603 ++
 .../23/path-join-vs-path-resolve/index.html   |  587 ++
 .../do-it-yourselfery-EventEmitter/index.html |  592 ++
 .../do-it-yourselfery-async-await/index.html  |  584 ++
 .../do-it-yourselfery-call-apply/index.html   |  618 ++
 .../03/24/do-it-yourselfery-create/index.html |  588 ++
 2020/03/24/do-it-yourselfery-flat/index.html  |  587 ++
 .../24/do-it-yourselfery-isArray/index.html   |  584 ++
 2020/03/24/do-it-yourselfery-map/index.html   |  589 ++
 2020/03/24/do-it-yourselfery-new/index.html   |  591 ++
 .../03/24/do-it-yourselfery-reduce/index.html |  587 ++
 .../index.html"                               |  583 ++
 .../index.html"                               |  585 ++
 2020/03/24/webpack-learning-1/index.html      |  877 ++
 2020/04/03/source-code-react-diff/index.html  |  700 ++
 2020/04/07/Electron-Offline-Build/index.html  |  586 ++
 2020/04/07/webpack-uglifyjsplugin/index.html  |  623 ++
 2020/04/15/node-sass-slow-problem/index.html  |  601 ++
 .../talk-about-full-stack-big-fd/index.html   |  598 ++
 2020/04/16/0-vuecli-3-component/index.html    |  678 ++
 2020/04/16/what-is-npx/index.html             |  648 ++
 2020/05/14/css3-pointer-events/index.html     |  607 ++
 2020/05/28/Prettier-Setting/index.html        |  585 ++
 .../rpm\345\221\275\344\273\244/index.html"   |  663 ++
 .../index.html"                               |  610 ++
 2020/11/10/learn-cordova-1/index.html         |  719 ++
 2020/11/10/learn-go/index.html                |  587 ++
 2020/11/11/learn-ionic-1/index.html           |  640 ++
 .../index.html"                               |  611 ++
 .../index.html"                               |  600 ++
 .../index.html"                               |  702 ++
 .../index.html"                               |  785 ++
 .../index.html"                               |  732 ++
 .../index.html"                               |  634 ++
 2022/06/01/GIT Standard/index.html            |  654 ++
 .../index.html"                               |  823 ++
 2022/06/01/squid/index.html                   |  606 ++
 .../index.html"                               |  728 ++
 .../index.html"                               |  660 ++
 .../index.html"                               |  588 ++
 2022/06/02/DockerFile/index.html              |  700 ++
 .../index.html"                               |  632 ++
 .../index.html"                               |  585 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  593 ++
 .../Nginx\346\214\207\344\273\244/index.html" |  591 ++
 2022/06/09/http_stub_status_module/index.html |  610 ++
 .../index.html"                               |  618 ++
 .../index.html"                               |  728 ++
 2022/06/30/nginx-timeout/index.html           |  669 ++
 .../index.html"                               |  609 ++
 .../index.html"                               |  586 ++
 .../index.html"                               |  652 ++
 .../02/Oracle-Linux-install-Docker/index.html |  590 ++
 .../index.html"                               |  578 ++
 .../index.html"                               |  586 ++
 2022/08/02/linux-scp/index.html               |  599 ++
 .../index.html"                               |  601 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  865 ++
 .../index.html"                               |  561 ++
 2023/09/20/test/index.html                    |  590 ++
 @attachment/Clipboard_2022-06-09-12-57-39.png |  Bin 0 -> 6725 bytes
 @attachment/Clipboard_2022-06-09-12-57-48.png |  Bin 0 -> 6725 bytes
 @attachment/Clipboard_2022-06-09-12-59-28.png |  Bin 0 -> 146898 bytes
 @attachment/README.html                       |  471 +
 CNAME                                         |    1 +
 about/index.html                              |  691 ++
 archives/2013/06/index.html                   |  478 +
 archives/2013/index.html                      |  478 +
 archives/2015/12/index.html                   |  458 +
 archives/2015/index.html                      |  458 +
 archives/2016/10/index.html                   |  458 +
 archives/2016/index.html                      |  458 +
 archives/2017/08/index.html                   |  518 ++
 archives/2017/10/index.html                   |  518 ++
 archives/2017/12/index.html                   |  458 +
 archives/2017/index.html                      |  618 ++
 archives/2019/12/index.html                   |  558 ++
 archives/2019/index.html                      |  558 ++
 archives/2020/01/index.html                   |  641 ++
 archives/2020/01/page/2/index.html            |  641 ++
 archives/2020/01/page/3/index.html            |  641 ++
 archives/2020/01/page/4/index.html            |  601 ++
 archives/2020/02/index.html                   |  598 ++
 archives/2020/03/index.html                   |  641 ++
 archives/2020/03/page/2/index.html            |  521 ++
 archives/2020/04/index.html                   |  578 ++
 archives/2020/05/index.html                   |  478 +
 archives/2020/07/index.html                   |  458 +
 archives/2020/08/index.html                   |  458 +
 archives/2020/11/index.html                   |  498 ++
 archives/2020/index.html                      |  641 ++
 archives/2020/page/2/index.html               |  641 ++
 archives/2020/page/3/index.html               |  641 ++
 archives/2020/page/4/index.html               |  641 ++
 archives/2020/page/5/index.html               |  641 ++
 archives/2020/page/6/index.html               |  641 ++
 archives/2020/page/7/index.html               |  641 ++
 archives/2020/page/8/index.html               |  521 ++
 archives/2021/05/index.html                   |  478 +
 archives/2021/index.html                      |  478 +
 archives/2022/03/index.html                   |  478 +
 archives/2022/06/index.html                   |  641 ++
 archives/2022/06/page/2/index.html            |  621 ++
 archives/2022/08/index.html                   |  638 ++
 archives/2022/index.html                      |  641 ++
 archives/2022/page/2/index.html               |  641 ++
 archives/2022/page/3/index.html               |  641 ++
 archives/2022/page/4/index.html               |  461 +
 archives/2023/09/index.html                   |  478 +
 archives/2023/index.html                      |  478 +
 archives/index.html                           |  644 ++
 archives/page/10/index.html                   |  641 ++
 archives/page/11/index.html                   |  644 ++
 archives/page/12/index.html                   |  644 ++
 archives/page/13/index.html                   |  610 ++
 archives/page/2/index.html                    |  641 ++
 archives/page/3/index.html                    |  641 ++
 archives/page/4/index.html                    |  647 ++
 archives/page/5/index.html                    |  641 ++
 archives/page/6/index.html                    |  641 ++
 archives/page/7/index.html                    |  641 ++
 archives/page/8/index.html                    |  641 ++
 archives/page/9/index.html                    |  641 ++
 categories/Database/Postgresql/index.html     |  458 +
 categories/Database/index.html                |  458 +
 categories/Docker/index.html                  |  478 +
 categories/Infra/Docker/index.html            |  538 ++
 .../Nginx/index.html"                         |  498 ++
 .../Squid/index.html"                         |  458 +
 .../index.html"                               |  518 ++
 categories/Infra/index.html                   |  618 ++
 categories/Infrastructure/index.html          |  458 +
 categories/Linux/Oracle/Docker/index.html     |  458 +
 categories/Linux/Oracle/index.html            |  458 +
 categories/Linux/RPM/index.html               |  458 +
 categories/Linux/index.html                   |  521 ++
 categories/NodeJS/Npm/index.html              |  481 +
 categories/NodeJS/index.html                  |  541 ++
 categories/OracleLinux/index.html             |  458 +
 .../Nginx/index.html"                         |  458 +
 .../index.html"                               |  458 +
 categories/index.html                         |  458 +
 categories/linux/index.html                   |  458 +
 categories/linux/systemctl/index.html         |  458 +
 .../Webpack/index.html"                       |  498 ++
 .../index.html"                               |  541 ++
 .../index.html"                               |  578 ++
 .../CSS/index.html"                           |  458 +
 .../CSS3/index.html"                          |  458 +
 .../index.html"                               |  647 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  641 ++
 .../page/4/index.html"                        |  644 ++
 .../page/5/index.html"                        |  504 ++
 .../index.html"                               |  458 +
 .../index.html"                               |  644 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  501 ++
 .../index.html"                               |  498 ++
 .../\345\276\256\344\277\241/index.html"      |  458 +
 .../index.html"                               |  524 ++
 .../React/index.html"                         |  458 +
 .../Vue/index.html"                           |  547 ++
 .../index.html"                               |  567 ++
 .../Go\350\257\255\350\250\200/index.html"    |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  518 ++
 .../\345\205\250\346\240\210/index.html"      |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  478 +
 .../Labrary/index.html"                       |  458 +
 .../index.html"                               |  501 ++
 .../index.html"                               |  521 ++
 .../index.html"                               |  567 ++
 .../index.html"                               |  547 ++
 .../\346\236\266\346\236\204/index.html"      |  458 +
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  521 ++
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  501 ++
 .../index.html"                               |  656 ++
 .../index.html"                               |  481 +
 .../index.html"                               |  521 ++
 .../index.html"                               |  527 ++
 .../Docker-Compose/index.html"                |  458 +
 .../index.html"                               |  458 +
 css/main.css                                  | 2853 ++++++
 .../index.html                                |  607 ++
 en/2013/06/26/CSS-Triangle-Circle/index.html  |  623 ++
 .../Read-Let-your-boss-promote-you/index.html |  780 ++
 .../index.html                                |  688 ++
 .../index.html                                |  656 ++
 en/2017/08/30/Vue-VSCode-Snippets/index.html  |  777 ++
 en/2017/08/30/Vue-basic/index.html            |  739 ++
 en/2017/08/30/npm-source/index.html           |  608 ++
 .../use-GitHub-Hexo-Next-make-blog/index.html |  658 ++
 en/2017/10/12/VSCode-ESLint/index.html        |  597 ++
 en/2017/10/12/us-gitment/index.html           |  620 ++
 en/2017/10/12/web-quanzhan/index.html         |  606 ++
 en/2017/12/12/Git-Shell/index.html            |  641 ++
 en/2019/12/27/Actions/index.html              |  607 ++
 .../27/Vue-Component-Communication/index.html |  615 ++
 en/2019/12/30/begin-learn-java/index.html     |  591 ++
 en/2019/12/31/GoodBye-2019/index.html         |  621 ++
 en/2019/12/31/gitlab-cicd/index.html          |  664 ++
 .../12/31/weichat-h5-compatibility/index.html |  618 ++
 en/2020/01/01/Hello-2020/index.html           |  593 ++
 en/2020/01/02/21-Day-Challenge-01/index.html  |  599 ++
 en/2020/01/02/FE-guide-Closure/index.html     |  602 ++
 en/2020/01/02/FE-guide-dataType/index.html    |  655 ++
 en/2020/01/02/FE-guide-instanceof/index.html  |  590 ++
 en/2020/01/02/FE-guide-new/index.html         |  608 ++
 en/2020/01/02/FE-guide-prototype/index.html   |  646 ++
 en/2020/01/02/FE-guide-this/index.html        |  591 ++
 .../index.html"                               |  610 ++
 en/2020/01/03/FE-guide-Generator/index.html   |  589 ++
 .../03/FE-guide-Map-FlatMap-Reduce/index.html |  602 ++
 en/2020/01/03/FE-guide-Module/index.html      |  601 ++
 en/2020/01/03/FE-guide-Promise/index.html     |  592 ++
 en/2020/01/03/FE-guide-async-Proxy/index.html |  589 ++
 en/2020/01/03/FE-guide-async-await/index.html |  603 ++
 .../01/03/FE-guide-call-apply-bind/index.html |  596 ++
 en/2020/01/03/FE-guide-copy/index.html        |  621 ++
 .../03/FE-guide-debounce-throttle/index.html  |  605 ++
 en/2020/01/03/FE-guide-inherit/index.html     |  597 ++
 en/2020/01/03/FE-guide-store/index.html       |  628 ++
 .../index.html                                |  586 ++
 en/2020/01/04/Algorithm/index.html            |  734 ++
 en/2020/01/05/FE-guide-ArrayOprs/index.html   |  617 ++
 .../01/05/FE-guide-about-reduce/index.html    |  604 ++
 en/2020/01/05/FE-guide-currying/index.html    |  595 ++
 en/2020/01/05/FE-guide-vuepress/index.html    |  589 ++
 en/2020/01/09/FE-guide-Net/index.html         |  970 ++
 .../01/09/FE-guide-data-structure/index.html  |  706 ++
 en/2020/01/09/career/index.html               |  599 ++
 .../01/09/do-it-yourselfery-jsonp/index.html  |  590 ++
 .../index.html                                |  620 ++
 en/2020/01/13/FE-guide-inherit2/index.html    |  667 ++
 .../13/Javascript-Design-Pattern/index.html   |  665 ++
 .../13/do-it-yourselfery-promise/index.html   |  623 ++
 en/2020/01/13/hexo-search/index.html          |  596 ++
 .../01/22/Es6-arrowFunc-arguments/index.html  |  583 ++
 en/2020/01/22/FE-guide-safe/index.html        |  635 ++
 en/2020/01/22/Wepack-Tips/index.html          |  622 ++
 en/2020/02/11/SSR/index.html                  |  609 ++
 en/2020/02/11/restful-architecture/index.html |  602 ++
 en/2020/02/12/print-table-problem/index.html  |  591 ++
 .../02/12/vue-proxyTable-problem/index.html   |  586 ++
 .../index.html                                |  651 ++
 .../index.html                                |  693 ++
 .../index.html                                |  645 ++
 .../02/24/Vue-plug-in-development/index.html  |  606 ++
 .../index.html                                |  603 ++
 .../23/path-join-vs-path-resolve/index.html   |  587 ++
 .../do-it-yourselfery-EventEmitter/index.html |  592 ++
 .../do-it-yourselfery-async-await/index.html  |  584 ++
 .../do-it-yourselfery-call-apply/index.html   |  618 ++
 .../03/24/do-it-yourselfery-create/index.html |  588 ++
 .../03/24/do-it-yourselfery-flat/index.html   |  587 ++
 .../24/do-it-yourselfery-isArray/index.html   |  584 ++
 .../03/24/do-it-yourselfery-map/index.html    |  589 ++
 .../03/24/do-it-yourselfery-new/index.html    |  591 ++
 .../03/24/do-it-yourselfery-reduce/index.html |  587 ++
 .../index.html"                               |  583 ++
 .../index.html"                               |  585 ++
 en/2020/03/24/webpack-learning-1/index.html   |  877 ++
 .../04/03/source-code-react-diff/index.html   |  700 ++
 .../04/07/Electron-Offline-Build/index.html   |  586 ++
 .../04/07/webpack-uglifyjsplugin/index.html   |  623 ++
 .../04/15/node-sass-slow-problem/index.html   |  601 ++
 .../talk-about-full-stack-big-fd/index.html   |  598 ++
 en/2020/04/16/0-vuecli-3-component/index.html |  678 ++
 en/2020/04/16/what-is-npx/index.html          |  648 ++
 en/2020/05/14/css3-pointer-events/index.html  |  607 ++
 en/2020/05/28/Prettier-Setting/index.html     |  585 ++
 .../rpm\345\221\275\344\273\244/index.html"   |  663 ++
 .../index.html"                               |  610 ++
 en/2020/11/10/learn-cordova-1/index.html      |  719 ++
 en/2020/11/10/learn-go/index.html             |  587 ++
 en/2020/11/11/learn-ionic-1/index.html        |  640 ++
 .../index.html"                               |  611 ++
 .../index.html"                               |  600 ++
 .../index.html"                               |  702 ++
 .../index.html"                               |  785 ++
 .../index.html"                               |  732 ++
 .../index.html"                               |  634 ++
 en/2022/06/01/GIT Standard/index.html         |  654 ++
 .../index.html"                               |  823 ++
 en/2022/06/01/squid/index.html                |  606 ++
 .../index.html"                               |  728 ++
 .../index.html"                               |  660 ++
 .../index.html"                               |  588 ++
 en/2022/06/02/DockerFile/index.html           |  700 ++
 .../index.html"                               |  632 ++
 .../index.html"                               |  585 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  593 ++
 .../Nginx\346\214\207\344\273\244/index.html" |  591 ++
 .../06/09/http_stub_status_module/index.html  |  610 ++
 .../index.html"                               |  618 ++
 .../index.html"                               |  728 ++
 en/2022/06/30/nginx-timeout/index.html        |  669 ++
 .../index.html"                               |  609 ++
 .../index.html"                               |  586 ++
 .../index.html"                               |  652 ++
 .../02/Oracle-Linux-install-Docker/index.html |  590 ++
 .../index.html"                               |  578 ++
 .../index.html"                               |  586 ++
 en/2022/08/02/linux-scp/index.html            |  599 ++
 .../index.html"                               |  601 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  865 ++
 .../index.html"                               |  561 ++
 en/2023/09/20/test/index.html                 |  590 ++
 en/@attachment/README.html                    |  485 +
 en/about/index.html                           |  707 ++
 en/archives/2013/06/index.html                |  478 +
 en/archives/2013/index.html                   |  478 +
 en/archives/2015/12/index.html                |  458 +
 en/archives/2015/index.html                   |  458 +
 en/archives/2016/10/index.html                |  458 +
 en/archives/2016/index.html                   |  458 +
 en/archives/2017/08/index.html                |  518 ++
 en/archives/2017/10/index.html                |  518 ++
 en/archives/2017/12/index.html                |  458 +
 en/archives/2017/index.html                   |  618 ++
 en/archives/2019/12/index.html                |  558 ++
 en/archives/2019/index.html                   |  558 ++
 en/archives/2020/01/index.html                |  641 ++
 en/archives/2020/01/page/2/index.html         |  641 ++
 en/archives/2020/01/page/3/index.html         |  641 ++
 en/archives/2020/01/page/4/index.html         |  601 ++
 en/archives/2020/02/index.html                |  598 ++
 en/archives/2020/03/index.html                |  641 ++
 en/archives/2020/03/page/2/index.html         |  521 ++
 en/archives/2020/04/index.html                |  578 ++
 en/archives/2020/05/index.html                |  478 +
 en/archives/2020/07/index.html                |  458 +
 en/archives/2020/08/index.html                |  458 +
 en/archives/2020/11/index.html                |  498 ++
 en/archives/2020/index.html                   |  641 ++
 en/archives/2020/page/2/index.html            |  641 ++
 en/archives/2020/page/3/index.html            |  641 ++
 en/archives/2020/page/4/index.html            |  641 ++
 en/archives/2020/page/5/index.html            |  641 ++
 en/archives/2020/page/6/index.html            |  641 ++
 en/archives/2020/page/7/index.html            |  641 ++
 en/archives/2020/page/8/index.html            |  521 ++
 en/archives/2021/05/index.html                |  478 +
 en/archives/2021/index.html                   |  478 +
 en/archives/2022/03/index.html                |  478 +
 en/archives/2022/06/index.html                |  641 ++
 en/archives/2022/06/page/2/index.html         |  621 ++
 en/archives/2022/08/index.html                |  638 ++
 en/archives/2022/index.html                   |  641 ++
 en/archives/2022/page/2/index.html            |  641 ++
 en/archives/2022/page/3/index.html            |  641 ++
 en/archives/2022/page/4/index.html            |  461 +
 en/archives/2023/09/index.html                |  478 +
 en/archives/2023/index.html                   |  478 +
 en/archives/index.html                        |  644 ++
 en/archives/page/10/index.html                |  641 ++
 en/archives/page/11/index.html                |  644 ++
 en/archives/page/12/index.html                |  644 ++
 en/archives/page/13/index.html                |  610 ++
 en/archives/page/2/index.html                 |  641 ++
 en/archives/page/3/index.html                 |  641 ++
 en/archives/page/4/index.html                 |  647 ++
 en/archives/page/5/index.html                 |  641 ++
 en/archives/page/6/index.html                 |  641 ++
 en/archives/page/7/index.html                 |  641 ++
 en/archives/page/8/index.html                 |  641 ++
 en/archives/page/9/index.html                 |  641 ++
 en/categories/Database/Postgresql/index.html  |  458 +
 en/categories/Database/index.html             |  458 +
 en/categories/Docker/index.html               |  478 +
 en/categories/Infra/Docker/index.html         |  538 ++
 .../Nginx/index.html"                         |  498 ++
 .../Squid/index.html"                         |  458 +
 .../index.html"                               |  518 ++
 en/categories/Infra/index.html                |  618 ++
 en/categories/Infrastructure/index.html       |  458 +
 en/categories/Linux/Oracle/Docker/index.html  |  458 +
 en/categories/Linux/Oracle/index.html         |  458 +
 en/categories/Linux/RPM/index.html            |  458 +
 en/categories/Linux/index.html                |  521 ++
 en/categories/NodeJS/Npm/index.html           |  481 +
 en/categories/NodeJS/index.html               |  541 ++
 en/categories/OracleLinux/index.html          |  458 +
 .../Nginx/index.html"                         |  458 +
 .../index.html"                               |  458 +
 en/categories/index.html                      |  470 +
 en/categories/linux/index.html                |  458 +
 en/categories/linux/systemctl/index.html      |  458 +
 .../Webpack/index.html"                       |  498 ++
 .../index.html"                               |  541 ++
 .../index.html"                               |  578 ++
 .../CSS/index.html"                           |  458 +
 .../CSS3/index.html"                          |  458 +
 .../index.html"                               |  647 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  641 ++
 .../page/4/index.html"                        |  644 ++
 .../page/5/index.html"                        |  504 ++
 .../index.html"                               |  458 +
 .../index.html"                               |  644 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  501 ++
 .../index.html"                               |  498 ++
 .../\345\276\256\344\277\241/index.html"      |  458 +
 .../index.html"                               |  524 ++
 .../React/index.html"                         |  458 +
 .../Vue/index.html"                           |  547 ++
 .../index.html"                               |  567 ++
 .../Go\350\257\255\350\250\200/index.html"    |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  518 ++
 .../\345\205\250\346\240\210/index.html"      |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  478 +
 .../Labrary/index.html"                       |  458 +
 .../index.html"                               |  501 ++
 .../index.html"                               |  521 ++
 .../index.html"                               |  567 ++
 .../index.html"                               |  547 ++
 .../\346\236\266\346\236\204/index.html"      |  458 +
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  521 ++
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  501 ++
 .../index.html"                               |  656 ++
 .../index.html"                               |  481 +
 .../index.html"                               |  521 ++
 .../index.html"                               |  527 ++
 .../Docker-Compose/index.html"                |  458 +
 .../index.html"                               |  458 +
 en/index.html                                 |  506 ++
 en/page/10/index.html                         |  492 ++
 en/page/100/index.html                        |  534 ++
 en/page/101/index.html                        |  521 ++
 en/page/102/index.html                        |  513 ++
 en/page/103/index.html                        |  523 ++
 en/page/104/index.html                        |  504 ++
 en/page/105/index.html                        |  503 ++
 en/page/106/index.html                        |  508 ++
 en/page/107/index.html                        |  507 ++
 en/page/108/index.html                        |  510 ++
 en/page/109/index.html                        |  509 ++
 en/page/11/index.html                         |  508 ++
 en/page/110/index.html                        |  532 ++
 en/page/111/index.html                        |  497 ++
 en/page/112/index.html                        |  507 ++
 en/page/113/index.html                        |  507 ++
 en/page/114/index.html                        |  507 ++
 en/page/115/index.html                        |  507 ++
 en/page/116/index.html                        |  554 ++
 en/page/117/index.html                        |  507 ++
 en/page/118/index.html                        |  507 ++
 en/page/119/index.html                        |  507 ++
 en/page/12/index.html                         |  512 ++
 en/page/120/index.html                        |  512 ++
 en/page/121/index.html                        |  507 ++
 en/page/122/index.html                        |  507 ++
 en/page/123/index.html                        |  507 ++
 en/page/124/index.html                        |  507 ++
 en/page/125/index.html                        |  604 ++
 en/page/126/index.html                        |  696 ++
 en/page/127/index.html                        |  507 ++
 en/page/128/index.html                        |  526 ++
 en/page/13/index.html                         |  582 ++
 en/page/14/index.html                         |  641 ++
 en/page/15/index.html                         |  531 ++
 en/page/16/index.html                         |  521 ++
 en/page/17/index.html                         |  503 ++
 en/page/18/index.html                         |  504 ++
 en/page/19/index.html                         |  545 ++
 en/page/2/index.html                          |  477 +
 en/page/20/index.html                         |  508 ++
 en/page/21/index.html                         |  498 ++
 en/page/22/index.html                         |  508 ++
 en/page/23/index.html                         |  613 ++
 en/page/24/index.html                         |  567 ++
 en/page/25/index.html                         |  736 ++
 en/page/26/index.html                         |  645 ++
 en/page/27/index.html                         |  570 ++
 en/page/28/index.html                         |  641 ++
 en/page/29/index.html                         |  548 ++
 en/page/3/index.html                          |  499 ++
 en/page/30/index.html                         |  519 ++
 en/page/31/index.html                         |  501 ++
 en/page/32/index.html                         |  508 ++
 en/page/33/index.html                         |  507 ++
 en/page/34/index.html                         |  507 ++
 en/page/35/index.html                         |  507 ++
 en/page/36/index.html                         |  509 ++
 en/page/37/index.html                         |  508 ++
 en/page/38/index.html                         |  507 ++
 en/page/39/index.html                         |  523 ++
 en/page/4/index.html                          |  499 ++
 en/page/40/index.html                         |  576 ++
 en/page/41/index.html                         |  504 ++
 en/page/42/index.html                         |  507 ++
 en/page/43/index.html                         |  503 ++
 en/page/44/index.html                         |  510 ++
 en/page/45/index.html                         |  508 ++
 en/page/46/index.html                         |  505 ++
 en/page/47/index.html                         |  504 ++
 en/page/48/index.html                         |  507 ++
 en/page/49/index.html                         |  506 ++
 en/page/5/index.html                          |  565 ++
 en/page/50/index.html                         |  784 ++
 en/page/51/index.html                         |  531 ++
 en/page/52/index.html                         |  497 ++
 en/page/53/index.html                         |  505 ++
 en/page/54/index.html                         |  498 ++
 en/page/55/index.html                         |  502 ++
 en/page/56/index.html                         |  501 ++
 en/page/57/index.html                         |  496 ++
 en/page/58/index.html                         |  500 ++
 en/page/59/index.html                         |  497 ++
 en/page/6/index.html                          |  519 ++
 en/page/60/index.html                         |  504 ++
 en/page/61/index.html                         |  500 ++
 en/page/62/index.html                         |  500 ++
 en/page/63/index.html                         |  512 ++
 en/page/64/index.html                         |  519 ++
 en/page/65/index.html                         |  558 ++
 en/page/66/index.html                         |  606 ++
 en/page/67/index.html                         |  564 ++
 en/page/68/index.html                         |  500 ++
 en/page/69/index.html                         |  504 ++
 en/page/7/index.html                          |  503 ++
 en/page/70/index.html                         |  513 ++
 en/page/71/index.html                         |  518 ++
 en/page/72/index.html                         |  507 ++
 en/page/73/index.html                         |  507 ++
 en/page/74/index.html                         |  497 ++
 en/page/75/index.html                         |  507 ++
 en/page/76/index.html                         |  503 ++
 en/page/77/index.html                         |  580 ++
 en/page/78/index.html                         |  536 ++
 en/page/79/index.html                         |  512 ++
 en/page/8/index.html                          |  778 ++
 en/page/80/index.html                         |  507 ++
 en/page/81/index.html                         |  503 ++
 en/page/82/index.html                         |  617 ++
 en/page/83/index.html                         |  880 ++
 en/page/84/index.html                         |  507 ++
 en/page/85/index.html                         |  508 ++
 en/page/86/index.html                         |  515 ++
 en/page/87/index.html                         |  528 ++
 en/page/88/index.html                         |  634 ++
 en/page/89/index.html                         |  541 ++
 en/page/9/index.html                          |  514 ++
 en/page/90/index.html                         |  497 ++
 en/page/91/index.html                         |  502 ++
 en/page/92/index.html                         |  516 ++
 en/page/93/index.html                         |  515 ++
 en/page/94/index.html                         |  502 ++
 en/page/95/index.html                         |  505 ++
 en/page/96/index.html                         |  509 ++
 en/page/97/index.html                         |  510 ++
 en/page/98/index.html                         |  518 ++
 en/page/99/index.html                         |  514 ++
 en/tags/index.html                            |  470 +
 images/algolia_logo.svg                       |    9 +
 images/apple-touch-icon-next.png              |  Bin 0 -> 1544 bytes
 images/avatar.gif                             |  Bin 0 -> 1793 bytes
 images/avatar.jpg                             |  Bin 0 -> 15611 bytes
 images/cc-by-nc-nd.svg                        |  121 +
 images/cc-by-nc-sa.svg                        |  121 +
 images/cc-by-nc.svg                           |  121 +
 images/cc-by-nd.svg                           |  117 +
 images/cc-by-sa.svg                           |  121 +
 images/cc-by.svg                              |  121 +
 images/cc-zero.svg                            |   72 +
 images/favicon-32x32-next.png                 |  Bin 0 -> 640 bytes
 images/logo.svg                               |   23 +
 images/wechatpay.jpg                          |  Bin 0 -> 188112 bytes
 index.html                                    |  506 ++
 .../index.html                                |  607 ++
 ja/2013/06/26/CSS-Triangle-Circle/index.html  |  623 ++
 .../Read-Let-your-boss-promote-you/index.html |  780 ++
 .../index.html                                |  688 ++
 .../index.html                                |  656 ++
 ja/2017/08/30/Vue-VSCode-Snippets/index.html  |  777 ++
 ja/2017/08/30/Vue-basic/index.html            |  739 ++
 ja/2017/08/30/npm-source/index.html           |  608 ++
 .../use-GitHub-Hexo-Next-make-blog/index.html |  658 ++
 ja/2017/10/12/VSCode-ESLint/index.html        |  597 ++
 ja/2017/10/12/us-gitment/index.html           |  620 ++
 ja/2017/10/12/web-quanzhan/index.html         |  606 ++
 ja/2017/12/12/Git-Shell/index.html            |  641 ++
 ja/2019/12/27/Actions/index.html              |  607 ++
 .../27/Vue-Component-Communication/index.html |  615 ++
 ja/2019/12/30/begin-learn-java/index.html     |  591 ++
 ja/2019/12/31/GoodBye-2019/index.html         |  621 ++
 ja/2019/12/31/gitlab-cicd/index.html          |  664 ++
 .../12/31/weichat-h5-compatibility/index.html |  618 ++
 ja/2020/01/01/Hello-2020/index.html           |  593 ++
 ja/2020/01/02/21-Day-Challenge-01/index.html  |  599 ++
 ja/2020/01/02/FE-guide-Closure/index.html     |  602 ++
 ja/2020/01/02/FE-guide-dataType/index.html    |  655 ++
 ja/2020/01/02/FE-guide-instanceof/index.html  |  590 ++
 ja/2020/01/02/FE-guide-new/index.html         |  608 ++
 ja/2020/01/02/FE-guide-prototype/index.html   |  646 ++
 ja/2020/01/02/FE-guide-this/index.html        |  591 ++
 .../index.html"                               |  610 ++
 ja/2020/01/03/FE-guide-Generator/index.html   |  589 ++
 .../03/FE-guide-Map-FlatMap-Reduce/index.html |  602 ++
 ja/2020/01/03/FE-guide-Module/index.html      |  601 ++
 ja/2020/01/03/FE-guide-Promise/index.html     |  592 ++
 ja/2020/01/03/FE-guide-async-Proxy/index.html |  589 ++
 ja/2020/01/03/FE-guide-async-await/index.html |  603 ++
 .../01/03/FE-guide-call-apply-bind/index.html |  596 ++
 ja/2020/01/03/FE-guide-copy/index.html        |  621 ++
 .../03/FE-guide-debounce-throttle/index.html  |  605 ++
 ja/2020/01/03/FE-guide-inherit/index.html     |  597 ++
 ja/2020/01/03/FE-guide-store/index.html       |  628 ++
 .../index.html                                |  586 ++
 ja/2020/01/04/Algorithm/index.html            |  734 ++
 ja/2020/01/05/FE-guide-ArrayOprs/index.html   |  617 ++
 .../01/05/FE-guide-about-reduce/index.html    |  604 ++
 ja/2020/01/05/FE-guide-currying/index.html    |  595 ++
 ja/2020/01/05/FE-guide-vuepress/index.html    |  589 ++
 ja/2020/01/09/FE-guide-Net/index.html         |  970 ++
 .../01/09/FE-guide-data-structure/index.html  |  706 ++
 ja/2020/01/09/career/index.html               |  599 ++
 .../01/09/do-it-yourselfery-jsonp/index.html  |  590 ++
 .../index.html                                |  620 ++
 ja/2020/01/13/FE-guide-inherit2/index.html    |  667 ++
 .../13/Javascript-Design-Pattern/index.html   |  665 ++
 .../13/do-it-yourselfery-promise/index.html   |  623 ++
 ja/2020/01/13/hexo-search/index.html          |  596 ++
 .../01/22/Es6-arrowFunc-arguments/index.html  |  583 ++
 ja/2020/01/22/FE-guide-safe/index.html        |  635 ++
 ja/2020/01/22/Wepack-Tips/index.html          |  622 ++
 ja/2020/02/11/SSR/index.html                  |  609 ++
 ja/2020/02/11/restful-architecture/index.html |  602 ++
 ja/2020/02/12/print-table-problem/index.html  |  591 ++
 .../02/12/vue-proxyTable-problem/index.html   |  586 ++
 .../index.html                                |  651 ++
 .../index.html                                |  693 ++
 .../index.html                                |  645 ++
 .../02/24/Vue-plug-in-development/index.html  |  606 ++
 .../index.html                                |  603 ++
 .../23/path-join-vs-path-resolve/index.html   |  587 ++
 .../do-it-yourselfery-EventEmitter/index.html |  592 ++
 .../do-it-yourselfery-async-await/index.html  |  584 ++
 .../do-it-yourselfery-call-apply/index.html   |  618 ++
 .../03/24/do-it-yourselfery-create/index.html |  588 ++
 .../03/24/do-it-yourselfery-flat/index.html   |  587 ++
 .../24/do-it-yourselfery-isArray/index.html   |  584 ++
 .../03/24/do-it-yourselfery-map/index.html    |  589 ++
 .../03/24/do-it-yourselfery-new/index.html    |  591 ++
 .../03/24/do-it-yourselfery-reduce/index.html |  587 ++
 .../index.html"                               |  583 ++
 .../index.html"                               |  585 ++
 ja/2020/03/24/webpack-learning-1/index.html   |  877 ++
 .../04/03/source-code-react-diff/index.html   |  700 ++
 .../04/07/Electron-Offline-Build/index.html   |  586 ++
 .../04/07/webpack-uglifyjsplugin/index.html   |  623 ++
 .../04/15/node-sass-slow-problem/index.html   |  601 ++
 .../talk-about-full-stack-big-fd/index.html   |  598 ++
 ja/2020/04/16/0-vuecli-3-component/index.html |  678 ++
 ja/2020/04/16/what-is-npx/index.html          |  648 ++
 ja/2020/05/14/css3-pointer-events/index.html  |  607 ++
 ja/2020/05/28/Prettier-Setting/index.html     |  585 ++
 .../rpm\345\221\275\344\273\244/index.html"   |  663 ++
 .../index.html"                               |  610 ++
 ja/2020/11/10/learn-cordova-1/index.html      |  719 ++
 ja/2020/11/10/learn-go/index.html             |  587 ++
 ja/2020/11/11/learn-ionic-1/index.html        |  640 ++
 .../index.html"                               |  611 ++
 .../index.html"                               |  600 ++
 .../index.html"                               |  702 ++
 .../index.html"                               |  785 ++
 .../index.html"                               |  732 ++
 .../index.html"                               |  634 ++
 ja/2022/06/01/GIT Standard/index.html         |  654 ++
 .../index.html"                               |  823 ++
 ja/2022/06/01/squid/index.html                |  606 ++
 .../index.html"                               |  728 ++
 .../index.html"                               |  660 ++
 .../index.html"                               |  588 ++
 ja/2022/06/02/DockerFile/index.html           |  700 ++
 .../index.html"                               |  632 ++
 .../index.html"                               |  585 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  593 ++
 .../Nginx\346\214\207\344\273\244/index.html" |  591 ++
 .../06/09/http_stub_status_module/index.html  |  610 ++
 .../index.html"                               |  618 ++
 .../index.html"                               |  728 ++
 ja/2022/06/30/nginx-timeout/index.html        |  669 ++
 .../index.html"                               |  609 ++
 .../index.html"                               |  586 ++
 .../index.html"                               |  652 ++
 .../02/Oracle-Linux-install-Docker/index.html |  590 ++
 .../index.html"                               |  578 ++
 .../index.html"                               |  586 ++
 ja/2022/08/02/linux-scp/index.html            |  599 ++
 .../index.html"                               |  601 ++
 .../index.html"                               |  595 ++
 .../index.html"                               |  865 ++
 .../index.html"                               |  561 ++
 ja/2023/09/20/test/index.html                 |  590 ++
 ja/@attachment/README.html                    |  485 +
 ja/about/index.html                           |  705 ++
 ja/archives/2013/06/index.html                |  478 +
 ja/archives/2013/index.html                   |  478 +
 ja/archives/2015/12/index.html                |  458 +
 ja/archives/2015/index.html                   |  458 +
 ja/archives/2016/10/index.html                |  458 +
 ja/archives/2016/index.html                   |  458 +
 ja/archives/2017/08/index.html                |  518 ++
 ja/archives/2017/10/index.html                |  518 ++
 ja/archives/2017/12/index.html                |  458 +
 ja/archives/2017/index.html                   |  618 ++
 ja/archives/2019/12/index.html                |  558 ++
 ja/archives/2019/index.html                   |  558 ++
 ja/archives/2020/01/index.html                |  641 ++
 ja/archives/2020/01/page/2/index.html         |  641 ++
 ja/archives/2020/01/page/3/index.html         |  641 ++
 ja/archives/2020/01/page/4/index.html         |  601 ++
 ja/archives/2020/02/index.html                |  598 ++
 ja/archives/2020/03/index.html                |  641 ++
 ja/archives/2020/03/page/2/index.html         |  521 ++
 ja/archives/2020/04/index.html                |  578 ++
 ja/archives/2020/05/index.html                |  478 +
 ja/archives/2020/07/index.html                |  458 +
 ja/archives/2020/08/index.html                |  458 +
 ja/archives/2020/11/index.html                |  498 ++
 ja/archives/2020/index.html                   |  641 ++
 ja/archives/2020/page/2/index.html            |  641 ++
 ja/archives/2020/page/3/index.html            |  641 ++
 ja/archives/2020/page/4/index.html            |  641 ++
 ja/archives/2020/page/5/index.html            |  641 ++
 ja/archives/2020/page/6/index.html            |  641 ++
 ja/archives/2020/page/7/index.html            |  641 ++
 ja/archives/2020/page/8/index.html            |  521 ++
 ja/archives/2021/05/index.html                |  478 +
 ja/archives/2021/index.html                   |  478 +
 ja/archives/2022/03/index.html                |  478 +
 ja/archives/2022/06/index.html                |  641 ++
 ja/archives/2022/06/page/2/index.html         |  621 ++
 ja/archives/2022/08/index.html                |  638 ++
 ja/archives/2022/index.html                   |  641 ++
 ja/archives/2022/page/2/index.html            |  641 ++
 ja/archives/2022/page/3/index.html            |  641 ++
 ja/archives/2022/page/4/index.html            |  461 +
 ja/archives/2023/09/index.html                |  478 +
 ja/archives/2023/index.html                   |  478 +
 ja/archives/index.html                        |  644 ++
 ja/archives/page/10/index.html                |  641 ++
 ja/archives/page/11/index.html                |  644 ++
 ja/archives/page/12/index.html                |  644 ++
 ja/archives/page/13/index.html                |  610 ++
 ja/archives/page/2/index.html                 |  641 ++
 ja/archives/page/3/index.html                 |  641 ++
 ja/archives/page/4/index.html                 |  647 ++
 ja/archives/page/5/index.html                 |  641 ++
 ja/archives/page/6/index.html                 |  641 ++
 ja/archives/page/7/index.html                 |  641 ++
 ja/archives/page/8/index.html                 |  641 ++
 ja/archives/page/9/index.html                 |  641 ++
 ja/categories/Database/Postgresql/index.html  |  458 +
 ja/categories/Database/index.html             |  458 +
 ja/categories/Docker/index.html               |  478 +
 ja/categories/Infra/Docker/index.html         |  538 ++
 .../Nginx/index.html"                         |  498 ++
 .../Squid/index.html"                         |  458 +
 .../index.html"                               |  518 ++
 ja/categories/Infra/index.html                |  618 ++
 ja/categories/Infrastructure/index.html       |  458 +
 ja/categories/Linux/Oracle/Docker/index.html  |  458 +
 ja/categories/Linux/Oracle/index.html         |  458 +
 ja/categories/Linux/RPM/index.html            |  458 +
 ja/categories/Linux/index.html                |  521 ++
 ja/categories/NodeJS/Npm/index.html           |  481 +
 ja/categories/NodeJS/index.html               |  541 ++
 ja/categories/OracleLinux/index.html          |  458 +
 .../Nginx/index.html"                         |  458 +
 .../index.html"                               |  458 +
 ja/categories/index.html                      |  470 +
 ja/categories/linux/index.html                |  458 +
 ja/categories/linux/systemctl/index.html      |  458 +
 .../Webpack/index.html"                       |  498 ++
 .../index.html"                               |  541 ++
 .../index.html"                               |  578 ++
 .../CSS/index.html"                           |  458 +
 .../CSS3/index.html"                          |  458 +
 .../index.html"                               |  647 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  641 ++
 .../page/4/index.html"                        |  644 ++
 .../page/5/index.html"                        |  504 ++
 .../index.html"                               |  458 +
 .../index.html"                               |  644 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  501 ++
 .../index.html"                               |  498 ++
 .../\345\276\256\344\277\241/index.html"      |  458 +
 .../index.html"                               |  524 ++
 .../React/index.html"                         |  458 +
 .../Vue/index.html"                           |  547 ++
 .../index.html"                               |  567 ++
 .../Go\350\257\255\350\250\200/index.html"    |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  518 ++
 .../\345\205\250\346\240\210/index.html"      |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  478 +
 .../Labrary/index.html"                       |  458 +
 .../index.html"                               |  501 ++
 .../index.html"                               |  521 ++
 .../index.html"                               |  567 ++
 .../index.html"                               |  547 ++
 .../\346\236\266\346\236\204/index.html"      |  458 +
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  521 ++
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  501 ++
 .../index.html"                               |  656 ++
 .../index.html"                               |  481 +
 .../index.html"                               |  521 ++
 .../index.html"                               |  527 ++
 .../Docker-Compose/index.html"                |  458 +
 .../index.html"                               |  458 +
 ja/index.html                                 |  506 ++
 ja/page/10/index.html                         |  492 ++
 ja/page/100/index.html                        |  534 ++
 ja/page/101/index.html                        |  521 ++
 ja/page/102/index.html                        |  513 ++
 ja/page/103/index.html                        |  523 ++
 ja/page/104/index.html                        |  504 ++
 ja/page/105/index.html                        |  503 ++
 ja/page/106/index.html                        |  508 ++
 ja/page/107/index.html                        |  507 ++
 ja/page/108/index.html                        |  510 ++
 ja/page/109/index.html                        |  509 ++
 ja/page/11/index.html                         |  508 ++
 ja/page/110/index.html                        |  532 ++
 ja/page/111/index.html                        |  497 ++
 ja/page/112/index.html                        |  507 ++
 ja/page/113/index.html                        |  507 ++
 ja/page/114/index.html                        |  507 ++
 ja/page/115/index.html                        |  507 ++
 ja/page/116/index.html                        |  554 ++
 ja/page/117/index.html                        |  507 ++
 ja/page/118/index.html                        |  507 ++
 ja/page/119/index.html                        |  507 ++
 ja/page/12/index.html                         |  512 ++
 ja/page/120/index.html                        |  512 ++
 ja/page/121/index.html                        |  507 ++
 ja/page/122/index.html                        |  507 ++
 ja/page/123/index.html                        |  507 ++
 ja/page/124/index.html                        |  507 ++
 ja/page/125/index.html                        |  604 ++
 ja/page/126/index.html                        |  696 ++
 ja/page/127/index.html                        |  507 ++
 ja/page/128/index.html                        |  526 ++
 ja/page/13/index.html                         |  582 ++
 ja/page/14/index.html                         |  641 ++
 ja/page/15/index.html                         |  531 ++
 ja/page/16/index.html                         |  521 ++
 ja/page/17/index.html                         |  503 ++
 ja/page/18/index.html                         |  504 ++
 ja/page/19/index.html                         |  545 ++
 ja/page/2/index.html                          |  477 +
 ja/page/20/index.html                         |  508 ++
 ja/page/21/index.html                         |  498 ++
 ja/page/22/index.html                         |  508 ++
 ja/page/23/index.html                         |  613 ++
 ja/page/24/index.html                         |  567 ++
 ja/page/25/index.html                         |  736 ++
 ja/page/26/index.html                         |  645 ++
 ja/page/27/index.html                         |  570 ++
 ja/page/28/index.html                         |  641 ++
 ja/page/29/index.html                         |  548 ++
 ja/page/3/index.html                          |  499 ++
 ja/page/30/index.html                         |  519 ++
 ja/page/31/index.html                         |  501 ++
 ja/page/32/index.html                         |  508 ++
 ja/page/33/index.html                         |  507 ++
 ja/page/34/index.html                         |  507 ++
 ja/page/35/index.html                         |  507 ++
 ja/page/36/index.html                         |  509 ++
 ja/page/37/index.html                         |  508 ++
 ja/page/38/index.html                         |  507 ++
 ja/page/39/index.html                         |  523 ++
 ja/page/4/index.html                          |  499 ++
 ja/page/40/index.html                         |  576 ++
 ja/page/41/index.html                         |  504 ++
 ja/page/42/index.html                         |  507 ++
 ja/page/43/index.html                         |  503 ++
 ja/page/44/index.html                         |  510 ++
 ja/page/45/index.html                         |  508 ++
 ja/page/46/index.html                         |  505 ++
 ja/page/47/index.html                         |  504 ++
 ja/page/48/index.html                         |  507 ++
 ja/page/49/index.html                         |  506 ++
 ja/page/5/index.html                          |  565 ++
 ja/page/50/index.html                         |  784 ++
 ja/page/51/index.html                         |  531 ++
 ja/page/52/index.html                         |  497 ++
 ja/page/53/index.html                         |  505 ++
 ja/page/54/index.html                         |  498 ++
 ja/page/55/index.html                         |  502 ++
 ja/page/56/index.html                         |  501 ++
 ja/page/57/index.html                         |  496 ++
 ja/page/58/index.html                         |  500 ++
 ja/page/59/index.html                         |  497 ++
 ja/page/6/index.html                          |  519 ++
 ja/page/60/index.html                         |  504 ++
 ja/page/61/index.html                         |  500 ++
 ja/page/62/index.html                         |  500 ++
 ja/page/63/index.html                         |  512 ++
 ja/page/64/index.html                         |  519 ++
 ja/page/65/index.html                         |  558 ++
 ja/page/66/index.html                         |  606 ++
 ja/page/67/index.html                         |  564 ++
 ja/page/68/index.html                         |  500 ++
 ja/page/69/index.html                         |  504 ++
 ja/page/7/index.html                          |  503 ++
 ja/page/70/index.html                         |  513 ++
 ja/page/71/index.html                         |  518 ++
 ja/page/72/index.html                         |  507 ++
 ja/page/73/index.html                         |  507 ++
 ja/page/74/index.html                         |  497 ++
 ja/page/75/index.html                         |  507 ++
 ja/page/76/index.html                         |  503 ++
 ja/page/77/index.html                         |  580 ++
 ja/page/78/index.html                         |  536 ++
 ja/page/79/index.html                         |  512 ++
 ja/page/8/index.html                          |  778 ++
 ja/page/80/index.html                         |  507 ++
 ja/page/81/index.html                         |  503 ++
 ja/page/82/index.html                         |  617 ++
 ja/page/83/index.html                         |  880 ++
 ja/page/84/index.html                         |  507 ++
 ja/page/85/index.html                         |  508 ++
 ja/page/86/index.html                         |  515 ++
 ja/page/87/index.html                         |  528 ++
 ja/page/88/index.html                         |  634 ++
 ja/page/89/index.html                         |  541 ++
 ja/page/9/index.html                          |  514 ++
 ja/page/90/index.html                         |  497 ++
 ja/page/91/index.html                         |  502 ++
 ja/page/92/index.html                         |  516 ++
 ja/page/93/index.html                         |  515 ++
 ja/page/94/index.html                         |  502 ++
 ja/page/95/index.html                         |  505 ++
 ja/page/96/index.html                         |  509 ++
 ja/page/97/index.html                         |  510 ++
 ja/page/98/index.html                         |  518 ++
 ja/page/99/index.html                         |  514 ++
 ja/tags/index.html                            |  470 +
 js/local-search.js                            |  278 +
 js/motion.js                                  |  177 +
 js/next-boot.js                               |  114 +
 js/schemes/pisces.js                          |   86 +
 js/utils.js                                   |  415 +
 lib/anime.min.js                              |    8 +
 lib/font-awesome/css/all.min.css              |    5 +
 lib/font-awesome/webfonts/fa-brands-400.woff2 |  Bin 0 -> 76612 bytes
 .../webfonts/fa-regular-400.woff2             |  Bin 0 -> 13584 bytes
 lib/font-awesome/webfonts/fa-solid-900.woff2  |  Bin 0 -> 79444 bytes
 lib/velocity/velocity.min.js                  |    4 +
 lib/velocity/velocity.ui.min.js               |    2 +
 live2dw/assets/moc/wanko.1024/texture_00.png  |  Bin 0 -> 114061 bytes
 live2dw/assets/moc/wanko.moc                  |  Bin 0 -> 86014 bytes
 live2dw/assets/mtn/idle_01.mtn                |   24 +
 live2dw/assets/mtn/idle_02.mtn                |   24 +
 live2dw/assets/mtn/idle_03.mtn                |   24 +
 live2dw/assets/mtn/idle_04.mtn                |   24 +
 live2dw/assets/mtn/shake_01.mtn               |   24 +
 live2dw/assets/mtn/shake_02.mtn               |   24 +
 live2dw/assets/mtn/touch_01.mtn               |   24 +
 live2dw/assets/mtn/touch_02.mtn               |   24 +
 live2dw/assets/mtn/touch_03.mtn               |   24 +
 live2dw/assets/mtn/touch_04.mtn               |   24 +
 live2dw/assets/mtn/touch_05.mtn               |   24 +
 live2dw/assets/mtn/touch_06.mtn               |   24 +
 live2dw/assets/wanko.model.json               |    1 +
 live2dw/lib/L2Dwidget.0.min.js                |    3 +
 live2dw/lib/L2Dwidget.0.min.js.map            |    1 +
 live2dw/lib/L2Dwidget.min.js                  |    3 +
 live2dw/lib/L2Dwidget.min.js.map              |    1 +
 page/10/index.html                            |  492 ++
 page/100/index.html                           |  534 ++
 page/101/index.html                           |  521 ++
 page/102/index.html                           |  513 ++
 page/103/index.html                           |  523 ++
 page/104/index.html                           |  504 ++
 page/105/index.html                           |  503 ++
 page/106/index.html                           |  508 ++
 page/107/index.html                           |  507 ++
 page/108/index.html                           |  510 ++
 page/109/index.html                           |  509 ++
 page/11/index.html                            |  508 ++
 page/110/index.html                           |  532 ++
 page/111/index.html                           |  497 ++
 page/112/index.html                           |  507 ++
 page/113/index.html                           |  507 ++
 page/114/index.html                           |  507 ++
 page/115/index.html                           |  507 ++
 page/116/index.html                           |  554 ++
 page/117/index.html                           |  507 ++
 page/118/index.html                           |  507 ++
 page/119/index.html                           |  507 ++
 page/12/index.html                            |  512 ++
 page/120/index.html                           |  512 ++
 page/121/index.html                           |  507 ++
 page/122/index.html                           |  507 ++
 page/123/index.html                           |  507 ++
 page/124/index.html                           |  507 ++
 page/125/index.html                           |  604 ++
 page/126/index.html                           |  696 ++
 page/127/index.html                           |  507 ++
 page/128/index.html                           |  526 ++
 page/13/index.html                            |  582 ++
 page/14/index.html                            |  641 ++
 page/15/index.html                            |  531 ++
 page/16/index.html                            |  521 ++
 page/17/index.html                            |  503 ++
 page/18/index.html                            |  504 ++
 page/19/index.html                            |  545 ++
 page/2/index.html                             |  477 +
 page/20/index.html                            |  508 ++
 page/21/index.html                            |  498 ++
 page/22/index.html                            |  508 ++
 page/23/index.html                            |  613 ++
 page/24/index.html                            |  567 ++
 page/25/index.html                            |  736 ++
 page/26/index.html                            |  645 ++
 page/27/index.html                            |  570 ++
 page/28/index.html                            |  641 ++
 page/29/index.html                            |  548 ++
 page/3/index.html                             |  499 ++
 page/30/index.html                            |  519 ++
 page/31/index.html                            |  501 ++
 page/32/index.html                            |  508 ++
 page/33/index.html                            |  507 ++
 page/34/index.html                            |  507 ++
 page/35/index.html                            |  507 ++
 page/36/index.html                            |  509 ++
 page/37/index.html                            |  508 ++
 page/38/index.html                            |  507 ++
 page/39/index.html                            |  523 ++
 page/4/index.html                             |  499 ++
 page/40/index.html                            |  576 ++
 page/41/index.html                            |  504 ++
 page/42/index.html                            |  507 ++
 page/43/index.html                            |  503 ++
 page/44/index.html                            |  510 ++
 page/45/index.html                            |  508 ++
 page/46/index.html                            |  505 ++
 page/47/index.html                            |  504 ++
 page/48/index.html                            |  507 ++
 page/49/index.html                            |  506 ++
 page/5/index.html                             |  565 ++
 page/50/index.html                            |  784 ++
 page/51/index.html                            |  531 ++
 page/52/index.html                            |  497 ++
 page/53/index.html                            |  505 ++
 page/54/index.html                            |  498 ++
 page/55/index.html                            |  502 ++
 page/56/index.html                            |  501 ++
 page/57/index.html                            |  496 ++
 page/58/index.html                            |  500 ++
 page/59/index.html                            |  497 ++
 page/6/index.html                             |  519 ++
 page/60/index.html                            |  504 ++
 page/61/index.html                            |  500 ++
 page/62/index.html                            |  500 ++
 page/63/index.html                            |  512 ++
 page/64/index.html                            |  519 ++
 page/65/index.html                            |  558 ++
 page/66/index.html                            |  606 ++
 page/67/index.html                            |  564 ++
 page/68/index.html                            |  500 ++
 page/69/index.html                            |  504 ++
 page/7/index.html                             |  503 ++
 page/70/index.html                            |  513 ++
 page/71/index.html                            |  518 ++
 page/72/index.html                            |  507 ++
 page/73/index.html                            |  507 ++
 page/74/index.html                            |  497 ++
 page/75/index.html                            |  507 ++
 page/76/index.html                            |  503 ++
 page/77/index.html                            |  580 ++
 page/78/index.html                            |  536 ++
 page/79/index.html                            |  512 ++
 page/8/index.html                             |  778 ++
 page/80/index.html                            |  507 ++
 page/81/index.html                            |  503 ++
 page/82/index.html                            |  617 ++
 page/83/index.html                            |  880 ++
 page/84/index.html                            |  507 ++
 page/85/index.html                            |  508 ++
 page/86/index.html                            |  515 ++
 page/87/index.html                            |  528 ++
 page/88/index.html                            |  634 ++
 page/89/index.html                            |  541 ++
 page/9/index.html                             |  514 ++
 page/90/index.html                            |  497 ++
 page/91/index.html                            |  502 ++
 page/92/index.html                            |  516 ++
 page/93/index.html                            |  515 ++
 page/94/index.html                            |  502 ++
 page/95/index.html                            |  505 ++
 page/96/index.html                            |  509 ++
 page/97/index.html                            |  510 ++
 page/98/index.html                            |  518 ++
 page/99/index.html                            |  514 ++
 placeholder                                   |    0
 search.xml                                    | 7826 +++++++++++++++++
 tags/Actions/index.html                       |  458 +
 tags/CI-CD/index.html                         |  458 +
 tags/CSS/index.html                           |  458 +
 tags/CSS3/index.html                          |  458 +
 "tags/CSS\346\212\200\345\267\247/index.html" |  458 +
 tags/CodeReview/index.html                    |  458 +
 tags/Cordova/index.html                       |  458 +
 tags/Docker-Compose/index.html                |  458 +
 tags/Docker/index.html                        |  478 +
 tags/DockerFile/index.html                    |  458 +
 tags/ESLint/index.html                        |  458 +
 tags/Electron/index.html                      |  481 +
 tags/EventLoop/index.html                     |  458 +
 tags/GIT/index.html                           |  458 +
 tags/Git/index.html                           |  458 +
 tags/GitLab/index.html                        |  458 +
 tags/Github/index.html                        |  458 +
 "tags/Go\350\257\255\350\250\200/index.html"  |  458 +
 tags/Hexo/index.html                          |  547 ++
 tags/HomeBrew/index.html                      |  458 +
 tags/Ionic/index.html                         |  458 +
 tags/Linux/index.html                         |  458 +
 tags/Mac/index.html                           |  458 +
 tags/Nginx/index.html                         |  478 +
 tags/NodeJS/index.html                        |  501 ++
 tags/Postgresql/index.html                    |  458 +
 tags/Prettier/index.html                      |  458 +
 tags/RESTful/index.html                       |  458 +
 tags/RPM/index.html                           |  458 +
 tags/React/index.html                         |  458 +
 tags/Restful-API/index.html                   |  458 +
 tags/SSR/index.html                           |  458 +
 tags/SemVer/index.html                        |  458 +
 tags/Squid/index.html                         |  458 +
 tags/Timeout/index.html                       |  458 +
 tags/UglifyJsPlugin/index.html                |  458 +
 tags/VSCode/index.html                        |  458 +
 .../index.html"                               |  458 +
 tags/Vue/index.html                           |  501 ++
 tags/Webpack/index.html                       |  458 +
 tags/ajax/index.html                          |  458 +
 tags/es6/index.html                           |  458 +
 tags/get/index.html                           |  458 +
 tags/index.html                               |  458 +
 tags/jsonp/index.html                         |  458 +
 tags/kernel/index.html                        |  458 +
 tags/npm/index.html                           |  458 +
 tags/npx/index.html                           |  458 +
 tags/path-intellisense/index.html             |  458 +
 tags/port/index.html                          |  458 +
 tags/promise/index.html                       |  458 +
 tags/registry/index.html                      |  458 +
 tags/rnpm/index.html                          |  458 +
 tags/sass/index.html                          |  458 +
 tags/scp/index.html                           |  458 +
 tags/systemctl/index.html                     |  458 +
 tags/vuepress/index.html                      |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  481 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  478 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 "tags/\345\276\256\344\277\241/index.html"    |  458 +
 "tags/\346\211\223\345\214\205/index.html"    |  458 +
 .../index.html"                               |  458 +
 "tags/\346\217\222\344\273\266/index.html"    |  481 +
 .../index.html"                               |  458 +
 "tags/\346\225\260\347\273\204/index.html"    |  458 +
 .../index.html"                               |  458 +
 "tags/\346\236\266\346\236\204/index.html"    |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  558 ++
 .../index.html"                               |  458 +
 .../index.html"                               |  481 +
 .../index.html"                               |  481 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  641 ++
 .../page/2/index.html"                        |  461 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 .../index.html"                               |  458 +
 "tags/\351\235\242\350\257\225/index.html"    |  644 ++
 .../page/2/index.html"                        |  641 ++
 .../page/3/index.html"                        |  624 ++
 1282 files changed, 703494 insertions(+)
 create mode 100644 2013/06/17/Read-High-Performance-JavaScript/index.html
 create mode 100644 2013/06/26/CSS-Triangle-Circle/index.html
 create mode 100644 2015/12/31/Read-Let-your-boss-promote-you/index.html
 create mode 100644 2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
 create mode 100644 2017/08/29/browser-incompatibility-problem-solution/index.html
 create mode 100644 2017/08/30/Vue-VSCode-Snippets/index.html
 create mode 100644 2017/08/30/Vue-basic/index.html
 create mode 100644 2017/08/30/npm-source/index.html
 create mode 100644 2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
 create mode 100644 2017/10/12/VSCode-ESLint/index.html
 create mode 100644 2017/10/12/us-gitment/index.html
 create mode 100644 2017/10/12/web-quanzhan/index.html
 create mode 100644 2017/12/12/Git-Shell/index.html
 create mode 100644 2019/12/27/Actions/index.html
 create mode 100644 2019/12/27/Vue-Component-Communication/index.html
 create mode 100644 2019/12/30/begin-learn-java/index.html
 create mode 100644 2019/12/31/GoodBye-2019/index.html
 create mode 100644 2019/12/31/gitlab-cicd/index.html
 create mode 100644 2019/12/31/weichat-h5-compatibility/index.html
 create mode 100644 2020/01/01/Hello-2020/index.html
 create mode 100644 2020/01/02/21-Day-Challenge-01/index.html
 create mode 100644 2020/01/02/FE-guide-Closure/index.html
 create mode 100644 2020/01/02/FE-guide-dataType/index.html
 create mode 100644 2020/01/02/FE-guide-instanceof/index.html
 create mode 100644 2020/01/02/FE-guide-new/index.html
 create mode 100644 2020/01/02/FE-guide-prototype/index.html
 create mode 100644 2020/01/02/FE-guide-this/index.html
 create mode 100644 "2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
 create mode 100644 2020/01/03/FE-guide-Generator/index.html
 create mode 100644 2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
 create mode 100644 2020/01/03/FE-guide-Module/index.html
 create mode 100644 2020/01/03/FE-guide-Promise/index.html
 create mode 100644 2020/01/03/FE-guide-async-Proxy/index.html
 create mode 100644 2020/01/03/FE-guide-async-await/index.html
 create mode 100644 2020/01/03/FE-guide-call-apply-bind/index.html
 create mode 100644 2020/01/03/FE-guide-copy/index.html
 create mode 100644 2020/01/03/FE-guide-debounce-throttle/index.html
 create mode 100644 2020/01/03/FE-guide-inherit/index.html
 create mode 100644 2020/01/03/FE-guide-store/index.html
 create mode 100644 2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
 create mode 100644 2020/01/04/Algorithm/index.html
 create mode 100644 2020/01/05/FE-guide-ArrayOprs/index.html
 create mode 100644 2020/01/05/FE-guide-about-reduce/index.html
 create mode 100644 2020/01/05/FE-guide-currying/index.html
 create mode 100644 2020/01/05/FE-guide-vuepress/index.html
 create mode 100644 2020/01/09/FE-guide-Net/index.html
 create mode 100644 2020/01/09/FE-guide-data-structure/index.html
 create mode 100644 2020/01/09/career/index.html
 create mode 100644 2020/01/09/do-it-yourselfery-jsonp/index.html
 create mode 100644 2020/01/09/solve-get-params-so-long-problem/index.html
 create mode 100644 2020/01/13/FE-guide-inherit2/index.html
 create mode 100644 2020/01/13/Javascript-Design-Pattern/index.html
 create mode 100644 2020/01/13/do-it-yourselfery-promise/index.html
 create mode 100644 2020/01/13/hexo-search/index.html
 create mode 100644 2020/01/22/Es6-arrowFunc-arguments/index.html
 create mode 100644 2020/01/22/FE-guide-safe/index.html
 create mode 100644 2020/01/22/Wepack-Tips/index.html
 create mode 100644 2020/02/11/SSR/index.html
 create mode 100644 2020/02/11/restful-architecture/index.html
 create mode 100644 2020/02/12/print-table-problem/index.html
 create mode 100644 2020/02/12/vue-proxyTable-problem/index.html
 create mode 100644 2020/02/19/develop-custom-cli-tools-using-node/index.html
 create mode 100644 2020/02/21/Implementation-of-the-vue-response-principle/index.html
 create mode 100644 2020/02/23/V8-engine-memory-management-and-optimization/index.html
 create mode 100644 2020/02/24/Vue-plug-in-development/index.html
 create mode 100644 2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
 create mode 100644 2020/03/23/path-join-vs-path-resolve/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-EventEmitter/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-async-await/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-call-apply/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-create/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-flat/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-isArray/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-map/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-new/index.html
 create mode 100644 2020/03/24/do-it-yourselfery-reduce/index.html
 create mode 100644 "2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
 create mode 100644 "2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
 create mode 100644 2020/03/24/webpack-learning-1/index.html
 create mode 100644 2020/04/03/source-code-react-diff/index.html
 create mode 100644 2020/04/07/Electron-Offline-Build/index.html
 create mode 100644 2020/04/07/webpack-uglifyjsplugin/index.html
 create mode 100644 2020/04/15/node-sass-slow-problem/index.html
 create mode 100644 2020/04/15/talk-about-full-stack-big-fd/index.html
 create mode 100644 2020/04/16/0-vuecli-3-component/index.html
 create mode 100644 2020/04/16/what-is-npx/index.html
 create mode 100644 2020/05/14/css3-pointer-events/index.html
 create mode 100644 2020/05/28/Prettier-Setting/index.html
 create mode 100644 "2020/07/19/rpm\345\221\275\344\273\244/index.html"
 create mode 100644 "2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
 create mode 100644 2020/11/10/learn-cordova-1/index.html
 create mode 100644 2020/11/10/learn-go/index.html
 create mode 100644 2020/11/11/learn-ionic-1/index.html
 create mode 100644 "2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
 create mode 100644 "2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
 create mode 100644 "2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
 create mode 100644 "2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
 create mode 100644 "2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
 create mode 100644 "2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
 create mode 100644 2022/06/01/GIT Standard/index.html
 create mode 100644 "2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
 create mode 100644 2022/06/01/squid/index.html
 create mode 100644 "2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
 create mode 100644 "2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
 create mode 100644 2022/06/02/DockerFile/index.html
 create mode 100644 "2022/06/02/Docker\345\221\275\344\273\244/index.html"
 create mode 100644 "2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
 create mode 100644 "2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
 create mode 100644 "2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
 create mode 100644 "2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
 create mode 100644 "2022/06/09/Nginx\346\214\207\344\273\244/index.html"
 create mode 100644 2022/06/09/http_stub_status_module/index.html
 create mode 100644 "2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
 create mode 100644 "2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
 create mode 100644 2022/06/30/nginx-timeout/index.html
 create mode 100644 "2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
 create mode 100644 "2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
 create mode 100644 "2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
 create mode 100644 2022/08/02/Oracle-Linux-install-Docker/index.html
 create mode 100644 "2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
 create mode 100644 "2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
 create mode 100644 2022/08/02/linux-scp/index.html
 create mode 100644 "2022/08/02/systemctl \345\221\275\344\273\244/index.html"
 create mode 100644 "2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
 create mode 100644 "2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
 create mode 100644 "2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
 create mode 100644 2023/09/20/test/index.html
 create mode 100644 @attachment/Clipboard_2022-06-09-12-57-39.png
 create mode 100644 @attachment/Clipboard_2022-06-09-12-57-48.png
 create mode 100644 @attachment/Clipboard_2022-06-09-12-59-28.png
 create mode 100644 @attachment/README.html
 create mode 100644 CNAME
 create mode 100644 about/index.html
 create mode 100644 archives/2013/06/index.html
 create mode 100644 archives/2013/index.html
 create mode 100644 archives/2015/12/index.html
 create mode 100644 archives/2015/index.html
 create mode 100644 archives/2016/10/index.html
 create mode 100644 archives/2016/index.html
 create mode 100644 archives/2017/08/index.html
 create mode 100644 archives/2017/10/index.html
 create mode 100644 archives/2017/12/index.html
 create mode 100644 archives/2017/index.html
 create mode 100644 archives/2019/12/index.html
 create mode 100644 archives/2019/index.html
 create mode 100644 archives/2020/01/index.html
 create mode 100644 archives/2020/01/page/2/index.html
 create mode 100644 archives/2020/01/page/3/index.html
 create mode 100644 archives/2020/01/page/4/index.html
 create mode 100644 archives/2020/02/index.html
 create mode 100644 archives/2020/03/index.html
 create mode 100644 archives/2020/03/page/2/index.html
 create mode 100644 archives/2020/04/index.html
 create mode 100644 archives/2020/05/index.html
 create mode 100644 archives/2020/07/index.html
 create mode 100644 archives/2020/08/index.html
 create mode 100644 archives/2020/11/index.html
 create mode 100644 archives/2020/index.html
 create mode 100644 archives/2020/page/2/index.html
 create mode 100644 archives/2020/page/3/index.html
 create mode 100644 archives/2020/page/4/index.html
 create mode 100644 archives/2020/page/5/index.html
 create mode 100644 archives/2020/page/6/index.html
 create mode 100644 archives/2020/page/7/index.html
 create mode 100644 archives/2020/page/8/index.html
 create mode 100644 archives/2021/05/index.html
 create mode 100644 archives/2021/index.html
 create mode 100644 archives/2022/03/index.html
 create mode 100644 archives/2022/06/index.html
 create mode 100644 archives/2022/06/page/2/index.html
 create mode 100644 archives/2022/08/index.html
 create mode 100644 archives/2022/index.html
 create mode 100644 archives/2022/page/2/index.html
 create mode 100644 archives/2022/page/3/index.html
 create mode 100644 archives/2022/page/4/index.html
 create mode 100644 archives/2023/09/index.html
 create mode 100644 archives/2023/index.html
 create mode 100644 archives/index.html
 create mode 100644 archives/page/10/index.html
 create mode 100644 archives/page/11/index.html
 create mode 100644 archives/page/12/index.html
 create mode 100644 archives/page/13/index.html
 create mode 100644 archives/page/2/index.html
 create mode 100644 archives/page/3/index.html
 create mode 100644 archives/page/4/index.html
 create mode 100644 archives/page/5/index.html
 create mode 100644 archives/page/6/index.html
 create mode 100644 archives/page/7/index.html
 create mode 100644 archives/page/8/index.html
 create mode 100644 archives/page/9/index.html
 create mode 100644 categories/Database/Postgresql/index.html
 create mode 100644 categories/Database/index.html
 create mode 100644 categories/Docker/index.html
 create mode 100644 categories/Infra/Docker/index.html
 create mode 100644 "categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
 create mode 100644 "categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 categories/Infra/index.html
 create mode 100644 categories/Infrastructure/index.html
 create mode 100644 categories/Linux/Oracle/Docker/index.html
 create mode 100644 categories/Linux/Oracle/index.html
 create mode 100644 categories/Linux/RPM/index.html
 create mode 100644 categories/Linux/index.html
 create mode 100644 categories/NodeJS/Npm/index.html
 create mode 100644 categories/NodeJS/index.html
 create mode 100644 categories/OracleLinux/index.html
 create mode 100644 "categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "categories/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 categories/index.html
 create mode 100644 categories/linux/index.html
 create mode 100644 categories/linux/systemctl/index.html
 create mode 100644 "categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
 create mode 100644 "categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
 create mode 100644 "categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
 create mode 100644 "categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
 create mode 100644 "categories/\345\244\247\345\211\215\347\253\257/index.html"
 create mode 100644 "categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
 create mode 100644 "categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
 create mode 100644 "categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
 create mode 100644 "categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
 create mode 100644 "categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
 create mode 100644 "categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
 create mode 100644 "categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
 create mode 100644 "categories/\346\236\266\346\236\204/index.html"
 create mode 100644 "categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
 create mode 100644 "categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
 create mode 100644 "categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
 create mode 100644 "categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
 create mode 100644 "categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
 create mode 100644 "categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
 create mode 100644 "categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
 create mode 100644 "categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
 create mode 100644 "categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
 create mode 100644 "categories/\350\231\232\346\213\237\345\214\226/index.html"
 create mode 100644 css/main.css
 create mode 100644 en/2013/06/17/Read-High-Performance-JavaScript/index.html
 create mode 100644 en/2013/06/26/CSS-Triangle-Circle/index.html
 create mode 100644 en/2015/12/31/Read-Let-your-boss-promote-you/index.html
 create mode 100644 en/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
 create mode 100644 en/2017/08/29/browser-incompatibility-problem-solution/index.html
 create mode 100644 en/2017/08/30/Vue-VSCode-Snippets/index.html
 create mode 100644 en/2017/08/30/Vue-basic/index.html
 create mode 100644 en/2017/08/30/npm-source/index.html
 create mode 100644 en/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
 create mode 100644 en/2017/10/12/VSCode-ESLint/index.html
 create mode 100644 en/2017/10/12/us-gitment/index.html
 create mode 100644 en/2017/10/12/web-quanzhan/index.html
 create mode 100644 en/2017/12/12/Git-Shell/index.html
 create mode 100644 en/2019/12/27/Actions/index.html
 create mode 100644 en/2019/12/27/Vue-Component-Communication/index.html
 create mode 100644 en/2019/12/30/begin-learn-java/index.html
 create mode 100644 en/2019/12/31/GoodBye-2019/index.html
 create mode 100644 en/2019/12/31/gitlab-cicd/index.html
 create mode 100644 en/2019/12/31/weichat-h5-compatibility/index.html
 create mode 100644 en/2020/01/01/Hello-2020/index.html
 create mode 100644 en/2020/01/02/21-Day-Challenge-01/index.html
 create mode 100644 en/2020/01/02/FE-guide-Closure/index.html
 create mode 100644 en/2020/01/02/FE-guide-dataType/index.html
 create mode 100644 en/2020/01/02/FE-guide-instanceof/index.html
 create mode 100644 en/2020/01/02/FE-guide-new/index.html
 create mode 100644 en/2020/01/02/FE-guide-prototype/index.html
 create mode 100644 en/2020/01/02/FE-guide-this/index.html
 create mode 100644 "en/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
 create mode 100644 en/2020/01/03/FE-guide-Generator/index.html
 create mode 100644 en/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
 create mode 100644 en/2020/01/03/FE-guide-Module/index.html
 create mode 100644 en/2020/01/03/FE-guide-Promise/index.html
 create mode 100644 en/2020/01/03/FE-guide-async-Proxy/index.html
 create mode 100644 en/2020/01/03/FE-guide-async-await/index.html
 create mode 100644 en/2020/01/03/FE-guide-call-apply-bind/index.html
 create mode 100644 en/2020/01/03/FE-guide-copy/index.html
 create mode 100644 en/2020/01/03/FE-guide-debounce-throttle/index.html
 create mode 100644 en/2020/01/03/FE-guide-inherit/index.html
 create mode 100644 en/2020/01/03/FE-guide-store/index.html
 create mode 100644 en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
 create mode 100644 en/2020/01/04/Algorithm/index.html
 create mode 100644 en/2020/01/05/FE-guide-ArrayOprs/index.html
 create mode 100644 en/2020/01/05/FE-guide-about-reduce/index.html
 create mode 100644 en/2020/01/05/FE-guide-currying/index.html
 create mode 100644 en/2020/01/05/FE-guide-vuepress/index.html
 create mode 100644 en/2020/01/09/FE-guide-Net/index.html
 create mode 100644 en/2020/01/09/FE-guide-data-structure/index.html
 create mode 100644 en/2020/01/09/career/index.html
 create mode 100644 en/2020/01/09/do-it-yourselfery-jsonp/index.html
 create mode 100644 en/2020/01/09/solve-get-params-so-long-problem/index.html
 create mode 100644 en/2020/01/13/FE-guide-inherit2/index.html
 create mode 100644 en/2020/01/13/Javascript-Design-Pattern/index.html
 create mode 100644 en/2020/01/13/do-it-yourselfery-promise/index.html
 create mode 100644 en/2020/01/13/hexo-search/index.html
 create mode 100644 en/2020/01/22/Es6-arrowFunc-arguments/index.html
 create mode 100644 en/2020/01/22/FE-guide-safe/index.html
 create mode 100644 en/2020/01/22/Wepack-Tips/index.html
 create mode 100644 en/2020/02/11/SSR/index.html
 create mode 100644 en/2020/02/11/restful-architecture/index.html
 create mode 100644 en/2020/02/12/print-table-problem/index.html
 create mode 100644 en/2020/02/12/vue-proxyTable-problem/index.html
 create mode 100644 en/2020/02/19/develop-custom-cli-tools-using-node/index.html
 create mode 100644 en/2020/02/21/Implementation-of-the-vue-response-principle/index.html
 create mode 100644 en/2020/02/23/V8-engine-memory-management-and-optimization/index.html
 create mode 100644 en/2020/02/24/Vue-plug-in-development/index.html
 create mode 100644 en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
 create mode 100644 en/2020/03/23/path-join-vs-path-resolve/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-EventEmitter/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-async-await/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-call-apply/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-create/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-flat/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-isArray/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-map/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-new/index.html
 create mode 100644 en/2020/03/24/do-it-yourselfery-reduce/index.html
 create mode 100644 "en/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
 create mode 100644 "en/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
 create mode 100644 en/2020/03/24/webpack-learning-1/index.html
 create mode 100644 en/2020/04/03/source-code-react-diff/index.html
 create mode 100644 en/2020/04/07/Electron-Offline-Build/index.html
 create mode 100644 en/2020/04/07/webpack-uglifyjsplugin/index.html
 create mode 100644 en/2020/04/15/node-sass-slow-problem/index.html
 create mode 100644 en/2020/04/15/talk-about-full-stack-big-fd/index.html
 create mode 100644 en/2020/04/16/0-vuecli-3-component/index.html
 create mode 100644 en/2020/04/16/what-is-npx/index.html
 create mode 100644 en/2020/05/14/css3-pointer-events/index.html
 create mode 100644 en/2020/05/28/Prettier-Setting/index.html
 create mode 100644 "en/2020/07/19/rpm\345\221\275\344\273\244/index.html"
 create mode 100644 "en/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
 create mode 100644 en/2020/11/10/learn-cordova-1/index.html
 create mode 100644 en/2020/11/10/learn-go/index.html
 create mode 100644 en/2020/11/11/learn-ionic-1/index.html
 create mode 100644 "en/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
 create mode 100644 "en/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
 create mode 100644 "en/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
 create mode 100644 "en/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
 create mode 100644 "en/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
 create mode 100644 "en/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
 create mode 100644 en/2022/06/01/GIT Standard/index.html
 create mode 100644 "en/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
 create mode 100644 en/2022/06/01/squid/index.html
 create mode 100644 "en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
 create mode 100644 "en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "en/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
 create mode 100644 en/2022/06/02/DockerFile/index.html
 create mode 100644 "en/2022/06/02/Docker\345\221\275\344\273\244/index.html"
 create mode 100644 "en/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
 create mode 100644 "en/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
 create mode 100644 "en/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
 create mode 100644 "en/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
 create mode 100644 "en/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
 create mode 100644 en/2022/06/09/http_stub_status_module/index.html
 create mode 100644 "en/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
 create mode 100644 "en/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
 create mode 100644 en/2022/06/30/nginx-timeout/index.html
 create mode 100644 "en/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
 create mode 100644 "en/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
 create mode 100644 "en/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
 create mode 100644 en/2022/08/02/Oracle-Linux-install-Docker/index.html
 create mode 100644 "en/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
 create mode 100644 "en/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
 create mode 100644 en/2022/08/02/linux-scp/index.html
 create mode 100644 "en/2022/08/02/systemctl \345\221\275\344\273\244/index.html"
 create mode 100644 "en/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
 create mode 100644 "en/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
 create mode 100644 "en/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
 create mode 100644 en/2023/09/20/test/index.html
 create mode 100644 en/@attachment/README.html
 create mode 100644 en/about/index.html
 create mode 100644 en/archives/2013/06/index.html
 create mode 100644 en/archives/2013/index.html
 create mode 100644 en/archives/2015/12/index.html
 create mode 100644 en/archives/2015/index.html
 create mode 100644 en/archives/2016/10/index.html
 create mode 100644 en/archives/2016/index.html
 create mode 100644 en/archives/2017/08/index.html
 create mode 100644 en/archives/2017/10/index.html
 create mode 100644 en/archives/2017/12/index.html
 create mode 100644 en/archives/2017/index.html
 create mode 100644 en/archives/2019/12/index.html
 create mode 100644 en/archives/2019/index.html
 create mode 100644 en/archives/2020/01/index.html
 create mode 100644 en/archives/2020/01/page/2/index.html
 create mode 100644 en/archives/2020/01/page/3/index.html
 create mode 100644 en/archives/2020/01/page/4/index.html
 create mode 100644 en/archives/2020/02/index.html
 create mode 100644 en/archives/2020/03/index.html
 create mode 100644 en/archives/2020/03/page/2/index.html
 create mode 100644 en/archives/2020/04/index.html
 create mode 100644 en/archives/2020/05/index.html
 create mode 100644 en/archives/2020/07/index.html
 create mode 100644 en/archives/2020/08/index.html
 create mode 100644 en/archives/2020/11/index.html
 create mode 100644 en/archives/2020/index.html
 create mode 100644 en/archives/2020/page/2/index.html
 create mode 100644 en/archives/2020/page/3/index.html
 create mode 100644 en/archives/2020/page/4/index.html
 create mode 100644 en/archives/2020/page/5/index.html
 create mode 100644 en/archives/2020/page/6/index.html
 create mode 100644 en/archives/2020/page/7/index.html
 create mode 100644 en/archives/2020/page/8/index.html
 create mode 100644 en/archives/2021/05/index.html
 create mode 100644 en/archives/2021/index.html
 create mode 100644 en/archives/2022/03/index.html
 create mode 100644 en/archives/2022/06/index.html
 create mode 100644 en/archives/2022/06/page/2/index.html
 create mode 100644 en/archives/2022/08/index.html
 create mode 100644 en/archives/2022/index.html
 create mode 100644 en/archives/2022/page/2/index.html
 create mode 100644 en/archives/2022/page/3/index.html
 create mode 100644 en/archives/2022/page/4/index.html
 create mode 100644 en/archives/2023/09/index.html
 create mode 100644 en/archives/2023/index.html
 create mode 100644 en/archives/index.html
 create mode 100644 en/archives/page/10/index.html
 create mode 100644 en/archives/page/11/index.html
 create mode 100644 en/archives/page/12/index.html
 create mode 100644 en/archives/page/13/index.html
 create mode 100644 en/archives/page/2/index.html
 create mode 100644 en/archives/page/3/index.html
 create mode 100644 en/archives/page/4/index.html
 create mode 100644 en/archives/page/5/index.html
 create mode 100644 en/archives/page/6/index.html
 create mode 100644 en/archives/page/7/index.html
 create mode 100644 en/archives/page/8/index.html
 create mode 100644 en/archives/page/9/index.html
 create mode 100644 en/categories/Database/Postgresql/index.html
 create mode 100644 en/categories/Database/index.html
 create mode 100644 en/categories/Docker/index.html
 create mode 100644 en/categories/Infra/Docker/index.html
 create mode 100644 "en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
 create mode 100644 "en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 en/categories/Infra/index.html
 create mode 100644 en/categories/Infrastructure/index.html
 create mode 100644 en/categories/Linux/Oracle/Docker/index.html
 create mode 100644 en/categories/Linux/Oracle/index.html
 create mode 100644 en/categories/Linux/RPM/index.html
 create mode 100644 en/categories/Linux/index.html
 create mode 100644 en/categories/NodeJS/Npm/index.html
 create mode 100644 en/categories/NodeJS/index.html
 create mode 100644 en/categories/OracleLinux/index.html
 create mode 100644 "en/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "en/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 en/categories/index.html
 create mode 100644 en/categories/linux/index.html
 create mode 100644 en/categories/linux/systemctl/index.html
 create mode 100644 "en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
 create mode 100644 "en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
 create mode 100644 "en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
 create mode 100644 "en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
 create mode 100644 "en/categories/\345\244\247\345\211\215\347\253\257/index.html"
 create mode 100644 "en/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
 create mode 100644 "en/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "en/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
 create mode 100644 "en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
 create mode 100644 "en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
 create mode 100644 "en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
 create mode 100644 "en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
 create mode 100644 "en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
 create mode 100644 "en/categories/\346\236\266\346\236\204/index.html"
 create mode 100644 "en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
 create mode 100644 "en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
 create mode 100644 "en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
 create mode 100644 "en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
 create mode 100644 "en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
 create mode 100644 "en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
 create mode 100644 "en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
 create mode 100644 "en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
 create mode 100644 "en/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
 create mode 100644 "en/categories/\350\231\232\346\213\237\345\214\226/index.html"
 create mode 100644 en/index.html
 create mode 100644 en/page/10/index.html
 create mode 100644 en/page/100/index.html
 create mode 100644 en/page/101/index.html
 create mode 100644 en/page/102/index.html
 create mode 100644 en/page/103/index.html
 create mode 100644 en/page/104/index.html
 create mode 100644 en/page/105/index.html
 create mode 100644 en/page/106/index.html
 create mode 100644 en/page/107/index.html
 create mode 100644 en/page/108/index.html
 create mode 100644 en/page/109/index.html
 create mode 100644 en/page/11/index.html
 create mode 100644 en/page/110/index.html
 create mode 100644 en/page/111/index.html
 create mode 100644 en/page/112/index.html
 create mode 100644 en/page/113/index.html
 create mode 100644 en/page/114/index.html
 create mode 100644 en/page/115/index.html
 create mode 100644 en/page/116/index.html
 create mode 100644 en/page/117/index.html
 create mode 100644 en/page/118/index.html
 create mode 100644 en/page/119/index.html
 create mode 100644 en/page/12/index.html
 create mode 100644 en/page/120/index.html
 create mode 100644 en/page/121/index.html
 create mode 100644 en/page/122/index.html
 create mode 100644 en/page/123/index.html
 create mode 100644 en/page/124/index.html
 create mode 100644 en/page/125/index.html
 create mode 100644 en/page/126/index.html
 create mode 100644 en/page/127/index.html
 create mode 100644 en/page/128/index.html
 create mode 100644 en/page/13/index.html
 create mode 100644 en/page/14/index.html
 create mode 100644 en/page/15/index.html
 create mode 100644 en/page/16/index.html
 create mode 100644 en/page/17/index.html
 create mode 100644 en/page/18/index.html
 create mode 100644 en/page/19/index.html
 create mode 100644 en/page/2/index.html
 create mode 100644 en/page/20/index.html
 create mode 100644 en/page/21/index.html
 create mode 100644 en/page/22/index.html
 create mode 100644 en/page/23/index.html
 create mode 100644 en/page/24/index.html
 create mode 100644 en/page/25/index.html
 create mode 100644 en/page/26/index.html
 create mode 100644 en/page/27/index.html
 create mode 100644 en/page/28/index.html
 create mode 100644 en/page/29/index.html
 create mode 100644 en/page/3/index.html
 create mode 100644 en/page/30/index.html
 create mode 100644 en/page/31/index.html
 create mode 100644 en/page/32/index.html
 create mode 100644 en/page/33/index.html
 create mode 100644 en/page/34/index.html
 create mode 100644 en/page/35/index.html
 create mode 100644 en/page/36/index.html
 create mode 100644 en/page/37/index.html
 create mode 100644 en/page/38/index.html
 create mode 100644 en/page/39/index.html
 create mode 100644 en/page/4/index.html
 create mode 100644 en/page/40/index.html
 create mode 100644 en/page/41/index.html
 create mode 100644 en/page/42/index.html
 create mode 100644 en/page/43/index.html
 create mode 100644 en/page/44/index.html
 create mode 100644 en/page/45/index.html
 create mode 100644 en/page/46/index.html
 create mode 100644 en/page/47/index.html
 create mode 100644 en/page/48/index.html
 create mode 100644 en/page/49/index.html
 create mode 100644 en/page/5/index.html
 create mode 100644 en/page/50/index.html
 create mode 100644 en/page/51/index.html
 create mode 100644 en/page/52/index.html
 create mode 100644 en/page/53/index.html
 create mode 100644 en/page/54/index.html
 create mode 100644 en/page/55/index.html
 create mode 100644 en/page/56/index.html
 create mode 100644 en/page/57/index.html
 create mode 100644 en/page/58/index.html
 create mode 100644 en/page/59/index.html
 create mode 100644 en/page/6/index.html
 create mode 100644 en/page/60/index.html
 create mode 100644 en/page/61/index.html
 create mode 100644 en/page/62/index.html
 create mode 100644 en/page/63/index.html
 create mode 100644 en/page/64/index.html
 create mode 100644 en/page/65/index.html
 create mode 100644 en/page/66/index.html
 create mode 100644 en/page/67/index.html
 create mode 100644 en/page/68/index.html
 create mode 100644 en/page/69/index.html
 create mode 100644 en/page/7/index.html
 create mode 100644 en/page/70/index.html
 create mode 100644 en/page/71/index.html
 create mode 100644 en/page/72/index.html
 create mode 100644 en/page/73/index.html
 create mode 100644 en/page/74/index.html
 create mode 100644 en/page/75/index.html
 create mode 100644 en/page/76/index.html
 create mode 100644 en/page/77/index.html
 create mode 100644 en/page/78/index.html
 create mode 100644 en/page/79/index.html
 create mode 100644 en/page/8/index.html
 create mode 100644 en/page/80/index.html
 create mode 100644 en/page/81/index.html
 create mode 100644 en/page/82/index.html
 create mode 100644 en/page/83/index.html
 create mode 100644 en/page/84/index.html
 create mode 100644 en/page/85/index.html
 create mode 100644 en/page/86/index.html
 create mode 100644 en/page/87/index.html
 create mode 100644 en/page/88/index.html
 create mode 100644 en/page/89/index.html
 create mode 100644 en/page/9/index.html
 create mode 100644 en/page/90/index.html
 create mode 100644 en/page/91/index.html
 create mode 100644 en/page/92/index.html
 create mode 100644 en/page/93/index.html
 create mode 100644 en/page/94/index.html
 create mode 100644 en/page/95/index.html
 create mode 100644 en/page/96/index.html
 create mode 100644 en/page/97/index.html
 create mode 100644 en/page/98/index.html
 create mode 100644 en/page/99/index.html
 create mode 100644 en/tags/index.html
 create mode 100644 images/algolia_logo.svg
 create mode 100644 images/apple-touch-icon-next.png
 create mode 100644 images/avatar.gif
 create mode 100644 images/avatar.jpg
 create mode 100644 images/cc-by-nc-nd.svg
 create mode 100644 images/cc-by-nc-sa.svg
 create mode 100644 images/cc-by-nc.svg
 create mode 100644 images/cc-by-nd.svg
 create mode 100644 images/cc-by-sa.svg
 create mode 100644 images/cc-by.svg
 create mode 100644 images/cc-zero.svg
 create mode 100644 images/favicon-32x32-next.png
 create mode 100644 images/logo.svg
 create mode 100644 images/wechatpay.jpg
 create mode 100644 index.html
 create mode 100644 ja/2013/06/17/Read-High-Performance-JavaScript/index.html
 create mode 100644 ja/2013/06/26/CSS-Triangle-Circle/index.html
 create mode 100644 ja/2015/12/31/Read-Let-your-boss-promote-you/index.html
 create mode 100644 ja/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
 create mode 100644 ja/2017/08/29/browser-incompatibility-problem-solution/index.html
 create mode 100644 ja/2017/08/30/Vue-VSCode-Snippets/index.html
 create mode 100644 ja/2017/08/30/Vue-basic/index.html
 create mode 100644 ja/2017/08/30/npm-source/index.html
 create mode 100644 ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
 create mode 100644 ja/2017/10/12/VSCode-ESLint/index.html
 create mode 100644 ja/2017/10/12/us-gitment/index.html
 create mode 100644 ja/2017/10/12/web-quanzhan/index.html
 create mode 100644 ja/2017/12/12/Git-Shell/index.html
 create mode 100644 ja/2019/12/27/Actions/index.html
 create mode 100644 ja/2019/12/27/Vue-Component-Communication/index.html
 create mode 100644 ja/2019/12/30/begin-learn-java/index.html
 create mode 100644 ja/2019/12/31/GoodBye-2019/index.html
 create mode 100644 ja/2019/12/31/gitlab-cicd/index.html
 create mode 100644 ja/2019/12/31/weichat-h5-compatibility/index.html
 create mode 100644 ja/2020/01/01/Hello-2020/index.html
 create mode 100644 ja/2020/01/02/21-Day-Challenge-01/index.html
 create mode 100644 ja/2020/01/02/FE-guide-Closure/index.html
 create mode 100644 ja/2020/01/02/FE-guide-dataType/index.html
 create mode 100644 ja/2020/01/02/FE-guide-instanceof/index.html
 create mode 100644 ja/2020/01/02/FE-guide-new/index.html
 create mode 100644 ja/2020/01/02/FE-guide-prototype/index.html
 create mode 100644 ja/2020/01/02/FE-guide-this/index.html
 create mode 100644 "ja/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
 create mode 100644 ja/2020/01/03/FE-guide-Generator/index.html
 create mode 100644 ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
 create mode 100644 ja/2020/01/03/FE-guide-Module/index.html
 create mode 100644 ja/2020/01/03/FE-guide-Promise/index.html
 create mode 100644 ja/2020/01/03/FE-guide-async-Proxy/index.html
 create mode 100644 ja/2020/01/03/FE-guide-async-await/index.html
 create mode 100644 ja/2020/01/03/FE-guide-call-apply-bind/index.html
 create mode 100644 ja/2020/01/03/FE-guide-copy/index.html
 create mode 100644 ja/2020/01/03/FE-guide-debounce-throttle/index.html
 create mode 100644 ja/2020/01/03/FE-guide-inherit/index.html
 create mode 100644 ja/2020/01/03/FE-guide-store/index.html
 create mode 100644 ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
 create mode 100644 ja/2020/01/04/Algorithm/index.html
 create mode 100644 ja/2020/01/05/FE-guide-ArrayOprs/index.html
 create mode 100644 ja/2020/01/05/FE-guide-about-reduce/index.html
 create mode 100644 ja/2020/01/05/FE-guide-currying/index.html
 create mode 100644 ja/2020/01/05/FE-guide-vuepress/index.html
 create mode 100644 ja/2020/01/09/FE-guide-Net/index.html
 create mode 100644 ja/2020/01/09/FE-guide-data-structure/index.html
 create mode 100644 ja/2020/01/09/career/index.html
 create mode 100644 ja/2020/01/09/do-it-yourselfery-jsonp/index.html
 create mode 100644 ja/2020/01/09/solve-get-params-so-long-problem/index.html
 create mode 100644 ja/2020/01/13/FE-guide-inherit2/index.html
 create mode 100644 ja/2020/01/13/Javascript-Design-Pattern/index.html
 create mode 100644 ja/2020/01/13/do-it-yourselfery-promise/index.html
 create mode 100644 ja/2020/01/13/hexo-search/index.html
 create mode 100644 ja/2020/01/22/Es6-arrowFunc-arguments/index.html
 create mode 100644 ja/2020/01/22/FE-guide-safe/index.html
 create mode 100644 ja/2020/01/22/Wepack-Tips/index.html
 create mode 100644 ja/2020/02/11/SSR/index.html
 create mode 100644 ja/2020/02/11/restful-architecture/index.html
 create mode 100644 ja/2020/02/12/print-table-problem/index.html
 create mode 100644 ja/2020/02/12/vue-proxyTable-problem/index.html
 create mode 100644 ja/2020/02/19/develop-custom-cli-tools-using-node/index.html
 create mode 100644 ja/2020/02/21/Implementation-of-the-vue-response-principle/index.html
 create mode 100644 ja/2020/02/23/V8-engine-memory-management-and-optimization/index.html
 create mode 100644 ja/2020/02/24/Vue-plug-in-development/index.html
 create mode 100644 ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
 create mode 100644 ja/2020/03/23/path-join-vs-path-resolve/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-EventEmitter/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-async-await/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-call-apply/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-create/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-flat/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-isArray/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-map/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-new/index.html
 create mode 100644 ja/2020/03/24/do-it-yourselfery-reduce/index.html
 create mode 100644 "ja/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
 create mode 100644 "ja/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
 create mode 100644 ja/2020/03/24/webpack-learning-1/index.html
 create mode 100644 ja/2020/04/03/source-code-react-diff/index.html
 create mode 100644 ja/2020/04/07/Electron-Offline-Build/index.html
 create mode 100644 ja/2020/04/07/webpack-uglifyjsplugin/index.html
 create mode 100644 ja/2020/04/15/node-sass-slow-problem/index.html
 create mode 100644 ja/2020/04/15/talk-about-full-stack-big-fd/index.html
 create mode 100644 ja/2020/04/16/0-vuecli-3-component/index.html
 create mode 100644 ja/2020/04/16/what-is-npx/index.html
 create mode 100644 ja/2020/05/14/css3-pointer-events/index.html
 create mode 100644 ja/2020/05/28/Prettier-Setting/index.html
 create mode 100644 "ja/2020/07/19/rpm\345\221\275\344\273\244/index.html"
 create mode 100644 "ja/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
 create mode 100644 ja/2020/11/10/learn-cordova-1/index.html
 create mode 100644 ja/2020/11/10/learn-go/index.html
 create mode 100644 ja/2020/11/11/learn-ionic-1/index.html
 create mode 100644 "ja/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
 create mode 100644 "ja/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
 create mode 100644 "ja/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
 create mode 100644 "ja/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
 create mode 100644 "ja/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
 create mode 100644 "ja/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
 create mode 100644 ja/2022/06/01/GIT Standard/index.html
 create mode 100644 "ja/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
 create mode 100644 ja/2022/06/01/squid/index.html
 create mode 100644 "ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
 create mode 100644 "ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "ja/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
 create mode 100644 ja/2022/06/02/DockerFile/index.html
 create mode 100644 "ja/2022/06/02/Docker\345\221\275\344\273\244/index.html"
 create mode 100644 "ja/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
 create mode 100644 "ja/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
 create mode 100644 "ja/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
 create mode 100644 "ja/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
 create mode 100644 "ja/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
 create mode 100644 ja/2022/06/09/http_stub_status_module/index.html
 create mode 100644 "ja/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
 create mode 100644 "ja/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
 create mode 100644 ja/2022/06/30/nginx-timeout/index.html
 create mode 100644 "ja/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
 create mode 100644 "ja/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
 create mode 100644 "ja/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
 create mode 100644 ja/2022/08/02/Oracle-Linux-install-Docker/index.html
 create mode 100644 "ja/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
 create mode 100644 "ja/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
 create mode 100644 ja/2022/08/02/linux-scp/index.html
 create mode 100644 "ja/2022/08/02/systemctl \345\221\275\344\273\244/index.html"
 create mode 100644 "ja/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
 create mode 100644 "ja/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
 create mode 100644 "ja/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
 create mode 100644 ja/2023/09/20/test/index.html
 create mode 100644 ja/@attachment/README.html
 create mode 100644 ja/about/index.html
 create mode 100644 ja/archives/2013/06/index.html
 create mode 100644 ja/archives/2013/index.html
 create mode 100644 ja/archives/2015/12/index.html
 create mode 100644 ja/archives/2015/index.html
 create mode 100644 ja/archives/2016/10/index.html
 create mode 100644 ja/archives/2016/index.html
 create mode 100644 ja/archives/2017/08/index.html
 create mode 100644 ja/archives/2017/10/index.html
 create mode 100644 ja/archives/2017/12/index.html
 create mode 100644 ja/archives/2017/index.html
 create mode 100644 ja/archives/2019/12/index.html
 create mode 100644 ja/archives/2019/index.html
 create mode 100644 ja/archives/2020/01/index.html
 create mode 100644 ja/archives/2020/01/page/2/index.html
 create mode 100644 ja/archives/2020/01/page/3/index.html
 create mode 100644 ja/archives/2020/01/page/4/index.html
 create mode 100644 ja/archives/2020/02/index.html
 create mode 100644 ja/archives/2020/03/index.html
 create mode 100644 ja/archives/2020/03/page/2/index.html
 create mode 100644 ja/archives/2020/04/index.html
 create mode 100644 ja/archives/2020/05/index.html
 create mode 100644 ja/archives/2020/07/index.html
 create mode 100644 ja/archives/2020/08/index.html
 create mode 100644 ja/archives/2020/11/index.html
 create mode 100644 ja/archives/2020/index.html
 create mode 100644 ja/archives/2020/page/2/index.html
 create mode 100644 ja/archives/2020/page/3/index.html
 create mode 100644 ja/archives/2020/page/4/index.html
 create mode 100644 ja/archives/2020/page/5/index.html
 create mode 100644 ja/archives/2020/page/6/index.html
 create mode 100644 ja/archives/2020/page/7/index.html
 create mode 100644 ja/archives/2020/page/8/index.html
 create mode 100644 ja/archives/2021/05/index.html
 create mode 100644 ja/archives/2021/index.html
 create mode 100644 ja/archives/2022/03/index.html
 create mode 100644 ja/archives/2022/06/index.html
 create mode 100644 ja/archives/2022/06/page/2/index.html
 create mode 100644 ja/archives/2022/08/index.html
 create mode 100644 ja/archives/2022/index.html
 create mode 100644 ja/archives/2022/page/2/index.html
 create mode 100644 ja/archives/2022/page/3/index.html
 create mode 100644 ja/archives/2022/page/4/index.html
 create mode 100644 ja/archives/2023/09/index.html
 create mode 100644 ja/archives/2023/index.html
 create mode 100644 ja/archives/index.html
 create mode 100644 ja/archives/page/10/index.html
 create mode 100644 ja/archives/page/11/index.html
 create mode 100644 ja/archives/page/12/index.html
 create mode 100644 ja/archives/page/13/index.html
 create mode 100644 ja/archives/page/2/index.html
 create mode 100644 ja/archives/page/3/index.html
 create mode 100644 ja/archives/page/4/index.html
 create mode 100644 ja/archives/page/5/index.html
 create mode 100644 ja/archives/page/6/index.html
 create mode 100644 ja/archives/page/7/index.html
 create mode 100644 ja/archives/page/8/index.html
 create mode 100644 ja/archives/page/9/index.html
 create mode 100644 ja/categories/Database/Postgresql/index.html
 create mode 100644 ja/categories/Database/index.html
 create mode 100644 ja/categories/Docker/index.html
 create mode 100644 ja/categories/Infra/Docker/index.html
 create mode 100644 "ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
 create mode 100644 "ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 ja/categories/Infra/index.html
 create mode 100644 ja/categories/Infrastructure/index.html
 create mode 100644 ja/categories/Linux/Oracle/Docker/index.html
 create mode 100644 ja/categories/Linux/Oracle/index.html
 create mode 100644 ja/categories/Linux/RPM/index.html
 create mode 100644 ja/categories/Linux/index.html
 create mode 100644 ja/categories/NodeJS/Npm/index.html
 create mode 100644 ja/categories/NodeJS/index.html
 create mode 100644 ja/categories/OracleLinux/index.html
 create mode 100644 "ja/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
 create mode 100644 "ja/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
 create mode 100644 ja/categories/index.html
 create mode 100644 ja/categories/linux/index.html
 create mode 100644 ja/categories/linux/systemctl/index.html
 create mode 100644 "ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
 create mode 100644 "ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
 create mode 100644 "ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
 create mode 100644 "ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
 create mode 100644 "ja/categories/\345\244\247\345\211\215\347\253\257/index.html"
 create mode 100644 "ja/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
 create mode 100644 "ja/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
 create mode 100644 "ja/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
 create mode 100644 "ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
 create mode 100644 "ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
 create mode 100644 "ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
 create mode 100644 "ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
 create mode 100644 "ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
 create mode 100644 "ja/categories/\346\236\266\346\236\204/index.html"
 create mode 100644 "ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
 create mode 100644 "ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
 create mode 100644 "ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
 create mode 100644 "ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
 create mode 100644 "ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
 create mode 100644 "ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
 create mode 100644 "ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
 create mode 100644 "ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
 create mode 100644 "ja/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
 create mode 100644 "ja/categories/\350\231\232\346\213\237\345\214\226/index.html"
 create mode 100644 ja/index.html
 create mode 100644 ja/page/10/index.html
 create mode 100644 ja/page/100/index.html
 create mode 100644 ja/page/101/index.html
 create mode 100644 ja/page/102/index.html
 create mode 100644 ja/page/103/index.html
 create mode 100644 ja/page/104/index.html
 create mode 100644 ja/page/105/index.html
 create mode 100644 ja/page/106/index.html
 create mode 100644 ja/page/107/index.html
 create mode 100644 ja/page/108/index.html
 create mode 100644 ja/page/109/index.html
 create mode 100644 ja/page/11/index.html
 create mode 100644 ja/page/110/index.html
 create mode 100644 ja/page/111/index.html
 create mode 100644 ja/page/112/index.html
 create mode 100644 ja/page/113/index.html
 create mode 100644 ja/page/114/index.html
 create mode 100644 ja/page/115/index.html
 create mode 100644 ja/page/116/index.html
 create mode 100644 ja/page/117/index.html
 create mode 100644 ja/page/118/index.html
 create mode 100644 ja/page/119/index.html
 create mode 100644 ja/page/12/index.html
 create mode 100644 ja/page/120/index.html
 create mode 100644 ja/page/121/index.html
 create mode 100644 ja/page/122/index.html
 create mode 100644 ja/page/123/index.html
 create mode 100644 ja/page/124/index.html
 create mode 100644 ja/page/125/index.html
 create mode 100644 ja/page/126/index.html
 create mode 100644 ja/page/127/index.html
 create mode 100644 ja/page/128/index.html
 create mode 100644 ja/page/13/index.html
 create mode 100644 ja/page/14/index.html
 create mode 100644 ja/page/15/index.html
 create mode 100644 ja/page/16/index.html
 create mode 100644 ja/page/17/index.html
 create mode 100644 ja/page/18/index.html
 create mode 100644 ja/page/19/index.html
 create mode 100644 ja/page/2/index.html
 create mode 100644 ja/page/20/index.html
 create mode 100644 ja/page/21/index.html
 create mode 100644 ja/page/22/index.html
 create mode 100644 ja/page/23/index.html
 create mode 100644 ja/page/24/index.html
 create mode 100644 ja/page/25/index.html
 create mode 100644 ja/page/26/index.html
 create mode 100644 ja/page/27/index.html
 create mode 100644 ja/page/28/index.html
 create mode 100644 ja/page/29/index.html
 create mode 100644 ja/page/3/index.html
 create mode 100644 ja/page/30/index.html
 create mode 100644 ja/page/31/index.html
 create mode 100644 ja/page/32/index.html
 create mode 100644 ja/page/33/index.html
 create mode 100644 ja/page/34/index.html
 create mode 100644 ja/page/35/index.html
 create mode 100644 ja/page/36/index.html
 create mode 100644 ja/page/37/index.html
 create mode 100644 ja/page/38/index.html
 create mode 100644 ja/page/39/index.html
 create mode 100644 ja/page/4/index.html
 create mode 100644 ja/page/40/index.html
 create mode 100644 ja/page/41/index.html
 create mode 100644 ja/page/42/index.html
 create mode 100644 ja/page/43/index.html
 create mode 100644 ja/page/44/index.html
 create mode 100644 ja/page/45/index.html
 create mode 100644 ja/page/46/index.html
 create mode 100644 ja/page/47/index.html
 create mode 100644 ja/page/48/index.html
 create mode 100644 ja/page/49/index.html
 create mode 100644 ja/page/5/index.html
 create mode 100644 ja/page/50/index.html
 create mode 100644 ja/page/51/index.html
 create mode 100644 ja/page/52/index.html
 create mode 100644 ja/page/53/index.html
 create mode 100644 ja/page/54/index.html
 create mode 100644 ja/page/55/index.html
 create mode 100644 ja/page/56/index.html
 create mode 100644 ja/page/57/index.html
 create mode 100644 ja/page/58/index.html
 create mode 100644 ja/page/59/index.html
 create mode 100644 ja/page/6/index.html
 create mode 100644 ja/page/60/index.html
 create mode 100644 ja/page/61/index.html
 create mode 100644 ja/page/62/index.html
 create mode 100644 ja/page/63/index.html
 create mode 100644 ja/page/64/index.html
 create mode 100644 ja/page/65/index.html
 create mode 100644 ja/page/66/index.html
 create mode 100644 ja/page/67/index.html
 create mode 100644 ja/page/68/index.html
 create mode 100644 ja/page/69/index.html
 create mode 100644 ja/page/7/index.html
 create mode 100644 ja/page/70/index.html
 create mode 100644 ja/page/71/index.html
 create mode 100644 ja/page/72/index.html
 create mode 100644 ja/page/73/index.html
 create mode 100644 ja/page/74/index.html
 create mode 100644 ja/page/75/index.html
 create mode 100644 ja/page/76/index.html
 create mode 100644 ja/page/77/index.html
 create mode 100644 ja/page/78/index.html
 create mode 100644 ja/page/79/index.html
 create mode 100644 ja/page/8/index.html
 create mode 100644 ja/page/80/index.html
 create mode 100644 ja/page/81/index.html
 create mode 100644 ja/page/82/index.html
 create mode 100644 ja/page/83/index.html
 create mode 100644 ja/page/84/index.html
 create mode 100644 ja/page/85/index.html
 create mode 100644 ja/page/86/index.html
 create mode 100644 ja/page/87/index.html
 create mode 100644 ja/page/88/index.html
 create mode 100644 ja/page/89/index.html
 create mode 100644 ja/page/9/index.html
 create mode 100644 ja/page/90/index.html
 create mode 100644 ja/page/91/index.html
 create mode 100644 ja/page/92/index.html
 create mode 100644 ja/page/93/index.html
 create mode 100644 ja/page/94/index.html
 create mode 100644 ja/page/95/index.html
 create mode 100644 ja/page/96/index.html
 create mode 100644 ja/page/97/index.html
 create mode 100644 ja/page/98/index.html
 create mode 100644 ja/page/99/index.html
 create mode 100644 ja/tags/index.html
 create mode 100644 js/local-search.js
 create mode 100644 js/motion.js
 create mode 100644 js/next-boot.js
 create mode 100644 js/schemes/pisces.js
 create mode 100644 js/utils.js
 create mode 100644 lib/anime.min.js
 create mode 100644 lib/font-awesome/css/all.min.css
 create mode 100644 lib/font-awesome/webfonts/fa-brands-400.woff2
 create mode 100644 lib/font-awesome/webfonts/fa-regular-400.woff2
 create mode 100644 lib/font-awesome/webfonts/fa-solid-900.woff2
 create mode 100644 lib/velocity/velocity.min.js
 create mode 100644 lib/velocity/velocity.ui.min.js
 create mode 100644 live2dw/assets/moc/wanko.1024/texture_00.png
 create mode 100644 live2dw/assets/moc/wanko.moc
 create mode 100644 live2dw/assets/mtn/idle_01.mtn
 create mode 100644 live2dw/assets/mtn/idle_02.mtn
 create mode 100644 live2dw/assets/mtn/idle_03.mtn
 create mode 100644 live2dw/assets/mtn/idle_04.mtn
 create mode 100644 live2dw/assets/mtn/shake_01.mtn
 create mode 100644 live2dw/assets/mtn/shake_02.mtn
 create mode 100644 live2dw/assets/mtn/touch_01.mtn
 create mode 100644 live2dw/assets/mtn/touch_02.mtn
 create mode 100644 live2dw/assets/mtn/touch_03.mtn
 create mode 100644 live2dw/assets/mtn/touch_04.mtn
 create mode 100644 live2dw/assets/mtn/touch_05.mtn
 create mode 100644 live2dw/assets/mtn/touch_06.mtn
 create mode 100644 live2dw/assets/wanko.model.json
 create mode 100644 live2dw/lib/L2Dwidget.0.min.js
 create mode 100644 live2dw/lib/L2Dwidget.0.min.js.map
 create mode 100644 live2dw/lib/L2Dwidget.min.js
 create mode 100644 live2dw/lib/L2Dwidget.min.js.map
 create mode 100644 page/10/index.html
 create mode 100644 page/100/index.html
 create mode 100644 page/101/index.html
 create mode 100644 page/102/index.html
 create mode 100644 page/103/index.html
 create mode 100644 page/104/index.html
 create mode 100644 page/105/index.html
 create mode 100644 page/106/index.html
 create mode 100644 page/107/index.html
 create mode 100644 page/108/index.html
 create mode 100644 page/109/index.html
 create mode 100644 page/11/index.html
 create mode 100644 page/110/index.html
 create mode 100644 page/111/index.html
 create mode 100644 page/112/index.html
 create mode 100644 page/113/index.html
 create mode 100644 page/114/index.html
 create mode 100644 page/115/index.html
 create mode 100644 page/116/index.html
 create mode 100644 page/117/index.html
 create mode 100644 page/118/index.html
 create mode 100644 page/119/index.html
 create mode 100644 page/12/index.html
 create mode 100644 page/120/index.html
 create mode 100644 page/121/index.html
 create mode 100644 page/122/index.html
 create mode 100644 page/123/index.html
 create mode 100644 page/124/index.html
 create mode 100644 page/125/index.html
 create mode 100644 page/126/index.html
 create mode 100644 page/127/index.html
 create mode 100644 page/128/index.html
 create mode 100644 page/13/index.html
 create mode 100644 page/14/index.html
 create mode 100644 page/15/index.html
 create mode 100644 page/16/index.html
 create mode 100644 page/17/index.html
 create mode 100644 page/18/index.html
 create mode 100644 page/19/index.html
 create mode 100644 page/2/index.html
 create mode 100644 page/20/index.html
 create mode 100644 page/21/index.html
 create mode 100644 page/22/index.html
 create mode 100644 page/23/index.html
 create mode 100644 page/24/index.html
 create mode 100644 page/25/index.html
 create mode 100644 page/26/index.html
 create mode 100644 page/27/index.html
 create mode 100644 page/28/index.html
 create mode 100644 page/29/index.html
 create mode 100644 page/3/index.html
 create mode 100644 page/30/index.html
 create mode 100644 page/31/index.html
 create mode 100644 page/32/index.html
 create mode 100644 page/33/index.html
 create mode 100644 page/34/index.html
 create mode 100644 page/35/index.html
 create mode 100644 page/36/index.html
 create mode 100644 page/37/index.html
 create mode 100644 page/38/index.html
 create mode 100644 page/39/index.html
 create mode 100644 page/4/index.html
 create mode 100644 page/40/index.html
 create mode 100644 page/41/index.html
 create mode 100644 page/42/index.html
 create mode 100644 page/43/index.html
 create mode 100644 page/44/index.html
 create mode 100644 page/45/index.html
 create mode 100644 page/46/index.html
 create mode 100644 page/47/index.html
 create mode 100644 page/48/index.html
 create mode 100644 page/49/index.html
 create mode 100644 page/5/index.html
 create mode 100644 page/50/index.html
 create mode 100644 page/51/index.html
 create mode 100644 page/52/index.html
 create mode 100644 page/53/index.html
 create mode 100644 page/54/index.html
 create mode 100644 page/55/index.html
 create mode 100644 page/56/index.html
 create mode 100644 page/57/index.html
 create mode 100644 page/58/index.html
 create mode 100644 page/59/index.html
 create mode 100644 page/6/index.html
 create mode 100644 page/60/index.html
 create mode 100644 page/61/index.html
 create mode 100644 page/62/index.html
 create mode 100644 page/63/index.html
 create mode 100644 page/64/index.html
 create mode 100644 page/65/index.html
 create mode 100644 page/66/index.html
 create mode 100644 page/67/index.html
 create mode 100644 page/68/index.html
 create mode 100644 page/69/index.html
 create mode 100644 page/7/index.html
 create mode 100644 page/70/index.html
 create mode 100644 page/71/index.html
 create mode 100644 page/72/index.html
 create mode 100644 page/73/index.html
 create mode 100644 page/74/index.html
 create mode 100644 page/75/index.html
 create mode 100644 page/76/index.html
 create mode 100644 page/77/index.html
 create mode 100644 page/78/index.html
 create mode 100644 page/79/index.html
 create mode 100644 page/8/index.html
 create mode 100644 page/80/index.html
 create mode 100644 page/81/index.html
 create mode 100644 page/82/index.html
 create mode 100644 page/83/index.html
 create mode 100644 page/84/index.html
 create mode 100644 page/85/index.html
 create mode 100644 page/86/index.html
 create mode 100644 page/87/index.html
 create mode 100644 page/88/index.html
 create mode 100644 page/89/index.html
 create mode 100644 page/9/index.html
 create mode 100644 page/90/index.html
 create mode 100644 page/91/index.html
 create mode 100644 page/92/index.html
 create mode 100644 page/93/index.html
 create mode 100644 page/94/index.html
 create mode 100644 page/95/index.html
 create mode 100644 page/96/index.html
 create mode 100644 page/97/index.html
 create mode 100644 page/98/index.html
 create mode 100644 page/99/index.html
 delete mode 100644 placeholder
 create mode 100644 search.xml
 create mode 100644 tags/Actions/index.html
 create mode 100644 tags/CI-CD/index.html
 create mode 100644 tags/CSS/index.html
 create mode 100644 tags/CSS3/index.html
 create mode 100644 "tags/CSS\346\212\200\345\267\247/index.html"
 create mode 100644 tags/CodeReview/index.html
 create mode 100644 tags/Cordova/index.html
 create mode 100644 tags/Docker-Compose/index.html
 create mode 100644 tags/Docker/index.html
 create mode 100644 tags/DockerFile/index.html
 create mode 100644 tags/ESLint/index.html
 create mode 100644 tags/Electron/index.html
 create mode 100644 tags/EventLoop/index.html
 create mode 100644 tags/GIT/index.html
 create mode 100644 tags/Git/index.html
 create mode 100644 tags/GitLab/index.html
 create mode 100644 tags/Github/index.html
 create mode 100644 "tags/Go\350\257\255\350\250\200/index.html"
 create mode 100644 tags/Hexo/index.html
 create mode 100644 tags/HomeBrew/index.html
 create mode 100644 tags/Ionic/index.html
 create mode 100644 tags/Linux/index.html
 create mode 100644 tags/Mac/index.html
 create mode 100644 tags/Nginx/index.html
 create mode 100644 tags/NodeJS/index.html
 create mode 100644 tags/Postgresql/index.html
 create mode 100644 tags/Prettier/index.html
 create mode 100644 tags/RESTful/index.html
 create mode 100644 tags/RPM/index.html
 create mode 100644 tags/React/index.html
 create mode 100644 tags/Restful-API/index.html
 create mode 100644 tags/SSR/index.html
 create mode 100644 tags/SemVer/index.html
 create mode 100644 tags/Squid/index.html
 create mode 100644 tags/Timeout/index.html
 create mode 100644 tags/UglifyJsPlugin/index.html
 create mode 100644 tags/VSCode/index.html
 create mode 100644 "tags/VSCode\346\217\222\344\273\266/index.html"
 create mode 100644 tags/Vue/index.html
 create mode 100644 tags/Webpack/index.html
 create mode 100644 tags/ajax/index.html
 create mode 100644 tags/es6/index.html
 create mode 100644 tags/get/index.html
 create mode 100644 tags/index.html
 create mode 100644 tags/jsonp/index.html
 create mode 100644 tags/kernel/index.html
 create mode 100644 tags/npm/index.html
 create mode 100644 tags/npx/index.html
 create mode 100644 tags/path-intellisense/index.html
 create mode 100644 tags/port/index.html
 create mode 100644 tags/promise/index.html
 create mode 100644 tags/registry/index.html
 create mode 100644 tags/rnpm/index.html
 create mode 100644 tags/sass/index.html
 create mode 100644 tags/scp/index.html
 create mode 100644 tags/systemctl/index.html
 create mode 100644 tags/vuepress/index.html
 create mode 100644 "tags/\344\272\213\344\273\266\351\251\261\345\212\250/index.html"
 create mode 100644 "tags/\345\205\274\345\256\271\346\200\247\351\227\256\351\242\230/index.html"
 create mode 100644 "tags/\345\206\205\345\255\230\345\233\236\346\224\266/index.html"
 create mode 100644 "tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
 create mode 100644 "tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
 create mode 100644 "tags/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
 create mode 100644 "tags/\345\220\214\346\236\204\346\212\200\346\234\257/index.html"
 create mode 100644 "tags/\345\245\207\346\200\252\351\227\256\351\242\230/index.html"
 create mode 100644 "tags/\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
 create mode 100644 "tags/\345\271\264\347\273\210\346\200\273\347\273\223/index.html"
 create mode 100644 "tags/\345\276\256\344\277\241/index.html"
 create mode 100644 "tags/\346\211\223\345\214\205/index.html"
 create mode 100644 "tags/\346\216\222\345\272\217\347\256\227\346\263\225/index.html"
 create mode 100644 "tags/\346\217\222\344\273\266/index.html"
 create mode 100644 "tags/\346\225\260\346\215\256\345\215\267/index.html"
 create mode 100644 "tags/\346\225\260\347\273\204/index.html"
 create mode 100644 "tags/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html"
 create mode 100644 "tags/\346\236\266\346\236\204/index.html"
 create mode 100644 "tags/\346\265\267\345\244\226\346\217\220\351\200\237/index.html"
 create mode 100644 "tags/\346\272\220\347\240\201\350\247\243\346\236\220/index.html"
 create mode 100644 "tags/\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
 create mode 100644 "tags/\347\237\245\350\257\206\347\202\271/index.html"
 create mode 100644 "tags/\347\273\204\344\273\266\351\200\232\344\277\241/index.html"
 create mode 100644 "tags/\347\273\217\351\252\214\344\271\213\350\260\210/index.html"
 create mode 100644 "tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
 create mode 100644 "tags/\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
 create mode 100644 "tags/\350\204\232\346\211\213\346\236\266/index.html"
 create mode 100644 "tags/\350\207\252\345\212\250\346\236\204\345\273\272/index.html"
 create mode 100644 "tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
 create mode 100644 "tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
 create mode 100644 "tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
 create mode 100644 "tags/\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
 create mode 100644 "tags/\350\267\257\345\276\204\345\210\253\345\220\215/index.html"
 create mode 100644 "tags/\351\225\234\345\203\217\345\256\211\345\205\250/index.html"
 create mode 100644 "tags/\351\235\242\350\257\225/index.html"
 create mode 100644 "tags/\351\235\242\350\257\225/page/2/index.html"
 create mode 100644 "tags/\351\235\242\350\257\225/page/3/index.html"

diff --git a/2013/06/17/Read-High-Performance-JavaScript/index.html b/2013/06/17/Read-High-Performance-JavaScript/index.html
new file mode 100644
index 0000000000..a2f4354144
--- /dev/null
+++ b/2013/06/17/Read-High-Performance-JavaScript/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《高性能JAVASCRIPT》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2013-06-17T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>《高性能JAVASCRIPT》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《高性能JAVASCRIPT》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2013/06/17/Read-High-Performance-JavaScript/">《高性能JAVASCRIPT》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月17日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2013/06/17/Read-High-Performance-JavaScript/" title="《高性能JAVASCRIPT》读书笔记">https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item"></div>
+      <div class="post-nav-item">
+    <a href="/2013/06/26/CSS-Triangle-Circle/" rel="next" title="CSS border三角、圆角图形生成技术详解">
+      CSS border三角、圆角图形生成技术详解 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BB%8E%E5%B0%8F%E4%BA%8B%E6%8F%90%E5%8D%87JAVASCRIPT%E6%80%A7%E8%83%BD%E3%80%82"><span class="nav-number">2.</span> <span class="nav-text">如何从小事提升JAVASCRIPT性能。</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f62b2ec044917090a45beaf0d17b5936',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2013/06/26/CSS-Triangle-Circle/index.html b/2013/06/26/CSS-Triangle-Circle/index.html
new file mode 100644
index 0000000000..ebe5c0fc44
--- /dev/null
+++ b/2013/06/26/CSS-Triangle-Circle/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS border三角、圆角图形生成技术详解">
+<meta property="og:url" content="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2013-06-26T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS技巧">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>CSS border三角、圆角图形生成技术详解 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS border三角、圆角图形生成技术详解
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+<span id="more"></span>
+
+<h1 id="CSS-border生成三角技术简介"><a href="#CSS-border生成三角技术简介" class="headerlink" title="CSS border生成三角技术简介"></a>CSS border生成三角技术简介</h1><h2 id="效果抢鲜"><a href="#效果抢鲜" class="headerlink" title="效果抢鲜"></a>效果抢鲜</h2><p>下图为使用CSS的border属性实现的三角效果：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何实现的，为何会有这样的效果，不急，take it easy!</p>
+<h2 id="梯形图案"><a href="#梯形图案" class="headerlink" title="梯形图案"></a>梯形图案</h2><p>看下面这段样式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 10px; </span><br><span class="line">  height: 10px; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #0000ff #339966 #00ff00</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：</p>
+<h2 id="更进一步-–-部分边框透明"><a href="#更进一步-–-部分边框透明" class="headerlink" title="更进一步 – 部分边框透明"></a>更进一步 – 部分边框透明</h2><p>现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width:10px; </span><br><span class="line">  height:10px; </span><br><span class="line">  border:10px solid; </span><br><span class="line">  border-color:#ff3300 #ffffff #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下图（截自Firefox3.5）：</p>
+<h2 id="从梯形到三角"><a href="#从梯形到三角" class="headerlink" title="从梯形到三角"></a>从梯形到三角</h2><p>上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下（依旧截图自Firefox3.5）：</p>
+<h2 id="从等腰直角三角形到普通等腰三角"><a href="#从等腰直角三角形到普通等腰三角" class="headerlink" title="从等腰直角三角形到普通等腰三角"></a>从等腰直角三角形到普通等腰三角</h2><p>上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>得到的结果如下图：</p>
+<h2 id="从等腰到不等腰"><a href="#从等腰到不等腰" class="headerlink" title="从等腰到不等腰"></a>从等腰到不等腰</h2><p>我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="实际的应用"><a href="#实际的应用" class="headerlink" title="实际的应用"></a>实际的应用</h2><p>关于应用，不多说，直接看图：<br>说明：<br>以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&amp;Dashed终极分析及IE6透明边框。</p>
+<h1 id="CSS-border圆角生成技术简介"><a href="#CSS-border圆角生成技术简介" class="headerlink" title="CSS border圆角生成技术简介"></a>CSS border圆角生成技术简介</h1><h2 id="我看圆角"><a href="#我看圆角" class="headerlink" title="我看圆角"></a>我看圆角</h2><p>一提到圆角，我脑中闪过的词就是“定位”，“嵌套”，“模拟”，“渐进增强”，“滥用”。</p>
+<ul>
+<li>定位，也就是切四个角上下左右定位，这是淘宝首页的做法，但是面对IE6的奇偶bug只能当作看客；</li>
+<li>使用“嵌套”则不会有此问题，“嵌套”分图片背景嵌套和CSS边框嵌套，使用图片嵌套则图片的重用性，大小优化有待加强，边框嵌套则技术实现上有些难度；</li>
+<li>或使用“渐进增强”，CSS3 border-radius属性，而不要去鸟IE这类自我感觉良好的浏览器；</li>
+<li>或是学习Google使用CSS模拟，而一般的CSS模拟都是使用左右边框+背景色的方式1像素1像素的拼合成的。这类方法各有优缺点，需根据实际情况采用。对于满眼圆角的设计图我是很不喜欢的，该用则用，切勿为了圆角而圆角。</li>
+</ul>
+<h2 id="border圆角图案生成法"><a href="#border圆角图案生成法" class="headerlink" title="border圆角图案生成法"></a>border圆角图案生成法</h2><p>这里介绍的实现圆角的得到与上面提到的都是不一样的，虽然也属于CSS模拟的范畴，但是其高效的程度确实相当惊人的，可谓最佳实践之一。<br>我们先看看效果，见下图，截自Firefox3.6：<br>上述效果的实现仅仅使用了三个标签，如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; html 代码</span><br><span class="line">&lt;div class&#x3D;&quot;box&quot;&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;top&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;center&quot;&gt;我是一只小小鸟、小小鸟！&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;bot&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.box&#123;</span><br><span class="line">  width:500px;</span><br><span class="line">&#125;</span><br><span class="line">.top&#123;</span><br><span class="line">  border-bottom:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cc0000; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br><span class="line">.center&#123;</span><br><span class="line">  padding:10px 20px; </span><br><span class="line">  color:white; </span><br><span class="line">  font-size:14px; </span><br><span class="line">  background:#cc0000;</span><br><span class="line">&#125;</span><br><span class="line">.bot&#123;</span><br><span class="line">  border-top:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cccccc; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们看看这段代码在IE6下的效果：</p>
+<p>这里的高效在于，仅仅使用了一层标签就模拟了3像素的圆角，按照曾经我对CSS圆角模拟的理解，模拟1像素的圆角需要一层标签(background+borderLeft+borderRight)，两像素的需要两层标签，三像素的需要三层标签。</p>
+<p>有点神奇，但是就像看刘谦的魔术一样，说穿了也就那么回事，其实这里的圆角模拟在本文的上面已经展示了，就是这样图片：</p>
+<p>您可能会疑问，是不是搞错图片啦，这显然不是一个模样的，非也非也，就本质上而言，圆角的实现与上面的梯形图就是同样的东西。现在，盯着上面这张图，我们想象一下，用力的想象，用想花姑娘的那番劲头想象——上面的梯形宽度越来越宽（不是拉伸），一直宽到500像素，是不是与上面实现的圆角的下边缘一致啊？</p>
+<p>也就是说，那个含有“我是一只小小鸟……”文字的圆角图形是有一个上梯形+矩形+下梯形组成的。参见下面的分离效果图：<br>您可以狠狠地点击这里：CSS border圆角生成demo</p>
+<h2 id="局限性"><a href="#局限性" class="headerlink" title="局限性"></a>局限性</h2><p>人无完人，金无足赤，此方法虽然简洁高效，兼容性上佳，但是依然有局限性，在实现实色背景的圆角效果时，此方法可谓首选；如果是纯粹的圆角边框，此方法也可以实现，需要用到边框重叠，但是标签数几乎要翻倍，其权衡效用将大打折扣，反不如其他圆角方法来的实在。</p>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>如果在web制作中，需要用的一些直接可以使用CSS+单标签模拟的图片，我的建议是“毫不犹豫使用CSS模拟”，例如实色的三角，或是实现实色的圆角效果，这可以说是最高效，最利于扩展维护的前端实现方法了。我们需要开阔的思维，而不要仅仅局限于眼前的技术，武侠中所谓的“无招胜有招”还是有着一定的哲学道理的，长远来看，意识与海纳百川的心态比当下的一点技术更来得重要。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2013/06/26/CSS-Triangle-Circle/">CSS border三角、圆角图形生成技术详解</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月26日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2013/06/26/CSS-Triangle-Circle/" title="CSS border三角、圆角图形生成技术详解">https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/CSS%E6%8A%80%E5%B7%A7/" rel="tag"># CSS技巧</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2013/06/17/Read-High-Performance-JavaScript/" rel="prev" title="《高性能JAVASCRIPT》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《高性能JAVASCRIPT》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2015/12/31/Read-Let-your-boss-promote-you/" rel="next" title="《让老板提拔你》读书笔记">
+      《让老板提拔你》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E7%94%9F%E6%88%90%E4%B8%89%E8%A7%92%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">CSS border生成三角技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%88%E6%9E%9C%E6%8A%A2%E9%B2%9C"><span class="nav-number">2.1.</span> <span class="nav-text">效果抢鲜</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A2%AF%E5%BD%A2%E5%9B%BE%E6%A1%88"><span class="nav-number">2.2.</span> <span class="nav-text">梯形图案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5-%E2%80%93-%E9%83%A8%E5%88%86%E8%BE%B9%E6%A1%86%E9%80%8F%E6%98%8E"><span class="nav-number">2.3.</span> <span class="nav-text">更进一步 – 部分边框透明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E6%A2%AF%E5%BD%A2%E5%88%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.4.</span> <span class="nav-text">从梯形到三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E7%9B%B4%E8%A7%92%E4%B8%89%E8%A7%92%E5%BD%A2%E5%88%B0%E6%99%AE%E9%80%9A%E7%AD%89%E8%85%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.5.</span> <span class="nav-text">从等腰直角三角形到普通等腰三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E5%88%B0%E4%B8%8D%E7%AD%89%E8%85%B0"><span class="nav-number">2.6.</span> <span class="nav-text">从等腰到不等腰</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E9%99%85%E7%9A%84%E5%BA%94%E7%94%A8"><span class="nav-number">2.7.</span> <span class="nav-text">实际的应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E5%9C%86%E8%A7%92%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">3.</span> <span class="nav-text">CSS border圆角生成技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E7%9C%8B%E5%9C%86%E8%A7%92"><span class="nav-number">3.1.</span> <span class="nav-text">我看圆角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#border%E5%9C%86%E8%A7%92%E5%9B%BE%E6%A1%88%E7%94%9F%E6%88%90%E6%B3%95"><span class="nav-number">3.2.</span> <span class="nav-text">border圆角图案生成法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B1%80%E9%99%90%E6%80%A7"><span class="nav-number">3.3.</span> <span class="nav-text">局限性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">4.</span> <span class="nav-text">结语</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2013/06/26/CSS-Triangle-Circle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/26/CSS-Triangle-Circle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/26/CSS-Triangle-Circle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '94d597a1b0d74e85d2093bf5ff50038a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2015/12/31/Read-Let-your-boss-promote-you/index.html b/2015/12/31/Read-Let-your-boss-promote-you/index.html
new file mode 100644
index 0000000000..95c0186920
--- /dev/null
+++ b/2015/12/31/Read-Let-your-boss-promote-you/index.html
@@ -0,0 +1,780 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《让老板提拔你》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2015-12-31T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>《让老板提拔你》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《让老板提拔你》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2015/12/31/Read-Let-your-boss-promote-you/">《让老板提拔你》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2015年12月31日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2015/12/31/Read-Let-your-boss-promote-you/" title="《让老板提拔你》读书笔记">https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2013/06/26/CSS-Triangle-Circle/" rel="prev" title="CSS border三角、圆角图形生成技术详解">
+      <i class="fa fa-chevron-left"></i> CSS border三角、圆角图形生成技术详解
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="next" title="《晨间日记的奇迹》读书笔记">
+      《晨间日记的奇迹》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D%E8%87%AA%E5%B7%B1"><span class="nav-number">2.</span> <span class="nav-text">定位自己</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A6%81%E7%B4%A0"><span class="nav-number">2.1.</span> <span class="nav-text">要素</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A5%91%E5%90%88%E5%BA%A6"><span class="nav-number">2.1.1.</span> <span class="nav-text">契合度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%83%E5%A4%A7%E7%A7%98%E8%AF%80"><span class="nav-number">2.1.2.</span> <span class="nav-text">七大秘诀</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E8%B0%88%E8%96%AA%E8%B5%84"><span class="nav-number">2.1.3.</span> <span class="nav-text">如何谈薪资</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%86%E7%9F%A5%E8%AF%86%E5%8D%96%E4%B8%AA%E5%A5%BD%E4%BB%B7%E9%92%B1"><span class="nav-number">2.1.4.</span> <span class="nav-text">将知识卖个好价钱</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%AB%98%E8%96%AA%E6%98%AF%E5%9B%A0%E4%B8%BA%E2%80%9C%E7%89%A9%E6%9C%89%E6%89%80%E5%80%BC%E2%80%9D"><span class="nav-number">2.1.5.</span> <span class="nav-text">高薪是因为“物有所值”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E4%B8%B0%E5%AF%8C%E8%B5%B0%E5%90%91%E6%88%90%E5%8A%9F%E7%BB%8F%E9%AA%8C"><span class="nav-number">2.1.6.</span> <span class="nav-text">失败丰富走向成功经验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%83%BD%E4%B8%BA%E4%BC%81%E4%B8%9A%E5%B8%A6%E6%9D%A5%E4%B8%B0%E5%8E%9A%E7%9A%84%E5%88%A9%E6%B6%A6%E6%89%8D%E6%98%AF%E4%BA%BA%E6%89%8D"><span class="nav-number">2.1.7.</span> <span class="nav-text">能为企业带来丰厚的利润才是人才</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%AB%98%E8%B4%A8%E9%AB%98%E6%95%88%E5%B7%A5%E4%BD%9C%E5%85%A8%E6%94%BB%E7%95%A5"><span class="nav-number">3.</span> <span class="nav-text">高质高效工作全攻略</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8D%E8%A6%81%E5%8F%AA%E6%8A%8A%E8%87%AA%E5%B7%B1%E5%BD%93%E6%88%90%E4%B8%80%E4%B8%AA%E6%89%93%E5%B7%A5%E4%BB%94"><span class="nav-number">4.</span> <span class="nav-text">不要只把自己当成一个打工仔</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8E%E4%B8%8A%E5%8F%B8%E7%9B%B8%E5%A4%84"><span class="nav-number">5.</span> <span class="nav-text">与上司相处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">6.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7676fe1e6618c1df8062d24315703e3d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html b/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
new file mode 100644
index 0000000000..634d4838ad
--- /dev/null
+++ b/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
@@ -0,0 +1,688 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《晨间日记的奇迹》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2016-10-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>《晨间日记的奇迹》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《晨间日记的奇迹》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2016/10/27/Read-The-miracle-of-the-morning-journal/">《晨间日记的奇迹》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2016年10月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" title="《晨间日记的奇迹》读书笔记">https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2015/12/31/Read-Let-your-boss-promote-you/" rel="prev" title="《让老板提拔你》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《让老板提拔你》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/08/29/browser-incompatibility-problem-solution/" rel="next" title="浏览器兼容性问题解决方案">
+      浏览器兼容性问题解决方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%97%A9%E4%B8%8A%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E5%A5%BD%E5%A4%84-%E2%80%94%E2%80%94-%E6%8F%90%E5%8D%87%E6%95%88%E7%8E%87"><span class="nav-number">2.</span> <span class="nav-text">早上写日记的好处 —— 提升效率</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">注意事项</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B02%E9%83%A8%E5%88%86"><span class="nav-number">4.</span> <span class="nav-text">晨间日记2部分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Part1"><span class="nav-number">4.1.</span> <span class="nav-text">Part1</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Part2"><span class="nav-number">4.2.</span> <span class="nav-text">Part2</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A4%9C%E6%99%9A%E6%97%A5%E8%AE%B0-VS-%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0"><span class="nav-number">5.</span> <span class="nav-text">夜晚日记 VS 晨间日记</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A2%A6%E6%83%B3%E6%88%90%E7%9C%9F%E8%A1%A8"><span class="nav-number">6.</span> <span class="nav-text">梦想成真表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%97%A9%E8%B5%B7"><span class="nav-number">7.</span> <span class="nav-text">如何早起</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E4%BA%94%E5%A4%A7%E5%A5%BD%E5%A4%84"><span class="nav-number">8.</span> <span class="nav-text">写日记的五大好处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%B0%E5%BD%95%E7%9A%84%E6%97%A5%E8%AE%B0%E8%A6%81%E5%B8%B8%E6%8B%BF%E5%87%BA%E6%9D%A5%E7%9C%8B%E7%9C%8B"><span class="nav-number">9.</span> <span class="nav-text">记录的日记要常拿出来看看</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%83%E7%A7%8D%E6%88%90%E5%8A%9F%E8%80%85%E7%9A%84%E4%B9%A0%E6%83%AF"><span class="nav-number">10.</span> <span class="nav-text">七种成功者的习惯</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0%E7%9A%84%E6%A0%BC%E5%BC%8F"><span class="nav-number">11.</span> <span class="nav-text">晨间日记的格式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E5%A4%A7%E5%8E%9F%E5%88%99%E5%92%8C%E4%B8%83%E5%A4%A7%E4%BD%9C%E6%88%98%E5%AE%88%E5%88%99"><span class="nav-number">12.</span> <span class="nav-text">三大原则和七大作战守则</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E8%AF%A5%E5%85%88%E8%82%AF%E5%AE%9A%E8%87%AA%E5%B7%B1%EF%BC%8C%E7%BB%99%E8%87%AA%E5%B7%B1%E6%89%93100%E5%88%86"><span class="nav-number">13.</span> <span class="nav-text">应该先肯定自己，给自己打100分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E2%80%94-%E8%AE%BE%E7%AB%8B%E4%B8%80%E4%B8%AA%E6%83%85%E5%A2%83"><span class="nav-number">13.1.</span> <span class="nav-text">解决办法— 设立一个情境</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%90%E5%88%B0%E7%9A%84%E5%8F%A6%E5%A4%96%E7%9A%84%E4%B9%A6"><span class="nav-number">14.</span> <span class="nav-text">提到的另外的书</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '47a721e8ba4f21c40d235de0511f2600',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/08/29/browser-incompatibility-problem-solution/index.html b/2017/08/29/browser-incompatibility-problem-solution/index.html
new file mode 100644
index 0000000000..4bfbcb5645
--- /dev/null
+++ b/2017/08/29/browser-incompatibility-problem-solution/index.html
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="浏览器兼容性问题解决方案">
+<meta property="og:url" content="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960">
+<meta property="article:published_time" content="2017-08-29T17:04:31.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="CSS">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>浏览器兼容性问题解决方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          浏览器兼容性问题解决方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+<span id="more"></span>
+<p><strong>普及</strong>：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。</p>
+<p><strong>贴士</strong>：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。</p>
+<h4 id="Normalize-css"><a href="#Normalize-css" class="headerlink" title="Normalize.css"></a>Normalize.css</h4><p>不同浏览器的默认样式存在差异，可以使用 <code>Normalize.css</code>抹平这些差异。当然，你也可以定制属于自己业务的 <code>reset.css</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link href&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;normalize&#x2F;7.0.0&#x2F;normalize.min.css&quot; rel&#x3D;&quot;stylesheet&quot;&gt;</span><br></pre></td></tr></table></figure>
+<p>简单粗暴法</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123; margin: 0; padding: 0; &#125;</span><br></pre></td></tr></table></figure>
+<h4 id="html5shiv-js"><a href="#html5shiv-js" class="headerlink" title="html5shiv.js"></a>html5shiv.js</h4><p>解决 ie9 以下浏览器对 html5 新增标签不识别的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--[if lt IE 9]&gt;</span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;html5shiv&#x2F;3.7.3&#x2F;html5shiv.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;![endif]--&gt;</span><br></pre></td></tr></table></figure>
+<!-- more -->
+<h4 id="respond-js"><a href="#respond-js" class="headerlink" title="respond.js"></a>respond.js</h4><p>解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;picturefill&#x2F;3.0.3&#x2F;picturefill.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="IE-条件注释"><a href="#IE-条件注释" class="headerlink" title="IE 条件注释"></a>IE 条件注释</h4><p>IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="IE-属性过滤器（较为常用的hack方法）"><a href="#IE-属性过滤器（较为常用的hack方法）" class="headerlink" title="IE 属性过滤器（较为常用的hack方法）"></a>IE 属性过滤器（较为常用的hack方法）</h4><p>针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960" alt="image"><br><img src="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="浏览器-CSS-兼容前缀"><a href="#浏览器-CSS-兼容前缀" class="headerlink" title="浏览器 CSS 兼容前缀"></a>浏览器 CSS 兼容前缀</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">-o-transform:rotate(7deg); &#x2F;&#x2F; Opera</span><br><span class="line"></span><br><span class="line">-ms-transform:rotate(7deg); &#x2F;&#x2F; IE</span><br><span class="line"></span><br><span class="line">-moz-transform:rotate(7deg); &#x2F;&#x2F; Firefox</span><br><span class="line"></span><br><span class="line">-webkit-transform:rotate(7deg); &#x2F;&#x2F; Chrome</span><br><span class="line"></span><br><span class="line">transform:rotate(7deg); &#x2F;&#x2F; 统一标识语句</span><br></pre></td></tr></table></figure>
+<p><em><strong>补充：</strong></em> 目前可以采用自动化插件完成，插件名称叫做 <code>Autoprefixer</code>，他可以解析css文件并且添加前缀到css内容里。</p>
+<p>把 <code>Auroprefixer</code> 添加到资源构建工具如：<code>webpack</code>后，就可以不用再手动补全浏览器前缀了，这里只需要你按照W3C的标准来书写css代码，剩下的工作就交给插件完成，目前<code>webpack</code>、<code>gulp</code>、<code>grunt</code>都有相应的插件，是不是开心啊。</p>
+<h4 id="a-标签的几种-CSS-状态的顺序"><a href="#a-标签的几种-CSS-状态的顺序" class="headerlink" title="a 标签的几种 CSS 状态的顺序"></a>a 标签的几种 CSS 状态的顺序</h4><p>很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。</p>
+<p>正确的a标签顺序应该是：<code>==love hate==</code></p>
+<ol>
+<li>link:平常的状态</li>
+<li>visited:被访问过之后</li>
+<li>hover:鼠标放到链接上的时候</li>
+<li>active:链接被按下的时候</li>
+</ol>
+<h4 id="完美解决-Placeholder"><a href="#完美解决-Placeholder" class="headerlink" title="完美解决 Placeholder"></a>完美解决 <code>Placeholder</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; value&#x3D;&quot;Name *&quot; onFocus&#x3D;&quot;this.value &#x3D; &#39;&#39;;&quot; onBlur&#x3D;&quot;if (this.value &#x3D;&#x3D; &#39;&#39;) &#123;this.value &#x3D; &#39;Name *&#39;;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
+
+<h4 id="清除浮动-最佳实践"><a href="#清除浮动-最佳实践" class="headerlink" title="清除浮动 最佳实践"></a>清除浮动 最佳实践</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.fl &#123; float: left; &#125;</span><br><span class="line">.fr &#123; float: right; &#125;</span><br><span class="line">.clearfix:after &#123; display: block; clear: both; content: &quot;&quot;; visibility: hidden; height: 0; &#125;</span><br><span class="line">.clearfix &#123; zoom: 1; &#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="BFC-解决边距重叠问题"><a href="#BFC-解决边距重叠问题" class="headerlink" title="BFC 解决边距重叠问题"></a>BFC 解决边距重叠问题</h4><p>当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：<code>overflow: hidden</code>;</p>
+<div class="box" id="box">
+  <p>Lorem ipsum dolor sit.</p>
+
+  <div style="overflow: hidden;">
+    <p>Lorem ipsum dolor sit.</p>
+  </div>
+
+  <p>Lorem ipsum dolor sit.</p>
+</div>
+
+<h4 id="IE6-双倍边距的问题"><a href="#IE6-双倍边距的问题" class="headerlink" title="IE6 双倍边距的问题"></a>IE6 双倍边距的问题</h4><p>设置 ie6 中设置浮动，同时又设置 <code>margin</code>，会出现双倍边距的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: inline;</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE9-以下浏览器不能使用-opacity"><a href="#解决-IE9-以下浏览器不能使用-opacity" class="headerlink" title="解决 IE9 以下浏览器不能使用 opacity"></a>解决 IE9 以下浏览器不能使用 opacity</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">opacity: 0.5;</span><br><span class="line">filter: alpha(opacity &#x3D; 50);</span><br><span class="line">filter: progid:DXImageTransform.Microsoft.Alpha(style &#x3D; 0, opacity &#x3D; 50);</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"><a href="#解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题" class="headerlink" title="解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"></a>解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;* IE6 hack *&#x2F;</span><br><span class="line">*html, *html body &#123;</span><br><span class="line">  background-image: url(about:blank);</span><br><span class="line">  background-attachment: fixed;</span><br><span class="line">&#125;</span><br><span class="line">*html #menu &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: expression(((e&#x3D;document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + &#39;px&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-背景闪烁的问题"><a href="#IE6-背景闪烁的问题" class="headerlink" title="IE6 背景闪烁的问题"></a>IE6 背景闪烁的问题</h4><p>问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载</p>
+<p>解决：可以用 JavaScript 设置 ie6 缓存这些图片：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.execCommand(&quot;BackgroundImageCache&quot;, false, true);</span><br></pre></td></tr></table></figure>
+<h4 id="解决在-IE6-下，列表与日期错位的问题"><a href="#解决在-IE6-下，列表与日期错位的问题" class="headerlink" title="解决在 IE6 下，列表与日期错位的问题"></a>解决在 IE6 下，列表与日期错位的问题</h4><p>日期<span> 标签放在标题 <a> 标签之前即可<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="解决-IE6-不支持-min-height-属性的问题"><a href="#解决-IE6-不支持-min-height-属性的问题" class="headerlink" title="解决 IE6 不支持 min-height 属性的问题"></a>解决 IE6 不支持 min-height 属性的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">min-height: 350px;</span><br><span class="line">_height: 350px;</span><br></pre></td></tr></table></figure>
+
+<h4 id="让-IE7-IE8-支持-CSS3-background-size属性"><a href="#让-IE7-IE8-支持-CSS3-background-size属性" class="headerlink" title="让 IE7 IE8 支持 CSS3 background-size属性"></a>让 IE7 IE8 支持 CSS3 background-size属性</h4><p>由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">html &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">body &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">  margin: 0;</span><br><span class="line">  padding: 0;</span><br><span class="line">  background-image: url(&#39;img&#x2F;37.png&#39;);</span><br><span class="line">  background-repeat: no-repeat;</span><br><span class="line">  background-size: cover;</span><br><span class="line">  -ms-behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">  behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-7-line-height-失效的问题"><a href="#IE6-7-line-height-失效的问题" class="headerlink" title="IE6-7 line-height 失效的问题"></a>IE6-7 line-height 失效的问题</h4><p>问题：在ie 中 img 与文字放一起时，line-height 不起作用</p>
+<p>解决：都设置成 float</p>
+<h4 id="td-自动换行的问题"><a href="#td-自动换行的问题" class="headerlink" title="td 自动换行的问题"></a>td 自动换行的问题</h4><p>问题：table 宽度固定，td 自动换行</p>
+<p>解决：设置 <code>Tabl</code>e 为 <code>table-layout: fixed</code>，<code>td</code> 为 <code>word-wrap: break-word</code></p>
+<h4 id="让层显示在-FLASH-之上"><a href="#让层显示在-FLASH-之上" class="headerlink" title="让层显示在 FLASH 之上"></a>让层显示在 FLASH 之上</h4><p>想让层的内容显示在 flash 上，把 FLASH 设置透明即可</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1、&lt;param name&#x3D;&quot; wmode &quot; value&#x3D;&quot;transparent&quot; &#x2F;&gt;</span><br><span class="line">2、&lt;param name&#x3D;&quot;wmode&quot; value&#x3D;&quot;opaque&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="键盘事件-keyCode-兼容性写法"><a href="#键盘事件-keyCode-兼容性写法" class="headerlink" title="键盘事件 keyCode 兼容性写法"></a>键盘事件 keyCode 兼容性写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var inp &#x3D; document.getElementById(&#39;inp&#39;)</span><br><span class="line">var result &#x3D; document.getElementById(&#39;result&#39;)</span><br><span class="line"></span><br><span class="line">function getKeyCode(e) &#123;</span><br><span class="line">  e &#x3D; e ? e : (window.event ? window.event : &quot;&quot;)</span><br><span class="line">  return e.keyCode ? e.keyCode : e.which</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">inp.onkeypress &#x3D; function(e) &#123;</span><br><span class="line">  result.innerHTML &#x3D; getKeyCode(e)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="求窗口大小的兼容写法"><a href="#求窗口大小的兼容写法" class="headerlink" title="求窗口大小的兼容写法"></a>求窗口大小的兼容写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 525</span><br><span class="line">var client_w &#x3D; document.documentElement.clientWidth || document.body.clientWidth;</span><br><span class="line">var client_h &#x3D; document.documentElement.clientHeight || document.body.clientHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高（包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var scroll_w &#x3D; document.documentElement.scrollWidth || document.body.scrollWidth;</span><br><span class="line">var scroll_h &#x3D; document.documentElement.scrollHeight || document.body.scrollHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高 (不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var offset_w &#x3D; document.documentElement.offsetWidth || document.body.offsetWidth;</span><br><span class="line">var offset_h &#x3D; document.documentElement.offsetHeight || document.body.offsetHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 滚动的高度</span><br><span class="line">var scroll_Top &#x3D; document.documentElement.scrollTop||document.body.scrollTop;</span><br></pre></td></tr></table></figure>
+<h4 id="DOM-事件处理程序的兼容写法（能力检测）"><a href="#DOM-事件处理程序的兼容写法（能力检测）" class="headerlink" title="DOM 事件处理程序的兼容写法（能力检测）"></a>DOM 事件处理程序的兼容写法（能力检测）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">var eventshiv &#x3D; &#123;</span><br><span class="line">    &#x2F;&#x2F; event兼容</span><br><span class="line">    getEvent: function(event) &#123;</span><br><span class="line">        return event ? event : window.event;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; type兼容</span><br><span class="line">    getType: function(event) &#123;</span><br><span class="line">        return event.type;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; target兼容</span><br><span class="line">    getTarget: function(event) &#123;</span><br><span class="line">        return event.target ? event.target : event.srcelem;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件句柄</span><br><span class="line">    addHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.addEventListener) &#123;</span><br><span class="line">            elem.addEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.attachEvent) &#123;</span><br><span class="line">            elem.attachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            &#x2F;&#x2F; 在这里由于.与&#39;on&#39;字符串不能链接，只能用 []</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; listener;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 移除事件句柄</span><br><span class="line">    removeHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.removeEventListener) &#123;</span><br><span class="line">            elem.removeEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.detachEvent) &#123;</span><br><span class="line">            elem.detachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; null;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件代理</span><br><span class="line">    addAgent: function (elem, type, agent, listener) &#123;</span><br><span class="line">        elem.addEventListener(type, function (e) &#123;</span><br><span class="line">            if (e.target.matches(agent)) &#123;</span><br><span class="line">                listener.call(e.target, e); &#x2F;&#x2F; this 指向 e.target</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 取消默认行为</span><br><span class="line">    preventDefault: function(event) &#123;</span><br><span class="line">        if (event.preventDefault) &#123;</span><br><span class="line">            event.preventDefault();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.returnValue &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 阻止事件冒泡</span><br><span class="line">    stopPropagation: function(event) &#123;</span><br><span class="line">        if (event.stopPropagation) &#123;</span><br><span class="line">            event.stopPropagation();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.cancelBubble &#x3D; true;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/08/29/browser-incompatibility-problem-solution/">浏览器兼容性问题解决方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月29日 - 17:04</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/08/29/browser-incompatibility-problem-solution/" title="浏览器兼容性问题解决方案">https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/tags/CSS/" rel="tag"># CSS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="prev" title="《晨间日记的奇迹》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《晨间日记的奇迹》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/08/30/npm-source/" rel="next" title="npm相关资料">
+      npm相关资料 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Normalize-css"><span class="nav-number">1.0.0.1.</span> <span class="nav-text">Normalize.css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html5shiv-js"><span class="nav-number">1.0.0.2.</span> <span class="nav-text">html5shiv.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#respond-js"><span class="nav-number">1.0.0.3.</span> <span class="nav-text">respond.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A"><span class="nav-number">1.0.0.4.</span> <span class="nav-text">IE 条件注释</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E5%B1%9E%E6%80%A7%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%88%E8%BE%83%E4%B8%BA%E5%B8%B8%E7%94%A8%E7%9A%84hack%E6%96%B9%E6%B3%95%EF%BC%89"><span class="nav-number">1.0.0.5.</span> <span class="nav-text">IE 属性过滤器（较为常用的hack方法）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8-CSS-%E5%85%BC%E5%AE%B9%E5%89%8D%E7%BC%80"><span class="nav-number">1.0.0.6.</span> <span class="nav-text">浏览器 CSS 兼容前缀</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%87%A0%E7%A7%8D-CSS-%E7%8A%B6%E6%80%81%E7%9A%84%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.0.7.</span> <span class="nav-text">a 标签的几种 CSS 状态的顺序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3-Placeholder"><span class="nav-number">1.0.0.8.</span> <span class="nav-text">完美解决 Placeholder</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.0.0.9.</span> <span class="nav-text">清除浮动 最佳实践</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC-%E8%A7%A3%E5%86%B3%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.10.</span> <span class="nav-text">BFC 解决边距重叠问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E5%8F%8C%E5%80%8D%E8%BE%B9%E8%B7%9D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.11.</span> <span class="nav-text">IE6 双倍边距的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE9-%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8-opacity"><span class="nav-number">1.0.0.12.</span> <span class="nav-text">解决 IE9 以下浏览器不能使用 opacity</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-fixed-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BB%A5%E5%8F%8AIE6%E4%B8%8B%E8%A2%AB%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E5%85%83%E7%B4%A0%E5%9C%A8%E6%BB%9A%E5%8A%A8%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E9%97%AA%E5%8A%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.13.</span> <span class="nav-text">解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E8%83%8C%E6%99%AF%E9%97%AA%E7%83%81%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.14.</span> <span class="nav-text">IE6 背景闪烁的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%9C%A8-IE6-%E4%B8%8B%EF%BC%8C%E5%88%97%E8%A1%A8%E4%B8%8E%E6%97%A5%E6%9C%9F%E9%94%99%E4%BD%8D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.15.</span> <span class="nav-text">解决在 IE6 下，列表与日期错位的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-min-height-%E5%B1%9E%E6%80%A7%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.16.</span> <span class="nav-text">解决 IE6 不支持 min-height 属性的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9-IE7-IE8-%E6%94%AF%E6%8C%81-CSS3-background-size%E5%B1%9E%E6%80%A7"><span class="nav-number">1.0.0.17.</span> <span class="nav-text">让 IE7 IE8 支持 CSS3 background-size属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-7-line-height-%E5%A4%B1%E6%95%88%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.18.</span> <span class="nav-text">IE6-7 line-height 失效的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#td-%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.19.</span> <span class="nav-text">td 自动换行的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9%E5%B1%82%E6%98%BE%E7%A4%BA%E5%9C%A8-FLASH-%E4%B9%8B%E4%B8%8A"><span class="nav-number">1.0.0.20.</span> <span class="nav-text">让层显示在 FLASH 之上</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6-keyCode-%E5%85%BC%E5%AE%B9%E6%80%A7%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.21.</span> <span class="nav-text">键盘事件 keyCode 兼容性写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B1%82%E7%AA%97%E5%8F%A3%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.22.</span> <span class="nav-text">求窗口大小的兼容写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95%EF%BC%88%E8%83%BD%E5%8A%9B%E6%A3%80%E6%B5%8B%EF%BC%89"><span class="nav-number">1.0.0.23.</span> <span class="nav-text">DOM 事件处理程序的兼容写法（能力检测）</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '67c258583b66deffa144ef65457980a7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/08/30/Vue-VSCode-Snippets/index.html b/2017/08/30/Vue-VSCode-Snippets/index.html
new file mode 100644
index 0000000000..bd53abb8ab
--- /dev/null
+++ b/2017/08/30/Vue-VSCode-Snippets/index.html
@@ -0,0 +1,777 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+<meta property="og:url" content="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-08-30T16:23:17.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+<span id="more"></span>
+
+<p>此插件可用比较简单的写法生成代码片段，非常适合开发工作，减少代码工作量。</p>
+<p>Script</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vdata</td>
+<td>Component data as a function</td>
+</tr>
+<tr>
+<td>vmethod</td>
+<td>Vue method</td>
+</tr>
+<tr>
+<td>vcomputed</td>
+<td>Vue computed property</td>
+</tr>
+<tr>
+<td>vwatcher</td>
+<td>Vue watcher with new and old value args</td>
+</tr>
+<tr>
+<td>vprops</td>
+<td>Props with type and default</td>
+</tr>
+<tr>
+<td>vimport</td>
+<td>Import one component into another</td>
+</tr>
+<tr>
+<td>vimport-c</td>
+<td>Import one component into another within the export statement</td>
+</tr>
+<tr>
+<td>vimport-export</td>
+<td>Import one component into another and use it within the export statement</td>
+</tr>
+<tr>
+<td>vfilter</td>
+<td>Vue filter</td>
+</tr>
+<tr>
+<td>vmixin</td>
+<td>Create a Vue Mixin</td>
+</tr>
+<tr>
+<td>vmixin-use</td>
+<td>Bring a mixin into a component to use</td>
+</tr>
+<tr>
+<td>vc-direct</td>
+<td>Vue create a custom directive</td>
+</tr>
+<tr>
+<td>vimport-lib</td>
+<td>Import a library</td>
+</tr>
+<tr>
+<td>vimport-gsap</td>
+<td>Import GreenSock with Timeline and Eases</td>
+</tr>
+<tr>
+<td>vanimhook-js</td>
+<td>Using the Transition component JS hooks in methods</td>
+</tr>
+</tbody></table>
+<!-- more -->
+<p>Template</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vfor</td>
+<td>v-for directive</td>
+</tr>
+<tr>
+<td>vmodel</td>
+<td>Semantic v-model directive</td>
+</tr>
+<tr>
+<td>vmodel-num</td>
+<td>Semantic v-model number directive</td>
+</tr>
+<tr>
+<td>von</td>
+<td>v-on click handler with arguments</td>
+</tr>
+<tr>
+<td>vel-props</td>
+<td>Component element with props</td>
+</tr>
+<tr>
+<td>vsrc</td>
+<td>Image src binding</td>
+</tr>
+<tr>
+<td>vstyle</td>
+<td>Inline style binding</td>
+</tr>
+<tr>
+<td>vstyle-obj</td>
+<td>Inline style binding with objects</td>
+</tr>
+<tr>
+<td>vclass</td>
+<td>Class binding</td>
+</tr>
+<tr>
+<td>vclass-obj</td>
+<td>Class binding with objects</td>
+</tr>
+<tr>
+<td>vclass-obj-mult</td>
+<td>Multiple conditional class bindings</td>
+</tr>
+<tr>
+<td>vanim</td>
+<td>Transition component with JS hooks</td>
+</tr>
+</tbody></table>
+<p>Vuex</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vstore</td>
+<td>Base for Vuex store.js</td>
+</tr>
+<tr>
+<td>vgetters</td>
+<td>Vuex Getter</td>
+</tr>
+<tr>
+<td>vmutation</td>
+<td>Vuex Mutation</td>
+</tr>
+<tr>
+<td>vaction</td>
+<td>Vuex Action</td>
+</tr>
+<tr>
+<td>vstore-import</td>
+<td>Import vuex store into main.js</td>
+</tr>
+</tbody></table>
+<p>Extra (plaintext)</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>gitignore</td>
+<td>.gitignore file presets</td>
+</tr>
+<tr>
+<td>vinc</td>
+<td>incrementer</td>
+</tr>
+<tr>
+<td>vdec</td>
+<td>decrementer</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/08/30/Vue-VSCode-Snippets/">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 16:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/08/30/Vue-VSCode-Snippets/" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+              <a href="/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/08/30/npm-source/" rel="prev" title="npm相关资料">
+      <i class="fa fa-chevron-left"></i> npm相关资料
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/08/30/Vue-basic/" rel="next" title="Vue基础">
+      Vue基础 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f2fd81a20de08b8460706eb5038b0880',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/08/30/Vue-basic/index.html b/2017/08/30/Vue-basic/index.html
new file mode 100644
index 0000000000..89b87abd8d
--- /dev/null
+++ b/2017/08/30/Vue-basic/index.html
@@ -0,0 +1,739 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue基础">
+<meta property="og:url" content="https://blog.lifesli.com/2017/08/30/Vue-basic/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-08-30T17:03:05.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Vue基础 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue基础
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+<span id="more"></span>
+<h3 id="搭建项目"><a href="#搭建项目" class="headerlink" title="搭建项目"></a>搭建项目</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm install --global vue-cli</span><br><span class="line">vue init webpack my-project</span><br><span class="line">cd my-project</span><br><span class="line">npm install（推荐用cnpm install）</span><br><span class="line">如果没有cnpm ，先安装cnpm镜像</span><br><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>
+<h3 id="目录讲解"><a href="#目录讲解" class="headerlink" title="目录讲解"></a>目录讲解</h3><blockquote>
+<ul>
+<li>build和config ：项目开发和打包时候的相关配置；</li>
+<li>node_modules ：项目所需要的依赖文件；</li>
+<li>src ：主应用/页面相关文件；<ul>
+<li>assets ： 静态资源文件；</li>
+<li>components ：组件；</li>
+<li>res：资源<ul>
+<li>css： 公共css或是css预处理文件；</li>
+<li>js：   公共js文件</li>
+<li>img：公共图片</li>
+</ul>
+</li>
+<li>router ：路由配置文件；</li>
+<li>views ： 视图文件，其实也是vue组件。按照业务功能划分模块；</li>
+<li>vuex : 状态管理的配置文件；</li>
+<li>App.vue : 主组件；</li>
+<li>main.js： 入口文件，初始化vue实例并使用需要的插件</li>
+</ul>
+</li>
+<li>index.html ： 主html页面；</li>
+<li>dist：webpack打包生成的文件；</li>
+<li>package.json：记录依赖相关信息</li>
+</ul>
+</blockquote>
+<h3 id="文件的加载顺序"><a href="#文件的加载顺序" class="headerlink" title="文件的加载顺序:"></a>文件的加载顺序:</h3><p>当我们执行命令 <code>npm run dev</code>的时候根据配置文件<code>dev-server.js</code>里的相关配置去加载<code>webpack</code>的相关配置文件 在<code>webpack.base.conf</code>里面<code>entry</code>入口文件就配置了<code>app：&#39;./src/main.js&#39;</code> </p>
+<p>所以当我们在运行<code>npm run dev</code>的时候就开始通过<code>main.js</code>执行了。<code>main.js</code> 初始化vue实例并且加载相关配置插件，然后通过<code>app.vue</code>文件去访问各个组件</p>
+<h3 id="Build-dev-server-js主要完成以下几件事情："><a href="#Build-dev-server-js主要完成以下几件事情：" class="headerlink" title="Build/dev-server.js主要完成以下几件事情："></a>Build/dev-server.js主要完成以下几件事情：</h3><ol>
+<li>检查node和npm的版本；</li>
+<li>引入相关插件和配置；</li>
+<li>创建express服务器和webpack编译器；</li>
+<li>配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）；</li>
+<li>挂载代理服务和中间件；</li>
+<li>配置静态资源；</li>
+<li>启动服务器监听特定端口（8080）；</li>
+<li>自动打开浏览器并打开特定网址（localhost:8080）；</li>
+</ol>
+<h3 id="Build-huild-js主要完成以下几件事情："><a href="#Build-huild-js主要完成以下几件事情：" class="headerlink" title="Build/huild.js主要完成以下几件事情："></a>Build/huild.js主要完成以下几件事情：</h3><ol>
+<li>loading动画；</li>
+<li>删除创建目标文件夹；</li>
+<li>webpack编译；</li>
+<li>输出信息</li>
+</ol>
+<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><h4 id="babelrc"><a href="#babelrc" class="headerlink" title=".babelrc"></a>.babelrc</h4><p>设置转码的规则和插件（使用es6语法必须安装插件）</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-preset-es2015</span><br></pre></td></tr></table></figure>
+
+<p>presets 字段是用来设定转码规则;</p>
+<h4 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h4><p>配置文件编码格式的文件</p>
+<ul>
+<li>indent_style:  设置缩进风格，tab或者空格;</li>
+<li>indent_size:  缩进的宽度;</li>
+<li>tab_width:   设置tab的列数。默认是indent_size;</li>
+<li>end_of_line： 换行符，lf、cr和crlf;</li>
+<li>charset：  编码;</li>
+<li>trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符;</li>
+<li>insert_final_newline:   设为true表明使文件以一个空白行结尾;</li>
+<li>root: 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件;</li>
+</ul>
+<h4 id="eslintignore"><a href="#eslintignore" class="headerlink" title=".eslintignore"></a>.eslintignore</h4><p>忽略不符合eslint规范的文件, （一般会忽略掉第三方引用的插件）</p>
+<h4 id="eslintrc-js"><a href="#eslintrc-js" class="headerlink" title=".eslintrc.js"></a>.eslintrc.js</h4><p>定义代码规则</p>
+<h4 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h4><p>配置文件，用于配置不需要加入版本管理的文件</p>
+<h3 id="VUE-文件解释"><a href="#VUE-文件解释" class="headerlink" title=".VUE 文件解释"></a>.VUE 文件解释</h3><ul>
+<li>template： 展示模板</li>
+<li>import ： 导入组件已经js文件</li>
+<li>export default： <ul>
+<li>data：数据源；</li>
+<li>methods：方法；                </li>
+<li>mounted：页面加载之后执行的方法；    </li>
+<li>created：页面生成时加载的方法；</li>
+</ul>
+</li>
+<li>style：  样式代码  其中scoped表示样式作用范围为本vue文件</li>
+</ul>
+<h3 id="网络访问"><a href="#网络访问" class="headerlink" title="网络访问"></a>网络访问</h3><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><ol>
+<li>发送请求：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">axios#request(config)；</span><br><span class="line">axios#get(url[, config])；</span><br><span class="line">axios#delete(url[, config])；</span><br><span class="line">axios#head(url[, config])；</span><br><span class="line">axios#post(url[, data[, config]])；</span><br><span class="line">axios#put(url[, data[, config]])；</span><br><span class="line">axios#patch(url[, data[, config]])；</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>处理响应：</li>
+</ol>
+<ul>
+<li>Promise语法；</li>
+<li>处理结果：then；</li>
+<li>处理异常：catch；</li>
+</ul>
+<ol start="3">
+<li>拦截器（use/reject）：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">axios.interceptors.response.use；</span><br><span class="line">axios.interceptors.rquest.use；</span><br><span class="line">reject(移除请求拦截)</span><br></pre></td></tr></table></figure>
+
+<ol start="4">
+<li>参数：</li>
+</ol>
+<ul>
+<li>json（默认）；</li>
+<li>qs；</li>
+</ul>
+<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><ul>
+<li>Prpos：父组件对子组件；</li>
+<li>自定义事件：子组件对父组件；</li>
+<li>消息总线：任意两个组件；</li>
+<li>状态管理：Vuex（适用于大型单页面开发）</li>
+</ul>
+<h3 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h3><ol>
+<li>配置</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &#39;&#x2F;&#39;,</span><br><span class="line">      name: &#39;Hello&#39;,</span><br><span class="line">      component: Hello</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#39;#app&#39;,</span><br><span class="line">  router,</span><br><span class="line">  template: &#39;&lt;App&#x2F;&gt;&#39;,</span><br><span class="line">  components: &#123; App &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>导航</li>
+</ol>
+<ul>
+<li>push</li>
+<li>replace</li>
+<li>go</li>
+</ul>
+<ol start="3">
+<li>参数传递</li>
+</ol>
+<ul>
+<li>RESTful url参数</li>
+<li>参数查询 query</li>
+<li>锚点  hash: ‘#data’</li>
+</ul>
+<ol start="4">
+<li>嵌套路由</li>
+</ol>
+<ul>
+<li>Children</li>
+</ul>
+<ol start="5">
+<li>钩子</li>
+</ol>
+<ul>
+<li>beforeRouteEnter</li>
+<li>beforeRouteLeave</li>
+</ul>
+<h3 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h3><blockquote>
+<p>Vuex是什么？</p>
+<p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
+</blockquote>
+<ul>
+<li>state里面就是存放的我们所要用到的状态；</li>
+<li>mutations就是存放如何更改状态的方法 ，同步操作；</li>
+<li>getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。</li>
+<li>actions就是mutation的加强版，它可以通过commit</li>
+<li>mutations中的方法来改变状态，最重要的是它可以进行异步操作。 </li>
+<li>modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/08/30/Vue-basic/">Vue基础</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 17:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/08/30/Vue-basic/" title="Vue基础">https://blog.lifesli.com/2017/08/30/Vue-basic/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-basic/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/08/30/Vue-VSCode-Snippets/" rel="prev" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      <i class="fa fa-chevron-left"></i> Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="next" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.0.1.</span> <span class="nav-text">搭建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E8%AE%B2%E8%A7%A3"><span class="nav-number">1.0.2.</span> <span class="nav-text">目录讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E7%9A%84%E5%8A%A0%E8%BD%BD%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.3.</span> <span class="nav-text">文件的加载顺序:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-dev-server-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.4.</span> <span class="nav-text">Build&#x2F;dev-server.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-huild-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.5.</span> <span class="nav-text">Build&#x2F;huild.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.0.6.</span> <span class="nav-text">配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#babelrc"><span class="nav-number">1.0.6.1.</span> <span class="nav-text">.babelrc</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#editorconfig"><span class="nav-number">1.0.6.2.</span> <span class="nav-text">.editorconfig</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintignore"><span class="nav-number">1.0.6.3.</span> <span class="nav-text">.eslintignore</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintrc-js"><span class="nav-number">1.0.6.4.</span> <span class="nav-text">.eslintrc.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#gitignore"><span class="nav-number">1.0.6.5.</span> <span class="nav-text">.gitignore</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VUE-%E6%96%87%E4%BB%B6%E8%A7%A3%E9%87%8A"><span class="nav-number">1.0.7.</span> <span class="nav-text">.VUE 文件解释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E8%AE%BF%E9%97%AE"><span class="nav-number">1.0.8.</span> <span class="nav-text">网络访问</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#axios"><span class="nav-number">1.0.8.1.</span> <span class="nav-text">axios</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">1.0.9.</span> <span class="nav-text">组件通信</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1"><span class="nav-number">1.0.10.</span> <span class="nav-text">路由</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86"><span class="nav-number">1.0.11.</span> <span class="nav-text">状态管理</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/08/30/Vue-basic/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-basic/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-basic/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e2b1e5838447291b88f1ff55f783a254',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/08/30/npm-source/index.html b/2017/08/30/npm-source/index.html
new file mode 100644
index 0000000000..6edb4c9b5a
--- /dev/null
+++ b/2017/08/30/npm-source/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npm相关资料">
+<meta property="og:url" content="https://blog.lifesli.com/2017/08/30/npm-source/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-08-30T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npm">
+<meta property="article:tag" content="rnpm">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>npm相关资料 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npm相关资料
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+<span id="more"></span>
+
+<blockquote>
+<p>npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。</p>
+</blockquote>
+<h2 id="国内优秀npm镜像"><a href="#国内优秀npm镜像" class="headerlink" title="国内优秀npm镜像"></a>国内优秀npm镜像</h2><h3 id="淘宝npm镜像"><a href="#淘宝npm镜像" class="headerlink" title="淘宝npm镜像"></a>淘宝npm镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org/</a></li>
+</ul>
+<h3 id="cnpmjs镜像"><a href="#cnpmjs镜像" class="headerlink" title="cnpmjs镜像"></a>cnpmjs镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://cnpmjs.org/">http://cnpmjs.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://r.cnpmjs.org/">http://r.cnpmjs.org/</a></li>
+</ul>
+<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：</p>
+<h3 id="1-临时使用"><a href="#1-临时使用" class="headerlink" title="1.临时使用"></a>1.临时使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm --registry https:&#x2F;&#x2F;registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure>
+<h3 id="2-持久使用"><a href="#2-持久使用" class="headerlink" title="2.持久使用"></a>2.持久使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 配置后可通过下面方式来验证是否成功</span><br><span class="line">npm config get registry</span><br><span class="line">&#x2F;&#x2F; 或</span><br><span class="line">npm info express</span><br></pre></td></tr></table></figure>
+<h3 id="3-通过cnpm使用"><a href="#3-通过cnpm使用" class="headerlink" title="3.通过cnpm使用"></a>3.通过cnpm使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用</span><br><span class="line">cnpm install express</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/08/30/npm-source/">npm相关资料</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/08/30/npm-source/" title="npm相关资料">https://blog.lifesli.com/2017/08/30/npm-source/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/npm-source/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/npm/" rel="tag"># npm</a>
+              <a href="/tags/rnpm/" rel="tag"># rnpm</a>
+              <a href="/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/08/29/browser-incompatibility-problem-solution/" rel="prev" title="浏览器兼容性问题解决方案">
+      <i class="fa fa-chevron-left"></i> 浏览器兼容性问题解决方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/08/30/Vue-VSCode-Snippets/" rel="next" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%BD%E5%86%85%E4%BC%98%E7%A7%80npm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.</span> <span class="nav-text">国内优秀npm镜像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%98%E5%AE%9Dnpm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.1.</span> <span class="nav-text">淘宝npm镜像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#cnpmjs%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.2.</span> <span class="nav-text">cnpmjs镜像</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.</span> <span class="nav-text">如何使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.1.</span> <span class="nav-text">1.临时使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%8C%81%E4%B9%85%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.2.</span> <span class="nav-text">2.持久使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E9%80%9A%E8%BF%87cnpm%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.3.</span> <span class="nav-text">3.通过cnpm使用</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/08/30/npm-source/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/npm-source/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/npm-source/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5d278b54fd2496e613a2ae4c84167481',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html b/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
new file mode 100644
index 0000000000..2569163859
--- /dev/null
+++ b/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+<meta property="og:url" content="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-10-11T16:18:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+<span id="more"></span>
+
+<h2 id="技术栈选型"><a href="#技术栈选型" class="headerlink" title="技术栈选型"></a>技术栈选型</h2><blockquote>
+<p>这里说是技术栈选型可能并不是很恰当，但又找不到合适的描述，就是把需要的技术介绍一下，如果还不会的，可以自行学习，或者看看我的其他文章。</p>
+</blockquote>
+<ul>
+<li>node（npm），现在node这么火，没用过都不好意思出门，但是如果你还不回的话，就先自行学习安装一下吧。</li>
+<li>Hexo 静态博客程序，其实还有很多，只不过这个比较新，而且搭配Next非常漂亮，就选了它。</li>
+<li>Next 可以说是Hexo的定制系统，不仅仅是做了个皮肤，简洁美观的配置项和官网说明深得我心。</li>
+</ul>
+<h2 id="搭建步骤（安装步骤）"><a href="#搭建步骤（安装步骤）" class="headerlink" title="搭建步骤（安装步骤）"></a>搭建步骤（安装步骤）</h2><h3 id="安装Hexo-Hexo官网"><a href="#安装Hexo-Hexo官网" class="headerlink" title="安装Hexo Hexo官网"></a>安装Hexo <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g &#x2F;&#x2F; 安装hexo的脚手架工具</span><br><span class="line">$ hexo init blog &#x2F;&#x2F; 初始化博客</span><br><span class="line">$ cd blog &#x2F;&#x2F; 返回博客目录</span><br><span class="line">$ npm install &#x2F;&#x2F; 安装依赖</span><br><span class="line">$ hexo server &#x2F;&#x2F; 启动博客</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>怎么样五行代码就生成并运行了一个博客是不是超简单。<br>下面我们看一下生成的博客的目录</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
+<p><code>_config.yml</code>这是博客的配置文件，比如博客名称，副标题，作者等信息都在这个文件里设置。</p>
+<p><code>package.json</code>这是博客的依赖文件可以忽略</p>
+<p><code>scaffolds</code>这是博客的模板目录，当你要写一篇文章时，这里会有文章的默认类型。</p>
+<p><code>source</code>这是博客的网站资源，包括发布的文章（<code>_posts</code>）、关于、分类还有上传文件等。</p>
+<p><code>themes</code>这是博客的皮肤。</p>
+<p>更多配置信息请查阅官网手册</p>
+<h3 id="安装Next主题-Next官网"><a href="#安装Next主题-Next官网" class="headerlink" title="安装Next主题 Next官网"></a>安装Next主题 <a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/">Next官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ cd your-hexo-site</span><br><span class="line">$ git clone https:&#x2F;&#x2F;github.com&#x2F;iissnan&#x2F;hexo-theme-next themes&#x2F;next</span><br></pre></td></tr></table></figure>
+
+<p>然后到<code>_config.yml</code>配置文件将主题配置改成next就可以使用next的皮肤了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>
+<p>皮肤也有配置文件，为跟Hexo进行区分Hexo的配置文件称为<code>站点配置文件</code>， 皮肤配置文件称为<code>主题配置文件</code>。</p>
+<p>对两个配置文件进行简单配置后，符合需求的博客就搭建而成了，这里有个友好的建议，配置文件如果配置不正确将不能正确运行博客，所以在配置前务必保留好原始配置文件，注意配置时不要缺了空格，不要问我为什么知道这个。</p>
+<h3 id="更新博客主题"><a href="#更新博客主题" class="headerlink" title="更新博客主题"></a>更新博客主题</h3><p><a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md">https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md</a></p>
+<h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><p>博客已经搭建好了，接下来就是写博客了，那么如何开始写博客呢，超级简单一行命令足以：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hexo new [layout] &lt;title&gt;  </span><br><span class="line">&#x2F;&#x2F; layout 为模板类型可以省略，title为文章标题，通常可以简写为如下</span><br><span class="line">hexo new title</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>新建命令执行后在<code>_posts</code>的目录下就会生成一个你刚才命名的md后缀的文件，这就是一个MarkDown语法的文件，（如果不了解MarkDown语法的可以去学一下，很简单的符号语言，或者像我一样用支持MarkDown语法的编辑器来写文章。新建的文章打开内容如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">tags:</span><br><span class="line">---</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>非常好理解，title就是标题，date为创建时间，tags是标签方便分类，但是这些并不全，还有些常用的分类没有写上，下面我将常用的进行补充</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">categories: </span><br><span class="line">	- NodeJS</span><br><span class="line">	- npm</span><br><span class="line">tags:</span><br><span class="line">	- npm</span><br><span class="line">	- NodeJS</span><br><span class="line">	- rnpm</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
+<p>这样补充后就有了常见博客的分类和标签的功能，是不是很简单。</p>
+<p>写完文章以后还要执行下面命令，生成静态页面</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate &#x2F;&#x2F; 将md后缀文件生成成静态html文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+
+<p>这样我们就完成了博客的搭建和博客的书写，到现在我们就已经有了一个本地的博客，那么如何将博客上传到GitHub上呢？</p>
+<h2 id="将Blog上传至GitHub"><a href="#将Blog上传至GitHub" class="headerlink" title="将Blog上传至GitHub"></a>将Blog上传至GitHub</h2><p>github是一个代码托管的平台，为了方便描述代码功能，它提供了README.md文件进行说明，但是为了更好的展现，也提供了gitpage的功能，博客是基于这个功能进行的扩展，那么如何用gitpage的功能来实现博客系统呢？</p>
+<h3 id="创建仓库"><a href="#创建仓库" class="headerlink" title="创建仓库"></a>创建仓库</h3><p>创建一个以你的GitHub账号为开头命名的仓库，格式如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GitHub账号名称.github.io</span><br><span class="line">&#x2F;&#x2F; 如</span><br><span class="line">lixuguang.github.io</span><br></pre></td></tr></table></figure>
+<p>然后到blog系统的配置文件<code>_config.yml</code>里配置一下上传路径</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: &lt;repository url&gt;</span><br><span class="line">  </span><br><span class="line">&#x2F;&#x2F; 我的实例</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git@github.com:lixuguang&#x2F;lixuguang.github.io.git</span><br><span class="line">  branch: master</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置好就可以进行部署了，部署也很简单，只需要执行一下下面的命令。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save &#x2F;&#x2F; 安装上传工具</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>稍等一会，如果没有出现什么错误信息，那么你的部署就成功了。之后你就可以访问你的博客了，博客地址如下：<br>https://你的github账号.github.io/<br>我的如下：<br><a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></p>
+<p>现在你是不是已经学会如何利用github搭建一个静态的博客系统了呢，如果你还没有一个自己的技术博客，快来试试吧。</p>
+<h2 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h2><p>是不是觉得命令行还是挺麻烦的，要敲那么一大串字母，哈哈实际上这些常用命令是有缩写方式的，下面给大家介绍一下缩写方式。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo s</span><br><span class="line"></span><br><span class="line">$ hexo generate</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo g</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo d</span><br><span class="line"></span><br><span class="line">$ hexo new</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo n</span><br></pre></td></tr></table></figure>
+
+<p>另外每次发布之前最好执行以下命令，清理当前内容</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>以防出现冲突的情况，具体动作如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g -d &#x2F;&#x2F; 文件生成后立即部署网站</span><br><span class="line">$ hexo d -g &#x2F;&#x2F; 部署之前预先生成静态文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><ol>
+<li>SSH问题</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;lixuguang316@gmail.com&quot;</span><br><span class="line">&#x2F;&#x2F; 填写你自己的github邮箱</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>敲三下回车，之后会在</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">C:\Users\Administrator\.ssh &#x2F;&#x2F; windows下</span><br><span class="line">open ~&#x2F;.ssh &#x2F;&#x2F; Mac下打开ssh文件  </span><br></pre></td></tr></table></figure>
+<p>文件夹下生成两个文件<code>id_rsa</code>（私钥）、<code>id_rsa.pub</code>（公钥），在github上的SSH处添加新的ssh，然后将<code>公钥</code>内容贴到上面起个名字可以叫hexo，保存，然后在git bash下敲击</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh git@github.com</span><br></pre></td></tr></table></figure>
+<p>然后敲<code>yes</code>就可以上传blog代码了<br>怎么样会了么？更多高阶玩法请阅读官方说明文档，文章如有谬误之处请各位指出，如果觉得文章对你有所帮助我将十分开心，如果你喜欢我的文章可以到我的github上点个<code>fork</code>，谢谢你的阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月11日 - 16:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/08/30/Vue-basic/" rel="prev" title="Vue基础">
+      <i class="fa fa-chevron-left"></i> Vue基础
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/10/12/us-gitment/" rel="next" title="给博客添加基于github-issue的评论系统">
+      给博客添加基于github-issue的评论系统 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%A0%88%E9%80%89%E5%9E%8B"><span class="nav-number">2.</span> <span class="nav-text">技术栈选型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4%EF%BC%88%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">搭建步骤（安装步骤）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Hexo-Hexo%E5%AE%98%E7%BD%91"><span class="nav-number">3.1.</span> <span class="nav-text">安装Hexo Hexo官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Next%E4%B8%BB%E9%A2%98-Next%E5%AE%98%E7%BD%91"><span class="nav-number">3.2.</span> <span class="nav-text">安装Next主题 Next官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98"><span class="nav-number">3.3.</span> <span class="nav-text">更新博客主题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.</span> <span class="nav-text">写博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%86Blog%E4%B8%8A%E4%BC%A0%E8%87%B3GitHub"><span class="nav-number">5.</span> <span class="nav-text">将Blog上传至GitHub</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E4%BB%93%E5%BA%93"><span class="nav-number">5.1.</span> <span class="nav-text">创建仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E5%B7%A7"><span class="nav-number">6.</span> <span class="nav-text">技巧</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="nav-number">7.</span> <span class="nav-text">常见问题</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ffcced3d893fba2276fcc10d305418c8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/10/12/VSCode-ESLint/index.html b/2017/10/12/VSCode-ESLint/index.html
new file mode 100644
index 0000000000..5298292a7e
--- /dev/null
+++ b/2017/10/12/VSCode-ESLint/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode ESLint JS代码静态检测工具">
+<meta property="og:url" content="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-10-12T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode">
+<meta property="article:tag" content="ESLint">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>VSCode ESLint JS代码静态检测工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode ESLint JS代码静态检测工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+<span id="more"></span>
+<h1 id="安装ESLint插件"><a href="#安装ESLint插件" class="headerlink" title="安装ESLint插件"></a>安装ESLint插件</h1><p>打开VSCode编辑器，在左侧右下角有一个安装插件的图标，点击后就可以打开插件市场，输入ESLint，就会有个黄色的图标出现在你面前，不用犹豫双击它，稍等一会它就安装完了，是不是超简单。</p>
+<h1 id="安装NPM依赖"><a href="#安装NPM依赖" class="headerlink" title="安装NPM依赖"></a>安装NPM依赖</h1><p>ESLint插件运行需要一些依赖，对于用过npm包管理工具的人来讲小意思啦，我把代码放到下面，需要的直接粘贴运行就好。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;全局安装eslint</span><br><span class="line">npm i eslint -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到html中的js校验</span><br><span class="line">npm i eslint-plugin-html -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到es2015语法</span><br><span class="line">npm i babel-eslint -g</span><br></pre></td></tr></table></figure>
+<h1 id="配置eslint配置文件到项目根目录"><a href="#配置eslint配置文件到项目根目录" class="headerlink" title="配置eslint配置文件到项目根目录"></a>配置eslint配置文件到项目根目录</h1><p>配置文件名称如下：<br><strong>eslintrc.json</strong><br>内容为：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        &quot;plugins&quot;: [</span><br><span class="line">                &#x2F;&#x2F; &quot;react&quot;,</span><br><span class="line">                &quot;html&quot;</span><br><span class="line">        ],</span><br><span class="line">        &quot;env&quot;: &#123;</span><br><span class="line">                &quot;node&quot;: true,</span><br><span class="line">                &quot;jquery&quot;: true,</span><br><span class="line">                &quot;es6&quot;: true,</span><br><span class="line">                &quot;browser&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;globals&quot;: &#123;</span><br><span class="line">                &quot;angular&quot;: false</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;parser&quot;: &quot;babel-eslint&quot;,</span><br><span class="line">        &quot;rules&quot;: &#123;</span><br><span class="line">                &#x2F;&#x2F;官方文档 http:&#x2F;&#x2F;eslint.org&#x2F;docs&#x2F;rules&#x2F;</span><br><span class="line">                &#x2F;&#x2F;参数：0 关闭，1 警告，2 错误</span><br><span class="line">                &#x2F;&#x2F; &quot;quotes&quot;: [0, &quot;single&quot;],                  &#x2F;&#x2F;建议使用单引号</span><br><span class="line">                &#x2F;&#x2F; &quot;no-inner-declarations&quot;: [0, &quot;both&quot;],     &#x2F;&#x2F;不建议在&#123;&#125;代码块内部声明变量或函数</span><br><span class="line">                &quot;no-extra-boolean-cast&quot;: 1, &#x2F;&#x2F;多余的感叹号转布尔型</span><br><span class="line">                &quot;no-extra-semi&quot;: 1, &#x2F;&#x2F;多余的分号</span><br><span class="line">                &quot;no-extra-parens&quot;: 0, &#x2F;&#x2F;多余的括号</span><br><span class="line">                &quot;no-empty&quot;: 1, &#x2F;&#x2F;空代码块</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;使用前未定义</span><br><span class="line">                &quot;no-use-before-define&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;nofunc&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;complexity&quot;: [0, 10], &#x2F;&#x2F;圈复杂度大于*</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;定义数组或对象最后多余的逗号</span><br><span class="line">                &quot;comma-dangle&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;never&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F; 不允许对全局变量赋值,如 window &#x3D; &#39;abc&#39;</span><br><span class="line">                &quot;no-global-assign&quot;: [&quot;error&quot;, &#123;</span><br><span class="line">                        &#x2F;&#x2F; 定义例外</span><br><span class="line">                        &#x2F;&#x2F; &quot;exceptions&quot;: [&quot;Object&quot;]</span><br><span class="line">                &#125;],</span><br><span class="line">                &quot;no-var&quot;: 0, &#x2F;&#x2F;用let或const替代var</span><br><span class="line">                &quot;no-const-assign&quot;: 2, &#x2F;&#x2F;不允许const重新赋值</span><br><span class="line">                &quot;no-class-assign&quot;: 2, &#x2F;&#x2F;不允许对class重新赋值</span><br><span class="line">                &quot;no-debugger&quot;: 1, &#x2F;&#x2F;debugger 调试代码未删除</span><br><span class="line">                &quot;no-console&quot;: 0, &#x2F;&#x2F;console 未删除</span><br><span class="line">                &quot;no-constant-condition&quot;: 2, &#x2F;&#x2F;常量作为条件</span><br><span class="line">                &quot;no-dupe-args&quot;: 2, &#x2F;&#x2F;参数重复</span><br><span class="line">                &quot;no-dupe-keys&quot;: 2, &#x2F;&#x2F;对象属性重复</span><br><span class="line">                &quot;no-duplicate-case&quot;: 2, &#x2F;&#x2F;case重复</span><br><span class="line">                &quot;no-empty-character-class&quot;: 2, &#x2F;&#x2F;正则无法匹配任何值</span><br><span class="line">                &quot;no-invalid-regexp&quot;: 2, &#x2F;&#x2F;无效的正则</span><br><span class="line">                &quot;no-func-assign&quot;: 2, &#x2F;&#x2F;函数被赋值</span><br><span class="line">                &quot;valid-typeof&quot;: 1, &#x2F;&#x2F;无效的类型判断</span><br><span class="line">                &quot;no-unreachable&quot;: 2, &#x2F;&#x2F;不可能执行到的代码</span><br><span class="line">                &quot;no-unexpected-multiline&quot;: 2, &#x2F;&#x2F;行尾缺少分号可能导致一些意外情况</span><br><span class="line">                &quot;no-sparse-arrays&quot;: 1, &#x2F;&#x2F;数组中多出逗号</span><br><span class="line">                &quot;no-shadow-restricted-names&quot;: 2, &#x2F;&#x2F;关键词与命名冲突</span><br><span class="line">                &quot;no-undef&quot;: 1, &#x2F;&#x2F;变量未定义</span><br><span class="line">                &quot;no-unused-vars&quot;: 1, &#x2F;&#x2F;变量定义后未使用</span><br><span class="line">                &quot;no-cond-assign&quot;: 2, &#x2F;&#x2F;条件语句中禁止赋值操作</span><br><span class="line">                &quot;no-native-reassign&quot;: 2, &#x2F;&#x2F;禁止覆盖原生对象</span><br><span class="line">                &quot;no-mixed-spaces-and-tabs&quot;: 0,</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;代码风格优化 --------------------------------------</span><br><span class="line">                &quot;no-irregular-whitespace&quot;: 0,</span><br><span class="line">                &quot;no-else-return&quot;: 0, &#x2F;&#x2F;在else代码块中return，else是多余的</span><br><span class="line">                &quot;no-multi-spaces&quot;: 0, &#x2F;&#x2F;不允许多个空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;object直接量建议写法 : 后一个空格前面不留空格</span><br><span class="line">                &quot;key-spacing&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;beforeColon&quot;: false,</span><br><span class="line">                                &quot;afterColon&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;block-scoped-var&quot;: 1, &#x2F;&#x2F;变量应在外部上下文中声明，不应在&#123;&#125;代码块中</span><br><span class="line">                &quot;consistent-return&quot;: 1, &#x2F;&#x2F;函数返回值可能是不同类型</span><br><span class="line">                &quot;accessor-pairs&quot;: 1, &#x2F;&#x2F;object getter&#x2F;setter方法需要成对出现</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;换行调用对象方法  点操作符应写在行首</span><br><span class="line">                &quot;dot-location&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;property&quot;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-lone-blocks&quot;: 1, &#x2F;&#x2F;多余的&#123;&#125;嵌套</span><br><span class="line">                &quot;no-labels&quot;: 1, &#x2F;&#x2F;无用的标记</span><br><span class="line">                &quot;no-extend-native&quot;: 1, &#x2F;&#x2F;禁止扩展原生对象</span><br><span class="line">                &quot;no-floating-decimal&quot;: 1, &#x2F;&#x2F;浮点型需要写全 禁止.1 或 2.写法</span><br><span class="line">                &quot;no-loop-func&quot;: 1, &#x2F;&#x2F;禁止在循环体中定义函数</span><br><span class="line">                &quot;no-new-func&quot;: 1, &#x2F;&#x2F;禁止new Function(...) 写法</span><br><span class="line">                &quot;no-self-compare&quot;: 1, &#x2F;&#x2F;不允与自己比较作为条件</span><br><span class="line">                &quot;no-sequences&quot;: 1, &#x2F;&#x2F;禁止可能导致结果不明确的逗号操作符</span><br><span class="line">                &quot;no-throw-literal&quot;: 1, &#x2F;&#x2F;禁止抛出一个直接量 应是Error对象</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允return时有赋值操作</span><br><span class="line">                &quot;no-return-assign&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;always&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允许重复声明</span><br><span class="line">                &quot;no-redeclare&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;builtinGlobals&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不执行的表达式</span><br><span class="line">                &quot;no-unused-expressions&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;allowShortCircuit&quot;: true,</span><br><span class="line">                                &quot;allowTernary&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-useless-call&quot;: 1, &#x2F;&#x2F;无意义的函数call或apply</span><br><span class="line">                &quot;no-useless-concat&quot;: 1, &#x2F;&#x2F;无意义的string concat</span><br><span class="line">                &quot;no-void&quot;: 1, &#x2F;&#x2F;禁用void</span><br><span class="line">                &quot;no-with&quot;: 1, &#x2F;&#x2F;禁用with</span><br><span class="line">                &quot;space-infix-ops&quot;: 0, &#x2F;&#x2F;操作符前后空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;jsdoc</span><br><span class="line">                &quot;valid-jsdoc&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;requireParamDescription&quot;: true,</span><br><span class="line">                                &quot;requireReturnDescription&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;标记未写注释</span><br><span class="line">                &quot;no-warning-comments&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;terms&quot;: [</span><br><span class="line">                                        &quot;todo&quot;,</span><br><span class="line">                                        &quot;fixme&quot;,</span><br><span class="line">                                        &quot;any other term&quot;</span><br><span class="line">                                ],</span><br><span class="line">                                &quot;location&quot;: &quot;anywhere&quot;</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;curly&quot;: 0 &#x2F;&#x2F;if、else、while、for代码块用&#123;&#125;包围</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>eslint就是根据这个配置表来进行js语法校验的。</p>
+<h1 id="最后重启VSCode完成插件安装"><a href="#最后重启VSCode完成插件安装" class="headerlink" title="最后重启VSCode完成插件安装"></a>最后重启VSCode完成插件安装</h1><p>重启后控制台显示ESLint server is running说明插件已经生效，好啦接下来就愉快的写代码吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/10/12/VSCode-ESLint/">VSCode ESLint JS代码静态检测工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/10/12/VSCode-ESLint/" title="VSCode ESLint JS代码静态检测工具">https://blog.lifesli.com/2017/10/12/VSCode-ESLint/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/VSCode/" rel="tag"># VSCode</a>
+              <a href="/tags/ESLint/" rel="tag"># ESLint</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/10/12/us-gitment/" rel="prev" title="给博客添加基于github-issue的评论系统">
+      <i class="fa fa-chevron-left"></i> 给博客添加基于github-issue的评论系统
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/10/12/web-quanzhan/" rel="next" title="《Web全栈工程师的自我修养》读书笔记">
+      《Web全栈工程师的自我修养》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85ESLint%E6%8F%92%E4%BB%B6"><span class="nav-number">2.</span> <span class="nav-text">安装ESLint插件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85NPM%E4%BE%9D%E8%B5%96"><span class="nav-number">3.</span> <span class="nav-text">安装NPM依赖</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEeslint%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%88%B0%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95"><span class="nav-number">4.</span> <span class="nav-text">配置eslint配置文件到项目根目录</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E%E9%87%8D%E5%90%AFVSCode%E5%AE%8C%E6%88%90%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">5.</span> <span class="nav-text">最后重启VSCode完成插件安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/10/12/VSCode-ESLint/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/VSCode-ESLint/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/VSCode-ESLint/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd90e7baae2199c725e5e6c9073dc8729',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/10/12/us-gitment/index.html b/2017/10/12/us-gitment/index.html
new file mode 100644
index 0000000000..56d80f42e4
--- /dev/null
+++ b/2017/10/12/us-gitment/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给博客添加基于github-issue的评论系统">
+<meta property="og:url" content="https://blog.lifesli.com/2017/10/12/us-gitment/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-10-12T10:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>给博客添加基于github-issue的评论系统 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给博客添加基于github-issue的评论系统
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+<span id="more"></span>
+<h2 id="第一步-注册一个小程序（OAuth-Application）"><a href="#第一步-注册一个小程序（OAuth-Application）" class="headerlink" title="第一步 注册一个小程序（OAuth Application）"></a>第一步 注册一个小程序（OAuth Application）</h2><p>点击<a target="_blank" rel="noopener" href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a>注册</p>
+<ul>
+<li>Application name 应用名称 这里随便写，我写的就是gitment</li>
+<li>Homepage URL 主页地址，你可以写你的博客地址，我写的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+<li>Application description 应用描述，这里随便写点什么，反正是自己用。</li>
+<li>Authorization callback URL 这个比较重要，请填写你的博客地址，我的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+</ul>
+<p>点击确定以后你会获得两个关键信息，下一步配置时会用到</p>
+<ul>
+<li>Client ID</li>
+<li>Client Secret</li>
+</ul>
+<h2 id="第二步-修改主题配置文件，添加gitment评论功能"><a href="#第二步-修改主题配置文件，添加gitment评论功能" class="headerlink" title="第二步 修改主题配置文件，添加gitment评论功能"></a>第二步 修改主题配置文件，添加gitment评论功能</h2><p>因为用的是next主题，所以配置文件地址如下：<br><strong>themes/next/_config.yml</strong></p>
+<h3 id="1、在其中添加"><a href="#1、在其中添加" class="headerlink" title="1、在其中添加:"></a>1、在其中添加:</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Gitment</span><br><span class="line"># Introduction: https:&#x2F;&#x2F;imsun.net&#x2F;posts&#x2F;gitment-introduction&#x2F;</span><br><span class="line">gitment:</span><br><span class="line">  enable: true</span><br><span class="line">  githubID: yourid &#x2F;&#x2F; 我的是lixuguang</span><br><span class="line">  repo: yourrepo &#x2F;&#x2F; 我的是lixuguang.github.io 必须跟githubID保持一致的用户名</span><br><span class="line">  ClientID: yourid &#x2F;&#x2F; 上面开通程序获得的ClientID</span><br><span class="line">  ClientSecret: yoursecret &#x2F;&#x2F; 上面开通程序获得的Client Secret</span><br><span class="line">  lazy: false &#x2F;&#x2F;是否需要点击展开评论才能可见评论，一般设置为false</span><br></pre></td></tr></table></figure>
+<p><strong>一定要注意空格，不然会报错的，别问我咋知道的</strong></p>
+<h3 id="2、然后在主题的配置语言环境的文件添加一句话"><a href="#2、然后在主题的配置语言环境的文件添加一句话" class="headerlink" title="2、然后在主题的配置语言环境的文件添加一句话"></a>2、然后在主题的配置语言环境的文件添加一句话</h3><p><code>en.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: Show comments from Gitment</span><br></pre></td></tr></table></figure>
+
+<p><code>zh-Hans.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: 显示 Gitment 评论</span><br></pre></td></tr></table></figure>
+<p>如果是中文网站英文配置也可以不用写。</p>
+<h3 id="3、添加新的Dom结构"><a href="#3、添加新的Dom结构" class="headerlink" title="3、添加新的Dom结构"></a>3、添加新的Dom结构</h3><p><strong>修改主题layout/_partials/comments.swig</strong><br>在最后一个elseif分支后添加一个elseif分支：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% elseif theme.gitment.enable %&#125;</span><br><span class="line">       &#123;% if theme.gitment.lazy %&#125;</span><br><span class="line">         &lt;div onclick&#x3D;&quot;ShowGitment()&quot; id&#x3D;&quot;gitment-display-button&quot;&gt;&#123;&#123;  __(&#39;gitmentbutton&#39;) &#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot; style&#x3D;&quot;display:none&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% else %&#125;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig"><a href="#4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig" class="headerlink" title="4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig"></a>4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.gitment.enable %&#125;</span><br><span class="line">   &#123;% set owner &#x3D; theme.gitment.githubID %&#125;</span><br><span class="line">   &#123;% set repo &#x3D; theme.gitment.repo %&#125;</span><br><span class="line">   &#123;% set cid &#x3D; theme.gitment.ClientID %&#125;</span><br><span class="line">   &#123;% set cs &#x3D; theme.gitment.ClientSecret %&#125;</span><br><span class="line">   &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;style&#x2F;default.css&quot;&gt;</span><br><span class="line">   &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;dist&#x2F;gitment.browser.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% if not theme.gitment.lazy %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">               id: window.location.pathname, </span><br><span class="line">               owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">               repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">               oauth: &#123;</span><br><span class="line">                   client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                   client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">               &#125;&#125;);</span><br><span class="line">           gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% else %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           function ShowGitment()&#123;</span><br><span class="line">               document.getElementById(&quot;gitment-display-button&quot;).style.display &#x3D; &quot;none&quot;;</span><br><span class="line">               document.getElementById(&quot;gitment-container&quot;).style.display &#x3D; &quot;block&quot;;</span><br><span class="line">               var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">                   id: document.location.href, </span><br><span class="line">                   owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">                   repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">                   oauth: &#123;</span><br><span class="line">                       client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                       client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">                   &#125;&#125;);</span><br><span class="line">               gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">           &#125;</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% endif %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% include &#39;gitment.swig&#39; %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="在主题下source-css-common-components-third-party-目录下添加gitment-styl文件"><a href="#在主题下source-css-common-components-third-party-目录下添加gitment-styl文件" class="headerlink" title="在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件"></a>在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件</h3><p>此配置文件为gitment的样式文件，需要修改样式可以在这里进行书写，这里修改一下按钮样式，另外将聊天框于文章框样式统一</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">#gitment-display-button&#123;</span><br><span class="line">     display: inline-block;</span><br><span class="line">     padding: 0 15px;</span><br><span class="line">     color: #0a9caf;</span><br><span class="line">     cursor: pointer;</span><br><span class="line">     font-size: 14px;</span><br><span class="line">     border: 1px solid #0a9caf;</span><br><span class="line">     border-radius: 4px;</span><br><span class="line"> &#125;</span><br><span class="line"> #gitment-display-button:hover&#123;</span><br><span class="line">     color: #fff;</span><br><span class="line">     background: #0a9caf;</span><br><span class="line"> &#125;</span><br><span class="line">  #comments &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">    padding: 40px;</span><br><span class="line">    background: #fff;</span><br><span class="line">    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@import &quot;gitment&quot;;</span><br></pre></td></tr></table></figure>
+<p>经过以上操作，gitment就被引入到你的博客里了。</p>
+<p>现在就可以让大家对你写的文章进行评论啦，怎么样是不是又学到啦，喜欢我的文章就请关注我的github吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/10/12/us-gitment/">给博客添加基于github-issue的评论系统</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/10/12/us-gitment/" title="给博客添加基于github-issue的评论系统">https://blog.lifesli.com/2017/10/12/us-gitment/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/us-gitment/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="prev" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      <i class="fa fa-chevron-left"></i> 如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/10/12/VSCode-ESLint/" rel="next" title="VSCode ESLint JS代码静态检测工具">
+      VSCode ESLint JS代码静态检测工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5-%E6%B3%A8%E5%86%8C%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%88OAuth-Application%EF%BC%89"><span class="nav-number">1.1.</span> <span class="nav-text">第一步 注册一个小程序（OAuth Application）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5-%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%EF%BC%8C%E6%B7%BB%E5%8A%A0gitment%E8%AF%84%E8%AE%BA%E5%8A%9F%E8%83%BD"><span class="nav-number">1.2.</span> <span class="nav-text">第二步 修改主题配置文件，添加gitment评论功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E5%85%B6%E4%B8%AD%E6%B7%BB%E5%8A%A0"><span class="nav-number">1.2.1.</span> <span class="nav-text">1、在其中添加:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E7%84%B6%E5%90%8E%E5%9C%A8%E4%B8%BB%E9%A2%98%E7%9A%84%E9%85%8D%E7%BD%AE%E8%AF%AD%E8%A8%80%E7%8E%AF%E5%A2%83%E7%9A%84%E6%96%87%E4%BB%B6%E6%B7%BB%E5%8A%A0%E4%B8%80%E5%8F%A5%E8%AF%9D"><span class="nav-number">1.2.2.</span> <span class="nav-text">2、然后在主题的配置语言环境的文件添加一句话</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0%E6%96%B0%E7%9A%84Dom%E7%BB%93%E6%9E%84"><span class="nav-number">1.2.3.</span> <span class="nav-text">3、添加新的Dom结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81-%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Blayout-third-party-comments-%E7%9B%AE%E5%BD%95%E4%B8%8B%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6gitment-swig"><span class="nav-number">1.2.4.</span> <span class="nav-text">4、 在主题下layout&#x2F;_third-party&#x2F;comments&#x2F;目录下中添加文件gitment.swig</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Bsource-css-common-components-third-party-%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%B7%BB%E5%8A%A0gitment-styl%E6%96%87%E4%BB%B6"><span class="nav-number">1.2.5.</span> <span class="nav-text">在主题下source&#x2F;css&#x2F;_common&#x2F;components&#x2F;third-party&#x2F;目录下添加gitment.styl文件</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/10/12/us-gitment/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/us-gitment/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/us-gitment/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '024b772f028b4bfff130c14975179f6a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/10/12/web-quanzhan/index.html b/2017/10/12/web-quanzhan/index.html
new file mode 100644
index 0000000000..d7b0c84fbf
--- /dev/null
+++ b/2017/10/12/web-quanzhan/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《Web全栈工程师的自我修养》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/2017/10/12/web-quanzhan/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-10-12T17:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>《Web全栈工程师的自我修养》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《Web全栈工程师的自我修养》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+<span id="more"></span>
+
+<h2 id="什么是全栈"><a href="#什么是全栈" class="headerlink" title="什么是全栈"></a>什么是全栈</h2><p>“全栈”是个外来词，翻译自英文full-stack，此处的栈指的是为了完成项目而使用的一系列技术的合集，不是堆栈概念中的栈。</p>
+<p>“全端”工程师是指能够完成pc端、移动端等多终端设备适配的情况</p>
+<h2 id="什么是全栈工程师"><a href="#什么是全栈工程师" class="headerlink" title="什么是全栈工程师"></a>什么是全栈工程师</h2><blockquote>
+<p>全栈工程师是指一个能够处理数据库、服务器、系统工程、客户端等所有工作的的工程师，根据项目不同，可能是移动栈、Web栈，或者原生应用程序栈。</p>
+</blockquote>
+<p>简单来说全栈工程师就是一个人能搞定一个项目，全能大神一样的人物。</p>
+<h2 id="一个Web产品典型的技术栈"><a href="#一个Web产品典型的技术栈" class="headerlink" title="一个Web产品典型的技术栈"></a>一个Web产品典型的技术栈</h2><blockquote>
+<p>服务器+数据库+服务器端编程语言+前端编程语言</p>
+</blockquote>
+<blockquote>
+<p>全栈工程师技术的兴起有两个重要原因：技术的发展和PaaS（Platform as a Service，平台即服务）服务的平台越来越多。</p>
+</blockquote>
+<h3 id="全栈框架———MEAN"><a href="#全栈框架———MEAN" class="headerlink" title="全栈框架———MEAN"></a>全栈框架———MEAN</h3><blockquote>
+<p>MongoDB-Express-AngularJs-Node.js<br>前后端采用一种编程语言JavaScript</p>
+</blockquote>
+<h2 id="全栈工程师的要求"><a href="#全栈工程师的要求" class="headerlink" title="全栈工程师的要求"></a>全栈工程师的要求</h2><h3 id="一专多长"><a href="#一专多长" class="headerlink" title="一专多长"></a>一专多长</h3><p>在一个领域里至少达到高级的级别，然后再去向上游或者下游延伸</p>
+<h3 id="关注商业目标"><a href="#关注商业目标" class="headerlink" title="关注商业目标"></a>关注商业目标</h3><p>公司聘请你是为了让你产生利润，并不关心你会什么，所以选择技术栈时要考虑的是如何降低公司的成本或者提高收入。</p>
+<h3 id="关注用户体验"><a href="#关注用户体验" class="headerlink" title="关注用户体验"></a>关注用户体验</h3><p>产品的最终目标是满足客户的需求，所以作为全栈工程师必须要关注用户体验。</p>
+<hr>
+<p>这是一些作为全栈工程师我整理出来的干货，这本书本身并不是一本技术性很强的书，倒像是一位过来人介绍些经验，适合刚入职场或者进入职场不久的人，在前端领域比较迷茫时看一看，书中介绍了作者读过的一些书，很有参考性，推荐大家阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/10/12/web-quanzhan/">《Web全栈工程师的自我修养》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 17:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2017/10/12/web-quanzhan/" title="《Web全栈工程师的自我修养》读书笔记">https://blog.lifesli.com/2017/10/12/web-quanzhan/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/web-quanzhan/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/10/12/VSCode-ESLint/" rel="prev" title="VSCode ESLint JS代码静态检测工具">
+      <i class="fa fa-chevron-left"></i> VSCode ESLint JS代码静态检测工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2017/12/12/Git-Shell/" rel="next" title="Git的常用命令">
+      Git的常用命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88"><span class="nav-number">1.1.</span> <span class="nav-text">什么是全栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88"><span class="nav-number">1.2.</span> <span class="nav-text">什么是全栈工程师</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E4%B8%AAWeb%E4%BA%A7%E5%93%81%E5%85%B8%E5%9E%8B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">1.3.</span> <span class="nav-text">一个Web产品典型的技术栈</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E6%A1%86%E6%9E%B6%E2%80%94%E2%80%94%E2%80%94MEAN"><span class="nav-number">1.3.1.</span> <span class="nav-text">全栈框架———MEAN</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%9A%84%E8%A6%81%E6%B1%82"><span class="nav-number">1.4.</span> <span class="nav-text">全栈工程师的要求</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%B8%93%E5%A4%9A%E9%95%BF"><span class="nav-number">1.4.1.</span> <span class="nav-text">一专多长</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E5%95%86%E4%B8%9A%E7%9B%AE%E6%A0%87"><span class="nav-number">1.4.2.</span> <span class="nav-text">关注商业目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C"><span class="nav-number">1.4.3.</span> <span class="nav-text">关注用户体验</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/10/12/web-quanzhan/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/web-quanzhan/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/web-quanzhan/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '413707796fb888bd0c8b0dd8a33521b9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2017/12/12/Git-Shell/index.html b/2017/12/12/Git-Shell/index.html
new file mode 100644
index 0000000000..59b360841e
--- /dev/null
+++ b/2017/12/12/Git-Shell/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Git的常用命令">
+<meta property="og:url" content="https://blog.lifesli.com/2017/12/12/Git-Shell/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-12-12T12:20:20.000Z">
+<meta property="article:modified_time" content="2019-12-31T10:38:57.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Git">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Git的常用命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Git的常用命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2017/12/12/Git-Shell/">Git的常用命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年12月12日 - 12:20</p>
+      <p><span>最后更新:</span>2019年12月31日 - 10:38</p>
+      <p><span>原始链接:</span><a href="/2017/12/12/Git-Shell/" title="Git的常用命令">https://blog.lifesli.com/2017/12/12/Git-Shell/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/12/12/Git-Shell/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Git/" rel="tag"># Git</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/10/12/web-quanzhan/" rel="prev" title="《Web全栈工程师的自我修养》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《Web全栈工程师的自我修养》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/27/Vue-Component-Communication/" rel="next" title="前端面试Vue篇：Vue组件通信的几种方式">
+      前端面试Vue篇：Vue组件通信的几种方式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8C%87%E4%BB%A4%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">指令表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2017/12/12/Git-Shell/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/12/12/Git-Shell/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/12/12/Git-Shell/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd597bbc64232170cd93c6da1a07deea2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/27/Actions/index.html b/2019/12/27/Actions/index.html
new file mode 100644
index 0000000000..c5ca00bde0
--- /dev/null
+++ b/2019/12/27/Actions/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="巧妙利用Acitons进行博客的自动构建">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/27/Actions/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta property="article:tag" content="Github">
+<meta property="article:tag" content="Actions">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>巧妙利用Acitons进行博客的自动构建 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          巧妙利用Acitons进行博客的自动构建
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+<span id="more"></span>
+
+<h2 id="GitHub-Actions-是什么"><a href="#GitHub-Actions-是什么" class="headerlink" title="GitHub Actions 是什么"></a>GitHub Actions 是什么</h2><p>GitHub Actions 由 GitHub 官方推出的工作流工具。典型的应用场景应该是 CI/CD，类似 Travis 的用法。如果不知道 CI/CD&amp;Travis 感兴趣的建议去了解一下，下面不展开说明，直接说怎么用就好。</p>
+<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>在使用 <code>GitHub Actions</code> 之前我们先来看看我们有什么；<br>首先我们有一个放博客程序的地方，我这里是叫做 <code>blog-source</code> ，另外呢有一个通过 hexo g 创建出来的静态网站，为了存放它而建的另一个仓库，我这里是叫做<code>lixuguang.github.io</code>,也就是说我们现在是有这样两个仓库。<br>|仓库|作用|<br>|-|-|<br>|blog-source|放博客源代码|<br>|lixuguang.github.io|放博客生成代码|</p>
+<h2 id="生成密钥"><a href="#生成密钥" class="headerlink" title="生成密钥"></a>生成密钥</h2><p>因为 <code>GitHub Actions</code> 它需要访问我的 <code>blog-source</code> 仓库的代码所以必须要有密钥，密钥大家应该熟悉了，创建博客的时候也是创建了一个公钥和私钥用来在本地往 <code>lixuguang.github.io</code> 这个仓库提交代码<br>这里呢我们用下面的命令生成密钥。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -f ~&#x2F;.ssh&#x2F;github-actions-deploy # 连按三次回车即刻</span><br></pre></td></tr></table></figure>
+<p>命令执行完成后，我们会得到两个文件 <code>github-actions-deploy</code> 和 <code>github-actions-deploy.pub</code> 两个文件，第一个是私钥，第二个是公钥。<br>|名称|解释|<br>|-|-|<br>|github-actions-deploy|私钥|<br>|github-actions-deploy.pub|公钥|</p>
+<p>接下来的步骤一定要好好看，因为我在这个地方被卡住好多次，就是因为有的文章说的并不正确，或者至少是讲的不够仔细，这里我会仔细地说明一下。</p>
+<h2 id="配置-GitHub-仓库"><a href="#配置-GitHub-仓库" class="headerlink" title="配置 GitHub 仓库"></a>配置 GitHub 仓库</h2><h3 id="配置博客源代码仓库"><a href="#配置博客源代码仓库" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里的源代码是放在 <code>blog-source</code> 中，所以我现在要给源代码仓库配置<code>私钥</code>，配置过程如下：<br>打开 <code>blog-source</code> 仓库，选择 <code>settings</code>，然后选中 <code>secrets</code> ， 再点击 <code>Add new secrets</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Name|HEXO_DEPLOY_PRI（名称自动构建时有用）|<br>|Value|github-actions-deploy|</p>
+<h3 id="配置博客源代码仓库-1"><a href="#配置博客源代码仓库-1" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里生成的博客静态代码是放在 <code>lixuguang.github.io</code> 中，所以我现在要给静态代码仓库配置<code>公钥</code>，配置过程如下：<br>打开 <code>lixuguang.github.io</code>，选择 <code>settings</code>，然后选中 <code>keys</code>，再点击 <code>Add deploy key</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Title|HEXO_DEPLOY_PUB|<br>|Key|github-actions-deploy.pub|</p>
+<h2 id="编写-Actions-脚本"><a href="#编写-Actions-脚本" class="headerlink" title="编写 Actions 脚本"></a>编写 Actions 脚本</h2><p>经过上面一系列的准备操作，终于来到了编写自动构建脚本的环节，构建脚本如下，如果按照上面我做的操作一步步来的话，那么这一步你可以直接copy啦</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">name: Deploy Blog</span><br><span class="line"></span><br><span class="line">on: [push] # 当有新push时运行</span><br><span class="line"></span><br><span class="line">jobs:</span><br><span class="line">  build: # 一项叫做build的任务</span><br><span class="line"></span><br><span class="line">    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行</span><br><span class="line">    </span><br><span class="line">    steps:</span><br><span class="line">    - name: Checkout # 将仓库内master分支的内容下载到工作目录</span><br><span class="line">      uses: actions&#x2F;checkout@v1 # 脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;checkout</span><br><span class="line">      </span><br><span class="line">    - name: Use Node.js 10.x # 配置Node环境</span><br><span class="line">      uses: actions&#x2F;setup-node@v1 # 配置脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;setup-node</span><br><span class="line">      with:</span><br><span class="line">        node-version: &quot;10.x&quot;</span><br><span class="line">    </span><br><span class="line">    - name: Setup Hexo env</span><br><span class="line">      env:</span><br><span class="line">        HEXO_DEPLOY_PRI: $&#123;&#123; secrets.HEXO_DEPLOY_PRI &#125;&#125; # 这里是上面配置的私钥名称</span><br><span class="line">      run: |</span><br><span class="line">        # set up private key for deploy</span><br><span class="line">        mkdir -p ~&#x2F;.ssh&#x2F;</span><br><span class="line">        echo &quot;$HEXO_DEPLOY_PRI&quot; | tr -d &#39;\r&#39; &gt; ~&#x2F;.ssh&#x2F;id_rsa # 配置秘钥</span><br><span class="line">        chmod 600 ~&#x2F;.ssh&#x2F;id_rsa</span><br><span class="line">        ssh-keyscan github.com &gt;&gt; ~&#x2F;.ssh&#x2F;known_hosts</span><br><span class="line">        # set git infomation</span><br><span class="line">        git config --global user.name &#39;lixuguang&#39; # 换成你自己的名字</span><br><span class="line">        git config --global user.email &#39;lixuguang@gmail.com&#39; # 换成你自己的邮箱</span><br><span class="line">        # install dependencies</span><br><span class="line">        npm i -g hexo-cli # 安装hexo</span><br><span class="line">        npm i</span><br><span class="line">  </span><br><span class="line">    - name: Deploy</span><br><span class="line">      run: |</span><br><span class="line">        # publish</span><br><span class="line">        rm -rf .deploy_git # 如果上次构建失败这句命令会清除上次失败的代码</span><br><span class="line">        hexo generate &amp;&amp; hexo deploy # 执行部署程序</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<hr>
+<p>通过以上这些步骤的操作，如果没什么意外的话，博客的自动构建就完成了，之后只要你提交新的文章到博客源代码仓库，它将自动帮你生成并发送到博客的静态代码仓库，再也不用执行hexo g -d啦，如果这篇文章对你有用，欢迎follow我或打赏一下这篇文章，感谢阅读。</p>
+<p>ps：这里有个小坑需要注意一下，因为博客的皮肤也是另外一个git仓库，如果你在本地构建好用但是线上构建博客不显示了，需要注意下是不是皮肤没有上传到博客源码仓库，这里我遇到了，希望你不会因此困扰，拜拜~</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/27/Actions/">巧妙利用Acitons进行博客的自动构建</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2019/12/27/Actions/" title="巧妙利用Acitons进行博客的自动构建">https://blog.lifesli.com/2019/12/27/Actions/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Actions/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
+              <a href="/tags/Github/" rel="tag"># Github</a>
+              <a href="/tags/Actions/" rel="tag"># Actions</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/27/Vue-Component-Communication/" rel="prev" title="前端面试Vue篇：Vue组件通信的几种方式">
+      <i class="fa fa-chevron-left"></i> 前端面试Vue篇：Vue组件通信的几种方式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/30/begin-learn-java/" rel="next" title="重拾java开发技能">
+      重拾java开发技能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#GitHub-Actions-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">1.1.</span> <span class="nav-text">GitHub Actions 是什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E6%9C%9F%E5%87%86%E5%A4%87"><span class="nav-number">1.2.</span> <span class="nav-text">前期准备</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5"><span class="nav-number">1.3.</span> <span class="nav-text">生成密钥</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE-GitHub-%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.</span> <span class="nav-text">配置 GitHub 仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.1.</span> <span class="nav-text">配置博客源代码仓库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93-1"><span class="nav-number">1.4.2.</span> <span class="nav-text">配置博客源代码仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E5%86%99-Actions-%E8%84%9A%E6%9C%AC"><span class="nav-number">1.5.</span> <span class="nav-text">编写 Actions 脚本</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/27/Actions/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Actions/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Actions/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ce455664c4cd310cb251fd5775727726',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/27/Vue-Component-Communication/index.html b/2019/12/27/Vue-Component-Communication/index.html
new file mode 100644
index 0000000000..cbeece5785
--- /dev/null
+++ b/2019/12/27/Vue-Component-Communication/index.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端面试Vue篇：Vue组件通信的几种方式">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="组件通信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端面试Vue篇：Vue组件通信的几种方式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端面试Vue篇：Vue组件通信的几种方式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+<span id="more"></span>
+
+<h2 id="props和-emit"><a href="#props和-emit" class="headerlink" title="props和$emit"></a><code>props</code>和<code>$emit</code></h2><p>啥也不了解的小伙伴应该也知道这种方式吧，这是最最基础的通信方式了，父子组件通信基本都用它。父组件向子组件传递数据的时候通过prop传参，子组件中通过$emit传递给父组件，父组件在触发子组件$emit方法时得到子组件数据。实例如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 父组件 parent.vue</span><br><span class="line"></span><br><span class="line">Vue.compinent(&#39;parent&#39;, &#123;</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;p&gt;父组件&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;child :message&#x3D;&quot;message&quot; @getChildrenData&#x3D;&quot;getChildrenData&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;&#96;,</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            message:&#39;Hello lixuguang&#39;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        &#x2F;**</span><br><span class="line">        * 执行子组件触发的事件方法 </span><br><span class="line">        *&#x2F;</span><br><span class="line">        getChildrenData(data)&#123;</span><br><span class="line">            console.log(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 子组件 child.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">    props:[&#39;message&#39;], &#x2F;&#x2F; 得到父组件传过来的数据</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            childMessage: this.message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;childMessage&quot; @input&#x3D;&quot;emitParentData(childMessage)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitParentData(data) &#123;</span><br><span class="line">            this.$emit(&#39;getChildrenData&#39;, data) &#x2F;&#x2F; 父组件触发时给父组件传值</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;parent&gt;&lt;&#x2F;parent&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>父组件通过<code>message</code>属性将数据传递给子组件，并且通过<code>getChildrenData</code>事件来监听子组件出发的事件；</li>
+<li>子组件通过<code>props</code>获得父组件传过来的数据，并且通过<code>this.$emit</code>触发了<code>getChildrenData</code>事件;</li>
+</ol>
+<h2 id="attrs和-listeners"><a href="#attrs和-listeners" class="headerlink" title="$attrs和$listeners"></a><code>$attrs</code>和<code>$listeners</code></h2><p>前一种方法我们完成了父子组件的数据通信，那你有没有想过如果有多层嵌套的数据最上层要往最下层传值怎么办，前一种方法只能一层一层的往下传，可是这样太麻烦了，那么有没有什么方法能够一次传到你想要传到的位置呢，当然是有的，那就是接下来要说到的<code>$attrs</code>和<code>$listeners</code>。<br>假设我们现在有三层包含关系的组件，分别是level1/level2/level3，level1 &gt; level2 &gt; level3, <code>&gt;</code> 表示包含关系。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; level3.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level3&#39;, &#123;</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;$attrs.level3Message&quot; @input&#x3D;&quot;emitLevel3Data($attrs.level3Message)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel3Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel3Data&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level2.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level2&#39;, &#123;</span><br><span class="line">    props:[&#39;level2Message&#39;],</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level2Message:this.level2Message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;level2Message&quot; @input&#x3D;&quot;emitLevel2Data(level2Message)&quot;&gt;</span><br><span class="line">    &lt;level3 v-bind&#x3D;&#39;$attrs&#39; v-on&#x3D;&#39;$listenrs&#39;&gt;&lt;&#x2F;level3&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel2Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel2Data&#39;, data) </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level1.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level1&#39;, &#123;</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level3Message:&quot;I am Level3&quot;,</span><br><span class="line">            level2Message:&quot;I am Level2&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是level1中的内容&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;level2 :level2Message&#x3D;&quot;level2Message&quot; </span><br><span class="line">            :level3Message&#x3D;&quot;level3Message&quot;</span><br><span class="line">            @getLevel2Data&#x3D;&quot;getLevel2Data()&quot;</span><br><span class="line">            @getLevel3Data&#x3D;&quot;getLevel3Data()&quot;</span><br><span class="line">            &gt;&lt;&#x2F;level2&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        getLevel2Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level2的数据&#39;, data)</span><br><span class="line">        &#125;,</span><br><span class="line">        getLevel3Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level3的数据&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line"></span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;level1&gt;&lt;&#x2F;level1&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>level3组件能直接触发<code>getLevel3Data</code>是因为level2组件在调用level3组件时使用v-on绑定了$listeners属性；</li>
+<li>通过v-bind绑定了$attrs属性，level3组件可以直接获取到从level1传下来的props;</li>
+</ol>
+<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>父组件通过v-model传递值给子组件时，会自动传递一个value的props户型，在子组件中可以通过this.$emit(‘input’,val)自动修改v-model绑定的值。</p>
+<p>```</p>
+<p>未完待续~</p>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/27/Vue-Component-Communication/">前端面试Vue篇：Vue组件通信的几种方式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2019/12/27/Vue-Component-Communication/" title="前端面试Vue篇：Vue组件通信的几种方式">https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" rel="tag"># 组件通信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2017/12/12/Git-Shell/" rel="prev" title="Git的常用命令">
+      <i class="fa fa-chevron-left"></i> Git的常用命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/27/Actions/" rel="next" title="巧妙利用Acitons进行博客的自动构建">
+      巧妙利用Acitons进行博客的自动构建 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#props%E5%92%8C-emit"><span class="nav-number">1.1.</span> <span class="nav-text">props和$emit</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#attrs%E5%92%8C-listeners"><span class="nav-number">1.2.</span> <span class="nav-text">$attrs和$listeners</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model"><span class="nav-number">1.3.</span> <span class="nav-text">v-model</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">1.4.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">1.5.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/27/Vue-Component-Communication/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Vue-Component-Communication/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Vue-Component-Communication/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '68a0d116db3973dd0f4816ff300dad2b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/30/begin-learn-java/index.html b/2019/12/30/begin-learn-java/index.html
new file mode 100644
index 0000000000..7d1198a8ba
--- /dev/null
+++ b/2019/12/30/begin-learn-java/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="重拾java开发技能">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/30/begin-learn-java/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-12-30T21:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>重拾java开发技能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          重拾java开发技能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+<span id="more"></span>
+
+<h2 id="公司这一年"><a href="#公司这一年" class="headerlink" title="公司这一年"></a>公司这一年</h2><p>最近对于自己的发展有一些迷茫，这一年公司前端的发展可以说是几经转折，我自己呢也一直在摇摆到底是做管理还是做技术，也参加了公司组织的部门经理的答辩，在部门前端的管理工作中也切实的了解到自己在为人处事方面不够圆润。所以目前也算是断了从事管理的念头，更希望能在技术上更进一步，前端目前看来已经不算是我的短板，而我的短板就是只会前端，一直在前端周围打转，其实如果不是看了那篇帖子，以及公司对专家岗位的要求，我可能还会更进一步在前端方向深入研究，但目前看更紧急的应该是补充一下后端的开发知识了，于是上周末开始我就开始了java的学习</p>
+<h2 id="为什么选择java"><a href="#为什么选择java" class="headerlink" title="为什么选择java"></a>为什么选择java</h2><p>为什么选择java作为后端入门，实话讲好多前端开发应该都会问这个问题，明明有更熟悉的nodejs可以作为后端技能进行扩展，我这里的理由是目前大多数公司的包括外面公司的开发人员大都还是以java作为主要语言作为后端编写的选择，另外前端js中好多的设计也是借鉴或者照搬了java中的一些思想，可以说在学习java过程中也会自然而然的提高对js的理解，更重要的是，java相对于其他语言来说资料也更多，上手也更容易，因为这些因素吧，最终我选择了java作为后端的主要学习目标。</p>
+<h2 id="怎么学习java"><a href="#怎么学习java" class="headerlink" title="怎么学习java"></a>怎么学习java</h2><p>java上大学的时候实际有系统的学过的，只是实习之后就再也没有使用过，如今9年过去了，java对于我可能也只剩下些零星的记忆，说实话刚一开始怎么学，从哪里学让我都有点无从下手，这里还要感谢一下我后端的开发伙伴，给了我很多很好的建议，看书的话大都是基础的太基础，实战的又经常忽略基础，最终我打算还是以视频教程2.5倍速快速过一遍java基础，然后再深入学习一下springboot框架，最后再进行实战，以此掌握java开发技能。</p>
+<h3 id="开始学习java"><a href="#开始学习java" class="headerlink" title="开始学习java"></a>开始学习java</h3><p>最终我选择了在B站上看黑马的java基础+实战课程的教学视频，说实话黑马的教学视频还是讲的很仔细的，老师讲的也很有趣，只是一节课10多分钟，只有一个知识点，对于我来说还是有些慢，所以我就开了2.5倍速加快进就这么着看，上周末两天时间，看了130多课，今天的内容记忆不太深刻，趁着不是那么忙又看了30多课，感觉收获还是满满的，接下来的每一天都会看上30课左右，希望自己能在3个月的时间完全上手java开发，相信我可以做到。</p>
+<h2 id="立个Flag"><a href="#立个Flag" class="headerlink" title="立个Flag"></a>立个Flag</h2><p>从今天起，每天都要把自己学习的进度做个总结，看看这一天自己收获了多少，希望30岁这年我重新起步，迈向更高更好的未来。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/30/begin-learn-java/">重拾java开发技能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月30日 - 21:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2019/12/30/begin-learn-java/" title="重拾java开发技能">https://blog.lifesli.com/2019/12/30/begin-learn-java/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/30/begin-learn-java/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/27/Actions/" rel="prev" title="巧妙利用Acitons进行博客的自动构建">
+      <i class="fa fa-chevron-left"></i> 巧妙利用Acitons进行博客的自动构建
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/31/weichat-h5-compatibility/" rel="next" title="微信的H5兼容方案">
+      微信的H5兼容方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AC%E5%8F%B8%E8%BF%99%E4%B8%80%E5%B9%B4"><span class="nav-number">1.1.</span> <span class="nav-text">公司这一年</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9java"><span class="nav-number">1.2.</span> <span class="nav-text">为什么选择java</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.</span> <span class="nav-text">怎么学习java</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.1.</span> <span class="nav-text">开始学习java</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AB%8B%E4%B8%AAFlag"><span class="nav-number">1.4.</span> <span class="nav-text">立个Flag</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/30/begin-learn-java/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/30/begin-learn-java/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/30/begin-learn-java/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '36693eb24b535f2453f611aa28f3bca3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/31/GoodBye-2019/index.html b/2019/12/31/GoodBye-2019/index.html
new file mode 100644
index 0000000000..eb350d4ceb
--- /dev/null
+++ b/2019/12/31/GoodBye-2019/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:type" content="article">
+<meta property="og:title" content="再见2019">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/31/GoodBye-2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+<meta property="article:published_time" content="2019-12-31T23:50:59.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="年终总结">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>再见2019 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          再见2019
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/31/GoodBye-2019/">再见2019</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 23:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2019/12/31/GoodBye-2019/" title="再见2019">https://blog.lifesli.com/2019/12/31/GoodBye-2019/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/GoodBye-2019/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" rel="tag"># 年终总结</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/31/gitlab-cicd/" rel="prev" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      <i class="fa fa-chevron-left"></i> 基于 GitLab CI/CD 的自动化构建、发布实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/01/Hello-2020/" rel="next" title="你好2020">
+      你好2020 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#18%E5%B9%B4%E5%BA%95%E5%AE%9A%E7%9A%84%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">18年底定的计划</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E6%8A%80%E6%9C%AF"><span class="nav-number">2.1.</span> <span class="nav-text">学习技术</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%88%E5%85%A8%E5%B9%B4%EF%BC%89"><span class="nav-number">2.1.1.</span> <span class="nav-text">1. 深入学习客户端开发（全年）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B43%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.2.</span> <span class="nav-text">2. 学习前端自动化测试相关知识（2019年3月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1TS-%EF%BC%882019%E5%B9%B45%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.3.</span> <span class="nav-text">3. 学习并掌握TS  （2019年5月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1React%EF%BC%882019%E5%B9%B47%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.4.</span> <span class="nav-text">4. 学习并掌握React（2019年7月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E7%9A%84%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B49%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.5.</span> <span class="nav-text">5. 学习前端持续集成的相关知识（2019年9月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E5%AD%A6%E4%B9%A0Docker%E8%99%9A%E6%8B%9F%E5%8C%96%E6%8A%80%E6%9C%AF%EF%BC%88-2019%E5%B9%B410%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.6.</span> <span class="nav-text">6. 学习Docker虚拟化技术（ 2019年10月前）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B4%E7%90%86%E8%AE%A1%E5%88%92"><span class="nav-number">2.2.</span> <span class="nav-text">整理计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%85%BB%E6%88%90%E5%86%99%E5%8D%9A%E5%AE%A2%E7%9A%84%E4%B9%A0%E6%83%AF%EF%BC%8C%E8%87%B3%E5%B0%912%E5%A4%A9%E4%B8%80%E7%AF%87%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%98%AF%E6%8A%80%E6%9C%AF%E5%8D%9A%E5%AE%A2%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%85%B6%E4%BB%96%E3%80%82"><span class="nav-number">2.2.1.</span> <span class="nav-text">1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%B0%86%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%8A%9F%E8%83%BD%E5%81%9A%E6%88%90%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%BC%80%E6%BA%90%E7%BB%99%E5%85%AC%E5%8F%B8%E4%BD%BF%E7%94%A8"><span class="nav-number">2.2.2.</span> <span class="nav-text">2. 将常用的方法和功能做成插件，开源给公司使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%BB%E4%B9%A6%E8%AE%A1%E5%88%92"><span class="nav-number">2.3.</span> <span class="nav-text">读书计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%AF%8F%E5%91%A8%E8%AF%BB%E5%AE%8C%E4%B8%80%E6%9C%AC%E4%B9%A6%EF%BC%8C%E5%B9%B6%E5%86%99%E4%B8%80%E7%AF%87%E8%AF%BB%E5%90%8E%E6%84%9F"><span class="nav-number">2.3.1.</span> <span class="nav-text">1. 每周读完一本书，并写一篇读后感</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%83%A8%E9%97%A8%E5%89%8D%E7%AB%AF%E8%AE%A1%E5%88%92"><span class="nav-number">2.4.</span> <span class="nav-text">部门前端计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A0%E5%BC%BA%E5%90%84%E8%AE%BE%E8%AE%A1%E7%BB%84%E5%89%8D%E7%AB%AF%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BA%A4%E6%B5%81"><span class="nav-number">2.4.1.</span> <span class="nav-text">加强各设计组前端之间的交流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E4%BF%B1%E4%B9%90%E9%83%A8%E6%8E%A8%E5%8A%A8"><span class="nav-number">2.4.2.</span> <span class="nav-text">前端俱乐部推动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%9B%E8%A1%8C%E6%A2%AF%E9%98%9F%E5%88%92%E5%88%86%E5%BB%BA%E8%AE%BE"><span class="nav-number">2.4.3.</span> <span class="nav-text">进行梯队划分建设</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E5%85%A5%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%B7%A5%E5%85%B7%E5%92%8C%E6%80%9D%E6%83%B3"><span class="nav-number">2.4.4.</span> <span class="nav-text">引入前端工程化工具和思想</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8F%90%E5%8D%87%E6%95%B4%E4%BD%93%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84%E8%83%BD%E5%8A%9B"><span class="nav-number">2.4.5.</span> <span class="nav-text">提升整体前端开发的能力</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%B4%BB%E7%9B%AE%E6%A0%87"><span class="nav-number">2.5.</span> <span class="nav-text">生活目标</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AF%8F%E5%A4%A9%E9%99%AA%E5%AD%A9%E5%AD%90%E8%AF%BB%E4%B9%A6%E4%B8%80%E5%B0%8F%E6%97%B6"><span class="nav-number">2.5.1.</span> <span class="nav-text">每天陪孩子读书一小时</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%8F%E8%82%A5"><span class="nav-number">2.5.2.</span> <span class="nav-text">减肥</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/31/GoodBye-2019/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/GoodBye-2019/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/GoodBye-2019/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b6d3b8a7963e68177bda003bed682a3c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/31/gitlab-cicd/index.html b/2019/12/31/gitlab-cicd/index.html
new file mode 100644
index 0000000000..8cc9752bde
--- /dev/null
+++ b/2019/12/31/gitlab-cicd/index.html
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="基于 GitLab CI&#x2F;CD 的自动化构建、发布实践">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/31/gitlab-cicd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-12-31T08:22:22.000Z">
+<meta property="article:modified_time" content="2019-12-31T08:43:48.358Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GitLab">
+<meta property="article:tag" content="CI&#x2F;CD">
+<meta property="article:tag" content="自动构建">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>基于 GitLab CI/CD 的自动化构建、发布实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          基于 GitLab CI/CD 的自动化构建、发布实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2019-12-31 08:22:22 / 修改时间：08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+<a id="more"></a>
+
+<h2 id="说一下目前公司的构建和发布流程"><a href="#说一下目前公司的构建和发布流程" class="headerlink" title="说一下目前公司的构建和发布流程"></a>说一下目前公司的构建和发布流程</h2><p>1、<strong><em>手动构建时代</em></strong>：开发人员在测试需要验证环境的时候，在本地执行打包构建命令，然后将包放到服务器上，整个过程30分钟左右。<br>2、<strong><em>自动构建时代</em></strong>目前公司的构建是要在Jekins中，首先是在Jekins中配置拉去代码的仓库地址和代码分支，写好构建的脚本，在需要构建时候进行构建，一次配置后构建全程只需要点一下构建时间长度跟项目代码需要下载的依赖时间有关，通常不超过5分钟，需要注意的是要在构建前同步一下代码版本<br><strong><em>划重点</em></strong><br>在原来的手动构建时代，代码是以开发本地的代码为准，代码版本很可能跟最新的代码有出入，而且依赖于开发的电脑设备，如果他请假了，那么就GG了；另外通过一次配置后整个构建的时间从30分钟降到了5分钟，一次节省25分钟，那么一个项目周期下节省的工时就非常可观了。</p>
+<h2 id="为什要使用GitLab-CI-CD进行构建"><a href="#为什要使用GitLab-CI-CD进行构建" class="headerlink" title="为什要使用GitLab CI/CD进行构建"></a>为什要使用GitLab CI/CD进行构建</h2><p>这里实际上没有太大的必要将公司的Jekins替换为GitLab的CI/CD进行自动构建，但是呢，因为公司本身采用的就是GitLab作为代码仓库管理代码，它本身又提供了CI/CD的功能，本着多学一点是一点的原则，我就花点时间研究一下它。</p>
+<h2 id="什么是-GitLab-CI-CD"><a href="#什么是-GitLab-CI-CD" class="headerlink" title="什么是 GitLab CI/CD"></a>什么是 GitLab CI/CD</h2><p>下面我就要开始把我了解到的GitLab CI/CD的使用方式说一下，从零开始搭建GitLab CI/CD。</p>
+<h3 id="1-简要介绍-GitLab-CI-CD"><a href="#1-简要介绍-GitLab-CI-CD" class="headerlink" title="1. 简要介绍 GitLab CI/CD"></a>1. 简要介绍 GitLab CI/CD</h3><p>代码提交到GitLab上后，满足指定条件之后会触发pipeline进行自动化构建、发布。<br><strong><em>pipeline</em></strong>可以理解为构建任务，里面可以包含多个流程，比如下载依赖、运行测试、编译、部署。<br>那么pipeline什么时候触发，分为几个流程，每个流程做什么，需要在项目的<strong><em>.gitlab-ci.yml</em></strong>文件中的定义。<br>这点呢跟Jekins里面实际上做的也是同样的事，在线下开发做构建时候也是做这些事，只是通过脚本之后这些事都可以交给计算机做了。</p>
+<h3 id="2-GitLab-CI-CD-整体流程"><a href="#2-GitLab-CI-CD-整体流程" class="headerlink" title="2. GitLab CI/CD 整体流程"></a>2. GitLab CI/CD 整体流程</h3><ul>
+<li>GitLab CI/CD 的 pipeline 具体流程和操作在 .gitlab-ci.yml 文件中申明。</li>
+<li>触发 pipeline 后，由 GitLab Runner 根据  .gitlab-ci.yml 文件运行。</li>
+<li>运行结束后将返回至 GitLab 系统。</li>
+</ul>
+<h4 id="2-1-gitlab-ci-yml-文件"><a href="#2-1-gitlab-ci-yml-文件" class="headerlink" title="2.1 .gitlab-ci.yml 文件"></a>2.1 .gitlab-ci.yml 文件</h4><p>.gitlab-ci.yml 文件是一个申明式文件，用于定义 GitLab CI/CD 流程分为几个阶段，每个阶段分别干什么。</p>
+<p>关于具体干什么、怎么干，主要使用命令行和脚本操作，稍后会在实践部分做细致的介绍。</p>
+<p>如果涉及一些逻辑的话，会使用脚本（shell）。</p>
+<h4 id="2-2-GitLab-Runner"><a href="#2-2-GitLab-Runner" class="headerlink" title="2.2 GitLab Runner"></a>2.2 GitLab Runner</h4><p>GitLab Runner 是 CI 的执行环境，负责执行 gitlab-ci.yml 文件，并将结果返回给 GitLab 系统。Runner 具体可以有多种形式，docker、虚拟机或 shell，在注册 runner 时选定方式。实际上就是运行脚本的容器环境。</p>
+<h2 id="3-从零搭建一个-GitLab-CI-CD-的基本步骤"><a href="#3-从零搭建一个-GitLab-CI-CD-的基本步骤" class="headerlink" title="3. 从零搭建一个 GitLab CI/CD 的基本步骤"></a>3. 从零搭建一个 GitLab CI/CD 的基本步骤</h2><p>上面介绍了一些GitLab构建的主要环节和名词概念，接下来我将给大家介绍一下如何从零搭建一个GitLab CI/CD，一起体验一把GitLab CI/CD的整个流程。</p>
+<h3 id="3-1-新建一个-GitLab-项目"><a href="#3-1-新建一个-GitLab-项目" class="headerlink" title="3.1 新建一个 GitLab 项目"></a>3.1 新建一个 GitLab 项目</h3><p>我这用的是公司的自有仓库，各位可以在开源GitLab上创建自己的项目</p>
+<h3 id="3-2-配置Runner"><a href="#3-2-配置Runner" class="headerlink" title="3.2 配置Runner"></a>3.2 配置Runner</h3><p>GitLab 提供了一些共享的Runner，我们可以不处理Runner，这里可以理解为，它提供了一些现成的脚本运行环境，不需要我们从头配置运行环境，so sweet～</p>
+<h3 id="3-3-新建-gitlab-ci-yml-文件"><a href="#3-3-新建-gitlab-ci-yml-文件" class="headerlink" title="3.3 新建 .gitlab-ci.yml 文件"></a>3.3 新建 .gitlab-ci.yml 文件</h3><ol>
+<li>拉取项目到本地</li>
+<li>在项目根目录新建 .gitlab-ci.yml 文件</li>
+<li>提交 .gitlab-ci.yml 文件</li>
+<li>在项目的 CI/CD 中，可以看到 CI/CD 的运行情况<br>这个过程应该没人不会吧，没技术含量的我们简单一提，实际上最重要的就是.gitlab-ci.yml文件中要怎么去写，示例说明文件如下：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; .gitlab-ci.yml 示例说明</span><br><span class="line"></span><br><span class="line">image: node</span><br><span class="line"># 定义 stages</span><br><span class="line">stages:</span><br><span class="line">  - build</span><br><span class="line">  - test</span><br><span class="line"># 定义 job</span><br><span class="line"> build 阶段:</span><br><span class="line">  stage: build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;build stage&quot;</span><br><span class="line"># 定义 job</span><br><span class="line">发布到测试环境:</span><br><span class="line">  stage: test</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;test stage&quot;</span><br></pre></td></tr></table></figure>
+
+</li>
+</ol>
+<h2 id="GitLab-CI-CD-实践"><a href="#GitLab-CI-CD-实践" class="headerlink" title="GitLab CI/CD 实践"></a>GitLab CI/CD 实践</h2><p>在实践部分，这里着重介绍 GitLab Runner 和 .gitlab-ci.yml 文件，主要的流程及遇到的问题和解决方案包含在 .gitlab-ci.yml 文件的介绍过程中。</p>
+<h3 id="1-GitLab-Runner"><a href="#1-GitLab-Runner" class="headerlink" title="1. GitLab Runner"></a>1. GitLab Runner</h3><p>GitLab Runner 一般由 GitLab 系统维护者管理，配置后，同类项目可以共享，一般不需要进行修改。这里不进行具体介绍，主要介绍下使用过程中的注意点，具体使用可参考 GitLab Runner 文档。（<a href="https://docs.gitlab.com.cn/runner/）" target="_blank" rel="noopener">https://docs.gitlab.com.cn/runner/）</a></p>
+<h4 id="1-1-GitLab-Runner-使用流程"><a href="#1-1-GitLab-Runner-使用流程" class="headerlink" title="1.1 GitLab Runner 使用流程"></a>1.1 GitLab Runner 使用流程</h4><ol>
+<li>下载 GitLab Runner</li>
+<li>注册 GitLab Runner</li>
+<li>使用 GitLab Runner</li>
+</ol>
+<h4 id="1-2-GitLab-Runner-注意点"><a href="#1-2-GitLab-Runner-注意点" class="headerlink" title="1.2 GitLab Runner 注意点"></a>1.2 GitLab Runner 注意点</h4><p>在使用 Runner 的过程中，我们遇到了一些问题，下面简要介绍问题及解决方案，不做具体介绍。</p>
+<h5 id="1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态"><a href="#1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态" class="headerlink" title="1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态"></a>1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</h5><p>错误信息是：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">This job is stuck, because you don’t have any active runners that can run this job</span><br></pre></td></tr></table></figure>
+<p>注册的 Runner，默认情况下，不会运用没有 <code>tag</code> 的 job，可以在 Settings→CI/CD→Runners Settings，去掉 Runner untagged jobs 即可。</p>
+<h5 id="1-2-2-GitLab-Runner-的类型"><a href="#1-2-2-GitLab-Runner-的类型" class="headerlink" title="1.2.2 GitLab Runner 的类型"></a>1.2.2 GitLab Runner 的类型</h5><p>有三种类型的 Runner，</p>
+<ul>
+<li>Shared Runners 在整个系统所有项目都可以使用</li>
+<li>Group Runners 注册后，同一个项目下的不同代码库共享</li>
+<li>Specific Runners 需要给项目单独配置，使用 Specific Runners 注意考虑是否需要关闭 Shared Runners、和 Group Runners。</li>
+</ul>
+<h5 id="1-2-3-在-GitLab-CI-中使用-docker"><a href="#1-2-3-在-GitLab-CI-中使用-docker" class="headerlink" title="1.2.3 在 GitLab CI 中使用 docker"></a>1.2.3 在 GitLab CI 中使用 docker</h5><p>如果部署使用的是docker方式，那么在部署时需要在 GitLab CI/CD 中使用 docker 打镜像发布。可以参考 Building Docker images with GitLab CI/CD（<a href="https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）</a></p>
+<h5 id="1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录"><a href="#1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录" class="headerlink" title="1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录"></a>1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录</h5><p>我们使用的 Runner executor 是 Dokcer，在 Dokcer volumes 中配置需要访问的目录。</p>
+<h3 id="2-gitlab-ci-yml-文件"><a href="#2-gitlab-ci-yml-文件" class="headerlink" title="2. .gitlab-ci.yml 文件"></a>2. .gitlab-ci.yml 文件</h3><p>.gitlab-ci.yml 详细的用法，可参考 GitLab CI/CD Pipeline Configuration Reference 文档（<a href="https://docs.gitlab.com/ee/ci/yaml/README.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/yaml/README.html）</a></p>
+<h4 id="2-1-gitlab-ci-yml-文件结构介绍"><a href="#2-1-gitlab-ci-yml-文件结构介绍" class="headerlink" title="2.1 .gitlab-ci.yml 文件结构介绍"></a>2.1 .gitlab-ci.yml 文件结构介绍</h4><ul>
+<li><code>image</code> 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp（内部 rsync 工具）。</li>
+<li><code>stages</code> 中定义了我们的 pipeline 分为以下几个过程:<ol>
+<li>下载依赖阶段 pre_build</li>
+<li>构建阶段 build</li>
+<li>发布阶段 deploy</li>
+</ol>
+</li>
+<li><code>stage</code> 申明当前的阶段，在 stages 中使用</li>
+<li><code>variables</code> 用于定义变量</li>
+<li><code>before_script</code> 执行 script 前的操作</li>
+<li><code>script</code> 当前 stage 需要执行的操作</li>
+<li><code>changes</code> 指定 stage 触发条件</li>
+<li><code>refs</code> 指定 stage 触发的分支</li>
+</ul>
+<p>下面具体看一下我们这个.gitlab-ci.yml文件实际的样子</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">image: registry.thunisoft.com&#x2F;gitlab-ci&#x2F;node:v1.8</span><br><span class="line"></span><br><span class="line">variables:</span><br><span class="line">  # $CI_PROJECT_PATH  ：项目id,用于项目唯一区分本项目与其它项目</span><br><span class="line">  # $CI_PROJECT_DIR   ：本地项目路径</span><br><span class="line">  # $PROCESS_PATH     ：临时文件目录(包括日志和一些临时文件)</span><br><span class="line">  NODE_MODULES_PATH: &#x2F;runner-cache&#x2F;frontend&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME&#x2F;node_modules</span><br><span class="line"></span><br><span class="line">stages:</span><br><span class="line">  - pre_build # 下载依赖阶段</span><br><span class="line">  - build # 构建阶段</span><br><span class="line">  - deploy # 测试发布阶段</span><br><span class="line"></span><br><span class="line"># 下载依赖:</span><br><span class="line">  before_script: # 下载依赖前准备脚本</span><br><span class="line">    # 无 node_modules 文件时，新建 node_modules 文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkdir.sh $NODE_MODULES_PATH</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - cd webpack@lixuguang-project</span><br><span class="line"></span><br><span class="line">  stage: pre_build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;npm install&quot;</span><br><span class="line">    - npm install  --network-timeout 60000 # 安装依赖</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - webpack@lixuguang-project&#x2F;package.json</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 构建:</span><br><span class="line">  stage: build</span><br><span class="line">  variables:</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.sh</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME.sh</span><br><span class="line">  before_script:</span><br><span class="line">    # 建存此次 CI CI_COMMIT_SHA 的文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - rm -rf web&#x2F;share&#x2F;*</span><br><span class="line">    - cd webpack@lixuguang-projects</span><br><span class="line">  script:</span><br><span class="line">    # 缓存上次ci</span><br><span class="line">    - source $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - echo &quot;CI_COMMIT_BEFORE_SHA&#x3D;$CI_COMMIT_SHA&quot; &gt; $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - python3 ..&#x2F;ci&#x2F;build.py   # 编译</span><br><span class="line">    - &#x2F;bin&#x2F;bash ..&#x2F;ci&#x2F;commit.sh   # 提交编译结果</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - www_src&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 测试发布:</span><br><span class="line">  stage: deploy</span><br><span class="line">  variables:</span><br><span class="line">    PROCESS_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;deploy&#x2F;process&#x2F;$CI_JOB_ID  # 目录不要换，用于日志服务器获取日志展示</span><br><span class="line">  script:</span><br><span class="line">    - mkdir $PROCESS_PATH # 建立发布临时路径，存放发布配置中间文件和结果日志用</span><br><span class="line">    - dplt $CI_PROJECT_DIR&#x2F;.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR&#x2F;web&#x2F; $PROCESS_PATH</span><br><span class="line">    # dplt 发布yml配置</span><br><span class="line">    - echo &quot;发布完成，错误日志查看http:&#x2F;&#x2F;172.18.78.11:8089&#x2F;log?path&#x3D;&quot;$PROCESS_PATH</span><br><span class="line">    - echo &#96;ls $PROCESS_PATH&#x2F;*.log&#96;</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - web&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - test</span><br></pre></td></tr></table></figure>
+
+<h4 id="2-2-下载依赖阶段（pre-build-stage）"><a href="#2-2-下载依赖阶段（pre-build-stage）" class="headerlink" title="2.2 下载依赖阶段（pre_build stage）"></a>2.2 下载依赖阶段（pre_build stage）</h4><p>下载依赖的方案是：当 package.json 文件发生变化时，触发 pre_build stage，执行 npm install。下载的 node_modules 放在宿主机下，执行时通过软链获取依赖。</p>
+<h4 id="2-3-构建阶段（build-stage）"><a href="#2-3-构建阶段（build-stage）" class="headerlink" title="2.3 构建阶段（build stage）"></a>2.3 构建阶段（build stage）</h4><p>构建阶段，分为 3 部分</p>
+<ol>
+<li>diff 文件变化</li>
+<li>前端 build</li>
+<li>commit build 后结果</li>
+</ol>
+<h5 id="2-3-1-diff-文件变化"><a href="#2-3-1-diff-文件变化" class="headerlink" title="2.3.1 diff 文件变化"></a>2.3.1 diff 文件变化</h5><p>每次 CI 时，将当前 CI commit SHA（CI_COMMIT_SHA 变量）存在文件中，存为 CI_COMMIT_BEFORE_SHA 变量， diff 时，git diff 当前 CI 与上次 commit SHA 的变化。</p>
+<h5 id="2-3-2-前端-build"><a href="#2-3-2-前端-build" class="headerlink" title="2.3.2 前端 build"></a>2.3.2 前端 build</h5><p>根据 git diff 的变化情况，确定本次需要打包的内容。</p>
+<h5 id="2-3-3-commit-打包后生成的-HTML-文件"><a href="#2-3-3-commit-打包后生成的-HTML-文件" class="headerlink" title="2.3.3 commit 打包后生成的 HTML 文件"></a>2.3.3 commit 打包后生成的 HTML 文件</h5><p>在 GitLab CI/CD 提交代码时，使用 Git 凭证存储，提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档(<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8" target="_blank" rel="noopener">https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8</a>)</p>
+<h4 id="2-4-发布阶段（deploy-stage）"><a href="#2-4-发布阶段（deploy-stage）" class="headerlink" title="2.4 发布阶段（deploy stage）"></a>2.4 发布阶段（deploy stage）</h4><p>发布阶段，使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。</p>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>以上就是GitLab CI/CD的整个理论到实践的全部过程，实现之后你就可以解放双手了，是不是超爽。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p>持续集成是什么？(<a href="http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html</a>)</p>
+<p>什么是 CI/CD？(<a href="https://www.redhat.com/zh/topics/devops/what-is-ci-cd" target="_blank" rel="noopener">https://www.redhat.com/zh/topics/devops/what-is-ci-cd</a>)</p>
+<p>GitLab Docs(<a href="https://docs.gitlab.com/" target="_blank" rel="noopener">https://docs.gitlab.com/</a>)</p>
+<p>Introduction to CI/CD with GitLab(<a href="https://docs.gitlab.com/ee/ci/introduction/" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/introduction/</a>)</p>
+<p>用 GitLab CI 进行持续集成(<a href="https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/" target="_blank" rel="noopener">https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/</a>)</p>
+<p>如何实现前端工程的持续集成与持续部署？(<a href="https://www.zhihu.com/question/60194439" target="_blank" rel="noopener">https://www.zhihu.com/question/60194439</a>)</p>
+<p>基于 GitLab CI 的前端工程CI/CD实践(<a href="https://github.com/giscafer/front-end-manual/issues/27" target="_blank" rel="noopener">https://github.com/giscafer/front-end-manual/issues/27</a>)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/31/gitlab-cicd/">基于 GitLab CI/CD 的自动化构建、发布实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 08:22</p>
+      <p><span>最后更新:</span>2019年12月31日 - 08:43</p>
+      <p><span>原始链接:</span><a href="/2019/12/31/gitlab-cicd/" title="基于 GitLab CI/CD 的自动化构建、发布实践">https://blog.lifesli.com/2019/12/31/gitlab-cicd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/gitlab-cicd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/GitLab/" rel="tag"># GitLab</a>
+              <a href="/tags/CI-CD/" rel="tag"># CI/CD</a>
+              <a href="/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" rel="tag"># 自动构建</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/31/weichat-h5-compatibility/" rel="prev" title="微信的H5兼容方案">
+      <i class="fa fa-chevron-left"></i> 微信的H5兼容方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/31/GoodBye-2019/" rel="next" title="再见2019">
+      再见2019 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%B4%E4%B8%80%E4%B8%8B%E7%9B%AE%E5%89%8D%E5%85%AC%E5%8F%B8%E7%9A%84%E6%9E%84%E5%BB%BA%E5%92%8C%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B"><span class="nav-number">1.1.</span> <span class="nav-text">说一下目前公司的构建和发布流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E8%A6%81%E4%BD%BF%E7%94%A8GitLab-CI-CD%E8%BF%9B%E8%A1%8C%E6%9E%84%E5%BB%BA"><span class="nav-number">1.2.</span> <span class="nav-text">为什要使用GitLab CI&#x2F;CD进行构建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-GitLab-CI-CD"><span class="nav-number">1.3.</span> <span class="nav-text">什么是 GitLab CI&#x2F;CD</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D-GitLab-CI-CD"><span class="nav-number">1.3.1.</span> <span class="nav-text">1. 简要介绍 GitLab CI&#x2F;CD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-GitLab-CI-CD-%E6%95%B4%E4%BD%93%E6%B5%81%E7%A8%8B"><span class="nav-number">1.3.2.</span> <span class="nav-text">2. GitLab CI&#x2F;CD 整体流程</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-GitLab-Runner"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">2.2 GitLab Runner</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E4%BB%8E%E9%9B%B6%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-CI-CD-%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">3. 从零搭建一个 GitLab CI&#x2F;CD 的基本步骤</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.4.1.</span> <span class="nav-text">3.1 新建一个 GitLab 项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E9%85%8D%E7%BD%AERunner"><span class="nav-number">1.4.2.</span> <span class="nav-text">3.2 配置Runner</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%96%B0%E5%BB%BA-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.3.</span> <span class="nav-text">3.3 新建 .gitlab-ci.yml 文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GitLab-CI-CD-%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.5.</span> <span class="nav-text">GitLab CI&#x2F;CD 实践</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-GitLab-Runner"><span class="nav-number">1.5.1.</span> <span class="nav-text">1. GitLab Runner</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-1-GitLab-Runner-%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B"><span class="nav-number">1.5.1.1.</span> <span class="nav-text">1.1 GitLab Runner 使用流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#1-2-GitLab-Runner-%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="nav-number">1.5.1.2.</span> <span class="nav-text">1.2 GitLab Runner 注意点</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-1-%E9%85%8D%E7%BD%AE-Runner-%E5%90%8E%EF%BC%8Cpush-%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%87%BA%E5%8F%91%E4%BA%86-pipeline%EF%BC%8C%E4%BD%86%E4%B8%80%E7%9B%B4%E5%A4%84%E4%BA%8EPending%E7%8A%B6%E6%80%81"><span class="nav-number">1.5.1.2.1.</span> <span class="nav-text">1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-2-GitLab-Runner-%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.5.1.2.2.</span> <span class="nav-text">1.2.2 GitLab Runner 的类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-3-%E5%9C%A8-GitLab-CI-%E4%B8%AD%E4%BD%BF%E7%94%A8-docker"><span class="nav-number">1.5.1.2.3.</span> <span class="nav-text">1.2.3 在 GitLab CI 中使用 docker</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-4-%E5%9C%A8-GitLab-CI-CD-%E4%B8%AD%E8%AE%BF%E9%97%AE-Runner-%E5%AE%BF%E4%B8%BB%E6%9C%BA%E7%9B%AE%E5%BD%95"><span class="nav-number">1.5.1.2.4.</span> <span class="nav-text">1.2.4 在 GitLab CI&#x2F;CD 中访问 Runner 宿主机目录</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.</span> <span class="nav-text">2. .gitlab-ci.yml 文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.5.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件结构介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-%E4%B8%8B%E8%BD%BD%E4%BE%9D%E8%B5%96%E9%98%B6%E6%AE%B5%EF%BC%88pre-build-stage%EF%BC%89"><span class="nav-number">1.5.2.2.</span> <span class="nav-text">2.2 下载依赖阶段（pre_build stage）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-%E6%9E%84%E5%BB%BA%E9%98%B6%E6%AE%B5%EF%BC%88build-stage%EF%BC%89"><span class="nav-number">1.5.2.3.</span> <span class="nav-text">2.3 构建阶段（build stage）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-1-diff-%E6%96%87%E4%BB%B6%E5%8F%98%E5%8C%96"><span class="nav-number">1.5.2.3.1.</span> <span class="nav-text">2.3.1 diff 文件变化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-2-%E5%89%8D%E7%AB%AF-build"><span class="nav-number">1.5.2.3.2.</span> <span class="nav-text">2.3.2 前端 build</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-3-commit-%E6%89%93%E5%8C%85%E5%90%8E%E7%94%9F%E6%88%90%E7%9A%84-HTML-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.3.3.</span> <span class="nav-text">2.3.3 commit 打包后生成的 HTML 文件</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-4-%E5%8F%91%E5%B8%83%E9%98%B6%E6%AE%B5%EF%BC%88deploy-stage%EF%BC%89"><span class="nav-number">1.5.2.4.</span> <span class="nav-text">2.4 发布阶段（deploy stage）</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.7.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/31/gitlab-cicd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/gitlab-cicd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/gitlab-cicd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '71f74c4af32a5e559974a55abf3de796',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2019/12/31/weichat-h5-compatibility/index.html b/2019/12/31/weichat-h5-compatibility/index.html
new file mode 100644
index 0000000000..4d5433ce83
--- /dev/null
+++ b/2019/12/31/weichat-h5-compatibility/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="微信的H5兼容方案">
+<meta property="og:url" content="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-12-31T01:37:08.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="微信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>微信的H5兼容方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          微信的H5兼容方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+<span id="more"></span>
+
+<h2 id="1、ios端兼容input光标的高度"><a href="#1、ios端兼容input光标的高度" class="headerlink" title="1、ios端兼容input光标的高度"></a>1、ios端兼容input光标的高度</h2><p><em><strong>bug描述：</strong></em><br>这个问题只出现在苹果手机上，在安卓手机上显示没有问题，可以说是非常诡异，简单描述一下就是在input输入框聚焦时，光标大小应该跟字号一直，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。<br><em><strong>分析：</strong></em><br>说来主要是习惯导致的问题，通常我们习惯将height和line-height设置成一样的值，这个时候input光标就会整个变得很大。<br><em><strong>解决：</strong></em><br>实际上解决方案也很简单，就是不设置行高，通过padding来控制输入内容与外框的距离。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; less代码</span><br><span class="line">.input-x&#123;</span><br><span class="line">	height:40px;</span><br><span class="line">	&#x2F;&#x2F; line-height:40px; &#x2F;&#x2F; 此行注释掉</span><br><span class="line">	.input-inline&#123;</span><br><span class="line">		padding: 10px 0;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这样做问题就解决了。</p>
+<h2 id="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"><a href="#2、ios端微信h5页面上下滑动会卡顿，页面会有缺失" class="headerlink" title="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"></a>2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</h2><p><em><strong>bug描述：</strong></em><br>没错又是ios端，当页面高度超过一屏，那么上下滑动时就会出现页面卡顿的情况，而且时有伴随内容不能全部显示的情况。<br><em><strong>分析：</strong></em><br>这里实际上是浏览器内核解析不同导致的问题，在Andriod设备上，微信调用的是Webkit内核，而ios中是使用了Safari的内核，Safari对于滚动事件（overflow-scrolling）会使用原生的控件。而webkit内核则会创建一个UIScrollView来提供给子layer用以渲染。<br><em><strong>解决：</strong></em><br>在做样式重置时，加上下面这句话就能解决这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css代码</span><br><span class="line">*&#123;</span><br><span class="line">	-webkit-overflow-scrolling: touch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>但是这个方案也有缺陷，就是页面中不能有使用absolute定位的元素，不然布局就错乱了。<br><em><strong>延伸：</strong></em><br>-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.</p>
+<ul>
+<li>auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。</li>
+<li>touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。</li>
+</ul>
+<h2 id="3、ios键盘唤起再收起，页面不会恢复原位"><a href="#3、ios键盘唤起再收起，页面不会恢复原位" class="headerlink" title="3、ios键盘唤起再收起，页面不会恢复原位"></a>3、ios键盘唤起再收起，页面不会恢复原位</h2><p><em><strong>bug描述：</strong></em><br>哎，对的还是ios，问题标题描述的比较清晰了，就是键盘弹出时，页面内容会整体上移，但是收起键盘时本应回归原位的不回去了。—_—|||<br><em><strong>分析：</strong></em><br>固定定位的元素，如果元素内input框聚焦的时候会弹出软键盘，软键盘会占用屏幕面积，失去焦点时软键盘消失，但是仍会占用，页面就会不能恢复原状，也就导致input框不能再次输入了。<br><em><strong>解决：</strong></em><br>在input失去焦点键盘收起时，写一个监听事件，事例代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeBlur()&#123;</span><br><span class="line">	let ua &#x3D; navigator.userAgent; &#x2F;&#x2F; 获取用户代理</span><br><span class="line">	let app &#x3D; navigator.appVersion; &#x2F;&#x2F; 获取客户端版本信息</span><br><span class="line">	let isIos &#x3D; ua.match(&#x2F;i[^;]+;( U;)? CPU.+Mac OS X&#x2F;); &#x2F;&#x2F; 判断是否是Ios设备</span><br><span class="line">	if(isIos)&#123;</span><br><span class="line">		setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">			const scrollHeight &#x3D; document.documentElement.scrollTop || document.body.scrollTop || 0</span><br><span class="line">			window.scrollTop(0,Math.max(scrollHeight - 1), 0)</span><br><span class="line">		&#125;,100)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>延伸：</strong></em><br>在iso的微信开发中，页面元素如果用到了position: fixed进行定位，那么键盘收起时，就会被顶上去，第三方输入法也不例外。</p>
+<h2 id="4、Android弹出键盘遮挡文本输入框"><a href="#4、Android弹出键盘遮挡文本输入框" class="headerlink" title="4、Android弹出键盘遮挡文本输入框"></a>4、Android弹出键盘遮挡文本输入框</h2><p><em><strong>bug描述：</strong></em><br>刚才说的问题都是Ios端的，实际上Android上也有挺多坑，上面讲到Ios上输入框弹出键盘的问题后，Android中实际也有，只是现象不同；Andriod中弹出键盘后页面不会向上滑动，但是如果输入框在底部的话会直接被挡住。。。<br><em><strong>分析：</strong></em><br>很坑，因为Andriod中输入框focus后，并不会向上滑动，如果靠下就会被挡住。。<br><em><strong>解决：</strong></em><br>实际上跟Ios上处理差不多的方案，代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeFocus()&#123;</span><br><span class="line">   let ua &#x3D; navigator.userAgent;</span><br><span class="line">	 let app &#x3D; navigator.appVersion;</span><br><span class="line">   let isAndroid &#x3D; u.indexOf(&#39;Android&#39;) &gt; -1 || u.indexOf(&#39;Linux&#39;) &gt; -1;</span><br><span class="line">   if(isAndroid)&#123;</span><br><span class="line">      setTimeout(function() &#123;</span><br><span class="line">      document.activeElement.scrollIntoViewIfNeeded();</span><br><span class="line">      document.activeElement.scrollIntoView();</span><br><span class="line">      &#125;, 500);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>扩展</strong></em><br>Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动</p>
+<h2 id="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"><a href="#5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败" class="headerlink" title="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"></a>5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</h2><p><em><strong>bug描述：</strong></em><br>Ios的问题真的挺多的。。。</p>
+<ul>
+<li>在分享页面给A时，没问题，A把链接分享给B的时候就跳转到首页了；</li>
+<li>使用Vue-router跳转到第二个页面在分享时候，分享失败；<br>以上两个问题在Android上均没有问题。</li>
+</ul>
+<p><em><strong>分析：</strong></em><br>jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&amp;isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数<br><em><strong>解决：</strong></em></p>
+<ul>
+<li>可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功</li>
+<li>把入口地址保存在本地，等需要获取签名的时候再取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！（还没测试，有点low）</li>
+</ul>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>虽然微信H5方式开发想对来说成本比较低，但是有时候坑开始挺多的，但是微信原生开发又增加了成本，很矛盾，目前能做的就是尽量把踩过的坑都记下来，下次别再跳进去了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2019/12/31/weichat-h5-compatibility/">微信的H5兼容方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 01:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2019/12/31/weichat-h5-compatibility/" title="微信的H5兼容方案">https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/tags/%E5%BE%AE%E4%BF%A1/" rel="tag"># 微信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/30/begin-learn-java/" rel="prev" title="重拾java开发技能">
+      <i class="fa fa-chevron-left"></i> 重拾java开发技能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2019/12/31/gitlab-cicd/" rel="next" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      基于 GitLab CI/CD 的自动化构建、发布实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81ios%E7%AB%AF%E5%85%BC%E5%AE%B9input%E5%85%89%E6%A0%87%E7%9A%84%E9%AB%98%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">1、ios端兼容input光标的高度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81ios%E7%AB%AF%E5%BE%AE%E4%BF%A1h5%E9%A1%B5%E9%9D%A2%E4%B8%8A%E4%B8%8B%E6%BB%91%E5%8A%A8%E4%BC%9A%E5%8D%A1%E9%A1%BF%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%BC%9A%E6%9C%89%E7%BC%BA%E5%A4%B1"><span class="nav-number">1.2.</span> <span class="nav-text">2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81ios%E9%94%AE%E7%9B%98%E5%94%A4%E8%B5%B7%E5%86%8D%E6%94%B6%E8%B5%B7%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%B8%8D%E4%BC%9A%E6%81%A2%E5%A4%8D%E5%8E%9F%E4%BD%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3、ios键盘唤起再收起，页面不会恢复原位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4%E3%80%81Android%E5%BC%B9%E5%87%BA%E9%94%AE%E7%9B%98%E9%81%AE%E6%8C%A1%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">1.4.</span> <span class="nav-text">4、Android弹出键盘遮挡文本输入框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5%E3%80%81Vue%E4%B8%AD%E8%B7%AF%E7%94%B1%E4%BD%BF%E7%94%A8hash%E6%A8%A1%E5%BC%8F%EF%BC%8C%E5%88%86%E4%BA%AB%E6%97%B6Android%E5%8F%AF%E5%88%86%E4%BA%AB%E6%88%90%E5%8A%9F%EF%BC%8CIos%E7%AB%AF%E5%88%86%E4%BA%AB%E5%A4%B1%E8%B4%A5"><span class="nav-number">1.5.</span> <span class="nav-text">5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2019/12/31/weichat-h5-compatibility/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/weichat-h5-compatibility/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/weichat-h5-compatibility/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e6968f47902e2cfce473dbd04a8e9ef2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/01/Hello-2020/index.html b/2020/01/01/Hello-2020/index.html
new file mode 100644
index 0000000000..d4e638547d
--- /dev/null
+++ b/2020/01/01/Hello-2020/index.html
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:type" content="article">
+<meta property="og:title" content="你好2020">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/01/Hello-2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-01T10:50:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>你好2020 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          你好2020
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/01/Hello-2020/">你好2020</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月01日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/01/Hello-2020/" title="你好2020">https://blog.lifesli.com/2020/01/01/Hello-2020/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/01/Hello-2020/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2019/12/31/GoodBye-2019/" rel="prev" title="再见2019">
+      <i class="fa fa-chevron-left"></i> 再见2019
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-dataType/" rel="next" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#2020%E5%85%83%E6%97%A6%E4%BC%8A%E5%A7%8B"><span class="nav-number">1.</span> <span class="nav-text">2020元旦伊始</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%83%E6%97%A6%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">元旦执行计划</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">3.</span> <span class="nav-text">执行计划</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/01/Hello-2020/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/01/Hello-2020/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/01/Hello-2020/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '54e2662bb7ff8a6616774cf7d0f9265a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/21-Day-Challenge-01/index.html b/2020/01/02/21-Day-Challenge-01/index.html
new file mode 100644
index 0000000000..36ea72c8b1
--- /dev/null
+++ b/2020/01/02/21-Day-Challenge-01/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+<span id="more"></span>
+
+<h1 id="1月份21天主题挑战之灵感Inspiration"><a href="#1月份21天主题挑战之灵感Inspiration" class="headerlink" title="1月份21天主题挑战之灵感Inspiration"></a>1月份21天主题挑战之灵感Inspiration</h1><blockquote>
+<p>设定一个挑战主题，让自己更富有创造力，连续21天挑战，让灵感乍现，唤醒天赋。</p>
+</blockquote>
+<h1 id="第一天-Day-1-写下自己期待中的生平"><a href="#第一天-Day-1-写下自己期待中的生平" class="headerlink" title="第一天 Day 1 写下自己期待中的生平"></a>第一天 Day 1 写下自己期待中的生平</h1><p>看到这个题目之后，我闭上了眼睛，努力的回想我自己曾经的梦想是什么，什么时候丢掉了梦想，儿时的梦想，上学时的梦想，长大以后的梦想，现在的梦想，我努力回想了好久好久，儿时的梦想我想起来了，上学时的梦想我想起来了，长大后的梦想我也想起来了，但是我没能一下子找到我现在的梦想，也许现在说梦想有些奢侈，也许也有点贴不上今天的主题期待中的人生，我不太会写文章，但是想到哪里写哪里吧，我先写下我之前的那些个梦想。</p>
+<h2 id="小时候的梦想-成为科学家"><a href="#小时候的梦想-成为科学家" class="headerlink" title="小时候的梦想-成为科学家"></a>小时候的梦想-成为科学家</h2><p>小时候的梦想说出来很简单，但是是那么真诚，真诚就容易打动人，说实话我记性不是太好，已经忘掉了小时候的梦想，所以我问了我妈，我妈笑话我，说我咋不记得小时候那伟大的梦想了，妈妈说我儿时的梦想是当科学家，那会应该是上小学吧，妈妈说学校老师让写作文，标题就是我的梦想，我的作文里写的是成为科学家，这个科学家不像是别人写的，比如造火箭，造大炮又或者是造卫星造原子弹，我的梦想现在说起来与其说是科学家，不如说是药剂师更贴切，妈妈笑着跟我说我当时的梦想是做一个科学家，要研究出来一种长生不老的药，然后让爸爸妈妈吃下以后就可以永远健康年轻，妈妈说那个时候她总逗我，看到路上漂亮的阿姨就会问我，那个阿姨漂亮么，起初我会说漂亮，然后妈妈就会说那让她给你当妈妈好不好，我呢会说不好，妈妈说后来她再问的时候，我就再也不会说我要漂亮阿姨当妈妈的话了，我现在想想也许就是那时，就是因为发现妈妈越来越胖，辛苦操劳后年轻也渐渐不在我才有了这个想法吧，说实话上小学期间我一直认为自己长大能够成为一个科学家，能够造出那长生不老的药让爸妈吃下，这样我就再也不会需要一个漂亮阿姨当妈妈了。我那时希望快快长大，长大了以后我就能做科学家了。</p>
+<p>上了初中高中以后，也许是进了大城市，也许是长大了，我知道了原来的梦想可能有些遥远，学业的压力让我有些透不过气，从海岛到城市，落后了3年的时间，我通过补习班慢慢追赶，终于能够追到了班级还算靠前的位置，那个时候我的梦想很小，也很简单，那就是考个好大学找个好工作，让爸爸妈妈早点不用那么操劳，早点享福。</p>
+<h2 id="18岁的梦想-—-找个好工作，让爸妈早点享福"><a href="#18岁的梦想-—-找个好工作，让爸妈早点享福" class="headerlink" title="18岁的梦想 — 找个好工作，让爸妈早点享福"></a>18岁的梦想 — 找个好工作，让爸妈早点享福</h2><p>努力的学习，懵懂的感情，初中4年+高中3年的生活，最终我并没能特别出色的考上985/211大学，而是上了离家只有1小时车程的大外，学了计算机加日语英语，学费不便宜，每年16000，说实话没自己工作的时候不知道这16000对于一个下岗自己在家开小卖店的父母是多大的负担，工作后我才终于知道这笔钱有多少。好在原来在爸爸单位的时候接触电脑还算比较早，而我对这个新鲜玩意也算是感兴趣，大学学业上并没给我带来太大的压力，但是我也确实不是个聪明的孩子，日语仅仅过了N2，而英语则一直只是CET-4，现在回想起来，原来应该多努努力，也许现在的生活就会更好了，多想回到过去跟自己说，你要努力啊！一晃4年的大学生活就结束了，这时我终于离开了父母身边，只身去往了大城市北京，开启了我的工作生涯。</p>
+<h2 id="20岁的人生-—-多挣钱，快速成长"><a href="#20岁的人生-—-多挣钱，快速成长" class="headerlink" title="20岁的人生 — 多挣钱，快速成长"></a>20岁的人生 — 多挣钱，快速成长</h2><p>工作了以后，我就像海绵一样不断的吸收着周围的水分，学习工作中需要的技能，学习如何才能让领导器重，学习如何才能快速积累人生的财富，因为我想着，想着能快快独立反哺我的爸妈。20岁，我跟媳妇儿谈了场异地的恋爱，后来她到北京找我，再后来我们就一起回了大连。北京是个大城市，大的有时候让人迷茫，虽然工作机会比较多，但是租房的压力，环境的恶劣，家里的呼唤，最终让我选择了回到我熟悉的城市，另外找了份工资不高的工作，我不满足，我想能成为顶天立地的男子汉，后来我就来到了现在的公司华宇，而且一待就是5年。</p>
+<h2 id="华宇的职业生涯-—-5年工作，9年经验"><a href="#华宇的职业生涯-—-5年工作，9年经验" class="headerlink" title="华宇的职业生涯 — 5年工作，9年经验"></a>华宇的职业生涯 — 5年工作，9年经验</h2><p>网上有个段子我记得，一个人面试拿出简历，工作时间是2年却写着3年工作经验，面试官问他是不是写错了，他答不是，因为加班加出来的。这算是对前公司的吐槽吧。</p>
+<p>来到大连华宇时，公司还不足120人，我所在的团队还是个交互组，只有三个人，前端的话只有我和另外一个刚毕业的大学生，记得刚来公司的第一年，我参与了140个项目的开发工作，现在想想这个数字有些惊人，但是因为只是些前端切图仔的工作，对我来说感觉难度并不大，不过还是要感谢刚开始这2年，让我的基础非常扎实，再后来公司引入了前后端分离，引入了Vue框架，越来越多的业务要写，数据处理要写，加班成了家常便饭，后面这三年，我几乎没有休过除了元旦和春节的任何法定节假日，每年5天的年假也几乎都没休成，说实话每次加班加到要崩溃时候，我都会想我到底为了啥这么拼命。要不我还是换一家比较轻松一点的工作吧，工资还能涨点。说实话这段时间工作就是生活的全部，每天到家都10点以后，到家老人孩子都睡了，有时候我都睡不着，想着我的生活难道就这样了么，我不甘心，不服输。很多人劝我别那么拼命，别把公司当成自己家的，只是个打工的而已，但是有时候想着下面还有那么多新人信任着我依赖着我，我就没法撒手不管。终于时间到了19年年底，5年来培养的前端团队最后还是没守护住，要拆到各项目团队了，一开始真的难以接受，不过公司领导层已经决定了，作为一线员工只能服从，我希望大家能够把心中的担忧都能消除掉，在新的团队里开启新的篇章，也许会有更好的发展，如果有一天离开了华宇，也要江湖相望，常聚聚。</p>
+<h2 id="2020年31岁踏上新的旅途"><a href="#2020年31岁踏上新的旅途" class="headerlink" title="2020年31岁踏上新的旅途"></a>2020年31岁踏上新的旅途</h2><p>还是感谢小可爱的这个本子，让我能够有主题想想我未来到底想要什么样的生活，说句实在话，我向往不为钱发愁工作的日子，可以在做好自己工作之外的时间里多陪陪家人，带着孩子常出去走走，见见外面的世界，说实话已经31岁了，除了谈恋爱时去找媳妇儿去过江浙苏杭，工作原因去过北京/青海，好像这些年也就去了趟南京，现在的我已经有些不知道什么叫做生活了，我希望自己的空闲时间是可以让兴趣填满的，可以和朋友同事同学多聚聚，但是怕打扰大家我又从来不会主动去约别人，小时候没有听从爸妈的话培养自己的兴趣，现在有些后悔，真的空闲下来都不知道该用什么填满这时间，都是躺在床上刷手机，看电视，我不喜欢这样的生活，但是我不知道该过怎么样的生活。看到那些会做饭的视频，做顿丰盛的饭菜给家人吃，看到他们的幸福笑脸，我想做那样的事；看到带着家人过着一路向前增长见闻的旅途生活，我想也尝试一下那样的人生，我感觉为了钱我被束缚在了工作上，2020年我想过一种不为工作所累，不为钱所累，能够享受生活，陪伴家人的生活，保重身体，每天快快乐乐的，多发现生活中的美好，感恩，努力，成长。期待自己成为更好的人。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>我所期待中的生平，成为一个不被工作强迫，不被金钱所累，爱家顾家，孝敬父母，人缘好朋友多，兴趣广泛，感恩的人。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/21-Day-Challenge-01/">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/21-Day-Challenge-01/" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-prototype/" rel="prev" title="前端常见知识点整理 ---- 原型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 原型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-instanceof/" rel="next" title="前端常见知识点整理 ---- instanceof">
+      前端常见知识点整理 ---- instanceof <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E6%9C%88%E4%BB%BD21%E5%A4%A9%E4%B8%BB%E9%A2%98%E6%8C%91%E6%88%98%E4%B9%8B%E7%81%B5%E6%84%9FInspiration"><span class="nav-number">2.</span> <span class="nav-text">1月份21天主题挑战之灵感Inspiration</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E5%A4%A9-Day-1-%E5%86%99%E4%B8%8B%E8%87%AA%E5%B7%B1%E6%9C%9F%E5%BE%85%E4%B8%AD%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">3.</span> <span class="nav-text">第一天 Day 1 写下自己期待中的生平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E6%97%B6%E5%80%99%E7%9A%84%E6%A2%A6%E6%83%B3-%E6%88%90%E4%B8%BA%E7%A7%91%E5%AD%A6%E5%AE%B6"><span class="nav-number">3.1.</span> <span class="nav-text">小时候的梦想-成为科学家</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18%E5%B2%81%E7%9A%84%E6%A2%A6%E6%83%B3-%E2%80%94-%E6%89%BE%E4%B8%AA%E5%A5%BD%E5%B7%A5%E4%BD%9C%EF%BC%8C%E8%AE%A9%E7%88%B8%E5%A6%88%E6%97%A9%E7%82%B9%E4%BA%AB%E7%A6%8F"><span class="nav-number">3.2.</span> <span class="nav-text">18岁的梦想 — 找个好工作，让爸妈早点享福</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20%E5%B2%81%E7%9A%84%E4%BA%BA%E7%94%9F-%E2%80%94-%E5%A4%9A%E6%8C%A3%E9%92%B1%EF%BC%8C%E5%BF%AB%E9%80%9F%E6%88%90%E9%95%BF"><span class="nav-number">3.3.</span> <span class="nav-text">20岁的人生 — 多挣钱，快速成长</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%8E%E5%AE%87%E7%9A%84%E8%81%8C%E4%B8%9A%E7%94%9F%E6%B6%AF-%E2%80%94-5%E5%B9%B4%E5%B7%A5%E4%BD%9C%EF%BC%8C9%E5%B9%B4%E7%BB%8F%E9%AA%8C"><span class="nav-number">3.4.</span> <span class="nav-text">华宇的职业生涯 — 5年工作，9年经验</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2020%E5%B9%B431%E5%B2%81%E8%B8%8F%E4%B8%8A%E6%96%B0%E7%9A%84%E6%97%85%E9%80%94"><span class="nav-number">3.5.</span> <span class="nav-text">2020年31岁踏上新的旅途</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">4.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/21-Day-Challenge-01/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/21-Day-Challenge-01/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/21-Day-Challenge-01/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '01aedc386079562e7ddd3ef74dc2b134',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-Closure/index.html b/2020/01/02/FE-guide-Closure/index.html
new file mode 100644
index 0000000000..e44bc58382
--- /dev/null
+++ b/2020/01/02/FE-guide-Closure/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 闭包">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T13:32:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.367Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 闭包 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 闭包
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-Closure/">前端常见知识点整理 ---- 闭包</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:32</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-Closure/" title="前端常见知识点整理 ---- 闭包">https://blog.lifesli.com/2020/01/02/FE-guide-Closure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="prev" title="前端常见知识点整理 ---- 执行上下文">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 执行上下文
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-new/" rel="next" title="前端常见知识点整理 ---- new">
+      前端常见知识点整理 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%97%AD%E5%8C%85Closure"><span class="nav-number">1.</span> <span class="nav-text">闭包Closure</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-Closure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-Closure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-Closure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '49ac98bf50abf1162508a916de8c165f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-dataType/index.html b/2020/01/02/FE-guide-dataType/index.html
new file mode 100644
index 0000000000..0f221ee79b
--- /dev/null
+++ b/2020/01/02/FE-guide-dataType/index.html
@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T08:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.387Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+<a id="more"></a>
+
+<h1 id="JS知识点"><a href="#JS知识点" class="headerlink" title="JS知识点"></a>JS知识点</h1><blockquote>
+<p>当前市场中，如何区分一个好一点的前端开发和一般的前端开发，主要看的就是js能力的差距，好的前端开发，JS玩的转，不仅仅是框架玩的好，还要JS的基础扎实，只有基础与新技术都玩的6的前端开发才是好前端。</p>
+</blockquote>
+<p>上面这句话不是什么名人或者某位知名前端大拿说的，这是我在公司这几年面试招聘的过程中真真切切总结感受的。<br>所以可以说得JS者得高级前端，所以下面也主要是写JS的相关知识点。</p>
+<h2 id="JavaScript内置数据类型-—-数据类型"><a href="#JavaScript内置数据类型-—-数据类型" class="headerlink" title="JavaScript内置数据类型 — 数据类型"></a>JavaScript内置数据类型 — 数据类型</h2><p>无论学什么语言最重要最基础的就是数据类型，《JavaScript权威指南》这本书中详细的介绍了JS中的数据类型，下面总结一下。</p>
+<p>JavaScript中数据类型分为两大类共七种内置数据类型，其一是6种<strong><em><code>基本类型</code></em></strong>，其二是1种<strong><em><code>引用类型</code></em></strong>，我发现在面试过程中好多面试者都不会先说有两大类，而是会直接蹦出数字类型、字符串类型。。。对象、数组也会被并排放在一起，这其实不是个掌握知识点的好方法，应该先把数据类型分成上面说的<strong><em><code>基本类型</code></em></strong>、<strong><em><code>引用类型</code></em></strong>这样两个大类之后，再看看这两大类中有什么其他的子类型，在记忆其他子类型之前我觉得应该先了解一下什么是<strong><em><code>基本类型</code></em></strong>和<strong><em><code>引用类型</code></em></strong>，实际上基本类型和引用类型的主要区别是存储的区别，基本类型在栈中，而引用类型的话，引用数据的地址存储在栈中，而对象本身是存储在堆中，引用的数据地址是个16进制的数据值，它就像一把钥匙让你能够找到宝藏在什么地方。这就是基本数据类型和引用类型的区别了。</p>
+<p>那么如何记住有哪些基本数据类型和引用数据类型呢，实际上只要记住了6个基本数据类型，其他的都是引用数据类型，而所有的引用数据类型的祖宗都是Object，所以引用数据类型实际上只有Object一个，那么像是Array等其他子类型，都是Object的孩子，不跟Object在一个级别上。</p>
+<p>基本数据类型有哪些呢？其实挺好记的，数字，字符串，这两个一个像温柔的文学少女（string），一个像有点精于算计的男生（number），还有一个布尔类型（boolen）他像是班级里正义感爆棚的人，只论对错；另外还有个差生，没头脑似的未定义（Undefined）还有一个失了忆记不起来自己是谁的空（Null），最后还有一个新加入的插班生，总是带着口罩的标志符号（Symbol），这些人构成了这个班级的所有学生，也就是全部的基本类型，那么引用类型的对象Object呢就像及了漂亮爱化妆的班主任老师，有好多副面孔。不知道大家有没有看过一个动漫叫做《黑塔利亚》，他就是把国家都拟人化了，有了各自的性格，我很喜欢看，我觉得这些数据类型也各有各的特点，像这些国家一样，好了脑洞有点挖深了，有人会说我不就是这么几个简单的数据类型嘛，硬记下来不就好了，但是知识总有你硬记不下来的时候，最好的方法也是速记领域最为常用的方法，就是把你不熟悉的知识与你感兴趣的画面或者既往的知识串联起来，这样就能达到很好的记忆，如果你不喜欢动漫（怎么会有不喜欢动漫的人！！！），可以试试用其他的方法记，当然你如果硬要死记硬背那我也没办法，我继续开我的脑洞。<br>如果你是学过Java开发的同学（如果是计算机专业出来的，应该都或多或少学过，非计算机专业的我也不知道说啥了。。），数字在Java中是分成 byte/short/int/long 的，但是在Js中没有那么多，就一个Number，它是浮点类型，基于 IEEE 754标准实现，刚才我不是说了Number是个精于算计的男生，精于算计就是说他分毫不差，这样浮点型就很好的记了下来，这个754的标准可以不记，如果非要记的话，你可以记成他是自称IEEE 754团体的成员。最后Number身后还跟着一个小弟，叫做NaN，他虽然是Number的小弟，但他总是说话不算数，自己说过什么都不承认。所以NaN!=NaN。<br>老师是个爱化妆的老师，而这些学生也不是普通的学生，在学校他们是老老实实的基本类型，放了学之后一打扮，他们就各有了其他的能力，这个过程叫做装箱，具体的后面再说。（好了快回到现实吧你！）</p>
+<p>如果基础数据是字面量类型，那么他们就像是在上课的学生，只是学生而已，而当他们调用方法时，他们就成了下课后各种技能都有的新新人类，这个过程有时候是显示的，就像是有些学生喜欢大声嚷嚷，而更多的是你不自觉中就用到了装箱操作，是Js引擎提供的能力，就像是有些闷骚的学生一样。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let aNumber &#x3D; 111 &#x2F;&#x2F; 这只是字面量，不是 number 类型</span><br><span class="line">aNumber.toString() &#x2F;&#x2F; 装箱操作自动转化成数字对象，使用时候才会转换为对象类型</span><br></pre></td></tr></table></figure>
+<p>对象有个深浅拷贝的知识点必须要会，对象因为是引用数据类型，在栈中存储的是地址，当用另一个变量接收了之前的变量，那么就好像把钥匙复制了一把，两把钥匙开的还是同一个门，而深拷贝呢就像是照着原来的样板间又造了一个一模一样的房间，这两个房间长得一样，但就是两个房间，钥匙自然也是不一样的，所以呢，当往房间里搬家具的时候，浅拷贝搬进去的是一个房间，所以两把钥匙打开之后看到的都是多了家具，而深拷贝的话，我只是往样板间搬了家具，所以照着装修的房间里是不可能有的，这就是浅拷贝原数据会受影响，而深拷贝不会。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let a &#x3D; &#123; name: &#39;FE&#39; &#125;</span><br><span class="line">let b &#x3D; a</span><br><span class="line">b.name &#x3D; &#39;EF&#39;</span><br><span class="line">console.log(a.name) &#x2F;&#x2F; EF 浅拷贝原数据会受影响</span><br></pre></td></tr></table></figure>
+<h2 id="内置数据类型检测-Typeof-—-类型判断"><a href="#内置数据类型检测-Typeof-—-类型判断" class="headerlink" title="内置数据类型检测 Typeof — 类型判断"></a>内置数据类型检测 Typeof — 类型判断</h2><blockquote>
+<p>typeof 对于基本类型，除了 null 都可以显示正确的类型</p>
+</blockquote>
+<p>typeof 就像是学校的教导主任一样，他有着一双火眼金睛，不管是哪个同学，穿了什么样的衣服，他一问就能问出来这个学生是谁，大家都怕他，但是Null因为失忆了，他也不知道教导主任是谁，所以typeof就拿他也没办法，因为他不怕教导主任，教导主任甚至会以为他是老师呢。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof 1 &#x2F;&#x2F; &#39;number&#39;</span><br><span class="line">typeof &#39;1&#39; &#x2F;&#x2F; &#39;string&#39;</span><br><span class="line">typeof undefined &#x2F;&#x2F; &#39;undefined&#39;</span><br><span class="line">typeof true &#x2F;&#x2F; &#39;boolean&#39;</span><br><span class="line">typeof Symbol() &#x2F;&#x2F; &#39;symbol&#39;</span><br><span class="line">typeof b &#x2F;&#x2F; b 没有声明，但是还会显示 undefined</span><br><span class="line"></span><br><span class="line">typeof null &#x2F;&#x2F; &#39;object&#39; 这是JS中的bug</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>typeof 对于对象，除了函数都会显示 object</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof [] &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof &#123;&#125; &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof console.log &#x2F;&#x2F; &#39;function&#39;</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>知识扩展：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。</p>
+</blockquote>
+<p><strong><em>如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。</em></strong></p>
+<blockquote>
+<p>小知识扩展</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let a</span><br><span class="line">&#x2F;&#x2F; 我们也可以这样判断 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; undefined</span><br><span class="line">&#x2F;&#x2F; 但是 undefined 不是保留字，能够在低版本浏览器被赋值</span><br><span class="line">let undefined &#x3D; 1</span><br><span class="line">&#x2F;&#x2F; 这样判断就会出错</span><br><span class="line">&#x2F;&#x2F; 所以可以用下面的方式来判断，并且代码量更少</span><br><span class="line">&#x2F;&#x2F; 因为 void 后面随便跟上一个组成表达式</span><br><span class="line">&#x2F;&#x2F; 返回就是 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; void 0</span><br></pre></td></tr></table></figure>
+
+<h2 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h2><h3 id="转Boolean"><a href="#转Boolean" class="headerlink" title="转Boolean"></a>转Boolean</h3><p>一句话可以概括</p>
+<blockquote>
+<p>在条件判断时，除了 <code>undefined</code>， <code>null</code>， <code>false</code>， <code>NaN</code>， <code>&#39;&#39;</code>， <code>0</code>， <code>-0</code>，其他所有值都转为 true，包括所有对象。</p>
+</blockquote>
+<p>从上面这段话可以看出来，<code>undefined</code>、<code>null</code> 是基本类型之二，而<code>false</code>是布尔类型的假值，<code>NaN</code>是数字类型的无效值，<code>&#39;&#39;</code>是字符串类型的空值，而<code>0</code>， <code>-0</code>都是数字类型的零值，可以看到，除了<code>0</code>、<code>-0</code>有些特殊，除了插班生<code>Symbol</code>，剩下的都是基本类型的假值，由此实际上就很好记了，有时候数字这个容易忘，但是记住“非0既真”这句话就好了。</p>
+<h3 id="对象转基本类型"><a href="#对象转基本类型" class="headerlink" title="对象转基本类型"></a>对象转基本类型</h3><p>对象在转换基本类型时，首先是先会调用ToPrimitive（原始类型），如果有hint参数调用对应的的类型方法，如果没有那默认先会调用 valueOf 然后调用 toString。如果返回了基本类型，结束。如果都没返回，那么Error<strong><em>但是注意这两个方法你是可以重写的。</em></strong></p>
+<blockquote>
+<p>Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。（来自MDN的解释）<br>需要解释的关键机制是ToPrimitive函数。该函数是将任意值转换为相应的基本类型值。如果输入的就是一个基本类型值，那么将不做修改，被直接返回。如果值是非基本类型值，它将调用内部方法 [[DefaultValue]] 为对象找到一个默认值。<br>[[DefaultValue]]是每一个对象的内部属性。该方法需要一个可选的参数hint，值是Number或String。如果没有提供hint，则默认为Number(除非该对象是Date，在这种情况下默认为String)。然后将调用toString和valueOf去寻找基本类型值。在这里hint就起到作用了。如果hint参数值为Number，valueOf将先被调用，如果hint是String的话，则toString被先调用。<br>[[DefaultValue]] 返回的值一定是基本类型值。如果不是，一个TypeError 将会被抛出。这就意味着为了在这种情况下有意义，toString和valueOf应该返回基本类型值。</p>
+</blockquote>
+<h3 id="四则运算符"><a href="#四则运算符" class="headerlink" title="四则运算符"></a>四则运算符</h3><blockquote>
+<p>只有当<strong><em>加法</em></strong>运算时，其中一方是<strong><em>字符串类型</em></strong>，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。<strong><em>并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。</em></strong></p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">1 + &#39;1&#39; &#x2F;&#x2F; &#39;11&#39; 这里会是面试陷阱</span><br><span class="line">2 * &#39;2&#39; &#x2F;&#x2F; 4 </span><br><span class="line">[1, 2] + [2, 1] &#x2F;&#x2F; &#39;1,22,1&#39;</span><br><span class="line">&#x2F;&#x2F; [1, 2].toString() -&gt; &#39;1,2&#39;</span><br><span class="line">&#x2F;&#x2F; [2, 1].toString() -&gt; &#39;2,1&#39;</span><br><span class="line">&#x2F;&#x2F; &#39;1,2&#39; + &#39;2,1&#39; &#x3D; &#39;1,22,1&#39;</span><br></pre></td></tr></table></figure>
+<p><strong>*面试陷阱题之 ++ *</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 问表达式 &#39;a&#39; + + &#39;b&#39; 返回结果是什么？</span><br><span class="line">&#x2F;&#x2F; 答案是 &#39;aNaN&#39;</span><br><span class="line">&#39;a&#39; + + &#39;b&#39; -&gt; &#x2F;&#x2F; 一元运算符优先级高</span><br><span class="line">&#39;a&#39; + (+ &#39;b&#39;) -&gt; &#x2F;&#x2F; +&#39;b&#39;转数字类型，非有效结果是NaN</span><br><span class="line">&#39;a&#39; + NaN.toString() -&gt; &#x2F;&#x2F; NaN调用toString（）成字符串&#39;NaN&#39;</span><br><span class="line">&#39;aNaN&#39; &#x2F;&#x2F; 字符串接到一起后&#39;aNaN&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 类似题 &#39;1&#39; + + &#39;4&#39; 返回结果是什么 </span><br><span class="line">&#x2F;&#x2F; 其实就是&#39;4&#39; -&gt; 4 -&gt; &#39;4&#39; 最后还是&#39;14&#39;</span><br></pre></td></tr></table></figure>
+
+<h2 id="操作符-—-类型比较"><a href="#操作符-—-类型比较" class="headerlink" title="== 操作符 — 类型比较"></a>== 操作符 — 类型比较</h2><blockquote>
+<p>相等运算符的运算规则如下：<br>1、如果两个值类型相同，进行 === 比较。(这个非常好理解，就不多说了)<br>（1）数字比大小<br>（2）字符串就通过 unicode 字符索引来比较<br>2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：<br>（1）如果一个是null、一个是undefined，那么[相等]。 // 这个有点特殊需要单独记<br>（2）如果任一值是字符串，另一个值是数值，在比较相等性之前先将字符串转换为数值；即是调用Number()函数。<br>（3）如果任一值时布尔值，则在比较相等性之前先将其转换为数值，即是调用Number()函数。<br>（4）如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 （js核心内置类ToPrimitive，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。）</p>
+</blockquote>
+<p>1不说，2（1）的话单独记，其他基本类型转数字比较，引用性数据类型调用ToPrimitive转换成基本数据类型</p>
+<p>首先还是一道面试题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; [] &#x3D;&#x3D; ![] 结果是什么</span><br><span class="line">[] &#x3D;&#x3D; ![] &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>
+<p>为什么呢？我们来解析一下，</p>
+<ol>
+<li>首先我们看一下右侧，<code>![]</code>肯定是要先转换成boolen类型了吧，那么<code>[]</code>的布尔类型是什么呢，上面转换布尔的时候我们说过，除了那五个基本类型的假值以及正负0之外，都是真值，所以<code>[]</code> -&gt; <code>true</code> <code>![]</code> -&gt; <code>false</code></li>
+<li><code>ToPrimitive(false)</code>-&gt;<code>0</code>右边的值得出了数值类型的原始值</li>
+<li>看左边<code>ToPrimitive([])</code>-&gt;<code>[]</code>.toString()-&gt;<code>&#39;&#39;</code></li>
+<li><code>Number(&#39;&#39;)</code>-&gt;<code>0</code></li>
+<li>比较左右 <code>0 == 0</code> -&gt; <code>true</code></li>
+</ol>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>到这里JS的内置数据类型及类型的转换和比较就讲完了，相信大家看过以后一定会记得住的<br>PS：突然好像学画漫画，《JS数据结构们》，一定大火，哈哈哈😂</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-dataType/">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 08:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-dataType/" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">https://blog.lifesli.com/2020/01/02/FE-guide-dataType/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/01/Hello-2020/" rel="prev" title="你好2020">
+      <i class="fa fa-chevron-left"></i> 你好2020
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-prototype/" rel="next" title="前端常见知识点整理 ---- 原型">
+      前端常见知识点整理 ---- 原型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JS%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-number">2.</span> <span class="nav-text">JS知识点</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B-%E2%80%94-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.1.</span> <span class="nav-text">JavaScript内置数据类型 — 数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B-Typeof-%E2%80%94-%E7%B1%BB%E5%9E%8B%E5%88%A4%E6%96%AD"><span class="nav-number">2.2.</span> <span class="nav-text">内置数据类型检测 Typeof — 类型判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.</span> <span class="nav-text">类型转换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%ACBoolean"><span class="nav-number">2.3.1.</span> <span class="nav-text">转Boolean</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E8%BD%AC%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.2.</span> <span class="nav-text">对象转基本类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%9B%E5%88%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">2.3.3.</span> <span class="nav-text">四则运算符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6-%E2%80%94-%E7%B1%BB%E5%9E%8B%E6%AF%94%E8%BE%83"><span class="nav-number">2.4.</span> <span class="nav-text">&#x3D;&#x3D; 操作符 — 类型比较</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-dataType/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-dataType/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-dataType/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '404c0a66c038fe21b9549c25332379a3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-instanceof/index.html b/2020/01/02/FE-guide-instanceof/index.html
new file mode 100644
index 0000000000..8838a54244
--- /dev/null
+++ b/2020/01/02/FE-guide-instanceof/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- instanceof">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T12:29:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.397Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- instanceof | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- instanceof
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-instanceof/">前端常见知识点整理 ---- instanceof</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:29</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-instanceof/" title="前端常见知识点整理 ---- instanceof">https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/21-Day-Challenge-01/" rel="prev" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      <i class="fa fa-chevron-left"></i> 2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-this/" rel="next" title="前端常见知识点整理 ---- this">
+      前端常见知识点整理 ---- this <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#instanceof"><span class="nav-number">1.</span> <span class="nav-text">instanceof</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-instanceof/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-instanceof/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-instanceof/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fec930f3053d56d7cee8d139470f868d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-new/index.html b/2020/01/02/FE-guide-new/index.html
new file mode 100644
index 0000000000..d18bf6a95b
--- /dev/null
+++ b/2020/01/02/FE-guide-new/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T20:07:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-new/">前端常见知识点整理 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 20:07</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-new/" title="前端常见知识点整理 ---- new">https://blog.lifesli.com/2020/01/02/FE-guide-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-Closure/" rel="prev" title="前端常见知识点整理 ---- 闭包">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 闭包
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-copy/" rel="next" title="前端常见知识点整理 ---- 深浅拷贝">
+      前端常见知识点整理 ---- 深浅拷贝 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#new-%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">1.</span> <span class="nav-text">new 一个对象的过程</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1717dd93de3719cf6ec7ab349a764478',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-prototype/index.html b/2020/01/02/FE-guide-prototype/index.html
new file mode 100644
index 0000000000..c0b22e0295
--- /dev/null
+++ b/2020/01/02/FE-guide-prototype/index.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 原型">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg">
+<meta property="article:published_time" content="2020-01-02T11:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.402Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 原型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 原型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+<a id="more"></a>
+<p><img src="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg" alt="总结"></p>
+<h1 id="prototype-原型对象"><a href="#prototype-原型对象" class="headerlink" title="prototype 原型对象"></a><code>prototype</code> 原型对象</h1><h2 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a>什么是原型？</h2><p>每个函数都具有 <code>prototype</code> 属性，它被默认成一个对象，即原型对象<br>首先来介绍下 <code>prototype</code> 属性。这是一个<code>显式</code>原型属性，只有<code>函数</code>才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let fun &#x3D; Function.prototype.bind()</span><br></pre></td></tr></table></figure>
+<p>如果你以上述方法创建一个函数，那么可以发现这个函数是不具有 prototype 属性的。</p>
+<h2 id="prototype-如何产生的"><a href="#prototype-如何产生的" class="headerlink" title="prototype 如何产生的"></a><code>prototype</code> 如何产生的</h2><p>当我们声明一个函数时，这个属性就被自动创建了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
+<p>并且这个属性的值是一个对象（也就是<code>原型</code>），只有一个属性 <code>constructor</code><br><code>constructor</code> 对应着构造函数，也就是 <code>Foo</code>。</p>
+<h2 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a>什么是原型链？</h2><p>当对象使用属性时，先在自身找，有就直接用，没有就沿着<strong>proto</strong>这条链往上找，直到 Object 原型的位置，有就返回相应的值，没有就返回 underfined。</p>
+<h2 id="constructor-构造函数"><a href="#constructor-构造函数" class="headerlink" title="constructor 构造函数"></a><code>constructor</code> 构造函数</h2><h3 id="什么是构造函数？"><a href="#什么是构造函数？" class="headerlink" title="什么是构造函数？"></a>什么是构造函数？</h3><p>任何一个函数，只要被 new 操作符使用，就可以是一个构造函数（构造函数建议以大写开头）<br>另外，在 JavaScript 的内置对象中，所有的函数对象都是 Function 构造函数的实例，比如：Object、Array等</p>
+<p><code>constructor</code> 是一个公有且不可枚举的属性。一旦我们改变了函数的 <code>prototype</code> ，那么新对象就没有这个属性了（当然可以通过原型链取到 <code>constructor</code>）。</p>
+<p>那么你肯定也有一个疑问，这个属性到底有什么用呢？其实这个属性可以说是一个历史遗留问题，在大部分情况下是没用的，在我的理解里，我认为他有两个作用：</p>
+<ol>
+<li>让实例对象知道是什么函数构造了它</li>
+<li>如果想给某些类库中的构造函数增加一些自定义的方法，就可以通过 <code>xx.constructor.method</code> 来扩展</li>
+</ol>
+<h2 id="proto"><a href="#proto" class="headerlink" title="_proto_"></a><code>_proto_</code></h2><p>这是每个对象都有的<code>隐式原型属性</code>，指向了创建该对象的<code>构造函数</code>的原型。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。</p>
+<p>因为在 JS 中是没有类的概念的，为了实现类似继承的方式，通过 <code>_proto_</code> 将对象和原型联系起来组成原型链，得以让对象可以访问到不属于自己的属性。</p>
+<h3 id="实例对象的-proto-如何产生的"><a href="#实例对象的-proto-如何产生的" class="headerlink" title="实例对象的 _proto_ 如何产生的"></a>实例对象的 <code>_proto_</code> 如何产生的</h3><p>从上图可知，当我们使用 <code>new</code> 操作符时，生成的实例对象拥有了 <code>_proto_</code> 属性。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 这个函数是 Function 的实例对象</span></span><br><span class="line"><span class="comment">// function 就是一个语法糖</span></span><br><span class="line"><span class="comment">// 内部调用了 new Function(...)</span></span><br></pre></td></tr></table></figure>
+<p>所以可以说，在 <code>new</code> 的过程中，新对象被添加了 <code>_proto_</code> 并且链接到构造函数的原型上。</p>
+<h3 id="new-的过程"><a href="#new-的过程" class="headerlink" title="new 的过程"></a><code>new</code> 的过程</h3><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"> name </span>)</span>&#123; </span><br><span class="line"> <span class="keyword">this</span>.name = name; </span><br><span class="line">&#125;; </span><br><span class="line">Person.prototype.getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.name; </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">let</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>() <span class="comment">// 从 Object.prototype 上克隆一个空的对象</span></span><br><span class="line">	<span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>) <span class="comment">// 获取外部传入的构造器，此例是 Person </span></span><br><span class="line">	obj.__proto__ = Con.prototype	<span class="comment">// 指向正确的原型,链接到原型</span></span><br><span class="line">	<span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>) <span class="comment">// 绑定 this，执行构造函数，借用外部传入的构造器给 obj 设置属性</span></span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">typeof</span> result === <span class="string">'object'</span> ? result : obj <span class="comment">// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">create(Person,<span class="string">'lixg'</span>)</span><br></pre></td></tr></table></figure>
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = { b : 1 }</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code> ，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// function 就是个语法糖,内部等同于 new Function()</span></span><br><span class="line"><span class="keyword">let</span> a = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125; <span class="comment">// 这个字面量内部也是使用了 new Object()</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="Function-proto-Function-prototype"><a href="#Function-proto-Function-prototype" class="headerlink" title="Function.proto === Function.prototype"></a>Function.<strong>proto</strong> === Function.prototype</h2><p>对于对象来说，<code>xx.__proto__.contrcutor</code> 是该对象的构造函数，但是在图中我们可以发现 <code>Function.__proto__</code> === <code>Function.prototype</code>，难道这代表着 <code>Function</code> 自己产生了自己?</p>
+<p>答案肯定是否认的，要说明这个问题我们先从 <code>Object</code> 说起。</p>
+<p>从图中我们可以发现，所有对象都可以通过原型链最终找到 <code>Object.prototype</code> ，虽然 <code>Object.prototype</code> 也是一个对象，但是这个对象却不是 <code>Object</code> 创造的，而是引擎自己创建了 <code>Object.prototype</code> 。所以可以这样说，所有实例都是对象，但是对象不一定都是实例。</p>
+<p>接下来我们来看 <code>Function.prototype</code> 这个特殊的对象，如果你在浏览器将这个对象打印出来，会发现这个对象其实是一个函数。</p>
+<p>我们知道函数都是通过 <code>new Function()</code> 生成的，难道 <code>Function.prototype</code> 也是通过 <code>new Function()</code> 产生的吗？答案也是否定的，这个函数也是引擎自己创建的。首先引擎创建了 <code>Object.prototype</code> ，然后创建了 <code>Function.prototype</code> ，并且通过 <code>__proto__</code> 将两者联系了起来。这里也很好的解释了上面的一个问题，为什么 <code>let fun = Function.prototype.bind()</code> 没有 prototype 属性。因为 <code>Function.prototype</code> 是引擎创建出来的对象，引擎认为不需要给这个对象添加 <code>prototype</code> 属性。</p>
+<p><strong><em>所以我们又可以得出一个结论，不是所有函数都是 <code>new Function()</code> 产生的。</em></strong><br>有了 <code>Function.prototype</code> 以后才有了 <code>function Function()</code> ，然后其他的构造函数都是 <code>function Function()</code> 生成的。</p>
+<p>现在可以来解释 <code>Function.__proto__ === Function.prototype</code> 这个问题了。因为先有的 <code>Function.prototype</code> 以后才有的 <code>function Function()</code> ，所以也就不存在鸡生蛋蛋生鸡的悖论问题了。对于为什么 <code>Function.__proto__</code> 会等于 <code>Function.prototype</code> ，个人的理解是：其他所有的构造函数都可以通过原型链找到 <code>Function.prototype</code> ，并且 <code>function Function()</code> 本质也是一个函数，为了不产生混乱就将 <code>function Function()</code> 的 <code>__proto__</code> 联系到了 <code>Function.prototype</code> 上。</p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li><code>Object</code> 是所有对象的爸爸，所有对象都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function</code> 是所有函数的爸爸，所有函数都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function.prototype</code> 和 <code>Object.prototype</code> 是两个特殊的对象，他们由引擎来创建</li>
+<li>除了以上两个特殊对象，其他对象都是通过构造器 <code>new</code> 出来的</li>
+<li>函数的 <code>prototype</code> 是一个对象，也就是原型</li>
+<li>对象的 <code>__proto__</code> 指向原型， <code>__proto__</code> 将对象和原型连接起来组成了原型链<br><img src="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png" alt="总结"></li>
+</ul>
+<h2 id="归纳"><a href="#归纳" class="headerlink" title="归纳"></a>归纳</h2><p><code>ES</code> 把对象定义为：“无序属性的集合，其属性可以包含基本值，对象和函数”。<br>严格来讲，这就相当于说对象是一组没有特定顺序的值。ES 中的构造函数可以用来创建特定类型的对象，用来在创建对象时初始化对象。它的特点是，一般为大写字母开头，使用 <code>new</code> 操作符来实例化对象，比如：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br><span class="line">person.name = <span class="string">"Kevin"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(person.name); <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
+
+<p><code>Person</code> 就是构造函数， <code>person</code> 就是对象。对于对象而言，每个 <code>JS</code> 对象一定对应一个原型对象，并从原型对象继承属性和方法。对象 <code>__proto__</code> 属性的值就是它所对应的原型对象。对象的 <code>__proto__</code> 指向自己构造函数的 <code>prototype</code> 。所以对象的原型链就是 <code>obj.__proto__.proto__....</code> 。对于函数而言，只有函数才有 <code>prototype</code> 属性， <code>Person.prototype</code>  是一个对象，并且有两个属性， 一个是 <code>constructor</code> 指向其构造函数 <code>Person</code> ， 一个是 <code>__proto__</code>  属性：是一个对象，指向上一层的原型。原型链的尽头是 <code>Object.prototype</code> 。所有对象均从 <code>Object.prototype</code> 继承属性。<code>Function.prototype</code> 和 <code>Function.__proto__</code> 为同一对象。<code>Object/Array/String</code> 等等构造函数本质上和 <code>Function</code> 一样，均继承于 <code>Function.prototype</code> 。<code>Function.prototype</code> 直接继承 <code>Object.prototype</code> 。这里的 <code>Object</code> 和 <code>Function</code> 有点鸡和蛋的问题，总结：先有 <code>Object.prototype</code>（原型链顶端），<code>Function.prototype</code> 继承 <code>Object.prototype</code> 而产生，最后，<code>Function</code> 和 <code>Object</code> 和其它构造函数继承 <code>Function.prototype</code> 而产生。属性查找时，先在对象自己上找，找不到才会一步步根据原型链往上找。<br><img src="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg" alt="继承"></p>
+<h2 id="关联阅读"><a href="#关联阅读" class="headerlink" title="关联阅读"></a>关联阅读</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain</a><br><a href="https://zhuanlan.zhihu.com/p/35790971" target="_blank" rel="noopener">说说原型（prototype）、原型链和原型继承</a></p>
+<h2 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h2><p><a target="_blank" rel="noopener" href="https://lixuguang.github.io/2020/01/13/FE-guide-inherit2/">继承</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-prototype/">前端常见知识点整理 ---- 原型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 11:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-prototype/" title="前端常见知识点整理 ---- 原型">https://blog.lifesli.com/2020/01/02/FE-guide-prototype/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-dataType/" rel="prev" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/21-Day-Challenge-01/" rel="next" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B"><span class="nav-number">1.</span> <span class="nav-text">原型</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#prototype-%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.</span> <span class="nav-text">prototype 原型对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%EF%BC%9F"><span class="nav-number">2.1.</span> <span class="nav-text">什么是原型？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#prototype-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.2.</span> <span class="nav-text">prototype 如何产生的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%E9%93%BE%EF%BC%9F"><span class="nav-number">2.3.</span> <span class="nav-text">什么是原型链？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#constructor-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">2.4.</span> <span class="nav-text">constructor 构造函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="nav-number">2.4.1.</span> <span class="nav-text">什么是构造函数？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proto"><span class="nav-number">2.5.</span> <span class="nav-text">_proto_</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B%E5%AF%B9%E8%B1%A1%E7%9A%84-proto-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.5.1.</span> <span class="nav-text">实例对象的 _proto_ 如何产生的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#new-%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.5.2.</span> <span class="nav-text">new 的过程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Function-proto-Function-prototype"><span class="nav-number">2.6.</span> <span class="nav-text">Function.proto &#x3D;&#x3D;&#x3D; Function.prototype</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">2.7.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BD%92%E7%BA%B3"><span class="nav-number">2.8.</span> <span class="nav-text">归纳</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E8%81%94%E9%98%85%E8%AF%BB"><span class="nav-number">2.9.</span> <span class="nav-text">关联阅读</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%E9%98%85%E8%AF%BB"><span class="nav-number">2.10.</span> <span class="nav-text">扩展阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-prototype/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-prototype/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-prototype/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '72fcf3004fd3d95624bdefd313f4aaf1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/02/FE-guide-this/index.html b/2020/01/02/FE-guide-this/index.html
new file mode 100644
index 0000000000..872d724c29
--- /dev/null
+++ b/2020/01/02/FE-guide-this/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- this">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-this/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T12:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.410Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- this | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- this
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-this/">前端常见知识点整理 ---- this</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-this/" title="前端常见知识点整理 ---- this">https://blog.lifesli.com/2020/01/02/FE-guide-this/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-this/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-instanceof/" rel="prev" title="前端常见知识点整理 ---- instanceof">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- instanceof
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="next" title="前端常见知识点整理 ---- 执行上下文">
+      前端常见知识点整理 ---- 执行上下文 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#this"><span class="nav-number">1.</span> <span class="nav-text">this</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-this/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-this/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-this/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8d614a7f8f4f9e3a8fc888cd66dc2ee6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html" "b/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
new file mode 100644
index 0000000000..cb0f2bc0c2
--- /dev/null
+++ "b/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 执行上下文">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-02T13:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.411Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 执行上下文 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 执行上下文
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">前端常见知识点整理 ---- 执行上下文</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" title="前端常见知识点整理 ---- 执行上下文">https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-this/" rel="prev" title="前端常见知识点整理 ---- this">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- this
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-Closure/" rel="next" title="前端常见知识点整理 ---- 闭包">
+      前端常见知识点整理 ---- 闭包 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-number">1.</span> <span class="nav-text">执行上下文</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c9005e58e619fe9d0ca62d8bf5f32c35',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-Generator/index.html b/2020/01/03/FE-guide-Generator/index.html
new file mode 100644
index 0000000000..a48d312243
--- /dev/null
+++ b/2020/01/03/FE-guide-Generator/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Generator 生成器">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.368Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Generator 生成器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Generator 生成器
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-Generator/">前端常见知识点整理 ---- Generator 生成器</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-Generator/" title="前端常见知识点整理 ---- Generator 生成器">https://blog.lifesli.com/2020/01/03/FE-guide-Generator/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Promise/" rel="prev" title="前端常见知识点整理 ---- Promise">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="next" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      前端常见知识点整理 ---- Map、FlatMap 和 Reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Generator-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Generator 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-Generator/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Generator/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Generator/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ac63345bc2f048aad43951997cc48ed9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html b/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
new file mode 100644
index 0000000000..e625ede3d1
--- /dev/null
+++ b/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T03:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.369Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Map、FlatMap 和 Reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Generator/" rel="prev" title="前端常见知识点整理 ---- Generator 生成器">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Generator 生成器
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-async-await/" rel="next" title="前端常见知识点整理 ---- async 和 await">
+      前端常见知识点整理 ---- async 和 await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Map%E3%80%81FlatMap-%E5%92%8C-Reduce"><span class="nav-number">1.</span> <span class="nav-text">Map、FlatMap 和 Reduce</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Map"><span class="nav-number">1.1.</span> <span class="nav-text">Map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#FlatMap"><span class="nav-number">1.2.</span> <span class="nav-text">FlatMap</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Reduce-%E5%8D%87%E5%BA%8F%E6%89%A7%E8%A1%8C"><span class="nav-number">1.3.</span> <span class="nav-text">Reduce 升序执行</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a9fa3e59b9e81835ef969d3b3e77fac8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-Module/index.html b/2020/01/03/FE-guide-Module/index.html
new file mode 100644
index 0000000000..fbb48d7b5c
--- /dev/null
+++ b/2020/01/03/FE-guide-Module/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 模块化">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-Module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T00:41:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.372Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 模块化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 模块化
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-Module/">前端常见知识点整理 ---- 模块化</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:41</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-Module/" title="前端常见知识点整理 ---- 模块化">https://blog.lifesli.com/2020/01/03/FE-guide-Module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-copy/" rel="prev" title="前端常见知识点整理 ---- 深浅拷贝">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 深浅拷贝
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-debounce-throttle/" rel="next" title="前端常见知识点整理 ---- 函数防抖和节流">
+      前端常见知识点整理 ---- 函数防抖和节流 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">1.</span> <span class="nav-text">模块化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CommonJS"><span class="nav-number">1.1.</span> <span class="nav-text">CommonJS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AMD"><span class="nav-number">1.2.</span> <span class="nav-text">AMD</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-Module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2d763a20acf107c1f91fa375a6205ca8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-Promise/index.html b/2020/01/03/FE-guide-Promise/index.html
new file mode 100644
index 0000000000..978d3a404a
--- /dev/null
+++ b/2020/01/03/FE-guide-Promise/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Promise">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T02:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-Promise/">前端常见知识点整理 ---- Promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-Promise/" title="前端常见知识点整理 ---- Promise">https://blog.lifesli.com/2020/01/03/FE-guide-Promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-call-apply-bind/" rel="prev" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- call, apply, bind 区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Generator/" rel="next" title="前端常见知识点整理 ---- Generator 生成器">
+      前端常见知识点整理 ---- Generator 生成器 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Promise-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Promise 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-Promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e14be03f6d58312f14a33cee244dfa11',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-async-Proxy/index.html b/2020/01/03/FE-guide-async-Proxy/index.html
new file mode 100644
index 0000000000..3638f3404f
--- /dev/null
+++ b/2020/01/03/FE-guide-async-Proxy/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Proxy">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T04:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Proxy | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Proxy
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-async-Proxy/">前端常见知识点整理 ---- Proxy</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-async-Proxy/" title="前端常见知识点整理 ---- Proxy">https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-async-await/" rel="prev" title="前端常见知识点整理 ---- async 和 await">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- async 和 await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="next" title="为什么 0.1 + 0.2 != 0.3">
+      为什么 0.1 + 0.2 != 0.3 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-async-Proxy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-Proxy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-Proxy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4304807273946880807b89d027085ec1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-async-await/index.html b/2020/01/03/FE-guide-async-await/index.html
new file mode 100644
index 0000000000..52c226becc
--- /dev/null
+++ b/2020/01/03/FE-guide-async-await/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- async 和 await">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T03:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.378Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- async 和 await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- async 和 await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-async-await/">前端常见知识点整理 ---- async 和 await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-async-await/" title="前端常见知识点整理 ---- async 和 await">https://blog.lifesli.com/2020/01/03/FE-guide-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="prev" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-async-Proxy/" rel="next" title="前端常见知识点整理 ---- Proxy">
+      前端常见知识点整理 ---- Proxy <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#async-%E5%92%8C-await"><span class="nav-number">1.</span> <span class="nav-text">async 和 await</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0f1bd4dadc3df1ab1fedaa6fa4ddfbf9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-call-apply-bind/index.html b/2020/01/03/FE-guide-call-apply-bind/index.html
new file mode 100644
index 0000000000..63c438cbf4
--- /dev/null
+++ b/2020/01/03/FE-guide-call-apply-bind/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- call, apply, bind 区别">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T02:19:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.380Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- call, apply, bind 区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- call, apply, bind 区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-call-apply-bind/">前端常见知识点整理 ---- call, apply, bind 区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:19</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-call-apply-bind/" title="前端常见知识点整理 ---- call, apply, bind 区别">https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-inherit/" rel="prev" title="前端常见知识点整理 ---- 继承">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Promise/" rel="next" title="前端常见知识点整理 ---- Promise">
+      前端常见知识点整理 ---- Promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#call-apply-bind-%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">call, apply, bind 区别</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0-call-%E5%92%8C-apply"><span class="nav-number">1.1.</span> <span class="nav-text">模拟实现 call 和 apply</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1f1fc5fc1b154862c3664ba7a39bc385',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-copy/index.html b/2020/01/03/FE-guide-copy/index.html
new file mode 100644
index 0000000000..0b64d3418c
--- /dev/null
+++ b/2020/01/03/FE-guide-copy/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 深浅拷贝">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-copy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T00:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.382Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 深浅拷贝 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 深浅拷贝
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-copy/">前端常见知识点整理 ---- 深浅拷贝</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-copy/" title="前端常见知识点整理 ---- 深浅拷贝">https://blog.lifesli.com/2020/01/03/FE-guide-copy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-copy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/02/FE-guide-new/" rel="prev" title="前端常见知识点整理 ---- new">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Module/" rel="next" title="前端常见知识点整理 ---- 模块化">
+      前端常见知识点整理 ---- 模块化 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.</span> <span class="nav-text">深浅拷贝</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.1.</span> <span class="nav-text">浅拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.2.</span> <span class="nav-text">深拷贝</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-copy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-copy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-copy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '98ae1472cb134c845ee41e11effc4b1e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-debounce-throttle/index.html b/2020/01/03/FE-guide-debounce-throttle/index.html
new file mode 100644
index 0000000000..498d5e3aa4
--- /dev/null
+++ b/2020/01/03/FE-guide-debounce-throttle/index.html
@@ -0,0 +1,605 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 函数防抖和节流">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T01:04:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.391Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 函数防抖和节流 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 函数防抖和节流
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-debounce-throttle/">前端常见知识点整理 ---- 函数防抖和节流</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:04</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-debounce-throttle/" title="前端常见知识点整理 ---- 函数防抖和节流">https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-Module/" rel="prev" title="前端常见知识点整理 ---- 模块化">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 模块化
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-inherit/" rel="next" title="前端常见知识点整理 ---- 继承">
+      前端常见知识点整理 ---- 继承 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81"><span class="nav-number">1.</span> <span class="nav-text">函数防抖和节流</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%98%B2%E6%8A%96"><span class="nav-number">1.1.</span> <span class="nav-text">防抖</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%82%E6%B5%81"><span class="nav-number">1.2.</span> <span class="nav-text">节流</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd51f3acb805313d62d70682ac76d6df5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-inherit/index.html b/2020/01/03/FE-guide-inherit/index.html
new file mode 100644
index 0000000000..ce49cd9708
--- /dev/null
+++ b/2020/01/03/FE-guide-inherit/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T01:40:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.393Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-inherit/">前端常见知识点整理 ---- 继承</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-inherit/" title="前端常见知识点整理 ---- 继承">https://blog.lifesli.com/2020/01/03/FE-guide-inherit/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-debounce-throttle/" rel="prev" title="前端常见知识点整理 ---- 函数防抖和节流">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 函数防抖和节流
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-call-apply-bind/" rel="next" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      前端常见知识点整理 ---- call, apply, bind 区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%A7%E6%89%BF"><span class="nav-number">1.</span> <span class="nav-text">继承</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-inherit/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-inherit/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-inherit/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '42b557e04e39c46e838fc7b8bc62ad30',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/FE-guide-store/index.html b/2020/01/03/FE-guide-store/index.html
new file mode 100644
index 0000000000..86a400e167
--- /dev/null
+++ b/2020/01/03/FE-guide-store/index.html
@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 浏览器存储">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/FE-guide-store/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T04:37:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.407Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 浏览器存储 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 浏览器存储
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/FE-guide-store/">前端常见知识点整理 ---- 浏览器存储</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:37</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/FE-guide-store/" title="前端常见知识点整理 ---- 浏览器存储">https://blog.lifesli.com/2020/01/03/FE-guide-store/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-store/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="prev" title="为什么 0.1 + 0.2 != 0.3">
+      <i class="fa fa-chevron-left"></i> 为什么 0.1 + 0.2 != 0.3
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/04/Algorithm/" rel="next" title="JavaScript实现经典排序算法">
+      JavaScript实现经典排序算法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#cookie%EF%BC%8ClocalStorage%EF%BC%8CsessionStorage%EF%BC%8CindexDB"><span class="nav-number">1.</span> <span class="nav-text">cookie，localStorage，sessionStorage，indexDB</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Service-Worker"><span class="nav-number">2.</span> <span class="nav-text">Service Worker</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/FE-guide-store/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-store/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-store/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c014e9e0e7c6eaebfb6389179f1ece68',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html b/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
new file mode 100644
index 0000000000..8dadb20975
--- /dev/null
+++ b/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:type" content="article">
+<meta property="og:title" content="为什么 0.1 + 0.2 !&#x3D; 0.3">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-03T04:10:00.000Z">
+<meta property="article:modified_time" content="2020-01-03T04:10:21.361Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>为什么 0.1 + 0.2 != 0.3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          为什么 0.1 + 0.2 != 0.3
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-03 04:10:00 / 修改时间：04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">为什么 0.1 + 0.2 != 0.3</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:10</p>
+      <p><span>最后更新:</span>2020年01月03日 - 04:10</p>
+      <p><span>原始链接:</span><a href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" title="为什么 0.1 + 0.2 != 0.3">https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-async-Proxy/" rel="prev" title="前端常见知识点整理 ---- Proxy">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Proxy
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-store/" rel="next" title="前端常见知识点整理 ---- 浏览器存储">
+      前端常见知识点整理 ---- 浏览器存储 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c5e6885498a7fe81562a89aed31449cc',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/04/Algorithm/index.html b/2020/01/04/Algorithm/index.html
new file mode 100644
index 0000000000..3906bcffdc
--- /dev/null
+++ b/2020/01/04/Algorithm/index.html
@@ -0,0 +1,734 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript实现经典排序算法">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/04/Algorithm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldB5VS.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDWW9.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDfzR.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBK9QH.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBKq1g.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQkPf.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQTSS.png">
+<meta property="article:published_time" content="2020-01-04T07:18:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="排序算法">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>JavaScript实现经典排序算法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript实现经典排序算法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/04/Algorithm/">JavaScript实现经典排序算法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月04日 - 07:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/04/Algorithm/" title="JavaScript实现经典排序算法">https://blog.lifesli.com/2020/01/04/Algorithm/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/04/Algorithm/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" rel="tag"># 排序算法</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/03/FE-guide-store/" rel="prev" title="前端常见知识点整理 ---- 浏览器存储">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 浏览器存储
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-ArrayOprs/" rel="next" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      数组常见操作 ---- 去重、扁平、取最大最小值 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">时间复杂度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A9%BA%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.2.</span> <span class="nav-text">空间复杂度</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%97%E6%B3%95%E6%B1%87%E6%80%BB"><span class="nav-number">2.</span> <span class="nav-text">算法汇总</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%EF%BC%9A"><span class="nav-number">2.1.</span> <span class="nav-text">关于时间复杂度：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%A8%B3%E5%AE%9A%E6%80%A7%EF%BC%9A"><span class="nav-number">2.2.</span> <span class="nav-text">关于稳定性：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="nav-number">2.3.</span> <span class="nav-text">名词解释：</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F%EF%BC%88Bubble-Sort%EF%BC%89-%E2%80%94-%E5%89%8D%E5%90%8E%E4%B8%A4%E4%B8%A4%E6%AF%94%E8%BE%83-%E2%80%94-%E6%B0%94%E6%B3%A1"><span class="nav-number">3.</span> <span class="nav-text">1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">3.1.</span> <span class="nav-text">1. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">3.2.</span> <span class="nav-text">1. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">3.3.</span> <span class="nav-text">1. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">3.4.</span> <span class="nav-text">1. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89-%E2%80%94-%E9%9D%A2%E8%AF%95%E6%8C%91%E7%AE%80%E5%8E%86%EF%BC%8C%E5%9C%A8%E5%89%A9%E4%B8%8B%E7%9A%84%E9%87%8C%E9%9D%A2%E6%8C%91%E6%9C%80%E5%A5%BD%E7%9A%84"><span class="nav-number">4.</span> <span class="nav-text">2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">4.1.</span> <span class="nav-text">2. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">4.2.</span> <span class="nav-text">2. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">4.3.</span> <span class="nav-text">2. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">4.4.</span> <span class="nav-text">2. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%EF%BC%88Insertion-Sort%EF%BC%89%E2%80%94%E2%80%93-%E9%BA%BB%E5%B0%86-%E6%89%91%E5%85%8B"><span class="nav-number">5.</span> <span class="nav-text">3. 插入排序（Insertion Sort）—– 麻将&#x2F;扑克</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">5.1.</span> <span class="nav-text">3. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">5.2.</span> <span class="nav-text">3. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">5.3.</span> <span class="nav-text">3. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">5.4.</span> <span class="nav-text">3. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89"><span class="nav-number">6.</span> <span class="nav-text">4. 快速排序（Selection Sort）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">6.1.</span> <span class="nav-text">4. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">6.2.</span> <span class="nav-text">4. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">6.3.</span> <span class="nav-text">4. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">6.4.</span> <span class="nav-text">4. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F"><span class="nav-number">7.</span> <span class="nav-text">5. 希尔排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">7.1.</span> <span class="nav-text">5. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">7.2.</span> <span class="nav-text">5. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">7.3.</span> <span class="nav-text">5.3 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">8.</span> <span class="nav-text">6. 归并排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">8.1.</span> <span class="nav-text">6. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">8.2.</span> <span class="nav-text">6. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">8.3.</span> <span class="nav-text">6. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">8.4.</span> <span class="nav-text">6. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E5%A0%86%E6%8E%92%E5%BA%8F"><span class="nav-number">9.</span> <span class="nav-text">7. 堆排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">9.1.</span> <span class="nav-text">7. 1 算法原理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">10.</span> <span class="nav-text">7. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">10.1.</span> <span class="nav-text">7. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">10.2.</span> <span class="nav-text">7. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">11.</span> <span class="nav-text">8. 计数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#8-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">11.1.</span> <span class="nav-text">8. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">11.2.</span> <span class="nav-text">8. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">11.3.</span> <span class="nav-text">8. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">11.4.</span> <span class="nav-text">8. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">12.</span> <span class="nav-text">9. 桶排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#9-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">12.1.</span> <span class="nav-text">9. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">12.2.</span> <span class="nav-text">9. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E5%BF%AB"><span class="nav-number">12.2.1.</span> <span class="nav-text">1. 什么时候最快</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E6%85%A2"><span class="nav-number">12.2.2.</span> <span class="nav-text">2. 什么时候最慢</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">12.3.</span> <span class="nav-text">9. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">12.4.</span> <span class="nav-text">9. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">13.</span> <span class="nav-text">10. 基数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#10-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">13.1.</span> <span class="nav-text">10. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">13.2.</span> <span class="nav-text">10. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">13.2.1.</span> <span class="nav-text">1. 基数排序 vs 计数排序 vs 桶排序</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">13.3.</span> <span class="nav-text">10. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">13.4.</span> <span class="nav-text">10. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">14.</span> <span class="nav-text">总结</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">14.1.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/04/Algorithm/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/04/Algorithm/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/04/Algorithm/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b10aa7436f7ec9ee5091b4f2037c516f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/05/FE-guide-ArrayOprs/index.html b/2020/01/05/FE-guide-ArrayOprs/index.html
new file mode 100644
index 0000000000..896aaa4fd8
--- /dev/null
+++ b/2020/01/05/FE-guide-ArrayOprs/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组常见操作 ---- 去重、扁平、取最大最小值">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-05T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T07:47:21.437Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>数组常见操作 ---- 去重、扁平、取最大最小值 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组常见操作 ---- 去重、扁平、取最大最小值
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-05 03:05:00 / 修改时间：07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/05/FE-guide-ArrayOprs/">数组常见操作 ---- 去重、扁平、取最大最小值</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 03:05</p>
+      <p><span>最后更新:</span>2020年01月05日 - 07:47</p>
+      <p><span>原始链接:</span><a href="/2020/01/05/FE-guide-ArrayOprs/" title="数组常见操作 ---- 去重、扁平、取最大最小值">https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/04/Algorithm/" rel="prev" title="JavaScript实现经典排序算法">
+      <i class="fa fa-chevron-left"></i> JavaScript实现经典排序算法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-about-reduce/" rel="next" title="reduce函数的妙用 ---- 实现map和filter">
+      reduce函数的妙用 ---- 实现map和filter <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%BB%E9%87%8D"><span class="nav-number">1.</span> <span class="nav-text">去重</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%88%A9%E7%94%A8-Object-%E7%9A%84-Key-%E5%94%AF%E4%B8%80%E7%89%B9%E6%80%A7"><span class="nav-number">1.1.</span> <span class="nav-text">1. 利用 Object 的 Key 唯一特性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%88%A9%E7%94%A8-indexOf-%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC%E6%95%B0%E5%80%BC%E8%BF%9B%E8%A1%8C%E5%8E%BB%E9%87%8D"><span class="nav-number">1.2.</span> <span class="nav-text">2. 利用 indexOf 的返回值数值进行去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%88%A9%E7%94%A8-Set-%E7%89%B9%E6%80%A7%E5%8E%BB%E9%87%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3. 利用 Set 特性去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E6%8E%92%E5%BA%8F%E5%90%8E%E5%88%A4%E6%96%AD%E5%89%8D%E5%90%8E%E4%B8%A4%E9%A1%B9%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89%E5%8E%BB%E9%87%8D"><span class="nav-number">1.4.</span> <span class="nav-text">4. 排序后判断前后两项是否相等去重</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%81%E5%B9%B3"><span class="nav-number">2.</span> <span class="nav-text">扁平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%99%AE%E9%80%9A%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">1. 普通方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8reduce%E7%AE%80%E5%8C%96%E4%B8%8A%E8%BF%B0%E6%96%B9%E6%B3%95"><span class="nav-number">2.2.</span> <span class="nav-text">2. 使用reduce简化上述方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%80%BC"><span class="nav-number">3.</span> <span class="nav-text">最值</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-reduce"><span class="nav-number">3.1.</span> <span class="nav-text">利用 reduce</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Math-max"><span class="nav-number">3.2.</span> <span class="nav-text">Math.max</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c455ad142efdc4ebc55230b0ccb58f2f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/05/FE-guide-about-reduce/index.html b/2020/01/05/FE-guide-about-reduce/index.html
new file mode 100644
index 0000000000..99e7f4a3bc
--- /dev/null
+++ b/2020/01/05/FE-guide-about-reduce/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:type" content="article">
+<meta property="og:title" content="reduce函数的妙用 ---- 实现map和filter">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-05T08:55:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T08:53:53.962Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>reduce函数的妙用 ---- 实现map和filter | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          reduce函数的妙用 ---- 实现map和filter
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-05 08:55:00 / 修改时间：08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/05/FE-guide-about-reduce/">reduce函数的妙用 ---- 实现map和filter</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 08:55</p>
+      <p><span>最后更新:</span>2020年01月05日 - 08:53</p>
+      <p><span>原始链接:</span><a href="/2020/01/05/FE-guide-about-reduce/" title="reduce函数的妙用 ---- 实现map和filter">https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-ArrayOprs/" rel="prev" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      <i class="fa fa-chevron-left"></i> 数组常见操作 ---- 去重、扁平、取最大最小值
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-currying/" rel="next" title="前端常见知识点整理 ---- 柯里化 currying">
+      前端常见知识点整理 ---- 柯里化 currying <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-map"><span class="nav-number">1.1.</span> <span class="nav-text">1. 使用 reduce 实现 map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-filter"><span class="nav-number">1.2.</span> <span class="nav-text">2. 使用 reduce 实现 filter</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/05/FE-guide-about-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-about-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-about-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8df9f163946f12a335667b4f51bdaea8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/05/FE-guide-currying/index.html b/2020/01/05/FE-guide-currying/index.html
new file mode 100644
index 0000000000..67b1dfe2e8
--- /dev/null
+++ b/2020/01/05/FE-guide-currying/index.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 柯里化 currying">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/05/FE-guide-currying/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-05T09:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.384Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 柯里化 currying | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 柯里化 currying
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/05/FE-guide-currying/">前端常见知识点整理 ---- 柯里化 currying</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 09:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/05/FE-guide-currying/" title="前端常见知识点整理 ---- 柯里化 currying">https://blog.lifesli.com/2020/01/05/FE-guide-currying/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-currying/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-about-reduce/" rel="prev" title="reduce函数的妙用 ---- 实现map和filter">
+      <i class="fa fa-chevron-left"></i> reduce函数的妙用 ---- 实现map和filter
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-vuepress/" rel="next" title="介绍一个好用的doc展示库 ---- vuepress">
+      介绍一个好用的doc展示库 ---- vuepress <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89"><span class="nav-number">1.</span> <span class="nav-text">定义</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">2.</span> <span class="nav-text">应用场景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E5%A4%8D%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">参数复用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/05/FE-guide-currying/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-currying/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-currying/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dae94f56c2459773c4d67e22458d5123',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/05/FE-guide-vuepress/index.html b/2020/01/05/FE-guide-vuepress/index.html
new file mode 100644
index 0000000000..7786b665aa
--- /dev/null
+++ b/2020/01/05/FE-guide-vuepress/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:type" content="article">
+<meta property="og:title" content="介绍一个好用的doc展示库 ---- vuepress">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-05T17:59:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="vuepress">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>介绍一个好用的doc展示库 ---- vuepress | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          介绍一个好用的doc展示库 ---- vuepress
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+<span id="more"></span>
+
+<h1 id="vuepress-何许"><a href="#vuepress-何许" class="headerlink" title="vuepress 何许"></a><code>vuepress</code> 何许</h1>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/05/FE-guide-vuepress/">介绍一个好用的doc展示库 ---- vuepress</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 17:59</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/05/FE-guide-vuepress/" title="介绍一个好用的doc展示库 ---- vuepress">https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/vuepress/" rel="tag"># vuepress</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-currying/" rel="prev" title="前端常见知识点整理 ---- 柯里化 currying">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 柯里化 currying
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/09/FE-guide-Net/" rel="next" title="前端常见知识点整理 ---- 网络">
+      前端常见知识点整理 ---- 网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vuepress-%E4%BD%95%E8%AE%B8"><span class="nav-number">2.</span> <span class="nav-text">vuepress 何许</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/05/FE-guide-vuepress/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-vuepress/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-vuepress/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ba754befe20e12cb18e8d7502022384e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/09/FE-guide-Net/index.html b/2020/01/09/FE-guide-Net/index.html
new file mode 100644
index 0000000000..696edf4618
--- /dev/null
+++ b/2020/01/09/FE-guide-Net/index.html
@@ -0,0 +1,970 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/09/FE-guide-Net/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJa6g.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.376Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/09/FE-guide-Net/">前端常见知识点整理 ---- 网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/09/FE-guide-Net/" title="前端常见知识点整理 ---- 网络">https://blog.lifesli.com/2020/01/09/FE-guide-Net/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-Net/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/05/FE-guide-vuepress/" rel="prev" title="介绍一个好用的doc展示库 ---- vuepress">
+      <i class="fa fa-chevron-left"></i> 介绍一个好用的doc展示库 ---- vuepress
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/09/FE-guide-data-structure/" rel="next" title="计算机通识 ---- 数据结构">
+      计算机通识 ---- 数据结构 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#UDP-User-Datagram-Protocol-%E7%94%A8%E6%88%B7%E6%95%B0%E6%8D%AE%E6%8A%A5%E5%8D%8F%E8%AE%AE"><span class="nav-number">2.</span> <span class="nav-text">UDP - User Datagram Protocol - 用户数据报协议</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%A2%E5%90%91%E6%8A%A5%E6%96%87"><span class="nav-number">2.1.</span> <span class="nav-text">面向报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8D%E5%8F%AF%E9%9D%A0%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">不可靠性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%AB%98%E6%95%88"><span class="nav-number">2.3.</span> <span class="nav-text">高效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E8%BE%93%E6%96%B9%E5%BC%8F"><span class="nav-number">2.4.</span> <span class="nav-text">传输方式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#TCP"><span class="nav-number">3.</span> <span class="nav-text">TCP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%B4%E9%83%A8"><span class="nav-number">3.1.</span> <span class="nav-text">头部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%9C%BA"><span class="nav-number">3.2.</span> <span class="nav-text">状态机</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E7%AB%8B%E8%BF%9E%E6%8E%A5%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.</span> <span class="nav-text">建立连接三次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.3.</span> <span class="nav-text">第三次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%AD%E5%BC%80%E9%93%BE%E6%8E%A5%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.</span> <span class="nav-text">断开链接四次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.3.</span> <span class="nav-text">第三次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.4.</span> <span class="nav-text">第四次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARQ-%E5%8D%8F%E8%AE%AE"><span class="nav-number">3.2.3.</span> <span class="nav-text">ARQ 协议</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%81%9C%E6%AD%A2%E7%AD%89%E5%BE%85-ARQ"><span class="nav-number">3.2.3.1.</span> <span class="nav-text">停止等待 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%B8%B8%E4%BC%A0%E8%BE%93%E8%BF%87%E7%A8%8B"><span class="nav-number">3.2.3.2.</span> <span class="nav-text">正常传输过程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%A5%E6%96%87%E4%B8%A2%E5%A4%B1%E6%88%96%E5%87%BA%E9%94%99"><span class="nav-number">3.2.3.3.</span> <span class="nav-text">报文丢失或出错</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-%E8%B6%85%E6%97%B6%E6%88%96%E4%B8%A2%E5%A4%B1"><span class="nav-number">3.2.3.4.</span> <span class="nav-text">ACK 超时或丢失</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%9E%E7%BB%AD-ARQ"><span class="nav-number">3.2.3.5.</span> <span class="nav-text">连续 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B4%AF%E8%AE%A1%E7%A1%AE%E8%AE%A4"><span class="nav-number">3.2.3.6.</span> <span class="nav-text">累计确认</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.</span> <span class="nav-text">滑动窗口</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Zero-%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.1.</span> <span class="nav-text">Zero 窗口</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E5%A4%84%E7%90%86"><span class="nav-number">3.2.5.</span> <span class="nav-text">拥塞处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%85%A2%E5%BC%80%E5%A7%8B%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.1.</span> <span class="nav-text">慢开始算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E9%81%BF%E5%85%8D%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.2.</span> <span class="nav-text">拥塞避免算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E9%87%8D%E4%BC%A0"><span class="nav-number">3.2.5.3.</span> <span class="nav-text">快速重传</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Taho-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.4.</span> <span class="nav-text">TCP Taho 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Reno-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.5.</span> <span class="nav-text">TCP Reno 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-New-Ren-%E6%94%B9%E8%BF%9B%E5%90%8E%E7%9A%84%E5%BF%AB%E6%81%A2%E5%A4%8D"><span class="nav-number">3.2.5.6.</span> <span class="nav-text">TCP New Ren 改进后的快恢复</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP"><span class="nav-number">4.</span> <span class="nav-text">HTTP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Post-%E5%92%8C-Get-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">4.1.</span> <span class="nav-text">Post 和 Get 的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-number">4.2.</span> <span class="nav-text">常见状态码</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2XX-%E6%88%90%E5%8A%9F"><span class="nav-number">4.2.1.</span> <span class="nav-text">2XX 成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3XX-%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">4.2.2.</span> <span class="nav-text">3XX 重定向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4XX-%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.3.</span> <span class="nav-text">4XX 客户端错误</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5XX-%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.4.</span> <span class="nav-text">5XX 服务器错误</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP-%E9%A6%96%E9%83%A8"><span class="nav-number">4.3.</span> <span class="nav-text">HTTP 首部</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTPS"><span class="nav-number">5.</span> <span class="nav-text">HTTPS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#TLS"><span class="nav-number">5.1.</span> <span class="nav-text">TLS</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-2-0"><span class="nav-number">6.</span> <span class="nav-text">HTTP 2.0</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%BC%A0%E8%BE%93"><span class="nav-number">6.1.</span> <span class="nav-text">二进制传输</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%9A%E8%B7%AF%E5%A4%8D%E7%94%A8"><span class="nav-number">6.2.</span> <span class="nav-text">多路复用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Header-%E5%8E%8B%E7%BC%A9"><span class="nav-number">6.3.</span> <span class="nav-text">Header 压缩</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF-Push"><span class="nav-number">6.4.</span> <span class="nav-text">服务端 Push</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#QUIC"><span class="nav-number">6.5.</span> <span class="nav-text">QUIC</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#DNS"><span class="nav-number">7.</span> <span class="nav-text">DNS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E8%BE%93%E5%85%A5-URL-%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">7.1.</span> <span class="nav-text">从输入 URL 到页面加载完成的过程</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/09/FE-guide-Net/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-Net/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-Net/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd1dc82465cc611df4ea1b6baeae9d4be',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/09/FE-guide-data-structure/index.html b/2020/01/09/FE-guide-data-structure/index.html
new file mode 100644
index 0000000000..858c3ac7c1
--- /dev/null
+++ b/2020/01/09/FE-guide-data-structure/index.html
@@ -0,0 +1,706 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:type" content="article">
+<meta property="og:title" content="计算机通识 ---- 数据结构">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.385Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>计算机通识 ---- 数据结构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          计算机通识 ---- 数据结构
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/09/FE-guide-data-structure/">计算机通识 ---- 数据结构</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/09/FE-guide-data-structure/" title="计算机通识 ---- 数据结构">https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/09/FE-guide-Net/" rel="prev" title="前端常见知识点整理 ---- 网络">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/09/do-it-yourselfery-jsonp/" rel="next" title="自己动手实现系列 ---- jsonp">
+      自己动手实现系列 ---- jsonp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%88-Heap"><span class="nav-number">2.</span> <span class="nav-text">栈 Heap</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.1.</span> <span class="nav-text">实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BA%94%E7%94%A8"><span class="nav-number">2.2.</span> <span class="nav-text">应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%98%9F%E5%88%97"><span class="nav-number">3.</span> <span class="nav-text">队列</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-1"><span class="nav-number">3.1.</span> <span class="nav-text">实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E9%93%BE%E9%98%9F%E5%88%97"><span class="nav-number">3.1.1.</span> <span class="nav-text">单链队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BE%AA%E7%8E%AF%E9%98%9F%E5%88%97"><span class="nav-number">3.1.2.</span> <span class="nav-text">循环队列</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%93%BE%E8%A1%A8"><span class="nav-number">4.</span> <span class="nav-text">链表</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-2"><span class="nav-number">4.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%91"><span class="nav-number">5.</span> <span class="nav-text">树</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%8F%89%E6%A0%91"><span class="nav-number">5.1.</span> <span class="nav-text">二叉树</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%88%86%E6%90%9C%E7%B4%A2%E6%A0%91"><span class="nav-number">5.2.</span> <span class="nav-text">二分搜索树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-3"><span class="nav-number">5.2.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AVL-%E6%A0%91"><span class="nav-number">5.3.</span> <span class="nav-text">AVL 树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-4"><span class="nav-number">5.3.1.</span> <span class="nav-text">实现</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Trie"><span class="nav-number">6.</span> <span class="nav-text">Trie</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-5"><span class="nav-number">6.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B9%B6%E6%9F%A5%E9%9B%86"><span class="nav-number">7.</span> <span class="nav-text">并查集</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-6"><span class="nav-number">7.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A0%86"><span class="nav-number">8.</span> <span class="nav-text">堆</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E5%A4%A7%E6%A0%B9%E5%A0%86"><span class="nav-number">8.1.</span> <span class="nav-text">实现大根堆</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/09/FE-guide-data-structure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-data-structure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-data-structure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '057b1bb4d8f32df9b05ef4e5c7707b10',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/09/career/index.html b/2020/01/09/career/index.html
new file mode 100644
index 0000000000..8536fa4d09
--- /dev/null
+++ b/2020/01/09/career/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何正确使用时间[转载]">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/09/career/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-09T16:33:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/09/career/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>如何正确使用时间[转载] | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何正确使用时间[转载]
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/09/career/">如何正确使用时间[转载]</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 16:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/09/career/" title="如何正确使用时间[转载]">https://blog.lifesli.com/2020/01/09/career/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/career/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/09/solve-get-params-so-long-problem/" rel="prev" title="解决get请求过长的问题小记">
+      <i class="fa fa-chevron-left"></i> 解决get请求过长的问题小记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/13/do-it-yourselfery-promise/" rel="next" title="自己动手实现系列 ---- promise">
+      自己动手实现系列 ---- promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/09/career/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/career/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/career/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c726736a645a1737078c0ce6aa61a6ee',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/09/do-it-yourselfery-jsonp/index.html b/2020/01/09/do-it-yourselfery-jsonp/index.html
new file mode 100644
index 0000000000..32405f84da
--- /dev/null
+++ b/2020/01/09/do-it-yourselfery-jsonp/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- jsonp">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-09T08:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.464Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="jsonp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- jsonp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- jsonp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/09/do-it-yourselfery-jsonp/">自己动手实现系列 ---- jsonp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 08:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/09/do-it-yourselfery-jsonp/" title="自己动手实现系列 ---- jsonp">https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/jsonp/" rel="tag"># jsonp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/09/FE-guide-data-structure/" rel="prev" title="计算机通识 ---- 数据结构">
+      <i class="fa fa-chevron-left"></i> 计算机通识 ---- 数据结构
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/09/solve-get-params-so-long-problem/" rel="next" title="解决get请求过长的问题小记">
+      解决get请求过长的问题小记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-jsonp-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 jsonp 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '24a2c6135b0dec4195c23dd1d3f08210',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/09/solve-get-params-so-long-problem/index.html b/2020/01/09/solve-get-params-so-long-problem/index.html
new file mode 100644
index 0000000000..591ba9f894
--- /dev/null
+++ b/2020/01/09/solve-get-params-so-long-problem/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:type" content="article">
+<meta property="og:title" content="解决get请求过长的问题小记">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+<meta property="article:published_time" content="2020-01-09T11:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="ajax">
+<meta property="article:tag" content="get">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>解决get请求过长的问题小记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          解决get请求过长的问题小记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+<span id="more"></span>
+
+<h2 id="URL-限制"><a href="#URL-限制" class="headerlink" title="URL 限制"></a>URL 限制</h2><p>首先我在网上找到了一份资料介绍了URL长度的相关资料，从下面可以看出，从HTTP协议层面以及Get请求层面都没有什么限制，这个限制来自于<em><strong>浏览器或者服务器的限制</strong></em>。</p>
+<blockquote>
+<p>Microsoft Internet Explorer (Browser)<br>IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。<br>Firefox (Browser)<br>对于Firefox浏览器URL的长度限制为65,536个字符。<br>Safari (Browser)<br>URL最大长度限制为 80,000个字符。<br>Opera (Browser)<br>URL最大长度限制为190,000个字符。<br>Google (Browser)<br>URL最大长度限制为8182个字符。<br>Apache (Server)<br>能接受最大url长度为8,192个字符。<br>Microsoft Internet Information Server(IIS)<br>能接受最大url的长度为16,384个字符。</p>
+</blockquote>
+<p>而且，中文会进行编码，一个汉字编码后会生成9个字符，这样算来，IE下最多也就能输入231个中文，再多就完蛋了，那么通过get请求传递参数就会显得很麻烦。</p>
+<p>通常情况下，这种超长参数的请求我们都会用post，有些地方也会说post请求没有长度限制，但是前面说了，实际上HTTP协议层面并没有任何的限制，限制只出现在浏览器或者服务器限制，get和post请求在底层上其实是一样的。</p>
+<p>最后项目修改了请求类型，把 <code>get</code> 请求改成了 <code>post</code> 请求，在网上实际还找到了另外两个方案，如果对同一组参数频繁访问的化，也可以用 <code>post+get</code> 请求的方式去处理，或者用 <code>sessionStorage</code> 下面简单介绍一下。</p>
+<ol>
+<li>将预览内容 <code>post</code> 到服务端，根据一个唯一标识生成缓存(有效时间5分钟)，将唯一标识返回到前端，前端通过get方式传递唯一标识请求预览逻辑，拿到缓存的内容后渲染到页面。需要说明的是这里的缓存必须是分布式的。</li>
+<li>通过H5的会话缓存 <code>sessionStorage</code> 将预览内容存储在浏览器，打开预览页后从 <code>sessionStorage</code> 中拿到内容就可以渲染出页面了。</li>
+</ol>
+<p>上述两种方案都不太符合我们的项目所以最终还是选择了最简单的方式</p>
+<h2 id="GET-VS-POST"><a href="#GET-VS-POST" class="headerlink" title="GET VS POST"></a>GET VS POST</h2><ol>
+<li><p>多数浏览器对于POST采用两阶段发送数据的，先发送请求头，再发送请求体，即使参数再少再短，也会被分成两个步骤来发送（相对于GET），也就是第一步发送header数据，第二步再发送body部分。HTTP是应用层的协议，而在传输层有些情况TCP会出现两次连结的过程，HTTP协议本身不保存状态信息，一次请求一次响应。对于TCP而言，通信次数越多反而靠性越低，能在一次连结中传输完需要的消息是最可靠的，尽量使用GET请求来减少网络耗时。如果通信时间增加，这段时间客户端与服务器端一直保持连接状态，在服务器侧负载可能会增加，可靠性会下降。</p>
+</li>
+<li><p>GET请求能够被cache，GET请求能够被保存在浏览器的浏览历史里面（密码等重要数据GET提交，别人查看历史记录，就可以直接看到这些私密数据）POST不进行缓存。</p>
+</li>
+<li><p>GET参数是带在URL后面，传统IE中URL的最大可用长度为2048字符，其他浏览器对URL长度限制实现上有所不同。POST请求无长度限制（目前理论上是这样的）。</p>
+</li>
+<li><p>GET提交的数据大小，不同浏览器的限制不同，一般在2k-8K之间，POST提交数据比较大，大小靠服务器的设定值限制，而且某些数据只能用 POST 方法「携带」，比如 file。</p>
+</li>
+<li><p>全部用POST不是十分合理，最好先把请求按功能和场景分下类，对数据请求频繁，数据不敏感且数据量在普通浏览器最小限定的2k范围内，这样的情况使用GET。其他地方使用POST。</p>
+</li>
+<li><p>GET 的本质是「得」，而 POST 的本质是「给」。而且，GET 是「幂等」的，在这一点上，GET 被认为是「安全的」。但实际上 server 端也可以用作资源更新，但是这种用法违反了约定，容易造成 CSRF（跨站请求伪造）。</p>
+</li>
+</ol>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>以上是这次遇到问题后学到的一点知识，可能并不全面，后续如果遇到了类似的问题会继续丰富这篇文章。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/09/solve-get-params-so-long-problem/">解决get请求过长的问题小记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/09/solve-get-params-so-long-problem/" title="解决get请求过长的问题小记">https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/ajax/" rel="tag"># ajax</a>
+              <a href="/tags/get/" rel="tag"># get</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/09/do-it-yourselfery-jsonp/" rel="prev" title="自己动手实现系列 ---- jsonp">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- jsonp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/09/career/" rel="next" title="如何正确使用时间[转载]">
+      如何正确使用时间[转载] <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URL-%E9%99%90%E5%88%B6"><span class="nav-number">1.1.</span> <span class="nav-text">URL 限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GET-VS-POST"><span class="nav-number">1.2.</span> <span class="nav-text">GET VS POST</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '59029ebcab09d4843c9e33c347b78469',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/13/FE-guide-inherit2/index.html b/2020/01/13/FE-guide-inherit2/index.html
new file mode 100644
index 0000000000..fdd8a12fac
--- /dev/null
+++ b/2020/01/13/FE-guide-inherit2/index.html
@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承类型">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-13T03:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.395Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承类型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承类型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/13/FE-guide-inherit2/">前端常见知识点整理 ---- 继承类型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 03:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/13/FE-guide-inherit2/" title="前端常见知识点整理 ---- 继承类型">https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/13/do-it-yourselfery-promise/" rel="prev" title="自己动手实现系列 ---- promise">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/13/Javascript-Design-Pattern/" rel="next" title="JavaScript 设计模式 Design Pattern">
+      JavaScript 设计模式 Design Pattern <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF%EF%BC%88%E8%AE%A4%E8%B4%BC%E4%BD%9C%E7%88%B6%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">原型继承（认贼作父）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%88%E5%80%9F%E8%85%B9%E7%94%9F%E5%AD%90%EF%BC%89"><span class="nav-number">2.</span> <span class="nav-text">构造继承（借腹生子）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF%EF%BC%88%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF-%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">组合继承（原型继承+构造继承）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF-%E5%A4%8D%E5%88%B6%E9%99%8D%E7%BA%A7"><span class="nav-number">4.</span> <span class="nav-text">原型式继承(复制降级)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%84%E7%94%9F%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF"><span class="nav-number">5.</span> <span class="nav-text">寄生组合继承</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#inherits-%E5%87%BD%E6%95%B0-%E2%80%94-Nodejs-util-inherits-%E5%87%BD%E6%95%B0"><span class="nav-number">5.1.</span> <span class="nav-text">inherits 函数 — Nodejs util.inherits 函数</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/13/FE-guide-inherit2/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/FE-guide-inherit2/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/FE-guide-inherit2/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'addae32d93891432f80f3778787843d2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/13/Javascript-Design-Pattern/index.html b/2020/01/13/Javascript-Design-Pattern/index.html
new file mode 100644
index 0000000000..925eafc01a
--- /dev/null
+++ b/2020/01/13/Javascript-Design-Pattern/index.html
@@ -0,0 +1,665 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript 设计模式 Design Pattern">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+<meta property="article:published_time" content="2020-01-13T12:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.414Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="设计模式">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>JavaScript 设计模式 Design Pattern | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript 设计模式 Design Pattern
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+<a id="more"></a>
+
+<h1 id="什么是设计模式"><a href="#什么是设计模式" class="headerlink" title="什么是设计模式"></a>什么是设计模式</h1><blockquote>
+<p>设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案<br>设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。</p>
+</blockquote>
+<blockquote>
+<p>　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。   —- 百度百科</p>
+</blockquote>
+<p>不知道大家看了上面的定义以后是什么感受，说实话我第一次看到这句话并没有什么深刻的认识，什么面向对象的软件设计，什么针对特定问题，什么优雅的解决方案，这都说的是什么，后来我看了几遍之后，上面这句话用我的理解翻译如下：</p>
+<blockquote>
+<p>软件开发过程中，解决某一类问题用到的一系列套路</p>
+</blockquote>
+<p>这就是我对设计模式的认识。当然这也不仅仅是我自己的认识，在跟其他的一些开发人员交流时，很多人都是这么认为的。</p>
+<p>这些解决问题的方案实在是太好用了，所以大神就把它们抽象出来，然后起了个名字-就叫做设计模式了。</p>
+<p>这么说大家可能还是不太明白，举个开发过程中可能遇到的实际例子吧。</p>
+<blockquote>
+<p>当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件。那么这种场景下我们该如何解决这个问题呢？通常我们需要新增一个接口，兼容原来的接口和新的业务需求参数。<br>因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题。</p>
+</blockquote>
+<p>这就是设计模式的应用，实际上也许你还不知道设计模式这个词，但是你已经在工作中频繁的用到了设计模式，下面我们就来看看到底有哪些设计模式。</p>
+<p>哦，对了，设计模式并不依赖于语言，它本身更像是一种软件的设计思想，因为我是一个前端，所以接下来具体实现的时候我会使用js来实现设计模式的用法。</p>
+<h1 id="学习设计模式"><a href="#学习设计模式" class="headerlink" title="学习设计模式"></a>学习设计模式</h1><p>目前被普遍接受的经典的设计模式共有 <strong>23</strong> 种，而这23种设计模式又分为了 <strong>3大类</strong> ，看过一张图这里拿过来镇贴。<br><img src="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg" alt="lHgD4H.jpg"><br>他们分别是</p>
+<ul>
+<li>创建型模式</li>
+<li>结构型模式</li>
+<li>行为型模式</li>
+</ul>
+<p>接下来，我将会将这23种，3大类设计模式一个个的拆解开来，跟大家一起学习一下，设计模式有哪些内容。</p>
+<h2 id="创建型模式-6个"><a href="#创建型模式-6个" class="headerlink" title="创建型模式 6个"></a>创建型模式 6个</h2><p>这类模式用于<strong>对象的生成</strong>和<strong>生命周期的管理</strong>。<br>创建型模式可以决定生成哪些对象，提高了程序的灵活性。具体属于此类的模式清单如下，共有 <strong>5</strong> 个：</p>
+<ul>
+<li>单例模式（Singleton）</li>
+<li>工厂方法模式（Factory Method）</li>
+<li>抽象工厂模式（Abstract Factory）</li>
+<li>建造者模式（Builder）</li>
+<li>原型模式（Prototype）</li>
+<li>迭代器模式（Iterator）</li>
+</ul>
+<h3 id="单例模式（Singleton）"><a href="#单例模式（Singleton）" class="headerlink" title="单例模式（Singleton）"></a>单例模式（Singleton）</h3><p><strong><em>描述：</em></strong>确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。</p>
+<h3 id="工厂方法模式（Factory-Method）"><a href="#工厂方法模式（Factory-Method）" class="headerlink" title="工厂方法模式（Factory Method）"></a>工厂方法模式（Factory Method）</h3><p><strong><em>描述：</em></strong>定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。</p>
+<h3 id="抽象工厂模式（Abstract-Factory）"><a href="#抽象工厂模式（Abstract-Factory）" class="headerlink" title="抽象工厂模式（Abstract Factory）"></a>抽象工厂模式（Abstract Factory）</h3><p><strong><em>描述：</em></strong>为创建一组相关或相互依赖的对象提供一个接口，而且无需指定它们的具体类</p>
+<h3 id="建造者模式（Builder）"><a href="#建造者模式（Builder）" class="headerlink" title="建造者模式（Builder）"></a>建造者模式（Builder）</h3><p><strong><em>描述：</em></strong>将一个复杂对象的构建与他的表示分离，使得同样的构建过程可以创建不同的表示。</p>
+<h3 id="原型模式（Prototype）"><a href="#原型模式（Prototype）" class="headerlink" title="原型模式（Prototype）"></a>原型模式（Prototype）</h3><p><strong><em>描述：</em></strong>用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。</p>
+<h3 id="迭代器模式（Iterator）"><a href="#迭代器模式（Iterator）" class="headerlink" title="迭代器模式（Iterator）"></a>迭代器模式（Iterator）</h3><p><strong><em>描述：</em></strong>提供一种方法访问一个容器对象中的各个元素，而又不需暴露该对象的内部细节。</p>
+<h2 id="结构型模式-7个"><a href="#结构型模式-7个" class="headerlink" title="结构型模式 7个"></a>结构型模式 7个</h2><ul>
+<li>适配器模式（Adapter）</li>
+<li>组合模式（Compositor）</li>
+<li>代理模式（Proxy）</li>
+<li>桥梁模式（Bridge）</li>
+<li>装饰模式（Decorator）</li>
+<li>门面模式（Facade）</li>
+<li>享元模式（Flyweight）</li>
+</ul>
+<h3 id="适配器模式（Adapter）"><a href="#适配器模式（Adapter）" class="headerlink" title="适配器模式（Adapter）"></a>适配器模式（Adapter）</h3><p><strong><em>描述：</em></strong>将一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。</p>
+<h3 id="组合模式（Compositor）"><a href="#组合模式（Compositor）" class="headerlink" title="组合模式（Compositor）"></a>组合模式（Compositor）</h3><p><strong><em>描述：</em></strong>将对象组合成树形结构</p>
+<h3 id="代理模式（Proxy）"><a href="#代理模式（Proxy）" class="headerlink" title="代理模式（Proxy）"></a>代理模式（Proxy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="桥梁模式（Bridge）"><a href="#桥梁模式（Bridge）" class="headerlink" title="桥梁模式（Bridge）"></a>桥梁模式（Bridge）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="装饰模式（Decorator）"><a href="#装饰模式（Decorator）" class="headerlink" title="装饰模式（Decorator）"></a>装饰模式（Decorator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="门面模式（Facade）"><a href="#门面模式（Facade）" class="headerlink" title="门面模式（Facade）"></a>门面模式（Facade）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="享元模式（Flyweight）"><a href="#享元模式（Flyweight）" class="headerlink" title="享元模式（Flyweight）"></a>享元模式（Flyweight）</h3><p><strong><em>描述：</em></strong></p>
+<h2 id="行为型模式-10个"><a href="#行为型模式-10个" class="headerlink" title="行为型模式 10个"></a>行为型模式 10个</h2><ul>
+<li>命名模式（Command）</li>
+<li>解释器模式（Interpreter）</li>
+<li>责任链模式（Chian of Responsibility）</li>
+<li>观察者模式（Observer）</li>
+<li>中介者模式（Mediator）</li>
+<li>备忘录模式（Memento）</li>
+<li>状态模式（State）</li>
+<li>策略模式（Strategy）</li>
+<li>模板方法模式（Template Method）</li>
+<li>访问者模式（Visitor）</li>
+</ul>
+<h3 id="命名模式（Command）"><a href="#命名模式（Command）" class="headerlink" title="命名模式（Command）"></a>命名模式（Command）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="解释器模式（Interpreter）"><a href="#解释器模式（Interpreter）" class="headerlink" title="解释器模式（Interpreter）"></a>解释器模式（Interpreter）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="责任链模式（Chian-of-Responsibility）"><a href="#责任链模式（Chian-of-Responsibility）" class="headerlink" title="责任链模式（Chian of Responsibility）"></a>责任链模式（Chian of Responsibility）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="观察者模式（Observer）"><a href="#观察者模式（Observer）" class="headerlink" title="观察者模式（Observer）"></a>观察者模式（Observer）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="中介者模式（Mediator）"><a href="#中介者模式（Mediator）" class="headerlink" title="中介者模式（Mediator）"></a>中介者模式（Mediator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="备忘录模式（Memento）"><a href="#备忘录模式（Memento）" class="headerlink" title="备忘录模式（Memento）"></a>备忘录模式（Memento）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="状态模式（State）"><a href="#状态模式（State）" class="headerlink" title="状态模式（State）"></a>状态模式（State）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="策略模式（Strategy）"><a href="#策略模式（Strategy）" class="headerlink" title="策略模式（Strategy）"></a>策略模式（Strategy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="模板方法模式（Template-Method）"><a href="#模板方法模式（Template-Method）" class="headerlink" title="模板方法模式（Template Method）"></a>模板方法模式（Template Method）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="访问者模式（Visitor）"><a href="#访问者模式（Visitor）" class="headerlink" title="访问者模式（Visitor）"></a>访问者模式（Visitor）</h3><p><strong><em>描述：</em></strong></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/13/Javascript-Design-Pattern/">JavaScript 设计模式 Design Pattern</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 12:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/13/Javascript-Design-Pattern/" title="JavaScript 设计模式 Design Pattern">https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag"># 设计模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/13/FE-guide-inherit2/" rel="prev" title="前端常见知识点整理 ---- 继承类型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承类型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/13/hexo-search/" rel="next" title="给我的Hexo博客添加文章内容搜索功能">
+      给我的Hexo博客添加文章内容搜索功能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">什么是设计模式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">3.</span> <span class="nav-text">学习设计模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-6%E4%B8%AA"><span class="nav-number">3.1.</span> <span class="nav-text">创建型模式 6个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Singleton%EF%BC%89"><span class="nav-number">3.1.1.</span> <span class="nav-text">单例模式（Singleton）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Factory-Method%EF%BC%89"><span class="nav-number">3.1.2.</span> <span class="nav-text">工厂方法模式（Factory Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%BD%E8%B1%A1%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F%EF%BC%88Abstract-Factory%EF%BC%89"><span class="nav-number">3.1.3.</span> <span class="nav-text">抽象工厂模式（Abstract Factory）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Builder%EF%BC%89"><span class="nav-number">3.1.4.</span> <span class="nav-text">建造者模式（Builder）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Prototype%EF%BC%89"><span class="nav-number">3.1.5.</span> <span class="nav-text">原型模式（Prototype）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Iterator%EF%BC%89"><span class="nav-number">3.1.6.</span> <span class="nav-text">迭代器模式（Iterator）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%93%E6%9E%84%E5%9E%8B%E6%A8%A1%E5%BC%8F-7%E4%B8%AA"><span class="nav-number">3.2.</span> <span class="nav-text">结构型模式 7个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Adapter%EF%BC%89"><span class="nav-number">3.2.1.</span> <span class="nav-text">适配器模式（Adapter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E6%A8%A1%E5%BC%8F%EF%BC%88Compositor%EF%BC%89"><span class="nav-number">3.2.2.</span> <span class="nav-text">组合模式（Compositor）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F%EF%BC%88Proxy%EF%BC%89"><span class="nav-number">3.2.3.</span> <span class="nav-text">代理模式（Proxy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%A5%E6%A2%81%E6%A8%A1%E5%BC%8F%EF%BC%88Bridge%EF%BC%89"><span class="nav-number">3.2.4.</span> <span class="nav-text">桥梁模式（Bridge）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A3%85%E9%A5%B0%E6%A8%A1%E5%BC%8F%EF%BC%88Decorator%EF%BC%89"><span class="nav-number">3.2.5.</span> <span class="nav-text">装饰模式（Decorator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%A8%E9%9D%A2%E6%A8%A1%E5%BC%8F%EF%BC%88Facade%EF%BC%89"><span class="nav-number">3.2.6.</span> <span class="nav-text">门面模式（Facade）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%AB%E5%85%83%E6%A8%A1%E5%BC%8F%EF%BC%88Flyweight%EF%BC%89"><span class="nav-number">3.2.7.</span> <span class="nav-text">享元模式（Flyweight）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%8C%E4%B8%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-10%E4%B8%AA"><span class="nav-number">3.3.</span> <span class="nav-text">行为型模式 10个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E6%A8%A1%E5%BC%8F%EF%BC%88Command%EF%BC%89"><span class="nav-number">3.3.1.</span> <span class="nav-text">命名模式（Command）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E9%87%8A%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Interpreter%EF%BC%89"><span class="nav-number">3.3.2.</span> <span class="nav-text">解释器模式（Interpreter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F%EF%BC%88Chian-of-Responsibility%EF%BC%89"><span class="nav-number">3.3.3.</span> <span class="nav-text">责任链模式（Chian of Responsibility）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Observer%EF%BC%89"><span class="nav-number">3.3.4.</span> <span class="nav-text">观察者模式（Observer）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%AD%E4%BB%8B%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Mediator%EF%BC%89"><span class="nav-number">3.3.5.</span> <span class="nav-text">中介者模式（Mediator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%87%E5%BF%98%E5%BD%95%E6%A8%A1%E5%BC%8F%EF%BC%88Memento%EF%BC%89"><span class="nav-number">3.3.6.</span> <span class="nav-text">备忘录模式（Memento）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F%EF%BC%88State%EF%BC%89"><span class="nav-number">3.3.7.</span> <span class="nav-text">状态模式（State）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F%EF%BC%88Strategy%EF%BC%89"><span class="nav-number">3.3.8.</span> <span class="nav-text">策略模式（Strategy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Template-Method%EF%BC%89"><span class="nav-number">3.3.9.</span> <span class="nav-text">模板方法模式（Template Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BF%E9%97%AE%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Visitor%EF%BC%89"><span class="nav-number">3.3.10.</span> <span class="nav-text">访问者模式（Visitor）</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/13/Javascript-Design-Pattern/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/Javascript-Design-Pattern/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/Javascript-Design-Pattern/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6c1540622865184d598d1a3a3dfa7bb3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/13/do-it-yourselfery-promise/index.html b/2020/01/13/do-it-yourselfery-promise/index.html
new file mode 100644
index 0000000000..afba6dd3a1
--- /dev/null
+++ b/2020/01/13/do-it-yourselfery-promise/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- promise">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-13T00:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="promise">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/13/do-it-yourselfery-promise/">自己动手实现系列 ---- promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 00:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/13/do-it-yourselfery-promise/" title="自己动手实现系列 ---- promise">https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/promise/" rel="tag"># promise</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/09/career/" rel="prev" title="如何正确使用时间[转载]">
+      <i class="fa fa-chevron-left"></i> 如何正确使用时间[转载]
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/13/FE-guide-inherit2/" rel="next" title="前端常见知识点整理 ---- 继承类型">
+      前端常见知识点整理 ---- 继承类型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-promise-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 promise 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">then方法异步调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8"><span class="nav-number">1.4.</span> <span class="nav-text">then方法链式调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#catch%E6%96%B9%E6%B3%95"><span class="nav-number">1.5.</span> <span class="nav-text">catch方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#finally%E6%96%B9%E6%B3%95"><span class="nav-number">1.6.</span> <span class="nav-text">finally方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-resolve"><span class="nav-number">1.7.</span> <span class="nav-text">Promise.resolve</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-reject"><span class="nav-number">1.8.</span> <span class="nav-text">Promise.reject</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#all%E6%96%B9%E6%B3%95"><span class="nav-number">1.9.</span> <span class="nav-text">all方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#race%E6%96%B9%E6%B3%95"><span class="nav-number">1.10.</span> <span class="nav-text">race方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/13/do-it-yourselfery-promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/do-it-yourselfery-promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/do-it-yourselfery-promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b9f8790cd97c2366c34b997b99ef3271',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/13/hexo-search/index.html b/2020/01/13/hexo-search/index.html
new file mode 100644
index 0000000000..a17bb7ca30
--- /dev/null
+++ b/2020/01/13/hexo-search/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给我的Hexo博客添加文章内容搜索功能">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/13/hexo-search/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-13T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>给我的Hexo博客添加文章内容搜索功能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给我的Hexo博客添加文章内容搜索功能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+<span id="more"></span>
+<h2 id="主题里的搜索配置"><a href="#主题里的搜索配置" class="headerlink" title="主题里的搜索配置"></a>主题里的搜索配置</h2><p>这段代码是这样的，实际上我只需要把 <code>enable</code> 从 <code>false</code> 变成 <code>true</code> 就好了</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-generator-searchdb</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># If auto, trigger search by changing input.</span></span><br><span class="line">  <span class="comment"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class="line">  <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
+<p>然后我又看了一下上面提供的依赖地址，这里还需要做两步，一个是安装搜索的依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb</span><br></pre></td></tr></table></figure>
+<p>接着就是在博客系统的配置最下方加入下面这段话</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure>
+<p>到这里如果没什么问题，那么搜索功能就加上了，怎么样简单吧。如果你遇到什么问题，可以到上面的地址看一下，上面有详细的说明，我这里就不贴代码了。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>希望大家都能丰富自己的技术博客，拥有属于自己的一片技术天地。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/13/hexo-search/">给我的Hexo博客添加文章内容搜索功能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/13/hexo-search/" title="给我的Hexo博客添加文章内容搜索功能">https://blog.lifesli.com/2020/01/13/hexo-search/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/hexo-search/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/13/Javascript-Design-Pattern/" rel="prev" title="JavaScript 设计模式 Design Pattern">
+      <i class="fa fa-chevron-left"></i> JavaScript 设计模式 Design Pattern
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/22/Es6-arrowFunc-arguments/" rel="next" title="es6中箭头函数没了arguments怎么办？">
+      es6中箭头函数没了arguments怎么办？ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E9%A2%98%E9%87%8C%E7%9A%84%E6%90%9C%E7%B4%A2%E9%85%8D%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">主题里的搜索配置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/13/hexo-search/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/hexo-search/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/hexo-search/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4bda03c63125d95087c8db08e59c2c17',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/22/Es6-arrowFunc-arguments/index.html b/2020/01/22/Es6-arrowFunc-arguments/index.html
new file mode 100644
index 0000000000..0d2143798c
--- /dev/null
+++ b/2020/01/22/Es6-arrowFunc-arguments/index.html
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="es6中箭头函数没了arguments怎么办？">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-22T06:50:21.000Z">
+<meta property="article:modified_time" content="2020-01-22T07:34:29.919Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="es6">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>es6中箭头函数没了arguments怎么办？ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          es6中箭头函数没了arguments怎么办？
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-22 06:50:21 / 修改时间：07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+<a id="more"></a>
+
+<h2 id="剩余运算符"><a href="#剩余运算符" class="headerlink" title="剩余运算符"></a>剩余运算符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> func = <span class="function">(<span class="params">...rest</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(rest)</span><br><span class="line">  <span class="comment">//[1,2,3]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
+
+<p>看上面的代码，有的朋友会问，这<code>...</code>的操作不应该是展开运算符么？是的，扩展运算符与剩余操作符都是以三点开头的操作符，二者长的很像，只是在用法上有些差别。它们已经被 ES6 数组支持，能解决很多之前 arguments 解决起来很麻烦的问题。</p>
+<p>简单来说剩余运算是在参数上使用的。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/22/Es6-arrowFunc-arguments/">es6中箭头函数没了arguments怎么办？</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 06:50</p>
+      <p><span>最后更新:</span>2020年01月22日 - 07:34</p>
+      <p><span>原始链接:</span><a href="/2020/01/22/Es6-arrowFunc-arguments/" title="es6中箭头函数没了arguments怎么办？">https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/es6/" rel="tag"># es6</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/13/hexo-search/" rel="prev" title="给我的Hexo博客添加文章内容搜索功能">
+      <i class="fa fa-chevron-left"></i> 给我的Hexo博客添加文章内容搜索功能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/22/Wepack-Tips/" rel="next" title="webpack中loader和plugin之间的区别">
+      webpack中loader和plugin之间的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">1.1.</span> <span class="nav-text">剩余运算符</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '24598fa87498f15f99d14e0640f81f18',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/22/FE-guide-safe/index.html b/2020/01/22/FE-guide-safe/index.html
new file mode 100644
index 0000000000..e116aae535
--- /dev/null
+++ b/2020/01/22/FE-guide-safe/index.html
@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/22/FE-guide-safe/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-22T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+<span id="more"></span>
+<h2 id="XSS（Cross-site-scripting）跨站脚本攻击"><a href="#XSS（Cross-site-scripting）跨站脚本攻击" class="headerlink" title="XSS（Cross-site scripting）跨站脚本攻击"></a>XSS（Cross-site scripting）跨站脚本攻击</h2><p>跨站脚本攻击是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。</p>
+<p>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>
+<p>XSS攻击分成两类：</p>
+<ul>
+<li>来自内部的攻击<ul>
+<li>主要指的是利用程序自身的漏洞，构造跨站语句</li>
+</ul>
+</li>
+<li>来自外部的攻击<ul>
+<li>主要指自己构造XSS跨站漏洞网页或者寻找非目标机以外的有跨站漏洞的网页。如当我们要渗透一个站点，我们自己构造一个有跨站漏洞的网页，然后构造跨站语句，通过结合其他技术，如社会工程学等，欺骗目标服务器的管理员打开。</li>
+</ul>
+</li>
+</ul>
+<p>XSS分为：<strong>存储型</strong>和<strong>反射型</strong></p>
+<ul>
+<li>存储型XSS：存储型XSS，持久化，代码是存储在服务其中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，用户访问该页面的时候触发代码执行。这种XSS比较危险，容易造成蠕虫，盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。</li>
+<li>反射型XSS：非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。</li>
+</ul>
+<h3 id="攻击手段和目的"><a href="#攻击手段和目的" class="headerlink" title="攻击手段和目的"></a>攻击手段和目的</h3><p>攻击者使被攻击者在浏览器中执行脚本后，如果需要收集来自被攻击者的数据（如cookie或其他敏感信息），可以自行架设一个网站，让被攻击者通过JavaScript等方式把收集好的数据作为参数提交，随后以数据库等形式记录在攻击者自己的服务器上。</p>
+<p>常用的XSS攻击手段和目的有：</p>
+<ul>
+<li>盗用cookie，获取敏感信息。</li>
+<li>利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。</li>
+<li>利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。</li>
+<li>利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。</li>
+<li>在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。</li>
+</ul>
+<h3 id="漏洞的防御和利用"><a href="#漏洞的防御和利用" class="headerlink" title="漏洞的防御和利用"></a>漏洞的防御和利用</h3><h4 id="过滤特殊字符"><a href="#过滤特殊字符" class="headerlink" title="过滤特殊字符"></a>过滤特殊字符</h4><p>避免XSS的方法之一主要是将用户所提供的内容进行过滤，许多语言都有提供对HTML的过滤：</p>
+<ul>
+<li>PHP的htmlentities()或是htmlspecialchars()。</li>
+<li>Python的cgi.escape()。</li>
+<li>ASP的Server.HTMLEncode()。</li>
+<li>ASP.NET的Server.HtmlEncode()或功能更强的Microsoft Anti-Cross Site Scripting Library</li>
+<li>Java的xssprotect (Open Source Library)。</li>
+<li>NodeJS的node-validator。</li>
+</ul>
+<h4 id="使用HTTP头指定类型"><a href="#使用HTTP头指定类型" class="headerlink" title="使用HTTP头指定类型"></a>使用HTTP头指定类型</h4><p>很多时候可以使用HTTP头指定内容的类型，使得输出的内容避免被作为HTML解析。如在PHP语言中使用以下代码：<br><code>&lt;?php header(&#39;Content-Type: text/javascript; charset=utf-8&#39;); ?&gt;</code><br>即可强行指定输出内容为文本/JavaScript脚本（顺便指定了内容编码），而非可以引发攻击的HTML。</p>
+<h4 id="用户方面"><a href="#用户方面" class="headerlink" title="用户方面"></a>用户方面</h4><p>包括Internet Explorer、Mozilla Firefox在内的大多数浏览器皆有关闭JavaScript的选项，但关闭功能并非是最好的方法，因为许多网站都需要使用JavaScript语言才能正常运作。通常来说，一个经常有安全更新推出的浏览器，在使用上会比很久都没有更新的浏览器更为安全。</p>
+<h2 id="CRSF（Cross-site-request-forgery）跨站请求伪造"><a href="#CRSF（Cross-site-request-forgery）跨站请求伪造" class="headerlink" title="CRSF（Cross-site request forgery）跨站请求伪造"></a>CRSF（Cross-site request forgery）跨站请求伪造</h2><p>跨站请求伪造是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。</p>
+<ul>
+<li>XSS 利用的是用户对指定网站的信任</li>
+<li>CSRF 利用的是网站对用户网页浏览器的信任</li>
+</ul>
+<p>跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：<em><strong>简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</strong></em></p>
+<h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><p>例子<br>假如一家银行用以运行转账操作的URL地址如下：<br><code>http://www.examplebank.com/withdraw?account=AccoutName&amp;amount=1000&amp;for=PayeeName</code><br>那么，一个恶意攻击者可以在另一个网站上放置如下代码：<br><code>&lt;img src=&quot;http://www.examplebank.com/withdraw?account=Alice&amp;amount=1000&amp;for=Badman&quot;&gt;</code><br>如果有账户名为Alice的用户访问了恶意站点，而她之前刚访问过银行不久，登录信息尚未过期，那么她就会损失1000资金。<br>这种恶意的网址可以有很多种形式，藏身于网页中的许多地方。此外，攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛，博客等任何用户生成内容的网站中。这意味着<em><strong>如果服务端没有合适的防御措施的话，用户即使访问熟悉的可信网站也有受攻击的危险</strong></em>。<br>透过例子能够看出，攻击者并不能通过CSRF攻击来直接获取用户的账户控制权，也不能直接窃取用户的任何信息。他们能做到的，是<em><strong>欺骗用户浏览器，让其以用户的名义运行操作。</strong></em></p>
+<h3 id="防御措施"><a href="#防御措施" class="headerlink" title="防御措施"></a>防御措施</h3><h4 id="检查Referer（参照）字段"><a href="#检查Referer（参照）字段" class="headerlink" title="检查Referer（参照）字段"></a>检查Referer（参照）字段</h4><p>HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer字段应和请求的地址位于同一域名下。以上文银行操作为例，Referer字段地址通常应该是转账按钮所在的网页地址，应该也位于<a target="_blank" rel="noopener" href="http://www.examplebank.com之下.而如果是csrf攻击传来的请求,referer字段会是包含恶意网址的地址,不会位于www.examplebank.com之下,这时候服务器就能识别出恶意的访问./">www.examplebank.com之下。而如果是CSRF攻击传来的请求，Referer字段会是包含恶意网址的地址，不会位于www.examplebank.com之下，这时候服务器就能识别出恶意的访问。</a><br>这种办法简单易行，工作量低，仅需要在关键访问处增加一步校验。但这种办法也有其局限性，因其完全依赖浏览器发送正确的Referer字段。虽然http协议对此字段的内容有明确的规定，但并无法保证来访的浏览器的具体实现，亦无法保证浏览器没有安全漏洞影响到此字段。并且也存在攻击者攻击某些浏览器，篡改其Referer字段的可能。</p>
+<h4 id="添加校验token"><a href="#添加校验token" class="headerlink" title="添加校验token"></a>添加校验token</h4><p>由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再运行CSRF攻击。这种数据通常是窗体中的一个数据项。服务器将其生成并附加在窗体中，其内容是一个伪随机数。当客户端通过窗体提交请求时，这个伪随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个伪随机数的值，服务端就会因为校验token的值为空或者错误，拒绝这个可疑请求。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/22/FE-guide-safe/">前端常见知识点整理 ---- 网络安全</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/01/22/FE-guide-safe/" title="前端常见知识点整理 ---- 网络安全">https://blog.lifesli.com/2020/01/22/FE-guide-safe/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/FE-guide-safe/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/22/Wepack-Tips/" rel="prev" title="webpack中loader和plugin之间的区别">
+      <i class="fa fa-chevron-left"></i> webpack中loader和plugin之间的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/11/SSR/" rel="next" title="SSR">
+      SSR <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#XSS%EF%BC%88Cross-site-scripting%EF%BC%89%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB"><span class="nav-number">1.1.</span> <span class="nav-text">XSS（Cross-site scripting）跨站脚本攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%BB%E5%87%BB%E6%89%8B%E6%AE%B5%E5%92%8C%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.1.</span> <span class="nav-text">攻击手段和目的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BC%8F%E6%B4%9E%E7%9A%84%E9%98%B2%E5%BE%A1%E5%92%8C%E5%88%A9%E7%94%A8"><span class="nav-number">1.1.2.</span> <span class="nav-text">漏洞的防御和利用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%87%E6%BB%A4%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span class="nav-number">1.1.2.1.</span> <span class="nav-text">过滤特殊字符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HTTP%E5%A4%B4%E6%8C%87%E5%AE%9A%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.1.2.2.</span> <span class="nav-text">使用HTTP头指定类型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%94%A8%E6%88%B7%E6%96%B9%E9%9D%A2"><span class="nav-number">1.1.2.3.</span> <span class="nav-text">用户方面</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CRSF%EF%BC%88Cross-site-request-forgery%EF%BC%89%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0"><span class="nav-number">1.2.</span> <span class="nav-text">CRSF（Cross-site request forgery）跨站请求伪造</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BE%8B%E5%AD%90"><span class="nav-number">1.2.1.</span> <span class="nav-text">例子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E5%BE%A1%E6%8E%AA%E6%96%BD"><span class="nav-number">1.2.2.</span> <span class="nav-text">防御措施</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A3%80%E6%9F%A5Referer%EF%BC%88%E5%8F%82%E7%85%A7%EF%BC%89%E5%AD%97%E6%AE%B5"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">检查Referer（参照）字段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%A0%A1%E9%AA%8Ctoken"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">添加校验token</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/22/FE-guide-safe/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/FE-guide-safe/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/FE-guide-safe/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3da93eb899e6fc9e8828af3520463d99',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/01/22/Wepack-Tips/index.html b/2020/01/22/Wepack-Tips/index.html
new file mode 100644
index 0000000000..ec121dbba5
--- /dev/null
+++ b/2020/01/22/Wepack-Tips/index.html
@@ -0,0 +1,622 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="webpack中loader和plugin之间的区别">
+<meta property="og:url" content="https://blog.lifesli.com/2020/01/22/Wepack-Tips/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-01-22T10:38:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.430Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>webpack中loader和plugin之间的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          webpack中loader和plugin之间的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+<a id="more"></a>
+
+<h1 id="背景知识"><a href="#背景知识" class="headerlink" title="背景知识"></a>背景知识</h1><p>在研究loader和plugin之前区别之前，我们先来看看一个webpack配置的常见结构</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">"webpack"</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    app: path.join(__dirname, <span class="string">"../src/js/index.js"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 输出文件</span></span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">"[name].bundle.js"</span>,</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">"dist"</span>),</span><br><span class="line">    publicPath: <span class="string">"/"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.scss/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          <span class="string">"style-loader"</span>,</span><br><span class="line">          <span class="string">"css-loader"</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">      ......</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// plugins配置</span></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// 重新创建html文件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      title: <span class="string">"首页"</span>,</span><br><span class="line">      filename: <span class="string">"index.html"</span>,</span><br><span class="line">      template: path.resolve(__dirname, <span class="string">"../src/index.html"</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    ......</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><strong><em>webpack的打包原理</em></strong></p>
+<ul>
+<li>识别入口文件</li>
+<li>通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)</li>
+<li>webpack做的就是分析代码，转换代码，编译代码，输出代码</li>
+<li>最终形成打包后的代码</li>
+</ul>
+<h2 id="什么是loader"><a href="#什么是loader" class="headerlink" title="什么是loader"></a>什么是loader</h2><p>我们可以看到loader实际上是在module的rules下，用对象的方式表示了需要处理的文件类型，和需要用哪些loader做处理</p>
+<blockquote>
+<p>loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。</p>
+</blockquote>
+<ul>
+<li>处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行</li>
+<li>第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码</li>
+</ul>
+<h2 id="什么是plugin"><a href="#什么是plugin" class="headerlink" title="什么是plugin"></a>什么是plugin</h2><blockquote>
+<p>在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。</p>
+</blockquote>
+<h2 id="loader和plugin的区别"><a href="#loader和plugin的区别" class="headerlink" title="loader和plugin的区别"></a>loader和plugin的区别</h2><p>对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的<strong>文件转换过程</strong></p>
+<p><strong>plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务</strong></p>
+<p>下面我们来看一个例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyPlugin</span></span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"MyPlugin constructor:"</span>, options);</span><br><span class="line">  &#125;</span><br><span class="line">  apply(compiler)&#123;</span><br><span class="line">    compiler.plugin(<span class="string">"compilation"</span>, compilation =&gt; &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"MyPlugin"</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = MyPlugin;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// webpack.config.js配置：</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  ...</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MyPlugin(&#123;<span class="attr">param</span>: <span class="string">"my plugin"</span>&#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>使用该plugin后，执行的顺序：</p>
+<ol>
+<li>webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例</li>
+<li>在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件</li>
+<li>并且可以通过compiler对象去操作webpack</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/01/22/Wepack-Tips/">webpack中loader和plugin之间的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 10:38</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/01/22/Wepack-Tips/" title="webpack中loader和plugin之间的区别">https://blog.lifesli.com/2020/01/22/Wepack-Tips/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Wepack-Tips/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/22/Es6-arrowFunc-arguments/" rel="prev" title="es6中箭头函数没了arguments怎么办？">
+      <i class="fa fa-chevron-left"></i> es6中箭头函数没了arguments怎么办？
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/01/22/FE-guide-safe/" rel="next" title="前端常见知识点整理 ---- 网络安全">
+      前端常见知识点整理 ---- 网络安全 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF%E7%9F%A5%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">背景知识</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFloader"><span class="nav-number">2.1.</span> <span class="nav-text">什么是loader</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFplugin"><span class="nav-number">2.2.</span> <span class="nav-text">什么是plugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#loader%E5%92%8Cplugin%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">2.3.</span> <span class="nav-text">loader和plugin的区别</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/01/22/Wepack-Tips/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Wepack-Tips/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Wepack-Tips/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0d4a7f2f62c60e5a29ab1b24e57bbd8e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/11/SSR/index.html b/2020/02/11/SSR/index.html
new file mode 100644
index 0000000000..5a5ea95f28
--- /dev/null
+++ b/2020/02/11/SSR/index.html
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:type" content="article">
+<meta property="og:title" content="SSR">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/11/SSR/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="服务端渲染">
+<meta property="article:tag" content="同构技术">
+<meta property="article:tag" content="SSR">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>SSR | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          SSR
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/11/SSR/">SSR</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/11/SSR/" title="SSR">https://blog.lifesli.com/2020/02/11/SSR/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/SSR/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" rel="tag"># 服务端渲染</a>
+              <a href="/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" rel="tag"># 同构技术</a>
+              <a href="/tags/SSR/" rel="tag"># SSR</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/01/22/FE-guide-safe/" rel="prev" title="前端常见知识点整理 ---- 网络安全">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/11/restful-architecture/" rel="next" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      NodeJS 下 RESTful 架构的最佳实践（课堂笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFSSR"><span class="nav-number">1.</span> <span class="nav-text">什么是SSR</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84vue%E7%BA%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93"><span class="nav-number">1.1.</span> <span class="nav-text">传统浏览器的vue纯浏览器渲染</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ssr"><span class="nav-number">1.2.</span> <span class="nav-text">ssr</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#SSR%E9%9C%80%E8%A6%81%E9%82%A3%E4%BA%9B%E4%B8%9C%E8%A5%BF"><span class="nav-number">1.3.</span> <span class="nav-text">SSR需要那些东西</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99SSR"><span class="nav-number">1.4.</span> <span class="nav-text">手写SSR</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue-next"><span class="nav-number">2.</span> <span class="nav-text">vue + next</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">2.2.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">2.3.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/11/SSR/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/SSR/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/SSR/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '17b8ab2e47aeab0f6558b7088dd0b5ae',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/11/restful-architecture/index.html b/2020/02/11/restful-architecture/index.html
new file mode 100644
index 0000000000..7c6c8178e2
--- /dev/null
+++ b/2020/02/11/restful-architecture/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:type" content="article">
+<meta property="og:title" content="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/11/restful-architecture/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RESTful">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>NodeJS 下 RESTful 架构的最佳实践（课堂笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/11/restful-architecture/">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/11/restful-architecture/" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">https://blog.lifesli.com/2020/02/11/restful-architecture/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/restful-architecture/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/RESTful/" rel="tag"># RESTful</a>
+              <a href="/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/11/SSR/" rel="prev" title="SSR">
+      <i class="fa fa-chevron-left"></i> SSR
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/12/print-table-problem/" rel="next" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      由打印引起的一点小问题，写table时别忘了写thead和tbody <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-RESTful"><span class="nav-number">1.</span> <span class="nav-text">什么是 RESTful</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/11/restful-architecture/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/restful-architecture/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/restful-architecture/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '937f7c5fa5d4e8d0480b6f4cff85df2f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/12/print-table-problem/index.html b/2020/02/12/print-table-problem/index.html
new file mode 100644
index 0000000000..d078552bcc
--- /dev/null
+++ b/2020/02/12/print-table-problem/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:type" content="article">
+<meta property="og:title" content="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/12/print-table-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-12T08:30:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>由打印引起的一点小问题，写table时别忘了写thead和tbody | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          由打印引起的一点小问题，写table时别忘了写thead和tbody
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/12/print-table-problem/">由打印引起的一点小问题，写table时别忘了写thead和tbody</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 08:30</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/12/print-table-problem/" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">https://blog.lifesli.com/2020/02/12/print-table-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/print-table-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/11/restful-architecture/" rel="prev" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      <i class="fa fa-chevron-left"></i> NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/12/vue-proxyTable-problem/" rel="next" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      Could not proxy request XXX from localhost:8080 to localhost:8081 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/12/print-table-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/print-table-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/print-table-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '11f91fb34e161600737f4782fc4a00a7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/12/vue-proxyTable-problem/index.html b/2020/02/12/vue-proxyTable-problem/index.html
new file mode 100644
index 0000000000..20ff5659dd
--- /dev/null
+++ b/2020/02/12/vue-proxyTable-problem/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Could not proxy request XXX from localhost:8080 to localhost:8081">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-12T09:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Could not proxy request XXX from localhost:8080 to localhost:8081 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Could not proxy request XXX from localhost:8080 to localhost:8081
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/12/vue-proxyTable-problem/">Could not proxy request XXX from localhost:8080 to localhost:8081</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 09:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/12/vue-proxyTable-problem/" title="Could not proxy request XXX from localhost:8080 to localhost:8081">https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/12/print-table-problem/" rel="prev" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      <i class="fa fa-chevron-left"></i> 由打印引起的一点小问题，写table时别忘了写thead和tbody
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/19/develop-custom-cli-tools-using-node/" rel="next" title="使用node开发自定义cli工具">
+      使用node开发自定义cli工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/12/vue-proxyTable-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/vue-proxyTable-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/vue-proxyTable-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1e60fae7703ba32a66705d202c2bb7f0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/19/develop-custom-cli-tools-using-node/index.html b/2020/02/19/develop-custom-cli-tools-using-node/index.html
new file mode 100644
index 0000000000..0905f160c9
--- /dev/null
+++ b/2020/02/19/develop-custom-cli-tools-using-node/index.html
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用node开发自定义cli工具">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-19T15:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.451Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="脚手架">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>使用node开发自定义cli工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用node开发自定义cli工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/19/develop-custom-cli-tools-using-node/">使用node开发自定义cli工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月19日 - 15:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/02/19/develop-custom-cli-tools-using-node/" title="使用node开发自定义cli工具">https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" rel="tag"># 脚手架</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/12/vue-proxyTable-problem/" rel="prev" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      <i class="fa fa-chevron-left"></i> Could not proxy request XXX from localhost:8080 to localhost:8081
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/21/Implementation-of-the-vue-response-principle/" rel="next" title="Vue 响应式原理的实现（课程笔记）">
+      Vue 响应式原理的实现（课程笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%86%E5%A4%87"><span class="nav-number">2.</span> <span class="nav-text">准备</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="nav-number">3.</span> <span class="nav-text">初始化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%8C%87%E4%BB%A4"><span class="nav-number">4.</span> <span class="nav-text">创建指令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#github%E4%B8%8A%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%E4%BB%93%E5%BA%93"><span class="nav-number">4.1.</span> <span class="nav-text">github上创建模板仓库</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E9%98%B6%E5%A2%9E%E5%8A%A0%E5%8A%9F%E8%83%BD"><span class="nav-number">4.2.</span> <span class="nav-text">进阶增加功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8inquirer%E8%BF%9B%E8%A1%8C%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%AD%94%E8%AF%A2"><span class="nav-number">4.2.1.</span> <span class="nav-text">使用inquirer进行命令行答询</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8handlebars%E4%BF%AE%E6%94%B9package-json"><span class="nav-number">4.2.2.</span> <span class="nav-text">使用handlebars修改package.json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8ora%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E4%B8%AD%E6%98%BE%E7%A4%BA%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81"><span class="nav-number">4.2.3.</span> <span class="nav-text">使用ora在命令行中显示加载状态</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8chalk%E5%92%8Clog-symbols%E5%A2%9E%E5%8A%A0%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%BE%93%E5%87%BA%E6%A0%B7%E5%BC%8F"><span class="nav-number">4.2.4.</span> <span class="nav-text">使用chalk和log-symbols增加命令行输出样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9B%86%E5%A4%A7%E6%88%90"><span class="nav-number">4.2.5.</span> <span class="nav-text">集大成</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%91%E5%B8%83%E5%88%B0npm%E4%B8%8A"><span class="nav-number">5.</span> <span class="nav-text">发布到npm上</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%8E%E8%AE%B0"><span class="nav-number">6.</span> <span class="nav-text">后记</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd03a27ac39259e09250a4c50aea1f835',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/21/Implementation-of-the-vue-response-principle/index.html b/2020/02/21/Implementation-of-the-vue-response-principle/index.html
new file mode 100644
index 0000000000..46fd41e46b
--- /dev/null
+++ b/2020/02/21/Implementation-of-the-vue-response-principle/index.html
@@ -0,0 +1,693 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue 响应式原理的实现（课程笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-21T23:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Vue 响应式原理的实现（课程笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue 响应式原理的实现（课程笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/21/Implementation-of-the-vue-response-principle/">Vue 响应式原理的实现（课程笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月21日 - 23:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/21/Implementation-of-the-vue-response-principle/" title="Vue 响应式原理的实现（课程笔记）">https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/19/develop-custom-cli-tools-using-node/" rel="prev" title="使用node开发自定义cli工具">
+      <i class="fa fa-chevron-left"></i> 使用node开发自定义cli工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/23/V8-engine-memory-management-and-optimization/" rel="next" title="v8引擎如何回收内存（笔记）">
+      v8引擎如何回收内存（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue2-%E5%8E%9F%E7%90%86"><span class="nav-number">2.</span> <span class="nav-text">Vue2 原理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-defineProperty"><span class="nav-number">2.1.</span> <span class="nav-text">什么是 defineProperty</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-%E4%B8%AD%E4%BB%8E%E6%94%B9%E5%8F%98%E4%B8%80%E4%B8%AA%E6%95%B0%E6%8D%AE%E5%88%B0%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.2.</span> <span class="nav-text">Vue 中从改变一个数据到发生改变的过程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%BC%E5%A4%96%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9%E2%80%94%E6%95%B0%E7%BB%84%E6%80%8E%E4%B9%88%E7%9B%91%E5%90%AC"><span class="nav-number">2.2.1.</span> <span class="nav-text">格外注意的地方—数组怎么监听</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue3-%E5%AE%9E%E7%8E%B0%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">2.3.</span> <span class="nav-text">Vue3 实现双向绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%94%B9%E7%94%A8-Proxy"><span class="nav-number">2.3.1.</span> <span class="nav-text">为什么改用 Proxy</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%98%E8%83%BD%E7%94%A8-Proxy-%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">还能用 Proxy 做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%A0%A1%E9%AA%8C%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.1.1.1.</span> <span class="nav-text">校验类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9C%9F%E6%AD%A3%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F"><span class="nav-number">2.3.1.1.2.</span> <span class="nav-text">真正的私有变量</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%99%9A%E6%8B%9FDom%E5%92%8Cdiff%E7%AE%97%E6%B3%95"><span class="nav-number">2.4.</span> <span class="nav-text">虚拟Dom和diff算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="nav-number">2.5.</span> <span class="nav-text">vue 性能优化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7999d1ae89a5c27182eb02d6f290b54d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/23/V8-engine-memory-management-and-optimization/index.html b/2020/02/23/V8-engine-memory-management-and-optimization/index.html
new file mode 100644
index 0000000000..43a869c3dd
--- /dev/null
+++ b/2020/02/23/V8-engine-memory-management-and-optimization/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:type" content="article">
+<meta property="og:title" content="v8引擎如何回收内存（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-23T08:00:00.000Z">
+<meta property="article:modified_time" content="2020-02-23T07:57:18.745Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="内存回收">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>v8引擎如何回收内存（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          v8引擎如何回收内存（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-02-23 08:00:00 / 修改时间：07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/23/V8-engine-memory-management-and-optimization/">v8引擎如何回收内存（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月23日 - 08:00</p>
+      <p><span>最后更新:</span>2020年02月23日 - 07:57</p>
+      <p><span>原始链接:</span><a href="/2020/02/23/V8-engine-memory-management-and-optimization/" title="v8引擎如何回收内存（笔记）">https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" rel="tag"># 内存回收</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/21/Implementation-of-the-vue-response-principle/" rel="prev" title="Vue 响应式原理的实现（课程笔记）">
+      <i class="fa fa-chevron-left"></i> Vue 响应式原理的实现（课程笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/02/24/Vue-plug-in-development/" rel="next" title="vue插件开发（笔记）">
+      vue插件开发（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E5%9B%9E%E6%94%B6%E5%9E%83%E5%9C%BE"><span class="nav-number">1.</span> <span class="nav-text">V8引擎如何回收垃圾</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E8%A6%81%E5%85%B3%E6%B3%A8%E5%86%85%E5%AD%98"><span class="nav-number">1.1.</span> <span class="nav-text">为什么我们要关注内存</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v8%E5%BC%95%E6%93%8E%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">v8引擎的内存回收机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v8%E7%9A%84%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D"><span class="nav-number">1.2.1.</span> <span class="nav-text">v8的内存分配</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%AD%98%E5%A4%A7%E5%B0%8F"><span class="nav-number">1.2.2.</span> <span class="nav-text">内存大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E7%AE%97%E6%B3%95"><span class="nav-number">1.2.3.</span> <span class="nav-text">垃圾回收算法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#V8%E6%98%AF%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E5%8F%98%E9%87%8F%E7%9A%84"><span class="nav-number">1.2.4.</span> <span class="nav-text">V8是如何处理变量的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E5%A4%84%E7%90%86"><span class="nav-number">1.2.5.</span> <span class="nav-text">变量处理</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8BV8%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8%E6%83%85%E5%86%B5"><span class="nav-number">2.</span> <span class="nav-text">如何查看V8内存使用情况</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%B3%A8%E6%84%8F%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">如何注意内存使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E5%86%85%E5%AD%98%E7%9A%84%E6%8A%80%E5%B7%A7"><span class="nav-number">2.1.1.</span> <span class="nav-text">优化内存的技巧</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E6%AD%A2%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="nav-number">2.1.2.</span> <span class="nav-text">防止内存泄漏</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '292daa8600701b723d80f1b4c25afaaa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/02/24/Vue-plug-in-development/index.html b/2020/02/24/Vue-plug-in-development/index.html
new file mode 100644
index 0000000000..6f367f004a
--- /dev/null
+++ b/2020/02/24/Vue-plug-in-development/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:type" content="article">
+<meta property="og:title" content="vue插件开发（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-02-24T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>vue插件开发（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          vue插件开发（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/02/24/Vue-plug-in-development/">vue插件开发（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月24日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/02/24/Vue-plug-in-development/" title="vue插件开发（笔记）">https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/23/V8-engine-memory-management-and-optimization/" rel="prev" title="v8引擎如何回收内存（笔记）">
+      <i class="fa fa-chevron-left"></i> v8引擎如何回收内存（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="next" title="使用阿里镜像加速brew（转载）">
+      使用阿里镜像加速brew（转载） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#vue%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91"><span class="nav-number">1.</span> <span class="nav-text">vue插件开发</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-use"><span class="nav-number">1.1.</span> <span class="nav-text">Vue.use</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/02/24/Vue-plug-in-development/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/24/Vue-plug-in-development/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/24/Vue-plug-in-development/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dd1a97d1fd2eed8408000372d6b13798',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html b/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
new file mode 100644
index 0000000000..d8bf0c2e1b
--- /dev/null
+++ b/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用阿里镜像加速brew（转载）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-03T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="HomeBrew">
+<meta property="article:tag" content="Mac">
+<meta property="article:tag" content="海外提速">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>使用阿里镜像加速brew（转载） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用阿里镜像加速brew（转载）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">使用阿里镜像加速brew（转载）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月03日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" title="使用阿里镜像加速brew（转载）">https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/HomeBrew/" rel="tag"># HomeBrew</a>
+              <a href="/tags/Mac/" rel="tag"># Mac</a>
+              <a href="/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" rel="tag"># 海外提速</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/02/24/Vue-plug-in-development/" rel="prev" title="vue插件开发（笔记）">
+      <i class="fa fa-chevron-left"></i> vue插件开发（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/23/path-join-vs-path-resolve/" rel="next" title="path.join 与 path.resolve 的区别">
+      path.join 与 path.resolve 的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Alibaba-%E7%9A%84-Homebrew-%E9%95%9C%E5%83%8F%E6%BA%90%E8%BF%9B%E8%A1%8C%E5%8A%A0%E9%80%9F"><span class="nav-number">1.</span> <span class="nav-text">使用 Alibaba 的 Homebrew 镜像源进行加速</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-brew-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.1.</span> <span class="nav-text">1. 替换 &#x2F; 还原 brew.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-core-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.2.</span> <span class="nav-text">2. 替换 &#x2F; 还原 homebrew-core.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-bottles-%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">1.3.</span> <span class="nav-text">3. 替换 &#x2F; 还原 homebrew-bottles 访问地址</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-zsh-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.1.</span> <span class="nav-text">3.1 zsh 终端操作方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-bash-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.2.</span> <span class="nav-text">3.2 bash 终端操作方式</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '13a849fa90ab5031dc439c421a0527fc',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/23/path-join-vs-path-resolve/index.html b/2020/03/23/path-join-vs-path-resolve/index.html
new file mode 100644
index 0000000000..d1841f1581
--- /dev/null
+++ b/2020/03/23/path-join-vs-path-resolve/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="path.join 与 path.resolve 的区别">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-23T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>path.join 与 path.resolve 的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          path.join 与 path.resolve 的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/23/path-join-vs-path-resolve/">path.join 与 path.resolve 的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月23日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/03/23/path-join-vs-path-resolve/" title="path.join 与 path.resolve 的区别">https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="prev" title="使用阿里镜像加速brew（转载）">
+      <i class="fa fa-chevron-left"></i> 使用阿里镜像加速brew（转载）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-reduce/" rel="next" title="自己动手实现系列 ---- Array.prototype.reduce">
+      自己动手实现系列 ---- Array.prototype.reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#path-join-%E4%B8%8E-path-resolve-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">path.join 与 path.resolve 的区别</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/23/path-join-vs-path-resolve/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/23/path-join-vs-path-resolve/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/23/path-join-vs-path-resolve/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '65ccc0a842c947874ad4ad3fb584f72b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-EventEmitter/index.html b/2020/03/24/do-it-yourselfery-EventEmitter/index.html
new file mode 100644
index 0000000000..8604faa90d
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-EventEmitter/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- EventEmitter(事件触发器)">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T15:45:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.452Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- EventEmitter(事件触发器) | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- EventEmitter(事件触发器)
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-EventEmitter/">自己动手实现系列 ---- EventEmitter(事件触发器)</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:45</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-EventEmitter/" title="自己动手实现系列 ---- EventEmitter(事件触发器)">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="prev" title="自己动手实现系列 ---- Vue双向绑定">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Vue双向绑定
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-async-await/" rel="next" title="自己动手实现系列 ---- async、await">
+      自己动手实现系列 ---- async、await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-EventEmitter"><span class="nav-number">1.</span> <span class="nav-text">实现一个 EventEmitter</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '742faba7243b111892653b70090a3a58',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-async-await/index.html b/2020/03/24/do-it-yourselfery-async-await/index.html
new file mode 100644
index 0000000000..81bb77a359
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-async-await/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- async、await">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T15:50:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- async、await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- async、await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-async-await/">自己动手实现系列 ---- async、await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:50</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-async-await/" title="自己动手实现系列 ---- async、await">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-EventEmitter/" rel="prev" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- EventEmitter(事件触发器)
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-call-apply/" rel="next" title="自己动手实现系列 ---- call、apply、bind">
+      自己动手实现系列 ---- call、apply、bind <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '093746825cc7c6c3294d122f4db14e8e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-call-apply/index.html b/2020/03/24/do-it-yourselfery-call-apply/index.html
new file mode 100644
index 0000000000..dad589dffd
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-call-apply/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- call、apply、bind">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T15:54:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- call、apply、bind | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- call、apply、bind
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-call-apply/">自己动手实现系列 ---- call、apply、bind</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:54</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-call-apply/" title="自己动手实现系列 ---- call、apply、bind">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-async-await/" rel="prev" title="自己动手实现系列 ---- async、await">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- async、await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/webpack-learning-1/" rel="next" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b9cfce5a9995076da331ad8df431caac',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-create/index.html b/2020/03/24/do-it-yourselfery-create/index.html
new file mode 100644
index 0000000000..ef9daf56f3
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-create/index.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Object.create()">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Object.create() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Object.create()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-create/">自己动手实现系列 ---- Object.create()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-create/" title="自己动手实现系列 ---- Object.create()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="prev" title="自己动手实现系列 ---- 事件代理">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- 事件代理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-map/" rel="next" title="自己动手实现系列 ---- Array.prototype.map()">
+      自己动手实现系列 ---- Array.prototype.map() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Object-create-%E6%96%B9%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">实现一个 Object.create() 方法</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-create/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-create/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-create/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0cccdef85914c0aed953c72dfe5e9945',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-flat/index.html b/2020/03/24/do-it-yourselfery-flat/index.html
new file mode 100644
index 0000000000..81d512f9ca
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-flat/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.flat()函数">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T13:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.flat()函数 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.flat()函数
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-flat/">自己动手实现系列 ---- Array.prototype.flat()函数</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-flat/" title="自己动手实现系列 ---- Array.prototype.flat()函数">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-isArray/" rel="prev" title="自己动手实现系列 ---- Array.isArray">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.isArray
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="next" title="自己动手实现系列 ---- 事件代理">
+      自己动手实现系列 ---- 事件代理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-flat/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-flat/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-flat/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e5892e3629c5e383afc82c881281ea51',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-isArray/index.html b/2020/03/24/do-it-yourselfery-isArray/index.html
new file mode 100644
index 0000000000..bf9af9bca2
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-isArray/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.isArray">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T13:30:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.463Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.isArray | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.isArray
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-isArray/">自己动手实现系列 ---- Array.isArray</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:30</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-isArray/" title="自己动手实现系列 ---- Array.isArray">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-new/" rel="prev" title="自己动手实现系列 ---- new">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-flat/" rel="next" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      自己动手实现系列 ---- Array.prototype.flat()函数 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAArray-isArray"><span class="nav-number">1.</span> <span class="nav-text">实现一个Array.isArray</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9e4dfd29d347ab326ef9025da3579968',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-map/index.html b/2020/03/24/do-it-yourselfery-map/index.html
new file mode 100644
index 0000000000..d264e374b6
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-map/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.map()">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T15:20:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.map() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.map()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-map/">自己动手实现系列 ---- Array.prototype.map()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:20</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-map/" title="自己动手实现系列 ---- Array.prototype.map()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-create/" rel="prev" title="自己动手实现系列 ---- Object.create()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Object.create()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="next" title="自己动手实现系列 ---- Vue双向绑定">
+      自己动手实现系列 ---- Vue双向绑定 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-map/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-map/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-map/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c6230488f3e842394e0f5d9a235260f6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-new/index.html b/2020/03/24/do-it-yourselfery-new/index.html
new file mode 100644
index 0000000000..8ed51feb7f
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-new/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-new/">自己动手实现系列 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-new/" title="自己动手实现系列 ---- new">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-reduce/" rel="prev" title="自己动手实现系列 ---- Array.prototype.reduce">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-isArray/" rel="next" title="自己动手实现系列 ---- Array.isArray">
+      自己动手实现系列 ---- Array.isArray <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAnew%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="nav-number">1.</span> <span class="nav-text">实现一个new操作符</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'eeb7f6807dde9e5718834708dab7f3f7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/do-it-yourselfery-reduce/index.html b/2020/03/24/do-it-yourselfery-reduce/index.html
new file mode 100644
index 0000000000..af137921ee
--- /dev/null
+++ b/2020/03/24/do-it-yourselfery-reduce/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.reduce">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-reduce/">自己动手实现系列 ---- Array.prototype.reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-reduce/" title="自己动手实现系列 ---- Array.prototype.reduce">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/23/path-join-vs-path-resolve/" rel="prev" title="path.join 与 path.resolve 的区别">
+      <i class="fa fa-chevron-left"></i> path.join 与 path.resolve 的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-new/" rel="next" title="自己动手实现系列 ---- new">
+      自己动手实现系列 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4a0ff3b917ae5b5447cda99899a0ac6f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html" "b/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
new file mode 100644
index 0000000000..00214b242e
--- /dev/null
+++ "b/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- 事件代理">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- 事件代理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- 事件代理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">自己动手实现系列 ---- 事件代理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" title="自己动手实现系列 ---- 事件代理">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-flat/" rel="prev" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.flat()函数
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-create/" rel="next" title="自己动手实现系列 ---- Object.create()">
+      自己动手实现系列 ---- Object.create() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd934ef0afe474646e7f02e51e22b476a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html" "b/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
new file mode 100644
index 0000000000..dce42dc47f
--- /dev/null
+++ "b/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Vue双向绑定">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-03-24T15:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.469Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Vue双向绑定 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Vue双向绑定
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">自己动手实现系列 ---- Vue双向绑定</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" title="自己动手实现系列 ---- Vue双向绑定">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-map/" rel="prev" title="自己动手实现系列 ---- Array.prototype.map()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.map()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-EventEmitter/" rel="next" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      自己动手实现系列 ---- EventEmitter(事件触发器) <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-2-x-%E7%9A%84-Object-defineProperty-%E7%89%88%E6%9C%AC"><span class="nav-number">1.</span> <span class="nav-text">Vue 2.x 的 Object.defineProperty 版本</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-3-x-%E7%9A%84-proxy-%E7%89%88%E6%9C%AC"><span class="nav-number">2.</span> <span class="nav-text">Vue 3.x 的 proxy 版本</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '35ba1ef507100551a189f85d322bb462',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/03/24/webpack-learning-1/index.html b/2020/03/24/webpack-learning-1/index.html
new file mode 100644
index 0000000000..3a4b5f107c
--- /dev/null
+++ b/2020/03/24/webpack-learning-1/index.html
@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/2020/03/24/webpack-learning-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg">
+<meta property="article:published_time" content="2020-03-24T20:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Webpack">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/03/24/webpack-learning-1/">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 20:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/03/24/webpack-learning-1/" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">https://blog.lifesli.com/2020/03/24/webpack-learning-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/webpack-learning-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Webpack/" rel="tag"># Webpack</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/do-it-yourselfery-call-apply/" rel="prev" title="自己动手实现系列 ---- call、apply、bind">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- call、apply、bind
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/03/source-code-react-diff/" rel="next" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      React 源码剖析系列 － 不可思议的 react diff【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8E%A8%E8%8D%90%E5%BA%8F"><span class="nav-number">1.</span> <span class="nav-text">推荐序</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A5%E9%97%A8-%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%94%A8%E8%BF%99%E4%BA%9B%E5%B0%8F%E4%BE%8B%E5%AD%90%E8%AE%A9%E4%BD%A0%E7%86%9F%E6%82%89webpack%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.</span> <span class="nav-text">入门(一起来用这些小例子让你熟悉webpack的配置)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">2.1.1.</span> <span class="nav-text">webpack 是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">2.1.2.</span> <span class="nav-text">webpack 的核心概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"><span class="nav-number">2.1.3.</span> <span class="nav-text">初始化项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.4.</span> <span class="nav-text">开始我们自己的配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEhtml%E6%A8%A1%E6%9D%BF"><span class="nav-number">2.1.5.</span> <span class="nav-text">配置html模板</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%9A%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E5%A6%82%E4%BD%95%E5%BC%80%E5%8F%91"><span class="nav-number">2.1.5.1.</span> <span class="nav-text">多入口文件如何开发</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#clean-webpack-plugin"><span class="nav-number">2.1.5.2.</span> <span class="nav-text">clean-webpack-plugin</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%8C%E6%9C%9Bdist%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%9F%90%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8D%E8%A2%AB%E6%B8%85%E7%A9%BA"><span class="nav-number">2.1.5.2.1.</span> <span class="nav-text">希望dist目录下某个文件夹不被清空</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E7%94%A8CSS"><span class="nav-number">2.1.6.</span> <span class="nav-text">引用CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BAcss%E6%B7%BB%E5%8A%A0%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E7%BC%80"><span class="nav-number">2.1.6.1.</span> <span class="nav-text">为css添加浏览器前缀</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AApostcss-config-js%E6%96%87%E4%BB%B6%EF%BC%8C%E9%85%8D%E7%BD%AE%E5%A6%82%E4%B8%8B%EF%BC%9A"><span class="nav-number">2.1.6.1.1.</span> <span class="nav-text">在项目根目录下创建一个postcss.config.js文件，配置如下：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E5%9C%A8webpack-config-js%E9%87%8C%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.6.1.2.</span> <span class="nav-text">直接在webpack.config.js里配置</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86css"><span class="nav-number">2.1.6.2.</span> <span class="nav-text">拆分css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86%E5%A4%9A%E4%B8%AAcss"><span class="nav-number">2.1.6.3.</span> <span class="nav-text">拆分多个css</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%93%E5%8C%85-%E5%9B%BE%E7%89%87%E3%80%81%E5%AD%97%E4%BD%93%E3%80%81%E5%AA%92%E4%BD%93%E3%80%81%E7%AD%89%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.7.</span> <span class="nav-text">打包 图片、字体、媒体、等文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%A8babel%E8%BD%AC%E4%B9%89js%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.8.</span> <span class="nav-text">用babel转义js文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BAvue%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.</span> <span class="nav-text">搭建vue开发环境</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90-vue%E6%96%87%E4%BB%B6"><span class="nav-number">2.2.1.</span> <span class="nav-text">解析.vue文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEwebpack-dev-server%E8%BF%9B%E8%A1%8C%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="nav-number">2.2.2.</span> <span class="nav-text">配置webpack-dev-server进行热更新</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4"><span class="nav-number">2.2.3.</span> <span class="nav-text">配置打包命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8C%BA%E5%88%86%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%8E%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.4.</span> <span class="nav-text">区分开发环境与生产环境</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%98%E5%8C%96webpack%E9%85%8D%E7%BD%AE"><span class="nav-number">2.3.</span> <span class="nav-text">优化webpack配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E9%80%9F%E5%BA%A6"><span class="nav-number">2.3.1.</span> <span class="nav-text">优化打包速度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%90%88%E7%90%86%E7%9A%84%E9%85%8D%E7%BD%AE-mode-%E5%8F%82%E6%95%B0%E4%B8%8E-devtool-%E5%8F%82%E6%95%B0"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">合理的配置 mode 参数与 devtool 参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%A9%E5%B0%8F%E6%96%87%E4%BB%B6%E7%9A%84%E6%90%9C%E7%B4%A2%E8%8C%83%E5%9B%B4-%E9%85%8D%E7%BD%AEinclude-exclude-alias-noParse-extensions"><span class="nav-number">2.3.1.2.</span> <span class="nav-text">缩小文件的搜索范围(配置include exclude alias noParse extensions)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HappyPack%E5%BC%80%E5%90%AF%E5%A4%9A%E8%BF%9B%E7%A8%8BLoader%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.1.3.</span> <span class="nav-text">使用HappyPack开启多进程Loader转换</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-webpack-parallel-uglify-plugin-%E5%A2%9E%E5%BC%BA%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9"><span class="nav-number">2.3.1.4.</span> <span class="nav-text">使用 webpack-parallel-uglify-plugin 增强代码压缩</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%BD%E7%A6%BB%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97"><span class="nav-number">2.3.1.5.</span> <span class="nav-text">抽离第三方模块</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E7%BC%93%E5%AD%98"><span class="nav-number">2.3.1.6.</span> <span class="nav-text">配置缓存</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF"><span class="nav-number">2.3.2.</span> <span class="nav-text">优化打包文件体积</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%95%E5%85%A5webpack-bundle-analyzer%E5%88%86%E6%9E%90%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6"><span class="nav-number">2.3.2.1.</span> <span class="nav-text">引入webpack-bundle-analyzer分析打包后的文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#externals"><span class="nav-number">2.3.2.2.</span> <span class="nav-text">externals</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Tree-shaking"><span class="nav-number">2.3.2.3.</span> <span class="nav-text">Tree-shaking</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack%E7%B3%BB%E5%88%97"><span class="nav-number">2.4.</span> <span class="nav-text">手写webpack系列</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99-webpack-loader"><span class="nav-number">2.4.1.</span> <span class="nav-text">手写 webpack loader</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#loader-%E7%BC%96%E5%86%99%E5%8E%9F%E5%88%99"><span class="nav-number">2.4.1.1.</span> <span class="nav-text">loader 编写原则</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack-plugin"><span class="nav-number">2.4.2.</span> <span class="nav-text">手写webpack plugin</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack5-0%E7%9A%84%E6%97%B6%E4%BB%A3"><span class="nav-number">2.5.</span> <span class="nav-text">webpack5.0的时代</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E9%98%85%E8%AF%BB"><span class="nav-number">2.6.</span> <span class="nav-text">更多阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/03/24/webpack-learning-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/webpack-learning-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/webpack-learning-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '78c6176931a2868712aa016424a17d2d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/03/source-code-react-diff/index.html b/2020/04/03/source-code-react-diff/index.html
new file mode 100644
index 0000000000..0bd8ce16ae
--- /dev/null
+++ b/2020/04/03/source-code-react-diff/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:type" content="article">
+<meta property="og:title" content="React 源码剖析系列 － 不可思议的 react diff【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/03/source-code-react-diff/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg">
+<meta property="og:image" content="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg">
+<meta property="article:published_time" content="2020-04-03T12:38:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="源码解析">
+<meta property="article:tag" content="React">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>React 源码剖析系列 － 不可思议的 react diff【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          React 源码剖析系列 － 不可思议的 react diff【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+<span id="more"></span>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，让用户可以无需顾忌性能问题而”任性自由”的刷新页面，让开发者也可以无需关心 Virtual DOM 背后的运作原理，因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染，因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。</p>
+<p><em><strong>行文至此，可能会有读者质疑：React 无非就是引入 diff 这一概念，且 diff 算法也并非其首创，何必吹嘘的如此天花乱坠呢？</strong></em></p>
+<p>其实，正是因为 diff 算法的普识度高，就更应该认可 React 针对 diff 算法优化所做的努力与贡献，更能体现 React 开发者们的魅力与智慧！</p>
+<h2 id="传统-diff-算法"><a href="#传统-diff-算法" class="headerlink" title="传统 diff 算法"></a>传统 diff 算法</h2><p>计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。<a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">传统 diff 算法</a>通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着如果要展示1000个节点，就要依次执行上十亿次的比较。这种指数型的性能消耗对于前端渲染场景来说代价太高了！现今的 CPU 每秒钟能执行大约30亿条指令，即便是最高效的实现，也不可能在一秒内计算出差异情况。</p>
+<p>如果 React 只是单纯的引入 diff 算法而没有任何的优化改进，那么其效率是远远无法满足前端渲染所要求的性能。</p>
+<p>因此，想要将 diff 思想引入 Virtual DOM，就需要设计一种稳定高效的 diff 算法，而 React 做到了！</p>
+<p>那么，React diff 到底是如何实现的呢？</p>
+<h2 id="详解-React-diff"><a href="#详解-React-diff" class="headerlink" title="详解 React diff"></a>详解 React diff</h2><p>传统 diff 算法的复杂度为 O(n^3)，显然这是无法满足性能要求的。<em><strong>React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。</strong></em></p>
+<h3 id="diff-策略"><a href="#diff-策略" class="headerlink" title="diff 策略"></a>diff 策略</h3><ol>
+<li>Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。</li>
+<li>拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。</li>
+<li>对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。</li>
+</ol>
+<p>基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。</p>
+<ul>
+<li>tree diff</li>
+<li>component diff</li>
+<li>element diff</li>
+</ul>
+<blockquote>
+<p>本文中源码 <a target="_blank" rel="noopener" href="https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactMultiChild.js">ReactMultiChild.js</a></p>
+</blockquote>
+<h3 id="tree-diff"><a href="#tree-diff" class="headerlink" title="tree diff"></a>tree diff</h3><p>基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。</p>
+<p>既然 DOM 节点跨层级的移动操作少到可以忽略不计，针对这一现象，React 通过 updateDepth 对 Virtual DOM 树进行层级控制，只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。</p>
+<p><img src="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg" alt="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  updateDepth++;</span><br><span class="line">  <span class="keyword">var</span> errorThrown = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>._updateChildren(nextNestedChildrenElements, transaction, context);</span><br><span class="line">    errorThrown = <span class="literal">false</span>;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    updateDepth--;</span><br><span class="line">    <span class="keyword">if</span> (!updateDepth) &#123;</span><br><span class="line">      <span class="keyword">if</span> (errorThrown) &#123;</span><br><span class="line">        clearQueue();</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        processQueue();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>分析至此，<em><strong>大部分人可能都存在这样的疑问：如果出现了 DOM 节点跨层级的移动操作，React diff 会有怎样的表现呢？</strong></em>是的，对此我也好奇不已，不如试验一番。</p>
+<p>如下图，A 节点（包括其子节点）整个被移动到 D 节点下，由于 React 只会简单的考虑同层级节点的位置变换，而对于不同层级的节点，只有创建和删除操作。当根节点发现子节点中 A 消失了，就会直接销毁 A；当 D 发现多了一个子节点 A，则会创建新的 A（包括子节点）作为其子节点。此时，React diff 的执行情况：<em><strong>create A -&gt; create B -&gt; create C -&gt; delete A</strong></em>。</p>
+<p>由此可发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是以 A 为根节点的树被整个重新创建，这是一种影响 React 性能的操作，<em><strong>因此 React 官方建议不要进行 DOM 节点跨层级的操作</strong></em>。</p>
+<blockquote>
+<p>注意：在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg" alt="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg"></p>
+<h3 id="component-diff"><a href="#component-diff" class="headerlink" title="component diff"></a>component diff</h3><p>React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。</p>
+<ul>
+<li>如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。</li>
+<li>如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。</li>
+<li>对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。</li>
+</ul>
+<p>如下图，当 component D 改变为 component G 时，即使这两个 component 结构相似，一旦 React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，而是直接删除 component D，重新创建 component G 以及其子节点。虽然当两个 component 是不同类型但结构相似时，React diff 会影响性能，但正如 React 官方博客所言：不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。</p>
+<p><img src="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg" alt="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg"></p>
+<h3 id="element-diff"><a href="#element-diff" class="headerlink" title="element diff"></a>element diff</h3><p>当节点处于同一层级时，React diff 提供了三种节点操作，分别为：<em><strong>INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）</strong></em>。</p>
+<ul>
+<li><p><em><strong>INSERT_MARKUP</strong></em> ，新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。</p>
+</li>
+<li><p><em><strong>MOVE_EXISTING</strong></em> ，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。</p>
+</li>
+<li><p><em><strong>REMOVE_NODE</strong></em> ，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。</p>
+</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueInsertMarkup</span>(<span class="params">parentInst, markup, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,</span><br><span class="line">    markupIndex: markupQueue.push(markup) - <span class="number">1</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: <span class="literal">null</span>,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueMove</span>(<span class="params">parentInst, fromIndex, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueRemove</span>(<span class="params">parentInst, fromIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.REMOVE_NODE,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: <span class="literal">null</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如下图，老集合中包含节点：A、B、C、D，更新后的新集合中包含节点：B、A、D、C，此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。</p>
+<p><img src="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg" alt="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg"></p>
+<p>React 发现这类操作繁琐冗余，因为这些都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。</p>
+<p>针对这一现象，React 提出优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，虽然只是小小的改动，性能上却发生了翻天覆地的变化！</p>
+<p>新老集合所包含的节点，如下图所示，新老集合进行 diff 差异化对比，通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置，此时 React 给出的 diff 结果为：B、D 不做任何操作，A、C 进行移动操作，即可。</p>
+<p><img src="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg" alt="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg"></p>
+<p>那么，如此高效的 diff 到底是如何运作的呢？让我们通过源码进行详细分析。</p>
+<p>首先对新集合的节点进行循环遍历，for (name in nextChildren)，通过唯一 key 可以判断新老集合中是否存在相同的节点，if (prevChild === nextChild)，如果存在相同节点，则进行移动操作，但在移动前需要将当前节点在老集合中的位置与 lastIndex 进行比较，if (child._mountIndex &lt; lastIndex)，则进行节点移动操作，否则不执行该操作。这是一种顺序优化手段，lastIndex 一直在更新，表示访问过的节点在老集合中最右的位置（即最大的位置），如果新集合中当前访问的节点比 lastIndex 大，说明当前访问节点在老集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不用添加到差异队列中，即不执行移动操作，只有当访问的节点比 lastIndex 小时，才需要进行移动操作。</p>
+<p>以上图为例，可以更为清晰直观的描述 diff 的差异对比过程：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，通过对比节点位置判断是否进行移动操作，B 在老集合中的位置 B._mountIndex = 1，此时 lastIndex = 0，不满足 child._mountIndex &lt; lastIndex 的条件，因此不对 B 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，其中 prevChild._mountIndex 表示 B 在老集合中的位置，则 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置prevChild._mountIndex = nextIndex，此时新集合中 B._mountIndex = 0，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，通过对比节点位置判断是否进行移动操作，A 在老集合中的位置 A._mountIndex = 0，此时 lastIndex = 1，满足 child._mountIndex &lt; lastIndex的条件，因此对 A 进行移动操作enqueueMove(this, child._mountIndex, toIndex)，其中 toIndex 其实就是 nextIndex，表示 A 需要移动到的位置；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 1，并将 A 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中A._mountIndex = 1，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 D，判断老集合中存在相同节点 D，通过对比节点位置判断是否进行移动操作，D 在老集合中的位置 D._mountIndex = 3，此时 lastIndex = 1，不满足 child._mountIndex &lt; lastIndex的条件，因此不对 D 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 D 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中D._mountIndex = 2，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，通过对比节点位置判断是否进行移动操作，C 在老集合中的位置 C._mountIndex = 2，此时 lastIndex = 3，满足 child._mountIndex &lt; lastIndex 的条件，因此对 C 进行移动操作 enqueueMove(this, child._mountIndex, toIndex)；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 C 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中 C._mountIndex = 3，nextIndex++ 进入下一个节点的判断，由于 C 已经是最后一个节点，因此 diff 到此完成。</p>
+</li>
+</ul>
+<p>以上主要分析新老集合中存在相同节点但位置不同时，对节点进行位置移动的情况，如果新集合中有新加入的节点且老集合存在需要删除的节点，那么 React diff 又是如何对比运作的呢？</p>
+<p>以下图为例：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，由于 B 在老集合中的位置 B._mountIndex = 1，此时lastIndex = 0，因此不对 B 进行移动操作；更新 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置B._mountIndex = 0，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 E，判断老集合中不存在相同节点 E，则创建新节点 E；更新 lastIndex ＝ 1，并将 E 的位置更新为新集合中的位置，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，由于 C 在老集合中的位置C._mountIndex = 2，lastIndex = 1，此时 C._mountIndex &gt; lastIndex，因此不对 C 进行移动操作；更新 lastIndex ＝ 2，并将 C 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，由于 A 在老集合中的位置A._mountIndex = 0，lastIndex = 2，此时 A._mountIndex &lt; lastIndex，因此对 A 进行移动操作；更新 lastIndex ＝ 2，并将 A 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>当完成新集合中所有节点 diff 时，最后还需要对老集合进行循环遍历，判断是否存在新集合中没有但老集合中仍存在的节点，发现存在这样的节点 D，因此删除节点 D，到此 diff 全部完成。</p>
+</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg" alt="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line">_updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prevChildren = <span class="built_in">this</span>._renderedChildren;</span><br><span class="line">  <span class="keyword">var</span> nextChildren = <span class="built_in">this</span>._reconcilerUpdateChildren(</span><br><span class="line">    prevChildren, nextNestedChildrenElements, transaction, context</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">if</span> (!nextChildren &amp;&amp; !prevChildren) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> name;</span><br><span class="line">  <span class="keyword">var</span> lastIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> nextIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> nextChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!nextChildren.hasOwnProperty(name)) &#123;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> prevChild = prevChildren &amp;&amp; prevChildren[name];</span><br><span class="line">    <span class="keyword">var</span> nextChild = nextChildren[name];</span><br><span class="line">    <span class="keyword">if</span> (prevChild === nextChild) &#123;</span><br><span class="line">      <span class="comment">// 移动节点</span></span><br><span class="line">      <span class="built_in">this</span>.moveChild(prevChild, nextIndex, lastIndex);</span><br><span class="line">      lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">      prevChild._mountIndex = nextIndex;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (prevChild) &#123;</span><br><span class="line">        lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">        <span class="comment">// 删除节点</span></span><br><span class="line">        <span class="built_in">this</span>._unmountChild(prevChild);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 初始化并创建节点</span></span><br><span class="line">      <span class="built_in">this</span>._mountChildAtIndex(</span><br><span class="line">        nextChild, nextIndex, transaction, context</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">    nextIndex++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> prevChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (prevChildren.hasOwnProperty(name) &amp;&amp;</span><br><span class="line">        !(nextChildren &amp;&amp; nextChildren.hasOwnProperty(name))) &#123;</span><br><span class="line">      <span class="built_in">this</span>._unmountChild(prevChildren[name]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">this</span>._renderedChildren = nextChildren;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 移动节点</span></span><br><span class="line">moveChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, toIndex, lastIndex</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (child._mountIndex &lt; lastIndex) &#123;</span><br><span class="line">    <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">    enqueueMove(<span class="built_in">this</span>, child._mountIndex, toIndex);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 创建节点</span></span><br><span class="line">createChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, mountImage</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueInsertMarkup(<span class="built_in">this</span>, mountImage, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 删除节点</span></span><br><span class="line">removeChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueRemove(<span class="built_in">this</span>, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_unmountChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.removeChild(child);</span><br><span class="line">  child._mountIndex = <span class="literal">null</span>;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_mountChildAtIndex: <span class="function"><span class="keyword">function</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  child,</span></span></span><br><span class="line"><span class="function"><span class="params">  index,</span></span></span><br><span class="line"><span class="function"><span class="params">  transaction,</span></span></span><br><span class="line"><span class="function"><span class="params">  context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> mountImage = ReactReconciler.mountComponent(</span><br><span class="line">    child,</span><br><span class="line">    transaction,</span><br><span class="line">    <span class="built_in">this</span>,</span><br><span class="line">    <span class="built_in">this</span>._nativeContainerInfo,</span><br><span class="line">    context</span><br><span class="line">  );</span><br><span class="line">  child._mountIndex = index;</span><br><span class="line">  <span class="built_in">this</span>.createChild(child, mountImage);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<p>当然，React diff 还是存在些许不足与待优化的地方，如下图所示，若新集合的节点更新为：D、A、B、C，与老集合对比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在老集合的位置是最大的，导致其他节点的 _mountIndex &lt; lastIndex，造成 D 没有执行移动操作，而是 A、B、C 全部移动到 D 节点后面的现象。</p>
+<p><em><strong>在此，读者们可以讨论思考：如何优化上述问题？</strong></em></p>
+<blockquote>
+<p>建议：在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg" alt="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg"></p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li>React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；</li>
+<li>React 通过<em><strong>分层求异</strong></em>的策略，对 <em><strong>tree diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>相同类生成相似树形结构，不同类生成不同树形结构</strong></em>的策略，对 <em><strong>component diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>设置唯一 key</strong></em>的策略，对 <em><strong>element diff</strong></em> 进行算法优化；</li>
+<li>建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；</li>
+<li>建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</li>
+</ul>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">A Survey on Tree Edit Distance and Related Problems</a><br><a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/reconciliation.html">Reconciliation</a></p>
+<p>如果本文能够为你解决些许关于 React diff 算法的疑惑，请点个赞吧！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/03/source-code-react-diff/">React 源码剖析系列 － 不可思议的 react diff【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月03日 - 12:38</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/03/source-code-react-diff/" title="React 源码剖析系列 － 不可思议的 react diff【转载】">https://blog.lifesli.com/2020/04/03/source-code-react-diff/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/03/source-code-react-diff/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" rel="tag"># 源码解析</a>
+              <a href="/tags/React/" rel="tag"># React</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/03/24/webpack-learning-1/" rel="prev" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      <i class="fa fa-chevron-left"></i> 2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/07/webpack-uglifyjsplugin/" rel="next" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F-diff-%E7%AE%97%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">传统 diff 算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%A6%E8%A7%A3-React-diff"><span class="nav-number">1.2.</span> <span class="nav-text">详解 React diff</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#diff-%E7%AD%96%E7%95%A5"><span class="nav-number">1.2.1.</span> <span class="nav-text">diff 策略</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tree-diff"><span class="nav-number">1.2.2.</span> <span class="nav-text">tree diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#component-diff"><span class="nav-number">1.2.3.</span> <span class="nav-text">component diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#element-diff"><span class="nav-number">1.2.4.</span> <span class="nav-text">element diff</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.4.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/03/source-code-react-diff/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/03/source-code-react-diff/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/03/source-code-react-diff/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8cc72ca8520e7769a9a250d72031702c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/07/Electron-Offline-Build/index.html b/2020/04/07/Electron-Offline-Build/index.html
new file mode 100644
index 0000000000..bd16abe064
--- /dev/null
+++ b/2020/04/07/Electron-Offline-Build/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="国内配置Electron开发环境的正确方式【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-04-07T18:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>国内配置Electron开发环境的正确方式【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          国内配置Electron开发环境的正确方式【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+<span id="more"></span>
+<p><a target="_blank" rel="noopener" href="https://blog.yasking.org/a/zh-install-electron-development-2020.html">转载</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/07/Electron-Offline-Build/">国内配置Electron开发环境的正确方式【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 18:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/07/Electron-Offline-Build/" title="国内配置Electron开发环境的正确方式【转载】">https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/07/webpack-uglifyjsplugin/" rel="prev" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      <i class="fa fa-chevron-left"></i> Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/15/talk-about-full-stack-big-fd/" rel="next" title="前端全栈和大前端有啥区别">
+      前端全栈和大前端有啥区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/07/Electron-Offline-Build/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/Electron-Offline-Build/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/Electron-Offline-Build/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '08f56a93e955124bd2137e89395ad3cb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/07/webpack-uglifyjsplugin/index.html b/2020/04/07/webpack-uglifyjsplugin/index.html
new file mode 100644
index 0000000000..5e6d77a9bc
--- /dev/null
+++ b/2020/04/07/webpack-uglifyjsplugin/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+<meta property="og:image" content="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/">
+<meta property="article:published_time" content="2020-04-07T11:22:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="UglifyJsPlugin">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+<span id="more"></span>
+
+<h2 id="UglifyJsPlugin"><a href="#UglifyJsPlugin" class="headerlink" title="UglifyJsPlugin"></a>UglifyJsPlugin</h2><p>关于 UglifyJsPlugin 的介绍，在 webpack 的官网上有这样一段描述 </p>
+<blockquote>
+<p>ℹ️ webpack =&lt; v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0</p>
+</blockquote>
+<p>简单来说就是在 webpack3.0 之前，引入了这个插件的0.4.6版本，并用 webpack.optimize.UglifyJsPlugin 作为它的别名， 在 webpack4.0 中引入了插件的 1.0.0 版本，用了同样的名称作为别名，用的时候请注意。</p>
+<p>那么“这个插件”是什么呢， webpack 的官网也告诉我们了，那就是<img src="https://github.com/mishoo/UglifyJS2/tree/harmony" alt="UglifyJS"></p>
+<blockquote>
+<p>A JavaScript parser, mangler/compressor and beautifier toolkit for ES6+.</p>
+</blockquote>
+<p>翻译过来就是“一个用于ES6+的JavaScript解析器、（榨汁机：翻译的挺有意思）/压缩机和美化工具。”</p>
+<p>再简单点说 uglifyJsPlugin 用来对js文件进行压缩，减小js文件的大小。<em><strong>其会拖慢webpack的编译速度，建议开发环境时关闭，生产环境再将其打开。</strong></em></p>
+<p>要用它的的话记得先安装</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>安装完成就可以用了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> UglifyJsPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>当然他有很多的选项，具体想了解可以去 webpack 官网，或者去插件官网都可以找到<img src="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/" alt="uglifyjs-webpack-plugin"></p>
+<p>当然知道你们懒的去看了，心里肯定也在说“直接给我个现成的配置他不香么？”，别急嘛，这就给你们</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">    <span class="comment">//删除注释</span></span><br><span class="line">    output:&#123;</span><br><span class="line">        comments:<span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//删除console 和 debugger  删除警告</span></span><br><span class="line">    compress:&#123;</span><br><span class="line">        warnings:<span class="literal">false</span>,</span><br><span class="line">        drop_debugger:<span class="literal">true</span>,</span><br><span class="line">        drop_console:<span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>当然版本间可能会有些差别，但是option是不变的，有调整的话各位自行调整一下。<br>公司用的 vue-cli3 所以这里再给出个 vue-cli3 默认配置文件下的写法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"></span><br><span class="line">configureWebpack:&#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line">        minimizer: [</span><br><span class="line">            <span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">                uglifyOptions: &#123;</span><br><span class="line">                    <span class="comment">// 删除注释</span></span><br><span class="line">                    output:&#123;</span><br><span class="line">                      comments:<span class="literal">false</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="comment">// 删除console debugger 删除警告</span></span><br><span class="line">                    compress: &#123;</span><br><span class="line">                      warnings: <span class="literal">false</span>,</span><br><span class="line">                      drop_console: <span class="literal">true</span>,<span class="comment">//console</span></span><br><span class="line">                      drop_debugger: <span class="literal">false</span>,</span><br><span class="line">                      pure_funcs: [<span class="string">&#x27;console.log&#x27;</span>]<span class="comment">//移除console</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="问题收集"><a href="#问题收集" class="headerlink" title="问题收集"></a>问题收集</h2><ol>
+<li>运行出现报错 UglifyJs</li>
+</ol>
+<blockquote>
+<p>Q: DefaultsError: warnings is not a supported option</p>
+</blockquote>
+<blockquote>
+<p>A: 降低版本(使用 “uglifyjs-webpack-plugin”: “^1.1.1”)，打包正常，效果达到</p>
+</blockquote>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/07/webpack-uglifyjsplugin/">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/07/webpack-uglifyjsplugin/" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/UglifyJsPlugin/" rel="tag"># UglifyJsPlugin</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/03/source-code-react-diff/" rel="prev" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      <i class="fa fa-chevron-left"></i> React 源码剖析系列 － 不可思议的 react diff【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/07/Electron-Offline-Build/" rel="next" title="国内配置Electron开发环境的正确方式【转载】">
+      国内配置Electron开发环境的正确方式【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#UglifyJsPlugin"><span class="nav-number">1.1.</span> <span class="nav-text">UglifyJsPlugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%94%B6%E9%9B%86"><span class="nav-number">1.2.</span> <span class="nav-text">问题收集</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '02d0c7963642411bc8fae57cbc8f0f1e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/15/node-sass-slow-problem/index.html b/2020/04/15/node-sass-slow-problem/index.html
new file mode 100644
index 0000000000..98fe791488
--- /dev/null
+++ b/2020/04/15/node-sass-slow-problem/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何解决npm安装node-sass依赖慢的情况">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-04-15T23:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="sass">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>如何解决npm安装node-sass依赖慢的情况 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何解决npm安装node-sass依赖慢的情况
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+<span id="more"></span>
+
+<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在使用sass时要安装node-sass包，但是这个npm包安装不尽慢的要命，下载下来之后还要进行编译，编译环境不合适或者网速不好的时候，光为了这个包的使用花上个把小时绝对正常，记得第一次折腾他用了小半天的时间。</p>
+<p>那么有没有什么方法可以解决这个问题呢？</p>
+<p>有痛点就会有人想办法解决，但是包名已经占用了，想用的话还是要有点配置的代价，但总好过编译和下载</p>
+<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>首先我这里假设你是知道 yarn 这个工具的，对的，接下来我们要用 yarn 进行安装，但是安装的不是 node-sass ，而是一个叫做 node-sass-install 的这个包， 安装他的话就不用在安装 node-sass 这个包了，通常来说安装这个包不会超过10s ， 当然网速不好的话超过10s了也别怪我，总之要比装 node-sass 要快上很多，命令如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add node-sass-install</span><br></pre></td></tr></table></figure>
+<p>是不是很简单，当然如果你觉得为了安装 node-sass 还要再装个 yarn （鄙视你居然不用 yarn ），那你也可以用 npm 安装，命令稍有不同，长了一点</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass-install -D</span><br><span class="line">npx node-sass-install</span><br></pre></td></tr></table></figure>
+<p>比 yarn 多了一条命令，那么他为啥这么神奇呢，且听我分析一下</p>
+<h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>这个 node-sass-install 其实只是在 package.json 的 dependencies 中做了一些配置，如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;dependencies&quot;</span>:&#123;</span><br><span class="line">    <span class="string">&quot;node-sass&quot;</span>:<span class="string">&quot;npm:dart-sass@latest&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面这个配置的意思是，当你安装 node-sass-install 的时候，会依赖并下载 dart-sass， 然后起了个别名叫做 node-sass。偷梁换柱，狸猫换太子了，哈哈。<br>所以的所以呢，如果你在项目中用到 sass 的话建议你尝试一下新方法，说不定更香呢～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/15/node-sass-slow-problem/">如何解决npm安装node-sass依赖慢的情况</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 23:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/15/node-sass-slow-problem/" title="如何解决npm安装node-sass依赖慢的情况">https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/sass/" rel="tag"># sass</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/15/talk-about-full-stack-big-fd/" rel="prev" title="前端全栈和大前端有啥区别">
+      <i class="fa fa-chevron-left"></i> 前端全栈和大前端有啥区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/16/0-vuecli-3-component/" rel="next" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.2.</span> <span class="nav-text">解决方案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.3.</span> <span class="nav-text">原理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/15/node-sass-slow-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/node-sass-slow-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/node-sass-slow-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a002d6bc9795fc826461139573aa5be6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/15/talk-about-full-stack-big-fd/index.html b/2020/04/15/talk-about-full-stack-big-fd/index.html
new file mode 100644
index 0000000000..23b66872da
--- /dev/null
+++ b/2020/04/15/talk-about-full-stack-big-fd/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端全栈和大前端有啥区别">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+<meta property="article:published_time" content="2020-04-15T15:59:00.000Z">
+<meta property="article:modified_time" content="2020-04-15T15:51:22.987Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端全栈和大前端有啥区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端全栈和大前端有啥区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-04-15 15:59:00 / 修改时间：15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+<a id="more"></a>
+
+<h2 id="狼叔说"><a href="#狼叔说" class="headerlink" title="狼叔说"></a>狼叔说</h2><p>狼叔在解答这个疑问之前直接上了一张图，图我贴在下面供大家看一下<br><img src="https://s1.ax1x.com/2020/04/15/JicTqe.jpg" alt="JicTqe.jpg"><br>这么一张图实际上已经胜过千言了，但是为了方便大家理解，狼叔还是在下面对图进行了解释</p>
+<blockquote>
+<p>前端全栈：分node全栈和其他语言全栈，比如ror搞全栈是最早的，其他php、java也有，不过纯前端的不过，在react，angular之前搞后台还是可以的。<br>所以前端全栈，我理解是等同于node全栈的。node本身是做后端的，但在前端工程化和BFF领域大放异彩，所以node全栈涵盖了前端的方方面面，是比较合理的解释。<br>大前端：更泛化的概念，移动互联网时代开启后，hybrid曾经很火，基于h5和webview做跨端，确实是很理想的做法，但复杂交互搞不定，机器性能网络等是硬伤，所以后来出现了rn和weex，整体还是前端写法，所以hybrid里前端也是占了一定的开发，结合之前前端和node的关系，综合3者：1）app里的前端，2）前端，2）node全栈，统称为大前端。这里的”大“含义是可以做的事儿的范围更广，触达前后端移动端，对前端职责有明显提升。随着技术发展，基于electron的桌面开发也日进流程，ott和iot等领域采用js也愈来愈多，所以只要和用户直接触达的端采用了前端技术开发的都涵盖在大前端范畴内。</p>
+</blockquote>
+<p><a href="https://www.zhihu.com/question/379563850/answer/1152553428" target="_blank" rel="noopener">原帖地址</a></p>
+<h2 id="我说"><a href="#我说" class="headerlink" title="我说"></a>我说</h2><p>之前我的概念里前端扩展开来再进一步的话分两个方向，一个叫全栈另一个叫全端，‘栈’的话是纵向的，简单理解的话就是一款产品一个人能从设计到前端实现后端实现运维等一个人搞定，那么他就可以称之为全栈，狭义一点理解，就是前端后端都会，那么这里所说的前端全栈，我理解是更方便前端掌握的一些后端技能如node、php、ror等，而不是java这种后端技能，所以叫前端全栈，我想这里大部分指的都是node作为后端；</p>
+<p>那么我理解的全端是什么呢</p>
+<p>‘端’我理解为容器，任何跟用户直接接触的技术都是端的技术，早期的pc端，后来的手机端，手机端里又出现了h5、hybrid、native这么几种，后来又出现了小程序之类的容器，pc端也出现了如electron等客户端技术，那么随着物联网智能家居的出现，更多的端出现了，就如狼叔说的OTT和IOT领域也成了端，大前端的大是指范围广，属于用户直达所承载内容容器的都是端。</p>
+<p>总的来说跟狼叔的理解一致，我个人也努力在往全栈全端发展，不过真的好难还有很长的路要走。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/15/talk-about-full-stack-big-fd/">前端全栈和大前端有啥区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 15:59</p>
+      <p><span>最后更新:</span>2020年04月15日 - 15:51</p>
+      <p><span>原始链接:</span><a href="/2020/04/15/talk-about-full-stack-big-fd/" title="前端全栈和大前端有啥区别">https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/07/Electron-Offline-Build/" rel="prev" title="国内配置Electron开发环境的正确方式【转载】">
+      <i class="fa fa-chevron-left"></i> 国内配置Electron开发环境的正确方式【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/15/node-sass-slow-problem/" rel="next" title="如何解决npm安装node-sass依赖慢的情况">
+      如何解决npm安装node-sass依赖慢的情况 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8B%BC%E5%8F%94%E8%AF%B4"><span class="nav-number">1.1.</span> <span class="nav-text">狼叔说</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E8%AF%B4"><span class="nav-number">1.2.</span> <span class="nav-text">我说</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2e8d9b7e1235e8d6ec905e6d4c8df17a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/16/0-vuecli-3-component/index.html b/2020/04/16/0-vuecli-3-component/index.html
new file mode 100644
index 0000000000..88d7431c02
--- /dev/null
+++ b/2020/04/16/0-vuecli-3-component/index.html
@@ -0,0 +1,678 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="打包">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><p>如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。</p>
+<ul>
+<li>Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库</li>
+<li>npm：组件库将存放在npm</li>
+<li>webpack：修改配置需要一点 webapck 的知识。</li>
+</ul>
+<h2 id="二、大纲"><a href="#二、大纲" class="headerlink" title="二、大纲"></a>二、大纲</h2><p>想要搭建一个组件库，我们必须先要有一个大概的思路。</p>
+<ol>
+<li>规划目录结构</li>
+<li>配置项目以支持目录结构</li>
+<li>编写组件</li>
+<li>编写示例</li>
+<li>配置使用库模式打包编译</li>
+<li>发布到npm</li>
+</ol>
+<h2 id="三、规划目录结构"><a href="#三、规划目录结构" class="headerlink" title="三、规划目录结构"></a>三、规划目录结构</h2><h3 id="1、创建项目"><a href="#1、创建项目" class="headerlink" title="1、创建项目"></a>1、创建项目</h3><p>在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vue create .</span><br></pre></td></tr></table></figure>
+<h3 id="2、调整目录"><a href="#2、调整目录" class="headerlink" title="2、调整目录"></a>2、调整目录</h3><p>我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">...</span><br><span class="line">|-- examples      <span class="comment">// 原 src 目录，改成 examples 用作示例展示</span></span><br><span class="line">|-- packages      <span class="comment">// 新增 packages 用于编写存放组件</span></span><br><span class="line">...</span><br><span class="line">.</span><br></pre></td></tr></table></figure>
+<h2 id="四、配置项目以支持新的目录结构"><a href="#四、配置项目以支持新的目录结构" class="headerlink" title="四、配置项目以支持新的目录结构"></a>四、配置项目以支持新的目录结构</h2><p>我们通过上一步的目录改造后，会遇到两个问题。</p>
+<ol>
+<li>src目录更名为examples，导致项目无法运行</li>
+<li>新增packages目录，该目录未加入webpack编译</li>
+</ol>
+<p><strong>注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。</strong></p>
+<h3 id="1、重新配置入口，修改配置中的-pages-选项"><a href="#1、重新配置入口，修改配置中的-pages-选项" class="headerlink" title="1、重新配置入口，修改配置中的 pages 选项"></a>1、重新配置入口，修改配置中的 pages 选项</h3><p>新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。</p>
+<p>这里使用 pages 修改入口到 examples</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项"><a href="#2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项" class="headerlink" title="2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项"></a>2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</h3><p>packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。</p>
+<p>chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">  chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.module</span><br><span class="line">      .rule(<span class="string">&#x27;js&#x27;</span>)</span><br><span class="line">      .include</span><br><span class="line">        .add(<span class="string">&#x27;packages&#x27;</span>)</span><br><span class="line">        .end()</span><br><span class="line">      .use(<span class="string">&#x27;babel&#x27;</span>)</span><br><span class="line">        .loader(<span class="string">&#x27;babel-loader&#x27;</span>)</span><br><span class="line">        .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 修改它的选项...</span></span><br><span class="line">          <span class="keyword">return</span> options</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7">链式操作</a><br><a target="_blank" rel="noopener" href="https://github.com/neutrinojs/webpack-chain">webpack-chain</a></p>
+<h2 id="五、编写组件"><a href="#五、编写组件" class="headerlink" title="五、编写组件"></a>五、编写组件</h2><p>以上我们已配置好对新目录架构的支持，接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。<br><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">GitHub - 颜色选择器：vcolorpicker</a></p>
+<h3 id="1-创建一个新组件"><a href="#1-创建一个新组件" class="headerlink" title="1. 创建一个新组件"></a>1. 创建一个新组件</h3><ol>
+<li>在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/</li>
+<li>在 color-picker/ 目录下创建 src/ 目录存储组件源码</li>
+<li>在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。<br>修改 /packages/color-picker/index.js文件，对外提供引用。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/color-picker/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件，组件必须声明 name</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./src/color-picker.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">colorPicker = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  Vue.component(colorPicker.name, colorPicker)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> colorPicker</span><br></pre></td></tr></table></figure>
+<h3 id="2-整合所有的组件，对外导出，即一个完整的组件库"><a href="#2-整合所有的组件，对外导出，即一个完整的组件库" class="headerlink" title="2. 整合所有的组件，对外导出，即一个完整的组件库"></a>2. 整合所有的组件，对外导出，即一个完整的组件库</h3><p>修改 /packages/index.js 文件，对整个组件库进行导出。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入颜色选择器组件</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./color-picker&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">  colorPicker</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否安装</span></span><br><span class="line">  <span class="keyword">if</span> (install.installed) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">  components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&#x27;undefined&#x27;</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">  install(<span class="built_in">window</span>.Vue)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">  install,</span><br><span class="line">  <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">  colorPicker</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="六、编写示例"><a href="#六、编写示例" class="headerlink" title="六、编写示例"></a>六、编写示例</h2><h3 id="1、在示例中导入组件库"><a href="#1、在示例中导入组件库" class="headerlink" title="1、在示例中导入组件库"></a>1、在示例中导入组件库</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件库</span></span><br><span class="line"><span class="keyword">import</span> ColorPicker <span class="keyword">from</span> <span class="string">&#x27;./../packages/index&#x27;</span></span><br><span class="line"><span class="comment">// 注册组件库</span></span><br><span class="line">Vue.use(ColorPicker)</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<h3 id="2、在示例中使用组件库中的组件"><a href="#2、在示例中使用组件库中的组件" class="headerlink" title="2、在示例中使用组件库中的组件"></a>2、在示例中使用组件库中的组件</h3><p>在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> v-on:change=<span class="string">&quot;headleChangeColor&quot;</span>&gt;&lt;/colorPicker&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	data () &#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	methods: &#123;</span><br><span class="line">		headleChangeColor () &#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;颜色改变&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<h2 id="七、发布到-npm，方便直接在项目中引用"><a href="#七、发布到-npm，方便直接在项目中引用" class="headerlink" title="七、发布到 npm，方便直接在项目中引用"></a>七、发布到 npm，方便直接在项目中引用</h2><p>到此为止我们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用。</p>
+<h3 id="1、package-js-中新增一条编译为库的命令"><a href="#1、package-js-中新增一条编译为库的命令" class="headerlink" title="1、package.js 中新增一条编译为库的命令"></a>1、package.js 中新增一条编译为库的命令</h3><p>在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。</p>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93">Vue Cli3 构建目标：库</a></p>
+<p>以下我们在 scripts 中新增一条命令</p>
+<ul>
+<li>–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。</li>
+<li>–dest : 输出目录，默认 dist。这里我们改成 lib</li>
+<li>[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;script&quot;</span>: &#123;</span><br><span class="line">	<span class="comment">// ...</span></span><br><span class="line">	<span class="string">&quot;lib&quot;</span>: <span class="string">&quot;vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ul>
+<p><strong>执行编译库命令</strong></p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run lib</span><br></pre></td></tr></table></figure>
+<h3 id="2、配置-package-json-文件中发布到-npm-的字段"><a href="#2、配置-package-json-文件中发布到-npm-的字段" class="headerlink" title="2、配置 package.json 文件中发布到 npm 的字段"></a>2、配置 package.json 文件中发布到 npm 的字段</h3><ul>
+<li>name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。</li>
+<li>version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。</li>
+<li>description: 描述。</li>
+<li>main: 入口文件，该字段需指向我们最终编译后的包文件。</li>
+<li>keyword：关键字，以空格分离希望用户最终搜索的词。</li>
+<li>author：作者</li>
+<li>private：是否私有，需要修改为 false 才能发布到 npm</li>
+<li>license： 开源协议</li>
+</ul>
+<p>以下为参考设置</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;vcolorpicker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.1.5&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;description&quot;</span>: <span class="string">&quot;基于 Vue 的颜色选择器&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;lib/vcolorpicker.umd.min.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;keyword&quot;</span>: <span class="string">&quot;vcolorpicker colorpicker color-picker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">false</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
+<h3 id="3、添加-npmignore-文件，设置忽略发布文件"><a href="#3、添加-npmignore-文件，设置忽略发布文件" class="headerlink" title="3、添加 .npmignore 文件，设置忽略发布文件"></a>3、添加 .npmignore 文件，设置忽略发布文件</h3><p>我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。</p>
+<p>和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 忽略目录</span></span><br><span class="line">examples/</span><br><span class="line">packages/</span><br><span class="line">public/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽略指定文件</span></span><br><span class="line">vue.config.js</span><br><span class="line">babel.config.js</span><br><span class="line">*.map</span><br></pre></td></tr></table></figure>
+<h3 id="4、登录到-npm"><a href="#4、登录到-npm" class="headerlink" title="4、登录到 npm"></a>4、登录到 npm</h3><p>首先需要到 npm 上注册一个账号，注册过程略。</p>
+<p>如果配置了淘宝镜像，先设置回npm镜像：</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm config <span class="built_in">set</span> registry http://registry.npmjs.org</span><br></pre></td></tr></table></figure>
+<p>然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm login</span><br></pre></td></tr></table></figure>
+
+<h3 id="5、发布到-npm"><a href="#5、发布到-npm" class="headerlink" title="5、发布到 npm"></a>5、发布到 npm</h3><p>执行发布命令，发布组件到 npm</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm publish</span><br></pre></td></tr></table></figure>
+
+<h3 id="6、发布成功"><a href="#6、发布成功" class="headerlink" title="6、发布成功"></a>6、发布成功</h3><p>发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker</p>
+<h3 id="7、使用新发布的组件库"><a href="#7、使用新发布的组件库" class="headerlink" title="7、使用新发布的组件库"></a>7、使用新发布的组件库</h3><p>安装</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install vcolorpicker -S</span><br></pre></td></tr></table></figure>
+<p>使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 main.js 引入并注册</span></span><br><span class="line"><span class="keyword">import</span> vcolorpicker <span class="keyword">from</span> <span class="string">&#x27;vcolorpicker&#x27;</span></span><br><span class="line">Vue.use(vcolorpicker)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在组件中使用</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<p>暂时没有做包含多个组件的时候的按需加载，以后研究了再补充。</p>
+<h2 id="八、项目地址"><a href="#八、项目地址" class="headerlink" title="八、项目地址"></a>八、项目地址</h2><p><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">Github 地址：https://github.com/zuley/vue-color-picker</a><br><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vcolorpicker">npm 地址：https://www.npmjs.com/package/vcolorpicker</a><br><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">DEMO 演示：http://vue-color-picker.rxshc.com</a></p>
+<h2 id="九、参考文章"><a href="#九、参考文章" class="headerlink" title="九、参考文章"></a>九、参考文章</h2><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/30948290">从零开始搭建Vue组件库 VV-UI</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6">Vue插件开发</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/components.html">组件基础</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/16/0-vuecli-3-component/">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/16/0-vuecli-3-component/" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%89%93%E5%8C%85/" rel="tag"># 打包</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/15/node-sass-slow-problem/" rel="prev" title="如何解决npm安装node-sass依赖慢的情况">
+      <i class="fa fa-chevron-left"></i> 如何解决npm安装node-sass依赖慢的情况
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/04/16/what-is-npx/" rel="next" title="npx是什么">
+      npx是什么 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%A4%A7%E7%BA%B2"><span class="nav-number">3.</span> <span class="nav-text">二、大纲</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%A7%84%E5%88%92%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">4.</span> <span class="nav-text">三、规划目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.1.</span> <span class="nav-text">1、创建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E8%B0%83%E6%95%B4%E7%9B%AE%E5%BD%95"><span class="nav-number">4.2.</span> <span class="nav-text">2、调整目录</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E9%85%8D%E7%BD%AE%E9%A1%B9%E7%9B%AE%E4%BB%A5%E6%94%AF%E6%8C%81%E6%96%B0%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">5.</span> <span class="nav-text">四、配置项目以支持新的目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E9%87%8D%E6%96%B0%E9%85%8D%E7%BD%AE%E5%85%A5%E5%8F%A3%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-pages-%E9%80%89%E9%A1%B9"><span class="nav-number">5.1.</span> <span class="nav-text">1、重新配置入口，修改配置中的 pages 选项</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E6%94%AF%E6%8C%81%E5%AF%B9-packages-%E7%9B%AE%E5%BD%95%E7%9A%84%E5%A4%84%E7%90%86%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-chainWebpack-%E9%80%89%E9%A1%B9"><span class="nav-number">5.2.</span> <span class="nav-text">2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6"><span class="nav-number">6.</span> <span class="nav-text">五、编写组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E7%BB%84%E4%BB%B6"><span class="nav-number">6.1.</span> <span class="nav-text">1. 创建一个新组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%95%B4%E5%90%88%E6%89%80%E6%9C%89%E7%9A%84%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%AF%B9%E5%A4%96%E5%AF%BC%E5%87%BA%EF%BC%8C%E5%8D%B3%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">6.2.</span> <span class="nav-text">2. 整合所有的组件，对外导出，即一个完整的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E7%BC%96%E5%86%99%E7%A4%BA%E4%BE%8B"><span class="nav-number">7.</span> <span class="nav-text">六、编写示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E5%AF%BC%E5%85%A5%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">7.1.</span> <span class="nav-text">1、在示例中导入组件库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%BA%93%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6"><span class="nav-number">7.2.</span> <span class="nav-text">2、在示例中使用组件库中的组件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%83%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm%EF%BC%8C%E6%96%B9%E4%BE%BF%E7%9B%B4%E6%8E%A5%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8"><span class="nav-number">8.</span> <span class="nav-text">七、发布到 npm，方便直接在项目中引用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81package-js-%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%B8%80%E6%9D%A1%E7%BC%96%E8%AF%91%E4%B8%BA%E5%BA%93%E7%9A%84%E5%91%BD%E4%BB%A4"><span class="nav-number">8.1.</span> <span class="nav-text">1、package.js 中新增一条编译为库的命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E9%85%8D%E7%BD%AE-package-json-%E6%96%87%E4%BB%B6%E4%B8%AD%E5%8F%91%E5%B8%83%E5%88%B0-npm-%E7%9A%84%E5%AD%97%E6%AE%B5"><span class="nav-number">8.2.</span> <span class="nav-text">2、配置 package.json 文件中发布到 npm 的字段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0-npmignore-%E6%96%87%E4%BB%B6%EF%BC%8C%E8%AE%BE%E7%BD%AE%E5%BF%BD%E7%95%A5%E5%8F%91%E5%B8%83%E6%96%87%E4%BB%B6"><span class="nav-number">8.3.</span> <span class="nav-text">3、添加 .npmignore 文件，设置忽略发布文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81%E7%99%BB%E5%BD%95%E5%88%B0-npm"><span class="nav-number">8.4.</span> <span class="nav-text">4、登录到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm"><span class="nav-number">8.5.</span> <span class="nav-text">5、发布到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6%E3%80%81%E5%8F%91%E5%B8%83%E6%88%90%E5%8A%9F"><span class="nav-number">8.6.</span> <span class="nav-text">6、发布成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7%E3%80%81%E4%BD%BF%E7%94%A8%E6%96%B0%E5%8F%91%E5%B8%83%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">8.7.</span> <span class="nav-text">7、使用新发布的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">9.</span> <span class="nav-text">八、项目地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B9%9D%E3%80%81%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0"><span class="nav-number">10.</span> <span class="nav-text">九、参考文章</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/16/0-vuecli-3-component/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/0-vuecli-3-component/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/0-vuecli-3-component/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a05c07a5cf9e3da637c6bcbbd945018d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/04/16/what-is-npx/index.html b/2020/04/16/what-is-npx/index.html
new file mode 100644
index 0000000000..71097e1f98
--- /dev/null
+++ b/2020/04/16/what-is-npx/index.html
@@ -0,0 +1,648 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npx是什么">
+<meta property="og:url" content="https://blog.lifesli.com/2020/04/16/what-is-npx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>npx是什么 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npx是什么
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+<span id="more"></span>
+<h2 id="npx-起源"><a href="#npx-起源" class="headerlink" title="npx 起源"></a>npx 起源</h2><p>我从阮一峰的博客中看到介绍 npx 的文章，开头的一句话说明了他诞生的日子。</p>
+<blockquote>
+<p>npm 从5.2版开始，增加了 npx 命令。</p>
+</blockquote>
+<p>为了验证阮一峰这里介绍的正确性我特意下了对应的npm版本验证了一下确实如此，而且在网上找到了另一位大佬司徒正美（大佬走好）博客中也对 npx 做了介绍</p>
+<blockquote>
+<p>最近我在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。</p>
+</blockquote>
+<p>由此，我可以肯定的告诉大家，npx是npm在5.2.0之后版本推出的一个工具，那么他是干嘛用的呢？</p>
+<h2 id="npx-作用"><a href="#npx-作用" class="headerlink" title="npx 作用"></a>npx 作用</h2><p>想要了解一个技术，最好的途经是他的官网，于是我到网上找到了 npx 在 github 上的仓库，地址如下<br><a target="_blank" rel="noopener" href="https://github.com/npm/npx#readme">npx仓库</a>，其中对 npx 有这样一段介绍</p>
+<blockquote>
+<p>DESCRIPTION<br>Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.<br>By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.<br>Unless a –package option is specified, npx will try to guess the name of the binary to invoke depending on the specifier provided. All package specifiers understood by npm may be used with npx, including git specifiers, remote tarballs, local directories, or scoped packages.<br>If a full specifier is included, or if –package is used, npx will always use a freshly-installed, temporary version of the package. This can also be forced with the –ignore-existing flag.</p>
+</blockquote>
+<p>上面这一大段英文我想大家一定看了就头疼，所以为了大家不那么头疼，可以看一下下面我翻译的内容，如果有翻译不对的地方，还请指正。</p>
+<blockquote>
+<p>解释<br>执行 command 命令，无论从本地（我理解为项目目录）node_modules/.bin 或者从全局缓存中， 安装所需执行的任何包。<br>默认情况下，npx将检查 command 是否存在于 $PATH 中，或者在本地项目二进制文件中，并执行该命令。<br>如果没有找到 command ，它将在执行之前安装。<br>除非指定了 —package 选项，否则npx将根据提供的说明符猜测要调用的二进制文件的名称。<br>npm可以理解的所有包说明符都可以与npx一起使用，包括git说明符、远程tarball、本地目录或作用域包。<br>如果包含完整的说明符，或者使用 ——package 选项，npx将始终使用新安装的包的临时版本。<br>这也可以用 ——ignore-existing 标记强制执行。</p>
+</blockquote>
+<p>上面这段机翻简直让人无法理解，所以我又去大佬博客下看了下他们的解释</p>
+<blockquote>
+<p>npx 想要解决的主要问题，就是调用项目内部安装的模块。 – 阮一峰<br>根据 zkat/npx 的描述，npx 会帮你执行依赖包里的二进制文件。 – 司徒正美</p>
+</blockquote>
+<p>司徒大大文章写的太简洁了，不过他还是举了例子，我进行了一下精简，如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./node_modules/.bin/webpack -v <span class="comment">// =&gt; npx webpack -v</span></span><br></pre></td></tr></table></figure>
+<p>简单来说就是找包执行命令的时候不再关注他在哪了，直接就可以用了。</p>
+<p>阮一峰老师的文章更像是官网的翻译加理解</p>
+<blockquote>
+<p>npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。<br>由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。</p>
+</blockquote>
+<p>另外阮一峰老师还介绍了一个临时安装命令使用的场景，我理解为对上面英语介绍倒数第二句的理解</p>
+<h3 id="避免全局安装模块"><a href="#避免全局安装模块" class="headerlink" title="避免全局安装模块"></a>避免全局安装模块</h3><p>除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。</p>
+<p>下载全局模块时，npx 允许指定版本。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx uglify-js@3.1.0 main.js -o ./dist/main.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。</p>
+<p>注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx http-server</span><br></pre></td></tr></table></figure>
+
+<p>然后阮老师还对官网最后一句话做了解释</p>
+<h3 id="–no-install-参数和–ignore-existing-参数"><a href="#–no-install-参数和–ignore-existing-参数" class="headerlink" title="–no-install 参数和–ignore-existing 参数"></a>–no-install 参数和–ignore-existing 参数</h3><p>如果想让 npx 强制使用本地模块，不下载远程模块，可以使用–no-install参数。如果本地不存在该模块，就会报错。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --no-install http-server</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用–ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --ignore-existing create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>然后对于官网上的 example 阮老师也挑了重点的做了介绍，如选择指定的 node 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx node@0.12.8 -v</span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。<br>某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。</p>
+<h2 id="更多参数"><a href="#更多参数" class="headerlink" title="更多参数"></a>更多参数</h2><h3 id="p-参数"><a href="#p-参数" class="headerlink" title="-p 参数"></a>-p 参数</h3><p>-p参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p node@0.12.8 node -v </span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令先指定安装<a href="mailto:&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;">&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;</a>，然后再执行node -v命令。<br>-p参数对于需要安装多个模块的场景很有用。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay [<span class="built_in">command</span>]</span><br></pre></td></tr></table></figure>
+<h3 id="c-参数"><a href="#c-参数" class="headerlink" title="-c 参数"></a>-c 参数</h3><p>如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"><span class="comment"># 报错</span></span><br></pre></td></tr></table></figure>
+<p>上面代码中，cowsay hello | lolcatjs 执行时会报错，原因是第一项 cowsay 由 npx 解释，而第二项命令localcatjs由 Shell 解释，但是lolcatjs并没有全局安装，所以报错。</p>
+<p>-c参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay -c <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm run env | grep npm_</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数可以把这些 npm 的环境变量带入 npx 命令。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -c <span class="string">&#x27;echo &quot;$npm_package_name&quot;&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码会输出当前项目的项目名。</p>
+<h2 id="执行-GitHub-源码"><a href="#执行-GitHub-源码" class="headerlink" title="执行 GitHub 源码"></a>执行 GitHub 源码</h2><p>npx 还可以执行 GitHub 上面的模块源码。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 执行 Gist 代码</span></span><br><span class="line">$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32</span><br><span class="line"></span><br><span class="line"><span class="comment"># 执行仓库代码</span></span><br><span class="line">$ npx github:piuccio/cowsay hello</span><br></pre></td></tr></table></figure>
+<p>注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>因为还没有实际使用过的经验，所以更多的内容从其他大佬哪里白嫖来的知识，做个笔记以观后效。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/04/16/what-is-npx/">npx是什么</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/04/16/what-is-npx/" title="npx是什么">https://blog.lifesli.com/2020/04/16/what-is-npx/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/what-is-npx/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/npx/" rel="tag"># npx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/16/0-vuecli-3-component/" rel="prev" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      <i class="fa fa-chevron-left"></i> 从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/05/14/css3-pointer-events/" rel="next" title="CSS3新属性-pointer-events">
+      CSS3新属性-pointer-events <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E8%B5%B7%E6%BA%90"><span class="nav-number">2.</span> <span class="nav-text">npx 起源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E4%BD%9C%E7%94%A8"><span class="nav-number">3.</span> <span class="nav-text">npx 作用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97"><span class="nav-number">3.1.</span> <span class="nav-text">避免全局安装模块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%80%93no-install-%E5%8F%82%E6%95%B0%E5%92%8C%E2%80%93ignore-existing-%E5%8F%82%E6%95%B0"><span class="nav-number">3.2.</span> <span class="nav-text">–no-install 参数和–ignore-existing 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%8F%82%E6%95%B0"><span class="nav-number">4.</span> <span class="nav-text">更多参数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#p-%E5%8F%82%E6%95%B0"><span class="nav-number">4.1.</span> <span class="nav-text">-p 参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#c-%E5%8F%82%E6%95%B0"><span class="nav-number">4.2.</span> <span class="nav-text">-c 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C-GitHub-%E6%BA%90%E7%A0%81"><span class="nav-number">5.</span> <span class="nav-text">执行 GitHub 源码</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number"></span> <span class="nav-text">最后</span></a></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/04/16/what-is-npx/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/what-is-npx/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/what-is-npx/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c700f23f29f36ec82f8c7fbefa43a139',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/05/14/css3-pointer-events/index.html b/2020/05/14/css3-pointer-events/index.html
new file mode 100644
index 0000000000..8f70c0261b
--- /dev/null
+++ b/2020/05/14/css3-pointer-events/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS3新属性-pointer-events">
+<meta property="og:url" content="https://blog.lifesli.com/2020/05/14/css3-pointer-events/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0J0XD.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0YEjO.png">
+<meta property="article:published_time" content="2020-05-14T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS3">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>CSS3新属性-pointer-events | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS3新属性-pointer-events
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+<span id="more"></span>
+<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>MDN上是这样介绍这个属性的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">传送门</a>。</p>
+<blockquote>
+<p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。</p>
+</blockquote>
+<p>它有如下这些个属性值：</p>
+<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Keyword values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: auto;</span><br><span class="line"><span class="attribute">pointer-events</span>: none;</span><br><span class="line"><span class="attribute">pointer-events</span>: visiblePainted; <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleFill;    <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleStroke;  <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visible;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: painted;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: fill;           <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: stroke;         <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: all;            <span class="comment">/* SVG only */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Global values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: inherit;</span><br><span class="line"><span class="attribute">pointer-events</span>: initial;</span><br><span class="line"><span class="attribute">pointer-events</span>: unset;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>这里有一个特别的值，它进行了专门的介绍，也正是因为这个原因，水印的功能才得以实现。</p>
+<blockquote>
+<p>除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。</p>
+</blockquote>
+<p>由上可知，当我们将pointer-events值设置为none时，它就有了穿透的特性，也就是说你“看得见它，却摸不到它”，而且也不具备鼠标指针的特性，这不正是水印想要的效果嘛，完美~;</p>
+<p>接着往下看我们可以知道它的初始值是auto，并且可以继承<br><img src="https://s1.ax1x.com/2020/05/14/Y0J0XD.png" alt="Y0J0XD.png"></p>
+<p>水印功能就这样实现了是不是简单实用，那么是不是就没有缺点呢，当然要硬说有的话那就是兼容性的问题吧。</p>
+<p>因为这个css3的属性是新出的，自然ie9及以下自然就不支持了，而且ie不支持的范围要到ie11以下，所以ie你为啥不去死呢。。。</p>
+<p><img src="https://s1.ax1x.com/2020/05/14/Y0YEjO.png" alt="Y0YEjO.png"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/05/14/css3-pointer-events/">CSS3新属性-pointer-events</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月14日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/05/14/css3-pointer-events/" title="CSS3新属性-pointer-events">https://blog.lifesli.com/2020/05/14/css3-pointer-events/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/14/css3-pointer-events/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/CSS3/" rel="tag"># CSS3</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/04/16/what-is-npx/" rel="prev" title="npx是什么">
+      <i class="fa fa-chevron-left"></i> npx是什么
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/05/28/Prettier-Setting/" rel="next" title="Prettier格式化配置">
+      Prettier格式化配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.</span> <span class="nav-text">介绍</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/05/14/css3-pointer-events/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/14/css3-pointer-events/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/14/css3-pointer-events/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1a6dd665a24dcd4fe8e59910ff271f38',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/05/28/Prettier-Setting/index.html b/2020/05/28/Prettier-Setting/index.html
new file mode 100644
index 0000000000..7b50ed302f
--- /dev/null
+++ b/2020/05/28/Prettier-Setting/index.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Prettier格式化配置">
+<meta property="og:url" content="https://blog.lifesli.com/2020/05/28/Prettier-Setting/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-05-28T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Prettier">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Prettier格式化配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Prettier格式化配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 使能每一种语言默认格式化规则</span></span><br><span class="line">    <span class="attr">&quot;[html]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[css]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[less]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[javascript]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*  prettier的配置 */</span></span><br><span class="line">    <span class="attr">&quot;prettier.printWidth&quot;</span>: <span class="number">100</span>, <span class="comment">// 超过最大值换行</span></span><br><span class="line">    <span class="attr">&quot;prettier.tabWidth&quot;</span>: <span class="number">4</span>, <span class="comment">// 缩进字节数</span></span><br><span class="line">    <span class="attr">&quot;prettier.useTabs&quot;</span>: <span class="literal">false</span>, <span class="comment">// 缩进不使用tab，使用空格</span></span><br><span class="line">    <span class="attr">&quot;prettier.semi&quot;</span>: <span class="literal">true</span>, <span class="comment">// 句尾添加分号</span></span><br><span class="line">    <span class="attr">&quot;prettier.singleQuote&quot;</span>: <span class="literal">true</span>, <span class="comment">// 使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.proseWrap&quot;</span>: <span class="string">&quot;preserve&quot;</span>, <span class="comment">// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行</span></span><br><span class="line">    <span class="attr">&quot;prettier.arrowParens&quot;</span>: <span class="string">&quot;avoid&quot;</span>, <span class="comment">//  (x) =&gt; &#123;&#125; 箭头函数参数只有一个时是否要有小括号。avoid：省略括号</span></span><br><span class="line">    <span class="attr">&quot;prettier.bracketSpacing&quot;</span>: <span class="literal">true</span>, <span class="comment">// 在对象，数组括号与文字之间加空格 &quot;&#123; foo: bar &#125;&quot;</span></span><br><span class="line">    <span class="attr">&quot;prettier.disableLanguages&quot;</span>: [<span class="string">&quot;vue&quot;</span>], <span class="comment">// 不格式化vue文件，vue文件的格式化单独设置</span></span><br><span class="line">    <span class="attr">&quot;prettier.endOfLine&quot;</span>: <span class="string">&quot;auto&quot;</span>, <span class="comment">// 结尾是 \n \r \n\r auto</span></span><br><span class="line">    <span class="attr">&quot;prettier.eslintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用eslint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.htmlWhitespaceSensitivity&quot;</span>: <span class="string">&quot;ignore&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;prettier.ignorePath&quot;</span>: <span class="string">&quot;.prettierignore&quot;</span>, <span class="comment">// 不使用prettier格式化的文件填写在项目的.prettierignore文件中</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxBracketSameLine&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中把&#x27;&gt;&#x27; 是否单独放一行</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxSingleQuote&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.parser&quot;</span>: <span class="string">&quot;babylon&quot;</span>, <span class="comment">// 格式化的解析器，默认是babylon</span></span><br><span class="line">    <span class="attr">&quot;prettier.requireConfig&quot;</span>: <span class="literal">false</span>, <span class="comment">// Require a &#x27;prettierconfig&#x27; to format prettier</span></span><br><span class="line">    <span class="attr">&quot;prettier.stylelintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用stylelint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.trailingComma&quot;</span>: <span class="string">&quot;es5&quot;</span>, <span class="comment">// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）</span></span><br><span class="line">    <span class="attr">&quot;prettier.tslintIntegration&quot;</span>: <span class="literal">false</span> <span class="comment">// 不让prettier使用tslint的代码格式进行校验</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/05/28/Prettier-Setting/">Prettier格式化配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月28日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/05/28/Prettier-Setting/" title="Prettier格式化配置">https://blog.lifesli.com/2020/05/28/Prettier-Setting/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/28/Prettier-Setting/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Prettier/" rel="tag"># Prettier</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/05/14/css3-pointer-events/" rel="prev" title="CSS3新属性-pointer-events">
+      <i class="fa fa-chevron-left"></i> CSS3新属性-pointer-events
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="next" title="rpm命令">
+      rpm命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/05/28/Prettier-Setting/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/28/Prettier-Setting/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/28/Prettier-Setting/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2498a6ccae295c7acc5e54c7b1c80a7f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2020/07/19/rpm\345\221\275\344\273\244/index.html" "b/2020/07/19/rpm\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..8a61fb0671
--- /dev/null
+++ "b/2020/07/19/rpm\345\221\275\344\273\244/index.html"
@@ -0,0 +1,663 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:type" content="article">
+<meta property="og:title" content="rpm命令">
+<meta property="og:url" content="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-07-19T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RPM">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>rpm命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          rpm命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">rpm命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年07月19日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" title="rpm命令">https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/RPM/" rel="tag"># RPM</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/05/28/Prettier-Setting/" rel="prev" title="Prettier格式化配置">
+      <i class="fa fa-chevron-left"></i> Prettier格式化配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="next" title="Linux目录说明">
+      Linux目录说明 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%B8%E8%BD%BD"><span class="nav-number">2.</span> <span class="nav-text">卸载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%9F%E8%83%BD"><span class="nav-number">3.</span> <span class="nav-text">查询功能</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2bcabde47c38439255e0f7d6167f9e10',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html" "b/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
new file mode 100644
index 0000000000..92db88a9cc
--- /dev/null
+++ "b/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Linux目录说明">
+<meta property="og:url" content="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Linux">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Linux目录说明 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Linux目录说明
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">Linux目录说明</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" title="Linux目录说明">https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Linux/" rel="tag"># Linux</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="prev" title="rpm命令">
+      <i class="fa fa-chevron-left"></i> rpm命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/11/10/learn-go/" rel="next" title="从零开始：学习Go（一）">
+      从零开始：学习Go（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#bin%EF%BC%9A"><span class="nav-number">1.</span> <span class="nav-text">&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#boot%EF%BC%9A"><span class="nav-number">2.</span> <span class="nav-text">&#x2F;boot：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dev-%EF%BC%9A"><span class="nav-number">3.</span> <span class="nav-text">&#x2F;dev ：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A"><span class="nav-number">4.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#home%EF%BC%9A"><span class="nav-number">5.</span> <span class="nav-text">&#x2F;home：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lib%EF%BC%9A"><span class="nav-number">6.</span> <span class="nav-text">&#x2F;lib：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lost-found%EF%BC%9A"><span class="nav-number">7.</span> <span class="nav-text">&#x2F;lost+found：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#media-linux"><span class="nav-number">8.</span> <span class="nav-text">&#x2F;media linux</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mnt%EF%BC%9A"><span class="nav-number">9.</span> <span class="nav-text">&#x2F;mnt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#opt%EF%BC%9A"><span class="nav-number">10.</span> <span class="nav-text">&#x2F;opt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proc%EF%BC%9A"><span class="nav-number">11.</span> <span class="nav-text">&#x2F;proc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#root%EF%BC%9A"><span class="nav-number">12.</span> <span class="nav-text">&#x2F;root：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sbin%EF%BC%9A"><span class="nav-number">13.</span> <span class="nav-text">&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#selinux%EF%BC%9A"><span class="nav-number">14.</span> <span class="nav-text">&#x2F;selinux：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#srv%EF%BC%9A"><span class="nav-number">15.</span> <span class="nav-text">&#x2F;srv：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sys%EF%BC%9A"><span class="nav-number">16.</span> <span class="nav-text">&#x2F;sys：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#tmp%EF%BC%9A"><span class="nav-number">17.</span> <span class="nav-text">&#x2F;tmp：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr%EF%BC%9A"><span class="nav-number">18.</span> <span class="nav-text">&#x2F;usr：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-bin%EF%BC%9A"><span class="nav-number">19.</span> <span class="nav-text">&#x2F;usr&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-sbin%EF%BC%9A"><span class="nav-number">20.</span> <span class="nav-text">&#x2F;usr&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-src%EF%BC%9A"><span class="nav-number">21.</span> <span class="nav-text">&#x2F;usr&#x2F;src：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#var%EF%BC%9A"><span class="nav-number">22.</span> <span class="nav-text">&#x2F;var：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A-1"><span class="nav-number">23.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bin-sbin-usr-bin-usr-sbin"><span class="nav-number">24.</span> <span class="nav-text">&#x2F;bin, &#x2F;sbin, &#x2F;usr&#x2F;bin, &#x2F;usr&#x2F;sbin:</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7dba969f867f40bb6a108578a14e7208',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/11/10/learn-cordova-1/index.html b/2020/11/10/learn-cordova-1/index.html
new file mode 100644
index 0000000000..c5d703d378
--- /dev/null
+++ b/2020/11/10/learn-cordova-1/index.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Cordova（一）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/11/10/learn-cordova-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+<meta property="og:image" content="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Cordova">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>从零开始：学习Cordova（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Cordova（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+<span id="more"></span>
+<h2 id="一、What-is-Cordova？-Cordova是个啥？"><a href="#一、What-is-Cordova？-Cordova是个啥？" class="headerlink" title="一、What is Cordova？ Cordova是个啥？"></a>一、What is Cordova？ Cordova是个啥？</h2><p><img src="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png" alt="Logo"><br>移动端开发和 <code>Web</code> 开发有一些不一样，<code>Web</code> 端开发面向的是浏览器，而移动端开发面向的是各种移动设备，那么针对各种移动设备提供的 <code>SDK</code> 进行开发的话，我们通常称之为***<code>原生开发</code>***，原生开发虽然通常调用底层 <code>Api</code> ，性能更好，但是因为不同移动终端底层技术不一样，所以每种设备都要单独开发，这样开发成本和能力要求都比较高，所以通常都会有一些框架来兼容各种平台，就好比 <code>Java</code> 虚拟机可以运行在 <code>Mac/Windows/Linux</code> 一样，为了能够写一套移动端代码可以在各种设备中使用，于是乎就有了 <code>Cordova</code> 。</p>
+<p>上面说了这么一堆废话，其实简言之，***<code>Cordova</code> 就是提供了跨设备调用底层Api的移动端开发框架（这种开发方式又叫做Hybird 模式）***</p>
+<p>知道这一点应该就够了，当然这是我认为的。</p>
+<p><code>Cordova</code> 的官网地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://cordova.apache.org/">https://cordova.apache.org/</a></p>
+</blockquote>
+<p>其实从这里就可以看出， <code>Cordova</code> 是 <code>Apache</code> 基金下的一个项目，其官网是这样介绍它的</p>
+<blockquote>
+<p>Mobile apps with HTML, CSS &amp; JS<br>Target multiple platforms with one code base<br>Free and open source</p>
+</blockquote>
+<p>翻译成中文的话就是</p>
+<blockquote>
+<p>使用 <code>Html</code> ，<code>CSS</code> 和 <code>JS</code> 进行移动端应用开发<br>一份代码多平台使用<br>免费并且开源</p>
+</blockquote>
+<p>三句话解释了 <code>Cordova</code> 的三个方面，</p>
+<ul>
+<li>使用前端技术开发-对前端开发友好</li>
+<li>跨平台-节省开发工时，降低开发难度-从图标看支持 <code>Android/IOS/WP</code>三大平台</li>
+<li>免费不用解释开源的话意味着会有很多人贡献代码</li>
+</ul>
+<p>以上奠定了 <code>Cordova</code> 强大及流行的基础。</p>
+<h2 id="二、快速上手"><a href="#二、快速上手" class="headerlink" title="二、快速上手"></a>二、快速上手</h2><p>在使用 <code>Cordova</code> 做移动端开发之前需要做一些环境准备工作，首先要安装 <code>Node</code> 以及它携带的 <code>Npm</code> 包管理器，这个现代的前端开发应该都知道，我这里就不多说了，装它就完了。</p>
+<p>装好之后我们就要用 <code>Npm</code> 全局安装一下 <code>Cordova</code> 项目的依赖，命令很简单；</p>
+<p>方便的话还要装一下 <code>Git</code> ，因为一些命令要在 <code>git-cmd</code> 上执行，当然管理代码也是需要它的，所以装吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cordova</span><br></pre></td></tr></table></figure>
+<p>就这么简单就可以开发 <code>Cordova</code> 应用了，接下来我们要创建一个项目，创建项目的命令也十分简单。在命令行工具中输入下面的命令你就创建了一个 <code>Cordova</code> 的应用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova create &lt;path&gt; <span class="comment">// 这里的path是项目的路径</span></span><br></pre></td></tr></table></figure>
+<p>如果要查看创建项目时还能设置什么参数你可以执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova help create</span><br></pre></td></tr></table></figure>
+<p>怎么样是不是超级简单。<br>做了上面的工作你就创建了一个具备基本功能的 <code>Cordova</code> 项目，接下来我们要给项目配置一些东西。</p>
+<p>首先刚才讲到了， <code>Cordova</code> 是一个跨平台的框架，那么你的项目要适配什么平台你需要进行一些配置， <code>cd</code> 到项目目录下执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform add &lt;platform name&gt; <span class="comment">// platform name 为适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>如果不知道名称是什么命令行工具也贴心的给了查询用的命令，通过此命令你可以看到你安装了什么平台的适配，有哪些可以用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cordova platform</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>执行了这个命令你将看到下面这样的 <code>list</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/***</span></span><br><span class="line"><span class="comment">Installed platforms:</span></span><br><span class="line"><span class="comment">Available platforms:</span></span><br><span class="line"><span class="comment">  android ^9.0.0</span></span><br><span class="line"><span class="comment">  browser ^6.0.0</span></span><br><span class="line"><span class="comment">  electron ^1.0.0</span></span><br><span class="line"><span class="comment">  windows ^7.0.0</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>项目也创建了，简单的配置工作也完成了，我们可以启动项目看一下效果了，那么我们就该执行运行项目的命令了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run &lt;platform name&gt; <span class="comment">// platform name 适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>到这我们就快速的创建并运行起了一个 <code>Cordova</code> 的工程。</p>
+<h3 id="小Tip"><a href="#小Tip" class="headerlink" title="小Tip"></a>小Tip</h3><p>如上执行启动命令后，默认会启动<em><strong>8000</strong></em>端口，如果被占用的话可以通过增加命令行参数的形式改变端口号，参数如下设置</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run browser --target=chrome --port=<span class="number">9090</span></span><br></pre></td></tr></table></figure>
+<p>以上就可以自定义端口及浏览器启动应用了。</p>
+<h2 id="三、详细了解"><a href="#三、详细了解" class="headerlink" title="三、详细了解"></a>三、详细了解</h2><h3 id="1、概览"><a href="#1、概览" class="headerlink" title="1、概览"></a>1、概览</h3><p>官网开头介绍了 <code>Cordova</code> 的身世和适用范围，前面开头已经讲过了不想再讲，直接看看 <code>Cordova</code> 的架构设计图。<br><img src="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png" alt="此处是个架构图"></p>
+<center>Cordova 架构图</center>
+
+<p>这个图理解起来不难，大的方面是两个部分，底层是 <code>MobileOS</code> ，也就是手机的操作系统本身，上层是由 <code>Cordova</code> 构建的框架；</p>
+<p><code>Cordova</code> 内部的话是两层结构：</p>
+<ul>
+<li>上层的话是由前端代码构成的 <code>WebApp</code> 部分；</li>
+<li>下层是 <code>Cordova</code> 的视图渲染引擎，它为 <code>WebApp</code> 提供了 <code>HtmlApi</code> 和 <code>CordovaApi</code> ；</li>
+</ul>
+<p>也就是说我们可以调用 <code>html</code> 的原生 <code>Api</code> 也可以使用 <code>Cordova</code> 提供的 <code>jsApi</code> ；</p>
+<p><code>Cordova</code> 还提供了丰富的插件系统；通过 <code>Cordova</code> 的视图引擎调用 <code>Cordova</code> 的 <code>NativeApi</code> 来调用一些 <code>Cordova</code> 提供好的调用设备的信息的 <code>Api</code> ，另外也可以调用一些用户自定义的 <code>Api</code> ；</p>
+<p><code>Cordova</code> 视图引擎和插件系统再将上层的需求通过 <code>MobileOS</code> 开放的 <code>Api</code> 能力实现具体功能，由此完成了整个 <code>Cordova</code> 框架的使用；</p>
+<p>总的来说这个原理跟大多数跨平台的框架原理都类似，由框架提供统一的 <code>Api</code> 能力，再由框架处理不同平台的兼容，这里特别之处在于渲染引擎可以允许使用前端原生的 <code>Api</code> ，这将大大降低开发的难度。</p>
+<h4 id="WebView"><a href="#WebView" class="headerlink" title="WebView"></a>WebView</h4><p>说到移动端开发，不知道 <code>WebView</code> 应该是不可能的，在原生移动应用中，<code>WebView</code> 就是移动应用内部嵌入的一个‘浏览器’，它可以允许你使用前端技术展示内容。</p>
+<h4 id="WebApp"><a href="#WebApp" class="headerlink" title="WebApp"></a>WebApp</h4><p><code>WebApp</code> 跟 <code>WebView</code> 两个词有些像，事实上它们也确实有些关系，<code>WebApp</code> 从名字就可以看出是使用 <code>Web</code> 技术开发的 <code>App</code> ，那么它跟 <code>WebView</code> 是什么关系呢，打个比方，<code>WebView</code> 就是个快递盒子， <code>WebApp</code> 就是你买的商品，一个是<em><strong>容器</strong></em>，一个是<em><strong>内容</strong></em>；这样说应该就明白了吧，通过前端技术开发的 <code>App</code> 通过 <code>WebView</code> 嵌入到 <code>App</code> 中，就可以带给用户原生应用的体验，忘了说 <code>WebApp</code> 是只能用浏览器访问的 <code>App</code> ；</p>
+<p>和纯 <code>WebApp</code> 不同，嵌入到 <code>WebView</code> 中的 <code>WebApp</code> 需要有一个配置文件，***<code>config.xml</code>*** ，它在项目的根目录下，说明了应用的一些信息，这个文件必不可少！！！</p>
+<h4 id="插件系统"><a href="#插件系统" class="headerlink" title="插件系统"></a>插件系统</h4><p>刚刚在上面的架构图中我们介绍了 <code>Cordova</code> 的插件系统，它提供了我们通过 <code>js</code> 调用 <code>MobileApi</code> 的能力，如电源/相机/联系人等等；<br>官方维护了核心的功能，当然如果你愿意也可以调用一些第三方提供的插件，你可以方便的通过 <code>npm</code> 包管理器安装；</p>
+<p><em><strong>但是有一点必须要说</strong></em>：项目创建后默认是不带任何插件的，即使是官方的核心插件也是需要你自己导入进去，第三方的更不用说了，另外<code>Cordova</code> 只提供了功能 <code>Api</code> 并不包含任何的 <code>UI</code> 部件和 <code>MV</code> 框架（你可以根据自己喜欢使用 <code>Angular</code> 或者 <code>Vue</code> 或者其他什么都可以），这一点要牢记。</p>
+<h4 id="开发工作流"><a href="#开发工作流" class="headerlink" title="开发工作流"></a>开发工作流</h4><p>使用 <code>Cordova</code> 开发 <code>MobileApp</code> 的时候即可以开发<strong>多个</strong>平台的 <code>App</code> （一次开发多平台可用，降低开发成本），也可以专注开发<strong>某一</strong>平台的<code>App</code> （使用前端技术开发，降低开发难度），因此开发工作流也分为两种：</p>
+<h5 id="跨平台-CLI-的工作流"><a href="#跨平台-CLI-的工作流" class="headerlink" title="跨平台(CLI)的工作流"></a>跨平台(CLI)的工作流</h5><p>官网上说了很多，也不难理解，这里用我自己的话说就是， <code>Cordova</code> 提供了一个牛叉的 <code>CLI</code> 工具，它可以自动的完成一次编码多平台构建的事，你只需要按照它说的方式开发就行。：）</p>
+<h5 id="平台为中心的工作流"><a href="#平台为中心的工作流" class="headerlink" title="平台为中心的工作流"></a>平台为中心的工作流</h5><p>这里不得不说我没有看很明白，但是结合下面的注意事项我是这样理解的，因为只为某一平台服务，所以有一些针对此平台的特殊的功能或者插件你就可以使用了（虽然不太清楚为什么这么做，如果你知道告诉我，谢谢），<strong>但是一旦使用了这种开发方式，那么就回不到跨平台开发了</strong>，因为你使用了针对某一平台才能调用的代码，这也不难理解，从字里行间感觉就是不建议使用这种开发工作流（好的好的，知道了）。</p>
+<p>好的，接下来开发 <code>App</code> 啦；</p>
+<h3 id="2、开发应用"><a href="#2、开发应用" class="headerlink" title="2、开发应用"></a>2、开发应用</h3><p>快速上手中已经介绍了如何准备、创建和启动应用，如何添加平台，这里就不多说了。说些没讲过的。</p>
+<p>上面说过检查目前平台安装情况的话可以使用下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platforms</span><br></pre></td></tr></table></figure>
+<p>我们也可以使用另一个命令来看，我试验了一下，效果是一样的。。。（问号脸，一样的为什么搞两个命令）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform ls</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>事后我发现，无论我使用的命令是 <code>platform</code> 还是 <code>platforms</code> 加不加 <code>ls</code> 都可以查到当前安装的平台。。。 啊~兼容性好强。</p>
+</blockquote>
+<p>每执行一次 <code>add</code> 命令，你就会发现工程目录下的 <code>platforms</code> 目录下就对应生成了一个对应平台的文件夹，切勿手贱删除，你虽然删除了文件夹，但是各处设置的 <code>platform</code> 并没有去掉，会导致报错，如果要删除请使用 <code>remove</code> 命令。 想知道还有哪些命令的话就看下面的链接吧。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-platform-command">命令大全</a></p>
+<h3 id="安装构建的先决条件"><a href="#安装构建的先决条件" class="headerlink" title="安装构建的先决条件"></a>安装构建的先决条件</h3><p>因为 <code>Cordova</code> 的底层还是要调用 <code>MobileOS</code> 的接口，所以各平台的 <code>SDK</code> 是必须要装的，当然这里指的是你要进行构建的平台，比如你要构建 <code>Android</code> 应用，那么你就要装 <code>Android</code> 的 <code>SDK</code> ，<code>IOS</code> 同理。<strong>这里有一个例外</strong><code>broswer</code>平台是不需要依赖其他 <code>SDK</code> 的（明明是开发 <code>APP</code> ，这里只是为了验证画面比较方便）<br>要看你是否满足了构建需要的依赖，可以执行下面的命令查看</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova requirements</span><br></pre></td></tr></table></figure>
+<p>执行完后你会得到如下结果</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Requirements check results <span class="keyword">for</span> android:</span><br><span class="line">Java JDK: installed .</span><br><span class="line">Android SDK: installed</span><br><span class="line">Android target: installed android-<span class="number">19</span>,android-<span class="number">21</span>,android-<span class="number">22</span>,android-<span class="number">23</span>,Google Inc.:Google Apis:<span class="number">19</span>,Google Inc.:Google Apis (x86 System Image):<span class="number">19</span>,Google Inc.:Google Apis:<span class="number">23</span></span><br><span class="line">Gradle: installed</span><br><span class="line"></span><br><span class="line">Requirements check results <span class="keyword">for</span> ios:</span><br><span class="line">Apple OS X: not installed</span><br><span class="line">Cordova tooling <span class="keyword">for</span> iOS requires Apple OS X</span><br><span class="line"><span class="built_in">Error</span>: Some <span class="keyword">of</span> requirements check failed</span><br></pre></td></tr></table></figure>
+<p>这样你就可以清楚的知道自己需要安装哪些依赖才能完成对应平台的构建，简直方便的不要不要的。<br>具体想知道不同的平台都依赖些什么，你可以参见下面的链接；</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#requirements-and-support">Android平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/ios/index.html#requirements-and-support">iOS平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/win8/index.html#requirements-and-support">Windows平台的要求</a></li>
+</ul>
+<h3 id="构建-App"><a href="#构建-App" class="headerlink" title="构建 App"></a>构建 <code>App</code></h3><p>在 <code>create</code> 项目之后，项目的根目录下会生成一个 <code>www</code> 目录，这个目录包含了 <code>webapp</code> 的入口页面 <code>index.html</code> ，入口文件的话是 <code>www/js/index.js</code> 文件的 <code>deviceready</code> 事件中。</p>
+<p>如果要构建代码的话，执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build</span><br></pre></td></tr></table></figure>
+<p>这个命令会构建你安装的所有平台，如果只想构建某一平台的话，可以把平台的名字加在命令后面，如</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build ios</span><br></pre></td></tr></table></figure>
+<p>如果想了解更多的参数的话，可以看一下后面的链接。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-build-command">更多参数</a></p>
+<h3 id="测试-App"><a href="#测试-App" class="headerlink" title="测试 App"></a>测试 <code>App</code></h3><p>构建完 <code>App</code> 之后我们就可以测试了，通常各平台的 <code>SDK</code> 中会提供模拟器，我们只需要执行下面的命令就可以启动模拟器。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova emulate android</span><br></pre></td></tr></table></figure>
+<p>当然如果你觉得用实机查看更自然一些的话，也可以把手机插上数据线与电脑建立连接，然后执行下面的命令就可以了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
+<p>上面演示的是 <code>Android</code> 的 <code>App</code> 测试过程，每个平台虽然基本类似，但还是有出入，所以，下面提供了不同平台的调试方法，供你预览。</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#setting-up-an-emulator">设置Android模拟器</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-run-command">Cordova run 命令参考文档</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-emulate-command">Cordova emulate 命令参考文档</a></li>
+</ul>
+<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><p>如果只是开发一个 <code>Cordova</code> 框架的 <code>WebApp</code> ，那么你不需要装任何插件，直接用前端技术开发就好了，但是应该没人会这么做吧，毕竟开发这个的目的就是为了跨平台开发原生级移动 <code>App</code> ，因此要调用移动设备的各种功能就必须安装插件。</p>
+<h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p><code>Cordova</code> 插件是一些使用 <code>Javascript</code> 调用原生 <code>SDK</code> 功能的包；<br>你可以使用两种方式找到你想要的插件</p>
+<ol>
+<li>通过 <code>Cordova</code> 提供的包管理平台 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/plugins/">插件搜索页</a></li>
+<li>通过命令行搜索 <em><strong><code>cordova plugin search camera</code></strong></em></li>
+</ol>
+<p>选好你要安装的插件之后你需要执行下面的命令来安装它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova plugin add &lt;plugin name&gt; <span class="comment">// 如 cordova plugin add cordova-plugin-chrome-apps-proxy</span></span><br></pre></td></tr></table></figure>
+<p>如果你的包没有发布在 <code>Cordova</code> 的平台上，也可以使用 <code>git</code> 地址来安装。<br>另外 <code>Cordova</code> 还非常贴心的提供了一个工具 <code>Plugman</code> 来帮助开发者更好的管理 <code>Cordova</code> 插件。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/plugin_ref/plugman.html">Plugman参考</a></p>
+<p>如果要查看你安装了哪些插件可以使用下面任意一种命令都可以。（咱也不知道为啥提供这么多方式，反正好用无脑）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">plugin ls</span><br><span class="line">plugin list</span><br><span class="line">plugin</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">$ cordova plugin ls</span></span><br><span class="line"><span class="comment">cordova-plugin-whitelist 1.2.1 &quot;Whitelist&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>如果想知道更多关于 <code>plugin</code> 的命令参数，可以看右边的链接 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-plugin-command">plugin参数</a></p>
+<h4 id="使用-merges-自定义每个平台"><a href="#使用-merges-自定义每个平台" class="headerlink" title="使用 merges 自定义每个平台"></a>使用 <code>merges</code> 自定义每个平台</h4><p>虽然可以用一套代码来构建多个平台，但一些平台会有自己的特点，就好像 <code>Chrome</code> 浏览器默认的字体大小与 <code>IE</code> 的不同， <code>Android</code> 与 <code>IOS</code> 也有不一样的地方，这种情况下去改 <code>www</code> 目录下的文件显然是不合适的，所以 <code>Cordova</code> 提供了 <code>merges</code> 方式来适配不同平台各自的特别处理，你要做的就是在项目的根目录下创建一个 <code>merges</code> 目录，比如你要适配 <code>Android</code> ，你就可以在 <code>merges</code> 下创建一个 <code>android</code> 目录，然后在下面或覆盖或添加新的资源。（这里官网没有说 <code>merges</code> 在哪里创建，试验后发现是在根目录下）</p>
+<h4 id="更新-Cordova-和你的项目"><a href="#更新-Cordova-和你的项目" class="headerlink" title="更新 Cordova 和你的项目"></a>更新 <code>Cordova</code> 和你的项目</h4><p>如果你要更新你的 <code>Cordova</code> （通常不建议这么干，当然你知道后果并想要使用新的特性或者修正 <code>bug</code> 除外），那么你需要执行一下 <code>update</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm update -g cordova</span><br></pre></td></tr></table></figure>
+<p>当然你也可以指定更新到什么版本（这都是 <code>npm</code> 的知识了）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install -g cordova@<span class="number">3.1</span><span class="number">.0</span>-<span class="number">0.2</span><span class="number">.0</span></span><br></pre></td></tr></table></figure>
+<p>你也可以使用下面的命令查看当前的版本（还是 <code>npm</code> 的知识）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm info cordova version</span><br></pre></td></tr></table></figure>
+<p>你是不是以为这样就可以了，不好意思还不行，你还需要把各个平台进行一下升级</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cordova platform update android --save</span><br><span class="line">cordova platform update ios --save</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>
+<p>其实这也好理解，你都已经轿车换 <code>SUV</code> 了，总不能还用原来的车轱辘吧，只是我希望能不能在换车的时候一块儿把车轱辘换了（这里的意思是希望直接自动化处理了）</p>
+<p>到这里你的第一个 <code>App</code> 就已经开发好了，是不是还有点成就感。</p>
+<h3 id="一些参考资料"><a href="#一些参考资料" class="headerlink" title="一些参考资料"></a>一些参考资料</h3><p>到这里一个简单的基于 <code>Cordova</code> 搭建的 <code>App</code> 就实现了，当然一个 <code>App</code> 绝不这么简单，各平台的 <code>SDK</code> 安装也没那么简单，但这不是本篇文章要说的事了，下一篇文章我会说说如何应对各种不同的开发平台，在这之前还请你看一下 <code>Cordova</code> 都支持哪些平台，具体看一下下面的链接。</p>
+<p>好了，今天就先写到这里，下篇文章我们再见。</p>
+<p><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/support/index.html">平台支持</a></p>
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/11/10/learn-cordova-1/">从零开始：学习Cordova（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/11/10/learn-cordova-1/" title="从零开始：学习Cordova（一）">https://blog.lifesli.com/2020/11/10/learn-cordova-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-cordova-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Cordova/" rel="tag"># Cordova</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/11/10/learn-go/" rel="prev" title="从零开始：学习Go（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Go（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/11/11/learn-ionic-1/" rel="next" title="从零开始：学习Ionic（一）">
+      从零开始：学习Ionic（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81What-is-Cordova%EF%BC%9F-Cordova%E6%98%AF%E4%B8%AA%E5%95%A5%EF%BC%9F"><span class="nav-number">2.</span> <span class="nav-text">一、What is Cordova？ Cordova是个啥？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">二、快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8FTip"><span class="nav-number">3.1.</span> <span class="nav-text">小Tip</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%AF%A6%E7%BB%86%E4%BA%86%E8%A7%A3"><span class="nav-number">4.</span> <span class="nav-text">三、详细了解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E6%A6%82%E8%A7%88"><span class="nav-number">4.1.</span> <span class="nav-text">1、概览</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#WebView"><span class="nav-number">4.1.1.</span> <span class="nav-text">WebView</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WebApp"><span class="nav-number">4.1.2.</span> <span class="nav-text">WebApp</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F"><span class="nav-number">4.1.3.</span> <span class="nav-text">插件系统</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.</span> <span class="nav-text">开发工作流</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B7%A8%E5%B9%B3%E5%8F%B0-CLI-%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.1.</span> <span class="nav-text">跨平台(CLI)的工作流</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B9%B3%E5%8F%B0%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.2.</span> <span class="nav-text">平台为中心的工作流</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8"><span class="nav-number">4.2.</span> <span class="nav-text">2、开发应用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85%E6%9E%84%E5%BB%BA%E7%9A%84%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6"><span class="nav-number">4.3.</span> <span class="nav-text">安装构建的先决条件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BA-App"><span class="nav-number">4.4.</span> <span class="nav-text">构建 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%8B%E8%AF%95-App"><span class="nav-number">4.5.</span> <span class="nav-text">测试 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.</span> <span class="nav-text">添加插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.1.</span> <span class="nav-text">插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-merges-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%AF%8F%E4%B8%AA%E5%B9%B3%E5%8F%B0"><span class="nav-number">4.6.2.</span> <span class="nav-text">使用 merges 自定义每个平台</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0-Cordova-%E5%92%8C%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.6.3.</span> <span class="nav-text">更新 Cordova 和你的项目</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%BA%9B%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">4.7.</span> <span class="nav-text">一些参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/11/10/learn-cordova-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-cordova-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-cordova-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7d7eacb09a1f63693f5eefab15a7abb6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/11/10/learn-go/index.html b/2020/11/10/learn-go/index.html
new file mode 100644
index 0000000000..4d786671cd
--- /dev/null
+++ b/2020/11/10/learn-go/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Go（一）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/11/10/learn-go/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Go语言">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>从零开始：学习Go（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Go（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/11/10/learn-go/">从零开始：学习Go（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/11/10/learn-go/" title="从零开始：学习Go（一）">https://blog.lifesli.com/2020/11/10/learn-go/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-go/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Go%E8%AF%AD%E8%A8%80/" rel="tag"># Go语言</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="prev" title="Linux目录说明">
+      <i class="fa fa-chevron-left"></i> Linux目录说明
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2020/11/10/learn-cordova-1/" rel="next" title="从零开始：学习Cordova（一）">
+      从零开始：学习Cordova（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/11/10/learn-go/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-go/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-go/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9417eebc3283654ae612f310acd61960',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2020/11/11/learn-ionic-1/index.html b/2020/11/11/learn-ionic-1/index.html
new file mode 100644
index 0000000000..627a517cc4
--- /dev/null
+++ b/2020/11/11/learn-ionic-1/index.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Ionic（一）">
+<meta property="og:url" content="https://blog.lifesli.com/2020/11/11/learn-ionic-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://blog.lifesli.com/">
+<meta property="article:published_time" content="2020-11-11T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Ionic">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/">
+
+<link rel="canonical" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>从零开始：学习Ionic（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Ionic（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+<span id="more"></span>
+<h2 id="Ionic-简介"><a href="#Ionic-简介" class="headerlink" title="Ionic 简介"></a>Ionic 简介</h2><p>学一门技术，我们首先要知道它是谁，能干啥，有啥好处。要了解一门新技术最好的方式就是去它的官网看看。<br>（一言不合丢给你一个官网 ⇒ <a target="_blank" rel="noopener" href="https://ionicframework.com/">官网</a>）</p>
+<blockquote>
+<p>One codebase.<br>Any platform.<br>Now in Vue.</p>
+</blockquote>
+<p>翻译过来是这样的</p>
+<blockquote>
+<p>一份代码<br>任何平台<br>现在支持Vue</p>
+</blockquote>
+<p>看着是不是眼熟，嗯，跟 <code>Cordova</code> 的口号何其相似，目标都是跨平台，只是 <code>Cordova</code> 跨的是 <code>MobileOS</code> 而 <code>Ionic</code> 跨的是前端框架。<br>最下面一句 <code>Now in Vue</code> 像是在说，“嗯，我也支持Vue了（Vue发展太快了，不能掉队）”，要知道，最开始的 <code>Ionic</code> 是妥妥的 <code>Angular</code> 派，不过无所谓，管他黑猫白猫，能完成任务就是好猫。</p>
+<p>再往下看你会看到，巴拉巴拉说了一堆好处，比如开发迅速啊，组件优美且丰富啊，社区强大啊，还有跨平台（支持原生 <code>js</code> ，<code>Angular</code> ，<code>Vue</code> ，nice~），另外还提供了 <code>native</code> 的组件来直接调用移动设备的功能，可以说是相当强大了。</p>
+<p>好了，看完了介绍，我们赶紧快速上手吧。</p>
+<h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>在使用<code>Ionic</code>做开发还是要做一些准备工作，<code>node</code>，<code>git</code>都是必不可少的，所以请先行准备好。</p>
+<p>目前，<code>Ionic</code>提供了两种创建工程的方式:</p>
+<ul>
+<li>一种用官方的话说叫<code>StepByStep</code>，看过之后我理解就是通过命令的方式，一步步来；</li>
+<li>另一种的话是官方提供了一个向导工具，就跟安装软件一样填一些必要的信息，然后一路下一步就生成了一个工程；</li>
+</ul>
+<p>接下来我将使用这两种方式分别创建工程，首先是第一种。</p>
+<h3 id="StepByStep-创建工程"><a href="#StepByStep-创建工程" class="headerlink" title="StepByStep 创建工程"></a>StepByStep 创建工程</h3><ol>
+<li>全局安装<code>Ionic</code>的脚手架工具<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli</span><br></pre></td></tr></table></figure></li>
+<li>创建工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ionic start myApp tabs <span class="comment">// myApp 是项目目录名称也是工程名称 tabs是模板名称</span></span><br></pre></td></tr></table></figure></li>
+<li>启动工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd myApp</span><br><span class="line">ionic serve</span><br></pre></td></tr></table></figure></li>
+</ol>
+<p>嗯，上面三个步骤之后，你的Ionic项目就启动起来了。（What ！？ 这么简单？！ 嗯，是的。）</p>
+<h3 id="向导式（App-Wizard）创建工程"><a href="#向导式（App-Wizard）创建工程" class="headerlink" title="向导式（App Wizard）创建工程"></a>向导式（App Wizard）创建工程</h3><p>这是一个在线创建工程的手段（感觉对于开发人员来说貌似还是命令行来的方便，这种可视化方案应该是给小白用户准备的吧），地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://ionicframework.com/start">https://ionicframework.com/start</a></p>
+</blockquote>
+<p><img src="/" alt="此处是个图"></p>
+<p>点开上面的地址，你会看到如图所示的一个界面，我们可以看到它要求你输入的一些信息</p>
+<ol>
+<li>App Name</li>
+<li>Icon</li>
+<li>Theme Color</li>
+<li>Template</li>
+<li>Framework</li>
+</ol>
+<p>可以看到这比命令行要多出几个信息，上面的命令行只要求了 <code>App Name</code> 和 <code>Template</code> 难道强大的命令行不支持设置这些么？答案是否定的，当然可以设置这些信息，只是以参数的形式而已，先不说这个，填写好上面的信息以后我们点击<code>[create App]</code>按钮，这时我们进入了下一步，选择代码仓库（Choose a git host），你会看到下面有一个<code>[Skip]</code>按钮说明这步不是必须的，我们先选择一个<code>git</code>仓库，这里我选择<code>github</code>，其他的感兴趣的同学可以自己试试。点击<code>[connect]</code>，这时会弹出一个窗口，申请对应git仓库的鉴权认证，认证通过后我们点击<code>[choose]</code>，等待程序运行一会儿后工程就会被上传到git仓库中，并且会跳转到一个<code>DashBoard</code>，提供了可视化管理工程的页面（也太高大上了吧），右侧我们看到如何把代码下载到本地，并运行它，真的是很方便。</p>
+<p>例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli cordova-res <span class="comment">// cordova-res 指的是安装 cordova 的开发依赖，因为除 cordova 之外还可以选择如 phonegap 之类的MobileOS 框架</span></span><br><span class="line">git clone https:<span class="comment">//github.com/lixuguang/li-app.git li-app</span></span><br><span class="line">cd li-app &amp;&amp; npm install &amp;&amp; ionic serve</span><br></pre></td></tr></table></figure>
+
+<p>执行完上面的命令以后，我们的工程也就运行起来了，也是十分方便，即使不会写代码的人，跟着指南也可以很方便的搭建一个Ionic工程。</p>
+<h2 id="深入学习"><a href="#深入学习" class="headerlink" title="深入学习"></a>深入学习</h2><p>Ionic 的体系当中，最重要的莫过于 Ionic CLI 和 UI Component 两个了，接下来我将分辨将这两部分中最重要的内容拿出来说说。</p>
+<h3 id="Ionic-CLI"><a href="#Ionic-CLI" class="headerlink" title="Ionic CLI"></a>Ionic CLI</h3><p>在上面的快速上手中，我们已经使用了几个命令，但这些还不够，Ionic CLI 提供了强大的命令，请与我一起看一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli <span class="comment">// 全局安装 Ionic CLI</span></span><br><span class="line">ionic start myApp tabs <span class="comment">// 用模板创建工程</span></span><br><span class="line">ionic start --list <span class="comment">// 查看可用模板</span></span><br><span class="line">ionic serve <span class="comment">// 启动工程</span></span><br><span class="line">ionic serve --lab <span class="comment">// 以android或ios方式打开</span></span><br><span class="line">ionic lib update <span class="comment">// 更新包</span></span><br><span class="line">ionic serve --address <span class="number">192.168</span><span class="number">.89</span><span class="number">.1</span> <span class="comment">// 指定Ip，给外部用户访问</span></span><br><span class="line">ionic platform add ios/android <span class="comment">// 添加平台</span></span><br><span class="line">ionic build ios/android <span class="comment">// 构建平台</span></span><br><span class="line">ionic emulate ios [options]  <span class="comment">// ionic run ios [options] 模拟器运行</span></span><br><span class="line"></span><br><span class="line">ionic generate <span class="comment">// 创建新特性</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">options</span><br><span class="line">  -l <span class="comment">//livereload， 实时刷新变化。</span></span><br><span class="line">  -c  <span class="comment">//打印app里的console</span></span><br><span class="line">  -s  <span class="comment">//打印设备的console</span></span><br><span class="line">  -p  <span class="comment">//指定设备的端口</span></span><br><span class="line">  -i  <span class="comment">//指定livereload的重刷端口</span></span><br><span class="line">  --debug <span class="comment">//debug</span></span><br><span class="line">  --release <span class="comment">//release</span></span><br><span class="line">  --host=<span class="number">0.0</span><span class="number">.0</span><span class="number">.0</span> <span class="comment">// IP</span></span><br><span class="line">  --port=<span class="number">8100</span> <span class="comment">// 端口</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">ionic resources [--splash] [--icon] <span class="comment">// 上传代码到官方平台</span></span><br><span class="line">ionic upload <span class="comment">// 登录</span></span><br><span class="line">ionic info <span class="comment">// 查看系统信息</span></span><br><span class="line">ionic browser add crosswalk <span class="comment">// 加壳预览（手机浏览器性能问题解决）</span></span><br><span class="line">ionic browser list <span class="comment">// 查看可用的browser</span></span><br><span class="line">ionic browser revert android/ios <span class="comment">// 删除安装的browser</span></span><br><span class="line">ionic state reset <span class="comment">// 先删除平台和插件，再安装package.json文件中的平台和插件。重置</span></span><br><span class="line">ionic state save <span class="comment">// 保存当前状态信息</span></span><br><span class="line">ionic state clear <span class="comment">// 先删除平台和插件，然后按照package.json文件中包含的平台和插件重新安装。</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/angular@latest --save <span class="comment">// Ionic + Angular</span></span><br><span class="line">ng add @ionic/angular <span class="comment">// 使用Angular CLI 增加Ionic的组件库，可用于Angular项目改造Ionic</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/react <span class="comment">// Ionic + React</span></span><br><span class="line">npm install @ionic/react-router <span class="comment">// 在既存的react项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务，加在根组件下</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">npm install @ionic/vue @ionic/vue-router <span class="comment">// Ionic + Vue ，在既存的Vue项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js 文件中加入引入</span></span><br><span class="line"><span class="keyword">import</span> &#123; IonicVue &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = createApp(App)</span><br><span class="line">  .use(IonicVue)</span><br><span class="line">  .use(router);</span><br><span class="line"></span><br><span class="line">router.isReady().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  app.mount(<span class="string">&#x27;#app&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/index.js 用Ionic提供的vue-router替换原本的vue-router</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue-router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  <span class="comment">// routes go here</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(process.env.BASE_URL),</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务 main.js</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">From here, you can learn about how to develop <span class="keyword">with</span> Ionic Framework <span class="keyword">in</span> our [Ionic Vue Quickstart Guide](https:<span class="comment">//ionicframework.com/docs/vue/quickstart).</span></span><br><span class="line"></span><br><span class="line">## Ionicons CDN</span><br><span class="line"></span><br><span class="line">Ionicons is packaged by <span class="keyword">default</span> <span class="keyword">with</span> the Ionic Framework, so no installation is necessary <span class="keyword">if</span> you<span class="string">&#x27;re using Ionic. To use Ionicons without Ionic Framework, place the following `&lt;script&gt;` near the end of your page, right before the closing `&lt;/body&gt;` tag.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script nomodule src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br></pre></td></tr></table></figure>
+
+
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2020/11/11/learn-ionic-1/">从零开始：学习Ionic（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月11日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2020/11/11/learn-ionic-1/" title="从零开始：学习Ionic（一）">https://blog.lifesli.com/2020/11/11/learn-ionic-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/11/learn-ionic-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Ionic/" rel="tag"># Ionic</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/11/10/learn-cordova-1/" rel="prev" title="从零开始：学习Cordova（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Cordova（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="next" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Ionic-%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">Ionic 简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#StepByStep-%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.1.</span> <span class="nav-text">StepByStep 创建工程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%91%E5%AF%BC%E5%BC%8F%EF%BC%88App-Wizard%EF%BC%89%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">向导式（App Wizard）创建工程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0"><span class="nav-number">4.</span> <span class="nav-text">深入学习</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Ionic-CLI"><span class="nav-number">4.1.</span> <span class="nav-text">Ionic CLI</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2020/11/11/learn-ionic-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/11/learn-ionic-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/11/learn-ionic-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dfce0af58ef29a3efd8c75fe0a4f8e29',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html" "b/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..5d0af5349a
--- /dev/null
+++ "b/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+<meta property="og:url" content="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2021-05-08T08:03:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode插件">
+<meta property="article:tag" content="path-intellisense">
+<meta property="article:tag" content="路径别名">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<h3 id="场景："><a href="#场景：" class="headerlink" title="场景："></a>场景：</h3><p>前端开发我们通常使用VSCode，使用时常见有一个常见的场景：</p>
+<blockquote>
+<p>引入一个文件、图片等</p>
+</blockquote>
+<p>如果不利用VSCode的插件，我们通常会写相对路径或者绝对路径，但为了方便写代码，我们通常会利用工具来帮助我们减轻负担，这种情况就引入了今天的主角，VSCode下的插件<strong>path-intellisense</strong>，是的，有了它编辑器就会聪明的自动帮我们提示出文件在什么地方，这的确方便了我们。</p>
+<p>但是，在Vue开发过程中，或者说是利用Webpack作为构建工具时我们通常会定义一个变量如：<code>@</code> 来简化路径的书写，使代码变得简洁美观，这里的<code>@</code>，我们称之为 <strong>路径别名</strong> ，这也是Vue官方十分推荐使用的，但因为路径别名的使用，原来的智能提示路径的插件就会无法正常工作，因为工作中确实遇到了这样的坑，所以简单的写个文记录一下。</p>
+<h3 id="问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示"><a href="#问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示" class="headerlink" title="问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示"></a>问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</h3><p>这个问题其实比较容易理解，因为路径别名是Webpack构建时使用的，并不是VSCode原生支持的功能，所以它并不认识<code>@</code>，这是个什么，所以解决思路就是告诉VSCode <code>@</code> 是个什么就好了，专业一点说的话就是加上映射关系</p>
+<h4 id="解决步骤"><a href="#解决步骤" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>打开path-intellisense插件的setting</li>
+<li>找到Mapping配置项</li>
+<li>加以下代码<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;path-intellisense.mappings&quot;: &#123;</span><br><span class="line">      &quot;@&quot;: &quot;$&#123;workspaceRoot&#125;/src&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启插件搞定！</li>
+</ol>
+<h3 id="问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"><a href="#问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。" class="headerlink" title="问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"></a>问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</h3><p>第二个问题提出时，可能会有人有疑问，上面不是配置完映射关系了嘛，为什么还有下面的问题呢，其实你要是不问，我也有这个问题，上一步操作实际上是告诉了path-intellisense插件该怎么解析<code>@</code>这个东西，但是VSCode并不知道啊，但是Ctrl + 鼠标左键的动作又是VSCode负责的事，所以我们也要告诉一下编辑器该如何应对上面的情况，说到这里大家应该就理解了</p>
+<h4 id="解决步骤-1"><a href="#解决步骤-1" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>在项目package.json所在同级目录下创建文件jsconfig.json（这是VSCode的一个可选配置）</li>
+<li>在jsconfig.json增加如下配置<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;target&quot;</span>: <span class="string">&quot;ES6&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;module&quot;</span>: <span class="string">&quot;commonjs&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;allowSyntheticDefaultImports&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;paths&quot;</span>: &#123;</span><br><span class="line">          <span class="attr">&quot;@/*&quot;</span>: [<span class="string">&quot;src/*&quot;</span>] <span class="comment">// 这里是关键代码</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;exclude&quot;</span>: [</span><br><span class="line">        <span class="string">&quot;node_modules&quot;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启VSCode搞定！</li>
+</ol>
+<p>通过上面的解决方案，我们就可以愉快的使用VSCode进行前端开发了，你学废了吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月08日 - 08:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/VSCode%E6%8F%92%E4%BB%B6/" rel="tag"># VSCode插件</a>
+              <a href="/tags/path-intellisense/" rel="tag"># path-intellisense</a>
+              <a href="/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" rel="tag"># 路径别名</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2020/11/11/learn-ionic-1/" rel="prev" title="从零开始：学习Ionic（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Ionic（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="next" title="关于版本管理">
+      关于版本管理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%BA%E6%99%AF%EF%BC%9A"><span class="nav-number">1.1.</span> <span class="nav-text">场景：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%B8%80%EF%BC%9A%E5%9B%A0%E4%B8%BA%E4%BD%BF%E7%94%A8%E4%BA%86%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E5%AF%BC%E8%87%B4path-intellisense%E4%B8%8D%E8%83%BD%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA"><span class="nav-number">1.2.</span> <span class="nav-text">问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.2.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%BA%8C%EF%BC%9A%E6%88%91%E4%BB%AC%E5%B8%8C%E6%9C%9B-Ctrl-%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E7%82%B9%E5%87%BB%E4%B8%80%E4%B8%AA%E5%A4%96%E9%83%A8%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C%E8%83%BD%E5%A4%9F%E5%BF%AB%E9%80%9F%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%AF%B9%E5%BA%94%E7%9A%84%E5%A4%96%E9%83%A8%E6%96%87%E4%BB%B6%E3%80%82"><span class="nav-number">1.3.</span> <span class="nav-text">问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '340ce1d61a44f8b0c6ddb5db10edddfb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html" "b/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
new file mode 100644
index 0000000000..08e9a9ce70
--- /dev/null
+++ "b/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="关于版本管理">
+<meta property="og:url" content="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2021-05-13T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="SemVer">
+<meta property="article:tag" content="版本管理">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>关于版本管理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          关于版本管理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+<span id="more"></span>
+<h2 id="关于版本号的那些事"><a href="#关于版本号的那些事" class="headerlink" title="关于版本号的那些事"></a>关于版本号的那些事</h2><p>你会发现这些版本号通常是三部分构成的，像是‘X.Y.Z’的一种感觉，其实这是一种叫做<code>SemVer</code>的版本管理规范，下面我们就来讲讲<code>SemVer</code>。</p>
+<h3 id="SemVer-的生平"><a href="#SemVer-的生平" class="headerlink" title="SemVer 的生平"></a>SemVer 的生平</h3><p>语义化版本控制的规范是由 Gravatars 创办者兼 GitHub 共同创办者 Tom Preston-Werner 所建立。</p>
+<p>它的许可证是 知识共享 署名 3.0 (CC BY 3.0)  所以你可以不用付费直接使用它。</p>
+<p>关于它的更多描述你可以到下面的地址找到<br><a target="_blank" rel="noopener" href="https://semver.org/lang/zh-CN/">https://semver.org/lang/zh-CN/</a></p>
+<p>主要你要记住的是如下几句话：</p>
+<blockquote>
+<p>版本格式：主版本号.次版本号.修订号，版本号递增规则如下：</p>
+<p>主版本号：当你做了不兼容的 API 修改，<br>次版本号：当你做了向下兼容的功能性新增，<br>修订号：当你做了向下兼容的问题修正。<br>先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。</p>
+</blockquote>
+<p>更多的内容的话，请到官网查看吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">关于版本管理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月13日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" title="关于版本管理">https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/SemVer/" rel="tag"># SemVer</a>
+              <a href="/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="tag"># 版本管理</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="prev" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      <i class="fa fa-chevron-left"></i> VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="next" title="数组方法哪些有副作用，一目了然！">
+      数组方法哪些有副作用，一目了然！ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E5%8F%B7%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B"><span class="nav-number">1.1.</span> <span class="nav-text">关于版本号的那些事</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SemVer-%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">1.1.1.</span> <span class="nav-text">SemVer 的生平</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '873844bbf197eb2dba9e59d228efbb0f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/03/11/\346\220\236\346\207\202EventLoop/index.html" "b/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
new file mode 100644
index 0000000000..633e3a580b
--- /dev/null
+++ "b/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搞懂EventLoop">
+<meta property="og:url" content="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="article:published_time" content="2022-03-11T08:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="EventLoop">
+<meta property="article:tag" content="事件驱动">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>搞懂EventLoop | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搞懂EventLoop
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+<span id="more"></span>
+
+<h2 id="浏览器的事件循环"><a href="#浏览器的事件循环" class="headerlink" title="浏览器的事件循环"></a>浏览器的事件循环</h2><p>首先我们要知道，浏览器的事件循环是有这么两个部分构成，一个叫做主线程（main thread），另一个叫做调用栈（call-stack），所有的任务（Task）都会被放到调用栈里，等待主线程调用，这个怎么理解呢，打个比方，主线程就像是物流配送中的传送带，如果没有快递往上放的时候，它是空的，当有快递包裹放上去的时候，它就开始运行，而你购买的产品要放倒包裹里，然后包裹在放到传送带上，最终被送到你家里，这里的传送带就是主线程，包裹就是调用栈，而购买的产品就是任务，不知道这样解释是否能好理解一些。</p>
+<h3 id="同步、异步任务"><a href="#同步、异步任务" class="headerlink" title="同步、异步任务"></a>同步、异步任务</h3><p>JavaScript中的任务有两种，一种是同步任务，另一种是异步任务。</p>
+<ul>
+<li>同步任务会排着队，逐个执行</li>
+<li>异步任务在执行得到结果后，将回调函数添加到任务队列中，等着主线程空了再执行。</li>
+</ul>
+<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>栈，是一种数据结构，后进先出（LIFO），后入栈的先执行，执行完后出栈执行栈顶新的那个函数，直到栈空，像个瓶子，只有一头有口。</p>
+<h3 id="任务队列"><a href="#任务队列" class="headerlink" title="任务队列"></a>任务队列</h3><p>队列，也是一种数据结构，先进先出（FIFO），队头出，队尾进，先到先得，就像排队买东西，或者汽车排队过隧道。</p>
+<h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a>任务</h3><p>任务分为两种，一种叫做宏任务（MacroTask），另一种叫做微任务（MicroTask），首先他们都是<strong>异步队列</strong>中的任务，那它们之间是什么关系呢？简单说来就是微任务是VIP优先执行，全部微任务执行完之后才轮到普通用户宏任务执行，而且执行完一个后马上要看有没有新的微任务执行，有的话宏任务还得等着，就这样往复，看着像不像是在银行等着排队办业务的你（其实是我）。<br><img src="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg" alt="JavaScript的执行流程"><br><img src="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png" alt="宏任务与微任务"><br>那么哪些是宏任务，哪些是微任务呢？看下表吧。</p>
+<table>
+<thead>
+<tr>
+<th>宏任务</th>
+<th>微任务</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>setTimeout、setInterval、js主代码、setImmediate(Node)、requestAnimationFrame(浏览器)</td>
+<td>process.nextTick、Promise的then方法</td>
+</tr>
+</tbody></table>
+<h3 id="举个例子"><a href="#举个例子" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    resolve();</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h4 id="分析一下"><a href="#分析一下" class="headerlink" title="分析一下"></a>分析一下</h4><p>JS 运行机制为<strong>从上而下</strong>，那么这里的执行顺序应该是什么样的呢？</p>
+<h5 id="第一轮循环："><a href="#第一轮循环：" class="headerlink" title="第一轮循环："></a>第一轮循环：</h5><p>1）、首先打印 1<br>2）、接下来是setTimeout是异步任务且是宏任务，加入宏任务暂且记为 setTimeout1<br>3）、接下来是 process 微任务 加入微任务队列 记为 process1<br>4）、接下来是 new Promise 里面直接 resolve(7) 所以打印 7 后面的then是微任务 记为 then1<br>5）、setTimeout 宏任务 记为 setTimeout2</p>
+<blockquote>
+<p>第一轮循环打印出的是 1 7<br>当前宏任务队列：setTimeout1, setTimeout2<br>当前微任务队列：process1, then1,</p>
+</blockquote>
+<h5 id="第二轮循环："><a href="#第二轮循环：" class="headerlink" title="第二轮循环："></a>第二轮循环：</h5><p>1）、执行所有微任务<br>2）、执行process1，打印出 6<br>3）、执行then1 打印出8<br>4）、微任务都执行结束了，开始执行第一个宏任务<br>5）、执行 setTimeout1 也就是 第 3 - 14 行<br>6）、首先打印出 2<br>7）、遇到 process 微任务 记为 process2<br>8）、new Promise中resolve 打印出 4<br>9）、then 微任务 记为 then2</p>
+<blockquote>
+<p>第二轮循环结束，当前打印出来的是 1 7 6 8 2 4<br>当前宏任务队列：setTimeout2<br>当前微任务队列：process2, then2</p>
+</blockquote>
+<h5 id="第三轮循环："><a href="#第三轮循环：" class="headerlink" title="第三轮循环："></a>第三轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行 process2 打印出 3<br>3）、执行 then2 打印出 5<br>4）、执行第一个宏任务，也就是执行 setTimeout2 对应代码中的 25 - 36 行<br>5）、首先打印出 9<br>6）、process 微任务 记为 process3<br>7）、new Promise执行resolve 打印出 11<br>8）、then 微任务 记为 then3</p>
+<blockquote>
+<p>第三轮循环结束，当前打印顺序为：1 7 6 8 2 4 3 5 9 11<br>当前宏任务队列为空<br>当前微任务队列：process3，then3</p>
+</blockquote>
+<h5 id="第四轮循环："><a href="#第四轮循环：" class="headerlink" title="第四轮循环："></a>第四轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行process3 打印出 10<br>3）、执行then3 打印出 12</p>
+<p>代码执行结束：<br>最终打印顺序为：1 7 6 8 2 4 3 5 9 11 10 12</p>
+<h2 id="Node环境的循环机制"><a href="#Node环境的循环机制" class="headerlink" title="Node环境的循环机制"></a>Node环境的循环机制</h2><p>Node的Event loop一共分为<strong>6</strong>个阶段，每个细节具体如下：</p>
+<ul>
+<li><strong><code>timers</code></strong>: 执行setTimeout和setInterval中到期的callback。</li>
+<li><strong><code>pending callback</code></strong>: 上一轮循环中少数的callback会放在这一阶段执行。</li>
+<li><strong><code>idle, prepare</code></strong>: 仅在内部使用。</li>
+<li><strong><code>poll</code></strong>: 最重要的阶段，执行pending callback，在适当的情况下回阻塞在这个阶段。</li>
+<li><strong><code>check</code></strong>: 执行setImmediate(setImmediate()是将事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数)的callback。</li>
+<li><strong><code>close callbacks</code></strong>: 执行close事件的callback，例如socket.on(‘close’[,fn])或者http.server.on(‘close, fn)。</li>
+</ul>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="Node EventLoop"></p>
+<p>具体细节如下：</p>
+<h3 id="timers"><a href="#timers" class="headerlink" title="timers"></a>timers</h3><p>执行setTimeout和setInterval中到期的callback，执行这两者回调需要设置一个毫秒数，理论上来说，应该是时间一到就立即执行callback回调，但是由于system的调度可能会延时，达不到预期时间。<br>以下是官网文档解释的例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncOperation</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Assume this takes 95ms to complete</span></span><br><span class="line">  fs.readFile(<span class="string">&#x27;/path/to/file&#x27;</span>, callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> timeoutScheduled = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> delay = <span class="built_in">Date</span>.now() - timeoutScheduled;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;delay&#125;</span>ms have passed since I was scheduled`</span>);</span><br><span class="line">&#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// do someAsyncOperation which takes 95 ms to complete</span></span><br><span class="line">someAsyncOperation(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> startCallback = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line">  <span class="comment">// do something that will take 10ms...</span></span><br><span class="line">  <span class="keyword">while</span> (<span class="built_in">Date</span>.now() - startCallback &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    <span class="comment">// do nothing</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>当进入事件循环时，它有一个空队列（fs.readFile()尚未完成），因此定时器将等待剩余毫秒数，当到达95ms时，fs.readFile()完成读取文件并且其完成需要10毫秒的回调被添加到轮询队列并执行。<br>当回调结束时，队列中不再有回调，因此事件循环将看到已达到最快定时器的阈值，然后回到timers阶段以执行定时器的回调。<br>在此示例中，您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。</p>
+<h3 id="pending-callbacks"><a href="#pending-callbacks" class="headerlink" title="pending callbacks"></a>pending callbacks</h3><p>此阶段执行某些系统操作（例如TCP错误类型）的回调。 例如，如果TCP socket ECONNREFUSED在尝试connect时receives，则某些* nix系统希望等待报告错误。 这将在pending callbacks阶段执行。</p>
+<h3 id="poll"><a href="#poll" class="headerlink" title="poll"></a>poll</h3><p>该poll阶段有两个主要功能：</p>
+<ul>
+<li>执行I/O回调。</li>
+<li>处理轮询队列中的事件。</li>
+</ul>
+<p><strong>当事件循环进入poll阶段并且在timers中没有可以执行定时器时，将发生以下两种情况之一</strong><br>如果poll队列不为空，则事件循环将遍历其同步执行它们的callback队列，直到队列为空，或者达到system-dependent（系统相关限制）。</p>
+<p><strong>如果poll队列为空，则会发生以下两种情况之一</strong></p>
+<ul>
+<li>如果有setImmediate()回调需要执行，则会立即停止执行poll阶段并进入执行check阶段以执行回调。</li>
+<li>如果没有setImmediate()回到需要执行，poll阶段将等待callback被添加到队列中，然后立即执行。</li>
+</ul>
+<p><strong>当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。</strong></p>
+<h3 id="check"><a href="#check" class="headerlink" title="check"></a>check</h3><p>此阶段允许人员在poll阶段完成后立即执行回调。<br>如果poll阶段闲置并且script已排队setImmediate()，则事件循环到达check阶段执行而不是继续等待。<br>setImmediate()实际上是一个特殊的计时器，它在事件循环的一个单独阶段运行。它使用libuv API来调度在poll阶段完成后执行的回调。<br>通常，当代码被执行时，事件循环最终将达到poll阶段，它将等待传入连接，请求等。<br>但是，如果已经调度了回调setImmediate()，并且轮询阶段变为空闲，则它将结束并且到达check阶段，而不是等待poll事件。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;start&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer1&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise1&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer2&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise2&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;promise3&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;end&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>如果Node版本是v11.x，那么执行结果和浏览器一致，结果如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>如果是v10版本上，那结果将会出现两种情况<br><strong>如果time2定时器已经在执行队列中了</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">timer2</span><br><span class="line">promise1</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p><strong>如果time2定时器没有在执行对列中，执行结果为</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>具体情况可以参考poll阶段的两种情况。</p>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="NodeEventLoop"></p>
+<h2 id="setImmediate-的setTimeout-的区别"><a href="#setImmediate-的setTimeout-的区别" class="headerlink" title="setImmediate() 的setTimeout()的区别"></a>setImmediate() 的setTimeout()的区别</h2><p><strong>setImmediate和setTimeout()是相似的，但根据它们被调用的时间以不同的方式表现。</strong></p>
+<ul>
+<li>setImmediate()设计用于在当前poll阶段完成后check阶段执行脚本 。</li>
+<li>setTimeout() 安排在经过最小（ms）后运行的脚本，在timers阶段执行。</li>
+</ul>
+<h3 id="举个例子-1"><a href="#举个例子-1" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p><strong>执行定时器的顺序将根据调用它们的上下文而有所不同。 如果从主模块中调用两者，那么时间将受到进程性能的限制。</strong><br><strong>其结果也不一致</strong></p>
+<p><strong>如果在I / O周期内移动两个调用，则始终首先执行立即回调：</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readFile(__filename, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line">  setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>其结果可以确定一定是immediate =&gt; timeout。<br>主要原因是在I/O阶段读取文件后，事件循环会先进入poll阶段，发现有setImmediate需要执行，会立即进入check阶段执行setImmediate的回调。<br>然后再进入timers阶段，执行setTimeout，打印timeout。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">   ┌───────────────────────────┐</span><br><span class="line">┌─&gt;│           timers          │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │     pending callbacks     │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │       idle, prepare       │</span><br><span class="line">│  └─────────────┬─────────────┘      ┌───────────────┐</span><br><span class="line">│  ┌─────────────┴─────────────┐      │   incoming:   │</span><br><span class="line">│  │           poll            │&lt;─────┤  connections, │</span><br><span class="line">│  └─────────────┬─────────────┘      │   data, etc.  │</span><br><span class="line">│  ┌─────────────┴─────────────┐      └───────────────┘</span><br><span class="line">│  │           check           │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">└──┤      close callbacks      │</span><br><span class="line">   └───────────────────────────┘</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="Process-nextTick"><a href="#Process-nextTick" class="headerlink" title="Process.nextTick()"></a>Process.nextTick()</h2><p>process.nextTick()虽然它是异步API的一部分，但未在图中显示。这是因为process.nextTick()从技术上讲，它不是事件循环的一部分。</p>
+<p>process.nextTick()方法将 callback 添加到next tick队列。 一旦当前事件轮询队列的任务全部完成，在next tick队列中的所有callbacks会被依次调用。</p>
+<p>换种理解方式：</p>
+<p><strong>当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。</strong></p>
+<h3 id="举个例子-2"><a href="#举个例子-2" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> bar;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setTimeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setImmediate&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncApiCall</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  process.nextTick(callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">someAsyncApiCall(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;bar&#x27;</span>, bar); <span class="comment">// 1</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">bar = <span class="number">1</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>在NodeV10中上述代码执行可能有两种答案，一种为：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line">setImmediate</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>另一种为</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line">setImmediate</span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>无论哪种，始终都是先执行process.nextTick(callback)，打印bar 1。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">搞懂EventLoop</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 08:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" title="搞懂EventLoop">https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/EventLoop/" rel="tag"># EventLoop</a>
+              <a href="/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" rel="tag"># 事件驱动</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="prev" title="数组方法哪些有副作用，一目了然！">
+      <i class="fa fa-chevron-left"></i> 数组方法哪些有副作用，一目了然！
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="next" title="前端开发插件">
+      前端开发插件 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器的事件循环</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5%E3%80%81%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">同步、异步任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E6%A0%88"><span class="nav-number">1.1.2.</span> <span class="nav-text">调用栈</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97"><span class="nav-number">1.1.3.</span> <span class="nav-text">任务队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.4.</span> <span class="nav-text">任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90"><span class="nav-number">1.1.5.</span> <span class="nav-text">举个例子</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%86%E6%9E%90%E4%B8%80%E4%B8%8B"><span class="nav-number">1.1.5.1.</span> <span class="nav-text">分析一下</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.1.</span> <span class="nav-text">第一轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.2.</span> <span class="nav-text">第二轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.3.</span> <span class="nav-text">第三轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.4.</span> <span class="nav-text">第四轮循环：</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Node%E7%8E%AF%E5%A2%83%E7%9A%84%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">Node环境的循环机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#timers"><span class="nav-number">1.2.1.</span> <span class="nav-text">timers</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#pending-callbacks"><span class="nav-number">1.2.2.</span> <span class="nav-text">pending callbacks</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#poll"><span class="nav-number">1.2.3.</span> <span class="nav-text">poll</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#check"><span class="nav-number">1.2.4.</span> <span class="nav-text">check</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setImmediate-%E7%9A%84setTimeout-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.3.</span> <span class="nav-text">setImmediate() 的setTimeout()的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Process-nextTick"><span class="nav-number">1.4.</span> <span class="nav-text">Process.nextTick()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-2"><span class="nav-number">1.4.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '32b434f9326db47191b9fe3376fad7e8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html" "b/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
new file mode 100644
index 0000000000..def59e96e5
--- /dev/null
+++ "b/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
@@ -0,0 +1,785 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组方法哪些有副作用，一目了然！">
+<meta property="og:url" content="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-03-11T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="数组">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>数组方法哪些有副作用，一目了然！ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组方法哪些有副作用，一目了然！
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+<span id="more"></span>
+<h2 id="关于数组的那些方法"><a href="#关于数组的那些方法" class="headerlink" title="关于数组的那些方法"></a>关于数组的那些方法</h2><p>其实上面的问题：</p>
+<blockquote>
+<p>数组有哪些方法会改变原来的值</p>
+</blockquote>
+<p>现在有个词挺火的，叫做纯函数，什么是纯函数呢，就是没有副作用，什么是没有副作用呢，就是结果是幂等的，等等….怎么越来越绕，简单来说，就是这个函数干几次都是一样的结果，出了函数就不会有任何影响，他就像一台加工机器，输入原料，输出产品，没有任何其他输出材料，比如废气之类影响大气的东西。好吧，你不明白也没关系，反正我对上面这个问题的理解就变成了</p>
+<blockquote>
+<p>数组的哪些方法是没有副作用的。</p>
+</blockquote>
+<p>要说有哪些方法是有副作用，首先你得知道有哪些方法，</p>
+<p>比如，push，pop，shift，unshift，splice 这些别跟我说你不知道，这些都是常用的数组操作，出栈入栈，<br>还有什么呢，数组的排序啊，比如sort，reverse，还有一个用的不多，fill是用一个固定值填充数组的起始元素到终止元素，这些呢都是在原数组上进行操作，所以肯定是影响数组的值的，也就是说有副作用的。</p>
+<p>那么哪些没有副作用呢，简单说其他的都没有，<br>啥！？，是的，其他的都没有。。。所以记得上面这些就好了呀，怎么样，是不简单。</p>
+<p>那还剩下啥？</p>
+<ul>
+<li>concat 返回的是心数组，</li>
+<li>join 返回的是字符串，</li>
+<li>indexOf和lastIndexOf返回的是索引，</li>
+<li>slice 返回的是切割后的新数组，别把它和splice混淆了哈，</li>
+<li>entries 返回一个新的Array Iterator对象，</li>
+<li>keys 返回一个新的包含全部Array索引的 Iterator对象，</li>
+<li>values 有keys就有values，返回一个新的包含全部Array值的 Iterator对象，</li>
+<li>every、some、includes 返回 布尔值，</li>
+<li>filter，map 返回新数组，</li>
+<li>reducer 有点神奇 返回累加值，</li>
+<li>find、findIndex 找元素 一个返回第一个符合的元素本身，一个返回他的索引，</li>
+<li>最后还有个flat，展平了数组，</li>
+<li>forEach 遍历数组， 这么一数起来，方法还真不少呢！</li>
+</ul>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>想要记住所有的方法呢，不下点功夫是不行的，但是想要记住有副作用的，然后排除掉他们的话，还是容易的，最后做个表，方便直观的来看。</p>
+<table>
+<thead>
+<tr>
+<th>方法</th>
+<th>作用</th>
+<th>返回结果</th>
+<th>有无副作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>push</td>
+<td>数组尾部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>pop</td>
+<td>数组尾部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>shift</td>
+<td>数组头部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>unshift</td>
+<td>数组头部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>splice</td>
+<td>增删改数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>sort</td>
+<td>数组排序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>reverse</td>
+<td>数组反序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>填充数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>concat</td>
+<td>连结数组</td>
+<td>合并的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>join</td>
+<td>合并数组为字符串</td>
+<td>字符串</td>
+<td>无</td>
+</tr>
+<tr>
+<td>indexOf</td>
+<td>查索引</td>
+<td>第一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>lastIndexOf</td>
+<td>查索引</td>
+<td>最后一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>slice</td>
+<td>截取数组</td>
+<td>截取的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>entries</td>
+<td>迭代数组</td>
+<td>迭代器对象</td>
+<td>无</td>
+</tr>
+<tr>
+<td>keys</td>
+<td>迭代数组的key</td>
+<td>全部的key</td>
+<td>无</td>
+</tr>
+<tr>
+<td>values</td>
+<td>迭代数组的value</td>
+<td>全部的value</td>
+<td>无</td>
+</tr>
+<tr>
+<td>every</td>
+<td>每个都满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>some</td>
+<td>有一些满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>includes</td>
+<td>包含某元素</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>filter</td>
+<td>过滤数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>map</td>
+<td>加工数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>reducer</td>
+<td>迭代数组</td>
+<td>累加值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>find</td>
+<td>查找元素</td>
+<td>第一个元素或undifined</td>
+<td>无</td>
+</tr>
+<tr>
+<td>findIndex</td>
+<td>查找元素</td>
+<td>第一个元素的index</td>
+<td>无</td>
+</tr>
+<tr>
+<td>flat</td>
+<td>展平数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>forEach</td>
+<td>遍历数组</td>
+<td>void</td>
+<td>无</td>
+</tr>
+</tbody></table>
+<p>就到这里，怎么样，清楚了吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">数组方法哪些有副作用，一目了然！</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" title="数组方法哪些有副作用，一目了然！">https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/tags/%E6%95%B0%E7%BB%84/" rel="tag"># 数组</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="prev" title="关于版本管理">
+      <i class="fa fa-chevron-left"></i> 关于版本管理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="next" title="搞懂EventLoop">
+      搞懂EventLoop <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%95%B0%E7%BB%84%E7%9A%84%E9%82%A3%E4%BA%9B%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">关于数组的那些方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.2.</span> <span class="nav-text">总结</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cd610661ae9ab482f841f6f2e2333b97',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html" "b/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..fc292173ab
--- /dev/null
+++ "b/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CodeReview代码审查指南.md">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CodeReview">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>CodeReview代码审查指南.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CodeReview代码审查指南.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">CodeReview代码审查指南.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" title="CodeReview代码审查指南.md">https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/CodeReview/" rel="tag"># CodeReview</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="prev" title="前后端分离开发规范">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发规范
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="next" title="Restful API 的设计规范.md">
+      Restful API 的设计规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%EF%BC%8E%E5%85%B3%E4%BA%8ECode-Review"><span class="nav-number">1.</span> <span class="nav-text">1．关于Code Review</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-Code-Review%E7%9A%84%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.</span> <span class="nav-text">1.1 Code Review的目的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-Code-Review%E7%9A%84%E5%89%8D%E6%8F%90"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 Code Review的前提</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-Code-Review%E9%9C%80%E8%A6%81%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">1.3.</span> <span class="nav-text">1.3 Code Review需要做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-1-%E5%AE%8C%E6%95%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Completeness%EF%BC%89"><span class="nav-number">1.3.1.</span> <span class="nav-text">1.3.1  完整性检查（Completeness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-2-%E4%B8%80%E8%87%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Consistency%EF%BC%89"><span class="nav-number">1.3.2.</span> <span class="nav-text">1.3.2  一致性检查（Consistency）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-3-%E6%AD%A3%E7%A1%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Correctness%EF%BC%89"><span class="nav-number">1.3.3.</span> <span class="nav-text">1.3.3  正确性检查（Correctness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-4-%E5%8F%AF%E4%BF%AE%E6%94%B9%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Modifiability%EF%BC%89"><span class="nav-number">1.3.4.</span> <span class="nav-text">1.3.4  可修改性检查（Modifiability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-5-%E5%8F%AF%E9%A2%84%E6%B5%8B%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Predictability%EF%BC%89"><span class="nav-number">1.3.5.</span> <span class="nav-text">1.3.5  可预测性检查（Predictability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-6-%E5%81%A5%E5%A3%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Robustness%EF%BC%89"><span class="nav-number">1.3.6.</span> <span class="nav-text">1.3.6  健壮性检查（Robustness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-7-%E7%BB%93%E6%9E%84%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Structuredness%EF%BC%89"><span class="nav-number">1.3.7.</span> <span class="nav-text">1.3.7  结构性检查（Structuredness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-8-%E5%8F%AF%E8%BF%BD%E6%BA%AF%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Traceability%EF%BC%89"><span class="nav-number">1.3.8.</span> <span class="nav-text">1.3.8  可追溯性检查（Traceability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-9-%E5%8F%AF%E7%90%86%E8%A7%A3%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Understandability%EF%BC%89"><span class="nav-number">1.3.9.</span> <span class="nav-text">1.3.9  可理解性检查（Understandability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-10-%E5%8F%AF%E9%AA%8C%E8%AF%81%E6%80%A7%E6%A3%80%E6%9F%A5-Verifiability"><span class="nav-number">1.3.10.</span> <span class="nav-text">1.3.10 可验证性检查(Verifiability)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-Code-Review%E7%9A%84%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">1.4  Code Review的步骤</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%EF%BC%8ECode-Reivew%E7%9A%84%E6%89%A7%E8%A1%8C"><span class="nav-number">2.</span> <span class="nav-text">2．Code Reivew的执行</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1%EF%BC%8E%E4%BA%8B%E5%89%8D%E5%87%86%E5%A4%87%E9%98%B6%E6%AE%B5"><span class="nav-number">2.1.</span> <span class="nav-text">2.1．事前准备阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-1%EF%BC%8ECR%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.1.1.</span> <span class="nav-text">2.1.1．CR的对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-2%EF%BC%8ECR%E7%9A%84%E5%86%85%E5%AE%B9"><span class="nav-number">2.1.2.</span> <span class="nav-text">2.1.2．CR的内容</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-3%EF%BC%8E%E8%AF%84%E5%AE%A1%E8%A7%84%E8%8C%83%E5%92%8C%E6%A0%87%E5%87%86"><span class="nav-number">2.1.3.</span> <span class="nav-text">2.1.3．评审规范和标准</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-4%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%8F%82%E4%B8%8E%E8%80%85"><span class="nav-number">2.1.4.</span> <span class="nav-text">2.1.4．选择CR活动的参与者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-5%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%AE%9E%E6%96%BD%E6%96%B9%E5%BC%8F%E3%80%82"><span class="nav-number">2.1.5.</span> <span class="nav-text">2.1.5．选择CR活动的实施方式。</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2%EF%BC%8E%E5%AE%9E%E6%96%BD%E9%98%B6%E6%AE%B5"><span class="nav-number">2.2.</span> <span class="nav-text">2.2．实施阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-1%EF%BC%8E%E5%87%86%E7%A1%AE%E8%AE%B0%E5%BD%95"><span class="nav-number">2.2.1.</span> <span class="nav-text">2.2.1．准确记录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-2%EF%BC%8E%E8%AE%B2%E8%A7%A3%E4%B8%8E%E6%8F%90%E9%97%AE"><span class="nav-number">2.2.2.</span> <span class="nav-text">2.2.2．讲解与提问</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-3%EF%BC%8E%E9%80%90%E9%A1%B9%E5%AE%A1%E6%9F%A5"><span class="nav-number">2.2.3.</span> <span class="nav-text">2.2.3．逐项审查</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-4%EF%BC%8E%E6%B3%A8%E6%84%8F%E6%B0%94%E6%B0%9B"><span class="nav-number">2.2.4.</span> <span class="nav-text">2.2.4．注意气氛</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E4%BA%8B%E5%90%8E%E8%B7%9F%E8%B8%AA%E8%B7%9F%E8%B8%AA%E3%80%82"><span class="nav-number">2.3.</span> <span class="nav-text">2.3. 事后跟踪跟踪。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-1-%E7%A1%AE%E8%AE%A4%E5%8F%91%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">2.3.1.</span> <span class="nav-text">2.3.1. 确认发现的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-2-%E4%BF%AE%E6%AD%A3%E9%97%AE%E9%A2%98%E8%B4%A3%E4%BB%BB%E8%80%85"><span class="nav-number">2.3.2.</span> <span class="nav-text">2.3.2. 修正问题责任者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-3-%E4%BF%AE%E6%AD%A3%E7%BB%93%E6%9E%9C%E7%A1%AE%E8%AE%A4%E8%80%85"><span class="nav-number">2.3.3.</span> <span class="nav-text">2.3.3. 修正结果确认者</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%EF%BC%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">3．注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%BB%8F%E5%B8%B8%E8%BF%9B%E8%A1%8CCode-Review"><span class="nav-number">3.1.</span> <span class="nav-text">3.1. 经常进行Code Review</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-Code-Review%E4%B8%8D%E8%A6%81%E5%A4%AA%E6%AD%A3%E5%BC%8F%EF%BC%8C%E8%80%8C%E4%B8%94%E8%A6%81%E7%9F%AD"><span class="nav-number">3.2.</span> <span class="nav-text">3.2.  Code Review不要太正式，而且要短</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%B0%BD%E5%8F%AF%E8%83%BD%E7%9A%84%E8%AE%A9%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BA%BAReivew%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">3.3.</span> <span class="nav-text">3.3. 尽可能的让不同的人Reivew你的代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-%E4%BF%9D%E6%8C%81%E7%A7%AF%E6%9E%81%E7%9A%84%E6%AD%A3%E9%9D%A2%E7%9A%84%E6%80%81%E5%BA%A6"><span class="nav-number">3.4.</span> <span class="nav-text">3.4. 保持积极的正面的态度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-5-%E5%AD%A6%E4%BC%9A%E4%BA%AB%E5%8F%97Code-Reivew"><span class="nav-number">3.5.</span> <span class="nav-text">3.5. 学会享受Code Reivew</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B5%84%E6%96%99%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">资料来源</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8bf09e947b552d878affb048ec3e970c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html" "b/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..decbc4be0f
--- /dev/null
+++ "b/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Electron编码规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Electron编码规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Electron编码规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">Electron编码规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" title="Electron编码规范.md">https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/squid/" rel="prev" title="Squid 服务器学习笔记">
+      <i class="fa fa-chevron-left"></i> Squid 服务器学习笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="next" title="前后端分离开发指南">
+      前后端分离开发指南 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '89f25fad8be1feefbb54daf19f3d950b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/06/01/GIT Standard/index.html b/2022/06/01/GIT Standard/index.html
new file mode 100644
index 0000000000..c998b85bbf
--- /dev/null
+++ b/2022/06/01/GIT Standard/index.html	
@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:type" content="article">
+<meta property="og:title" content="GIT Standard.md">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/GIT%20Standard/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GIT">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>GIT Standard.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          GIT Standard.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/GIT%20Standard/">GIT Standard.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/GIT%20Standard/" title="GIT Standard.md">https://blog.lifesli.com/2022/06/01/GIT%20Standard/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/GIT%20Standard/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/GIT/" rel="tag"># GIT</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="prev" title="Restful API 的设计规范.md">
+      <i class="fa fa-chevron-left"></i> Restful API 的设计规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/02/DockerFile/" rel="next" title="DockerFile">
+      DockerFile <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E3%80%81%E8%AF%B4%E6%98%8E"><span class="nav-number">1.</span> <span class="nav-text">1、说明</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%E3%80%81git-commit-message-%E8%A7%84%E8%8C%83"><span class="nav-number">2.</span> <span class="nav-text">2、git commit message 规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commit-message%E6%A0%BC%E5%BC%8F"><span class="nav-number">2.1.</span> <span class="nav-text">commit message格式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#type-%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.2.</span> <span class="nav-text">type 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#scope-%E5%BD%B1%E5%93%8D%E8%8C%83%E5%9B%B4"><span class="nav-number">2.3.</span> <span class="nav-text">scope 影响范围</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#subject-%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.4.</span> <span class="nav-text">subject 描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#body-%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.5.</span> <span class="nav-text">body 详细描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#footer"><span class="nav-number">2.6.</span> <span class="nav-text">footer</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%E3%80%81%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7%E6%A0%A1%E9%AA%8Ccommit%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88%E8%A7%84%E8%8C%83"><span class="nav-number">3.</span> <span class="nav-text">3、使用工具校验commit是否符合规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commitlint"><span class="nav-number">3.1.</span> <span class="nav-text">commitlint</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-commitlint%E5%AE%89%E8%A3%85"><span class="nav-number">3.1.1.</span> <span class="nav-text">3.1 commitlint安装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%94%9F%E6%88%90commitlint-config-js%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 生成commitlint.config.js配置文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%9C%A8commitlint-config-js%E5%88%B6%E5%AE%9A%E6%8F%90%E4%BA%A4message%E8%A7%84%E8%8C%83"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 在commitlint.config.js制定提交message规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#husky"><span class="nav-number">3.4.</span> <span class="nav-text">husky</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-husky%E5%AE%89%E8%A3%85"><span class="nav-number">3.4.1.</span> <span class="nav-text">3.4 husky安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E9%85%8D%E7%BD%AE"><span class="nav-number">3.4.2.</span> <span class="nav-text">3.5 husky 配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E6%89%A7%E8%A1%8C%E6%B5%8B%E8%AF%95"><span class="nav-number">3.4.3.</span> <span class="nav-text">3.5 husky 执行测试</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">5.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/GIT%20Standard/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/GIT%20Standard/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/GIT%20Standard/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '03ccce8c61d494644bfb056a89f600de',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html" "b/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..88d0b716ab
--- /dev/null
+++ "b/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"	
@@ -0,0 +1,823 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Restful API 的设计规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Restful API">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Restful API 的设计规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Restful API 的设计规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">Restful API 的设计规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" title="Restful API 的设计规范.md">https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Restful-API/" rel="tag"># Restful API</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="prev" title="CodeReview代码审查指南.md">
+      <i class="fa fa-chevron-left"></i> CodeReview代码审查指南.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/GIT%20Standard/" rel="next" title="GIT Standard.md">
+      GIT Standard.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-URI"><span class="nav-number">1.</span> <span class="nav-text">1. URI</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E8%A7%84%E8%8C%83"><span class="nav-number">1.1.</span> <span class="nav-text">URI规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88-vs-%E5%8D%95%E4%B8%AA%E8%B5%84%E6%BA%90"><span class="nav-number">1.2.</span> <span class="nav-text">资源集合 vs 单个资源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%B1%82%E7%BA%A7%E8%BF%87%E6%B7%B1%E7%9A%84URI"><span class="nav-number">1.3.</span> <span class="nav-text">避免层级过深的URI</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9Composite%E8%B5%84%E6%BA%90%E7%9A%84%E8%AE%BF%E9%97%AE"><span class="nav-number">1.4.</span> <span class="nav-text">对Composite资源的访问</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-Request"><span class="nav-number">2.</span> <span class="nav-text">2. Request</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">HTTP方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E5%85%A8%E6%80%A7%E5%92%8C%E5%B9%82%E7%AD%89%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">安全性和幂等性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%8D%E6%9D%82%E6%9F%A5%E8%AF%A2"><span class="nav-number">2.3.</span> <span class="nav-text">复杂查询</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Bookmarker"><span class="nav-number">2.4.</span> <span class="nav-text">Bookmarker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Format"><span class="nav-number">2.5.</span> <span class="nav-text">Format</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-Response"><span class="nav-number">3.</span> <span class="nav-text">6. Response</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%86%E9%A1%B5response"><span class="nav-number">3.1.</span> <span class="nav-text">分页response</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="nav-number">4.</span> <span class="nav-text">7. 错误处理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E6%9C%8D%E5%8A%A1%E5%9E%8B%E8%B5%84%E6%BA%90"><span class="nav-number">5.</span> <span class="nav-text">8. 服务型资源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">6.</span> <span class="nav-text">9. 异步任务</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-API%E7%9A%84%E6%BC%94%E8%BF%9B"><span class="nav-number">7.</span> <span class="nav-text">10. API的演进</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%89%88%E6%9C%AC"><span class="nav-number">7.1.</span> <span class="nav-text">版本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E5%A4%B1%E6%95%88"><span class="nav-number">7.2.</span> <span class="nav-text">URI失效</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#11-%E5%AE%89%E5%85%A8"><span class="nav-number">8.</span> <span class="nav-text">11. 安全</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="nav-number">9.</span> <span class="nav-text">参考文档</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '92d1ab70af975b81bc1d373c649bc4ef',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/06/01/squid/index.html b/2022/06/01/squid/index.html
new file mode 100644
index 0000000000..a33f7ac37c
--- /dev/null
+++ b/2022/06/01/squid/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Squid 服务器学习笔记">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Squid">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Squid 服务器学习笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Squid 服务器学习笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/squid/">Squid 服务器学习笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/squid/" title="Squid 服务器学习笔记">https://blog.lifesli.com/2022/06/01/squid/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/squid/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Squid/" rel="tag"># Squid</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="prev" title="前端开发插件">
+      <i class="fa fa-chevron-left"></i> 前端开发插件
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="next" title="Electron编码规范.md">
+      Electron编码规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0"><span class="nav-number">1.</span> <span class="nav-text">Squid 服务器学习笔记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.1.</span> <span class="nav-text">Squid 服务器介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.</span> <span class="nav-text">代理方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.3.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.</span> <span class="nav-text">配置文件</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/squid/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/squid/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/squid/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '835e7b67ca0ef4aabf3e26f8caa9a2d4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html" "b/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..0a377e6da8
--- /dev/null
+++ "b/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发指南">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发指南">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前后端分离开发指南 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发指南
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">前后端分离开发指南</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" title="前后端分离开发指南">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="tag"># 前后端分离开发指南</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="prev" title="Electron编码规范.md">
+      <i class="fa fa-chevron-left"></i> Electron编码规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="next" title="前后端分离开发规范">
+      前后端分离开发规范 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF"><span class="nav-number">1.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%A4%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">认识</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E8%A7%A3"><span class="nav-number">3.</span> <span class="nav-text">分解</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%BA%A4%E4%BA%92%E5%BD%A2%E5%BC%8F"><span class="nav-number">3.1.</span> <span class="nav-text">一、交互形式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F-%E6%B5%81%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">二、开发模式&#x2F;流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87%E6%96%B9%E5%BC%8F"><span class="nav-number">3.3.</span> <span class="nav-text">三、代码组织方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%E8%A7%84%E8%8C%83%E6%B5%81%E7%A8%8B"><span class="nav-number">3.4.</span> <span class="nav-text">四、数据接口规范流程</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E7%A6%BB%E5%90%8E%E7%9A%84%E6%94%B6%E7%9B%8A"><span class="nav-number">4.</span> <span class="nav-text">分离后的收益</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">5.</span> <span class="nav-text">注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E8%AF%AF%E5%8C%BA"><span class="nav-number">5.1.</span> <span class="nav-text">前后端分离误区</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">5.2.</span> <span class="nav-text">前后端分离适用场景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.</span> <span class="nav-text">前后端分离具体方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%BB%E4%BD%93%E6%96%B9%E5%90%91"><span class="nav-number">5.3.1.</span> <span class="nav-text">总体方向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%89%8B%E6%AE%B5"><span class="nav-number">5.3.2.</span> <span class="nav-text">技术手段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.3.</span> <span class="nav-text">部署方案</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88%E6%AF%94%E8%BE%83"><span class="nav-number">5.3.3.1.</span> <span class="nav-text">前后端分离部署方案比较</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">6.</span> <span class="nav-text">结语</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">7.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">8.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3b868c93b6652de9e265c91854f1189e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..6e03383a81
--- /dev/null
+++ "b/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发规范">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发规范">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前后端分离开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发规范
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前后端分离开发规范</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" title="前后端分离开发规范">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="tag"># 前后端分离开发规范</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="prev" title="前后端分离开发指南">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发指南
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="next" title="CodeReview代码审查指南.md">
+      CodeReview代码审查指南.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83"><span class="nav-number">1.</span> <span class="nav-text">前后端分离开发规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB"><span class="nav-number">1.1.</span> <span class="nav-text">一、为什么要前后端分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.2.</span> <span class="nav-text">二、前后端分离存在的问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E5%A6%82%E4%BD%95%E5%81%9A%E5%88%86%E7%A6%BB"><span class="nav-number">1.3.</span> <span class="nav-text">三、如何做分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E5%9F%BA%E6%9C%AC%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.</span> <span class="nav-text">四、基本格式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%A5%E5%8F%A3%E5%AE%9A%E4%B9%89%E5%8F%82%E8%A7%81%E3%80%8ARESTFul-API%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83%E3%80%8B"><span class="nav-number">1.4.1.</span> <span class="nav-text">接口定义参见《RESTFul API的设计规范》</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.2.</span> <span class="nav-text">请求格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.</span> <span class="nav-text">响应格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.</span> <span class="nav-text">响应基本数据格式</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%AE%9E%E4%BD%93%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.1.</span> <span class="nav-text">响应实体格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%97%E8%A1%A8%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.2.</span> <span class="nav-text">响应列表格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%86%E9%A1%B5%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.3.</span> <span class="nav-text">响应分页格式</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.2.</span> <span class="nav-text">响应特殊数据格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%B9%E6%AE%8A%E5%86%85%E5%AE%B9%E8%A7%84%E8%8C%83"><span class="nav-number">1.4.3.3.</span> <span class="nav-text">特殊内容规范</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.4.3.3.1.</span> <span class="nav-text">布尔类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.3.2.</span> <span class="nav-text">日期格式</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%E5%AF%BC%E8%AF%BB"><span class="nav-number">1.5.</span> <span class="nav-text">五、相关文章导读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f231e838dd271d252e10b8a18f979896',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html" "b/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..889018ad35
--- /dev/null
+++ "b/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端开发插件">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前端开发插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端开发插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端开发插件
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">前端开发插件</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" title="前端开发插件">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="tag"># 前端开发插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="prev" title="搞懂EventLoop">
+      <i class="fa fa-chevron-left"></i> 搞懂EventLoop
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/01/squid/" rel="next" title="Squid 服务器学习笔记">
+      Squid 服务器学习笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">插件安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Prettier-Code-formatter"><span class="nav-number">1.1.</span> <span class="nav-text">Prettier - Code formatter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ESLint"><span class="nav-number">1.2.</span> <span class="nav-text">ESLint</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vetur"><span class="nav-number">1.3.</span> <span class="nav-text">Vetur</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-2-Snippets"><span class="nav-number">1.4.</span> <span class="nav-text">Vue 2 Snippets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vscode-fileheader"><span class="nav-number">1.5.</span> <span class="nav-text">vscode-fileheader</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="nav-number">2.</span> <span class="nav-text">配置项</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f16a81a22b46d3ebd1ab81bfaf1c9037',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/06/02/DockerFile/index.html b/2022/06/02/DockerFile/index.html
new file mode 100644
index 0000000000..27bf39b438
--- /dev/null
+++ b/2022/06/02/DockerFile/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:type" content="article">
+<meta property="og:title" content="DockerFile">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/02/DockerFile/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-02T11:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="DockerFile">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>DockerFile | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          DockerFile
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/02/DockerFile/">DockerFile</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/02/DockerFile/" title="DockerFile">https://blog.lifesli.com/2022/06/02/DockerFile/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/DockerFile/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/DockerFile/" rel="tag"># DockerFile</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/01/GIT%20Standard/" rel="prev" title="GIT Standard.md">
+      <i class="fa fa-chevron-left"></i> GIT Standard.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="next" title="Docker数据卷">
+      Docker数据卷 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerFile"><span class="nav-number">1.</span> <span class="nav-text">DockerFile</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%88%99%E4%B8%8E%E5%BB%BA%E8%AE%AE"><span class="nav-number">1.1.</span> <span class="nav-text">原则与建议</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="nav-number">1.2.</span> <span class="nav-text">常用命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM"><span class="nav-number">1.2.1.</span> <span class="nav-text">FROM</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RUN"><span class="nav-number">1.2.2.</span> <span class="nav-text">RUN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM-scratch"><span class="nav-number">1.2.3.</span> <span class="nav-text">FROM scratch</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#COPY"><span class="nav-number">1.2.4.</span> <span class="nav-text">COPY</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ADD"><span class="nav-number">1.2.5.</span> <span class="nav-text">ADD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENV"><span class="nav-number">1.2.6.</span> <span class="nav-text">ENV</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#EXPOSE"><span class="nav-number">1.2.7.</span> <span class="nav-text">EXPOSE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VOLUME"><span class="nav-number">1.2.8.</span> <span class="nav-text">VOLUME</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#WORKDIR"><span class="nav-number">1.2.9.</span> <span class="nav-text">WORKDIR</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#USER"><span class="nav-number">1.2.10.</span> <span class="nav-text">USER</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CMD"><span class="nav-number">1.2.11.</span> <span class="nav-text">CMD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENTRYPOINT"><span class="nav-number">1.2.12.</span> <span class="nav-text">ENTRYPOINT</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#LABEL"><span class="nav-number">1.2.13.</span> <span class="nav-text">LABEL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARG"><span class="nav-number">1.2.14.</span> <span class="nav-text">ARG</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ONBUILD"><span class="nav-number">1.2.15.</span> <span class="nav-text">ONBUILD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#STOPSIGNAL"><span class="nav-number">1.2.16.</span> <span class="nav-text">STOPSIGNAL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SHELL"><span class="nav-number">1.2.17.</span> <span class="nav-text">SHELL</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Dockerfile-%E7%A4%BA%E4%BE%8B"><span class="nav-number">1.3.</span> <span class="nav-text">Dockerfile 示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BANginx%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.1.</span> <span class="nav-text">构建Nginx运行环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BATomcat%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.2.</span> <span class="nav-text">构建Tomcat环境</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/02/DockerFile/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/DockerFile/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/DockerFile/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0102cdea72bb3304a951aa8bc39bf705',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/02/Docker\345\221\275\344\273\244/index.html" "b/2022/06/02/Docker\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..06e6303ef7
--- /dev/null
+++ "b/2022/06/02/Docker\345\221\275\344\273\244/index.html"
@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker 命令">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-02T16:20:30.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Docker 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">Docker 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 16:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" title="Docker 命令">https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="prev" title="Docker网络模式">
+      <i class="fa fa-chevron-left"></i> Docker网络模式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="next" title="Nginx指令">
+      Nginx指令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Docker 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%95%9C%E5%83%8F%E6%93%8D%E4%BD%9C"><span class="nav-number">1.1.</span> <span class="nav-text">镜像操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%B9%E5%99%A8%E6%93%8D%E4%BD%9C"><span class="nav-number">1.2.</span> <span class="nav-text">容器操作</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9d1da03de3d42a7b291c7747c56f1647',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html" "b/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
new file mode 100644
index 0000000000..96eb0a4471
--- /dev/null
+++ "b/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker容器端口映射">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-02T11:22:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="容器端口映射">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Docker容器端口映射 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker容器端口映射
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">Docker容器端口映射</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" title="Docker容器端口映射">https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="tag"># 容器端口映射</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="prev" title="Docker数据卷">
+      <i class="fa fa-chevron-left"></i> Docker数据卷
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="next" title="Docker网络模式">
+      Docker网络模式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84"><span class="nav-number">1.</span> <span class="nav-text">Docker容器端口映射</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E4%B8%80%E4%B8%AAnginx%E5%AE%B9%E5%99%A8"><span class="nav-number">1.1.</span> <span class="nav-text">启动一个nginx容器</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '90996880f35f950a5d9f0ee10a1456a3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html" "b/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
new file mode 100644
index 0000000000..aca347b76d
--- /dev/null
+++ "b/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker数据卷">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-02T11:21:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="数据卷">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Docker数据卷 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker数据卷
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">Docker数据卷</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:21</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" title="Docker数据卷">https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="tag"># 数据卷</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/02/DockerFile/" rel="prev" title="DockerFile">
+      <i class="fa fa-chevron-left"></i> DockerFile
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="next" title="Docker容器端口映射">
+      Docker容器端口映射 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.</span> <span class="nav-text">Docker数据卷</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%85%B3%E8%81%94"><span class="nav-number">1.1.</span> <span class="nav-text">创建数据卷关联</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E7%B3%BB%E7%BB%9F%E6%96%B9%E6%B3%95%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.2.</span> <span class="nav-text">利用系统方法操作数据卷</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%AE%B9%E5%99%A8%E4%BD%BF%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">数据卷容器使用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '93cee4e1205bb80330d8bb64196d3bab',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html" "b/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000000..590da7743f
--- /dev/null
+++ "b/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker网络模式">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-02T11:23:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络模式">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Docker网络模式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker网络模式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">Docker网络模式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" title="Docker网络模式">https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="tag"># 网络模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="prev" title="Docker容器端口映射">
+      <i class="fa fa-chevron-left"></i> Docker容器端口映射
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="next" title="Docker 命令">
+      Docker 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.</span> <span class="nav-text">Docker网络模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8network%E5%91%BD%E4%BB%A4%E7%AE%A1%E7%90%86%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.1.</span> <span class="nav-text">利用network命令管理网络模式</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ffb030a0703d4a962808a27dde7fa0d5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html" "b/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
new file mode 100644
index 0000000000..1afc283887
--- /dev/null
+++ "b/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Hexo在Github发布之后自定义域名的配置">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-59-28.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Hexo在Github发布之后自定义域名的配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Hexo在Github发布之后自定义域名的配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">Hexo在Github发布之后自定义域名的配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" title="Hexo在Github发布之后自定义域名的配置">https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="prev" title="Nginx指令">
+      <i class="fa fa-chevron-left"></i> Nginx指令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/09/http_stub_status_module/" rel="next" title="http_stub_status_module Nginx的性能模块">
+      http_stub_status_module Nginx的性能模块 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名的配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E4%BC%9A%E8%A2%AB%E6%B8%85%E7%A9%BA%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名会被清空的问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.1.1.</span> <span class="nav-text">解决方案</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fabf537c4e9708257efa9ee7a3575783',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/09/Nginx\346\214\207\344\273\244/index.html" "b/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
new file mode 100644
index 0000000000..a872dcd396
--- /dev/null
+++ "b/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx指令">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-09T10:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Nginx指令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx指令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">Nginx指令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 10:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" title="Nginx指令">https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="prev" title="Docker 命令">
+      <i class="fa fa-chevron-left"></i> Docker 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="next" title="Hexo在Github发布之后自定义域名的配置">
+      Hexo在Github发布之后自定义域名的配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E6%8C%87%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Nginx指令</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ae8614aa3e7c2f4483b6c7a6f352d925',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/06/09/http_stub_status_module/index.html b/2022/06/09/http_stub_status_module/index.html
new file mode 100644
index 0000000000..628b562c0a
--- /dev/null
+++ b/2022/06/09/http_stub_status_module/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:type" content="article">
+<meta property="og:title" content="http_stub_status_module Nginx的性能模块">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/09/http_stub_status_module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>http_stub_status_module Nginx的性能模块 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          http_stub_status_module Nginx的性能模块
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/09/http_stub_status_module/">http_stub_status_module Nginx的性能模块</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/09/http_stub_status_module/" title="http_stub_status_module Nginx的性能模块">https://blog.lifesli.com/2022/06/09/http_stub_status_module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/http_stub_status_module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="prev" title="Hexo在Github发布之后自定义域名的配置">
+      <i class="fa fa-chevron-left"></i> Hexo在Github发布之后自定义域名的配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="next" title="架构实践">
+      架构实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E7%9C%8B%E6%98%AF%E5%90%A6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">查看是否安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8"><span class="nav-number">2.</span> <span class="nav-text">配置使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90"><span class="nav-number">3.</span> <span class="nav-text">解析</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">4.</span> <span class="nav-text">使用场景</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/09/http_stub_status_module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/http_stub_status_module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/http_stub_status_module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8f956d56882529849d3d76e3f79e599e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html" "b/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
new file mode 100644
index 0000000000..51ffd0470e
--- /dev/null
+++ "b/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="架构实践">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-15T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="架构">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>架构实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          架构实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">架构实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月15日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" title="架构实践">https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E6%9E%B6%E6%9E%84/" rel="tag"># 架构</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/09/http_stub_status_module/" rel="prev" title="http_stub_status_module Nginx的性能模块">
+      <i class="fa fa-chevron-left"></i> http_stub_status_module Nginx的性能模块
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="next" title="前端常见知识点整理 ---- 网络安全（2）">
+      前端常见知识点整理 ---- 网络安全（2） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">架构实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%86%85%E5%AE%B9%E4%B8%80%E8%A7%88"><span class="nav-number">1.1.</span> <span class="nav-text">架构设计内容一览</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">应用架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.2.</span> <span class="nav-text">开发架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%BB%B4%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.3.</span> <span class="nav-text">运维架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD"><span class="nav-number">1.1.4.</span> <span class="nav-text">基础设施</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5923af093e475ddf3729c159b94f8372',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html" "b/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
new file mode 100644
index 0000000000..9ca988670e
--- /dev/null
+++ "b/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"	
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全（2）">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-16T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全（2） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全（2）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">前端常见知识点整理 ---- 网络安全（2）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月16日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" title="前端常见知识点整理 ---- 网络安全（2）">https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="prev" title="架构实践">
+      <i class="fa fa-chevron-left"></i> 架构实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/06/30/nginx-timeout/" rel="next" title="nginx中的超时设置">
+      nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86-%E2%80%94-%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">前端常见知识点整理 —- 网络安全（2）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.</span> <span class="nav-text">SQL 注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5%E5%8E%9F%E7%90%86"><span class="nav-number">1.1.1.</span> <span class="nav-text">SQL 注入原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E9%A2%84%E9%98%B2-SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.2.</span> <span class="nav-text">如何预防 SQL 注入</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%91%BD%E4%BB%A4%E8%A1%8C%E6%B3%A8%E5%85%A5"><span class="nav-number">1.2.</span> <span class="nav-text">命令行注入</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.</span> <span class="nav-text">DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS"><span class="nav-number">1.3.1.</span> <span class="nav-text">网络层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#SYN-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">SYN Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.2.</span> <span class="nav-text">ACK Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#UDP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.3.</span> <span class="nav-text">UDP Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ICMP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.4.</span> <span class="nav-text">ICMP Flood 攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.2.</span> <span class="nav-text">网络层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS"><span class="nav-number">1.3.3.</span> <span class="nav-text">应用层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CC-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">CC 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DNS-Flood"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">DNS Flood</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTTP-%E6%85%A2%E9%80%9F%E8%BF%9E%E6%8E%A5%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">HTTP 慢速连接攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.4.</span> <span class="nav-text">应用层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B6%E4%BB%96-DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.</span> <span class="nav-text">其他 DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-XSS"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">利用 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9D%A5%E8%87%AA-P2P-%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">来自 P2P 网络攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DDoS-%E6%9C%80%E5%90%8E%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.6.</span> <span class="nav-text">DDoS 最后总结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%81%E9%87%8F%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.</span> <span class="nav-text">流量劫持</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DNS-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.1.</span> <span class="nav-text">DNS 劫持</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.2.</span> <span class="nav-text">HTTP 劫持</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.</span> <span class="nav-text">服务器漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.1.</span> <span class="nav-text">越权操作漏洞</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.2.</span> <span class="nav-text">越权操作漏洞防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.3.</span> <span class="nav-text">目录遍历漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.3.1.</span> <span class="nav-text">目录遍历漏洞防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F"><span class="nav-number">1.5.4.</span> <span class="nav-text">物理路径泄漏</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.4.1.</span> <span class="nav-text">物理路径泄漏防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BA%90%E7%A0%81%E6%9A%B4%E9%9C%B2%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.5.</span> <span class="nav-text">源码暴露漏洞</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '73c49ea0fa059ed8f5cea3d4f6d15a84',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/06/30/nginx-timeout/index.html b/2022/06/30/nginx-timeout/index.html
new file mode 100644
index 0000000000..3bab1507e0
--- /dev/null
+++ b/2022/06/30/nginx-timeout/index.html
@@ -0,0 +1,669 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:type" content="article">
+<meta property="og:title" content="nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/2022/06/30/nginx-timeout/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-06-30T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Timeout">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/06/30/nginx-timeout/">nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月30日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/06/30/nginx-timeout/" title="nginx中的超时设置">https://blog.lifesli.com/2022/06/30/nginx-timeout/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/30/nginx-timeout/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Timeout/" rel="tag"># Timeout</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="prev" title="前端常见知识点整理 ---- 网络安全（2）">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全（2）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/linux-scp/" rel="next" title="在linux之间传输文件的命令scp">
+      在linux之间传输文件的命令scp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">客户端超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#send-timeout-time"><span class="nav-number">1.1.3.</span> <span class="nav-text">send_timeout time</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.4.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">DNS解析超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.1.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.3.</span> <span class="nav-text">代理超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.3.1.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.2.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.3.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E9%87%8D%E8%AF%95%E6%9C%BA%E5%88%B6%E8%AE%BE%E7%BD%AE%E3%80%82"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">失败重试机制设置。</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#upstream%E5%AD%98%E6%B4%BB%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.4.</span> <span class="nav-text">upstream存活超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.4.1.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.5.</span> <span class="nav-text">lingering_timeout</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/06/30/nginx-timeout/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/30/nginx-timeout/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/30/nginx-timeout/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5011c388b1d3df973347e5c230c10745',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html" "b/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
new file mode 100644
index 0000000000..39c238c81c
--- /dev/null
+++ "b/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"	
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:locale" content="zh_CN">
+<meta property="og:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+<meta property="og:image" content="https://www.creationline.com/lab/aquasecurity/43087">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="镜像安全">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" rel="tag"># 镜像安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Oracle-Linux-install-Docker/" rel="prev" title="在 Oracle Linux 中安装 Docker">
+      <i class="fa fa-chevron-left"></i> 在 Oracle Linux 中安装 Docker
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="next" title="Nginx中的超时设置">
+      Nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker-%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">Docker 镜像安全最佳实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%92%8C-%E5%AE%BF%E4%B8%BB%E6%9C%BA-%E7%9A%84%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">Docker 和 宿主机 的设置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A1%AE%E4%BF%9D%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8"><span class="nav-number">1.2.</span> <span class="nav-text">确保镜像安全</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9B%91%E6%8E%A7%E5%AE%B9%E5%99%A8"><span class="nav-number">1.3.</span> <span class="nav-text">监控容器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">1.4.</span> <span class="nav-text">参考</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '700bb1cc59cb2aa1f39772e0145a5c54',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html" "b/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
new file mode 100644
index 0000000000..778dd669cc
--- /dev/null
+++ "b/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"	
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker Compose">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Docker-Compose/" rel="tag"># Docker Compose</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="prev" title="Postgresql绿色版使用">
+      <i class="fa fa-chevron-left"></i> Postgresql绿色版使用
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="next" title="">
+       <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Network-in-Compose-%E5%9C%A8Docker-Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C"><span class="nav-number">1.</span> <span class="nav-text">Network in Compose 在Docker Compose中配置网络</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-number">1.1.</span> <span class="nav-text"></span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '844f6fce340e490fdff033f5fce4329c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html" "b/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
new file mode 100644
index 0000000000..6fea30eb3c
--- /dev/null
+++ "b/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="超时设置">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">Nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" title="Nginx中的超时设置">https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="tag"># 超时设置</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="next" title="Postgresql绿色版使用">
+      Postgresql绿色版使用 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.4.</span> <span class="nav-text">lingering_timeout</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.5.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.6.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.7.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.8.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.9.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ff502853d2cd0776042bbf0cceb6b88c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/08/02/Oracle-Linux-install-Docker/index.html b/2022/08/02/Oracle-Linux-install-Docker/index.html
new file mode 100644
index 0000000000..bf885632cf
--- /dev/null
+++ b/2022/08/02/Oracle-Linux-install-Docker/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在 Oracle Linux 中安装 Docker">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>在 Oracle Linux 中安装 Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在 Oracle Linux 中安装 Docker
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/Oracle-Linux-install-Docker/">在 Oracle Linux 中安装 Docker</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/Oracle-Linux-install-Docker/" title="在 Oracle Linux 中安装 Docker">https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="prev" title="服务器高危端口列表">
+      <i class="fa fa-chevron-left"></i> 服务器高危端口列表
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><span class="nav-number">1.</span> <span class="nav-text">Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a11ad3af12b72520b462ef2461b44f03',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html" "b/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
new file mode 100644
index 0000000000..0c344adb34
--- /dev/null
+++ "b/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:type" content="article">
+<meta property="og:title" content="OracleLinux内核从uek切换到uek">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="kernel">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>OracleLinux内核从uek切换到uek | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          OracleLinux内核从uek切换到uek
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">OracleLinux内核从uek切换到uek</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" title="OracleLinux内核从uek切换到uek">https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/kernel/" rel="tag"># kernel</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="prev" title="搭建Docker私有仓库">
+      <i class="fa fa-chevron-left"></i> 搭建Docker私有仓库
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="next" title="systemctl 命令">
+      systemctl 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bb2ef77fdc29a14ae791d5ad5864fcd0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html" "b/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..739682e643
--- /dev/null
+++ "b/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Postgresql绿色版使用">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Postgresql">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>Postgresql绿色版使用 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Postgresql绿色版使用
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">Postgresql绿色版使用</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" title="Postgresql绿色版使用">https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/Postgresql/" rel="tag"># Postgresql</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="prev" title="Nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> Nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">初始化数据库</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E5%86%8C%E8%A1%A8"><span class="nav-number">2.</span> <span class="nav-text">注册表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E6%9C%8D%E5%8A%A1"><span class="nav-number">3.</span> <span class="nav-text">启动服务</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '17e1b98f2b081cbbf13eb96942f539fa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2022/08/02/linux-scp/index.html b/2022/08/02/linux-scp/index.html
new file mode 100644
index 0000000000..e6d1faa11f
--- /dev/null
+++ b/2022/08/02/linux-scp/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在linux之间传输文件的命令scp">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/linux-scp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="scp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>在linux之间传输文件的命令scp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在linux之间传输文件的命令scp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/linux-scp/">在linux之间传输文件的命令scp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/linux-scp/" title="在linux之间传输文件的命令scp">https://blog.lifesli.com/2022/08/02/linux-scp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/linux-scp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/scp/" rel="tag"># scp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/06/30/nginx-timeout/" rel="prev" title="nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="next" title="搭建Docker私有仓库">
+      搭建Docker私有仓库 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E8%B7%B5"><span class="nav-number">2.</span> <span class="nav-text">实践</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/linux-scp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/linux-scp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/linux-scp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0ec810122d53017567252b443d489c69',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/systemctl \345\221\275\344\273\244/index.html" "b/2022/08/02/systemctl \345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..ae3f4bb3a9
--- /dev/null
+++ "b/2022/08/02/systemctl \345\221\275\344\273\244/index.html"	
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:type" content="article">
+<meta property="og:title" content="systemctl 命令">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="systemctl">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>systemctl 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          systemctl 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">systemctl 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" title="systemctl 命令">https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/systemctl/" rel="tag"># systemctl</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="prev" title="OracleLinux内核从uek切换到uek">
+      <i class="fa fa-chevron-left"></i> OracleLinux内核从uek切换到uek
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="next" title="服务器高危端口列表">
+      服务器高危端口列表 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#systemctl-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">systemctl 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl"><span class="nav-number">1.1.</span> <span class="nav-text">systemctl</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-unit-files"><span class="nav-number">1.2.</span> <span class="nav-text">systemctl list-unit-files</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-units-%E2%80%93type-service-%E2%80%93all"><span class="nav-number">1.3.</span> <span class="nav-text">systemctl list-units –type&#x3D;service –all</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-get-default"><span class="nav-number">1.4.</span> <span class="nav-text">systemctl get-default</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-multi-user-target"><span class="nav-number">1.5.</span> <span class="nav-text">systemctl isolate multi-user.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-graphical-target"><span class="nav-number">1.6.</span> <span class="nav-text">systemctl isolate graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-poweroff"><span class="nav-number">1.7.</span> <span class="nav-text">systemctl poweroff</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-reboot"><span class="nav-number">1.8.</span> <span class="nav-text">systemctl reboot</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-suspend"><span class="nav-number">1.9.</span> <span class="nav-text">systemctl suspend</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-rescue"><span class="nav-number">1.10.</span> <span class="nav-text">systemctl rescue</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-hibernate"><span class="nav-number">1.11.</span> <span class="nav-text">systemctl hibernate</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-emergency"><span class="nav-number">1.12.</span> <span class="nav-text">systemctl emergency</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-%E2%80%93reverse"><span class="nav-number">1.13.</span> <span class="nav-text">systemctl list-dependencies –reverse</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-graphical-target"><span class="nav-number">1.14.</span> <span class="nav-text">systemctl list-dependencies graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-sockets"><span class="nav-number">1.15.</span> <span class="nav-text">systemctl list-sockets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-show-etcd-service"><span class="nav-number">1.16.</span> <span class="nav-text">systemctl show etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-mask-etcd-service"><span class="nav-number">1.17.</span> <span class="nav-text">systemctl mask etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-unmask-etcd-service"><span class="nav-number">1.18.</span> <span class="nav-text">systemctl unmask etcd.service</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cbbac5397b152973467bf5b325bbdfce',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html" "b/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
new file mode 100644
index 0000000000..7825f361dc
--- /dev/null
+++ "b/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搭建Docker私有仓库">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="registry">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>搭建Docker私有仓库 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搭建Docker私有仓库
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">搭建Docker私有仓库</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" title="搭建Docker私有仓库">https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/registry/" rel="tag"># registry</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/linux-scp/" rel="prev" title="在linux之间传输文件的命令scp">
+      <i class="fa fa-chevron-left"></i> 在linux之间传输文件的命令scp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="next" title="OracleLinux内核从uek切换到uek">
+      OracleLinux内核从uek切换到uek <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">搭建Docker私有仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8B%E8%BD%BDregistry"><span class="nav-number">1.1.</span> <span class="nav-text">下载registry</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E5%90%AFdocker"><span class="nav-number">1.3.</span> <span class="nav-text">重启docker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BAregistry%E5%AE%B9%E5%99%A8%EF%BC%88%E5%85%B3%E8%81%94%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93%E9%85%8D%E7%BD%AE%EF%BC%89"><span class="nav-number">1.4.</span> <span class="nav-text">创建registry容器（关联私有仓库配置）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8E%A8%E9%80%81%E9%95%9C%E5%83%8F%E5%88%B0%E7%A7%81%E6%9C%89%E4%BB%93"><span class="nav-number">1.5.</span> <span class="nav-text">推送镜像到私有仓</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bb78c725b09c8d892097914fdcb2bdf5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html" "b/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
new file mode 100644
index 0000000000..2c2588099f
--- /dev/null
+++ "b/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
@@ -0,0 +1,865 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:type" content="article">
+<meta property="og:title" content="服务器高危端口列表">
+<meta property="og:url" content="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="port">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>服务器高危端口列表 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          服务器高危端口列表
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">服务器高危端口列表</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" title="服务器高危端口列表">https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/port/" rel="tag"># port</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="prev" title="systemctl 命令">
+      <i class="fa fa-chevron-left"></i> systemctl 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Oracle-Linux-install-Docker/" rel="next" title="在 Oracle Linux 中安装 Docker">
+      在 Oracle Linux 中安装 Docker <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">服务器高危端口列表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f0bf8491fc6f863853e52610efa66797',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html" "b/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
new file mode 100644
index 0000000000..e459d22187
--- /dev/null
+++ "b/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:type" content="article">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title> | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"></a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 10:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" title="">https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/2023/09/20/test/" rel="next" title="test">
+      test <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerCompose%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">DockerCompose安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c3bf3e4bf3147739d6900858d9e8ced6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/2023/09/20/test/index.html b/2023/09/20/test/index.html
new file mode 100644
index 0000000000..947214032b
--- /dev/null
+++ b/2023/09/20/test/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="test">
+<meta property="og:url" content="https://blog.lifesli.com/2023/09/20/test/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2023-09-20T18:33:23.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/2023/09/20/test/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>test | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          test
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2023-09-20 18:33:23 / 修改时间：10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    打赏
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/images/wechatpay.jpg" alt="李旭光 微信支付">
+        <p>微信支付</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/2023/09/20/test/">test</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 18:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/2023/09/20/test/" title="test">https://blog.lifesli.com/2023/09/20/test/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/test/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="prev" title="">
+      <i class="fa fa-chevron-left"></i> 
+    </a></div>
+      <div class="post-nav-item"></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/2023/09/20/test/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/test/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/test/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '773cb0eed23803187cd315503d09e302',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/@attachment/Clipboard_2022-06-09-12-57-39.png b/@attachment/Clipboard_2022-06-09-12-57-39.png
new file mode 100644
index 0000000000000000000000000000000000000000..22826a166c23580cbad4c0f41c2be15e3f11df32
GIT binary patch
literal 6725
zcmb7JRa9I{w2a^$JV<bNf&{nVFt`lv1ShxzhY)O#!DR^UGPn#DAV`40CAbH7x5vG?
z|L?u?(d(?e_v)(ZpI%)Rp$d@2L?c0a@!|!hyxd3i7cX8mKmUuOAU&@Q$(HvoUXWnO
zf0WSldU=qA?xv}gUffZtNmn9Fg&KjxWfcB3NrD<3Bi$yi0;k84xLL{GxyO`=c_i#z
zB4J^C^4=6d8j@g)-++>N6rY1VMb;ELVwJe~JeCNhd~NmQmgEG6_pw}jXsB>0b8IQ_
zPE$)=t3)9(4mtS=h;Ezhdii+O(a{FKfiK-H3$;X~H44T{p`g5^qC^N4C&nEOH%-fz
zlNA43;dy1Ykx%tsa~2nehNwY{1rhJnzkM#3aiq{d9Gq8@l=i6K;?d_zlY&wI-6ybe
zahhr=X&mdnHY=)}3Oj3=78)JGzm>>9VgVcEzaTgb2tEB_4pRzUe}~1RGwc3tf`g*}
z4F99Sw!q{+J~Dvc|Kf?GgtEQlaxvAfSLghP_j8ek!Qns7KavB9o2x7Im{R|tCXVtg
z9?bW5=9Q_Uc(lQ+b_KrDUwJ+K@}&RHpafOZQOdB}muaKX|E2h>8}t9K`&riO|BI}z
z)of{hNjPJ^X<GO#W7mqA(H2r!d8jrqWb%ztkU60#^%L%znXGbb{GjfP<DN4}(<&kM
zA4MzkGU9I=ZxvG_K+&}9)1gd)xFKDEj`-rmDSkRSMB4hu6%N|=<mCC$$|!c`{JS!T
zPuaq~m*gEe?Kz)2nN{QgW*V!vFW2P}{yDnNdhyQj(fo^rpLBF)k)Rer&C{_i+gevB
z6u386Kp%V3OvKKRCu(qWTjej+TAu~;J))=oiJw@;{gnX#LGuw?iQ$09-^&oqPcO+y
zlt!+08t8TZfM3|_i3EK)(CbWe`TPM@cUQNjYtZrB$bBNF;FP*U#L431^#JXl{fYCm
z_@5ebK0vZ@Zl*5ba+Ww_)lMY2b*e8$YO;8DLjLF(8dagCF>e}$5am?QNxcom?i)uN
ztE(lCRLIB2;haQ9gx*&l)sO&~iU2tk@+2eu7fH7U>R)wsJliW@7C3z%X;I^M!HkI!
zP8CbJxpBSI47>`<YP~XOjz1&(9@d&u3zu%@BtvNTN!iqY`T=w2;PjM4d8@k%d}xSS
zoaM|=vd<vLlcbK|-bZM6q_wt2HYpOI3)0f~D$-{P|Gws#qMI9ioP#9#U?T|Zj>{v-
z)pT{5sR=s6*T>8-%1%}q7C=`xa?U8aOZMX+9q{=OvYwGov~9D}eKtRk{pg%}87(w`
z+S|!QhZ{2#jg0YTC<9kS*fwI4g(1$$1o~2aoo1kIj>UU|PGPyya*Pn2u<F-xsL9Vz
z6z;%<oiU|%^kGwEnIySnG2V?``0_g?=UP7D^IW?k&CaixH(#=oZv?(Q^x6mDN+IGV
z^_-?8=)SZ462Z@npswNVt`S&nTh3axAFOE}m@#u%FzL(Se7>|gp?2{#5iEZ!@Zmk3
zN=MhrMzo*B7FI(6k(O8a7gdvC+-S!4-=d2etG&_#CIzuzO+g7Kv1eOgpxfh&#ARlC
z5U|#fdXno+LDjg>f{*KR4J0$5JML_i()n;Age<l>1UR=0BU*7j#z|Xde`T8%c$!Q0
zr$4nmb1jDBWKGJ3EWio<h@65^`p*@I{{>U)rGHoNDEJds(vrfHvtYZs3_#g{LChC~
z=E=sFGLvw#|8|-JdN*12u;)7DcZp#)Sn=DPHw^;IVecGOqLGF}Ob6Qevd_PhF^$x2
zZN5*x-=Kh)&VhVNN2Z}Y9PJ%|w&354i_Tv+$o(NjwrgKxG0y_rzHV5<<6te3Nk=@R
z`+t;CjcoMOnfxl!Gbviu;B11i&AkjYEIImz3saR|6Hh8^bjI_egNMCCLMfuAec4Q6
zv*Nc|p4=yqdMQzP%qn9k>?O$$ypA6AiM-yMlWy_6dcaaf;nLk<L+z?M5oi)P%4||L
zpyT$0Q<#F%U-j)usnC<4%cy|{{PIbEQD0U}xcffWRg>q|#S`jYROR%&sW@^+!C1xj
zBnE5n%|>l)`8~7@#2uhHeCwA2Wno}RVmBc@$XP`*h=_*N=xCJ2D7NhFVDhRU>y}pv
zqV*UpI-Rpk<j$~ax;H1-K3(NChAS^y|H@kO0s3MI9|&%5)+Rzot`QeCtRKsT4W?VO
z=d9tJ4}DYROb(rE6}2h1LBY1{05&}0Kb${lalmoUa<RERGm|um_K*~CPan>`IgWq-
zM6NfTi^B^lY#bNM1hM#FhG}$(SjrEP|0+CDy*H(?f}{6-PFsGg3@Obp2c`%e6Q#*&
zA612v`fWGeIS4VV=gppf5*DI}u-q!(d)y9~Ek2C-@J*GpK%WD8Tg7?w=;a|w0teX$
zUXt6Gt_sCmr`vv?k{K(cADZc_K8g2QYMXh%>v1?|mNO{iX-6Y1*4&d&l{qvJHL>wX
zD=Rx!wd=LYvGnE++f$otL;MbN!4r=8Ad9i;xZ7s#4Qz%Bv|R7BTX{wTm_<KXx4y0^
z{CTo)-sRPIF%9>)c)%&3;l~;z=x!7`-oOuzl*r|QwiPGwT9cVXn(Pew)Lf_<O>`{`
z6BYl_kne2fOLq7qvE!Pjm%SG_ZeGE9R-z$9;4~FqTMJI$>;E>zB{1IQB<8qbeEId3
zuwC!1Aa38E{)=*|X{ky<iaeUJfYZF3EZ(qoOJ<>^kp*MkbB7`cIi$AzKe_o$@pQ%l
za*Cr|^4JWdLO^W;*|C|BV|Ld%bv?JP-Uh^<J$wBz$aWba2Lbl0huN8ZWW`Ib7>k9O
zrv#fM$orO7phf)7E5SnbPXePr*Ek0|owL~qc=gs)h`~9m5ymb2_{-XBzn5D_Wn?Vy
zW+uaX3mJYq`=qD5TB%o++AdLW^@&~cYRc-<2oexa3Vc&fMVEXptH(5JzgcuQKg-2H
z`0J5goA0gH74o`dw#F%Y^d|M5*de{S-m4=v`Q6X0BUz3Nc72G$ZMQN<*E+-i7#*k^
zJO8|8P9>J6bVoRfxgwQ9#y98koA4BBtZ|>B#^O(tmJs>HdZnkKkwd&{gADJZ{Iv%{
zw2C+OzK+6(Ggtn18_E^tb5?dL@J3n3&Q41#zf<depTtb)OB#bYX+JW=r&)y^LQ>1{
zbfyO*YQ$+If1e>#dKyv+z@e$Hba2Kl(`}RfUJ}ueyw&`};5y<bn?j3uI&Gu)>dtr#
zr>O1g9~SB&Dyj953o*xn+23829D)Oo9sWeS&zv`7d$W9o0*h`M7h}M}BTrSexsmu_
zS{JPgawm%zW+B08k@TO;Z0xGWDyzxUosrkZZMJXCfwvufHJbX6iI+_DM(A6E#uLhG
z-6dpMC01cA0ynL-8;L^IUmT<{Ge23L&Tveg-2y;EN*m{;(8}%aWntrNn5;s3`OZgl
z$pHDbU~3&VHg%gIU790NS8{KrH|)v__EEbBu$rnc&+X=Ug<>Bp;wtbKT+9sKYq4cj
zAkiI&S}bg8xfoS-?A5&ugEl9!2|49D2O0aG;=1ngXWXRS1XSA(BU#ZtrX^rcr7TVb
zg!)*1Rz?<yT`6V;UJh7)srH5c*>QgO0LeD|b>5c3m_0sH*@l%oLLs|EIU}P7nwwKb
z5PG-I>s<LmI$ne!{ocHiYP5^sLo&=80{;{n%INq2dIxaV(88WuiV9cHy+Mu*n#kQ7
z=;ukeNXshZyFe{QmPOyRVgNSw-VlFayS-TVGE?9!IHdZh0(u!>Cu-@G6ai$h!nuz}
zPvySujn;&~OLF$(Le^s0oabcT3ThMN$BCo@8c0mb>NIj)lp?phV}mrdPa;_Tzh@m(
z&2b^mFop`rv-<aNq%+0C1}g9=!b|CS$u?ve-zRUr%acZU+bFA1-I1kEHd#_>$($P7
za;}htyG=kOCvPeZNy^Q7?L@$f&wZ~zc<&Y*L69D#p+=pWh$rpetVc1YU$_#1++-fP
zb`$3Kx+s@qjmfJxCV`EwqVG#S;;Cf4EQtOx;PCgg&D8y*(d(iOA1Is9Z<#6B^~>-V
zQw=~{oj2<*+L|?5`HpAVFHq<?%~xG!)H86R4Mz5b$ERdfZnGAWfP*p)G%+RsmVi|i
z*$Rtc{T_0>$=B~g?&rF~rT<=^m8dk^Zi4moE)PNElV-<{2)7Fp;Lpp%MiurOCAsWP
zOv&9LB!zCM6@o{BTw_X@7PR5H4{ksKn|7s}6Lx^6=jZX=jgL`-t&Paj8ZgpmKZ-%9
zkEY70MH_bmRCRfP2&?}gqX}Zs_Oi`KEX*zQ_MCG&;mG8MjY=AuD*;lDybiQ(S6YR7
zB$r(IS?yDXGZ_N4v)tc?ln)fP+b0;>SB~_TSXx%3VmGQA%?}S~7-|Bu60i6d2nwza
zk_w6M7v|?b?7Z8C@C!`ySLy}D=QG<-((vPROP2Eyu+6Q^XS6K!S1{7>Bgn!ad-oZ4
z2sCrEjC~Tdw!d>o1U&DMU%zL#^ZUZs0Hz+$@!=P!Tk6pBA6?G54AY#qdb@rb(8k;c
z=Dk`B<QfSb(?~8(jccPy!pbTgyz>(k+NqOJ(mWzsZQ2Wd`;n(D>2cNV+!&okb6lXd
zonJDl>y9Z-G?<INnnzN*98zXfVo6*`z`e~@&T3nPKpxd$ZZXcrHAGs~=K+h6PI^e>
z2-R29IYYF5!b8T=AGi<qmBXg0Vu>`1b{p1c_VeX76LAV<Nf>8vG21wvjDP6yPKH?(
z4Xvj0XQW$Ea>)1PPmur4)TfZHJeG9R>~N}&%f}3hj^id7kc(N=5m?5gx{kuorLI4L
z{wCt4stnlnOIeq%IvGPKq6Lqb4s8h@lGv?zg{9-D91ql<iebANZ(&fYJc)Uvng0Bd
z5onSpwM=zJID6a5-|YS)Z%D3fC>sQ9UiU~UJjyu-MYZiV8XI@zd09@zENsZ*-K^)(
zq{nOEl`QpTbj<!3GdEV(@by6P5IRZTr_ctW#FUFVne<)J%-;I5WW@f2jx3ktw3G5u
z?2C|mD*$uc_ee99USw&`Q*|$M{Mel&BfYJp*ek3w!i@Dob)7BIp7AOF8WQPukVqV}
z?`;Z$I~!_cb$Aw~WCjKMWLZtJl<J$d9K9}R_y)b0dHwm9qv$nL_>I2y!cMmT_aWq#
zqwl-jGReTiJbC;xz&umAeU6u&a9QE`!|vnS7gD7Ql97so-3ixk+)V3R`S*1(R=8h$
zNH2HUK?qtUQOr?S&eb8MdQZRr(tz1*Zs!|U_1VuIMV<@tH+I%lKl-KPia!Fs-&a*|
zPI!*j?kX{Y7^J9Z7&FUSO?Rfra(uEYv`d5UWW~d4;dYDug<vs8wsR!<3p5hlD*V^r
zI^D%o6`}s&^M`NhF7->>#BE2l6d!ATbA4nh)xMKNGG-y7J!v|EI&0I3%{K>aQWS7`
zeoYrTGyE>XRhhiDy;M*--`}%P<aO_OF@*TuMaD|_hAh^>7u?8KZb>RbztoW+^va^@
zT#J;isE7`^>2A1<=lNM^3^9r%iNx@LwXZvrYp3WtyNr(>hRlGsZ=zr|jTx<n6te!H
zpt^OURDC^o=8%z8LVEE8?0!fKtA<+`J1C^|N%PDpZkYyyUWG3~Z*E{OyDnk=EJ5R)
zE8pN{=_>y6b%c2$j2)EO0L~t_BREJpxF6ppx6K2veTm>LuDJ8T?z0?ZSv<3A(~-h1
zNbOg)wcd;;WIj|p=7MB8j&8-@5^4X+QL&9^UT3m8FI^5uP(6Yao6lKe9rRv|ch9^(
z`=#f910V`JGO)Nr-?6Z{N$Xdocttq-;Em336l0lSJ2(ByetCXog5A!R78t&tYFBPA
zGWoNGtWnLr-1=+;;2<|B+lEimxLdLB@qtmqD=iq2UCL3+!PG9hdC)O^QIyig92R{%
zhh)@I>aIFAG!z*)v6#xD&osaX^~&9gn)knbRdv5ql+!fXsH@vtlI2$@=ikPcWj{e_
zaUF=_tiC*eTGo(c5tu<`pb#|*$y#))-iwRbC)1)w9u7}u)TZ$20@0IJeOXxB<e3zQ
zwjS0vzHe^a-R-#_5g>f`nR`13-ze+gX5|>KRK;YZPCF7L0DQVcw0higx9DrlKDqVb
z3)r{~?1#Vg5*?ud9_&}~iDJPjbO@sYpuKogM>G9B;nV8(sz;lMPaCM)&_g2cN^k)4
zv4PuDA=h3n+mK7PrD$^)zX(?}zw=BaQPVHicPl!>a?E~7ORFByE%6!|+$!08_2GM=
zq(ALUr+hW~I-d5IeGV}d#hbC71{G`~Bl50Vj6CMB`)cm{D$2c!f<$6lg|E3EM?Ok;
z3$Zj#k7rUSYQw-S<_ECx0_&1=xhr+{-3BiE+Xw07{W9yZ8@^<~dmM+O+_fuhKtAcf
z)x7xo-D%=!Kd-bOSM1`3tlsPHJlT%cd!Na%3&cOi?h_XRrn?!mA1`7A8y5hBq7CMx
zMaUhSZXyFn7(HjB!GsD%M<$M@n51WBsra#l-FsUohv_JmT^&*@Wg+{va#l+s0YWAK
z9sI5_r4xOR;oA34?a)sX`S1HqPlKXZYu%~~>*BHBsf~#E)Es@IzDv!Dlpz(cE32b>
z>7J6Mlx{}5y!MEDWdRZRy3H^R{gVjJz2Z<ml@I~b7@nnjD!)$%7~*L6$EbC3$~le$
z*PO}}QndBN_z)Pw*Ghb@$LBjgCd601jshPXW%t40Q;L;`JT+d_`-ic4vK^Ei5zVOf
z!p;%AY>VZr?c!?XAX2T^I_16=8>A0g^BJ{dwQ9NS^=_*EXf;JYk_J(7(Y&I;c~Lie
zhOje2i)z@F8dmz`wv6qoD5r*+J0ARwfS{UK_k4lOM4{;Nbd)U<n37=WC4bxvkOr)*
zy13!S77-C+vHnGcqcQA3HuJZvqP#Teo>d>>PQ=@RM}OhHN1wDG$yi&JRaWXS5RZX_
zBpdb+g!q?YZJP|r7qqdfj~83^mjH)#^LmbrV~pslVNXt-#2^h)p0eg9=lMqUlVdk|
zq;9MJiQ<lr$9Y;Tbpg!6_u<xzO7OC$4<HCuI#U?Im8|osBCq|<yD~-P&Fx>xtSZjc
z?$+pM%Z>#@_`ix&dYla@q|FD6lLjG2BrEwz(oXf&r+HY{t+f9B0f9%6#kATLk=q3)
z)pua+t&S;4d2?E^07q7!KX2lRIGV4O%&6M}o2M}mn6R)p<<+?w?FPD<#`w(&GFQ2x
zi)wjNRan9q(zJ+cmKA3(I!TXcQdgMwqMGrla=A`kHB{}sdK(c>u`8IdCJ61BB@mBS
zAm-{_j0MyO+g*U^`3>i3j9aydyb==u3-FjyfxKk(V3-1-XbW?L9D;U{MSzIwJcn~g
z#kQ{M<fa>&6!|9>6e{*KbFs81hjl0p2inqLupl_zp$uv5kJh<~gdery3_Y})O@Bv?
z$kJlor9QK>DyP`=!e*@P4ghdNZ<Bo6rAg&Z#=*v!P~<c2xD=5y|AGTbe+rQ^(=S}A
zpRVYYH<YCHg|tEhBm|B0)~-J_R79>1&@wP222DsA6-G#v5>3A!d;{N46CAE)8v$XO
ztt^zLCg|4tlL>X$QHl`)8a^=T>}@7s*x&neA3fC0+;u75JqFv#25goT^NDIp1<kDG
zoU7k5iFBWE;4p6GJzi~8_C``@XH9}gNGm>y#oc1g*(^)+l1>dh2y!2T4pKxd*MDQn
zeX+;;<#<H`A=UoY&3M1(YSF$F6ef3h&uaL-usd}=E@Ijv{HFM>^buiLwV$}=RaiV_
zJyHJs*yLE*sCagBUeRzP<@Oesd|#$d5%2a2)?%glAzdK%YqTR;HNJ$y<myt9i=pnm
z#!jcb2Yeug|J=~Xc~~>DgIXJuYWNFT-HGRN+5AN1x2q^Vw@;{iXH+1`E6t}wsGUQj
zdO(S{rYC_~8y_!E35>COc%TQ}S4B1206X#xiZ1D#(R2l7$ELqE!fER+E1BkjlVuq}
zG9c>gMDqL_!1(x;6Z>(dpN9WDBZ~u_g9jSWT=?*MQ5Vb5WcbZY?n*&pANIH|21AI9
z!jcDfkqK*w+Tp5v{qkD)MR}##&93fe{qMbLOM;kT7*5`}SV@6>vtcC0YnYhNMz>V=
zn2G{TFGu4<qK(DYFw(F{$4z<6@?#Eo5le(LTVdz@%oc-5j|yA%q`H@a%H;+l_awER
zFVPm<!M?&Jfr~47yVC6Q{Wl`|P>hTxGs`gwySfJoC!XMnDfzH@Cn<rqtWS>c9stU?
z40~ijP1w*NVT$=j1jg-juwzFGEE55u3X*?KCPif)$hy&h(`5B*s*@&{exu&o@-X7p
zXS&JTngiG-f&>~<XV1jZ<{*A2U+IpzP?gCj<kz@Z=vsw*j4w-&Ab0-Mh>d;7`@NX#
zMRrtLw4TF}W;;PxgL_GyxxWxu_@_EyFeq!AgX%kc8dXlb+M`Bw_u{Bi`l1GW#1PQJ
z2@>S`&f;`Y5$#sTg3;nUJ7j_2)eP>-&%({gwo-0y{&D+Jf~e>?k7s|zSuy<hFHk^<
zCVM_Znm#=j+`kiV=qY6!LxU7O{#x~%F3$->44K`4{NGeSCiOW$c!R_~_czSw?0<tp
z!|zf~$MBC|9*9G1`kYG05I0#c{7njIWW}Qw`k~30f8k6*pR*8B)0Kp*zwyKW4*p15
XKhB7PNW^#k;`x)827IiPGztD6Jp3UK

literal 0
HcmV?d00001

diff --git a/@attachment/Clipboard_2022-06-09-12-57-48.png b/@attachment/Clipboard_2022-06-09-12-57-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..22826a166c23580cbad4c0f41c2be15e3f11df32
GIT binary patch
literal 6725
zcmb7JRa9I{w2a^$JV<bNf&{nVFt`lv1ShxzhY)O#!DR^UGPn#DAV`40CAbH7x5vG?
z|L?u?(d(?e_v)(ZpI%)Rp$d@2L?c0a@!|!hyxd3i7cX8mKmUuOAU&@Q$(HvoUXWnO
zf0WSldU=qA?xv}gUffZtNmn9Fg&KjxWfcB3NrD<3Bi$yi0;k84xLL{GxyO`=c_i#z
zB4J^C^4=6d8j@g)-++>N6rY1VMb;ELVwJe~JeCNhd~NmQmgEG6_pw}jXsB>0b8IQ_
zPE$)=t3)9(4mtS=h;Ezhdii+O(a{FKfiK-H3$;X~H44T{p`g5^qC^N4C&nEOH%-fz
zlNA43;dy1Ykx%tsa~2nehNwY{1rhJnzkM#3aiq{d9Gq8@l=i6K;?d_zlY&wI-6ybe
zahhr=X&mdnHY=)}3Oj3=78)JGzm>>9VgVcEzaTgb2tEB_4pRzUe}~1RGwc3tf`g*}
z4F99Sw!q{+J~Dvc|Kf?GgtEQlaxvAfSLghP_j8ek!Qns7KavB9o2x7Im{R|tCXVtg
z9?bW5=9Q_Uc(lQ+b_KrDUwJ+K@}&RHpafOZQOdB}muaKX|E2h>8}t9K`&riO|BI}z
z)of{hNjPJ^X<GO#W7mqA(H2r!d8jrqWb%ztkU60#^%L%znXGbb{GjfP<DN4}(<&kM
zA4MzkGU9I=ZxvG_K+&}9)1gd)xFKDEj`-rmDSkRSMB4hu6%N|=<mCC$$|!c`{JS!T
zPuaq~m*gEe?Kz)2nN{QgW*V!vFW2P}{yDnNdhyQj(fo^rpLBF)k)Rer&C{_i+gevB
z6u386Kp%V3OvKKRCu(qWTjej+TAu~;J))=oiJw@;{gnX#LGuw?iQ$09-^&oqPcO+y
zlt!+08t8TZfM3|_i3EK)(CbWe`TPM@cUQNjYtZrB$bBNF;FP*U#L431^#JXl{fYCm
z_@5ebK0vZ@Zl*5ba+Ww_)lMY2b*e8$YO;8DLjLF(8dagCF>e}$5am?QNxcom?i)uN
ztE(lCRLIB2;haQ9gx*&l)sO&~iU2tk@+2eu7fH7U>R)wsJliW@7C3z%X;I^M!HkI!
zP8CbJxpBSI47>`<YP~XOjz1&(9@d&u3zu%@BtvNTN!iqY`T=w2;PjM4d8@k%d}xSS
zoaM|=vd<vLlcbK|-bZM6q_wt2HYpOI3)0f~D$-{P|Gws#qMI9ioP#9#U?T|Zj>{v-
z)pT{5sR=s6*T>8-%1%}q7C=`xa?U8aOZMX+9q{=OvYwGov~9D}eKtRk{pg%}87(w`
z+S|!QhZ{2#jg0YTC<9kS*fwI4g(1$$1o~2aoo1kIj>UU|PGPyya*Pn2u<F-xsL9Vz
z6z;%<oiU|%^kGwEnIySnG2V?``0_g?=UP7D^IW?k&CaixH(#=oZv?(Q^x6mDN+IGV
z^_-?8=)SZ462Z@npswNVt`S&nTh3axAFOE}m@#u%FzL(Se7>|gp?2{#5iEZ!@Zmk3
zN=MhrMzo*B7FI(6k(O8a7gdvC+-S!4-=d2etG&_#CIzuzO+g7Kv1eOgpxfh&#ARlC
z5U|#fdXno+LDjg>f{*KR4J0$5JML_i()n;Age<l>1UR=0BU*7j#z|Xde`T8%c$!Q0
zr$4nmb1jDBWKGJ3EWio<h@65^`p*@I{{>U)rGHoNDEJds(vrfHvtYZs3_#g{LChC~
z=E=sFGLvw#|8|-JdN*12u;)7DcZp#)Sn=DPHw^;IVecGOqLGF}Ob6Qevd_PhF^$x2
zZN5*x-=Kh)&VhVNN2Z}Y9PJ%|w&354i_Tv+$o(NjwrgKxG0y_rzHV5<<6te3Nk=@R
z`+t;CjcoMOnfxl!Gbviu;B11i&AkjYEIImz3saR|6Hh8^bjI_egNMCCLMfuAec4Q6
zv*Nc|p4=yqdMQzP%qn9k>?O$$ypA6AiM-yMlWy_6dcaaf;nLk<L+z?M5oi)P%4||L
zpyT$0Q<#F%U-j)usnC<4%cy|{{PIbEQD0U}xcffWRg>q|#S`jYROR%&sW@^+!C1xj
zBnE5n%|>l)`8~7@#2uhHeCwA2Wno}RVmBc@$XP`*h=_*N=xCJ2D7NhFVDhRU>y}pv
zqV*UpI-Rpk<j$~ax;H1-K3(NChAS^y|H@kO0s3MI9|&%5)+Rzot`QeCtRKsT4W?VO
z=d9tJ4}DYROb(rE6}2h1LBY1{05&}0Kb${lalmoUa<RERGm|um_K*~CPan>`IgWq-
zM6NfTi^B^lY#bNM1hM#FhG}$(SjrEP|0+CDy*H(?f}{6-PFsGg3@Obp2c`%e6Q#*&
zA612v`fWGeIS4VV=gppf5*DI}u-q!(d)y9~Ek2C-@J*GpK%WD8Tg7?w=;a|w0teX$
zUXt6Gt_sCmr`vv?k{K(cADZc_K8g2QYMXh%>v1?|mNO{iX-6Y1*4&d&l{qvJHL>wX
zD=Rx!wd=LYvGnE++f$otL;MbN!4r=8Ad9i;xZ7s#4Qz%Bv|R7BTX{wTm_<KXx4y0^
z{CTo)-sRPIF%9>)c)%&3;l~;z=x!7`-oOuzl*r|QwiPGwT9cVXn(Pew)Lf_<O>`{`
z6BYl_kne2fOLq7qvE!Pjm%SG_ZeGE9R-z$9;4~FqTMJI$>;E>zB{1IQB<8qbeEId3
zuwC!1Aa38E{)=*|X{ky<iaeUJfYZF3EZ(qoOJ<>^kp*MkbB7`cIi$AzKe_o$@pQ%l
za*Cr|^4JWdLO^W;*|C|BV|Ld%bv?JP-Uh^<J$wBz$aWba2Lbl0huN8ZWW`Ib7>k9O
zrv#fM$orO7phf)7E5SnbPXePr*Ek0|owL~qc=gs)h`~9m5ymb2_{-XBzn5D_Wn?Vy
zW+uaX3mJYq`=qD5TB%o++AdLW^@&~cYRc-<2oexa3Vc&fMVEXptH(5JzgcuQKg-2H
z`0J5goA0gH74o`dw#F%Y^d|M5*de{S-m4=v`Q6X0BUz3Nc72G$ZMQN<*E+-i7#*k^
zJO8|8P9>J6bVoRfxgwQ9#y98koA4BBtZ|>B#^O(tmJs>HdZnkKkwd&{gADJZ{Iv%{
zw2C+OzK+6(Ggtn18_E^tb5?dL@J3n3&Q41#zf<depTtb)OB#bYX+JW=r&)y^LQ>1{
zbfyO*YQ$+If1e>#dKyv+z@e$Hba2Kl(`}RfUJ}ueyw&`};5y<bn?j3uI&Gu)>dtr#
zr>O1g9~SB&Dyj953o*xn+23829D)Oo9sWeS&zv`7d$W9o0*h`M7h}M}BTrSexsmu_
zS{JPgawm%zW+B08k@TO;Z0xGWDyzxUosrkZZMJXCfwvufHJbX6iI+_DM(A6E#uLhG
z-6dpMC01cA0ynL-8;L^IUmT<{Ge23L&Tveg-2y;EN*m{;(8}%aWntrNn5;s3`OZgl
z$pHDbU~3&VHg%gIU790NS8{KrH|)v__EEbBu$rnc&+X=Ug<>Bp;wtbKT+9sKYq4cj
zAkiI&S}bg8xfoS-?A5&ugEl9!2|49D2O0aG;=1ngXWXRS1XSA(BU#ZtrX^rcr7TVb
zg!)*1Rz?<yT`6V;UJh7)srH5c*>QgO0LeD|b>5c3m_0sH*@l%oLLs|EIU}P7nwwKb
z5PG-I>s<LmI$ne!{ocHiYP5^sLo&=80{;{n%INq2dIxaV(88WuiV9cHy+Mu*n#kQ7
z=;ukeNXshZyFe{QmPOyRVgNSw-VlFayS-TVGE?9!IHdZh0(u!>Cu-@G6ai$h!nuz}
zPvySujn;&~OLF$(Le^s0oabcT3ThMN$BCo@8c0mb>NIj)lp?phV}mrdPa;_Tzh@m(
z&2b^mFop`rv-<aNq%+0C1}g9=!b|CS$u?ve-zRUr%acZU+bFA1-I1kEHd#_>$($P7
za;}htyG=kOCvPeZNy^Q7?L@$f&wZ~zc<&Y*L69D#p+=pWh$rpetVc1YU$_#1++-fP
zb`$3Kx+s@qjmfJxCV`EwqVG#S;;Cf4EQtOx;PCgg&D8y*(d(iOA1Is9Z<#6B^~>-V
zQw=~{oj2<*+L|?5`HpAVFHq<?%~xG!)H86R4Mz5b$ERdfZnGAWfP*p)G%+RsmVi|i
z*$Rtc{T_0>$=B~g?&rF~rT<=^m8dk^Zi4moE)PNElV-<{2)7Fp;Lpp%MiurOCAsWP
zOv&9LB!zCM6@o{BTw_X@7PR5H4{ksKn|7s}6Lx^6=jZX=jgL`-t&Paj8ZgpmKZ-%9
zkEY70MH_bmRCRfP2&?}gqX}Zs_Oi`KEX*zQ_MCG&;mG8MjY=AuD*;lDybiQ(S6YR7
zB$r(IS?yDXGZ_N4v)tc?ln)fP+b0;>SB~_TSXx%3VmGQA%?}S~7-|Bu60i6d2nwza
zk_w6M7v|?b?7Z8C@C!`ySLy}D=QG<-((vPROP2Eyu+6Q^XS6K!S1{7>Bgn!ad-oZ4
z2sCrEjC~Tdw!d>o1U&DMU%zL#^ZUZs0Hz+$@!=P!Tk6pBA6?G54AY#qdb@rb(8k;c
z=Dk`B<QfSb(?~8(jccPy!pbTgyz>(k+NqOJ(mWzsZQ2Wd`;n(D>2cNV+!&okb6lXd
zonJDl>y9Z-G?<INnnzN*98zXfVo6*`z`e~@&T3nPKpxd$ZZXcrHAGs~=K+h6PI^e>
z2-R29IYYF5!b8T=AGi<qmBXg0Vu>`1b{p1c_VeX76LAV<Nf>8vG21wvjDP6yPKH?(
z4Xvj0XQW$Ea>)1PPmur4)TfZHJeG9R>~N}&%f}3hj^id7kc(N=5m?5gx{kuorLI4L
z{wCt4stnlnOIeq%IvGPKq6Lqb4s8h@lGv?zg{9-D91ql<iebANZ(&fYJc)Uvng0Bd
z5onSpwM=zJID6a5-|YS)Z%D3fC>sQ9UiU~UJjyu-MYZiV8XI@zd09@zENsZ*-K^)(
zq{nOEl`QpTbj<!3GdEV(@by6P5IRZTr_ctW#FUFVne<)J%-;I5WW@f2jx3ktw3G5u
z?2C|mD*$uc_ee99USw&`Q*|$M{Mel&BfYJp*ek3w!i@Dob)7BIp7AOF8WQPukVqV}
z?`;Z$I~!_cb$Aw~WCjKMWLZtJl<J$d9K9}R_y)b0dHwm9qv$nL_>I2y!cMmT_aWq#
zqwl-jGReTiJbC;xz&umAeU6u&a9QE`!|vnS7gD7Ql97so-3ixk+)V3R`S*1(R=8h$
zNH2HUK?qtUQOr?S&eb8MdQZRr(tz1*Zs!|U_1VuIMV<@tH+I%lKl-KPia!Fs-&a*|
zPI!*j?kX{Y7^J9Z7&FUSO?Rfra(uEYv`d5UWW~d4;dYDug<vs8wsR!<3p5hlD*V^r
zI^D%o6`}s&^M`NhF7->>#BE2l6d!ATbA4nh)xMKNGG-y7J!v|EI&0I3%{K>aQWS7`
zeoYrTGyE>XRhhiDy;M*--`}%P<aO_OF@*TuMaD|_hAh^>7u?8KZb>RbztoW+^va^@
zT#J;isE7`^>2A1<=lNM^3^9r%iNx@LwXZvrYp3WtyNr(>hRlGsZ=zr|jTx<n6te!H
zpt^OURDC^o=8%z8LVEE8?0!fKtA<+`J1C^|N%PDpZkYyyUWG3~Z*E{OyDnk=EJ5R)
zE8pN{=_>y6b%c2$j2)EO0L~t_BREJpxF6ppx6K2veTm>LuDJ8T?z0?ZSv<3A(~-h1
zNbOg)wcd;;WIj|p=7MB8j&8-@5^4X+QL&9^UT3m8FI^5uP(6Yao6lKe9rRv|ch9^(
z`=#f910V`JGO)Nr-?6Z{N$Xdocttq-;Em336l0lSJ2(ByetCXog5A!R78t&tYFBPA
zGWoNGtWnLr-1=+;;2<|B+lEimxLdLB@qtmqD=iq2UCL3+!PG9hdC)O^QIyig92R{%
zhh)@I>aIFAG!z*)v6#xD&osaX^~&9gn)knbRdv5ql+!fXsH@vtlI2$@=ikPcWj{e_
zaUF=_tiC*eTGo(c5tu<`pb#|*$y#))-iwRbC)1)w9u7}u)TZ$20@0IJeOXxB<e3zQ
zwjS0vzHe^a-R-#_5g>f`nR`13-ze+gX5|>KRK;YZPCF7L0DQVcw0higx9DrlKDqVb
z3)r{~?1#Vg5*?ud9_&}~iDJPjbO@sYpuKogM>G9B;nV8(sz;lMPaCM)&_g2cN^k)4
zv4PuDA=h3n+mK7PrD$^)zX(?}zw=BaQPVHicPl!>a?E~7ORFByE%6!|+$!08_2GM=
zq(ALUr+hW~I-d5IeGV}d#hbC71{G`~Bl50Vj6CMB`)cm{D$2c!f<$6lg|E3EM?Ok;
z3$Zj#k7rUSYQw-S<_ECx0_&1=xhr+{-3BiE+Xw07{W9yZ8@^<~dmM+O+_fuhKtAcf
z)x7xo-D%=!Kd-bOSM1`3tlsPHJlT%cd!Na%3&cOi?h_XRrn?!mA1`7A8y5hBq7CMx
zMaUhSZXyFn7(HjB!GsD%M<$M@n51WBsra#l-FsUohv_JmT^&*@Wg+{va#l+s0YWAK
z9sI5_r4xOR;oA34?a)sX`S1HqPlKXZYu%~~>*BHBsf~#E)Es@IzDv!Dlpz(cE32b>
z>7J6Mlx{}5y!MEDWdRZRy3H^R{gVjJz2Z<ml@I~b7@nnjD!)$%7~*L6$EbC3$~le$
z*PO}}QndBN_z)Pw*Ghb@$LBjgCd601jshPXW%t40Q;L;`JT+d_`-ic4vK^Ei5zVOf
z!p;%AY>VZr?c!?XAX2T^I_16=8>A0g^BJ{dwQ9NS^=_*EXf;JYk_J(7(Y&I;c~Lie
zhOje2i)z@F8dmz`wv6qoD5r*+J0ARwfS{UK_k4lOM4{;Nbd)U<n37=WC4bxvkOr)*
zy13!S77-C+vHnGcqcQA3HuJZvqP#Teo>d>>PQ=@RM}OhHN1wDG$yi&JRaWXS5RZX_
zBpdb+g!q?YZJP|r7qqdfj~83^mjH)#^LmbrV~pslVNXt-#2^h)p0eg9=lMqUlVdk|
zq;9MJiQ<lr$9Y;Tbpg!6_u<xzO7OC$4<HCuI#U?Im8|osBCq|<yD~-P&Fx>xtSZjc
z?$+pM%Z>#@_`ix&dYla@q|FD6lLjG2BrEwz(oXf&r+HY{t+f9B0f9%6#kATLk=q3)
z)pua+t&S;4d2?E^07q7!KX2lRIGV4O%&6M}o2M}mn6R)p<<+?w?FPD<#`w(&GFQ2x
zi)wjNRan9q(zJ+cmKA3(I!TXcQdgMwqMGrla=A`kHB{}sdK(c>u`8IdCJ61BB@mBS
zAm-{_j0MyO+g*U^`3>i3j9aydyb==u3-FjyfxKk(V3-1-XbW?L9D;U{MSzIwJcn~g
z#kQ{M<fa>&6!|9>6e{*KbFs81hjl0p2inqLupl_zp$uv5kJh<~gdery3_Y})O@Bv?
z$kJlor9QK>DyP`=!e*@P4ghdNZ<Bo6rAg&Z#=*v!P~<c2xD=5y|AGTbe+rQ^(=S}A
zpRVYYH<YCHg|tEhBm|B0)~-J_R79>1&@wP222DsA6-G#v5>3A!d;{N46CAE)8v$XO
ztt^zLCg|4tlL>X$QHl`)8a^=T>}@7s*x&neA3fC0+;u75JqFv#25goT^NDIp1<kDG
zoU7k5iFBWE;4p6GJzi~8_C``@XH9}gNGm>y#oc1g*(^)+l1>dh2y!2T4pKxd*MDQn
zeX+;;<#<H`A=UoY&3M1(YSF$F6ef3h&uaL-usd}=E@Ijv{HFM>^buiLwV$}=RaiV_
zJyHJs*yLE*sCagBUeRzP<@Oesd|#$d5%2a2)?%glAzdK%YqTR;HNJ$y<myt9i=pnm
z#!jcb2Yeug|J=~Xc~~>DgIXJuYWNFT-HGRN+5AN1x2q^Vw@;{iXH+1`E6t}wsGUQj
zdO(S{rYC_~8y_!E35>COc%TQ}S4B1206X#xiZ1D#(R2l7$ELqE!fER+E1BkjlVuq}
zG9c>gMDqL_!1(x;6Z>(dpN9WDBZ~u_g9jSWT=?*MQ5Vb5WcbZY?n*&pANIH|21AI9
z!jcDfkqK*w+Tp5v{qkD)MR}##&93fe{qMbLOM;kT7*5`}SV@6>vtcC0YnYhNMz>V=
zn2G{TFGu4<qK(DYFw(F{$4z<6@?#Eo5le(LTVdz@%oc-5j|yA%q`H@a%H;+l_awER
zFVPm<!M?&Jfr~47yVC6Q{Wl`|P>hTxGs`gwySfJoC!XMnDfzH@Cn<rqtWS>c9stU?
z40~ijP1w*NVT$=j1jg-juwzFGEE55u3X*?KCPif)$hy&h(`5B*s*@&{exu&o@-X7p
zXS&JTngiG-f&>~<XV1jZ<{*A2U+IpzP?gCj<kz@Z=vsw*j4w-&Ab0-Mh>d;7`@NX#
zMRrtLw4TF}W;;PxgL_GyxxWxu_@_EyFeq!AgX%kc8dXlb+M`Bw_u{Bi`l1GW#1PQJ
z2@>S`&f;`Y5$#sTg3;nUJ7j_2)eP>-&%({gwo-0y{&D+Jf~e>?k7s|zSuy<hFHk^<
zCVM_Znm#=j+`kiV=qY6!LxU7O{#x~%F3$->44K`4{NGeSCiOW$c!R_~_czSw?0<tp
z!|zf~$MBC|9*9G1`kYG05I0#c{7njIWW}Qw`k~30f8k6*pR*8B)0Kp*zwyKW4*p15
XKhB7PNW^#k;`x)827IiPGztD6Jp3UK

literal 0
HcmV?d00001

diff --git a/@attachment/Clipboard_2022-06-09-12-59-28.png b/@attachment/Clipboard_2022-06-09-12-59-28.png
new file mode 100644
index 0000000000000000000000000000000000000000..100922b3b64592ba454e58ab54fde1a39bf20edc
GIT binary patch
literal 146898
zcma%ibx>VN`gU-4cY?bH*Wd(q_u%gCez6eTT>|9dZoyqbaCdiizB@Df+u7Njn)<5x
z59-{*>3;p`x1Wwwl$S(;$A^FS?j4e}l$i3ncThd=-a$yiLW7?CIHDMN_m1?PwAe>g
z53u7bI3LxW<~RQYU&_y5n4f<t)6Ahm#>_-nKvf@LF@Ng%o@d!*#i)s@i?G;~%Lw0(
zT|qzt<^DRYTJeoWm0aUfg>b3HhVpG6qBQB}G#mD-H-7Upo?270uW1zQ4_On`Y0j%x
zz_q)~yUZ)T2~T|$6O||;U8w-be;T9!xLz^GrTGu&q+tIv6k!z+_X35%DgI%g-ayiX
zN&4c{2L97q!r+)ao`_%G!TrM!695BjD6RF`kp9zKU*7dO5JUX)TuKT7#vaq|tOQd3
zxO8FG%z=Mg(HG%qj9gse8@*BJumAWWNKLH&pd-*v|G#Q-B>MOzGjTHhv#jXvYexlx
zWRPP-Q<PDU|9g`LkqeKUuY0g^{-e@_A<_50m^Q7-Yoi=e+{^s->3D?zgBLMBk{YPL
zRb~g=B-=6<!Rh;d^pFU2kYNi7$rlj+$&X0E)<913WY#0_w^RN5p^`|hieOJc2w29)
ze==Nqkg%;SBR)R<<kTX3>k4tbEoYjnR79Mll@%Qu8(X5AGGg4~saelIg@7>S<m@bT
z?Lu_ZJ@@s|9LmLoV?<=6{=j?A45aVhZMj{`pa<f(a{b?4b8*LO1OHz4e@u{{DO|J=
zotTLE+0+c&jjxw#*(^$b#6h?ok%VQPVS0L6cu|3se;CDyGY(RU)CF>Unk%=X8cuGE
z(ZaemjA@J184wjEu51iGrTlf0nvr90I$Hkk#GhP(jj&E^n%5MEjWe60IejUUdU4~c
zsi~Q~9D@UFoCY+>{q}FCkYbRPyspsFaBxyGauS^th`oJ%UE9Rf2o0vFDHG`+cPh27
zqPZC!Iu=!GLzu6H{TtIosDj@hAq|d?1FT3kPHtk_-VF}!6X3HxAGJSKS&dnjmH{m*
zWlas_-LSKDFTbpLME~yo0)YX|k9Edyer}x%6x5V%-brEsadA<iKH7wjg+)K6rlS)$
z>MgA7#NUoPR`i9`|29qK?x9)O+KT(=`b?B-;>=1>{X&e)NKDc9M2bn4kj?ghQda)z
z%lT34O2GT>VfoB;;B;$He<f^>1UKm5g)$5Y>nLu$-@kW#$Q#-OfWFH?3DG0{LpQRU
znqfWyS9DF&==GUmRS+#M$hsyTt^M_`N1F56b1A*5@fdUX3m}O8krb7u(P!-A_8FwZ
zM-o*Wv(P&ET@+-K=_k%yf3^-U!*{$c@N+Z9TWk1%j#{Zs`lO79niyiRIPNsTFt=ye
z^yk7>jNt9lXJV!tg&ml^5PALF|90^||CnrrjWBhwv9T$^f9V@vnXh{=@iFgpkj?tK
z_N}dj+)>uX#-jK9FdZN2hpQiHTW$3R57y=2Xe^5x*w4b;u+K+GqgogKO>RGf2T2Hp
z!FK7EudFaQ^Wm_DhCE)&65pY-ewv5#(F&GXvjm%rUd$BKbnu&(LG%XOA&}2g?0uXl
zt2SK_-VVzXbBrPD=<=>X1#;<B^i2?di6I{t`{MO0u1P+u^UwAEM}EsAJwGsC!kQpm
z(9*j1vj4W}v{NI)j4VE@mo5ppc-l{Xx0`o=D6JhDekWzwCnU5G)}NQMF(n-0@J&{N
zpGh7D6(`DiLIK|XCe?c#61q2!6nQ@<I{<DE?`xJ|=uIVYpIo0=DpFT`6|ai}Ll}4}
z3lki9kE+oH8dFDCYY(%BWIDx7;^U|G=D#l|!lkhLBKPag&>Qi6cZS;$8#D`=fPM*?
zQow$VkH{uf(TLSZP)qEOZwePmP!2;AOrjFGMO0=+<K$YY7#2SLNBH0`Pg`l!?U=5;
zK}$mR5Ra1Cou#iBFk4ZP`iq$Pq}9OWAvWJ9*vcO*1{M91+MXAY3r*)OOAb#-5Q~*v
zTp3k``vQnB;;isY4sqI%ae(X}Egx&oFDIOTdabJ@o(jPvP$7xtu4zj77OmDHyPJ>L
z{!I{)2F9YYz;E0!r<OMjVxN(A>U4ltcD|S|^KU)6t(dtNjye=ag0jEErr|1Y;FgYH
zp9XD;p|buqT#*+6D9IC1Dz43k)Typrk?cPpXMKR7PZ12t$AdVZ$>{UAqW4wU^H+Ga
zMp%7WV#-8hqyN@8orCcARm3GM;2zeXewQOcyoo79#;;|<0d4q9>p245{K$MsNlgz!
z)lrS|DxQy1;VC2H2piZl7h{Dz2Gh76GX-IROegskPp*uZ0(W0?#vAMO-M8LUlJyW6
z>|xPLpS{Z*NB#y3Zfca}SV)lutIa9B-bBxb9y#NU=tjX`ju;C0LhW!?0F(4wi$mOd
zVqNC2uSp5Nve`N}l%@nRE98i}V7-hCo%YUQ3{BVl?c?V)SJZ_&!tS=YawTi$Vn{^G
zBdhAy(4HojJbWSl2RPN~W-)aPtB2jSf_{R#bES%>8n{nONTbn39u-TkIHo!3ChMjt
zMjnci5yMK0wLXpM<qtjN_^k!=E{lp&2MJ9YmLu;O9z-7HtjphjCvT9QrH$r4Jew8b
z?ZMFBd>VyNd>U_$vndr&4psB#K0Yo8g>hWD+@h&;+yU0iOlhc@>|BcCQs2zP;mqv^
z$XYyHu#W0f-2N<mLfOhg8PC<Cib`_Pk5hs{a-~e=C$trcz5xhfe$P>lB5{0Y7PTn3
zIzRG?KgYRp9fTLYI9)jW=63kK_JY5$?mC%$*fW=8E=AA_@#yXW$BD>ycl^`d<rlZ{
zRaew4Y?A)=qjDq8*#$*k`|?eCejeJcC8m_B`$R#hgI_QZ%o%`ZKkVZrgM*q*b^?e>
zUsPs>tg@zHI4Y8Vbd4V{8A4(Auw3vPUVg?zuiIb4S=>e~o}JC1^tG?>PqnUL#e`Ap
z(gKroI8Ce%NE{Px;!+>>v8TaGA2)5EH<G?{W9ypvnMj6aBu2xfd0diEE8VBy%XaSD
zYy$$U`GOm{>eeSczj-(Z`6DPOD031%u5(|mH5zYEit&5OfwLL*tSaC;ypZHIA>(bP
z(fs%VU18t|kD_htc!%<<nuVzJr3~!Orm}}P1CCN?TqK{h<dKTOzXq%1O1b))3?n^O
ztIEci9mv4B6$LZl1Tam;XLwt|W3Y_v${(`SOf(TuQNx&RSB`XL!oz33)3s-O!zAIz
z4i2K9xLC&fEcF(d=26!M-<YvfbsVfM+wn0ISeM^ch*oYRe7gT(SwNl+Cq((%bk~AV
z{@Ja<hmS4IHr_;b{Mb?B-V8!9Y9mM06ws-Y)Y!E!3rddjVKwB8gZ_sEiLYj)m&<9y
z_CHP(G?lV#y1%HdD?(KHnF}EI_2E9&;q6${$9Mh$))`xr!HF8%cs#w}t0Kc+kBORJ
zvAi#+gu~E2p-H$C`b3~MF^_jjF5*glsy7vef@HgRtw!$Ft{juqXx2(x@{yRJs@`a2
z7@y(W2O|*@42S;Mc8>2&zNVDOYrLok<0zNqkU9dh%$40Ii!?lBD<Sb!CJI?d<qfkN
zD*}ujSEse{N2~VwhbyyY;<}l9h|Fm1P$#-EIRYAyLHRH&2Mq7}Z5jQJ;uS8QGbrcX
z%CKG}<OT%X^~3z^R^Dc!uBxx+IW)CD;Jw()lxp6wsi%;Lf9D|X@#jW~0;)|++<SJ4
z9K-kr3-A%#jxtbuHZ>Nu0pAQq3KU?+xUFCyrI&d~dKnxJX}71E{CVqX&HneGFF!Uw
zGa%)dv5zEMC-j@jC03M!3AuAkt%LOjqwoeJx6d}N-`jv1DwyvwR6)$o=L+h4g*BH#
z6AHV>3nY){2KZzD%}>#3w+s#PR|$0xt$d}oF1dwORMLHkBy%Q@D%cE9RbbXY`Ot@+
zU#afA$o9(%%nmto{k-W4n|XKNalJm0v}x^QmQY7qOPr?Lf9b^7Z^A|X?8Ak$1RVMp
z#uN}EBf5Ej(RAR9KxYSidF}A+SBJXctd_^;y5h~4TBDE~nttEq=os$+o?*nG?==49
z$TAGo9<Qe#Q~es)gNF*}9iLRN!ztUV)3T4u&lh&zpq$J%r(`GEKZf@f8a*=JXc{bs
z$mPr!zud92tSHBrl0j1sm>i4|VX7)<7(G0x_YM0$&MbJmhO;?S2efEcc)w!qLg^_@
zK)x`48qnY}E9mq~)+{@p-1Mrbt6N{u`##t@FIT~_#NxE8<>8kpb)in^b%xvTYa#lu
z7c(y?fPhi>)KS*e4nVc*&QF7=5{{&=Y%QxQY+9{FUlrlalB6<wqr#}|%h##sasGPI
z4FNH^rlTcUG1$~B)X}8brmj=%-ovV^Z5I3>gRm`%SR}VP1%<9Y131AkH+&0{z2Ubg
z?|Iy`TJ{@_rS#_uUD&%r*<7yAGj1=0`hp+FwVM+<#8Yj>_@QB>JpJMx#?@m>`$QA2
zFcz%OQv5_{RrFxUW_u6$UD*ruqfZ=E6o7c3;?UplM&(H9d7OnIZP$$-uV&$HQN^QW
zQ+L_#45Nu<%fI@R`LZbT$~5U)3w|*K3?Z!(q4i0{^+5q(XJJ9OIAUiUL+~`sSWPVD
z{Fp)fvwOro+$-bm5^YlJ-)=?7LIO1Xqt;)>TZ;g34hz^y%S&Wr9<Fjoz-*V$#+8rZ
zCv@XIqrOqqo_(s@#~#qlwaA7>N=$+bujFp^(Y<x~MKtOBEc-sLY0Uc}r*NFMubOG%
z(*kWH4HKu~1_rK}Td!{Lrh8nQE1e50Pc43_%Z(-+EN3?T61~P_swJqv-NcBt@&p!B
zb8|BpxxQ^{l@+?=2-dY&uv;z1Qusl3x&$8S`*@}h`ftW8E~@-aLU#QJ&=*~35c7wM
z>PC{M;+9MzP3SMjeoZ&eJ(?tg8t{@0>-OPaSuIaP&l$&>)mGMaCtvSxiX^KJ*a_4-
z?4id$7-7h2vIxL<60t7gOc3XAnPeqqB!w6pi8R@inCGsiOH_E};bFZV&YZq7U_Q??
zia0@2#Z?RpR|bfd^dW^3<SBhiEr?o*=$kyFG<pn=(L^Djv+naDD!mu^uJLyD3(*m5
zd)x5zGeUBwi7WlIGdrfI$L=BdX9u=jI+3R1xV{J(4A!F2pqMbu2dM)gZXUGG4ke6k
zN;h5J;t7i%Et^z*;Qro3EIf)Ui*EQNucGx01`c}uC8$gf`15v;`C#EdId?y~je=xH
z$7%~}Ytc56qXXYF!N8n$`VvDDU5_ooZ4?P%<NG2Fxqe|!9=3BfT|p~>WIDlmAGwYP
z|NA{0>}`E-3?@7V>e0|tr=(v*GDqy4;m>*B;EEHdjRYLQ)x2*vY`p1Z&1xUrmHiaJ
zcR%gSsk)+bJ3~`F@VN{Ii#+?@d4=$RPfa0W?=1i#fZCZ+7C^0hYqA!m8u}*;2$mst
z%x<i|MU>gX>maD!-^5yQvAE>l&qpA``Z^Vb6}YU)<rq&U*kfuC-gll1F@JujBh~f|
zcMa^kzWSYMJK++e`}#uX*pF9^E0)?)$T@`$2owIzdJ<GN)@8fKCm;4)jg8;-hURC2
zzU;l7thkTC9Ui+^_{$A#NVv%WTOy~peD$MAID$zoxPtb`gY+)T68uTCu2ld#%~KhY
zH*%v<rT8+BRIGfIo#g9YuQ$LwjTK<}xJrk%qY_xAep~~F(UG((wW}M6M#P?Lx|VFq
zo$U*^>%*114<-TlcslLEP{tih$w%PWy5C)(%yCBpX10NSGRdm;VVo%Kc!)~J^cN2+
zp|G<6UBgVlaVeJfUH!(FzF0Pm#%o~xr)Wo4g0C1beHLqI<zU_@<pguFvaT@*q~tQZ
zLpiv_0DeNO%g(PvdsbP#Zv6eiz2~S52dvy9FAgMxar__h5ILuZ^N31ufkbb@giOQ-
zw_io(W2Jsze!H{Gxa8<k6q-@^BpXol4eG-31SOs=aJOBE8|K1tC}M8uYbtnk0g8)d
z5|jPivyHel#+R@AKF-r;49wl0%IL?zFa?6_1hzdLP}XlYYid;shP-MJDn)pcAx;U+
z=obh$G?o=A#ijYp5qs1M;7DN)n1@G3UpvVqefG|56+Qt}7$z<;e`0AcF_E><0m&B@
z?CclVqW`X+LD~ih+F3h}L?2!Bjl+whYUmbNh~tMkn0TynXoshnU?pf28nB^QpN(Ek
zj!w5-vK$P@ODVkT*ZlzPamy_aNX9R9D^x4>Euucx-a3?C3r`(xY#dw)K9AhUCm+bS
zXEOwXIjNZNo^kQY-xMtCXYkgYh2UK!a~TuK(%if8OZad>%^?Fm{?b5dI=DjK*_TSh
zodcHbM(nv3J>=Y5WIz@8xljhZ4gRo>9sh9;*%!z8LC)5q3`odZ;PRP~{5`+#blV;z
zyn#hO6#=PVyCh0P&o%>w#Ib!BU1PH%pYmB@ul#j_x*^TwzSK%jdT~GeiSNhoC^*Aa
znNH7=B8t3@t{_3nlaa+k$aFhnTX{}sV*)xlI!8}4whp>Cp?AKz!_UwD4I3~8Ok&-y
zotrE0>)iz5VCOgWLyfG5tv>)r%qFAjX-!pcc+buyP$@nNQyxspXLYJV`d22#h7;pT
zuK{lkpYx+O7>~HPyAzYbpv5t{A|3QC!=Ce%v4(G0#8p##Ic5U%>Zja?3aimT;f}pM
zjYD?nUC%w&>vRzgZ1q$Ub7SPEgklLb_i?bq;rg4xl8b|i`q5_@s(HS8<iJY=r@QEZ
z$R9if?!(y+D7XVDdxJ2?0^M--m=%h!I6_uk)=(VQXY<a~Gv(@(9C~##Gy$h;O^;BA
z!4LpP)1DaN>@sQ;mi^4uH|D7-skF?WibZtv9ZCY~+z?~m=XaKsXVG^!KC00pb3ur%
zbe=ZOzt?B}OeZzh2N<Sv95IBg=h&(W;h8oi7#6bVZMpYI6yzT4lN-$Y6ns<kJ}N-n
zL>6#w;MYWqyGPeH6p|!&qV>TVYTB;_YU!LL)jQ4mF~Dk4o`L}Rr3kt)!?b%;Ot-ZY
zPe!n^XBc6sUH)s+kr)Ka;=07HMMgNKlW|R^v0LJay$IuD)3x~32B*!PRt6^_8^Oxt
zyu*HJQ#vb?-2FC$8f=b}EAs5KVq=57_yWQJ@B6R;GSM0~2-7zp43pcVMe-C15#nd`
zpNiW?HrB9nW9kt-NG0JpUWB}h@~@0;C=ZPfhV+8*6s(T88>6LJvUPeqj<|Uh+Dg@H
zVQ>Yy1`Sdj01odpT+tUF^CfCVEVYvH-<n_B6n9`h+<8qEI?uNHrE|6p+_QgV-a(VT
ziCmoc_EY{muPe~>yd&VINHCIbLaGIRaUM^>C5}Vz_v7-reIC(#>V@zi203R+({`zy
zly8Q%Hj9HWpZbRW)C1Bdxlp~=Fi)Iyy{X3fE>*pv7E{)Uy_ON|On$g(5qBG|C%nww
zmyt+};T##BS59>F%#QJPt;{F%pTDMP@}EpbUjDb$)BZI;wv_f%@pFyr1sbqb0u49E
zuei*y)>LFH7uy$nEEnCC+ewO{$Nwg30TqX)BROTZ4L+(!dLb(-X@_2WuUjFrcgw$a
z^OEGYCsAgLWxX5(eLLVa;+){eU)W^>z9V6U+YAzwMVW#&btD%k$g-@{hTDT4*KciD
z%(lP*$Z%ZvAG0BH{uo@yzzg=rPky%Z9i4b8PMMopS9>uYKgF$WMRuewY|z7BC4!Zg
z@DhE24{w~)<m)q;pJfNFdfQH1Y2H4P;KUO>m17Cbo$R?{=GY1X5@qaqLdOpqb0{X;
zz3CjE1~|pneYSUN9WPD`JT7iH89ZMofL;!yPDz(vSylCMQv+k(N_$o#zu~@@EZIR+
zfB8OBP`LaPZt$f74@;6k^Fj*(Tdyo~k3-GlFiX7;D@-Oo(<3^v+OS|O>?S9>>)Ntx
zeXVUR8fzR!TN|C;s=k>4=9;5vnOi+3rNe26V=#t7H<JM2xG{h8%Bx~TMxx7MCaBT#
zjmzWtj0pyi-nbC$sld4zybbw$5EwWpb1F>yYNa&;5WsFCj(eTLy+esm8_$Zd=xWX3
zcz>pBnSfNElhyyp6K&g?XC-7{t&&~VPdg?_du>NQF<O^WkDg9nD3+jc$?=AR$77f7
zr7uLMnAO+e2I@w$<5z6B{tGnDnmhL8RK0Us8N5P!Nry$M(>H(r4X<&YG+&3BVr)>K
z^X}4(9S3Rx>qu$EZ;REZA3~F-2ao@R`tk8IgO^=R%SFP0SMDv}y95A$ReA~k=E}IO
zVjw~YCS}4GHRWhY->(l_=aBy9be56{`4-Ha*5B{wJ@&S%YuQZm>BO=wT+;(D&V?@8
zPlc?@j3ROo83fs+wRcHt9tT2_3=>%2{LQcv;Y1-Yf4)yX@_kekyDJ<*{U5*+NJB<y
z+{EDTVTV;#W{pX*Au&fogwxxKtSr^*FeB?%S1=nqfmc`&#nHqtA^4&*&{0(}e^~vB
zg)qBE0qXUY(WJXO)9o?<2ihw&3S871Hm%L}{i#g6w8(eAa|0G>zYWSY7C4!c6Wd31
z*`%RPDmM2<J#G$l=7?>;s5KpkL6{k!h8ON~Ccdo%2|#SILIJ^TH&Zbg9!KyPJXLyA
zRAq@ji=4blRNN1T;PL$UB)Lk9E5HUlZ`0*lPG9e%Q+@Da_TeT9jQ2Q*oQS=6#%M)`
zanQgCQii(3P>eT`w@no-Y9t&Y!>6<I-RlkQ>i6;fdJSGZD(<r7G%OuPb)c<8a~uEt
zM=DINQylZnpK<b=Zq5j&dIrH?Nk%A&SO;4v&^-Avl=Odv$dGV{z*!3K;PFXhlEl%P
zjn!yWj+A!X-<*G1uA7M6vCryl`AQcptM~#m@cYPLeC!fM@(V}9w-Q-Ku+~IH3#s4N
z5nj}o!VeK%V&GkCjED<(81e@&Gd}fpS8yznQuVuVoh>C6!ufe($#y?MKX$6?uBkZr
zja6Ry-S5xPBPw#ZWZ0)jR17Vo$nytQM0TqSA+G4Eb3rw}!mAdf^ZY)lP?O>|Is`y(
zsT~2&Ma5Ca>|w!#mgD_37^pq1Do3HJ%kTD82fi54^T#x`eI{KFx!pLGpD~bqHDi=W
z<_tfxIo#LjRWnFhfhX&i=#0&6^qjcu?DV%>LNm0`jfI=K^IzIY4dnahbbW2X-WGDf
zC7+VReRq?}0x?LC4Uhz~`8cjm!A>AmBimcq^+gU_WeSk;aetg)Z><W8KxMkYG}u!<
zi_q$gk<JkWe6e|(ZG6_yfjp(F=1qb7$PuXPKBxT6mVS0Wz4D54?rO*%>{7l~&J}|E
z0WwiI3X=fAdrdYtA{$AZLW5zFQrC4aKjJu@569GB0vffTGZU#;xS#TW&*B1slwT6E
zLizkzb*kZW_%Gm7hS*${bRjRcw?8jC_1yT;r?A)KVyU!C60mm?#y-3o7#HnB7UjRQ
z?P2mSe~;D^6ABBv;@)%*i}IG=x*pNRe)ZI4be@$N+$>bLesYI+s{D92aJHvv{G%MZ
z!lMLv7uWDn{9xXx0InQ6+YznDRC$;dL6&AkG1xRm$KjXV1rbqH(2&;s3k`zZ(g9r<
zIV%DJ_I&*PCjoU^phoZ6P{G%Wr`BJJN({y8<EHx@JT%`c`-2TE9&TfLf(T#?yII-Q
zPu%+v+!!yO18JInMJJtUR$XTC5(2=eP-J@ZA0PtUm#%u30sek9NHL-%n^Rp~$&30v
z)rSHx;k{2XR%F<`A%m*2Id0I*0&~$$1+9tk5a+w2_UDsf*cH}Q1r>tO&VFAa#c?zp
zmh8AzrTVw|9?M^@;y7)r8pwH=u$}!gLwQ6GmG)PKB0ip8`_a_HyVDO791E{`@Ozmf
zGp%Vv?l8@6Tns)rVz2(N<X1Hkf3O4vO;*6(8UF~%z^$gmlQA316Bq_`8~$DL{r_<R
z)S@V{)Q@ee$XV%$C*D2~{9@$Ltog+e_liT2XP97xC-~9#0U9zb+&VVw`|Hd3U>$~q
zU!~dxbz6zMl%!n$wodK&^WrbfhJmnlSGV<J$i&sMOKm%vDN_ysxQU6#zBliBV&?1s
zCqa4Qv}j4Y({QxdN~$TxnLbw!C5E0WWnb70ZQziW=D8x-<tk5Tid%z`NfwbeSo9#E
zXGO!*@bPXc9<6Y9UZ|CMbf&~{y9w{5hAqfFZF6e<+$O>rvl<rXz3w5wOjMH~9=GDd
z)slQG5mhw>P9uZesW#?_^Ia9MDYQxF!eg{yJ>97hDU-2}#AQv-XJwy!zR)WMQXQOe
zwYNRDhx|`h8FmxH>QHyl9l|zyd&K9;<k0c|d%PZ?0KUb9i}Y~Supe}f!{-h|5#~KY
zzHC(7UyRMno>gyPQ^P5mRrIasCE{nxofsv2iuM;5Ie&hCHO1_e*2oB?opKcNw-HDi
zElx#eA*0gaZ;YCc!f<SUw-k17*<Fkg?>~us_wyty(6<W2gQM~FBE2Llyxc{JGo1ET
z?=u+EKtZ%HxWD;Xthl{Fexy(2Q{3_K;(d1Fmw>wI&x5$QI5;?&`*>tQY=({X^&k5U
z(il{HLZYk_6*WWd4y#v;e=gTsV1yh3wYN1woUf#X-FK8-(W~$}so<3MpwnX7?G3`E
zkjILm4mXR4(DW+iwnScu`3KY4dH?4KMpy%b+u@va9O*Mt6%eS2lQKZPiTti|Whp3z
zWh1^To-`!tX;<3@M+2*8lXY6gJI?+A)1XK<NZeD2G^8gC06%7apUYi&aubvb1F2Qj
z-d#3b@b={%8E%6O%w+FsAB@J!5KGJ=SqQD~h=8$_S1qc6v%a&Xpas<708n~pTPg2T
zj~vHB--NIwBp8vfi9KBD5LJT<scq4HiBj}ahIF0@jf&WN6w9l+PbZwQmp+kT$r41$
z6h!(J2yxPXHBSq){2=4JM&^Zmtd&;w=2ESSgC_94i<}<%f6wp4purM`Aj@X}^ZL(8
z)pa?>9#sS7MbPD(T3C%F7#&15o2L=>J$Wcc)!pEu9i&Kj`eiH*i@_eA=_y14yrp0n
zvvVdt)OZF@%3I;9x}O)gn%r9-t9y>mirf`dk<ELot4`JUfZ5rRuaW5!$T}FeuSM{8
zgz-*tsowEI8aR1_<e9e7t8K1I{9ZbP$xvd#&%t}wDzE1xV57B)29?@b1iH1tcdn=C
zW?|ood2{Jp=%&)xS%%i~M7vBAl6UFyqcnj{wyfIu<zy{UgW0%;T4}-MoF)nX<KTmm
z-HsNPmP*f_ck0Abet-=@?@nlX65HMbrHiKfHf{>AQi0i!Mj^{S2_3}b)#Tu1(ifB`
z20Agm(Tq6bp$^>b7}?%Qmv>{frT3B;>V!2W`{%05-$(WF^1Ho+IqTodyX17@3`=E2
z@K8R?EGYrUQm7Ls$MMb__*WpTjw*s4u6Uy#+vKy>S=F;BTq<`RjV_CP9m-{^4$a}j
ziTwcUcIc#mifE{4TCd{*bN;bxfhG4ul^-Ag-q_V2++S%0C$Zcat#GwlCiT)H9xvU+
zJe~JC8NEPE2sd#TUniw%F%9u+o0&K-rwPKI8?%d)|86>vMFz-PX?YhnXhdz)*VpGx
zIOIs$LJaE*gr?lq8F>>KLQe|)3@MkS%v(<<+}_!r9Ta5Wza$#-9@V_ehFVg<729}q
zOucxCl_Q?tL4qy&p`O~PvGFZVTT$IKoQ!JV9fs4U!^yVnXh*3i`$uTC;8^j7+|6M8
zipL5h(~=X#W40~XR0lUgyO%Q?Sv;mny=TU}!5#y=<uwAhYpa}%`1uVs>HReJLyEi>
zA!p~J-Lk%eBi-eC8nTuqwa7wB+96RfNp;T8B1(=|n<`=o(qOV5<xKFURW&vK8;b6u
zf~EN%XAFNTq@X6Jr!N=v6m!Z?Psjf->|>NE%>K1C-jy0u+yf`kKzt+KWC6C4U9;4(
zGEmgWk<P8uTg>hOIJ}BDBTMU_o;TeA1|mU+N4i&@r$&yzhy!SMrW!`BAWKWkpL|f+
zk<x!<Re13RhV@Hi^16QdW+nkbCP__A3X!wo`tLLuu%`j<@d8FiWdR#M7Z+@Be#<<N
zG9d0$Rc}6b#~Adl1C;<-NUL*eCMKOkX_1wl!y|GM3Ej+$h-^ytPgUmDb~<el`v6z3
z96`*V<ehg5;D3>O9}Du>t#y;D4G2V*8yiEd*6hxAjh7Y`KL$0!#Js$C(b3UC+%aqO
zTD{-)o~R5U{#O^ei4RO*zr@U;ZuN&bNavNg=FO*PiriMGZ$NOHMKQQoL^2O?D%BHu
zI~_JGR=sMrJF<N5<Fh54hzlV}F~|g?ng5ob1`Mt1yE^?bCqcdjJWOw3F)bBzb#*m>
zhH2#^7p=f`?&td7x+uBjaEgd$R-5g0{N-51=~k(u(1E%km!Otx+4OQFP4Zq6KnCXn
zhd4D&g7l3qQ+KnOD-dCKvf?LEcZ*{u>{+#d{p#2KV~PgAU;UhP5yYa4YallD{(Y8U
z5EIHBl`tVRF2Dz<VNeOb13kwu>6=B+(~I6-Oy%Qx@R4V!uS^%?XZ*KEp+<AFJUukM
zTghtXAH>rF74Uy84#Fr@!mMpD?#Sg5zfphmq(QdRm@?BcdOx`cui}a&n`B0l5D2P4
zgcu>&A<~X>#_He4b#!`^V~8^>LB7DzV&!-$BgPeC4K(=jWzr<07x3SeSeONpmof}S
z1$FBW3LGdu%c#hFR!yv@2pmVPS~4p84%I6VbvmKzJeMzvZUw8dDYd-XQdk7VkYApB
zs8xoLT3ERHDf)!!ui$k*52T2@$ylR5l-~+c(izhwL!%^yg_SZjoLa>w$J%a7D|Yx!
zvsU#dF10Mkido{7Or~$Tp8)P?dOo@4reNvJF5c=?x?<OfiA>*!5&ny+w(kqcOA&S_
zC~L#|r`8~)ewYOxT+`-GAtrQHHV@f^8M~em&rYHm_P0}LD}N1-I7J;<!uYA80+uj}
zGZFe%TLwV3fe3-8SqP$kI$5qY?1v8)>U&8nX=;s(W#!m%vRpZkE{%*cY5}qg!+i<D
zBH)RUVjKp0#Gr2d!mwZ5`LzpRKl=lo$X{4qO1~LT)s3D&{Qn-KCP6MP8kT)i7jq65
z20rk**Yo2Ttss8jlB5j#!b!(8E+;kt&c+Vv?cR>c{)mbI9-sY!iHL-=R7=JCQ{vxB
ztgr{jw^5i4cK?G|wjwIbFnDxm_*Gg238<C(#LE>Hxpt*e(o&KguWcnOD@?{qn0%N%
zm>mz++b>~Nu4Vt1;Eu2WG5^S0o-{rGd<=^gn2eoTR&J!+>onHc%*j(~Y|511vI!Jl
zZp?(#))7^8U>@oJ90bBXuHZ_x=t_Dl8dO*_)VQviB_p2;(yGj_p*A<Y@EAD%S}R0;
z%SjfVY+Qd%72yY>+R2tEKp+R|Vhn@!Opq=mZ_eV}Le5l=X)YfTu+a1{hGwM2**T7`
z8C<7+9@_**;mC=dWx(|gxPLs+g#3$wu6;nlc>9r5hy9j_{urnWkm>2F?u_Y*z=(Yi
z#LaEB{l*J7Zxg?=nyvnH?J@)7mE2@C6eLSlCeLYw`7>r?@iinQdlr2*{4Y+!D-K$G
z$vNwPIN=vzDbR;lvdRL#O(BL0Gl?|I!qOSHFr^<E#l*a4%ud6DEi8rx#Sd94sAW$(
z^aW0%HB(py;Rg<$UThZBzqzQOSOjdu|5T`;{10gYxWJK+(r21~aYWIj9|?}n7^Et6
ztEwOk_U7w$%aHOctT*&oI07Sg00!4KeIhI3VhZxmvc>1K-*L8y?=G!UZ%;&zeD5H9
zAFl_osi`l@gR|#ZlZ%tHH5q3k|0S8oCy-21j%@6I8iX{ESSI&7Qt=^O>geXuGHrI0
zfwRVl^MW~aZ+EiH9GaA@>T=_JZPux-Zm*L8nU@uvxQi%r8Zxoil)J=_RsVO|B)*ul
zX+mJe#)zyf{z=9jcXxq}_=<>k5}`(anB=DfXx6$Lnx#Lev45Cp(i5Cbx>WX=R;0O$
z17X=GYecXQU5^TLXG#Eab4!h6f5F%jsGaW}v5$U=y1;>ObA4Tk^)rEKF!bQ4GU>G{
zhA3**bj0Xs;$r2Okp8EcJ_kUh{<@1O>QezhZmrbs0tVWVgVOBMWUb+U%3Jz=atd5U
z4NDfF3544Q#9bwPN+l};ZSXhmo+&10u{q@8=EHjXtuP|Zy0a<mbb873W|2;Hm&II6
zJDZ3PjFM+heNp}2d?V=n7Afa>O`x?&-WWmWJ*^?`1JHeQr@5!CvbW*(oXh`W0{i|(
zv^L185&zRig~0{V0%XzYlD9#iOv9ZKkkp)kfHOUFvpsv=(bCuZW0ebI(8@q8yhm9N
zV}YG5V1Axy1MBKyE&e{ZTwvtWCy}M@)}Jkg?@3QhTP*YL7v<J{F-Km{!NR)!nB;$x
z(r<;D1CjyT_NyYh?CvKuF?Z)V@RcMPS1iL?ak*awW$&plj(wlXW<j}5zWjQWLAX{z
zqv99V+J4yxj=00bK0<FFRCs<7)KKtvSS1eaZ6E{|z2i{~ms?ahE}*i@)x621R;XJp
z_2Cc5d`<CNXe!%RG5x356q9)1>h!WDR)%FCdftO}Ax!G~No0jlxu?&;eN$;usSQ!E
z^Pno~yaC=<BvVXPT+XDYio;xH;Bt|{MCSEO)G2)2A9FH0dD||d>c5GjH*MFZcvg6i
zZ<U`l68G|x$4~ZmGA#wF)^A!@_pfgF%k-%Dp!732nX8q>w^C07)LzzY`r(6KoPIc&
zIHK!C2xi?STPJvndu*PyLg`v?zet%1!4&d>#zH4S@p~DJ0RN3Qor|#m`5ztyh7QXY
zII9jypoVNYkiC`7X12iR^m=Jg5Y9dntg8!Y|HMEV0y#A`>2>C7@ifCvN=qAp=WQl_
zF_R$e9#$pPk{~$pN15HX0)4+VoqL4*KdWw_1+`&gkIOEiD!p^<W<y_LvxOsyN`tj^
zL6%f+-GrbGuC{+G=Il3>o?V5^P3s9>!g&&bav@EEKce6q9RyDGJ4UnqlHa6$kOck?
zRxvww$<pb;o9{WfG;@9n1EBb=&i7ZR?N@p9Dm_0a?Hp}r9XmT}=Sx}n|KAmZq3?5p
zWgr#*D#^WP#c^jO`vSt8s%R^W6&)R0rZ=~VtgIFp90a!F;#GUs2zW?<%J-spU!&(q
z-ggbk{&6-&7V@s|9QJ@lJ>jp*&V_))C#aVe8DojGcOKJ=s-Oqz(A8Ics@=pOVymXX
z!2!RGMyzAhj&3km2BV;8IzAc%MP;laf&u=m<o!IG`5#KjmINiGi6e~Ji2wRLAFSqg
zmKjxg!Evmgx{yw26CCc0Ukv*2^)O~L(pw6WSJaDNmewSW5)``9-+JU{0ynKo&O`ZG
zpUAhR(%%1`&_VDHbuRd*zwCcN*&JF#OlZ4-|IUPcp7BS0gG!Ji>eZHl`VINbkL3~j
z92|bN$3tkxX=zpR9r(Ak<EKM2pI81oEX>sduS2xQL2>_gE&10@To@L%uAwX;1e8yl
zDKP`vYNj^2#j$>lEmGuD2hPr-VlECb$Wn>FYkVz4ouyR?C@hpWE2S!-bdq8TW5BqT
z98_c@|3fjbq#$Z4>^{YRUtA#V29@9*zuSf3oVDcn6PB6TZrU%PC=y1S6#p>S-HY;=
z#_m^(NEP(bb~Q-_?$ISXKfyztS{VKNt%X0LP$2ysV~@AXU6s>cq7syw*29HW60BT-
za68q^l@d16kvU>^tt!ffS-0eMFV`hiF`bAkY0G3Gb_vOYc_w&(%z2W$+(G_-xk@O=
zRiqARXW2=?L6-n5Y-_u%YP*^I2v79CrfsjThRmmG_73!s31*W>dF1ty{zvQvN`X>-
zSmBjqm&?AQaDAhm(>JmJ9sdtRQVJ+Ea^~bpJ|_%alf~x#A<5Lve+1?J0%R%p?eVM8
z2{;8QnTLuD!ZD})VWSRJe*DsjMQwfFcR9I~#4o~1%Saepf8xymNU}KL<0bnitnL$t
z@gUb-**+|QZ*Rn)HHEe8|A7}_a3Ts&$qHU?p<mb_AE+{!v-4?pCqX6=C{{HY<Ox2{
zLhE4#u{06!_)A;MW^H#kIT~||incHiBLnO#t-@x^M3s$28tZ#>x~A6Js}<U-4RPVb
zAi!cb^p>J>{2GXU;~{_G)DEKKrliE<nrI?U(erXtJitwZ>=qa9kNv*Xuoacnnnc#G
z$AZ7b+?;v`y8%u-^ss0X;cfNp4!gIHHo=fC!ASoFf|RL-1j@ksXyP{pe9?Ceg%%OK
z#&)jEygyC5P9e-iD~~PUcM=>Ys7`!Xlus^+7#^`+6G77fBAg8NJh`e|vU+Y}33M>#
zl^L3cI^20tQ1rStlfI7kEAL1MQu86y`a4B!b*YPGs#)vzj7(s)Y9uTvi3vY8e>R~7
z9S$wpCS|UvR1SsnA3H|Mf)n<%cC7h%&b{EW-4pJFR_nK9+B+d7r3`jpdv5q_@3U6u
zzJ^rNAff~XT!RYEcD#r_Cy2Qpm$?18;_;U?YS)}EL!$Lof(-Gc)Di)>*gZBx1hd<T
zTiYaB4~!OtE_O3#Gyyw4S?tkMBGEGrIyj2JZK2ajOd*a*wZAV4+%KTJW#`HBl@a4J
zZAIfUxVOAeitkGOPpw8mHvMO_p#<E@_PXWA1vmb-ec}OM7x#L4<&hH`e=)1pf8q4N
zRcX?iF)%NsoR`<Q@<bRC&&lTcbL^dsfq9>5FK^2+Yg7a{&xp<|oZ6Vy0w+D)0+)WW
zWdh70W=^W&5#8d!U?42}RHc&&Gj{YHV=96kYzi+xlj#@E&{#(VxNd&b55BWxGHU9P
z3zofdS10|b8;m{&gAgw_?t$~u0}?bt@#|!qzDF_>pm%DA!dsG~hCZ7!91_?8%pDFY
znb(`Mc_`WSaJ?Kb(1~$6l#y1ezkPKP#YusBQ{Tx6y<hK3Iqa&_GT@#uYWXfwiYYpz
zV3`Y+uUT>%ofrI4dGrNJZr=$-RNjqmGr3HC1C**Y?c1c$x@@=lLtWWMS?YSNlbzZ|
zM%eM#KdsWMZ7#EkV!iJ8#6J}-gf`M_MfMph^%GU%v3~i#tevZYv9HXkYj?a;th~BN
zfK!dzavr3+v)hMDJpCAJ{)Nvv>%BDC>}hH^YuJ|`8tx_w^J?6Ub-2HvA+zapS^Lrz
z83ML<$5Tu}RH2u{*ac)XwJAu3bhTtd`PYxjvqt(GR-R7}fVgu9hOhP-a%JCy3|Bzs
zGl2b<8)7vdG$mmJv8MQ);4u>VJ^Aw>4-U@JG0C6m0+LFzI3`zsZ-cCm54uUt)-x=O
z9qDs{3p<+Jv*z%putCBgz97@nM3i1Hul<mC=C3%YYSjdnz*fg|Cq$|Dq2)@f2K8)-
zV`X0-QkxEjf5ai#V<Bm!M)%YP%*6Xwg!&@78v$=_9OgP)Bhi0IOz>iZmpZshC;{{0
z@<tWI;lztHc{r9((U+}0T;AP+Z=UzkV~&jX#2mKgwdz#;F!)qD@FJP8(nRlD3ze{Z
zy61+qw-M?rQ+@eWft7l#*<i!ZuwkUB^e(e7Epj|d!%IK#8BjHs-Nbn3>!eV+jDx+J
zk1HmXZrJBgG!{k>GEUqYST`mhuTksDEJV1}k?rY|w8Krs$78o#dur46^=nWnhqckm
z*&FoNnH1{PVcRp0JM7NZo@gee>lPY=WDDkq?Ga71o}Iog9a5>wCNOoX$y<Fz6YDp&
z-ikA@6v((Sq4eroRBI$?P>J8kzus`aYP&ECj)G9HdFB!9?!Wsh!gClA2W4cg2r2Pv
zw`~PY$5UrKV#~49l6Iud=3v(Di3K8WI!HcE1?0^)6(3sat2AXE(7R(elDW|}Dk!6a
z%2?$;R79zH2q&2OwPUk0y$PzTT6}NF{IQC%*4yJQ+a=(CbDAu2ne^Oh96yoXcX*U7
z9!G<1SOfC+rlVQMO)Bw<J}i2cF%1jJL-nRbPrnMHS6r%b#*b=}Y=EE-Y-Xdh-(u&J
z2cv*pdx%a=a`1KU`%Q9<C20Y-V<M;X=2bEyq~=zvbl|?y=oWcIv0V5F?qVINt2-w5
zv92`u`T^Y>8ALDmQaDXH7y?I{u!T@7M3VYHj!cfNGBpy{zOhn$c-{$}^06sBw&Uy=
z!MWh$1Cgzrak_m=E*q!`QWS{eY9I#m+|+HCg4k^OB$uMMd^uj*QMm1;I9Uwo)K6hY
z&y7Z(ohr$iWdh%?p5I>TKz?j4aWiP^bB){TVBC8VLwh3{u%o5wO3L$2cd%)#btQ@G
zRx;zhvN=nm&fFPpy12APFnl|Ds#^6hX%+DhzWI_O9p)VpFcm`kRaZuQAKOtUI#>)c
z#oJ^{L&)ij!Kg-IbAPkR&ST1MM&7>b<(FS1POL9XqrfYJ{^M4y$Nla{3uK3uNRuLz
z&DkT3R$X_2?uwcFyUts~w;`_&jXHRzf1q>FtyoyDK&EQMIeU2V<*Qpa{ce0l?12oQ
z=0G?XwDPdDCv1}|WG?!->Z>Z2Nm(xk{s&0)WJ3mDiqlLe6q=j~x6_T9y&y~5T4=>)
zFQ4aG?M#;5=Q(TVs^T5^^%1Xi?H=StwV_V>ik_W~n{SkzN{=HeUgD2Rf>24~42PfN
zuP87_QXk5dxZT)$U-?Oo&J{6-`9&mz^}U9A^!AovKAS88oP1;$C}iMyP5ba`!o-av
zI{F<PGsxxy?ZMT}`_J`ADn&Q2cADUiHC`OPGSgjG(k&wVx^sPX|9}l-5<VRuqjOv4
zZM(XOh$ifnQ>97He7^@So>6W6YH?Ej!^)?|lAbDhPTc7`Go4VMqz;0^5<oF=@y2sM
zp~Su8^G%WPhRxpGN2fOVqYzW4y(3H>o<SM71UO<0&PVTEIB$fltsZ?bcTCb#rO#*u
zXafR{1>$Ksl6T*j?<6k!GCSU)wpRcFOqMVBm_(&N3<xAQ=Q{PGGr}wx+bEdVi`9Mg
z04FdAx|`l1l+pcJ{!9Z|Ow~>Qz7#r11leteXV*q+qcEA|OO{OFOZfzoFSw66?uOAV
zfIhre>p4hN{?@GXsrfWVrDlyB25lwlAS*eM7)_Lrl*?h$T;&eUa<s$c7xrMz6PY7r
zjNjIN$J$wgF<gG_a1Yy9_bML*bF%rSdQacse3HFgHQhP=&AC!?C$F~cD~KOUWPM@0
z$dPJ1c-&gcwLZiL>{b*_ZJZIlyh{d>8+olAcJ}kPwez!`o}GK``0YzJPgV8{1}++S
zb;9U}B?HA6A}<jKg!x`7n|B>Db)03Yx(w@y6j!!At{m;6T+>W)oMg*f)0&}a=!YeN
zJyy!GCg#gh4frT+oztl%KpNqNVuhJX$mMZ81wXG-JKwUbv+P+PyRG23tCgqud?JN@
zW*^;0UKA!1xVjoQi-DY}oc`(-@5lK$Tqa=U=S^n!cy(BJAH=m7lsU}xvg!bt&chX|
zPCLYulXFM;CL)B%eyD+mZEkl8mG;W$XuZnX)u(yQ>htd-H;N2UH$t>S0<vo*Z^N(S
z3~J#h++WMLG$Y+eHn%s2LHDz;P+lb(>>P_I?)+95_PQ7<y3{du2>MM(_Hqkq;@jBV
z$lx8{y}4<2lMH~NwUe}=V;~xQqM6+c#o*}DCEy~ojDA<=C{M69?e}516SqKO+l#Y<
zgHZFz(c9MQt;xAr!UDTDJM;SDV{jqSlGFE;3$as<Ov|=tNdvEHdG%P6z2@ne`<(@e
zio`ysWLXy=bD-eW{)O+G)j-k25#D;Ye&^mTE?1q2W^1QbL(kKN-ROwp8@cCB)KiIT
zD(yl2lh~Z&h)2xLO1k1P8mmr6#8Z!RIicWkXd^$@u*Se8B5lW&f%ntICr4vxri9B+
z_-Tf-XJ5a@ew+{HTBViDnv;yiK4#Veq&;lK^SSX;jcWr?lHzDG1GwIE{vQ`$fPt_=
zP_5s)dCnzl$g?<0fr(+yr04Xz=50cxRmaub#*u`%ZN^>Fx}&K9asS(ATEXSq)hpi9
zpK*zs7g`U434-`JacTD4l>+0sO~1GPe*??w@}w2X8=FTzb0$PhLS3qL?QCjlYjr_{
z?0#q9NbtBv=2I?vud|$;@}&~RtBQsNm*_CkD*Ju%Cb`ZEvmX_`da1golL|M+mQtZ9
z6_+1?WQC{?fc3pbudP)^Fh#&;o2EA=`iYF}KI5&j7cEoh;nP4%1tO0*YJ;8g<EZn(
z!l?uYC;ubvxQ<?I5<p>pWuDSl)fCQ8#f541lt!I|)cx4)0dvwl`P66T#1!xZL1Owa
zK3Y9s*T^^94%F=EMHoTeC@!)4(d9l(U{ZPE1Nk_%CfOndw|etvLPM_`lSC#F-ZW*+
z36|lWXpOyha?{x*S?^{?8#K;f802^PP@a)Fk{(52>i2HJuMRRLsyvQpqREFtxn7i5
z3~_dHlUcnsU`dT1;VJ5qQl5=Q`9ND|O@Zm#52Mtoo7_DOaQz4Af|V!Cd9_W#C?Asx
z#|{|Y1{z=Acj84mi@L~G0=tRaPiSP%-&>UVUZ-E!qp0ajT-|S~D_M29Bag_N<%c;G
zIwGdNFMKu#?>{HXs4jNMe^g6^4c5`vNErS$-psr_kur>K!+rXa>2Q;nTXXG8q~`5A
zRxt)BM}44^X^uVIGtTurep)}6Cf=}mPSn>IZVGS4L2atEx=XBSC$I)I<U6=lJMX14
z3S08f)p<%KKEZBrsG&(;R@+2y%?Xp`mcCxm*BxEfRL2?jP^NpMRKD<HA-HGmalS>y
zIZtYhz#0(5l*2b}hT6`Qxz_p#BH~6!Z#B}8J*0yDsD{vC&3hq`9N;b?yjpC7&+AaX
zg`79pP06<aw&5nzQY^={-^TIX=zDU|xs~3{s!>u7yHe!3+4>@~-AVQNaJbDF2_!XM
zl;Y#Q;R+^tyV(NKZ$kTRDvrZEeWQaKr?va-wYGsDQq76m`#Su64JNkrhwjxXy!^Ma
z6H=_}m#$*I8jmsf(AZrUGACAx5$N=fi;5qx%<+V_I5MQ9^!|1g)<>Fl)KoSlWtc4J
zXd<rDzK+IdifKjrd1zqQi-X3gBs3n%!|Qb~Rqt6Qnt4cc!}rQzX**sjPR)dvz8QxL
zn`q#s&wgv+Y<i=e+RUgcld!Gc4;$!d%>F3AhvvMR3c9Cw`a4m&$}4QBzRQ_*pvGKs
z^MKNR>ycT*s0(6Z9msWg{#p_L<ACvAZo}l>Vw<7j`3i~qY}%~tK7yC0EPaBw?LG?T
zqQCj-T>U_GTh+cFaOpKchWqaWpY@NV$H^PY`9lTsOo)?$;d<7o6v!qBiXZ&44pnsD
zbZ5`CN;gHimBbZ}t}?&X2Hy@G4gwK0c**xqg({xr2v0oj1AcB=RlMTW<Uo6#kM-9r
zKrtmtt&UtK*tfRooL6cjZyL<41=5;RHW1Wuo#?WUSUwPrgRa4MOj|U*2~03XXNA{?
z2HpXhLQ)k~*E4A}#%*o7s9Tb9s4hRn@|Z|A9-;RiSaTAX^t*kxhH!Kz1JC+dS)`dM
zo%%}c*xP8A!nArHsbIy>-_y_PT-I6XoLPVC*FjLh;~ULrWgxVV>9*6?ZxgK6s@&^=
zDNs5mz7psAM8xdVQX7{A$v@}QzJy?hSlJ(@wn--57@!jRv83{|?VD9k?-WF_u{J5j
z#$#)&l^orNZGqk0zStCoL%TQMV`-|dA|H;V`@nyV^j3z}A`JjJZ}B|93Y0WItnMuC
zTeL^CY~d74{?tInNhdj8f0}vX*{5O5*N8R{qcQ1khDb`uUBd@HA*EDO_nS;np2S_W
z0yxOwx7tl`65=mbmvH>Z!0`=E_h-H~bs3PWUNjpISP3^vvS>awxG$?EuZMC#v8?Ls
z$z~n4VIL)3-W)mcKLHBEt?y#WuRZ1Kt_E0V4=%dj=z&TgXTK;{H}SBrntHuKTm??_
z2ML^ZzMI=4V07BB+6&nqzWS-&)V#{I3qTe?Xxc#?A6o}z^rus-^My|2Ur+QkIgk3a
zT?m6wz53Lf6}1x(B-@FPGn4dHR^mongONM_BC2KGU#GKqG$3UaAo5Kdh!ML!$cVkh
zJTvN_$~@w^Kge=l-|Sl8X6}3^Gz1ardr|MSrd(eS>2FII6N<7H2-j1?YH^In?{J4`
zuDqqKOXl=yLI;4q_I|e|5BxV<r3nMJ+_Y)ABC4rCNACU#%C4^A+^yhD-_wwEoTzf8
z?x6;m#}CzXD}2K!rT4HTkAya;vhk&V(AXEbVj&%7$C_&Zc){I>j!IwPz$6Nt17ZLA
zJ|=m+-?g3TtHcy^=U}iBEoridah6V#c6~sKbn&M^o(E4rUt0-OeB9R%q1il}W8OK~
zt?)efg7%ah{9i}OL!W~x305)uePKI!9U%1E<udbp4mjF7g@=R|lLMX@5|Qj1-_U-f
z5S^$=+_-BuNbsp6DIx6qQmeMo{_ZCa|1ecBeMe!*<~gUmlVJO93&+Iy|FQMeaZzpG
z+jOUN2uOEHOAM0IA<`i!-JJtShe%3?bW1l#N=r9GOApfh4)+?|@9+J5?jLiH=bXLv
zs=dzhti2&npk!EEwY0TX6347$j;&NAM@5%cq19@!>Bo!|&C)y<ki6Q=ulFSsu3RKQ
zU1FO0R4I`HK0x7x9!OMcN<?u|C%-1{%njpoKbVYdJye@P@jz1##LOIA)2hK}$_s-c
z>q~sC*Z%6mv{9GcQ|FLs;W5{fs}-uIbRuS)cf@*J)!MHPy|XTwm#Eonb@Ue)wic$G
zllaa!rgh?htV#A0z5G9tEsbsYd*FzkLp*nACn+mry;xXclBWIcNIkov#j}pPie0q<
z!>PQ0+Oc)-60+aui)VhHI!%v6Z8WJ+o?NC48m5<ST19<@aVuv-tq$z7G9Ry}u3|Tf
zFA(({034C}jUZJoYBuBB$QRHiq&n2@D+bl#2@{kdyT?s|Lp5oh+^`L8M*=oYX1MDv
zyipqt5%&k%c>T_*=l4PoAhG+2j!wQb`HzIvF~-p24k=&tu?1Ikzo`|dvEazwk#Jf2
z@pR|<d)mq|vgq^j+47Lp-gFkgK~>qH)|^gVz_I|rY?OA2I7P>&&PuTjD4X_zj^T<f
z+?<#Z>6`UW-F%mQ&+Au;%svQvAmFn!5Zs%D9Ljy;{sX{L0V~2*R6g8oCyR*c5cn?G
zaz@6V>WuVk#P;U=SX+dECB0%0_^;0~yZt!G7<TE*@-A*f4F$JDx8%7Os(Jb;if)Kk
zKTATE0}g!#5;1`-W&K`ay`cnStKy5=f`pgj)ryOb;pqMsQH2;8t^<O?g{LaX;HPbb
znAf-j-f<f=Oh!spa?Ep9O9uc;@JO4j*g&mylKn>PFtuY_G_Q?bsNx~tGSSp<^7^t`
zxDC3FuI^e@A7J%DZXxZ(-2S}<8(Y=u?>IZ(w(>WN2-W%KZ^v!KINc2vI27%VpVRpY
zgQOs5w*=yy!#jRA@vj%G__jRaljXy9V9OkLtnC#a)T5$P#h6ywRKrmbt7dy+{850-
zKTTVPJVkie)xF)u)rte9JStzZCgP}*y-&*gpo22R)%n3|H?-*3gq!6vXJa^YoJlex
zC!>OjGrkocz{9w??@4dfuI>vIN+_4*jJ8ob$eJyj%=h;6eQ#Y-&_@#)S(AvR{75i-
zwvs$F&o@UVLcV3-`HIqf*>8aTm5xOmTBnarXt48l?H55Jvo263oo1fwF6M?S7A4)x
za(iEQ{bVoaf^-PP7h<o?G^Z1nS@g3s{07ARud<s0k@|SQr1uTj4%4U`zKq%7v5bf~
zZH;Q`zl~xOX*7LelaHD@Pzj%OV{q;LBiA|$$;0?aNUv&}6MI3Uv2M4@zOAIG3E=47
zY9CDsa^a1HxNA5$_!@uES%-InNcG@T>)f$#g+_850bbo;y`Fi9j<&CJZ|R3)i811l
zEPz(BumdIShETwlFxY}*XR_8<7}As$V$1yPD$Ak<>d%NDwR>0BQ)w`uCd-SQ)`}bZ
zjaWa?U}S{p-<vbylP!mtIBu@pNo*MoW|+cx>92nz`n^#rlK}h26JCa%5u^<qvGeZR
zDzWq1ed}UYSyLj~-EqT1H_5aMWp{SSe!CuInC|Ixo^ON*slmq;7;JHT<ePZD{ZTI^
z>=47qCPhY^_I`ZCbFaYO75xN9J1Sv=Mk8Or>tk`(R5{pgG1{;;X^@uxg$DDdhxJ6T
z$5#GDQ>9fx2a3+c8plmfySieb9Q9f$vl(25C8W;n+F{nY9hHo0Exy0Sr`%EWG^CR8
zB~HR(eSbB)Y!)w2EhcXBNn8=%9dzpA1NS6f?7d|uZdNy6gT}WU`nkDJr0C}J`@U)*
zowbV-%^S5cM}~R*#jZKqA?8lA#h~nBne+~XMcpumbP|`wk~c<TmB%-4`kiK%ok=Ji
zJg+CN5?vP$lRoc0z@I*Om{0k`is^K}hxUhxXiVa@zhuLA5x!)=_bA({zCa`JZRFJB
zqg{Kgm-h|M=jzGcOm@DiFW$g#wp5xoW9tC9H(HXHCRDcc`9FnuS@=?*ow+sGsGhA3
zdI#0W*<a9l(XBOP#BL2Px2!Ks`>rf!IB99xOHZU(D*8@|&HI^fry0@W0wH}Lf1PQ9
z5vOG*SvPzLA$)yAfbjL?Ln?kdQ|sia)VND`i6^V=9pk(vteMEw!9qNr-K%8kRhdcJ
zi3t9lSBjwiveofTD>czwk|E8aZtGWxy@XI5ec$VmFr<R%H(h|73r3i%u9$jBpicDR
z^|Z52oLj#v_bt4UXKz{}hp1Q3;gdvT%Ix5k^p`qpZ^v``Z@BA-7Mw0^^iK|s+`V~t
zG_T4Rw@8fEp{AQ4^|3pbaSVaDLk9I)fS2fL@e9+n*?iydhfRHG71VNPuSi3g!kgpH
z>R!jQcHfR9WLjzS*V;1m>SyRi(Dmc6zjYvUV1JT$f1$Idf6ApdtM=X$YABznVx?w8
zIbS4-I^@+kwAFIf9m9q@>ajX@=bfm#x*=NaYAD?sqw9{fnKo-~pW_#6=vOu+ns35x
z<DK7y4s~P#SYXji?BajH>>f<O3hkg>gEaird%K3v#M=y?GtB4_j8msO-$}(6<&49Q
zw}Bd$U1}=fcyXI&ozE@^Ma&XTit&`C?NPJc5Husdau<_IY{{|o%)#1R?jDGdR(`Fb
z%=i{&3Fkg)Ux)GYO?FpIN?VGV&Y|kNql9519;~ecRXSCbuP2J{yOXI!FdMYGAgJ~n
zT*_?H8OYEp4st93ef!)byxl6!U9r7ENvr-4z<G8hhuO@;tE{`XH>)rg-X&#AJQ>;C
zJg6LPeDd^!>vIF~)b-#zu95%xGG6#eq6SbH!o!60F&GvcJyYMol1^2aR680^3;vYM
zl!7c#tW13nED&FqUf*&@a35df`J{L2-Y`bJ9)s=2x7$hUJwYqh<mgbN;}cv3UOF*9
z%AwNey*MMAWK)^~!PiWXlL>@3wA}{TeflmkuhU#iNe;L#KZ=ooXce2kt`UBC<+L&L
zL4uYbL4xegU$@J)Sv57G_66OE;|NnPoyZ7>s(n5+k(@V{M9R;n%&6)ly(;8eO(T`v
zrIJ@>D?tz(BFj%a#tKrzxPBunYZhm0pTn~m6i-rN7E*uPIn<rRQ$v{YR#1PP@I$#b
z)VbqJJxT!r-)UttxpGU`;LCa+x5z~%n2px2HEhlD1_e0~h&?wPkJsdid*;X0x94mv
z`fAIoI2)<TWgCg^ZLPcAfk*1+zSg*Hi{Ut^3bwKpJ{6M$$p_hWA?pBTWoVmYy$GrA
zSL+{fdTo>!taJ~sscxVh4sS+{WS^Fi84Gftcv1$2?;_cg<S&~c>M@<$e_xc>_%~vr
zIEWN(bn9RXGJD;qr)~B(Jd{_gOnx3heF>eT7cL)Jr5vvOal6%g@6tm1g7Qj_h#jvE
z&*D7z=Ypf-Ib@O88@P=b%s14DIF~b2%3fyLwl{7oCm8V{y_6^Y5Rgz)zIsQ1nW<o(
z=s;uRu_`(^G_Aw3cqi42d;daE&k0sfkmX3qXl(D=E;iv?(k@wNwIco+W);c@$1TSh
zL3}X2Df9T@6^O{~>b=0tW`|n+>6J6#b0ab`)<$UZVP90_ej^#4v1kzpc7&OYvCU_@
z`qXXPT<iVyMnBRoHk86qn}?^ytteD{d=2Ra!tCM3XqWhy-ml|hCNfYKgq=QYm0%L4
z>Q<qgOPreG(MawRrmB{8P%%slTPdDu&eJ#wm;R8NigrF?CxLcOKvxad$Xln|?e4a+
zpi+V+y}q~9=wh<nc#UhHNWImhA!;8=`oM<fmv`NMXnw~zEVjxr*y3{dE_T{w+C8t{
zQUEl-9p-6G<*FUX;y%k3-rRM#FwGh>kkyhL4q{o8a+Z&DAPujl3lH&eNbMhhY1qQ4
zWN##x+#d&?>EyhJ_KP6+3G?;h3FWBa`i66F>lj*fAjR4*+6*6jgCM#|ZhW#%Jt<n7
zTSx<nb0}xN>)3FcE-z+E6v_IWQ3ZkywvSKcjl`D?zG4COJBfAO?xNT&ej&X%>omMc
zOqs49ev?mi`+b)4Q~Iwg)EEw!PHJ;e-_0)2aUYEd?s4U5#cY_3O>wyGkg~aW{fxU%
zT}UqMv=%~x%gS2zc?djv);a(=y{uZ0`qllnX>9)4Sv{5}m{1%}sKJ8XCs@TI?ohbU
zpVy9|Pi8hHyu0~=Tonnz2iO;df-4c0zAl_2TE<w(EjKt1?GNq!@Li!<t+S~iN)3-5
z#*X?t;ZRP;_D$j<LF6(_4&R-D@oRna5Bm&N+K+Pt?{tg1-jm=n;nxB4kR_TSRFBF*
z<@|L~hdMuJ&<SMswlm9{H}wM9EW43xH0v{o<!?_3EXFX^E!o0P%&7Ifafnu$DmTBE
z+b>1;toiSmdYyhNcJrDgqaLn@jeW@+D20GI_3@WhUP}2TtYjI@((s4cG2(Re$zQHe
zNyT#pqX|o4_ihAf`xfkd>_7SNGC5iMC1prBR(jmKq@I@G>he0ZfP|Hn(q2z>PyQfR
zYu^D`<4c_4IRkv`@7)rb(^`zh3FZB%=(_7+EQGWX^S5xu7}(fdCP&=Rw&&BFUEE3~
zpUB0CB3LoRbR=J!nh`3VoSjzK)8HobLH27(CNg-$QeB_(@h~?NFxBphs^!$15``j*
zBnRt{^ovCu6blBTqe=J%RtOCK?!5l`(4MGq#CcpsNx`b>b%}MZj(CI(*}5~Di@$QW
z)Aehs^U5;{HtO|md)taUbWG7rnTO_yG&;ah%`uwTC)jJMIId6sw8Vb^DAGY15QJKS
zHQM};LI!Xzag>{DhER%!isb0wZOM-0{k|E$gp~iQYlaN|h~h~x5A7rr0!ZS$TgTtO
z6Ij7NYR~*<ABYn-q;XSMK6T@LydP^=a1EB}qsH97eGd>!7xEvLJ)9wBSx*W3|Gwn|
zKpcx*%_ksmw_NO|SzkijTl3ZLFCyR%NN2cU<8@-`e>%V(_88ba!>TfQ{^a;4*7cqK
z+oH0a1c3^r-_JomVTW{i*?jJB{(I%uA+f+=><TUH`@T-;n{x86#%1F3-sd?R@gmNw
zig|yVyMb6(nIm8<fHD66&I17Bx7~$IePc{(*f0EWfKzF)e$Z*~y#&|aJ4dM=`oOUl
z+hu<BBmLPn12D!3Sv-MW^}SN<rU|oN;Hz%Fqumn=mUPL{@cb<+uz(U`DCNmCE42Sr
zmJ<iCmZwXko)CFjK{*gyo3R|UIRrV@WvP3yef3Xc)D2FiNxiRR#2>2ZUlTll>+k)x
zXE>-K{fvY6R*)koN5A~k)Ua*smX&+7c@1z5X%Anz^=>ErKjL>`hp>2)A61!lKzebn
zL$JfNapy0$q;y_ry!|8nl9->3iie_pRqkJn{3`&Y%eAyL<o*;^y56RUGEh5TQEGf@
z1n{i+_}wSi-&2Kjd5>}mHhX<~@%zee?TMp9kFRt}(_e5H*51QHPD<T9Ovv7k(ubi{
zov4mM|I;`hqW932SO+;F<hM+}+Xs<|fHSVk5;xX$U!8Vv_qI|45~lTn_g4?!Gy9r~
z|7|;3d2qXhz)vFoM+8ntZ+I8m75C~L*fSTewwN}@WQcgC%28mFah&1#lchVV(Xoj_
zuOvQpn5jb_OzY(~){4G}-_7vKG86}3d&fAQ$RWz#GW|Kc_y-#Bf-0B;Jp2Mny;9cx
zy~=5Elai1t*{Bt)zy&kEO7SSNBRayoHAwtT+ICj^_!O^(!P%IZhp!R|QYwwnuZ<0?
z(6Ng)by7B`nvVZFdkSC$)=UL-5;tl=Dg2iz;ItlWS!?65#P(hHCH<UxLRKH}78@mO
zFyNn5O7RkDR9+^~3AgywU&Z`uQQeoB4Mg?VHU`}&HTANr&`Tbugo1q4-Mf@l?;K5R
z{+b;W3)Lol92)fEk8A$=k(r1MVXT2iYiTbpn%&!b$%FNf4ox&>b$-hXOc#aZaiJV?
z4b<P4ek<&U9*p6w_iiab_vwcOgc2?I1v{}HyW;2cS!VsDe>%)yC?O`Kkc)U^)qmwu
zmdPwcuHR(^HEc~Fr27h2_y~d14#mv_W|@DF1YCMZy|(-AwJE<=l|S;I9jKMIx$diI
z;^G!$yIC;K{tXep1U4jR6zr<-{7)059~=w?c+Rr@Jpl}5ARTo9<weFFoDvcy6j{!n
zr^P9uwSuG!%PWWfYVTLjD8t~Rf{XQ`*;+ntvRftX;7bJBKWZb!>VD|$wcq+;{=ZLx
zUV?VZfke;!d~apZTQ`XTB^^~?bh7RLweLUstFmLD7C(y{m4A`{KMyMa#BD3@@Sh3N
zBDmeygV=ntunvYp=l|TNEDJG^@_daI;r|8+)Vp_3o5S#W?h@VK+eE-UB<=C)PcZ-9
zb;1aVPfs=1s>(kv`}apnSbL)W>V1_fot;|T^?kcYeU@9zE?&Hj*yo5Vs+qi?hCI_;
zl?Ep&PSM*?4f8jw=Q3{PVYw4(oy8$E%E?Ke<F#4ibo$Zb)MMVi+kApzYGGb)cUNw<
zImrLqag!8(c9@@BkIiWFlUe$PkR!&45ax162sXf`OmIJ4XanH3J7v?|{!PUX1~(H5
zo*n@GteuOY858mYMd{Bql=@`9Z*V0#$P2C++*o)0Ozlxmp<q|aTx$5qf8W+m-yXkW
z5@^W%`@*kRC_DpSAGQY~17yMk7xLtRYQ=tUJ5voWNU0x2`{(8YMref2Vwr^fzf$~r
z-3FLS%Foh|Dbgq8x(!pJjp(%VdXeg_?=MkNlrpD~+2v(Qo2W^#{=Ds<X#gEiLaONp
z5@9g~q3D6&5G06K5FxSA(G;uxniZ%KMu+I2aXR67&Oh`1E%t&aXjQ`C#_h5r$*>ij
z1O^$o{dlCQbB|x@_Z{>~rVx1t<hsND$nozxEj|HUYE$ty`mo&%D4&K&hf|K_fWv<)
z7DWj_1<@@r#=#@SKK!(UfsVnKD7ibBLRW%W$;xWKyG09p(Xp|H#qe7}M34b3d(v9|
zS3ybb?@@nRfJ1SB#p=LDXCOSPU$h8<O+&7s^-tzM@`4ax<YHG52tKKP{?Al(!~rEY
zWc*L~JYJ`dme#>oPQyHV#>y$G5b#Il*J)7dLF#EN+IjzZl3s})hLWW}TLKVGHU)57
zZuRRU8V0y+5LV&+9#u!rufr~}tt*w{Kb8Saz-*1cDheYvUr^fZCkw`ZdJeRn_j^;C
z>R~}D_~+IF1?aq2g$mYZ694f-rA$E>&oihTNobK<>Ws+}BJkaHdrovhKHgOBUjd;Y
zp4g23+q?dCYm^Bdh?Z%D^%Q{Fa9<Bw2>SXBDVl3_nWBP!Pc|RhfPKN76%SG7KV#Ov
zZ!d3y5etT4YeUm%gEY;}{O$!{RdoLfM?nQ!zt2-g0iynGtxSL#62vRj3ckqyR>m(`
z@UZ&^<Hoa7`JQF$Z@@F_V+bD0NocL{Kk_3+=rT0*w|23=h5GjmfJmgcI4Ij@Xu%V#
zOo;gPurp1GKrnFw#a`U+JJoSP{dVfjMX5M{wD>S}kRXhN1i+22!oA9QkV*<BG!zg^
zJH=_E{5QH6;vhy|#wAz$A0yl0z%;qSii$!ke0$Zt+TFf0i59pF$E5gI*OD-3K_rD0
z5x<4_C9c{-^f_+9cwa%~D|{2Gu|)Jb#lw1v?&kK|<j^YR&)xO8P~)HLH%zuZ|54t9
z8G*z&e4hA7sIaXUUj+hzu)sLn_W60O9+toQ1j^un`oS_A#zv2n_wbVx>2v;oxpEw!
zUIUtp1l8+~A9e*}#x3N}n6HB#Tsnwy{+DC?jz*9)s0ZC(n3NyPqVhSUd~*nhDFTOp
zX6Hm3{YY1@KR!JDggPbbufN&p0l!wiyFi3{#ya4>)gCi#2=s^H2R+4sg`^&vMZY~O
zgs+xICTpX=UD8en63@Da$qtf#gwIrg4^!Nra6WPh6!}i>iU{{g)ac$Xosi3rG>=)K
zb6Sec{F-SdA`}y0<$&%DMU#eS-;o}+N^kgCPK*|)o)%?{{Y`|47cq)#p_XcJJX90X
zm*V@yMOR!}R%tO8bH|cGVAXOz-b|&KLiiWQ{F+4qeYn<}Cs>$+>jZ!O1yJ*lPivH`
zsQzdgWDLWrurfZ&X5_K+R+?kqv=ym-{>H9tApgVlzTUcT6G4U#sxd37L^!A1q2ZG0
zXWCN9qYz_pXO>Q6R;BLo{O32XN5q*0JqYLD^cc?f8;gG~>8LJCXJwaF=#T_mIUAf=
zftK$P<Y+I!`gbspMFx%BMl}uok7oQ})Y#e$+$Kq?5dRA01(WCqelw#%P0AXi|HEl8
zoHz)?)0nv*X_zWljm+?Z#A0jf7-{KpnQD&nSnn=qJ7gY7Jc3<t@8kPLIu=pG0!Cui
zh1M{s^{(g-TnElhw}xa0T#nxgn+`uKWFVyb5MS&t6?f>mLX-QVE!YRwL})*fXOa<;
z$0z%ThJV{L)9*PF?#j5jI0fmCr`P<ogGA;eNCe{ryP>tZVjR{xR3=(@2WZdB6F5-n
zgvXDDEz^JlDKU*r1zL?Jbd%H-&P=1Z;XGJ(dsXe}LTG{N<1_}mf5vN1hYDCZGuBY}
zla&@;gI1^BC$$z6T4!iS&~(n%7rvZSoM)qlGc5JKiq0=?eSW5N`jDVcw%apB0Wp`b
zQ3&XMCIfzu#kVK2*avM7_$M5c+Or_<$8dN10J#L%Kq<Mhdnzd;qI{Lu?4i5CGd%S$
z$=6}+3|3yY&%?fBs`f0h!CMY2TVbp^Vb%@mQHY2;bjdW-d}iMjqgngXzZ|gm{LAV_
zuo`P0N14i;z5P@qrB{oCfaHlcz-G5YNlvGNsG)Hykl0lzO68EJ;#G>z9pRX|1^F9~
z5hFILgX7M6w@!umM2xj@cs8Q~k7n8PY_Q}uCN;~TTu&VPMn?f=rqqlRwaJ`jVcDUS
zpg6aKfC@(9E<>RU?aF#L<RnE%(t(T`y5K_c;S+KM38I^u#z4cPbwtSsW{^nF=wvSm
zvi9-<Gkk<YhxGSemLoR3QeCdLCLr^uAhEGro?4{m(}$E8JgB%EpaC%`vZoPx@kzan
z5=zwBv`}=M>Y#Bk0QiHn6EB-Un{2#7Q;#|8I;eETDCT7TDIq&p)9Ji1kV>2P?R@|C
zOzo!Q;9><_e2qry#gDgM=oFwS+D-E<ih~Y2>JA*1#xseTKpt?j7mB{^Ld0iv7mC|=
zoIG+U6FvZYMs%a#9?DzJ(P|@+KzXpl_;GIqw+ZQ$7fDn_v5UBE>epJ$?@386Xz9X0
zLhu56b-;qU&boqCYFtPS&TDVYD|3I)Gb-%KJZRQU69dalQ?JY00i@lM0Xo}!?L_9K
zYGfo##No6mg~Q5TzjfnGO`6t_l2XS<bxWo{B+IK~Mdd%_LHcmO!HS@pJNHY}!_5n~
zPTK7_aGMB?_x(@bW$BJ1WbBcbaQ$rh4gP*FZU)AfcOTMgfdDY0O-cZ2<cwvs`iZCc
zya;jZHSBD+1AFss$UC`OP5e@)Bp{J@0K3?1Y0u#{>Q?sl2XSLbxNLJ>$KKdHiu-^>
z4krZ!Q|6fnpskR@F%Pf8Tcds{C>W0B{Bn~ZmY`mP&Iu(r`XhU&*!(Cl6%G2;gtDH*
z99Rwjzsnl?lb&!uJ=@m=8p^!<Q`Pt1o+~~(eNV@36rF26Bx&=J6zQC#iqw*B+4j@!
zdg1q<?%_rsCg{+W)4I*Or4^stR*O#TjBqrBkG<wHw84FLUY~;SwOkk0bQo^QOBEV=
zX99Y25L(Y$ZK;-Q1^-bpWx+CFZ^qYw!+=Daoji2R6NwTybzdQFCw5{_?vG()?)A}5
zHv<v2%xdDZj++Jzxuf4DMTvXPBI9Ay6D)*`J~S{_CkPEHe3sL|XiJl2U+Cpjv4QBb
zMkCX6ekv%3NiJM6`V&#3(X%A&!g5>1>K}XI_)$KpEqZ}Boe~9ma8EC-B`F<sGFfN#
zk=xAjjONUuDP49gtZpu`18b(S<DAbWIZ&bx#da39-I#E|B+v0WS*+nHDS1X~a~oTK
z+-jJ0J)MgvX?7<xxWigmJyUbrr5|+}6O^aWvB<O`LGyKd=0F}M*>9p7o9JTDJ>Toc
zI(`(zh-JfX`&EN_Ps@Lz9D}N;DkMn%<qCs67nZB@M2*@s3G@}GE?(k-kPj&#H_AoN
z)pJr7Z5Yd`zHJp9hp|-LKN__2ftI=tU%9DTLwiU<6CeCOK9PW{lOT@!n(c`6!|Mf%
zfVR3%c;>mcZWF~hIC`w#ej~L5_DcFX7hM-a8rsp7Ogx*Wo%v@c?HaYxfd2|)qe3qO
z060f$_gQH@vbKz?He#e09_An+0aaF_J0FAUzIo#vjrBtCH{@I|H`9~11~ey2*Wc4!
zmPF<=&vDMF&PMgt$=ML*AZL9#T@BuWGYZL5>0r{e{qbVe3Z>&1x1yh2Uw2*{0EB-Y
zbAE7E!MI@xjz3&}x`3AXoDxB+JlH|*>R^%x`W$MeltJRCqvZk@aEN^i$}jOzS3f$8
zSb|c)@QQxvB#G*_R_5siTui|xcNLini{Cv+y*27Y09|eYkBdm!%oO>tmgX+RsJYqd
z9#u{j3Vt2n<SMff+)O`I)Q}VURav;Ec&H2V#Bu}kvFn)(XC%WWb!px}k=wY9diAMi
z=DGEJb?VZNy#ny&NgP#FQ=1B+6?u8QL2N163@aE9rI-WqO$|B>)H;4&aoOp!Wqeqp
zinp0H5=RDd8(B$HDqD*`EiJ*&e(nP4r^M3Qbm3jGT&J98TYKB%L_RWA^4{NDdT$B&
z?AZP1f6QUIH=DIZFcb!F;2r82PC83n2x0k`)!9h)vzoitHsnyI3NrFEWtQ@vH{N2u
zi`HTOIM0DGX1UAg3H|mc<WiWl(!7!|89x}`Thh=$90Jv=(dJD!tsJVC!<4rmG~d>`
zd@OH<8B9Z+Si9FUe_Jp0XUVk4fbume_MQ%;%7%j10RZ3{+XgR)Q3=?@boQLgbI-@{
zzRhH$1$YL)exDgYy~ZGgk!uf><~O_Wja`xocCogzRhQ*_)AVGPp|U-7zY$Qc>|CkR
zEMiJu4AV<ZWm|Nq2(DUPX&WT4MBHyjqS*jm@j+P&1lp;A7gNuS6{H4}KA}l()l8ki
zJA3C;Rzm9Kf_Rvx2jZ@56s~JF#x3~%2aRslrKFC|nEmg#YXUf&GOFQ1vvT1h!(-C0
zB0~%Fu?62EZ@z!uu2^%`$i82}N?7LfBUGEwEph^rLrrVk%XY;K{nGQ2a<6oe(18oK
za3GQDtr4f`o{Xf`^t%#WvQQ|tp-*LXj(ddc4%8L48O}D4&1uc&WDs=aztv5R7Q~6P
zyxsZuP?Xv=;l=g9n&Y%ohO4hbQbCI7p07~?&pj$qaBuLBuZ+H%?2QP+fiwp!jwEaq
zYS(e=M9wKmzro&ICE#nsz^=?ASW7K&DyuI=4+w;q_lxbi^iqnFj+`QVj)PqZ*<~V6
zgjvzPdiLBkG>#K6r~knSJ&y|Z`On^GY}3t8S}4#j8(W`@eI3Ap`XZuA2C29$0GT!v
zLE_b-W2?~>4n};9m~2~L)`$rmOk6Z?g8N?Dkm?G5VuQ&_NBW^OcWo;nc>+78{uFjj
zeC_nrGw?XKvWA<SIt*8wPpn7;Rlc7==fG<;of>}hbiJQAe74&hD6zqDwyg3mf+#3i
z;jk<7KeSR18;NN6V>^1q@aJc+jx<`gDQJK35n?w*vs>|ZMiCWlZ*=y{xRcQ=wtKu{
zo*_>ZdW)@wJmjtVXuof-Upe9d_xva>Wbd<Mw4gE#cx(4Dq~c7tvw4G}F{Q?aNiFk*
zjM&xr4{*W?H~@F{F?97v+uEF197|Ue!}wWiSd|VhzOa}D8`vc6h}sHgCFNDa+n$i&
z`k&m4C(JECzGYISC=4cW1rOjq_li@o7JngE*6hY8_4=;s6q6YJGN8=ie2<;J20!;;
z&g@2Mcz|f8K93Mg9Ax97;-sxz*#1UT*r7Xs^#xDekfzTX;TJ9j74hpO@Gd1K$TOx<
zI}OsZR;SV3B2{C%WaVM@;UrOFyXkBtdw=Ciyj!j4q4_vAbSB?E*3SW#1jk86Rs>pk
zm~<}{5~Sz|IL_{IMIt2EGSvR>e*p{#I<WLlkzWJ=ti#<;-_)&47R1Dn=r}za%L$1G
zL1Ht}G1zQNn!mf7Bj%071m0GN<5OSvoY=M})jZQD$P$JJqU#&9vOwg*lM{~5R76zF
zqCY7vf@$W_vCOXpBX1S~DoIZa2$nlz0(1B%VfI~G#SaYlDaZrKWOndgIBUv5mJ~yv
z=`FjhJKv2R+N-y>*sV@%3dCJq;o%rmvOeN3Khcd(v56O@oaUrK*?iLeqFOnW_Jh{2
zt4W=LL3RDC)<<^%Cz>Jr>A7~Z=`%x->B$Crl*01nh`0d&cwJd7R-mU>QGxr5C*s)T
z;&Odp`EoL(0c?J92U?6W7g5)gEh#EcY_4H-Os}g2D_SS#gk~R+>Zh`z!S1fxWxzun
zY(Z_kNdI+OcI~Ke<Ms~s%X7sn4gK<qB2u}-u^t}3a?7!8muOOGj}xc_=1Po~w_>10
zS74WTrZSZ!f8C$26Nqm}`kAYwZmQU4LRN<7$RWYTcPGcM20iv^81(B2uLJw+LYh~W
zz3-`5^&4PfIB9MU6<>{8tSpkM>JvuK9xo@T<b{ChbIL)jE7JP4B=57P;^%ozwXd`5
zG%i~PMW3d`#`#ZycZvKPDj{Wx6occ9F5Fj~n?VNkIIlI<hS#H&u+b{*YH)&03LSHk
zOCeEVz0={nStEv-=Dox3EHTRPGXx@TjyGp{EP?ou13bt0=O^OqoF9ZdaV1I7BwWjL
zz@&|E%DEz}SyoRopMT90_7D7)5`#NSPI8Ub2_BZWI|9>5FOCzB>!C{R-557nOLPTM
ziEJt_R8^A)p`H9wG&}ENn3u^T4vXE;>o;vJEdT*%8ASe{KM^HyREwxwV@jTzzQ6F;
zRWSC9>{@sw#bM+VREwIS)YWA|VL6A<eCp);*=axg8D_Pp{St=Nf)BAZom}U-tr2#<
zAn#WP7aX(@dGW6E73t*XDCg7{hVAV>KPJ%XlM;cYpMsU$_~DK^<8g-HS{n07ave*Y
zrwd^(<Uxli?sxa>^V0{iQR)!|)yk-;U$nZgP`vTgSMhEiEsRaY&y~$xEGVPs=KqaT
z0HE`6AVAeND-j~ZgZTmg!DkK{fD$-1L063T5^a<q3||INDVZ;%N?*VG5RAX%+j*3s
zC=(1La9vzXXd6xu?~CODN2)3`p`t#SPlu2xV*2^C1h8ZivkCVDJ2q&^1SN0xIBCHA
z4M;?Rm;L|}vcuG))v|ma+lV9fA}zspTSOO|ptt<-h=Sj<9nH`P3ByDc0}a~KtU;Pn
z!7{bvp{`3UfkfjtF|8a#4Z^^rGpCKBkj&FE*Tb&n?r$@-yHwPB7BFphSsGt_P&^2_
zsiu@&eX^u)O3<Hd4vUSAJ*}r7sv)N|jgXkg9Db)Y<u0((Ib2zrg<6@_@ghV&ImntM
zHfC{<0QRMRZ$g38sFP*&il%iib643sFV(ZR{3>;}k}3&wS`cd$;Dv_#fc_lCD~Jw8
z>8eJb|86<?l36zcXl?n%fMgw0urV@B)L4VwpJltto5NUvPoZQf(w2vI%`%36G5@&-
z`lqN0d#dj(5#-5pM6dQ4?v51=ej0<??kA(RL+SkDnV^r_<$NCDLwq%U!QWn+6IrGa
z`v>GhFe0T{m||g_V8|Ed7}s@Qr#Cp&o!ia4mz!>GHipciP*!TpbJ#@<`~uNl#RJC@
z7Mo!c@ttXRr|%~=PPGmj6KB_K{`0yS^2#v})*k8<@=S&~UC75kQT$rAP)v}-6^dvV
zAqDc<-n2URz`t-~0SfeG$G7J$!4!AJG;Rw|7Rtg}Q=5m#ec>b{pfExawNu)5rr?*{
z#4tX1y3yy}{KXaML0ym!y%$H_YoiZUG8@GkA5VAguh#qXh8@`^5B1S!SA1#M=p;Th
znRw1;KQ$S0`!@#EmGab9YJBHNpZ!y~PaptS(Yg?%sB-1Gc)YMf{pQ&7=J<jjSXxgs
zqR;)JK;u*?Fj^Sq<vQv46zl?|9Q&Q8>`Wn;ul;6mZzTkyuh9cMUGTA($x&e!bUzgs
zs3#{Hm72rvaQLlkMpe-28Q15KI9k|4Gl~VIvwl3#djdZ^rfR9{Gx#^<2wJrh369Z^
zaE@*G9ll#MzJF>$1xgB-B})1JM51Ns`!1dUkb=VzpWFk!RHH(H_=>~4PmRpDh<L5L
z1TQ3F7McQ%LlLnk%1-qOpBG{Mz0W-0LgWtGYQ6`+XN&U}mCAm=*|P}}#vjkh8G54u
zYZaLHjBuuxK%On*<=Fw6m-opNDE&YdS#dc<TGZ(U<Zs^~6iNHWz|^YgkY60G0ocHj
z=y3wqfmHT(iA|qVAMqT1O-MR7F3&%zjD2W5$8tao%QffSpCMZGh!%hFXzvAyY_#K>
zHB1TtVz)yf>kZFCcokLPyv_K3)v^Ici00ZL+mHOniy?X-1|GJ;LOjO7k-Ix23}$r=
zT2axO|NOVHAO(kxiXVTc?$0j{Du1x5e=ub^T7wN4Q0sLy(2k7_6oBdHy7ZPJwGR2O
zp{al#HeBio@qdj2dC-mkxa^zg7!a-l+9@AS144)l7?_FNg-4*Y9V`SlT?A1&{)c(7
zWBN@Ky~`JJp#G4A#ATk%vPJf1yi7lB2p}J(tz)Y2@$ry06cl6G4=6ksDib4cx*U^P
z53NLR2vAS5fRIZ0=kW?U2%qpD0PaBve9`UQ;q4bk?aAD89Cen6pY!^m9rm#g9%-@u
z69ieaap~aK{o^7J<zVV>mS}$h0Ubts7`!=Dv$61qg|d@<2!w%w;a9)OD#&9>?eK8o
zT5*AJncBR7r%2~uDAN%H;rmpe9YOtID$E~g3z#7cLOJuRTCqPLKM&%*&VW!w0AuP3
zo3vU*TU$^kCNP+M>c5__4-fH#Yi&QM$M&@21m0c)W2k^RQZ=xLOHVI;PyyDFw;qAU
zQ1DJLWVEpt^DlqL=08pXb+IzTz^RmZhLR-ru69SaI_U)o*>t&OkGqc?HHv-;vg++s
zvcqFCY=)q|vo7*BfYmLq!;YZ2Aoa<gSv|O$0_et_f)Ykrc3fef%@_Jj8C($N^nYgH
z2O|K{+;^Z|;$t)87MMUtqds%xDDr8Hy@RHW)D_o-tp7L&6g(Ov3U~o;u^}S@tG0Zo
z9ux}HVi^5$sc*Sa&qt5)I@GW4$HkO(yJb0aV>P|onWn+EN~Zl9<92f7->Md+KK+5w
zSmNG@coZr0pc}|?hY~@C?sZk@!ir7|6;1$a)C)sKHfQwM@R@$F5aYS}b&5T<Kqdek
z$=DPILVD3DynAte`VhsQ2jBl^<|bGLszCxJFaKk8rOX|885uv`B`7kFJ_x{kvDOZR
zg#gUAY6h5phG;i|ujgDaVPm0_eEcxo6M9CNubsf5l$wAtRm7wh1a2F60ITCipE-Uo
zc(@RV%im5g^1lkF1}-)M^D__>(#CjZits8-(MOx=YEwP`jQIcx`avbWc?}hr|F^Jt
z2$T4Spd9=}h1hfow2NV+d65DH%NUsAJbLsCgn~I%_%D4^qz~HDq+mw7SVf(0)%RAz
z_&B|GUpBK^5%^cK%xsvO{V&-Lf{#{(2SJhm9s=O=HrTeCY@z!E?FW=ROYFZPnF*kI
z;PhxHz92u2Wu;6s7+xEwDl^#It67Av0sellh=fRNuvEp5CiPm*kExSsv#08@M*x67
zk#KRLMg(E^7R){0Kmzj}_Gm%OK1af%CzUckLfo>PTAJs-!90UK)2cg+>9ZM8`?52r
zeJr>A$M-ph$Eimt69q1bHWx){_Akx;pfD&1;R4FIhwxfZCqS@5nxBv-A<|alBd<}i
zhVbHg))RYw88e7PHq>@kT;P-Oc6I$(g{%K><)f6D3|G(DoSZp}{y1zGBn@`oWXclE
z1Ke6X0A7L>Hcw$!Y#g84W&g2g<{6TmiQ9eyKIz{z0wQdxHsDqG69Tgr(U6Lv#uA7~
zUM<w~<gxl+2S5_+q~9RxW6gqo!q6%9n=5m2TIJ7`lY>`+0RsuOy&8|^2mo3<F-VTH
z@HhQSvplRonn3v!zf6jDdaS!>Unojz6xbD3&r5!eKVyQJADRZ3)x*{vGwA?poO&1Z
zBz_#XWBK`*+kIPr3<|i9>VL;1et?4!MrUart0z?tbYX8WK@Uo?waRx`_6Armj%Ee?
zuNwqC7&8bo%L3tZ$zY~ApRn&-h9=ciwhPe?YC^J48I_V9v7*#QhwQEGnR#lAsYc+X
zvU`&6XonN#9U7agx0+DlVn(Hunz8Tk6X9fC8Ih}4iMAb%L>`6POSQ&~fO<cQE|Wzs
zx>;0zcAnCLRdl@1Z><1aDoj^v=A8%>d^3DlWO(p<OZ)6tdP(@`_wf99<i6%+4~6Oj
z=UCjkR-=;He;Cb};=Iw)Gbt7)xNzlDMyy^_scJ2IxGV~8`*aSr$gq20EIEqrHGL7{
zJ)&hDqoitw>bqOsTK8^Nw6>f3@_@NB+u|1T+lP?Y34NY>2tFioKQUnV%=M&e{lEx;
zh>s(d+0&^F(Fc>%NP!0PyxfLb{ohvI*z=2CZUwm7KNWe^dD3HveCNg@O;m*xwY8QL
zhVUldlySF7(TG&FN2r(sgO$w;(DJ3{?YII(-UeA$br}z0QCmA5ZfFDK>oq@BSHA^C
zE*%Yx1R+(VTxfOx^#TM7N^^x$RNSw0I9PP5XiL3~Z}H&Y6^<+V-3tKAW@4Mf4QUc{
z&|AB@Zj<=&WSs?70yUAnsE?Yl7taN@2#-irK20@nB1z*SmsDI&VyV;8aOR_@uN6u4
zQ}+hLg`aJM{D3=icfggW&OLEK=-cTs;nQ;HJLV$Y>EIlD9!TkvwjXBS3{l82l1`tb
z<dQBSUnL^h4GoT`uS<HC<7ddfkf7qG_Q+;T_LjkkL`=ZRq!_H1oVm5nzVp&r+wa{0
zfwpCbd4A6EE*bUueZT_k*ID;YH9W7dC5Pm{c`~Da<L~vycJuW^450q5j73?0N+rS}
zj#vwKODL3E>4lxfbH;}?`+%a|p#Fu9$#4uLfno!f&%7e{+9}|8n=moq(mKm*6*PL4
z9WZ8J*<ZBT<8Uzkq#2ZXPTu5&HouhoKBO;{klRM!jgO<Uz*e2DaC^yp3Vp6l=tZxV
zm#e7F&fXbZvlXi^j|-v?ELdt->&9|SR%KCnO}IUJO79;gFY`4}DB~7daH=FOvyRa_
zH12F&&`{Zb%WR7%U($YbHyzL2%_CMo$-25<=Ron5?<%`cxTwBJ8Y@Sl#r#p&SiWV<
zcw67?`dUr^rCLN|)WHp25f@EkHD`}e+`ZgFGOfg2mD$Ef&(mC?n7cro%j2I%=6u;1
z`4{818}$c@J>4iT1~_Dk;BSjK_cJPbP0XY9y{y?;;o<tBZM~N%Z7*8A>2IEO%qjXE
zjLdScg-bQIq7SqRMqx7nPd?q&m_u<{!^JZU^}mXVlCb}tYw|q_;m7zep$>_;vk~9N
z4-Zrr+IR(FscGB|i?`+c=`^4D5Y3aJjFXhZ46c~fo_b$^x!7W~@O!^At>W=XX<F2=
z!ELnl<7$PS-6BgV*X3{48vyTn^F#Yn!u_FM2cwx~J2(9#p|Qbo%ngBp5u%JBE8RJ=
z{nW|A$iZoVhc|sWQ%$*p4w^cz$hPq7ot=GL^@fGbyXghQZ0p-gnWibDpO!Q4BF-2#
zsIKgpj8tp9RnIeL`|=_=Pl^>da$AEMJx6+^nh!&-yp3X_j3cn7Up5eMk#1h+0)+5u
zSfJ$FuFlZ`j)%-24t<Bb%lY-^Yp-eylQzGBg?^X{svXA(PMpWPSP|1!=6nh+4aoI*
z!)Z!^fSr3Q5%*5<>XJITW0Tv!eDo;jXRA@E$(i!<i`7hzn}m$;sVZjeP5azr-zY|r
zHty+Ju(yth_S|jZ3!8;n3$mbdprGM?L*s6C#(+il0;hIW_!W1#K#x31{YSr0{eM;<
zC3qMDxflA;oGf$RY8KZ!_e&h_<!@)4#ummg4_mE>iEg79)-FuOCzsEX@2+iXzZo|g
z^e5q%pro8uZU=uY&MWTaP5#JpW60^9Vn|HhvJiKg0=dV&Bd+GcM0IA~Q(k?<is#nx
zWFYUnE&lpL%H32PF1AV7yhj$wW*04lzL_Sdf2W0Wox`BeOv8UOHqFG<Ezf7DbsWC)
zd2cOG633_d_^^JP#BtL0i7!{=)lK$}xU;r{NaTd|y+c2jOiQ_d>KyKEPdX<a{l?B!
zTPkO_=GDjf+B23bwGrKIZKC4V)@C;C!a9lG_j$Hx=&16Rz0Mp%FDNiscZXQ>`cB_(
z#^5J^!Jwb-2W=dhO)GLa6W1*{y<rfp7@gQwm~0rkd#RdmRj;B?s#+^gJ3b2=Jh)HF
zIn?BsZC>g$v~I82YseW|>D&nU|HUH_`Me+RVv#E@U59d_7%UH-#1?+;`b?fveZTq4
zUHt0k_RA8kyBUEh-9|m9&7^B-<TvAwb4oo-jB`<%&W#PN{e27hhHR0C3h|#_xy5bF
z6)bWI^}i6Xjh!gtv}wSsshS$fw3he$nL0T=?gHmPo;Kk)ezCi_?p+$rsTcc=x}h)?
zgOqdGY_qbUJS&ep)=RNK&bn*`_&#CUf6w@IdO@T%wmL!DyQs&~5fTxk5vu7qS3b;K
zrQYLL9^-mc$IWW3W0u`NiN`&(5E<L@n5XX&PxIW1rd!?gD@dPj?}SN49Kbd?GFnIM
zC~w!vHc1UxYi|~d=<g-&lT9r3n(V4KC~kPZ^42d}-dg9d5S&ga&%g7jCGs&hBAAw(
zF5l4`U1I9LPS}~-(W6S<Eo$i5Ik&i_=q9v2ybN>GTBeJ0*Pf3*usjvYBMG8Hbe?o*
zNl-hF9~yz$*b2IseS172U^9Q`RQ_t4xIq7KGsE?4)1u6_;k;`^d2z(pIwLH%<+|&J
zSmivwmF?ub;6P|v0OQs>vw5rNYVuYmR-bq3TyuYf?y_jMzL<@+jsf)Yp{9|^u(D%?
zG=S`5U(nz*`M}&IQkReV@EpC+VVVnWxikzBF*s~xLLws$LY(J)d8>UO_5(l;kSQKR
zf|U{k&bRF5_+0lM&3K<4>6+5|T;Eb`wsB$SQ05uk0h#JuHc5v)uUE^o%M2`6eZk)o
zd%^SE-(6lT*n4^#mtSKhSPO<!b=L$3Qb9PL)YpKj)rM5}j>(25HU8${gjh<`R7R6<
zMa$-i8n_JOLiN~PV&)6j)_yUr+=Z>pV{fgsnhyEF_>|1^7UznU>dVNVAd{{uuAX<Y
zWGA$Q{AC=>MlAJ#iYS6dA9rqI#00UMmKy~YlEb=5Fg51BN6Ocwlu^sQ=k;&0xDV7R
z(+WIcAqpWZ?<ZJrMwyDL<cVu}PSmm$NTtEBLmbsG19YMZzCJMGGZ&u9w#>9%TJc|;
zseM7JTqN=qGd($?P@OIF&`8LSMm8>?ba}p}BT?+O!WksqzLq*fs2vz3*44j1);Vm|
zvxO7Z;P|q{I{vM!&6=}Xl%p*gIeF9xOVhpxb(I;~CZpp|WQhqviu?L{J=5_xhBwdQ
zC=C^mKDua;?`U4ta1hoTlS2;7!84q4p+4OUUZULiP+dxl1NF_kZbyrV3-U)F7f`PP
z#(a=A4_*(+M--ZI)`oG+>R8Sy3)w~x<vZY`lXYWn=<N{Gr+k{%e8D{`0OKqovz=sY
zNes8`7DOY(-l$MXCPsmvRTk~wu)RFsq8|uhpPW;3m!p>mg(t5(EWfvqdlc)58NS9Y
z@}%Qq?%Av#>Z@Aipj33;_kPJC-@v;PxfJlypk>)=cnUx6d+UM`ZcE$|Sxceks33_v
ziOHTiu%aPoY<KuZfU{h@w)qSiE?BEPe=O+s5JOKSyR>j;`i-x+h93DOSkKybbS?wi
z<fM9u>gTTF?HuL-3C8-yyti-7A;{pv*t63e$Ho4QF$D>}sUnA{frj2#Y~>yIMifXJ
zMWM&xN4?I?4E4t3pEio8{VwynC3o(086XfD<M{40NNC#5VCU<XTb%$?*3~UCb}EU>
zhQxqUCNcKRrtgQ8JFWHd&|3rrTQ{npe;W~mfmPRME4}k%y<ZbOK;>iLvbTp{G^OV~
z(XxD|?Q00Z7BhXE;Dov>C^O7e%n7NrpajF}=9-2Z*@Al{>Y*R+d#1$3ruuldR)B;1
z8g1s#w7I8WMb@N19fh`EMLZE}y%YQigs)LzH{1LWQ??b>Ssy+b#DKK*rOwd8*q1c{
zgQ7+mQyOU$jN!PHo22qVTW|DNtV?AzN1pkEtF&_BJ3feOB?!x8s*v*DZ=Zb{pZ1&5
z3)+$%!qw?Tz%>$konEV!;lT%M8<7fc-~!z&%mmfQ)49<%c5lY%wj){+e|JKRbsvyy
ze&HwR=rf~XT{qS8!0V2wp9SB`Sr*QOVPVql3c$NFID{bqZZI1=#GWgXi$ONP460?c
zx{#!coM98kNoQ0SMMDK3Kr`HTls}hD8t5hjeqI!n9-BY|>WgB3K)g6*Srl_DGL=ft
zktZqjW)bcCDWowvQ!No3)sBySgDgH<7HRrn^C^D?zmXY6o-=wN(wszu2)#FyvfB+k
zXj%XKt+?gIDHmc0H~&@ST-m!%yaJc7V_Qe7T2w^a(BI~IJg#Jpr|@C0FtrwuBlbxG
ziBzy=ZlE-BJP{m3=DQFvg2?xNXcLH5-X&GeYb|+3IX9h@hAj}d41af}9YYQ*jQon7
zTdq3g9WzFOrjb&N-WL`}NQoD?VL8Y*kk=Whvi~%FA8atWm{a6AY5=#fJALGtZm*4y
zme3&0>tZjI>%=4j`)u=EVeK3*H{pWFWBhP(s)y8uh=k9l+<ce7e~Dg-(xC}sE~{`^
zedFBR7ERv;s}q{x{l}Bt_h)fC%g09n<WcdJ`cfi?5Vrc<ep2Z5&hGTEr%hqb^VWN-
z+Zyy&<Yz+*QG10zBz*Gh2%=!YPX2czYh>`Lx|wnJv36(M_BRh@j>St5+}QzZ`+kS$
zJ4abnu7o@8-dkO7dmbtrkyV$4+k3xz@3@frTQB(OFjR2cpb=o8$*%2OqC`<InmoL0
zW$u!^;vB@k;4`gTka5l++#h!wtp6fDbj0OT;=4&(NHrq_WS}|_3qX}Riq!zW$rsjI
zdXDsV?P~4JQUnyd#{ITk7*gt(;kkkI6s=}_k<BcQ;7a)02Y98ik$jtKFj-U73&}m@
z&Wpj@#dGem&~}dG!l&#LcDYSYoCq)pPZQ^s-XDWiws2h8<*=Rbisv~I_W_ul&ACNT
zLAg))3n&l!?_;0FP}WhE$HmsMVAA41+gB#rn2A{JTGC;beEE4gA_7Fl@rx;+f%_^?
zM%KPJ+rE_nJ9KYKgig^z53_&85z^kok3>=0SDWs@Dbm@fx|3i}GG;F1{k?YL_!KWf
zZpiuOmbqhRtUR(+*IgflRk|3ho3Y6bjmsBA2~UHjuJz`$6a4x-`~phU3!JU5Yknab
z;qC+3$T+Ep@OALAN{w9n2i}c9+(rN<KUTWPlE+BF{ha7>-jPrDA?hU?TuG_LffP29
z{-!1O98tj1R1xHF^pcSkXvvqrLEqL6l*=Anv5n|M{-|TiEyL?Yp`u1a^hP%Qwy5Rf
zy*iUo`%hu7jS^wnd$CO1Z-1!M6yN<6wa|7hyX?$P@hNBROxh=TJ?1H2h*2c!vL7Ad
zaCaKMv$r$L+?OcA%&ck~<+C(v32-Kl+c>p6Nw+LFmvx`@Dbp-sA`uqiXunAm8w;-U
zF7=hjdA;I_QlIU2a1W(pANEhPInV<C!kyd&kNfMs&s_8*$+A15O;c)Q%kpIJt@1c~
zs}b~@;q)*wx}LYYL`T5_``{UoY_LX}+|6!$B6!d8aAjTuQa(g)9hHwpT^zJ*kBM>I
zAMVR#nmB^?5|h}-+AnX!1ykH`MMolf{1TR*b>9GnlsV>=+Z1sn6OI&5i#0<RA+URm
z8byJSOAWrc<OF6^Nn=Nt+R_f_IvsEIZR%Y4Ok{qk=uUu0j$(p<ZfI@UZHw&1HW$`}
z)~i?t<n8NtL`#^`MxL*u{vzNd(cJg47w>Wyr{ffH&^pQ8UL98`=GtIy7W*&fmgyua
zFumOI=Nib!l<h#x<sWk82gg<qY7tPP`&n?8UO1k8W?w_p!^`WYQhR0ptkh?mi}f(X
z0RH3A(F;#MNH_TX-E^MHtMMR0p|iGjk$dEc@Aqth8tCYQA<B`;ll~g^Ny5)HWj;~j
z5qy3o+Cuq8ZF(s$$>?fuy3`RH6DuMV9^teau6#euQk%7WX)1Yxf|Z#FTZJOCWV)x;
zq)=Su+sBB&qk)+6SNc@`FDsK`Oyx^elg<Q8+fyYau9Tj^&bPja8Zi1Y9v-lYHkr{9
zj(8O+Jm|a0217m?)gdZ2);SS}*z=9tBgrxamY!+?^BHa-;B|*@@c!54u<u{6)V%Br
zw$P5nmQm0#67O3-l(*zuE9<FQ-YR_t?>@yKyRcxVS5rRoze`#vm%*cY8VhSQg^9j?
zf>1P0YP(d@f@Ew#c9FlMfTCk@h`BFRRJ3b1-XZkPNss^9`6L}Np!Umn#BxeR5X_OE
zj_e%L;%;wq(ezK~RE<}b=Hd$6D!GS~39T}-?Cb?I&eh}5Vu-i=z@&sRWse^fr!C_8
z`9IHcGjfaK=*F7WMA&lEU5ZsS8AN0!4ks~!*Dkiwyov%m3#zAW-w2i{P`2;eu@?p8
z-s-5TO<E<Zny`dRzD#F)8gU~0cB|8I=yD;;&k+T}969RoMkPaVjv<)+jP|dt85K|8
zru1T;AFOTuboufB*t+U~Dzm3ecS=fwN~d&RN))71I;6Y11f)x85Rh)9ySux)krJf)
zd++Y5?Ebz#*X6xuPR*Hko*7mbj_Vz>MO(aAUGy!lHLom0(!W^;7GpFX&HdD>6DIY$
zyCC-aE>SB91lIxj3cBd^`b@Sv&5x?<hOZG<E9?i`?py6k_;)j~mqSDCCus7~x%2W>
z>Zq1MP8WEp*TGMxQCQy1+0(OJKrxAJ>iXKt6F2boqoY%!MqjyMg%a74X!V~Aw4U<-
zRgaN&gYB8uJ*SAgR5nnwJr@^zRj)KdQ_~0XWCyZX)^Cs1BB?BSH6coJPi*tv%g*hp
zTG<QJyTVX^^@>7PN_r)fkoc*rUEb;K%c<};A2)~l>!pRZl8sLhWIe9)GBv+L&>)b@
zYXmZt(%RGvvZHiV>@-oQOh8kYdV+KWV0V^?x4Rd@2bSyJ1)mZ!2*>GIct)BEKy(2J
zIa9KZ(zm%?)2wi2+kr&A*UE)A6ajSC!4phd6O0mdcy@JYa^)Av2d^tOG^<k7V;PcI
z@)W!SagrTN!jknX1Mma%%tyXrXKK1&+v!hU2mygR%4dwAn6X#mA2~mEcj+XtS&bTV
zO=bH%Gf5DFM+*^Vp0?t>g>D<HoVbX6Ef*Q;eumFxH_g5<hj-=SyJE!{JCGG~nEvIU
z<?{XrU3Lib&R7LRCvM(cK$PXX8YsKjsxpn&`hCf_Ellt<x5eY@Lcz0WMV7i7xxNQN
z3^Xr0>!yqNqu?TxH~}II*3zmM=N)F&bC=ea0W>E5!Wb;Cl0=rb?p1tOC=bNQ?B04k
zH=R>-l&BYvan15@vPUQQqCVtF+_>GE#&E3lye>u{7wLoj!Qc;>stg-uM;cBSuf3av
zcx$Pq-Ics~7N>@5XM<*y`S7Wljuy~~mcF}kf~2I)Hxuy&X{T$6@3GMrPx8X?#}&`q
zGSA+2mq42FCoz0aAlNdaze|4Ir4bb@p;>B#a_b1!s(nRDX~Pt~ZWQ#BMDHqrer{?(
z2JP_cm{zmnvfU&W#(e&T?B?9A*A(p!&aGzYv1*;!H~~IH@%!ZIuw^3#oLV8sY0M)G
zbZCb!->oTs$MC^<l;=Lag6(Gd{PkDeba`=!7F)kk@+jRl=UH(hKf^e^ug_2;%16Sz
zKbf}6U1Rd*ENR%FtwF`M4^wmA4zg>A7=_r=_U=>^77CpQqbh9tkUlE744}i=t27+y
z)4~XQrVBTWmRqr^*vYSoV?iKQQ+89D4PBO5^l~@WfbqHP?1iku2-kXiLA$?44LDC!
z|8sJ4;Zb^kmRi>Dsy~F~wAApNH2+;|tl6N+vKM+NKBW6i(O_ipbct_o#!|~#wN@2(
z*M~6}0Kz1{0dEwmoYYN>7^pO&K%`W2r9Xybd5nk9MW<-h<U2Phd^GU_p;%Ld)`N|L
z_|33qPsLS1?3heZFM(}vxOE}Jg|^egM(%8NJ>q*N1o2O*vxo0Xn4IdRldU$9nDMo0
zQ_LTw&su0;gP8>-l1el({onDc_OcvCe=ZZ;*?4~?ln}=>KXKJsPEOfagFC-Pm)B^X
z|E(q5TUD1&FN@n>(!?v#G6xk`rPN!sk~Fq(w<9??z=tg64a01O2Axe<_QW+dn!m~D
z4vWH_^~%powEP!aL?3Sus7sh=29ZdUzYE}{u;Ks^hPE4EH~*y94k?bhNkR5(M@w#9
ztZ3-)v5c?{4WSX`znN#?SiCenkR+FOKjyOkoh$*e&e88y>VIrhP}kO0<v6=S0a?$e
zDDQxP1Dk(kxq!?zka+e9>7fCB==Z=a#Q^8D;ikBOLW7T4;bC(R8B72*&_d@&y?BIq
z){smKH<Jn|f5gWEM5l*pen1PHpu)uTmLt18?)Cxa<*L1H{xBP5TVlZJ?#+V!+Q%vT
z5|A{S^^Zn?ty(1Xg{S5As)Z^QVlZ)*#OPnSDGgZwP^WQ}ZY%LyULZ+E52P-iQ$jH{
zA>3Z&Fo+f?w}_KMHoDIK3atM#Jq=X=%z@WblT7d@6XczQsL_BBN{U|iPM_~MfaFue
zqHDpiP3)u8vTTb#Y&>PBKNDllqeSh>E2!Do7XFJFbid|n+Hd;sEdYLD5j&ao(Qm5(
z3CKx;$4H7a?{Y+dq9+*#^_dD<rDQJr{#V}9BBJzB$`qXW0|Nbon&ywu8ZDhLj2aLW
z&wL#ALaA_x=t=ixMlZP}AMFY?AQpgyd4-px@P{mjZA}iw5)^A5z_)dW!@gvNglp5>
zNw=eYw1%9|T68W4caAk4A0x$T@7Ez^K!P*_-ug7x;zt+(<c~&p0J*_tZtRx);?d{W
z)(T+k#5nS>$s_Cp*VmS-6ObrOWUL{dvzM1kma|UUf7dn)oCFVJ63BUshY|&|O)21O
z8bOzzWuPb=fP|p5y&SjVAK`p<!5MI#%GrMbBKqinlhDx(O-|l&yk2EAT>#&3h8vlP
z#AadoA9>TfpMwe4n2%HxwX8a<=N%3{Kf&dx!a8P^C2FB2GT-HYCH98G1yVu`*kJ50
zwJbZ-O&J=w%UL%yJr98S8)PA0dk15GUXnO8^Y=-p2?rTcGMi#sulXG(U!Oq>++rBd
zj{RrXK#*Yoe8HHj2ApqBvxOBUb6;KCWKMYNys;{9WIBOSzTJ!}r$wU;Yl2UR0pr!*
zY@CT3U9<_NKQi^Os0;~dfM$m#Q&g&&RR6{a^pVTTLp2=39gT>bL$5yEQUPQ)=+#Xf
z1EoJ}2#I8E!1V(d5uo}}e{-2<v^SoHJ24vmcKU?>EOq9#lW}3X5?R@!2JNQY&RTmK
z1m-VfNx$O|m96W3t8+Ny`}&k6RW9;lO-YEi?2j_GRW^q*JQ(s;E8ZuX=33HrkX*9W
zIG2YP?zi@v*hAXQeoqvF=6MviI|x(iz2UW82`wB+nD?tLOQa%8osp!^8sWLhd%vL}
zKR(cDc)9Cx@PoVTtrlT(E5*&1-_h#_1ps`HT^_d_uvnBZwq8B$3L@}kbxj2)2bW+v
zlmP{q=haUf^SLTytuTVsJlzP>-MPiyVDX3q;!+MLqz{uZ?!qh#ikdAJ;K^^|)!5&?
zY~pDqeL+H5VYcQQ?lAu~MSSrmX9sKFixFylCij$tVAq^s{FICBM$M!C#4O|Guc&i`
zQ#yZR@BYy*p|HhCmT8w=N<?>enH4LWUkxwP-|#c7_c3bpvC%NP+i(LU{j@FEj(qFV
zpXzsKi>suV)&a?^8XIV-7+3VJ{4;~uDc3}Ij^{(~PgAgpQT_JlAS2}yRpoPGbj{VG
zgcvd?qBz82Ji&ZZhe<XI^|7LOI)lyv`D&QFvC_cxt!R3aEuOJjvDd^UyG&#xv+@eI
zSAj7gFl9z1$Ck#4bdEb_QJB-_P`(8fMwD!!yorkEVG=KFj~yUo=a;y=LA>X%VwpQ9
zG~vX!pZBv)eybg@M?9x^W;`SCNUtFy1$Hv5Ik_G4HW}T)jjaKFy$$me^q3nIDU|=Z
z6*iEiV>daeGJ0cl<&h1p#Mzw#BBQn17RugWVB>6?oxy%Cg7{B}X0&jHuRSJ;9lOWA
zJ)iGiv|AZ^br{5aO)5M91)ntpE|$KQPpy7Q#ClX$yLb?vglCCb5klrLBS+&AvQTnZ
zGvNVexN#9ToJxRzz5nVy?O^KMmGYSo(t?}*Wtp!kFWe5lIFa^;Rf-pHVXu3%Fv8vQ
zP+3Y20(WKM;FZ666CwppP)}P!6W`kw5Dqn6=V)B)b62>q5e*tKK!_GwFRHxJXTpBY
zB)ppL)w(eYa*D2htn;XwK>^JbT@DdX0+;U=4?<e4o$A+;nE<U&1O*_1CGK!=zkHVe
z8rV{E$>S+}&sZfEj2$K7e&j7MR@!$ZgE?0Ho{U25%c~a{n0CUE6$<t8i{F}y6_|?(
zY@cI5cSBrtD;4y0KQH*{1Wf1BI@4;Fp@<|-rKp(^z9@^bqI*+Wgqf3G_B%x6SUq*C
z$1hsK)OuYJ(ivp#-03T8l`KKc^@S|&B;-J%RSUvuTRZ>V1kVhnW}zE5_*SzU%XYL9
z$3s6XZL5x~oB#q6qkkP}TH2Ah0{>{ntn_W(J(q!}hlMKP>i{m$w6SFj=ZC)b6giEN
zb4jG7F@RX7puRWg;(RT2qoKwk04Tu?l6$$tkRGP{?oB%5{mI<uT7W_z_)Q8X=K#)L
z=9!lh!mVDVROQYH=FF!E;asTEIod7$sFX}W!`wC2#%+A%Xk;+Xy~04Na!Ccx7`NMr
z)b|o0&HsyGhsaAY9_;?<c$-+MgNt{^)4#9)uR5<0Qd}|2@B$U-AzZu2?B3-rmKxsx
zLAeD<5Fh<`wU+utqP@fLc^B%f#nKbDhw1r`1+AUdj9~=9<&xW9H<-c--0b%sp_G7I
z(y+_!ce%K{*aSRNi^W{qfIF%97Zvk6c>)D#&FdHnsMR$|cf6Z)4VX@`#yqCb0EFNN
z``hPQ&YP+7poR(|xQoi-4vyk^0#ANcotm1t<&tQ!Z$t>gq$QbeqQ;}~FZ3DtJy5=n
zWfSF27gDH5?|(;jTV=;YkU3Hq%On!rO2*iv_x*vhC&Km|YK_7{ax0B^M>i6FF^v^h
zuH^tm;_ZuE;Fi9~-));_pcYLMZyVv`SYpPo%-2RY!h1l5?S0S%E;l38{3DA1<jZqL
z?s?%<%>)2D4}$HQfD}|E0-!Ll)>acP91iqmQmOH}#XuVFK{4y)*^SR(+c>S}O`OBC
zznO7uQQ-2^qbIVFGQ1W^=AN#4&Hf2Hn=eqFXjn)?^(Do1Y!&T7Lw-Z$m_AxnzKVIs
zT1<bGnhrl>C9js22?Ok|QByIG78sDBBP+uz<m`cF&)pd^RyTSPd>U2Pa*ZKt;@=?G
zP7g+A%KAfT@xB}p$`qT8F`4N<J1?^N*&kuE`p^c6j^55g{}>Jg0ZYr+Vjzf9y`BKR
zrTa*M_SB8Sb@Tj;Xo21}uQSr!7pIyS04*yek(wSo`@kruTIQt2<_ZIom+!A{VVPU8
zOkt1s@+&_{l&x$GvW7#Vp~40(yz41y8%iD@5vD#HjyKDlcRbl;(s*uQfI1~DcNgHN
zYf13kGHmywH@`)h%#to;quIv3Kt~q-q=@?=kYz4rwN;k|v<y%d0g?u9oQ^Z>_0Dq-
z=d_Kms4x3j=A|fMgkWK5g<96H9c~Y_tt9j0bY4EKy6jF{;yPKHuNiGfShc}@Y>s+E
zaWbvwzMQ=ZyWN^MM1G`^q$wlauNCaAOm0;eq&Z^LSQdastA)z^3BkdVJ|77>da~P{
z!7Yykg=~OVg-K|K{2yDuCm-YTdY{~{+OvT+vAEL0*1)-_k&Oudk=AELcDA^AA~4+O
zS0~m?Aie%7WQ*F_3zP9;{GL5j*WkZ0G5`jp6js?^=EW}=Rbc@r?G_92=zbWC*;mWG
z;lqoSIG`}jSylCJ_<zx(|4((AnlGTn&&>d&^uBudaKX!s<%!rycDrI~bMU;_+P_9p
z^nvh#E`d_yc=P9<S3IG@I1fY%SQKP07F^nU<Je3>S?O@sE~rRY_=bf4EC%pNnknF=
zl&EP}JvK|%ph%{RGp+=;GTz<V*0VA+)w3c^F?K3FggfpX{Q=bf^#oRex!Xld>R>Jc
z7)A`nx#{}2cFU|z8BwOMrkK~4H{jo64>8_zzSRobpIZGRC-~0+04XrOtN!^v--3U0
z<pUtUrLW9};sm!>tF<HLFdVhUDU*h?=kt|SUDW{pU(5WLJpwvI1e{!tsr{fwz8x$K
zU$K_&#i`5XUi$O;@>)lA-rKVCW@@yic}rpv@F0K2%U1yiiMwZpR*!yGnqKxH2kXei
zm4e_<@VyhR7vDWI(kI;X%vpy2U4lC(hx}&A^Vg4OwvBZuIfq-(e1Uo6b5!Rb$7aPN
z?UmdEsyWfr3I_@U{1O4synw<*Wqg_Q=yO>c$cVLqBhRztOS3lG`mlu~6CZ5>)em&&
z4&~|r@Q-8%K*WhSfP-LoH_Q8HP9O%{+|&mwOAl8HzVhZuUI|PHrq}O6_o}NZ{`Ye{
z0I8VR3`Yd{_<QV2$z3C3uVtM8pQDqKw=H=^qyRDxxr8)8^zkekfe6T+SdGk|e_NS?
zBJsk_=<F}I>HmpckM^RPO{lfrN{EmC^WSioU+eB|2SD%+iKc@x9_hARI3G9{@l{q@
zq!jMu`GX>^OUv7zqw*Rj7FN}0=>M3X|4hG925^y0m)TeUB0>K1{{RAK?=Gsb(}O-5
z^eP@jN>@<H6f1@n^mKscW7V=^2zX<+hOjP=tvv-~XN@Z?2Cd*$2D<5)F9CUSBFUOB
z;qls2%l>E8<`{r*MCHx3wf*m%1ng_f9<88OA3EL78=}$T9zG{^RRlx=AI=v8xKRAG
z_clVX5(q76F+A@-&wjky`v_FJXjjGLf}tzxS8e>1|Hdv*(7c(w@;HGB1B;7LeR!sX
zF+6%Mdwtv@T-niW7cIC7JEOmTdQz-XryeG03tRv568Cn#OW}0X<%d?A{+`VfEIWGG
zn3}H#HzV~t&8*YRoBn$CHe3ST?V}o4c5WQF;Yqn|8IHwLIOjdtzkCmBP2lv8g{eM{
zT)cz%(5<t&BlB$w%VFk*uZl9IBZLJ#Bf*qJYWV^GfYccUwdqDkDSz?yuDA8lW!Q+i
zslNOi#C?&7n&dBqICXEuXgvQkiklGgsm73yqS2W$`ZEqAT)3+IA!(~@rejEv@2zeD
z{I6SQ3b-=!pF_1MR7K}X(7Ld0^JHhB9Zqw_>5S)4iY_bE-y_uYpQLb|HoVM!Vy-6l
zf%h4|jd2teoLQH)P=@juruI7vC2NGlag>s<Y&fT17b6!Ea<e*$U?=gfO}EzcVPb7+
ztwT+cRka^leNO1c-u799v~va0gJ^192&}S-=`pI0iHUBx@yybf^P)|bt_A>A!{#n%
zj&c~SOv=>d#S_*-Y1dLTL>f1`=Ksz(G1;_QP@&P4I#Ce1S&9JK*?Fd@8yY+JjgJWY
z+d$6-$c9N@E<5OXIe1p6N&iZVdYGIc2n*V02wL;mh9nWIm3dkEo8SJC_YfQc;nlPl
z0thR)96l2=0^*WCwsy`|pwVsy_>;lhE<NUjuTRjyNL+d{fYNN+)S+;JUff_(<qGt{
zLT^o!5ys@*M-fPYZMgJrD61DbRAy^<fMsL2AGh@Ky1ZPOu0*^nzv1_OeHS%@M*6y-
zZdl)J!j6kY=ZW-yTBry4=Yh?+?4}6P4{^(^aWoE!2iU6NKe|^gys4CF3K}|hH&jZO
z+;=_7RmdIVT^Z`fB3y{{2e*TwpQAH%37qJfxk-2&YjPXm%)Jl@czEB_J>k$<Gi|SU
zLDN-^d(bpee1uytmzq$iZK-ogIK$RyJlSx#Am5eCF+QYDQvFhE=LV~I*h4R6hq-}k
zzQN>DY8v;WuI>>2LLSL{yT}pgX5!N-$iT^^)h%rHJGg1_+cX~U*OFyz&%cze`|FX_
zply9&Y_*SSdVWJtXAZSBc-pbTsxrE%fWGg%;ODt@ZL9>(YdBR6Q!#m<9{%P4x;KO%
zEyO@$x|DMs`a;l(CXyq#Ow!w}@Ss;*tnU+{s$MZ|Sf@0ZS|-W&>fX6*gK&u`(_%gM
z-iv6m+qk-XrDX}R1E)MqIje7o3R}@S0bG1J_~Q&GcqU@Sy@qS5-}0qOceS|TLH3zc
zU2`xuo7`2HLvVKEHEr#tc_|T1+VS(Dg}w)L8!Y`KFKA_y)MIG~wF&!m!NoWJ(kDO(
z8I+IH`24(p6Qc1hZD*lmhj<JXV8>6avQ2yZtgZN<q3CKcr4e}2mg<QF7=PS+=s?J1
zo)b5|oH*!f;+f9YNpK`jlOO<cOz0OLZL=|Rj4)(E5dM(bD6pTR{1qA;r!CD|mI|vD
zCRVx3B<g_mgQkIJDKhgXTn)muHiLYDAwc~NFC9L#SP|L4;Zixd<9hVjx4bMwsbzJ)
z<}f$HGpX}&<qdYru#zhGj{%3KmQH+o)sUnc<`bD3rHVsZL2(gp+u*rvC8AGetGKIv
zB$r{5+9!t@g@?<+e%b_aDO&*G#Jivw?a-pdN*`lM!Pu~q8G?HJ17!=*!mEZK#2Zhv
z9~Sf)E<0bj#57>Tq=XgK=~QQ#WQ1L4b<UTo=qiLGjP<u}#>-4V+Gl*0c)IRZvgW0?
zq#(MY3R4~9(tlutruvsQQhuK#2ot#rg>1(m;ROj{B9ID^A&!p<#Z^v9WpB|-8Xp+V
zcz^=^z=3M8+@cjVCjyg}MYhXsj&$C!(gMfDrT}9u<t&Z!&GN*OMS0N_Ek2}6)cW=<
z;x%z@h)BrB0}htZoaYa%INx4w6->`MG)MYRzO!Q7=XTL}7PUSvD0B*+Za8FGKwS?{
z7`7)1<iPZX@NL%VE!Y*OhnXfzVA+ys5HH}gu9&?xw?Gq+w8Is0k>RFhg3S|KQ8W39
zvYcg4dEHV;gs|)><3aR<lo7NfGmsZh>N6Ehdn^xe%Yzof+Fgr{5HQ(b+|Qo;M1&o_
zt%ww@=T3T7Ui?0?o$t%{R486t7YeP!l1pn5d_<Yr`+SBMiPv4z*(e;p89ksFWMePM
z{GW$2e_H}GSonNtOgt54Asdr>`%0s+7buX1l<mx0Q8A%U>nkVC=2H+VBBbcbPzu0k
z^hME?r7>A0i$HWTs5PY}AZOYSa#pe_*PO<ag>TD2O;EkUvOHtfO7wX0kO2FZcnVEm
zSmsqh=`rw7HxIeP(aoc`;aJ`HShI{!b*b5T5u)*}!ypa7C&D^$pe63f3=DN#N4{|$
zd!o1>N@WC{pj}{>x+hb1n95Z=u@}nAV4)g8r!G?{4?CTOb9&Ri5HQiT!>L#>nWVci
zqdQY=(LCt;Cgy%(`5@fplyK^HyY;Ix%X>lTWL%;3yPg63k8-h-$F^R3PQ9ee?#+8x
z3!J=)XnrB#nP#3Pb&>~;1p%0OrhE607kbNbcb};$b7uBorz?wJqZJ0Y6p>}!e9PO;
z1r_>LZ4ANHp%nXi&c2vRJAe9_C>M5xSXD-gh4I5d;)(;}ISIrT>Qs?MA59e0#&yi-
ziDABSwB$O6Ziy7=oh2)eyb|6S1`ocfEeNeIWP%jXb>+p<R!XF-wCfQ(qNZ`IB+k-E
ze#i|x__s9yS=w?x?@TsD3SD>f%4ruMFB8mEV-9@Y$JAb=U5^oMTurDHJ&(Itv{`{G
zZ2k&yLNQ2ppgt+~pe*}zqV?_qg4a{7i?U01dyWgA0{vH#Le>MSZaF2tMF0G6OHU25
zlt5zxfB24E#;s*31;O#+ZP!#G4Z>96TSnpCviG8)h~n~3lgg%H`@tr~LMTXdjqd2;
zxU-@=gKbdJg=}F#y&TPAl)D9bnExK1;NDr074B>(HO1k0^)_aQdlde~-gG{Cj2Evn
z3P+I|U_XgKEQH|o*X&;39)AXPQ8`mumsSmrQmC3m(~9Lyp+I9PL&^>79?`c@h6TzG
z4mqWUqkZTG5LMXKmH{_xu&;P=h}OSj%>>ANW0HO2t7plZNj#K+<0$}DvA5pS<w(D4
zPd_H-R?uT1Q&jg!nWP5GHW()`&1pl)9y3o_N4iKa@+Y)}mh~bFjf_Jc`cR=SN0BaK
zjXITKa`$|FCA@WuA4T-agvrW~TfPqe<Wnri78sh&PzMl*Zq$kxCFLDy{Ii^-(M%b+
z>B?$`Im=C-rySh}135A9*9n4=-|pslXAg&_&`|a@2$K%q{W6Dv3XEKrG+NKrb#wlH
z0StY@0|`jOGYw3r6;l<y5zb@y1~%;qmomubz_bd2uJFPX4Zf$>=D$|b;}#G=6+e}F
z->Dt}pF504Ba$AKXeiJG(z47pVIo7Yc{gPfs*0F7ypQgcMLc@$e5OGZp<?PLgw}y%
zXE3lEvvvJ7j>9X9e=vUV#2a6ISruID!Y@^kF+wKgb1i3BguKktpjm3kLS~h&LM;=<
zaJtPor4tF{Tdf-yQP+&DH$UcyXTX87F**w2?<v}?#D{IMBHsgV*jk}vHGQn(-`2c1
zfDpLfSPq9?y;uy3NO4ArOWn12x-MlE=<Pi8%KSQ=_a!Ny;0;vW>7g#<$<&i`?v3Ij
z)CGkx&0~kv165eKmN?i$?okYyS8@Tqy1eYt5BZildMYKIP>K=8pH2n*9aYiIjZf#C
zpb85HH(9t6BR*ki9^dJlOL=0*#+t-s4L!wbQknj&?BljJGQe~Bu)m0?syKNAe^i2;
zUXzI^p-1q<Pz}K{Mvpczis56k#=Thd%BNfg!_7}$V{;7{4PptO>LtV*$JSE7CYm71
zs|9&ylOYDveXO}nwTnyOz47*jcHed}K3s4cs@?V+VqSF{ZZNtD6*hl)a?kzk%?51A
z*M3$;B^5)EQz^HZ8XA<D42_ja9Bu_RvU(z4qSE*mNkI{H#u$gOO#5S}K!}QX7AE-!
zV=w#K2_QTrfE#9J{7}1j%0fvs4O5L8(d%Qez8BTURs@IM-saf+l9$7A+VC%17JPjA
zz%_Qta1C$%`VaXu5d;br)c!28a`*I&coUG0QwHCv1e(nc<4j_SC@(!VU3qT-e7X-U
z@<WzqmpyOa29Mcm!MOVRu<zQ)2?`T7NVjF43fRuCcQ$vNL`E(V*2ny;H@c+raZ^Fj
zNdCb76*T;GKFZOU9Ino6=$XabVTmF=EsQ$U#2%th+eRKGq-U+c&3uwyUht@+XtsY(
zo(4~-h?+Z$D}`v2=lAQ-Yx=AAWG}V850guIXpTOAtA-*fK{<~(%TM4N?F~TjF)}4d
z((fJpswb4zK0+f`Sd0@0QXa4nV&M54kvbg+Q3)nR(ZDygCG92lKr{aIDS$lwiR7mu
z=!JPW+#E{D+ALCJ7VB$hB<{a*G0n5u=o*n0!q#3zb9g$Pje3RLZy&-sXB5>eAVGR-
z=}L82Q9`gXjRURR5M*Fzr~S@sgNc3|rrBcfRIA!PNgykz$Ery<^`q#-WH#TGU9l&N
zj3&Br;ixw0d(tEmebHLIQ#q&N>@OoYr26-+?69GSffeLu7hkwM$gY+xRErojOjQ;8
ztQZHMTjdQsAMRc%;&ge|vO(l{czMCIW=|ur;XWfPAF*N4l#cEx$=VgeA!fN3S3;eq
zxY7Caj7DtZ<yc$795!X*;oF7G2Y!sJGOBc*4{rq$H=;?A<MOsKQ8hZp3^<uzC0Z0`
z!pzz$eI66bBpXfcNlQ(<tKty5#?%nsFtn({tQ=FKpM+`VKa{;tcfqY~)K<29{yI;}
zl1y~`BQr+r)Vx#SN8+U5(=7`4%a^R21ck|cN0C>hEcERvf2k<2wwD01p|vsBe4IcC
zGY?j@?sFv}$5-)c_?7I9)Wr%1DkMhjDa~r?^|?#O#l1DFnslQyLCVe?Jz;p#K!0{T
zF@Lh#NV+t{NRa_t8I;z<&P1=PV36yDfJ9;p-*a<m;h7%)YckgW8&xa<R0jbgTlWg=
zhN-Od7^q`~s7S0#nDRT!r-de@#rRwTubtjlqMyAQ?oHr=+!_ALYg(aO-Yju7Vtlt2
z(|48`!dKqadZt&Aqa8Vc11<hhXKYP$18!E!Pw{LN{(NxqLVSa*lHtsm$CkYQ#p^G4
z+I^1f5+3>+?Qv+&j@rtH)6!PTurcty5a66QOmMPeEM?65Vi@HA6d8nPgj!o8|FFK>
zRAy}>%^k@5(XXB6F1K^5M6o2i`mhFT`2`U~ad;=KNp>mq5<<kQ(9T2g=;&w81f-tF
zY*P%CGts?1uNZt_Bl!Gb`=TJV-9yC1(lp&UOi02~Nc<oLtkRc}K+#XPrs3MF!o)hB
z$q1!>m`!1$ld{>4!W)sfyToD5!>b%k?zOf9Y3no%E6h+G#LhRX(2VVTFLgH9L#|U~
zfNpXog;vJT3UfIo*O^n;iF>ZH%Xf!tuqxetg5N}|MSAAYY5w!VW<i`7{VH%Dmd*8=
zxUkKhk18t@azzlAR2t8v<&0scdc%GFPRki-FZ0V6<`uDn0c&pY8#}%I=OTnIt7oWt
z)rmZ-u+74Lf!I`fy8U0-v)orqUC~XVUdh#&I5^)b2cGvw=cgBbqMNUL%53wBoRT)6
z3&k$><eiz3nWRf=!5;LO{5x(Lhg99IZJxn~^*Y8gBr;qtMOz)ZZMjqp=r5(v{yRmP
zCYU#3q#x;iFxl{3XWE9X>5T6N9#YvF7BEDgz8knL_9={uQKXh&{aIVk{;VG1K)Z?Z
z2M%iw72bAgX(Ail90wGnrW!$*%MZ^)SeXzvZo}^Eny_!b%R?K`$R;;a^p%nRRZ19?
z^#lX5l&MK0M8qpg$X)3nA%`@8fM{GRSMm$b7|TJ^nq@s~7)W*gMIfqHV2a=mknj#d
ze1}CDYt+ahRuo)V{hFnf&R!{Bnh3`j*4--mV4C-q7)f|0B%++h3je!uLQs6|O1YY7
zA_H+z6BGti`#@`=$edKt9sA%~UXf*)=Gb|nOIuS1Vp)WWw_LO6o#>4v#ATRFD*?@B
zNDnNj&tiB(d@iE(<PwW%JP`yQYe!Z$>TA|EF)|H)<w}1t*yg>-Vmg+<*)@Zo7$$PK
zC4TdJ<8lWQQJo4JCU%_CU5u}slj;Y(NZ37K#^p&_a+}{Y(ouid3~6HLGW;nl5%t8h
zj8Lz+nAoNU^<$Q2i0<4c!=WPn!sV%RktI(>uaRqI$??5$73Oi}e1X9T1Ocm0NP<x1
z+pIOOY&=XgSr2HbCad$#h21RlQlC;)=GJ(SU!PVO!js5d=Pu@$Cp{%BYBo{-Xb}kd
z7B5xk)sx42TH<pq^2J6c*HA`*YT)kmi5jA*6ANPwZj^jxE)&~u-Q9Gl$vSGN%h*n;
zO`b~D>=JLNZ6Gu|%k8sTb3x2oc9(c9U;8hH{e3ZECC4q>{yQE4PyD9O6rv|n)f--(
zvhq<@)Bhl3Y#zB)In21HjJl89<Oo~HYFHmiB$T@5$n>sp3}p)lEfFGmGQF&&@M;+z
zSwDm3p9(m@18dpnJ*q8N-6XOPc9wkl$jETpu?0mwhQ~6Bqxz{Mg=^B*gpyVrMB@(A
z-@mmX^&5nsydw%Y?FGGW;Nh2jX7Yl1Z&Ds@#nnOP!)l=^cMCGpXgCoUI$=V3YEY5M
z(tb9AAJcjCSY}NS6t@jNNu)_tZm%@&wV8bPT==Idst-Fy6;oxlZ{74;smYcWu?7!}
zg|IOpk1LM7qst7R<6~5h4`K%A30bj|S$=m~#JqMbxRx~(vWA!()&z}5S*0&=+U8D;
zv1{Rvk>&_|3EDf`Xlcl@U66qcz>&o>V!PIEtgzntTxsvp*kAOJr-JbbWnkaP^ObAu
zSv#imdtGy)uV(wuzaqx2koS}6)hpoIq&_b(F@!9mIA^%Ha0vvo;*2f>ijGz5@7;*_
z9if1N9EI*C<=Pamh?FwzKSwYPe_Dl9kS~s^d`?v}wSLe*2}WwoAnu^!jyL;;zkP4~
zR$?L*s1pR!?|a7GbtXPwwMo(s(a>m5BWK%L=x`z?buqVJVuDlPwr{~?8brD6Olt@$
z{>(fxajIkYDVaN<S+>bJ+BEJR?G84`9m544>eTy{w~%a7eUSsbFZCl%KY329)c88p
z%G;NmTjd##)}~H^F2mHMxhjwNH$<6q$QtBBU2&QaSjIJ~b2FEO29%W*5_T?PTVtcK
z8e}B^>Y_o^?j~I3DHA2@SpUjG_)?~Ssm-Zn`9D1beDWz<5>}NgI$Roo%wsJQ-*|Is
zG^YkkPv{9;NWwaWEF+1f#L`i&n4QFw;02jqfV8iQ_oyO^rkUPo-$6@{z>#IaA$EvR
zxNjn~hSd0IWzi?P7i@E6MqE6h?T1hGM=Fa-=Da8ENo=oUF`Vf_tj|$USzdFm;SoW?
z1Xj@92Zm|~`dlk#tuz$f6JS?gwVj_yO8K3`QMj)bEx=$PyEDdE;sz2Twawu9&b@;E
zI{KP$dElr}FKRHp_6Y5$^Z90=qF|44c8xB>W(?h77u(K$mOsw{a$Ax`IImTL_wkP_
zhP~HHT*qOA#+SWFHBDC}`8eP4;Mtl^3m6htH>Oipo2BPE;JUK%+sxKapDC>-5+4zW
z5nxI_6gajVCffIsp$7NL9sWv(ctfEv$sTlt5pohW#qE=U50nILTDDByo;*B-Qs3^d
zU|y!m?q%GIEXp^eJ{89}+!CvoL;GLXkwuNHIz*(1c&#<~ABYmsyr9oG%uA76X}(e2
zYqF3|6L6NPg~R^}dV`0P#eww{aDX5mOevI)8v-`Tw8o_rptxrs1}Y*kGCE{FUDLzm
zCjHCQ(a}shUwXfAyl*_g7i&<fQ)$Y@f98;!z)X-kROlW1)%jnLHYG{G`p#!xYET2J
z>OcaiK-g?$>lPo~I3V8J{iMbQIt-UyWId={_8@<=f_i#^;F-~;IQ7oK57j#(t6wqf
zzgEOYoe{_`GLS+!{v8-35^7;ECRgX9=lO*N7$f@n415uFC}h_M-m#&&5j!-`TiU*@
zU$>o>?z#GjrEz9GeYnN(>#F`^xxMjTCfp=^T%}tV*7V_)P|e<Tz>tjZVRE%+?w%c}
zY|r~?|50uftoR^|J}zIg=sa%W0RV!u#WQLpSFX=*S}M)D#2rdXrb|M+;yeOFph?CL
z*5Up$yd4nUOj1}C_>+qCQKyuBcEOhTF<fME5K;L?)>)e{IrI*w&F7}Z(Cz!n;QS{*
z>Ib06jy!((&ft_GGnB)pbD%1RIZWGd0H5!AJ&^V}WPa8i{wt&k{^OQoST5Fu<L*HI
zKRKruZJ=byg1`+HTM7?ejpyRp*^+g!zXEA<zzGu?RK8NVYWTksZjea$$jtbb^lj6R
zgxaK)U7s+iX+A>IsG?Hiw~8`CPS!YiisUi>?ti5p01}p#(*8G(wz^L&Z79NR<^EQ6
zg3qOI_ll8!5|6uIu;c6_YGLf(If_T4#lpn1E__0{cmzR={sJs~&0Qm`@zTXZA$*(J
z1ZZg>s7I^b&*!L&5VZ;@<@b9fd}ztRN=Yx?CF=K&w%EX!ZfvyiZy40<FIZG6OfM{2
z+fE8=cwPz>Z2ncd{ZY=;n;+P}`HYU2zd!ee%A!~)d-ev&FNAM(iX_gBFYq%9GC9<m
z`|nZz7JwQR@EB-N#j1q<2&AKwHaA&dOvD0D5&_$;3>?2f>-QE~ouC>eIg&p+1s*Jz
z4v@SPN8jbqZ1fN(2JZ0=TlM9rj`0f4I@aR3Q-|BLsIFE2cj+Z4fKvZ&CRBen<v>!D
z_t~Ay&)B(E;!<MzB8a6~b&qg?rzIBFz^dGdba&X^TOue1Z0G;1LX8XLF=zATd~-g3
z{t}K#CFa)I?-Zkt9s*nbJ5pE`CcKP~SLqZC!FwCCN6vg5hGe%3-;8W-a~x3ol5#e*
z{!9Y^GuO3b6~vL>pO=_Mj3xY3n4EA1KN?whTn^XfS<SDs0CgzK0-MNYshUmPTo4W)
zj!o2UQ7LgBU^9qC1!$7`^LGb(VLX*KyPsbtd)<2}_a6hFJh~;abx^Z$(yNC&N<Y*S
zCM_3gY%=U=W*?!1L1MU<0vA*hw)y_`yX<u51`~_e5!qkYW!LSSChLH^xb}YEh`OO9
zY|@tRQN9`&BD%O`6nVDB_6&){$*snouo$9<1z!siE=cpw25!<=ubM)7_C4Ul6+Z+R
zGFlp|76>GpO_a^~n~JH7ULMREvpEG#+ODm1KAg2TOA54{!JV1M8vHpa;JK`9!QR(9
z!fqF9fE<Mwca=-R0tg+1?-Cg~m#tyVd|Ho?ICS>^BDDUsxYSHOzIfv{r?$91OSD?f
z2&WlRst$t`oSi4&t>+)AJ72D~ge9^c?M2JpK0Sw#ElQj$`|s3JyjAHHHW2VkFy|*v
zXd6G$sY(Kvhi{PjPQTw1ZxKZE83+_&qz!eM5GZtXG7enl9rA!(0p5RCR#GJP*;U$>
zcgcEub11Dhk-)vI#%1Qw`~-g@L?#b_oby)8$seB%*|g`trHc~{bNIcZASK+M0hrr6
zpR1E1x<Ezh9}UpAN6;%<hK=+QzmMYIi$|^RlW4FYkn{+pk^2^EZweA<2UKe}RkC|N
z5AK}Q0@~Yj{uk~ZIDp)U)`rg9LMLp$Wlj@D#>RyL3XDD6q#l5r;}~t#u;JS1P9w`t
ze*X>dVC9+v601~UZl3*C0zPB7T(&Sfb2zFsBaZ$0T@XOKm=N5m{xX<<9aNw!I5q%F
zu<h8&`!idAEY)&2d=8Wv>sHt4y(!pO2I!9{rCQ<Qzjxtp6}3PC;Fhg0`DDP1sDIu~
zHK3%XH_)3+;AX&)6X?!!xkU)#J9(soz$dFk2#nYt@zJgRJ!lI97EqB9pACV_y2TMM
z#RFHh0Y6t|*zsNLU+?qp0jRB!VdGhEao0{Jey>2wD!2p6&djJIS%Wfz&L{;L<wqau
z076m6f0e$%W~Ksk+LmI?A3UBSJJ8@|B}QeVVY#Zf(LfS7O*;#-%5O*>Z6A1i;MD`_
zX%5JKd-i+K6<kDs8vrzkiV!q+O4AkuiZdE7%>1vsD<Cj_9^~6v{AX`$@i2T2q`yF@
z`yA~~`dlnQb6CD7Ygm8}qWW`(!2?N%c(b-kibPrb`81f)`uh{0X!SQe|AUnJT1agV
z*waIcdV0y<fAaTIS<3=@Lu{`z^QYC0tRWOUI`DF%5tn%c1N_C3W;i}R^EiWl7eWIJ
zLwW$nj>gBe|3_a@EBO#|dgoHRtV+5;t*&=L@;bf5(8~91>H58a;3MIq{sOR~iau?-
z0A)w}m}Kn<di#x5voJGQ-tQRm30h)0exW}!$RRV`F&4d3UU22qzF$cn#V@1Y+#<A%
z#zkT+H5)`DVz7=zD<#FIHu4F<^NGX&YQfdG&tCTuvOzRm!CfASwDk76z9V^rJp}KN
ztPr@s8X0t_C2%2e-lmbk%2_q|);8C#1Vv$eb3b?Xs~Tuop2gYc0lJKB+gNwfH&iqb
z`R<83>6{bVeN$?LJpMsCQ{%z=sa)b9eFg)THXLM{-|*V-ZRml(%_Rg-^$!JK=YQ8Z
z7X<D>;sY0=2?zvyGv&1R?JSWgdw?X|k<qr<EsQv9ii&oKJ=#(RInv>hYlwqsQMstf
zkq5fhC2lnb*Yx<gA%ly&N2d{zA}Y|>%HX^F%4VEToACVf?OF(!v%=U1A9p}N|DP+A
z)&`(@v~)iP6aPIf<@q6ZSUpsmgO7FIk4gU3QQ@XwNs}bZv+suceN0fv1ZneF&oHi|
zsdk~b>Wy%=if6*w{iSOPRE*dlM`Rl>KfE>9Y=EIt7|wV-;YLZMf3uWFqLdP$Z?qxb
z@jkgL%M7F$LE>ySMpoh2+dB2;2SxrnGU4IFmcCPpm2i^ypH*CNWLBhlTP1C=^ezt>
zYnf-EiMUL|#G(VY!=;-$2H35LBmzRtdod)&pBk`5aJR_VY>}>)AXhlg&a79~oiJY*
z8mDRmlZ$w;Y@Vzd=QQHxeF23MKMkzcfQU-pT*PW*DL&D4zdf*7315nTS&Vc3s<_4J
zO3Zl75@U&ES){D@S{H50vPV>zd}U)loT{x`-&zjkBYm{dS8*wVu*@`?_`}lCG%wul
zl?}rNR+DFZDXve9s?9~q*wETpUSxh@6EGC534scyvA*X67uI*JJh-1MW`J)M5wZB+
zJA$JKV4`SuT1w{uN9GxFvWTa^NS%NEm2}EN=xjMBMfDAxYVCUg0k<qx+vYF6xr<^g
zy@T=fTu&{B-?sL>Al1<*x8uq++vIZ`)b`G-Z!7(IBJ=I~pt$GGl&0xMTm>{+gIWaN
z{9!oO{llbW+bF|>c*j0p5l{!lW`g({GTjip#Up1zpL>SK3D%JVtt}vRP<&!1yGJm)
zMDLqYJ&P-<hst65K8WqDrtc4VR0;e>Yw_hC8U!53pF{1XYA|h4zD4ERI-9e_&KIAr
zRQa8-Z-*^AqO)#fGp7U`@N;gp#3w31&M9*~PB{l6do-jvSJv7ZJT;i=IPrA{_W?A>
z0<F8l+xo)Yc7Zor;>ibGL<QZKP}btc8&vW4(W9!WgwUI}y$@_HBd{mOqiI_`bG4ZD
z(s{(|tgy7+AlsKCr5PSRN6JOssa|mS2qh5E{fz&9Ndf*)!YXG*cO6&}4j@ekG2pFO
zha-SEIcRJgy^zp&ojOm+WC9Jo6I8i9k*S#XsilEGcK1X=tG^_#iKw?Pe3M$dQza2}
zoiZ23U?Rqq%z-S@G|B0v!U$o|RogI)DE57i+39MzhsTa22gzq@+Me8SWvO^)i+pGS
z%~NV>b#H-hMUnE8^psG^wrg4tD?|hdf^jum{b|mq6*u?lM9MHG`vX@QV@mfsx!c71
zZ<^{k@{y-9#C$yWZ%in;G!9#_A}ZRa`xUJ5zid(_UZ(eJN?QvXU2@Kb7EYmONIs)V
zGc&SRPy9gl(A$}e#ENmDi*laA6LxE-r_5{J`HHGAtW{N}))w!fxXk~D$B{-kagJYk
zeD*LrEYUkqrr6b~!b;_|H(iw{7R2cf^g>lgwh51ij;NAwk4GhF!Mf2}0eHQDws3S{
zH-?#N1gS_Jdih{3Od*0lh;pmRcU`0V`R2#ZpRtMq(<;wr&L~W>D-bmMBY2$kZi!&3
z6||ECwC8HE6*wkZXD+fcBs0e4O{1TW>(%kcAu&SBGtVPBnC&^P_c=fqUVE|`QW`!?
zLX!@m1O(V2rGI3Mp__DMsipKV+p0ntri#h^+AP0LKvKPI*nrG+@eFtP9@0VE9iH@x
zvn9`JxwGHxZAijmhJ!LvAPe(DO(AkqlHgDywl##0-8Rr~(!0{k!YTU|s?OG1ptWO~
z8vFd_yAOXro?s&c^a6t!YbzH<rBm{+$xFf}j~I-6Huf-O)$($~am-5X%ChUWao(df
zmx3j5JQCZxB~~Sh3rbI?NanA>TqZ8`)%v2I(c5^Drh9K$c*6oO<{xKc-;TBeH7hmu
zHDu4g{9U<RUqo2?3D@nUp%ekmRXUR<R{+KK{77aBR&e;C$fur3i#?leeq)s%d{yq%
zggHndve8YLHnx2hpA+L4wcrRiKq5I5$x?GUsr-ji_#{0-w!u3$F3%r+R%cu4v)Myi
z9}_VKk-1@MUoP8_?4@(A83Scj9ypuk9WhWzcS5HU)i^kj8Q1sOso2al;Hmk-8{KSA
zl?XUqVPTU!6dEcw*iOvh?+^l!LfS}h*F$2S89W3hC-}8>AI>Ep*an5lQvdJnhzkwi
zctZoZI(X4^XsyM`vc)-G4diIAmtQzame=pqxl%Z@dGkUYPtk3&I9);UJy=9l>|{Kg
ztYhxd8NLt<LX5ccby8^x*;Zi(RSRjZMyyNRIIRU$Yjw<C6)*!md#G*meI1*8S;ltu
zrLOscsGcb6v;{669ifZH@#;Kb=FEp`!IEiMAQTtW@Q>40d&Uqv+mFX(u7+`NEr{6c
zG)-nMN_6|dH6uhV`;8UM#bUthazn@n>Y;ObdC#J)H21EbBf8V8&oW|-Z{NN<r?_sy
z3BSEc)$iLGq|RUUn<7qWKmFz??}}gfCTZB|v_<EElx6Qu<ybSL*tsdA{$7v2el4ip
zQ+VR0WNn3YoJBK<V_^<|#_puWuv--XojwPsfbOSJL^F&p8;|wJLQ?pBN}8ZVLCNU9
ztlxi(A*Huzb76#Q+H#M5az$#$Quz|qQ`<Y&n>v0Q3T6);+0S<5`_TF{|N1<w4Dm=?
zB*sG2h5whWsp#pW?Fk8o4i`>b?op&?Gq7X4(o6OKyh<^uKp}6s<CULdzs$1S_fTud
z9zX-f`}=d)HZhXpyPKy7CGV}EwZJ`r{#ezrF9CB=a;r=2*O;<t?yy72kk=RRT3*C8
zu9N4r;^8ok2T*+c|IfHeAmBC3Zy`H*^2<ZWT>*ET6!{3zJqhbjq#*+^aDldyC&TJA
z9se$g3;~;;0vtS*MwV@yUr`oWIhbN?_$4n==S$ris8v8)xm_&TlkquSybL87fxoCc
z^LLtuA7Q^V%T&Q;J^xROO>bDpA(U!}_Ql^*S&2p3*n(nefVe&K^;pE`!ceV3F&=4Y
z`iU#?W%(s$qgF`3bc>BD*AmtcSD1)REtl0-KBr&8{If{8)KGvQk3q+B{Kyak+=8GW
zTeawY^LfqucUbYP@Xl8Te<>x4=+`OhAwq6cdMAkhKtL`w;MdB4uNUx}iqC=YOy28^
z&Zb|_o@_0c%K$VyPT_|HjO@WAXu&&}hMy97Fm15KcF^c65tD&;n;%^E08=gbga@iV
z2%ENP=dxo@^;9yYxDX-Rt@=yI`^6N+fhXUUw=(<OY}c3@ikLon9Ye>W?-et-tul2;
zqYF(-OPI!ff754vDxBFp*pcQ9A05rWTFNdt&BginL;y0*0E~;8MMe5Q0f;`?l?fU$
zW(?;W3lL1F1wV-k%uF*W;DD>Y2ytkzI0}d#VMp%|a1`&>wJSYll9Ihu!_`~H|6qfN
zig7DM<Y*P%Wp=>IY_(%Oz$>d-c=Fu+mY<;Eb6|zY`ie??u*(A{%;$4g^4n*lhw^^a
zFrpz;Yg*zDy>6qHeLT0g53p@k>Jg*Q;#Nm0^}dAr|7S@7E_M^*?<uqt;l6$i;qC!6
zr8U10%@hs_jI;}?ubpMoUU<T2fl=j*#o_f5j`(F$R}G{GvvIGsybgg^hwhv-ne!M7
zjMJH)Ix;DYOlr_H-^)_tc7fW^FWY7UdMI#Jk;thsmq;Nm=XBZ{5IpLcF56M_0>4DT
zRF|@1j`l;NF3giT?_0ACs|GW8&A3qD{^v1HL$HRFYQlLW=M$jjFi_WD=i2_p(3jH^
zrK6*VwWq&qn0>dsV49iU!<iYa^R4K^Y>EC=`?CHD3nuoD(5j;3GozAKq-te|vf%2T
ztwqb?I*u{)ZfN{aw52-DpRc5O&~PBA1W2HMM4(3C*c#T5BWV9Zp8b8KIRGEL`c225
z$1@ED#@5z*I|X`8jBF;n8yX$LYzl%Q`ul{VV(oVd_T3DN)Fo%*bGGNCLn6-o9M)YD
zM19mS3o+i8m3$k95JM5JLIVndtMuo1Ysoz}6dWaYM&*Qq>W*-cAABDmJm>oDE`-(b
zRxSgL3!m<ojD*`k`^LFHx=moQTC#zF^UQO-N1CY*YQ7r!V1Awyfs|KSi@JOOdevoy
z%Y$O8^Tq1+qTBJwAu02ZqIZ|Gouo1jHn4|#zDLUbfkDas@rwyPciT)ILy3Vd?@|!F
z+Qfx_ni50k@Z&PfhG20g%y5}e#?G(U?UDFVY09(gO`1s5=LKF-AlBBv^J^c8UVq|N
zP5DHXrAsp)=sgqP$fe!>DueHFd>1V6Yv9;D!)W^BxEoMfpV2ZKAdOTrk>L(hoaL&Z
zt2Pn<)%Mer8Pu~RS8G@k>$Qd2eg+{t<$xk@rzqV#Z;ij13~(MJ28D4TJeaam)Mx6C
z_6zM0TtaQ#&B8|QrDHC=67cX9&_C*pbc?+Ij&ORd4TC1Y2c=u(I+e@0RjeMkvPBcm
zNspijAKG4hRk?y<bm`9|W*<*j)j;f5yjYhp{p|(U&K9IJO0|FA`ftq$wwJt1L6wA@
zmJ7^Fy^jO!S@e-#P;ZwXdRZF|OzJGufx6b-91_v9DLnN5j<f-R2V8Kpp91v{Z^TFb
z$xNA;bjZ(fnR9k(+n^td{h%5THTp-*JOA2kM&Q*s(9<LT{Q}B@TWA}si2^#Nr@wsB
z`?dei?>Q}fF`&h|s{Zo-#IC>^N_PD4(<22%t<ww;^#PTvS-)Q}UiJcm5ZV6FT-zn~
zQ6rDPG_a2zn9M}ahzssYA<O5J@sQkN)UQIp`Gd{%QZO*`!L2LJr*f~k8-3mpC_TfX
zh2%!!RB3E!oy-KpIgn_N?k+&D5v;dDJ@Ae$*MXuM);9;|F-HG>%Yo&kt^y7;c2ekH
z7k-9`c{`(%E5?oB%k7;0_|%t~>Id)QvKg&<U97{#ZbCdJ9J1?z$~t{;DFE7BkQ^qs
z|2&oqV7rxQ5y!JYU!JQ2;lG{8a=`8U`yKf!>;viqI$k%dh2ppYHk~5Kr(xV^q*mXJ
z@5Ej(@1pyj`)hsh0-sCQ4)U;oucL*Uq>$aBkUAld?p~V0TS`n_wQ<~dRyAo^8nI38
zn8{>#z~m^V478BN;&Ma*o?xJr@=bBk8!Vl94xO>*fZo4)JT_PipO-i*%?*9gabdu#
zsie75D(<@4oym`X)5U9@rywp7lb&dQxbo}(tJ`y-68;Nsg$nxY710Ow0QpEt&$VaX
zy$YB~`bJ7%RVksO(+<}%j6PG|-Q-yB0Db-g9tvuoZumc~NdTv29PHGvkrRT2(Rl|N
zxIP>`5Xx)W|BjWluwrTwMRmK*{X>FDY(yiP;kdn#_u5fL*wryeT}KQc!##&mDTV-A
z4f5TwMW$M5BbPLz?Jpn#<Pw#Xtlz5npA}A11VT$pIIlRsh38w!ypswV$WjnI2?ZxA
zXtu(i##LUsda+TGL+KJn%inCbxxFXS+wK8CWNehS5?CIlF}1Ii36=V&y2D0uv=Tn&
zlf<Nk$(Q428@%bH*X)aBdBr+W+3l_?JDe+(t<Lg%n+_iDSFrhD&)65Pg>xAov?nL;
z7qtJ+BFLITu}c=c;P@LstPI=sDxy2<LqDZ~=rwlK%dE=?V-!=uBE=K&_qSX%CWLR2
zKb}U>ye2H!A9y3`y5gA0;0Q|wweInanh{3Qx5Eq~X#Cr2BEb!$Kr#mqf+1|C&Ig2V
zk|j=QR_;i#bs=qefnlEuf*u&rml(6m6ClW3!kOU2I=*hNk<|#nw264fV`skcaXogW
z)gx64^f`1142y>=iN~f_3V*?RQ9}}=9?k%C4Zt8kO6E1v7W8ljyg5iKtDC;^KdnOl
zIa<+mfKeF7LqiDGt2$a~n_mWx-#&O!3U+;07?|d$R{6|&JA#l2kI(RaR+CjhL(vJn
z4Tk*)Rpk`rRQv-+iNpnhXnyyiF9r!xCh2Fq&9~tRa0BtdKJsK5Y+JrQrtcthS=Lu_
z>_?fnp!l&^$r*6!ym(^?Put;jS-pz{_wa5Mhsozo6^yEq>NO5Cyq_Wbj>F&i9DNnp
z)L6qI$6)kOZ@-);?n5oDO0@bMeWi-;^;yilUu?NV<Cq~f%BH7s0{uJBz?sTI<ao7y
zUY%w0&!VRx+oL#&9GNFPZEIa!#O3#D3mvB%_Z*RDw73y-M1&#ibYnhxO%e8S%44p!
z&<191b{<%qy`7vL6IRY|JQxn$ByOADEWc#Es4ozqUk+RIgp0QN(RXByRsp&m3>E4V
zv`$C~^Xiukmio(t1$APr{2yIk9aqKIeGQlH?nXgEN?K9@=~kpuy1U~70@6q~(nw49
zr4ecA?(S~h!T3J$d)|NjFwUJbd-mC9ueI0eI}GMF+GTs}lETd=9-0xI&m!RHzg{Fu
z4@OckN|dgs&f=IuB>Up3XUYzE7($go8N%1)=o_7H04xyftl_FXj`plC)OB?j@XYh*
zp}Q~#-=SV-MR7GhWnV>0US~v(NrXf_fh@Kjx5b~QWII_dM$4}ft)9m?`@h(K6_ipA
zqh+APrf_mYXBG6x+BToNskgFlgj=x#jpr=+`SFyfjb+{CrVYZZFFrMs!~)9ERCSMe
z!+kRIwMdPw^lbiHYs_FMJqpyotkZt}z=ccPY*X~P(7dBblceIZ<mILbPR|ae2k#hz
znQPs)FSsEF7B>R1!D_8UL80=)vo1B0nu%m(bAvDVI7$AR5M`vm@~}6iWVjMPj>ZD#
zgVZQyLGA;GL~04JF{81<132D^4sO}_0@a%_rz%j>*2<!w^Dh^mrp7C-_B^QAvL>#0
zm9oZ8?riotqlOWlIqs$co+^ineORT%B?Z)p58x=9L#_A1webXpCxdv5m?astj|{d^
zY|s6NJ9{>|{>^0CPWZ|iUs})4>od<Xs}W(POp|vld#QTAb2Fede_X-5(|<;{s0-rV
zk`QN{Exv(I@;e)R)$ruLTG@Do&xBy=PlMm59oW$JZA9A8fif>vaxsKuV!2z(JzF{n
zlMTm^08_s6_`4(`N*PCmdg9!iQtDi4pnt!llkyFmKc(LBTTdIAUZN6tNB#0I=$@GP
zc=}5eW(5g3SICa`Ebe|M_=8<AxOAT2hkKYeVV{ltb!v5WZsdi~Zm$^^cg%HM0~u-Z
z*pqOd;1BnU>@J)5hvAw-1qIq(W4FgVp=LEGlPHOK`AX-FTq<VZWK@8uyaQ}k2=op*
zq2*>X7t4jQ0&XO0UBoK}yewiPoupj5vPfd#_~zCLH#dBC<Kg-In1MVEi%Fg!LlZvp
z7Sn0u_Uq}l*ml9lj^GdNY(oycbYUUHqCfdmk4A}Ar8%=mNUj>=Zi=?zD@|SQ%!o;M
z4(JUVmzP;JYo!Y8`}T02m04tKxA4T5f0>+cw8O^4qb5`CcWC0S*EVhWkV8hHWojrg
zLvVKx=rPpu>f}L^Fh$zcd-r|GoP`@!)`^5+@tO1~BwsFk+Ih{Re!@r38`n9yN@(>?
z#aq175l%(~)S*si)=R$TVJo$bJND|^SVXj*8%0idm*~CLkal#=PR;xvjtV|u&4WOR
zx=OZj`$g9I9m~T!p=TONSj2sWgr~PjciUwXODSL0J-Qo7&iXelcp980pVGX%RvOJK
zwcNV~E{uw?yJfX#v$X};EgQAC;!)Y|30|K@7K|1^nBu}a`T1QxWxBId@H**8UDaLG
z%$QF6c>+)1lC8ZbD0G`pGrif+>hVO7AN&X&b}DXg0{LQ%_OQJ=b#ryYFG47RnJMkc
z;4>*9ODa0ugGtOiG^y_?(M)k)l0zpXib|Ed=pM$7VWcSp%VVDv-IT4Em0q}*!q-7d
zcW!#@Qunn7?1<wA-r1P<Er;LxBvMVxhr_M<I&LTPkr%4wvE6hE%%DIF7z{x~kMl&&
zyh247z@0<*dC64S7f(mh$`~sr7flY@SE+c+zC@m^-}%(9oj#q)Vr<#BD%pH*>lE9A
z%Kc>RAN0`y?S}-|z?!AK(+4etu<3J));C(*P5P0qgp~z%p`+eTOx$Lz>pwb7H;EU-
zo%_uj^S%@kCse4Zxo5q=K-y|5*ErcrSqm9!-1xSqVv1#OHS;2(D^PgmJ(kO7!Do(V
z?5q-7;>V;{575Uo*40lMbLzskjOTu=Wgg{AvZ16=L-0^dzkHah70>tNHWh7o@(ewi
zwq|5>Crikv%+T%59E66f>RIl=j!6#)!6mO{2Hc23$*J|J9ft(Ox1woFwC*!OfAdri
zy@xN8pnBpNEtP%zGW$70@m^T%R&p&2QWB-Dod<{80AhKh3LR23sCq@wkaX>#=4*>c
z7y1lVqS02sw@p!OS|*i}yCEl0r-<>UXR8_2=Sg{>5HZNqbi4XO(O893Uz@v>hS+Tw
z76mv>Vf^**9aE&g<W}!N+T^n)jJ3B6+wNMIn=mDrieZu-u#|I8m75H+#B8TC@}{vE
z?{HB<4ZhwIQC=6+eYf7bP_k6>!ar!OOQ4yvA@WnD=_x(ea(~jrgJ{7uSpu8dDGPtM
z;Iw@sQKv|C=b1nMRLSkhcE2Lb<g&e@a(7w#Na0$ma_ry^u4(9q-&o61Oxv6EjqgX(
zgGfj2xM3e;8}wTp&zf3jIgp|`(x0^HVxB&DPYJXu>-_8`+(f}MmWB<sFKdqGL&kT_
z(v9L1931Gj;QT2s1<m?;mp~{CGs+%`anxX$<A#N?yNOlx?qTxY<EewvcBoBPz=513
z*iO1BsX7}<VC?*2qn+k9W<Q0GPqTaIVDzG3cH&DvG5y`qn^weUsHyiDUc+2gL(fPi
z@`}5EDLcJW02pTsJe!RlfNkRzR+D5Q+@QOn%&DDrE1OA!gC#Y(0YR_e8pCwWwSX(f
z=Q1#dmX0#@?e5PpwIHMwg6)&^BzhJQ6s_g<b|EzM6-5Mm0ZMjr!Ij<GM?SQhukeu7
z`g%d4iyDXQNn|)F+QYSY;qGw2>g#;0Wd&V#L+*Fe`(~TRfj(+J3y)TIybpO$vSYjh
zvuGIZE0hCb6v#$H#>h{-u678E_La?#95EXOv=1bMFKaZV1v9lis3O^s2fs-uHtXtc
z5GS0?kH$v|pSHqWWGl)<Yx~hEam7A@2h&~1z6)Iw=(a;ZqGHj`nZDw+Qso)j(w~+7
zg=M5G$bswHYg4(rwyo6fnu)SK?bCZ2waUq-wTxY40noZX*$doX*odOxIv=u8P^vUz
zWoUE|`RGK>OIdy&sTdbyGAJ7i?@Z~e$E$ycmps^cYBG_aGQ;UP?iKx-RJJpY&imA}
zXN2(b$qVh12Z_Cd$nQ78bx~w2%{hAeOA$S$U!yhgO}CEQzR^zX27`Z!K8Co|LeV?M
z3WNI~)N$_>SuYARf|IyXUOoFvBQ~wDPwvjAd(2ib1>CfK&&jRi7nqn?t!^$x%C1bZ
z-7N!gVdr;0%`NAK9MeW0pBH)?bV3$$yX^MRXdDGVYt}DqpRhiEbLXKv|9+W-GDP5v
zdmiLWI1l*=SJoMphMLgAOL@T${6Vtpy*o2M$9G*U2Oy2#giSQp+)$z>EqI%wlx%e9
zDaI^4=*;^1o~9GvcS95=_uumplnHhdm7W)tzAcDomFG2>E|r3su7R5$@vQrSC%^|q
zKb4d?PiFNKp>-_U$t1gUWd<?5L8n{stU{hC%Qc*E7=$5Fx_17>^aLz7AbgJJx+I@d
z$`@!VsGNO{5|x2AWWL=#er9^zD*Jf6ey8YzVxsa-nrFRVi@J1B<2b)_f{G9rK>-eB
zEH(Bgq5yt^1dEL9^IjV|j;W%>ZZHjS3WMI?K4rZreChDrC~ZWhU!0Gwsc%5^wX?h^
zv4gs{@+0LQA_X;`5gbb}@)9OljCD{vk&JnPg9Pzv=Om<Pl&MB!U;FTNZtPD}f*}qD
z+J1|$@m<tcwJwI^D$1x+67sNd&#sC4@DXm8Vqs88(|tKdLY1MYU98X7Gs~WT&+N2I
zD)y%{EH{v?X^VlA<!nIZ?(83S(RJ}*p_K%)p1t|1$96>m?HPO&2GxFDtu48yq1mT~
zqx)?v^5e=#SlIWODE@f_FKR@xmmpIoZ&JD)yP)dM8>nFklS0pkAhxs7TRGKD|Ka@+
zwz1Rx{JUdsQ$058Bi`7APdNHo(9v@AcQrf77PPT@lX`a-BZI2~n4qnI2~xU(y!Gt?
zs(x02EtgU8{A;FQqeE==`<Y;(qa;YB`aqxk{vcmuWWtA9mpZ3b2U#eMqRz5W8Im}s
zDH+qe=RQRb@V+g>5A4q?El${nUN?Q-AE*mPqw5H;*&Au4Uer-W7Uqss3SHIBr%jk^
zQInK6YM9sR|C%L~(ocZv=~(*d3SN9?rNoF=l?8O#Y$mLu3|T)j?X`RChztL6^g~8}
z$&v_kA%wsU>Kxs>Thy=+1c1(R2=cy1LM4X1Jqo<jO69>y5G2c2gS*fEhV5|7P^=pr
zW2cXVZRZ=z=01DB#1Q*=<h3`Ai6m@W>{OD{kQ_3xsqc0dw7?p__DF%KuuPvz6)9@8
zQCv7ecE+@XDpF9Ma8uo)z%%s+G^&vJrwF+1Z;~)RXcXm=M>aFzX8#ZqVC<?S`<YB>
zwl?A#M_^B`*IgBN=rMx2YC8GNn-r5Gtjx!@(?kOOm>SCGk_?Akw|~Bm?oG6rqG?>M
zn}H-+wMa8`R$TdY(N^-9-I}d}7e!Lj(fAxr&S_JFzIM>wf^-9M%m@;6)DivhM%raj
z(0lW*+_16M-=79g-NXqYjH**x#<bSljKXkVc~A==MGD2pXebH(Y{ST*gLaA{Hu_}B
zYwuok`_QR*lsvzojdLgFbCqgjVm6YHqQAPSJWr=!6bRUx2DF+)OBvRPoN{h3go9{3
z&n%5-F`3=;&#rq*3N3(j&kz>F0_au2FO+tl{l!}hpJ9@rIc$IMrqo=8U8uzh3N0cA
z+fcE<-B$8`T5GKI%Y2<NKu%BrUqz21%4}{qZ$1N)pKXl9s;xQV)c-jq(l<Nl?UOoN
zWj6ZZ{G1L`)e>o#CmVAC%zM6yYK$ylCtsv1xW|r{X`wRFM)00?o1E~4oT9V#loqPQ
z;&Y~E4K6TgMc-!_6|RQhhls_*BWMgV74b%S**|FZgL<iL@`XN>(agan21q7p4t%#g
z=A65Am&!gVuTH3VB`<aPTGIHN3o3q20q;2zXDqC%t@>5%X`1rMamWH2;Y(Gs&T%hZ
zw1{DM=knoD`{*}Cr)c`OmGm!^*cc~O+-aZH7LetJxH7gxfam)AkXs6rr_`pV4{}mv
zH-oF%=0;@fT!;1NtmXnpaS7;ELVsRtDpP#_*g4rw_r9hiQQvBFf^*1w-ux#o5l3F%
z{`g!1=E7%II^DI8i4QHSU7c!@;yKpRy){-BFVUq0F0NgO;}5@1i7}(ta^$_-AL-v6
z6!G1EfWAJ7n~B>jbf<DNC4k6WAvB%yW#uu)hA3JWX{UcvFtzOum1~WEY_TzX6UIyE
zdK(oO==qltmLUVjtOe={g;psld*C2@31vP3N=xc&+AY-rOPh^YRK8<rXQc_!7<wye
zwV!q4=A|mb(U!TJLX^)%Z@1LtE>*zUIOe&m);nh@nDen`B@8O6OC*uApxD^5p`E7)
z>8z8IhDmIYXgFv$&ELT?bsy_6_#zfRGR7(7BQ9rMQ<Ye;r8IBzOaO#Wig}EkLo~WY
zP20ky)&cF<)_^Z+Kv%ZDbU=lH=K94vg0n%AQ41jsXGCSSxc>06;Gs&loK#-sV0RId
z>GG5wsnZ~#Ux_7W6hX+ADhCtiiD<p5i`o=TzskFx`zFEAf(bTs#1+$KO65W3IEGRy
z0yNVR5v*?VQ{3$;4zKu}sD&z+YiiGlvwfOXdmO%oL5hT^o2uJ2o^R3%RIbo?b!SGE
zIF^0Ze&g;IZOQgTh!$tQ)y#~{TeM45f?iCfciU-lbEXo}VysDAq>Ppp_6NZZgT@@I
ztNa!yOr?;B95)?}&3>skdkzah+8w@9QV7jm_qZ1b7fC&7zF9xak{i-v@zqewO+o+A
zpWzbee%Aq~cX&53g9aCrqQrO2>K+T*$uAo4Xsz0+&fei`$9fyz_Qky&kMy}eq4+}8
zshZW=_n^~J70ePlyZdAVo4;yHVRnc5B-M!UR*ot>U<0zo=gAxsgf;K-V*-yw&=x)I
z=TFwRFKgJT`@F2?EV_4#btwE6pjibFn3t}kXpDC?v)4(vC&Kd$wyyhPH-6FX-$_5B
z!Q57Fi>24c{(^nN&`^K5c<C!S@jk96KGRiurR|?_=|1@|ulX3gs{dTs{u02P^ZXCL
zJ^3ic>)3P3VfHm`M5<li4SxS$BFX41k8C|5(O)whzhILb2Fi74Q8DOLKA3a(ww+OE
zQHEG~Aw$Z>w+Mb=i3E{9g`WDKgFDp{)*0;%n6M+2K&JS#jbd|UcIv#vl7kv?N*z)Y
zF8`uV#$*94?3gE9@_)Pc5GMRu7c4?f<e*RGEl(cFBpxuc&gplKs-Hof*q9+JXKa1%
zOR|Llr=#bZ_aOc1s-9F!nmw5-XQ>p$zPH?cQ##Z1Vpjc*M@9d%u@~0?XUw(rTh-)0
zfD|~G8qnEAB}F6^wD68VKm!3R)a{9y7If)<t>JIjz(?d!+Ft}6h41eV6fXFsi5v%|
zRX<6ASgMAjS_Y-slmtFhB0>DqEB)7v$APPRi_bQu{=$iL(%_Q~z$kewqq=Fsbe<Gw
z;s6MzyLlPu-xU7$;<r!$e!&Q#ED!nnFEPTDyhNC$a^a-qEp`jdkgxB23JZTN%-_HG
z)vyN=%j0Cl+aNvtXMb;7rU8(8)G85O4qx5CERB7I#=?T+%A)$up!NIy_r-CKka^LO
zzV$yB)7tElvRV+9ITcqa1#}a0#~J$xUFR=(HUA&rLki$%y5tbcX`}vroD5`?+v~y<
zd>ZzjUj7K=Q2GX7zJtpDvChIDAF0B~ycWA0e;4BABU;l6$}oSQ!2>>w*MaxC{sgum
zd-~r<@>?qalP{fJ`BC@>4Sj0`zV)Ewz*TLTzuzeW5VB^?G%+i0rnrCMXuqEsj0_Cs
zxWG{eJEi{)3<X0tuPZo0enK9nJ}+OVy;YB8%jrp-K$^cx@fV!PP<k}_%^`fF{RcM6
zKz@vhUtEYz6n~)$QcBP!V4?hl8-?XR4a_rqv;p4j8U8<>_K@L6E`+uR)@1GQecJd}
znhjhEUhI68{(HCQ|0W0c8&{2$0*;7MoGFcj09p_Q>m@Vow^=&Atkh~4Z8bNR$@_>T
zEhhq;5s2KQxiXcA&r0`R5mbhuG%u4>p4|C_o@6Ryi~Wknc?pD!Qo0zB5Cu@aqyP<A
zbxt0>i8jl#ovfq1FsV`Gg$Npb#tW$&w(+jik|F~ge3dRI57}Qi0D$$r0I=R|eAt)Y
zxGx<Ic<As*sjR`0#5x+E+j5RxRw4Cxybv`g8ECx1g+4Ma1TUcy_=#$r`ZqIT<0FL7
zMa5xi7OZkGF%ofVmEQW}Og&S~dV|JcHi;-F$En!#vSKH(Vp;G8xU?laGqbQ~aIm{-
zXJV*viY$L^^}~C^W{N$1yM))*<$`|Z6Qu;^MPV$N-y%Fs)rn?~IRA#wIsij+AG84j
z7{JVvx^B<VuuHDD5dX>P3ausC-3Dy#V3N)^9~U{&00bEkU&+Ep1%z^rp0Pfx{Y+sv
zyq<nIZ5QavC4?ImVOYxrcMO*uCLd_cn>h{|_V7Eu>8hQ@^EY8WB-{|*C1O&mI8|XO
zrMJbz11Y?I56BN9g>g)~W+4aS4GE-Q6(qZ-FR8z_O~%K?mXqoHC4lH^`zU+#HP`?$
zypKQ^=9VJRLjM}Xwlp_&0t}-&3C;SIohl%YbjZsf4heu7Vkdxawz$U^?-eB**5MhG
zHf7^)>}**SzD=5^i<<1!nb}y5aP1|C3TBDM{{tru^pQ69LBWi5i<Vo&r;DUwgoTJ|
zf6|lMCDr$S0tS{IH17;|rQ3Ta!%P1LdD(M-nqf#n{<se)d<E&#UY<^!I9krX71o?U
z=B86X`iDyb-nF=48Csx_kb?(+G+>9J1#JxIKrGR$4Z>}3i1z82ps_Gp_Nr$n=gq6h
zJ%pyQ?RHm=Rk<sH*HxPRHSDfm_1|At+#_qiqWu>SUP=dI5^T7I(4ov$Sj^HmmJT2u
zW7?hfb@1JvSGpkXa$ieCk4YIF9dl}5fnVVAI3gpW!p?h<V7{_-r&#HRIXV)qFghRC
z<wXH~d|v`7$n~sCVd7|=!!4s<TwR4d(ylmLycv#*T%jPSTiPQsUtuf=HqcRGG~jFg
z+s21{1B|2NEPss!3Kt*)-}iF&r5-8fU_YOwX2<=+O$`j26mqP{Frsuyz}ijhHZ>+W
zYLTLHkqivJEZ~XJ<joA9v!z_JOTLvO)Ww7x6Da)JHw9lTo45R8I0L%ODzy=kn;LR7
zHRJG(>6y{9;E(KA8NzDFK^F-wrBiN)cP7$3M-lI9>>n44A>324ICSq4aG3d>gnj^>
zRgLN;tjB$dn`Y=(4&%1WGEeIYQU!ffwZk2I+ep@>_Zp$99)lbWZX{w&lJE0M*0B8>
z#M{yKN8DtowE1&74*M4)7U!Ks81D8g4>9mJtVfG#F0{=#5+2u)d;3ajjN5Y(OxzFN
zWdApLGB5(kGnULvn+FJ!anON`3tCB-HOn|CaqR1yMd>jnpHlkv2Zfkv?Z+v3Z6>WT
zvfM$kE-EH?!lyZ^M1GT`KdEO$z)A!?-=VM1;d14ewAEvV6c#tq!3_t@XUyfVes95l
zkkZF)a>`>jdBAoJ=r@4SDHSGi(09>-DDF1=aXAQDPa=)e>Gcl8C>t?G#J`#<DV5QV
zmeD)L)z)8#*3-%cPtpT|#9>k%))r{G!kUiD_C!b)3+O>pbJP<xO%c;o;I$uX=`S63
zi#zT9YfA(`TUNpW?q5UVFL2AAQ37J;A&YhS%HPC)X#wPD2(jX6IIy>C4YLnXAVp_I
z6>+8E1d7$K2wTl+-dWf<v#=V}B6n^m5!AZjCA<(z!(s;58y8D!G=uO26>V4fn4kyJ
z!Pgz37_4ryq8@l8#v>bN3zl)=pI&4>2c{KJz}e{+%VFPtvYqC<cNALYT(CF%($Dqx
zgU#?U0EQX&Cs*3%AMqJsh`Mm&DQF4Q`v^EnLYpPU?D^0dZQ@sAn!nD9<)CXm42Npt
z<ZYi*H`@t-VnbmYYQjc^Vreah{Z_Fyy9l@@OqRQ(m7Gws)b?QP?-b5-qIDBoZvI@u
z3<2F#wNPj{-v-^$x9q%Rs^<2nA-Zr`2$POyCV~H<oayjNn%;-#9-fwEHoyR`etWI{
zXhR80G^{Os%}ph(s1kPEdNvfG5TGXElo|t?K)${|;BTz2JC9WP4+w(Cx|u2+m`HZC
z(IA^>Q~1a+o%@VDtlpR}#rI$9sc{@^T59u$r#EW^cBYrMWv&&LZJvxx9^QzFA8_7?
z|Jj>_iI7I0XE{wh|FsF2z>fM{o~oT>JJ2c5yS;mPy}x^<q<w@v2n>SB;_t{m1<jkn
zn<It)q<~%I7KAfhIcxa5AtNGRT5ya`FBYul>M3cZn1KshZ2|4;2j+KGeBYp6qzIEB
zKtjlkUVD{&?UefYqm=yOX(IcfcRtFs5LS?u&_Sorvu{JK7hYSiW;VxDuU=uYcRXC*
z1bzQ>uy@7}(tw8RzR*1zKVUQH+`D|*_#{O}$_|0~Hath!_=$inw2{Dk0wpo@ks!wf
zCfMev7)~04ApYg%gA3*L`MzF3(D(ZmuI@$1U2B44-ghcf@i)6O32tY2w}<}w=9=p$
z^P}??7D>nCag~H0&)Pc=G?*$e(tW93u`IP~@v#+X6epWCy?)p1MVh?g^}1`!&BWE)
zxY7X{d62C8Q(GpoBhl{fr33Ox&f`#1j`8=nN7{lao&wDBc4iVc8Dfna7a#h5ddMrq
z`^}rkSTW8$lK?R~U1gxiOyt2rM18JJc^l5>lgbC4&@rZ*rTu1r@A5PQVH6k7aeFil
zv|=VNrl7ftv&A5qp^5gnu)EW~!u@4ip1n9f&ms~37CP=)dMi^BX~|xkffd0AN}79X
z&D!mRxx%0(?ABw;BcbVqGsc@TD>1HXeiB3s`>K-N_U(v=uE@piMa6ba@W`|?vA0(Z
z22ni6-dH__h;}1FA%V4UtdxWUErRQNs0+D>r6ajwTb-Hl%}WLA(}Ph7zxH2^%*PM^
z>t`VCzca0LEym4&FcAO`eKEg+cBH&av_w<)`Obc6PDS?1GRnass%RHGo|Gh=S{@;&
zI|4?)9aLe2mxb-4-Q=_SA;bM*dCb5x5F4|ixj|r5Z2RYF%|c8wQkIj#EMW@!lh<za
zzU!GqIpV|RI^`R<i$BkxXKC@I#6o)>Zl^9LD;CK@T})}6R-wcaB`-bJMMD+rL?Y6f
z@x@~{UH328fkcovnNp9CF7F{C)t)K9oWykLPJ%D*B~n6h50C#Wm3wof?g<I&0Uqzc
z>E_f-q`MaBJprFlV=xwbHPu8$<t?>!d*R`cJKoOup6CaF%y?U`H`Krv<;X-b^F(C0
zzm)wYLUS++x|X7u&a19!I6{J_y-or0HNv6y%hsN5AuGvPM8rV@z2zJ4jX~d07I7}g
zv7w*Jp~Vbdl$z`#zu;<&*nnw}+(1M0q?j4oC4I1hn6wNKl2s7tgko=~`@k4o>x?-U
zEa;YXf3aDRE9w$PMas8szHFTfV%&__CyPm(itAcD74%@E!G)fCxzlAihjn&GmDKDT
z+MjeGQTmFo#)0Cv<Wo%+;e>(*Rj?-(LsOvOTYQuwms+9vhi2$c;{DF0O8doHD9g<v
z13CzihE^{wuN*8iN+rJ>ui@WPGa1@qwG?T56dM+z5<$q?y|Ih%5LvRT7QE}-C@f!Y
zfa!@6#Bso@{mUZsfdPD&_I>=?m>-j@hA?bLcMHGLHP+19dE`h&HsxOAb-S=j-PHRr
z9M6ZQloj`hl4T^BBv^|%z|lp$(e3$OB#3&GiF~`FI-1%tILAQ$A$)KZauSr-0?9c*
z^glPrC`QkI%9DzQ|CbA}Br$QM3Q!nMoe&0c$pWM=q7sho9r_ThQ1W)4HnuRlQ{K=i
z(ufZTU&3K^%<%A-ujkluQQVf2NxBfYcR1@#sL9psLiFbF<8q4&&Yz@)4X23UcIOaR
zT)zmq8fH~3;f)$z7xW-Z{?u*Up}RIY(4%=l`$p)5{M;$Qm$PvG%>i-4;nH)*u6?*$
z$1*|R^-leX0kq520(glOir|k*!Y9_xJx!5S8ek39)?GSS$lyxbLVO14cGd4_J1hg4
ztvhum2Aq#-86&HfWKq+u8TV5OL$s2!STkGULrKU!wulbBb$#kpPjvRI^9kn_Ugdjd
zhQV}ZZ3cu@vBkMfancnLMjL28u8y{q&ihS$DileT^#!_JCyag0msYIsa4jqCdP}Ma
zV?-<QR>B^$H;8TUGM-Da7N4zb=vH3Z5)kwAk?e3=Lwao}K0HV6F6(T`8Up$U)4UWS
zq7wmq-6g3<gezI66{d`pwpS!XYSWN<kD`%q$ENemwF$%l0t^EYndi+?JfZx1rDp}C
zs}0rS58yjCItU6H^2y=MfM<`0z-6@)T<|wr9_6Ekgz!+048<MyC0hXuA<r5d@6`#h
zJg+;p{0*)A#2bWW`LdYj+NOT;f6I$mJLq-PmNgLw`rm_lB0$Td1Wnto;~umTbAnV#
zV9C83UCvbNUn2(1_O0VH;ua|N<w#%=<gBB1UvU&^w7^=EdXTcy3W2!Kf)Bh%VP5XQ
ztXg@Bu&D~HFHp!^3Hc`!d2_N??_^xC54MZ1+Ba7SfpE~5cAkhwh2%;sT$2oN9(Rwv
zzs}0x(8?A<t$4}Zx%g#pQM<hC5X#%()|T^}lo$E*_|?JplVJ^k(kbKjjhFg#(;+AD
z7@|Yn4Q2Hw_Lnb*a0U)L9t7?MxtRI`dU6lIU7HtQz0OwlSp)<33l~JXgz}(;WLG#-
zm!_+Qa_3=!3QEsN#(gVzG`sQ6NP-i;w;0UbG%OO6`$-C{G7`ODK-EE23%3k>J)HY#
zHcot!4z(<D!ELl>N$HEckVYmi8|!usmO=y(X?`zDxOLb2nIt_(h`w;2(DD5g!mI#t
z*Z1$029Y)Pyv;mrLbRS7$amScrUB*ld6X3sxJ8qRpS(nvrB;HeLRf8eja~Z?n#0tL
zFZ6~oDaxED?>6Vlz>N!a;A3rto1duUUXbuc6e!e_-oh0%qVDM?5uwJ(7i2<r9#G!7
z2kl8K;zLKnUM|A7=(BTZe)}pO+X6x1-gySb<E~rm?NyE_wFf^$#y^olev)lqP>2g!
ziF7wu!@O`>jyT~Q`nr*|NjF#HiK)dNp?^~TM4~<QQ04p8UmEa#&~6@shM^2nZUBj-
zf}{y_HUx!}fve2H4f_n*0&yj*AZM-%;pB0%QOO0%a!78S+DfK>4EyYR3rA7u6i8ut
z3pM8kmMMPiXqzS4Vx~26&m9^`i)4p&_rT(A=Lyd<BcI^Ks{LW8k|c@jXlCmZBvPz8
z%v*Ivu#Fa6{~Kiv<rzDtS6cm8Gs$TtMP20P^k6B1H8og>z)KR2sG4W^Ivy=JEgx2?
zb`)quH<jcF9WY+wH-^n_p|Iu;f<{}sDQO2?l#!B%IiPQo!7a!>MPjXoY9Cy7gK0}$
z3cH9g+X4HX6-s)TC8J2F+bUT#o{HkDmGN`4ZpxiWK`1|)(sOt*5e#~StMil)$kuaH
z&4x--8idB!0Ig&fP|q7HK_6_dg4`Doj$vKen`iz6<brnyTpr#~Ei`11CYb50*3Om7
zwF!})o|h56nT&L!9_FB`{mwgQa!9pzI5o<d&GII1hAF}&7wqvp?gDaMK&bya)tC&j
zxt*a~H&YCozr90f1b`1a`wHH7?)Nzi`K=2Wjl}1R2-pKFjK1rihHHr8Co#q(h`+5t
zZ}pFlEqb;cQrXpe5!~I5{u*;9msfYZLFGF|vbKS$M~5b~-<AwGp3IiOOBE|DrCl6N
z=4&A)@lu3nJB!_+91&iOy4Rnl9_&X*4&NQQoilszT)&e^*!^@q3?oZm5u>CJrKYE-
z$_qK9Rc2zd)szvbIr#!FDQ3G@ojS(oU2g9E<S5zVl*n9fNk%NA`9?rk3I5oo<@>G;
z-uJAWS~fc<Z}PxfS&;3bMO;i)eS<N(>1$^a0?O-BRNQmxB9x$w)LvLk(4yhl{2Q)s
zpTXC6VaJvE&$x*fdU?h<i5CLLOAsPY4v20;NN>;g<S#3_Qa8u)NcgwM+JrupUrJWA
z<<}UqcToK3T6*Fb8O>tkyTF*p*YL?YTk}=ne#Do;*7p)-xF>HC;nS1<=Ej&1DEokT
z6n6PXV(jDDuj3z9t-}#$i5XBUi22oc#%>W9g+m<MSk~Om3E5DLbjS7HR}FLBk%w#z
z$Q>#g8<TK5+@l_6ckZMtu4?+vrgQ5VgxgX{my%>DPc$q#xIJ5Ene-X$``IHm<r5~E
z$MkM!x2D-AH#b8onLy6?M~LCLU4XqFxsykolschu$t_>=r49Rw`z9YoPR%7M(B*bk
zZp>3SB7_U7l_5b=9#0H%uK^sQ9~*j|VE%&swu%DPi?!0)jAX1*mFm0apsZLn9<!TX
z%Xqrk8ffVObu}Jk)3y~k3f&3C4<^PGB%BA+#X{G0x8WF11Uqv@rh545F{JaFL-v@#
zh}%@n+BQPuNGGC8+Ze3uP82Wh`@3{V=DYpHrcChggU)*=$FX%1dA?yFgzvY5pY%#*
zTcgav=vbqmcrbJ_jHyywA+eDFE+!&@N8MlAFPThnym*m#xGzLeZUcQ^+YWOsYU0rK
zO#8(|zkyjEBQ7@Ac{6S;9(6E^s;v)dcBwoR{h|IovfP_uWFWXS1D8tZ4hs9{Lp1*G
zTdAXeoI4Nzv%6VngpXQ(+QV-N!F@821&Rcr78kAN4f4f!9iPQTpgP_{ra4?o;@Q1+
zEgjtmBBIEsg+3BsJJ3CixpH|(UQlotTuHc1qSdJ__fHmrzc4{2RS)@&W2867OTlkJ
zZ)2rN0I_U(W3c^j1vzuUUhnrJP!^K!<TZZAPV>Vl-n>-NrAeG>S^FTuhal7DzBMlf
zmwvf1Oi_prc@P0ULt~MygEyk>n`>{;VHY&vjhXSSkoyG)|6Sq(^eqbF(*UE_^(OO?
z9MhN*{UjevjK*^-GgX3+w2#M=)aDsFRGzZijd8FHNsT5Ym?XamkkC^%%@|GR5ao!i
zf=JP$vh+Q;4)zfZpu+T_vi7aHrv>uFUtIGdlu@v>*z@kugr;3lNi7A;{~R|sQP!TU
z`S83gz<=pWUi4v84aPS5N3Olw-O@9=-I*wO{+F;#<~lY^vNKHwn4uSw0e$V9I=Tgp
zb%u!8PDSmb)i>q4-xU#2(j(@W*(MuT@K77Xw7yPsJhjjmK@gL)XLakKlTr01y^G6U
zPW@!peB5v}`B`x@wuT%h%>zkCM{$Dh;fi?`*f^=`z3DRcrkS19tH3i9#<r)0?U%Ph
zdLE9)@-ElsodzNeZDd-u^42UaZ&TiM4QTc7tcC4!D)l))$h6d#j}Kbfvu?-^qaO~Y
ziW$khvRUeD@BK>!r~F1QE+|(Xm|H8VOp#)CM^d8ygobLJPqb8ylG+s^FaO_ePm!W-
zH#(qrQS0!%ayX0(#bO@S<;7ED;uJ$Ef)qN@nm4_3f?Hd>h})jrX@n%<8w4z!`QmSM
zPoF$_&W?4ie+KHzlW%V^o+~A`2;ETR4@8@q_bLq6Ilqeo*NKd;3^+UM1!G;c$y<hX
zZNg+lRyn;bE>I$VF|NL&eTQEfC=@orOC;d}IbLuNtDCqsunu)EUC3o3O*Sw@IawzB
z({mZ8rhKrPQSWNE{ZqQp>F$AIV;}wE7apwCDQCy<fWe%}`dF}yc}sT~N3&DSd~n6a
zfWd?~ky1!1AN`3Nhte~P0FW#lW!h4G^+~#w$ogCqp{XdPX5~+T<#g4NWu2h8cS`Ro
z!aVjE!i(MEG+^#Ob@pQ-TCaXD<Ndo>bVHQT&B7J0Jc|Al4K}Rc=x1Qt6`xtnpR`^#
zdyr~N;fMQN;3%4m?_%VJ%4O|}u|V424WoDQgy+yIISm8BIvK=<lMZp8aa!z+6_QO7
z{t?HmcR6&kQ}mOKn&=A45r4R8bJ?$3#c+vju0qyhHDKPpddUXoqHX<O9VjM1GQtYQ
z`IEsPkVVzc2hm7A4K*e{nJa0j9qhaS_`%8)c8_qe3|*avt6ndka0y|^L8{^4F*Xs7
zTK~=5*5}b())>h7zcyHKJ>2~*PJ*CT6ZLG2aBVbB*$1RDV+@!jN0gI)voHPKB~%p#
zOiY=4`k4RBS#U8Pwqy9XEUlFr<jQ{0;#+LGfGTH5NtQ+80mkeBg*qEs+wuZi`?6{p
z$~3m4qOqDI*CP3z>rxW;(lg`bpo@7;Mo&KSzwLU32EZz3!m6F|&o0%CkJ-BGzRxCr
z$$ad)vBrjJl_ejMT*z3W-DH-PwNYj%Cd_ZJtX62fa-y0Zd8WgCuDvtZfpySSr*iGY
z|F_Sa;RGOk<~2)rzhA140rK0oP|CSb@`6aW_YJ1-50?msQ^r0ndbHfhxV3e$2+Uf|
zAEFI5GAzXxM{=Yw2h}}E(z~zyiyrFBFVwwh!(9&gt43;808ajI)Tj#R4r(``mHr7;
zQu)Q31F-u69G5kh<v#ZUYU6`onHe4+Ii#)yxS@faYO2M?!WeFkf3T=<GNX5S!FE)<
zd-o3RpXI49O}2Yn9+Qh^s{eYBXR%T_U+-T0z15?*4L$uffnjj$Qm%#b930SbJ>52x
zVv4KM2QNHa0%NF}0SvLomg+Tce#9{iXTs@l8g$n5Z3jBtT{~*l*}=s#>jYFp<4iBC
ze@xb>dSN!}K^~_6E$KBH@NGtyUAQkK{QEC}lmWe)04<j|Ab5nckW=oDNW)jxvKB8f
zcurP$3-*{(`C3~h$To3seM(aKIL*8*LP4}hw?_!9=J<yP-pOxe8Ayqc02@}_4+=j{
z(N(i}VLQ~3q8iR87MPbJf*EVw_K0h}GI{s??@sBp1L*98YmQAmRo7I4larGbS%z>y
z9^{rgye2(O<LL!W3pZVr|Nb5V9^t6nwu;B-A(qu0oWGN}8gwcUcu4cYd}UMqDZ{1p
z(`$NGR-@B)mrXDgAnrnv=`##^xbTKdmJ7cE55LRyrN-;s9)pY)_(VsWI;u?@!FGJ@
z1PA~U^h_2;L!|j*$UJ;}?VX*SyDcvkPfV(6s=FY>Zop})a>IRL^52(A7%<GT(ZV2q
zq-mSH1;-Y0OE9)|ZXaw#XJtcbzQL3)+ug0>7RW3t&bwHhzg;ujSI*di6^*N`Sx_lO
zY_aRC^s0AymnT-YLH={Q{2$czZ~dl_K?HXR>Nn~z1_u9pJW+!1mZ&*<PZN+5F8V3~
zP7<5@(Z=#}5}iHI1)(UJa!q3__%JyxTuGUc;fIbyH|~R)L_-Guch3gA%R6V?Hdsnp
zcveo#`@?o%WC;oY!S+^KKRy2RKSlUsXqUZzocKE%u+s)!eg!h%AxX^{tcvCJuy}tK
zE*67jC^T6`l36l5^U<M*G4wU+In|86u#@Ta^ULDC(*0Z!9xl8hG10(n<=F~l06})7
zyqR;BP0pxb$E3jUxTLb#Db5`;H2o*@{{FUrhr@eJeQ?}h5#YD%$}dXnvzaOZcecYZ
zRhIg}%ph-iA*Kd6p_UXjDRj$ieer|@(RGAE;pZ^;&Nz-P(IDUfa=u(vuz=mJ*JUe*
z|BMyP3wH2F6lg5mjeoOn{&TysSJ3wq#c1;!=l}(*%nR(h@)48e2d=3?OtM7sH%ceK
zqh&gapJ^}TTV{B^`K(I7E~@S&6pIT6VertZ%<9(rn2~fqT~X(bjiw2ey0{n8iQuzJ
zx8?D=BtIqswuys&WZPC&Kv8EjmfO{^E+$iKxY~ov?e6Q%koH=54ji)%e3}agfQa&o
zIEpU-0VNg;!Zw0NV&CKkJO1%!O$M8v9jxxwomp?L;?0`|{@w5I*Q?Uy1>O;paeo?+
znh>xt3*_n@_CMHk>7QMkr#9q3C3-DtjPlx#_i)e?*p(58U@<5qJ0P|mM&f!<!&P(6
z1^YNm3Zf3a3~mD*Mfom4`L2_7wi^0@H*vRaeHWA3aa;GnAq@t}Z{@WnoR3&HVXLCE
z4kZ(E_eSYHuxMv~=hY6VoaDL8Rk^s)?PqrBQUXy&G99~H&zZSJ3<_cF&LCV~CTLH*
zGP}H}he;>9908Cb*fyb?Wodf2&we&GN&g;i!0RpoB>HU%n*~S#`iAZxh#{)F4Wja6
zi<ss_X~hSN>M*Xvh038r_o?B#JgKM>7LCjv7;>K=n^NMvQGP0w6bfOPZB1BH7I;dd
zM5`O>gc7uD1aT_CRj6R8N<0OJH`<cqK9n%f7u%m_&9R}6D2p`^05z5rep7V<fEly3
z1qsFjC?KYeWJRYP&$<@xU)`C*cB~24*3$Oc{MTr>FnFE7WcXHO5%F<Tm`oRbU*6Ub
zN1*3cY4ItlJy5rAGtgW{a}>*QXW{rr@<n8r-l0a3#!DupM#Ku#XDHAMtOmXd^=Dvg
z+%?ny>y&-h1Liq!D0K|A@Wtz}CoG~CJ+Qf^U9>70gN3DXVQ*YAsX+0}(136FOil8<
z)WQ6=n}FNn%9_ih^S?@}Q>9|IWB?Klpl;o~p23mw-_oXq*uWX$s}%wQFb_N#;^WOC
zM9)$y@hP*9gxS}?;7x>o&HDyoWjsR^Ib8j|{3y<nF`lU8PuY>Gq_dbMYD6W>RCX?<
zd~a!sp$?W1cJT@;{AAIBZXoZq*O-*b=(vS+3R;xbc>Qhw?`2#ppO~y!YZ{nk_{5~;
zRbbW(NVc}+TgBZSzlPKu?dOu`BUi>E{pRh2Q@}Re?(jSY|B(eC*N>L#*9TbQfSSQ%
zhH(1gJSHP#VZ^;W4KaZTP}8I@SxBKCtMj&ba5GMckM&is4361eex;|_GtdJ@RFS@!
z=AX}$5gfr~X)P+rX~~nU!%ob1p)wZ4rdGzpG3rA;@OWBOBsVeg-MP#Qf!_)lpvJ7}
zJb>WQIRr4he#!!xM`f<;FiU8)+{-&RUl0N$DC}$+q5I4KPl3eo4X9waU(h8#h6g3A
z=vP46oMugECP%aF46e4*Y~+dSRgjy9OmVAS@h*@jrO88=)ZkS-5HLh!<ZwURwU<-6
zFe5ADED_)bi6!;26^Q2u92^z|9Yy%+yr3K~wf8pfbqy@-eAU+`{2**u6VPkQvb}o=
zsj(rvz2$tCgSXoSJM2ij1f~Z8s%HQRgwHuiNm@%KTLf$Ct*9HW6&k*-*CG6WIdKBn
zU6yt+`|BQ>mFzgpuQ|I#9uVVu>qy^OPe1pStpuc(^veFe5@FOT5flRg0fMiffqjOf
zyLCy1M0~NZ)CVYt*^OnaS@=l-d5H{JlAk-@{#(u#AkB0E!?-o&Bwb5NKA`GnWyS|y
z77KMGc<)PuSFz)DB3-Y$?df>5>2ls+74~#WbJi(BOdj7v7`M;W33z8Btb`WN!4_KE
z6EA^}z{c)HF|+jF%JJ`J0R?CA7DyQ+O}3;!$m?o=s1H4#UL@e&;@{}wyt2h2C7^$6
z_T!0_M#ZWL6Rph=_2H;8M4TdVeof~dWHAGeYQ*gP^XT7w{(kR)7HYu%s?qFD`rAN~
zCk@i-2e~|gOjYC#3Oq*zBp@<8-Tyxi4VPl+aZCEgL=nOU`}ON+f$V<6V59IQpsO<9
zgzC@N^|MV4Sd;(Aem>A(eE5N*f5vOapDL&$%cLNB+?H=;na$w4Y>+K31<IEGApVcb
zeiiC`kDqtA6>Z+{?v4{(WOSBXh?0{2_3HI0^vH-$iPrz;LLA*BT)u`cDZeFVCO`Q|
zgnY9g0>*w5a1hf4$#`shz&3oYq&#T<@r43E-K6$0@@FHN{#3!l?;n{4JravQ<z=lW
z+F>SZv0RQN|MwDwKN3?`l7AHZsyKYmkarg__>W+1mVCGT4yJH`*|Now2ATi;q<}Lg
zE?-M)3i+>Ud@=|UMk1^U(CHFf!G}Opwg(a+)<n%%R<-xZ`loyAGEsc$fr+e9(tLlQ
zvBS?y@j!?)7}^aH+^)OjwBTPpkC$$*`go*K$k_dtkoaps0qu)k8;uq}Qla0sY4%Zt
zV;)KRV3;UK@cunO7E0j70V1+V&|E>7eu#;bJ{dvUxYrJw%^3yrWLk4}K_%rlfW?Q}
z(3Npk=wiv9uu7ML!Ck;Vp|fJBMZjj?1wEL70op}<DTw#!f2=G->5+#bm2~%KSy7Qb
z7=49VqL!~MnAxj=nW=`pyGd4$UZdAl&9LM~C7hJ4SGkUkKb^Wr^CBE-wXrSabKmyt
z(<;N5A0{c^oANT*%OqM7cJx`;?)m}!pA{ZH9<Y`nb`|Wue}T^%K=gSLAh<5IL)(Lv
zfMLJY^%s}}2w$gQnemz<>hvz!1|PIhJ?;%s8mKUGu*J51u&FfT*O9spnwMxj)|kRF
zk~hTe@o$#MAB1nu%6Yb~>*V7Mb~A)8&xiu(zjsrO+ZNWmoQ@7L5!~355KZgm=@?Lf
zZ9D7j33LqicBVEG#Lko>V5cKxpYRS-+Pj5{@eIp`Q%vG`exa|sYL|_t5^*_e<$4dk
zG*`t{Lg8#u!F^&`kgJ`pN7&$yK3>e>iGO=*Ol9hfoax`*>*1Pz`?vM~`#8(-2t|j%
zemDAakb8p?69Xj@2zt1EmZ3zXCCfku7`D$Y18PXx+p!I~oRAS*6IAfU(QLh)%;g2T
zMe<LAcxM(-{oI$&F6vG<Sj~<mYIkzTE@{nCj4G!-CH~~f62_7dtlaiY@%X^&lrzxg
zL-CW%UY!S@45{Pz!9wg7)A>VbsQ7fmwk`3`wE7Q3a=|{Q0!>5hP0hUH?Dre?L$t?^
zA3p4LRZoHG)Y<WH#@7mAPVufJT+A5ec_uJW9-2rHgxtumCO?Tq2n9X_UjTZFp-6)*
z5nMPmi;Dz_lUy?dvA*kFuGs=Y<RQ(?I7fVTHirw!L+kAuth`&b`eg`*UF7l|-d?yL
zPe8aEb^nrseOwccfX4;;(!=#<fx3`Aj**5MxDT&3y2kUFpZP9i-v3~MVYa&u-2O3}
z<+BERt>1e49dUaW>lIG-6A;9^g$X_~qS6pyQNW#7KhQyR2fYcC*B$v~>a@Rnb0K-E
z^D1s1;(m}^E6(9+7L?qX$Z2EX;!GU@H8q7V-?43pObmBP({^0gT%r4|iyf7I_l2Kz
zU^pT%MM%dKnPR0EH~KqJP9jN^0|OMwvhk9&_a5TGzTeSq5)GlYEmZOa5=`g%65PX~
zYR4)3q1MagbN8hw|Br}!yGREu;q4X5e3>Q&xu^O{j>X{#Y<#4tmutnstN#*4emqIa
z1HxP+gP)oHd@N=F3p?}a(^2i*62@N)9_C|z`z+xK6bEq(-iTUva}xr69lF=A;B2h=
zT`r4<$v))h8@fcGAM0?|W`zaPZG>~#J=x>a_t6~dIUns5SenBU9uT9?`Q)4my{6u!
z<D^ae0QImxW{+KpzDIeSpDw;t3aMicgbr=jN?m&eGMT|zX0$(e=ml%zl)0+W<Cl;|
zfJ@z|O>U{5GJ7HJ=ZS8|pST!UP|hp7g)3nQuW!A<@1**d3iD&=gWo**AuIAu{gJJQ
z_y9W@WF-Pd$3t&16D#lj2t&6M8PeY$)b{)}*a&xX5ycy0ad#BgB1EAjNSQp$-5e_C
zI4UZA$6P*-$QhN83w>W>VmYibu*|eEC^Wg&)iI_k{jCjh?2`7hkIU9aeTV^_n+r^8
z{VALc?!(0s%%=z)-U1O7P_I2bvmwpam#;0{9he6^(}KRU6X@@gK~Fjvv(&Ee8)fHG
zDg}0-tq&#eu;c$7<M_Q(Lb1vsQ^5SrRl>^1L9_E<@H!wf)vVS;>@mgw-<Et#UcUDR
zck|QGr#Xd6Tbj?|agw~%jNSqPm7}G$bpx?S!BbX$xd78uXswliwu0O%eHZQzES`iH
zGTPyzb2=+StuPWA6_~aSIgN}}j@i5vJ_vbEB5MsluxifCakY3Nd{5UB8rJze^1?+U
zQ5MOt!&_WepXd#%-(EDF&<UJzjyKi9x(krM7R@KHc@Brv5TfXI#W346#@Ln9<vtgf
zu-~Z~Ukg{)5*%--l6h+K@^iD|hI*;7ZsUI?E8oWr7DS!=cqG>?5^g<ujSKW^86)Cq
ztrfhtD#{(z2D)HNv|#X=0AQQLdJ$*`c^pCyRphyzsfB?00j<{zqU6XCecokl)b4s6
z=nHgcLP19?>VD#gf<0Hg%MsjN;#wr@5_$32lLKkSswQ`|H>;Gq7}9evM-h^(%m-Df
z-;B84JTH#vqA0guO!KUauh*aXB5`Z-WW1B5`*V4+Em7Jb85bNqg>08kHB_&Ft&=S-
zyr2$x<zB#21^04)P`Hn@IRDK-n2k<7>7W4hc3nFk4=TGh>H7;Gm;dB(n{Yrs_PWd}
z#{oUx$LvFhdzrP2taM*N2Ams}+_hjkbdrP+wD_Dy(pJJ#5mR_!LV-4dnrDk_(v&|E
z<oZmwP=)rLf!=@YroRKni~tCJClc*P0`8CrXvTTJ3z&h%Ji8=3MML+&CH1!E8%Pld
z94l>V!&?rcwS+_4n}!3JCIHob%MXjUb)pD5R|YyIMW%G{f7D*cqYRLgrK*ub(Bp^J
zg#*}=&|Jg9>8>79VHPNLoDUsRDJe7pEwfxl2P!gUV1L^4wW=C9RRj7nB^O@x9#0AB
z3N>&dw@dmagtR<Ul1(!9wtt{4Fp5l93O`-tYRoY*U)p}RIAshT&gw_;ciuxL<wulB
z?G<*Zm=ksS&!7RShVw_dvA}}X0MG(1BL)WtGajCsJqt7b;XacSLl2bq?S*s2m=iM7
zFa330dZ2M*>C9uP_*S4ID=?;dDX%_K<9^|Db5Mv|^U6ZOC4limfLRucU$=<h2LZx-
z7qbR(mgE1LX!)lUg&+crh%jOOU;J4#yu*XFK;Y;zB6avlJ~T=tFywa0{C%_U4Z;O?
zxhu=*A<XA*xQulytGd<$y8hd6-=#73M4V1pVG}1|LXs)V3=lAJVS!<i*EF&K;;4IN
zC!DQf$~fQH{U2@Z-!}*60>y7*!H20|S^Og;VHjg2LWtq8x3DmKvBq0o$keg6hs<gK
z9~U1E7yn(JC_Vifr_;9`5rjpEp9|lIbo;}Z)GOpsADv+MpXyOE1;;Swgzs#KGQ>@n
zguG=q<~*u<b3<(yl54$XPkn5b+!%vQi>W;FBOBY55%0__+qa-NidIlZ4XG~;?e^{f
zk|Uk#Jl-r&W=&D13r*>}Jo{%a{b#8ji)SV1`vvFd<8QW);c5m3ny0PpSu|b`S+8GW
zoplhJ#@4!&=c;KOvUboZWv&|L2*WltA)t!ob4h6XW~Q_ro?!_D3171Al0|)L^Ub1r
z-XrRv7h@H^ze@MK4Lfzmj#Zu5K#p|$`$UC4R#H(u3uq}S4>O%+y2Prbz8TS9{EJEA
z?1LhyrW3LO8eFv)CI55u<^u6@`dO47*^bFJRnnMgfndL%9{tqjqf*c0K`;m)^NFMh
z3kk%?cm)4|r1$An|KqV(A5Tru-&G$iRD5hfdEWei5khk;c=+^+z0CK%LBkl*-PAny
zLog!QJ8bM5dbin$s@K~LK`*;3p<P(7q0Y&%8S_q#B)`#a&b1OW+ePwo<495gU901d
z(xz`SSw&#ubNW%RerDnp_CSl~<@*f=?@ST#juj4y=wq==9AJhM4GRww_4n=-;rcUc
z_##?b**V@!UyrEbo<X|=%8wy!7Iw!*z{*m3yehj6JzYrA?|Cub3Vo=e`R#HaKz3}(
zUUt{;rV2gqN5;b4uCc6-8j<~vgwpqj$jb1jJRbTL;(ZX!LSpEqcmuQbP5GQfvfn7K
zBM=lQ^Q%{jrf19(vYTadg$0*GAIUZQMKR51(rbUFM`%(cd&(kUkNoAy>rt>l)EhW@
z!a^Bk?8MAuGcoVif^)jF^=mIup2K=H^njgYMKYUdgP6KNLOM;9)fgUUb}7%qzP^vx
zfo=2K$YjM!Dj$5EbPV_9+Q6!JMd$%GS014&45s&o>_LGn38es;YB|Vcxb5`1=r8r|
zu_X9Q@AU)D=+>Bj^oE~Pj-*#wOkuOIxZt~=@5ifr3|XwPGhZ9V{=TCE943)4Cq&g^
zky*JMgJZC1cyUYv&!O#xNPJ#Or1||n#=bJF%57^K7TqA-2$Is>A<`0pbPCelT_Q-M
zlG4&0(wzd*-QC@t-?PBI&)(;}Kfdc)KLmBI8Dow);vV<d4TTzmG{cBP&6VRwlQXo#
z@+WLP1C0h_NJBdOvMsFJ#&zq?Z+8s#cMzp6MXZ;(&;T9S5#Tx&#*JcKGLmHVVHa7-
zK(~v<M-}{-BpgSEJR<di060zO-DLP)L^^?>e61TH#UnU#36TCb3P3aH0{Bf_$&{Ml
zOlT@L_qW)H#+HWXpn39Y1{MFCi(}DKWJhVNuQ*~?&lNKRf9kJYelOdo*c+`Gc@Ets
zs#s!D3V;bg1B&y9o|6ff{%~vWDAMScOC(QTN&D?lS-&f&?U#7<0Z~6|41->kom^-0
zdxJ|*niu}C{z{(TsbaYO+`Y_5tR4otsaClqjGl<Em2f?~KxwV^S6Fe)@mG8YjrnpR
zcDr$|#B#~VfC9hN@K{|Bi~T>YkrN%Dz?0_H<U#;Nq2tR~<^0-oO3V~pf2_*oeU_xR
zqU{>uKIy2gbO^a(dKamD=bJCx$yY~2@AO@(-zK<;ai+q%g}5m$-a!0J|NLBXCLEWX
zGsmyjEBGBPLd`Tt_*8+66McIJb~u_QcziNi@w-E38gotKwPDgQ5_4wjn21%)gD<|Q
z?ciefDFl62Fbocw-$J=VDiYS7IApFlcFk||(2OIwr=;4~ug#?1ar67KT#(jHC>GPu
z<rb!Hp5v*)_K1P8%XE#ZKr(>Kj6HL!OwU3+oxtMTt7ZSjzC&CpS=QJNt9SJlJPH?U
z-EP{Ovj#`4D{c%s)=I@l`TV___$F7zbvg@KRbw>^j`R5TooTmj>=h_VJrg{>S#>Ty
zpd$t@F?2b!(H?8JA0-+SI<9;anjR+;_(`w8$Gey>Bi0}o*Cd=s@HJv+Q=?IO6onRa
z$1ggYQsRCA*dtb1>tZKG-sq2*{)#@clU_jdTWpE{ZWxFmVPRZnKL-s<l%{sL9<laR
z&_wlrCd`2ohOXn<RKfDJR!sh;_`O#-d1$7%!CP3s$kHEmY4RO<kpMk?PQJEfX~)df
zy}RD7+G5>7uX&jSn%<35s<ZXUb{P&#{99q@rVL#bY@)HOx7{-G614PZ#~K(!Gw=%q
z9aq0%*;CSTX%cY<L-WL)7(S-F{}uO^S@o#r4aE+p1WUugSRV_t%o*)ny|M$<$CVuq
zHf*M36)lSbZBJcIcR_+45v$Ij4JN)rw!iK;3ix^alhAH1X$At@scFlImGxEH*XWt;
zJ**o7Y_f##xEtfvUJ@D%j8)`?1QR_BjJhkvNC+7jIl57_Dgg;)0_S*N5|IOOjqK8a
zcunF<UY|h>nQ|cS<ez%Dtt&UR7{v|HtUTFUf0WBNplb3^1Z=$yz6LG-ienl`p(s2J
zck@6VFYplSCM?>OOT?UbU5oWrWpru$4G2iZWk@x*2l?>$+Th|Yo=uFsY{iGS&PwRA
zA`}&NL$DS{l{UA0lN2wUAfDNeMW-KKl_*GC($Qm^If^;G6Vw$s{Oa{{1h~<yuUSFZ
zTd<rB?2JlguB0DLycd_DgzciD&c&!X-UUe>J&$0(aOIsF<+S2q@LR5B_s$IRLd03C
z;8nB?<njOYoRAg|FxDN%@^y_hp1FF|I!2w~P}S<_Gdf17tLuJ7aC6MOp-$M&)_fZ`
zwkdC=Ow!~*FPJ}I+F9Uyke>u0dABn!GsjLEf0SiD3}G4;eMj4=ZmB#M?#6Er>1*+|
zUxo)asdOu$+jBHA{nRlPPsULfaX}*mZK%kux8f{+U)N0YW_D+R!Zp;<gVQYhxIy7&
z%wrwmj%Q*h{rcO~iK;u{wHGCyjKSA8qXXf?k~g!ausQYX8^t#TV|;LaFx^M@!>?R=
z2R$qpm7<30vffnKol3aSGql_!jGgHSAPU>>=L?8clxLd|G|Q*WuCsb%nzo6KG&<<8
zC3jv#?YvXe!891Ju`+pMCv<!pWj|>89qy0$f`ph;{l_sT(gvja9i6xL*TT7aG*Z%N
zI_l0LY#wjEXI-9!Re7CB4a$+uQQLia?<y?wj_a>ouDG`Kg%09!w~wY-WRnc?)|}5(
zeowrkv*lN+*z?}*Q6!!INjEmY=agfYDO0<~9=7Gt?YZYDs~#<V*0+;K;!GFrC>`t+
zZSV|tY-O9p@$<HEZh;$WN0_FP%1laDp~i-CRqVWia^Az9g6w!DL(z6bVdGWzO1_gy
zmAWVWtm8rcaNYfNZ8FCW-GOt_saBVz$^ymKy!o9Yw!@6-R=ngztsCRd2q!^~+tY)l
zbuZdvzPWj2I_(ri<$bR0V#qt&tr#{N-FCIG`1D)kt?L}(=tei3;bz&g=z5*V6!$P$
z27@SVhxNjTiYzvXGqns`nG2Dliee?X@`A)zJKdoGeu%XVf{UugtNdc~6tupH$lFk9
zdnJ#EZ^<%i7Xl4e(ref{yqw*(+XoK^^=7xHY<Wy)1Nn^kl^u7f1Wh+T*MqOQpUc}{
zHl5@F7^dl;uEy^evL8~1W3ZLkH_8n&yw195I&9uwNF{ML&Yt=?6cjR5s0vs)UTqs3
z@l(=t>gl~vOsYP~LyGsxT#>yNQpNIH{uBLZ27$Ejty*;XOI|)+<Pug$jB7b*5Kv2o
zh}cW0rG^KXe#j&iI-cWcKG=woS6`7>S@=b**LM7gcKd=_Lv5J)avIQC7!ak@VRcHr
zKc<h`p?ffqg?m}`4t}tj!W`7D(pV_19-X72aq-GK4f2c0?Jd3!Y@to8C%Z7{-DnAn
zK$^(-_;vu&Uu;`>(=kkQ#NkcetTzNnC@i{w@{RsNY6*?W4C}9+!4i(MXgT=sS00jx
zf^Qok)Qhb`kHy-ETUjWseWtaGwJblQ<mv($zbOJAvb_elygr}QF11hVSSyLXU`tT!
z&9Qif>Ao?LKAy&XwPBb^<}mfFu;R2a$n<Sj(Fqg&DIb35WmoM<r!j7{37zY68a1!+
zvzZ|Ql?aBsYkZswgqtsxi#4Yt%ve8;Pn>?hiw%_qqJ2$S^6>apaG`H8S7b(nZ~oG?
z50DCB0ttqTAL7&yp$P_p&svuk6Wp+nR&SWp+n-B$8D$oi{(#@p%fTHP7~}OeXuMBT
zDqo3eboz05pLNoZi9Cf5ht4LuL@kj2-OXEBzx9$S%3uS=xfg#cH+MD2HlmhdKXBbV
z#}94&Ws(26ZAa0!?rl`w@>V6^vCqRgpH<W-C$<*-cv_l=p3RNT@p62e(QnKObHAyE
zQV69Uget8L7#U{M3g4wr4osTHzc3>_Y*mWjR*g_ioWPIF>Q5ImDb5}7`asyeu5xIY
zrXjljsN{w1;hBwH>~qTGA7#bF%Xh&WF4>E~<wE<U^B8D`^NrF+@@s1t$cZ}D6~8zt
znG8dqU4~dDIFp@Z>Ylc?3}uU|K~Kr`=V>o388r;l-AYup@8+{q8J3@-wa;}ff{!GI
zLrz~yW4IDpcxl>U#t%4#6AHRzLVi`D8f|vX)f3Q}=g=78d%itkbNmWTNUs>4mk>V(
z+rXmBNXzr6{sU+vpvAiM5=JEWI}-zTlODH^<L7R44Ac+C5J$G;F4_T+{yx@mIyTeU
z37jQ5#n~9}%eW#lD#7oVAYSR)+K4(HmYr{Jml{%=uNTqaQ7ms?i!7iv9`;QI?jkM0
z3zVZZzBk9%u0soHPptbuPU{xe607|(p2J(!LqLMA$t#^XJ$d|<=P!HfS)xetbo5$!
z%!F0p>d{KvR}#n_X$2ni@TgxtZnKQ!=?-ejU##mEZR`|_w=Jt9Lh_DPlgUM;(!fb}
zBfS3Bf7Wu?00F(VV35RGL8Mh3uAS3fguksCXD;Jt;+q0N>qD;?hy2w$hzxPF+RU82
zU+yyw-WcSjSxJR-V&h_Hk=u#I!3rW#O&)QvmGWD-z!^38xfD?UrW<6nYB9rHE&m_r
zAbS!J`js{AiFw4JHEX~epZEsCFMcNNC44_qDQrf^Y?tvESgL$MRv11@Q&^As?W0&}
zU@@g|PVd3qTxMOleyu|3wI<&llGr*NbEdEhixC#lFREOTuS~A#m0JP(qdZn!`N?6s
znIy$-nz<B%J2PTTG+Gh{%b7Wch3Ucqv7yDqS1`e9V)UTymtw;8>rCj|Td4Z}R_6gk
zQK%5-`ZUX#sp`Z{(C}L-G7x2r$;i5~_pJIPWXGatiLkU}R@E6EDgvAsi(^FrF--Wk
z^l-N)zM=arHc*RuY*>MPBJ+Vt3UDbXDi)Jc81M^&C~!#Zz9xMWirQf+3+^lHc#-j-
z*Qjk+AM_*7nIzfs2XT$btw}~-E^LgAnNw)zZ|ull-R0ercrFr>-=}>jTxP=DE><>1
zpuL<0<?9sb@D$Pmj&{BWZ>s)Jx3%i7i8<N(bQnXCklng;^Uri=bhdY7l@SR}YgPLS
zuZfN8fp(TFr#qWCs~AtVT5}qJ)YE@!<@5wo>7xUhSXj)$pY9lYk=4tSl5xfQ9vU@#
z-L0pEIab+jz>>>g7j`~HZwW<xju*~NpSR{8&AakU<aCt=&*Li1g!%=HfujyVoRwBB
zWS^Po-nOi%2d@CvZfcQj!t_r7ZZ*xh_-XcaXd!i&_%Q6R5DAX8wNcJ%CdoccS{=2#
zx-n(ls*GbAQiR|e(^)e+L(gB0RKL2?0K5m?u%e{M@h_Qj+IJbT<{cf7fEP<^-5zXC
zqu8Y-*-3r`Qcka8%_uCWjPzpB|DerMnIYLwoW#2=ZU1{Ru)(WsG*>yp*pPJG5TXqZ
z?;#|dw>HOC>N+1zNLSX4Ojue(DLv}=ljIbu8XpO8EIu$Ww1?XKZ!W|N6>F2R3KA+Y
z#Cou{K19uNoO_8j-8*zps8m6P=;x=PCG{-hqGUBHl=)GMub}k~xl3i%&e<h0LV`S3
zvFNs=D0n?JPMa~wWo2eNNU>?<x(~NIq}$Jdcqq1`j})OyM)V3tfO)t&fVlY6sz$FC
z2*V~=bv#A>^g=+fOi&|PkeXHTLf1e8i1ydb+N)!$;*d93o2%}KP<PQmCg~-z8IoVK
zUaH(@rFQ9Z5x)*)6)K6Lgh2YK&q7I$?lo=ihmk_5qC%%=7U+Pbk4a10`YW8b>aw{+
zn4UE%>lI=YYQ9|4Gh%-{M<m#Xmuso#02<(Dm!@TJ_grm<Wl0FHT>LVn*A&^YJDh%j
zq-eSnTbir@IiHBD5VA8d#Yd-m-*|RbGyAhUsQR{8GQsp|`GQq!p4w<l?X&1LhYQa|
zO&Ysi^M2_Ixup5mRf#MT@y#pCG`*9lG^G5v{<%Sim;(Xp<x$^6>p(mZNQ&u;xVch>
z7|%j1dtfQ*B!|S4>U1`JtGA71eyU_k4e5%}A1711@gO!y-de2TuC|ETp9uf4p}Mbo
zJ4{K97+0xcFJ4eD=p*J|8XtXVC-Q59VBoW9{(iJBQrg(yCe0_h_~LnNZ_6L|ltGvA
zL0?qQ2m~aq%uVoaS@V?oB%2^41^q9pr$1(oQ7~5<AK%K}Ub9V_o=F`XR!pj3<+upG
zk%D^{^qd#q11j~_HV$>Kd6sRg<<luK_Iu4B`})0CY8UDKOa5|N@k9*5+4`Ny>4;M?
zmf%5I7PK?9{IJuD*GYGj{=AOpvpCq1eIBr<e2agep3TUR)JNas*tSa%|J+a~=yoK=
z&TtsHWOnOb5)y#)1)zM7`x6aQd!34GIuh`sYtw-k2R}+ZNs?ANI4l0U^K1d5dTuVv
zDmz0(hPv7I{?s3E0N^g614dW>#*^Q)t15ik=zQk}4)x}%_9Ykty*c4XA?}auBu?Vr
zGd#Yu%!<O&)}VIdpy;*PT~RVpgs-&2y2k7sA#!_dpUS|_7C5q#$^#vLVO<z+(6I~V
zmxF*I5?vgoJTp7|&en(aDS{Br;|}O!9DdYp69dNfAq7V7`5q#L_*t7#H0G2{ZLCc~
zebLF<CiPD<{4U<8H(J`j?f#c{7q0>|kcl6UEqsi^0EPe&Pa5hcT-=0-y8L`zu4?!U
zKA!Iru;%~HH9xu!ddgrEQ@P5|?=gbx3kxQBdAP=9wjtBABD)3JZ6*@wjnl)n5<0M{
zfhpPkEa#6~sizI}@3Ydr@JoLRK-<H3-C+lY!#eG=SHbAD!;^7fn@sfIa;iP8`R^Fl
z<0$!9Kt?~mo`L8IU=jD?a7<NL;meh;%~wRAk)Pg$6>O{QN8|s^ANcIS+Za~w&AtqO
z>H&HRrt9FEhgctgE7F~4GMg<02&3oSo1xI~{trTWVCp4OKxo|ZxYBm;aX~&nr^M`J
zkl=NfM<^te&&2}V>tq|N|6VI_ijx(913h`Rx3&si$z(17LD?>+K|%O5@Ez)dF&ny7
zb_9I(zfcR0M>GgzJG68^bw2HQ14vo9IlmZmF$b3@U_Q@n-H1O~DVwD8tFNz~Qw@kP
z{ns7~LneSBAqjPcM9e@G1qlRXU!Ki4?}-2*sK|hs?sUp~!R_~<M1t)ZZm4go%dz6P
zF)l9+PO@(%n!wFJ1l;2nV9oy<+X9?`UL+8pn_0D7Nd*iHb6m-p8p0~qincqyeGbzc
zm`<dlqwE`e<O$WD-;f;<aMIGJ#dzNQ??EMA0)u(cM_{_D|D9?bxOB|Qijo?Dy{JVB
zPyNzG=dBj%2=$uGcyGB-qp9&$$2t>fEAAQ2XA8rYM=%?z^%@W6#fb{6KE0v>H&b(a
zyzDzIfXk_o2xtc+yqi!K^o|B-r2@dk<>c1On|ZNp)O<slZi8jk)^ZB!5u>HoN>IbO
zZK<iLtLy51gk@7t&rOeGAaEQ1bv=Ny;sb|=QLX8+0jhts*yh{VmAAHQ@&&Gzx$Mlg
z9_zcVNg{6U6(c$mH3}OdSe4klVhTxyZ|d;a4`>i&^Yt~hb|!pr#P2t+wy1>**6&Z1
zMy`RDWJ8S{9ia<8r@1TG#^AL5D7DSmG)LmgD^e{jt;Ml^q@p5*#ob=jzR?XM`HB3z
zJe$2~M<9iDjZ2>7aS!5BRdtUi-}qDh1wQpfACS2C3nGO8V6i}qMiNBv`SVu!i|{l1
zpb(&!koC<46aYC)mzWSzetRB7?Sq87&7`Rr)O3f^BwpU>EOa%Y@^J%b9;yNTn(Q_!
zL1THm(h@QnQD4?Y85@B0w;E<=CuJ-;-<<Cq^)NL_HW6*jXO<=PN00omIKhsD4HhKh
zk!=)TpDQ3TeN;98wiuoCnCe{Y8f)$IajjPW?m$ft7|2`?<jYRb-gy`Fs&Y{e=U-Bj
z%THA=Yvtxp#Ez9mRw~YkzbeZ5#?4gqQm|(&v*$|kFvY)IYbYYidMHJ*xWt8}gi^%X
zqU;OR@?1Qp`_)CqHk>g;Tflc>c-5e>d<29pq$>=l7*g18=^01eE4aCO<tr%wd^!{6
z0ua~0QJQ|aexM&ghWLB<SzA&>+k;<h0Diejdf<}_=U?%VM}5;A15?d98*@O?DF+;W
zp>XUBpL9)A)xosEF`k(AN+nk4nfwqAigrwp?2^v*N+NdwA&|lWF$s4wk@$ZqNmoNB
z`ndGm_VR@@<HwI<Vqn~>;djN_Xae7*L~bluzTj5Zc&pcgyvJC}W#Qy$e%z`7<)#3K
zq4p3Ls@_n*4{kLZtoitz9jZEmksqQy&gR^%$`P{A3vdB2`fnW&5zCSx$OE9<C(L=-
z?nWF3a9p<UV~;v+ui#rfh;~_!phB`#HiQSBazOM78!AkFW4GU$Pm2JEoYPC2Ejym+
z`RN#**1dDo1VI)IbnB6<uqamlt2WsSgMUKAcEC5&Z68JgkhjUNK3xd=3nOUv4YzON
zm4Q5VB9D827q8<gGFp&WJrUkx-o{qVISU#7{MBY)i&|841Wd~^<@c-07p}|!#-<-P
zuLVB0lZ#`r<HjEUR3!Vjzb#zNz2YBe`c|#{Ib7z_aStCHg`nL0#jExxgv*`4i7|#)
zosOjEZ>LLL0i?D91SanT@~IcZ<(2Ur2A;Raf~N`e)b8<LSb$PDat*<I!cTgIOwamg
z$8|1ZkV6kXQqnHMgQ8W7TPtAfMfqAAI1R&#ii*$&V7dNr*AXYdtVWd{7u-$&;4u#d
zs5i=Z#bP+qXwQWx$G-KFeu-ERo8|s{R|2k2>g<~rV)9}?%Dd|tzs4+mc)m!Oh0A@h
z6`&yIQzQOT{i^yzzx3Q;GeV;L=5RY$DpN>r@p4H~XL%cmYQNzSRAPazaIOo{G^WD?
z291uH>iDz-4rt`V?@s81snRS;g7mRVTx_Yh5NTlA*`6n({OeUIF$6zDSNpcRKypqN
zzSo<F1Y7mKJ$@oadIh^vf34aMlW8!j_~igspBE5t3IC>;N%j(k<-L8_ZU>UUtxrQd
z_BwC$tJ)ut{Rn+6XFJWc$Vo3ny>7)lwG=`8f-q1$?47)sp?uZr>mSi#y?vSnhz+%1
z-bw=&)4JJkXD<j3oohav^6wI-$5$D=lbqm$HOc}%Y7+2PqWFGoYjc353zz9(+)l)7
zv5~O?aJ_g5(KHQO$09tW)fiCdXFn-o$t->9(`u1TOKqD2-?W)ZDJuE0)#l2(J!l0U
z1GQ1>y^!7Ap_>&k<i6fwM#Y3Q$Q**`I`PSYyO8!{`7L~xt++R4rit1AI~%MLE?}Sb
z_QLH1fqfc7m=&sS>W@2(aAb^kNWB5criK$OU+=*J_}vd!!R$=^qfJ^nrHMwb>rWMx
zBsYE~bqAAIS!g95hn62eV{1r=k8@jh2Q5=mr_W@m-3o4e<;~AkYJJ_pgdZp+5DcU3
zBNkj5Vn22@uwxO7`+v>G7Lpn}@?q+dVf7IBYjZ5-D8yfrw&w_l&Gp7v_?okBJphWm
zH*u<ZrEZH#4=^5cvk9uSD*+eM1g6~`sn&5XPhcGt=7aC@NOoqdXiw+AF>#uhV4!22
z0TDo%riTdvC;q@MJ~lQsRoFyZ8<eLX)SEnmX#ZdJx~`eFpU2bT4qM=aeTXmFi;y+b
zeZ~-@Qo5Qu!g43?))1nUA@=v&$vu|b=xY}+J5|npePa0PLVZBGX<5N$a@pMN)F(3e
zOi!wVj(@yyX|ELKpZ7?i*#p@3zAA%9;+P7=a-a|h0Md`T&FwSQUs2gCy;_kyDeVMP
z!N?|bm`8%)S+aCCUKdDsH_KjHdpw}GOm8|H_I&NB8-<Ue^JS;4PdIfx3NYPa67tD+
z_R~6Z9Vkpb!Fm76Qz(c6^nU~|_@DBkD9@@r@FgWp6fmc|88jeXs^sWaZmnhr^Z_a0
z=583d?Ds7pH%kJx#Pi?haFZFgkIr|5y1L=!2bZ+lFGz_ya)U+)r_p!*ot%^<TbzZq
z{3-RgRGSY#M^6Z^tIQ>kprEi5=izP{1b{NX_<)2}lG<FFlyB2Z0SYmC2iI!8bASAs
zogR+`9#X^)y^<Mf!@7&Ic==sN6Ehb-GNgzn2J;8{bt~Rb);&iEfLEhOW(b~eR8?EZ
z4aO<4K*!Zf&;W)?((*!V0b^*=O>x9YjK!(ld>e(p7vbmz`>y-WT=3z%FfF1H532(7
zozl&)eM!EKnT>`(v;98C#I(0~gSPwb7DgvRallaF9cwsknTa-ksO&)4FEZC;O}SJ>
zCFP7r1o&%QJ48hmrFa=Us*oLQ>Jr0#_*0ZTo~)m3zcs2vmYDQpL@I*xU(bRwa(`u<
z|FAGrC1O6B9iKqBOrYYX`9stIRG8yqACdFM;PRz+7QUcyY8wnOax&sk%(=O3!Z}X*
zNwx4!u1u+yT|I0%t?>nRxx-i5OnS4eOoP`!s-<iOxbxpJe3W*K^o|3p$9$KAt&gr(
z@zvZLnbs|*{R>X9;X4`Wzh8pRZ=n}ovr;j=5#8wmu$BYOd?R(~itL{0(0n*z`oEWS
z0%zj=3uIYL8g5{EXYE=K^#({pZJWznjGb|Q&U-@oikZd{HX#{aXEu<$YQ0y+W9pC4
z^=CRaejjs=4fna!V+yz0-jvRXF~aAfYNu2$KTD{OpL0G?SWz5DP-hq}TSbiGT&cpZ
zHo;Quq!c%KCMx*Tk<O*t7!n?C(x-gP$WnXH7q#9A0saR>F<Nvd_x`_?A{BV71b&_$
zyn6L8;^Nu;vg=mXyZP^mN3eh7vjXlZ<8qP6_PDJMpyEcvsFzUOMh<6By~(TQjKmF9
z0ME%nCY34Kospoy`a<NO3;q+-<cW7Sq(=zx%SMO}p$LBr&!L6}G&hO*z)$#s+!b2}
z9-i1VGbx`KvJX1!ZAVy!7vOZX;odtf%iyUT!Q3}Asl~RW6T5}EVPJ~c)av2Jc(40U
z_2>w9?Ij-`M>Ox^ktRxax3bJ>Y^T>zl)hNDa;O*6b~1zZVUk;^_fp5@a+x0{*k7)9
zH+Pv|MsSvO!?QKJy~SnznU7W*5!meFz38!TOPgAh+=<@K5F}iDp1kSu;LuB8i|y{@
z{R6%ltyPJIV({+V3Xg{o)Sv*W8X94t?1Ce{kyt*u@$D`H(jH>FGv9)h(CR;ZIuclN
z3_*Kk^ro{b7&*h+_N{mOzqhdsf!Vma4QNpt2W+Y^Cc^E3cQb$$G{5cV^OcH(z!ihe
zeb4X{Tx?(qDerO<=yL?da;hfj_RlTO=&%WM$&#rP>F`IaU<)_t%#F1e%3>7H)I!pT
zY!wUdfKi>llB!-(xyVR3K!0&va!xgVF|VZ<Fsb|%-W_P1PN5^*dW&HrM5*{CO0O@{
zvsC;ob`E8<<Q2m1R4LMT_Y>QFeU|VL<qaxp&mq}3Nlo+Wis%d96MtPvIHZ8nUmv$e
zn#p+H26Ing5L*vvS!}^tm(KjGSbxpuu!|@x4XO0;KnOEiw>332mVII@<yFxR(eWSe
z`sse6(gKgM=)990m>5wQ6P{iZR;y;XB%tYmq<V*uj1$LYpQm}O;{9GJumyw2AgfJW
z9LS6EGqo}U==sn=ao;dfnY!@JHOLGiA^+~Td*zTvKT|>=BbYDUAc^Y$G$`^y3XEG1
z<k3RE%*#sAjIJ`m+6Xtu1AbPx4YY#RULL0RzPb?eTVt5}G%cg6FG6uk9rxBz<@Xxv
zl|B}-QD7{%@y<)BMeJ8quiRva#L-j2#`du9+Diz1MeW8!sM8e={G7&sd*)(RAgqd&
zTeIWGcYxd1@G&BV5SmAeG5REjr!M}?HQ=A#<T(RC%Y5$X&BF)Q(lHp^o&=NCrMB1C
zC-QnrugJLZxE*qAr#}Ey%06N+vp1c3S2<Q)L8Sg7BdU7l9q&Ev)^I0F_bJ<r@gj>>
ztoYGKP@*+;+m6fIxX+Xj!VffjVRobk1&pBG>L7Id#NTIhR=Ef`37lg^rS6`-x6n97
zWEBu6yS;a6uF7>0NXIi=i?+Eq|Edxy11|tak!Q}rStRvqXrbNgFrP-C66v9zBWihz
zTsq`616Oq&WUPFazKq6PloffZ=P`45l3=L8F%sWS&hnTs^ecYW5?cdUIVn+^&fI}-
zr8f=@2oosf)2MeOc+eLS-%7VeMylzhqf$DurSQ28<?LbI7XQ^15io9517?orRwe=4
zqYWe{7cg*AV2R*yLCkEUcM_qVX?D+I1C3R}<LiWXuK29-OunN7r4GGG;q{lf#W8zy
z5>h>_ca>n~1oJAAp7DW}&C7fnYj3XB*bM!13V|_#DrAw?aL38=We$3GR{XWY*B2#t
z7V{WkUgVjQHPro0M1CdyYt0OE%oZKI^+$1Ni_3mf2@^|MmlGvqTBG)UstR~n{iNo?
zS62L$FF?AT4@d?QFVZjCRSz!>gyr&l(}ro^dSThc6m))~o_T++iLXd<IxQ`;F%u!Y
z93x#%(nJzTs_iRnN|Ju4^}uUB<~FpmgzfThP1j!JO@Q`GS9!p5RLDlRki!LxY5V&X
z3#VAjP&|4#Cf;ze&%&}n2P_xjRdG$Dc<<Yx=24~?d@A?Sw~)rh#^pA)0r~l71@bi9
zZv(Bg#h#g2VGUx_2znCS3*0%#AODBB8*B)_&=YvrFcdW*0_x24C_u8eb&WtVcXafG
zg0iw91(__{n~NOD^2<d(SdOCFE2DQXFhA%nN#4zkz;W%@z~wP&`xxE+63<s*AY`Xj
z$?{<VE#GvG<<V(1y@hdhR^{eeVYBXaQU90h12WA3l(Sp)I7b)&aO-$wpx&qXYLaCH
zYRSqf2NAwG%>6obn*`&w5l-358G@0q&rN8G2PR$#=q>r{A}WRpKlW7yPiJ@If7z~+
zd0@B5ZG+nih(@Zz6lvG(9|HBzC^nh|su!L%PU6bNe3?EMVS?nBb8yN4bh(;kQI(6R
zm^aM_J}~5fVLXcU7sdh9#=qgMlf}TO=kC@#K*>rfB<O&sHuTq)p(0XGYXkFpVe_Q%
z*V0fD3yDqFh>ZB8JIwDK4~lfQhzoSiJSmvbO~$0Nk<kE*?lesM1&->(bn(fbu<m~}
zU>p;m{;r$~0H)~4QXlwFv3Fjg@j&M>v;aQ0WE;qpT3aY9{$noMrmCpz7ndYC)0Gt~
z*&mhCg-4Lo+AeT_u+VI^EfnJ$?a@=N*#I~6|0_NK)IP1%b(R8lqAV2|T&oyd_Z`*F
zAS_|g8|liHxAt9t-t`1o6%|#xozZDjuF8DaDYMJiS^oaNo~KV416nfp*#0uEOtgFx
zG+h^m*JQ$GXf(@QeE}X(5q`pdK~VL;Ot*jC=_d<Zm;$N1u7V-Y>fKVTu9xX*%v53_
zVxX}|#v#W4db>bO@{dBu$G%+dX`8I|#HB0JVlfRRVbIjSjeCnX+EgrcruO)L8X%OL
z41xBnPg>=LVwYyGPE1B>E23D%5;xYlK@-KgozX8<ZMKdLx%qgc2B1?QJ8K>iY5!gh
zP=S808`dzd-VcVtsrWuvEClr@@up>`Fv(%zNRdW_6ETKuwF$Uqo-D`TQ*{TE@%k-Y
zvw|OVdfLJ6HmD>I-bH|F;75Hu5w7<Y3|(~hH&H#^K6)~p7+Ske?v=;FGn&&t*+b!X
ziT3?}O7Nf!aHR>Yx^TcdJBnUyw<b@!D6qW*S89Git;npk8zPGu(9_x7ZKn<{dzDb7
zusL=gi?!Mc{t+S9TJRe!jZmpprOqY-gvBf)4E<_uZf<F8U!}ZZEg*`#tsp?{cNR=y
zQqt1$GN=f?YHOye<sWVX4FJhh)w78OzrY5Ffy(pbhYW%tvb#MA9<qWlLOq6SE7yW(
zNp(0Y9=`d;7y5hKYM~FmiNE)}T2j{)(*eta-X|aUkF4ls&{!dVIXh49JLhviz-4Et
zP=R=Ai5MitqzY`+uRLqlktV7Xt}}ay2f<BT_{Dj_O_vq!R^6G1V%$&qH0euOia+`P
zK9>LJK_`Ily*g<@PYzh8i6G=xidhA^s9NzCp!II-RmbSDruFr44fnib2hMqq6NZcf
zp)kAZmYv4z((@Gg)Yzz3YjnXvT49v=RV$O$$(sU3EaG(x!n5x3WNTe)@aTmADbDq_
zp^N=M6^$t0DajT8atfN51TMtd0=eN9tHrnJ^Ve0jwvw)1WUA@rXEp!R>ljdO9EjYS
zE2-R6kAluDoBDH=OmSWSgiILdl`MP}<WYXF2^wY-`nBIKv2=B1_Gb3BaMZ+goi$YV
z`Z+Td#+G~KVhsu0*EC6?a6(E+Zx%#b2{--Ubt&X0g;IyJWe{bGUg%$Kc4gu|wqtsh
zytq?Z&0y+Oh_!nc&#4syw#5H(d;b0-4!E>1B(h8tJf$$|FRV2}itK$g3rEo7f)A<X
zuVzkKjG5K<*Bhk*395;0sYBkvk`m3IAkZBof4<CyOG~F=Ga^amyLxV9Iq{C>5*;DM
z{k=*zKXRisosW9teA{JJ*%zTLsT#l;Kdf&+GrAMC4X*pg+x7P!o29{Jn8So^@4=}W
zW^v&=kgT(d^G=XeRgJRh)fN1_{2kLdF@w12Z#0^FlxAVu8fY<z*AVsDyy%Q$HlpUV
zp24+l>PKifuMx(@&pM~KaUiu|77>Ov3Jgotuo{W0Ey;`;2|nl4eb3PP9Q+r8>`CQ3
zZHF2dbfDra!%YVMZ3mKxZfb6U-5GpL#CLxvij@+lHGY>lt?*u$i05*2BdEl8kdpcB
z2LZ7TMMN7id4z}CPH?ktKhh>}z1N!9J{gv_v7IbJqoUsLSY7aHzLB9exavjOjOIbR
z!zy(#WZ3`59sAF%Fh|$xw=u6qB7y=A%eMoIrYZ0QJ59v7x<*?}z29AuhsJr)&#P@8
z7PYATTUA8r<*up6-8pN!c`?)`4?JdVaz|Fh!SbZFKF6hU)Y=2C=5aTqR(of{g6RE}
zUDS$^%Ul*}c2D8S-+;`&4*=Np5*0wt6rT0lXn}v*i*3RMU6za=*e!r`c$ofnQcVzj
zNii79(T}(dv*c(?ko*3e{*$~$fahLv$1w{8Kf6rb+<r#^iaATBB_~d}E8g?ARu;-N
z=z6~3cQjTesx_qcDIO5d+d2%ce)|S`-ryG@a$V?@KGn|tXA8iakArEWnEQ?{<g6nc
zEVF8_ntw~p$v`zWxc1VF;+y{B6-rtWqPrjE85fG<ux8<P-VW4pJ{@d&w{dhtDwnpq
z%%pbI9pV^cJ{rO$M`1YZ^1|)cbG9Q9+3hIty%s7$^Rc{4_I;uIYW>I+fNDoIHM&!_
zlFubP@t<}TaAC2L0RIbnfd~~`zM}057cl!-{=z#P(_f5AHqEdnff-Q3vUvt}OV$gb
zvq438&IfacwYH!eMHTYWW|S2bwD)AQ5Lq*2_KS($$P?6p{yW~JP~~QZsaW#=S4MIV
zoRQpf4qO4S{BLkeJ_5WtXwx4#`n>`-)~%a;Ng30gSsm6Ikaaw)xV~wuN`irVf2aNX
zWm~a?oN&mfa|UF-)p>i^(Tc65B6}VPs?hrx(GOWfAYmvw&x!gsx%{Kdmp}q%ZMjHg
z8we~j2zZ1O;5(KBpjY*(B_o$_&n9fNqXThBz2HrT4*<(fO5}*pp!3z*)U*O7zXW6%
z@FsADghl_CJ{f)4jB7G3)Bd!Hi<=<jyXzmv4TaU;oRKFCsG#=uZTfrsZrI9}mS%|e
z*|OTM4&Pg*&JHzjd;jwuK8gaMD}i})%wvZG)N>|r!W0F_2e+-XQGf|V@Oh$-@zPez
zIf-TL0wkN%$`2$p*Sc-)5V-Gd*|a8#MMF@mTegNN_tx_2?t^!RhN|x`R}?C0#N3nl
zu$aY~GoqJ{FZh&r_0*rf)`t?B;E>f_206m>>AMZUWWaG3No838xlLEg57=9%+a%H0
zQtpN~b{aVQ{s>SGBYIj_Cv<svdAl=1Eyk*<%vxEt*9}Ar_YE*b=BjO5yXsf$HY2jt
z_mc~@o{H>N$aoN410Ng__TM(A`jnNiY0R%09mcmrdQ>9+Jbdw}nbmxSq3#*1VA40x
zA2+sH4y+PK2zyN5HvfQGT~xrlhq?v&QUE+fwW4e@H>+U?0p=)0+M*%Eq|F>G82t;L
z`2q}1d2Z+5J}ytBcs$F~v>vPJfI{3vs;;T@$u~#38>t}GT)ffVOZv;$Z1#ch=EN6X
zdUCW%aKH*+P0of0c<fgY)HX>MwTS0ks(J}DS!wYY<%NM3;f-%-Y4(rRD?L>1rutAO
zB*I$HHt}ZRYa;T0IXb#PH?Jx$z3O|laNy$iM>@oj4viy+-q8c}8Nlww014sQ<MrLI
zz^R%+A_1Tf>C9J#YaCfJrrS4DZ}t+fkyS&-c(`zj@}CWn3lI;=<SMQ0<f}7~AdFd7
z(VE##yam!4vvYIU{l^zf2G3WIWiMlyJ5c@C{(RjxU_nQZKyP8lmpH(e1zV$j1_ID=
zw0cY4J|R)G6V~roXsp)vevX@=pak@s*wHZt?8J}R$WDQ@YRFSmysd^n6Qr)M8#Fv5
z<J1TW+><1nn8-dZGH4~r%7mr8D?Pm6Gn|<HW9Z^xEe=rm(epoba~TI4G>)@y;Q(I8
z<PGFKR6Pp^aaCc5SGcr{FV_O}co7VvPQli6#Y=QdD4?j%VOQ;hcR-=}i?D%EcEI)G
zAL=(BTF~v(hhUtZ$JDitKUfZ!x$6L}Ku^}}?V|}X1zBs7x3L)^<Wsc(`wY_;AY1yP
z?|4ZO0nQbp2|!m@kJ7iXVSRy#-{y&)+4z$W_Q?egn}^r)`1AlkCSX`H&N?6iO8){p
zEc|qTo$2<*CQx|qhvtL*5}=uDi%a5#92(ljUP<C3WNa%7XBZqE$TirpJAZsQ^umGN
z{+`~!`}EUuKztaW`>cSYKtenuUBqdxTq&YIBMQPLH8RZgTXw%7fW<bzXL;42p;bWO
z?8u=NZcHrStT>Rn^4qTCX^bN9h%Y<co_+#rsXvr&NJ!ujVXH>=<5zfi-LTYZo=w(b
zSKGERTYN^{u3rY|Xy)o3=SVR~1dO<8m-YWW$M_Q-UVB)V6%@S@s?@YJr`7juqxrui
zB4B4{&6ql0p1&MS9LT-Pvom@eaS$Ey-oh-9WasgCgfRh^b-umXA{jVySfDlQV&5P~
zUAZXa*N%*uN&sJRw&OdN?>js^EwQu)!+(ZFrV?_otM1ODQz`^`b)#)Bn0=nzjsN%_
z2#Z2rmgPQoD|o7emj#khE|^edu7HDy554N`!zDVgJA4oA#duROMZI>qky5>N_t0#x
zr%{cSl4s990gK!o9VGwb*xK8#`!0*O=Qzz0advz^X4|)C;UJz2&+F>4Q?1GhNs!-#
zC==Vq{j*M>iz%l5XBU+V>wI_IVE_?^s`i)-#z_$~+&6lo?u<WF+$UzD8R9&E3ie6Z
z3xzR(#ZUW|IX)^+8)#pgaAv7~;64NFgjDc|JaJ^%`RLWMr3(dh_9-y;N601i)Q8*o
z%}Z^tpI6*A$=cy?Dq+&nMor)C*Y@bCCuay-f;I#_P}6aCMGcETqnEkhTvx&M6Ay^I
z6{GYCfNmRDX+l~)G>TR4iX&0bym0cqKdwpd5<q+nFZZvUVye$CXdvCKKf3!TkO80w
zmT?7Byip6(Aa|#fywjmzA(XN~2Av=hlCxN2gc%Hz;4$ay`OZm+m=(KIaSQiKQjI!x
zDha`7x9MN7l0LS&_5t;1>(NVLwB40p{i2p6taNMfvsTJZ_(`_%LH(7yHsOExgBMFc
z%igR9O{9|zgqP=<ddsg<#fZIk9XHXLO`jdcHbJl%K}baK(i2nbGzrg#zg~3>72VyP
z1}zy%Cg8v~nQjdl{lslqdoVuGT1=xmd3b0c40iT^#g2)<VTNKm^Xv!ZiwX<2+34x8
zNzhkT=ZC_nb!mUKXGKO<-*Z1zyf#!*+|w`$#L}U|9MmnPeQp+v=OT|HyYb-GZ`qH`
z*4E41W+}LFmd3MD<B@W3BDm38dT`ahfq)=p=at0Y+!FDXgw$_G^cBYK4qkhMI*g>{
zvo8!91#-eRk~FL`tLqiI>v}Pbceftz^2|H)Dkr@B!%i@nd0${n$V+v0v^D>bPZph3
za}8Y`TWB#$bDUFEyARwQI2&U7+Hmp)3ccw3ht~qthkFi{V=nGhs!u}S{Ok<nDz4Zt
zh*&Yr%|CES<9;UR{(ulnH{VjQnSf68EU5Y_!Ddqtic4J>^x~hNL1=J+9VAKJHwc6;
zz(+U)v-;i*sM7KEyz%KIfpR-7*&p5-IsTZKE)K~x4_}}GlW2;ERc__Ov6muD+*q6g
zCmzwvG2h>R&POkQ4QE$JO;%ijH>2YXJu#XBdAr|yq8a;KC$7O7-^q%hW5EhyTP9}l
z9!|I8M*@lHd;rKo&4KIiJuj8eeJRT%s@~18^Wk06z>?qWcRYJ$(uj<9{r!m_F8g~N
zUDacRVj*lL=czC$OrD?D(B5<+!I862I}30&xiQH#-LVEc$j&XbZ9VM0DxRdAEUECh
z*9QHC1;9(tZ6s{qWD=P@o~wP^=e*E@RHMzjSLoQ~ehM2^?20Ud=;9r(w9N9j3r~9i
zfxzw$I5M(7IvfA&*`NlzmLrgiX94&!o9zc6@9!%GZm!MAD8>45<mF;Gx^k<m6Y$N6
zsRwhBZi^zsI#MJ+#0^9F)=ZKtP6s-hV^!4keB<v8oKWek<NPVTYlxrwd15&1ys3{D
zL_JG*2$Of%`E~t^+CY3#7#XpS^kNQ1Z^8Nt_l*-Y3W;y-QB@mZovozQ8!p?^1Q7kg
zM%ZPIJvu2Tx|b-$VbxU`dK!ma1e#Z*(ff`<-@~05Og}4Gam5!3x^GRNEly~CaUy5l
z8&dmpiPoNz0lk&k;(cG-U5*eT=>z@GPyA~jeM+@tVEl{>68teSga+7#fYkf>0USWu
zgeN##>1RC9z2|j8DEuL`>6X>zIAc$+z_JtCt<^deo}E;*aO4>=#g}q^l%wo2=Bt<l
z=Ie-oC85uS&+|JjbU}EY46s}Arvzk)m#Ci|VwXAY8>Nw~Ph&C;8iq9cbeinQIySF&
zoXyeTuc8PsSl?M9H)kV-hOE^7{v2QYrS6baGO!L8v$I3bs&xLP%ncMvPO;*AX?`Xw
zJ;mdEpJol7I63g<CBT1~lX_ZUs`9hLbJ%a+e2(oF?=E}~4?E^&E06%nA9#2O5*G;I
z4b-c2S(%+yMzRhKs)3vT9J}OSp+YgaN%vw~UaQ&EaX(fsZDNm@D5Sh9<ft#Z$7bTY
zGxJW6vyG&s`7yqaxfQ77#GC3YJ0h@@0v$_lcrq8N>E&n8q;I#G_C>A1r4FBiAKIDj
z^Sl17uA(LwQzoP52P0=)fupdisQ;3?FTzLw(x%?O*<S6hL%;z6eNH2(dwlm8G*|CB
zU<JKNE-#t@EWfbHHzsXFBEE4ortvCF(EQSGwP%EZX;+cVZqxQ%+7H;3)-xX~nC_sq
zcKlI;m_AzJ!F!a!PF*ehIA64)ALwd#vb?YR+Hh#_Zah)MQ$iQ{nbdr3pXLWgRS*AR
zPu(Bot+-7MJ5DYK8Xwh}JVTHD9CK#R=}2T|pbw-<;|2q#Bl-)@<_6*0Z$>F@wl+%6
z6WX{>Wd(=XP8|2<7TdlXaKB)PnSz<0Kg*d*^xG9@Yjb3@js2IzNj5V8evmVg3IXNQ
z3Hqu?0#%kgGFl%(LJE!;wF#UR%kO3ue0-sNZ}y>rgX0+Hxhpv5TX9!5HWvNF5UOj|
zDKdlvi4jIf+K>{Mnyr24Ii5Xx;9sA0gC)(H578ubA#AumgikA1zmO<y%SXp04jLNz
zt+pe8$-^|4-jy2KJ_=I`KUITlYinP6M>J^OYCm~v#(FFGyLmN;CGPUl%|S}Tzwi6X
zpiJ4+C*p$zz5W@~z=JD{^$uB)*_WNn_eZAH;>N>kf|uee)@2k54@(BsXO-?p$KNI2
z7#dZFb36YL!at&D2=9WAe0yi#le&@fmvU)^&dc}3)rD3mfRIc2x$ymcn~&*;kI(~t
zb!$$&MH6JD13n}Z(-hVN&jxD-`|C$V4%A?JaB^Uf)kQw)tm;TWVeMzg%=|Sb4t$~@
z$_GP8rg{jX$|B4;JvyK#sq+HL3u>s94#-#E{54OW={5gwb+u=Ilr-NCgu|&(Zi>o3
zcb^4#9;)!%P~ZG{HVQ+V{gIkytf4}1AQ!xL;_Q8W?J6(*&_GbI+yHnuiMrXx?__r}
z^6`9|1)wi2?9fy-o{rT90l1IaAHRzK(Ke~X7yvW_fSK~p+)o*Y%N7_&ECT7+tr1@Y
zObFZFK2K;o8yiwh4XQ_>unC7qk?prNV0xOT5#S)Wl<BRL{k2kY1dppsA}rmi{v&_3
z;#z5)95w*Sb~CFb?*j=p!ImlZ^#8Ij7Rz!?ZzmI;W>^Royq7uz)PDre=~ZeP$mQM@
z`~qIPby885w^PeSRs5os1$`Rl=9)m)Yi{8nGWCD@-;Ut*5zA<hKg|%#+Nm8L1^bu2
zA;#o(!*bc81eh)s+Yvgc=}z1Ii!RGeeFpJ2#@Rv0-0Web?tcz08CYGBv2@7Oau_K9
z_oqi;82yi0a6$J?@dEuU^QDyW@q<fBxU{VLJq0$@wQISJ+eX}378kcvAvWZ}r&JgL
z3{`lLI7soNJHh~wAVAy)zwVD8?l+6eVgMuQ<%ST@{gQZ}(edyEio`{@ABU8)mxnNU
zIs_6<Uf?8=3;gfPbpZLQn70=lcsjIZJ#Hq@)40#be6ui_@qFZkqWzW=IC-p@=%o8`
zQdnU&r^j6Rl7}OKVR%LosUL?S1`m^DFD4J(n`S65sKJ*yNeMVw6If7e#E;Vo`hweI
zxWsyRhkaY(`{P~Y+pH@0&PKH>{CiCvyp>M4v^w|CX^ziI<n%V=^oGdw_B0lc4R`h|
z#!h$OUcBh?J^F&K$skY{4hc6P_>c&66bB|R4*u4TvR5fjlg9!POMZMhxijeVb^g!(
zh7C3kkps`&w><bA6POs2?eDnPalB_65OxIV#0uXXL2(-MhxzZA_a+?0LC?zQoto(N
z5r8FR6(d!XtFx2Oi%6{&t9qZ8j2r}3$M$_Tm^}NYH+yd*BUZmCK%0BBl~xLPBuSoV
zd>qE%wg=m2iQkGnB)C39)qTZJORnNAkVOzPlClr&VVTB;+)931Ofk`0;81!z_j6Lp
zm0_ZKsT_OB8!#(J?vf5@_P5sSBQ%%YMIRd0_-W5yKz1S|w(y<2EGg+dO5PO#y%?+n
zXm;l-`*9n9J7<CkZC2ua;Cfnf<rGRhi!|qc(OFWr%<SZIlSGQgM`}%<^zr$yLZ^bV
zEwV9Fjki{~FbD?$nHZ5?lZvT?$C_lYsp*$d7>?B(op~@EGz6P5sLqLF+8-reTo`d$
z+`9F$mGxcJOK<-bg_;J_7Si8VgeYDdVL7uiOiuW8Djlr@*c~QN5Pn8|cKDZ_<oO=>
zS=T-399M#j>L06v*)1>^7|J9#d$6Vl$S7E{>yhnSXW7$nT+}C5cYe##yeOlTK_?n!
zWs;xcVfbuWWrsS<F<QVBPfXQ?3KsKFK&}gSKMfKCf_N_6O!~v1xOJ*8zht#dfZIIl
znQf&$lurB^&A#U$#;lMz4<~6ojl70r{s-gbA6pTN^QIBYTeqY>N$S-XEyg8BfvsZR
z9v`5Ry$&(x)$gfD67Jzu4xk&g@8S28>L7*Ekn>4<Tg4&VPf}VM?1fshAKaiX8cR^R
zO{%L6dG<Y5Wp_DFiUkrO`+r0OEk|L7hgVap;ltrzc{dhwm6`!|wI4s40X78yzH@sT
zX<s?n!|VHv5?-D-m|y!)#%z}~gr~G|{H8PjES|e$3hsKO=tS+YubfKsF}X0me5^k%
z#?qh~S?D{luW~&)ZhwWYackE)r29O`hjYNUP9AR$&?7nE43pI1qw>{~Tnv_aKpU9l
zfVdIzz>q={@N;%bi7iaIMDD?fettM4rgk!|_#uF_tvmMKuZ`TKP%59kgK%Ksvu}3z
z)Y?#0?C1CQ!LeVtH5T}>f{G~(_<i1&%D<QGAP%fO;&qtU4j6VD+GlUPzSTs&-DAM(
zp!Ovpx|ow{?v#j;ovKrfd5d8F%4|ke_qW?J6fDF@Hk7V6N}w2j4aaw3)Ay)pI4|^~
zP-IXjL2uX`GU*v)b;SDfFg;t9svz<)Uu<EoJkazA-Eei6Zk8R6rflv^OMYLotC`Ja
zxq{W!ea=)e=b`VWNlv40Cf}!lb>Fk{`+jS~<XY%({oLUM!xxvqM(@3qkpW>R^4OVq
zulJnGx@=#Bqc54MmBx7Ec0#G&YKRJ2j#el`yH1;z+4qjF?KlYf51ASy5|#-*78WhD
zCQ5?W_7v-xVV2tk9xuXjlQlgdI(PZE*HPE_i<FCkdaKShl=0hJYhsF16rgu3w>(+5
z(#z5fv*NElEV;2H<=;2H>z8dL_s-D%>;?zXGm$tHo>R3U$a&Vr9gul{%+nwH!Q=EI
zrSBxCgbsUHbl5q}ZXww2tge&5_&4#$0nCc0>8Wy)@v@AxVB>^pu;*R1zDHy!wil)N
z7VY<ldAO0A@ell%>R2Q0Z;YyDR_oObnCdK62%gyo%1L0@p&Q$xZhPuq6X(va#8mg(
zbMRNu3Cc|PX?!-LU^>~g*zq9v$$5}Jh0FK8EJIhwQWO2XVga$_S($|(T1DlaYj(7~
zNs+EL@m<a{K{mRmCcjHX=YH9pQ^l8#YTW714m=zb_Al}-{gV_`RKkQbO0(HeqKH2Y
z+?sjhhUo@5f3irTQN59Ia%?ztObe50piJrAMM#<PV^2m!aF%NR<l{^D_!#-zz~6eb
zEBxH16}^R$$G^7+o|mJA4de@c=C)ny=q187=KwCFUgi&8Zqg@fCTAFaOFPN|?j&*6
zml+zg<D{zI7B1Vq_yN1c6^sGaI?3;=H%Lhd!==SC19stz@RF|=17{b9xrXtWaCDjR
z<Z$p=NnQFCTxKU@-CqpuLNn@e;&EEC;!(Xpf4`gc;2%JM+!ITPOfAoO^G?G;I69$+
zD2HQJwyEWCR&EAX24_w$uChpF!X$R7#+;O8HK;g&Vh4Go$a7vHZG3+=bMK*gAES*U
z#3`2p)=%V=t%9=Rdt?7$`l$5z20>r)>^*@ay<ZEN2TMgRTk#}Uf9GtnUBQLv#tH0-
z3#{MjK!rHfu!~zt-*m{8P<H9pJ@bOsn)&uh>uKW&<s5ikvo$jB(^67;XSQ92Z=+B2
zzjzL*NqXfwwr1rPXKhHYS@9Qt^fQv#_+~0pw)5jF3!xSttbfz}?PkZfV$wUJ(G$Z{
zrG^grtGxaxwW=Nka_yTedV=!E^&crs``59zBV|_YDikLy^X5N^Bh9ss+qhK?G{<u0
znKGN)Jac7FQ(BXY=3V->_SAT(kI#N=<am;9?!CNOp9u7b;Bg^|wojec{E0H>?0YKk
z!EB^GI%#01NZ0;BR-=0Xl9v&-taQ!bPHlZdtFpK>+M`b7Lcn0Yar{e_<Q?ie7xR@K
zOXczH`mvRO#?6g1EvW08-@626E@*U~<p+9Y2ef4eC}%ovQ?_FI3+E|HnJR{EGCZu!
z>!VmgCmI<9jS2`)IY_kyaRhTFzG<cPYkDV#TAmHSZ+%ZqBpo>rTM9Y4e^;DfUWCp0
zE5)NPE}Wr*Lr3PDWnn{qOmzTGVPx{ePX_IzZuuSK>(Gif!a};ggtihld(I3td&aKt
zI=^xkU_Rh{*$K5^V1C=*(EC2=)EZ<eM>X-uuz2jiIk&+nBF8e?T;xckPGZz7BqbZg
zeE5QZRfbSyyx?Jekm0W6hj{L{@Ul^FxFpVk->mr~)8hpHkFmFaifdWIg>eb)?(Xgh
z?gS^eOK<|g-CY9&_dtN)B)Gc-cXxMpd7C8X+;i@`?_d8~!?2kddU{uPS66*sRW&Qo
zlI70VDh#N2){@BArRI3)NO{oki-b#-wa$;`g$lS@AI^IXI+~EYKd66sV9FG-DC6Vo
zy_$TQyK&3R<%fpXE9eL_8WgCC$s`}~f?*~a*_Z@DdNFibyC51LS!i#C-tM}?>wTsv
zoAzvHd9F&V5Wkn{cD#Ya+5^oj?GA)0!(KshxD;|$tD9KmUAUWnnyEK}_FAX_&ucR}
zNo_7=mE$8{fdE_%;Fy`2a!_hI@S_H#otaTs5os&~qi%RXvv7eM;&M;E?_KHnvz;0D
zCrv4e=$vD2syb4jm1N^F*>QTO;ptJiYqHcz_u!KK@7T`84TVX4I(JjNP78J*vU0}G
za^k}t$qyx9nv+s8f~XyxIJ#!k(|lex+1ROrv69-KgnDK7b>ho@QNu-oP0GH*$Mh%P
z*|H?1S`RM>MWOyytSVu3VxES_Ov{g;*!7M(w|eaGJ}~kJJ>BYx%Qy2|ERb{dC?BS;
zU&*t~L@GMRJ`8Y+7HV74DkdidMMyekG@SPBLA)KQ{iX`K`%t2r$55@=;E5K7YLsi4
zRlyRenzmRZG8)8Czb`g}6PgQ&(#!axS;1%%^c|cxxp*iK&2*qs6b2_HC+WC;V`-;j
z9VFg6S<k$d&K^RoIfuZq)&=cJwKg8G^`09Geh#-1i)#8~@;vq&jSs^drZ)9$o|MBP
z>jq0pV--gkm>O|T=@N_1!46HNU^u5?P<7tq-4ZswlUhtx2~P6imZBbI*k#~N{$WgR
zHU{5gsG5W02b=eK!Ekn8x%YAHc=;MVy;%(}{2sY2m6CeYSg>x9S$|9=xvZzUWqo{|
z{(h#`=+eEv|I+%v{La%_$>v<JN2cyMV);Dsv|@64E2~~w@2w8a)X!d_*iw~)F!~K^
zxGRG?b-^l1qMw0Jo?k454#eL-@EcR_+lK5@S@=HPPg@~x+D=$4))UkTrafUn7mX_>
zlTL3_Z1p|~KGc(eeujIsamoJ?4P?>N&=vhuCet+uFOBS)27Oravd%2hUx{%}oc8W{
z)1+4^GaRH+xrkY$7)~JxDtBw9%FI#G0)tX=KOUX<3uzl-A%=#CUPShr={%`0JwbAi
zI@%U|;-v>Hgefz1S^@u@GA6RaQV{Jz6+Ksp54oSylq);j*D}oO>&tDDw9nzLEWh%u
zRPha(YyrP^EiyA|w;4ZV-GN0}cn&x{G#Kp?yvb{)3-sKvy1VXNd`hg)yLBE<)SEUs
zOIKSVG)adRtbT5rHg&jid<5<Fyj!DmoEd3$LD-gkV)&|h8V4~44)}ia9U2?>zzWpF
z@x`?o?C+TBH{y2RV@Lcz*P4I^1UrTZ+&x%eLuJedEj$p}Dw;WF&iFrEF27<y(|)GY
z-{;eqaXWd<I5n-mUrpOuCIFQKm1n|HtL}}Pr*~whU)nTU!(@B5K~pl^I`0*}@ARR)
zvYj>}@|CkrmJXgTuvW=^@oYdo+WYoPuZ&9g9?7~OI2_@h-0cgxaGw<EfdVPHwhy&&
zQLdU?dfI4K4AjO{a1}GUtK3%TV;GbI#~)^vE1hgX{H!1<pdiJFX{ocaS>PxV4)<|Y
z)v~Esk^LRSNU5#jganCma4%R`^hq^{rKFQo=bg#D5*Yo6++bno-dv7hUPY<}AJh3{
z6%9UZYY)gG)ZaprNV?LHfXxX3)l^bocvk5AGNpYQvSsdC%VEfcVHM_B-isI^Ca8R=
z<ObVH3|^iTDQRRz0Zj*sSVkt3u`KYVw9_e2Lix5K?h%E7R~f!01{IG5>xZRMNCIsw
z<vTnH`Ef;Zt+?^VZcEcKCW9QuV4EYKi(%2UYZpdMBd}MAwptf#_nvFP`QkMg@-$u0
z8ZN`l_{cZ&&_Zp=1&eXb^-m^x5tl>S(`U|a{qKj(CRCinVi`x(c<YX%EPLlJ4|Btv
zoX3BT)rLhc`iJ}6yuNi8p=U2?-muMTX_A%Q(C>7P@fvT6K^yLxsy1g*$aNp*KaN1P
zK7%9u$y9JqL2;z@2&Z*hXMDM-{)KWsPtg93_8qC1M}{CTqXnoLT3_s~>8a2c&eW0C
z7C7Ni91(i2<@B~E3u1Ob#5Bt<H_ohZBbFQ>8~j8MHQm$=tY4szrm(>e?xq%~0M{o=
z**ytj`xmNT67GX^=Kvs=m|j7Nj9}?a_v>60(Zs6KswsZ?N<&6{`^mM>B3bs)MaZW;
z&>#-oAKniL^;gmtX9(aiWwQmzy1^TD^pJQxAkupr<B)r;MDu;Xhi}DRsD5)S7(w8S
zG1YWWdQ|d2pqeW$n%P{V-`?w}e&)%&_Tk8?fzMJZivmX5ljEcvu2oqcw5$=V@rLwd
zJ$lIf?6Bse?IVzFD)1mQh10T$DQKK$|6Nkhm>;WzUfjBvg>BSOL@SV#SeFn^aH?}~
zfMMLk0GCf%s2_o}X#Vwnoq^!^%+IGc;a7Pp2+Sf$qmbT@0|RsLD#=xoL}9HLXT+aA
zQ$eSQF_SeaEw}r6isio>8;i<-MQ0p0`S{Z*4No4i+Zr8b)Zjg+9m5C{G*ZHcWdtki
zFjzX!79Tr7O%`dYqwlxE!VN*)Ab2c@IAhP{^K4(it>`%?n<QC~P}OzH6^CroXiZdJ
zm2BgybcSOQn)jNq&ns^S^j>wnMxPV~!}B@aeWkX$846yVTfFMvp~MPDJs_lXLGOyp
zrCr2(9NFNcZQtE}mf?^|Atw>|goU{kiO=h_^_rIzh)C_})u^J|^cwRt9u1(-+W_JA
z6NTo|o+ce>U`3wq|GA;(52JIxLmR%tqq6gRN)DM8H{5VTD6`86Dy{MJx%W+fQeW0D
z-65$gG)?uqPSN_-*R!A^IlH0Ub)B5#obCE0sE3qUHy+o2MMV+IH=<o5!TVkAKJ8*h
zAuNol?kkGT1dV60#L`SYXQX#FLJAIK5evIMq1GSZPqC60gzBv<b-=TS9}TEf7>MXi
zqo!5XqtCrZIn0I@Gq6z={I83KL9!9R*F@;+Nw1|E=&<DjG_6{NQO%qol5m!e<Y=e>
zz;fga!fmx4dP~2HR^!!XB*yt^Vgpze{Q*DMG8Kahjj_^_i#eiF`{!q)V-F0Q$9WIq
zmOIv|#(MN~qq11PjgF_Ac$KT}uzXwjF};eds(fZI5Fb!9iaLzP_T=e77aU7g%C%RJ
z?HF-eD+nY#q+qMO%!?l$IIxB$PFHN`$VbYEVp3jCB>-qlZF|}AwBj=8B@eWaFtE}l
zO!Y?Wf)eYL!K*o~hXF#;pW_ZfTqrSv=mK!i#E-+(v5<68UBi{%-w{&CI0#r{f`U}F
zx97)T)5!H`ca@rvJZj^uBbyKo{1|B(C8fEEi?WhE%SE(Q+pFBqZ8eJ8l^>Q#ARY>X
zko>aV_F6_ILEWrTuLHB{R))P0g=fFY0FQ*qAZ6A1*+r?9*D=EmzT(D2lb4xA2`)|2
znzOjQTVG=fLaEgmEg@XLEas@ZT55WPazIu_B1TR(XOtxmUN~Je5*>cd&>9_X^CPE$
zQ{&Sd#u)@@L2<8X(#2flTMj(!y3#xg^Ng>+4$2h{ZD^%$WD|7(CfMLbP)+f3(zq;*
zrjN-?iQY-Oi1Sz`oIe$F&UrBT>QhvwXX6~96gZqG1166fAp>rOqFKfv!-iQgN234Y
zEZupe(pw6iBrPke<sC<BD~sujTP98NLXrkI&avJo%K{WQgd&3GX1o;JADz}7__nzY
zcJQ2XZ(Gw`PU)y0uOm+r-%$>Wkx+quNs|nm4d=X6LmxYrceWO~ukxS${_|T|f0-RR
zPeK@Q@PfjomA!HwGRY+w*a}9hXy|6*v}&-5x2$oMuWO*9jf@AE){=23^<$X_{jGIf
z88yc96|-joy<SP9aU!NHXL^expM|Wv=p(L+?Yk<u_o5}>QL1_nVD)CGv=TBy4P0ys
z+&{XSQoRl%k)H0q*nkeOxtLCBtW3Y*AR6Qg<KHcMiv>A3C)v`;+%#0hdlVyxN6|WP
z!s)iQ!};RQz5uJP54G0<H^((<s~M(2d<*FWl38Lf4*O8KxgbD!86po5dTkhw%Xj12
zv)`dz9_;jww23)YhcL0`HVKl*i2XmanS2oyw-4bLqXu<Vs;+rJJB>hKfkBc=tS8^x
zA~wIIt#cP7rVSJg`<Re}iB2ptnvigjE3$FGb}F!B-yX1JipVN5LC;BHG(@kEmGtpJ
zB-RQvmcyGg<`doi$DiHC$?&-_$?%hnN%`LtOA}`AX`osC*F`=jf}==EI~;BAd#QnI
zVrJ*2>P`{UX;0odS-h4CGJ*A*d@BZnFb{?{s3yrohw2k=@(Kh6d%>>`!(6($hJ*2=
zzKe|o*n8^a8l|7&J@}zKb+98_Xvsm1kizzhbKI4jj<rety+6>WBS+2ycdO|1EEB9C
zhzo?Bk0|gyj(F_#<E!kI$!y{eRAj}KYGR^NNy<tnl*W$Iy$i7%5Yl>e-4A*G0}E}e
zPFDj&Yx-M^O}U%iH@Uf+AIB+Z*Ut{*$;&-~=Joe);YnGQ@SxVL;6EsB&bYGgTJ-oH
z)qm0qhu7O*46w0ZT2nZ@M-1hOVNaQ4jMSaB5V_~S^bm_K=!9T<V|;(WZe`MQo$gKl
zo;-+@ksR7E1LHehTyCX@ry4u{f<>rT^VIP>BWF){#W{5TF(zlFNi3T)d&w)Ihi`p1
zv0Pdw3e83_0%&%^RNDOqQDWU-r=H(My=-9Wa?NJtCj8jRh5B|9b#bvXlgF%n9Mi8q
zLYP|z$(|WsZVNBS!=Zu{EeFyP-8QJ*$*F`N)M9nPrE?$FQ8-&g_+MDkq7gB?7GWov
zAb4z=ww3FSaH>!Z$urHckhqQa;`kIrx~Xu-73#1U6+Z>d!hi30<*@%LNn;!_5I^jp
z46lyb+KoA*mJ9|sbrG3c#Mv?Uva8O#Ip(6nG%Y4qSv0!OU@56s!_qf>q>Y>Fk=SEP
zZAHlBrqB6q-CE3kAx9$HU(wMtZ};J$;me-+yXgf(Cd^pDREiafDKP8rOXGIG8G!~^
zkA?@7*UD3HHIxJ5(xToC_Z1|tKWM?$G8wwMS_PhAi}j9qr-KkbgC7~L%6hBik~a)-
zq$W&c=A38RbFx%a-oo~tF_*><nLY9RSO_6Su6ZRS3qx6xc8s44p&w7W{#~jWpFA`U
zJ3T(8;mFRQ1_aH4$>ALh!{b`Q*Xe>7gcRspJU!jh`}ug}7g~Fc=*22u=Gly3d;5j-
zuULQ=ANj>iW`prKkEC}#o6>6S3NKBz&zEaG_M$Qkk0wHLIM~5$II3*duWjfZvr&eT
zoOMfO&S=xlrw&_rhcBvHN@0$b|F#khmYoTdKXt$*^?gdXw0q^sV8o0gwWs%viFf>4
zbFFk)whf&JI0h~7?@=#bsTl%5)(j9C9e;u?KwxV_TC+u3Tb>|`wPDkE)=9sBKq0*_
z)SaUGBgE4)Z=4ZNPVFKY3<3cPt0I>I3poah65Xx;=+#ASYu}WmuyOP&1f6&M*_Uq8
z!;-C>KwqrR4H$l5Yl7h~6=KCs?QQ>}Yd{lGxLuVHLjbyXVus|E`EjeT%tI94hLznZ
zO=VB|;@X-q(fyU<l%Kf(6#iS+laOCx%G!Kk1kbj82muubJk%)wYU&+(@qcLcIEcM{
z-vw<A;mw9)ZN5Ms5FTZ1;|L_2wOZ>@i3iU!*p<UW7w>aIc<v;$)!zXYf--0T4VO0z
z(({{mD;Ih>?#WhN><`UIJ`x10-3<S5-EwA_s#R0(M7rjE@u2}BiJt(-SIn|Ey+63W
z1$A_6ZMp{g&<q<=eE!u6pwj{g?|+N7)*s-&j<Tdv|IlfqK%c_}$KZcS2DlADI!a={
zRe-}J@>p@BDys!^Spn6bV<+aGseU|K1kJ`{te*XDl4*5auJhB!-<rSpH-l;B^}@Ca
z*hfkJ>Zks%ngZfoLBGERc(%^)iIH`EawVpMuC;Bu9Iv}n<<WZ0S)C0Z)~j+nGwSfR
z;$&Oz*+O%x7X=(KYQ#|M*WmbW5x1Hu+be8g|87YR7`g>1+XL}`hy$PJmo?o_*IKAt
znko7GBq;3HxU*F?-G4Ql0qJ(ZOdtaRzvPLP#M<>^VTlY1|A3;)>34I3Vm`xPw@3%=
ze$V_gVn7;bBQw8AOkgEsr6U8$k-hz3x-OvH9y4#^!a`#F*Ax|7CxP6pFP3UqSs>Va
z)do676o8DyLoWZcD*MtZ<<RNxR`Fk21uvh8|21oVwTg-yOJh0J8*c4&U*b-=yKXcA
z$3>K_C!jyisefa8jyvB2&por%q4`G!RDcZ5*|tM|H}8Z7$iPO$>bIx??`Gr(78|~`
zhv=u!=`g?L(k>zn7;sMN&HcOpBRJyKcSD&!&5*n_W4lHDN0cumOK7YPe$(Z@oAJ1%
zC^thXw;>?*+Ze2fBt$^R;F!Ry;p7BIoa!x4`#tURV1Q|_w86vpYtHx(0NhFqIBM$e
zMF2dzF#CqR((glEshak=bG!DheRNvsK=PGK2M)CX4erLNfc(7-&ryMy{x`o48VvAr
zN63tvze#Oi5uK=mNkoJFOaNtSfluRJ)rAM_gd$Z?3&FNIGYe09lTxj7|IOd`LY@V*
zB}LID|NBl=C4oR4RTrfl)PGFtlW}=Lr|L8Yuam5Md|7#*dgolVCl@rn*K4m=RPvc!
z!<Sh4`mKvsb^6u~R4bdCfu&12Bl&91+M{JPI_Gbk9w6k>dHnC3oRDBKmw>k#Oyw_*
zr>DPY%y76;;qr9Mgc>Z2cMT3xUUSP9{q9zVFtB+4P`!ZGnNh5S%lz<&y19JVHEX{;
zx|okAEDqoCfy}16Od`@sahaPNHpV9of>9TU;{A*@zfkp4iY(GWs|nZTL})*90o}IN
z_7v+t;DHP{^)g`Tjpxc@9h#_q5FV@xE9j}P<N{v)P@2eNmmah63dYzQ!_dCKa4frm
zI~ZQ4gOFy=yBzy%xt)=0|Gcl(l?P{=KWkl1vC_Eh@PRXOyR&>icgE_zch&uH#>AvL
z^b?lAZqVnRPEp9j@(A72ECm?jmwQ@41;QR0Ajl$LM%%{(tje+H<UyvW{CS1s=IS_j
zUmV^)^Me2lF(cT9V^0*Bu_!a4Ts@Ij^CJVE0S%yC_9=;<OrOW)H?wZO%9dVM8A$*o
zJb>d_e>yFq+s-sRGrL`$2(>J|87(vlcEafV4j-FGu1^GtlJ&4TMu9JIi6-~#K-duk
zp?*+%+$!X7IEV0fcl8-_#ri9S3&Y)7sqpS)QX*Cqkw8@DzIXRX5wsS5KbpFFS}okG
zLz4r)Y;DVS*<s3QUMb5zBP9JYLcckEpLtl|jES@#+r(?e-cRF1x%9T@LIU$=kWY_O
z4YBkm;o%vdSi1-3Pm%z|fPg|x0}7l(15|MMnW(ew5>41@nh9!PfN)qxvO=7zIFw%2
zlSOy`ML9nTp~n~&n1^1so2ZCHZ-Q(V8}TH+!kEXi38V+Mw6sX{!iDNZPE6nn4HLe>
zmHg_03+KFuTaDddIY2q<*zvtk>ZzRV&ph6N`H{K2w@cZj^D@!R5FjvHYL#9E2)x-=
z4EMEN{SqUEa!IQHG|-+G)u8haqP^RW%_4fND_e4?Oc`l@BLC!#%juEo&bf_o5c^>x
zH(TM{L$d4|$)$XsL<yU}`$r;_a<6;qmt&r5xu;{0aW~^ALGP~{x^>A^1H@fgbl+gZ
zd<Z}*dXwtoqBv2bh9srDoYq-5ZaUH+{~;PCAiNIlHfgEpUT|RE<D4CH>)d&=f}y(<
z*Wc;4MwDz-ep&1^rYYy-z-_3434?96A_bqG{J3W^J|Q-@`b5Kc(cVRQ)s;CT+GIwR
zt0F4k&PAh+(*(N?_ftW!^Z_GEWb>*TXQ0}7X=*MqMJFh1R{Zg@8h@sSvuBI`IvjZ6
zbH$0}kkI_N`eHq3US4UcqAY?faGv?;dg*ubu2^;Y?+wv4pEWUmvBRC7q(@liB~R^;
zz;Ut~0`ra5?mU=otA<NksZ^EBrYql!EF*MGGXJ05e-bqdSjKkpXD@|ufa{A-t6BOS
zwe0y!wyPc=F8c%RP)wkq`ZuZFcxIBcSGK?Ui`K3OI|6oPc0S*FUf_J<f&$yak!4Tl
zw;Avc58o{hQ#8<ULJUU*Y=Eg+4I6SVy1)c<XGw&hw;c#AyshBqW+V#vJESHZ*cBSn
zGlA4ZV0N0ogb>%L(<@sU>PcpWJnJ=kK9ndW->Bp%PWaTCF;(^*&Pv1CBUcfFe!(@T
zH;J}HrA44nc)O>3cG^_e6ieYGQ!dF$v8PUXhAT|jNxf;v*kL%vWDG0HShA5Ax*<g{
z^)-O>yQrPQ&F9$YDq&m-QAVz-PxIX+P+>|&$n@mWPx8Hez13AT(x_~z8!~UVtovmN
zB#vu#(>6}u?WSxzNLx$(<ooK;*{EV3+uc*SG|ioW!&fNG8289ol|3kCP<)q@S+*px
z&b<%^lg17Da`X|fQ~FrVf-QKr>|gXQu2Yo!Z7crSc?65dfyk$#*9;B-n2=S1R>0?k
z4``lTbB{*5@8r>>n4>Bb%ANV#n3Xg+x>h+&wCRTKPmVXuU@-M_PEbG{$Nt&%ZxPan
zeo96^d@5C14DhQ9QR!&jB{gVrRl)>ygS%RI9w`jSvO!rmG5|3OAw`noR@O4GO5en?
zI6!+R@0sPtIj}&dxHrsLndUJeQj)4%71E;m&1R4A;~XJ9SsYDp&QN^|AR!BoXU|*0
zI&XUMJ#wJN#acb@DbXq9xCV>Wpy(MUhWS9n3VD=bbk9v4!T1%sOM5Xc_tHdTc%bm8
z!t6|z->ZBj)7m#P$j@yJkXN$ft#tHi-%|&{-KRs?e&K$487FoNr_qg!?7-f4-sL#h
zfzeXPwJ(DW)Xv35PYsm?R%d8CY(>zUtVz3~%e-Fp#Bw=ck>U97AW=ZUlnZ6WMe?eC
z`eoj7O9@J5OicC7HIu?=oB3`xJ~EaPzLtCy5^iN{cQ9U(n!vy~7j86d<w!kO4k=al
z(_wa<?9&fou+_i@7AktdQhAN{69I^+fsLK`^lJDq--qEM9y?HDd|j!(g;rq;irZlX
z?1YabUBM~;XpngoLy#O~ty!*l12V9v8(e4<R^j0YcGe%syX;j_DPENlX%#1Cj2p||
zz^Mgx(lrqe0Z}#}5u58@aw4VizGA&#_It#p0gGfit%n|Xgc5~0s(lvZ3S?q0wu)*v
zqjZdG-l<qu!7PuYW>de}um_VB=9ZZW84C%Dx>pt=jIxzFp3Kddx?WeQ-hl&oU~&7L
zi-xL%CrS*Yq|g&-pDRlSlemVF#qNWJmp%0M5UBIgOOPFWM-Q~^HBrUy$hE%>BH)4>
z2pzT!wypSO<j+V58ha7l2u*=w-OCTVqMx%Rt}R|q8(rxs=gO1Bk@inooqlMU5061<
zbAn$9xAgOkyz?>l*PSe&j}la<HxC4O0AGa9vGBopZbp_o_l;(b@P5jXd4^0<5T27+
z<(e3ra2R!!xv!9YBZMh--1LbQ()>@5*(6Yle2a<{&~ZZGCxaRU#1tA_KI0Ey30dZn
zbZD-qNfwCae~~<=Y3COxN>7eUljW~b$Aeddi@2}8J~*WFJJ2fEZVU*44C4gB**%ki
zsW>sqAm;)XY^*K+VfOX&x#c_;QqkoZ*i=az_=-*g*jm!>ScYG-=kGO2DwrIv>d3nT
zcpQT6B*d7V=(Ee4%YAS=p+48`x6d)Tik<iXio>l6zG}GomZT(yv33?aSaB4VdQPF(
zT!zbv2&in&AYEOlVQq{2pkJtq=<~B=)5krQ@<UF4T09P0&fq{8y@?cVt}Q;N_)pCR
zrIR<K)c!fr!72lUun-WW(tVtqT$>q2Jj9K5?&;*8{6ar<7rQ+AC=oZlVpDNVI>RU5
z-M2o}N>P@jC@u>6*>=#6PNqk4Y`DCou6LM%f=YuOOuYz)fP##*{eHev7G~N!A@#;!
z^&w@#{m%F1oy7B#&&@@rU~O`@N5@YgNlJ~;oewiJ6{v9)CI}wZo}dO&nnZ%dOe+UB
zYr1Tu8pP(eS`G5}=V>KUtx&!)1$4_1HOuP$o3kIJz3G<kz@V)z%v#<xR0wQL&wP1q
zI6t0w-el3XX^Gn!__Le(KrFmWFD~Ca4ZtiIraYMsNwvFt2Y&h>Lr0-wE7UPu({f?j
zTqgZB03Io5$8?%fDj}C_p*<%i`PMOZAutz>piGbbBNywseGEDStKX)+^ObZul#3MN
z#cUs`ON#Z_a=qybAWL9-11<CpKDf7AH$7`NK2`lB(Xnye0nTJ<Yg?w0KndB?(f8}P
zPO89gCl?wYB7Q`eJUHh-$HGK*tZsEzskGBIag~x}Q^9?tr?mZW+s9q}-bfkyOPsAO
zsCf7%kSY%@{?YyFqApAUf&)4owp3;=1_B|PN_+%`;HvP*X`jx;c6HTZK!MSd`X*2?
zquTdhG9B)ft7@N*g}=GQqLaNGeu=N6fAq^K44Tb^aDb4D_lRgboaCOigt5W3C$qt^
ze-q@?6aZJxNm#?Ts(9ggi2?j*xLnWr-9ZzzlkjY}t}EEK|27VR=b;y0%hl;X>c#ry
zgoWWjCkZ^8?#XO7)oLl9x%v{BdI}g@O0A9V&P3tX^jQ7jqBdIPNOmNo>x#GGrR@Rg
z8kU+6R&Vz=1L@zDSV|F+sY6VBZVqG_%ZZzFG59`k7fd=M&6&GA*}7mhiNq3x>wp`|
z6KGx#p|;<dpOQ|qrQj101~K@2g5ZN5pnCChvTm@;!C2HHW44M6vRT>4VI9^rQ8J<j
z6P=<PyJ}>x#GDCNg|S?K4WAU5ib>^LMx1<(wMhaU?jCLfSnJV%t;Bs;AiHnQ8o=#u
z7<kwrI86JfGfxV~4By>y1os%Bnpr~(=;2mzKJOsGs#7YQuhV2%B2&sW<9rbbTD^<G
zvz?ExD3^FUSlQ*Iz-voh3g3dF79`&p6DXer{!QU|u)>L%Mb7tcSC<DC2<IkM>4^OG
zN-F_`#eS5*X*iwTN^pmg>P@5p+3Nbbzy0=*6e=w#owjkn{f$G%bY4T=z)5i2k#jKJ
z4;mC^>F@$3$k(tDG0re$X^2u^yW=RAGPb`-SJs|n+BY;8wIh&$5qzP{l?KY(YDr_X
zuiI}lQ{r9-HydO4#a}|?>QUr&?s%OVXj=*rsMqT%*YpO5^7M*;B|u{k%eb!QSNro;
zS8^ZC#bd+lX7hl)pL<RbXitPV#3BN;AE#`0fclCvrg*5HLIG!2IC<PDJ5xMCUC9+4
zp7q<-3C=7cwW?$;JG8Z29=g}x5{cC}X~^>fI?-!X#ahQ6m74Rxd_{uT`-VLOEz7gN
zkwFD5NA*o#F@JXi4VDQzz2)NIwnGsNj@rR+Vf!kI;4445t*&tc?iQI6ArM6K7|+_0
z`qi-iQpa}9JGH_<qH3YW{sTlbLGZj^O0$pi<kRC=i}}S+y&oj8u@b6cW-V^Vq`STz
z;nmWuyn~woTaeriY+6x!cGvLAL2v`;g+y>eMk_|)=*}Vvclz_QEjh-{)10xk_8mOq
z!MEV)2~)exaWY$*wm9yl_gpIin2WmF0d3RHpB4qw0{1q{R`MT&vE@LpaS@L5Gg?<t
z@7A~FGdhvH=Ob<Q`8!uor0olfaryC7*T1!4*}nFsiE6swXPge{Dm@l23-s>s@pWSz
zI@B^eNTcAo{@C%oZ;){O^)Khf2O35HeJymlmE32*db@=M9HhYWZDEMoKr3m*Q>?MI
z<hAh{Z-GK>`W%|dUT?mu_b`Vi-Yu6l=X`r4WYQn$Bt>Eqa1Ke(u*QpD_&s8>j5c;8
z-u*$o$u)-ntnOY*==eku`G+%6Dt}`Kaae5V{VB9wg0Q+#aSbXO+r}4bZ|-pvGUU6K
zup~~O0H#LlRtpS$BFz}(M`HXrH<-0V{Bz@Es$D{yu-A?Q3)o+NIvw_%&v93@_Uh*>
zC?W>zThX-;vy5^w$@P33h`YSUqHd{HbjAEiVsT0P1^=_oQ@NrRC9}i8Ak2{+XmE|E
z&*rgJdm^;gnCvz^;^PcxN6xX}!y7c)I6aB9(uFYjYY-UxAcI98w0k-`&E1N!Z@7uP
zdVzX@4sCUBQp;_$I2a+9{J2MJmR(gmnql=aCXzptGz2@Z?^F|T*IR>M2{fSxp+x66
zzm;E6;y`@kMKt8a0oF8aE#A5>wR5t%Y{%{%EvM`OJybdyO$fIv+9L5Gz~FG%&f$#h
z#`Qw^WZ3;xI-gC~E#$FCd)5q}GEkQgvqY>lX!4{kTRPT+r*<FABZu-!xIBl~lQsy}
zJWd+z49MFMk(RdB!iOHk)Ozsr3^yz_YcB-;rsba9_(^UjDf1zuUl0wD7T}8s;H56%
zYuhV;YRwQ9H1iGjx!&6h2k6VhJb4<B(s3AXm$^qx!3E`7_W9SJAurmMgEiwp%{c`$
zjfqjR;KXcyjL52PT55KpAkHnphR~aFSfcsF(1wkfKU<Dth1X(I5z9|w3TIHWLTAQ@
zsQ$J~Q>vSKi_=VK*K={~Z6%69kqf;^D1Rb^20Ct96E$Ncry0WGnd`_&nH!#wOz8;X
zvN|O1e=!W?Z(+^U{$x^WW4Higj1@+&Y7)+Vb&1D@s2IZB+!#BhUS3IEIhUDv7%o^t
zQfs|u{PxKa#4Ww7ZO9Ml#BJ3pE$;m+7ME-z#uw;Iu`<GDY|nG#3sjQXb<)6Dq7JBV
zGZ%y_DX?_`;NT#c9c*UoHUhb9D`$kgd+lhcPik#y7m>I@&582ahR20d!^d%X+&qT{
zX=zvFj8QtiK2@hX%P6f}$Lk00^&Eaa@I63Ziw^IvkC?iFz!!10QRl3M+en3;;NgR`
z2=rvLfpmOWW3g2tcGDBUd2_r6cJM7o@<-w!sLmF@Z&5q=sQrngHpjDu1D<-|9g@?E
z-!;NX=pmR$8zVl};qXE0?WJITQpHZxB6o#8UE|XkeQ7fX2)`O)&pYpAs4~y8wE?aY
zB9=FRXa5TcmnR<SL!<2Dd2!bSwMdA;){y*JX&43cl!DBPe-2h7_*XVROjNJZH(AL;
z<U*Ph;SNb^<Z^c8itA1|ulw>6za71m<1$}~^`8U3_gTXa2u{M0FNQKS`t%NlTq4+z
z(I;2?Q8+CUiD?!w%2&_-Yr-}egL*?YY8Ccud35^`?lV-k`ic|;??r1Xo{iW;nOA%B
zFqeVICe}@(1q>yWuCUH6qSc~SWc_z6h3D^SAL+r?4Dnn%k?)Rfq3*A=1<j&q@oQ%g
zI!e(h89o<$9_wmpo1gvqX;wFpk*-PWG?+B*<Hy72j?o{cwg+FiM%jwt<c`sB<|es`
zt}P4d=FaFZenvv&_`BJ=T?fRYY>lIZQNL=0UM!G(7yvcc6n8*WvIKRw5DU%*L7ZMS
zb?{x@Fz3G9g63{uLe!yqWj9KN=qZ|TH%hDh8X8--9tnfVoN|-keNZasD#;&M=m$K&
z=4b`+N&E)mU&QWvC7bmX^>e~|Y~+xFHClWyTnJzPQcO4yHE@N>tSWt5AVU=d*|;z3
z(L@P^cQnYR`D*QLZ(#uGxUWy`<%$!CAL-!smm7Ti2_N6b?*=l_BqQ0-K|v6$`5&3~
zEabDF4zPOf&mbPW9pNa0FZ_m+pA8lz+#|W~;M+#{m-V-Or5}d#aTD*f!$&}K=CHh)
zd^*z0B(&egV8UQ>q}M0y$KnlERX6b~W36sKi>*#v<Q3dL9G?*J;!7w*+SC=TT2?Oj
z*04+Pq%J*aTr|3I`)F$yHv(a75S>hut7rTmXka9gj<rto^@!S0nJsgX%6wd{bi1-Q
zuHdz-$myOwaN}x5BPwX7BZ{6{1}$_}zbv>HyKV&vEMCeETqWhN2?|WpXfnW2x02ct
z9cV<f93S(Agyl6y4h$i`{p8Qxl;P5c+F2sk3L!P@O-@M;1~B`IMZ)N)<XwB93iaIR
zZFf)IwDazOv#FU5f>vTvCDDhfQwO78gu%(*Wtc(|HdR-ylNMEX`)%WuLJHH?$}cB9
zipwG=91@i6#paep@Wyj^Q@aPz{BSIx-tvg&q1=qM9Dm$?*WScU<+mo{zP?bGX~LP_
zkR|hI{;)jsn8IJHJ&Kpz;o&>iG;_O7ana-kb0>|_#B#7l*jmv<P0vRwQ=0ZBtaA7{
zxTBtYX9}qq?m;<2oN8nBLWa-QOBA9pSatOwmdo}opckseC-WzNYc$_*YvDlIeoyxN
z2wZJU1+suuQG2q#yF&Uc`4ADJXbqo4zs4p(@RuI&4m($SPA^R&pVChqn;#<tuLYpn
z%PnZU=!^U%p;{aax%NIfXX#4T+y0$+YGwx}_jsSx)$|qoWf1;)l!OZ!<NCc4LBTJp
z{hZ|gD&4DkRD)zu86>xpm|K)VR#3N2QQ3Xs0L(bI6MOS5s(nmilK-ZKeZGK%p`1Yq
zc_3=>EHa!GW5<M#po(~~FhjJaf)9N#<~%_t&n8bVe5jD^H$!b^<c5l$<p^vjgs9&l
z_X^;{r#|r!3TCmnIW|RnpmkdHAvZ*DI9QJ!U0tn}dT`0PM}Xl!fuxn@7dk3ks&!HU
zaU)p#(B9>KqkrSA<Ck*Y3_~=lRdoJ1=<>Gyf`{|?7HmHNR}wJc_*S6IYI3G3KObxJ
zpm;tf1kXV}caDaBFg)2WTUmMVUYkfSvXkEM4;K4!A7?ito3m~U?{+V%(o&9W`pk>5
zJp}9S{N=tr7=^jrtWs~o7+>o|Ub}hqc*n6xa|zOmO?BmCejxYdhKh;|>k-+g>mAz8
zH_p{xiDWMhHo!5QuwugpVP5+9{}Y4YmT3JcbF|&=J#=^nR78qkespcIAF8WNREOb&
z`b-nG>(Vd=K1T{F13|yYwCPTZ%q?o>;69~V<t-o_R8$tXQRhwz=bY{;6S2sl8h22?
zIy*t`J(K*$$ajFCj?3|H`vpn=()fV(nUcuj^d{WGEMlcC85VH+n`8Pt?jxKq3Y2-)
zX;f~1uS!8MLJ{C!D1kf|Ac~pxOHR?sZ+__?=)sIE;N><b0?he;pcO%T<dYY)cV-Ja
z)aXAi|N1W%RM7rhm$BI`?SG}10u0<gAFU!UId|Dq8RLI5PsD&E8XFs1FDDs38Q{Ps
zp(0<0*6Iy#DLMfqf6mvOJn6S&Fpu7JO<^}Ut7!g}A$cVMuufObay)<13tzTB+Y~{y
zV@7W0=B3@I1IZUNXMt+Xi)9%ga3bKa7?ZGS_KjHdSU#K&qG=?t*-iqWZfT`F-=Fod
zLIZGX*YRwFuK&S00lw|-VlS#bF8|Q1kCJ?47UB<hE#XX*#_QSNSgS*n$?N#){}*=s
zXShK5U;vhjYp?Vn`|Dq^089^lbL$xx1K+_BQe%9?1s90c_))IIZ>L)H^t78DaC)MN
zxXLUNdkixYne>8^YHqj8=?AutzZq#o=x{(C{uv6NeB={W1@tlHA&%|8$9iN5rogQW
z%3sFRX?2Zh#`{LX;cyJ+@%|z}p6f%nTPq_$e79uQXEfyJdGcJvsPxzVnM~T9F}`Y9
zGTU;PO;14OBmBn-#6$$Bi=#=n#d=4Pe7S^qP4<y~IPcp{tTX{{!hE?*acCwcZP!31
zH-`^N6ii=7mo#ekRe0KGbojZgrvVZu|It9=k1aX^P@&q;{tbVtCGwH4Ftt1@C+nxm
z+^%=@UZpLqVjS}mfkLK>LW1<jH0<qx>|uEkwvS1qwv6l<@@cOFzi$t%w|9jf?h&HW
z2N1eAXWHz{=X2FN>>6GMYPg$b3mlg&I0sbF^*Dwya0#Spul?rG0J@YO*u39dP1vvf
z{q@!vAmE7BPv{@P4pV)4kD45IW68<Jmfp{0i$FUZ%#0pITwe{e>ugUcb|0N}7&Lfr
z@<c=s{GQb*(LgB0U{4C!3u@~lDrg+iblv85Am9SCx%`e8AmoDJ2?LhpGssQUQP5r%
z60oX3q5oc0f^08oz{!I4*uQ0C`a;yeb6k<USaVdcAs{zwaEZdb_uqtU6|Wq3ZD^36
zCeWg#eeI|QzXNcePd*Be2RuH+y)E;i<V!MNGH##oM@3#*JJAQoL-&)u?FnE#rX>3G
z!aVP<%eMhu-N2LOs|SyJOT>vOf{ryTwVb0FyT;lbocAG?#<e0~<oa=dKsZm!V}C8(
zEXWrI8f=7z{I}=W1i?EqA9MKU{>4|;BLkJhZ#u?N--4~Se}jn#2dRTeYPo;9>xTZ;
zC-G5|+HdfQRR;Ii!aIDi7d|<(isS0Kyv*c<)M&42p5tQG`i*%1w>n{b8K~<8`z_$k
z2H&m#;12~XdNxw24FKR8KDFnKWy6F#I~@#i+n&T|F7}!NaP?1x>?e$`*{uBNZQ;&b
zW6_g;kMX}QR$L)?U6<l{j9$cK#sely)!6o)IpOB^>IDmlfQ&l01+qk6!z7awm2-Ll
z$)bE?$=1IThGil8F^Mg^;@)@X6B{qNV;4PVD9v3yETSy%N$G(e^qmQt`!sv-O$ne!
zSq$!duQd^)4YKS(a1MwZcHZlk_#pD}3|lbb-i!F_z&%>T+Piuuxg$cYXZPZw42Ecf
z@u1gOuZ>%C6;crx)HGM{R*D&Zl9m4*$nZ;z&LM!l52{I3?h6Iv^}`8_bVNtXd7*PK
zfBW^T(|ntpW~~~Vy==5h09?0&<FqLoznj_`p6Dy27b;Z!(w`L~|L$W~HGNoNi30gH
z-MVBYgWEhvF6;aixf*&O)*z-a4u&k4_@D!mhTlrO$ArZbII;;zf9?A*mUx3v|22Nt
zAIzZ7Tr4JmpnZGGA_ml%+kqVWgAPd#`5@1I-Go|4Q;mTfNDShcu5RwW1#E04>?D4J
zx;Oaq5$k2lE12kWggs`hgYHJm=7Dj(wv%jcmR&!r4ZLD1W>TiR{aa=I-nX)V=o9Tf
zQ3keTzG}Lj;Lu*&@F>VN)uCeS0`qr}Ht-E?nrIFE(2!zT1xiDS=xzHa2<zptpOj{+
z^@-LdRw|9H;kLxF^!;e7V)@YRzYO}#^%umJOl0$#C*VWmb@$FKKYhX`O7@p`NZG8K
z=gOwGt3QNyL}`tZlTfh1sWkKir9me2k3@q*zfA-)Rw3^-3g{v(bU_Pq04*D9#}{Rg
zY^5G$lC38D*}b9fr}JY52v%w(1Phi)Sl^$_rtZIped=tcws(V*6+3I>Vt{D&jxG`x
z2p#@jt;MCI9LV<6(gWjp=CYId_WMB962}ZL6TYdJbFNU()rs+Z@<vK%b@lo))xuQ+
z4Y$4ewaM(%mZ0~)w%1nKm&yTX>M6gRk<UN~cQ|p)2>5fyV%&sb-0&kb(&}xZYFoY*
z*8<CvY8>x2(w@Q(1Grcv!_|E3Us+L;ko5;AFvjRZ?bMDj<q*b6kX4(sU8=x&PvWHJ
zLJ*a3f#P*9iA%)pc`0=zKcWc>HLFkR@RFs8J>-&<bd)0^yI_+@AiKqq4b^Z(BA^Eb
z-*JpOug6WIU<-&tjBb{k`J|u-png$FwV)6H`kqEg?6-u0N7N=SfJ>1ENXJr1a6tf9
z?N%W4c#t(og8YL>>yYh!^5B#2j>b7*^LMH#E#(j*i;OO6wpk1r;=QS7LJcI>KJTqI
z7ZS0YsW%tyRvb855DTBZat0e~Y>V4Kr19_^H7RSbEtj-rjDBW9UCF}jeVYc(wXEHr
z4!3e^`tY8gD+!I*Soa5ysdZwm#gDgMT|FflXN~WcW$#}95KMGsGTkn^V&^MYwc#Zq
z{Fi?6DS}a8TX;uq9{i#m>5)gE+lexqTBg>PKQx8gZx4&mr_h)Le7F^U6#&<Vt~eEc
zsIZAC3ONX_5ZP}?+`x@KO9@4WtO6b}X8O+JvbmNLyI>+}lE8otOlWtn;$heMQbAvY
z!h!|WOKIzh7JahQkT$FW#k{v1C1xl}UU0$>%y@TRMJ*eKhx%0?3jsB&0-+I*OqPe4
z<!~h#K}#d(wC129c@B_tpCJXM0j3I+d@IYax<s(C(Dmg`)TwN9tv*jmD{?Vg1x>om
zV?3P@z&sGMCW&0?Ng6TlW}AMhG6cO+9|OI9MmzE>c%^aPsKB@(WM%Ftqp{)3+|2rY
zO>xkZx(kK8%moRVmHxcF;z?YrUUX~&%0|N=hNCZUy@pvBR}JDb^hz*ZG_eM3?Xkvl
z!YuK})HB~O@j8u?E)lIK^@A+BVpq64zWkMM%dlTRPBgnglPBZe?&h4EE@9VwL0`}X
z(F?4}b#7k2PO4mcqamSVFv2D%FyzVYS_9hG_c7U(XqVfPFNi9-ErXtdPtQ=r|4ly}
zvgKyIV(qWp@NbpR2q0gzGInFwFZ&lZY!Y<)a0Xv=w7_BnI5d)hL?}zg7_cc)SUyBi
zLbnIXU7t<DCMhxod-;))#e6#IHB5P7tp$JB5uWJ+etM0dlHO=fv8ah{Osp&8{%59T
z-C$}fFv_8E*0I5o(DmE}d}4m6K57MWB@lrBqGd(Ep^Kb7p!B5RN%%)LhE5esNTLC)
z4-h5-qdVYJi--s$B%6cXMcCStRqqYV^E%+CglUPpXFGVJ25I&0VY1TEDdin(IwCDX
z%Y@tTvS&P}*2)s}Jj-Kq-0{cL3f;Zo%ZNX)47U%WB-wbBIMEr*WUi*f+jK!wo@fRM
zlD~^%|B*t_Ol1jz|0*DSiSwa?yDa6Nn7dc2qe}|>Xo>;xoAJ-(9H@3NDi*3|(3@s@
zj1CdYlf@`Um|88^0GZ1*kJp9w?>-%@56<~zBHUkOvg3gwVHifM=c2bJ@6nD*-Qks9
ze%EDmT=V|7#ozU!p;#1BetD-tt*?<8`}vpDL!1R}fS5XR<%{Gs#%xN=xQJmPC7WbY
z_cg#_7j)6&&nbpXtPqPONd9K5IK4I8p`B}x%CDvMQEn!zb>W60Nug9a??C)3dj<>f
z8zAdaGBvoaOQg!D@v<(mGwlrDIA{lKjdUgwdtfk{9jaFrzPFO5jm|Vj$v9(JmCl*W
zo`qQ=Ie0|2CT6LWa|>|l1dE6j{Odaehw%oN%ln29o)=T8)30Hwqr8SK-a9`_9h11m
z#>`>+T!J&u3)4t_QxSrp=DAMAo9$uagC^b=_&Ne+;bRmm<KsIzWql0av#oShAM0yv
z(e5Y_Y0|qdQJKV0Hau3=-j_nNV|4pthhg_hj3~=35UbK5uND2G5VV^T4@62y3^Au@
z_MxLBJ~e3t^q0l;mrqt31K6630aD5@Gdl|v8F#gXkVEN}OA*fMrn_iAM>zoHPQC|l
zE}=ACIdWE6O={&yXsqr>!$guYR`gX8UQaYM*iSIV5E#VV<U*$upst$<-zx)4tdl}d
zkd34>VHz#nmfQW%2jqGdI(OfLqF5>eetn?1WK@*UNf5i07EX8}oxK81PH#H(;@j>|
z8|tVEb%L3$gg#ke*bu?g1Q6k$<E1LZ(>KXiV0;PH7W8wlN{{LG(w6$;i!IjG!U}23
zNqVo#ZMw8zaLhDK+}NR}BZ3n8td*#CV~cQxDLI@7dxh3~8W<qvDBuiQqiFFvuz|BY
zM(1te+AC}bt$x<c>_*C@%(@7T*k^_Kgu@>>D%omDZzMo{)_Wz$6lb{hmiX>QUMMqo
z>3d}i4KdhqN1O@6$2Ulpo0MCwe}N#s^#bERLvfSPuvuMVRE#rFY?g)!jh@wwKljW{
zI!+w0s+i$SVAe+@2Znt#a;m8a>|M}(|60XwAHxYg)!2UZt;Ucj+k!r$;R5TxD6aY(
ziw?K4rkV05$%=^-6X1)6(6Ettbu{V6V<8o{2Pk)?o}poq6D@c`im?v`c1;2fuzk+b
zeZH#cRD<k)3X{@A_T+2Ey2NA~cx1V<$rd;Y<Y?jZb9ekm>0XHm(pOlCSQ{w?-*T$q
zVI$k}njIIEuKjfP&TO!H1pfM6u2O&o$Grv-NHt5^eNj9XM5d{jjN8(fj|tq#?U1Qm
zc<wVpi}uaKV~s7n$|p4xCPoXN4ArLdo)A2errMaQiAw~_a*iTovRD(XN9Zstn4Bfe
zx@M;9f14XsFN>K$Uh~&tj`Zn;z^bG!9fp|>GIQjcGEvpuw%A>RFb+R(3ifJ0u0J&o
zg?Jt5Q!n@x2#=bC!NOT3MJ}D<=<gIA$8FuQmee(fb_fyZ=D(oyO3L3e2-nMkSQ~h)
z%oF7kTx?<k_r@xliI736a3@cWJpELhAn{)QcJa94h=j?bw0hcDs#||7%=&9}*8)gE
z%4*KflMS+hR4$NxLN_Fm^I}u^qOHaI-RO$*D3Eg~;(ZdwTtEmm6-r-PUO9hSWvo1&
z+`{A!G#+G_)a5<=xcQnY+L!4fWy_GBhuNlN!Os=*-}}DIOQ|ftjiw)k`RxdauY70F
zTlur?%b3`V!c2?XJDGB^il~wljC_LREQxprL<R0RpbPaD7o@DI&hcs$o8^ea3Rci>
zt`(bKk@<4U08o)r`g5A)_xy5eZe9P9bEuWvcXdhCEO0Mq&B$AzvXcen2>!2nERwA_
zfJ?_G66yIL1)IeIl!D6UNDFj2_NTW*dmsB|>4<6&7C<n#<$Z=Jw`VJU<5fVor2=Kw
zVF=G(+T^#p^@9NH<B5CvkbyD|h7RO^6$g_AI6{|HULA*o|6n){5J{f-f5A__szN~Q
zwW=NN4#aPfn1B(`V}1X($MT=P{)Ge0A-$wS4A*VE{lDM)=PSj?KsdlF?3bXy|8frh
z`R5NJKqxht_I=6!eD(jnR(~nwi@{9)58Ua+|NF0pnE)`sKL~8cvi<VG|NHH~KVAM3
zY)q%G{#QY=zpagbUAz=Tz+UniqA(Ty4+{IQPyE(O`Y#0@Ra?t}Sl7RV^gk}L9sz+g
zKBmbG1^j=0uJx6#oNB+uKf5-f3ghBhg(1KDH+uP(On+d%IF$b=t@b~<2Xt~o`z3!;
zJD2Al6#{EheA-ql!hcBo_q`n^0Jn2^HSy69XpBKh|G7=1*Y#c}-dk-o29Jcy@6$<-
zfPU|a5aOlLFCYAGss7_)9-<K*>MQ!Jc;~OUeA~3vhk-m~;AAK9g@_~m#RFE`s|8n&
z>P@&1pPPf0uQQXuk^e(vzodCU);eH&&s~A>GL5)JvpnP>ZCVahA8zHnZ3{BZ9!~R9
z3645miaGtyM>T+0+N2^`{z3rE!LHs1>_giY$oHW_^lW1{PyyEUmE=0h^~<-n!h*Sf
zL*yF`*ZHr$%#r%8`hw5r%*)*m=+}<#%zSzo!8Edy<C>+eI{WRHVBB;zkYAWAS42nk
z8S4#=s`UA}V)&=Iit%oO9qL;}o^&A>=%fmo7q>s-DtdLwi+_jc-z&psAI8Bpo#sy=
zxN>p99p9pGb3$$x7$9^!_iN7E37&d_Zwr0}p`R#yj}<E_D0`yjjNSkDEH@i|Sqj6Z
ziS~f9H{*clY)?AJV*LCxlrDgDnok(cD^VjPgaQPLMQ9cg?3Z&=ptq6qFRv|rWeDsH
z)5Jmz8$eZT!b>J$tKiftRK8F8kq%%#m4z=Bulyodv0RK*A18=n>8u>e?B0T8)+4IR
z+Ae%!>|@X*Z1dS3-p$W-d94!D-{}i~&DNJ?EqIQS^;Y`4VoMSjF2c7fQKvQ1-@UIN
zFM%U;@oyaVg8~GeKrPbATps?ie0D<so}yS?PsbSrCc3RV6tX~_rhjvNAeMCi7M$2T
z65Msu1e?Nba>K~FYR(gG>(y-BnZ`$7S1r4=gy@3L71$gN@biA}Nwt~clqw<YFwAFE
z8BGhP6OtfTCk<|-zzzchdqWK7a%zyMlBJ141#f_Or5Ma{YpU^0_Wzm)l3B87FItt~
z(;?#}ZWiU_jMa_)>awRB_x?(hxjv^6WSy&%Sl!rx4rjiArn`F$VqgSp11L)p>vJHC
zl2qC;_nAksKb-=)y-VS#B8k>-V+_+b!eyN_EiaHKL^DR;3NOJ2-b(lrZ^E4Hvxat{
zNPmT%`ng5Y{^ANhEIYKX!1FHB&EZTciPviOFtQr>YL48G)xR@*{$2w>jx?~~|KwY_
zfcQpp+K3O$ACnrpFb`$$Q4Q8ML?d+?ra*zG^&=)$+#2rnv%bZ^nIDxod7kCNyP^JO
z|NLAoOv{Nb<3j<9n?)S>3a(a=L>rVPvNyZ}VM8?{7P~em3%xO{;#1-T40<g!=o2z5
z<QS(g#TjY0q~a^}HBx$oT4G^^SY*jsr7vb#DbL$!$+PL{>5EpvsAp%XUSr8T+dRXr
zL)U4^U8b3yL-O(iqAhD+9zF;+S<_I?l^ylH@f4<4L0{%yU(=p9uzI-R-VocP*SG92
zqA-#6F&vqkl|H{s8&Vo823eJyPmeNV<B9tU1iN)h3(mt&C!ZCdvXW|Zw^!A7^K#C~
z{<m_F4FySGl{M$&!2}o>D4CV!lQx(JHuNSpr=ADMpSkHwgBc`Tla2dBBX~6p&(xhp
z2>cA7caY9)CkFO0)pJ%NgRBmC)kvm|Jl_}TVcX>!z)zJYFKBHX`E3G3v~x9R`h?nh
z$$b#*h|1L`Rbb5IJ`9q`Nw_E{Yef0~Tm5Izpy;Q>e`Qa_hXYoJKZULP{(LT(HuemE
zLHYyQbUP2@-ZyuA-A44_%Sgn-c1?#ac`@{A6Kqmuq&^-KH`q&Fm=3az3a8l8rd}LI
zu8|A$V=mSyohjwcl3aGvLOPxBJiPk4$+IAc6i(1pWbYGSlrwqzD6T^kdx!tlm?O0?
z%&d)egIFamh5x`HEIOnx=ML$EE-LrTIt}9_Kat9a?!_Z;kN<qrB;}ESy2`-0{D3S~
ze?^)u6)%@~RQdeY<EBy<v$dS(Mj?{-0}%)0X_MjT8?>0aW3X5W%}>SOkWJpk<*fJp
zq?Gr$ZA*PXxA*z4PDCaNhWAT<DoKF;r5y#WQA3hn%Zdl9PP0&c3~4!Ey6@Gk$>AK#
zX8eCBzAFf9oTY<A5KutfOhAHGC~hrZ6A6Z63hqypJnpUSO%_!SHa*_mP{@<~?-qzb
zpJAC<{||9*85UR4wF~1K+}+*XEoiVH!7aGEJ0wAZ6N0-F+}%C6J57L~jl1(TnP+A)
z^FHVO&cDOOkG(J0-Bq<~*}d+yYQ<mu>#wwT2YlLnE2_UQ(3VipXXcpuwG!{7vH!Vs
z)1p}&zRLf}=y%e9^Y{2}7*hRH$N#PhU$mhrse_y<F4VwZlKX$SXos7?I|@ez{#zma
z)8R;g0)1&}FQ*ggzZUghxBqWGEl?-5mzEdqw?z-sCUZFXA$G9Rgkj+S=o)`#*YW5U
z0V?ge26)@YS7ZL>QT%!;FjXNScAdu?W<lidW#uG=c;fF4`rd8G{L}N_o};KSsi?V!
zaT3+iUnPK|5SJ2J#i1w5b}dM%g^H5LfVO-|weOn~DlW&STn|irhW-QRdU#J&^zh<G
zSp3D4V+N12Ul@9}zp1-qrhHTpZ<$J?Ec6|!a~#=!oFPp6S`7foWnXRn<c1TcZVRZp
zH7(cgU>NwErhzJ8mNevsOKt!NVbMcx{iDI_UvpwbeV>8}i3<2TUkOTZ(XhH5Xo70B
zu)4ask~qwx+{MHdde5y{zqP0@5U<t_(~lV(X@6MQa(m^^Mqs(woaKvkhLqhr+DW%?
z;#JDI)w@lnd2;la^mr$6flk#BLdsi|I)2B!MCwNzp3l*Z_Gy?mEjbt(#B?>1Lq_+8
zpqcA8dZ=c9F!EyOzOaRThiN!IuvIj%boRUd3EGoC!~(_~P$(Jy8a?QOl>(KRI0_sR
zX0Uj+L?iXH2NTd|T=XHQW8SI)3rk}dd;!(b|7|VG1^rwWJ;dv~A2?)TZ$uuH(!?kH
z2SqQOweeIW+wj5tq;Xymvn%<5pM--4(jF#$8ub_X+?yfB`{W3Y8W$B&*o~I8|JVm-
z4%_<sx4#U440JdrwUXxVDRZ#Uue3{KIbD+P8hN?x0TCM;MrFm@J6{MXFRIB6&y{^D
zd9fiuCsUorzR|pYOVxgRV#E;K+KAFAOc`C9bH9-*YhX%ZczB@6<r*eKc80*6IcJm;
zZ4@ZOQq2nM>1=dzuK#91H;0qq@x)brdMfNyq~x6C>_v5S<=GzXqW^Waa#Dh4^}3|y
z+S1V81q{TAF`95Y6Tz}@1)pF2Z!{W^+1Zu~7(3bK-XvuCdo$mN{Q!6$_nnW6uuNyK
zI1UhnMygHu`8=Es@OqqNk>IaL&M8i94RZfnc^as8AtXLSaB^?`use5O`J;ir5kj=1
zw{78WLlg{>&3stjCv5??(F+qXBk9949bqWW(+#)qN)^<k2jcf<KE!3U!iEFSM;Jo<
z^g#a%8R=SR+SP<lXm8E3E)u^lq_iM5bv&a$=?1B;4ILX*I$rCyKHmrO*4#L@o|K2m
zTss}4hmei=0EQYd3)^sR37D{NyJ~ny5y?V{r!YiG$;}wWF4Em7rIEXDo&f>=y90i?
zk5#`q>i#98oXQaLaZ?gB2|a&{Mj!zhsY*`h;0c{-!H;m3_LzAbX5G#Lg;cA&IVSU)
zLo$c$K9~u=DftJt&_M?D4>tqOF<b+In^dAKa->TQc2xI>76hT(WkIUmNOKv7ANiWz
z;CdGpA#~X%j`tOc8*~Ew89EoF)y|1!UvH2yRSdnc(Qik=Qr=tO)l*<_+KFSgZ^}9L
zV_fA$YdZpa|E7B+1khP)dw<f+Lc%$&d^ECk_*%K%ozAS>eRX~)-lch5RSosYS@BOU
z05thVK2qp&lNW)L$P{-+<nAb*hv}_KZ+rU3-RC#bODwYwjCDp}@qaDC%Z2DPIY>)Q
zr@V~<K?PX}aJtPt`3aoLNH6<hhB*-VaA~gmHOrEO;>kDF!W@v&nnHUzY*@=__Uyha
z_T75*{Ecdm4&R|<<G~FZml;8%1~MrWFojmG4nX@b26o20o6{sv@6NX}jNs4+hwEqm
zR<9T>-*%mb90`%txd@9x&Gn4)K<6?2zK%JuL0#Evk_)EnAb31wx=jJj%N<3GfQhfM
z094Pgi*pXaElERqyfwgf*szD2@r*!Tdkn_Om+=prDFBKRWQUqiUyN1fCsAL%RQYBz
zw3o?n!a=No`X#vdStC2H!{M0n+{3jE!*m92W<ox4hTPyt@}j)=Xm}4s-8Ay?^+X9*
z<yEiNI|=9}zFu+fPs6noa%*z^zGbetEp_q3$>j{?^Kux4EtbzBaIbq=j$y0UI!|jv
zB@9&Quzy#oF`_jzpyjPGfPnhVx^6>phBPh+o=fqJ2>KsTJc#4itgf3wnx>$iXS5~O
zlVAr`m6;ogIq~}m3Lt#c!7)7l(lluONUHt{XL6Bx%;BPorO>5o$h0QrB+g{SZ!kE3
z!+w3@ZHB}}X9#QSC8B24RM^C~+)1VrxwP9KNQB4y7;*Tes<*W2irxgaQftw6<aKhA
z;PotvV4y5PkEE<4@xQEe0o3j*p1$tae;Z7T45$|i>GOCwKh}j9a&x*lkbd2dNOn9P
z+u(q3=JMfG3wZ=PaAj8LsF6g@y|innR)f{O8+d~rxXVosPT(f^*#K^!GBH=<0mjBE
zE?8r3r0-@6%VPS{Z$uw->ZM5NMTbu~^tt+vszD7UvP((BE0$JTE7ZQj3BF3O3YO$3
z3@R*9An64G7Y0E_q@;*3eLRdIOXNTFa$vAnmZT}@r-wC2{r7FYVgmt-Lfku+F0e|t
z0kA=jI+@Is-UO+;OX_Z?zbE;}hgq<KW^d1`DklEFyFB}0olLIzNnZcjfd76dD;qV7
zqcwX3>hK?9{T~QY5eI}z@I0P2{r?ZpMEf#2S`IORe}B<G9kTrhP?+HwoDlZE4-X#!
zBrgO*@)OAaUWR{+HjtkJw2#xX^Ns%Ze+zyMGAzOD7`6WjHU2p^nXECm6>amBZ~t^*
zg~vqY+mRMOs}mu@vd77>Qja1?JJGYV>=ysbhjxtCj=7}?se-7aA{9UzOiK$CG%v%V
z1ENpp01`>x7S>3=L)eb4;iUosH*SV3Jt$^M?F|iJScRa`()R)QhSE=2SfK<;*S@#2
zA2m_-kh7*WTNAK9Bl~eR-@Z<)&)?YVt_pV54R_NU?2{V~%#-TP!<P2nEZ&dJ^e9j{
z>>TxKSm7<*w{jqLK6Cq2Fgq?#(mcn7b<6KRkQ8wC#0NbyY#y?Hp7rk9MuAcO@(j<4
zJw{5`g=4!7Z8K+&Qpp<h+A6rdzWd!{P!fW`mdGm;{bXUX!5NK9ML&`@(EX;|IUv0L
zd(%{tb~8KHJxn2~j%xtPT0*#7k$<7}aW7Vqfe`MfXfu?jeFCZCh^LSbnuE9~(%3BW
zrb>*jI08~6(j8LW)9PF>^0QYl5nY^l>vq^E0Fi5c+kF_Z$s^Z+QC~;n`53dqw$xRO
zVPkHuW2E#Fd0)d2($~)Fk!TZEtzrCIif|^^w&jgrV@$Y9gL#QpX7=Sq>-9%VSIL!a
zP#4~kWri)##!8|Nvi|+mW;tTuz8CKeI;WL{4?|#rYiJ_x@{YDvR4nNiimU|z7r*`U
zehL^x4={!G@^_ea1_K<i^kZOQ90%%#e5w(k4qY+<EU#ow-NjPCL~mC!ZFmv6$WmP*
zStgPcML}I+s%=p#@kl%mqtbYy8A>!WLt^mr4CzK?q-2^?{!@pyc48<cSN`Yr$hk}%
zfyqP$wFnV9f}i76&a&^AWKDd%jqgy<k`sK0F`z{}+lVp;vCCzAIE3vA_H09-9ogGH
z*rk1+t{i9djciZ18zFY4Qr#+wEvDuUW6SReu1q@|tPu);yJu^_L;>~aH;nuAD$kg)
z8^xsPo7W86zKgJsr$BF71RXj*MjD;F{5&LB*MdT!9igHW_1)%&_$3uK5~nCmyZs94
z+RNP2Pf0YUcANyOs_RA8Z16H_%guA4DmeIRA4Uj0#!yHH2w{(bEe#KS!3=$|^>%Gh
zYkUpJz4Ge)W_8xaSmQx5{wC<Y2R1Y}7V<0eDg_n<TOUcjennY22mU18HsnJkZYD~0
zW4kt1&XcRki~Q~bIQXI?GsgL|rH$c7Lctpm=1u;&x%dGe0Rc>$<|?am_D*NJRU0nT
z0{Yo9A>|FLop00M;jPlI6g83M32mf{9n*_}26)jj6dc%wd^=nBN^cDF2{gG592SeL
zS(w}Ql~jEiN5k)+zm-P<o6t5nJQESL9yPaWY`TyY=9<iWt1yC7MzgQVCjhGO9!xGR
z=R}*Ad|%)$uC&o`)IRt&yT`qLbMZ}XfNJj3QO*9%&^t`Ye9>})SSdL{;F-|6m#}z*
zFW*4P1?ltJr^2&xm&oCyIe9IO<{b$i;s|{311|%=IYA+<Ya2dQpJa|1M#uK(!|9m9
zHfPs*c)l7}N)e39y$Tb8%kyzo`*QQePW2(n()hX`Pj<7VoUOxZ0%Rf_=&WnotiFW;
z1Hs#0Q{D_jBvLAAK+*p*&=b`|<83T(+Q9gn;m^{l>Z!a|7^CB;X^^9DP~>wRbQ^z+
z4J<*{DEBo|*b<q|3D?<aX_&p^yvkNR9mndXPDFOhtiJs4HO95M{!HIIwM68jZ8KXa
zw>65ox;l1;YVz5qF+a;xH+u_%Z;`{A<s2&)D%Lw%d$m1ERQ*{I^KE4{x(j8-N|w0G
z629sB4TPEDCG38OfPqGryCD8TqWJjuFCEV1pW5(69_xnT_(T*v-Sy%X`(<w>3YjnU
zQ_XvBgbpTuzSF6zE4e6Jr0FjyhfMSwiWlqX{$2-@Ppn5Ww(X@TMWjgPNVY(^pMfaE
zkguq793S8BiFRo;_G)Xa9cfEH8NdJ7red+M43VctkLR^MPqgs-m-nZi_(ZPFMa^55
zq=XA|G<fcH%^LOal7{Q{e6YWsHaF5+YqYrQ3<w{%0>@{ldsYzeMqvy_Ofr|2Fxx!J
z;cbb$=e{{_4cm#Y_3upZmG3WPlccH!e)pcWW!x7KH_oxADVKZ(?7LVm-pDtPX6pC{
z-#U~`m+@GJT-jJ2lgx8u`44#bN8`>XO*Pc_Ux?3E-20a&86<B!5V|gAC9;+KA8*cH
zZ+xEywi5Iop90uMK=cMjTW+Z~Dlbpdqt-H4Uj`gR<^2>$3iHPrn>5wOw(Hvy+zPAU
zlDBUY?2Oslqc3}YaDja2IuK~nTHbD&rT@Ei3<{8zNUjdtj$C&n1$nuWK@pWxlJUqg
zqF4M>XGeP`yW|b4-VriW+^bMt(vi>!0uGkCd6;20@d^5pdHPl4RHOMFJ&jeNNj3wH
zl!G!CF5d9u{aOx!9Z-(S%zWR9ZUj-|e+<P6y=UCuH!TYOnsxFalsz?AzR(i;lYS*B
zWi8Y<HHpUIB5w1%1`F7Wt7OnQLdvu`j*?#+u|C@14L;-U3S~h>L5kkEAS(F~XX-kL
zO1$NdR!nz%)8=^UI5!k7CrK4517iGeKu^%2W7tl=dpxSX6PQH4detjG7cYDNHB@n4
z_uCaVByBy#I5+kpwK2BxH*HQU*wj(J1|nf>TN`$MgNXbPJ3HNTE7$s2tz7*(Z4~ud
z_h~x6Z|}Q=+3LZ|XM{5NXTK;K$L4J}<8WW|Dv^7-vr5qxpDSH%=c?!N=9ZP=V$=~0
zX=6QVu}wBrm0r8j`dO|wwG-*jF%`4<A-)#iiz(i|;~|i%oBu*5!e$_v5sEt-7>x>)
zme_R14`*B2uI@^o?8yjBtWUP}DY3R`bP+<NqWxrz9F#QRE$O}EQcWr^=)L3<q8ae|
zqmd(UmU?w1j8l2f?JI((!8pmQV{*`TJO)adr_!0{+n);ZWeS{Tj7<6|=33kP(A-sv
z^KdtCZK#IajXAXUxcYiGar%Ok-Kyqti1q}<JMW6n%My)(RFsBO5AXU~bIIw#`F!0L
zfWqB%=tQBvTOXlz%+VrY8?07r%5h98%?{3z38#O%<~3~>-zAa9N?v;V;6)pd+pet^
zsQvtem0#fVIFW1NLb_(x*DE0c$WDRxD@Bo<8Qviw6wWa1F>jqKJTJ{8G0%Q54HwA-
zmSYP8^!#d^EjK}VtN;O!ySM6j@~fYlRZzfLv@oJd@lCQ{nTuPGY<usiLW_g#Pl{a}
zm!6@bU&ea>a{z;FNCUD!gq-L~;45BciRQFPz$a_XBbVBx03HNe8TJS1VwbbKnL|^;
z&kQk4(-`vN#aA`<>BP5u6n+3Eo_baP`m&PiR?MiALpTMUY~JX;@$GXgy7fwLiUDw_
z#P<ffnj<*IsEQcTENqybdoJe(KZ50SE%6>ysTQu_E_=kt3D2^>IT3wI@-<vHaOZg=
z`vyhnrUYvcTTzG0Rs4`()0D`{fYPJX-r4hT_)GDjD$h99X0jksriYfb8t_#5wOoZ!
zOxyd$W6aODK=S-eX0z%W6=?-66V#IV<zS0A9I*T#Dma3l1LwQ>kE8VEPc60034q<2
z9N_V5_%YZ02)1VOio|^!_yHCd7#N*N9l;(xWL<<h3LB-cd9yk_#~z;&j%|Eg`@35W
zNTDZAG=c<tk$K;S^RuI~)zCUnaOH>k117~!H0KuuV1_7=#ql8;@x;J-R=3)9K349$
zsl#yHpG7L;iX;%Lu+n~h?eyuCMUVX#a2F``CJV}w!8v_$m>i;9$$LIIf`(=7@<@pJ
z>?2BjH`AR`J(}_oa$dR1cl{-5C*|d@a58%qpr%bxM26I{p;KBJHAG`@t<eo7x8H)C
zsQ9lUZMBK*b7R$e%jCoe4;*m&$q3&nN}oW(Ug7OWrjQaMRFX=#&XLSV5~Y{IvD8wG
zGpA8n&7?-itRCH!o+w%9PmuL~XuWtf@4@nO1E~e;W9_caxf$xA@TBt@c_EAXg4vC!
z@v#{8LCwx<2^noy15F>N&UIZDyYu4X!NcaT%OBJ_1UyDaI;h3lm>nh!C44K7lZP>A
zw_$mZ0!}~bn@Z(AM!Q-xxBCvZe7$q0N^gS?tqeENZY1H-lRMJ>YM^Bj#^U`T$R8mm
z=Jo~a?)sy@0ux-HTOKgO{P-B_nbS(;Y3XO2mV-H|^m8lj{HG3}WX;ecBYEsOz@^Q9
z>-;Bk&Wf64h!%yomhG;Rn)<z-6{}>^Wq&z#Ce~!Ehla6$n@=eo+4jW!&H$+n{F(C@
z#XB2%rnU3sSieq{t$WRBeS#f=?UE?1XI(W*4cEDl#huI>o2xrUhU2fkZt*Q5nH_d8
z-p{)37#NxJ*+vGiaqfvX>^j%>=+|zopseUg2*~$+%$C4=u@|7gPeb|QyQeOESq-uv
zmVt11kLg-graH#^o*6Fg!>C^e8Cvv0F^1y05VL9DVY*J2!lj?9iZsG4pmAs^Xpxhv
zrdv{6sE8i-V)jxMHmi8xPF2H6TU+tReAxvk0$jr+RNm2N%-Nt5Sh!84;gIulg9pW_
zqQ&LbtGNoe5Zrzbwd}z)xq~*0vzY&`?fSDNrCdUe3Bz#uc}C~qRR`2tlFIcu&e15D
z5s-br)kDDPAa8)B{K56;F{^-5Hv>=o=_`4(+crT)Qyos!J05~~IQiJ(-c3*_py>q@
zQ`>!r7)_kL6U$5<Ckgr3DhnHt#N!GHI<LEU?xW(&eZE*nePDq(BvpLh^uFLlrPic4
z2K)ZWO?MZ<&$r?cDdJ)h{HY>{fVu21^n=d6-ih<_974k~YOx5?5&}_@hSk>7uMJZN
z@J}@{WWVN-7uqHWfFdBy(YwnemL%!@ZrjZ_WV!xQBb)@o@{Knh6}UR7fYc?E4Z>;s
zd!y~sR@(6-YlWK@{o1itJK*p#-!r%6%P3V$B|>Ky`*URlB9P>d>?J}@o6zX0i_e+4
z*rfA_*!}0^=RV!Zk*IR1VQZtZ`7-LuW(4EXF>p`R{zyx7J6pseFdrI6*-HM-_^xA+
ztKQLDST)Ng%Mz2liRXk<s!Zd)W+)f&ZLnF#QjDeHlpcXavp+ZPd~-WS+_;Fx6`em_
z{u4pAnX!uBR@^r~$1>mYmdBL-PWG`IdldU)=0^t)P+su|P9Qe<aHGK&%s)WPlhgp6
z6iip1^B6~C$F0>vUfoG_Lkjd5^kw9G*D>T%6w74wEi3Rd^@^_kT!Rg-VQ$<zpoDz%
z?yDaJY0I?`h;CRvhOTW{Sz8&H59zu<4R0kd!}WfQ8~4U=-_Sl2$jd8;*$)^ou4)J5
zAY_>aKpUfH_Vog__U%rGlzxiz&a4ji%w$6P`|{%?mpD~DhXVt4{YNl+BY_{5>(cVO
zVnbWbcx(iniFRE`RQ!0rg|s0P-O75qJBT&z5WS&>cUGe7{V;M#e_@X-ftw74Wd2H!
zG9Q&XdajmIZ&qZbA-275Uw2yfNU4%d^)9f<B(|4YMlU+IMw%5{>?)8d!2%@}_Ts)4
z9CkQh1go*=&4IUAEsTy=TXmk1FV%`5w!TW~qnsFlXH}5pFaRSI2KjD}XuJ=e1oD2a
zc>1ZRVL8_g#?Mq}t}!2Y(aOlkLw@>a`G0;K*6(Ytl(5llfLQDx_%PLB@_t~a^D??7
z=5CA!_jH6|Q2!F5zZO%(bDkto*=0bY)K^GS%5N2LuOZ{<3SB+V)N=s-{CX_a+d<NX
zK9Q0<UBYD+;cekSkS?QcBT;@&Mpr-A@X2#VRkq8rk%^zj>g?pV^G4q@l9;9ww1<Z&
zVv{z1yvDEL7b5AB9ecwuZFbPyQ)ovUeGD)9!{P)gVh<g^wQH7pq63q5R(%)-WO4N2
zX4J!QS@yLU;ck+H!zz8yEbcP>+oi_&(JjhBfqQ<_nBV|t6Db`-!33j-g@A$0W#$eS
z=rvNhk#bNMwq1~cS{D*!rs)SH*)n7F$OgVe<~wn{hR2<5i7ee^n+hgwIbbH!L=}D~
z5yK!o99A=^^(82pS+5`G8C`j$ldEiM_;!d4Ru~@l!>zL31iI)lz?iMzdaZKCk#IVs
zD3$!t1}-=_bP2FKZ-@w>WrF<BoOK=D(G?Y;G0DEKakCY}Y{4Mm@dt{>X#p|BlKgcP
zLJu_2+V8WRiW0VFq;E4J@>B3>6+w~!3x1gx!@d=R+A)dA=I63VC@DedQGA~Hd^aOD
z8rvTk*|g{Xw2DhoPaRkw4}z!)1X~C}g;1i9)F(*gzQEDeW!CM*z9bWw3{OFlPFto)
zS?jAu*W<B6|HH2RpyMA`H2U4v>$arNRqmqJntgmfxL52@Ef=R+%<q9EYhVqUY^Nv{
z?<Yc9DouBc<j0#(=;Ua!VEz3~NWX(xqy`4R&T`Lr6SWa+q${*U#<NYJ5luAbtzlGC
zjTOqVrxD@X{>F2f7JakaZVXt!<`k7f4P|B67Agn;l3P!CQrN2^9u$j-`nZ{Dh-c&g
z;5i@1MUIWlk>EMqAzV~BudzB$K_JSC3B=)q`oYEJY{$vvHMvSF4-Aa&M|U3E#HI$v
zM>(IfL|sBy)T^47$+Mfas?D3kMtw)TkcK0+yf>3bTl+kXXL@qAw(bN<j>IHH6WrDq
z>wv=vaE;SGEWLe<I?LrJ^^2Pgd(Cv!0N{MZ=FsWkg5v{sL?vGXaLU!F(Pk0G@LK3Y
zGKP)CWkn6IhFQ_hAB}uLNrr#^u1G*cyz2OTvIq*Dz~I4{ChtXTb}OwgHVQFGw=QW|
zw{K}2Ocyg*?>n3v+qP_XZPP=)f!TE&E6YEx^=Y=>K--`Z7zwkZ3LO-VkhwLZVDwzS
z@5;eja2!At<nDynQ^uLn3w|%Zuol~70TcD?CA@t-|7{oZ^G@b1y4-ww*g(BrB7uFd
z$Q9#8DS)EK6e#CidE%bxpn1@QH-QXEq9E~!4LYKnK>r^|{$Fzt^~JDI)&l*krB{pm
ziuVGwNgW>Eh8loiB%HB=%_eLImH){;0zEG}O%2K#DtP<x@q_k6fy9q);?}A|%<^}-
z1DDmRgNqkr?MEg-@n{PQmI*KHkpBS@lLqpWgFe9(D#7Xn)y<lNueFP;xGwL$NCP%T
zCBW_ZiKv)KeP}<?rcns`7o`8ktwIdgbRK8do2{6?p|~tDR1nISm;m|4vYF)w1j3G_
zrk|#iAN)d5Iib&Ok>B2G6NEx0#~tF<GK06d@<&(5ODexZD7|_on4Y_AqZz-4c8S@I
zQu=xuT93lhQcO3+yoFeqE=go82QIv-Kwu_VJrDN|8|yzX>!4z7v6HI<`gu$%QD)~#
zF#oQyn&nvQ(OpTP+4pTh>J-qaE47}M<h(Z07TO5p{Ci1BLL~Z}H)^_izO(Vy!=ZPW
z^kVu>FsynGW#fLAzRAm^89*X3y3mhLL|NA6;ZnNm+x*@YyI$RW>E^7EL??-pfp<pw
z|G^nWYp6O0Ps{`^2|;~a|9q=6Y#{36Ckn_Y#8^f1*;5}_2XI>G8H4(-Sw#~cPH1NX
zbqA<DRo4u45vm71Yp2(!U=TMzplxXLHk{kqMFHi&bdep_apfe<1`&FpcQ*1}NKID}
z`fmNma6CyM+h8qZ<7*D)+luCnqjqehHK!0pcrNsSL|jrq>Evww>1K^h#;PS{w~Jwo
zuC6zx(xXVm!_CyJq~MEAzR6`}>#kS&-++e7e=-j^%^*hb07>T2^?yUBq93W>i^*8P
zBZPBN5Dhlypcy)oJ{#8^e1N=v|M9Xw(#@)Vwto=<_#SZ#D;}(G=k)XFcGzoBKm^C1
zYYoZn8Y9X<(RnS)k?Mf_$Kl3VQ7@oI6u9bdiBnE<h(E$q(G@TThis@F8}1Pjs9p=x
zZc9Qd=jG?DcX`OMbaG$cQEDSV#VS(GmQT1y8JBz`rbe!(n9UniFc#?y4!wBQTC0%A
z-Pem7t4Kx!FKdP6s~xXsysGk@H`OZ^&E^c23TzK=5Tm;u3a{(P#4Iyduufj8QDC}Z
z7q^75N4$Yzy1d{Wnkjo<n9{y%&BhE68?U0kS9yB$A{0NIwQ$`G=k9_`wrzqzbvvR)
zbPd);P{Q*C{a5YKomd+NPE_$G)(}k;md5T&`qPsXZ3ZU{4IqSs?&It^d?_TGj))(F
z*|AvhW6FA9&pOd4w*8<N1$~ZTn36N_t>>USQUEnJFH+-i>os~z@mO|=qUz7o66*YP
zz46p`5->aN#%+CTnsMQ|+y-+sEd!y`_l0pcipKc`uZqvKCa%p1!g+a&SM25Iqb-g>
zxa$_(^v|M>10_{*OWk<$nHNyG+<dUD<gVrXylo><jH>Tu{MNv@1QWUQp5eHcRJ1^C
zuX@v4EvQ8B`EvS(^u~?X%?Bx>>OCH_A&g%{2#R0eck-UETW*-Gm=RIIWAU6!%uT1p
zj5l&8I2LUMuVu%Qr-;U_MbaF6ju>I>x|$Q44RanQmGH2s^(7aQfJv>8vV0?lJTBvZ
zwDtzYDj*t5BP=@hU$O$an86SHF}7>iu*q9$Vc!6m4Ie<uz!)gQrjl|j`pIF#Y9Q#)
z1Cnk~-(303a)%c+)*?Pic^zz25%YuWP@ter*cY=-IRb@z;DPA=Ps?&0Pg617uh~WY
z4af(B;N8=ouKPbUy3(=R%F0J|eYYs?_?7BlwhiLQj|fTH_RuRl`J&itt8N~3*6PwC
zKa5VJ+GZmSfMy^^*C3TV7EBnExV~Uwp)x0x7*6&z6!^rUv3?+GR!y{S$-ruW(^SEi
zDYTu#3;A|OGp3qZQmPm6J|kF?e?hRH9I^BTY}&g*mlzZT4za*eQx``$gkoZZCCcw>
zTRO@q8<%4Y3V^lN+XXG-FuuN;sz2n#p_*FXRXO8z?$SYxO@P>SR?_IwxvJ0^Ci+=H
z$QU34&Dj|yx8xOK&g^AhKkT&kY0eo3dHLPX?`fN_y8~x@x~Rq8te%@O_rIFh+6r+m
zCw|<|AnLnK58O0jf+LV<_m9kdUo~a;!@k|DtsG^t$<Oyq`#z2-ZQv#ts_^QDth9;l
zj?vpdmjX$Dv_H83s~qG@%ZB@?iBS&ImmJuR_WLS4zBbYsqrtqF=^yq$FwK1P`|?T)
zlpk?~u^N6smIfQXU+LOK**YU-*fD2ruA~4A`utc?CtRJ?@vEmeWaMcR6^ZNnabml?
z%>?C9>Pv5=ug09r+fO}V13$#C=J(uhjL9uDZyI>q<R3L!(G3us%biHW>PFe>%`@|@
z&oGMtpWJ`!4++HkHDGPRTeI@ZO7osP4IK>$i1PzQq?7jZVChe=85^6~QBMpz%60y<
zz5#R~#7d#6GUm7BQI<MfXzP0V0WG@Xz-!v3uJoqfGSO`4Y%g<{!YUb+^mrm0?h9Vh
zv~BVV-WZykR97j<&<lpHfKdD^o7^qRd9DdbZtHv}NQJ|K;GMTlDrAI!4b;gzZORsh
zP-(cGdKbmF;sqSd^Q9D2`SQg8He1vd%BhM44pa^;4Z}FH<Z4p#H_L=GVPf^Kej*C<
z)6}D)^OJwUG_SLn`Gu33ETsVGhuO6GarS5lOZZ{ygxki0l-)xdjnQIrgU_r-k<8f!
zG><y-9b<R1+~u*gW4{yxg+r*!n{3HpeME>}4mH>#>M7qxCd2mmQoijn-@jXY)mR+X
zVDm$FIJR=>5bl0f^M}G^II(S;#yp<B4{@mML>Wb!v(AN;WLW)raRg>P(CLJshjnM4
zO`^dZ_O34A{O0Ee$hU6+M^-c6Y91g;KGyWwjCvW6EY<Am8WbOHgjWML!aq$^oyjH2
zxv>BRdpk`#HG5r$9JDu^QMo;IMBpotgU=C@HgBmy!_k2wf!&B3a@=jI%O55X0~~_G
z4fu9>0Iru*<t`oNN({Y;JOV30#l9K>$5<?@2@eE1a`cs4r?qmOP7KTtyKw83PY~y|
zDNp1dbQXP_$9S&?k57&Hi(;1pas7^|MrfH~OEU;un}0%}nl(WK`=RKTm>P^)m&W@x
zfJq$rslZ_lIaad^kw_H6PSRU?xXxF$7)qH}*1_k0lE=1R7z{hzD!+MAAj%)<*($=0
zDs%S%_Ny<kt6>;SYe$`Y3o#}R3n}hEkoI>P8`M8nzf|6rU)-qUVA%LlT0X<7|I>@6
zT(o|l_br#)cSD&s8<GlTScv8h(Mo!lb*eSDx^M&JuhU*X>A}I;SQM|AaP{sbm6}o3
z`3r&Xn+20w@lxx_#ci}W&N`Qr9ixB3)Mm9v!y3fdtjemK2xjvuvt8q!DVqCg&BbN;
z&B%xIT(_p%+Ol1^x4-Eq<SsvQL4?#_pc|&lK|R$GC-$+<k+*}k65Jkhe@$fj+xuP?
zO}l=>{?1k8X8^;It&2N3|NWa;x<f|ns1tuOc`5G_v`yIbcqCx=%u}!_dD$P;DHcgk
zje%x8X*k+{ome3Xp%5GpF(~vt@wU5eS2kAeVFg@37{1OUujYiXaYJx?#L+{YYvxNd
zN6a@{^kONKd-Gzo0*%ifiI6{@D>;oUMr}UPvB#tHpG|S-@-zPd49b(|=TEcJKziD_
zd1NB86?)ol5A7OGHaY0;Q`{;bK}>kZK;IuU4YJH|t6=%^#xzfHt*In7lUd#?A)ZOl
zqkD$V&;vMA6A@vLtd%>3(E<-PPZAq`zH219RpOS9-_&X++JVt|)Lf>9fpUjgX)Lj1
zw=px2PpZ`j7i>xy)SoEhc+`&Bi<BrPisL4hyyF7;`g(9;IFoQ;@0@YO81Q0i_crnz
z4SCI!Jx4b%@BxG{@AXC4A%th5i1^6A7~Eq8LT9HFdKjl3bFELRfqF3eR?yy#J*Kjp
z`u3IK`tKTe^zg2Hv3AI!>Ym9@@K^c{)FbIRz+FK<pYw_GDXaNn#3+CnuwG6QYQY6K
zOx&|mdDLxScKr__(?b7+Fx<MGn)_QzusfP8ySre6y;l70b@#47INxNHVK15jQf5B2
zMDkw2u<4MnyE1%M?CkI45L$=oQeMFRW5dY%ZC`f!8C*3%Qt%4N{0&PzfU|9!2#PBJ
zLC}R(xpgTK({7Ys(#UVhvzJ#@x@e?rv@ZZE@8?_Rf;rT0ROAl&%D0X%`t<m~5&NUL
zaWI1JDUJY2jSTzf+qqL!P&#?fs5G>)$@1Kb;ykJ()tjEcN&5$JS*e7l$l;3U^jiSA
znr!x9UHNu<;^t!1gcW~9da$<xPr;g_>|HzS`u=2A9CXldA(<3^o2zwKFU+`%DU0>o
z^4-a<Zr-W#!Xbg+++|<j0RF7gku>?6j;B7Dl=KLIZa#(qP+BIG1wmyx5c5_JOPO2+
zpDN3tnqe!p-m)Zlk*90~=-rq0(QIdqh{~c(JYJcn`C<6$_@vj9rG-}F&;Eqm_!&xy
znF~7SJ6H?){U@6?3~1xAtZ)w3@an*Vg_-HiN~oR{Ka@9rx;Fu^f!Ls=X*_ZMKM1EU
zu~?usxr3z+3?a8Ku}zy%l~y*<$65u!OSRT^aEPB?kSD(#9r76+M69RguOh_$JH!CF
zO`NYFs2m8vUPr_p6+7Nx(jxT$3Jjr}xFbD((*6~XStWw7Ve3Six_^`rg2CTNib^n>
zla3FYW&3^0ih&1r;tK30|69MsfHdCD>;Doo{uV}BfQmDy^S{4kgZ+(@{NDmabKdzs
zL!;mQzQ3<U<6ekuahXQQzZ>S?=pFx=&kuF-KZaB!070Xe(f?VsFrDb4xkbS1@__l+
zcb1Rf<il^4{r3+5S@{V(eFofbzpB;*;o;1$AA*Jj>Gi$*f*H@%3;BkH@T-4+;P>mS
z{+F5d?=Jiro(~4E;~56s3vgB|qD(sEJ9|54RmAjN>@^ERGw``!JL_E-QQrrBbw*wj
zi`)*OTFlk-vu1>E?sUk&uvUWv!}A&XyHh|C*MD0p5QfGAl4E_Aq{WvLB;aR+13@(H
zSDt7x%ZH-DlG7}N(*#OzSweU3ui!(}!9{ro=ChWMTqFdxTxVPV!OQ*YO$AcFfK=3i
zO@#O$*Z_lC>C4BTI4wrgpObfYxJO7ODl+!ey9xe&_y2tB0hTI_2ruiO6$Q8AYF;!$
z$l-|(nzw`fbNh+fPBdRg%{Dm806yV*e?s#G75m{E#yKMrP?5x_YA$Xn@Cb#ao}8>u
zUV}VmB(AbaLIWyagvm5~{DP5PRxc4CnOH0-(dusCgLzh(@2}-EGaH+*B$-y{rRPmX
zdvK|~qtg2emi*_KUP#9hAO`)YWj&ud=*ElcJ#Y=Drr>Rtd1iPX)eu?Q55xVn51uSP
zeq>W<$GgOYHy200l-}%evlm$@D|Dj=MPRIsOy|9Df7`Y#zcf2DqPx1Q>6NE*Y82S;
zF{xC-?c5Ji+FT`k*_vP`9S)p+3{qd$jP6?!S59I&1~=&^zunT~^?e<o%)2N}MrMw~
zo-@OSnA&3BxrZT(+3MhjqP2oln0W|Es2v7hxbve2L)ii)>mp_>R)3aM^X<ROcwTnG
zgvm>c{9Ta=7E}i{feN<*Xy%&82|9lZC<)eUyNj&R9oz*L+qNuArSyj$($^wkL>a>>
z0-xQ+yH4m+@JcpoT$%=%lw~58Lt6cJbHBSX-Hp5OwNJu!L_m)D6vRa?|8Vl5fSXh`
zJ{3FCcQsZ5>o!}zQIGbE+kWq{%{(8R>5XUta8X`u_b1uIoHz0Ouhc;hbrWP|1b5PN
zL4PiS{UwGkg5>43cZ*j&qN7)lu`0CGhy%4=xEd(9E_hTSB|AKLOuIv!e00XM!(6M=
z7#$UFas0E5Id+|;rCg}|L(7fZm`-yx0m4_aNAnGrgfFk5;iOX<c3q+sHGd<z{w*yN
zU*RY40AI}$jX~M3#&1xHX%7-tnQeAK)5x&`x(ql$X0B=iJ%N4{#;0BTZM2apDuKKL
z7NR&o=2zgWBd=5l*Uby~9lYvPSf<iSIWcC3!Vpiun=RZkKn1tFxhz=7j<K&L73LxM
zdoNvHQX~Ik5TjpSfUjZ8oh%S?hA$NO#8LIFW$?0XCLTWz8I~%i_0m!nnFTx5v6;kL
zW2bQ{DYSJpxk_fn$*1Kr_T~t{!3A*+A$ns~{!m-UynNDj%o7ul+E(=8UHYc~v0$lC
zUL9S}HeWfCq?~g?^U_eLqrx9~yZ<Q#@-I^0dBx`jk^(7(thE|sp9Lm(aWAdaezu1#
zy(A{?stevb(kIjRgE9<XB*zYC`FE;AO1;JIi<)GHiMCcOIE1YsH#p`S;rpZ^zPFX$
zh$hhQy}4_8W5L5OV4}>pv02N1N$4)ZIuLebg^$Hn@XFR%fsEY-x%sd@=blo*4^put
z>iWtZ{JT+vm6}fi<Ya;1JMfIZ4AAcvDbRnI!%?F=!e4#7W;np_vne#IS5^%f<uzH4
zp}!{RU1{UEnOg|yELAo$jK1lP;ZSwZZV)R-4GKxfx!-4=b=q#J+xf*P|J#22VO>OP
zC||HRzC%Jzke>5Jt-L%A*P1T;0XlUeeRb8<oc2?V&Vy%(Gs5{VBVorL_<TRFadTEu
z(&+ZM_Wq$)A>)<XKSh&AG)poZ+hX=iz4lhw`r+q*NHe%XWD8yTdZhQ01qjR%g`^=R
z+}IdDI8igF9%p}1qD3qa^Usg=n0gN)D_%g9iTcs#pCT!JA{qbWdVvhMA_RG(Bvg}+
z>m>o+3HsD2jfJQ6xib=ng6yVlM{UaAmTW(wvnfZ;;;{z|>Z!;z{Zg#&Uwe`#MD$ie
z!|`$%;Zu-HBOlC4ufBcLXWts@-?VxljFf1e6dKyP%O{@7&)Izc_y{FAsNRmtzK+|z
zj>ptxF>?>+RL7`4u)AM|&<7QjuiJm-j++F%^zR~vUna)l0QBhp@|-7BUq8R#@B09B
zox%)$YVUVy|Ge!666F=Mw9UVrR&Wps*w4ShI1NkspL0n5^QJ{HNJ*bYS)LBpR**sU
zVapNDt^b(BzvOh{)r*>VMUyW6Up3i(gz3MQul##!fnJt4h)~Vb^JXXJf1^NWHKBp%
z*-fLo1OM#)^RHo!#(?P5qYhJiCcnL(zwGs&7Z!Fe<ZL^RvD5#aJNVD8=b!}nP8?}2
z$bUBH{MS<dahpN_LO%X)mTYC|)xZeZ-&io{TSViboZR&KvN7iKbf5LhP`Qd-<85jG
zz1j{htL?B8obbD=xk3rijrN2h9aQ6fn1bv`gRcLNr4`Mk0Hq)z?S?E^fAeic^)M#L
zyDuM;;`e}_|I)t`l`mG(a2%!VSM!hmtY48N1hlkWpz%CPo)oa?cq0G!x~?d__+Kl5
z&;CMBKRcM<e$ke4@5kFAZ-8^@v`j6!Wo#>eJMIUo2XR~?wjAw4+FzkRQoJaL|NoI)
zfw!BXoSynKuu^#Kdnz`QcH<(b%E0=YaxH>#|G&uTS*I`VdcS~sE$HmLEO3m4hq+~o
zwIiCF%bUsByOt7XT7c*AW3jaQmye(H)m`SF6-LD@XPHW9$nM{CZ=>gHSt_D8vj}So
z5%G}vdQ{C$7~pZgRqIcWId^B=HSPN#&NC6HrP`A;DxnGT6O_2X*P-SGx`X6&Z~E%a
zQe9z2($7<bmIfv4P7E|5Q74LnK*hIyJBT6=^mi9EO;1wtog=1Aye0hWb;7L~EOvdh
ze%$iQ`;UmT6vLmMG#n*pZ_9B7RH+TOw;?L%O@m0hd>KwE>UR$@<&*00%;S&o9<1LX
zs+j7SXT9yfTX3qv{>mkbHBc#0+G0AeKXVt>lk9Q!O{3~M?AmT+uF$>euH;)`oq<1O
zacV}fSMWpfeREamRV{ZA+YB+1)r%?#+<x<7#GC<qR-hYxY9+VZXVRQk%MJD+_rb_l
zB|K;f`d)k;_>(`Y7F>*|?{4$kf?p@lnxusm8*c7%3xq+p&HZwLb-va=X1M;SRaCGX
z)1`D@3z#msr_EPJ*0UXD4*KXnm`um}SXx}8KcLHzx)=rp+6_Fg9#jrn!xbm9v-V1k
zhs~+Z4`z{FQ`ge8{1+IDzBE7_UjJ+e5i4JUrTSYm35Q0r4v!GTorX1JhdA)alsa@a
z5or3cj_|Ev71mQDFt-kNh(PLUo_80krfIi3bZLhdSiK3E;5>N;QUnI#i{^z6XEv-u
zK^(f@WmGBhw?a7B%niY%+ET(MiLCRwkEJdb6W64;l)BC~a(SIFY3HvJnM8sknh+h$
zewJvSD7Ao2p~B!O;ZB+t4H;PBd0pDicCu*yDNZKtMJN4$0STbrN3ccEz6*eAMMI@i
zQEzKU>;6u3pV=X`ke*$Tvm?yX8{F}LMWeXC+Fp<|+Fp4wBK+!@yJ69p6b#*>2#Qm>
zI<&3b?{V#>^#oD3eF7c&*(QXA1r~HH+{`=5?mb5GzP?Ot%FVhuC%t}jt#Twy{*r9|
zGVt`IuQAv0<xY>jh;_PYb(>Cp0+>G9fy^S$=!g9A8)Fj!6V+Q~DiyflY_4H*V{6Vb
z_5?6t_KdL0sAsEh1X~?=&f=uszq9r3(OLbt$LA)0JzvQmZynVBIn{ylv|r%c%>%7l
zIz+d<u39|)eoX~^q~#9?F%+hck7Vhw8sptn_n0Rn&Fml&XW-I%eMll=XM={^QjEiw
z1**Upc_;hg#37};cx}6T*^Z!_$m9T-*t2&J#=O^BWM<=@lKib5?RSyRGN3eEmt=Yj
zT6NAS63L6tF+)g*O{ZXjkHt0mnRb4v7*{2I@PbA=U1uK+t?W=XZeyA|+Aoq$5zJTw
zp3gK)HaUe7+qw$nJ4M-)U+h_5e1hbgXm&D;n;(73yUeyKLn~8xxKjhXm%stQFhUuq
zp%~uThA=6IdbP5PXVhZJDnEg#EKYoOfdTT^`?%CL;lS!IQ203Dg%rA8jSTq|4{_om
z-RrAF4qH<w=}`{KO!cLh{@rNI6@6MQ>ghjIBBa~sX_l=H-_bOOlx{oVJX+qVX^Cm@
z?gZI(OBt3p0K#>dwNspJ<?Glmz{{2zXNoM}B@nt{B^Sisl)sXm8}A&<=Dxr~3#l!G
zW<Oh=m2F|q8=w^lzO12sUnD=vj*h~z678h$F0F&1A7JVz`xwe=LfBqV;i_l-jjBHF
z%qV2(_)FPBJU=`)m*i(_#;t|R4@kbmL%nYb)$17DIKq^oD1fRbnm?7O@*{9Jz57&D
zc5(UKMFJj^2rR`j^U7i}aWxPtshAWE**Vdp^V_1y<6IcAV6nUA>;>5sc?Dn;O*X`g
z@xTmx4|T5yiHWoGTJi8N3E2<S3d?VIeVC_=q;uYOWaIKtV36#k>ef?;rxL^pn?KU6
zrs?-Au4u4v$kt*x3xjiT9MGx`?8qBB?&Hplhkh!{L=rc~F&r+`-+udQ)!ZLH)p{Y-
zOgvMXXR}oM-IIP;?OKx*%Z`zDM>guUqJRWHepLd6e{>tz)mY?(jOzJTVJe%>*s)TC
z581p+xkTbp%HkQ|n9Z;#fqWN#%uX+_JUSZ}uK}**>lXNprhpTi(F#3<&d*n+A_rGc
z7Le{43}bE4R7<Ucp2OX5^t5x&RCQvp3t5jjIMFS=b?=6dP4>4Lkry+It$eF+tR)JM
zt8BRXVjG+a^M#WPm;%;-bzz=8`H!09^Oc&$$-Ft$4yoRTaUxgU4?^G`nFi(}?Q>pg
zo0mqZs@HufBKIj#mrYt8Dy<|5MB=UhzPr7jzZeuC4ig5*g?UP@0d-0aG?RGgD52TT
zi-jW03L$U~7?^%eCwKl}J-@-Y|0yD-3{VA*;eu?#1A74Q)coAU>)RcOVi3IX9v~zO
z$OH(%_HfMeo(Djh-uxJOygB(K9*+X*X~s1oQV!JEqnS&d*5Umc(z<|^I^(C9xe#E-
z5~Z?lYV`#vRGN3nO~Ap+6?3Vj3-0xW6)bljc#i=fXqra%+q*QQ?mfXX`%u(FQxXEy
zY;|G)l17JC6-dI6P=#q@gSUDTdjcDgsz(o=6m7>4Gu^CJlB+!2^Oh=RL^QT^f=8XV
zvvm@N3k<AmJ*WezWklhd%X@JQ{Fo@ZMV{A4S|U|=D<l2MUoC67Au7>5)v|B4soS}6
z4-TE!krnR8U3;wtS2`J%gc{-0hbOt}fi*4TS~;mIw~_#PmI7gejg+`@y2tH&u=vV0
zs~m@^8ABfs7M;yWS5r5aEH(Mu^7{<GfA?myU$#3~t4F<F(=K;zgdkzk3T+cot)!#D
zVzZ4lygjaV8M7)R-|1VdLp*g`F05n|Ky)5G7`(%Xk|_W1c)~8YkuXMy+S4yhk>$Z~
zm7y{lPtsei`+mlr9PNX%gAV|9-0Y{3za93M`;6CD&fz9w$L*?a#?$BAVBD1E$Nf(l
z#1a$keG6X%;hhhK*jT)I+{}A(N0-M9m%J33rcIzONCJ!I`WC9!)Z8iUnZk~eKTWpj
zI&BPT7}Q+Xij6R&R(k7D7hDU4Y^i2+pBW3MjW0yj*7f0Xi6GjSg$;}!l$`t|9F6sV
zC6^)Jn{u2}#qG`mNcLtKV-D|0yT%-_nw;BVJq>!aI8P1oU~p&ProQT0jQ{N6bjh~*
zfJJJ&E&!MI<#WT+g@E9@c0A`ytsn|BYQ4+V%<$I?nzpf>pC26teSq^nDtBJ<GPo0|
z->9VthPB~F2e#>z{Zz{=tQ5KDdj-XMa?5z&FM@>vZONX>>aD={#9_?At=Nz)$OAp>
z-jX($@)ejCgf!s)xz4}AxbMa-MsS<BcU*rV;;|_?Y08YjOmVpP&Fxmeb=}8fMY7HB
z5{%D`gf;998|lwDkt{rAUy!{u430FmXrgmQ8-o_^p6ps{Yy_7MJh7t7l$|Ox2z7!6
zjQpabk0J)b(sWznh@(+yJBI-ofv}m{;Zv{~Jq5N+9@cie+MgR?GY{U9ZFZ={ta_ny
zZ-==)U^c7yKzHgiwUn_M`-Pm@+_dSBy72CdMrr5+qBB2pJ;-t{k>~_1E|%{Mnnq?`
zSs}eThF?2pz`xZ5?zeQ_dpy=0_Gdgk%8VoRw(7YNraQi^1MuOa|EJ2?4jJSQ+arSx
zegol65g@$jj$804)xfx`6^E32Q1^MKV<^<YvF!on+%!Gr+Y^~nu(hH(EPGDcGZy5l
z)Q_B(?T;)+0}ksZ8F^d1#KED4_YVDddY}^>&Gp92={g#~f@XOJ%M3JgVsK&8ZsmK=
z;@3Z}_=b*8?eHFdyh#N0dT~Fr8T90}CO$dSHE(y!Ldj8sdCZu-T=vJ@aKz3mPW^C4
zT#)HDU>h(U3lPD!wDaMD$te`xHQ#W!wuQ8QleLcFAf;52YUX!&sfPKWiUVIJ`2jd~
z2j|#8>!8+OE043v^k7)PuH8h<aCAA}9O`2D5wOQ(gIzy-TC~1CRyF$`e{O&dt*<`B
zjFjd*y1F2VR-4ayZf4iYt~csb6{6Jh6<%)^?&346v#civGgx4{ZIUnrdh=U2(mPK|
zX*V$$O-dtb01_riAG|@TqVR*@mw~m&m@)TFG!6ms%x=uorbGj0*$#Kj&pu2dl>`E8
z5V<gjx85fnvYdBr$P(`dTF}mKpzz@JNrf}DVaa#v)xos0)s{t}VCo?hZTc9zKd?S-
z?XZ?QlYa1$H1_gg9V=fgv!N^=m>3F{&VZAe)Vasn*>fMLv_9vWg|EQ5n8iUoe{c@P
zTY(l!KNgdhr7wWRAvJE%+ezcz?Osh{r$C16`7r6~Kxn4WL9p=L9)Zl_?awrqNf7Ai
zoI6=#O#1rB8{tjteC7G!BW(|xjaDs5=&eDrXZfF80Q*){Tk-j*u3dsh0Y;fu{fiOq
zC$VFTkApSi>#_P>aC=<DH5rjGVLa={)WhBG{zq=GOTk8%SDSgE?9WG-!d~7`W}{&e
zli6|X<j+52%S7{#)Y+)+Het(97wY3jR7o6kP$8CK$UBp10Kr-{8xsxAtaplG!3%*V
zJEzWfbHP9v%D!b(+GPg859q3~J_eQ5!Wm)GgH3fFZ>8?<H3ewgj7OW)hgL2TrIZ$w
z<ozvSyzsrI*I*=tKYqGzCM_yUO7!SOhNc%53TOXne4NSQSU=C9nSve}Xn2S^#eyHb
zM&p#5`Fd>Vu?V*Vu7XA?$9%_a*UNyAxC!<o^|1^bZl8<TnPxSY2lhmrId3E>6MbBY
zYpx_2d8d`mODdd;5HB)G-=Q4Rox;_<{b06t1%RP8S}`>U)J{Bx5E%dtb5|VW`Mbax
z52<dV<v5m%2}m1v|8d%Lrvh1L+By%kfWS-Nq9`bdv6Doz@qot(G(I1l=l08wT~kP_
zN&z6rP)Tv4p9+;<$|?zyWXkiN-DBuaZd>2weyahM^{A&8xWYjzNg__!*rGe@ZhCXU
zIboZZ+A=UJFBLi713UJ`A&;-ZSMQx|L&aP`sKpwzJW<dQ%j?gg^W6Ivt1)$y6T5J5
zYgJe7hj$&OQ4Y4K<Wo9?cQp}Db7_;!UVCZSXscGnhx%=<`!Q%+DxjY3X+iX5Wf3s$
zfW~>bChUL_vhtzO*6nULCWSByGVa;Zy=<GTTX87YCIUSH{I*av>%%3nYenl>DSko*
z7e!@fq(I!u16ldE3SEes+?zpB;;|PY?*#p#hqZ(%<tl3|Q<q(QdF57FifeO?W87&v
z_DP2TeyHZg9~|7=nIVkSH=gRr_2l>z+Z(WS0K-AKMX#U>FK#7PY*F1!%_U`HjTrrB
zg178ux0Sr46ko5!Yb|)wBMULOQQYstjl?N>H1rqnm}Z8z+w3k%^4NpgFtjj(g$0Gr
zEKB8+!J!$eqC_4yJi~-3hS#!m9-wiL%t7^fT0lEA$rNniF4UAP!xV`TnS{_jLfj<V
zOhX^Kc)x?G#a_<W@2T?#V$shF-*bdD)RFnno`gMOe))K?Fl$fC9R+p8%m*j!N%Hlu
zBY5)d3d4@pGS75T_jx;Fvt<XS(tJf>L^~ziVV$YhY3WbpS|{|o(wSjVyprfTV}AFB
zy0gdQh;TO(bK9PBacEiw;h-9g-qujR@pb=aWYT7qW-G<FqiMs?4w#TVcb6`y9Lk5O
zkE@}+m+rLb&-Bz0URZ(G5}SRAnLWE>fT23%woHYAgLyBmY0Hm5tVx)%Bi8?~vbPS4
z>g)bM6;VM{N(pI@?(R|%>5?u1$$<eRhm<Y>k#6aZ0cM5<Nol0Jd*~Wqh&#T4e&6Rl
zzx!PNI&(PZ?6vpGy*_L29gS-`TBUiDmT%={8b3E)n?N%^u&&Jhr6IgseHU9!supW%
zGtEiGnP!hP{{DYJ=zPHMeFu1rw*GZO$~_-92Vatl6E|kk#iF{OJd9ktA&#U)HOvis
zg+M8eTFYNUZ}U75z{Z<<qh+PO`@_4a<#w<3Z0)x5mt{m2B?3oiKlzp&$T2HJW~pH{
zd#_~<@K}dD*a$!){0lr}ON~)rs0yx~lp<DS#XENDPe9GuRSZI2Y9U?H{>o|<8Ypik
zG*dDv`r0y8O^;EXbQXARxj0B5T14{k5q;gYLG<&BHYMtC^8!t$&@j@a7Uu);lGH)E
zZmWvKT!(uKeXctmMR+p0_UZ!m&&>e=GIQ`D+eY;7ZenH6GB70Gk)%3k44aF<DyfXL
z+3-qJUY*VeWM7RlU2c2Q#s;X2q`U7qCkSVR3%Nffi~Jh9w~%EbX}9vgq&wYu2&7fD
zN-X~l;J29=Rt}Y;)Jg64w~>tl*BpuE!)GxhICDRiN`2YK6^^{KnXT@UVHcO_@bdb|
zM@q|Uf#@O*h-MtesOTE+KVI}*SjtdaK-=!gVB=5J3@#q)^XG@PwbD~{mIcl6rIu2Y
zv<IN6hc-I*sAdCPcyX}iyq>n|z+YTZ-tqCt8?59lUtH0C|HXFQv9$ZNL^?D1D68c0
zxZZT+_sdMJ=RZ`N6tn7&C(~7kc0N35B6&`-GhsX#-n{=F{k~!A_XR0|Paha$l^(Y@
zizVevW!di#I&L$8p0%4BFVh$SFLdvtHI79b-fyA%X-H(zf7TOkDt257Od3fBIA@D~
z3vR&9F>W7P9~3Jm-4o>}?{=R3u|ZdHLMjwOJ>!StiFBsQb)b7w`0-}=;N2Vtd1WZV
zq^pWJ;mVlscorud$9DC?OQ96dXrK_Ip2hGz@H8{@ob^VJXwkC-$!ow44JnKCAiLf;
zbse{OWV?`>Rj}~y9O?Jn--|Y8xy`VDCuRq~W5#$n6ATJw%iSFC>!Ul_B$E3tMlEUy
zTNd<=mRN{}-jC*^^vX_ZTzyct#jm=8HvY*8%TyYyZ9S;1_Zd6TNisk8W{|CTw6sWM
zK7UpkECJKDw1Dk1xo4vi$7X0;nL2LZQI(BP?s7q}eU2hf{p_x~;ARQm%1IpVN)q`2
zyC$T8WxOX8aMdvOc6evCczo|;+1nc7Jphurn11)+*GgwrF(Geaa|c4IzP5*Y<rmmm
zjd^!W*CUNQr>M8_ETzb+>mC8vOw8XBM5M4w3!>p>N3xY==D@5hJAI5}(!~R}O%uJQ
zGKR+h=;V7&kKHwG+xr&|h;pB16u<A<`Nc$ehe15(iT6}C09_(*=h?!_B3eon#p}u0
z#o#B*%}J};c6zwv>i`DPis#-UE3DW~l!2l+A({MYQBYP4wGJjlSA^n-u!&*ATVvS?
z-jD2h{@eGApDG&lEIngk-}Pn0exa&U%{UXfiUnI*Y3~uJGk<PyZNiCW++n0eiQ{Pd
zG7!?=p2S-tz^uU5IVqaxicC54T_zX7nZN&h(z}^Cc}Kt<OhgYuRa?cjZ@i!gY3$Em
zL1QtjengSVF8yn<Ppjg>Q({GuUz?y2>A<Zs=SU_(E*e%@{?SR0e1pExrkdm)#ht^O
zgn(4U<95nEu(h>Y(UO6P`%FY7{kFi8aP$1cRL|AyS)_E`!uHh74~oc`t}34Ani0l5
z>DZZ<4?hn;hFvg>bqrfC&cn)A-*AR1T1!nWl^9&$y4xGPjhdn4x^wsLxbg*p#ah|-
zY&Bk`l|1xKGuZUZX3NaOakpZn(JPWDo6mf}MCUD=VyHPti4ICyWK|kzboEUyr9mqK
zfO0#*!>zj|Gi{Ejx)@%qvbSWTX)vn^I4Ao2QBg2b3$8AfK3ZNfmgZ^X#5*TQF8?2R
zRN3%%#eiY<BsMBnUrA%PG-7$_1n;*B*R8^|Lg0%}2S4GNRZF%O%IFE-$%{KxQNx*M
zCYa@pebBmW%sDdv9mNGu#71C8`BOC%_nV<M-_b0!2_{`?{u-t65<A%sTQh7sb5!7B
zpl!1_XM=63sL$Ukm~@UPfU04Hl+_*_JYFywIX_D-m2Xw&)Gfm1_iN{v!Eu}q5WQST
zw%#PI$wKLq{7&MmiI<|9fUz{z(mZNjR}W^1^#w#!-6J|tIabVm_W0-AV-I9F9#!eZ
zd;s?B@&GYoDRG%jhLkU$y_DfVhl|?|J(oT7t%?p^8Yzs}lR~LIMkbkadI5(*z>}+X
zRV?741N%L)AmfXqXKg537N~)7;mq$va>UeK3Vo&AbdXTz_29t;uJW$JQS+JfFE0S;
z+d}8wsjpi>WNtS49NUZTU*n(@p3&*Al}5qSh{buDH3_CTkryGn2>BM@dHFl1)s*Pr
zu8%4ohzHQJ%QsI)g_V!;p$!`vhEU{Q-L1^xQhCbR7?p5X|C1N!g+9msl+yt}YW9>d
z4}VU6sJP7kiM9pIgKEfJK_aPx3&|*AyyWV<nev(bZCYy&XH#bsv(E-eYA7sCJ$0Xq
z2JGm0KQ6nZC3=}41I=ec=#z+90n!}d;lauW(G7^#>}zhd9LE_vAb-=>*K*8x@zf>(
z58s~^Gim~ai&48rY%L$|9H}+-r65yWp%?TN?)T8Q2TU5xv7IMtsWk1HqSr($n%*>C
zk4-fOe3?5i5qM_G=z7-hj^(PTguv@y^pR&?X$zc{klJP!{iB}GioN&cQ7~?D+J%mA
ziFE?x+NJqYlN0f)1f!On9LtL&D05<7IB3h6YG*)dDQSIwVS0zd?d_w?Kwt-+I>Wxt
z`+5iqhFlz~Ke_}m!p7@wyLC9tN$wFE9ZbEK*8)B9F{0ssqmC4vguVV?&qN+3A7!ZJ
zM0Wnn;D&-TsNJA@wpbk~l8~1<1s{DK)Q2QZPN4LH7>hksGkTq|cdp(zcL*NywsU#D
zd;(17EUY_C^E3^<ZghAo;reeNPB{`?=e^ZUyJ}==#lP3NZK0oT3sdrU*I$J1!g{?P
z>j<=DQFvh>0*Y=-x1~u!f8$iBO*;kDmHmbNgwIM;FV$4Lp0oAOFC+Ju?MpYPov#YQ
zdiPjU7j$CyK69!xry4cm2EAA<Iekes@Ji9UOsM>d^KBKrBHYXKvqSn_!Rb+t1!~dI
z!uM&+v5t(?n$@VXl*&@;k*xa|SewDRKuaG2R$$bo%A2|Uq->dk&fN#B4))BsQrF}O
z$zjizok9vps(w9KF5Q)$y2riW#0@nzsbbcwl`PZ%MzT~cf={B$5B9n9!}KM)q5aK2
zYm9~B7IAG=rXXB+OjJI}a^F?TPTV}!XJ)jG_fT$6A)tA^J>JfRaD5;qsk_`G!Y^u3
z>_5kCS-q7IsN5VZB^HLF5E_dw=+A5`*M1Vv;Ea=dv&Q_iTg15e5LuCt8>5oCz-1a@
z!BRg`SgBJN+dcBB#2{_d>m`IhVnV+;avH4#lRb4JRyOU^;{I57qox!5=zgfsRYSR)
zW8RlnHQ!*DO&yX8bpQr-u>crqHI?-n<IQ_ca12{gWee1fqY|mO3&MH*gQ}eWDuv=h
z<tqTm3@3j8Mik^vIn&wVRGbDOoy}AZdpz#Zy>*3cd+)*1_a88&tDQZ{2`!K&wB5SQ
z!|FYm%r|JH(mr+Wcj6+N#kZSb^Hxu-+kdf5F^n<j_&ewsejg=vVkWV$YU$AFqfR5?
z@yROU;9<i;1<E}<oLN(R764096jdhl%`S>2>5@~ZVgXd*<oEi|B<rWKfAIQ3YUN5E
zMrtY99Qmk2&sD@(@dn=9RV9@|=>BWi9dh?qGA4)D<lnRIyK=m8iW8;*`-s~<5OTWn
z_A;mj(jw})Nc|Pb#&Ib|`{FWH<ogOWhnB#&?j5AKYJZ0#!$l0ktH^pywVYt2;dSmE
zmjK6RR#u=2>bE0fcX|yk%U?)3Duvr2gR0<qv0ncRg|7V<Sw^iPl$CHxQD1I@I9J_~
zWxETg)Ki&h;k>$;7QUG%F6AEZR=^NPqh@5|bB0P}Z)X=1*e%y4@A6ohC*o**AAVcR
zQ!-d?Pls8zMS-cRrCnUrYZXOH9lH&z!ctiNq6-z?%7p4jD0U4dzSN~HxyQ>PTs8ZS
zHv(;9goi_!gUa<J#l62_{c4k9V#4dZK2&f$Eq&m8CfR)t>6wnyLuys3<z=7l(WTAU
z!v<$nu>gl1Bts-(y`d2I&aj2W)dX-Sh=_ikW(N9NUqlRqA#n!{=kpzO$~$*4B)(T*
z;Lzn%oYEKh{O8Ucv}oVYn7s$-?oqk0-tJat$Y^>3y=bEte)i3lw~S`lyC=-q&wDCY
zpWzqV6dTJznGyPZVfD)=Zya5u8o7Y@>y^Y^l7BUE2QBu^9nSi1r*we7+6ef}IDU{m
z`FvzMf2QKzc($78+`gpcLgD)+<%?)`xy}d~LNWQR;*yXtDusBf`;BZdg7$T?NrGw@
z>*>*KdNHU&Z&l&OL7h+h%mqVTzrT8f>db!|^$C6XnaCijE>`N64xbR(549CYlH&rx
z6o+p433B=RX4b&!;i`wx`}C*A^2p0QidCx(L91$t;i<$RP{QzoPoVTMR{1yf%nml5
zZmq@vNIPcxnlidSefT|yOkeI8y9Vqi$KAVapYHx$wZw)_sN4}$p*~Gi&dpBSxCHch
zd{h=O!%8L|=XAA1Sm{yVBp5Y45KH6g&N<WJIGPb2vLLqC@i=v<LN!|D>FvjUGf7?>
zEqGDQdE7|g-#kNgGoc>+K^Vw?JrMwI85c=<W^k5zocMg`8?CC6%h-MtyXkpyUwaa4
z(wt(riIrq1Io0p_mgT=ksd<I=Gm#hw@g(lg2o=aRkF1`t7q@kLj82Meif_Mrm7{e~
z<{i80$qfM_3}(mZ^Cy34X{=oLVu`Se$WC03d&l)9RtHN@OJc$@FArKpvj5SDgcMGK
z25!*@+`sNdhe|N1CI`9h<MCs?7PDFCi-5hJgTcfgyhF?0OjnEX^$g@wkNKZC1fBOi
zOLyU$6!7?$oc@Qk9Fpi>)7}PUH!I=aDk+361Ks9szJC;b-b(Y?{A^#~*P}m@{Q(`l
zw{rT}G_22te2VHx+9Xt8ljbT}e1PnDOMP?Ny&hhzWL*r2l&dt8xp6Hx#-@<<Muh#0
z60VL~f4T~_-aW=YlstPnZF!IDFZyv3h|roYPuwr&5Z)W;d-VLCqMgCEFmEMsPvm;V
zp;US;e_lj*6mB!O$H#h$Cx7_J@fc0gR#C0T{|Q{2;cD0Sc#3K>oIkpWfBvh%4cKw9
zbp}d6Zn|JKHX9%Zj{gwIxjYh?nnbkr*d{YWUw!{6>~N58M<ld2WVq0)v~Iub>XP9B
z^Y+l>T!}&u8==M-UeV23$hXm&=bjByE7qbV{WD46$ww?Y?xXx$xa<H!KnJ(?4s@>B
zy&AqNJfar2n6E%4)#>n1_oS_-Q~H;~<61|^W=P+_TW=eo%|Ox8hGbo*Gi$J*o0F@%
zQEG{attR-i#&itW`D1RTB~#bzwYBbIid5aKZ%Z`0xNtA;44TPXUa6WZ;flNT$7igj
zg{kAftrRt@g#t}6?S3bkTDI9|YeyGr4x&^17g+r`mD6X-4h^LJ5Yd|J*h(q`?-@2W
z3geKh0`fig5ZuWa_kj<Hhl`CruD$cw?AbMrZ=UOFhMWr0g&zp6W2N7uT<;&H58r^0
z>uxz$?wju=F<?S~*7Y@v1!6CU%Z<MVUfKV%pnj*pWP!P>-9@P^`mT%D?&~mY*?zg!
zydRd+IqIsN*x9D(QQK0<-Zx<k5v~c-FD?=mfoz6A5K`+!_b?ZJQ^`!&LdJ{>nSMpF
z!Bt&xktY>AK20zC32zojp;lS0g4~EfvGFt0R5Hz~Oi;*Fe0b*3SA90XybpY8xMGEF
zT>N`GJT8BJ(!y{92`Mv*AQ^6~FC7y(*-K)tVb97Nttm24cs<1jdcmSKovBIROp4D5
zbN12@cHsy3q~FZ^;3E@fX4S9OBXMC@D&aanyc-Uin)pgEo7wxxW_GqXr!{qF8$Jcr
zb#p^zZ6*ayJH6bA6FbR-hG(~C1Cr~!r9T>wFNX+uNq^)H?~MC=^%LY6cfsFBF>T-Z
zvFd!vc-)WkGU46Tn4esgsa|PxV#aIz>B<YAVl~Oqk&ER+a1%fAynBeRR2*ZuyMLIf
zL$!H%?)pievk9LxZxKO(_;K1uC-``Mj%Ehk9ywuC2=Y(HA>V3IeJ3q_httDxX5;=J
zMNkg>JRINfbNkKKSM0P&zoA(dxtl}OM!cL|Em<tuDHy}H4N)MUWEgaFlFs+$m_E^t
ztmCn-`->alFMCpU%uPa+`ZeD`UJs{J=+Cs=1LKWejap#zYN|24>K$)=LU@8&zCErt
zmMonus^qqqm8&stu`#Ag{|rLW=K+&UuPlS>()q84bYP9~0ak6wJ>oF_MOv)%_exRR
z76<R@gfiCT+%+A)4Kj3l|9$XmWbmR%PxP<9tdKF9L5y>#^G~GPbd|sYVkX-Et#-xB
zf{jaUK8gLYxntX$qyTLYI0bXdeLAO7<=KPe<+4Wh*<jJuhGw9NZUZQ=ZseM{EE2@l
zL|szWlxbd@3!fj=8$WhRge8Im*+see2d4Y$Q%bFVCBfZtU!!E`U6`<Md=khdb(s6w
ze&42VQp*T)?H9Bb5NN=>#F{!Hv$ZuA5eV8cJW~0XzGsrAW;6b6(aH?|QLY4!9+9yY
zv87uF@$N%|lqF?3Dw1%%7#O>*H?xxJjBShiMjo_&qA~thbh~llX?~t<EqO%!F5$Ss
zu$(!YT+bRhx|l+JyK{93@l+*Uk@Ji&@XYt)Y}gSZ;7I63YkoqVU6XK%1SX<;)R4by
zvmV|sPmvPd=XO%CT2WzJpglb{#$-9ovI878s{9GF@6di1Ju8+XyR2h#xu9?95T>zq
zBaRDGE8zpOTRZIjtW#B6!%h2zA&8ZAQ2N4!Uyfb8C{_9;8Av0DuynM4C$ZDjA~n4O
z0Ij{WVZ?+~j0YGIry>x`3VT+0CY$5=;}8?1WCOh=e9cd%X41W)QzYeTjW?~h4Cq;Q
zx*N|2G%Vtto>yNsv&=L1xVa#JDXAji<69%wenS@oqF%MUCo$|$C5Q36-Z&5CHPam%
zXyM2j8d9g~(0cPK-NcV8EhjS1`o?Q04F{t$yK(>#Srf3FkFne-_A_F>xtoj~8g&>a
z-ao#T(a%?NMLt?%8Fr0NL0@wtUJa2#wq4&ao`eht!!K)og2KdHRJsHuyII+t`%~#5
z=ciKFO|Tl9G#GjB)TAJ2Igy;zX+6wx_mV6PFVyD6p`O;ENJ>fd1c=4`l^JEN#)<*9
z>||6iZC!5m^rLZqK;dp}Ol9s!67?ya(=U*KDUm*Nv5HQb9+Dgwr-1}0_w%x)Wf?(F
zQ^@y~jLyBB`;NwEY<ZqqI7NBlaO=X%pc;-I#X(1<v5XXTinV~T)GpP`bGfPK`pcgt
zNULdT<IGN(P9z3Q@j8?cl4te;6;wB8eTLGX>J3L*>vqQq?B)ljO3X>?n74=z4c=UD
z7BLGg5aLfmre1vva1S|7N+`}+nb@t>5lD0IhCkm7uxnaGWKEx*uZS@rw4l6Zh=+^^
zDe|AnR7y^3v99Ongd-@rEVVz<KwArsV6>?f?x;OIaL%3)TaHLAgTjQYvU2UD+x8jj
zk2uI~y}rB~+FGCu3S%>OEuS<FY`U10|8hOb9_@S}XY&e{ejWav1k*cXrsL7vB3)pe
z>+&}O_9y~YMYD@`%uN>xH~d!&&&N3v*?Bq1d58q#EDaBHD(BnukkszS^-vb>fi)5K
z^%TJ}%O-++Z%yj`TyTSu-XQnM(a5~&Wt1IqC_WIUi<o_~T)Nay4QDKx-I=M}Htxb@
zwC?Gy+)74|l_4#~wQ0yjDvpie+EHtC@2@}t8I=SgdM5v`bbP6vme%6wp<NG!<gE?9
ziMEhVr+94++#HhdGsVK#R|uV~`_N9xxB|`gq`I({cEOwKGV|8q4v?LiqOF;igr9QC
z01`TCC3Ns<&W4RhtQ@m}?nrni5&&^>k((^12y$sEDycIZc}pKmKC*by0~vbrbGBis
z`l|iSC11v2a1|$sNDnU$e00`pcxp$yG*)T#(L|HzY*D*HqN_!VG4%(6&~*a5k3~xy
zjC5-VtG!cm2!HbEss^y1nE`x0ckSn9fedqVGNS$l^gORd8htN6x8Iq$EN1V2V~{GE
zPmwQGwp;2%4cCBmNJDJuKDA~~TnLL7X)27w6Mn>I8;3%mPI`N1oGeY6osi1m32j~c
zuxZC?P9)W$T^{Btd+k0mz2PZc!Gsv^U6{gDN-_HvCob`sF#MKzCsJt5QBvPzVe4ij
zVU#BukId%P-mBPZ-T>ay+*e+|mKlX2J3RedcUy*@iAFpkPDfIfzw<htU^Gb}wN=da
zuHl=7O?oN4*`;t1)uB6999m1wC1}_R09M*|{@9idbxr@Mv9jj-d85BZ%uyZBj1iLr
z+|CPgXu0oHnza0y<$0QeOO^g8VE6K)4ZG!h(z#Ttc+QSI17Jt7U$}1V<$7Jj(Nwvm
z*J0Lz-9W&ukjl153ewN;;7Ds|O`?;w#8#$%`~c*V@9>FDrpeT(IjP5A2J8gu0(ZB$
zZpLKCgbP1>80cJ*ko5%UDy)eB7#e<XS15|qAu7IDaRYtVB#9p_?C8S{Sm1iA|E<BL
zZeiF(iv1j(r&~Aw(D_RLMQV?JYAzg7fA>*obcKs|OgTURX*D@J<?!9m_LNc3OHpq$
zB2as`mVXA|ZfyL~Z#gjlyGQrcoY^7-q=lf~btSj!RB?Bk-TT!TCpGoen?0&uK$>Js
zpTR3#4On009U||Mj>o@=eAj8U`?E9*_>>)*Cth*(R4T&ch*@CJUU8IceMu$f!OgvQ
zK+8o9$Kr7H38=u^Y6T*Zwj;wrZHvdWtyHK938`$=U(+ihT%Uy>cp`QBTUh#dm@68v
za*ZTW?hu+ebMmasJ6%-`=F!SbitiClx%$axo{O)j9g`V=riRy{RUT5RVh(Y~Iqb6H
zGwfudi=xe~`(7!W;lu_Js(scrj}7#D%q(@23H6X{mQ7|`0Y7^LNz4Kp7vIbjx2;<3
z4c3;1O}*zI2I+S~I-ed}NPBLZ8q5r{>@FWhd3u_c%IOoT&pL4e#=f>O?QGU%kgci5
zjmZzEi4_#&UyW^4D5j=mj8iW*nyCx^1iid-hqO=TjpTbefoWR;_}GlT(3s1MpjrQX
zV1s%amKbjiCHHsozA-Gu*7K?AwQmtQJ9zdYuEE_UzgoclUzxkGpTpDT{d1&v2_dx*
z{=;p#hcBqrifRKoAr46R{Y9Cj2xk5uqRF1oiHTgAe)kK{hVg2R5DTlhXaL0CNOy*{
zdmS{)b{Vr><Qa?wd?K!GSfoaAEc+yc66lL4Qc6siEFAvzE~hdevj#I=oNbmWZ|(Y|
zuRt2<3jshr9n}e)j~r5q<Gn$16=`XKxJ_YYW4#bBLJGTMjal>!OumSGDNdR_OVVmW
z({th)!GG|{M!}m$tF&{BVgwd(Y?WhMdC1(p^p$WruR+LR>{Rm7M6zT{kL7ga(dIT%
zwM{Z~y~;Vt(>!SE#-JX%wT_n#3Een&7P6QTRy%d<cR^qyx7>p5Nt)xSpR1WCu2ov{
zEBf9+<5hOHHR{L_kXp%HNW_mBuyv89dCZPEvv#dlNfolXzr=Hdm%UMGDQdf(W``qk
zG~YFu42}2tVa<L_(2|4JqM(begDasVX(8i_5%XbZUKgtXv9Z?cdNnnEeIb+Zx6W)V
zp5*<{TU#SNHic$EES8l(1t+E%^Yz(7=VztXuC$ZbK><5zeBCAq*At1ym`LfQjB($1
zaFan&zQHgO{FJ9xow{3=%cq7e96eRoUcq^{%rc?CNm@+SV9jH#_KO_OHd%Z`QH`e@
z@HtG5wk+|WF)2&>1@gpW+|;H#FDJraJdGD5ZV_JtHK&u}W2nicH8EoiOeN`Wc(>QN
z`*3mpqu-~sFXQq2fC8{m3^BXt!`1NTd|AjC<rP)bZo7Mh$i?>A(2<eC*|~Y+Ojl{e
zo^K?HK@GNCzKy5;(r)RT4~(XbsYLwcIE!%F<aQfzH7NrliHOPmigW{CHw)@WbJpln
z?0N1iIUyx?8>QXW3as1WuN~Ij0q?TN7hg}|e}nYgB-mZ=%xWW*Sfj|#sz$EK3Xm}$
zuQbK!Je?Yjy>HSTPh{8fci-4m(qFD(i<M5F-iJ!NE4>RFcx=&LD<y{B#X)~!c-)&+
za#7>J<oXifc$g#pE6-%F&M0CJed}et3=sS13rTp8^DaZybW#~>pJqeeq&#b3O}1JT
zhWA$QlM+{sy|5ZkSb;ww1fi_A(m;ogUDH;P%UgM(+6gK+rP(RNZV6krF#MVhAM^3B
zt*i(u9F;xV=3}4l8`x?PK$o5L3dwi(_FU`IuLV(mNIUNia~nm!zpkP;;r62e;<hIp
zl1~)262O}0B}2OVQa2o%Kl=F>E=}w7DP`I>mn!|nnO>V$wy(}4M?p&N_>lB>`tm`7
z8D#Y07cpsb<PqRSGU--QPv7L#Kzhs$0i_REa;pZ=1lN~AwOw%p7>@TJ(9LbN_nX{T
z=&bp^Ay_?=Lg%kL@l{`L=41eL7!R<W%Eg>?;tsM<Z**&Oj-y~JA#*d7q3edn%54Fv
zv*Q&B&v8BS0q#Q6TBg85gY07BWkKibHfJR}F!daXv9Aj_-t>XW%ofF&AMzw%z?+Q%
zZJLG>M?65t7swNEoBPB0ECE6TJGlJpB%lAGd)bPeLumM|@rZ1*=~8pE73){^7+BV7
zn$>fU-QniC(@^$wz2kU?W%q2dG6aXbd;T26WuR}PIIPTC*?J{4JQrH*$tdPrrD;o^
zSQ_Nld4@sn9NEb~Fc^_Vr%F$OKc>X@)WQ;AyL6wB>Fw7f`emO8ET)msZLD?P2FHy<
zjJL^I?I+_^wW5{ay+K-ptLuI*v*1L?QPh)o$X+wAjr*X;W^b#aTL(G-d3>@(8%Cct
z05&TfgNGu2QCYegxcl+v<9Fu)zzB;yk*(z{-PdrJi^5Z<Cl&$8?3+8+PR8vbHt^aP
zlW`--<0p&#lu+_<+%OoKH-Q*x>1Z<K@MoP6aeRDNGNSU7qIb%LOn!-t@R+mg<B^6U
z6ANE;`yksH4-Wv|@X&Norem4=nIA$ZQdkL?jGX!5Cp2?5No}ymZ<~mJWdbw}5-Fu2
zK#X~^T!tJgo8Sb!28HmLr_;?Xi3<>k49cCH$5b^b1f{MwK^R5NC$GGrntAVw+?ocI
zaytz|Kv<!XfW1@1iEDq)`ydeM>KFB*3)JrZ=8p2SGmRzcsZY0baXX_4DjO_8{c2AI
z>7H3nfY#qSM+9#vJXW}`?#|WO<W6P9r8pUtiY1pGM03=g+R1X<8YQ>sL@B%%2Wy>c
z`l_$SLg2t-h^oo)<F3luar^-Szb9NjH}KB8p>lOS65teU<kLnSYQHOPzV5Squ~8kv
z^(kSsbxM;j4)kOk+rl>J3WI#ERYgDs3~(RYO2YSywyDdNfs-71Vf4SiP9#Bz<>}Lc
z)>jk$8G+*Fzra1=>mv0J^%#hg`_lL@?7LgH+lK|G_E)UQ0Pv7)mbp*wb6!u5#!u=U
zdVNg57q2!>Y&<P%ETr`6oGtF%BDl(OUp79>qC}<s7{33ye>(|~_<(^ncW;KVe{7^F
zduT{$X2-<IJzyp&iPCG)r7NMpjywfgl+CP}v%A|OILjj@BD=jnmJ1s(j$Zdz3e<>d
zN*#73<xg2~Q$&&w=6hxjuZZXX)23=7b*2e7qqlwyt-FObtyt%u$Bn{QUcl2OmFfrj
zgxw@W2c*EfVGRr{wwJjISXFr^DTS;CFi*X7z2u|Xm&p){P1>WD)7bu_eylm(qQWdr
zeC)wj_Op$YhMx}Hi)M*V(fTZ95}w^K99cDW*gWB;#{bqi8Bd;A5KVA1<N4`zAyMSz
z`L{tFDxS_yCDxBU9bRis^x(1bIT$z&4GQq<pXH|+%omnWc|jW_9E>=@yqFO1XwXJ=
zlYPzZ02$-#CvdZ&mxfZCePf?)!#j-d9EBc;17hFsyLOT!*VPrGvCKBnrQRmalhK@%
zd#33_MX={)CIQ>{Yc9pb`$>IM#11_m8PlmA^EkQGfh|l5+u2j4A3ZWhb^a4ejUwB_
zIn&8bW)4MZ6MM{|4J<?G$9;S75QY@lF2SCin}EozgAViIi7jRlhvinngcMD?!_^hj
zlAu=bs$ra^k#Q)wH0TROScmS#`!GJBZC^w|1(MH^hyB>EaGt#7UcjfL+JR+@PIE<z
z<Uy#Tj@=xl5~Mhhb@Ke@(!KHCLFhNCG}%besU)=IZj^|p1!Yb4q;+OHolwBf?Vg6O
zF_}x_Dbo6PCE*4PfXiPJEcI-K)=O~D8+h9U7x#6=rPAk_R;j2J5iS9u8_+A(+(teS
zO`4v#?O3?Dc~%ly0EauJgp=$VYgza1C$;OWmFY8i822CmZg#aAy4Fqzu8sO1fz?p@
z67zS`b?Q4=rjrl`ETeDy20wC}pf!XR7x5C<PVC0wcXW%-7(}MZ*ID?SCl9`rv&&uS
z!C#nJ=>K>j`)s0`Ri^$rg#*Yc<u%bO91-N<lZ*XCZKyP9a|@KCJG%SOPZdE!yWP*+
z2rr$~fgFZ`awg4cYKx!OWMI61^0WiH;OS_J+h0hCEZu(5yvKK`lUB_K+ZtS#v(=pW
zB!2vkTYh3rmjg&10ai@4C1X(X2Yp)6!{Fl_>1^%>u?Mcf^JJ1&*NB{;Ywe*^@vF|Z
zWZ~e=T-{_XpykhrYE;G?+grtL!RMv-7$BfDH5*AFr*X<}D|4Euh!tfV`L1@v->s?P
zLdiR;9WiF1Gs>fotdUb#xXsRG|E1#k;F6v&d?9R`NTHA8HD0;$qk*DYN;>3Mvd#t{
zO!!_Q=S|L+Wii_vMUGKdMPBzFGX72o!qn2_MOlNM?iQu;m(N%4K<e0gkL+i|AjFxy
zuM8Wg8wORU)ZBw{b6rnd=fb|MPpFY1Uvf3AJEoIY@0}j<b#i;)k$p};yUjx~g-R%A
zW=UP`kjM}{3%emJOr>|-C)HfK@3ksB)YbkNapl+Px?z6L|FYt_>TAE_(}9XEy;Q`D
z8->V^M)6Hh$*HS~5x9XF0VqJ)#FXZXLqGZ6n0zYfwJr9tHBPHJ`lZPNYnJ!12noR2
zLFOz3G9>_Q<(hg%rL2N%g6pRi8VXDOG+F!j@~gjBVi8{1AZc6|Du0~aai7NBwzK?g
z8g+Qbk-<li&NOOQPKQr;5|7hUkoSvjgR|xsIvjua*TD7(=W%eG+>A)A--J!tWNAr`
z`VhM}tLSOM@$v9bvxMD!?5wjYrV#Aw<<~=b;;Ab)r+wM|pe$W}_P~b&drcE`eQAlk
zrbjv6>O)oEi`NynPm|XeofHR-wOym9NAYd83nE5?cURrW_-AN#TfL7xip|*h6oJ99
zhZ$0#CwbOZ`1uQ0^MffQz9v?C48={f=$~5Ep9rsLSSN#gVFog-wp|8+^;U;h`^3p2
zV&@0-gv0~j&Y%Zba|Y-b(VyIRY&EcMxzdeCRK&qp=DFASKG+#`HgB}Cn*(@<lygSc
zB17RtoLqW!UR77qW$bbPK(>N+Tove~uInt_OXA`p@Fi)FH_{pJLA(E6(;1>GOi0NI
zSy6At80mSX5h%mhz-DzjcBp8FV-D3g*PK5w#UHn^0HyqJP_1y*xTs&o8X|7lz|P|{
zBW7Q>OJ0C{4@|U8qoaBzyRqF-@NMf7`Hcla=xlJt5rRuDG$q1j=DJNr&Ll(i8&mxY
zhWs#p_w4pJ>R%tMF$D<i%7T%E?~@QPwVzodAb+GAGqjwM<{Zn@_W<awd|_#>dU!g3
zPbHEn3?!P2ntHzVzn`U%=-m&U&SAm0rCnacXJL_S=!42OE)WfJM2d(V8xyHh$cjKt
zLOu07qj*Y=uS#Z{pKn^*u4w~Je_*w#A}cGDcMngoDgF?QBJjI0CS{=JcB!e+E$H<D
z4b%0$u%RIvopq<i1FD&!%R$Br+mu?5SjW{u9)Jb`$;`8po9j=|9g)^n)IwSovuft2
z?E8;x-u=&L(4atB`?{F>e;~&YdK~x9on!u=%B1Ok$vkL~uJ%sMsR88q!Ze3%rYp`Z
zai&=t&nP@4-9DL!=zeptd4Lc0_#jccu^gmZbJcFJ6wtu<SHj>o9vgtdV{^7;#_rxS
zf{w)J=d@7pbV0~@Ar$hY8*0l#bRoS;MWU+KSu#Jp_cB98?CRm%YmwBS=7rgF2AgGu
z(QGLQD%IY=4_fbzkl|*?HcNGwevcbpui8!S`Q+)FwF@^$!HJ2diDp9*-O$suz`x?>
zW^^2suHM;@$GoKg_z(^JLA1}^{oz%OmX*9-4PmvK=afii$<Tu;`IM<#Ti5Lb$71FJ
zsPkCwRY1KG$`mnR*>t!Cq2}D??l3;Gq=Hj*hYq*6s7Ot<qEr2hY119R&c6|;j4#h_
zr2r*qv2rM={S$(f+3%JlSlnmAf}+Ago}CEE*|TaU+(HEm#F7IpYh87ChLKlEtoy<A
zoBirU1&TNOU)RDG$6f}nvz<6=*GyVN>mrrDg(o9nn?Hz!>>MSAP)n$6fsDuh=x+=i
zDsz+LLecU1R`9!CHIFPysu##|@1~T3M(<sq(xBY^Z`K!x$&CYbt<p*6xTiO#4Q8IQ
z_dhmWn@e5uZ2Bqyp5~)g5#E?6Ws5<MScmky)+K4N=9{*8(nX)`b(9<Z8$2Y0v_@6}
z`+R$KMV^)nap<}$Vt*u`W~=IYPG)yyw!urWl)a}M8RtwSDHBESruyNg<49pR4VAO{
zZeZgk<(6SuI%h4KXMXV#;tWq56o+P+K^37RkMa(_FbMw91D^r~6l`U+Cte(MJBrbt
zKZkVC`O{~fq|}*hHhR0MG@Z#%2PXUcz!J83R^R@b9u9}BE3aH=ndkXS7lNiJ3yx;-
zFolEX8$lbol)lnCXcCo^)-I=kE$@kxu-+!r6nj1_wVbYX8@KH#J)c_oMEBlMdA(53
ziVIw~Q+ry)BGVF^Ksigh19sLhUpgtJwSw6c0mRF$6^7;_HVZg*1ACEqs96!2Zl%PP
zy(<BJ)2w*}UsVDQd4LQU9NDjWQ`)A1Kb<b_D2TuPT2u8;_fQoDD!(fV96OEp{!|q3
zp!>eq8QGTXYXHO*!r3f-4Pk8wf?TX}0cO;Wq~bI6KZ@{dZHDXp9#+e>R;$#IummrQ
zJ?VQils~t%bnz9tBe7)EiNbPM|A&F?d#~0(qx>p(W?>y$tw#Sn5A7kU&Sc%;syrpD
ztt+jEFV+f0t3R;U>AG88L_gIScTsql2Jbg3u6ga5RP^se7c3j$tT5|HW+9wsJJ$D$
zK-`<}ol)stuM=a%G{l0kUXF@U_Ai5;%XGJGzo2%#oa9y;<nhoX+4*)Rje(j^Gzv<c
zOOF?5)yJP~@O$$s5hBg$INKB^pn(R@D8gu~&s$x8EDL8Fpkt>k0u96q+A&~*3~RW+
zSJji&RI0CL>`3^FZQ7gz%V|`k>HX6ai>~#LXwTy{la3IHa2-v4ZmYz2R<1b6#2}Y6
zNw33Y4Umjs%uKuC!bRp3ZD0$ELq}`7UEh~7$O>|@e)V5H`Rx!2@ln=d%N+-KYb={z
zQsIa+D#)jKb&}P>fN8rm>xEl!mm1?@wWX4IzDjr|4R*GiEqh6#Y7S-t!#wzhHn^wr
z`Re;aaABvlw{&g@{h@0y%ZBWvz(my|>_p>PB|STEy?#Q>lyFrk{M%_sV!FR_7e!;P
z#!el}O1HWb@LSR$oR-%{Co|ef)U6R-!N>E=av=;)>F{U7;PEZ8tb^1250lPuALT2Q
zexwF={qYqQIA^~WnT0M8<0*pa+HQG`m(rDbpY8BtcW4t))DG!anhCks5klI6*f4#X
zhx_aelyhy6DUrU$g|N!eybuDQO^e~uju^ojZ%HC6Bu&k!Q?S4+5E@X<zzcCRQizNT
zRAxX;l#<|GF?7!S=^BuRl_8QSS6l3r`Y#T;N8iw>MCf0Jxf8FE7VN23#R$4(gAL_|
z2`$FpAFYF4lDJ?!a&7y<ax3<qo8QwZ^9oGrIp%UHSpQLXwUp*EuOlCV(TB0nOJlFI
z@uu-<eF8Nhq)3%<AgWW`P9}EBe*6zo`KxDvbg!zFD%bGi9KKa!F3i22K|d(8R4;I;
zo<7}OjBA3Vw+$l~^-u1jAxa>AlYa><Q=-JcrkJSRd_!z~n=fRM*x<82+8;gjS;WC0
zU$mb#Ou2mLeaLPmShoMeat+5I7GsGnNLLJ)vKAJfJIbHR_^cA2bLO%Mf52`XHx0Gf
zt-UI+0f+5`tTvnMiNmU4257j*{LY{6qQs68m2K~j`YTxB$VKP6JNaf+67fm_!I3$h
zjdj(E)xO2a%V1mHMj^uJ2(A6fNEaIPmBBu&zJIyGGHrnnLi1(kRnmkU-}&Dm&K)!p
z8I<*8vE(AS9p&n943RS>vu7w&gNra|+JPf+`mzz<M<nV;>WIi(|3c2G-}r2F+YS8N
zo5us-tGEE^#4^^pHGmvrGUFef{Fbr~|2xKK2_HV<+;+zfiF>w1F~3Sc){>Kea~&I7
ziH{TY)ml5x6Z=6V{Kv{w41OSsTAOEo0|z(PWEcY9j1vFWQ~k?DFH4~4CH>Cz@(;cG
z7zvc*Zw_4h2nc9#<GE`D3tYUG?1wSC>n0d>?<axpY6r(x$B5j%@VlH&8513+mDz~B
z;=wI#99<abDwFMxT)f5wZ{)cEuZiMi%n2Uc20;I6-sBys`Nu|F&;EQ(g3X6AbUm)(
zud<2XyjmE;PjH6keSCY{z+W8v?`3lds<g`s0OBV3^SxUy_FqMnzk@QDn4kM&{(Iw}
z9Q@Z^I{-?(=XK_KAN-5V|Mw^He~%s7cW&DMqp=wsl(&J!@mKz{-~agF|4Y>Lm!kaV
z5*CMIe#vT|_3f)4RPpl*3x^gK7P6tZ%l~-8Cz<90;?jA~yUr68w7^9B-EJ+c1Tot0
zzyv^{&pzzS^pC+r+2e9|uR282tQd;sX>#+1+qS+xMy>kX8_JnCWc>g4*15~T=n0$x
zPQiB7D9>E@Pbv#!n|Duk(&l%sY+*{Hl#*1oFweh9)kdSxZz{!h8vtA!3-cgKCwC9J
zra99-Xuo^^4?pq<mjiR+RaSy@HRd8>tbaUp*tUs-5#{AKzPG=>?V=qsW=fNt3?ci~
z+$_(sxIJ?hH{su$>xla-2-EsvhZX)w*v<c8Qt+Y=I^*9D{Db(r81Gr`8voC9;V<X*
zpGzDJ%D{(s|EvxCr$j1)f2)r3cm>BTrT-P@KM!J{p1Ftlk2vOkq&8m*C1}s<0NO<V
z2g&HDXZ}As)wUlx3t@SD8%z98Lnw7eLn)Ai?>}PiTS@tMznM_d>e{}mL-2p;j}Ph@
zO3A;ASN~Vpp8t;Mja^u={zUZu(-3ND8cGXAzEb|3#{V;JzirbUpHP%lFaX!Z1^gdM
rC_(v|i2U8xzvb$GxGB+&cXsoYJW$NKM@Rh*>Q6>W@lENg55E5ozs!=E

literal 0
HcmV?d00001

diff --git a/@attachment/README.html b/@attachment/README.html
new file mode 100644
index 0000000000..af08e2610d
--- /dev/null
+++ b/@attachment/README.html
@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="这里追加图片">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/@attachment/README.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="这里追加图片">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/@attachment/README">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title> | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="zh-CN">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">
+</h1>
+
+<div class="post-meta">
+  
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <h1 id="这里追加图片"><a href="#这里追加图片" class="headerlink" title="这里追加图片"></a>这里追加图片</h1>
+      </div>
+      
+      
+      
+    </div>
+    
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%BF%99%E9%87%8C%E8%BF%BD%E5%8A%A0%E5%9B%BE%E7%89%87"><span class="nav-number">1.</span> <span class="nav-text">这里追加图片</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/@attachment/README.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/@attachment/README.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/@attachment/README.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '39e241b2d5b741b5b9fc1c8b9a23f702',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+
diff --git a/about/index.html b/about/index.html
new file mode 100644
index 0000000000..2d85f9dfc5
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,691 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ZH | EN  | JA 李旭光 前端开发工程师 10年手机: 15641181846邮箱: &amp;#x6c;&amp;#x69;&amp;#120;&amp;#117;&amp;#103;&amp;#x75;&amp;#97;&amp;#x6e;&amp;#x67;&amp;#x33;&amp;#49;&amp;#54;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#x78;&amp;#x6d;&amp;#97;&amp;#105;&amp;#x6c;&amp;#46;&amp;#99;&amp;#111;&amp;#x6d;Github: https:">
+<meta property="og:type" content="website">
+<meta property="og:title" content="我的履历">
+<meta property="og:url" content="https://blog.lifesli.com/about/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ZH | EN  | JA 李旭光 前端开发工程师 10年手机: 15641181846邮箱: &amp;#x6c;&amp;#x69;&amp;#120;&amp;#117;&amp;#103;&amp;#x75;&amp;#97;&amp;#x6e;&amp;#x67;&amp;#x33;&amp;#49;&amp;#54;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#x78;&amp;#x6d;&amp;#97;&amp;#105;&amp;#x6c;&amp;#46;&amp;#99;&amp;#111;&amp;#x6d;Github: https:">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2019-04-15T09:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/about/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>我的履历 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="zh-CN">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">我的履历
+</h1>
+
+<div class="post-meta">
+  
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <p><a href="">ZH</a> | <a href="../en/about">EN</a>  | <a href="../ja/about">JA</a></p>
+<h1 id="李旭光"><a href="#李旭光" class="headerlink" title="李旭光"></a>李旭光</h1><blockquote>
+<p>前端开发工程师 10年<br>手机: 15641181846<br>邮箱: <a href="mailto:&#x6c;&#x69;&#120;&#117;&#103;&#x75;&#97;&#x6e;&#x67;&#x33;&#49;&#54;&#x40;&#102;&#x6f;&#x78;&#x6d;&#97;&#105;&#x6c;&#46;&#99;&#111;&#x6d;">&#x6c;&#x69;&#120;&#117;&#103;&#x75;&#97;&#x6e;&#x67;&#x33;&#49;&#54;&#x40;&#102;&#x6f;&#x78;&#x6d;&#97;&#105;&#x6c;&#46;&#99;&#111;&#x6d;</a><br>Github: <a target="_blank" rel="noopener" href="https://github.com/lixuguang">https://github.com/lixuguang</a><br>技术博客: <a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io</a><br>住址: 大连沙河口区黄河路852号</p>
+</blockquote>
+<h2 id="技能掌握"><a href="#技能掌握" class="headerlink" title="技能掌握"></a>技能掌握</h2><ul>
+<li><p>熟练使用Html/Css/Javascript/Jq，响应式开发，移动端Web开发</p>
+</li>
+<li><p>熟练使用VUE/vuex/axios/vue-router/element-ui等vue全家桶完成项目/组件开发</p>
+</li>
+<li><p>熟练进行前后端分离开发，前后端接口联调，基于git的版本管理，CICD开发等。</p>
+</li>
+<li><p>熟练使用chrome-dev对项目进行前端代码调试/调优</p>
+</li>
+<li><p>掌握Nodejs/Electron/React/less/sass/bootstrap等开发</p>
+</li>
+<li><p>掌握webpack基本配置，npm包管理等前端工程化开发方式</p>
+</li>
+<li><p>掌握前端架构方法，对前端规范性要求非常熟悉，能够根据产品/项目需求给出最优技术选型方案。</p>
+</li>
+<li><p>熟练使用svn/git等代码版本管理工具及gitflow管理方式进行代码管理</p>
+</li>
+<li><p>10年前端开发经验，参与过200+的项目开发。</p>
+</li>
+<li><p>善于团队协作，自我驱动，持续学习，热爱工作，责任心强。</p>
+</li>
+</ul>
+<h2 id="工作经历"><a href="#工作经历" class="headerlink" title="工作经历"></a>工作经历</h2><blockquote>
+<p>埃森哲信息技术（大连）有限公司：信息技术，服务咨询公司<br>2020.6-至今<br>AM Level8 团队规模：50人 公司规模：20000人<br>主要职责：</p>
+<ul>
+<li>技术向：编写代码/审核代码/程序设计</li>
+<li>管理向：任务分解/任务安排/工作汇报/人才培养</li>
+</ul>
+</blockquote>
+<hr>
+<blockquote>
+<p>华宇（大连）信息服务有限公司：主要面向政府、公检法机关及互联网市场大客户。<br>2014.5-2020.6<br>资深前端开发工程师 团队规模：30人 公司规模：600人<br>主要职责: </p>
+<ul>
+<li>编写代码<ul>
+<li>完成正常项目任务<ul>
+<li>累计完成项目超过150个</li>
+<li>参与项目类型包括pcWeb、padWeb、手机Web、微信Web、触摸屏、指挥控制大屏</li>
+<li>业务类型涉及政府、公检法各个领域</li>
+<li>使用技术包含HTML4/5、CSS2/3、ES5/6、bootstrap、framework7、Angular、Vue以及Artery框架等</li>
+</ul>
+</li>
+<li>极短时间内完成任务<ul>
+<li>竞标项目如：<ul>
+<li>5天60个页面带领一个初级前端和一个中级前端完成。</li>
+<li>3天完成一个问卷调查包含各种交互的特效。</li>
+<li>封闭1星期同3位开发共同完成canvas画板功能，支持检察官记录员实现档案卷宗实时编辑。</li>
+</ul>
+</li>
+<li>演示项目如：<ul>
+<li>1个月带领一个初级前端一个初级开发完成整个系统包含业务逻辑除后台的所有功能，实现超高保真原型。</li>
+</ul>
+</li>
+<li>救火任务如：<ul>
+<li>上线前2天解决其他人无法解决的问题，此类情况居多。</li>
+<li>项目工期提前，顶着压力加班完成任务。如1天13个页面。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>新技术框架研究应用<ul>
+<li>前后端分离技术<ul>
+<li>组织前端团队学习前后端分离思想，研究前后端分离所要学习的新技能知识，面向对象的思想以及面向接口的思想等。</li>
+</ul>
+</li>
+<li>前端自动化构建、自动检测<ul>
+<li>组织前端团队学习前端自动化构建如：npm包管理工具、各种cli工具使用、eslint、stylint等自动化检查工具，以及webpack和gulp等打包工具使用。</li>
+</ul>
+</li>
+<li>MVVM框架等新技术<ul>
+<li>组织学习研究Angular2、Vue2等数据驱动的MVVM框架，并在实际项目中使用VUE框架。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>组织构建基础服务<ul>
+<li>前端通用组件库<ul>
+<li>Vue组件库</li>
+</ul>
+</li>
+<li>前端题库</li>
+<li>…</li>
+</ul>
+</li>
+<li>制定规范<ul>
+<li>前端编码规范<ul>
+<li>包括HTML规范、CSS规范、JS规范、Vue规范、通用规范等。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>团队协作制度<ul>
+<li>包括代码管理制度、团队协作规范制度。</li>
+</ul>
+</li>
+<li>代码审查规范<ul>
+<li>人工审核</li>
+<li>自动化检测工具审核</li>
+</ul>
+</li>
+<li>知识考核规范<ul>
+<li>前端知识点地图</li>
+<li>前端技能栈思维导图</li>
+<li>前端考试平台</li>
+</ul>
+</li>
+<li>团队建设<ul>
+<li>面试官<ul>
+<li>从原来的2人前端团队发展至43人前端团队，6年流失率仅为6人。</li>
+</ul>
+</li>
+<li>组织师傅帮带<ul>
+<li>组织先进带后进，高级带初级，建立前端梯队，组织共同学习。</li>
+</ul>
+</li>
+<li>前端兴趣小组<ul>
+<li>每周二组织前端兴趣小组，了解当下最新的前端知识，组织分享活动。</li>
+</ul>
+</li>
+<li>前端培训<ul>
+<li>不定期组织学习公司将要使用的新技术以及开发过程中遇到的问题解决方案</li>
+<li>定期组织基础知识、中级知识、高级知识、实践应用四个层面的培训。</li>
+</ul>
+</li>
+<li>人才培养<ul>
+<li>人员考核<ul>
+<li>根据建立的知识点地图建立考点地图，建立试卷进行考评，关系到员工晋升。</li>
+</ul>
+</li>
+<li>建立人才档案，定期谈话<ul>
+<li>根据不同人的特点建立对应的人才档案，通过季度谈话的方式了解员工最新动态，根据员工特点设立学习方向和目标，引导员工成长。</li>
+</ul>
+</li>
+<li>参与人才晋升考官<ul>
+<li>参与员工晋升考核，给出努力方向。</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</blockquote>
+<hr>
+<blockquote>
+<p>大连新桥科技发展有限公司：面向教育系统提供整体服务。<br>2013.1-2014.1<br>用户体验团队负责人 团队规模：6人 公司规模：50人<br>主要职责：</p>
+<ul>
+<li>接访客户：去客户现场或客户到工作现场，负责接待客户，了解客户需求。</li>
+<li>设计、编写代码：根据客户或领导需求完成需求分析、视觉设计、代码编写等任务。涉及pcWeb、padWeb、手机Web等。</li>
+<li>团队管理：根据任务量分配工作，协调团队资源。</li>
+</ul>
+</blockquote>
+<hr>
+<blockquote>
+<p>百维数元信息科技（北京）有限公司：一斑网在线调研平台。<br>2011.9-2012.12<br>开发工程师 团队规模：3人 公司规模：8人<br>主要职责：</p>
+<ul>
+<li>设计、前后台代码编写、运营、客服：初创公司，开发运营团队3人，主要负责设计工作、前端开发、部分后端开发、运营、客服等工作。</li>
+</ul>
+</blockquote>
+<h2 id="教育经历"><a href="#教育经历" class="headerlink" title="教育经历"></a>教育经历</h2><blockquote>
+<p>大连外国语大学<br>2008.9-2012.6<br>信息系统与信息管理（日英双语强化） 本科 计算机部部长 全优</p>
+</blockquote>
+<h2 id="项目经历"><a href="#项目经历" class="headerlink" title="项目经历"></a>项目经历</h2><h3 id="近期项目经历"><a href="#近期项目经历" class="headerlink" title="近期项目经历"></a>近期项目经历</h3><ul>
+<li>项目名：みんなのぎんこう「ZERO」</li>
+<li>项目介绍：移动手机银行</li>
+<li>项目规模：3年 120人团队</li>
+<li>项目担当：银行愿望账户开发，测试，审核代码</li>
+<li>技术应用：Angular系列</li>
+</ul>
+<hr>
+<ul>
+<li>项目名：TMNF</li>
+<li>项目介绍：保险业务系统</li>
+<li>项目规模：1年 100人团队</li>
+<li>项目担当：保单，审批业务，任务分配，代码审核</li>
+<li>技术应用：Angular系列</li>
+</ul>
+<h3 id="过往项目经历"><a href="#过往项目经历" class="headerlink" title="过往项目经历"></a>过往项目经历</h3><ul>
+<li>ERP系统<ul>
+<li>法院执行线索分析系统v2.1-v2.2</li>
+<li>数据质量检查系统v2.0-v2.3</li>
+<li>法官办案辅助系统</li>
+<li>量刑规范化服务系统</li>
+<li>裁判文书上网直报系统V2.0</li>
+<li>律师阅卷管理系统</li>
+<li>… 100+</li>
+</ul>
+</li>
+<li>CMS网站<ul>
+<li>诉讼服务网系列 50+</li>
+<li>法院官网 20+</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>pad、手机、触控屏系统<ul>
+<li>信息引导侦查系列产品</li>
+<li>远程视频会见系统2.1</li>
+<li>领导驾驶舱</li>
+<li>移动办案APP</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>普通网站<ul>
+<li>企业官网、政府官网 10+</li>
+</ul>
+</li>
+</ul>
+<h4 id="涉及技术"><a href="#涉及技术" class="headerlink" title="涉及技术"></a>涉及技术</h4><p><strong>语言：</strong><br>HTML4/5、CSS2/3、ES5/6、JSP…<br><strong>框架：</strong><br>JQ、bootstarp、mui、framework7、VUE…<br><strong>理论：</strong><br>前后端分离(面向对象OOB + 异步请求ajax + 面向接口api)</p>
+<h2 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h2><p>从2011年算起我已经从事前端开发10年、设计2年（重叠）、团队管理6年（重叠），参与各类大小项目300+，涉及各个业务领域包括银行、保险、公检法政、教育、调研，覆盖目前主流的前端技术（游戏向不包含）。</p>
+<p>基础能力扎实，能够解决绝大多数普通问题和部分棘手问题，从小在军营成长让我对团队纪律与制度有着深刻的认识，知道规范与制度的重要性，这为我建立高效优质的团队提供了良好土壤。</p>
+<p>谦逊使我可以与团队中以及团队之间有着良好的沟通，好学让我不断逃出舒适区，让自己不断的学习进步。</p>
+<p>有着个人荣誉感与集体荣誉感，让我对工作和团队认真负责。</p>
+<p>抗压能力强，让领导放心把最紧急最重要的工作交给我做，加班也毫无怨言。</p>
+<p>工作久了让我总结了一些工作中常见的问题，我会讲这些分享给他人，让大家一同进步，将问题扼杀在摇篮里。</p>
+<p>愿意组织活动参加活动，喜欢阅读，跑步，骑行，篮球。</p>
+
+      </div>
+      
+      
+      
+    </div>
+    
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9D%8E%E6%97%AD%E5%85%89"><span class="nav-number">1.</span> <span class="nav-text">李旭光</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E8%83%BD%E6%8E%8C%E6%8F%A1"><span class="nav-number">1.1.</span> <span class="nav-text">技能掌握</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B7%A5%E4%BD%9C%E7%BB%8F%E5%8E%86"><span class="nav-number">1.2.</span> <span class="nav-text">工作经历</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%99%E8%82%B2%E7%BB%8F%E5%8E%86"><span class="nav-number">1.3.</span> <span class="nav-text">教育经历</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86"><span class="nav-number">1.4.</span> <span class="nav-text">项目经历</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%91%E6%9C%9F%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86"><span class="nav-number">1.4.1.</span> <span class="nav-text">近期项目经历</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%87%E5%BE%80%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86"><span class="nav-number">1.4.2.</span> <span class="nav-text">过往项目经历</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B6%89%E5%8F%8A%E6%8A%80%E6%9C%AF"><span class="nav-number">1.4.2.1.</span> <span class="nav-text">涉及技术</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.5.</span> <span class="nav-text">自我介绍</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/about/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/about/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/about/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3be7aa98d992907175cbd79c194399f2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2013/06/index.html b/archives/2013/06/index.html
new file mode 100644
index 0000000000..fee75b7cbe
--- /dev/null
+++ b/archives/2013/06/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2013/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2013/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2013/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2013/index.html b/archives/2013/index.html
new file mode 100644
index 0000000000..c6d1a527c3
--- /dev/null
+++ b/archives/2013/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2013/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2013/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2013/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2015/12/index.html b/archives/2015/12/index.html
new file mode 100644
index 0000000000..ae9e22c7e5
--- /dev/null
+++ b/archives/2015/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2015/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2015/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2015/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2015/index.html b/archives/2015/index.html
new file mode 100644
index 0000000000..2687f76cb9
--- /dev/null
+++ b/archives/2015/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2015/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2015/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2015/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2016/10/index.html b/archives/2016/10/index.html
new file mode 100644
index 0000000000..769971296a
--- /dev/null
+++ b/archives/2016/10/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2016/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2016/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2016/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2016/index.html b/archives/2016/index.html
new file mode 100644
index 0000000000..4e0b8b4191
--- /dev/null
+++ b/archives/2016/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2016/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2016/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2016/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2017/08/index.html b/archives/2017/08/index.html
new file mode 100644
index 0000000000..80a499e9c4
--- /dev/null
+++ b/archives/2017/08/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2017/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2017/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2017/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2017/10/index.html b/archives/2017/10/index.html
new file mode 100644
index 0000000000..f832191da4
--- /dev/null
+++ b/archives/2017/10/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2017/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2017/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2017/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2017/12/index.html b/archives/2017/12/index.html
new file mode 100644
index 0000000000..78be23b829
--- /dev/null
+++ b/archives/2017/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2017/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2017/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2017/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2017/index.html b/archives/2017/index.html
new file mode 100644
index 0000000000..532548890e
--- /dev/null
+++ b/archives/2017/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2017/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2017/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2017/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2019/12/index.html b/archives/2019/12/index.html
new file mode 100644
index 0000000000..d63dddaa3c
--- /dev/null
+++ b/archives/2019/12/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2019/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2019/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2019/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2019/index.html b/archives/2019/index.html
new file mode 100644
index 0000000000..da0ccf1555
--- /dev/null
+++ b/archives/2019/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2019/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/01/index.html b/archives/2020/01/index.html
new file mode 100644
index 0000000000..aa63917caa
--- /dev/null
+++ b/archives/2020/01/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/2020/01/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/archives/2020/01/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/01/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/01/page/2/index.html b/archives/2020/01/page/2/index.html
new file mode 100644
index 0000000000..97cd2aeca1
--- /dev/null
+++ b/archives/2020/01/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/01/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/01/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/01/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/01/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2020/01/page/3/">3</a><a class="page-number" href="/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/archives/2020/01/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/01/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/01/page/3/index.html b/archives/2020/01/page/3/index.html
new file mode 100644
index 0000000000..3e23cb756a
--- /dev/null
+++ b/archives/2020/01/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/01/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/01/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/01/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/01/">1</a><a class="page-number" href="/archives/2020/01/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/archives/2020/01/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/01/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/01/page/4/index.html b/archives/2020/01/page/4/index.html
new file mode 100644
index 0000000000..0d87e4159b
--- /dev/null
+++ b/archives/2020/01/page/4/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/01/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/01/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/01/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/01/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/01/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/01/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/02/index.html b/archives/2020/02/index.html
new file mode 100644
index 0000000000..f8bb9fce30
--- /dev/null
+++ b/archives/2020/02/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/02/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/02/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/02/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/02/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/02/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/03/index.html b/archives/2020/03/index.html
new file mode 100644
index 0000000000..8a1b0a422d
--- /dev/null
+++ b/archives/2020/03/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/2020/03/page/2/">2</a><a class="extend next" rel="next" href="/archives/2020/03/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/03/page/2/index.html b/archives/2020/03/page/2/index.html
new file mode 100644
index 0000000000..b6b48879a0
--- /dev/null
+++ b/archives/2020/03/page/2/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/03/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/03/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/03/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/03/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/03/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/04/index.html b/archives/2020/04/index.html
new file mode 100644
index 0000000000..78c3d1a66b
--- /dev/null
+++ b/archives/2020/04/index.html
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/04/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/04/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/04/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/04/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/04/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/05/index.html b/archives/2020/05/index.html
new file mode 100644
index 0000000000..63401b10b5
--- /dev/null
+++ b/archives/2020/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/07/index.html b/archives/2020/07/index.html
new file mode 100644
index 0000000000..29b157b1ff
--- /dev/null
+++ b/archives/2020/07/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/07/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/07/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/07/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/07/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/07/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/08/index.html b/archives/2020/08/index.html
new file mode 100644
index 0000000000..228bf6cefe
--- /dev/null
+++ b/archives/2020/08/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/11/index.html b/archives/2020/11/index.html
new file mode 100644
index 0000000000..4ea0c1d3da
--- /dev/null
+++ b/archives/2020/11/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/index.html b/archives/2020/index.html
new file mode 100644
index 0000000000..e8a2ed070c
--- /dev/null
+++ b/archives/2020/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/2020/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/2/index.html b/archives/2020/page/2/index.html
new file mode 100644
index 0000000000..ef85ca6881
--- /dev/null
+++ b/archives/2020/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2020/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/3/index.html b/archives/2020/page/3/index.html
new file mode 100644
index 0000000000..7233c660d8
--- /dev/null
+++ b/archives/2020/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><a class="page-number" href="/archives/2020/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/2020/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/4/index.html b/archives/2020/page/4/index.html
new file mode 100644
index 0000000000..1c54563e4f
--- /dev/null
+++ b/archives/2020/page/4/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/archives/2020/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/5/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/5/index.html b/archives/2020/page/5/index.html
new file mode 100644
index 0000000000..1f69326a75
--- /dev/null
+++ b/archives/2020/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/archives/2020/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/6/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/6/index.html b/archives/2020/page/6/index.html
new file mode 100644
index 0000000000..3f2ec49045
--- /dev/null
+++ b/archives/2020/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/5/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/archives/2020/page/7/">7</a><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/7/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/7/index.html b/archives/2020/page/7/index.html
new file mode 100644
index 0000000000..dfb6b72b76
--- /dev/null
+++ b/archives/2020/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/6/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/archives/2020/page/8/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2020/page/8/index.html b/archives/2020/page/8/index.html
new file mode 100644
index 0000000000..49df4672fb
--- /dev/null
+++ b/archives/2020/page/8/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2020/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2020/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2020/page/7/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2020/page/7/">7</a><span class="page-number current">8</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2020/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2021/05/index.html b/archives/2021/05/index.html
new file mode 100644
index 0000000000..e4dfc7112e
--- /dev/null
+++ b/archives/2021/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2021/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2021/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2021/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2021/index.html b/archives/2021/index.html
new file mode 100644
index 0000000000..1a699400f6
--- /dev/null
+++ b/archives/2021/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2021/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2021/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2021/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/03/index.html b/archives/2022/03/index.html
new file mode 100644
index 0000000000..22377903e7
--- /dev/null
+++ b/archives/2022/03/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/06/index.html b/archives/2022/06/index.html
new file mode 100644
index 0000000000..1e45e67891
--- /dev/null
+++ b/archives/2022/06/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/2022/06/page/2/">2</a><a class="extend next" rel="next" href="/archives/2022/06/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/06/page/2/index.html b/archives/2022/06/page/2/index.html
new file mode 100644
index 0000000000..e240612563
--- /dev/null
+++ b/archives/2022/06/page/2/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/06/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/06/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2022/06/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2022/06/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/06/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/08/index.html b/archives/2022/08/index.html
new file mode 100644
index 0000000000..725bd82b2f
--- /dev/null
+++ b/archives/2022/08/index.html
@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/index.html b/archives/2022/index.html
new file mode 100644
index 0000000000..2d123ba24c
--- /dev/null
+++ b/archives/2022/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/2022/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/page/2/index.html b/archives/2022/page/2/index.html
new file mode 100644
index 0000000000..fd3b820c70
--- /dev/null
+++ b/archives/2022/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2022/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2022/page/3/">3</a><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/page/3/index.html b/archives/2022/page/3/index.html
new file mode 100644
index 0000000000..6438d367c7
--- /dev/null
+++ b/archives/2022/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2022/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2022/">1</a><a class="page-number" href="/archives/2022/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/archives/2022/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2022/page/4/index.html b/archives/2022/page/4/index.html
new file mode 100644
index 0000000000..7169abd504
--- /dev/null
+++ b/archives/2022/page/4/index.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2022/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2022/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/2022/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/2022/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/2022/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2022/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2023/09/index.html b/archives/2023/09/index.html
new file mode 100644
index 0000000000..920d62ad8e
--- /dev/null
+++ b/archives/2023/09/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2023/09/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2023/09/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">未命名</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2023/09/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/09/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/09/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/2023/index.html b/archives/2023/index.html
new file mode 100644
index 0000000000..9a3b22ad45
--- /dev/null
+++ b/archives/2023/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/2023/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/2023/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">未命名</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/2023/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/index.html b/archives/index.html
new file mode 100644
index 0000000000..9208db775b
--- /dev/null
+++ b/archives/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">未命名</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/archives/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/10/index.html b/archives/page/10/index.html
new file mode 100644
index 0000000000..ecf11d8843
--- /dev/null
+++ b/archives/page/10/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/9/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/archives/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/11/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/11/index.html b/archives/page/11/index.html
new file mode 100644
index 0000000000..31117a6eee
--- /dev/null
+++ b/archives/page/11/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/10/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/archives/page/12/">12</a><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/12/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/12/index.html b/archives/page/12/index.html
new file mode 100644
index 0000000000..7a6734eb66
--- /dev/null
+++ b/archives/page/12/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/11/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/13/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/13/index.html b/archives/page/13/index.html
new file mode 100644
index 0000000000..1993a48566
--- /dev/null
+++ b/archives/page/13/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/12/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/12/">12</a><span class="page-number current">13</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/2/index.html b/archives/page/2/index.html
new file mode 100644
index 0000000000..326792da56
--- /dev/null
+++ b/archives/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/3/index.html b/archives/page/3/index.html
new file mode 100644
index 0000000000..8971d05125
--- /dev/null
+++ b/archives/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><a class="page-number" href="/archives/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/archives/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/4/index.html b/archives/page/4/index.html
new file mode 100644
index 0000000000..bef8036a1b
--- /dev/null
+++ b/archives/page/4/index.html
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/archives/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/5/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/5/index.html b/archives/page/5/index.html
new file mode 100644
index 0000000000..bacae97724
--- /dev/null
+++ b/archives/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/archives/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/6/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/6/index.html b/archives/page/6/index.html
new file mode 100644
index 0000000000..d22f850157
--- /dev/null
+++ b/archives/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/5/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/archives/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/7/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/7/index.html b/archives/page/7/index.html
new file mode 100644
index 0000000000..f0edeca5f7
--- /dev/null
+++ b/archives/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/6/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/archives/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/8/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/8/index.html b/archives/page/8/index.html
new file mode 100644
index 0000000000..786464ab54
--- /dev/null
+++ b/archives/page/8/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/7/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/archives/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/9/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/archives/page/9/index.html b/archives/page/9/index.html
new file mode 100644
index 0000000000..4c7dac5733
--- /dev/null
+++ b/archives/page/9/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/archives/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/archives/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>归档 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">很好! 目前共计 128 篇日志。 继续努力。</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/archives/page/8/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/archives/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/archives/page/13/">13</a><a class="extend next" rel="next" href="/archives/page/10/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/archives/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Database/Postgresql/index.html b/categories/Database/Postgresql/index.html
new file mode 100644
index 0000000000..b0de3a3875
--- /dev/null
+++ b/categories/Database/Postgresql/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Database/Postgresql/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Database/Postgresql/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Postgresql | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Postgresql
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Database/Postgresql/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/Postgresql/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/Postgresql/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Database/index.html b/categories/Database/index.html
new file mode 100644
index 0000000000..7921b3ace9
--- /dev/null
+++ b/categories/Database/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Database/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Database/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Database | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Database
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Database/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Docker/index.html b/categories/Docker/index.html
new file mode 100644
index 0000000000..c6951529e6
--- /dev/null
+++ b/categories/Docker/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Infra/Docker/index.html b/categories/Infra/Docker/index.html
new file mode 100644
index 0000000000..5902a30334
--- /dev/null
+++ b/categories/Infra/Docker/index.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infra/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infra/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infra/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..40ed418ee1
--- /dev/null
+++ "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html" "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
new file mode 100644
index 0000000000..2ae617c435
--- /dev/null
+++ "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Squid | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Squid
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html" "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..0ab1bb623d
--- /dev/null
+++ "b/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Infra/index.html b/categories/Infra/index.html
new file mode 100644
index 0000000000..48995e2aa5
--- /dev/null
+++ b/categories/Infra/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infra/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infra/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Infra | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infra
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infra/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Infrastructure/index.html b/categories/Infrastructure/index.html
new file mode 100644
index 0000000000..885ef10465
--- /dev/null
+++ b/categories/Infrastructure/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Infrastructure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Infrastructure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Infrastructure | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infrastructure
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Infrastructure/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infrastructure/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infrastructure/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Linux/Oracle/Docker/index.html b/categories/Linux/Oracle/Docker/index.html
new file mode 100644
index 0000000000..0ca32b695f
--- /dev/null
+++ b/categories/Linux/Oracle/Docker/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Linux/Oracle/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Linux/Oracle/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Linux/Oracle/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Linux/Oracle/index.html b/categories/Linux/Oracle/index.html
new file mode 100644
index 0000000000..4e2ef43d35
--- /dev/null
+++ b/categories/Linux/Oracle/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Linux/Oracle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Linux/Oracle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Oracle | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Oracle
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Linux/Oracle/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Linux/RPM/index.html b/categories/Linux/RPM/index.html
new file mode 100644
index 0000000000..78fcfcc2f7
--- /dev/null
+++ b/categories/Linux/RPM/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Linux/RPM/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Linux/RPM/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: RPM | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">RPM
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Linux/RPM/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/RPM/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/RPM/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/Linux/index.html b/categories/Linux/index.html
new file mode 100644
index 0000000000..2ecaf4c517
--- /dev/null
+++ b/categories/Linux/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Linux
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/NodeJS/Npm/index.html b/categories/NodeJS/Npm/index.html
new file mode 100644
index 0000000000..04c5995855
--- /dev/null
+++ b/categories/NodeJS/Npm/index.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/NodeJS/Npm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/NodeJS/Npm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Npm | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Npm
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/NodeJS/Npm/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/Npm/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/Npm/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/NodeJS/index.html b/categories/NodeJS/index.html
new file mode 100644
index 0000000000..4598a26118
--- /dev/null
+++ b/categories/NodeJS/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/NodeJS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/NodeJS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: NodeJS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">NodeJS
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/NodeJS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/OracleLinux/index.html b/categories/OracleLinux/index.html
new file mode 100644
index 0000000000..2cd97eb82e
--- /dev/null
+++ b/categories/OracleLinux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/OracleLinux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/OracleLinux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: OracleLinux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">OracleLinux
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/OracleLinux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/OracleLinux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/OracleLinux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..00373d3e44
--- /dev/null
+++ "b/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/Web\346\234\215\345\212\241\345\231\250/index.html" "b/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..8b1154fb4d
--- /dev/null
+++ "b/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/index.html b/categories/index.html
new file mode 100644
index 0000000000..4b3bc7ecc6
--- /dev/null
+++ b/categories/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="分类">
+<meta property="og:url" content="https://blog.lifesli.com/categories/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-08-29T09:40:17.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:03.348Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="zh-CN">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">分类
+</h1>
+
+<div class="post-meta">
+  
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="category-all-page">
+            <div class="category-all-title">
+              目前共计 54 个分类
+            </div>
+            <div class="category-all">
+              <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/Postgresql/">Postgresql</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Docker/">Docker</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/">Infra</a><span class="category-list-count">9</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Docker/">Docker</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">Squid</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infrastructure/">Infrastructure</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/">Oracle</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/Docker/">Docker</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/RPM/">RPM</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/">NodeJS</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/Npm/">Npm</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/OracleLinux/">OracleLinux</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/linux/">linux</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/linux/systemctl/">systemctl</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">前端工程化</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">Webpack</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前端开发规范</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">前端技术</a><span class="category-list-count">43</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">CSS3</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">前端常见知识点整理</a><span class="category-list-count">23</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">前端问题</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">微信</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">计算机通识</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">React</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">Vue</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">后端开发</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">Go语言</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">大前端</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">全栈</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">客户端技术</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">移动开发</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">效率工具</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">Labrary</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">VSCode插件</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">杂七杂八</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">博客技巧</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9E%B6%E6%9E%84/">架构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">源码原理</a><span class="category-list-count">14</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">自己动手实现系列</a><span class="category-list-count">13</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">自我提升</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">人生思考</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">杂记随感</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">虚拟化</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">Docker Compose</a><span class="category-list-count">1</span></li></ul></li></ul>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/linux/index.html b/categories/linux/index.html
new file mode 100644
index 0000000000..5a364534b8
--- /dev/null
+++ b/categories/linux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">linux
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/categories/linux/systemctl/index.html b/categories/linux/systemctl/index.html
new file mode 100644
index 0000000000..4747bf075a
--- /dev/null
+++ b/categories/linux/systemctl/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/linux/systemctl/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/linux/systemctl/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: systemctl | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">systemctl
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/linux/systemctl/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/systemctl/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/systemctl/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html" "b/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
new file mode 100644
index 0000000000..f3628c0451
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Webpack | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Webpack
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" "b/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
new file mode 100644
index 0000000000..ad992271a5
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端工程化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端工程化
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..f0d32b87c5
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端开发规范
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
new file mode 100644
index 0000000000..b2868e91fd
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: CSS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
new file mode 100644
index 0000000000..3c555274b1
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: CSS3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS3
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..5fba807512
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
new file mode 100644
index 0000000000..6d7d8634b6
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="page-number current">2</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
new file mode 100644
index 0000000000..069c44e164
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
new file mode 100644
index 0000000000..14fad8676f
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
new file mode 100644
index 0000000000..a2de2eeb2a
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><span class="page-number current">5</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
new file mode 100644
index 0000000000..5c93791844
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 兼容性 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">兼容性
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
new file mode 100644
index 0000000000..0323534f14
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..47ee12456f
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><span class="page-number current">2</span><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
new file mode 100644
index 0000000000..832092428c
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><a class="page-number" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><span class="page-number current">3</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
new file mode 100644
index 0000000000..7118e3477e
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端问题 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端问题
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
new file mode 100644
index 0000000000..178d775921
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 微信 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">微信
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html" "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
new file mode 100644
index 0000000000..938f49e0cf
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 计算机通识 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">计算机通识
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html" "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
new file mode 100644
index 0000000000..990d7488e3
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: React | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">React
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html" "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
new file mode 100644
index 0000000000..5c48613088
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Vue | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Vue
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html" "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
new file mode 100644
index 0000000000..a9fd5401d9
--- /dev/null
+++ "b/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 前端框架 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端框架
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html" "b/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
new file mode 100644
index 0000000000..112313cbbe
--- /dev/null
+++ "b/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Go语言 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Go语言
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html" "b/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..8d027c283a
--- /dev/null
+++ "b/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 后端开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">后端开发
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\244\247\345\211\215\347\253\257/index.html" "b/categories/\345\244\247\345\211\215\347\253\257/index.html"
new file mode 100644
index 0000000000..9a092233d0
--- /dev/null
+++ "b/categories/\345\244\247\345\211\215\347\253\257/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 大前端 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">大前端
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html" "b/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
new file mode 100644
index 0000000000..ee3da14735
--- /dev/null
+++ "b/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 全栈 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">全栈
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html" "b/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..fc8f340554
--- /dev/null
+++ "b/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 客户端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">客户端技术
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html" "b/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..f6e9c77b0d
--- /dev/null
+++ "b/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 移动开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">移动开发
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html" "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
new file mode 100644
index 0000000000..289ddf17ea
--- /dev/null
+++ "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Labrary | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Labrary
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html" "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..f00c713145
--- /dev/null
+++ "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: VSCode插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">VSCode插件
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html" "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
new file mode 100644
index 0000000000..08a76b7cb2
--- /dev/null
+++ "b/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 效率工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">效率工具
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html" "b/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
new file mode 100644
index 0000000000..94def75d8a
--- /dev/null
+++ "b/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 杂七杂八 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂七杂八
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html" "b/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
new file mode 100644
index 0000000000..6de977c905
--- /dev/null
+++ "b/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 博客技巧 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">博客技巧
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\236\266\346\236\204/index.html" "b/categories/\346\236\266\346\236\204/index.html"
new file mode 100644
index 0000000000..a0f4f761f5
--- /dev/null
+++ "b/categories/\346\236\266\346\236\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%9E%B6%E6%9E%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%9E%B6%E6%9E%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 架构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">架构
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html" "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
new file mode 100644
index 0000000000..8059cd183d
--- /dev/null
+++ "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">2</a><a class="extend next" rel="next" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html" "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..2f6600ef19
--- /dev/null
+++ "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html" "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
new file mode 100644
index 0000000000..f0d0ae6d45
--- /dev/null
+++ "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">2</a><a class="extend next" rel="next" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html" "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
new file mode 100644
index 0000000000..e950f2c3b1
--- /dev/null
+++ "b/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html" "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
new file mode 100644
index 0000000000..ae475162fb
--- /dev/null
+++ "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 自我提升 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自我提升
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html" "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
new file mode 100644
index 0000000000..ffd04fa93b
--- /dev/null
+++ "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 人生思考 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">人生思考
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html" "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
new file mode 100644
index 0000000000..974fb8aa0a
--- /dev/null
+++ "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 杂记随感 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂记随感
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html" "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
new file mode 100644
index 0000000000..7fa6eb94f4
--- /dev/null
+++ "b/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">读书笔记
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html" "b/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
new file mode 100644
index 0000000000..65bd02272d
--- /dev/null
+++ "b/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: Docker Compose | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker Compose
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/categories/\350\231\232\346\213\237\345\214\226/index.html" "b/categories/\350\231\232\346\213\237\345\214\226/index.html"
new file mode 100644
index 0000000000..7b1ac14a7c
--- /dev/null
+++ "b/categories/\350\231\232\346\213\237\345\214\226/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>分类: 虚拟化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">虚拟化
+          <small>分类</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000000..ff4757a341
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,2853 @@
+:root {
+  --body-bg-color: #eee;
+  --content-bg-color: #fff;
+  --card-bg-color: #f5f5f5;
+  --text-color: #555;
+  --blockquote-color: #666;
+  --link-color: #555;
+  --link-hover-color: #222;
+  --brand-color: #fff;
+  --brand-hover-color: #fff;
+  --table-row-odd-bg-color: #f9f9f9;
+  --table-row-hover-bg-color: #f5f5f5;
+  --menu-item-bg-color: #f5f5f5;
+  --btn-default-bg: #fff;
+  --btn-default-color: #555;
+  --btn-default-border-color: #555;
+  --btn-default-hover-bg: #222;
+  --btn-default-hover-color: #fff;
+  --btn-default-hover-border-color: #222;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg-color: #282828;
+    --content-bg-color: #333;
+    --card-bg-color: #555;
+    --text-color: #ccc;
+    --blockquote-color: #bbb;
+    --link-color: #ccc;
+    --link-hover-color: #eee;
+    --brand-color: #ddd;
+    --brand-hover-color: #ddd;
+    --table-row-odd-bg-color: #282828;
+    --table-row-hover-bg-color: #363636;
+    --menu-item-bg-color: #555;
+    --btn-default-bg: #222;
+    --btn-default-color: #ccc;
+    --btn-default-border-color: #555;
+    --btn-default-hover-bg: #666;
+    --btn-default-hover-color: #ccc;
+    --btn-default-hover-border-color: #666;
+  }
+  img {
+    opacity: 0.75;
+  }
+  img:hover {
+    opacity: 0.9;
+  }
+}
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+body {
+  margin: 0;
+}
+main {
+  display: block;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+a {
+  background: transparent;
+}
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+img {
+  border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+button,
+input {
+/* 1 */
+  overflow: visible;
+}
+button,
+select {
+/* 1 */
+  text-transform: none;
+}
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+progress {
+  vertical-align: baseline;
+}
+textarea {
+  overflow: auto;
+}
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+[type='search'] {
+  outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+}
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
+}
+details {
+  display: block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none;
+}
+::selection {
+  background: #262a30;
+  color: #eee;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  background: var(--body-bg-color);
+  color: var(--text-color);
+  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 0.9em;
+  line-height: 2;
+}
+@media (max-width: 991px) {
+  body {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-weight: bold;
+  line-height: 1.5;
+  margin: 20px 0 15px;
+}
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.375em;
+}
+h3 {
+  font-size: 1.25em;
+}
+h4 {
+  font-size: 1.125em;
+}
+h5 {
+  font-size: 1em;
+}
+h6 {
+  font-size: 0.875em;
+}
+p {
+  margin: 0 0 20px 0;
+}
+a,
+span.exturl {
+  border-bottom: 1px solid #999;
+  color: var(--link-color);
+  outline: 0;
+  text-decoration: none;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  cursor: pointer;
+}
+a:hover,
+span.exturl:hover {
+  border-bottom-color: var(--link-hover-color);
+  color: var(--link-hover-color);
+}
+iframe,
+img,
+video {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+hr {
+  background-image: repeating-linear-gradient(-45deg, #ddd, #ddd 4px, transparent 4px, transparent 8px);
+  border: 0;
+  height: 3px;
+  margin: 40px 0;
+}
+blockquote {
+  border-left: 4px solid #ddd;
+  color: var(--blockquote-color);
+  margin: 0;
+  padding: 0 15px;
+}
+blockquote cite::before {
+  content: '-';
+  padding: 0 5px;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin: 0;
+  padding: 0;
+}
+kbd {
+  background-color: #f5f5f5;
+  background-image: linear-gradient(#eee, #fff, #eee);
+  border: 1px solid #ccc;
+  border-radius: 0.2em;
+  box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
+  color: #555;
+  font-family: inherit;
+  padding: 0.1em 0.3em;
+  white-space: nowrap;
+}
+.table-container {
+  overflow: auto;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 0.875em;
+  margin: 0 0 20px 0;
+  width: 100%;
+}
+tbody tr:nth-of-type(odd) {
+  background: var(--table-row-odd-bg-color);
+}
+tbody tr:hover {
+  background: var(--table-row-hover-bg-color);
+}
+caption,
+th,
+td {
+  font-weight: normal;
+  padding: 8px;
+  vertical-align: middle;
+}
+th,
+td {
+  border: 1px solid #ddd;
+  border-bottom: 3px solid #ddd;
+}
+th {
+  font-weight: 700;
+  padding-bottom: 10px;
+}
+td {
+  border-bottom-width: 1px;
+}
+.btn {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: 2px;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: 0.875em;
+  line-height: 2;
+  padding: 0 20px;
+  text-decoration: none;
+  transition-property: background-color;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.btn:hover {
+  background: var(--btn-default-hover-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.btn + .btn {
+  margin: 0 0 8px 8px;
+}
+.btn .fa-fw {
+  text-align: left;
+  width: 1.285714285714286em;
+}
+.toggle {
+  line-height: 0;
+}
+.toggle .toggle-line {
+  background: #fff;
+  display: inline-block;
+  height: 2px;
+  left: 0;
+  position: relative;
+  top: 0;
+  transition: all 0.4s;
+  vertical-align: top;
+  width: 100%;
+}
+.toggle .toggle-line:not(:first-child) {
+  margin-top: 3px;
+}
+.toggle.toggle-arrow .toggle-line-first {
+  left: 50%;
+  top: 2px;
+  transform: rotate(45deg);
+  width: 50%;
+}
+.toggle.toggle-arrow .toggle-line-middle {
+  left: 2px;
+  width: 90%;
+}
+.toggle.toggle-arrow .toggle-line-last {
+  left: 50%;
+  top: -2px;
+  transform: rotate(-45deg);
+  width: 50%;
+}
+.toggle.toggle-close .toggle-line-first {
+  transform: rotate(-45deg);
+  top: 5px;
+}
+.toggle.toggle-close .toggle-line-middle {
+  opacity: 0;
+}
+.toggle.toggle-close .toggle-line-last {
+  transform: rotate(45deg);
+  top: -5px;
+}
+.highlight,
+pre {
+  background: #fdf6e3;
+  color: #586e75;
+  line-height: 1.6;
+  margin: 0 auto 20px;
+}
+pre,
+code {
+  font-family: consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei";
+}
+code {
+  background: #eee;
+  border-radius: 3px;
+  color: #555;
+  padding: 2px 4px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.highlight *::selection {
+  background: #eee8d5;
+}
+.highlight pre {
+  border: 0;
+  margin: 0;
+  padding: 10px 0;
+}
+.highlight table {
+  border: 0;
+  margin: 0;
+  width: auto;
+}
+.highlight td {
+  border: 0;
+  padding: 0;
+}
+.highlight figcaption {
+  background: #fdf6e3;
+  color: #586e75;
+  display: flex;
+  font-size: 0.875em;
+  justify-content: space-between;
+  line-height: 1.2;
+  padding: 0.5em;
+}
+.highlight figcaption a {
+  color: #586e75;
+}
+.highlight figcaption a:hover {
+  border-bottom-color: #586e75;
+}
+.highlight .gutter {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.highlight .gutter pre {
+  background: #fdf6e3;
+  color: #93a1a1;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: right;
+}
+.highlight .code pre {
+  background: #fdf6e3;
+  padding-left: 10px;
+  width: 100%;
+}
+.gist table {
+  width: auto;
+}
+.gist table td {
+  border: 0;
+}
+pre {
+  overflow: auto;
+  padding: 10px;
+}
+pre code {
+  background: none;
+  color: #586e75;
+  font-size: 0.875em;
+  padding: 0;
+  text-shadow: none;
+}
+pre .deletion {
+  background: #800000;
+}
+pre .addition {
+  background: #008000;
+}
+pre .meta {
+  color: #b58900;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+pre .comment {
+  color: #93a1a1;
+}
+pre .variable,
+pre .attribute,
+pre .tag,
+pre .name,
+pre .regexp,
+pre .ruby .constant,
+pre .xml .tag .title,
+pre .xml .pi,
+pre .xml .doctype,
+pre .html .doctype,
+pre .css .id,
+pre .css .class,
+pre .css .pseudo {
+  color: #dc322f;
+}
+pre .number,
+pre .preprocessor,
+pre .built_in,
+pre .builtin-name,
+pre .literal,
+pre .params,
+pre .constant,
+pre .command {
+  color: #cb4b16;
+}
+pre .ruby .class .title,
+pre .css .rules .attribute,
+pre .string,
+pre .symbol,
+pre .value,
+pre .inheritance,
+pre .header,
+pre .ruby .symbol,
+pre .xml .cdata,
+pre .special,
+pre .formula {
+  color: #859900;
+}
+pre .title,
+pre .css .hexcolor {
+  color: #2aa198;
+}
+pre .function,
+pre .python .decorator,
+pre .python .title,
+pre .ruby .function .title,
+pre .ruby .title .keyword,
+pre .perl .sub,
+pre .javascript .title,
+pre .coffeescript .title {
+  color: #268bd2;
+}
+pre .keyword,
+pre .javascript .function {
+  color: #6c71c4;
+}
+.blockquote-center {
+  border-left: none;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+}
+.blockquote-center .fa {
+  display: block;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+}
+.blockquote-center .fa-quote-left {
+  border-top: 1px solid #ccc;
+  text-align: left;
+  top: -20px;
+}
+.blockquote-center .fa-quote-right {
+  border-bottom: 1px solid #ccc;
+  text-align: right;
+  bottom: -20px;
+}
+.blockquote-center p,
+.blockquote-center div {
+  text-align: center;
+}
+.post-body .group-picture img {
+  margin: 0 auto;
+  padding: 0 3px;
+}
+.group-picture-row {
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+.group-picture-column {
+  float: left;
+  margin-bottom: 10px;
+}
+.post-body .label {
+  color: #555;
+  display: inline;
+  padding: 0 2px;
+}
+.post-body .label.default {
+  background: #f0f0f0;
+}
+.post-body .label.primary {
+  background: #efe6f7;
+}
+.post-body .label.info {
+  background: #e5f2f8;
+}
+.post-body .label.success {
+  background: #e7f4e9;
+}
+.post-body .label.warning {
+  background: #fcf6e1;
+}
+.post-body .label.danger {
+  background: #fae8eb;
+}
+.post-body .tabs {
+  margin-bottom: 20px;
+}
+.post-body .tabs,
+.tabs-comment {
+  display: block;
+  padding-top: 10px;
+  position: relative;
+}
+.post-body .tabs ul.nav-tabs,
+.tabs-comment ul.nav-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  margin-bottom: -1px;
+  padding: 0;
+}
+@media (max-width: 413px) {
+  .post-body .tabs ul.nav-tabs,
+  .tabs-comment ul.nav-tabs {
+    display: block;
+    margin-bottom: 5px;
+  }
+}
+.post-body .tabs ul.nav-tabs li.tab,
+.tabs-comment ul.nav-tabs li.tab {
+  border-bottom: 1px solid #ddd;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 3px solid transparent;
+  flex-grow: 1;
+  list-style-type: none;
+  border-radius: 0 0 0 0;
+}
+@media (max-width: 413px) {
+  .post-body .tabs ul.nav-tabs li.tab,
+  .tabs-comment ul.nav-tabs li.tab {
+    border-bottom: 1px solid transparent;
+    border-left: 3px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 1px solid transparent;
+  }
+}
+@media (max-width: 413px) {
+  .post-body .tabs ul.nav-tabs li.tab,
+  .tabs-comment ul.nav-tabs li.tab {
+    border-radius: 0;
+  }
+}
+.post-body .tabs ul.nav-tabs li.tab a,
+.tabs-comment ul.nav-tabs li.tab a {
+  border-bottom: initial;
+  display: block;
+  line-height: 1.8;
+  outline: 0;
+  padding: 0.25em 0.75em;
+  text-align: center;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+}
+.post-body .tabs ul.nav-tabs li.tab a i,
+.tabs-comment ul.nav-tabs li.tab a i {
+  width: 1.285714285714286em;
+}
+.post-body .tabs ul.nav-tabs li.tab.active,
+.tabs-comment ul.nav-tabs li.tab.active {
+  border-bottom: 1px solid transparent;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-top: 3px solid #fc6423;
+}
+@media (max-width: 413px) {
+  .post-body .tabs ul.nav-tabs li.tab.active,
+  .tabs-comment ul.nav-tabs li.tab.active {
+    border-bottom: 1px solid #ddd;
+    border-left: 3px solid #fc6423;
+    border-right: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+  }
+}
+.post-body .tabs ul.nav-tabs li.tab.active a,
+.tabs-comment ul.nav-tabs li.tab.active a {
+  color: var(--link-color);
+  cursor: default;
+}
+.post-body .tabs .tab-content .tab-pane,
+.tabs-comment .tab-content .tab-pane {
+  border: 1px solid #ddd;
+  border-top: 0;
+  padding: 20px 20px 0 20px;
+  border-radius: 0;
+}
+.post-body .tabs .tab-content .tab-pane:not(.active),
+.tabs-comment .tab-content .tab-pane:not(.active) {
+  display: none;
+}
+.post-body .tabs .tab-content .tab-pane.active,
+.tabs-comment .tab-content .tab-pane.active {
+  display: block;
+}
+.post-body .tabs .tab-content .tab-pane.active:nth-of-type(1),
+.tabs-comment .tab-content .tab-pane.active:nth-of-type(1) {
+  border-radius: 0 0 0 0;
+}
+@media (max-width: 413px) {
+  .post-body .tabs .tab-content .tab-pane.active:nth-of-type(1),
+  .tabs-comment .tab-content .tab-pane.active:nth-of-type(1) {
+    border-radius: 0;
+  }
+}
+.post-body .note {
+  border-radius: 3px;
+  margin-bottom: 20px;
+  padding: 1em;
+  position: relative;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+}
+.post-body .note h2,
+.post-body .note h3,
+.post-body .note h4,
+.post-body .note h5,
+.post-body .note h6 {
+  margin-top: 0;
+  border-bottom: initial;
+  margin-bottom: 0;
+  padding-top: 0;
+}
+.post-body .note p:first-child,
+.post-body .note ul:first-child,
+.post-body .note ol:first-child,
+.post-body .note table:first-child,
+.post-body .note pre:first-child,
+.post-body .note blockquote:first-child,
+.post-body .note img:first-child {
+  margin-top: 0;
+}
+.post-body .note p:last-child,
+.post-body .note ul:last-child,
+.post-body .note ol:last-child,
+.post-body .note table:last-child,
+.post-body .note pre:last-child,
+.post-body .note blockquote:last-child,
+.post-body .note img:last-child {
+  margin-bottom: 0;
+}
+.post-body .note.default {
+  border-left-color: #777;
+}
+.post-body .note.default h2,
+.post-body .note.default h3,
+.post-body .note.default h4,
+.post-body .note.default h5,
+.post-body .note.default h6 {
+  color: #777;
+}
+.post-body .note.primary {
+  border-left-color: #6f42c1;
+}
+.post-body .note.primary h2,
+.post-body .note.primary h3,
+.post-body .note.primary h4,
+.post-body .note.primary h5,
+.post-body .note.primary h6 {
+  color: #6f42c1;
+}
+.post-body .note.info {
+  border-left-color: #428bca;
+}
+.post-body .note.info h2,
+.post-body .note.info h3,
+.post-body .note.info h4,
+.post-body .note.info h5,
+.post-body .note.info h6 {
+  color: #428bca;
+}
+.post-body .note.success {
+  border-left-color: #5cb85c;
+}
+.post-body .note.success h2,
+.post-body .note.success h3,
+.post-body .note.success h4,
+.post-body .note.success h5,
+.post-body .note.success h6 {
+  color: #5cb85c;
+}
+.post-body .note.warning {
+  border-left-color: #f0ad4e;
+}
+.post-body .note.warning h2,
+.post-body .note.warning h3,
+.post-body .note.warning h4,
+.post-body .note.warning h5,
+.post-body .note.warning h6 {
+  color: #f0ad4e;
+}
+.post-body .note.danger {
+  border-left-color: #d9534f;
+}
+.post-body .note.danger h2,
+.post-body .note.danger h3,
+.post-body .note.danger h4,
+.post-body .note.danger h5,
+.post-body .note.danger h6 {
+  color: #d9534f;
+}
+.pagination .prev,
+.pagination .next,
+.pagination .page-number,
+.pagination .space {
+  display: inline-block;
+  margin: 0 10px;
+  padding: 0 11px;
+  position: relative;
+  top: -1px;
+}
+@media (max-width: 767px) {
+  .pagination .prev,
+  .pagination .next,
+  .pagination .page-number,
+  .pagination .space {
+    margin: 0 5px;
+  }
+}
+.pagination {
+  border-top: 1px solid #eee;
+  margin: 120px 0 0;
+  text-align: center;
+}
+.pagination .prev,
+.pagination .next,
+.pagination .page-number {
+  border-bottom: 0;
+  border-top: 1px solid #eee;
+  transition-property: border-color;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.pagination .prev:hover,
+.pagination .next:hover,
+.pagination .page-number:hover {
+  border-top-color: #222;
+}
+.pagination .space {
+  margin: 0;
+  padding: 0;
+}
+.pagination .prev {
+  margin-left: 0;
+}
+.pagination .next {
+  margin-right: 0;
+}
+.pagination .page-number.current {
+  background: #ccc;
+  border-top-color: #ccc;
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .pagination {
+    border-top: none;
+  }
+  .pagination .prev,
+  .pagination .next,
+  .pagination .page-number {
+    border-bottom: 1px solid #eee;
+    border-top: 0;
+    margin-bottom: 10px;
+    padding: 0 10px;
+  }
+  .pagination .prev:hover,
+  .pagination .next:hover,
+  .pagination .page-number:hover {
+    border-bottom-color: #222;
+  }
+}
+.comments {
+  margin-top: 60px;
+  overflow: hidden;
+}
+.comment-button-group {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: center;
+  margin: 1em 0;
+}
+.comment-button-group .comment-button {
+  margin: 0.1em 0.2em;
+}
+.comment-button-group .comment-button.active {
+  background: var(--btn-default-hover-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.comment-position {
+  display: none;
+}
+.comment-position.active {
+  display: block;
+}
+.tabs-comment {
+  background: var(--content-bg-color);
+  margin-top: 4em;
+  padding-top: 0;
+}
+.tabs-comment .comments {
+  border: 0;
+  box-shadow: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+.container {
+  min-height: 100%;
+  position: relative;
+}
+.main-inner {
+  margin: 0 auto;
+  width: calc(100% - 20px);
+}
+@media (min-width: 1200px) {
+  .main-inner {
+    width: 1160px;
+  }
+}
+@media (min-width: 1600px) {
+  .main-inner {
+    width: 73%;
+  }
+}
+@media (max-width: 767px) {
+  .content-wrap {
+    padding: 0 20px;
+  }
+}
+.header {
+  background: transparent;
+}
+.header-inner {
+  margin: 0 auto;
+  width: calc(100% - 20px);
+}
+@media (min-width: 1200px) {
+  .header-inner {
+    width: 1160px;
+  }
+}
+@media (min-width: 1600px) {
+  .header-inner {
+    width: 73%;
+  }
+}
+.site-brand-container {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 10px;
+}
+.headband {
+  background: #222;
+  height: 3px;
+}
+.site-meta {
+  flex-grow: 1;
+  text-align: center;
+}
+@media (max-width: 767px) {
+  .site-meta {
+    text-align: center;
+  }
+}
+.brand {
+  border-bottom: none;
+  color: var(--brand-color);
+  display: inline-block;
+  line-height: 1.375em;
+  padding: 0 40px;
+  position: relative;
+}
+.brand:hover {
+  color: var(--brand-hover-color);
+}
+.site-title {
+  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 1.375em;
+  font-weight: normal;
+  margin: 0;
+}
+.site-subtitle {
+  color: #ddd;
+  font-size: 0.8125em;
+  margin: 10px 0;
+}
+.use-motion .brand {
+  opacity: 0;
+}
+.use-motion .site-title,
+.use-motion .site-subtitle,
+.use-motion .custom-logo-image {
+  opacity: 0;
+  position: relative;
+  top: -10px;
+}
+.site-nav-toggle,
+.site-nav-right {
+  display: none;
+}
+@media (max-width: 767px) {
+  .site-nav-toggle,
+  .site-nav-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+.site-nav-toggle .toggle,
+.site-nav-right .toggle {
+  color: var(--text-color);
+  padding: 10px;
+  width: 22px;
+}
+.site-nav-toggle .toggle .toggle-line,
+.site-nav-right .toggle .toggle-line {
+  background: var(--text-color);
+  border-radius: 1px;
+}
+.site-nav {
+  display: block;
+}
+@media (max-width: 767px) {
+  .site-nav {
+    clear: both;
+    display: none;
+  }
+}
+.site-nav.site-nav-on {
+  display: block;
+}
+.menu {
+  margin-top: 20px;
+  padding-left: 0;
+  text-align: center;
+}
+.menu-item {
+  display: inline-block;
+  list-style: none;
+  margin: 0 10px;
+}
+@media (max-width: 767px) {
+  .menu-item {
+    display: block;
+    margin-top: 10px;
+  }
+  .menu-item.menu-item-search {
+    display: none;
+  }
+}
+.menu-item a,
+.menu-item span.exturl {
+  border-bottom: 0;
+  display: block;
+  font-size: 0.8125em;
+  transition-property: border-color;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+@media (hover: none) {
+  .menu-item a:hover,
+  .menu-item span.exturl:hover {
+    border-bottom-color: transparent !important;
+  }
+}
+.menu-item .fa,
+.menu-item .fab,
+.menu-item .far,
+.menu-item .fas {
+  margin-right: 8px;
+}
+.menu-item .badge {
+  display: inline-block;
+  font-weight: bold;
+  line-height: 1;
+  margin-left: 0.35em;
+  margin-top: 0.35em;
+  text-align: center;
+  white-space: nowrap;
+}
+@media (max-width: 767px) {
+  .menu-item .badge {
+    float: right;
+    margin-left: 0;
+  }
+}
+.menu-item-active a,
+.menu .menu-item a:hover,
+.menu .menu-item span.exturl:hover {
+  background: var(--menu-item-bg-color);
+}
+.use-motion .menu-item {
+  opacity: 0;
+}
+.github-corner :hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+.github-corner svg {
+  border: 0;
+  color: #fff;
+  fill: #222;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1000;
+}
+@media (max-width: 991px) {
+  .github-corner {
+    display: none;
+  }
+  .github-corner svg {
+    color: #222;
+    fill: #fff;
+  }
+  .github-corner .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+@-moz-keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@-webkit-keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@-o-keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+.sidebar {
+  background: #222;
+  bottom: 0;
+  box-shadow: inset 0 2px 6px #000;
+  position: fixed;
+  top: 0;
+}
+@media (max-width: 991px) {
+  .sidebar {
+    display: none;
+  }
+}
+.sidebar-inner {
+  color: #999;
+  padding: 18px 10px;
+  text-align: center;
+}
+.cc-license {
+  margin-top: 10px;
+  text-align: center;
+}
+.cc-license .cc-opacity {
+  border-bottom: none;
+  opacity: 0.7;
+}
+.cc-license .cc-opacity:hover {
+  opacity: 0.9;
+}
+.cc-license img {
+  display: inline-block;
+}
+.site-author-image {
+  border: 1px solid #eee;
+  display: block;
+  margin: 0 auto;
+  max-width: 120px;
+  padding: 2px;
+  border-radius: 50%;
+}
+.site-author-name {
+  color: var(--text-color);
+  font-weight: 600;
+  margin: 0;
+  text-align: center;
+}
+.site-description {
+  color: #999;
+  font-size: 0.8125em;
+  margin-top: 0;
+  text-align: center;
+}
+.links-of-author {
+  margin-top: 15px;
+}
+.links-of-author a,
+.links-of-author span.exturl {
+  border-bottom-color: #555;
+  display: inline-block;
+  font-size: 0.8125em;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  vertical-align: middle;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.links-of-author a::before,
+.links-of-author span.exturl::before {
+  background: #eb53ff;
+  border-radius: 50%;
+  content: ' ';
+  display: inline-block;
+  height: 4px;
+  margin-right: 3px;
+  vertical-align: middle;
+  width: 4px;
+}
+.sidebar-button {
+  margin-top: 15px;
+}
+.sidebar-button a {
+  border: 1px solid #fc6423;
+  border-radius: 4px;
+  color: #fc6423;
+  display: inline-block;
+  padding: 0 15px;
+}
+.sidebar-button a .fa,
+.sidebar-button a .fab,
+.sidebar-button a .far,
+.sidebar-button a .fas {
+  margin-right: 5px;
+}
+.sidebar-button a:hover {
+  background: #fc6423;
+  border: 1px solid #fc6423;
+  color: #fff;
+}
+.sidebar-button a:hover .fa,
+.sidebar-button a:hover .fab,
+.sidebar-button a:hover .far,
+.sidebar-button a:hover .fas {
+  color: #fff;
+}
+.links-of-blogroll {
+  font-size: 0.8125em;
+  margin-top: 10px;
+}
+.links-of-blogroll-title {
+  font-size: 0.875em;
+  font-weight: 600;
+  margin-top: 0;
+}
+.links-of-blogroll-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#sidebar-dimmer {
+  display: none;
+}
+@media (max-width: 767px) {
+  #sidebar-dimmer {
+    background: #000;
+    display: block;
+    height: 100%;
+    left: 100%;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1100;
+  }
+  .sidebar-active + #sidebar-dimmer {
+    opacity: 0.7;
+    transform: translateX(-100%);
+    transition: opacity 0.5s;
+  }
+}
+.sidebar-nav {
+  margin: 0;
+  padding-bottom: 20px;
+  padding-left: 0;
+}
+.sidebar-nav li {
+  border-bottom: 1px solid transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.875em;
+}
+.sidebar-nav li.sidebar-nav-overview {
+  margin-left: 10px;
+}
+.sidebar-nav li:hover {
+  color: #fc6423;
+}
+.sidebar-nav .sidebar-nav-active {
+  border-bottom-color: #fc6423;
+  color: #fc6423;
+}
+.sidebar-nav .sidebar-nav-active:hover {
+  color: #fc6423;
+}
+.sidebar-panel {
+  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.sidebar-panel-active {
+  display: block;
+}
+.sidebar-toggle {
+  background: #222;
+  bottom: 45px;
+  cursor: pointer;
+  height: 14px;
+  left: 30px;
+  padding: 5px;
+  position: fixed;
+  width: 14px;
+  z-index: 1300;
+}
+@media (max-width: 991px) {
+  .sidebar-toggle {
+    left: 20px;
+    opacity: 0.8;
+    display: none;
+  }
+}
+.sidebar-toggle:hover .toggle-line {
+  background: #fc6423;
+}
+.post-toc {
+  font-size: 0.875em;
+}
+.post-toc ol {
+  list-style: none;
+  margin: 0;
+  padding: 0 2px 5px 10px;
+  text-align: left;
+}
+.post-toc ol > ol {
+  padding-left: 0;
+}
+.post-toc ol a {
+  transition-property: all;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.post-toc .nav-item {
+  line-height: 1.8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.post-toc .nav .nav-child {
+  display: block;
+}
+.post-toc .nav .active > .nav-child {
+  display: block;
+}
+.post-toc .nav .active-current > .nav-child {
+  display: block;
+}
+.post-toc .nav .active-current > .nav-child > .nav-item {
+  display: block;
+}
+.post-toc .nav .active > a {
+  border-bottom-color: #fc6423;
+  color: #fc6423;
+}
+.post-toc .nav .active-current > a {
+  color: #fc6423;
+}
+.post-toc .nav .active-current > a:hover {
+  color: #fc6423;
+}
+.site-state {
+  display: flex;
+  justify-content: center;
+  line-height: 1.4;
+  margin-top: 10px;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+}
+.site-state-item {
+  padding: 0 15px;
+}
+.site-state-item:not(:first-child) {
+  border-left: 1px solid #eee;
+}
+.site-state-item a {
+  border-bottom: none;
+}
+.site-state-item-count {
+  display: block;
+  font-size: 1em;
+  font-weight: 600;
+  text-align: center;
+}
+.site-state-item-name {
+  color: #999;
+  font-size: 0.8125em;
+}
+.footer {
+  color: #999;
+  font-size: 0.875em;
+  padding: 20px 0;
+}
+.footer.footer-fixed {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+.footer-inner {
+  box-sizing: border-box;
+  margin: 0 auto;
+  text-align: center;
+  width: calc(100% - 20px);
+}
+@media (min-width: 1200px) {
+  .footer-inner {
+    width: 1160px;
+  }
+}
+@media (min-width: 1600px) {
+  .footer-inner {
+    width: 73%;
+  }
+}
+.languages {
+  display: inline-block;
+  font-size: 1.125em;
+  position: relative;
+}
+.languages .lang-select-label span {
+  margin: 0 0.5em;
+}
+.languages .lang-select {
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.with-love {
+  color: #ff0000;
+  display: inline-block;
+  margin: 0 5px;
+  animation: iconAnimate 1.33s ease-in-out infinite;
+}
+.powered-by,
+.theme-info {
+  display: inline-block;
+}
+@-moz-keyframes iconAnimate {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 30% {
+    transform: scale(0.9);
+  }
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
+@-webkit-keyframes iconAnimate {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 30% {
+    transform: scale(0.9);
+  }
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
+@-o-keyframes iconAnimate {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 30% {
+    transform: scale(0.9);
+  }
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
+@keyframes iconAnimate {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 30% {
+    transform: scale(0.9);
+  }
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
+.back-to-top {
+  font-size: 12px;
+  text-align: center;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.back-to-top {
+  background: #222;
+  bottom: -100px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  left: 30px;
+  opacity: 0.6;
+  padding: 0 6px;
+  position: fixed;
+  transition-property: bottom;
+  z-index: 1300;
+  width: 24px;
+}
+.back-to-top span {
+  display: none;
+}
+.back-to-top:hover {
+  color: #fc6423;
+}
+.back-to-top.back-to-top-on {
+  bottom: 30px;
+}
+@media (max-width: 991px) {
+  .back-to-top {
+    left: 20px;
+    opacity: 0.8;
+  }
+}
+.reading-progress-bar {
+  background: #37c6c0;
+  display: block;
+  height: 3px;
+  left: 0;
+  position: fixed;
+  width: 0;
+  z-index: 1500;
+  top: 0;
+}
+.post-body {
+  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+@media (min-width: 1200px) {
+  .post-body {
+    font-size: 1.125em;
+  }
+}
+.post-body .exturl .fa {
+  font-size: 0.875em;
+  margin-left: 4px;
+}
+.post-body .image-caption,
+.post-body .figure .caption {
+  color: #999;
+  font-size: 0.875em;
+  font-weight: bold;
+  line-height: 1;
+  margin: -20px auto 15px;
+  text-align: center;
+}
+.post-sticky-flag {
+  display: inline-block;
+  transform: rotate(30deg);
+}
+.post-button {
+  margin-top: 40px;
+  text-align: center;
+}
+.use-motion .post-block,
+.use-motion .pagination,
+.use-motion .comments {
+  opacity: 0;
+}
+.use-motion .post-header {
+  opacity: 0;
+}
+.use-motion .post-body {
+  opacity: 0;
+}
+.use-motion .collection-header {
+  opacity: 0;
+}
+.posts-collapse {
+  margin-left: 35px;
+  position: relative;
+}
+@media (max-width: 767px) {
+  .posts-collapse {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+.posts-collapse .collection-title {
+  font-size: 1.125em;
+  position: relative;
+}
+.posts-collapse .collection-title::before {
+  background: #999;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  content: ' ';
+  height: 10px;
+  left: 0;
+  margin-left: -6px;
+  margin-top: -4px;
+  position: absolute;
+  top: 50%;
+  width: 10px;
+}
+.posts-collapse .collection-year {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 60px 0;
+  position: relative;
+}
+.posts-collapse .collection-year::before {
+  background: #bbb;
+  border-radius: 50%;
+  content: ' ';
+  height: 8px;
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  position: absolute;
+  top: 50%;
+  width: 8px;
+}
+.posts-collapse .collection-header {
+  display: block;
+  margin: 0 0 0 20px;
+}
+.posts-collapse .collection-header small {
+  color: #bbb;
+  margin-left: 5px;
+}
+.posts-collapse .post-header {
+  border-bottom: 1px dashed #ccc;
+  margin: 30px 0;
+  padding-left: 15px;
+  position: relative;
+  transition-property: border;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.posts-collapse .post-header::before {
+  background: #bbb;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  content: ' ';
+  height: 6px;
+  left: 0;
+  margin-left: -4px;
+  position: absolute;
+  top: 0.75em;
+  transition-property: background;
+  width: 6px;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.posts-collapse .post-header:hover {
+  border-bottom-color: #666;
+}
+.posts-collapse .post-header:hover::before {
+  background: #222;
+}
+.posts-collapse .post-meta {
+  display: inline;
+  font-size: 0.75em;
+  margin-right: 10px;
+}
+.posts-collapse .post-title {
+  display: inline;
+}
+.posts-collapse .post-title a,
+.posts-collapse .post-title span.exturl {
+  border-bottom: none;
+  color: var(--link-color);
+}
+.posts-collapse .post-title .fa-external-link-alt {
+  font-size: 0.875em;
+  margin-left: 5px;
+}
+.posts-collapse::before {
+  background: #f5f5f5;
+  content: ' ';
+  height: 100%;
+  left: 0;
+  margin-left: -2px;
+  position: absolute;
+  top: 1.25em;
+  width: 4px;
+}
+.post-eof {
+  background: #ccc;
+  height: 1px;
+  margin: 80px auto 60px;
+  text-align: center;
+  width: 8%;
+}
+.post-block:last-of-type .post-eof {
+  display: none;
+}
+.content {
+  padding-top: 40px;
+}
+@media (min-width: 992px) {
+  .post-body {
+    text-align: left;
+  }
+}
+@media (max-width: 991px) {
+  .post-body {
+    text-align: justify;
+  }
+}
+.post-body h1,
+.post-body h2,
+.post-body h3,
+.post-body h4,
+.post-body h5,
+.post-body h6 {
+  padding-top: 10px;
+}
+.post-body h1 .header-anchor,
+.post-body h2 .header-anchor,
+.post-body h3 .header-anchor,
+.post-body h4 .header-anchor,
+.post-body h5 .header-anchor,
+.post-body h6 .header-anchor {
+  border-bottom-style: none;
+  color: #ccc;
+  float: right;
+  margin-left: 10px;
+  visibility: hidden;
+}
+.post-body h1 .header-anchor:hover,
+.post-body h2 .header-anchor:hover,
+.post-body h3 .header-anchor:hover,
+.post-body h4 .header-anchor:hover,
+.post-body h5 .header-anchor:hover,
+.post-body h6 .header-anchor:hover {
+  color: inherit;
+}
+.post-body h1:hover .header-anchor,
+.post-body h2:hover .header-anchor,
+.post-body h3:hover .header-anchor,
+.post-body h4:hover .header-anchor,
+.post-body h5:hover .header-anchor,
+.post-body h6:hover .header-anchor {
+  visibility: visible;
+}
+.post-body iframe,
+.post-body img,
+.post-body video {
+  margin-bottom: 20px;
+}
+.post-body .video-container {
+  height: 0;
+  margin-bottom: 20px;
+  overflow: hidden;
+  padding-top: 75%;
+  position: relative;
+  width: 100%;
+}
+.post-body .video-container iframe,
+.post-body .video-container object,
+.post-body .video-container embed {
+  height: 100%;
+  left: 0;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.post-gallery {
+  align-items: center;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin-bottom: 20px;
+}
+@media (max-width: 767px) {
+  .post-gallery {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.post-gallery a {
+  border: 0;
+}
+.post-gallery img {
+  margin: 0;
+}
+.posts-expand .post-header {
+  font-size: 1.125em;
+}
+.posts-expand .post-title {
+  font-size: 1.5em;
+  font-weight: normal;
+  margin: initial;
+  text-align: center;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.posts-expand .post-title-link {
+  border-bottom: none;
+  color: var(--link-color);
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+}
+.posts-expand .post-title-link::before {
+  background: var(--link-color);
+  bottom: 0;
+  content: '';
+  height: 2px;
+  left: 0;
+  position: absolute;
+  transform: scaleX(0);
+  visibility: hidden;
+  width: 100%;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+.posts-expand .post-title-link:hover::before {
+  transform: scaleX(1);
+  visibility: visible;
+}
+.posts-expand .post-title-link .fa-external-link-alt {
+  font-size: 0.875em;
+  margin-left: 5px;
+}
+.posts-expand .post-meta {
+  color: #999;
+  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 0.75em;
+  margin: 3px 0 60px 0;
+  text-align: center;
+}
+.posts-expand .post-meta .post-description {
+  font-size: 0.875em;
+  margin-top: 2px;
+}
+.posts-expand .post-meta time {
+  border-bottom: 1px dashed #999;
+  cursor: pointer;
+}
+.post-meta .post-meta-item + .post-meta-item::before {
+  content: '|';
+  margin: 0 0.5em;
+}
+.post-meta-divider {
+  margin: 0 0.5em;
+}
+.post-meta-item-icon {
+  margin-right: 3px;
+}
+@media (max-width: 991px) {
+  .post-meta-item-icon {
+    display: inline-block;
+  }
+}
+@media (max-width: 991px) {
+  .post-meta-item-text {
+    display: none;
+  }
+}
+.post-nav {
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+  padding: 10px 5px 0;
+}
+.post-nav-item {
+  flex: 1;
+}
+.post-nav-item a {
+  border-bottom: none;
+  display: block;
+  font-size: 0.875em;
+  line-height: 1.6;
+  position: relative;
+}
+.post-nav-item a:active {
+  top: 2px;
+}
+.post-nav-item .fa {
+  font-size: 0.75em;
+}
+.post-nav-item:first-child {
+  margin-right: 15px;
+}
+.post-nav-item:first-child .fa {
+  margin-right: 5px;
+}
+.post-nav-item:last-child {
+  margin-left: 15px;
+  text-align: right;
+}
+.post-nav-item:last-child .fa {
+  margin-left: 5px;
+}
+.rtl.post-body p,
+.rtl.post-body a,
+.rtl.post-body h1,
+.rtl.post-body h2,
+.rtl.post-body h3,
+.rtl.post-body h4,
+.rtl.post-body h5,
+.rtl.post-body h6,
+.rtl.post-body li,
+.rtl.post-body ul,
+.rtl.post-body ol {
+  direction: rtl;
+  font-family: UKIJ Ekran;
+}
+.rtl.post-title {
+  font-family: UKIJ Ekran;
+}
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+}
+.post-tags a {
+  display: inline-block;
+  font-size: 0.8125em;
+}
+.post-tags a:not(:last-child) {
+  margin-right: 10px;
+}
+.post-widgets {
+  border-top: 1px solid #eee;
+  margin-top: 15px;
+  text-align: center;
+}
+.wp_rating {
+  height: 20px;
+  line-height: 20px;
+  margin-top: 10px;
+  padding-top: 6px;
+  text-align: center;
+}
+.social-like {
+  display: flex;
+  font-size: 0.875em;
+  justify-content: center;
+  text-align: center;
+}
+.reward-container {
+  margin: 20px auto;
+  padding: 10px 0;
+  text-align: center;
+  width: 90%;
+}
+.reward-container button {
+  background: transparent;
+  border: 1px solid #fc6423;
+  border-radius: 0;
+  color: #fc6423;
+  cursor: pointer;
+  line-height: 2;
+  outline: 0;
+  padding: 0 15px;
+  vertical-align: text-top;
+}
+.reward-container button:hover {
+  background: #fc6423;
+  border: 1px solid transparent;
+  color: #fa9366;
+}
+#qr {
+  padding-top: 20px;
+}
+#qr a {
+  border: 0;
+}
+#qr img {
+  display: inline-block;
+  margin: 0.8em 2em 0 2em;
+  max-width: 100%;
+  width: 180px;
+}
+#qr p {
+  text-align: center;
+}
+.my_post_copyright {
+  width: 85%;
+  max-width: 45em;
+  margin: 2.8em auto 0;
+  padding: 0.5em 1em;
+  border: 1px solid #d3d3d3;
+  font-size: 0.93rem;
+  line-height: 1.6em;
+  word-break: break-all;
+  background: rgba(255,255,255,0.4);
+}
+.my_post_copyright p {
+  margin: 0;
+}
+.my_post_copyright span {
+  display: inline-block;
+  width: 5.2em;
+  color: #b5b5b5;
+  font-weight: bold;
+}
+.my_post_copyright .raw {
+  margin-left: 1em;
+  width: 5em;
+}
+.my_post_copyright a {
+  color: #808080;
+  border-bottom: 0;
+}
+.my_post_copyright a:hover {
+  color: #a3d2a3;
+  text-decoration: underline;
+}
+.my_post_copyright:hover .fa-clipboard {
+  color: #000;
+}
+.my_post_copyright .post-url:hover {
+  font-weight: normal;
+}
+.my_post_copyright .copy-path {
+  margin-left: 1em;
+  width: 1em;
+}
+@media (max-width: 767px) {
+  .my_post_copyright .copy-path {
+    display: none;
+  }
+}
+.my_post_copyright .copy-path:hover {
+  color: #808080;
+  cursor: pointer;
+}
+.category-all-page .category-all-title {
+  text-align: center;
+}
+.category-all-page .category-all {
+  margin-top: 20px;
+}
+.category-all-page .category-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.category-all-page .category-list-item {
+  margin: 5px 10px;
+}
+.category-all-page .category-list-count {
+  color: #bbb;
+}
+.category-all-page .category-list-count::before {
+  content: ' (';
+  display: inline;
+}
+.category-all-page .category-list-count::after {
+  content: ') ';
+  display: inline;
+}
+.category-all-page .category-list-child {
+  padding-left: 10px;
+}
+.event-list {
+  padding: 0;
+}
+.event-list hr {
+  background: #222;
+  margin: 20px 0 45px 0;
+}
+.event-list hr::after {
+  background: #222;
+  color: #fff;
+  content: 'NOW';
+  display: inline-block;
+  font-weight: bold;
+  padding: 0 5px;
+  text-align: right;
+}
+.event-list .event {
+  background: #222;
+  margin: 20px 0;
+  min-height: 40px;
+  padding: 15px 0 15px 10px;
+}
+.event-list .event .event-summary {
+  color: #fff;
+  margin: 0;
+  padding-bottom: 3px;
+}
+.event-list .event .event-summary::before {
+  animation: dot-flash 1s alternate infinite ease-in-out;
+  color: #fff;
+  content: '\f111';
+  display: inline-block;
+  font-size: 10px;
+  margin-right: 25px;
+  vertical-align: middle;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+.event-list .event .event-relative-time {
+  color: #bbb;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: normal;
+  padding-left: 12px;
+}
+.event-list .event .event-details {
+  color: #fff;
+  display: block;
+  line-height: 18px;
+  margin-left: 56px;
+  padding-bottom: 6px;
+  padding-top: 3px;
+  text-indent: -24px;
+}
+.event-list .event .event-details::before {
+  color: #fff;
+  display: inline-block;
+  margin-right: 9px;
+  text-align: center;
+  text-indent: 0;
+  width: 14px;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+.event-list .event .event-details.event-location::before {
+  content: '\f041';
+}
+.event-list .event .event-details.event-duration::before {
+  content: '\f017';
+}
+.event-list .event-past {
+  background: #f5f5f5;
+}
+.event-list .event-past .event-summary,
+.event-list .event-past .event-details {
+  color: #bbb;
+  opacity: 0.9;
+}
+.event-list .event-past .event-summary::before,
+.event-list .event-past .event-details::before {
+  animation: none;
+  color: #bbb;
+}
+@-moz-keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+@-webkit-keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+@-o-keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+@keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+ul.breadcrumb {
+  font-size: 0.75em;
+  list-style: none;
+  margin: 1em 0;
+  padding: 0 2em;
+  text-align: center;
+}
+ul.breadcrumb li {
+  display: inline;
+}
+ul.breadcrumb li + li::before {
+  content: '/\00a0';
+  font-weight: normal;
+  padding: 0.5em;
+}
+ul.breadcrumb li + li:last-child {
+  font-weight: bold;
+}
+.tag-cloud {
+  text-align: center;
+}
+.tag-cloud a {
+  display: inline-block;
+  margin: 10px;
+}
+.tag-cloud a:hover {
+  color: var(--link-hover-color) !important;
+}
+.gt-header a,
+.gt-comments a,
+.gt-popup a {
+  border-bottom: none;
+}
+.gt-container .gt-popup .gt-action.is--active::before {
+  top: 0.7em;
+}
+.search-pop-overlay {
+  background: rgba(0,0,0,0);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  transition: visibility 0s linear 0.2s, background 0.2s;
+  visibility: hidden;
+  width: 100%;
+  z-index: 1400;
+}
+.search-pop-overlay.search-active {
+  background: rgba(0,0,0,0.3);
+  transition: background 0.2s;
+  visibility: visible;
+}
+.search-popup {
+  background: var(--card-bg-color);
+  border-radius: 5px;
+  height: 80%;
+  left: calc(50% - 350px);
+  position: fixed;
+  top: 10%;
+  transform: scale(0);
+  transition: transform 0.2s;
+  width: 700px;
+  z-index: 1500;
+}
+.search-active .search-popup {
+  transform: scale(1);
+}
+@media (max-width: 767px) {
+  .search-popup {
+    border-radius: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    top: 0;
+    width: 100%;
+  }
+}
+.search-popup .search-icon,
+.search-popup .popup-btn-close {
+  color: #999;
+  font-size: 18px;
+  padding: 0 10px;
+}
+.search-popup .popup-btn-close {
+  cursor: pointer;
+}
+.search-popup .popup-btn-close:hover .fa {
+  color: #222;
+}
+.search-popup .search-header {
+  background: #eee;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  display: flex;
+  padding: 5px;
+}
+.search-popup input.search-input {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  width: 100%;
+}
+.search-popup input.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+.search-popup .search-input-container {
+  flex-grow: 1;
+  padding: 2px;
+}
+.search-popup ul.search-result-list {
+  margin: 0 5px;
+  padding: 0;
+  width: 100%;
+}
+.search-popup p.search-result {
+  border-bottom: 1px dashed #ccc;
+  padding: 5px 0;
+}
+.search-popup a.search-result-title {
+  font-weight: bold;
+}
+.search-popup .search-keyword {
+  border-bottom: 1px dashed #ff2a2a;
+  color: #ff2a2a;
+  font-weight: bold;
+}
+.search-popup #search-result {
+  display: flex;
+  height: calc(100% - 55px);
+  overflow: auto;
+  padding: 5px 25px;
+}
+.search-popup #no-result {
+  color: #ccc;
+  margin: auto;
+}
+.header {
+  margin: 0 auto;
+  position: relative;
+  width: calc(100% - 20px);
+}
+@media (min-width: 1200px) {
+  .header {
+    width: 1160px;
+  }
+}
+@media (min-width: 1600px) {
+  .header {
+    width: 73%;
+  }
+}
+@media (max-width: 991px) {
+  .header {
+    width: auto;
+  }
+}
+.header-inner {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 220px;
+}
+@media (min-width: 1200px) {
+  .header-inner {
+    width: 220px;
+  }
+}
+@media (max-width: 991px) {
+  .header-inner {
+    border-radius: initial;
+    position: relative;
+    width: auto;
+  }
+}
+.main-inner {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+}
+@media (max-width: 991px) {
+  .main-inner {
+    width: auto;
+  }
+}
+.content-wrap {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
+  box-sizing: border-box;
+  padding: 40px;
+  width: calc(100% - 232px);
+}
+@media (max-width: 991px) {
+  .content-wrap {
+    border-radius: initial;
+    padding: 20px;
+    width: 100%;
+  }
+}
+.footer-inner {
+  padding-left: 260px;
+}
+.back-to-top {
+  left: auto;
+  right: 30px;
+}
+@media (max-width: 991px) {
+  .back-to-top {
+    right: 20px;
+  }
+}
+@media (max-width: 991px) {
+  .footer-inner {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+}
+.site-brand-container {
+  background: #222;
+}
+@media (max-width: 991px) {
+  .site-brand-container {
+    box-shadow: 0 0 16px rgba(0,0,0,0.5);
+  }
+}
+.site-meta {
+  padding: 20px 0;
+}
+.brand {
+  padding: 0;
+}
+.site-subtitle {
+  margin: 10px 10px 0;
+}
+.custom-logo-image {
+  margin-top: 20px;
+}
+@media (max-width: 991px) {
+  .custom-logo-image {
+    display: none;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .site-nav-toggle,
+  .site-nav-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+.site-nav-toggle .toggle,
+.site-nav-right .toggle {
+  color: #fff;
+}
+.site-nav-toggle .toggle .toggle-line,
+.site-nav-right .toggle .toggle-line {
+  background: #fff;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .site-nav {
+    display: none;
+  }
+}
+.menu .menu-item {
+  display: block;
+  margin: 0;
+}
+.menu .menu-item a,
+.menu .menu-item span.exturl {
+  padding: 5px 20px;
+  position: relative;
+  text-align: left;
+  transition-property: background-color;
+}
+@media (max-width: 991px) {
+  .menu .menu-item.menu-item-search {
+    display: none;
+  }
+}
+.menu .menu-item .badge {
+  background: #ccc;
+  border-radius: 10px;
+  color: #fff;
+  float: right;
+  padding: 2px 5px;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+  vertical-align: middle;
+}
+.main-menu .menu-item-active a::after {
+  background: #bbb;
+  border-radius: 50%;
+  content: ' ';
+  height: 6px;
+  margin-top: -3px;
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  width: 6px;
+}
+.sub-menu {
+  background: var(--content-bg-color);
+  border-bottom: 1px solid #ddd;
+  margin: 0;
+  padding: 6px 0;
+}
+.sub-menu .menu-item {
+  display: inline-block;
+}
+.sub-menu .menu-item a,
+.sub-menu .menu-item span.exturl {
+  background: transparent;
+  margin: 5px 10px;
+  padding: initial;
+}
+.sub-menu .menu-item a:hover,
+.sub-menu .menu-item span.exturl:hover {
+  background: transparent;
+  color: #fc6423;
+}
+.sub-menu .menu-item-active a {
+  border-bottom-color: #fc6423;
+  color: #fc6423;
+}
+.sub-menu .menu-item-active a:hover {
+  border-bottom-color: #fc6423;
+}
+.sidebar {
+  background: var(--body-bg-color);
+  box-shadow: none;
+  margin-top: 100%;
+  position: static;
+  width: 220px;
+}
+@media (max-width: 991px) {
+  .sidebar {
+    display: none;
+  }
+}
+.sidebar-toggle {
+  display: none;
+}
+.sidebar-inner {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  box-sizing: border-box;
+  color: var(--text-color);
+  width: 220px;
+  opacity: 0;
+}
+.sidebar-inner.affix {
+  position: fixed;
+  top: 12px;
+}
+.sidebar-inner.affix-bottom {
+  position: absolute;
+}
+.site-state-item {
+  padding: 0 10px;
+}
+.sidebar-button {
+  border-bottom: 1px dotted #ccc;
+  border-top: 1px dotted #ccc;
+  margin-top: 10px;
+  text-align: center;
+}
+.sidebar-button a {
+  border: 0;
+  color: #fc6423;
+  display: block;
+}
+.sidebar-button a:hover {
+  background: none;
+  border: 0;
+  color: #e34603;
+}
+.sidebar-button a:hover .fa,
+.sidebar-button a:hover .fab,
+.sidebar-button a:hover .far,
+.sidebar-button a:hover .fas {
+  color: #e34603;
+}
+.links-of-author {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  justify-content: center;
+}
+.links-of-author-item {
+  margin: 5px 0 0;
+  width: 50%;
+}
+.links-of-author-item a,
+.links-of-author-item span.exturl {
+  box-sizing: border-box;
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 0;
+  max-width: 216px;
+  overflow: hidden;
+  padding: 0 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.links-of-author-item a,
+.links-of-author-item span.exturl {
+  border-bottom: none;
+  display: block;
+  text-decoration: none;
+}
+.links-of-author-item a::before,
+.links-of-author-item span.exturl::before {
+  display: none;
+}
+.links-of-author-item a:hover,
+.links-of-author-item span.exturl:hover {
+  background: var(--body-bg-color);
+  border-radius: 4px;
+}
+.links-of-author-item .fa,
+.links-of-author-item .fab,
+.links-of-author-item .far,
+.links-of-author-item .fas {
+  margin-right: 2px;
+}
+.links-of-blogroll-item {
+  padding: 0;
+  display: inline-block;
+  margin: 5px 0 0;
+  width: unset;
+}
+.links-of-blogroll-item a,
+.links-of-blogroll-item span.exturl {
+  box-sizing: border-box;
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 0;
+  max-width: 216px;
+  overflow: hidden;
+  padding: 0 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.content-wrap {
+  background: initial;
+  box-shadow: initial;
+  padding: initial;
+}
+.post-block {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
+  padding: 40px;
+}
+.post-block + .post-block {
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  margin-top: 12px;
+}
+.comments {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  margin-top: 12px;
+  padding: 40px;
+}
+.tabs-comment {
+  margin-top: 1em;
+}
+.content {
+  padding-top: initial;
+}
+.post-eof {
+  display: none;
+}
+.pagination {
+  background: var(--content-bg-color);
+  border-radius: initial;
+  border-top: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  margin: 12px 0 0;
+  padding: 10px 0 10px;
+}
+.pagination .prev,
+.pagination .next,
+.pagination .page-number {
+  margin-bottom: initial;
+  top: initial;
+}
+.main {
+  padding-bottom: initial;
+}
+.footer {
+  bottom: auto;
+}
+.sub-menu {
+  border-bottom: initial;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
+}
+.sub-menu + .content .post-block {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  margin-top: 12px;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .sub-menu + .content .post-block {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 767px) {
+  .sub-menu + .content .post-block {
+    margin-top: 8px;
+  }
+}
+.post-body h1,
+.post-body h2 {
+  border-bottom: 1px solid #eee;
+}
+.post-body h3 {
+  border-bottom: 1px dotted #eee;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .content-wrap {
+    padding: 10px;
+  }
+  .posts-expand .post-button {
+    margin-top: 20px;
+  }
+  .post-block {
+    border-radius: initial;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+    padding: 20px;
+  }
+  .post-block + .post-block {
+    margin-top: 10px;
+  }
+  .comments {
+    margin-top: 10px;
+    padding: 10px 20px;
+  }
+  .pagination {
+    margin: 10px 0 0;
+  }
+}
+@media (max-width: 767px) {
+  .content-wrap {
+    padding: 8px;
+  }
+  .posts-expand .post-button {
+    margin: 12px 0;
+  }
+  .post-block {
+    border-radius: initial;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
+    min-height: auto;
+    padding: 12px;
+  }
+  .post-block + .post-block {
+    margin-top: 8px;
+  }
+  .comments {
+    margin-top: 8px;
+    padding: 10px 12px;
+  }
+  .pagination {
+    margin: 8px 0 0;
+  }
+}
diff --git a/en/2013/06/17/Read-High-Performance-JavaScript/index.html b/en/2013/06/17/Read-High-Performance-JavaScript/index.html
new file mode 100644
index 0000000000..f4e2b1d7bc
--- /dev/null
+++ b/en/2013/06/17/Read-High-Performance-JavaScript/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《高性能JAVASCRIPT》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2013/06/17/Read-High-Performance-JavaScript/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2013-06-17T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2013/06/17/Read-High-Performance-JavaScript/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>《高性能JAVASCRIPT》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《高性能JAVASCRIPT》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2013/06/17/Read-High-Performance-JavaScript/">《高性能JAVASCRIPT》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月17日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2013/06/17/Read-High-Performance-JavaScript/" title="《高性能JAVASCRIPT》读书笔记">https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item"></div>
+      <div class="post-nav-item">
+    <a href="/en/2013/06/26/CSS-Triangle-Circle/" rel="next" title="CSS border三角、圆角图形生成技术详解">
+      CSS border三角、圆角图形生成技术详解 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BB%8E%E5%B0%8F%E4%BA%8B%E6%8F%90%E5%8D%87JAVASCRIPT%E6%80%A7%E8%83%BD%E3%80%82"><span class="nav-number">2.</span> <span class="nav-text">如何从小事提升JAVASCRIPT性能。</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bd45a521438398ef8e1bc77f71a1bc99',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2013/06/26/CSS-Triangle-Circle/index.html b/en/2013/06/26/CSS-Triangle-Circle/index.html
new file mode 100644
index 0000000000..48e1c48180
--- /dev/null
+++ b/en/2013/06/26/CSS-Triangle-Circle/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS border三角、圆角图形生成技术详解">
+<meta property="og:url" content="https://blog.lifesli.com/en/2013/06/26/CSS-Triangle-Circle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2013-06-26T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS技巧">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2013/06/26/CSS-Triangle-Circle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>CSS border三角、圆角图形生成技术详解 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS border三角、圆角图形生成技术详解
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+<span id="more"></span>
+
+<h1 id="CSS-border生成三角技术简介"><a href="#CSS-border生成三角技术简介" class="headerlink" title="CSS border生成三角技术简介"></a>CSS border生成三角技术简介</h1><h2 id="效果抢鲜"><a href="#效果抢鲜" class="headerlink" title="效果抢鲜"></a>效果抢鲜</h2><p>下图为使用CSS的border属性实现的三角效果：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何实现的，为何会有这样的效果，不急，take it easy!</p>
+<h2 id="梯形图案"><a href="#梯形图案" class="headerlink" title="梯形图案"></a>梯形图案</h2><p>看下面这段样式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 10px; </span><br><span class="line">  height: 10px; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #0000ff #339966 #00ff00</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：</p>
+<h2 id="更进一步-–-部分边框透明"><a href="#更进一步-–-部分边框透明" class="headerlink" title="更进一步 – 部分边框透明"></a>更进一步 – 部分边框透明</h2><p>现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width:10px; </span><br><span class="line">  height:10px; </span><br><span class="line">  border:10px solid; </span><br><span class="line">  border-color:#ff3300 #ffffff #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下图（截自Firefox3.5）：</p>
+<h2 id="从梯形到三角"><a href="#从梯形到三角" class="headerlink" title="从梯形到三角"></a>从梯形到三角</h2><p>上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下（依旧截图自Firefox3.5）：</p>
+<h2 id="从等腰直角三角形到普通等腰三角"><a href="#从等腰直角三角形到普通等腰三角" class="headerlink" title="从等腰直角三角形到普通等腰三角"></a>从等腰直角三角形到普通等腰三角</h2><p>上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>得到的结果如下图：</p>
+<h2 id="从等腰到不等腰"><a href="#从等腰到不等腰" class="headerlink" title="从等腰到不等腰"></a>从等腰到不等腰</h2><p>我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="实际的应用"><a href="#实际的应用" class="headerlink" title="实际的应用"></a>实际的应用</h2><p>关于应用，不多说，直接看图：<br>说明：<br>以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&amp;Dashed终极分析及IE6透明边框。</p>
+<h1 id="CSS-border圆角生成技术简介"><a href="#CSS-border圆角生成技术简介" class="headerlink" title="CSS border圆角生成技术简介"></a>CSS border圆角生成技术简介</h1><h2 id="我看圆角"><a href="#我看圆角" class="headerlink" title="我看圆角"></a>我看圆角</h2><p>一提到圆角，我脑中闪过的词就是“定位”，“嵌套”，“模拟”，“渐进增强”，“滥用”。</p>
+<ul>
+<li>定位，也就是切四个角上下左右定位，这是淘宝首页的做法，但是面对IE6的奇偶bug只能当作看客；</li>
+<li>使用“嵌套”则不会有此问题，“嵌套”分图片背景嵌套和CSS边框嵌套，使用图片嵌套则图片的重用性，大小优化有待加强，边框嵌套则技术实现上有些难度；</li>
+<li>或使用“渐进增强”，CSS3 border-radius属性，而不要去鸟IE这类自我感觉良好的浏览器；</li>
+<li>或是学习Google使用CSS模拟，而一般的CSS模拟都是使用左右边框+背景色的方式1像素1像素的拼合成的。这类方法各有优缺点，需根据实际情况采用。对于满眼圆角的设计图我是很不喜欢的，该用则用，切勿为了圆角而圆角。</li>
+</ul>
+<h2 id="border圆角图案生成法"><a href="#border圆角图案生成法" class="headerlink" title="border圆角图案生成法"></a>border圆角图案生成法</h2><p>这里介绍的实现圆角的得到与上面提到的都是不一样的，虽然也属于CSS模拟的范畴，但是其高效的程度确实相当惊人的，可谓最佳实践之一。<br>我们先看看效果，见下图，截自Firefox3.6：<br>上述效果的实现仅仅使用了三个标签，如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; html 代码</span><br><span class="line">&lt;div class&#x3D;&quot;box&quot;&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;top&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;center&quot;&gt;我是一只小小鸟、小小鸟！&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;bot&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.box&#123;</span><br><span class="line">  width:500px;</span><br><span class="line">&#125;</span><br><span class="line">.top&#123;</span><br><span class="line">  border-bottom:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cc0000; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br><span class="line">.center&#123;</span><br><span class="line">  padding:10px 20px; </span><br><span class="line">  color:white; </span><br><span class="line">  font-size:14px; </span><br><span class="line">  background:#cc0000;</span><br><span class="line">&#125;</span><br><span class="line">.bot&#123;</span><br><span class="line">  border-top:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cccccc; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们看看这段代码在IE6下的效果：</p>
+<p>这里的高效在于，仅仅使用了一层标签就模拟了3像素的圆角，按照曾经我对CSS圆角模拟的理解，模拟1像素的圆角需要一层标签(background+borderLeft+borderRight)，两像素的需要两层标签，三像素的需要三层标签。</p>
+<p>有点神奇，但是就像看刘谦的魔术一样，说穿了也就那么回事，其实这里的圆角模拟在本文的上面已经展示了，就是这样图片：</p>
+<p>您可能会疑问，是不是搞错图片啦，这显然不是一个模样的，非也非也，就本质上而言，圆角的实现与上面的梯形图就是同样的东西。现在，盯着上面这张图，我们想象一下，用力的想象，用想花姑娘的那番劲头想象——上面的梯形宽度越来越宽（不是拉伸），一直宽到500像素，是不是与上面实现的圆角的下边缘一致啊？</p>
+<p>也就是说，那个含有“我是一只小小鸟……”文字的圆角图形是有一个上梯形+矩形+下梯形组成的。参见下面的分离效果图：<br>您可以狠狠地点击这里：CSS border圆角生成demo</p>
+<h2 id="局限性"><a href="#局限性" class="headerlink" title="局限性"></a>局限性</h2><p>人无完人，金无足赤，此方法虽然简洁高效，兼容性上佳，但是依然有局限性，在实现实色背景的圆角效果时，此方法可谓首选；如果是纯粹的圆角边框，此方法也可以实现，需要用到边框重叠，但是标签数几乎要翻倍，其权衡效用将大打折扣，反不如其他圆角方法来的实在。</p>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>如果在web制作中，需要用的一些直接可以使用CSS+单标签模拟的图片，我的建议是“毫不犹豫使用CSS模拟”，例如实色的三角，或是实现实色的圆角效果，这可以说是最高效，最利于扩展维护的前端实现方法了。我们需要开阔的思维，而不要仅仅局限于眼前的技术，武侠中所谓的“无招胜有招”还是有着一定的哲学道理的，长远来看，意识与海纳百川的心态比当下的一点技术更来得重要。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2013/06/26/CSS-Triangle-Circle/">CSS border三角、圆角图形生成技术详解</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月26日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2013/06/26/CSS-Triangle-Circle/" title="CSS border三角、圆角图形生成技术详解">https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/CSS%E6%8A%80%E5%B7%A7/" rel="tag"># CSS技巧</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2013/06/17/Read-High-Performance-JavaScript/" rel="prev" title="《高性能JAVASCRIPT》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《高性能JAVASCRIPT》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2015/12/31/Read-Let-your-boss-promote-you/" rel="next" title="《让老板提拔你》读书笔记">
+      《让老板提拔你》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E7%94%9F%E6%88%90%E4%B8%89%E8%A7%92%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">CSS border生成三角技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%88%E6%9E%9C%E6%8A%A2%E9%B2%9C"><span class="nav-number">2.1.</span> <span class="nav-text">效果抢鲜</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A2%AF%E5%BD%A2%E5%9B%BE%E6%A1%88"><span class="nav-number">2.2.</span> <span class="nav-text">梯形图案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5-%E2%80%93-%E9%83%A8%E5%88%86%E8%BE%B9%E6%A1%86%E9%80%8F%E6%98%8E"><span class="nav-number">2.3.</span> <span class="nav-text">更进一步 – 部分边框透明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E6%A2%AF%E5%BD%A2%E5%88%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.4.</span> <span class="nav-text">从梯形到三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E7%9B%B4%E8%A7%92%E4%B8%89%E8%A7%92%E5%BD%A2%E5%88%B0%E6%99%AE%E9%80%9A%E7%AD%89%E8%85%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.5.</span> <span class="nav-text">从等腰直角三角形到普通等腰三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E5%88%B0%E4%B8%8D%E7%AD%89%E8%85%B0"><span class="nav-number">2.6.</span> <span class="nav-text">从等腰到不等腰</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E9%99%85%E7%9A%84%E5%BA%94%E7%94%A8"><span class="nav-number">2.7.</span> <span class="nav-text">实际的应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E5%9C%86%E8%A7%92%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">3.</span> <span class="nav-text">CSS border圆角生成技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E7%9C%8B%E5%9C%86%E8%A7%92"><span class="nav-number">3.1.</span> <span class="nav-text">我看圆角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#border%E5%9C%86%E8%A7%92%E5%9B%BE%E6%A1%88%E7%94%9F%E6%88%90%E6%B3%95"><span class="nav-number">3.2.</span> <span class="nav-text">border圆角图案生成法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B1%80%E9%99%90%E6%80%A7"><span class="nav-number">3.3.</span> <span class="nav-text">局限性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">4.</span> <span class="nav-text">结语</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2013/06/26/CSS-Triangle-Circle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/26/CSS-Triangle-Circle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/26/CSS-Triangle-Circle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '93bfe73edcff43e9a60770160604efce',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2015/12/31/Read-Let-your-boss-promote-you/index.html b/en/2015/12/31/Read-Let-your-boss-promote-you/index.html
new file mode 100644
index 0000000000..6cb577ef74
--- /dev/null
+++ b/en/2015/12/31/Read-Let-your-boss-promote-you/index.html
@@ -0,0 +1,780 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《让老板提拔你》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2015/12/31/Read-Let-your-boss-promote-you/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2015-12-31T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2015/12/31/Read-Let-your-boss-promote-you/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>《让老板提拔你》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《让老板提拔你》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2015/12/31/Read-Let-your-boss-promote-you/">《让老板提拔你》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2015年12月31日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2015/12/31/Read-Let-your-boss-promote-you/" title="《让老板提拔你》读书笔记">https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2013/06/26/CSS-Triangle-Circle/" rel="prev" title="CSS border三角、圆角图形生成技术详解">
+      <i class="fa fa-chevron-left"></i> CSS border三角、圆角图形生成技术详解
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="next" title="《晨间日记的奇迹》读书笔记">
+      《晨间日记的奇迹》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D%E8%87%AA%E5%B7%B1"><span class="nav-number">2.</span> <span class="nav-text">定位自己</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A6%81%E7%B4%A0"><span class="nav-number">2.1.</span> <span class="nav-text">要素</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A5%91%E5%90%88%E5%BA%A6"><span class="nav-number">2.1.1.</span> <span class="nav-text">契合度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%83%E5%A4%A7%E7%A7%98%E8%AF%80"><span class="nav-number">2.1.2.</span> <span class="nav-text">七大秘诀</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E8%B0%88%E8%96%AA%E8%B5%84"><span class="nav-number">2.1.3.</span> <span class="nav-text">如何谈薪资</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%86%E7%9F%A5%E8%AF%86%E5%8D%96%E4%B8%AA%E5%A5%BD%E4%BB%B7%E9%92%B1"><span class="nav-number">2.1.4.</span> <span class="nav-text">将知识卖个好价钱</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%AB%98%E8%96%AA%E6%98%AF%E5%9B%A0%E4%B8%BA%E2%80%9C%E7%89%A9%E6%9C%89%E6%89%80%E5%80%BC%E2%80%9D"><span class="nav-number">2.1.5.</span> <span class="nav-text">高薪是因为“物有所值”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E4%B8%B0%E5%AF%8C%E8%B5%B0%E5%90%91%E6%88%90%E5%8A%9F%E7%BB%8F%E9%AA%8C"><span class="nav-number">2.1.6.</span> <span class="nav-text">失败丰富走向成功经验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%83%BD%E4%B8%BA%E4%BC%81%E4%B8%9A%E5%B8%A6%E6%9D%A5%E4%B8%B0%E5%8E%9A%E7%9A%84%E5%88%A9%E6%B6%A6%E6%89%8D%E6%98%AF%E4%BA%BA%E6%89%8D"><span class="nav-number">2.1.7.</span> <span class="nav-text">能为企业带来丰厚的利润才是人才</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%AB%98%E8%B4%A8%E9%AB%98%E6%95%88%E5%B7%A5%E4%BD%9C%E5%85%A8%E6%94%BB%E7%95%A5"><span class="nav-number">3.</span> <span class="nav-text">高质高效工作全攻略</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8D%E8%A6%81%E5%8F%AA%E6%8A%8A%E8%87%AA%E5%B7%B1%E5%BD%93%E6%88%90%E4%B8%80%E4%B8%AA%E6%89%93%E5%B7%A5%E4%BB%94"><span class="nav-number">4.</span> <span class="nav-text">不要只把自己当成一个打工仔</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8E%E4%B8%8A%E5%8F%B8%E7%9B%B8%E5%A4%84"><span class="nav-number">5.</span> <span class="nav-text">与上司相处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">6.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c3e23825c7c255ec0d2eabae78434d16',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html b/en/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
new file mode 100644
index 0000000000..d119700422
--- /dev/null
+++ b/en/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
@@ -0,0 +1,688 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《晨间日记的奇迹》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2016-10-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>《晨间日记的奇迹》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《晨间日记的奇迹》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/">《晨间日记的奇迹》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2016年10月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" title="《晨间日记的奇迹》读书笔记">https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2015/12/31/Read-Let-your-boss-promote-you/" rel="prev" title="《让老板提拔你》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《让老板提拔你》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/08/29/browser-incompatibility-problem-solution/" rel="next" title="浏览器兼容性问题解决方案">
+      浏览器兼容性问题解决方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%97%A9%E4%B8%8A%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E5%A5%BD%E5%A4%84-%E2%80%94%E2%80%94-%E6%8F%90%E5%8D%87%E6%95%88%E7%8E%87"><span class="nav-number">2.</span> <span class="nav-text">早上写日记的好处 —— 提升效率</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">注意事项</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B02%E9%83%A8%E5%88%86"><span class="nav-number">4.</span> <span class="nav-text">晨间日记2部分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Part1"><span class="nav-number">4.1.</span> <span class="nav-text">Part1</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Part2"><span class="nav-number">4.2.</span> <span class="nav-text">Part2</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A4%9C%E6%99%9A%E6%97%A5%E8%AE%B0-VS-%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0"><span class="nav-number">5.</span> <span class="nav-text">夜晚日记 VS 晨间日记</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A2%A6%E6%83%B3%E6%88%90%E7%9C%9F%E8%A1%A8"><span class="nav-number">6.</span> <span class="nav-text">梦想成真表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%97%A9%E8%B5%B7"><span class="nav-number">7.</span> <span class="nav-text">如何早起</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E4%BA%94%E5%A4%A7%E5%A5%BD%E5%A4%84"><span class="nav-number">8.</span> <span class="nav-text">写日记的五大好处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%B0%E5%BD%95%E7%9A%84%E6%97%A5%E8%AE%B0%E8%A6%81%E5%B8%B8%E6%8B%BF%E5%87%BA%E6%9D%A5%E7%9C%8B%E7%9C%8B"><span class="nav-number">9.</span> <span class="nav-text">记录的日记要常拿出来看看</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%83%E7%A7%8D%E6%88%90%E5%8A%9F%E8%80%85%E7%9A%84%E4%B9%A0%E6%83%AF"><span class="nav-number">10.</span> <span class="nav-text">七种成功者的习惯</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0%E7%9A%84%E6%A0%BC%E5%BC%8F"><span class="nav-number">11.</span> <span class="nav-text">晨间日记的格式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E5%A4%A7%E5%8E%9F%E5%88%99%E5%92%8C%E4%B8%83%E5%A4%A7%E4%BD%9C%E6%88%98%E5%AE%88%E5%88%99"><span class="nav-number">12.</span> <span class="nav-text">三大原则和七大作战守则</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E8%AF%A5%E5%85%88%E8%82%AF%E5%AE%9A%E8%87%AA%E5%B7%B1%EF%BC%8C%E7%BB%99%E8%87%AA%E5%B7%B1%E6%89%93100%E5%88%86"><span class="nav-number">13.</span> <span class="nav-text">应该先肯定自己，给自己打100分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E2%80%94-%E8%AE%BE%E7%AB%8B%E4%B8%80%E4%B8%AA%E6%83%85%E5%A2%83"><span class="nav-number">13.1.</span> <span class="nav-text">解决办法— 设立一个情境</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%90%E5%88%B0%E7%9A%84%E5%8F%A6%E5%A4%96%E7%9A%84%E4%B9%A6"><span class="nav-number">14.</span> <span class="nav-text">提到的另外的书</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '76258b87a31d9dfe848acd0db8a44958',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/08/29/browser-incompatibility-problem-solution/index.html b/en/2017/08/29/browser-incompatibility-problem-solution/index.html
new file mode 100644
index 0000000000..45bc2a25ff
--- /dev/null
+++ b/en/2017/08/29/browser-incompatibility-problem-solution/index.html
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="浏览器兼容性问题解决方案">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/08/29/browser-incompatibility-problem-solution/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960">
+<meta property="article:published_time" content="2017-08-29T17:04:31.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="CSS">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/08/29/browser-incompatibility-problem-solution/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>浏览器兼容性问题解决方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          浏览器兼容性问题解决方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+<span id="more"></span>
+<p><strong>普及</strong>：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。</p>
+<p><strong>贴士</strong>：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。</p>
+<h4 id="Normalize-css"><a href="#Normalize-css" class="headerlink" title="Normalize.css"></a>Normalize.css</h4><p>不同浏览器的默认样式存在差异，可以使用 <code>Normalize.css</code>抹平这些差异。当然，你也可以定制属于自己业务的 <code>reset.css</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link href&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;normalize&#x2F;7.0.0&#x2F;normalize.min.css&quot; rel&#x3D;&quot;stylesheet&quot;&gt;</span><br></pre></td></tr></table></figure>
+<p>简单粗暴法</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123; margin: 0; padding: 0; &#125;</span><br></pre></td></tr></table></figure>
+<h4 id="html5shiv-js"><a href="#html5shiv-js" class="headerlink" title="html5shiv.js"></a>html5shiv.js</h4><p>解决 ie9 以下浏览器对 html5 新增标签不识别的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--[if lt IE 9]&gt;</span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;html5shiv&#x2F;3.7.3&#x2F;html5shiv.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;![endif]--&gt;</span><br></pre></td></tr></table></figure>
+<!-- more -->
+<h4 id="respond-js"><a href="#respond-js" class="headerlink" title="respond.js"></a>respond.js</h4><p>解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;picturefill&#x2F;3.0.3&#x2F;picturefill.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="IE-条件注释"><a href="#IE-条件注释" class="headerlink" title="IE 条件注释"></a>IE 条件注释</h4><p>IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="IE-属性过滤器（较为常用的hack方法）"><a href="#IE-属性过滤器（较为常用的hack方法）" class="headerlink" title="IE 属性过滤器（较为常用的hack方法）"></a>IE 属性过滤器（较为常用的hack方法）</h4><p>针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960" alt="image"><br><img src="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="浏览器-CSS-兼容前缀"><a href="#浏览器-CSS-兼容前缀" class="headerlink" title="浏览器 CSS 兼容前缀"></a>浏览器 CSS 兼容前缀</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">-o-transform:rotate(7deg); &#x2F;&#x2F; Opera</span><br><span class="line"></span><br><span class="line">-ms-transform:rotate(7deg); &#x2F;&#x2F; IE</span><br><span class="line"></span><br><span class="line">-moz-transform:rotate(7deg); &#x2F;&#x2F; Firefox</span><br><span class="line"></span><br><span class="line">-webkit-transform:rotate(7deg); &#x2F;&#x2F; Chrome</span><br><span class="line"></span><br><span class="line">transform:rotate(7deg); &#x2F;&#x2F; 统一标识语句</span><br></pre></td></tr></table></figure>
+<p><em><strong>补充：</strong></em> 目前可以采用自动化插件完成，插件名称叫做 <code>Autoprefixer</code>，他可以解析css文件并且添加前缀到css内容里。</p>
+<p>把 <code>Auroprefixer</code> 添加到资源构建工具如：<code>webpack</code>后，就可以不用再手动补全浏览器前缀了，这里只需要你按照W3C的标准来书写css代码，剩下的工作就交给插件完成，目前<code>webpack</code>、<code>gulp</code>、<code>grunt</code>都有相应的插件，是不是开心啊。</p>
+<h4 id="a-标签的几种-CSS-状态的顺序"><a href="#a-标签的几种-CSS-状态的顺序" class="headerlink" title="a 标签的几种 CSS 状态的顺序"></a>a 标签的几种 CSS 状态的顺序</h4><p>很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。</p>
+<p>正确的a标签顺序应该是：<code>==love hate==</code></p>
+<ol>
+<li>link:平常的状态</li>
+<li>visited:被访问过之后</li>
+<li>hover:鼠标放到链接上的时候</li>
+<li>active:链接被按下的时候</li>
+</ol>
+<h4 id="完美解决-Placeholder"><a href="#完美解决-Placeholder" class="headerlink" title="完美解决 Placeholder"></a>完美解决 <code>Placeholder</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; value&#x3D;&quot;Name *&quot; onFocus&#x3D;&quot;this.value &#x3D; &#39;&#39;;&quot; onBlur&#x3D;&quot;if (this.value &#x3D;&#x3D; &#39;&#39;) &#123;this.value &#x3D; &#39;Name *&#39;;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
+
+<h4 id="清除浮动-最佳实践"><a href="#清除浮动-最佳实践" class="headerlink" title="清除浮动 最佳实践"></a>清除浮动 最佳实践</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.fl &#123; float: left; &#125;</span><br><span class="line">.fr &#123; float: right; &#125;</span><br><span class="line">.clearfix:after &#123; display: block; clear: both; content: &quot;&quot;; visibility: hidden; height: 0; &#125;</span><br><span class="line">.clearfix &#123; zoom: 1; &#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="BFC-解决边距重叠问题"><a href="#BFC-解决边距重叠问题" class="headerlink" title="BFC 解决边距重叠问题"></a>BFC 解决边距重叠问题</h4><p>当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：<code>overflow: hidden</code>;</p>
+<div class="box" id="box">
+  <p>Lorem ipsum dolor sit.</p>
+
+  <div style="overflow: hidden;">
+    <p>Lorem ipsum dolor sit.</p>
+  </div>
+
+  <p>Lorem ipsum dolor sit.</p>
+</div>
+
+<h4 id="IE6-双倍边距的问题"><a href="#IE6-双倍边距的问题" class="headerlink" title="IE6 双倍边距的问题"></a>IE6 双倍边距的问题</h4><p>设置 ie6 中设置浮动，同时又设置 <code>margin</code>，会出现双倍边距的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: inline;</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE9-以下浏览器不能使用-opacity"><a href="#解决-IE9-以下浏览器不能使用-opacity" class="headerlink" title="解决 IE9 以下浏览器不能使用 opacity"></a>解决 IE9 以下浏览器不能使用 opacity</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">opacity: 0.5;</span><br><span class="line">filter: alpha(opacity &#x3D; 50);</span><br><span class="line">filter: progid:DXImageTransform.Microsoft.Alpha(style &#x3D; 0, opacity &#x3D; 50);</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"><a href="#解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题" class="headerlink" title="解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"></a>解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;* IE6 hack *&#x2F;</span><br><span class="line">*html, *html body &#123;</span><br><span class="line">  background-image: url(about:blank);</span><br><span class="line">  background-attachment: fixed;</span><br><span class="line">&#125;</span><br><span class="line">*html #menu &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: expression(((e&#x3D;document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + &#39;px&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-背景闪烁的问题"><a href="#IE6-背景闪烁的问题" class="headerlink" title="IE6 背景闪烁的问题"></a>IE6 背景闪烁的问题</h4><p>问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载</p>
+<p>解决：可以用 JavaScript 设置 ie6 缓存这些图片：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.execCommand(&quot;BackgroundImageCache&quot;, false, true);</span><br></pre></td></tr></table></figure>
+<h4 id="解决在-IE6-下，列表与日期错位的问题"><a href="#解决在-IE6-下，列表与日期错位的问题" class="headerlink" title="解决在 IE6 下，列表与日期错位的问题"></a>解决在 IE6 下，列表与日期错位的问题</h4><p>日期<span> 标签放在标题 <a> 标签之前即可<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="解决-IE6-不支持-min-height-属性的问题"><a href="#解决-IE6-不支持-min-height-属性的问题" class="headerlink" title="解决 IE6 不支持 min-height 属性的问题"></a>解决 IE6 不支持 min-height 属性的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">min-height: 350px;</span><br><span class="line">_height: 350px;</span><br></pre></td></tr></table></figure>
+
+<h4 id="让-IE7-IE8-支持-CSS3-background-size属性"><a href="#让-IE7-IE8-支持-CSS3-background-size属性" class="headerlink" title="让 IE7 IE8 支持 CSS3 background-size属性"></a>让 IE7 IE8 支持 CSS3 background-size属性</h4><p>由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">html &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">body &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">  margin: 0;</span><br><span class="line">  padding: 0;</span><br><span class="line">  background-image: url(&#39;img&#x2F;37.png&#39;);</span><br><span class="line">  background-repeat: no-repeat;</span><br><span class="line">  background-size: cover;</span><br><span class="line">  -ms-behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">  behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-7-line-height-失效的问题"><a href="#IE6-7-line-height-失效的问题" class="headerlink" title="IE6-7 line-height 失效的问题"></a>IE6-7 line-height 失效的问题</h4><p>问题：在ie 中 img 与文字放一起时，line-height 不起作用</p>
+<p>解决：都设置成 float</p>
+<h4 id="td-自动换行的问题"><a href="#td-自动换行的问题" class="headerlink" title="td 自动换行的问题"></a>td 自动换行的问题</h4><p>问题：table 宽度固定，td 自动换行</p>
+<p>解决：设置 <code>Tabl</code>e 为 <code>table-layout: fixed</code>，<code>td</code> 为 <code>word-wrap: break-word</code></p>
+<h4 id="让层显示在-FLASH-之上"><a href="#让层显示在-FLASH-之上" class="headerlink" title="让层显示在 FLASH 之上"></a>让层显示在 FLASH 之上</h4><p>想让层的内容显示在 flash 上，把 FLASH 设置透明即可</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1、&lt;param name&#x3D;&quot; wmode &quot; value&#x3D;&quot;transparent&quot; &#x2F;&gt;</span><br><span class="line">2、&lt;param name&#x3D;&quot;wmode&quot; value&#x3D;&quot;opaque&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="键盘事件-keyCode-兼容性写法"><a href="#键盘事件-keyCode-兼容性写法" class="headerlink" title="键盘事件 keyCode 兼容性写法"></a>键盘事件 keyCode 兼容性写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var inp &#x3D; document.getElementById(&#39;inp&#39;)</span><br><span class="line">var result &#x3D; document.getElementById(&#39;result&#39;)</span><br><span class="line"></span><br><span class="line">function getKeyCode(e) &#123;</span><br><span class="line">  e &#x3D; e ? e : (window.event ? window.event : &quot;&quot;)</span><br><span class="line">  return e.keyCode ? e.keyCode : e.which</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">inp.onkeypress &#x3D; function(e) &#123;</span><br><span class="line">  result.innerHTML &#x3D; getKeyCode(e)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="求窗口大小的兼容写法"><a href="#求窗口大小的兼容写法" class="headerlink" title="求窗口大小的兼容写法"></a>求窗口大小的兼容写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 525</span><br><span class="line">var client_w &#x3D; document.documentElement.clientWidth || document.body.clientWidth;</span><br><span class="line">var client_h &#x3D; document.documentElement.clientHeight || document.body.clientHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高（包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var scroll_w &#x3D; document.documentElement.scrollWidth || document.body.scrollWidth;</span><br><span class="line">var scroll_h &#x3D; document.documentElement.scrollHeight || document.body.scrollHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高 (不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var offset_w &#x3D; document.documentElement.offsetWidth || document.body.offsetWidth;</span><br><span class="line">var offset_h &#x3D; document.documentElement.offsetHeight || document.body.offsetHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 滚动的高度</span><br><span class="line">var scroll_Top &#x3D; document.documentElement.scrollTop||document.body.scrollTop;</span><br></pre></td></tr></table></figure>
+<h4 id="DOM-事件处理程序的兼容写法（能力检测）"><a href="#DOM-事件处理程序的兼容写法（能力检测）" class="headerlink" title="DOM 事件处理程序的兼容写法（能力检测）"></a>DOM 事件处理程序的兼容写法（能力检测）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">var eventshiv &#x3D; &#123;</span><br><span class="line">    &#x2F;&#x2F; event兼容</span><br><span class="line">    getEvent: function(event) &#123;</span><br><span class="line">        return event ? event : window.event;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; type兼容</span><br><span class="line">    getType: function(event) &#123;</span><br><span class="line">        return event.type;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; target兼容</span><br><span class="line">    getTarget: function(event) &#123;</span><br><span class="line">        return event.target ? event.target : event.srcelem;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件句柄</span><br><span class="line">    addHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.addEventListener) &#123;</span><br><span class="line">            elem.addEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.attachEvent) &#123;</span><br><span class="line">            elem.attachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            &#x2F;&#x2F; 在这里由于.与&#39;on&#39;字符串不能链接，只能用 []</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; listener;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 移除事件句柄</span><br><span class="line">    removeHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.removeEventListener) &#123;</span><br><span class="line">            elem.removeEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.detachEvent) &#123;</span><br><span class="line">            elem.detachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; null;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件代理</span><br><span class="line">    addAgent: function (elem, type, agent, listener) &#123;</span><br><span class="line">        elem.addEventListener(type, function (e) &#123;</span><br><span class="line">            if (e.target.matches(agent)) &#123;</span><br><span class="line">                listener.call(e.target, e); &#x2F;&#x2F; this 指向 e.target</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 取消默认行为</span><br><span class="line">    preventDefault: function(event) &#123;</span><br><span class="line">        if (event.preventDefault) &#123;</span><br><span class="line">            event.preventDefault();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.returnValue &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 阻止事件冒泡</span><br><span class="line">    stopPropagation: function(event) &#123;</span><br><span class="line">        if (event.stopPropagation) &#123;</span><br><span class="line">            event.stopPropagation();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.cancelBubble &#x3D; true;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/08/29/browser-incompatibility-problem-solution/">浏览器兼容性问题解决方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月29日 - 17:04</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/08/29/browser-incompatibility-problem-solution/" title="浏览器兼容性问题解决方案">https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/en/tags/CSS/" rel="tag"># CSS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="prev" title="《晨间日记的奇迹》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《晨间日记的奇迹》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/npm-source/" rel="next" title="npm相关资料">
+      npm相关资料 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Normalize-css"><span class="nav-number">1.0.0.1.</span> <span class="nav-text">Normalize.css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html5shiv-js"><span class="nav-number">1.0.0.2.</span> <span class="nav-text">html5shiv.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#respond-js"><span class="nav-number">1.0.0.3.</span> <span class="nav-text">respond.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A"><span class="nav-number">1.0.0.4.</span> <span class="nav-text">IE 条件注释</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E5%B1%9E%E6%80%A7%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%88%E8%BE%83%E4%B8%BA%E5%B8%B8%E7%94%A8%E7%9A%84hack%E6%96%B9%E6%B3%95%EF%BC%89"><span class="nav-number">1.0.0.5.</span> <span class="nav-text">IE 属性过滤器（较为常用的hack方法）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8-CSS-%E5%85%BC%E5%AE%B9%E5%89%8D%E7%BC%80"><span class="nav-number">1.0.0.6.</span> <span class="nav-text">浏览器 CSS 兼容前缀</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%87%A0%E7%A7%8D-CSS-%E7%8A%B6%E6%80%81%E7%9A%84%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.0.7.</span> <span class="nav-text">a 标签的几种 CSS 状态的顺序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3-Placeholder"><span class="nav-number">1.0.0.8.</span> <span class="nav-text">完美解决 Placeholder</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.0.0.9.</span> <span class="nav-text">清除浮动 最佳实践</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC-%E8%A7%A3%E5%86%B3%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.10.</span> <span class="nav-text">BFC 解决边距重叠问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E5%8F%8C%E5%80%8D%E8%BE%B9%E8%B7%9D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.11.</span> <span class="nav-text">IE6 双倍边距的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE9-%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8-opacity"><span class="nav-number">1.0.0.12.</span> <span class="nav-text">解决 IE9 以下浏览器不能使用 opacity</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-fixed-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BB%A5%E5%8F%8AIE6%E4%B8%8B%E8%A2%AB%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E5%85%83%E7%B4%A0%E5%9C%A8%E6%BB%9A%E5%8A%A8%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E9%97%AA%E5%8A%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.13.</span> <span class="nav-text">解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E8%83%8C%E6%99%AF%E9%97%AA%E7%83%81%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.14.</span> <span class="nav-text">IE6 背景闪烁的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%9C%A8-IE6-%E4%B8%8B%EF%BC%8C%E5%88%97%E8%A1%A8%E4%B8%8E%E6%97%A5%E6%9C%9F%E9%94%99%E4%BD%8D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.15.</span> <span class="nav-text">解决在 IE6 下，列表与日期错位的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-min-height-%E5%B1%9E%E6%80%A7%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.16.</span> <span class="nav-text">解决 IE6 不支持 min-height 属性的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9-IE7-IE8-%E6%94%AF%E6%8C%81-CSS3-background-size%E5%B1%9E%E6%80%A7"><span class="nav-number">1.0.0.17.</span> <span class="nav-text">让 IE7 IE8 支持 CSS3 background-size属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-7-line-height-%E5%A4%B1%E6%95%88%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.18.</span> <span class="nav-text">IE6-7 line-height 失效的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#td-%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.19.</span> <span class="nav-text">td 自动换行的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9%E5%B1%82%E6%98%BE%E7%A4%BA%E5%9C%A8-FLASH-%E4%B9%8B%E4%B8%8A"><span class="nav-number">1.0.0.20.</span> <span class="nav-text">让层显示在 FLASH 之上</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6-keyCode-%E5%85%BC%E5%AE%B9%E6%80%A7%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.21.</span> <span class="nav-text">键盘事件 keyCode 兼容性写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B1%82%E7%AA%97%E5%8F%A3%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.22.</span> <span class="nav-text">求窗口大小的兼容写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95%EF%BC%88%E8%83%BD%E5%8A%9B%E6%A3%80%E6%B5%8B%EF%BC%89"><span class="nav-number">1.0.0.23.</span> <span class="nav-text">DOM 事件处理程序的兼容写法（能力检测）</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cd59f90225253f05bd230390923acefb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/08/30/Vue-VSCode-Snippets/index.html b/en/2017/08/30/Vue-VSCode-Snippets/index.html
new file mode 100644
index 0000000000..b4c171ba6c
--- /dev/null
+++ b/en/2017/08/30/Vue-VSCode-Snippets/index.html
@@ -0,0 +1,777 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/08/30/Vue-VSCode-Snippets/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-08-30T16:23:17.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/08/30/Vue-VSCode-Snippets/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+<span id="more"></span>
+
+<p>此插件可用比较简单的写法生成代码片段，非常适合开发工作，减少代码工作量。</p>
+<p>Script</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vdata</td>
+<td>Component data as a function</td>
+</tr>
+<tr>
+<td>vmethod</td>
+<td>Vue method</td>
+</tr>
+<tr>
+<td>vcomputed</td>
+<td>Vue computed property</td>
+</tr>
+<tr>
+<td>vwatcher</td>
+<td>Vue watcher with new and old value args</td>
+</tr>
+<tr>
+<td>vprops</td>
+<td>Props with type and default</td>
+</tr>
+<tr>
+<td>vimport</td>
+<td>Import one component into another</td>
+</tr>
+<tr>
+<td>vimport-c</td>
+<td>Import one component into another within the export statement</td>
+</tr>
+<tr>
+<td>vimport-export</td>
+<td>Import one component into another and use it within the export statement</td>
+</tr>
+<tr>
+<td>vfilter</td>
+<td>Vue filter</td>
+</tr>
+<tr>
+<td>vmixin</td>
+<td>Create a Vue Mixin</td>
+</tr>
+<tr>
+<td>vmixin-use</td>
+<td>Bring a mixin into a component to use</td>
+</tr>
+<tr>
+<td>vc-direct</td>
+<td>Vue create a custom directive</td>
+</tr>
+<tr>
+<td>vimport-lib</td>
+<td>Import a library</td>
+</tr>
+<tr>
+<td>vimport-gsap</td>
+<td>Import GreenSock with Timeline and Eases</td>
+</tr>
+<tr>
+<td>vanimhook-js</td>
+<td>Using the Transition component JS hooks in methods</td>
+</tr>
+</tbody></table>
+<!-- more -->
+<p>Template</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vfor</td>
+<td>v-for directive</td>
+</tr>
+<tr>
+<td>vmodel</td>
+<td>Semantic v-model directive</td>
+</tr>
+<tr>
+<td>vmodel-num</td>
+<td>Semantic v-model number directive</td>
+</tr>
+<tr>
+<td>von</td>
+<td>v-on click handler with arguments</td>
+</tr>
+<tr>
+<td>vel-props</td>
+<td>Component element with props</td>
+</tr>
+<tr>
+<td>vsrc</td>
+<td>Image src binding</td>
+</tr>
+<tr>
+<td>vstyle</td>
+<td>Inline style binding</td>
+</tr>
+<tr>
+<td>vstyle-obj</td>
+<td>Inline style binding with objects</td>
+</tr>
+<tr>
+<td>vclass</td>
+<td>Class binding</td>
+</tr>
+<tr>
+<td>vclass-obj</td>
+<td>Class binding with objects</td>
+</tr>
+<tr>
+<td>vclass-obj-mult</td>
+<td>Multiple conditional class bindings</td>
+</tr>
+<tr>
+<td>vanim</td>
+<td>Transition component with JS hooks</td>
+</tr>
+</tbody></table>
+<p>Vuex</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vstore</td>
+<td>Base for Vuex store.js</td>
+</tr>
+<tr>
+<td>vgetters</td>
+<td>Vuex Getter</td>
+</tr>
+<tr>
+<td>vmutation</td>
+<td>Vuex Mutation</td>
+</tr>
+<tr>
+<td>vaction</td>
+<td>Vuex Action</td>
+</tr>
+<tr>
+<td>vstore-import</td>
+<td>Import vuex store into main.js</td>
+</tr>
+</tbody></table>
+<p>Extra (plaintext)</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>gitignore</td>
+<td>.gitignore file presets</td>
+</tr>
+<tr>
+<td>vinc</td>
+<td>incrementer</td>
+</tr>
+<tr>
+<td>vdec</td>
+<td>decrementer</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/08/30/Vue-VSCode-Snippets/">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 16:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/08/30/Vue-VSCode-Snippets/" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+              <a href="/en/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/npm-source/" rel="prev" title="npm相关资料">
+      <i class="fa fa-chevron-left"></i> npm相关资料
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/Vue-basic/" rel="next" title="Vue基础">
+      Vue基础 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '194889182218740512e4bab00fb98c54',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/08/30/Vue-basic/index.html b/en/2017/08/30/Vue-basic/index.html
new file mode 100644
index 0000000000..380beaa7eb
--- /dev/null
+++ b/en/2017/08/30/Vue-basic/index.html
@@ -0,0 +1,739 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue基础">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/08/30/Vue-basic/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-08-30T17:03:05.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/08/30/Vue-basic/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Vue基础 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue基础
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+<span id="more"></span>
+<h3 id="搭建项目"><a href="#搭建项目" class="headerlink" title="搭建项目"></a>搭建项目</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm install --global vue-cli</span><br><span class="line">vue init webpack my-project</span><br><span class="line">cd my-project</span><br><span class="line">npm install（推荐用cnpm install）</span><br><span class="line">如果没有cnpm ，先安装cnpm镜像</span><br><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>
+<h3 id="目录讲解"><a href="#目录讲解" class="headerlink" title="目录讲解"></a>目录讲解</h3><blockquote>
+<ul>
+<li>build和config ：项目开发和打包时候的相关配置；</li>
+<li>node_modules ：项目所需要的依赖文件；</li>
+<li>src ：主应用/页面相关文件；<ul>
+<li>assets ： 静态资源文件；</li>
+<li>components ：组件；</li>
+<li>res：资源<ul>
+<li>css： 公共css或是css预处理文件；</li>
+<li>js：   公共js文件</li>
+<li>img：公共图片</li>
+</ul>
+</li>
+<li>router ：路由配置文件；</li>
+<li>views ： 视图文件，其实也是vue组件。按照业务功能划分模块；</li>
+<li>vuex : 状态管理的配置文件；</li>
+<li>App.vue : 主组件；</li>
+<li>main.js： 入口文件，初始化vue实例并使用需要的插件</li>
+</ul>
+</li>
+<li>index.html ： 主html页面；</li>
+<li>dist：webpack打包生成的文件；</li>
+<li>package.json：记录依赖相关信息</li>
+</ul>
+</blockquote>
+<h3 id="文件的加载顺序"><a href="#文件的加载顺序" class="headerlink" title="文件的加载顺序:"></a>文件的加载顺序:</h3><p>当我们执行命令 <code>npm run dev</code>的时候根据配置文件<code>dev-server.js</code>里的相关配置去加载<code>webpack</code>的相关配置文件 在<code>webpack.base.conf</code>里面<code>entry</code>入口文件就配置了<code>app：&#39;./src/main.js&#39;</code> </p>
+<p>所以当我们在运行<code>npm run dev</code>的时候就开始通过<code>main.js</code>执行了。<code>main.js</code> 初始化vue实例并且加载相关配置插件，然后通过<code>app.vue</code>文件去访问各个组件</p>
+<h3 id="Build-dev-server-js主要完成以下几件事情："><a href="#Build-dev-server-js主要完成以下几件事情：" class="headerlink" title="Build/dev-server.js主要完成以下几件事情："></a>Build/dev-server.js主要完成以下几件事情：</h3><ol>
+<li>检查node和npm的版本；</li>
+<li>引入相关插件和配置；</li>
+<li>创建express服务器和webpack编译器；</li>
+<li>配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）；</li>
+<li>挂载代理服务和中间件；</li>
+<li>配置静态资源；</li>
+<li>启动服务器监听特定端口（8080）；</li>
+<li>自动打开浏览器并打开特定网址（localhost:8080）；</li>
+</ol>
+<h3 id="Build-huild-js主要完成以下几件事情："><a href="#Build-huild-js主要完成以下几件事情：" class="headerlink" title="Build/huild.js主要完成以下几件事情："></a>Build/huild.js主要完成以下几件事情：</h3><ol>
+<li>loading动画；</li>
+<li>删除创建目标文件夹；</li>
+<li>webpack编译；</li>
+<li>输出信息</li>
+</ol>
+<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><h4 id="babelrc"><a href="#babelrc" class="headerlink" title=".babelrc"></a>.babelrc</h4><p>设置转码的规则和插件（使用es6语法必须安装插件）</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-preset-es2015</span><br></pre></td></tr></table></figure>
+
+<p>presets 字段是用来设定转码规则;</p>
+<h4 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h4><p>配置文件编码格式的文件</p>
+<ul>
+<li>indent_style:  设置缩进风格，tab或者空格;</li>
+<li>indent_size:  缩进的宽度;</li>
+<li>tab_width:   设置tab的列数。默认是indent_size;</li>
+<li>end_of_line： 换行符，lf、cr和crlf;</li>
+<li>charset：  编码;</li>
+<li>trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符;</li>
+<li>insert_final_newline:   设为true表明使文件以一个空白行结尾;</li>
+<li>root: 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件;</li>
+</ul>
+<h4 id="eslintignore"><a href="#eslintignore" class="headerlink" title=".eslintignore"></a>.eslintignore</h4><p>忽略不符合eslint规范的文件, （一般会忽略掉第三方引用的插件）</p>
+<h4 id="eslintrc-js"><a href="#eslintrc-js" class="headerlink" title=".eslintrc.js"></a>.eslintrc.js</h4><p>定义代码规则</p>
+<h4 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h4><p>配置文件，用于配置不需要加入版本管理的文件</p>
+<h3 id="VUE-文件解释"><a href="#VUE-文件解释" class="headerlink" title=".VUE 文件解释"></a>.VUE 文件解释</h3><ul>
+<li>template： 展示模板</li>
+<li>import ： 导入组件已经js文件</li>
+<li>export default： <ul>
+<li>data：数据源；</li>
+<li>methods：方法；                </li>
+<li>mounted：页面加载之后执行的方法；    </li>
+<li>created：页面生成时加载的方法；</li>
+</ul>
+</li>
+<li>style：  样式代码  其中scoped表示样式作用范围为本vue文件</li>
+</ul>
+<h3 id="网络访问"><a href="#网络访问" class="headerlink" title="网络访问"></a>网络访问</h3><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><ol>
+<li>发送请求：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">axios#request(config)；</span><br><span class="line">axios#get(url[, config])；</span><br><span class="line">axios#delete(url[, config])；</span><br><span class="line">axios#head(url[, config])；</span><br><span class="line">axios#post(url[, data[, config]])；</span><br><span class="line">axios#put(url[, data[, config]])；</span><br><span class="line">axios#patch(url[, data[, config]])；</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>处理响应：</li>
+</ol>
+<ul>
+<li>Promise语法；</li>
+<li>处理结果：then；</li>
+<li>处理异常：catch；</li>
+</ul>
+<ol start="3">
+<li>拦截器（use/reject）：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">axios.interceptors.response.use；</span><br><span class="line">axios.interceptors.rquest.use；</span><br><span class="line">reject(移除请求拦截)</span><br></pre></td></tr></table></figure>
+
+<ol start="4">
+<li>参数：</li>
+</ol>
+<ul>
+<li>json（默认）；</li>
+<li>qs；</li>
+</ul>
+<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><ul>
+<li>Prpos：父组件对子组件；</li>
+<li>自定义事件：子组件对父组件；</li>
+<li>消息总线：任意两个组件；</li>
+<li>状态管理：Vuex（适用于大型单页面开发）</li>
+</ul>
+<h3 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h3><ol>
+<li>配置</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &#39;&#x2F;&#39;,</span><br><span class="line">      name: &#39;Hello&#39;,</span><br><span class="line">      component: Hello</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#39;#app&#39;,</span><br><span class="line">  router,</span><br><span class="line">  template: &#39;&lt;App&#x2F;&gt;&#39;,</span><br><span class="line">  components: &#123; App &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>导航</li>
+</ol>
+<ul>
+<li>push</li>
+<li>replace</li>
+<li>go</li>
+</ul>
+<ol start="3">
+<li>参数传递</li>
+</ol>
+<ul>
+<li>RESTful url参数</li>
+<li>参数查询 query</li>
+<li>锚点  hash: ‘#data’</li>
+</ul>
+<ol start="4">
+<li>嵌套路由</li>
+</ol>
+<ul>
+<li>Children</li>
+</ul>
+<ol start="5">
+<li>钩子</li>
+</ol>
+<ul>
+<li>beforeRouteEnter</li>
+<li>beforeRouteLeave</li>
+</ul>
+<h3 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h3><blockquote>
+<p>Vuex是什么？</p>
+<p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
+</blockquote>
+<ul>
+<li>state里面就是存放的我们所要用到的状态；</li>
+<li>mutations就是存放如何更改状态的方法 ，同步操作；</li>
+<li>getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。</li>
+<li>actions就是mutation的加强版，它可以通过commit</li>
+<li>mutations中的方法来改变状态，最重要的是它可以进行异步操作。 </li>
+<li>modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/08/30/Vue-basic/">Vue基础</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 17:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/08/30/Vue-basic/" title="Vue基础">https://blog.lifesli.com/2017/08/30/Vue-basic/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-basic/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/Vue-VSCode-Snippets/" rel="prev" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      <i class="fa fa-chevron-left"></i> Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="next" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.0.1.</span> <span class="nav-text">搭建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E8%AE%B2%E8%A7%A3"><span class="nav-number">1.0.2.</span> <span class="nav-text">目录讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E7%9A%84%E5%8A%A0%E8%BD%BD%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.3.</span> <span class="nav-text">文件的加载顺序:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-dev-server-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.4.</span> <span class="nav-text">Build&#x2F;dev-server.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-huild-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.5.</span> <span class="nav-text">Build&#x2F;huild.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.0.6.</span> <span class="nav-text">配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#babelrc"><span class="nav-number">1.0.6.1.</span> <span class="nav-text">.babelrc</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#editorconfig"><span class="nav-number">1.0.6.2.</span> <span class="nav-text">.editorconfig</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintignore"><span class="nav-number">1.0.6.3.</span> <span class="nav-text">.eslintignore</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintrc-js"><span class="nav-number">1.0.6.4.</span> <span class="nav-text">.eslintrc.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#gitignore"><span class="nav-number">1.0.6.5.</span> <span class="nav-text">.gitignore</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VUE-%E6%96%87%E4%BB%B6%E8%A7%A3%E9%87%8A"><span class="nav-number">1.0.7.</span> <span class="nav-text">.VUE 文件解释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E8%AE%BF%E9%97%AE"><span class="nav-number">1.0.8.</span> <span class="nav-text">网络访问</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#axios"><span class="nav-number">1.0.8.1.</span> <span class="nav-text">axios</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">1.0.9.</span> <span class="nav-text">组件通信</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1"><span class="nav-number">1.0.10.</span> <span class="nav-text">路由</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86"><span class="nav-number">1.0.11.</span> <span class="nav-text">状态管理</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/08/30/Vue-basic/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-basic/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-basic/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4efe9ad857d013913fa9a55db758c254',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/08/30/npm-source/index.html b/en/2017/08/30/npm-source/index.html
new file mode 100644
index 0000000000..f02f674bcd
--- /dev/null
+++ b/en/2017/08/30/npm-source/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npm相关资料">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/08/30/npm-source/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-08-30T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npm">
+<meta property="article:tag" content="rnpm">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/08/30/npm-source/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>npm相关资料 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npm相关资料
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+<span id="more"></span>
+
+<blockquote>
+<p>npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。</p>
+</blockquote>
+<h2 id="国内优秀npm镜像"><a href="#国内优秀npm镜像" class="headerlink" title="国内优秀npm镜像"></a>国内优秀npm镜像</h2><h3 id="淘宝npm镜像"><a href="#淘宝npm镜像" class="headerlink" title="淘宝npm镜像"></a>淘宝npm镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org/</a></li>
+</ul>
+<h3 id="cnpmjs镜像"><a href="#cnpmjs镜像" class="headerlink" title="cnpmjs镜像"></a>cnpmjs镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://cnpmjs.org/">http://cnpmjs.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://r.cnpmjs.org/">http://r.cnpmjs.org/</a></li>
+</ul>
+<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：</p>
+<h3 id="1-临时使用"><a href="#1-临时使用" class="headerlink" title="1.临时使用"></a>1.临时使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm --registry https:&#x2F;&#x2F;registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure>
+<h3 id="2-持久使用"><a href="#2-持久使用" class="headerlink" title="2.持久使用"></a>2.持久使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 配置后可通过下面方式来验证是否成功</span><br><span class="line">npm config get registry</span><br><span class="line">&#x2F;&#x2F; 或</span><br><span class="line">npm info express</span><br></pre></td></tr></table></figure>
+<h3 id="3-通过cnpm使用"><a href="#3-通过cnpm使用" class="headerlink" title="3.通过cnpm使用"></a>3.通过cnpm使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用</span><br><span class="line">cnpm install express</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/08/30/npm-source/">npm相关资料</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/08/30/npm-source/" title="npm相关资料">https://blog.lifesli.com/2017/08/30/npm-source/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/npm-source/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/npm/" rel="tag"># npm</a>
+              <a href="/en/tags/rnpm/" rel="tag"># rnpm</a>
+              <a href="/en/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/08/29/browser-incompatibility-problem-solution/" rel="prev" title="浏览器兼容性问题解决方案">
+      <i class="fa fa-chevron-left"></i> 浏览器兼容性问题解决方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/Vue-VSCode-Snippets/" rel="next" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%BD%E5%86%85%E4%BC%98%E7%A7%80npm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.</span> <span class="nav-text">国内优秀npm镜像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%98%E5%AE%9Dnpm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.1.</span> <span class="nav-text">淘宝npm镜像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#cnpmjs%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.2.</span> <span class="nav-text">cnpmjs镜像</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.</span> <span class="nav-text">如何使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.1.</span> <span class="nav-text">1.临时使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%8C%81%E4%B9%85%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.2.</span> <span class="nav-text">2.持久使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E9%80%9A%E8%BF%87cnpm%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.3.</span> <span class="nav-text">3.通过cnpm使用</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/08/30/npm-source/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/npm-source/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/npm-source/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f59e4c1b5a92e8c045d540539fc16c0f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html b/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
new file mode 100644
index 0000000000..f13245d11b
--- /dev/null
+++ b/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-10-11T16:18:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+<span id="more"></span>
+
+<h2 id="技术栈选型"><a href="#技术栈选型" class="headerlink" title="技术栈选型"></a>技术栈选型</h2><blockquote>
+<p>这里说是技术栈选型可能并不是很恰当，但又找不到合适的描述，就是把需要的技术介绍一下，如果还不会的，可以自行学习，或者看看我的其他文章。</p>
+</blockquote>
+<ul>
+<li>node（npm），现在node这么火，没用过都不好意思出门，但是如果你还不回的话，就先自行学习安装一下吧。</li>
+<li>Hexo 静态博客程序，其实还有很多，只不过这个比较新，而且搭配Next非常漂亮，就选了它。</li>
+<li>Next 可以说是Hexo的定制系统，不仅仅是做了个皮肤，简洁美观的配置项和官网说明深得我心。</li>
+</ul>
+<h2 id="搭建步骤（安装步骤）"><a href="#搭建步骤（安装步骤）" class="headerlink" title="搭建步骤（安装步骤）"></a>搭建步骤（安装步骤）</h2><h3 id="安装Hexo-Hexo官网"><a href="#安装Hexo-Hexo官网" class="headerlink" title="安装Hexo Hexo官网"></a>安装Hexo <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g &#x2F;&#x2F; 安装hexo的脚手架工具</span><br><span class="line">$ hexo init blog &#x2F;&#x2F; 初始化博客</span><br><span class="line">$ cd blog &#x2F;&#x2F; 返回博客目录</span><br><span class="line">$ npm install &#x2F;&#x2F; 安装依赖</span><br><span class="line">$ hexo server &#x2F;&#x2F; 启动博客</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>怎么样五行代码就生成并运行了一个博客是不是超简单。<br>下面我们看一下生成的博客的目录</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
+<p><code>_config.yml</code>这是博客的配置文件，比如博客名称，副标题，作者等信息都在这个文件里设置。</p>
+<p><code>package.json</code>这是博客的依赖文件可以忽略</p>
+<p><code>scaffolds</code>这是博客的模板目录，当你要写一篇文章时，这里会有文章的默认类型。</p>
+<p><code>source</code>这是博客的网站资源，包括发布的文章（<code>_posts</code>）、关于、分类还有上传文件等。</p>
+<p><code>themes</code>这是博客的皮肤。</p>
+<p>更多配置信息请查阅官网手册</p>
+<h3 id="安装Next主题-Next官网"><a href="#安装Next主题-Next官网" class="headerlink" title="安装Next主题 Next官网"></a>安装Next主题 <a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/">Next官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ cd your-hexo-site</span><br><span class="line">$ git clone https:&#x2F;&#x2F;github.com&#x2F;iissnan&#x2F;hexo-theme-next themes&#x2F;next</span><br></pre></td></tr></table></figure>
+
+<p>然后到<code>_config.yml</code>配置文件将主题配置改成next就可以使用next的皮肤了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>
+<p>皮肤也有配置文件，为跟Hexo进行区分Hexo的配置文件称为<code>站点配置文件</code>， 皮肤配置文件称为<code>主题配置文件</code>。</p>
+<p>对两个配置文件进行简单配置后，符合需求的博客就搭建而成了，这里有个友好的建议，配置文件如果配置不正确将不能正确运行博客，所以在配置前务必保留好原始配置文件，注意配置时不要缺了空格，不要问我为什么知道这个。</p>
+<h3 id="更新博客主题"><a href="#更新博客主题" class="headerlink" title="更新博客主题"></a>更新博客主题</h3><p><a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md">https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md</a></p>
+<h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><p>博客已经搭建好了，接下来就是写博客了，那么如何开始写博客呢，超级简单一行命令足以：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hexo new [layout] &lt;title&gt;  </span><br><span class="line">&#x2F;&#x2F; layout 为模板类型可以省略，title为文章标题，通常可以简写为如下</span><br><span class="line">hexo new title</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>新建命令执行后在<code>_posts</code>的目录下就会生成一个你刚才命名的md后缀的文件，这就是一个MarkDown语法的文件，（如果不了解MarkDown语法的可以去学一下，很简单的符号语言，或者像我一样用支持MarkDown语法的编辑器来写文章。新建的文章打开内容如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">tags:</span><br><span class="line">---</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>非常好理解，title就是标题，date为创建时间，tags是标签方便分类，但是这些并不全，还有些常用的分类没有写上，下面我将常用的进行补充</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">categories: </span><br><span class="line">	- NodeJS</span><br><span class="line">	- npm</span><br><span class="line">tags:</span><br><span class="line">	- npm</span><br><span class="line">	- NodeJS</span><br><span class="line">	- rnpm</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
+<p>这样补充后就有了常见博客的分类和标签的功能，是不是很简单。</p>
+<p>写完文章以后还要执行下面命令，生成静态页面</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate &#x2F;&#x2F; 将md后缀文件生成成静态html文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+
+<p>这样我们就完成了博客的搭建和博客的书写，到现在我们就已经有了一个本地的博客，那么如何将博客上传到GitHub上呢？</p>
+<h2 id="将Blog上传至GitHub"><a href="#将Blog上传至GitHub" class="headerlink" title="将Blog上传至GitHub"></a>将Blog上传至GitHub</h2><p>github是一个代码托管的平台，为了方便描述代码功能，它提供了README.md文件进行说明，但是为了更好的展现，也提供了gitpage的功能，博客是基于这个功能进行的扩展，那么如何用gitpage的功能来实现博客系统呢？</p>
+<h3 id="创建仓库"><a href="#创建仓库" class="headerlink" title="创建仓库"></a>创建仓库</h3><p>创建一个以你的GitHub账号为开头命名的仓库，格式如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GitHub账号名称.github.io</span><br><span class="line">&#x2F;&#x2F; 如</span><br><span class="line">lixuguang.github.io</span><br></pre></td></tr></table></figure>
+<p>然后到blog系统的配置文件<code>_config.yml</code>里配置一下上传路径</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: &lt;repository url&gt;</span><br><span class="line">  </span><br><span class="line">&#x2F;&#x2F; 我的实例</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git@github.com:lixuguang&#x2F;lixuguang.github.io.git</span><br><span class="line">  branch: master</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置好就可以进行部署了，部署也很简单，只需要执行一下下面的命令。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save &#x2F;&#x2F; 安装上传工具</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>稍等一会，如果没有出现什么错误信息，那么你的部署就成功了。之后你就可以访问你的博客了，博客地址如下：<br>https://你的github账号.github.io/<br>我的如下：<br><a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></p>
+<p>现在你是不是已经学会如何利用github搭建一个静态的博客系统了呢，如果你还没有一个自己的技术博客，快来试试吧。</p>
+<h2 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h2><p>是不是觉得命令行还是挺麻烦的，要敲那么一大串字母，哈哈实际上这些常用命令是有缩写方式的，下面给大家介绍一下缩写方式。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo s</span><br><span class="line"></span><br><span class="line">$ hexo generate</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo g</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo d</span><br><span class="line"></span><br><span class="line">$ hexo new</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo n</span><br></pre></td></tr></table></figure>
+
+<p>另外每次发布之前最好执行以下命令，清理当前内容</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>以防出现冲突的情况，具体动作如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g -d &#x2F;&#x2F; 文件生成后立即部署网站</span><br><span class="line">$ hexo d -g &#x2F;&#x2F; 部署之前预先生成静态文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><ol>
+<li>SSH问题</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;lixuguang316@gmail.com&quot;</span><br><span class="line">&#x2F;&#x2F; 填写你自己的github邮箱</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>敲三下回车，之后会在</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">C:\Users\Administrator\.ssh &#x2F;&#x2F; windows下</span><br><span class="line">open ~&#x2F;.ssh &#x2F;&#x2F; Mac下打开ssh文件  </span><br></pre></td></tr></table></figure>
+<p>文件夹下生成两个文件<code>id_rsa</code>（私钥）、<code>id_rsa.pub</code>（公钥），在github上的SSH处添加新的ssh，然后将<code>公钥</code>内容贴到上面起个名字可以叫hexo，保存，然后在git bash下敲击</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh git@github.com</span><br></pre></td></tr></table></figure>
+<p>然后敲<code>yes</code>就可以上传blog代码了<br>怎么样会了么？更多高阶玩法请阅读官方说明文档，文章如有谬误之处请各位指出，如果觉得文章对你有所帮助我将十分开心，如果你喜欢我的文章可以到我的github上点个<code>fork</code>，谢谢你的阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月11日 - 16:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/08/30/Vue-basic/" rel="prev" title="Vue基础">
+      <i class="fa fa-chevron-left"></i> Vue基础
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/us-gitment/" rel="next" title="给博客添加基于github-issue的评论系统">
+      给博客添加基于github-issue的评论系统 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%A0%88%E9%80%89%E5%9E%8B"><span class="nav-number">2.</span> <span class="nav-text">技术栈选型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4%EF%BC%88%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">搭建步骤（安装步骤）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Hexo-Hexo%E5%AE%98%E7%BD%91"><span class="nav-number">3.1.</span> <span class="nav-text">安装Hexo Hexo官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Next%E4%B8%BB%E9%A2%98-Next%E5%AE%98%E7%BD%91"><span class="nav-number">3.2.</span> <span class="nav-text">安装Next主题 Next官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98"><span class="nav-number">3.3.</span> <span class="nav-text">更新博客主题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.</span> <span class="nav-text">写博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%86Blog%E4%B8%8A%E4%BC%A0%E8%87%B3GitHub"><span class="nav-number">5.</span> <span class="nav-text">将Blog上传至GitHub</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E4%BB%93%E5%BA%93"><span class="nav-number">5.1.</span> <span class="nav-text">创建仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E5%B7%A7"><span class="nav-number">6.</span> <span class="nav-text">技巧</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="nav-number">7.</span> <span class="nav-text">常见问题</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8f619f08ce9c99a8de8dc8117c835d7a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/10/12/VSCode-ESLint/index.html b/en/2017/10/12/VSCode-ESLint/index.html
new file mode 100644
index 0000000000..9adf1eb2b4
--- /dev/null
+++ b/en/2017/10/12/VSCode-ESLint/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode ESLint JS代码静态检测工具">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/10/12/VSCode-ESLint/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-10-12T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode">
+<meta property="article:tag" content="ESLint">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/10/12/VSCode-ESLint/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>VSCode ESLint JS代码静态检测工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode ESLint JS代码静态检测工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+<span id="more"></span>
+<h1 id="安装ESLint插件"><a href="#安装ESLint插件" class="headerlink" title="安装ESLint插件"></a>安装ESLint插件</h1><p>打开VSCode编辑器，在左侧右下角有一个安装插件的图标，点击后就可以打开插件市场，输入ESLint，就会有个黄色的图标出现在你面前，不用犹豫双击它，稍等一会它就安装完了，是不是超简单。</p>
+<h1 id="安装NPM依赖"><a href="#安装NPM依赖" class="headerlink" title="安装NPM依赖"></a>安装NPM依赖</h1><p>ESLint插件运行需要一些依赖，对于用过npm包管理工具的人来讲小意思啦，我把代码放到下面，需要的直接粘贴运行就好。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;全局安装eslint</span><br><span class="line">npm i eslint -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到html中的js校验</span><br><span class="line">npm i eslint-plugin-html -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到es2015语法</span><br><span class="line">npm i babel-eslint -g</span><br></pre></td></tr></table></figure>
+<h1 id="配置eslint配置文件到项目根目录"><a href="#配置eslint配置文件到项目根目录" class="headerlink" title="配置eslint配置文件到项目根目录"></a>配置eslint配置文件到项目根目录</h1><p>配置文件名称如下：<br><strong>eslintrc.json</strong><br>内容为：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        &quot;plugins&quot;: [</span><br><span class="line">                &#x2F;&#x2F; &quot;react&quot;,</span><br><span class="line">                &quot;html&quot;</span><br><span class="line">        ],</span><br><span class="line">        &quot;env&quot;: &#123;</span><br><span class="line">                &quot;node&quot;: true,</span><br><span class="line">                &quot;jquery&quot;: true,</span><br><span class="line">                &quot;es6&quot;: true,</span><br><span class="line">                &quot;browser&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;globals&quot;: &#123;</span><br><span class="line">                &quot;angular&quot;: false</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;parser&quot;: &quot;babel-eslint&quot;,</span><br><span class="line">        &quot;rules&quot;: &#123;</span><br><span class="line">                &#x2F;&#x2F;官方文档 http:&#x2F;&#x2F;eslint.org&#x2F;docs&#x2F;rules&#x2F;</span><br><span class="line">                &#x2F;&#x2F;参数：0 关闭，1 警告，2 错误</span><br><span class="line">                &#x2F;&#x2F; &quot;quotes&quot;: [0, &quot;single&quot;],                  &#x2F;&#x2F;建议使用单引号</span><br><span class="line">                &#x2F;&#x2F; &quot;no-inner-declarations&quot;: [0, &quot;both&quot;],     &#x2F;&#x2F;不建议在&#123;&#125;代码块内部声明变量或函数</span><br><span class="line">                &quot;no-extra-boolean-cast&quot;: 1, &#x2F;&#x2F;多余的感叹号转布尔型</span><br><span class="line">                &quot;no-extra-semi&quot;: 1, &#x2F;&#x2F;多余的分号</span><br><span class="line">                &quot;no-extra-parens&quot;: 0, &#x2F;&#x2F;多余的括号</span><br><span class="line">                &quot;no-empty&quot;: 1, &#x2F;&#x2F;空代码块</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;使用前未定义</span><br><span class="line">                &quot;no-use-before-define&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;nofunc&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;complexity&quot;: [0, 10], &#x2F;&#x2F;圈复杂度大于*</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;定义数组或对象最后多余的逗号</span><br><span class="line">                &quot;comma-dangle&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;never&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F; 不允许对全局变量赋值,如 window &#x3D; &#39;abc&#39;</span><br><span class="line">                &quot;no-global-assign&quot;: [&quot;error&quot;, &#123;</span><br><span class="line">                        &#x2F;&#x2F; 定义例外</span><br><span class="line">                        &#x2F;&#x2F; &quot;exceptions&quot;: [&quot;Object&quot;]</span><br><span class="line">                &#125;],</span><br><span class="line">                &quot;no-var&quot;: 0, &#x2F;&#x2F;用let或const替代var</span><br><span class="line">                &quot;no-const-assign&quot;: 2, &#x2F;&#x2F;不允许const重新赋值</span><br><span class="line">                &quot;no-class-assign&quot;: 2, &#x2F;&#x2F;不允许对class重新赋值</span><br><span class="line">                &quot;no-debugger&quot;: 1, &#x2F;&#x2F;debugger 调试代码未删除</span><br><span class="line">                &quot;no-console&quot;: 0, &#x2F;&#x2F;console 未删除</span><br><span class="line">                &quot;no-constant-condition&quot;: 2, &#x2F;&#x2F;常量作为条件</span><br><span class="line">                &quot;no-dupe-args&quot;: 2, &#x2F;&#x2F;参数重复</span><br><span class="line">                &quot;no-dupe-keys&quot;: 2, &#x2F;&#x2F;对象属性重复</span><br><span class="line">                &quot;no-duplicate-case&quot;: 2, &#x2F;&#x2F;case重复</span><br><span class="line">                &quot;no-empty-character-class&quot;: 2, &#x2F;&#x2F;正则无法匹配任何值</span><br><span class="line">                &quot;no-invalid-regexp&quot;: 2, &#x2F;&#x2F;无效的正则</span><br><span class="line">                &quot;no-func-assign&quot;: 2, &#x2F;&#x2F;函数被赋值</span><br><span class="line">                &quot;valid-typeof&quot;: 1, &#x2F;&#x2F;无效的类型判断</span><br><span class="line">                &quot;no-unreachable&quot;: 2, &#x2F;&#x2F;不可能执行到的代码</span><br><span class="line">                &quot;no-unexpected-multiline&quot;: 2, &#x2F;&#x2F;行尾缺少分号可能导致一些意外情况</span><br><span class="line">                &quot;no-sparse-arrays&quot;: 1, &#x2F;&#x2F;数组中多出逗号</span><br><span class="line">                &quot;no-shadow-restricted-names&quot;: 2, &#x2F;&#x2F;关键词与命名冲突</span><br><span class="line">                &quot;no-undef&quot;: 1, &#x2F;&#x2F;变量未定义</span><br><span class="line">                &quot;no-unused-vars&quot;: 1, &#x2F;&#x2F;变量定义后未使用</span><br><span class="line">                &quot;no-cond-assign&quot;: 2, &#x2F;&#x2F;条件语句中禁止赋值操作</span><br><span class="line">                &quot;no-native-reassign&quot;: 2, &#x2F;&#x2F;禁止覆盖原生对象</span><br><span class="line">                &quot;no-mixed-spaces-and-tabs&quot;: 0,</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;代码风格优化 --------------------------------------</span><br><span class="line">                &quot;no-irregular-whitespace&quot;: 0,</span><br><span class="line">                &quot;no-else-return&quot;: 0, &#x2F;&#x2F;在else代码块中return，else是多余的</span><br><span class="line">                &quot;no-multi-spaces&quot;: 0, &#x2F;&#x2F;不允许多个空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;object直接量建议写法 : 后一个空格前面不留空格</span><br><span class="line">                &quot;key-spacing&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;beforeColon&quot;: false,</span><br><span class="line">                                &quot;afterColon&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;block-scoped-var&quot;: 1, &#x2F;&#x2F;变量应在外部上下文中声明，不应在&#123;&#125;代码块中</span><br><span class="line">                &quot;consistent-return&quot;: 1, &#x2F;&#x2F;函数返回值可能是不同类型</span><br><span class="line">                &quot;accessor-pairs&quot;: 1, &#x2F;&#x2F;object getter&#x2F;setter方法需要成对出现</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;换行调用对象方法  点操作符应写在行首</span><br><span class="line">                &quot;dot-location&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;property&quot;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-lone-blocks&quot;: 1, &#x2F;&#x2F;多余的&#123;&#125;嵌套</span><br><span class="line">                &quot;no-labels&quot;: 1, &#x2F;&#x2F;无用的标记</span><br><span class="line">                &quot;no-extend-native&quot;: 1, &#x2F;&#x2F;禁止扩展原生对象</span><br><span class="line">                &quot;no-floating-decimal&quot;: 1, &#x2F;&#x2F;浮点型需要写全 禁止.1 或 2.写法</span><br><span class="line">                &quot;no-loop-func&quot;: 1, &#x2F;&#x2F;禁止在循环体中定义函数</span><br><span class="line">                &quot;no-new-func&quot;: 1, &#x2F;&#x2F;禁止new Function(...) 写法</span><br><span class="line">                &quot;no-self-compare&quot;: 1, &#x2F;&#x2F;不允与自己比较作为条件</span><br><span class="line">                &quot;no-sequences&quot;: 1, &#x2F;&#x2F;禁止可能导致结果不明确的逗号操作符</span><br><span class="line">                &quot;no-throw-literal&quot;: 1, &#x2F;&#x2F;禁止抛出一个直接量 应是Error对象</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允return时有赋值操作</span><br><span class="line">                &quot;no-return-assign&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;always&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允许重复声明</span><br><span class="line">                &quot;no-redeclare&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;builtinGlobals&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不执行的表达式</span><br><span class="line">                &quot;no-unused-expressions&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;allowShortCircuit&quot;: true,</span><br><span class="line">                                &quot;allowTernary&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-useless-call&quot;: 1, &#x2F;&#x2F;无意义的函数call或apply</span><br><span class="line">                &quot;no-useless-concat&quot;: 1, &#x2F;&#x2F;无意义的string concat</span><br><span class="line">                &quot;no-void&quot;: 1, &#x2F;&#x2F;禁用void</span><br><span class="line">                &quot;no-with&quot;: 1, &#x2F;&#x2F;禁用with</span><br><span class="line">                &quot;space-infix-ops&quot;: 0, &#x2F;&#x2F;操作符前后空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;jsdoc</span><br><span class="line">                &quot;valid-jsdoc&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;requireParamDescription&quot;: true,</span><br><span class="line">                                &quot;requireReturnDescription&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;标记未写注释</span><br><span class="line">                &quot;no-warning-comments&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;terms&quot;: [</span><br><span class="line">                                        &quot;todo&quot;,</span><br><span class="line">                                        &quot;fixme&quot;,</span><br><span class="line">                                        &quot;any other term&quot;</span><br><span class="line">                                ],</span><br><span class="line">                                &quot;location&quot;: &quot;anywhere&quot;</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;curly&quot;: 0 &#x2F;&#x2F;if、else、while、for代码块用&#123;&#125;包围</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>eslint就是根据这个配置表来进行js语法校验的。</p>
+<h1 id="最后重启VSCode完成插件安装"><a href="#最后重启VSCode完成插件安装" class="headerlink" title="最后重启VSCode完成插件安装"></a>最后重启VSCode完成插件安装</h1><p>重启后控制台显示ESLint server is running说明插件已经生效，好啦接下来就愉快的写代码吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/10/12/VSCode-ESLint/">VSCode ESLint JS代码静态检测工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/10/12/VSCode-ESLint/" title="VSCode ESLint JS代码静态检测工具">https://blog.lifesli.com/2017/10/12/VSCode-ESLint/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/VSCode/" rel="tag"># VSCode</a>
+              <a href="/en/tags/ESLint/" rel="tag"># ESLint</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/us-gitment/" rel="prev" title="给博客添加基于github-issue的评论系统">
+      <i class="fa fa-chevron-left"></i> 给博客添加基于github-issue的评论系统
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/web-quanzhan/" rel="next" title="《Web全栈工程师的自我修养》读书笔记">
+      《Web全栈工程师的自我修养》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85ESLint%E6%8F%92%E4%BB%B6"><span class="nav-number">2.</span> <span class="nav-text">安装ESLint插件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85NPM%E4%BE%9D%E8%B5%96"><span class="nav-number">3.</span> <span class="nav-text">安装NPM依赖</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEeslint%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%88%B0%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95"><span class="nav-number">4.</span> <span class="nav-text">配置eslint配置文件到项目根目录</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E%E9%87%8D%E5%90%AFVSCode%E5%AE%8C%E6%88%90%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">5.</span> <span class="nav-text">最后重启VSCode完成插件安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/10/12/VSCode-ESLint/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/VSCode-ESLint/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/VSCode-ESLint/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '73ce60bce747ca8e6e57eee2d82464bd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/10/12/us-gitment/index.html b/en/2017/10/12/us-gitment/index.html
new file mode 100644
index 0000000000..94115aafc0
--- /dev/null
+++ b/en/2017/10/12/us-gitment/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给博客添加基于github-issue的评论系统">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/10/12/us-gitment/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-10-12T10:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/10/12/us-gitment/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>给博客添加基于github-issue的评论系统 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给博客添加基于github-issue的评论系统
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+<span id="more"></span>
+<h2 id="第一步-注册一个小程序（OAuth-Application）"><a href="#第一步-注册一个小程序（OAuth-Application）" class="headerlink" title="第一步 注册一个小程序（OAuth Application）"></a>第一步 注册一个小程序（OAuth Application）</h2><p>点击<a target="_blank" rel="noopener" href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a>注册</p>
+<ul>
+<li>Application name 应用名称 这里随便写，我写的就是gitment</li>
+<li>Homepage URL 主页地址，你可以写你的博客地址，我写的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+<li>Application description 应用描述，这里随便写点什么，反正是自己用。</li>
+<li>Authorization callback URL 这个比较重要，请填写你的博客地址，我的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+</ul>
+<p>点击确定以后你会获得两个关键信息，下一步配置时会用到</p>
+<ul>
+<li>Client ID</li>
+<li>Client Secret</li>
+</ul>
+<h2 id="第二步-修改主题配置文件，添加gitment评论功能"><a href="#第二步-修改主题配置文件，添加gitment评论功能" class="headerlink" title="第二步 修改主题配置文件，添加gitment评论功能"></a>第二步 修改主题配置文件，添加gitment评论功能</h2><p>因为用的是next主题，所以配置文件地址如下：<br><strong>themes/next/_config.yml</strong></p>
+<h3 id="1、在其中添加"><a href="#1、在其中添加" class="headerlink" title="1、在其中添加:"></a>1、在其中添加:</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Gitment</span><br><span class="line"># Introduction: https:&#x2F;&#x2F;imsun.net&#x2F;posts&#x2F;gitment-introduction&#x2F;</span><br><span class="line">gitment:</span><br><span class="line">  enable: true</span><br><span class="line">  githubID: yourid &#x2F;&#x2F; 我的是lixuguang</span><br><span class="line">  repo: yourrepo &#x2F;&#x2F; 我的是lixuguang.github.io 必须跟githubID保持一致的用户名</span><br><span class="line">  ClientID: yourid &#x2F;&#x2F; 上面开通程序获得的ClientID</span><br><span class="line">  ClientSecret: yoursecret &#x2F;&#x2F; 上面开通程序获得的Client Secret</span><br><span class="line">  lazy: false &#x2F;&#x2F;是否需要点击展开评论才能可见评论，一般设置为false</span><br></pre></td></tr></table></figure>
+<p><strong>一定要注意空格，不然会报错的，别问我咋知道的</strong></p>
+<h3 id="2、然后在主题的配置语言环境的文件添加一句话"><a href="#2、然后在主题的配置语言环境的文件添加一句话" class="headerlink" title="2、然后在主题的配置语言环境的文件添加一句话"></a>2、然后在主题的配置语言环境的文件添加一句话</h3><p><code>en.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: Show comments from Gitment</span><br></pre></td></tr></table></figure>
+
+<p><code>zh-Hans.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: 显示 Gitment 评论</span><br></pre></td></tr></table></figure>
+<p>如果是中文网站英文配置也可以不用写。</p>
+<h3 id="3、添加新的Dom结构"><a href="#3、添加新的Dom结构" class="headerlink" title="3、添加新的Dom结构"></a>3、添加新的Dom结构</h3><p><strong>修改主题layout/_partials/comments.swig</strong><br>在最后一个elseif分支后添加一个elseif分支：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% elseif theme.gitment.enable %&#125;</span><br><span class="line">       &#123;% if theme.gitment.lazy %&#125;</span><br><span class="line">         &lt;div onclick&#x3D;&quot;ShowGitment()&quot; id&#x3D;&quot;gitment-display-button&quot;&gt;&#123;&#123;  __(&#39;gitmentbutton&#39;) &#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot; style&#x3D;&quot;display:none&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% else %&#125;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig"><a href="#4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig" class="headerlink" title="4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig"></a>4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.gitment.enable %&#125;</span><br><span class="line">   &#123;% set owner &#x3D; theme.gitment.githubID %&#125;</span><br><span class="line">   &#123;% set repo &#x3D; theme.gitment.repo %&#125;</span><br><span class="line">   &#123;% set cid &#x3D; theme.gitment.ClientID %&#125;</span><br><span class="line">   &#123;% set cs &#x3D; theme.gitment.ClientSecret %&#125;</span><br><span class="line">   &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;style&#x2F;default.css&quot;&gt;</span><br><span class="line">   &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;dist&#x2F;gitment.browser.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% if not theme.gitment.lazy %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">               id: window.location.pathname, </span><br><span class="line">               owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">               repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">               oauth: &#123;</span><br><span class="line">                   client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                   client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">               &#125;&#125;);</span><br><span class="line">           gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% else %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           function ShowGitment()&#123;</span><br><span class="line">               document.getElementById(&quot;gitment-display-button&quot;).style.display &#x3D; &quot;none&quot;;</span><br><span class="line">               document.getElementById(&quot;gitment-container&quot;).style.display &#x3D; &quot;block&quot;;</span><br><span class="line">               var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">                   id: document.location.href, </span><br><span class="line">                   owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">                   repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">                   oauth: &#123;</span><br><span class="line">                       client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                       client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">                   &#125;&#125;);</span><br><span class="line">               gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">           &#125;</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% endif %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% include &#39;gitment.swig&#39; %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="在主题下source-css-common-components-third-party-目录下添加gitment-styl文件"><a href="#在主题下source-css-common-components-third-party-目录下添加gitment-styl文件" class="headerlink" title="在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件"></a>在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件</h3><p>此配置文件为gitment的样式文件，需要修改样式可以在这里进行书写，这里修改一下按钮样式，另外将聊天框于文章框样式统一</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">#gitment-display-button&#123;</span><br><span class="line">     display: inline-block;</span><br><span class="line">     padding: 0 15px;</span><br><span class="line">     color: #0a9caf;</span><br><span class="line">     cursor: pointer;</span><br><span class="line">     font-size: 14px;</span><br><span class="line">     border: 1px solid #0a9caf;</span><br><span class="line">     border-radius: 4px;</span><br><span class="line"> &#125;</span><br><span class="line"> #gitment-display-button:hover&#123;</span><br><span class="line">     color: #fff;</span><br><span class="line">     background: #0a9caf;</span><br><span class="line"> &#125;</span><br><span class="line">  #comments &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">    padding: 40px;</span><br><span class="line">    background: #fff;</span><br><span class="line">    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@import &quot;gitment&quot;;</span><br></pre></td></tr></table></figure>
+<p>经过以上操作，gitment就被引入到你的博客里了。</p>
+<p>现在就可以让大家对你写的文章进行评论啦，怎么样是不是又学到啦，喜欢我的文章就请关注我的github吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/10/12/us-gitment/">给博客添加基于github-issue的评论系统</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/10/12/us-gitment/" title="给博客添加基于github-issue的评论系统">https://blog.lifesli.com/2017/10/12/us-gitment/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/us-gitment/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="prev" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      <i class="fa fa-chevron-left"></i> 如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/VSCode-ESLint/" rel="next" title="VSCode ESLint JS代码静态检测工具">
+      VSCode ESLint JS代码静态检测工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5-%E6%B3%A8%E5%86%8C%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%88OAuth-Application%EF%BC%89"><span class="nav-number">1.1.</span> <span class="nav-text">第一步 注册一个小程序（OAuth Application）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5-%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%EF%BC%8C%E6%B7%BB%E5%8A%A0gitment%E8%AF%84%E8%AE%BA%E5%8A%9F%E8%83%BD"><span class="nav-number">1.2.</span> <span class="nav-text">第二步 修改主题配置文件，添加gitment评论功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E5%85%B6%E4%B8%AD%E6%B7%BB%E5%8A%A0"><span class="nav-number">1.2.1.</span> <span class="nav-text">1、在其中添加:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E7%84%B6%E5%90%8E%E5%9C%A8%E4%B8%BB%E9%A2%98%E7%9A%84%E9%85%8D%E7%BD%AE%E8%AF%AD%E8%A8%80%E7%8E%AF%E5%A2%83%E7%9A%84%E6%96%87%E4%BB%B6%E6%B7%BB%E5%8A%A0%E4%B8%80%E5%8F%A5%E8%AF%9D"><span class="nav-number">1.2.2.</span> <span class="nav-text">2、然后在主题的配置语言环境的文件添加一句话</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0%E6%96%B0%E7%9A%84Dom%E7%BB%93%E6%9E%84"><span class="nav-number">1.2.3.</span> <span class="nav-text">3、添加新的Dom结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81-%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Blayout-third-party-comments-%E7%9B%AE%E5%BD%95%E4%B8%8B%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6gitment-swig"><span class="nav-number">1.2.4.</span> <span class="nav-text">4、 在主题下layout&#x2F;_third-party&#x2F;comments&#x2F;目录下中添加文件gitment.swig</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Bsource-css-common-components-third-party-%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%B7%BB%E5%8A%A0gitment-styl%E6%96%87%E4%BB%B6"><span class="nav-number">1.2.5.</span> <span class="nav-text">在主题下source&#x2F;css&#x2F;_common&#x2F;components&#x2F;third-party&#x2F;目录下添加gitment.styl文件</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/10/12/us-gitment/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/us-gitment/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/us-gitment/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2b3d84851f41a4c9b4e02a9e0c192066',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/10/12/web-quanzhan/index.html b/en/2017/10/12/web-quanzhan/index.html
new file mode 100644
index 0000000000..506e8acef7
--- /dev/null
+++ b/en/2017/10/12/web-quanzhan/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《Web全栈工程师的自我修养》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/10/12/web-quanzhan/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-10-12T17:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/10/12/web-quanzhan/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>《Web全栈工程师的自我修养》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《Web全栈工程师的自我修养》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+<span id="more"></span>
+
+<h2 id="什么是全栈"><a href="#什么是全栈" class="headerlink" title="什么是全栈"></a>什么是全栈</h2><p>“全栈”是个外来词，翻译自英文full-stack，此处的栈指的是为了完成项目而使用的一系列技术的合集，不是堆栈概念中的栈。</p>
+<p>“全端”工程师是指能够完成pc端、移动端等多终端设备适配的情况</p>
+<h2 id="什么是全栈工程师"><a href="#什么是全栈工程师" class="headerlink" title="什么是全栈工程师"></a>什么是全栈工程师</h2><blockquote>
+<p>全栈工程师是指一个能够处理数据库、服务器、系统工程、客户端等所有工作的的工程师，根据项目不同，可能是移动栈、Web栈，或者原生应用程序栈。</p>
+</blockquote>
+<p>简单来说全栈工程师就是一个人能搞定一个项目，全能大神一样的人物。</p>
+<h2 id="一个Web产品典型的技术栈"><a href="#一个Web产品典型的技术栈" class="headerlink" title="一个Web产品典型的技术栈"></a>一个Web产品典型的技术栈</h2><blockquote>
+<p>服务器+数据库+服务器端编程语言+前端编程语言</p>
+</blockquote>
+<blockquote>
+<p>全栈工程师技术的兴起有两个重要原因：技术的发展和PaaS（Platform as a Service，平台即服务）服务的平台越来越多。</p>
+</blockquote>
+<h3 id="全栈框架———MEAN"><a href="#全栈框架———MEAN" class="headerlink" title="全栈框架———MEAN"></a>全栈框架———MEAN</h3><blockquote>
+<p>MongoDB-Express-AngularJs-Node.js<br>前后端采用一种编程语言JavaScript</p>
+</blockquote>
+<h2 id="全栈工程师的要求"><a href="#全栈工程师的要求" class="headerlink" title="全栈工程师的要求"></a>全栈工程师的要求</h2><h3 id="一专多长"><a href="#一专多长" class="headerlink" title="一专多长"></a>一专多长</h3><p>在一个领域里至少达到高级的级别，然后再去向上游或者下游延伸</p>
+<h3 id="关注商业目标"><a href="#关注商业目标" class="headerlink" title="关注商业目标"></a>关注商业目标</h3><p>公司聘请你是为了让你产生利润，并不关心你会什么，所以选择技术栈时要考虑的是如何降低公司的成本或者提高收入。</p>
+<h3 id="关注用户体验"><a href="#关注用户体验" class="headerlink" title="关注用户体验"></a>关注用户体验</h3><p>产品的最终目标是满足客户的需求，所以作为全栈工程师必须要关注用户体验。</p>
+<hr>
+<p>这是一些作为全栈工程师我整理出来的干货，这本书本身并不是一本技术性很强的书，倒像是一位过来人介绍些经验，适合刚入职场或者进入职场不久的人，在前端领域比较迷茫时看一看，书中介绍了作者读过的一些书，很有参考性，推荐大家阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/10/12/web-quanzhan/">《Web全栈工程师的自我修养》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 17:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2017/10/12/web-quanzhan/" title="《Web全栈工程师的自我修养》读书笔记">https://blog.lifesli.com/2017/10/12/web-quanzhan/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/web-quanzhan/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/VSCode-ESLint/" rel="prev" title="VSCode ESLint JS代码静态检测工具">
+      <i class="fa fa-chevron-left"></i> VSCode ESLint JS代码静态检测工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2017/12/12/Git-Shell/" rel="next" title="Git的常用命令">
+      Git的常用命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88"><span class="nav-number">1.1.</span> <span class="nav-text">什么是全栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88"><span class="nav-number">1.2.</span> <span class="nav-text">什么是全栈工程师</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E4%B8%AAWeb%E4%BA%A7%E5%93%81%E5%85%B8%E5%9E%8B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">1.3.</span> <span class="nav-text">一个Web产品典型的技术栈</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E6%A1%86%E6%9E%B6%E2%80%94%E2%80%94%E2%80%94MEAN"><span class="nav-number">1.3.1.</span> <span class="nav-text">全栈框架———MEAN</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%9A%84%E8%A6%81%E6%B1%82"><span class="nav-number">1.4.</span> <span class="nav-text">全栈工程师的要求</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%B8%93%E5%A4%9A%E9%95%BF"><span class="nav-number">1.4.1.</span> <span class="nav-text">一专多长</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E5%95%86%E4%B8%9A%E7%9B%AE%E6%A0%87"><span class="nav-number">1.4.2.</span> <span class="nav-text">关注商业目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C"><span class="nav-number">1.4.3.</span> <span class="nav-text">关注用户体验</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/10/12/web-quanzhan/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/web-quanzhan/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/web-quanzhan/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a0acc9f694dd4ae622f5b6a0d03d68c3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2017/12/12/Git-Shell/index.html b/en/2017/12/12/Git-Shell/index.html
new file mode 100644
index 0000000000..019f48d98f
--- /dev/null
+++ b/en/2017/12/12/Git-Shell/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Git的常用命令">
+<meta property="og:url" content="https://blog.lifesli.com/en/2017/12/12/Git-Shell/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-12-12T12:20:20.000Z">
+<meta property="article:modified_time" content="2019-12-31T10:38:57.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Git">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2017/12/12/Git-Shell/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Git的常用命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Git的常用命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2017/12/12/Git-Shell/">Git的常用命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年12月12日 - 12:20</p>
+      <p><span>最后更新:</span>2019年12月31日 - 10:38</p>
+      <p><span>原始链接:</span><a href="/en/2017/12/12/Git-Shell/" title="Git的常用命令">https://blog.lifesli.com/2017/12/12/Git-Shell/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/12/12/Git-Shell/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Git/" rel="tag"># Git</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/10/12/web-quanzhan/" rel="prev" title="《Web全栈工程师的自我修养》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《Web全栈工程师的自我修养》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/27/Vue-Component-Communication/" rel="next" title="前端面试Vue篇：Vue组件通信的几种方式">
+      前端面试Vue篇：Vue组件通信的几种方式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8C%87%E4%BB%A4%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">指令表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2017/12/12/Git-Shell/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/12/12/Git-Shell/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/12/12/Git-Shell/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '74cb97b795db0215faf73b627982bbeb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/27/Actions/index.html b/en/2019/12/27/Actions/index.html
new file mode 100644
index 0000000000..4c016b3cd0
--- /dev/null
+++ b/en/2019/12/27/Actions/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="巧妙利用Acitons进行博客的自动构建">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/27/Actions/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta property="article:tag" content="Github">
+<meta property="article:tag" content="Actions">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/27/Actions/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>巧妙利用Acitons进行博客的自动构建 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          巧妙利用Acitons进行博客的自动构建
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+<span id="more"></span>
+
+<h2 id="GitHub-Actions-是什么"><a href="#GitHub-Actions-是什么" class="headerlink" title="GitHub Actions 是什么"></a>GitHub Actions 是什么</h2><p>GitHub Actions 由 GitHub 官方推出的工作流工具。典型的应用场景应该是 CI/CD，类似 Travis 的用法。如果不知道 CI/CD&amp;Travis 感兴趣的建议去了解一下，下面不展开说明，直接说怎么用就好。</p>
+<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>在使用 <code>GitHub Actions</code> 之前我们先来看看我们有什么；<br>首先我们有一个放博客程序的地方，我这里是叫做 <code>blog-source</code> ，另外呢有一个通过 hexo g 创建出来的静态网站，为了存放它而建的另一个仓库，我这里是叫做<code>lixuguang.github.io</code>,也就是说我们现在是有这样两个仓库。<br>|仓库|作用|<br>|-|-|<br>|blog-source|放博客源代码|<br>|lixuguang.github.io|放博客生成代码|</p>
+<h2 id="生成密钥"><a href="#生成密钥" class="headerlink" title="生成密钥"></a>生成密钥</h2><p>因为 <code>GitHub Actions</code> 它需要访问我的 <code>blog-source</code> 仓库的代码所以必须要有密钥，密钥大家应该熟悉了，创建博客的时候也是创建了一个公钥和私钥用来在本地往 <code>lixuguang.github.io</code> 这个仓库提交代码<br>这里呢我们用下面的命令生成密钥。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -f ~&#x2F;.ssh&#x2F;github-actions-deploy # 连按三次回车即刻</span><br></pre></td></tr></table></figure>
+<p>命令执行完成后，我们会得到两个文件 <code>github-actions-deploy</code> 和 <code>github-actions-deploy.pub</code> 两个文件，第一个是私钥，第二个是公钥。<br>|名称|解释|<br>|-|-|<br>|github-actions-deploy|私钥|<br>|github-actions-deploy.pub|公钥|</p>
+<p>接下来的步骤一定要好好看，因为我在这个地方被卡住好多次，就是因为有的文章说的并不正确，或者至少是讲的不够仔细，这里我会仔细地说明一下。</p>
+<h2 id="配置-GitHub-仓库"><a href="#配置-GitHub-仓库" class="headerlink" title="配置 GitHub 仓库"></a>配置 GitHub 仓库</h2><h3 id="配置博客源代码仓库"><a href="#配置博客源代码仓库" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里的源代码是放在 <code>blog-source</code> 中，所以我现在要给源代码仓库配置<code>私钥</code>，配置过程如下：<br>打开 <code>blog-source</code> 仓库，选择 <code>settings</code>，然后选中 <code>secrets</code> ， 再点击 <code>Add new secrets</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Name|HEXO_DEPLOY_PRI（名称自动构建时有用）|<br>|Value|github-actions-deploy|</p>
+<h3 id="配置博客源代码仓库-1"><a href="#配置博客源代码仓库-1" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里生成的博客静态代码是放在 <code>lixuguang.github.io</code> 中，所以我现在要给静态代码仓库配置<code>公钥</code>，配置过程如下：<br>打开 <code>lixuguang.github.io</code>，选择 <code>settings</code>，然后选中 <code>keys</code>，再点击 <code>Add deploy key</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Title|HEXO_DEPLOY_PUB|<br>|Key|github-actions-deploy.pub|</p>
+<h2 id="编写-Actions-脚本"><a href="#编写-Actions-脚本" class="headerlink" title="编写 Actions 脚本"></a>编写 Actions 脚本</h2><p>经过上面一系列的准备操作，终于来到了编写自动构建脚本的环节，构建脚本如下，如果按照上面我做的操作一步步来的话，那么这一步你可以直接copy啦</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">name: Deploy Blog</span><br><span class="line"></span><br><span class="line">on: [push] # 当有新push时运行</span><br><span class="line"></span><br><span class="line">jobs:</span><br><span class="line">  build: # 一项叫做build的任务</span><br><span class="line"></span><br><span class="line">    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行</span><br><span class="line">    </span><br><span class="line">    steps:</span><br><span class="line">    - name: Checkout # 将仓库内master分支的内容下载到工作目录</span><br><span class="line">      uses: actions&#x2F;checkout@v1 # 脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;checkout</span><br><span class="line">      </span><br><span class="line">    - name: Use Node.js 10.x # 配置Node环境</span><br><span class="line">      uses: actions&#x2F;setup-node@v1 # 配置脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;setup-node</span><br><span class="line">      with:</span><br><span class="line">        node-version: &quot;10.x&quot;</span><br><span class="line">    </span><br><span class="line">    - name: Setup Hexo env</span><br><span class="line">      env:</span><br><span class="line">        HEXO_DEPLOY_PRI: $&#123;&#123; secrets.HEXO_DEPLOY_PRI &#125;&#125; # 这里是上面配置的私钥名称</span><br><span class="line">      run: |</span><br><span class="line">        # set up private key for deploy</span><br><span class="line">        mkdir -p ~&#x2F;.ssh&#x2F;</span><br><span class="line">        echo &quot;$HEXO_DEPLOY_PRI&quot; | tr -d &#39;\r&#39; &gt; ~&#x2F;.ssh&#x2F;id_rsa # 配置秘钥</span><br><span class="line">        chmod 600 ~&#x2F;.ssh&#x2F;id_rsa</span><br><span class="line">        ssh-keyscan github.com &gt;&gt; ~&#x2F;.ssh&#x2F;known_hosts</span><br><span class="line">        # set git infomation</span><br><span class="line">        git config --global user.name &#39;lixuguang&#39; # 换成你自己的名字</span><br><span class="line">        git config --global user.email &#39;lixuguang@gmail.com&#39; # 换成你自己的邮箱</span><br><span class="line">        # install dependencies</span><br><span class="line">        npm i -g hexo-cli # 安装hexo</span><br><span class="line">        npm i</span><br><span class="line">  </span><br><span class="line">    - name: Deploy</span><br><span class="line">      run: |</span><br><span class="line">        # publish</span><br><span class="line">        rm -rf .deploy_git # 如果上次构建失败这句命令会清除上次失败的代码</span><br><span class="line">        hexo generate &amp;&amp; hexo deploy # 执行部署程序</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<hr>
+<p>通过以上这些步骤的操作，如果没什么意外的话，博客的自动构建就完成了，之后只要你提交新的文章到博客源代码仓库，它将自动帮你生成并发送到博客的静态代码仓库，再也不用执行hexo g -d啦，如果这篇文章对你有用，欢迎follow我或打赏一下这篇文章，感谢阅读。</p>
+<p>ps：这里有个小坑需要注意一下，因为博客的皮肤也是另外一个git仓库，如果你在本地构建好用但是线上构建博客不显示了，需要注意下是不是皮肤没有上传到博客源码仓库，这里我遇到了，希望你不会因此困扰，拜拜~</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/27/Actions/">巧妙利用Acitons进行博客的自动构建</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/27/Actions/" title="巧妙利用Acitons进行博客的自动构建">https://blog.lifesli.com/2019/12/27/Actions/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Actions/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Hexo/" rel="tag"># Hexo</a>
+              <a href="/en/tags/Github/" rel="tag"># Github</a>
+              <a href="/en/tags/Actions/" rel="tag"># Actions</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/27/Vue-Component-Communication/" rel="prev" title="前端面试Vue篇：Vue组件通信的几种方式">
+      <i class="fa fa-chevron-left"></i> 前端面试Vue篇：Vue组件通信的几种方式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/30/begin-learn-java/" rel="next" title="重拾java开发技能">
+      重拾java开发技能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#GitHub-Actions-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">1.1.</span> <span class="nav-text">GitHub Actions 是什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E6%9C%9F%E5%87%86%E5%A4%87"><span class="nav-number">1.2.</span> <span class="nav-text">前期准备</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5"><span class="nav-number">1.3.</span> <span class="nav-text">生成密钥</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE-GitHub-%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.</span> <span class="nav-text">配置 GitHub 仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.1.</span> <span class="nav-text">配置博客源代码仓库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93-1"><span class="nav-number">1.4.2.</span> <span class="nav-text">配置博客源代码仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E5%86%99-Actions-%E8%84%9A%E6%9C%AC"><span class="nav-number">1.5.</span> <span class="nav-text">编写 Actions 脚本</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/27/Actions/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Actions/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Actions/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4e5a82326b00db0f90780c24f11ec39a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/27/Vue-Component-Communication/index.html b/en/2019/12/27/Vue-Component-Communication/index.html
new file mode 100644
index 0000000000..c220871081
--- /dev/null
+++ b/en/2019/12/27/Vue-Component-Communication/index.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端面试Vue篇：Vue组件通信的几种方式">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/27/Vue-Component-Communication/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="组件通信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/27/Vue-Component-Communication/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端面试Vue篇：Vue组件通信的几种方式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端面试Vue篇：Vue组件通信的几种方式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+<span id="more"></span>
+
+<h2 id="props和-emit"><a href="#props和-emit" class="headerlink" title="props和$emit"></a><code>props</code>和<code>$emit</code></h2><p>啥也不了解的小伙伴应该也知道这种方式吧，这是最最基础的通信方式了，父子组件通信基本都用它。父组件向子组件传递数据的时候通过prop传参，子组件中通过$emit传递给父组件，父组件在触发子组件$emit方法时得到子组件数据。实例如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 父组件 parent.vue</span><br><span class="line"></span><br><span class="line">Vue.compinent(&#39;parent&#39;, &#123;</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;p&gt;父组件&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;child :message&#x3D;&quot;message&quot; @getChildrenData&#x3D;&quot;getChildrenData&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;&#96;,</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            message:&#39;Hello lixuguang&#39;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        &#x2F;**</span><br><span class="line">        * 执行子组件触发的事件方法 </span><br><span class="line">        *&#x2F;</span><br><span class="line">        getChildrenData(data)&#123;</span><br><span class="line">            console.log(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 子组件 child.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">    props:[&#39;message&#39;], &#x2F;&#x2F; 得到父组件传过来的数据</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            childMessage: this.message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;childMessage&quot; @input&#x3D;&quot;emitParentData(childMessage)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitParentData(data) &#123;</span><br><span class="line">            this.$emit(&#39;getChildrenData&#39;, data) &#x2F;&#x2F; 父组件触发时给父组件传值</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;parent&gt;&lt;&#x2F;parent&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>父组件通过<code>message</code>属性将数据传递给子组件，并且通过<code>getChildrenData</code>事件来监听子组件出发的事件；</li>
+<li>子组件通过<code>props</code>获得父组件传过来的数据，并且通过<code>this.$emit</code>触发了<code>getChildrenData</code>事件;</li>
+</ol>
+<h2 id="attrs和-listeners"><a href="#attrs和-listeners" class="headerlink" title="$attrs和$listeners"></a><code>$attrs</code>和<code>$listeners</code></h2><p>前一种方法我们完成了父子组件的数据通信，那你有没有想过如果有多层嵌套的数据最上层要往最下层传值怎么办，前一种方法只能一层一层的往下传，可是这样太麻烦了，那么有没有什么方法能够一次传到你想要传到的位置呢，当然是有的，那就是接下来要说到的<code>$attrs</code>和<code>$listeners</code>。<br>假设我们现在有三层包含关系的组件，分别是level1/level2/level3，level1 &gt; level2 &gt; level3, <code>&gt;</code> 表示包含关系。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; level3.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level3&#39;, &#123;</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;$attrs.level3Message&quot; @input&#x3D;&quot;emitLevel3Data($attrs.level3Message)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel3Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel3Data&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level2.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level2&#39;, &#123;</span><br><span class="line">    props:[&#39;level2Message&#39;],</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level2Message:this.level2Message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;level2Message&quot; @input&#x3D;&quot;emitLevel2Data(level2Message)&quot;&gt;</span><br><span class="line">    &lt;level3 v-bind&#x3D;&#39;$attrs&#39; v-on&#x3D;&#39;$listenrs&#39;&gt;&lt;&#x2F;level3&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel2Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel2Data&#39;, data) </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level1.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level1&#39;, &#123;</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level3Message:&quot;I am Level3&quot;,</span><br><span class="line">            level2Message:&quot;I am Level2&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是level1中的内容&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;level2 :level2Message&#x3D;&quot;level2Message&quot; </span><br><span class="line">            :level3Message&#x3D;&quot;level3Message&quot;</span><br><span class="line">            @getLevel2Data&#x3D;&quot;getLevel2Data()&quot;</span><br><span class="line">            @getLevel3Data&#x3D;&quot;getLevel3Data()&quot;</span><br><span class="line">            &gt;&lt;&#x2F;level2&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        getLevel2Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level2的数据&#39;, data)</span><br><span class="line">        &#125;,</span><br><span class="line">        getLevel3Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level3的数据&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line"></span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;level1&gt;&lt;&#x2F;level1&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>level3组件能直接触发<code>getLevel3Data</code>是因为level2组件在调用level3组件时使用v-on绑定了$listeners属性；</li>
+<li>通过v-bind绑定了$attrs属性，level3组件可以直接获取到从level1传下来的props;</li>
+</ol>
+<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>父组件通过v-model传递值给子组件时，会自动传递一个value的props户型，在子组件中可以通过this.$emit(‘input’,val)自动修改v-model绑定的值。</p>
+<p>```</p>
+<p>未完待续~</p>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/27/Vue-Component-Communication/">前端面试Vue篇：Vue组件通信的几种方式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/27/Vue-Component-Communication/" title="前端面试Vue篇：Vue组件通信的几种方式">https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" rel="tag"># 组件通信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2017/12/12/Git-Shell/" rel="prev" title="Git的常用命令">
+      <i class="fa fa-chevron-left"></i> Git的常用命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/27/Actions/" rel="next" title="巧妙利用Acitons进行博客的自动构建">
+      巧妙利用Acitons进行博客的自动构建 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#props%E5%92%8C-emit"><span class="nav-number">1.1.</span> <span class="nav-text">props和$emit</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#attrs%E5%92%8C-listeners"><span class="nav-number">1.2.</span> <span class="nav-text">$attrs和$listeners</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model"><span class="nav-number">1.3.</span> <span class="nav-text">v-model</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">1.4.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">1.5.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/27/Vue-Component-Communication/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Vue-Component-Communication/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Vue-Component-Communication/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e407e57318a6c8ebbc77e39feaa43b12',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/30/begin-learn-java/index.html b/en/2019/12/30/begin-learn-java/index.html
new file mode 100644
index 0000000000..0f3faf7189
--- /dev/null
+++ b/en/2019/12/30/begin-learn-java/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="重拾java开发技能">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/30/begin-learn-java/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2019-12-30T21:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/30/begin-learn-java/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>重拾java开发技能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          重拾java开发技能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+<span id="more"></span>
+
+<h2 id="公司这一年"><a href="#公司这一年" class="headerlink" title="公司这一年"></a>公司这一年</h2><p>最近对于自己的发展有一些迷茫，这一年公司前端的发展可以说是几经转折，我自己呢也一直在摇摆到底是做管理还是做技术，也参加了公司组织的部门经理的答辩，在部门前端的管理工作中也切实的了解到自己在为人处事方面不够圆润。所以目前也算是断了从事管理的念头，更希望能在技术上更进一步，前端目前看来已经不算是我的短板，而我的短板就是只会前端，一直在前端周围打转，其实如果不是看了那篇帖子，以及公司对专家岗位的要求，我可能还会更进一步在前端方向深入研究，但目前看更紧急的应该是补充一下后端的开发知识了，于是上周末开始我就开始了java的学习</p>
+<h2 id="为什么选择java"><a href="#为什么选择java" class="headerlink" title="为什么选择java"></a>为什么选择java</h2><p>为什么选择java作为后端入门，实话讲好多前端开发应该都会问这个问题，明明有更熟悉的nodejs可以作为后端技能进行扩展，我这里的理由是目前大多数公司的包括外面公司的开发人员大都还是以java作为主要语言作为后端编写的选择，另外前端js中好多的设计也是借鉴或者照搬了java中的一些思想，可以说在学习java过程中也会自然而然的提高对js的理解，更重要的是，java相对于其他语言来说资料也更多，上手也更容易，因为这些因素吧，最终我选择了java作为后端的主要学习目标。</p>
+<h2 id="怎么学习java"><a href="#怎么学习java" class="headerlink" title="怎么学习java"></a>怎么学习java</h2><p>java上大学的时候实际有系统的学过的，只是实习之后就再也没有使用过，如今9年过去了，java对于我可能也只剩下些零星的记忆，说实话刚一开始怎么学，从哪里学让我都有点无从下手，这里还要感谢一下我后端的开发伙伴，给了我很多很好的建议，看书的话大都是基础的太基础，实战的又经常忽略基础，最终我打算还是以视频教程2.5倍速快速过一遍java基础，然后再深入学习一下springboot框架，最后再进行实战，以此掌握java开发技能。</p>
+<h3 id="开始学习java"><a href="#开始学习java" class="headerlink" title="开始学习java"></a>开始学习java</h3><p>最终我选择了在B站上看黑马的java基础+实战课程的教学视频，说实话黑马的教学视频还是讲的很仔细的，老师讲的也很有趣，只是一节课10多分钟，只有一个知识点，对于我来说还是有些慢，所以我就开了2.5倍速加快进就这么着看，上周末两天时间，看了130多课，今天的内容记忆不太深刻，趁着不是那么忙又看了30多课，感觉收获还是满满的，接下来的每一天都会看上30课左右，希望自己能在3个月的时间完全上手java开发，相信我可以做到。</p>
+<h2 id="立个Flag"><a href="#立个Flag" class="headerlink" title="立个Flag"></a>立个Flag</h2><p>从今天起，每天都要把自己学习的进度做个总结，看看这一天自己收获了多少，希望30岁这年我重新起步，迈向更高更好的未来。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/30/begin-learn-java/">重拾java开发技能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月30日 - 21:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/30/begin-learn-java/" title="重拾java开发技能">https://blog.lifesli.com/2019/12/30/begin-learn-java/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/30/begin-learn-java/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/27/Actions/" rel="prev" title="巧妙利用Acitons进行博客的自动构建">
+      <i class="fa fa-chevron-left"></i> 巧妙利用Acitons进行博客的自动构建
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/weichat-h5-compatibility/" rel="next" title="微信的H5兼容方案">
+      微信的H5兼容方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AC%E5%8F%B8%E8%BF%99%E4%B8%80%E5%B9%B4"><span class="nav-number">1.1.</span> <span class="nav-text">公司这一年</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9java"><span class="nav-number">1.2.</span> <span class="nav-text">为什么选择java</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.</span> <span class="nav-text">怎么学习java</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.1.</span> <span class="nav-text">开始学习java</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AB%8B%E4%B8%AAFlag"><span class="nav-number">1.4.</span> <span class="nav-text">立个Flag</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/30/begin-learn-java/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/30/begin-learn-java/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/30/begin-learn-java/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0ae1bf15d658582016fd4e739898ef56',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/31/GoodBye-2019/index.html b/en/2019/12/31/GoodBye-2019/index.html
new file mode 100644
index 0000000000..696db666fe
--- /dev/null
+++ b/en/2019/12/31/GoodBye-2019/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:type" content="article">
+<meta property="og:title" content="再见2019">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/31/GoodBye-2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+<meta property="article:published_time" content="2019-12-31T23:50:59.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="年终总结">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/31/GoodBye-2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>再见2019 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          再见2019
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/31/GoodBye-2019/">再见2019</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 23:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/31/GoodBye-2019/" title="再见2019">https://blog.lifesli.com/2019/12/31/GoodBye-2019/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/GoodBye-2019/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" rel="tag"># 年终总结</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/gitlab-cicd/" rel="prev" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      <i class="fa fa-chevron-left"></i> 基于 GitLab CI/CD 的自动化构建、发布实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/01/Hello-2020/" rel="next" title="你好2020">
+      你好2020 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#18%E5%B9%B4%E5%BA%95%E5%AE%9A%E7%9A%84%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">18年底定的计划</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E6%8A%80%E6%9C%AF"><span class="nav-number">2.1.</span> <span class="nav-text">学习技术</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%88%E5%85%A8%E5%B9%B4%EF%BC%89"><span class="nav-number">2.1.1.</span> <span class="nav-text">1. 深入学习客户端开发（全年）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B43%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.2.</span> <span class="nav-text">2. 学习前端自动化测试相关知识（2019年3月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1TS-%EF%BC%882019%E5%B9%B45%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.3.</span> <span class="nav-text">3. 学习并掌握TS  （2019年5月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1React%EF%BC%882019%E5%B9%B47%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.4.</span> <span class="nav-text">4. 学习并掌握React（2019年7月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E7%9A%84%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B49%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.5.</span> <span class="nav-text">5. 学习前端持续集成的相关知识（2019年9月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E5%AD%A6%E4%B9%A0Docker%E8%99%9A%E6%8B%9F%E5%8C%96%E6%8A%80%E6%9C%AF%EF%BC%88-2019%E5%B9%B410%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.6.</span> <span class="nav-text">6. 学习Docker虚拟化技术（ 2019年10月前）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B4%E7%90%86%E8%AE%A1%E5%88%92"><span class="nav-number">2.2.</span> <span class="nav-text">整理计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%85%BB%E6%88%90%E5%86%99%E5%8D%9A%E5%AE%A2%E7%9A%84%E4%B9%A0%E6%83%AF%EF%BC%8C%E8%87%B3%E5%B0%912%E5%A4%A9%E4%B8%80%E7%AF%87%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%98%AF%E6%8A%80%E6%9C%AF%E5%8D%9A%E5%AE%A2%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%85%B6%E4%BB%96%E3%80%82"><span class="nav-number">2.2.1.</span> <span class="nav-text">1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%B0%86%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%8A%9F%E8%83%BD%E5%81%9A%E6%88%90%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%BC%80%E6%BA%90%E7%BB%99%E5%85%AC%E5%8F%B8%E4%BD%BF%E7%94%A8"><span class="nav-number">2.2.2.</span> <span class="nav-text">2. 将常用的方法和功能做成插件，开源给公司使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%BB%E4%B9%A6%E8%AE%A1%E5%88%92"><span class="nav-number">2.3.</span> <span class="nav-text">读书计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%AF%8F%E5%91%A8%E8%AF%BB%E5%AE%8C%E4%B8%80%E6%9C%AC%E4%B9%A6%EF%BC%8C%E5%B9%B6%E5%86%99%E4%B8%80%E7%AF%87%E8%AF%BB%E5%90%8E%E6%84%9F"><span class="nav-number">2.3.1.</span> <span class="nav-text">1. 每周读完一本书，并写一篇读后感</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%83%A8%E9%97%A8%E5%89%8D%E7%AB%AF%E8%AE%A1%E5%88%92"><span class="nav-number">2.4.</span> <span class="nav-text">部门前端计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A0%E5%BC%BA%E5%90%84%E8%AE%BE%E8%AE%A1%E7%BB%84%E5%89%8D%E7%AB%AF%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BA%A4%E6%B5%81"><span class="nav-number">2.4.1.</span> <span class="nav-text">加强各设计组前端之间的交流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E4%BF%B1%E4%B9%90%E9%83%A8%E6%8E%A8%E5%8A%A8"><span class="nav-number">2.4.2.</span> <span class="nav-text">前端俱乐部推动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%9B%E8%A1%8C%E6%A2%AF%E9%98%9F%E5%88%92%E5%88%86%E5%BB%BA%E8%AE%BE"><span class="nav-number">2.4.3.</span> <span class="nav-text">进行梯队划分建设</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E5%85%A5%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%B7%A5%E5%85%B7%E5%92%8C%E6%80%9D%E6%83%B3"><span class="nav-number">2.4.4.</span> <span class="nav-text">引入前端工程化工具和思想</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8F%90%E5%8D%87%E6%95%B4%E4%BD%93%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84%E8%83%BD%E5%8A%9B"><span class="nav-number">2.4.5.</span> <span class="nav-text">提升整体前端开发的能力</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%B4%BB%E7%9B%AE%E6%A0%87"><span class="nav-number">2.5.</span> <span class="nav-text">生活目标</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AF%8F%E5%A4%A9%E9%99%AA%E5%AD%A9%E5%AD%90%E8%AF%BB%E4%B9%A6%E4%B8%80%E5%B0%8F%E6%97%B6"><span class="nav-number">2.5.1.</span> <span class="nav-text">每天陪孩子读书一小时</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%8F%E8%82%A5"><span class="nav-number">2.5.2.</span> <span class="nav-text">减肥</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/31/GoodBye-2019/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/GoodBye-2019/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/GoodBye-2019/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dc5861564ec503d6aa1c3163b45ee882',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/31/gitlab-cicd/index.html b/en/2019/12/31/gitlab-cicd/index.html
new file mode 100644
index 0000000000..7625b0cd29
--- /dev/null
+++ b/en/2019/12/31/gitlab-cicd/index.html
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="基于 GitLab CI&#x2F;CD 的自动化构建、发布实践">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/31/gitlab-cicd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2019-12-31T08:22:22.000Z">
+<meta property="article:modified_time" content="2019-12-31T08:43:48.358Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GitLab">
+<meta property="article:tag" content="CI&#x2F;CD">
+<meta property="article:tag" content="自动构建">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/31/gitlab-cicd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>基于 GitLab CI/CD 的自动化构建、发布实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          基于 GitLab CI/CD 的自动化构建、发布实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2019-12-31 08:22:22 / Modified: 08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+<a id="more"></a>
+
+<h2 id="说一下目前公司的构建和发布流程"><a href="#说一下目前公司的构建和发布流程" class="headerlink" title="说一下目前公司的构建和发布流程"></a>说一下目前公司的构建和发布流程</h2><p>1、<strong><em>手动构建时代</em></strong>：开发人员在测试需要验证环境的时候，在本地执行打包构建命令，然后将包放到服务器上，整个过程30分钟左右。<br>2、<strong><em>自动构建时代</em></strong>目前公司的构建是要在Jekins中，首先是在Jekins中配置拉去代码的仓库地址和代码分支，写好构建的脚本，在需要构建时候进行构建，一次配置后构建全程只需要点一下构建时间长度跟项目代码需要下载的依赖时间有关，通常不超过5分钟，需要注意的是要在构建前同步一下代码版本<br><strong><em>划重点</em></strong><br>在原来的手动构建时代，代码是以开发本地的代码为准，代码版本很可能跟最新的代码有出入，而且依赖于开发的电脑设备，如果他请假了，那么就GG了；另外通过一次配置后整个构建的时间从30分钟降到了5分钟，一次节省25分钟，那么一个项目周期下节省的工时就非常可观了。</p>
+<h2 id="为什要使用GitLab-CI-CD进行构建"><a href="#为什要使用GitLab-CI-CD进行构建" class="headerlink" title="为什要使用GitLab CI/CD进行构建"></a>为什要使用GitLab CI/CD进行构建</h2><p>这里实际上没有太大的必要将公司的Jekins替换为GitLab的CI/CD进行自动构建，但是呢，因为公司本身采用的就是GitLab作为代码仓库管理代码，它本身又提供了CI/CD的功能，本着多学一点是一点的原则，我就花点时间研究一下它。</p>
+<h2 id="什么是-GitLab-CI-CD"><a href="#什么是-GitLab-CI-CD" class="headerlink" title="什么是 GitLab CI/CD"></a>什么是 GitLab CI/CD</h2><p>下面我就要开始把我了解到的GitLab CI/CD的使用方式说一下，从零开始搭建GitLab CI/CD。</p>
+<h3 id="1-简要介绍-GitLab-CI-CD"><a href="#1-简要介绍-GitLab-CI-CD" class="headerlink" title="1. 简要介绍 GitLab CI/CD"></a>1. 简要介绍 GitLab CI/CD</h3><p>代码提交到GitLab上后，满足指定条件之后会触发pipeline进行自动化构建、发布。<br><strong><em>pipeline</em></strong>可以理解为构建任务，里面可以包含多个流程，比如下载依赖、运行测试、编译、部署。<br>那么pipeline什么时候触发，分为几个流程，每个流程做什么，需要在项目的<strong><em>.gitlab-ci.yml</em></strong>文件中的定义。<br>这点呢跟Jekins里面实际上做的也是同样的事，在线下开发做构建时候也是做这些事，只是通过脚本之后这些事都可以交给计算机做了。</p>
+<h3 id="2-GitLab-CI-CD-整体流程"><a href="#2-GitLab-CI-CD-整体流程" class="headerlink" title="2. GitLab CI/CD 整体流程"></a>2. GitLab CI/CD 整体流程</h3><ul>
+<li>GitLab CI/CD 的 pipeline 具体流程和操作在 .gitlab-ci.yml 文件中申明。</li>
+<li>触发 pipeline 后，由 GitLab Runner 根据  .gitlab-ci.yml 文件运行。</li>
+<li>运行结束后将返回至 GitLab 系统。</li>
+</ul>
+<h4 id="2-1-gitlab-ci-yml-文件"><a href="#2-1-gitlab-ci-yml-文件" class="headerlink" title="2.1 .gitlab-ci.yml 文件"></a>2.1 .gitlab-ci.yml 文件</h4><p>.gitlab-ci.yml 文件是一个申明式文件，用于定义 GitLab CI/CD 流程分为几个阶段，每个阶段分别干什么。</p>
+<p>关于具体干什么、怎么干，主要使用命令行和脚本操作，稍后会在实践部分做细致的介绍。</p>
+<p>如果涉及一些逻辑的话，会使用脚本（shell）。</p>
+<h4 id="2-2-GitLab-Runner"><a href="#2-2-GitLab-Runner" class="headerlink" title="2.2 GitLab Runner"></a>2.2 GitLab Runner</h4><p>GitLab Runner 是 CI 的执行环境，负责执行 gitlab-ci.yml 文件，并将结果返回给 GitLab 系统。Runner 具体可以有多种形式，docker、虚拟机或 shell，在注册 runner 时选定方式。实际上就是运行脚本的容器环境。</p>
+<h2 id="3-从零搭建一个-GitLab-CI-CD-的基本步骤"><a href="#3-从零搭建一个-GitLab-CI-CD-的基本步骤" class="headerlink" title="3. 从零搭建一个 GitLab CI/CD 的基本步骤"></a>3. 从零搭建一个 GitLab CI/CD 的基本步骤</h2><p>上面介绍了一些GitLab构建的主要环节和名词概念，接下来我将给大家介绍一下如何从零搭建一个GitLab CI/CD，一起体验一把GitLab CI/CD的整个流程。</p>
+<h3 id="3-1-新建一个-GitLab-项目"><a href="#3-1-新建一个-GitLab-项目" class="headerlink" title="3.1 新建一个 GitLab 项目"></a>3.1 新建一个 GitLab 项目</h3><p>我这用的是公司的自有仓库，各位可以在开源GitLab上创建自己的项目</p>
+<h3 id="3-2-配置Runner"><a href="#3-2-配置Runner" class="headerlink" title="3.2 配置Runner"></a>3.2 配置Runner</h3><p>GitLab 提供了一些共享的Runner，我们可以不处理Runner，这里可以理解为，它提供了一些现成的脚本运行环境，不需要我们从头配置运行环境，so sweet～</p>
+<h3 id="3-3-新建-gitlab-ci-yml-文件"><a href="#3-3-新建-gitlab-ci-yml-文件" class="headerlink" title="3.3 新建 .gitlab-ci.yml 文件"></a>3.3 新建 .gitlab-ci.yml 文件</h3><ol>
+<li>拉取项目到本地</li>
+<li>在项目根目录新建 .gitlab-ci.yml 文件</li>
+<li>提交 .gitlab-ci.yml 文件</li>
+<li>在项目的 CI/CD 中，可以看到 CI/CD 的运行情况<br>这个过程应该没人不会吧，没技术含量的我们简单一提，实际上最重要的就是.gitlab-ci.yml文件中要怎么去写，示例说明文件如下：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; .gitlab-ci.yml 示例说明</span><br><span class="line"></span><br><span class="line">image: node</span><br><span class="line"># 定义 stages</span><br><span class="line">stages:</span><br><span class="line">  - build</span><br><span class="line">  - test</span><br><span class="line"># 定义 job</span><br><span class="line"> build 阶段:</span><br><span class="line">  stage: build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;build stage&quot;</span><br><span class="line"># 定义 job</span><br><span class="line">发布到测试环境:</span><br><span class="line">  stage: test</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;test stage&quot;</span><br></pre></td></tr></table></figure>
+
+</li>
+</ol>
+<h2 id="GitLab-CI-CD-实践"><a href="#GitLab-CI-CD-实践" class="headerlink" title="GitLab CI/CD 实践"></a>GitLab CI/CD 实践</h2><p>在实践部分，这里着重介绍 GitLab Runner 和 .gitlab-ci.yml 文件，主要的流程及遇到的问题和解决方案包含在 .gitlab-ci.yml 文件的介绍过程中。</p>
+<h3 id="1-GitLab-Runner"><a href="#1-GitLab-Runner" class="headerlink" title="1. GitLab Runner"></a>1. GitLab Runner</h3><p>GitLab Runner 一般由 GitLab 系统维护者管理，配置后，同类项目可以共享，一般不需要进行修改。这里不进行具体介绍，主要介绍下使用过程中的注意点，具体使用可参考 GitLab Runner 文档。（<a href="https://docs.gitlab.com.cn/runner/）" target="_blank" rel="noopener">https://docs.gitlab.com.cn/runner/）</a></p>
+<h4 id="1-1-GitLab-Runner-使用流程"><a href="#1-1-GitLab-Runner-使用流程" class="headerlink" title="1.1 GitLab Runner 使用流程"></a>1.1 GitLab Runner 使用流程</h4><ol>
+<li>下载 GitLab Runner</li>
+<li>注册 GitLab Runner</li>
+<li>使用 GitLab Runner</li>
+</ol>
+<h4 id="1-2-GitLab-Runner-注意点"><a href="#1-2-GitLab-Runner-注意点" class="headerlink" title="1.2 GitLab Runner 注意点"></a>1.2 GitLab Runner 注意点</h4><p>在使用 Runner 的过程中，我们遇到了一些问题，下面简要介绍问题及解决方案，不做具体介绍。</p>
+<h5 id="1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态"><a href="#1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态" class="headerlink" title="1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态"></a>1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</h5><p>错误信息是：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">This job is stuck, because you don’t have any active runners that can run this job</span><br></pre></td></tr></table></figure>
+<p>注册的 Runner，默认情况下，不会运用没有 <code>tag</code> 的 job，可以在 Settings→CI/CD→Runners Settings，去掉 Runner untagged jobs 即可。</p>
+<h5 id="1-2-2-GitLab-Runner-的类型"><a href="#1-2-2-GitLab-Runner-的类型" class="headerlink" title="1.2.2 GitLab Runner 的类型"></a>1.2.2 GitLab Runner 的类型</h5><p>有三种类型的 Runner，</p>
+<ul>
+<li>Shared Runners 在整个系统所有项目都可以使用</li>
+<li>Group Runners 注册后，同一个项目下的不同代码库共享</li>
+<li>Specific Runners 需要给项目单独配置，使用 Specific Runners 注意考虑是否需要关闭 Shared Runners、和 Group Runners。</li>
+</ul>
+<h5 id="1-2-3-在-GitLab-CI-中使用-docker"><a href="#1-2-3-在-GitLab-CI-中使用-docker" class="headerlink" title="1.2.3 在 GitLab CI 中使用 docker"></a>1.2.3 在 GitLab CI 中使用 docker</h5><p>如果部署使用的是docker方式，那么在部署时需要在 GitLab CI/CD 中使用 docker 打镜像发布。可以参考 Building Docker images with GitLab CI/CD（<a href="https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）</a></p>
+<h5 id="1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录"><a href="#1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录" class="headerlink" title="1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录"></a>1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录</h5><p>我们使用的 Runner executor 是 Dokcer，在 Dokcer volumes 中配置需要访问的目录。</p>
+<h3 id="2-gitlab-ci-yml-文件"><a href="#2-gitlab-ci-yml-文件" class="headerlink" title="2. .gitlab-ci.yml 文件"></a>2. .gitlab-ci.yml 文件</h3><p>.gitlab-ci.yml 详细的用法，可参考 GitLab CI/CD Pipeline Configuration Reference 文档（<a href="https://docs.gitlab.com/ee/ci/yaml/README.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/yaml/README.html）</a></p>
+<h4 id="2-1-gitlab-ci-yml-文件结构介绍"><a href="#2-1-gitlab-ci-yml-文件结构介绍" class="headerlink" title="2.1 .gitlab-ci.yml 文件结构介绍"></a>2.1 .gitlab-ci.yml 文件结构介绍</h4><ul>
+<li><code>image</code> 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp（内部 rsync 工具）。</li>
+<li><code>stages</code> 中定义了我们的 pipeline 分为以下几个过程:<ol>
+<li>下载依赖阶段 pre_build</li>
+<li>构建阶段 build</li>
+<li>发布阶段 deploy</li>
+</ol>
+</li>
+<li><code>stage</code> 申明当前的阶段，在 stages 中使用</li>
+<li><code>variables</code> 用于定义变量</li>
+<li><code>before_script</code> 执行 script 前的操作</li>
+<li><code>script</code> 当前 stage 需要执行的操作</li>
+<li><code>changes</code> 指定 stage 触发条件</li>
+<li><code>refs</code> 指定 stage 触发的分支</li>
+</ul>
+<p>下面具体看一下我们这个.gitlab-ci.yml文件实际的样子</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">image: registry.thunisoft.com&#x2F;gitlab-ci&#x2F;node:v1.8</span><br><span class="line"></span><br><span class="line">variables:</span><br><span class="line">  # $CI_PROJECT_PATH  ：项目id,用于项目唯一区分本项目与其它项目</span><br><span class="line">  # $CI_PROJECT_DIR   ：本地项目路径</span><br><span class="line">  # $PROCESS_PATH     ：临时文件目录(包括日志和一些临时文件)</span><br><span class="line">  NODE_MODULES_PATH: &#x2F;runner-cache&#x2F;frontend&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME&#x2F;node_modules</span><br><span class="line"></span><br><span class="line">stages:</span><br><span class="line">  - pre_build # 下载依赖阶段</span><br><span class="line">  - build # 构建阶段</span><br><span class="line">  - deploy # 测试发布阶段</span><br><span class="line"></span><br><span class="line"># 下载依赖:</span><br><span class="line">  before_script: # 下载依赖前准备脚本</span><br><span class="line">    # 无 node_modules 文件时，新建 node_modules 文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkdir.sh $NODE_MODULES_PATH</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - cd webpack@lixuguang-project</span><br><span class="line"></span><br><span class="line">  stage: pre_build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;npm install&quot;</span><br><span class="line">    - npm install  --network-timeout 60000 # 安装依赖</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - webpack@lixuguang-project&#x2F;package.json</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 构建:</span><br><span class="line">  stage: build</span><br><span class="line">  variables:</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.sh</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME.sh</span><br><span class="line">  before_script:</span><br><span class="line">    # 建存此次 CI CI_COMMIT_SHA 的文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - rm -rf web&#x2F;share&#x2F;*</span><br><span class="line">    - cd webpack@lixuguang-projects</span><br><span class="line">  script:</span><br><span class="line">    # 缓存上次ci</span><br><span class="line">    - source $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - echo &quot;CI_COMMIT_BEFORE_SHA&#x3D;$CI_COMMIT_SHA&quot; &gt; $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - python3 ..&#x2F;ci&#x2F;build.py   # 编译</span><br><span class="line">    - &#x2F;bin&#x2F;bash ..&#x2F;ci&#x2F;commit.sh   # 提交编译结果</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - www_src&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 测试发布:</span><br><span class="line">  stage: deploy</span><br><span class="line">  variables:</span><br><span class="line">    PROCESS_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;deploy&#x2F;process&#x2F;$CI_JOB_ID  # 目录不要换，用于日志服务器获取日志展示</span><br><span class="line">  script:</span><br><span class="line">    - mkdir $PROCESS_PATH # 建立发布临时路径，存放发布配置中间文件和结果日志用</span><br><span class="line">    - dplt $CI_PROJECT_DIR&#x2F;.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR&#x2F;web&#x2F; $PROCESS_PATH</span><br><span class="line">    # dplt 发布yml配置</span><br><span class="line">    - echo &quot;发布完成，错误日志查看http:&#x2F;&#x2F;172.18.78.11:8089&#x2F;log?path&#x3D;&quot;$PROCESS_PATH</span><br><span class="line">    - echo &#96;ls $PROCESS_PATH&#x2F;*.log&#96;</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - web&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - test</span><br></pre></td></tr></table></figure>
+
+<h4 id="2-2-下载依赖阶段（pre-build-stage）"><a href="#2-2-下载依赖阶段（pre-build-stage）" class="headerlink" title="2.2 下载依赖阶段（pre_build stage）"></a>2.2 下载依赖阶段（pre_build stage）</h4><p>下载依赖的方案是：当 package.json 文件发生变化时，触发 pre_build stage，执行 npm install。下载的 node_modules 放在宿主机下，执行时通过软链获取依赖。</p>
+<h4 id="2-3-构建阶段（build-stage）"><a href="#2-3-构建阶段（build-stage）" class="headerlink" title="2.3 构建阶段（build stage）"></a>2.3 构建阶段（build stage）</h4><p>构建阶段，分为 3 部分</p>
+<ol>
+<li>diff 文件变化</li>
+<li>前端 build</li>
+<li>commit build 后结果</li>
+</ol>
+<h5 id="2-3-1-diff-文件变化"><a href="#2-3-1-diff-文件变化" class="headerlink" title="2.3.1 diff 文件变化"></a>2.3.1 diff 文件变化</h5><p>每次 CI 时，将当前 CI commit SHA（CI_COMMIT_SHA 变量）存在文件中，存为 CI_COMMIT_BEFORE_SHA 变量， diff 时，git diff 当前 CI 与上次 commit SHA 的变化。</p>
+<h5 id="2-3-2-前端-build"><a href="#2-3-2-前端-build" class="headerlink" title="2.3.2 前端 build"></a>2.3.2 前端 build</h5><p>根据 git diff 的变化情况，确定本次需要打包的内容。</p>
+<h5 id="2-3-3-commit-打包后生成的-HTML-文件"><a href="#2-3-3-commit-打包后生成的-HTML-文件" class="headerlink" title="2.3.3 commit 打包后生成的 HTML 文件"></a>2.3.3 commit 打包后生成的 HTML 文件</h5><p>在 GitLab CI/CD 提交代码时，使用 Git 凭证存储，提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档(<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8" target="_blank" rel="noopener">https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8</a>)</p>
+<h4 id="2-4-发布阶段（deploy-stage）"><a href="#2-4-发布阶段（deploy-stage）" class="headerlink" title="2.4 发布阶段（deploy stage）"></a>2.4 发布阶段（deploy stage）</h4><p>发布阶段，使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。</p>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>以上就是GitLab CI/CD的整个理论到实践的全部过程，实现之后你就可以解放双手了，是不是超爽。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p>持续集成是什么？(<a href="http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html</a>)</p>
+<p>什么是 CI/CD？(<a href="https://www.redhat.com/zh/topics/devops/what-is-ci-cd" target="_blank" rel="noopener">https://www.redhat.com/zh/topics/devops/what-is-ci-cd</a>)</p>
+<p>GitLab Docs(<a href="https://docs.gitlab.com/" target="_blank" rel="noopener">https://docs.gitlab.com/</a>)</p>
+<p>Introduction to CI/CD with GitLab(<a href="https://docs.gitlab.com/ee/ci/introduction/" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/introduction/</a>)</p>
+<p>用 GitLab CI 进行持续集成(<a href="https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/" target="_blank" rel="noopener">https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/</a>)</p>
+<p>如何实现前端工程的持续集成与持续部署？(<a href="https://www.zhihu.com/question/60194439" target="_blank" rel="noopener">https://www.zhihu.com/question/60194439</a>)</p>
+<p>基于 GitLab CI 的前端工程CI/CD实践(<a href="https://github.com/giscafer/front-end-manual/issues/27" target="_blank" rel="noopener">https://github.com/giscafer/front-end-manual/issues/27</a>)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/31/gitlab-cicd/">基于 GitLab CI/CD 的自动化构建、发布实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 08:22</p>
+      <p><span>最后更新:</span>2019年12月31日 - 08:43</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/31/gitlab-cicd/" title="基于 GitLab CI/CD 的自动化构建、发布实践">https://blog.lifesli.com/2019/12/31/gitlab-cicd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/gitlab-cicd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/GitLab/" rel="tag"># GitLab</a>
+              <a href="/en/tags/CI-CD/" rel="tag"># CI/CD</a>
+              <a href="/en/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" rel="tag"># 自动构建</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/weichat-h5-compatibility/" rel="prev" title="微信的H5兼容方案">
+      <i class="fa fa-chevron-left"></i> 微信的H5兼容方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/GoodBye-2019/" rel="next" title="再见2019">
+      再见2019 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%B4%E4%B8%80%E4%B8%8B%E7%9B%AE%E5%89%8D%E5%85%AC%E5%8F%B8%E7%9A%84%E6%9E%84%E5%BB%BA%E5%92%8C%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B"><span class="nav-number">1.1.</span> <span class="nav-text">说一下目前公司的构建和发布流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E8%A6%81%E4%BD%BF%E7%94%A8GitLab-CI-CD%E8%BF%9B%E8%A1%8C%E6%9E%84%E5%BB%BA"><span class="nav-number">1.2.</span> <span class="nav-text">为什要使用GitLab CI&#x2F;CD进行构建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-GitLab-CI-CD"><span class="nav-number">1.3.</span> <span class="nav-text">什么是 GitLab CI&#x2F;CD</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D-GitLab-CI-CD"><span class="nav-number">1.3.1.</span> <span class="nav-text">1. 简要介绍 GitLab CI&#x2F;CD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-GitLab-CI-CD-%E6%95%B4%E4%BD%93%E6%B5%81%E7%A8%8B"><span class="nav-number">1.3.2.</span> <span class="nav-text">2. GitLab CI&#x2F;CD 整体流程</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-GitLab-Runner"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">2.2 GitLab Runner</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E4%BB%8E%E9%9B%B6%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-CI-CD-%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">3. 从零搭建一个 GitLab CI&#x2F;CD 的基本步骤</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.4.1.</span> <span class="nav-text">3.1 新建一个 GitLab 项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E9%85%8D%E7%BD%AERunner"><span class="nav-number">1.4.2.</span> <span class="nav-text">3.2 配置Runner</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%96%B0%E5%BB%BA-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.3.</span> <span class="nav-text">3.3 新建 .gitlab-ci.yml 文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GitLab-CI-CD-%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.5.</span> <span class="nav-text">GitLab CI&#x2F;CD 实践</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-GitLab-Runner"><span class="nav-number">1.5.1.</span> <span class="nav-text">1. GitLab Runner</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-1-GitLab-Runner-%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B"><span class="nav-number">1.5.1.1.</span> <span class="nav-text">1.1 GitLab Runner 使用流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#1-2-GitLab-Runner-%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="nav-number">1.5.1.2.</span> <span class="nav-text">1.2 GitLab Runner 注意点</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-1-%E9%85%8D%E7%BD%AE-Runner-%E5%90%8E%EF%BC%8Cpush-%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%87%BA%E5%8F%91%E4%BA%86-pipeline%EF%BC%8C%E4%BD%86%E4%B8%80%E7%9B%B4%E5%A4%84%E4%BA%8EPending%E7%8A%B6%E6%80%81"><span class="nav-number">1.5.1.2.1.</span> <span class="nav-text">1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-2-GitLab-Runner-%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.5.1.2.2.</span> <span class="nav-text">1.2.2 GitLab Runner 的类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-3-%E5%9C%A8-GitLab-CI-%E4%B8%AD%E4%BD%BF%E7%94%A8-docker"><span class="nav-number">1.5.1.2.3.</span> <span class="nav-text">1.2.3 在 GitLab CI 中使用 docker</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-4-%E5%9C%A8-GitLab-CI-CD-%E4%B8%AD%E8%AE%BF%E9%97%AE-Runner-%E5%AE%BF%E4%B8%BB%E6%9C%BA%E7%9B%AE%E5%BD%95"><span class="nav-number">1.5.1.2.4.</span> <span class="nav-text">1.2.4 在 GitLab CI&#x2F;CD 中访问 Runner 宿主机目录</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.</span> <span class="nav-text">2. .gitlab-ci.yml 文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.5.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件结构介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-%E4%B8%8B%E8%BD%BD%E4%BE%9D%E8%B5%96%E9%98%B6%E6%AE%B5%EF%BC%88pre-build-stage%EF%BC%89"><span class="nav-number">1.5.2.2.</span> <span class="nav-text">2.2 下载依赖阶段（pre_build stage）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-%E6%9E%84%E5%BB%BA%E9%98%B6%E6%AE%B5%EF%BC%88build-stage%EF%BC%89"><span class="nav-number">1.5.2.3.</span> <span class="nav-text">2.3 构建阶段（build stage）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-1-diff-%E6%96%87%E4%BB%B6%E5%8F%98%E5%8C%96"><span class="nav-number">1.5.2.3.1.</span> <span class="nav-text">2.3.1 diff 文件变化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-2-%E5%89%8D%E7%AB%AF-build"><span class="nav-number">1.5.2.3.2.</span> <span class="nav-text">2.3.2 前端 build</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-3-commit-%E6%89%93%E5%8C%85%E5%90%8E%E7%94%9F%E6%88%90%E7%9A%84-HTML-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.3.3.</span> <span class="nav-text">2.3.3 commit 打包后生成的 HTML 文件</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-4-%E5%8F%91%E5%B8%83%E9%98%B6%E6%AE%B5%EF%BC%88deploy-stage%EF%BC%89"><span class="nav-number">1.5.2.4.</span> <span class="nav-text">2.4 发布阶段（deploy stage）</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.7.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/31/gitlab-cicd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/gitlab-cicd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/gitlab-cicd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '71569be53963d2299bb4f194daa50f9e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2019/12/31/weichat-h5-compatibility/index.html b/en/2019/12/31/weichat-h5-compatibility/index.html
new file mode 100644
index 0000000000..cc42cb18e9
--- /dev/null
+++ b/en/2019/12/31/weichat-h5-compatibility/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="微信的H5兼容方案">
+<meta property="og:url" content="https://blog.lifesli.com/en/2019/12/31/weichat-h5-compatibility/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2019-12-31T01:37:08.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="微信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2019/12/31/weichat-h5-compatibility/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>微信的H5兼容方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          微信的H5兼容方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+<span id="more"></span>
+
+<h2 id="1、ios端兼容input光标的高度"><a href="#1、ios端兼容input光标的高度" class="headerlink" title="1、ios端兼容input光标的高度"></a>1、ios端兼容input光标的高度</h2><p><em><strong>bug描述：</strong></em><br>这个问题只出现在苹果手机上，在安卓手机上显示没有问题，可以说是非常诡异，简单描述一下就是在input输入框聚焦时，光标大小应该跟字号一直，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。<br><em><strong>分析：</strong></em><br>说来主要是习惯导致的问题，通常我们习惯将height和line-height设置成一样的值，这个时候input光标就会整个变得很大。<br><em><strong>解决：</strong></em><br>实际上解决方案也很简单，就是不设置行高，通过padding来控制输入内容与外框的距离。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; less代码</span><br><span class="line">.input-x&#123;</span><br><span class="line">	height:40px;</span><br><span class="line">	&#x2F;&#x2F; line-height:40px; &#x2F;&#x2F; 此行注释掉</span><br><span class="line">	.input-inline&#123;</span><br><span class="line">		padding: 10px 0;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这样做问题就解决了。</p>
+<h2 id="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"><a href="#2、ios端微信h5页面上下滑动会卡顿，页面会有缺失" class="headerlink" title="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"></a>2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</h2><p><em><strong>bug描述：</strong></em><br>没错又是ios端，当页面高度超过一屏，那么上下滑动时就会出现页面卡顿的情况，而且时有伴随内容不能全部显示的情况。<br><em><strong>分析：</strong></em><br>这里实际上是浏览器内核解析不同导致的问题，在Andriod设备上，微信调用的是Webkit内核，而ios中是使用了Safari的内核，Safari对于滚动事件（overflow-scrolling）会使用原生的控件。而webkit内核则会创建一个UIScrollView来提供给子layer用以渲染。<br><em><strong>解决：</strong></em><br>在做样式重置时，加上下面这句话就能解决这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css代码</span><br><span class="line">*&#123;</span><br><span class="line">	-webkit-overflow-scrolling: touch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>但是这个方案也有缺陷，就是页面中不能有使用absolute定位的元素，不然布局就错乱了。<br><em><strong>延伸：</strong></em><br>-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.</p>
+<ul>
+<li>auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。</li>
+<li>touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。</li>
+</ul>
+<h2 id="3、ios键盘唤起再收起，页面不会恢复原位"><a href="#3、ios键盘唤起再收起，页面不会恢复原位" class="headerlink" title="3、ios键盘唤起再收起，页面不会恢复原位"></a>3、ios键盘唤起再收起，页面不会恢复原位</h2><p><em><strong>bug描述：</strong></em><br>哎，对的还是ios，问题标题描述的比较清晰了，就是键盘弹出时，页面内容会整体上移，但是收起键盘时本应回归原位的不回去了。—_—|||<br><em><strong>分析：</strong></em><br>固定定位的元素，如果元素内input框聚焦的时候会弹出软键盘，软键盘会占用屏幕面积，失去焦点时软键盘消失，但是仍会占用，页面就会不能恢复原状，也就导致input框不能再次输入了。<br><em><strong>解决：</strong></em><br>在input失去焦点键盘收起时，写一个监听事件，事例代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeBlur()&#123;</span><br><span class="line">	let ua &#x3D; navigator.userAgent; &#x2F;&#x2F; 获取用户代理</span><br><span class="line">	let app &#x3D; navigator.appVersion; &#x2F;&#x2F; 获取客户端版本信息</span><br><span class="line">	let isIos &#x3D; ua.match(&#x2F;i[^;]+;( U;)? CPU.+Mac OS X&#x2F;); &#x2F;&#x2F; 判断是否是Ios设备</span><br><span class="line">	if(isIos)&#123;</span><br><span class="line">		setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">			const scrollHeight &#x3D; document.documentElement.scrollTop || document.body.scrollTop || 0</span><br><span class="line">			window.scrollTop(0,Math.max(scrollHeight - 1), 0)</span><br><span class="line">		&#125;,100)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>延伸：</strong></em><br>在iso的微信开发中，页面元素如果用到了position: fixed进行定位，那么键盘收起时，就会被顶上去，第三方输入法也不例外。</p>
+<h2 id="4、Android弹出键盘遮挡文本输入框"><a href="#4、Android弹出键盘遮挡文本输入框" class="headerlink" title="4、Android弹出键盘遮挡文本输入框"></a>4、Android弹出键盘遮挡文本输入框</h2><p><em><strong>bug描述：</strong></em><br>刚才说的问题都是Ios端的，实际上Android上也有挺多坑，上面讲到Ios上输入框弹出键盘的问题后，Android中实际也有，只是现象不同；Andriod中弹出键盘后页面不会向上滑动，但是如果输入框在底部的话会直接被挡住。。。<br><em><strong>分析：</strong></em><br>很坑，因为Andriod中输入框focus后，并不会向上滑动，如果靠下就会被挡住。。<br><em><strong>解决：</strong></em><br>实际上跟Ios上处理差不多的方案，代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeFocus()&#123;</span><br><span class="line">   let ua &#x3D; navigator.userAgent;</span><br><span class="line">	 let app &#x3D; navigator.appVersion;</span><br><span class="line">   let isAndroid &#x3D; u.indexOf(&#39;Android&#39;) &gt; -1 || u.indexOf(&#39;Linux&#39;) &gt; -1;</span><br><span class="line">   if(isAndroid)&#123;</span><br><span class="line">      setTimeout(function() &#123;</span><br><span class="line">      document.activeElement.scrollIntoViewIfNeeded();</span><br><span class="line">      document.activeElement.scrollIntoView();</span><br><span class="line">      &#125;, 500);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>扩展</strong></em><br>Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动</p>
+<h2 id="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"><a href="#5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败" class="headerlink" title="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"></a>5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</h2><p><em><strong>bug描述：</strong></em><br>Ios的问题真的挺多的。。。</p>
+<ul>
+<li>在分享页面给A时，没问题，A把链接分享给B的时候就跳转到首页了；</li>
+<li>使用Vue-router跳转到第二个页面在分享时候，分享失败；<br>以上两个问题在Android上均没有问题。</li>
+</ul>
+<p><em><strong>分析：</strong></em><br>jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&amp;isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数<br><em><strong>解决：</strong></em></p>
+<ul>
+<li>可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功</li>
+<li>把入口地址保存在本地，等需要获取签名的时候再取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！（还没测试，有点low）</li>
+</ul>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>虽然微信H5方式开发想对来说成本比较低，但是有时候坑开始挺多的，但是微信原生开发又增加了成本，很矛盾，目前能做的就是尽量把踩过的坑都记下来，下次别再跳进去了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2019/12/31/weichat-h5-compatibility/">微信的H5兼容方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 01:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2019/12/31/weichat-h5-compatibility/" title="微信的H5兼容方案">https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/en/tags/%E5%BE%AE%E4%BF%A1/" rel="tag"># 微信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/30/begin-learn-java/" rel="prev" title="重拾java开发技能">
+      <i class="fa fa-chevron-left"></i> 重拾java开发技能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/gitlab-cicd/" rel="next" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      基于 GitLab CI/CD 的自动化构建、发布实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81ios%E7%AB%AF%E5%85%BC%E5%AE%B9input%E5%85%89%E6%A0%87%E7%9A%84%E9%AB%98%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">1、ios端兼容input光标的高度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81ios%E7%AB%AF%E5%BE%AE%E4%BF%A1h5%E9%A1%B5%E9%9D%A2%E4%B8%8A%E4%B8%8B%E6%BB%91%E5%8A%A8%E4%BC%9A%E5%8D%A1%E9%A1%BF%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%BC%9A%E6%9C%89%E7%BC%BA%E5%A4%B1"><span class="nav-number">1.2.</span> <span class="nav-text">2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81ios%E9%94%AE%E7%9B%98%E5%94%A4%E8%B5%B7%E5%86%8D%E6%94%B6%E8%B5%B7%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%B8%8D%E4%BC%9A%E6%81%A2%E5%A4%8D%E5%8E%9F%E4%BD%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3、ios键盘唤起再收起，页面不会恢复原位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4%E3%80%81Android%E5%BC%B9%E5%87%BA%E9%94%AE%E7%9B%98%E9%81%AE%E6%8C%A1%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">1.4.</span> <span class="nav-text">4、Android弹出键盘遮挡文本输入框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5%E3%80%81Vue%E4%B8%AD%E8%B7%AF%E7%94%B1%E4%BD%BF%E7%94%A8hash%E6%A8%A1%E5%BC%8F%EF%BC%8C%E5%88%86%E4%BA%AB%E6%97%B6Android%E5%8F%AF%E5%88%86%E4%BA%AB%E6%88%90%E5%8A%9F%EF%BC%8CIos%E7%AB%AF%E5%88%86%E4%BA%AB%E5%A4%B1%E8%B4%A5"><span class="nav-number">1.5.</span> <span class="nav-text">5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2019/12/31/weichat-h5-compatibility/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/weichat-h5-compatibility/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/weichat-h5-compatibility/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '16a97c62915253f84c0caef53e131a40',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/01/Hello-2020/index.html b/en/2020/01/01/Hello-2020/index.html
new file mode 100644
index 0000000000..69b3e926b1
--- /dev/null
+++ b/en/2020/01/01/Hello-2020/index.html
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:type" content="article">
+<meta property="og:title" content="你好2020">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/01/Hello-2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-01T10:50:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/01/Hello-2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>你好2020 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          你好2020
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/01/Hello-2020/">你好2020</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月01日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/01/Hello-2020/" title="你好2020">https://blog.lifesli.com/2020/01/01/Hello-2020/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/01/Hello-2020/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2019/12/31/GoodBye-2019/" rel="prev" title="再见2019">
+      <i class="fa fa-chevron-left"></i> 再见2019
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-dataType/" rel="next" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#2020%E5%85%83%E6%97%A6%E4%BC%8A%E5%A7%8B"><span class="nav-number">1.</span> <span class="nav-text">2020元旦伊始</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%83%E6%97%A6%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">元旦执行计划</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">3.</span> <span class="nav-text">执行计划</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/01/Hello-2020/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/01/Hello-2020/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/01/Hello-2020/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1417510df4a85c966d7fbe9c785f0402',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/21-Day-Challenge-01/index.html b/en/2020/01/02/21-Day-Challenge-01/index.html
new file mode 100644
index 0000000000..c037ddfb3b
--- /dev/null
+++ b/en/2020/01/02/21-Day-Challenge-01/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/21-Day-Challenge-01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/21-Day-Challenge-01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+<span id="more"></span>
+
+<h1 id="1月份21天主题挑战之灵感Inspiration"><a href="#1月份21天主题挑战之灵感Inspiration" class="headerlink" title="1月份21天主题挑战之灵感Inspiration"></a>1月份21天主题挑战之灵感Inspiration</h1><blockquote>
+<p>设定一个挑战主题，让自己更富有创造力，连续21天挑战，让灵感乍现，唤醒天赋。</p>
+</blockquote>
+<h1 id="第一天-Day-1-写下自己期待中的生平"><a href="#第一天-Day-1-写下自己期待中的生平" class="headerlink" title="第一天 Day 1 写下自己期待中的生平"></a>第一天 Day 1 写下自己期待中的生平</h1><p>看到这个题目之后，我闭上了眼睛，努力的回想我自己曾经的梦想是什么，什么时候丢掉了梦想，儿时的梦想，上学时的梦想，长大以后的梦想，现在的梦想，我努力回想了好久好久，儿时的梦想我想起来了，上学时的梦想我想起来了，长大后的梦想我也想起来了，但是我没能一下子找到我现在的梦想，也许现在说梦想有些奢侈，也许也有点贴不上今天的主题期待中的人生，我不太会写文章，但是想到哪里写哪里吧，我先写下我之前的那些个梦想。</p>
+<h2 id="小时候的梦想-成为科学家"><a href="#小时候的梦想-成为科学家" class="headerlink" title="小时候的梦想-成为科学家"></a>小时候的梦想-成为科学家</h2><p>小时候的梦想说出来很简单，但是是那么真诚，真诚就容易打动人，说实话我记性不是太好，已经忘掉了小时候的梦想，所以我问了我妈，我妈笑话我，说我咋不记得小时候那伟大的梦想了，妈妈说我儿时的梦想是当科学家，那会应该是上小学吧，妈妈说学校老师让写作文，标题就是我的梦想，我的作文里写的是成为科学家，这个科学家不像是别人写的，比如造火箭，造大炮又或者是造卫星造原子弹，我的梦想现在说起来与其说是科学家，不如说是药剂师更贴切，妈妈笑着跟我说我当时的梦想是做一个科学家，要研究出来一种长生不老的药，然后让爸爸妈妈吃下以后就可以永远健康年轻，妈妈说那个时候她总逗我，看到路上漂亮的阿姨就会问我，那个阿姨漂亮么，起初我会说漂亮，然后妈妈就会说那让她给你当妈妈好不好，我呢会说不好，妈妈说后来她再问的时候，我就再也不会说我要漂亮阿姨当妈妈的话了，我现在想想也许就是那时，就是因为发现妈妈越来越胖，辛苦操劳后年轻也渐渐不在我才有了这个想法吧，说实话上小学期间我一直认为自己长大能够成为一个科学家，能够造出那长生不老的药让爸妈吃下，这样我就再也不会需要一个漂亮阿姨当妈妈了。我那时希望快快长大，长大了以后我就能做科学家了。</p>
+<p>上了初中高中以后，也许是进了大城市，也许是长大了，我知道了原来的梦想可能有些遥远，学业的压力让我有些透不过气，从海岛到城市，落后了3年的时间，我通过补习班慢慢追赶，终于能够追到了班级还算靠前的位置，那个时候我的梦想很小，也很简单，那就是考个好大学找个好工作，让爸爸妈妈早点不用那么操劳，早点享福。</p>
+<h2 id="18岁的梦想-—-找个好工作，让爸妈早点享福"><a href="#18岁的梦想-—-找个好工作，让爸妈早点享福" class="headerlink" title="18岁的梦想 — 找个好工作，让爸妈早点享福"></a>18岁的梦想 — 找个好工作，让爸妈早点享福</h2><p>努力的学习，懵懂的感情，初中4年+高中3年的生活，最终我并没能特别出色的考上985/211大学，而是上了离家只有1小时车程的大外，学了计算机加日语英语，学费不便宜，每年16000，说实话没自己工作的时候不知道这16000对于一个下岗自己在家开小卖店的父母是多大的负担，工作后我才终于知道这笔钱有多少。好在原来在爸爸单位的时候接触电脑还算比较早，而我对这个新鲜玩意也算是感兴趣，大学学业上并没给我带来太大的压力，但是我也确实不是个聪明的孩子，日语仅仅过了N2，而英语则一直只是CET-4，现在回想起来，原来应该多努努力，也许现在的生活就会更好了，多想回到过去跟自己说，你要努力啊！一晃4年的大学生活就结束了，这时我终于离开了父母身边，只身去往了大城市北京，开启了我的工作生涯。</p>
+<h2 id="20岁的人生-—-多挣钱，快速成长"><a href="#20岁的人生-—-多挣钱，快速成长" class="headerlink" title="20岁的人生 — 多挣钱，快速成长"></a>20岁的人生 — 多挣钱，快速成长</h2><p>工作了以后，我就像海绵一样不断的吸收着周围的水分，学习工作中需要的技能，学习如何才能让领导器重，学习如何才能快速积累人生的财富，因为我想着，想着能快快独立反哺我的爸妈。20岁，我跟媳妇儿谈了场异地的恋爱，后来她到北京找我，再后来我们就一起回了大连。北京是个大城市，大的有时候让人迷茫，虽然工作机会比较多，但是租房的压力，环境的恶劣，家里的呼唤，最终让我选择了回到我熟悉的城市，另外找了份工资不高的工作，我不满足，我想能成为顶天立地的男子汉，后来我就来到了现在的公司华宇，而且一待就是5年。</p>
+<h2 id="华宇的职业生涯-—-5年工作，9年经验"><a href="#华宇的职业生涯-—-5年工作，9年经验" class="headerlink" title="华宇的职业生涯 — 5年工作，9年经验"></a>华宇的职业生涯 — 5年工作，9年经验</h2><p>网上有个段子我记得，一个人面试拿出简历，工作时间是2年却写着3年工作经验，面试官问他是不是写错了，他答不是，因为加班加出来的。这算是对前公司的吐槽吧。</p>
+<p>来到大连华宇时，公司还不足120人，我所在的团队还是个交互组，只有三个人，前端的话只有我和另外一个刚毕业的大学生，记得刚来公司的第一年，我参与了140个项目的开发工作，现在想想这个数字有些惊人，但是因为只是些前端切图仔的工作，对我来说感觉难度并不大，不过还是要感谢刚开始这2年，让我的基础非常扎实，再后来公司引入了前后端分离，引入了Vue框架，越来越多的业务要写，数据处理要写，加班成了家常便饭，后面这三年，我几乎没有休过除了元旦和春节的任何法定节假日，每年5天的年假也几乎都没休成，说实话每次加班加到要崩溃时候，我都会想我到底为了啥这么拼命。要不我还是换一家比较轻松一点的工作吧，工资还能涨点。说实话这段时间工作就是生活的全部，每天到家都10点以后，到家老人孩子都睡了，有时候我都睡不着，想着我的生活难道就这样了么，我不甘心，不服输。很多人劝我别那么拼命，别把公司当成自己家的，只是个打工的而已，但是有时候想着下面还有那么多新人信任着我依赖着我，我就没法撒手不管。终于时间到了19年年底，5年来培养的前端团队最后还是没守护住，要拆到各项目团队了，一开始真的难以接受，不过公司领导层已经决定了，作为一线员工只能服从，我希望大家能够把心中的担忧都能消除掉，在新的团队里开启新的篇章，也许会有更好的发展，如果有一天离开了华宇，也要江湖相望，常聚聚。</p>
+<h2 id="2020年31岁踏上新的旅途"><a href="#2020年31岁踏上新的旅途" class="headerlink" title="2020年31岁踏上新的旅途"></a>2020年31岁踏上新的旅途</h2><p>还是感谢小可爱的这个本子，让我能够有主题想想我未来到底想要什么样的生活，说句实在话，我向往不为钱发愁工作的日子，可以在做好自己工作之外的时间里多陪陪家人，带着孩子常出去走走，见见外面的世界，说实话已经31岁了，除了谈恋爱时去找媳妇儿去过江浙苏杭，工作原因去过北京/青海，好像这些年也就去了趟南京，现在的我已经有些不知道什么叫做生活了，我希望自己的空闲时间是可以让兴趣填满的，可以和朋友同事同学多聚聚，但是怕打扰大家我又从来不会主动去约别人，小时候没有听从爸妈的话培养自己的兴趣，现在有些后悔，真的空闲下来都不知道该用什么填满这时间，都是躺在床上刷手机，看电视，我不喜欢这样的生活，但是我不知道该过怎么样的生活。看到那些会做饭的视频，做顿丰盛的饭菜给家人吃，看到他们的幸福笑脸，我想做那样的事；看到带着家人过着一路向前增长见闻的旅途生活，我想也尝试一下那样的人生，我感觉为了钱我被束缚在了工作上，2020年我想过一种不为工作所累，不为钱所累，能够享受生活，陪伴家人的生活，保重身体，每天快快乐乐的，多发现生活中的美好，感恩，努力，成长。期待自己成为更好的人。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>我所期待中的生平，成为一个不被工作强迫，不被金钱所累，爱家顾家，孝敬父母，人缘好朋友多，兴趣广泛，感恩的人。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/21-Day-Challenge-01/">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/21-Day-Challenge-01/" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-prototype/" rel="prev" title="前端常见知识点整理 ---- 原型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 原型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-instanceof/" rel="next" title="前端常见知识点整理 ---- instanceof">
+      前端常见知识点整理 ---- instanceof <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E6%9C%88%E4%BB%BD21%E5%A4%A9%E4%B8%BB%E9%A2%98%E6%8C%91%E6%88%98%E4%B9%8B%E7%81%B5%E6%84%9FInspiration"><span class="nav-number">2.</span> <span class="nav-text">1月份21天主题挑战之灵感Inspiration</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E5%A4%A9-Day-1-%E5%86%99%E4%B8%8B%E8%87%AA%E5%B7%B1%E6%9C%9F%E5%BE%85%E4%B8%AD%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">3.</span> <span class="nav-text">第一天 Day 1 写下自己期待中的生平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E6%97%B6%E5%80%99%E7%9A%84%E6%A2%A6%E6%83%B3-%E6%88%90%E4%B8%BA%E7%A7%91%E5%AD%A6%E5%AE%B6"><span class="nav-number">3.1.</span> <span class="nav-text">小时候的梦想-成为科学家</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18%E5%B2%81%E7%9A%84%E6%A2%A6%E6%83%B3-%E2%80%94-%E6%89%BE%E4%B8%AA%E5%A5%BD%E5%B7%A5%E4%BD%9C%EF%BC%8C%E8%AE%A9%E7%88%B8%E5%A6%88%E6%97%A9%E7%82%B9%E4%BA%AB%E7%A6%8F"><span class="nav-number">3.2.</span> <span class="nav-text">18岁的梦想 — 找个好工作，让爸妈早点享福</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20%E5%B2%81%E7%9A%84%E4%BA%BA%E7%94%9F-%E2%80%94-%E5%A4%9A%E6%8C%A3%E9%92%B1%EF%BC%8C%E5%BF%AB%E9%80%9F%E6%88%90%E9%95%BF"><span class="nav-number">3.3.</span> <span class="nav-text">20岁的人生 — 多挣钱，快速成长</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%8E%E5%AE%87%E7%9A%84%E8%81%8C%E4%B8%9A%E7%94%9F%E6%B6%AF-%E2%80%94-5%E5%B9%B4%E5%B7%A5%E4%BD%9C%EF%BC%8C9%E5%B9%B4%E7%BB%8F%E9%AA%8C"><span class="nav-number">3.4.</span> <span class="nav-text">华宇的职业生涯 — 5年工作，9年经验</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2020%E5%B9%B431%E5%B2%81%E8%B8%8F%E4%B8%8A%E6%96%B0%E7%9A%84%E6%97%85%E9%80%94"><span class="nav-number">3.5.</span> <span class="nav-text">2020年31岁踏上新的旅途</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">4.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/21-Day-Challenge-01/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/21-Day-Challenge-01/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/21-Day-Challenge-01/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ba1b560e8c11f000a46872456aa675b7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-Closure/index.html b/en/2020/01/02/FE-guide-Closure/index.html
new file mode 100644
index 0000000000..b92e3b3567
--- /dev/null
+++ b/en/2020/01/02/FE-guide-Closure/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 闭包">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-Closure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T13:32:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.367Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-Closure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 闭包 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 闭包
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-Closure/">前端常见知识点整理 ---- 闭包</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:32</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-Closure/" title="前端常见知识点整理 ---- 闭包">https://blog.lifesli.com/2020/01/02/FE-guide-Closure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="prev" title="前端常见知识点整理 ---- 执行上下文">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 执行上下文
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-new/" rel="next" title="前端常见知识点整理 ---- new">
+      前端常见知识点整理 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%97%AD%E5%8C%85Closure"><span class="nav-number">1.</span> <span class="nav-text">闭包Closure</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-Closure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-Closure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-Closure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '842640ed4b7a5ad4c9743893090c6a30',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-dataType/index.html b/en/2020/01/02/FE-guide-dataType/index.html
new file mode 100644
index 0000000000..dc67ffcc79
--- /dev/null
+++ b/en/2020/01/02/FE-guide-dataType/index.html
@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-dataType/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T08:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.387Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-dataType/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+<a id="more"></a>
+
+<h1 id="JS知识点"><a href="#JS知识点" class="headerlink" title="JS知识点"></a>JS知识点</h1><blockquote>
+<p>当前市场中，如何区分一个好一点的前端开发和一般的前端开发，主要看的就是js能力的差距，好的前端开发，JS玩的转，不仅仅是框架玩的好，还要JS的基础扎实，只有基础与新技术都玩的6的前端开发才是好前端。</p>
+</blockquote>
+<p>上面这句话不是什么名人或者某位知名前端大拿说的，这是我在公司这几年面试招聘的过程中真真切切总结感受的。<br>所以可以说得JS者得高级前端，所以下面也主要是写JS的相关知识点。</p>
+<h2 id="JavaScript内置数据类型-—-数据类型"><a href="#JavaScript内置数据类型-—-数据类型" class="headerlink" title="JavaScript内置数据类型 — 数据类型"></a>JavaScript内置数据类型 — 数据类型</h2><p>无论学什么语言最重要最基础的就是数据类型，《JavaScript权威指南》这本书中详细的介绍了JS中的数据类型，下面总结一下。</p>
+<p>JavaScript中数据类型分为两大类共七种内置数据类型，其一是6种<strong><em><code>基本类型</code></em></strong>，其二是1种<strong><em><code>引用类型</code></em></strong>，我发现在面试过程中好多面试者都不会先说有两大类，而是会直接蹦出数字类型、字符串类型。。。对象、数组也会被并排放在一起，这其实不是个掌握知识点的好方法，应该先把数据类型分成上面说的<strong><em><code>基本类型</code></em></strong>、<strong><em><code>引用类型</code></em></strong>这样两个大类之后，再看看这两大类中有什么其他的子类型，在记忆其他子类型之前我觉得应该先了解一下什么是<strong><em><code>基本类型</code></em></strong>和<strong><em><code>引用类型</code></em></strong>，实际上基本类型和引用类型的主要区别是存储的区别，基本类型在栈中，而引用类型的话，引用数据的地址存储在栈中，而对象本身是存储在堆中，引用的数据地址是个16进制的数据值，它就像一把钥匙让你能够找到宝藏在什么地方。这就是基本数据类型和引用类型的区别了。</p>
+<p>那么如何记住有哪些基本数据类型和引用数据类型呢，实际上只要记住了6个基本数据类型，其他的都是引用数据类型，而所有的引用数据类型的祖宗都是Object，所以引用数据类型实际上只有Object一个，那么像是Array等其他子类型，都是Object的孩子，不跟Object在一个级别上。</p>
+<p>基本数据类型有哪些呢？其实挺好记的，数字，字符串，这两个一个像温柔的文学少女（string），一个像有点精于算计的男生（number），还有一个布尔类型（boolen）他像是班级里正义感爆棚的人，只论对错；另外还有个差生，没头脑似的未定义（Undefined）还有一个失了忆记不起来自己是谁的空（Null），最后还有一个新加入的插班生，总是带着口罩的标志符号（Symbol），这些人构成了这个班级的所有学生，也就是全部的基本类型，那么引用类型的对象Object呢就像及了漂亮爱化妆的班主任老师，有好多副面孔。不知道大家有没有看过一个动漫叫做《黑塔利亚》，他就是把国家都拟人化了，有了各自的性格，我很喜欢看，我觉得这些数据类型也各有各的特点，像这些国家一样，好了脑洞有点挖深了，有人会说我不就是这么几个简单的数据类型嘛，硬记下来不就好了，但是知识总有你硬记不下来的时候，最好的方法也是速记领域最为常用的方法，就是把你不熟悉的知识与你感兴趣的画面或者既往的知识串联起来，这样就能达到很好的记忆，如果你不喜欢动漫（怎么会有不喜欢动漫的人！！！），可以试试用其他的方法记，当然你如果硬要死记硬背那我也没办法，我继续开我的脑洞。<br>如果你是学过Java开发的同学（如果是计算机专业出来的，应该都或多或少学过，非计算机专业的我也不知道说啥了。。），数字在Java中是分成 byte/short/int/long 的，但是在Js中没有那么多，就一个Number，它是浮点类型，基于 IEEE 754标准实现，刚才我不是说了Number是个精于算计的男生，精于算计就是说他分毫不差，这样浮点型就很好的记了下来，这个754的标准可以不记，如果非要记的话，你可以记成他是自称IEEE 754团体的成员。最后Number身后还跟着一个小弟，叫做NaN，他虽然是Number的小弟，但他总是说话不算数，自己说过什么都不承认。所以NaN!=NaN。<br>老师是个爱化妆的老师，而这些学生也不是普通的学生，在学校他们是老老实实的基本类型，放了学之后一打扮，他们就各有了其他的能力，这个过程叫做装箱，具体的后面再说。（好了快回到现实吧你！）</p>
+<p>如果基础数据是字面量类型，那么他们就像是在上课的学生，只是学生而已，而当他们调用方法时，他们就成了下课后各种技能都有的新新人类，这个过程有时候是显示的，就像是有些学生喜欢大声嚷嚷，而更多的是你不自觉中就用到了装箱操作，是Js引擎提供的能力，就像是有些闷骚的学生一样。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let aNumber &#x3D; 111 &#x2F;&#x2F; 这只是字面量，不是 number 类型</span><br><span class="line">aNumber.toString() &#x2F;&#x2F; 装箱操作自动转化成数字对象，使用时候才会转换为对象类型</span><br></pre></td></tr></table></figure>
+<p>对象有个深浅拷贝的知识点必须要会，对象因为是引用数据类型，在栈中存储的是地址，当用另一个变量接收了之前的变量，那么就好像把钥匙复制了一把，两把钥匙开的还是同一个门，而深拷贝呢就像是照着原来的样板间又造了一个一模一样的房间，这两个房间长得一样，但就是两个房间，钥匙自然也是不一样的，所以呢，当往房间里搬家具的时候，浅拷贝搬进去的是一个房间，所以两把钥匙打开之后看到的都是多了家具，而深拷贝的话，我只是往样板间搬了家具，所以照着装修的房间里是不可能有的，这就是浅拷贝原数据会受影响，而深拷贝不会。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let a &#x3D; &#123; name: &#39;FE&#39; &#125;</span><br><span class="line">let b &#x3D; a</span><br><span class="line">b.name &#x3D; &#39;EF&#39;</span><br><span class="line">console.log(a.name) &#x2F;&#x2F; EF 浅拷贝原数据会受影响</span><br></pre></td></tr></table></figure>
+<h2 id="内置数据类型检测-Typeof-—-类型判断"><a href="#内置数据类型检测-Typeof-—-类型判断" class="headerlink" title="内置数据类型检测 Typeof — 类型判断"></a>内置数据类型检测 Typeof — 类型判断</h2><blockquote>
+<p>typeof 对于基本类型，除了 null 都可以显示正确的类型</p>
+</blockquote>
+<p>typeof 就像是学校的教导主任一样，他有着一双火眼金睛，不管是哪个同学，穿了什么样的衣服，他一问就能问出来这个学生是谁，大家都怕他，但是Null因为失忆了，他也不知道教导主任是谁，所以typeof就拿他也没办法，因为他不怕教导主任，教导主任甚至会以为他是老师呢。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof 1 &#x2F;&#x2F; &#39;number&#39;</span><br><span class="line">typeof &#39;1&#39; &#x2F;&#x2F; &#39;string&#39;</span><br><span class="line">typeof undefined &#x2F;&#x2F; &#39;undefined&#39;</span><br><span class="line">typeof true &#x2F;&#x2F; &#39;boolean&#39;</span><br><span class="line">typeof Symbol() &#x2F;&#x2F; &#39;symbol&#39;</span><br><span class="line">typeof b &#x2F;&#x2F; b 没有声明，但是还会显示 undefined</span><br><span class="line"></span><br><span class="line">typeof null &#x2F;&#x2F; &#39;object&#39; 这是JS中的bug</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>typeof 对于对象，除了函数都会显示 object</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof [] &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof &#123;&#125; &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof console.log &#x2F;&#x2F; &#39;function&#39;</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>知识扩展：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。</p>
+</blockquote>
+<p><strong><em>如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。</em></strong></p>
+<blockquote>
+<p>小知识扩展</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let a</span><br><span class="line">&#x2F;&#x2F; 我们也可以这样判断 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; undefined</span><br><span class="line">&#x2F;&#x2F; 但是 undefined 不是保留字，能够在低版本浏览器被赋值</span><br><span class="line">let undefined &#x3D; 1</span><br><span class="line">&#x2F;&#x2F; 这样判断就会出错</span><br><span class="line">&#x2F;&#x2F; 所以可以用下面的方式来判断，并且代码量更少</span><br><span class="line">&#x2F;&#x2F; 因为 void 后面随便跟上一个组成表达式</span><br><span class="line">&#x2F;&#x2F; 返回就是 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; void 0</span><br></pre></td></tr></table></figure>
+
+<h2 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h2><h3 id="转Boolean"><a href="#转Boolean" class="headerlink" title="转Boolean"></a>转Boolean</h3><p>一句话可以概括</p>
+<blockquote>
+<p>在条件判断时，除了 <code>undefined</code>， <code>null</code>， <code>false</code>， <code>NaN</code>， <code>&#39;&#39;</code>， <code>0</code>， <code>-0</code>，其他所有值都转为 true，包括所有对象。</p>
+</blockquote>
+<p>从上面这段话可以看出来，<code>undefined</code>、<code>null</code> 是基本类型之二，而<code>false</code>是布尔类型的假值，<code>NaN</code>是数字类型的无效值，<code>&#39;&#39;</code>是字符串类型的空值，而<code>0</code>， <code>-0</code>都是数字类型的零值，可以看到，除了<code>0</code>、<code>-0</code>有些特殊，除了插班生<code>Symbol</code>，剩下的都是基本类型的假值，由此实际上就很好记了，有时候数字这个容易忘，但是记住“非0既真”这句话就好了。</p>
+<h3 id="对象转基本类型"><a href="#对象转基本类型" class="headerlink" title="对象转基本类型"></a>对象转基本类型</h3><p>对象在转换基本类型时，首先是先会调用ToPrimitive（原始类型），如果有hint参数调用对应的的类型方法，如果没有那默认先会调用 valueOf 然后调用 toString。如果返回了基本类型，结束。如果都没返回，那么Error<strong><em>但是注意这两个方法你是可以重写的。</em></strong></p>
+<blockquote>
+<p>Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。（来自MDN的解释）<br>需要解释的关键机制是ToPrimitive函数。该函数是将任意值转换为相应的基本类型值。如果输入的就是一个基本类型值，那么将不做修改，被直接返回。如果值是非基本类型值，它将调用内部方法 [[DefaultValue]] 为对象找到一个默认值。<br>[[DefaultValue]]是每一个对象的内部属性。该方法需要一个可选的参数hint，值是Number或String。如果没有提供hint，则默认为Number(除非该对象是Date，在这种情况下默认为String)。然后将调用toString和valueOf去寻找基本类型值。在这里hint就起到作用了。如果hint参数值为Number，valueOf将先被调用，如果hint是String的话，则toString被先调用。<br>[[DefaultValue]] 返回的值一定是基本类型值。如果不是，一个TypeError 将会被抛出。这就意味着为了在这种情况下有意义，toString和valueOf应该返回基本类型值。</p>
+</blockquote>
+<h3 id="四则运算符"><a href="#四则运算符" class="headerlink" title="四则运算符"></a>四则运算符</h3><blockquote>
+<p>只有当<strong><em>加法</em></strong>运算时，其中一方是<strong><em>字符串类型</em></strong>，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。<strong><em>并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。</em></strong></p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">1 + &#39;1&#39; &#x2F;&#x2F; &#39;11&#39; 这里会是面试陷阱</span><br><span class="line">2 * &#39;2&#39; &#x2F;&#x2F; 4 </span><br><span class="line">[1, 2] + [2, 1] &#x2F;&#x2F; &#39;1,22,1&#39;</span><br><span class="line">&#x2F;&#x2F; [1, 2].toString() -&gt; &#39;1,2&#39;</span><br><span class="line">&#x2F;&#x2F; [2, 1].toString() -&gt; &#39;2,1&#39;</span><br><span class="line">&#x2F;&#x2F; &#39;1,2&#39; + &#39;2,1&#39; &#x3D; &#39;1,22,1&#39;</span><br></pre></td></tr></table></figure>
+<p><strong>*面试陷阱题之 ++ *</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 问表达式 &#39;a&#39; + + &#39;b&#39; 返回结果是什么？</span><br><span class="line">&#x2F;&#x2F; 答案是 &#39;aNaN&#39;</span><br><span class="line">&#39;a&#39; + + &#39;b&#39; -&gt; &#x2F;&#x2F; 一元运算符优先级高</span><br><span class="line">&#39;a&#39; + (+ &#39;b&#39;) -&gt; &#x2F;&#x2F; +&#39;b&#39;转数字类型，非有效结果是NaN</span><br><span class="line">&#39;a&#39; + NaN.toString() -&gt; &#x2F;&#x2F; NaN调用toString（）成字符串&#39;NaN&#39;</span><br><span class="line">&#39;aNaN&#39; &#x2F;&#x2F; 字符串接到一起后&#39;aNaN&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 类似题 &#39;1&#39; + + &#39;4&#39; 返回结果是什么 </span><br><span class="line">&#x2F;&#x2F; 其实就是&#39;4&#39; -&gt; 4 -&gt; &#39;4&#39; 最后还是&#39;14&#39;</span><br></pre></td></tr></table></figure>
+
+<h2 id="操作符-—-类型比较"><a href="#操作符-—-类型比较" class="headerlink" title="== 操作符 — 类型比较"></a>== 操作符 — 类型比较</h2><blockquote>
+<p>相等运算符的运算规则如下：<br>1、如果两个值类型相同，进行 === 比较。(这个非常好理解，就不多说了)<br>（1）数字比大小<br>（2）字符串就通过 unicode 字符索引来比较<br>2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：<br>（1）如果一个是null、一个是undefined，那么[相等]。 // 这个有点特殊需要单独记<br>（2）如果任一值是字符串，另一个值是数值，在比较相等性之前先将字符串转换为数值；即是调用Number()函数。<br>（3）如果任一值时布尔值，则在比较相等性之前先将其转换为数值，即是调用Number()函数。<br>（4）如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 （js核心内置类ToPrimitive，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。）</p>
+</blockquote>
+<p>1不说，2（1）的话单独记，其他基本类型转数字比较，引用性数据类型调用ToPrimitive转换成基本数据类型</p>
+<p>首先还是一道面试题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; [] &#x3D;&#x3D; ![] 结果是什么</span><br><span class="line">[] &#x3D;&#x3D; ![] &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>
+<p>为什么呢？我们来解析一下，</p>
+<ol>
+<li>首先我们看一下右侧，<code>![]</code>肯定是要先转换成boolen类型了吧，那么<code>[]</code>的布尔类型是什么呢，上面转换布尔的时候我们说过，除了那五个基本类型的假值以及正负0之外，都是真值，所以<code>[]</code> -&gt; <code>true</code> <code>![]</code> -&gt; <code>false</code></li>
+<li><code>ToPrimitive(false)</code>-&gt;<code>0</code>右边的值得出了数值类型的原始值</li>
+<li>看左边<code>ToPrimitive([])</code>-&gt;<code>[]</code>.toString()-&gt;<code>&#39;&#39;</code></li>
+<li><code>Number(&#39;&#39;)</code>-&gt;<code>0</code></li>
+<li>比较左右 <code>0 == 0</code> -&gt; <code>true</code></li>
+</ol>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>到这里JS的内置数据类型及类型的转换和比较就讲完了，相信大家看过以后一定会记得住的<br>PS：突然好像学画漫画，《JS数据结构们》，一定大火，哈哈哈😂</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-dataType/">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 08:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-dataType/" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">https://blog.lifesli.com/2020/01/02/FE-guide-dataType/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/01/Hello-2020/" rel="prev" title="你好2020">
+      <i class="fa fa-chevron-left"></i> 你好2020
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-prototype/" rel="next" title="前端常见知识点整理 ---- 原型">
+      前端常见知识点整理 ---- 原型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JS%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-number">2.</span> <span class="nav-text">JS知识点</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B-%E2%80%94-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.1.</span> <span class="nav-text">JavaScript内置数据类型 — 数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B-Typeof-%E2%80%94-%E7%B1%BB%E5%9E%8B%E5%88%A4%E6%96%AD"><span class="nav-number">2.2.</span> <span class="nav-text">内置数据类型检测 Typeof — 类型判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.</span> <span class="nav-text">类型转换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%ACBoolean"><span class="nav-number">2.3.1.</span> <span class="nav-text">转Boolean</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E8%BD%AC%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.2.</span> <span class="nav-text">对象转基本类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%9B%E5%88%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">2.3.3.</span> <span class="nav-text">四则运算符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6-%E2%80%94-%E7%B1%BB%E5%9E%8B%E6%AF%94%E8%BE%83"><span class="nav-number">2.4.</span> <span class="nav-text">&#x3D;&#x3D; 操作符 — 类型比较</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-dataType/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-dataType/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-dataType/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c80bd26df014478ae890b60ccf6b9044',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-instanceof/index.html b/en/2020/01/02/FE-guide-instanceof/index.html
new file mode 100644
index 0000000000..2d122856f9
--- /dev/null
+++ b/en/2020/01/02/FE-guide-instanceof/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- instanceof">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-instanceof/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T12:29:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.397Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-instanceof/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- instanceof | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- instanceof
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-instanceof/">前端常见知识点整理 ---- instanceof</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:29</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-instanceof/" title="前端常见知识点整理 ---- instanceof">https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/21-Day-Challenge-01/" rel="prev" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      <i class="fa fa-chevron-left"></i> 2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-this/" rel="next" title="前端常见知识点整理 ---- this">
+      前端常见知识点整理 ---- this <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#instanceof"><span class="nav-number">1.</span> <span class="nav-text">instanceof</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-instanceof/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-instanceof/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-instanceof/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b1bbfd09c741c1c8392b1017f4989aee',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-new/index.html b/en/2020/01/02/FE-guide-new/index.html
new file mode 100644
index 0000000000..2b1bcfb0ed
--- /dev/null
+++ b/en/2020/01/02/FE-guide-new/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T20:07:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-new/">前端常见知识点整理 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 20:07</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-new/" title="前端常见知识点整理 ---- new">https://blog.lifesli.com/2020/01/02/FE-guide-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-Closure/" rel="prev" title="前端常见知识点整理 ---- 闭包">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 闭包
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-copy/" rel="next" title="前端常见知识点整理 ---- 深浅拷贝">
+      前端常见知识点整理 ---- 深浅拷贝 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#new-%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">1.</span> <span class="nav-text">new 一个对象的过程</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '193ad0586aa000709f92eba435adbb2c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-prototype/index.html b/en/2020/01/02/FE-guide-prototype/index.html
new file mode 100644
index 0000000000..133f46cafc
--- /dev/null
+++ b/en/2020/01/02/FE-guide-prototype/index.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 原型">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-prototype/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg">
+<meta property="article:published_time" content="2020-01-02T11:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.402Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-prototype/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 原型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 原型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+<a id="more"></a>
+<p><img src="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg" alt="总结"></p>
+<h1 id="prototype-原型对象"><a href="#prototype-原型对象" class="headerlink" title="prototype 原型对象"></a><code>prototype</code> 原型对象</h1><h2 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a>什么是原型？</h2><p>每个函数都具有 <code>prototype</code> 属性，它被默认成一个对象，即原型对象<br>首先来介绍下 <code>prototype</code> 属性。这是一个<code>显式</code>原型属性，只有<code>函数</code>才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let fun &#x3D; Function.prototype.bind()</span><br></pre></td></tr></table></figure>
+<p>如果你以上述方法创建一个函数，那么可以发现这个函数是不具有 prototype 属性的。</p>
+<h2 id="prototype-如何产生的"><a href="#prototype-如何产生的" class="headerlink" title="prototype 如何产生的"></a><code>prototype</code> 如何产生的</h2><p>当我们声明一个函数时，这个属性就被自动创建了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
+<p>并且这个属性的值是一个对象（也就是<code>原型</code>），只有一个属性 <code>constructor</code><br><code>constructor</code> 对应着构造函数，也就是 <code>Foo</code>。</p>
+<h2 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a>什么是原型链？</h2><p>当对象使用属性时，先在自身找，有就直接用，没有就沿着<strong>proto</strong>这条链往上找，直到 Object 原型的位置，有就返回相应的值，没有就返回 underfined。</p>
+<h2 id="constructor-构造函数"><a href="#constructor-构造函数" class="headerlink" title="constructor 构造函数"></a><code>constructor</code> 构造函数</h2><h3 id="什么是构造函数？"><a href="#什么是构造函数？" class="headerlink" title="什么是构造函数？"></a>什么是构造函数？</h3><p>任何一个函数，只要被 new 操作符使用，就可以是一个构造函数（构造函数建议以大写开头）<br>另外，在 JavaScript 的内置对象中，所有的函数对象都是 Function 构造函数的实例，比如：Object、Array等</p>
+<p><code>constructor</code> 是一个公有且不可枚举的属性。一旦我们改变了函数的 <code>prototype</code> ，那么新对象就没有这个属性了（当然可以通过原型链取到 <code>constructor</code>）。</p>
+<p>那么你肯定也有一个疑问，这个属性到底有什么用呢？其实这个属性可以说是一个历史遗留问题，在大部分情况下是没用的，在我的理解里，我认为他有两个作用：</p>
+<ol>
+<li>让实例对象知道是什么函数构造了它</li>
+<li>如果想给某些类库中的构造函数增加一些自定义的方法，就可以通过 <code>xx.constructor.method</code> 来扩展</li>
+</ol>
+<h2 id="proto"><a href="#proto" class="headerlink" title="_proto_"></a><code>_proto_</code></h2><p>这是每个对象都有的<code>隐式原型属性</code>，指向了创建该对象的<code>构造函数</code>的原型。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。</p>
+<p>因为在 JS 中是没有类的概念的，为了实现类似继承的方式，通过 <code>_proto_</code> 将对象和原型联系起来组成原型链，得以让对象可以访问到不属于自己的属性。</p>
+<h3 id="实例对象的-proto-如何产生的"><a href="#实例对象的-proto-如何产生的" class="headerlink" title="实例对象的 _proto_ 如何产生的"></a>实例对象的 <code>_proto_</code> 如何产生的</h3><p>从上图可知，当我们使用 <code>new</code> 操作符时，生成的实例对象拥有了 <code>_proto_</code> 属性。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 这个函数是 Function 的实例对象</span></span><br><span class="line"><span class="comment">// function 就是一个语法糖</span></span><br><span class="line"><span class="comment">// 内部调用了 new Function(...)</span></span><br></pre></td></tr></table></figure>
+<p>所以可以说，在 <code>new</code> 的过程中，新对象被添加了 <code>_proto_</code> 并且链接到构造函数的原型上。</p>
+<h3 id="new-的过程"><a href="#new-的过程" class="headerlink" title="new 的过程"></a><code>new</code> 的过程</h3><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"> name </span>)</span>&#123; </span><br><span class="line"> <span class="keyword">this</span>.name = name; </span><br><span class="line">&#125;; </span><br><span class="line">Person.prototype.getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.name; </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">let</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>() <span class="comment">// 从 Object.prototype 上克隆一个空的对象</span></span><br><span class="line">	<span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>) <span class="comment">// 获取外部传入的构造器，此例是 Person </span></span><br><span class="line">	obj.__proto__ = Con.prototype	<span class="comment">// 指向正确的原型,链接到原型</span></span><br><span class="line">	<span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>) <span class="comment">// 绑定 this，执行构造函数，借用外部传入的构造器给 obj 设置属性</span></span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">typeof</span> result === <span class="string">'object'</span> ? result : obj <span class="comment">// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">create(Person,<span class="string">'lixg'</span>)</span><br></pre></td></tr></table></figure>
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = { b : 1 }</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code> ，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// function 就是个语法糖,内部等同于 new Function()</span></span><br><span class="line"><span class="keyword">let</span> a = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125; <span class="comment">// 这个字面量内部也是使用了 new Object()</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="Function-proto-Function-prototype"><a href="#Function-proto-Function-prototype" class="headerlink" title="Function.proto === Function.prototype"></a>Function.<strong>proto</strong> === Function.prototype</h2><p>对于对象来说，<code>xx.__proto__.contrcutor</code> 是该对象的构造函数，但是在图中我们可以发现 <code>Function.__proto__</code> === <code>Function.prototype</code>，难道这代表着 <code>Function</code> 自己产生了自己?</p>
+<p>答案肯定是否认的，要说明这个问题我们先从 <code>Object</code> 说起。</p>
+<p>从图中我们可以发现，所有对象都可以通过原型链最终找到 <code>Object.prototype</code> ，虽然 <code>Object.prototype</code> 也是一个对象，但是这个对象却不是 <code>Object</code> 创造的，而是引擎自己创建了 <code>Object.prototype</code> 。所以可以这样说，所有实例都是对象，但是对象不一定都是实例。</p>
+<p>接下来我们来看 <code>Function.prototype</code> 这个特殊的对象，如果你在浏览器将这个对象打印出来，会发现这个对象其实是一个函数。</p>
+<p>我们知道函数都是通过 <code>new Function()</code> 生成的，难道 <code>Function.prototype</code> 也是通过 <code>new Function()</code> 产生的吗？答案也是否定的，这个函数也是引擎自己创建的。首先引擎创建了 <code>Object.prototype</code> ，然后创建了 <code>Function.prototype</code> ，并且通过 <code>__proto__</code> 将两者联系了起来。这里也很好的解释了上面的一个问题，为什么 <code>let fun = Function.prototype.bind()</code> 没有 prototype 属性。因为 <code>Function.prototype</code> 是引擎创建出来的对象，引擎认为不需要给这个对象添加 <code>prototype</code> 属性。</p>
+<p><strong><em>所以我们又可以得出一个结论，不是所有函数都是 <code>new Function()</code> 产生的。</em></strong><br>有了 <code>Function.prototype</code> 以后才有了 <code>function Function()</code> ，然后其他的构造函数都是 <code>function Function()</code> 生成的。</p>
+<p>现在可以来解释 <code>Function.__proto__ === Function.prototype</code> 这个问题了。因为先有的 <code>Function.prototype</code> 以后才有的 <code>function Function()</code> ，所以也就不存在鸡生蛋蛋生鸡的悖论问题了。对于为什么 <code>Function.__proto__</code> 会等于 <code>Function.prototype</code> ，个人的理解是：其他所有的构造函数都可以通过原型链找到 <code>Function.prototype</code> ，并且 <code>function Function()</code> 本质也是一个函数，为了不产生混乱就将 <code>function Function()</code> 的 <code>__proto__</code> 联系到了 <code>Function.prototype</code> 上。</p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li><code>Object</code> 是所有对象的爸爸，所有对象都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function</code> 是所有函数的爸爸，所有函数都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function.prototype</code> 和 <code>Object.prototype</code> 是两个特殊的对象，他们由引擎来创建</li>
+<li>除了以上两个特殊对象，其他对象都是通过构造器 <code>new</code> 出来的</li>
+<li>函数的 <code>prototype</code> 是一个对象，也就是原型</li>
+<li>对象的 <code>__proto__</code> 指向原型， <code>__proto__</code> 将对象和原型连接起来组成了原型链<br><img src="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png" alt="总结"></li>
+</ul>
+<h2 id="归纳"><a href="#归纳" class="headerlink" title="归纳"></a>归纳</h2><p><code>ES</code> 把对象定义为：“无序属性的集合，其属性可以包含基本值，对象和函数”。<br>严格来讲，这就相当于说对象是一组没有特定顺序的值。ES 中的构造函数可以用来创建特定类型的对象，用来在创建对象时初始化对象。它的特点是，一般为大写字母开头，使用 <code>new</code> 操作符来实例化对象，比如：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br><span class="line">person.name = <span class="string">"Kevin"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(person.name); <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
+
+<p><code>Person</code> 就是构造函数， <code>person</code> 就是对象。对于对象而言，每个 <code>JS</code> 对象一定对应一个原型对象，并从原型对象继承属性和方法。对象 <code>__proto__</code> 属性的值就是它所对应的原型对象。对象的 <code>__proto__</code> 指向自己构造函数的 <code>prototype</code> 。所以对象的原型链就是 <code>obj.__proto__.proto__....</code> 。对于函数而言，只有函数才有 <code>prototype</code> 属性， <code>Person.prototype</code>  是一个对象，并且有两个属性， 一个是 <code>constructor</code> 指向其构造函数 <code>Person</code> ， 一个是 <code>__proto__</code>  属性：是一个对象，指向上一层的原型。原型链的尽头是 <code>Object.prototype</code> 。所有对象均从 <code>Object.prototype</code> 继承属性。<code>Function.prototype</code> 和 <code>Function.__proto__</code> 为同一对象。<code>Object/Array/String</code> 等等构造函数本质上和 <code>Function</code> 一样，均继承于 <code>Function.prototype</code> 。<code>Function.prototype</code> 直接继承 <code>Object.prototype</code> 。这里的 <code>Object</code> 和 <code>Function</code> 有点鸡和蛋的问题，总结：先有 <code>Object.prototype</code>（原型链顶端），<code>Function.prototype</code> 继承 <code>Object.prototype</code> 而产生，最后，<code>Function</code> 和 <code>Object</code> 和其它构造函数继承 <code>Function.prototype</code> 而产生。属性查找时，先在对象自己上找，找不到才会一步步根据原型链往上找。<br><img src="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg" alt="继承"></p>
+<h2 id="关联阅读"><a href="#关联阅读" class="headerlink" title="关联阅读"></a>关联阅读</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain</a><br><a href="https://zhuanlan.zhihu.com/p/35790971" target="_blank" rel="noopener">说说原型（prototype）、原型链和原型继承</a></p>
+<h2 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h2><p><a target="_blank" rel="noopener" href="https://lixuguang.github.io/2020/01/13/FE-guide-inherit2/">继承</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-prototype/">前端常见知识点整理 ---- 原型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 11:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-prototype/" title="前端常见知识点整理 ---- 原型">https://blog.lifesli.com/2020/01/02/FE-guide-prototype/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-dataType/" rel="prev" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/21-Day-Challenge-01/" rel="next" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B"><span class="nav-number">1.</span> <span class="nav-text">原型</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#prototype-%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.</span> <span class="nav-text">prototype 原型对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%EF%BC%9F"><span class="nav-number">2.1.</span> <span class="nav-text">什么是原型？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#prototype-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.2.</span> <span class="nav-text">prototype 如何产生的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%E9%93%BE%EF%BC%9F"><span class="nav-number">2.3.</span> <span class="nav-text">什么是原型链？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#constructor-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">2.4.</span> <span class="nav-text">constructor 构造函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="nav-number">2.4.1.</span> <span class="nav-text">什么是构造函数？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proto"><span class="nav-number">2.5.</span> <span class="nav-text">_proto_</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B%E5%AF%B9%E8%B1%A1%E7%9A%84-proto-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.5.1.</span> <span class="nav-text">实例对象的 _proto_ 如何产生的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#new-%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.5.2.</span> <span class="nav-text">new 的过程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Function-proto-Function-prototype"><span class="nav-number">2.6.</span> <span class="nav-text">Function.proto &#x3D;&#x3D;&#x3D; Function.prototype</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">2.7.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BD%92%E7%BA%B3"><span class="nav-number">2.8.</span> <span class="nav-text">归纳</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E8%81%94%E9%98%85%E8%AF%BB"><span class="nav-number">2.9.</span> <span class="nav-text">关联阅读</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%E9%98%85%E8%AF%BB"><span class="nav-number">2.10.</span> <span class="nav-text">扩展阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-prototype/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-prototype/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-prototype/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8cfc1da13e0560e545219b2dcc49a04c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/02/FE-guide-this/index.html b/en/2020/01/02/FE-guide-this/index.html
new file mode 100644
index 0000000000..d468925bed
--- /dev/null
+++ b/en/2020/01/02/FE-guide-this/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- this">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-this/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T12:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.410Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-this/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- this | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- this
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-this/">前端常见知识点整理 ---- this</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-this/" title="前端常见知识点整理 ---- this">https://blog.lifesli.com/2020/01/02/FE-guide-this/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-this/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-instanceof/" rel="prev" title="前端常见知识点整理 ---- instanceof">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- instanceof
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="next" title="前端常见知识点整理 ---- 执行上下文">
+      前端常见知识点整理 ---- 执行上下文 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#this"><span class="nav-number">1.</span> <span class="nav-text">this</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-this/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-this/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-this/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2e55eac4bcfffa0ddfbde4080160df5d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html" "b/en/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
new file mode 100644
index 0000000000..6b381c9e97
--- /dev/null
+++ "b/en/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 执行上下文">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-02T13:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.411Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 执行上下文 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 执行上下文
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">前端常见知识点整理 ---- 执行上下文</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" title="前端常见知识点整理 ---- 执行上下文">https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-this/" rel="prev" title="前端常见知识点整理 ---- this">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- this
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-Closure/" rel="next" title="前端常见知识点整理 ---- 闭包">
+      前端常见知识点整理 ---- 闭包 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-number">1.</span> <span class="nav-text">执行上下文</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8ba5e082ddfd43a58970f8c35e72eee4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-Generator/index.html b/en/2020/01/03/FE-guide-Generator/index.html
new file mode 100644
index 0000000000..68b124a8fe
--- /dev/null
+++ b/en/2020/01/03/FE-guide-Generator/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Generator 生成器">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-Generator/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.368Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-Generator/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Generator 生成器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Generator 生成器
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-Generator/">前端常见知识点整理 ---- Generator 生成器</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-Generator/" title="前端常见知识点整理 ---- Generator 生成器">https://blog.lifesli.com/2020/01/03/FE-guide-Generator/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Promise/" rel="prev" title="前端常见知识点整理 ---- Promise">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="next" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      前端常见知识点整理 ---- Map、FlatMap 和 Reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Generator-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Generator 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-Generator/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Generator/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Generator/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8dfe592bbd3a61470f0123c74730a3d0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html b/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
new file mode 100644
index 0000000000..482efea612
--- /dev/null
+++ b/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T03:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.369Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Map、FlatMap 和 Reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Generator/" rel="prev" title="前端常见知识点整理 ---- Generator 生成器">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Generator 生成器
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-async-await/" rel="next" title="前端常见知识点整理 ---- async 和 await">
+      前端常见知识点整理 ---- async 和 await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Map%E3%80%81FlatMap-%E5%92%8C-Reduce"><span class="nav-number">1.</span> <span class="nav-text">Map、FlatMap 和 Reduce</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Map"><span class="nav-number">1.1.</span> <span class="nav-text">Map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#FlatMap"><span class="nav-number">1.2.</span> <span class="nav-text">FlatMap</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Reduce-%E5%8D%87%E5%BA%8F%E6%89%A7%E8%A1%8C"><span class="nav-number">1.3.</span> <span class="nav-text">Reduce 升序执行</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd38c6e35703409bd3d1890a3cc5dcb9f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-Module/index.html b/en/2020/01/03/FE-guide-Module/index.html
new file mode 100644
index 0000000000..0a5e265c63
--- /dev/null
+++ b/en/2020/01/03/FE-guide-Module/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 模块化">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-Module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T00:41:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.372Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-Module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 模块化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 模块化
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-Module/">前端常见知识点整理 ---- 模块化</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:41</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-Module/" title="前端常见知识点整理 ---- 模块化">https://blog.lifesli.com/2020/01/03/FE-guide-Module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-copy/" rel="prev" title="前端常见知识点整理 ---- 深浅拷贝">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 深浅拷贝
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-debounce-throttle/" rel="next" title="前端常见知识点整理 ---- 函数防抖和节流">
+      前端常见知识点整理 ---- 函数防抖和节流 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">1.</span> <span class="nav-text">模块化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CommonJS"><span class="nav-number">1.1.</span> <span class="nav-text">CommonJS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AMD"><span class="nav-number">1.2.</span> <span class="nav-text">AMD</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-Module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f9dc33cf6c9f0ff5d24e5514ef9c350f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-Promise/index.html b/en/2020/01/03/FE-guide-Promise/index.html
new file mode 100644
index 0000000000..0d45b7c650
--- /dev/null
+++ b/en/2020/01/03/FE-guide-Promise/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Promise">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-Promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T02:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-Promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-Promise/">前端常见知识点整理 ---- Promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-Promise/" title="前端常见知识点整理 ---- Promise">https://blog.lifesli.com/2020/01/03/FE-guide-Promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-call-apply-bind/" rel="prev" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- call, apply, bind 区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Generator/" rel="next" title="前端常见知识点整理 ---- Generator 生成器">
+      前端常见知识点整理 ---- Generator 生成器 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Promise-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Promise 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-Promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '810a9b22138abeea3f439058f9116e28',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-async-Proxy/index.html b/en/2020/01/03/FE-guide-async-Proxy/index.html
new file mode 100644
index 0000000000..7f671db0a1
--- /dev/null
+++ b/en/2020/01/03/FE-guide-async-Proxy/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Proxy">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-async-Proxy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T04:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-async-Proxy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Proxy | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Proxy
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-async-Proxy/">前端常见知识点整理 ---- Proxy</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-async-Proxy/" title="前端常见知识点整理 ---- Proxy">https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-async-await/" rel="prev" title="前端常见知识点整理 ---- async 和 await">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- async 和 await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="next" title="为什么 0.1 + 0.2 != 0.3">
+      为什么 0.1 + 0.2 != 0.3 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-async-Proxy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-Proxy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-Proxy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9c4f28315a5718aca92f2c7eda3eb827',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-async-await/index.html b/en/2020/01/03/FE-guide-async-await/index.html
new file mode 100644
index 0000000000..94544f6aaa
--- /dev/null
+++ b/en/2020/01/03/FE-guide-async-await/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- async 和 await">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T03:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.378Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- async 和 await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- async 和 await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-async-await/">前端常见知识点整理 ---- async 和 await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-async-await/" title="前端常见知识点整理 ---- async 和 await">https://blog.lifesli.com/2020/01/03/FE-guide-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="prev" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-async-Proxy/" rel="next" title="前端常见知识点整理 ---- Proxy">
+      前端常见知识点整理 ---- Proxy <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#async-%E5%92%8C-await"><span class="nav-number">1.</span> <span class="nav-text">async 和 await</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e5a6aa289f2a1fc2a69f2359ad4374fd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-call-apply-bind/index.html b/en/2020/01/03/FE-guide-call-apply-bind/index.html
new file mode 100644
index 0000000000..c726fc92b6
--- /dev/null
+++ b/en/2020/01/03/FE-guide-call-apply-bind/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- call, apply, bind 区别">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-call-apply-bind/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T02:19:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.380Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-call-apply-bind/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- call, apply, bind 区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- call, apply, bind 区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-call-apply-bind/">前端常见知识点整理 ---- call, apply, bind 区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:19</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-call-apply-bind/" title="前端常见知识点整理 ---- call, apply, bind 区别">https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-inherit/" rel="prev" title="前端常见知识点整理 ---- 继承">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Promise/" rel="next" title="前端常见知识点整理 ---- Promise">
+      前端常见知识点整理 ---- Promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#call-apply-bind-%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">call, apply, bind 区别</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0-call-%E5%92%8C-apply"><span class="nav-number">1.1.</span> <span class="nav-text">模拟实现 call 和 apply</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3c0d6fdec03246eed2317403d3eb1d80',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-copy/index.html b/en/2020/01/03/FE-guide-copy/index.html
new file mode 100644
index 0000000000..137891bc4b
--- /dev/null
+++ b/en/2020/01/03/FE-guide-copy/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 深浅拷贝">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-copy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T00:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.382Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-copy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 深浅拷贝 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 深浅拷贝
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-copy/">前端常见知识点整理 ---- 深浅拷贝</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-copy/" title="前端常见知识点整理 ---- 深浅拷贝">https://blog.lifesli.com/2020/01/03/FE-guide-copy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-copy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/02/FE-guide-new/" rel="prev" title="前端常见知识点整理 ---- new">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Module/" rel="next" title="前端常见知识点整理 ---- 模块化">
+      前端常见知识点整理 ---- 模块化 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.</span> <span class="nav-text">深浅拷贝</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.1.</span> <span class="nav-text">浅拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.2.</span> <span class="nav-text">深拷贝</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-copy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-copy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-copy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b1f6699099575ed3cadc020cd0207c59',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-debounce-throttle/index.html b/en/2020/01/03/FE-guide-debounce-throttle/index.html
new file mode 100644
index 0000000000..15b9a0e3fe
--- /dev/null
+++ b/en/2020/01/03/FE-guide-debounce-throttle/index.html
@@ -0,0 +1,605 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 函数防抖和节流">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-debounce-throttle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T01:04:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.391Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-debounce-throttle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 函数防抖和节流 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 函数防抖和节流
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-debounce-throttle/">前端常见知识点整理 ---- 函数防抖和节流</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:04</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-debounce-throttle/" title="前端常见知识点整理 ---- 函数防抖和节流">https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-Module/" rel="prev" title="前端常见知识点整理 ---- 模块化">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 模块化
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-inherit/" rel="next" title="前端常见知识点整理 ---- 继承">
+      前端常见知识点整理 ---- 继承 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81"><span class="nav-number">1.</span> <span class="nav-text">函数防抖和节流</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%98%B2%E6%8A%96"><span class="nav-number">1.1.</span> <span class="nav-text">防抖</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%82%E6%B5%81"><span class="nav-number">1.2.</span> <span class="nav-text">节流</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b6a3aab522803e9ff91bfc8c82676a3b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-inherit/index.html b/en/2020/01/03/FE-guide-inherit/index.html
new file mode 100644
index 0000000000..6601791852
--- /dev/null
+++ b/en/2020/01/03/FE-guide-inherit/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-inherit/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T01:40:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.393Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-inherit/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-inherit/">前端常见知识点整理 ---- 继承</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-inherit/" title="前端常见知识点整理 ---- 继承">https://blog.lifesli.com/2020/01/03/FE-guide-inherit/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-debounce-throttle/" rel="prev" title="前端常见知识点整理 ---- 函数防抖和节流">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 函数防抖和节流
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-call-apply-bind/" rel="next" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      前端常见知识点整理 ---- call, apply, bind 区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%A7%E6%89%BF"><span class="nav-number">1.</span> <span class="nav-text">继承</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-inherit/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-inherit/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-inherit/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6fc71e1fe67e7894a1d4a7c8c75df319',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/FE-guide-store/index.html b/en/2020/01/03/FE-guide-store/index.html
new file mode 100644
index 0000000000..315ddbe2ad
--- /dev/null
+++ b/en/2020/01/03/FE-guide-store/index.html
@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 浏览器存储">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/FE-guide-store/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T04:37:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.407Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/FE-guide-store/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 浏览器存储 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 浏览器存储
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/FE-guide-store/">前端常见知识点整理 ---- 浏览器存储</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:37</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/FE-guide-store/" title="前端常见知识点整理 ---- 浏览器存储">https://blog.lifesli.com/2020/01/03/FE-guide-store/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-store/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="prev" title="为什么 0.1 + 0.2 != 0.3">
+      <i class="fa fa-chevron-left"></i> 为什么 0.1 + 0.2 != 0.3
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/04/Algorithm/" rel="next" title="JavaScript实现经典排序算法">
+      JavaScript实现经典排序算法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#cookie%EF%BC%8ClocalStorage%EF%BC%8CsessionStorage%EF%BC%8CindexDB"><span class="nav-number">1.</span> <span class="nav-text">cookie，localStorage，sessionStorage，indexDB</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Service-Worker"><span class="nav-number">2.</span> <span class="nav-text">Service Worker</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/FE-guide-store/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-store/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-store/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dc540250b45748eb20fe792497b8b206',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html b/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
new file mode 100644
index 0000000000..02f21489b7
--- /dev/null
+++ b/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:type" content="article">
+<meta property="og:title" content="为什么 0.1 + 0.2 !&#x3D; 0.3">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-03T04:10:00.000Z">
+<meta property="article:modified_time" content="2020-01-03T04:10:21.361Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>为什么 0.1 + 0.2 != 0.3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          为什么 0.1 + 0.2 != 0.3
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-03 04:10:00 / Modified: 04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">为什么 0.1 + 0.2 != 0.3</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:10</p>
+      <p><span>最后更新:</span>2020年01月03日 - 04:10</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" title="为什么 0.1 + 0.2 != 0.3">https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-async-Proxy/" rel="prev" title="前端常见知识点整理 ---- Proxy">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Proxy
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-store/" rel="next" title="前端常见知识点整理 ---- 浏览器存储">
+      前端常见知识点整理 ---- 浏览器存储 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd259a1cfddde9faaeab3ecb7afd63f44',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/04/Algorithm/index.html b/en/2020/01/04/Algorithm/index.html
new file mode 100644
index 0000000000..07a5fefc1d
--- /dev/null
+++ b/en/2020/01/04/Algorithm/index.html
@@ -0,0 +1,734 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript实现经典排序算法">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/04/Algorithm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldB5VS.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDWW9.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDfzR.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBK9QH.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBKq1g.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQkPf.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQTSS.png">
+<meta property="article:published_time" content="2020-01-04T07:18:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="排序算法">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/04/Algorithm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>JavaScript实现经典排序算法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript实现经典排序算法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/04/Algorithm/">JavaScript实现经典排序算法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月04日 - 07:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/04/Algorithm/" title="JavaScript实现经典排序算法">https://blog.lifesli.com/2020/01/04/Algorithm/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/04/Algorithm/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" rel="tag"># 排序算法</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/03/FE-guide-store/" rel="prev" title="前端常见知识点整理 ---- 浏览器存储">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 浏览器存储
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-ArrayOprs/" rel="next" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      数组常见操作 ---- 去重、扁平、取最大最小值 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">时间复杂度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A9%BA%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.2.</span> <span class="nav-text">空间复杂度</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%97%E6%B3%95%E6%B1%87%E6%80%BB"><span class="nav-number">2.</span> <span class="nav-text">算法汇总</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%EF%BC%9A"><span class="nav-number">2.1.</span> <span class="nav-text">关于时间复杂度：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%A8%B3%E5%AE%9A%E6%80%A7%EF%BC%9A"><span class="nav-number">2.2.</span> <span class="nav-text">关于稳定性：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="nav-number">2.3.</span> <span class="nav-text">名词解释：</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F%EF%BC%88Bubble-Sort%EF%BC%89-%E2%80%94-%E5%89%8D%E5%90%8E%E4%B8%A4%E4%B8%A4%E6%AF%94%E8%BE%83-%E2%80%94-%E6%B0%94%E6%B3%A1"><span class="nav-number">3.</span> <span class="nav-text">1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">3.1.</span> <span class="nav-text">1. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">3.2.</span> <span class="nav-text">1. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">3.3.</span> <span class="nav-text">1. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">3.4.</span> <span class="nav-text">1. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89-%E2%80%94-%E9%9D%A2%E8%AF%95%E6%8C%91%E7%AE%80%E5%8E%86%EF%BC%8C%E5%9C%A8%E5%89%A9%E4%B8%8B%E7%9A%84%E9%87%8C%E9%9D%A2%E6%8C%91%E6%9C%80%E5%A5%BD%E7%9A%84"><span class="nav-number">4.</span> <span class="nav-text">2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">4.1.</span> <span class="nav-text">2. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">4.2.</span> <span class="nav-text">2. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">4.3.</span> <span class="nav-text">2. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">4.4.</span> <span class="nav-text">2. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%EF%BC%88Insertion-Sort%EF%BC%89%E2%80%94%E2%80%93-%E9%BA%BB%E5%B0%86-%E6%89%91%E5%85%8B"><span class="nav-number">5.</span> <span class="nav-text">3. 插入排序（Insertion Sort）—– 麻将&#x2F;扑克</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">5.1.</span> <span class="nav-text">3. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">5.2.</span> <span class="nav-text">3. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">5.3.</span> <span class="nav-text">3. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">5.4.</span> <span class="nav-text">3. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89"><span class="nav-number">6.</span> <span class="nav-text">4. 快速排序（Selection Sort）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">6.1.</span> <span class="nav-text">4. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">6.2.</span> <span class="nav-text">4. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">6.3.</span> <span class="nav-text">4. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">6.4.</span> <span class="nav-text">4. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F"><span class="nav-number">7.</span> <span class="nav-text">5. 希尔排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">7.1.</span> <span class="nav-text">5. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">7.2.</span> <span class="nav-text">5. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">7.3.</span> <span class="nav-text">5.3 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">8.</span> <span class="nav-text">6. 归并排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">8.1.</span> <span class="nav-text">6. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">8.2.</span> <span class="nav-text">6. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">8.3.</span> <span class="nav-text">6. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">8.4.</span> <span class="nav-text">6. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E5%A0%86%E6%8E%92%E5%BA%8F"><span class="nav-number">9.</span> <span class="nav-text">7. 堆排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">9.1.</span> <span class="nav-text">7. 1 算法原理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">10.</span> <span class="nav-text">7. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">10.1.</span> <span class="nav-text">7. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">10.2.</span> <span class="nav-text">7. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">11.</span> <span class="nav-text">8. 计数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#8-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">11.1.</span> <span class="nav-text">8. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">11.2.</span> <span class="nav-text">8. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">11.3.</span> <span class="nav-text">8. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">11.4.</span> <span class="nav-text">8. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">12.</span> <span class="nav-text">9. 桶排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#9-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">12.1.</span> <span class="nav-text">9. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">12.2.</span> <span class="nav-text">9. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E5%BF%AB"><span class="nav-number">12.2.1.</span> <span class="nav-text">1. 什么时候最快</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E6%85%A2"><span class="nav-number">12.2.2.</span> <span class="nav-text">2. 什么时候最慢</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">12.3.</span> <span class="nav-text">9. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">12.4.</span> <span class="nav-text">9. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">13.</span> <span class="nav-text">10. 基数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#10-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">13.1.</span> <span class="nav-text">10. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">13.2.</span> <span class="nav-text">10. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">13.2.1.</span> <span class="nav-text">1. 基数排序 vs 计数排序 vs 桶排序</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">13.3.</span> <span class="nav-text">10. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">13.4.</span> <span class="nav-text">10. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">14.</span> <span class="nav-text">总结</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">14.1.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/04/Algorithm/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/04/Algorithm/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/04/Algorithm/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '42e750328f67f98fe750557ef92bad3a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/05/FE-guide-ArrayOprs/index.html b/en/2020/01/05/FE-guide-ArrayOprs/index.html
new file mode 100644
index 0000000000..4e82d03da2
--- /dev/null
+++ b/en/2020/01/05/FE-guide-ArrayOprs/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组常见操作 ---- 去重、扁平、取最大最小值">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/05/FE-guide-ArrayOprs/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-05T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T07:47:21.437Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/05/FE-guide-ArrayOprs/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>数组常见操作 ---- 去重、扁平、取最大最小值 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组常见操作 ---- 去重、扁平、取最大最小值
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-05 03:05:00 / Modified: 07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/05/FE-guide-ArrayOprs/">数组常见操作 ---- 去重、扁平、取最大最小值</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 03:05</p>
+      <p><span>最后更新:</span>2020年01月05日 - 07:47</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/05/FE-guide-ArrayOprs/" title="数组常见操作 ---- 去重、扁平、取最大最小值">https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/04/Algorithm/" rel="prev" title="JavaScript实现经典排序算法">
+      <i class="fa fa-chevron-left"></i> JavaScript实现经典排序算法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-about-reduce/" rel="next" title="reduce函数的妙用 ---- 实现map和filter">
+      reduce函数的妙用 ---- 实现map和filter <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%BB%E9%87%8D"><span class="nav-number">1.</span> <span class="nav-text">去重</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%88%A9%E7%94%A8-Object-%E7%9A%84-Key-%E5%94%AF%E4%B8%80%E7%89%B9%E6%80%A7"><span class="nav-number">1.1.</span> <span class="nav-text">1. 利用 Object 的 Key 唯一特性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%88%A9%E7%94%A8-indexOf-%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC%E6%95%B0%E5%80%BC%E8%BF%9B%E8%A1%8C%E5%8E%BB%E9%87%8D"><span class="nav-number">1.2.</span> <span class="nav-text">2. 利用 indexOf 的返回值数值进行去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%88%A9%E7%94%A8-Set-%E7%89%B9%E6%80%A7%E5%8E%BB%E9%87%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3. 利用 Set 特性去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E6%8E%92%E5%BA%8F%E5%90%8E%E5%88%A4%E6%96%AD%E5%89%8D%E5%90%8E%E4%B8%A4%E9%A1%B9%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89%E5%8E%BB%E9%87%8D"><span class="nav-number">1.4.</span> <span class="nav-text">4. 排序后判断前后两项是否相等去重</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%81%E5%B9%B3"><span class="nav-number">2.</span> <span class="nav-text">扁平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%99%AE%E9%80%9A%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">1. 普通方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8reduce%E7%AE%80%E5%8C%96%E4%B8%8A%E8%BF%B0%E6%96%B9%E6%B3%95"><span class="nav-number">2.2.</span> <span class="nav-text">2. 使用reduce简化上述方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%80%BC"><span class="nav-number">3.</span> <span class="nav-text">最值</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-reduce"><span class="nav-number">3.1.</span> <span class="nav-text">利用 reduce</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Math-max"><span class="nav-number">3.2.</span> <span class="nav-text">Math.max</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cfc1a40058fd7a8c8e5705602a46e945',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/05/FE-guide-about-reduce/index.html b/en/2020/01/05/FE-guide-about-reduce/index.html
new file mode 100644
index 0000000000..73166889a1
--- /dev/null
+++ b/en/2020/01/05/FE-guide-about-reduce/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:type" content="article">
+<meta property="og:title" content="reduce函数的妙用 ---- 实现map和filter">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/05/FE-guide-about-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-05T08:55:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T08:53:53.962Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/05/FE-guide-about-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>reduce函数的妙用 ---- 实现map和filter | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          reduce函数的妙用 ---- 实现map和filter
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-05 08:55:00 / Modified: 08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/05/FE-guide-about-reduce/">reduce函数的妙用 ---- 实现map和filter</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 08:55</p>
+      <p><span>最后更新:</span>2020年01月05日 - 08:53</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/05/FE-guide-about-reduce/" title="reduce函数的妙用 ---- 实现map和filter">https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-ArrayOprs/" rel="prev" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      <i class="fa fa-chevron-left"></i> 数组常见操作 ---- 去重、扁平、取最大最小值
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-currying/" rel="next" title="前端常见知识点整理 ---- 柯里化 currying">
+      前端常见知识点整理 ---- 柯里化 currying <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-map"><span class="nav-number">1.1.</span> <span class="nav-text">1. 使用 reduce 实现 map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-filter"><span class="nav-number">1.2.</span> <span class="nav-text">2. 使用 reduce 实现 filter</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/05/FE-guide-about-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-about-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-about-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '766a61baa2a2f4f8163fbf7a247d552e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/05/FE-guide-currying/index.html b/en/2020/01/05/FE-guide-currying/index.html
new file mode 100644
index 0000000000..a3cc3f203a
--- /dev/null
+++ b/en/2020/01/05/FE-guide-currying/index.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 柯里化 currying">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/05/FE-guide-currying/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-05T09:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.384Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/05/FE-guide-currying/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 柯里化 currying | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 柯里化 currying
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/05/FE-guide-currying/">前端常见知识点整理 ---- 柯里化 currying</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 09:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/05/FE-guide-currying/" title="前端常见知识点整理 ---- 柯里化 currying">https://blog.lifesli.com/2020/01/05/FE-guide-currying/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-currying/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-about-reduce/" rel="prev" title="reduce函数的妙用 ---- 实现map和filter">
+      <i class="fa fa-chevron-left"></i> reduce函数的妙用 ---- 实现map和filter
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-vuepress/" rel="next" title="介绍一个好用的doc展示库 ---- vuepress">
+      介绍一个好用的doc展示库 ---- vuepress <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89"><span class="nav-number">1.</span> <span class="nav-text">定义</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">2.</span> <span class="nav-text">应用场景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E5%A4%8D%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">参数复用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/05/FE-guide-currying/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-currying/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-currying/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '455ff584f3a780961feedccd2d392179',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/05/FE-guide-vuepress/index.html b/en/2020/01/05/FE-guide-vuepress/index.html
new file mode 100644
index 0000000000..cae83b8772
--- /dev/null
+++ b/en/2020/01/05/FE-guide-vuepress/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:type" content="article">
+<meta property="og:title" content="介绍一个好用的doc展示库 ---- vuepress">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/05/FE-guide-vuepress/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-05T17:59:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="vuepress">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/05/FE-guide-vuepress/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>介绍一个好用的doc展示库 ---- vuepress | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          介绍一个好用的doc展示库 ---- vuepress
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+<span id="more"></span>
+
+<h1 id="vuepress-何许"><a href="#vuepress-何许" class="headerlink" title="vuepress 何许"></a><code>vuepress</code> 何许</h1>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/05/FE-guide-vuepress/">介绍一个好用的doc展示库 ---- vuepress</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 17:59</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/05/FE-guide-vuepress/" title="介绍一个好用的doc展示库 ---- vuepress">https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/vuepress/" rel="tag"># vuepress</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-currying/" rel="prev" title="前端常见知识点整理 ---- 柯里化 currying">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 柯里化 currying
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/FE-guide-Net/" rel="next" title="前端常见知识点整理 ---- 网络">
+      前端常见知识点整理 ---- 网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vuepress-%E4%BD%95%E8%AE%B8"><span class="nav-number">2.</span> <span class="nav-text">vuepress 何许</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/05/FE-guide-vuepress/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-vuepress/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-vuepress/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9c8db79116e42b9aaabd959ec29c39b4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/09/FE-guide-Net/index.html b/en/2020/01/09/FE-guide-Net/index.html
new file mode 100644
index 0000000000..d9a79f4969
--- /dev/null
+++ b/en/2020/01/09/FE-guide-Net/index.html
@@ -0,0 +1,970 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/09/FE-guide-Net/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJa6g.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.376Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/09/FE-guide-Net/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/09/FE-guide-Net/">前端常见知识点整理 ---- 网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/09/FE-guide-Net/" title="前端常见知识点整理 ---- 网络">https://blog.lifesli.com/2020/01/09/FE-guide-Net/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-Net/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/05/FE-guide-vuepress/" rel="prev" title="介绍一个好用的doc展示库 ---- vuepress">
+      <i class="fa fa-chevron-left"></i> 介绍一个好用的doc展示库 ---- vuepress
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/FE-guide-data-structure/" rel="next" title="计算机通识 ---- 数据结构">
+      计算机通识 ---- 数据结构 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#UDP-User-Datagram-Protocol-%E7%94%A8%E6%88%B7%E6%95%B0%E6%8D%AE%E6%8A%A5%E5%8D%8F%E8%AE%AE"><span class="nav-number">2.</span> <span class="nav-text">UDP - User Datagram Protocol - 用户数据报协议</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%A2%E5%90%91%E6%8A%A5%E6%96%87"><span class="nav-number">2.1.</span> <span class="nav-text">面向报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8D%E5%8F%AF%E9%9D%A0%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">不可靠性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%AB%98%E6%95%88"><span class="nav-number">2.3.</span> <span class="nav-text">高效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E8%BE%93%E6%96%B9%E5%BC%8F"><span class="nav-number">2.4.</span> <span class="nav-text">传输方式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#TCP"><span class="nav-number">3.</span> <span class="nav-text">TCP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%B4%E9%83%A8"><span class="nav-number">3.1.</span> <span class="nav-text">头部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%9C%BA"><span class="nav-number">3.2.</span> <span class="nav-text">状态机</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E7%AB%8B%E8%BF%9E%E6%8E%A5%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.</span> <span class="nav-text">建立连接三次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.3.</span> <span class="nav-text">第三次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%AD%E5%BC%80%E9%93%BE%E6%8E%A5%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.</span> <span class="nav-text">断开链接四次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.3.</span> <span class="nav-text">第三次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.4.</span> <span class="nav-text">第四次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARQ-%E5%8D%8F%E8%AE%AE"><span class="nav-number">3.2.3.</span> <span class="nav-text">ARQ 协议</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%81%9C%E6%AD%A2%E7%AD%89%E5%BE%85-ARQ"><span class="nav-number">3.2.3.1.</span> <span class="nav-text">停止等待 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%B8%B8%E4%BC%A0%E8%BE%93%E8%BF%87%E7%A8%8B"><span class="nav-number">3.2.3.2.</span> <span class="nav-text">正常传输过程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%A5%E6%96%87%E4%B8%A2%E5%A4%B1%E6%88%96%E5%87%BA%E9%94%99"><span class="nav-number">3.2.3.3.</span> <span class="nav-text">报文丢失或出错</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-%E8%B6%85%E6%97%B6%E6%88%96%E4%B8%A2%E5%A4%B1"><span class="nav-number">3.2.3.4.</span> <span class="nav-text">ACK 超时或丢失</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%9E%E7%BB%AD-ARQ"><span class="nav-number">3.2.3.5.</span> <span class="nav-text">连续 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B4%AF%E8%AE%A1%E7%A1%AE%E8%AE%A4"><span class="nav-number">3.2.3.6.</span> <span class="nav-text">累计确认</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.</span> <span class="nav-text">滑动窗口</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Zero-%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.1.</span> <span class="nav-text">Zero 窗口</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E5%A4%84%E7%90%86"><span class="nav-number">3.2.5.</span> <span class="nav-text">拥塞处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%85%A2%E5%BC%80%E5%A7%8B%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.1.</span> <span class="nav-text">慢开始算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E9%81%BF%E5%85%8D%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.2.</span> <span class="nav-text">拥塞避免算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E9%87%8D%E4%BC%A0"><span class="nav-number">3.2.5.3.</span> <span class="nav-text">快速重传</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Taho-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.4.</span> <span class="nav-text">TCP Taho 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Reno-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.5.</span> <span class="nav-text">TCP Reno 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-New-Ren-%E6%94%B9%E8%BF%9B%E5%90%8E%E7%9A%84%E5%BF%AB%E6%81%A2%E5%A4%8D"><span class="nav-number">3.2.5.6.</span> <span class="nav-text">TCP New Ren 改进后的快恢复</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP"><span class="nav-number">4.</span> <span class="nav-text">HTTP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Post-%E5%92%8C-Get-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">4.1.</span> <span class="nav-text">Post 和 Get 的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-number">4.2.</span> <span class="nav-text">常见状态码</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2XX-%E6%88%90%E5%8A%9F"><span class="nav-number">4.2.1.</span> <span class="nav-text">2XX 成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3XX-%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">4.2.2.</span> <span class="nav-text">3XX 重定向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4XX-%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.3.</span> <span class="nav-text">4XX 客户端错误</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5XX-%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.4.</span> <span class="nav-text">5XX 服务器错误</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP-%E9%A6%96%E9%83%A8"><span class="nav-number">4.3.</span> <span class="nav-text">HTTP 首部</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTPS"><span class="nav-number">5.</span> <span class="nav-text">HTTPS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#TLS"><span class="nav-number">5.1.</span> <span class="nav-text">TLS</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-2-0"><span class="nav-number">6.</span> <span class="nav-text">HTTP 2.0</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%BC%A0%E8%BE%93"><span class="nav-number">6.1.</span> <span class="nav-text">二进制传输</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%9A%E8%B7%AF%E5%A4%8D%E7%94%A8"><span class="nav-number">6.2.</span> <span class="nav-text">多路复用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Header-%E5%8E%8B%E7%BC%A9"><span class="nav-number">6.3.</span> <span class="nav-text">Header 压缩</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF-Push"><span class="nav-number">6.4.</span> <span class="nav-text">服务端 Push</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#QUIC"><span class="nav-number">6.5.</span> <span class="nav-text">QUIC</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#DNS"><span class="nav-number">7.</span> <span class="nav-text">DNS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E8%BE%93%E5%85%A5-URL-%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">7.1.</span> <span class="nav-text">从输入 URL 到页面加载完成的过程</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/09/FE-guide-Net/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-Net/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-Net/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3e0f2b92df3de007f8d3be910372dcc9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/09/FE-guide-data-structure/index.html b/en/2020/01/09/FE-guide-data-structure/index.html
new file mode 100644
index 0000000000..bf347b2cb3
--- /dev/null
+++ b/en/2020/01/09/FE-guide-data-structure/index.html
@@ -0,0 +1,706 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:type" content="article">
+<meta property="og:title" content="计算机通识 ---- 数据结构">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/09/FE-guide-data-structure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.385Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/09/FE-guide-data-structure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>计算机通识 ---- 数据结构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          计算机通识 ---- 数据结构
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/09/FE-guide-data-structure/">计算机通识 ---- 数据结构</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/09/FE-guide-data-structure/" title="计算机通识 ---- 数据结构">https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/FE-guide-Net/" rel="prev" title="前端常见知识点整理 ---- 网络">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/do-it-yourselfery-jsonp/" rel="next" title="自己动手实现系列 ---- jsonp">
+      自己动手实现系列 ---- jsonp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%88-Heap"><span class="nav-number">2.</span> <span class="nav-text">栈 Heap</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.1.</span> <span class="nav-text">实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BA%94%E7%94%A8"><span class="nav-number">2.2.</span> <span class="nav-text">应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%98%9F%E5%88%97"><span class="nav-number">3.</span> <span class="nav-text">队列</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-1"><span class="nav-number">3.1.</span> <span class="nav-text">实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E9%93%BE%E9%98%9F%E5%88%97"><span class="nav-number">3.1.1.</span> <span class="nav-text">单链队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BE%AA%E7%8E%AF%E9%98%9F%E5%88%97"><span class="nav-number">3.1.2.</span> <span class="nav-text">循环队列</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%93%BE%E8%A1%A8"><span class="nav-number">4.</span> <span class="nav-text">链表</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-2"><span class="nav-number">4.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%91"><span class="nav-number">5.</span> <span class="nav-text">树</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%8F%89%E6%A0%91"><span class="nav-number">5.1.</span> <span class="nav-text">二叉树</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%88%86%E6%90%9C%E7%B4%A2%E6%A0%91"><span class="nav-number">5.2.</span> <span class="nav-text">二分搜索树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-3"><span class="nav-number">5.2.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AVL-%E6%A0%91"><span class="nav-number">5.3.</span> <span class="nav-text">AVL 树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-4"><span class="nav-number">5.3.1.</span> <span class="nav-text">实现</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Trie"><span class="nav-number">6.</span> <span class="nav-text">Trie</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-5"><span class="nav-number">6.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B9%B6%E6%9F%A5%E9%9B%86"><span class="nav-number">7.</span> <span class="nav-text">并查集</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-6"><span class="nav-number">7.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A0%86"><span class="nav-number">8.</span> <span class="nav-text">堆</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E5%A4%A7%E6%A0%B9%E5%A0%86"><span class="nav-number">8.1.</span> <span class="nav-text">实现大根堆</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/09/FE-guide-data-structure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-data-structure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-data-structure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ec4f3282f041b9d467f9a2fe8bcf136a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/09/career/index.html b/en/2020/01/09/career/index.html
new file mode 100644
index 0000000000..e7895180d3
--- /dev/null
+++ b/en/2020/01/09/career/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何正确使用时间[转载]">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/09/career/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-09T16:33:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/09/career/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>如何正确使用时间[转载] | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何正确使用时间[转载]
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/09/career/">如何正确使用时间[转载]</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 16:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/09/career/" title="如何正确使用时间[转载]">https://blog.lifesli.com/2020/01/09/career/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/career/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/solve-get-params-so-long-problem/" rel="prev" title="解决get请求过长的问题小记">
+      <i class="fa fa-chevron-left"></i> 解决get请求过长的问题小记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/do-it-yourselfery-promise/" rel="next" title="自己动手实现系列 ---- promise">
+      自己动手实现系列 ---- promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/09/career/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/career/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/career/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '31d2c2772f8dc88ec4bd178b7c91cf51',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/09/do-it-yourselfery-jsonp/index.html b/en/2020/01/09/do-it-yourselfery-jsonp/index.html
new file mode 100644
index 0000000000..1888f99817
--- /dev/null
+++ b/en/2020/01/09/do-it-yourselfery-jsonp/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- jsonp">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/09/do-it-yourselfery-jsonp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-09T08:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.464Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="jsonp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/09/do-it-yourselfery-jsonp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- jsonp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- jsonp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/09/do-it-yourselfery-jsonp/">自己动手实现系列 ---- jsonp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 08:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/09/do-it-yourselfery-jsonp/" title="自己动手实现系列 ---- jsonp">https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/jsonp/" rel="tag"># jsonp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/FE-guide-data-structure/" rel="prev" title="计算机通识 ---- 数据结构">
+      <i class="fa fa-chevron-left"></i> 计算机通识 ---- 数据结构
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/solve-get-params-so-long-problem/" rel="next" title="解决get请求过长的问题小记">
+      解决get请求过长的问题小记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-jsonp-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 jsonp 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e76b0b395525a2e1d71c47e24bdb249c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/09/solve-get-params-so-long-problem/index.html b/en/2020/01/09/solve-get-params-so-long-problem/index.html
new file mode 100644
index 0000000000..d6e0972908
--- /dev/null
+++ b/en/2020/01/09/solve-get-params-so-long-problem/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:type" content="article">
+<meta property="og:title" content="解决get请求过长的问题小记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/09/solve-get-params-so-long-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+<meta property="article:published_time" content="2020-01-09T11:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="ajax">
+<meta property="article:tag" content="get">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/09/solve-get-params-so-long-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>解决get请求过长的问题小记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          解决get请求过长的问题小记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+<span id="more"></span>
+
+<h2 id="URL-限制"><a href="#URL-限制" class="headerlink" title="URL 限制"></a>URL 限制</h2><p>首先我在网上找到了一份资料介绍了URL长度的相关资料，从下面可以看出，从HTTP协议层面以及Get请求层面都没有什么限制，这个限制来自于<em><strong>浏览器或者服务器的限制</strong></em>。</p>
+<blockquote>
+<p>Microsoft Internet Explorer (Browser)<br>IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。<br>Firefox (Browser)<br>对于Firefox浏览器URL的长度限制为65,536个字符。<br>Safari (Browser)<br>URL最大长度限制为 80,000个字符。<br>Opera (Browser)<br>URL最大长度限制为190,000个字符。<br>Google (Browser)<br>URL最大长度限制为8182个字符。<br>Apache (Server)<br>能接受最大url长度为8,192个字符。<br>Microsoft Internet Information Server(IIS)<br>能接受最大url的长度为16,384个字符。</p>
+</blockquote>
+<p>而且，中文会进行编码，一个汉字编码后会生成9个字符，这样算来，IE下最多也就能输入231个中文，再多就完蛋了，那么通过get请求传递参数就会显得很麻烦。</p>
+<p>通常情况下，这种超长参数的请求我们都会用post，有些地方也会说post请求没有长度限制，但是前面说了，实际上HTTP协议层面并没有任何的限制，限制只出现在浏览器或者服务器限制，get和post请求在底层上其实是一样的。</p>
+<p>最后项目修改了请求类型，把 <code>get</code> 请求改成了 <code>post</code> 请求，在网上实际还找到了另外两个方案，如果对同一组参数频繁访问的化，也可以用 <code>post+get</code> 请求的方式去处理，或者用 <code>sessionStorage</code> 下面简单介绍一下。</p>
+<ol>
+<li>将预览内容 <code>post</code> 到服务端，根据一个唯一标识生成缓存(有效时间5分钟)，将唯一标识返回到前端，前端通过get方式传递唯一标识请求预览逻辑，拿到缓存的内容后渲染到页面。需要说明的是这里的缓存必须是分布式的。</li>
+<li>通过H5的会话缓存 <code>sessionStorage</code> 将预览内容存储在浏览器，打开预览页后从 <code>sessionStorage</code> 中拿到内容就可以渲染出页面了。</li>
+</ol>
+<p>上述两种方案都不太符合我们的项目所以最终还是选择了最简单的方式</p>
+<h2 id="GET-VS-POST"><a href="#GET-VS-POST" class="headerlink" title="GET VS POST"></a>GET VS POST</h2><ol>
+<li><p>多数浏览器对于POST采用两阶段发送数据的，先发送请求头，再发送请求体，即使参数再少再短，也会被分成两个步骤来发送（相对于GET），也就是第一步发送header数据，第二步再发送body部分。HTTP是应用层的协议，而在传输层有些情况TCP会出现两次连结的过程，HTTP协议本身不保存状态信息，一次请求一次响应。对于TCP而言，通信次数越多反而靠性越低，能在一次连结中传输完需要的消息是最可靠的，尽量使用GET请求来减少网络耗时。如果通信时间增加，这段时间客户端与服务器端一直保持连接状态，在服务器侧负载可能会增加，可靠性会下降。</p>
+</li>
+<li><p>GET请求能够被cache，GET请求能够被保存在浏览器的浏览历史里面（密码等重要数据GET提交，别人查看历史记录，就可以直接看到这些私密数据）POST不进行缓存。</p>
+</li>
+<li><p>GET参数是带在URL后面，传统IE中URL的最大可用长度为2048字符，其他浏览器对URL长度限制实现上有所不同。POST请求无长度限制（目前理论上是这样的）。</p>
+</li>
+<li><p>GET提交的数据大小，不同浏览器的限制不同，一般在2k-8K之间，POST提交数据比较大，大小靠服务器的设定值限制，而且某些数据只能用 POST 方法「携带」，比如 file。</p>
+</li>
+<li><p>全部用POST不是十分合理，最好先把请求按功能和场景分下类，对数据请求频繁，数据不敏感且数据量在普通浏览器最小限定的2k范围内，这样的情况使用GET。其他地方使用POST。</p>
+</li>
+<li><p>GET 的本质是「得」，而 POST 的本质是「给」。而且，GET 是「幂等」的，在这一点上，GET 被认为是「安全的」。但实际上 server 端也可以用作资源更新，但是这种用法违反了约定，容易造成 CSRF（跨站请求伪造）。</p>
+</li>
+</ol>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>以上是这次遇到问题后学到的一点知识，可能并不全面，后续如果遇到了类似的问题会继续丰富这篇文章。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/09/solve-get-params-so-long-problem/">解决get请求过长的问题小记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/09/solve-get-params-so-long-problem/" title="解决get请求过长的问题小记">https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/ajax/" rel="tag"># ajax</a>
+              <a href="/en/tags/get/" rel="tag"># get</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/do-it-yourselfery-jsonp/" rel="prev" title="自己动手实现系列 ---- jsonp">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- jsonp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/career/" rel="next" title="如何正确使用时间[转载]">
+      如何正确使用时间[转载] <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URL-%E9%99%90%E5%88%B6"><span class="nav-number">1.1.</span> <span class="nav-text">URL 限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GET-VS-POST"><span class="nav-number">1.2.</span> <span class="nav-text">GET VS POST</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8a63323c1386a86ec9bbb5224031a64d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/13/FE-guide-inherit2/index.html b/en/2020/01/13/FE-guide-inherit2/index.html
new file mode 100644
index 0000000000..9e65a90dd9
--- /dev/null
+++ b/en/2020/01/13/FE-guide-inherit2/index.html
@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承类型">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/13/FE-guide-inherit2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-13T03:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.395Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/13/FE-guide-inherit2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承类型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承类型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/13/FE-guide-inherit2/">前端常见知识点整理 ---- 继承类型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 03:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/13/FE-guide-inherit2/" title="前端常见知识点整理 ---- 继承类型">https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/do-it-yourselfery-promise/" rel="prev" title="自己动手实现系列 ---- promise">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/Javascript-Design-Pattern/" rel="next" title="JavaScript 设计模式 Design Pattern">
+      JavaScript 设计模式 Design Pattern <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF%EF%BC%88%E8%AE%A4%E8%B4%BC%E4%BD%9C%E7%88%B6%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">原型继承（认贼作父）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%88%E5%80%9F%E8%85%B9%E7%94%9F%E5%AD%90%EF%BC%89"><span class="nav-number">2.</span> <span class="nav-text">构造继承（借腹生子）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF%EF%BC%88%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF-%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">组合继承（原型继承+构造继承）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF-%E5%A4%8D%E5%88%B6%E9%99%8D%E7%BA%A7"><span class="nav-number">4.</span> <span class="nav-text">原型式继承(复制降级)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%84%E7%94%9F%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF"><span class="nav-number">5.</span> <span class="nav-text">寄生组合继承</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#inherits-%E5%87%BD%E6%95%B0-%E2%80%94-Nodejs-util-inherits-%E5%87%BD%E6%95%B0"><span class="nav-number">5.1.</span> <span class="nav-text">inherits 函数 — Nodejs util.inherits 函数</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/13/FE-guide-inherit2/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/FE-guide-inherit2/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/FE-guide-inherit2/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8a5174697ee60a340f237e79d28ddb31',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/13/Javascript-Design-Pattern/index.html b/en/2020/01/13/Javascript-Design-Pattern/index.html
new file mode 100644
index 0000000000..d5416c3ad2
--- /dev/null
+++ b/en/2020/01/13/Javascript-Design-Pattern/index.html
@@ -0,0 +1,665 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript 设计模式 Design Pattern">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/13/Javascript-Design-Pattern/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+<meta property="article:published_time" content="2020-01-13T12:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.414Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="设计模式">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/13/Javascript-Design-Pattern/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>JavaScript 设计模式 Design Pattern | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript 设计模式 Design Pattern
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+<a id="more"></a>
+
+<h1 id="什么是设计模式"><a href="#什么是设计模式" class="headerlink" title="什么是设计模式"></a>什么是设计模式</h1><blockquote>
+<p>设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案<br>设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。</p>
+</blockquote>
+<blockquote>
+<p>　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。   —- 百度百科</p>
+</blockquote>
+<p>不知道大家看了上面的定义以后是什么感受，说实话我第一次看到这句话并没有什么深刻的认识，什么面向对象的软件设计，什么针对特定问题，什么优雅的解决方案，这都说的是什么，后来我看了几遍之后，上面这句话用我的理解翻译如下：</p>
+<blockquote>
+<p>软件开发过程中，解决某一类问题用到的一系列套路</p>
+</blockquote>
+<p>这就是我对设计模式的认识。当然这也不仅仅是我自己的认识，在跟其他的一些开发人员交流时，很多人都是这么认为的。</p>
+<p>这些解决问题的方案实在是太好用了，所以大神就把它们抽象出来，然后起了个名字-就叫做设计模式了。</p>
+<p>这么说大家可能还是不太明白，举个开发过程中可能遇到的实际例子吧。</p>
+<blockquote>
+<p>当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件。那么这种场景下我们该如何解决这个问题呢？通常我们需要新增一个接口，兼容原来的接口和新的业务需求参数。<br>因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题。</p>
+</blockquote>
+<p>这就是设计模式的应用，实际上也许你还不知道设计模式这个词，但是你已经在工作中频繁的用到了设计模式，下面我们就来看看到底有哪些设计模式。</p>
+<p>哦，对了，设计模式并不依赖于语言，它本身更像是一种软件的设计思想，因为我是一个前端，所以接下来具体实现的时候我会使用js来实现设计模式的用法。</p>
+<h1 id="学习设计模式"><a href="#学习设计模式" class="headerlink" title="学习设计模式"></a>学习设计模式</h1><p>目前被普遍接受的经典的设计模式共有 <strong>23</strong> 种，而这23种设计模式又分为了 <strong>3大类</strong> ，看过一张图这里拿过来镇贴。<br><img src="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg" alt="lHgD4H.jpg"><br>他们分别是</p>
+<ul>
+<li>创建型模式</li>
+<li>结构型模式</li>
+<li>行为型模式</li>
+</ul>
+<p>接下来，我将会将这23种，3大类设计模式一个个的拆解开来，跟大家一起学习一下，设计模式有哪些内容。</p>
+<h2 id="创建型模式-6个"><a href="#创建型模式-6个" class="headerlink" title="创建型模式 6个"></a>创建型模式 6个</h2><p>这类模式用于<strong>对象的生成</strong>和<strong>生命周期的管理</strong>。<br>创建型模式可以决定生成哪些对象，提高了程序的灵活性。具体属于此类的模式清单如下，共有 <strong>5</strong> 个：</p>
+<ul>
+<li>单例模式（Singleton）</li>
+<li>工厂方法模式（Factory Method）</li>
+<li>抽象工厂模式（Abstract Factory）</li>
+<li>建造者模式（Builder）</li>
+<li>原型模式（Prototype）</li>
+<li>迭代器模式（Iterator）</li>
+</ul>
+<h3 id="单例模式（Singleton）"><a href="#单例模式（Singleton）" class="headerlink" title="单例模式（Singleton）"></a>单例模式（Singleton）</h3><p><strong><em>描述：</em></strong>确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。</p>
+<h3 id="工厂方法模式（Factory-Method）"><a href="#工厂方法模式（Factory-Method）" class="headerlink" title="工厂方法模式（Factory Method）"></a>工厂方法模式（Factory Method）</h3><p><strong><em>描述：</em></strong>定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。</p>
+<h3 id="抽象工厂模式（Abstract-Factory）"><a href="#抽象工厂模式（Abstract-Factory）" class="headerlink" title="抽象工厂模式（Abstract Factory）"></a>抽象工厂模式（Abstract Factory）</h3><p><strong><em>描述：</em></strong>为创建一组相关或相互依赖的对象提供一个接口，而且无需指定它们的具体类</p>
+<h3 id="建造者模式（Builder）"><a href="#建造者模式（Builder）" class="headerlink" title="建造者模式（Builder）"></a>建造者模式（Builder）</h3><p><strong><em>描述：</em></strong>将一个复杂对象的构建与他的表示分离，使得同样的构建过程可以创建不同的表示。</p>
+<h3 id="原型模式（Prototype）"><a href="#原型模式（Prototype）" class="headerlink" title="原型模式（Prototype）"></a>原型模式（Prototype）</h3><p><strong><em>描述：</em></strong>用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。</p>
+<h3 id="迭代器模式（Iterator）"><a href="#迭代器模式（Iterator）" class="headerlink" title="迭代器模式（Iterator）"></a>迭代器模式（Iterator）</h3><p><strong><em>描述：</em></strong>提供一种方法访问一个容器对象中的各个元素，而又不需暴露该对象的内部细节。</p>
+<h2 id="结构型模式-7个"><a href="#结构型模式-7个" class="headerlink" title="结构型模式 7个"></a>结构型模式 7个</h2><ul>
+<li>适配器模式（Adapter）</li>
+<li>组合模式（Compositor）</li>
+<li>代理模式（Proxy）</li>
+<li>桥梁模式（Bridge）</li>
+<li>装饰模式（Decorator）</li>
+<li>门面模式（Facade）</li>
+<li>享元模式（Flyweight）</li>
+</ul>
+<h3 id="适配器模式（Adapter）"><a href="#适配器模式（Adapter）" class="headerlink" title="适配器模式（Adapter）"></a>适配器模式（Adapter）</h3><p><strong><em>描述：</em></strong>将一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。</p>
+<h3 id="组合模式（Compositor）"><a href="#组合模式（Compositor）" class="headerlink" title="组合模式（Compositor）"></a>组合模式（Compositor）</h3><p><strong><em>描述：</em></strong>将对象组合成树形结构</p>
+<h3 id="代理模式（Proxy）"><a href="#代理模式（Proxy）" class="headerlink" title="代理模式（Proxy）"></a>代理模式（Proxy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="桥梁模式（Bridge）"><a href="#桥梁模式（Bridge）" class="headerlink" title="桥梁模式（Bridge）"></a>桥梁模式（Bridge）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="装饰模式（Decorator）"><a href="#装饰模式（Decorator）" class="headerlink" title="装饰模式（Decorator）"></a>装饰模式（Decorator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="门面模式（Facade）"><a href="#门面模式（Facade）" class="headerlink" title="门面模式（Facade）"></a>门面模式（Facade）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="享元模式（Flyweight）"><a href="#享元模式（Flyweight）" class="headerlink" title="享元模式（Flyweight）"></a>享元模式（Flyweight）</h3><p><strong><em>描述：</em></strong></p>
+<h2 id="行为型模式-10个"><a href="#行为型模式-10个" class="headerlink" title="行为型模式 10个"></a>行为型模式 10个</h2><ul>
+<li>命名模式（Command）</li>
+<li>解释器模式（Interpreter）</li>
+<li>责任链模式（Chian of Responsibility）</li>
+<li>观察者模式（Observer）</li>
+<li>中介者模式（Mediator）</li>
+<li>备忘录模式（Memento）</li>
+<li>状态模式（State）</li>
+<li>策略模式（Strategy）</li>
+<li>模板方法模式（Template Method）</li>
+<li>访问者模式（Visitor）</li>
+</ul>
+<h3 id="命名模式（Command）"><a href="#命名模式（Command）" class="headerlink" title="命名模式（Command）"></a>命名模式（Command）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="解释器模式（Interpreter）"><a href="#解释器模式（Interpreter）" class="headerlink" title="解释器模式（Interpreter）"></a>解释器模式（Interpreter）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="责任链模式（Chian-of-Responsibility）"><a href="#责任链模式（Chian-of-Responsibility）" class="headerlink" title="责任链模式（Chian of Responsibility）"></a>责任链模式（Chian of Responsibility）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="观察者模式（Observer）"><a href="#观察者模式（Observer）" class="headerlink" title="观察者模式（Observer）"></a>观察者模式（Observer）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="中介者模式（Mediator）"><a href="#中介者模式（Mediator）" class="headerlink" title="中介者模式（Mediator）"></a>中介者模式（Mediator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="备忘录模式（Memento）"><a href="#备忘录模式（Memento）" class="headerlink" title="备忘录模式（Memento）"></a>备忘录模式（Memento）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="状态模式（State）"><a href="#状态模式（State）" class="headerlink" title="状态模式（State）"></a>状态模式（State）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="策略模式（Strategy）"><a href="#策略模式（Strategy）" class="headerlink" title="策略模式（Strategy）"></a>策略模式（Strategy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="模板方法模式（Template-Method）"><a href="#模板方法模式（Template-Method）" class="headerlink" title="模板方法模式（Template Method）"></a>模板方法模式（Template Method）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="访问者模式（Visitor）"><a href="#访问者模式（Visitor）" class="headerlink" title="访问者模式（Visitor）"></a>访问者模式（Visitor）</h3><p><strong><em>描述：</em></strong></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/13/Javascript-Design-Pattern/">JavaScript 设计模式 Design Pattern</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 12:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/13/Javascript-Design-Pattern/" title="JavaScript 设计模式 Design Pattern">https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag"># 设计模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/FE-guide-inherit2/" rel="prev" title="前端常见知识点整理 ---- 继承类型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承类型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/hexo-search/" rel="next" title="给我的Hexo博客添加文章内容搜索功能">
+      给我的Hexo博客添加文章内容搜索功能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">什么是设计模式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">3.</span> <span class="nav-text">学习设计模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-6%E4%B8%AA"><span class="nav-number">3.1.</span> <span class="nav-text">创建型模式 6个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Singleton%EF%BC%89"><span class="nav-number">3.1.1.</span> <span class="nav-text">单例模式（Singleton）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Factory-Method%EF%BC%89"><span class="nav-number">3.1.2.</span> <span class="nav-text">工厂方法模式（Factory Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%BD%E8%B1%A1%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F%EF%BC%88Abstract-Factory%EF%BC%89"><span class="nav-number">3.1.3.</span> <span class="nav-text">抽象工厂模式（Abstract Factory）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Builder%EF%BC%89"><span class="nav-number">3.1.4.</span> <span class="nav-text">建造者模式（Builder）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Prototype%EF%BC%89"><span class="nav-number">3.1.5.</span> <span class="nav-text">原型模式（Prototype）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Iterator%EF%BC%89"><span class="nav-number">3.1.6.</span> <span class="nav-text">迭代器模式（Iterator）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%93%E6%9E%84%E5%9E%8B%E6%A8%A1%E5%BC%8F-7%E4%B8%AA"><span class="nav-number">3.2.</span> <span class="nav-text">结构型模式 7个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Adapter%EF%BC%89"><span class="nav-number">3.2.1.</span> <span class="nav-text">适配器模式（Adapter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E6%A8%A1%E5%BC%8F%EF%BC%88Compositor%EF%BC%89"><span class="nav-number">3.2.2.</span> <span class="nav-text">组合模式（Compositor）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F%EF%BC%88Proxy%EF%BC%89"><span class="nav-number">3.2.3.</span> <span class="nav-text">代理模式（Proxy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%A5%E6%A2%81%E6%A8%A1%E5%BC%8F%EF%BC%88Bridge%EF%BC%89"><span class="nav-number">3.2.4.</span> <span class="nav-text">桥梁模式（Bridge）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A3%85%E9%A5%B0%E6%A8%A1%E5%BC%8F%EF%BC%88Decorator%EF%BC%89"><span class="nav-number">3.2.5.</span> <span class="nav-text">装饰模式（Decorator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%A8%E9%9D%A2%E6%A8%A1%E5%BC%8F%EF%BC%88Facade%EF%BC%89"><span class="nav-number">3.2.6.</span> <span class="nav-text">门面模式（Facade）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%AB%E5%85%83%E6%A8%A1%E5%BC%8F%EF%BC%88Flyweight%EF%BC%89"><span class="nav-number">3.2.7.</span> <span class="nav-text">享元模式（Flyweight）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%8C%E4%B8%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-10%E4%B8%AA"><span class="nav-number">3.3.</span> <span class="nav-text">行为型模式 10个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E6%A8%A1%E5%BC%8F%EF%BC%88Command%EF%BC%89"><span class="nav-number">3.3.1.</span> <span class="nav-text">命名模式（Command）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E9%87%8A%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Interpreter%EF%BC%89"><span class="nav-number">3.3.2.</span> <span class="nav-text">解释器模式（Interpreter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F%EF%BC%88Chian-of-Responsibility%EF%BC%89"><span class="nav-number">3.3.3.</span> <span class="nav-text">责任链模式（Chian of Responsibility）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Observer%EF%BC%89"><span class="nav-number">3.3.4.</span> <span class="nav-text">观察者模式（Observer）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%AD%E4%BB%8B%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Mediator%EF%BC%89"><span class="nav-number">3.3.5.</span> <span class="nav-text">中介者模式（Mediator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%87%E5%BF%98%E5%BD%95%E6%A8%A1%E5%BC%8F%EF%BC%88Memento%EF%BC%89"><span class="nav-number">3.3.6.</span> <span class="nav-text">备忘录模式（Memento）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F%EF%BC%88State%EF%BC%89"><span class="nav-number">3.3.7.</span> <span class="nav-text">状态模式（State）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F%EF%BC%88Strategy%EF%BC%89"><span class="nav-number">3.3.8.</span> <span class="nav-text">策略模式（Strategy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Template-Method%EF%BC%89"><span class="nav-number">3.3.9.</span> <span class="nav-text">模板方法模式（Template Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BF%E9%97%AE%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Visitor%EF%BC%89"><span class="nav-number">3.3.10.</span> <span class="nav-text">访问者模式（Visitor）</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/13/Javascript-Design-Pattern/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/Javascript-Design-Pattern/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/Javascript-Design-Pattern/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f651e666c8a25acaf4f85e33c7f51ac2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/13/do-it-yourselfery-promise/index.html b/en/2020/01/13/do-it-yourselfery-promise/index.html
new file mode 100644
index 0000000000..069ff0b2ed
--- /dev/null
+++ b/en/2020/01/13/do-it-yourselfery-promise/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- promise">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/13/do-it-yourselfery-promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-13T00:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="promise">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/13/do-it-yourselfery-promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/13/do-it-yourselfery-promise/">自己动手实现系列 ---- promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 00:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/13/do-it-yourselfery-promise/" title="自己动手实现系列 ---- promise">https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/promise/" rel="tag"># promise</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/09/career/" rel="prev" title="如何正确使用时间[转载]">
+      <i class="fa fa-chevron-left"></i> 如何正确使用时间[转载]
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/FE-guide-inherit2/" rel="next" title="前端常见知识点整理 ---- 继承类型">
+      前端常见知识点整理 ---- 继承类型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-promise-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 promise 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">then方法异步调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8"><span class="nav-number">1.4.</span> <span class="nav-text">then方法链式调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#catch%E6%96%B9%E6%B3%95"><span class="nav-number">1.5.</span> <span class="nav-text">catch方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#finally%E6%96%B9%E6%B3%95"><span class="nav-number">1.6.</span> <span class="nav-text">finally方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-resolve"><span class="nav-number">1.7.</span> <span class="nav-text">Promise.resolve</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-reject"><span class="nav-number">1.8.</span> <span class="nav-text">Promise.reject</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#all%E6%96%B9%E6%B3%95"><span class="nav-number">1.9.</span> <span class="nav-text">all方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#race%E6%96%B9%E6%B3%95"><span class="nav-number">1.10.</span> <span class="nav-text">race方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/13/do-it-yourselfery-promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/do-it-yourselfery-promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/do-it-yourselfery-promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fff9d75de71f7ba9923c6723ab1012ea',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/13/hexo-search/index.html b/en/2020/01/13/hexo-search/index.html
new file mode 100644
index 0000000000..05b64c876c
--- /dev/null
+++ b/en/2020/01/13/hexo-search/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给我的Hexo博客添加文章内容搜索功能">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/13/hexo-search/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-13T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/13/hexo-search/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>给我的Hexo博客添加文章内容搜索功能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给我的Hexo博客添加文章内容搜索功能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+<span id="more"></span>
+<h2 id="主题里的搜索配置"><a href="#主题里的搜索配置" class="headerlink" title="主题里的搜索配置"></a>主题里的搜索配置</h2><p>这段代码是这样的，实际上我只需要把 <code>enable</code> 从 <code>false</code> 变成 <code>true</code> 就好了</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-generator-searchdb</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># If auto, trigger search by changing input.</span></span><br><span class="line">  <span class="comment"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class="line">  <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
+<p>然后我又看了一下上面提供的依赖地址，这里还需要做两步，一个是安装搜索的依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb</span><br></pre></td></tr></table></figure>
+<p>接着就是在博客系统的配置最下方加入下面这段话</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure>
+<p>到这里如果没什么问题，那么搜索功能就加上了，怎么样简单吧。如果你遇到什么问题，可以到上面的地址看一下，上面有详细的说明，我这里就不贴代码了。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>希望大家都能丰富自己的技术博客，拥有属于自己的一片技术天地。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/13/hexo-search/">给我的Hexo博客添加文章内容搜索功能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/13/hexo-search/" title="给我的Hexo博客添加文章内容搜索功能">https://blog.lifesli.com/2020/01/13/hexo-search/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/hexo-search/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/Javascript-Design-Pattern/" rel="prev" title="JavaScript 设计模式 Design Pattern">
+      <i class="fa fa-chevron-left"></i> JavaScript 设计模式 Design Pattern
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/Es6-arrowFunc-arguments/" rel="next" title="es6中箭头函数没了arguments怎么办？">
+      es6中箭头函数没了arguments怎么办？ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E9%A2%98%E9%87%8C%E7%9A%84%E6%90%9C%E7%B4%A2%E9%85%8D%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">主题里的搜索配置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/13/hexo-search/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/hexo-search/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/hexo-search/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fd0c9f8b9a80004c5ccaaa99819af108',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/22/Es6-arrowFunc-arguments/index.html b/en/2020/01/22/Es6-arrowFunc-arguments/index.html
new file mode 100644
index 0000000000..b6550d9994
--- /dev/null
+++ b/en/2020/01/22/Es6-arrowFunc-arguments/index.html
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="es6中箭头函数没了arguments怎么办？">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/22/Es6-arrowFunc-arguments/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-22T06:50:21.000Z">
+<meta property="article:modified_time" content="2020-01-22T07:34:29.919Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="es6">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/22/Es6-arrowFunc-arguments/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>es6中箭头函数没了arguments怎么办？ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          es6中箭头函数没了arguments怎么办？
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-22 06:50:21 / Modified: 07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+<a id="more"></a>
+
+<h2 id="剩余运算符"><a href="#剩余运算符" class="headerlink" title="剩余运算符"></a>剩余运算符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> func = <span class="function">(<span class="params">...rest</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(rest)</span><br><span class="line">  <span class="comment">//[1,2,3]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
+
+<p>看上面的代码，有的朋友会问，这<code>...</code>的操作不应该是展开运算符么？是的，扩展运算符与剩余操作符都是以三点开头的操作符，二者长的很像，只是在用法上有些差别。它们已经被 ES6 数组支持，能解决很多之前 arguments 解决起来很麻烦的问题。</p>
+<p>简单来说剩余运算是在参数上使用的。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/22/Es6-arrowFunc-arguments/">es6中箭头函数没了arguments怎么办？</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 06:50</p>
+      <p><span>最后更新:</span>2020年01月22日 - 07:34</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/22/Es6-arrowFunc-arguments/" title="es6中箭头函数没了arguments怎么办？">https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/es6/" rel="tag"># es6</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/13/hexo-search/" rel="prev" title="给我的Hexo博客添加文章内容搜索功能">
+      <i class="fa fa-chevron-left"></i> 给我的Hexo博客添加文章内容搜索功能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/Wepack-Tips/" rel="next" title="webpack中loader和plugin之间的区别">
+      webpack中loader和plugin之间的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">1.1.</span> <span class="nav-text">剩余运算符</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '12a760844640ca942c5eb2633fe3e100',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/22/FE-guide-safe/index.html b/en/2020/01/22/FE-guide-safe/index.html
new file mode 100644
index 0000000000..713ad5d5c8
--- /dev/null
+++ b/en/2020/01/22/FE-guide-safe/index.html
@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/22/FE-guide-safe/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-22T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/22/FE-guide-safe/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+<span id="more"></span>
+<h2 id="XSS（Cross-site-scripting）跨站脚本攻击"><a href="#XSS（Cross-site-scripting）跨站脚本攻击" class="headerlink" title="XSS（Cross-site scripting）跨站脚本攻击"></a>XSS（Cross-site scripting）跨站脚本攻击</h2><p>跨站脚本攻击是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。</p>
+<p>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>
+<p>XSS攻击分成两类：</p>
+<ul>
+<li>来自内部的攻击<ul>
+<li>主要指的是利用程序自身的漏洞，构造跨站语句</li>
+</ul>
+</li>
+<li>来自外部的攻击<ul>
+<li>主要指自己构造XSS跨站漏洞网页或者寻找非目标机以外的有跨站漏洞的网页。如当我们要渗透一个站点，我们自己构造一个有跨站漏洞的网页，然后构造跨站语句，通过结合其他技术，如社会工程学等，欺骗目标服务器的管理员打开。</li>
+</ul>
+</li>
+</ul>
+<p>XSS分为：<strong>存储型</strong>和<strong>反射型</strong></p>
+<ul>
+<li>存储型XSS：存储型XSS，持久化，代码是存储在服务其中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，用户访问该页面的时候触发代码执行。这种XSS比较危险，容易造成蠕虫，盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。</li>
+<li>反射型XSS：非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。</li>
+</ul>
+<h3 id="攻击手段和目的"><a href="#攻击手段和目的" class="headerlink" title="攻击手段和目的"></a>攻击手段和目的</h3><p>攻击者使被攻击者在浏览器中执行脚本后，如果需要收集来自被攻击者的数据（如cookie或其他敏感信息），可以自行架设一个网站，让被攻击者通过JavaScript等方式把收集好的数据作为参数提交，随后以数据库等形式记录在攻击者自己的服务器上。</p>
+<p>常用的XSS攻击手段和目的有：</p>
+<ul>
+<li>盗用cookie，获取敏感信息。</li>
+<li>利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。</li>
+<li>利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。</li>
+<li>利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。</li>
+<li>在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。</li>
+</ul>
+<h3 id="漏洞的防御和利用"><a href="#漏洞的防御和利用" class="headerlink" title="漏洞的防御和利用"></a>漏洞的防御和利用</h3><h4 id="过滤特殊字符"><a href="#过滤特殊字符" class="headerlink" title="过滤特殊字符"></a>过滤特殊字符</h4><p>避免XSS的方法之一主要是将用户所提供的内容进行过滤，许多语言都有提供对HTML的过滤：</p>
+<ul>
+<li>PHP的htmlentities()或是htmlspecialchars()。</li>
+<li>Python的cgi.escape()。</li>
+<li>ASP的Server.HTMLEncode()。</li>
+<li>ASP.NET的Server.HtmlEncode()或功能更强的Microsoft Anti-Cross Site Scripting Library</li>
+<li>Java的xssprotect (Open Source Library)。</li>
+<li>NodeJS的node-validator。</li>
+</ul>
+<h4 id="使用HTTP头指定类型"><a href="#使用HTTP头指定类型" class="headerlink" title="使用HTTP头指定类型"></a>使用HTTP头指定类型</h4><p>很多时候可以使用HTTP头指定内容的类型，使得输出的内容避免被作为HTML解析。如在PHP语言中使用以下代码：<br><code>&lt;?php header(&#39;Content-Type: text/javascript; charset=utf-8&#39;); ?&gt;</code><br>即可强行指定输出内容为文本/JavaScript脚本（顺便指定了内容编码），而非可以引发攻击的HTML。</p>
+<h4 id="用户方面"><a href="#用户方面" class="headerlink" title="用户方面"></a>用户方面</h4><p>包括Internet Explorer、Mozilla Firefox在内的大多数浏览器皆有关闭JavaScript的选项，但关闭功能并非是最好的方法，因为许多网站都需要使用JavaScript语言才能正常运作。通常来说，一个经常有安全更新推出的浏览器，在使用上会比很久都没有更新的浏览器更为安全。</p>
+<h2 id="CRSF（Cross-site-request-forgery）跨站请求伪造"><a href="#CRSF（Cross-site-request-forgery）跨站请求伪造" class="headerlink" title="CRSF（Cross-site request forgery）跨站请求伪造"></a>CRSF（Cross-site request forgery）跨站请求伪造</h2><p>跨站请求伪造是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。</p>
+<ul>
+<li>XSS 利用的是用户对指定网站的信任</li>
+<li>CSRF 利用的是网站对用户网页浏览器的信任</li>
+</ul>
+<p>跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：<em><strong>简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</strong></em></p>
+<h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><p>例子<br>假如一家银行用以运行转账操作的URL地址如下：<br><code>http://www.examplebank.com/withdraw?account=AccoutName&amp;amount=1000&amp;for=PayeeName</code><br>那么，一个恶意攻击者可以在另一个网站上放置如下代码：<br><code>&lt;img src=&quot;http://www.examplebank.com/withdraw?account=Alice&amp;amount=1000&amp;for=Badman&quot;&gt;</code><br>如果有账户名为Alice的用户访问了恶意站点，而她之前刚访问过银行不久，登录信息尚未过期，那么她就会损失1000资金。<br>这种恶意的网址可以有很多种形式，藏身于网页中的许多地方。此外，攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛，博客等任何用户生成内容的网站中。这意味着<em><strong>如果服务端没有合适的防御措施的话，用户即使访问熟悉的可信网站也有受攻击的危险</strong></em>。<br>透过例子能够看出，攻击者并不能通过CSRF攻击来直接获取用户的账户控制权，也不能直接窃取用户的任何信息。他们能做到的，是<em><strong>欺骗用户浏览器，让其以用户的名义运行操作。</strong></em></p>
+<h3 id="防御措施"><a href="#防御措施" class="headerlink" title="防御措施"></a>防御措施</h3><h4 id="检查Referer（参照）字段"><a href="#检查Referer（参照）字段" class="headerlink" title="检查Referer（参照）字段"></a>检查Referer（参照）字段</h4><p>HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer字段应和请求的地址位于同一域名下。以上文银行操作为例，Referer字段地址通常应该是转账按钮所在的网页地址，应该也位于<a target="_blank" rel="noopener" href="http://www.examplebank.com之下.而如果是csrf攻击传来的请求,referer字段会是包含恶意网址的地址,不会位于www.examplebank.com之下,这时候服务器就能识别出恶意的访问./">www.examplebank.com之下。而如果是CSRF攻击传来的请求，Referer字段会是包含恶意网址的地址，不会位于www.examplebank.com之下，这时候服务器就能识别出恶意的访问。</a><br>这种办法简单易行，工作量低，仅需要在关键访问处增加一步校验。但这种办法也有其局限性，因其完全依赖浏览器发送正确的Referer字段。虽然http协议对此字段的内容有明确的规定，但并无法保证来访的浏览器的具体实现，亦无法保证浏览器没有安全漏洞影响到此字段。并且也存在攻击者攻击某些浏览器，篡改其Referer字段的可能。</p>
+<h4 id="添加校验token"><a href="#添加校验token" class="headerlink" title="添加校验token"></a>添加校验token</h4><p>由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再运行CSRF攻击。这种数据通常是窗体中的一个数据项。服务器将其生成并附加在窗体中，其内容是一个伪随机数。当客户端通过窗体提交请求时，这个伪随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个伪随机数的值，服务端就会因为校验token的值为空或者错误，拒绝这个可疑请求。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/22/FE-guide-safe/">前端常见知识点整理 ---- 网络安全</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/22/FE-guide-safe/" title="前端常见知识点整理 ---- 网络安全">https://blog.lifesli.com/2020/01/22/FE-guide-safe/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/FE-guide-safe/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/Wepack-Tips/" rel="prev" title="webpack中loader和plugin之间的区别">
+      <i class="fa fa-chevron-left"></i> webpack中loader和plugin之间的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/11/SSR/" rel="next" title="SSR">
+      SSR <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#XSS%EF%BC%88Cross-site-scripting%EF%BC%89%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB"><span class="nav-number">1.1.</span> <span class="nav-text">XSS（Cross-site scripting）跨站脚本攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%BB%E5%87%BB%E6%89%8B%E6%AE%B5%E5%92%8C%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.1.</span> <span class="nav-text">攻击手段和目的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BC%8F%E6%B4%9E%E7%9A%84%E9%98%B2%E5%BE%A1%E5%92%8C%E5%88%A9%E7%94%A8"><span class="nav-number">1.1.2.</span> <span class="nav-text">漏洞的防御和利用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%87%E6%BB%A4%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span class="nav-number">1.1.2.1.</span> <span class="nav-text">过滤特殊字符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HTTP%E5%A4%B4%E6%8C%87%E5%AE%9A%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.1.2.2.</span> <span class="nav-text">使用HTTP头指定类型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%94%A8%E6%88%B7%E6%96%B9%E9%9D%A2"><span class="nav-number">1.1.2.3.</span> <span class="nav-text">用户方面</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CRSF%EF%BC%88Cross-site-request-forgery%EF%BC%89%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0"><span class="nav-number">1.2.</span> <span class="nav-text">CRSF（Cross-site request forgery）跨站请求伪造</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BE%8B%E5%AD%90"><span class="nav-number">1.2.1.</span> <span class="nav-text">例子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E5%BE%A1%E6%8E%AA%E6%96%BD"><span class="nav-number">1.2.2.</span> <span class="nav-text">防御措施</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A3%80%E6%9F%A5Referer%EF%BC%88%E5%8F%82%E7%85%A7%EF%BC%89%E5%AD%97%E6%AE%B5"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">检查Referer（参照）字段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%A0%A1%E9%AA%8Ctoken"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">添加校验token</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/22/FE-guide-safe/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/FE-guide-safe/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/FE-guide-safe/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7f4c5603d83b90476b9c9b4c30db7eea',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/01/22/Wepack-Tips/index.html b/en/2020/01/22/Wepack-Tips/index.html
new file mode 100644
index 0000000000..edde2d436b
--- /dev/null
+++ b/en/2020/01/22/Wepack-Tips/index.html
@@ -0,0 +1,622 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="webpack中loader和plugin之间的区别">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/01/22/Wepack-Tips/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-01-22T10:38:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.430Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/01/22/Wepack-Tips/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>webpack中loader和plugin之间的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          webpack中loader和plugin之间的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+<a id="more"></a>
+
+<h1 id="背景知识"><a href="#背景知识" class="headerlink" title="背景知识"></a>背景知识</h1><p>在研究loader和plugin之前区别之前，我们先来看看一个webpack配置的常见结构</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">"webpack"</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    app: path.join(__dirname, <span class="string">"../src/js/index.js"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 输出文件</span></span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">"[name].bundle.js"</span>,</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">"dist"</span>),</span><br><span class="line">    publicPath: <span class="string">"/"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.scss/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          <span class="string">"style-loader"</span>,</span><br><span class="line">          <span class="string">"css-loader"</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">      ......</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// plugins配置</span></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// 重新创建html文件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      title: <span class="string">"首页"</span>,</span><br><span class="line">      filename: <span class="string">"index.html"</span>,</span><br><span class="line">      template: path.resolve(__dirname, <span class="string">"../src/index.html"</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    ......</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><strong><em>webpack的打包原理</em></strong></p>
+<ul>
+<li>识别入口文件</li>
+<li>通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)</li>
+<li>webpack做的就是分析代码，转换代码，编译代码，输出代码</li>
+<li>最终形成打包后的代码</li>
+</ul>
+<h2 id="什么是loader"><a href="#什么是loader" class="headerlink" title="什么是loader"></a>什么是loader</h2><p>我们可以看到loader实际上是在module的rules下，用对象的方式表示了需要处理的文件类型，和需要用哪些loader做处理</p>
+<blockquote>
+<p>loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。</p>
+</blockquote>
+<ul>
+<li>处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行</li>
+<li>第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码</li>
+</ul>
+<h2 id="什么是plugin"><a href="#什么是plugin" class="headerlink" title="什么是plugin"></a>什么是plugin</h2><blockquote>
+<p>在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。</p>
+</blockquote>
+<h2 id="loader和plugin的区别"><a href="#loader和plugin的区别" class="headerlink" title="loader和plugin的区别"></a>loader和plugin的区别</h2><p>对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的<strong>文件转换过程</strong></p>
+<p><strong>plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务</strong></p>
+<p>下面我们来看一个例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyPlugin</span></span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"MyPlugin constructor:"</span>, options);</span><br><span class="line">  &#125;</span><br><span class="line">  apply(compiler)&#123;</span><br><span class="line">    compiler.plugin(<span class="string">"compilation"</span>, compilation =&gt; &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"MyPlugin"</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = MyPlugin;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// webpack.config.js配置：</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  ...</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MyPlugin(&#123;<span class="attr">param</span>: <span class="string">"my plugin"</span>&#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>使用该plugin后，执行的顺序：</p>
+<ol>
+<li>webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例</li>
+<li>在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件</li>
+<li>并且可以通过compiler对象去操作webpack</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/01/22/Wepack-Tips/">webpack中loader和plugin之间的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 10:38</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/01/22/Wepack-Tips/" title="webpack中loader和plugin之间的区别">https://blog.lifesli.com/2020/01/22/Wepack-Tips/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Wepack-Tips/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/Es6-arrowFunc-arguments/" rel="prev" title="es6中箭头函数没了arguments怎么办？">
+      <i class="fa fa-chevron-left"></i> es6中箭头函数没了arguments怎么办？
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/FE-guide-safe/" rel="next" title="前端常见知识点整理 ---- 网络安全">
+      前端常见知识点整理 ---- 网络安全 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF%E7%9F%A5%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">背景知识</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFloader"><span class="nav-number">2.1.</span> <span class="nav-text">什么是loader</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFplugin"><span class="nav-number">2.2.</span> <span class="nav-text">什么是plugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#loader%E5%92%8Cplugin%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">2.3.</span> <span class="nav-text">loader和plugin的区别</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/01/22/Wepack-Tips/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Wepack-Tips/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Wepack-Tips/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f0f99e481364bb84fadc089c026946f6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/11/SSR/index.html b/en/2020/02/11/SSR/index.html
new file mode 100644
index 0000000000..ee25ed61f2
--- /dev/null
+++ b/en/2020/02/11/SSR/index.html
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:type" content="article">
+<meta property="og:title" content="SSR">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/11/SSR/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="服务端渲染">
+<meta property="article:tag" content="同构技术">
+<meta property="article:tag" content="SSR">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/11/SSR/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>SSR | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          SSR
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/11/SSR/">SSR</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/11/SSR/" title="SSR">https://blog.lifesli.com/2020/02/11/SSR/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/SSR/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" rel="tag"># 服务端渲染</a>
+              <a href="/en/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" rel="tag"># 同构技术</a>
+              <a href="/en/tags/SSR/" rel="tag"># SSR</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/01/22/FE-guide-safe/" rel="prev" title="前端常见知识点整理 ---- 网络安全">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/11/restful-architecture/" rel="next" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      NodeJS 下 RESTful 架构的最佳实践（课堂笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFSSR"><span class="nav-number">1.</span> <span class="nav-text">什么是SSR</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84vue%E7%BA%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93"><span class="nav-number">1.1.</span> <span class="nav-text">传统浏览器的vue纯浏览器渲染</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ssr"><span class="nav-number">1.2.</span> <span class="nav-text">ssr</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#SSR%E9%9C%80%E8%A6%81%E9%82%A3%E4%BA%9B%E4%B8%9C%E8%A5%BF"><span class="nav-number">1.3.</span> <span class="nav-text">SSR需要那些东西</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99SSR"><span class="nav-number">1.4.</span> <span class="nav-text">手写SSR</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue-next"><span class="nav-number">2.</span> <span class="nav-text">vue + next</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">2.2.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">2.3.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/11/SSR/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/SSR/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/SSR/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f4ea17cde2058ed7a0ca1894359554df',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/11/restful-architecture/index.html b/en/2020/02/11/restful-architecture/index.html
new file mode 100644
index 0000000000..03edf0b217
--- /dev/null
+++ b/en/2020/02/11/restful-architecture/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:type" content="article">
+<meta property="og:title" content="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/11/restful-architecture/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RESTful">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/11/restful-architecture/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>NodeJS 下 RESTful 架构的最佳实践（课堂笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/11/restful-architecture/">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/11/restful-architecture/" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">https://blog.lifesli.com/2020/02/11/restful-architecture/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/restful-architecture/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/RESTful/" rel="tag"># RESTful</a>
+              <a href="/en/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/11/SSR/" rel="prev" title="SSR">
+      <i class="fa fa-chevron-left"></i> SSR
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/12/print-table-problem/" rel="next" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      由打印引起的一点小问题，写table时别忘了写thead和tbody <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-RESTful"><span class="nav-number">1.</span> <span class="nav-text">什么是 RESTful</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/11/restful-architecture/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/restful-architecture/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/restful-architecture/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0d821d515ad9a5d14053e2dc79304330',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/12/print-table-problem/index.html b/en/2020/02/12/print-table-problem/index.html
new file mode 100644
index 0000000000..63d8a2a4ec
--- /dev/null
+++ b/en/2020/02/12/print-table-problem/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:type" content="article">
+<meta property="og:title" content="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/12/print-table-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-12T08:30:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/12/print-table-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>由打印引起的一点小问题，写table时别忘了写thead和tbody | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          由打印引起的一点小问题，写table时别忘了写thead和tbody
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/12/print-table-problem/">由打印引起的一点小问题，写table时别忘了写thead和tbody</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 08:30</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/12/print-table-problem/" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">https://blog.lifesli.com/2020/02/12/print-table-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/print-table-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/11/restful-architecture/" rel="prev" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      <i class="fa fa-chevron-left"></i> NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/12/vue-proxyTable-problem/" rel="next" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      Could not proxy request XXX from localhost:8080 to localhost:8081 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/12/print-table-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/print-table-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/print-table-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '180c9c99810af7f2ccbf618d8243804a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/12/vue-proxyTable-problem/index.html b/en/2020/02/12/vue-proxyTable-problem/index.html
new file mode 100644
index 0000000000..e67c1d6cf9
--- /dev/null
+++ b/en/2020/02/12/vue-proxyTable-problem/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Could not proxy request XXX from localhost:8080 to localhost:8081">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/12/vue-proxyTable-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-12T09:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/12/vue-proxyTable-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Could not proxy request XXX from localhost:8080 to localhost:8081 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Could not proxy request XXX from localhost:8080 to localhost:8081
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/12/vue-proxyTable-problem/">Could not proxy request XXX from localhost:8080 to localhost:8081</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 09:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/12/vue-proxyTable-problem/" title="Could not proxy request XXX from localhost:8080 to localhost:8081">https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/12/print-table-problem/" rel="prev" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      <i class="fa fa-chevron-left"></i> 由打印引起的一点小问题，写table时别忘了写thead和tbody
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/19/develop-custom-cli-tools-using-node/" rel="next" title="使用node开发自定义cli工具">
+      使用node开发自定义cli工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/12/vue-proxyTable-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/vue-proxyTable-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/vue-proxyTable-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fe74a98ed7a6f0f4e498fea7c3477695',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/19/develop-custom-cli-tools-using-node/index.html b/en/2020/02/19/develop-custom-cli-tools-using-node/index.html
new file mode 100644
index 0000000000..a16444ae59
--- /dev/null
+++ b/en/2020/02/19/develop-custom-cli-tools-using-node/index.html
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用node开发自定义cli工具">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/19/develop-custom-cli-tools-using-node/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-19T15:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.451Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="脚手架">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/19/develop-custom-cli-tools-using-node/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>使用node开发自定义cli工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用node开发自定义cli工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/19/develop-custom-cli-tools-using-node/">使用node开发自定义cli工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月19日 - 15:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/19/develop-custom-cli-tools-using-node/" title="使用node开发自定义cli工具">https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" rel="tag"># 脚手架</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/12/vue-proxyTable-problem/" rel="prev" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      <i class="fa fa-chevron-left"></i> Could not proxy request XXX from localhost:8080 to localhost:8081
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" rel="next" title="Vue 响应式原理的实现（课程笔记）">
+      Vue 响应式原理的实现（课程笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%86%E5%A4%87"><span class="nav-number">2.</span> <span class="nav-text">准备</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="nav-number">3.</span> <span class="nav-text">初始化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%8C%87%E4%BB%A4"><span class="nav-number">4.</span> <span class="nav-text">创建指令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#github%E4%B8%8A%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%E4%BB%93%E5%BA%93"><span class="nav-number">4.1.</span> <span class="nav-text">github上创建模板仓库</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E9%98%B6%E5%A2%9E%E5%8A%A0%E5%8A%9F%E8%83%BD"><span class="nav-number">4.2.</span> <span class="nav-text">进阶增加功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8inquirer%E8%BF%9B%E8%A1%8C%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%AD%94%E8%AF%A2"><span class="nav-number">4.2.1.</span> <span class="nav-text">使用inquirer进行命令行答询</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8handlebars%E4%BF%AE%E6%94%B9package-json"><span class="nav-number">4.2.2.</span> <span class="nav-text">使用handlebars修改package.json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8ora%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E4%B8%AD%E6%98%BE%E7%A4%BA%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81"><span class="nav-number">4.2.3.</span> <span class="nav-text">使用ora在命令行中显示加载状态</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8chalk%E5%92%8Clog-symbols%E5%A2%9E%E5%8A%A0%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%BE%93%E5%87%BA%E6%A0%B7%E5%BC%8F"><span class="nav-number">4.2.4.</span> <span class="nav-text">使用chalk和log-symbols增加命令行输出样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9B%86%E5%A4%A7%E6%88%90"><span class="nav-number">4.2.5.</span> <span class="nav-text">集大成</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%91%E5%B8%83%E5%88%B0npm%E4%B8%8A"><span class="nav-number">5.</span> <span class="nav-text">发布到npm上</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%8E%E8%AE%B0"><span class="nav-number">6.</span> <span class="nav-text">后记</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1f12e55839a62e9bbc8140152b940fe3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/21/Implementation-of-the-vue-response-principle/index.html b/en/2020/02/21/Implementation-of-the-vue-response-principle/index.html
new file mode 100644
index 0000000000..f08e407092
--- /dev/null
+++ b/en/2020/02/21/Implementation-of-the-vue-response-principle/index.html
@@ -0,0 +1,693 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue 响应式原理的实现（课程笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/21/Implementation-of-the-vue-response-principle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-21T23:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Vue 响应式原理的实现（课程笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue 响应式原理的实现（课程笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/21/Implementation-of-the-vue-response-principle/">Vue 响应式原理的实现（课程笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月21日 - 23:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" title="Vue 响应式原理的实现（课程笔记）">https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/19/develop-custom-cli-tools-using-node/" rel="prev" title="使用node开发自定义cli工具">
+      <i class="fa fa-chevron-left"></i> 使用node开发自定义cli工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" rel="next" title="v8引擎如何回收内存（笔记）">
+      v8引擎如何回收内存（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue2-%E5%8E%9F%E7%90%86"><span class="nav-number">2.</span> <span class="nav-text">Vue2 原理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-defineProperty"><span class="nav-number">2.1.</span> <span class="nav-text">什么是 defineProperty</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-%E4%B8%AD%E4%BB%8E%E6%94%B9%E5%8F%98%E4%B8%80%E4%B8%AA%E6%95%B0%E6%8D%AE%E5%88%B0%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.2.</span> <span class="nav-text">Vue 中从改变一个数据到发生改变的过程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%BC%E5%A4%96%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9%E2%80%94%E6%95%B0%E7%BB%84%E6%80%8E%E4%B9%88%E7%9B%91%E5%90%AC"><span class="nav-number">2.2.1.</span> <span class="nav-text">格外注意的地方—数组怎么监听</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue3-%E5%AE%9E%E7%8E%B0%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">2.3.</span> <span class="nav-text">Vue3 实现双向绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%94%B9%E7%94%A8-Proxy"><span class="nav-number">2.3.1.</span> <span class="nav-text">为什么改用 Proxy</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%98%E8%83%BD%E7%94%A8-Proxy-%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">还能用 Proxy 做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%A0%A1%E9%AA%8C%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.1.1.1.</span> <span class="nav-text">校验类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9C%9F%E6%AD%A3%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F"><span class="nav-number">2.3.1.1.2.</span> <span class="nav-text">真正的私有变量</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%99%9A%E6%8B%9FDom%E5%92%8Cdiff%E7%AE%97%E6%B3%95"><span class="nav-number">2.4.</span> <span class="nav-text">虚拟Dom和diff算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="nav-number">2.5.</span> <span class="nav-text">vue 性能优化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0c6a065715c3c8951f82c27cd60bf076',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/23/V8-engine-memory-management-and-optimization/index.html b/en/2020/02/23/V8-engine-memory-management-and-optimization/index.html
new file mode 100644
index 0000000000..29feb75cea
--- /dev/null
+++ b/en/2020/02/23/V8-engine-memory-management-and-optimization/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:type" content="article">
+<meta property="og:title" content="v8引擎如何回收内存（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/23/V8-engine-memory-management-and-optimization/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-23T08:00:00.000Z">
+<meta property="article:modified_time" content="2020-02-23T07:57:18.745Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="内存回收">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>v8引擎如何回收内存（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          v8引擎如何回收内存（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-02-23 08:00:00 / Modified: 07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/23/V8-engine-memory-management-and-optimization/">v8引擎如何回收内存（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月23日 - 08:00</p>
+      <p><span>最后更新:</span>2020年02月23日 - 07:57</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" title="v8引擎如何回收内存（笔记）">https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" rel="tag"># 内存回收</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" rel="prev" title="Vue 响应式原理的实现（课程笔记）">
+      <i class="fa fa-chevron-left"></i> Vue 响应式原理的实现（课程笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/02/24/Vue-plug-in-development/" rel="next" title="vue插件开发（笔记）">
+      vue插件开发（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E5%9B%9E%E6%94%B6%E5%9E%83%E5%9C%BE"><span class="nav-number">1.</span> <span class="nav-text">V8引擎如何回收垃圾</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E8%A6%81%E5%85%B3%E6%B3%A8%E5%86%85%E5%AD%98"><span class="nav-number">1.1.</span> <span class="nav-text">为什么我们要关注内存</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v8%E5%BC%95%E6%93%8E%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">v8引擎的内存回收机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v8%E7%9A%84%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D"><span class="nav-number">1.2.1.</span> <span class="nav-text">v8的内存分配</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%AD%98%E5%A4%A7%E5%B0%8F"><span class="nav-number">1.2.2.</span> <span class="nav-text">内存大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E7%AE%97%E6%B3%95"><span class="nav-number">1.2.3.</span> <span class="nav-text">垃圾回收算法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#V8%E6%98%AF%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E5%8F%98%E9%87%8F%E7%9A%84"><span class="nav-number">1.2.4.</span> <span class="nav-text">V8是如何处理变量的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E5%A4%84%E7%90%86"><span class="nav-number">1.2.5.</span> <span class="nav-text">变量处理</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8BV8%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8%E6%83%85%E5%86%B5"><span class="nav-number">2.</span> <span class="nav-text">如何查看V8内存使用情况</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%B3%A8%E6%84%8F%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">如何注意内存使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E5%86%85%E5%AD%98%E7%9A%84%E6%8A%80%E5%B7%A7"><span class="nav-number">2.1.1.</span> <span class="nav-text">优化内存的技巧</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E6%AD%A2%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="nav-number">2.1.2.</span> <span class="nav-text">防止内存泄漏</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '782dc4d1890b48742816fc8ff3164bfa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/02/24/Vue-plug-in-development/index.html b/en/2020/02/24/Vue-plug-in-development/index.html
new file mode 100644
index 0000000000..ccc5ca0fc2
--- /dev/null
+++ b/en/2020/02/24/Vue-plug-in-development/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:type" content="article">
+<meta property="og:title" content="vue插件开发（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/02/24/Vue-plug-in-development/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-02-24T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/02/24/Vue-plug-in-development/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>vue插件开发（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          vue插件开发（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/02/24/Vue-plug-in-development/">vue插件开发（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月24日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/02/24/Vue-plug-in-development/" title="vue插件开发（笔记）">https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" rel="prev" title="v8引擎如何回收内存（笔记）">
+      <i class="fa fa-chevron-left"></i> v8引擎如何回收内存（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="next" title="使用阿里镜像加速brew（转载）">
+      使用阿里镜像加速brew（转载） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#vue%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91"><span class="nav-number">1.</span> <span class="nav-text">vue插件开发</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-use"><span class="nav-number">1.1.</span> <span class="nav-text">Vue.use</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/02/24/Vue-plug-in-development/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/24/Vue-plug-in-development/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/24/Vue-plug-in-development/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'edbfccd2cac9201d6f9fd8cabef35d4f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html b/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
new file mode 100644
index 0000000000..0f0be1abe0
--- /dev/null
+++ b/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用阿里镜像加速brew（转载）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-03T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="HomeBrew">
+<meta property="article:tag" content="Mac">
+<meta property="article:tag" content="海外提速">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>使用阿里镜像加速brew（转载） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用阿里镜像加速brew（转载）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">使用阿里镜像加速brew（转载）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月03日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" title="使用阿里镜像加速brew（转载）">https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/HomeBrew/" rel="tag"># HomeBrew</a>
+              <a href="/en/tags/Mac/" rel="tag"># Mac</a>
+              <a href="/en/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" rel="tag"># 海外提速</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/02/24/Vue-plug-in-development/" rel="prev" title="vue插件开发（笔记）">
+      <i class="fa fa-chevron-left"></i> vue插件开发（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/23/path-join-vs-path-resolve/" rel="next" title="path.join 与 path.resolve 的区别">
+      path.join 与 path.resolve 的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Alibaba-%E7%9A%84-Homebrew-%E9%95%9C%E5%83%8F%E6%BA%90%E8%BF%9B%E8%A1%8C%E5%8A%A0%E9%80%9F"><span class="nav-number">1.</span> <span class="nav-text">使用 Alibaba 的 Homebrew 镜像源进行加速</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-brew-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.1.</span> <span class="nav-text">1. 替换 &#x2F; 还原 brew.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-core-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.2.</span> <span class="nav-text">2. 替换 &#x2F; 还原 homebrew-core.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-bottles-%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">1.3.</span> <span class="nav-text">3. 替换 &#x2F; 还原 homebrew-bottles 访问地址</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-zsh-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.1.</span> <span class="nav-text">3.1 zsh 终端操作方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-bash-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.2.</span> <span class="nav-text">3.2 bash 终端操作方式</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a809a06748392d17a658c9867ceb6e08',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/23/path-join-vs-path-resolve/index.html b/en/2020/03/23/path-join-vs-path-resolve/index.html
new file mode 100644
index 0000000000..f55161da75
--- /dev/null
+++ b/en/2020/03/23/path-join-vs-path-resolve/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="path.join 与 path.resolve 的区别">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/23/path-join-vs-path-resolve/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-23T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/23/path-join-vs-path-resolve/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>path.join 与 path.resolve 的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          path.join 与 path.resolve 的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/23/path-join-vs-path-resolve/">path.join 与 path.resolve 的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月23日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/23/path-join-vs-path-resolve/" title="path.join 与 path.resolve 的区别">https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="prev" title="使用阿里镜像加速brew（转载）">
+      <i class="fa fa-chevron-left"></i> 使用阿里镜像加速brew（转载）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-reduce/" rel="next" title="自己动手实现系列 ---- Array.prototype.reduce">
+      自己动手实现系列 ---- Array.prototype.reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#path-join-%E4%B8%8E-path-resolve-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">path.join 与 path.resolve 的区别</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/23/path-join-vs-path-resolve/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/23/path-join-vs-path-resolve/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/23/path-join-vs-path-resolve/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '966181bd3899e179cc5d273c1be9a1a5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-EventEmitter/index.html b/en/2020/03/24/do-it-yourselfery-EventEmitter/index.html
new file mode 100644
index 0000000000..f0a7336bc0
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-EventEmitter/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- EventEmitter(事件触发器)">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-EventEmitter/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T15:45:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.452Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- EventEmitter(事件触发器) | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- EventEmitter(事件触发器)
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-EventEmitter/">自己动手实现系列 ---- EventEmitter(事件触发器)</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:45</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" title="自己动手实现系列 ---- EventEmitter(事件触发器)">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="prev" title="自己动手实现系列 ---- Vue双向绑定">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Vue双向绑定
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-async-await/" rel="next" title="自己动手实现系列 ---- async、await">
+      自己动手实现系列 ---- async、await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-EventEmitter"><span class="nav-number">1.</span> <span class="nav-text">实现一个 EventEmitter</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2335f836aea806a551c14f8c88a81d87',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-async-await/index.html b/en/2020/03/24/do-it-yourselfery-async-await/index.html
new file mode 100644
index 0000000000..9225fdfd1a
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-async-await/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- async、await">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T15:50:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- async、await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- async、await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-async-await/">自己动手实现系列 ---- async、await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:50</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-async-await/" title="自己动手实现系列 ---- async、await">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" rel="prev" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- EventEmitter(事件触发器)
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-call-apply/" rel="next" title="自己动手实现系列 ---- call、apply、bind">
+      自己动手实现系列 ---- call、apply、bind <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ada55d65cf30525e1fdb6f208edd0110',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-call-apply/index.html b/en/2020/03/24/do-it-yourselfery-call-apply/index.html
new file mode 100644
index 0000000000..074908b1fb
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-call-apply/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- call、apply、bind">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-call-apply/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T15:54:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-call-apply/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- call、apply、bind | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- call、apply、bind
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-call-apply/">自己动手实现系列 ---- call、apply、bind</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:54</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-call-apply/" title="自己动手实现系列 ---- call、apply、bind">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-async-await/" rel="prev" title="自己动手实现系列 ---- async、await">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- async、await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/webpack-learning-1/" rel="next" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c47b126d430392f41c0d53e2f96b77da',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-create/index.html b/en/2020/03/24/do-it-yourselfery-create/index.html
new file mode 100644
index 0000000000..32c1852ae3
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-create/index.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Object.create()">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-create/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-create/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Object.create() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Object.create()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-create/">自己动手实现系列 ---- Object.create()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-create/" title="自己动手实现系列 ---- Object.create()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="prev" title="自己动手实现系列 ---- 事件代理">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- 事件代理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-map/" rel="next" title="自己动手实现系列 ---- Array.prototype.map()">
+      自己动手实现系列 ---- Array.prototype.map() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Object-create-%E6%96%B9%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">实现一个 Object.create() 方法</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-create/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-create/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-create/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2191b65f4c12b468c81003cb70a24fea',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-flat/index.html b/en/2020/03/24/do-it-yourselfery-flat/index.html
new file mode 100644
index 0000000000..0b43c707f9
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-flat/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.flat()函数">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-flat/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T13:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-flat/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.flat()函数 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.flat()函数
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-flat/">自己动手实现系列 ---- Array.prototype.flat()函数</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-flat/" title="自己动手实现系列 ---- Array.prototype.flat()函数">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-isArray/" rel="prev" title="自己动手实现系列 ---- Array.isArray">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.isArray
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="next" title="自己动手实现系列 ---- 事件代理">
+      自己动手实现系列 ---- 事件代理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-flat/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-flat/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-flat/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5db977e2f484901e9077de7807e96cef',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-isArray/index.html b/en/2020/03/24/do-it-yourselfery-isArray/index.html
new file mode 100644
index 0000000000..cfc9f1bb90
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-isArray/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.isArray">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-isArray/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T13:30:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.463Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-isArray/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.isArray | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.isArray
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-isArray/">自己动手实现系列 ---- Array.isArray</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:30</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-isArray/" title="自己动手实现系列 ---- Array.isArray">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-new/" rel="prev" title="自己动手实现系列 ---- new">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-flat/" rel="next" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      自己动手实现系列 ---- Array.prototype.flat()函数 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAArray-isArray"><span class="nav-number">1.</span> <span class="nav-text">实现一个Array.isArray</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3abfbbd1a8355b3aa1c0d414088ef4a2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-map/index.html b/en/2020/03/24/do-it-yourselfery-map/index.html
new file mode 100644
index 0000000000..66331858ab
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-map/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.map()">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-map/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T15:20:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-map/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.map() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.map()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-map/">自己动手实现系列 ---- Array.prototype.map()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:20</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-map/" title="自己动手实现系列 ---- Array.prototype.map()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-create/" rel="prev" title="自己动手实现系列 ---- Object.create()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Object.create()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="next" title="自己动手实现系列 ---- Vue双向绑定">
+      自己动手实现系列 ---- Vue双向绑定 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-map/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-map/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-map/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dce6fbe6dc1372245050bd1aa1494352',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-new/index.html b/en/2020/03/24/do-it-yourselfery-new/index.html
new file mode 100644
index 0000000000..54d1351c76
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-new/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-new/">自己动手实现系列 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-new/" title="自己动手实现系列 ---- new">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-reduce/" rel="prev" title="自己动手实现系列 ---- Array.prototype.reduce">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-isArray/" rel="next" title="自己动手实现系列 ---- Array.isArray">
+      自己动手实现系列 ---- Array.isArray <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAnew%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="nav-number">1.</span> <span class="nav-text">实现一个new操作符</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5f01afaf6b613e57d33687a7d9246cdd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/do-it-yourselfery-reduce/index.html b/en/2020/03/24/do-it-yourselfery-reduce/index.html
new file mode 100644
index 0000000000..ffb0b3567b
--- /dev/null
+++ b/en/2020/03/24/do-it-yourselfery-reduce/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.reduce">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-reduce/">自己动手实现系列 ---- Array.prototype.reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-reduce/" title="自己动手实现系列 ---- Array.prototype.reduce">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/23/path-join-vs-path-resolve/" rel="prev" title="path.join 与 path.resolve 的区别">
+      <i class="fa fa-chevron-left"></i> path.join 与 path.resolve 的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-new/" rel="next" title="自己动手实现系列 ---- new">
+      自己动手实现系列 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3eef8353de50195ad2d24da726f1f797',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html" "b/en/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
new file mode 100644
index 0000000000..0072caa22f
--- /dev/null
+++ "b/en/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- 事件代理">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- 事件代理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- 事件代理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">自己动手实现系列 ---- 事件代理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" title="自己动手实现系列 ---- 事件代理">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-flat/" rel="prev" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.flat()函数
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-create/" rel="next" title="自己动手实现系列 ---- Object.create()">
+      自己动手实现系列 ---- Object.create() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7558423903b4b3dbbdb668073e8d4f60',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html" "b/en/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
new file mode 100644
index 0000000000..5637ba9ecd
--- /dev/null
+++ "b/en/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Vue双向绑定">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-03-24T15:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.469Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Vue双向绑定 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Vue双向绑定
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">自己动手实现系列 ---- Vue双向绑定</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" title="自己动手实现系列 ---- Vue双向绑定">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-map/" rel="prev" title="自己动手实现系列 ---- Array.prototype.map()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.map()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" rel="next" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      自己动手实现系列 ---- EventEmitter(事件触发器) <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-2-x-%E7%9A%84-Object-defineProperty-%E7%89%88%E6%9C%AC"><span class="nav-number">1.</span> <span class="nav-text">Vue 2.x 的 Object.defineProperty 版本</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-3-x-%E7%9A%84-proxy-%E7%89%88%E6%9C%AC"><span class="nav-number">2.</span> <span class="nav-text">Vue 3.x 的 proxy 版本</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '204766d33bc19ab906cb7c78010fc4ee',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/03/24/webpack-learning-1/index.html b/en/2020/03/24/webpack-learning-1/index.html
new file mode 100644
index 0000000000..6955814ae2
--- /dev/null
+++ b/en/2020/03/24/webpack-learning-1/index.html
@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/03/24/webpack-learning-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg">
+<meta property="article:published_time" content="2020-03-24T20:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Webpack">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/03/24/webpack-learning-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/03/24/webpack-learning-1/">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 20:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/03/24/webpack-learning-1/" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">https://blog.lifesli.com/2020/03/24/webpack-learning-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/webpack-learning-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Webpack/" rel="tag"># Webpack</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/do-it-yourselfery-call-apply/" rel="prev" title="自己动手实现系列 ---- call、apply、bind">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- call、apply、bind
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/03/source-code-react-diff/" rel="next" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      React 源码剖析系列 － 不可思议的 react diff【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8E%A8%E8%8D%90%E5%BA%8F"><span class="nav-number">1.</span> <span class="nav-text">推荐序</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A5%E9%97%A8-%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%94%A8%E8%BF%99%E4%BA%9B%E5%B0%8F%E4%BE%8B%E5%AD%90%E8%AE%A9%E4%BD%A0%E7%86%9F%E6%82%89webpack%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.</span> <span class="nav-text">入门(一起来用这些小例子让你熟悉webpack的配置)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">2.1.1.</span> <span class="nav-text">webpack 是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">2.1.2.</span> <span class="nav-text">webpack 的核心概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"><span class="nav-number">2.1.3.</span> <span class="nav-text">初始化项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.4.</span> <span class="nav-text">开始我们自己的配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEhtml%E6%A8%A1%E6%9D%BF"><span class="nav-number">2.1.5.</span> <span class="nav-text">配置html模板</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%9A%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E5%A6%82%E4%BD%95%E5%BC%80%E5%8F%91"><span class="nav-number">2.1.5.1.</span> <span class="nav-text">多入口文件如何开发</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#clean-webpack-plugin"><span class="nav-number">2.1.5.2.</span> <span class="nav-text">clean-webpack-plugin</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%8C%E6%9C%9Bdist%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%9F%90%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8D%E8%A2%AB%E6%B8%85%E7%A9%BA"><span class="nav-number">2.1.5.2.1.</span> <span class="nav-text">希望dist目录下某个文件夹不被清空</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E7%94%A8CSS"><span class="nav-number">2.1.6.</span> <span class="nav-text">引用CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BAcss%E6%B7%BB%E5%8A%A0%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E7%BC%80"><span class="nav-number">2.1.6.1.</span> <span class="nav-text">为css添加浏览器前缀</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AApostcss-config-js%E6%96%87%E4%BB%B6%EF%BC%8C%E9%85%8D%E7%BD%AE%E5%A6%82%E4%B8%8B%EF%BC%9A"><span class="nav-number">2.1.6.1.1.</span> <span class="nav-text">在项目根目录下创建一个postcss.config.js文件，配置如下：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E5%9C%A8webpack-config-js%E9%87%8C%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.6.1.2.</span> <span class="nav-text">直接在webpack.config.js里配置</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86css"><span class="nav-number">2.1.6.2.</span> <span class="nav-text">拆分css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86%E5%A4%9A%E4%B8%AAcss"><span class="nav-number">2.1.6.3.</span> <span class="nav-text">拆分多个css</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%93%E5%8C%85-%E5%9B%BE%E7%89%87%E3%80%81%E5%AD%97%E4%BD%93%E3%80%81%E5%AA%92%E4%BD%93%E3%80%81%E7%AD%89%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.7.</span> <span class="nav-text">打包 图片、字体、媒体、等文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%A8babel%E8%BD%AC%E4%B9%89js%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.8.</span> <span class="nav-text">用babel转义js文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BAvue%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.</span> <span class="nav-text">搭建vue开发环境</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90-vue%E6%96%87%E4%BB%B6"><span class="nav-number">2.2.1.</span> <span class="nav-text">解析.vue文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEwebpack-dev-server%E8%BF%9B%E8%A1%8C%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="nav-number">2.2.2.</span> <span class="nav-text">配置webpack-dev-server进行热更新</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4"><span class="nav-number">2.2.3.</span> <span class="nav-text">配置打包命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8C%BA%E5%88%86%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%8E%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.4.</span> <span class="nav-text">区分开发环境与生产环境</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%98%E5%8C%96webpack%E9%85%8D%E7%BD%AE"><span class="nav-number">2.3.</span> <span class="nav-text">优化webpack配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E9%80%9F%E5%BA%A6"><span class="nav-number">2.3.1.</span> <span class="nav-text">优化打包速度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%90%88%E7%90%86%E7%9A%84%E9%85%8D%E7%BD%AE-mode-%E5%8F%82%E6%95%B0%E4%B8%8E-devtool-%E5%8F%82%E6%95%B0"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">合理的配置 mode 参数与 devtool 参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%A9%E5%B0%8F%E6%96%87%E4%BB%B6%E7%9A%84%E6%90%9C%E7%B4%A2%E8%8C%83%E5%9B%B4-%E9%85%8D%E7%BD%AEinclude-exclude-alias-noParse-extensions"><span class="nav-number">2.3.1.2.</span> <span class="nav-text">缩小文件的搜索范围(配置include exclude alias noParse extensions)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HappyPack%E5%BC%80%E5%90%AF%E5%A4%9A%E8%BF%9B%E7%A8%8BLoader%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.1.3.</span> <span class="nav-text">使用HappyPack开启多进程Loader转换</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-webpack-parallel-uglify-plugin-%E5%A2%9E%E5%BC%BA%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9"><span class="nav-number">2.3.1.4.</span> <span class="nav-text">使用 webpack-parallel-uglify-plugin 增强代码压缩</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%BD%E7%A6%BB%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97"><span class="nav-number">2.3.1.5.</span> <span class="nav-text">抽离第三方模块</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E7%BC%93%E5%AD%98"><span class="nav-number">2.3.1.6.</span> <span class="nav-text">配置缓存</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF"><span class="nav-number">2.3.2.</span> <span class="nav-text">优化打包文件体积</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%95%E5%85%A5webpack-bundle-analyzer%E5%88%86%E6%9E%90%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6"><span class="nav-number">2.3.2.1.</span> <span class="nav-text">引入webpack-bundle-analyzer分析打包后的文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#externals"><span class="nav-number">2.3.2.2.</span> <span class="nav-text">externals</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Tree-shaking"><span class="nav-number">2.3.2.3.</span> <span class="nav-text">Tree-shaking</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack%E7%B3%BB%E5%88%97"><span class="nav-number">2.4.</span> <span class="nav-text">手写webpack系列</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99-webpack-loader"><span class="nav-number">2.4.1.</span> <span class="nav-text">手写 webpack loader</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#loader-%E7%BC%96%E5%86%99%E5%8E%9F%E5%88%99"><span class="nav-number">2.4.1.1.</span> <span class="nav-text">loader 编写原则</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack-plugin"><span class="nav-number">2.4.2.</span> <span class="nav-text">手写webpack plugin</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack5-0%E7%9A%84%E6%97%B6%E4%BB%A3"><span class="nav-number">2.5.</span> <span class="nav-text">webpack5.0的时代</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E9%98%85%E8%AF%BB"><span class="nav-number">2.6.</span> <span class="nav-text">更多阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/03/24/webpack-learning-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/webpack-learning-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/webpack-learning-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'afb012dc22959dff7e445c8bbebad3e2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/03/source-code-react-diff/index.html b/en/2020/04/03/source-code-react-diff/index.html
new file mode 100644
index 0000000000..16c0a513a9
--- /dev/null
+++ b/en/2020/04/03/source-code-react-diff/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:type" content="article">
+<meta property="og:title" content="React 源码剖析系列 － 不可思议的 react diff【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/03/source-code-react-diff/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg">
+<meta property="og:image" content="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg">
+<meta property="article:published_time" content="2020-04-03T12:38:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="源码解析">
+<meta property="article:tag" content="React">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/03/source-code-react-diff/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>React 源码剖析系列 － 不可思议的 react diff【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          React 源码剖析系列 － 不可思议的 react diff【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+<span id="more"></span>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，让用户可以无需顾忌性能问题而”任性自由”的刷新页面，让开发者也可以无需关心 Virtual DOM 背后的运作原理，因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染，因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。</p>
+<p><em><strong>行文至此，可能会有读者质疑：React 无非就是引入 diff 这一概念，且 diff 算法也并非其首创，何必吹嘘的如此天花乱坠呢？</strong></em></p>
+<p>其实，正是因为 diff 算法的普识度高，就更应该认可 React 针对 diff 算法优化所做的努力与贡献，更能体现 React 开发者们的魅力与智慧！</p>
+<h2 id="传统-diff-算法"><a href="#传统-diff-算法" class="headerlink" title="传统 diff 算法"></a>传统 diff 算法</h2><p>计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。<a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">传统 diff 算法</a>通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着如果要展示1000个节点，就要依次执行上十亿次的比较。这种指数型的性能消耗对于前端渲染场景来说代价太高了！现今的 CPU 每秒钟能执行大约30亿条指令，即便是最高效的实现，也不可能在一秒内计算出差异情况。</p>
+<p>如果 React 只是单纯的引入 diff 算法而没有任何的优化改进，那么其效率是远远无法满足前端渲染所要求的性能。</p>
+<p>因此，想要将 diff 思想引入 Virtual DOM，就需要设计一种稳定高效的 diff 算法，而 React 做到了！</p>
+<p>那么，React diff 到底是如何实现的呢？</p>
+<h2 id="详解-React-diff"><a href="#详解-React-diff" class="headerlink" title="详解 React diff"></a>详解 React diff</h2><p>传统 diff 算法的复杂度为 O(n^3)，显然这是无法满足性能要求的。<em><strong>React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。</strong></em></p>
+<h3 id="diff-策略"><a href="#diff-策略" class="headerlink" title="diff 策略"></a>diff 策略</h3><ol>
+<li>Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。</li>
+<li>拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。</li>
+<li>对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。</li>
+</ol>
+<p>基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。</p>
+<ul>
+<li>tree diff</li>
+<li>component diff</li>
+<li>element diff</li>
+</ul>
+<blockquote>
+<p>本文中源码 <a target="_blank" rel="noopener" href="https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactMultiChild.js">ReactMultiChild.js</a></p>
+</blockquote>
+<h3 id="tree-diff"><a href="#tree-diff" class="headerlink" title="tree diff"></a>tree diff</h3><p>基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。</p>
+<p>既然 DOM 节点跨层级的移动操作少到可以忽略不计，针对这一现象，React 通过 updateDepth 对 Virtual DOM 树进行层级控制，只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。</p>
+<p><img src="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg" alt="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  updateDepth++;</span><br><span class="line">  <span class="keyword">var</span> errorThrown = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>._updateChildren(nextNestedChildrenElements, transaction, context);</span><br><span class="line">    errorThrown = <span class="literal">false</span>;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    updateDepth--;</span><br><span class="line">    <span class="keyword">if</span> (!updateDepth) &#123;</span><br><span class="line">      <span class="keyword">if</span> (errorThrown) &#123;</span><br><span class="line">        clearQueue();</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        processQueue();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>分析至此，<em><strong>大部分人可能都存在这样的疑问：如果出现了 DOM 节点跨层级的移动操作，React diff 会有怎样的表现呢？</strong></em>是的，对此我也好奇不已，不如试验一番。</p>
+<p>如下图，A 节点（包括其子节点）整个被移动到 D 节点下，由于 React 只会简单的考虑同层级节点的位置变换，而对于不同层级的节点，只有创建和删除操作。当根节点发现子节点中 A 消失了，就会直接销毁 A；当 D 发现多了一个子节点 A，则会创建新的 A（包括子节点）作为其子节点。此时，React diff 的执行情况：<em><strong>create A -&gt; create B -&gt; create C -&gt; delete A</strong></em>。</p>
+<p>由此可发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是以 A 为根节点的树被整个重新创建，这是一种影响 React 性能的操作，<em><strong>因此 React 官方建议不要进行 DOM 节点跨层级的操作</strong></em>。</p>
+<blockquote>
+<p>注意：在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg" alt="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg"></p>
+<h3 id="component-diff"><a href="#component-diff" class="headerlink" title="component diff"></a>component diff</h3><p>React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。</p>
+<ul>
+<li>如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。</li>
+<li>如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。</li>
+<li>对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。</li>
+</ul>
+<p>如下图，当 component D 改变为 component G 时，即使这两个 component 结构相似，一旦 React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，而是直接删除 component D，重新创建 component G 以及其子节点。虽然当两个 component 是不同类型但结构相似时，React diff 会影响性能，但正如 React 官方博客所言：不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。</p>
+<p><img src="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg" alt="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg"></p>
+<h3 id="element-diff"><a href="#element-diff" class="headerlink" title="element diff"></a>element diff</h3><p>当节点处于同一层级时，React diff 提供了三种节点操作，分别为：<em><strong>INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）</strong></em>。</p>
+<ul>
+<li><p><em><strong>INSERT_MARKUP</strong></em> ，新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。</p>
+</li>
+<li><p><em><strong>MOVE_EXISTING</strong></em> ，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。</p>
+</li>
+<li><p><em><strong>REMOVE_NODE</strong></em> ，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。</p>
+</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueInsertMarkup</span>(<span class="params">parentInst, markup, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,</span><br><span class="line">    markupIndex: markupQueue.push(markup) - <span class="number">1</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: <span class="literal">null</span>,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueMove</span>(<span class="params">parentInst, fromIndex, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueRemove</span>(<span class="params">parentInst, fromIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.REMOVE_NODE,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: <span class="literal">null</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如下图，老集合中包含节点：A、B、C、D，更新后的新集合中包含节点：B、A、D、C，此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。</p>
+<p><img src="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg" alt="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg"></p>
+<p>React 发现这类操作繁琐冗余，因为这些都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。</p>
+<p>针对这一现象，React 提出优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，虽然只是小小的改动，性能上却发生了翻天覆地的变化！</p>
+<p>新老集合所包含的节点，如下图所示，新老集合进行 diff 差异化对比，通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置，此时 React 给出的 diff 结果为：B、D 不做任何操作，A、C 进行移动操作，即可。</p>
+<p><img src="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg" alt="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg"></p>
+<p>那么，如此高效的 diff 到底是如何运作的呢？让我们通过源码进行详细分析。</p>
+<p>首先对新集合的节点进行循环遍历，for (name in nextChildren)，通过唯一 key 可以判断新老集合中是否存在相同的节点，if (prevChild === nextChild)，如果存在相同节点，则进行移动操作，但在移动前需要将当前节点在老集合中的位置与 lastIndex 进行比较，if (child._mountIndex &lt; lastIndex)，则进行节点移动操作，否则不执行该操作。这是一种顺序优化手段，lastIndex 一直在更新，表示访问过的节点在老集合中最右的位置（即最大的位置），如果新集合中当前访问的节点比 lastIndex 大，说明当前访问节点在老集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不用添加到差异队列中，即不执行移动操作，只有当访问的节点比 lastIndex 小时，才需要进行移动操作。</p>
+<p>以上图为例，可以更为清晰直观的描述 diff 的差异对比过程：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，通过对比节点位置判断是否进行移动操作，B 在老集合中的位置 B._mountIndex = 1，此时 lastIndex = 0，不满足 child._mountIndex &lt; lastIndex 的条件，因此不对 B 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，其中 prevChild._mountIndex 表示 B 在老集合中的位置，则 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置prevChild._mountIndex = nextIndex，此时新集合中 B._mountIndex = 0，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，通过对比节点位置判断是否进行移动操作，A 在老集合中的位置 A._mountIndex = 0，此时 lastIndex = 1，满足 child._mountIndex &lt; lastIndex的条件，因此对 A 进行移动操作enqueueMove(this, child._mountIndex, toIndex)，其中 toIndex 其实就是 nextIndex，表示 A 需要移动到的位置；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 1，并将 A 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中A._mountIndex = 1，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 D，判断老集合中存在相同节点 D，通过对比节点位置判断是否进行移动操作，D 在老集合中的位置 D._mountIndex = 3，此时 lastIndex = 1，不满足 child._mountIndex &lt; lastIndex的条件，因此不对 D 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 D 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中D._mountIndex = 2，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，通过对比节点位置判断是否进行移动操作，C 在老集合中的位置 C._mountIndex = 2，此时 lastIndex = 3，满足 child._mountIndex &lt; lastIndex 的条件，因此对 C 进行移动操作 enqueueMove(this, child._mountIndex, toIndex)；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 C 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中 C._mountIndex = 3，nextIndex++ 进入下一个节点的判断，由于 C 已经是最后一个节点，因此 diff 到此完成。</p>
+</li>
+</ul>
+<p>以上主要分析新老集合中存在相同节点但位置不同时，对节点进行位置移动的情况，如果新集合中有新加入的节点且老集合存在需要删除的节点，那么 React diff 又是如何对比运作的呢？</p>
+<p>以下图为例：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，由于 B 在老集合中的位置 B._mountIndex = 1，此时lastIndex = 0，因此不对 B 进行移动操作；更新 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置B._mountIndex = 0，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 E，判断老集合中不存在相同节点 E，则创建新节点 E；更新 lastIndex ＝ 1，并将 E 的位置更新为新集合中的位置，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，由于 C 在老集合中的位置C._mountIndex = 2，lastIndex = 1，此时 C._mountIndex &gt; lastIndex，因此不对 C 进行移动操作；更新 lastIndex ＝ 2，并将 C 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，由于 A 在老集合中的位置A._mountIndex = 0，lastIndex = 2，此时 A._mountIndex &lt; lastIndex，因此对 A 进行移动操作；更新 lastIndex ＝ 2，并将 A 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>当完成新集合中所有节点 diff 时，最后还需要对老集合进行循环遍历，判断是否存在新集合中没有但老集合中仍存在的节点，发现存在这样的节点 D，因此删除节点 D，到此 diff 全部完成。</p>
+</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg" alt="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line">_updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prevChildren = <span class="built_in">this</span>._renderedChildren;</span><br><span class="line">  <span class="keyword">var</span> nextChildren = <span class="built_in">this</span>._reconcilerUpdateChildren(</span><br><span class="line">    prevChildren, nextNestedChildrenElements, transaction, context</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">if</span> (!nextChildren &amp;&amp; !prevChildren) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> name;</span><br><span class="line">  <span class="keyword">var</span> lastIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> nextIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> nextChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!nextChildren.hasOwnProperty(name)) &#123;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> prevChild = prevChildren &amp;&amp; prevChildren[name];</span><br><span class="line">    <span class="keyword">var</span> nextChild = nextChildren[name];</span><br><span class="line">    <span class="keyword">if</span> (prevChild === nextChild) &#123;</span><br><span class="line">      <span class="comment">// 移动节点</span></span><br><span class="line">      <span class="built_in">this</span>.moveChild(prevChild, nextIndex, lastIndex);</span><br><span class="line">      lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">      prevChild._mountIndex = nextIndex;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (prevChild) &#123;</span><br><span class="line">        lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">        <span class="comment">// 删除节点</span></span><br><span class="line">        <span class="built_in">this</span>._unmountChild(prevChild);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 初始化并创建节点</span></span><br><span class="line">      <span class="built_in">this</span>._mountChildAtIndex(</span><br><span class="line">        nextChild, nextIndex, transaction, context</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">    nextIndex++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> prevChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (prevChildren.hasOwnProperty(name) &amp;&amp;</span><br><span class="line">        !(nextChildren &amp;&amp; nextChildren.hasOwnProperty(name))) &#123;</span><br><span class="line">      <span class="built_in">this</span>._unmountChild(prevChildren[name]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">this</span>._renderedChildren = nextChildren;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 移动节点</span></span><br><span class="line">moveChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, toIndex, lastIndex</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (child._mountIndex &lt; lastIndex) &#123;</span><br><span class="line">    <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">    enqueueMove(<span class="built_in">this</span>, child._mountIndex, toIndex);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 创建节点</span></span><br><span class="line">createChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, mountImage</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueInsertMarkup(<span class="built_in">this</span>, mountImage, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 删除节点</span></span><br><span class="line">removeChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueRemove(<span class="built_in">this</span>, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_unmountChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.removeChild(child);</span><br><span class="line">  child._mountIndex = <span class="literal">null</span>;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_mountChildAtIndex: <span class="function"><span class="keyword">function</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  child,</span></span></span><br><span class="line"><span class="function"><span class="params">  index,</span></span></span><br><span class="line"><span class="function"><span class="params">  transaction,</span></span></span><br><span class="line"><span class="function"><span class="params">  context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> mountImage = ReactReconciler.mountComponent(</span><br><span class="line">    child,</span><br><span class="line">    transaction,</span><br><span class="line">    <span class="built_in">this</span>,</span><br><span class="line">    <span class="built_in">this</span>._nativeContainerInfo,</span><br><span class="line">    context</span><br><span class="line">  );</span><br><span class="line">  child._mountIndex = index;</span><br><span class="line">  <span class="built_in">this</span>.createChild(child, mountImage);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<p>当然，React diff 还是存在些许不足与待优化的地方，如下图所示，若新集合的节点更新为：D、A、B、C，与老集合对比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在老集合的位置是最大的，导致其他节点的 _mountIndex &lt; lastIndex，造成 D 没有执行移动操作，而是 A、B、C 全部移动到 D 节点后面的现象。</p>
+<p><em><strong>在此，读者们可以讨论思考：如何优化上述问题？</strong></em></p>
+<blockquote>
+<p>建议：在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg" alt="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg"></p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li>React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；</li>
+<li>React 通过<em><strong>分层求异</strong></em>的策略，对 <em><strong>tree diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>相同类生成相似树形结构，不同类生成不同树形结构</strong></em>的策略，对 <em><strong>component diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>设置唯一 key</strong></em>的策略，对 <em><strong>element diff</strong></em> 进行算法优化；</li>
+<li>建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；</li>
+<li>建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</li>
+</ul>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">A Survey on Tree Edit Distance and Related Problems</a><br><a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/reconciliation.html">Reconciliation</a></p>
+<p>如果本文能够为你解决些许关于 React diff 算法的疑惑，请点个赞吧！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/03/source-code-react-diff/">React 源码剖析系列 － 不可思议的 react diff【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月03日 - 12:38</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/03/source-code-react-diff/" title="React 源码剖析系列 － 不可思议的 react diff【转载】">https://blog.lifesli.com/2020/04/03/source-code-react-diff/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/03/source-code-react-diff/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" rel="tag"># 源码解析</a>
+              <a href="/en/tags/React/" rel="tag"># React</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/03/24/webpack-learning-1/" rel="prev" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      <i class="fa fa-chevron-left"></i> 2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/07/webpack-uglifyjsplugin/" rel="next" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F-diff-%E7%AE%97%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">传统 diff 算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%A6%E8%A7%A3-React-diff"><span class="nav-number">1.2.</span> <span class="nav-text">详解 React diff</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#diff-%E7%AD%96%E7%95%A5"><span class="nav-number">1.2.1.</span> <span class="nav-text">diff 策略</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tree-diff"><span class="nav-number">1.2.2.</span> <span class="nav-text">tree diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#component-diff"><span class="nav-number">1.2.3.</span> <span class="nav-text">component diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#element-diff"><span class="nav-number">1.2.4.</span> <span class="nav-text">element diff</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.4.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/03/source-code-react-diff/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/03/source-code-react-diff/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/03/source-code-react-diff/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2dc9698aee562fc8e35bb2d06a83e783',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/07/Electron-Offline-Build/index.html b/en/2020/04/07/Electron-Offline-Build/index.html
new file mode 100644
index 0000000000..c98c89889a
--- /dev/null
+++ b/en/2020/04/07/Electron-Offline-Build/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="国内配置Electron开发环境的正确方式【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/07/Electron-Offline-Build/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-04-07T18:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/07/Electron-Offline-Build/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>国内配置Electron开发环境的正确方式【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          国内配置Electron开发环境的正确方式【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+<span id="more"></span>
+<p><a target="_blank" rel="noopener" href="https://blog.yasking.org/a/zh-install-electron-development-2020.html">转载</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/07/Electron-Offline-Build/">国内配置Electron开发环境的正确方式【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 18:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/07/Electron-Offline-Build/" title="国内配置Electron开发环境的正确方式【转载】">https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/07/webpack-uglifyjsplugin/" rel="prev" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      <i class="fa fa-chevron-left"></i> Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/15/talk-about-full-stack-big-fd/" rel="next" title="前端全栈和大前端有啥区别">
+      前端全栈和大前端有啥区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/07/Electron-Offline-Build/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/Electron-Offline-Build/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/Electron-Offline-Build/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2d3783594ea393d2b74313153b97d726',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/07/webpack-uglifyjsplugin/index.html b/en/2020/04/07/webpack-uglifyjsplugin/index.html
new file mode 100644
index 0000000000..3d9baac6d3
--- /dev/null
+++ b/en/2020/04/07/webpack-uglifyjsplugin/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/07/webpack-uglifyjsplugin/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+<meta property="og:image" content="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/">
+<meta property="article:published_time" content="2020-04-07T11:22:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="UglifyJsPlugin">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/07/webpack-uglifyjsplugin/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+<span id="more"></span>
+
+<h2 id="UglifyJsPlugin"><a href="#UglifyJsPlugin" class="headerlink" title="UglifyJsPlugin"></a>UglifyJsPlugin</h2><p>关于 UglifyJsPlugin 的介绍，在 webpack 的官网上有这样一段描述 </p>
+<blockquote>
+<p>ℹ️ webpack =&lt; v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0</p>
+</blockquote>
+<p>简单来说就是在 webpack3.0 之前，引入了这个插件的0.4.6版本，并用 webpack.optimize.UglifyJsPlugin 作为它的别名， 在 webpack4.0 中引入了插件的 1.0.0 版本，用了同样的名称作为别名，用的时候请注意。</p>
+<p>那么“这个插件”是什么呢， webpack 的官网也告诉我们了，那就是<img src="https://github.com/mishoo/UglifyJS2/tree/harmony" alt="UglifyJS"></p>
+<blockquote>
+<p>A JavaScript parser, mangler/compressor and beautifier toolkit for ES6+.</p>
+</blockquote>
+<p>翻译过来就是“一个用于ES6+的JavaScript解析器、（榨汁机：翻译的挺有意思）/压缩机和美化工具。”</p>
+<p>再简单点说 uglifyJsPlugin 用来对js文件进行压缩，减小js文件的大小。<em><strong>其会拖慢webpack的编译速度，建议开发环境时关闭，生产环境再将其打开。</strong></em></p>
+<p>要用它的的话记得先安装</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>安装完成就可以用了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> UglifyJsPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>当然他有很多的选项，具体想了解可以去 webpack 官网，或者去插件官网都可以找到<img src="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/" alt="uglifyjs-webpack-plugin"></p>
+<p>当然知道你们懒的去看了，心里肯定也在说“直接给我个现成的配置他不香么？”，别急嘛，这就给你们</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">    <span class="comment">//删除注释</span></span><br><span class="line">    output:&#123;</span><br><span class="line">        comments:<span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//删除console 和 debugger  删除警告</span></span><br><span class="line">    compress:&#123;</span><br><span class="line">        warnings:<span class="literal">false</span>,</span><br><span class="line">        drop_debugger:<span class="literal">true</span>,</span><br><span class="line">        drop_console:<span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>当然版本间可能会有些差别，但是option是不变的，有调整的话各位自行调整一下。<br>公司用的 vue-cli3 所以这里再给出个 vue-cli3 默认配置文件下的写法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"></span><br><span class="line">configureWebpack:&#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line">        minimizer: [</span><br><span class="line">            <span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">                uglifyOptions: &#123;</span><br><span class="line">                    <span class="comment">// 删除注释</span></span><br><span class="line">                    output:&#123;</span><br><span class="line">                      comments:<span class="literal">false</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="comment">// 删除console debugger 删除警告</span></span><br><span class="line">                    compress: &#123;</span><br><span class="line">                      warnings: <span class="literal">false</span>,</span><br><span class="line">                      drop_console: <span class="literal">true</span>,<span class="comment">//console</span></span><br><span class="line">                      drop_debugger: <span class="literal">false</span>,</span><br><span class="line">                      pure_funcs: [<span class="string">&#x27;console.log&#x27;</span>]<span class="comment">//移除console</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="问题收集"><a href="#问题收集" class="headerlink" title="问题收集"></a>问题收集</h2><ol>
+<li>运行出现报错 UglifyJs</li>
+</ol>
+<blockquote>
+<p>Q: DefaultsError: warnings is not a supported option</p>
+</blockquote>
+<blockquote>
+<p>A: 降低版本(使用 “uglifyjs-webpack-plugin”: “^1.1.1”)，打包正常，效果达到</p>
+</blockquote>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/07/webpack-uglifyjsplugin/">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/07/webpack-uglifyjsplugin/" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/UglifyJsPlugin/" rel="tag"># UglifyJsPlugin</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/03/source-code-react-diff/" rel="prev" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      <i class="fa fa-chevron-left"></i> React 源码剖析系列 － 不可思议的 react diff【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/07/Electron-Offline-Build/" rel="next" title="国内配置Electron开发环境的正确方式【转载】">
+      国内配置Electron开发环境的正确方式【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#UglifyJsPlugin"><span class="nav-number">1.1.</span> <span class="nav-text">UglifyJsPlugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%94%B6%E9%9B%86"><span class="nav-number">1.2.</span> <span class="nav-text">问题收集</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '203e73aba41442c439d6f925c392b9e2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/15/node-sass-slow-problem/index.html b/en/2020/04/15/node-sass-slow-problem/index.html
new file mode 100644
index 0000000000..3820601ea2
--- /dev/null
+++ b/en/2020/04/15/node-sass-slow-problem/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何解决npm安装node-sass依赖慢的情况">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/15/node-sass-slow-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-04-15T23:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="sass">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/15/node-sass-slow-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>如何解决npm安装node-sass依赖慢的情况 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何解决npm安装node-sass依赖慢的情况
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+<span id="more"></span>
+
+<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在使用sass时要安装node-sass包，但是这个npm包安装不尽慢的要命，下载下来之后还要进行编译，编译环境不合适或者网速不好的时候，光为了这个包的使用花上个把小时绝对正常，记得第一次折腾他用了小半天的时间。</p>
+<p>那么有没有什么方法可以解决这个问题呢？</p>
+<p>有痛点就会有人想办法解决，但是包名已经占用了，想用的话还是要有点配置的代价，但总好过编译和下载</p>
+<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>首先我这里假设你是知道 yarn 这个工具的，对的，接下来我们要用 yarn 进行安装，但是安装的不是 node-sass ，而是一个叫做 node-sass-install 的这个包， 安装他的话就不用在安装 node-sass 这个包了，通常来说安装这个包不会超过10s ， 当然网速不好的话超过10s了也别怪我，总之要比装 node-sass 要快上很多，命令如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add node-sass-install</span><br></pre></td></tr></table></figure>
+<p>是不是很简单，当然如果你觉得为了安装 node-sass 还要再装个 yarn （鄙视你居然不用 yarn ），那你也可以用 npm 安装，命令稍有不同，长了一点</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass-install -D</span><br><span class="line">npx node-sass-install</span><br></pre></td></tr></table></figure>
+<p>比 yarn 多了一条命令，那么他为啥这么神奇呢，且听我分析一下</p>
+<h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>这个 node-sass-install 其实只是在 package.json 的 dependencies 中做了一些配置，如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;dependencies&quot;</span>:&#123;</span><br><span class="line">    <span class="string">&quot;node-sass&quot;</span>:<span class="string">&quot;npm:dart-sass@latest&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面这个配置的意思是，当你安装 node-sass-install 的时候，会依赖并下载 dart-sass， 然后起了个别名叫做 node-sass。偷梁换柱，狸猫换太子了，哈哈。<br>所以的所以呢，如果你在项目中用到 sass 的话建议你尝试一下新方法，说不定更香呢～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/15/node-sass-slow-problem/">如何解决npm安装node-sass依赖慢的情况</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 23:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/15/node-sass-slow-problem/" title="如何解决npm安装node-sass依赖慢的情况">https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/sass/" rel="tag"># sass</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/15/talk-about-full-stack-big-fd/" rel="prev" title="前端全栈和大前端有啥区别">
+      <i class="fa fa-chevron-left"></i> 前端全栈和大前端有啥区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/16/0-vuecli-3-component/" rel="next" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.2.</span> <span class="nav-text">解决方案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.3.</span> <span class="nav-text">原理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/15/node-sass-slow-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/node-sass-slow-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/node-sass-slow-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3eb960282a8dcdd862beb651af4d2bcc',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/15/talk-about-full-stack-big-fd/index.html b/en/2020/04/15/talk-about-full-stack-big-fd/index.html
new file mode 100644
index 0000000000..861a9ef6a7
--- /dev/null
+++ b/en/2020/04/15/talk-about-full-stack-big-fd/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端全栈和大前端有啥区别">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/15/talk-about-full-stack-big-fd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+<meta property="article:published_time" content="2020-04-15T15:59:00.000Z">
+<meta property="article:modified_time" content="2020-04-15T15:51:22.987Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/15/talk-about-full-stack-big-fd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端全栈和大前端有啥区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端全栈和大前端有啥区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-04-15 15:59:00 / Modified: 15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+<a id="more"></a>
+
+<h2 id="狼叔说"><a href="#狼叔说" class="headerlink" title="狼叔说"></a>狼叔说</h2><p>狼叔在解答这个疑问之前直接上了一张图，图我贴在下面供大家看一下<br><img src="https://s1.ax1x.com/2020/04/15/JicTqe.jpg" alt="JicTqe.jpg"><br>这么一张图实际上已经胜过千言了，但是为了方便大家理解，狼叔还是在下面对图进行了解释</p>
+<blockquote>
+<p>前端全栈：分node全栈和其他语言全栈，比如ror搞全栈是最早的，其他php、java也有，不过纯前端的不过，在react，angular之前搞后台还是可以的。<br>所以前端全栈，我理解是等同于node全栈的。node本身是做后端的，但在前端工程化和BFF领域大放异彩，所以node全栈涵盖了前端的方方面面，是比较合理的解释。<br>大前端：更泛化的概念，移动互联网时代开启后，hybrid曾经很火，基于h5和webview做跨端，确实是很理想的做法，但复杂交互搞不定，机器性能网络等是硬伤，所以后来出现了rn和weex，整体还是前端写法，所以hybrid里前端也是占了一定的开发，结合之前前端和node的关系，综合3者：1）app里的前端，2）前端，2）node全栈，统称为大前端。这里的”大“含义是可以做的事儿的范围更广，触达前后端移动端，对前端职责有明显提升。随着技术发展，基于electron的桌面开发也日进流程，ott和iot等领域采用js也愈来愈多，所以只要和用户直接触达的端采用了前端技术开发的都涵盖在大前端范畴内。</p>
+</blockquote>
+<p><a href="https://www.zhihu.com/question/379563850/answer/1152553428" target="_blank" rel="noopener">原帖地址</a></p>
+<h2 id="我说"><a href="#我说" class="headerlink" title="我说"></a>我说</h2><p>之前我的概念里前端扩展开来再进一步的话分两个方向，一个叫全栈另一个叫全端，‘栈’的话是纵向的，简单理解的话就是一款产品一个人能从设计到前端实现后端实现运维等一个人搞定，那么他就可以称之为全栈，狭义一点理解，就是前端后端都会，那么这里所说的前端全栈，我理解是更方便前端掌握的一些后端技能如node、php、ror等，而不是java这种后端技能，所以叫前端全栈，我想这里大部分指的都是node作为后端；</p>
+<p>那么我理解的全端是什么呢</p>
+<p>‘端’我理解为容器，任何跟用户直接接触的技术都是端的技术，早期的pc端，后来的手机端，手机端里又出现了h5、hybrid、native这么几种，后来又出现了小程序之类的容器，pc端也出现了如electron等客户端技术，那么随着物联网智能家居的出现，更多的端出现了，就如狼叔说的OTT和IOT领域也成了端，大前端的大是指范围广，属于用户直达所承载内容容器的都是端。</p>
+<p>总的来说跟狼叔的理解一致，我个人也努力在往全栈全端发展，不过真的好难还有很长的路要走。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/15/talk-about-full-stack-big-fd/">前端全栈和大前端有啥区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 15:59</p>
+      <p><span>最后更新:</span>2020年04月15日 - 15:51</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/15/talk-about-full-stack-big-fd/" title="前端全栈和大前端有啥区别">https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/07/Electron-Offline-Build/" rel="prev" title="国内配置Electron开发环境的正确方式【转载】">
+      <i class="fa fa-chevron-left"></i> 国内配置Electron开发环境的正确方式【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/15/node-sass-slow-problem/" rel="next" title="如何解决npm安装node-sass依赖慢的情况">
+      如何解决npm安装node-sass依赖慢的情况 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8B%BC%E5%8F%94%E8%AF%B4"><span class="nav-number">1.1.</span> <span class="nav-text">狼叔说</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E8%AF%B4"><span class="nav-number">1.2.</span> <span class="nav-text">我说</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e148472770ed38e30a7086d3bf86f7f2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/16/0-vuecli-3-component/index.html b/en/2020/04/16/0-vuecli-3-component/index.html
new file mode 100644
index 0000000000..dd904419c1
--- /dev/null
+++ b/en/2020/04/16/0-vuecli-3-component/index.html
@@ -0,0 +1,678 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/16/0-vuecli-3-component/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="打包">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/16/0-vuecli-3-component/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><p>如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。</p>
+<ul>
+<li>Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库</li>
+<li>npm：组件库将存放在npm</li>
+<li>webpack：修改配置需要一点 webapck 的知识。</li>
+</ul>
+<h2 id="二、大纲"><a href="#二、大纲" class="headerlink" title="二、大纲"></a>二、大纲</h2><p>想要搭建一个组件库，我们必须先要有一个大概的思路。</p>
+<ol>
+<li>规划目录结构</li>
+<li>配置项目以支持目录结构</li>
+<li>编写组件</li>
+<li>编写示例</li>
+<li>配置使用库模式打包编译</li>
+<li>发布到npm</li>
+</ol>
+<h2 id="三、规划目录结构"><a href="#三、规划目录结构" class="headerlink" title="三、规划目录结构"></a>三、规划目录结构</h2><h3 id="1、创建项目"><a href="#1、创建项目" class="headerlink" title="1、创建项目"></a>1、创建项目</h3><p>在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vue create .</span><br></pre></td></tr></table></figure>
+<h3 id="2、调整目录"><a href="#2、调整目录" class="headerlink" title="2、调整目录"></a>2、调整目录</h3><p>我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">...</span><br><span class="line">|-- examples      <span class="comment">// 原 src 目录，改成 examples 用作示例展示</span></span><br><span class="line">|-- packages      <span class="comment">// 新增 packages 用于编写存放组件</span></span><br><span class="line">...</span><br><span class="line">.</span><br></pre></td></tr></table></figure>
+<h2 id="四、配置项目以支持新的目录结构"><a href="#四、配置项目以支持新的目录结构" class="headerlink" title="四、配置项目以支持新的目录结构"></a>四、配置项目以支持新的目录结构</h2><p>我们通过上一步的目录改造后，会遇到两个问题。</p>
+<ol>
+<li>src目录更名为examples，导致项目无法运行</li>
+<li>新增packages目录，该目录未加入webpack编译</li>
+</ol>
+<p><strong>注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。</strong></p>
+<h3 id="1、重新配置入口，修改配置中的-pages-选项"><a href="#1、重新配置入口，修改配置中的-pages-选项" class="headerlink" title="1、重新配置入口，修改配置中的 pages 选项"></a>1、重新配置入口，修改配置中的 pages 选项</h3><p>新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。</p>
+<p>这里使用 pages 修改入口到 examples</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项"><a href="#2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项" class="headerlink" title="2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项"></a>2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</h3><p>packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。</p>
+<p>chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">  chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.module</span><br><span class="line">      .rule(<span class="string">&#x27;js&#x27;</span>)</span><br><span class="line">      .include</span><br><span class="line">        .add(<span class="string">&#x27;packages&#x27;</span>)</span><br><span class="line">        .end()</span><br><span class="line">      .use(<span class="string">&#x27;babel&#x27;</span>)</span><br><span class="line">        .loader(<span class="string">&#x27;babel-loader&#x27;</span>)</span><br><span class="line">        .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 修改它的选项...</span></span><br><span class="line">          <span class="keyword">return</span> options</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7">链式操作</a><br><a target="_blank" rel="noopener" href="https://github.com/neutrinojs/webpack-chain">webpack-chain</a></p>
+<h2 id="五、编写组件"><a href="#五、编写组件" class="headerlink" title="五、编写组件"></a>五、编写组件</h2><p>以上我们已配置好对新目录架构的支持，接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。<br><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">GitHub - 颜色选择器：vcolorpicker</a></p>
+<h3 id="1-创建一个新组件"><a href="#1-创建一个新组件" class="headerlink" title="1. 创建一个新组件"></a>1. 创建一个新组件</h3><ol>
+<li>在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/</li>
+<li>在 color-picker/ 目录下创建 src/ 目录存储组件源码</li>
+<li>在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。<br>修改 /packages/color-picker/index.js文件，对外提供引用。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/color-picker/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件，组件必须声明 name</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./src/color-picker.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">colorPicker = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  Vue.component(colorPicker.name, colorPicker)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> colorPicker</span><br></pre></td></tr></table></figure>
+<h3 id="2-整合所有的组件，对外导出，即一个完整的组件库"><a href="#2-整合所有的组件，对外导出，即一个完整的组件库" class="headerlink" title="2. 整合所有的组件，对外导出，即一个完整的组件库"></a>2. 整合所有的组件，对外导出，即一个完整的组件库</h3><p>修改 /packages/index.js 文件，对整个组件库进行导出。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入颜色选择器组件</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./color-picker&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">  colorPicker</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否安装</span></span><br><span class="line">  <span class="keyword">if</span> (install.installed) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">  components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&#x27;undefined&#x27;</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">  install(<span class="built_in">window</span>.Vue)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">  install,</span><br><span class="line">  <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">  colorPicker</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="六、编写示例"><a href="#六、编写示例" class="headerlink" title="六、编写示例"></a>六、编写示例</h2><h3 id="1、在示例中导入组件库"><a href="#1、在示例中导入组件库" class="headerlink" title="1、在示例中导入组件库"></a>1、在示例中导入组件库</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件库</span></span><br><span class="line"><span class="keyword">import</span> ColorPicker <span class="keyword">from</span> <span class="string">&#x27;./../packages/index&#x27;</span></span><br><span class="line"><span class="comment">// 注册组件库</span></span><br><span class="line">Vue.use(ColorPicker)</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<h3 id="2、在示例中使用组件库中的组件"><a href="#2、在示例中使用组件库中的组件" class="headerlink" title="2、在示例中使用组件库中的组件"></a>2、在示例中使用组件库中的组件</h3><p>在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> v-on:change=<span class="string">&quot;headleChangeColor&quot;</span>&gt;&lt;/colorPicker&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	data () &#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	methods: &#123;</span><br><span class="line">		headleChangeColor () &#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;颜色改变&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<h2 id="七、发布到-npm，方便直接在项目中引用"><a href="#七、发布到-npm，方便直接在项目中引用" class="headerlink" title="七、发布到 npm，方便直接在项目中引用"></a>七、发布到 npm，方便直接在项目中引用</h2><p>到此为止我们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用。</p>
+<h3 id="1、package-js-中新增一条编译为库的命令"><a href="#1、package-js-中新增一条编译为库的命令" class="headerlink" title="1、package.js 中新增一条编译为库的命令"></a>1、package.js 中新增一条编译为库的命令</h3><p>在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。</p>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93">Vue Cli3 构建目标：库</a></p>
+<p>以下我们在 scripts 中新增一条命令</p>
+<ul>
+<li>–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。</li>
+<li>–dest : 输出目录，默认 dist。这里我们改成 lib</li>
+<li>[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;script&quot;</span>: &#123;</span><br><span class="line">	<span class="comment">// ...</span></span><br><span class="line">	<span class="string">&quot;lib&quot;</span>: <span class="string">&quot;vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ul>
+<p><strong>执行编译库命令</strong></p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run lib</span><br></pre></td></tr></table></figure>
+<h3 id="2、配置-package-json-文件中发布到-npm-的字段"><a href="#2、配置-package-json-文件中发布到-npm-的字段" class="headerlink" title="2、配置 package.json 文件中发布到 npm 的字段"></a>2、配置 package.json 文件中发布到 npm 的字段</h3><ul>
+<li>name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。</li>
+<li>version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。</li>
+<li>description: 描述。</li>
+<li>main: 入口文件，该字段需指向我们最终编译后的包文件。</li>
+<li>keyword：关键字，以空格分离希望用户最终搜索的词。</li>
+<li>author：作者</li>
+<li>private：是否私有，需要修改为 false 才能发布到 npm</li>
+<li>license： 开源协议</li>
+</ul>
+<p>以下为参考设置</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;vcolorpicker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.1.5&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;description&quot;</span>: <span class="string">&quot;基于 Vue 的颜色选择器&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;lib/vcolorpicker.umd.min.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;keyword&quot;</span>: <span class="string">&quot;vcolorpicker colorpicker color-picker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">false</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
+<h3 id="3、添加-npmignore-文件，设置忽略发布文件"><a href="#3、添加-npmignore-文件，设置忽略发布文件" class="headerlink" title="3、添加 .npmignore 文件，设置忽略发布文件"></a>3、添加 .npmignore 文件，设置忽略发布文件</h3><p>我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。</p>
+<p>和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 忽略目录</span></span><br><span class="line">examples/</span><br><span class="line">packages/</span><br><span class="line">public/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽略指定文件</span></span><br><span class="line">vue.config.js</span><br><span class="line">babel.config.js</span><br><span class="line">*.map</span><br></pre></td></tr></table></figure>
+<h3 id="4、登录到-npm"><a href="#4、登录到-npm" class="headerlink" title="4、登录到 npm"></a>4、登录到 npm</h3><p>首先需要到 npm 上注册一个账号，注册过程略。</p>
+<p>如果配置了淘宝镜像，先设置回npm镜像：</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm config <span class="built_in">set</span> registry http://registry.npmjs.org</span><br></pre></td></tr></table></figure>
+<p>然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm login</span><br></pre></td></tr></table></figure>
+
+<h3 id="5、发布到-npm"><a href="#5、发布到-npm" class="headerlink" title="5、发布到 npm"></a>5、发布到 npm</h3><p>执行发布命令，发布组件到 npm</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm publish</span><br></pre></td></tr></table></figure>
+
+<h3 id="6、发布成功"><a href="#6、发布成功" class="headerlink" title="6、发布成功"></a>6、发布成功</h3><p>发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker</p>
+<h3 id="7、使用新发布的组件库"><a href="#7、使用新发布的组件库" class="headerlink" title="7、使用新发布的组件库"></a>7、使用新发布的组件库</h3><p>安装</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install vcolorpicker -S</span><br></pre></td></tr></table></figure>
+<p>使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 main.js 引入并注册</span></span><br><span class="line"><span class="keyword">import</span> vcolorpicker <span class="keyword">from</span> <span class="string">&#x27;vcolorpicker&#x27;</span></span><br><span class="line">Vue.use(vcolorpicker)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在组件中使用</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<p>暂时没有做包含多个组件的时候的按需加载，以后研究了再补充。</p>
+<h2 id="八、项目地址"><a href="#八、项目地址" class="headerlink" title="八、项目地址"></a>八、项目地址</h2><p><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">Github 地址：https://github.com/zuley/vue-color-picker</a><br><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vcolorpicker">npm 地址：https://www.npmjs.com/package/vcolorpicker</a><br><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">DEMO 演示：http://vue-color-picker.rxshc.com</a></p>
+<h2 id="九、参考文章"><a href="#九、参考文章" class="headerlink" title="九、参考文章"></a>九、参考文章</h2><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/30948290">从零开始搭建Vue组件库 VV-UI</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6">Vue插件开发</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/components.html">组件基础</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/16/0-vuecli-3-component/">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/16/0-vuecli-3-component/" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%89%93%E5%8C%85/" rel="tag"># 打包</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/15/node-sass-slow-problem/" rel="prev" title="如何解决npm安装node-sass依赖慢的情况">
+      <i class="fa fa-chevron-left"></i> 如何解决npm安装node-sass依赖慢的情况
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/04/16/what-is-npx/" rel="next" title="npx是什么">
+      npx是什么 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%A4%A7%E7%BA%B2"><span class="nav-number">3.</span> <span class="nav-text">二、大纲</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%A7%84%E5%88%92%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">4.</span> <span class="nav-text">三、规划目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.1.</span> <span class="nav-text">1、创建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E8%B0%83%E6%95%B4%E7%9B%AE%E5%BD%95"><span class="nav-number">4.2.</span> <span class="nav-text">2、调整目录</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E9%85%8D%E7%BD%AE%E9%A1%B9%E7%9B%AE%E4%BB%A5%E6%94%AF%E6%8C%81%E6%96%B0%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">5.</span> <span class="nav-text">四、配置项目以支持新的目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E9%87%8D%E6%96%B0%E9%85%8D%E7%BD%AE%E5%85%A5%E5%8F%A3%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-pages-%E9%80%89%E9%A1%B9"><span class="nav-number">5.1.</span> <span class="nav-text">1、重新配置入口，修改配置中的 pages 选项</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E6%94%AF%E6%8C%81%E5%AF%B9-packages-%E7%9B%AE%E5%BD%95%E7%9A%84%E5%A4%84%E7%90%86%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-chainWebpack-%E9%80%89%E9%A1%B9"><span class="nav-number">5.2.</span> <span class="nav-text">2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6"><span class="nav-number">6.</span> <span class="nav-text">五、编写组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E7%BB%84%E4%BB%B6"><span class="nav-number">6.1.</span> <span class="nav-text">1. 创建一个新组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%95%B4%E5%90%88%E6%89%80%E6%9C%89%E7%9A%84%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%AF%B9%E5%A4%96%E5%AF%BC%E5%87%BA%EF%BC%8C%E5%8D%B3%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">6.2.</span> <span class="nav-text">2. 整合所有的组件，对外导出，即一个完整的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E7%BC%96%E5%86%99%E7%A4%BA%E4%BE%8B"><span class="nav-number">7.</span> <span class="nav-text">六、编写示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E5%AF%BC%E5%85%A5%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">7.1.</span> <span class="nav-text">1、在示例中导入组件库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%BA%93%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6"><span class="nav-number">7.2.</span> <span class="nav-text">2、在示例中使用组件库中的组件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%83%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm%EF%BC%8C%E6%96%B9%E4%BE%BF%E7%9B%B4%E6%8E%A5%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8"><span class="nav-number">8.</span> <span class="nav-text">七、发布到 npm，方便直接在项目中引用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81package-js-%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%B8%80%E6%9D%A1%E7%BC%96%E8%AF%91%E4%B8%BA%E5%BA%93%E7%9A%84%E5%91%BD%E4%BB%A4"><span class="nav-number">8.1.</span> <span class="nav-text">1、package.js 中新增一条编译为库的命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E9%85%8D%E7%BD%AE-package-json-%E6%96%87%E4%BB%B6%E4%B8%AD%E5%8F%91%E5%B8%83%E5%88%B0-npm-%E7%9A%84%E5%AD%97%E6%AE%B5"><span class="nav-number">8.2.</span> <span class="nav-text">2、配置 package.json 文件中发布到 npm 的字段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0-npmignore-%E6%96%87%E4%BB%B6%EF%BC%8C%E8%AE%BE%E7%BD%AE%E5%BF%BD%E7%95%A5%E5%8F%91%E5%B8%83%E6%96%87%E4%BB%B6"><span class="nav-number">8.3.</span> <span class="nav-text">3、添加 .npmignore 文件，设置忽略发布文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81%E7%99%BB%E5%BD%95%E5%88%B0-npm"><span class="nav-number">8.4.</span> <span class="nav-text">4、登录到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm"><span class="nav-number">8.5.</span> <span class="nav-text">5、发布到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6%E3%80%81%E5%8F%91%E5%B8%83%E6%88%90%E5%8A%9F"><span class="nav-number">8.6.</span> <span class="nav-text">6、发布成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7%E3%80%81%E4%BD%BF%E7%94%A8%E6%96%B0%E5%8F%91%E5%B8%83%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">8.7.</span> <span class="nav-text">7、使用新发布的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">9.</span> <span class="nav-text">八、项目地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B9%9D%E3%80%81%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0"><span class="nav-number">10.</span> <span class="nav-text">九、参考文章</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/16/0-vuecli-3-component/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/0-vuecli-3-component/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/0-vuecli-3-component/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '895648d93bf61a35227310a907b0b0b7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/04/16/what-is-npx/index.html b/en/2020/04/16/what-is-npx/index.html
new file mode 100644
index 0000000000..184cb03b63
--- /dev/null
+++ b/en/2020/04/16/what-is-npx/index.html
@@ -0,0 +1,648 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npx是什么">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/04/16/what-is-npx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/04/16/what-is-npx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>npx是什么 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npx是什么
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+<span id="more"></span>
+<h2 id="npx-起源"><a href="#npx-起源" class="headerlink" title="npx 起源"></a>npx 起源</h2><p>我从阮一峰的博客中看到介绍 npx 的文章，开头的一句话说明了他诞生的日子。</p>
+<blockquote>
+<p>npm 从5.2版开始，增加了 npx 命令。</p>
+</blockquote>
+<p>为了验证阮一峰这里介绍的正确性我特意下了对应的npm版本验证了一下确实如此，而且在网上找到了另一位大佬司徒正美（大佬走好）博客中也对 npx 做了介绍</p>
+<blockquote>
+<p>最近我在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。</p>
+</blockquote>
+<p>由此，我可以肯定的告诉大家，npx是npm在5.2.0之后版本推出的一个工具，那么他是干嘛用的呢？</p>
+<h2 id="npx-作用"><a href="#npx-作用" class="headerlink" title="npx 作用"></a>npx 作用</h2><p>想要了解一个技术，最好的途经是他的官网，于是我到网上找到了 npx 在 github 上的仓库，地址如下<br><a target="_blank" rel="noopener" href="https://github.com/npm/npx#readme">npx仓库</a>，其中对 npx 有这样一段介绍</p>
+<blockquote>
+<p>DESCRIPTION<br>Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.<br>By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.<br>Unless a –package option is specified, npx will try to guess the name of the binary to invoke depending on the specifier provided. All package specifiers understood by npm may be used with npx, including git specifiers, remote tarballs, local directories, or scoped packages.<br>If a full specifier is included, or if –package is used, npx will always use a freshly-installed, temporary version of the package. This can also be forced with the –ignore-existing flag.</p>
+</blockquote>
+<p>上面这一大段英文我想大家一定看了就头疼，所以为了大家不那么头疼，可以看一下下面我翻译的内容，如果有翻译不对的地方，还请指正。</p>
+<blockquote>
+<p>解释<br>执行 command 命令，无论从本地（我理解为项目目录）node_modules/.bin 或者从全局缓存中， 安装所需执行的任何包。<br>默认情况下，npx将检查 command 是否存在于 $PATH 中，或者在本地项目二进制文件中，并执行该命令。<br>如果没有找到 command ，它将在执行之前安装。<br>除非指定了 —package 选项，否则npx将根据提供的说明符猜测要调用的二进制文件的名称。<br>npm可以理解的所有包说明符都可以与npx一起使用，包括git说明符、远程tarball、本地目录或作用域包。<br>如果包含完整的说明符，或者使用 ——package 选项，npx将始终使用新安装的包的临时版本。<br>这也可以用 ——ignore-existing 标记强制执行。</p>
+</blockquote>
+<p>上面这段机翻简直让人无法理解，所以我又去大佬博客下看了下他们的解释</p>
+<blockquote>
+<p>npx 想要解决的主要问题，就是调用项目内部安装的模块。 – 阮一峰<br>根据 zkat/npx 的描述，npx 会帮你执行依赖包里的二进制文件。 – 司徒正美</p>
+</blockquote>
+<p>司徒大大文章写的太简洁了，不过他还是举了例子，我进行了一下精简，如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./node_modules/.bin/webpack -v <span class="comment">// =&gt; npx webpack -v</span></span><br></pre></td></tr></table></figure>
+<p>简单来说就是找包执行命令的时候不再关注他在哪了，直接就可以用了。</p>
+<p>阮一峰老师的文章更像是官网的翻译加理解</p>
+<blockquote>
+<p>npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。<br>由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。</p>
+</blockquote>
+<p>另外阮一峰老师还介绍了一个临时安装命令使用的场景，我理解为对上面英语介绍倒数第二句的理解</p>
+<h3 id="避免全局安装模块"><a href="#避免全局安装模块" class="headerlink" title="避免全局安装模块"></a>避免全局安装模块</h3><p>除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。</p>
+<p>下载全局模块时，npx 允许指定版本。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx uglify-js@3.1.0 main.js -o ./dist/main.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。</p>
+<p>注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx http-server</span><br></pre></td></tr></table></figure>
+
+<p>然后阮老师还对官网最后一句话做了解释</p>
+<h3 id="–no-install-参数和–ignore-existing-参数"><a href="#–no-install-参数和–ignore-existing-参数" class="headerlink" title="–no-install 参数和–ignore-existing 参数"></a>–no-install 参数和–ignore-existing 参数</h3><p>如果想让 npx 强制使用本地模块，不下载远程模块，可以使用–no-install参数。如果本地不存在该模块，就会报错。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --no-install http-server</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用–ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --ignore-existing create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>然后对于官网上的 example 阮老师也挑了重点的做了介绍，如选择指定的 node 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx node@0.12.8 -v</span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。<br>某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。</p>
+<h2 id="更多参数"><a href="#更多参数" class="headerlink" title="更多参数"></a>更多参数</h2><h3 id="p-参数"><a href="#p-参数" class="headerlink" title="-p 参数"></a>-p 参数</h3><p>-p参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p node@0.12.8 node -v </span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令先指定安装<a href="mailto:&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;">&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;</a>，然后再执行node -v命令。<br>-p参数对于需要安装多个模块的场景很有用。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay [<span class="built_in">command</span>]</span><br></pre></td></tr></table></figure>
+<h3 id="c-参数"><a href="#c-参数" class="headerlink" title="-c 参数"></a>-c 参数</h3><p>如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"><span class="comment"># 报错</span></span><br></pre></td></tr></table></figure>
+<p>上面代码中，cowsay hello | lolcatjs 执行时会报错，原因是第一项 cowsay 由 npx 解释，而第二项命令localcatjs由 Shell 解释，但是lolcatjs并没有全局安装，所以报错。</p>
+<p>-c参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay -c <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm run env | grep npm_</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数可以把这些 npm 的环境变量带入 npx 命令。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -c <span class="string">&#x27;echo &quot;$npm_package_name&quot;&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码会输出当前项目的项目名。</p>
+<h2 id="执行-GitHub-源码"><a href="#执行-GitHub-源码" class="headerlink" title="执行 GitHub 源码"></a>执行 GitHub 源码</h2><p>npx 还可以执行 GitHub 上面的模块源码。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 执行 Gist 代码</span></span><br><span class="line">$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32</span><br><span class="line"></span><br><span class="line"><span class="comment"># 执行仓库代码</span></span><br><span class="line">$ npx github:piuccio/cowsay hello</span><br></pre></td></tr></table></figure>
+<p>注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>因为还没有实际使用过的经验，所以更多的内容从其他大佬哪里白嫖来的知识，做个笔记以观后效。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/04/16/what-is-npx/">npx是什么</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/04/16/what-is-npx/" title="npx是什么">https://blog.lifesli.com/2020/04/16/what-is-npx/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/what-is-npx/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/npx/" rel="tag"># npx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/16/0-vuecli-3-component/" rel="prev" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      <i class="fa fa-chevron-left"></i> 从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/05/14/css3-pointer-events/" rel="next" title="CSS3新属性-pointer-events">
+      CSS3新属性-pointer-events <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E8%B5%B7%E6%BA%90"><span class="nav-number">2.</span> <span class="nav-text">npx 起源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E4%BD%9C%E7%94%A8"><span class="nav-number">3.</span> <span class="nav-text">npx 作用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97"><span class="nav-number">3.1.</span> <span class="nav-text">避免全局安装模块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%80%93no-install-%E5%8F%82%E6%95%B0%E5%92%8C%E2%80%93ignore-existing-%E5%8F%82%E6%95%B0"><span class="nav-number">3.2.</span> <span class="nav-text">–no-install 参数和–ignore-existing 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%8F%82%E6%95%B0"><span class="nav-number">4.</span> <span class="nav-text">更多参数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#p-%E5%8F%82%E6%95%B0"><span class="nav-number">4.1.</span> <span class="nav-text">-p 参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#c-%E5%8F%82%E6%95%B0"><span class="nav-number">4.2.</span> <span class="nav-text">-c 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C-GitHub-%E6%BA%90%E7%A0%81"><span class="nav-number">5.</span> <span class="nav-text">执行 GitHub 源码</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number"></span> <span class="nav-text">最后</span></a></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/04/16/what-is-npx/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/what-is-npx/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/what-is-npx/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '244aafd52905ea516a6339e9856ad7b8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/05/14/css3-pointer-events/index.html b/en/2020/05/14/css3-pointer-events/index.html
new file mode 100644
index 0000000000..c6432b8cb4
--- /dev/null
+++ b/en/2020/05/14/css3-pointer-events/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS3新属性-pointer-events">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/05/14/css3-pointer-events/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0J0XD.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0YEjO.png">
+<meta property="article:published_time" content="2020-05-14T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS3">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/05/14/css3-pointer-events/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>CSS3新属性-pointer-events | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS3新属性-pointer-events
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+<span id="more"></span>
+<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>MDN上是这样介绍这个属性的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">传送门</a>。</p>
+<blockquote>
+<p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。</p>
+</blockquote>
+<p>它有如下这些个属性值：</p>
+<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Keyword values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: auto;</span><br><span class="line"><span class="attribute">pointer-events</span>: none;</span><br><span class="line"><span class="attribute">pointer-events</span>: visiblePainted; <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleFill;    <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleStroke;  <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visible;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: painted;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: fill;           <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: stroke;         <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: all;            <span class="comment">/* SVG only */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Global values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: inherit;</span><br><span class="line"><span class="attribute">pointer-events</span>: initial;</span><br><span class="line"><span class="attribute">pointer-events</span>: unset;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>这里有一个特别的值，它进行了专门的介绍，也正是因为这个原因，水印的功能才得以实现。</p>
+<blockquote>
+<p>除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。</p>
+</blockquote>
+<p>由上可知，当我们将pointer-events值设置为none时，它就有了穿透的特性，也就是说你“看得见它，却摸不到它”，而且也不具备鼠标指针的特性，这不正是水印想要的效果嘛，完美~;</p>
+<p>接着往下看我们可以知道它的初始值是auto，并且可以继承<br><img src="https://s1.ax1x.com/2020/05/14/Y0J0XD.png" alt="Y0J0XD.png"></p>
+<p>水印功能就这样实现了是不是简单实用，那么是不是就没有缺点呢，当然要硬说有的话那就是兼容性的问题吧。</p>
+<p>因为这个css3的属性是新出的，自然ie9及以下自然就不支持了，而且ie不支持的范围要到ie11以下，所以ie你为啥不去死呢。。。</p>
+<p><img src="https://s1.ax1x.com/2020/05/14/Y0YEjO.png" alt="Y0YEjO.png"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/05/14/css3-pointer-events/">CSS3新属性-pointer-events</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月14日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/05/14/css3-pointer-events/" title="CSS3新属性-pointer-events">https://blog.lifesli.com/2020/05/14/css3-pointer-events/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/14/css3-pointer-events/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/CSS3/" rel="tag"># CSS3</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/04/16/what-is-npx/" rel="prev" title="npx是什么">
+      <i class="fa fa-chevron-left"></i> npx是什么
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/05/28/Prettier-Setting/" rel="next" title="Prettier格式化配置">
+      Prettier格式化配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.</span> <span class="nav-text">介绍</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/05/14/css3-pointer-events/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/14/css3-pointer-events/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/14/css3-pointer-events/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3f8181b94e0d6cfa3d383c0b9d4decf9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/05/28/Prettier-Setting/index.html b/en/2020/05/28/Prettier-Setting/index.html
new file mode 100644
index 0000000000..78f2049968
--- /dev/null
+++ b/en/2020/05/28/Prettier-Setting/index.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Prettier格式化配置">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/05/28/Prettier-Setting/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-05-28T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Prettier">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/05/28/Prettier-Setting/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Prettier格式化配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Prettier格式化配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 使能每一种语言默认格式化规则</span></span><br><span class="line">    <span class="attr">&quot;[html]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[css]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[less]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[javascript]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*  prettier的配置 */</span></span><br><span class="line">    <span class="attr">&quot;prettier.printWidth&quot;</span>: <span class="number">100</span>, <span class="comment">// 超过最大值换行</span></span><br><span class="line">    <span class="attr">&quot;prettier.tabWidth&quot;</span>: <span class="number">4</span>, <span class="comment">// 缩进字节数</span></span><br><span class="line">    <span class="attr">&quot;prettier.useTabs&quot;</span>: <span class="literal">false</span>, <span class="comment">// 缩进不使用tab，使用空格</span></span><br><span class="line">    <span class="attr">&quot;prettier.semi&quot;</span>: <span class="literal">true</span>, <span class="comment">// 句尾添加分号</span></span><br><span class="line">    <span class="attr">&quot;prettier.singleQuote&quot;</span>: <span class="literal">true</span>, <span class="comment">// 使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.proseWrap&quot;</span>: <span class="string">&quot;preserve&quot;</span>, <span class="comment">// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行</span></span><br><span class="line">    <span class="attr">&quot;prettier.arrowParens&quot;</span>: <span class="string">&quot;avoid&quot;</span>, <span class="comment">//  (x) =&gt; &#123;&#125; 箭头函数参数只有一个时是否要有小括号。avoid：省略括号</span></span><br><span class="line">    <span class="attr">&quot;prettier.bracketSpacing&quot;</span>: <span class="literal">true</span>, <span class="comment">// 在对象，数组括号与文字之间加空格 &quot;&#123; foo: bar &#125;&quot;</span></span><br><span class="line">    <span class="attr">&quot;prettier.disableLanguages&quot;</span>: [<span class="string">&quot;vue&quot;</span>], <span class="comment">// 不格式化vue文件，vue文件的格式化单独设置</span></span><br><span class="line">    <span class="attr">&quot;prettier.endOfLine&quot;</span>: <span class="string">&quot;auto&quot;</span>, <span class="comment">// 结尾是 \n \r \n\r auto</span></span><br><span class="line">    <span class="attr">&quot;prettier.eslintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用eslint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.htmlWhitespaceSensitivity&quot;</span>: <span class="string">&quot;ignore&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;prettier.ignorePath&quot;</span>: <span class="string">&quot;.prettierignore&quot;</span>, <span class="comment">// 不使用prettier格式化的文件填写在项目的.prettierignore文件中</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxBracketSameLine&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中把&#x27;&gt;&#x27; 是否单独放一行</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxSingleQuote&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.parser&quot;</span>: <span class="string">&quot;babylon&quot;</span>, <span class="comment">// 格式化的解析器，默认是babylon</span></span><br><span class="line">    <span class="attr">&quot;prettier.requireConfig&quot;</span>: <span class="literal">false</span>, <span class="comment">// Require a &#x27;prettierconfig&#x27; to format prettier</span></span><br><span class="line">    <span class="attr">&quot;prettier.stylelintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用stylelint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.trailingComma&quot;</span>: <span class="string">&quot;es5&quot;</span>, <span class="comment">// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）</span></span><br><span class="line">    <span class="attr">&quot;prettier.tslintIntegration&quot;</span>: <span class="literal">false</span> <span class="comment">// 不让prettier使用tslint的代码格式进行校验</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/05/28/Prettier-Setting/">Prettier格式化配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月28日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/05/28/Prettier-Setting/" title="Prettier格式化配置">https://blog.lifesli.com/2020/05/28/Prettier-Setting/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/28/Prettier-Setting/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Prettier/" rel="tag"># Prettier</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/05/14/css3-pointer-events/" rel="prev" title="CSS3新属性-pointer-events">
+      <i class="fa fa-chevron-left"></i> CSS3新属性-pointer-events
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="next" title="rpm命令">
+      rpm命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/05/28/Prettier-Setting/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/28/Prettier-Setting/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/28/Prettier-Setting/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '56a26c2e02e3fe0c9ea384aea7b0ecbf',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2020/07/19/rpm\345\221\275\344\273\244/index.html" "b/en/2020/07/19/rpm\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..459b5ac254
--- /dev/null
+++ "b/en/2020/07/19/rpm\345\221\275\344\273\244/index.html"
@@ -0,0 +1,663 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:type" content="article">
+<meta property="og:title" content="rpm命令">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-07-19T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RPM">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>rpm命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          rpm命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">rpm命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年07月19日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" title="rpm命令">https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/RPM/" rel="tag"># RPM</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/05/28/Prettier-Setting/" rel="prev" title="Prettier格式化配置">
+      <i class="fa fa-chevron-left"></i> Prettier格式化配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="next" title="Linux目录说明">
+      Linux目录说明 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%B8%E8%BD%BD"><span class="nav-number">2.</span> <span class="nav-text">卸载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%9F%E8%83%BD"><span class="nav-number">3.</span> <span class="nav-text">查询功能</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '264b5685042a4200c3089196cc97996b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html" "b/en/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
new file mode 100644
index 0000000000..891866058c
--- /dev/null
+++ "b/en/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Linux目录说明">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Linux">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Linux目录说明 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Linux目录说明
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">Linux目录说明</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" title="Linux目录说明">https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Linux/" rel="tag"># Linux</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="prev" title="rpm命令">
+      <i class="fa fa-chevron-left"></i> rpm命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/11/10/learn-go/" rel="next" title="从零开始：学习Go（一）">
+      从零开始：学习Go（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#bin%EF%BC%9A"><span class="nav-number">1.</span> <span class="nav-text">&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#boot%EF%BC%9A"><span class="nav-number">2.</span> <span class="nav-text">&#x2F;boot：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dev-%EF%BC%9A"><span class="nav-number">3.</span> <span class="nav-text">&#x2F;dev ：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A"><span class="nav-number">4.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#home%EF%BC%9A"><span class="nav-number">5.</span> <span class="nav-text">&#x2F;home：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lib%EF%BC%9A"><span class="nav-number">6.</span> <span class="nav-text">&#x2F;lib：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lost-found%EF%BC%9A"><span class="nav-number">7.</span> <span class="nav-text">&#x2F;lost+found：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#media-linux"><span class="nav-number">8.</span> <span class="nav-text">&#x2F;media linux</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mnt%EF%BC%9A"><span class="nav-number">9.</span> <span class="nav-text">&#x2F;mnt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#opt%EF%BC%9A"><span class="nav-number">10.</span> <span class="nav-text">&#x2F;opt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proc%EF%BC%9A"><span class="nav-number">11.</span> <span class="nav-text">&#x2F;proc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#root%EF%BC%9A"><span class="nav-number">12.</span> <span class="nav-text">&#x2F;root：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sbin%EF%BC%9A"><span class="nav-number">13.</span> <span class="nav-text">&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#selinux%EF%BC%9A"><span class="nav-number">14.</span> <span class="nav-text">&#x2F;selinux：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#srv%EF%BC%9A"><span class="nav-number">15.</span> <span class="nav-text">&#x2F;srv：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sys%EF%BC%9A"><span class="nav-number">16.</span> <span class="nav-text">&#x2F;sys：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#tmp%EF%BC%9A"><span class="nav-number">17.</span> <span class="nav-text">&#x2F;tmp：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr%EF%BC%9A"><span class="nav-number">18.</span> <span class="nav-text">&#x2F;usr：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-bin%EF%BC%9A"><span class="nav-number">19.</span> <span class="nav-text">&#x2F;usr&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-sbin%EF%BC%9A"><span class="nav-number">20.</span> <span class="nav-text">&#x2F;usr&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-src%EF%BC%9A"><span class="nav-number">21.</span> <span class="nav-text">&#x2F;usr&#x2F;src：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#var%EF%BC%9A"><span class="nav-number">22.</span> <span class="nav-text">&#x2F;var：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A-1"><span class="nav-number">23.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bin-sbin-usr-bin-usr-sbin"><span class="nav-number">24.</span> <span class="nav-text">&#x2F;bin, &#x2F;sbin, &#x2F;usr&#x2F;bin, &#x2F;usr&#x2F;sbin:</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '63df7d2ce6b6310b0395fd3efead388a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/11/10/learn-cordova-1/index.html b/en/2020/11/10/learn-cordova-1/index.html
new file mode 100644
index 0000000000..269d1c08c6
--- /dev/null
+++ b/en/2020/11/10/learn-cordova-1/index.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Cordova（一）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/11/10/learn-cordova-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+<meta property="og:image" content="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Cordova">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/11/10/learn-cordova-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>从零开始：学习Cordova（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Cordova（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+<span id="more"></span>
+<h2 id="一、What-is-Cordova？-Cordova是个啥？"><a href="#一、What-is-Cordova？-Cordova是个啥？" class="headerlink" title="一、What is Cordova？ Cordova是个啥？"></a>一、What is Cordova？ Cordova是个啥？</h2><p><img src="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png" alt="Logo"><br>移动端开发和 <code>Web</code> 开发有一些不一样，<code>Web</code> 端开发面向的是浏览器，而移动端开发面向的是各种移动设备，那么针对各种移动设备提供的 <code>SDK</code> 进行开发的话，我们通常称之为***<code>原生开发</code>***，原生开发虽然通常调用底层 <code>Api</code> ，性能更好，但是因为不同移动终端底层技术不一样，所以每种设备都要单独开发，这样开发成本和能力要求都比较高，所以通常都会有一些框架来兼容各种平台，就好比 <code>Java</code> 虚拟机可以运行在 <code>Mac/Windows/Linux</code> 一样，为了能够写一套移动端代码可以在各种设备中使用，于是乎就有了 <code>Cordova</code> 。</p>
+<p>上面说了这么一堆废话，其实简言之，***<code>Cordova</code> 就是提供了跨设备调用底层Api的移动端开发框架（这种开发方式又叫做Hybird 模式）***</p>
+<p>知道这一点应该就够了，当然这是我认为的。</p>
+<p><code>Cordova</code> 的官网地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://cordova.apache.org/">https://cordova.apache.org/</a></p>
+</blockquote>
+<p>其实从这里就可以看出， <code>Cordova</code> 是 <code>Apache</code> 基金下的一个项目，其官网是这样介绍它的</p>
+<blockquote>
+<p>Mobile apps with HTML, CSS &amp; JS<br>Target multiple platforms with one code base<br>Free and open source</p>
+</blockquote>
+<p>翻译成中文的话就是</p>
+<blockquote>
+<p>使用 <code>Html</code> ，<code>CSS</code> 和 <code>JS</code> 进行移动端应用开发<br>一份代码多平台使用<br>免费并且开源</p>
+</blockquote>
+<p>三句话解释了 <code>Cordova</code> 的三个方面，</p>
+<ul>
+<li>使用前端技术开发-对前端开发友好</li>
+<li>跨平台-节省开发工时，降低开发难度-从图标看支持 <code>Android/IOS/WP</code>三大平台</li>
+<li>免费不用解释开源的话意味着会有很多人贡献代码</li>
+</ul>
+<p>以上奠定了 <code>Cordova</code> 强大及流行的基础。</p>
+<h2 id="二、快速上手"><a href="#二、快速上手" class="headerlink" title="二、快速上手"></a>二、快速上手</h2><p>在使用 <code>Cordova</code> 做移动端开发之前需要做一些环境准备工作，首先要安装 <code>Node</code> 以及它携带的 <code>Npm</code> 包管理器，这个现代的前端开发应该都知道，我这里就不多说了，装它就完了。</p>
+<p>装好之后我们就要用 <code>Npm</code> 全局安装一下 <code>Cordova</code> 项目的依赖，命令很简单；</p>
+<p>方便的话还要装一下 <code>Git</code> ，因为一些命令要在 <code>git-cmd</code> 上执行，当然管理代码也是需要它的，所以装吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cordova</span><br></pre></td></tr></table></figure>
+<p>就这么简单就可以开发 <code>Cordova</code> 应用了，接下来我们要创建一个项目，创建项目的命令也十分简单。在命令行工具中输入下面的命令你就创建了一个 <code>Cordova</code> 的应用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova create &lt;path&gt; <span class="comment">// 这里的path是项目的路径</span></span><br></pre></td></tr></table></figure>
+<p>如果要查看创建项目时还能设置什么参数你可以执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova help create</span><br></pre></td></tr></table></figure>
+<p>怎么样是不是超级简单。<br>做了上面的工作你就创建了一个具备基本功能的 <code>Cordova</code> 项目，接下来我们要给项目配置一些东西。</p>
+<p>首先刚才讲到了， <code>Cordova</code> 是一个跨平台的框架，那么你的项目要适配什么平台你需要进行一些配置， <code>cd</code> 到项目目录下执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform add &lt;platform name&gt; <span class="comment">// platform name 为适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>如果不知道名称是什么命令行工具也贴心的给了查询用的命令，通过此命令你可以看到你安装了什么平台的适配，有哪些可以用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cordova platform</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>执行了这个命令你将看到下面这样的 <code>list</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/***</span></span><br><span class="line"><span class="comment">Installed platforms:</span></span><br><span class="line"><span class="comment">Available platforms:</span></span><br><span class="line"><span class="comment">  android ^9.0.0</span></span><br><span class="line"><span class="comment">  browser ^6.0.0</span></span><br><span class="line"><span class="comment">  electron ^1.0.0</span></span><br><span class="line"><span class="comment">  windows ^7.0.0</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>项目也创建了，简单的配置工作也完成了，我们可以启动项目看一下效果了，那么我们就该执行运行项目的命令了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run &lt;platform name&gt; <span class="comment">// platform name 适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>到这我们就快速的创建并运行起了一个 <code>Cordova</code> 的工程。</p>
+<h3 id="小Tip"><a href="#小Tip" class="headerlink" title="小Tip"></a>小Tip</h3><p>如上执行启动命令后，默认会启动<em><strong>8000</strong></em>端口，如果被占用的话可以通过增加命令行参数的形式改变端口号，参数如下设置</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run browser --target=chrome --port=<span class="number">9090</span></span><br></pre></td></tr></table></figure>
+<p>以上就可以自定义端口及浏览器启动应用了。</p>
+<h2 id="三、详细了解"><a href="#三、详细了解" class="headerlink" title="三、详细了解"></a>三、详细了解</h2><h3 id="1、概览"><a href="#1、概览" class="headerlink" title="1、概览"></a>1、概览</h3><p>官网开头介绍了 <code>Cordova</code> 的身世和适用范围，前面开头已经讲过了不想再讲，直接看看 <code>Cordova</code> 的架构设计图。<br><img src="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png" alt="此处是个架构图"></p>
+<center>Cordova 架构图</center>
+
+<p>这个图理解起来不难，大的方面是两个部分，底层是 <code>MobileOS</code> ，也就是手机的操作系统本身，上层是由 <code>Cordova</code> 构建的框架；</p>
+<p><code>Cordova</code> 内部的话是两层结构：</p>
+<ul>
+<li>上层的话是由前端代码构成的 <code>WebApp</code> 部分；</li>
+<li>下层是 <code>Cordova</code> 的视图渲染引擎，它为 <code>WebApp</code> 提供了 <code>HtmlApi</code> 和 <code>CordovaApi</code> ；</li>
+</ul>
+<p>也就是说我们可以调用 <code>html</code> 的原生 <code>Api</code> 也可以使用 <code>Cordova</code> 提供的 <code>jsApi</code> ；</p>
+<p><code>Cordova</code> 还提供了丰富的插件系统；通过 <code>Cordova</code> 的视图引擎调用 <code>Cordova</code> 的 <code>NativeApi</code> 来调用一些 <code>Cordova</code> 提供好的调用设备的信息的 <code>Api</code> ，另外也可以调用一些用户自定义的 <code>Api</code> ；</p>
+<p><code>Cordova</code> 视图引擎和插件系统再将上层的需求通过 <code>MobileOS</code> 开放的 <code>Api</code> 能力实现具体功能，由此完成了整个 <code>Cordova</code> 框架的使用；</p>
+<p>总的来说这个原理跟大多数跨平台的框架原理都类似，由框架提供统一的 <code>Api</code> 能力，再由框架处理不同平台的兼容，这里特别之处在于渲染引擎可以允许使用前端原生的 <code>Api</code> ，这将大大降低开发的难度。</p>
+<h4 id="WebView"><a href="#WebView" class="headerlink" title="WebView"></a>WebView</h4><p>说到移动端开发，不知道 <code>WebView</code> 应该是不可能的，在原生移动应用中，<code>WebView</code> 就是移动应用内部嵌入的一个‘浏览器’，它可以允许你使用前端技术展示内容。</p>
+<h4 id="WebApp"><a href="#WebApp" class="headerlink" title="WebApp"></a>WebApp</h4><p><code>WebApp</code> 跟 <code>WebView</code> 两个词有些像，事实上它们也确实有些关系，<code>WebApp</code> 从名字就可以看出是使用 <code>Web</code> 技术开发的 <code>App</code> ，那么它跟 <code>WebView</code> 是什么关系呢，打个比方，<code>WebView</code> 就是个快递盒子， <code>WebApp</code> 就是你买的商品，一个是<em><strong>容器</strong></em>，一个是<em><strong>内容</strong></em>；这样说应该就明白了吧，通过前端技术开发的 <code>App</code> 通过 <code>WebView</code> 嵌入到 <code>App</code> 中，就可以带给用户原生应用的体验，忘了说 <code>WebApp</code> 是只能用浏览器访问的 <code>App</code> ；</p>
+<p>和纯 <code>WebApp</code> 不同，嵌入到 <code>WebView</code> 中的 <code>WebApp</code> 需要有一个配置文件，***<code>config.xml</code>*** ，它在项目的根目录下，说明了应用的一些信息，这个文件必不可少！！！</p>
+<h4 id="插件系统"><a href="#插件系统" class="headerlink" title="插件系统"></a>插件系统</h4><p>刚刚在上面的架构图中我们介绍了 <code>Cordova</code> 的插件系统，它提供了我们通过 <code>js</code> 调用 <code>MobileApi</code> 的能力，如电源/相机/联系人等等；<br>官方维护了核心的功能，当然如果你愿意也可以调用一些第三方提供的插件，你可以方便的通过 <code>npm</code> 包管理器安装；</p>
+<p><em><strong>但是有一点必须要说</strong></em>：项目创建后默认是不带任何插件的，即使是官方的核心插件也是需要你自己导入进去，第三方的更不用说了，另外<code>Cordova</code> 只提供了功能 <code>Api</code> 并不包含任何的 <code>UI</code> 部件和 <code>MV</code> 框架（你可以根据自己喜欢使用 <code>Angular</code> 或者 <code>Vue</code> 或者其他什么都可以），这一点要牢记。</p>
+<h4 id="开发工作流"><a href="#开发工作流" class="headerlink" title="开发工作流"></a>开发工作流</h4><p>使用 <code>Cordova</code> 开发 <code>MobileApp</code> 的时候即可以开发<strong>多个</strong>平台的 <code>App</code> （一次开发多平台可用，降低开发成本），也可以专注开发<strong>某一</strong>平台的<code>App</code> （使用前端技术开发，降低开发难度），因此开发工作流也分为两种：</p>
+<h5 id="跨平台-CLI-的工作流"><a href="#跨平台-CLI-的工作流" class="headerlink" title="跨平台(CLI)的工作流"></a>跨平台(CLI)的工作流</h5><p>官网上说了很多，也不难理解，这里用我自己的话说就是， <code>Cordova</code> 提供了一个牛叉的 <code>CLI</code> 工具，它可以自动的完成一次编码多平台构建的事，你只需要按照它说的方式开发就行。：）</p>
+<h5 id="平台为中心的工作流"><a href="#平台为中心的工作流" class="headerlink" title="平台为中心的工作流"></a>平台为中心的工作流</h5><p>这里不得不说我没有看很明白，但是结合下面的注意事项我是这样理解的，因为只为某一平台服务，所以有一些针对此平台的特殊的功能或者插件你就可以使用了（虽然不太清楚为什么这么做，如果你知道告诉我，谢谢），<strong>但是一旦使用了这种开发方式，那么就回不到跨平台开发了</strong>，因为你使用了针对某一平台才能调用的代码，这也不难理解，从字里行间感觉就是不建议使用这种开发工作流（好的好的，知道了）。</p>
+<p>好的，接下来开发 <code>App</code> 啦；</p>
+<h3 id="2、开发应用"><a href="#2、开发应用" class="headerlink" title="2、开发应用"></a>2、开发应用</h3><p>快速上手中已经介绍了如何准备、创建和启动应用，如何添加平台，这里就不多说了。说些没讲过的。</p>
+<p>上面说过检查目前平台安装情况的话可以使用下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platforms</span><br></pre></td></tr></table></figure>
+<p>我们也可以使用另一个命令来看，我试验了一下，效果是一样的。。。（问号脸，一样的为什么搞两个命令）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform ls</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>事后我发现，无论我使用的命令是 <code>platform</code> 还是 <code>platforms</code> 加不加 <code>ls</code> 都可以查到当前安装的平台。。。 啊~兼容性好强。</p>
+</blockquote>
+<p>每执行一次 <code>add</code> 命令，你就会发现工程目录下的 <code>platforms</code> 目录下就对应生成了一个对应平台的文件夹，切勿手贱删除，你虽然删除了文件夹，但是各处设置的 <code>platform</code> 并没有去掉，会导致报错，如果要删除请使用 <code>remove</code> 命令。 想知道还有哪些命令的话就看下面的链接吧。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-platform-command">命令大全</a></p>
+<h3 id="安装构建的先决条件"><a href="#安装构建的先决条件" class="headerlink" title="安装构建的先决条件"></a>安装构建的先决条件</h3><p>因为 <code>Cordova</code> 的底层还是要调用 <code>MobileOS</code> 的接口，所以各平台的 <code>SDK</code> 是必须要装的，当然这里指的是你要进行构建的平台，比如你要构建 <code>Android</code> 应用，那么你就要装 <code>Android</code> 的 <code>SDK</code> ，<code>IOS</code> 同理。<strong>这里有一个例外</strong><code>broswer</code>平台是不需要依赖其他 <code>SDK</code> 的（明明是开发 <code>APP</code> ，这里只是为了验证画面比较方便）<br>要看你是否满足了构建需要的依赖，可以执行下面的命令查看</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova requirements</span><br></pre></td></tr></table></figure>
+<p>执行完后你会得到如下结果</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Requirements check results <span class="keyword">for</span> android:</span><br><span class="line">Java JDK: installed .</span><br><span class="line">Android SDK: installed</span><br><span class="line">Android target: installed android-<span class="number">19</span>,android-<span class="number">21</span>,android-<span class="number">22</span>,android-<span class="number">23</span>,Google Inc.:Google Apis:<span class="number">19</span>,Google Inc.:Google Apis (x86 System Image):<span class="number">19</span>,Google Inc.:Google Apis:<span class="number">23</span></span><br><span class="line">Gradle: installed</span><br><span class="line"></span><br><span class="line">Requirements check results <span class="keyword">for</span> ios:</span><br><span class="line">Apple OS X: not installed</span><br><span class="line">Cordova tooling <span class="keyword">for</span> iOS requires Apple OS X</span><br><span class="line"><span class="built_in">Error</span>: Some <span class="keyword">of</span> requirements check failed</span><br></pre></td></tr></table></figure>
+<p>这样你就可以清楚的知道自己需要安装哪些依赖才能完成对应平台的构建，简直方便的不要不要的。<br>具体想知道不同的平台都依赖些什么，你可以参见下面的链接；</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#requirements-and-support">Android平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/ios/index.html#requirements-and-support">iOS平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/win8/index.html#requirements-and-support">Windows平台的要求</a></li>
+</ul>
+<h3 id="构建-App"><a href="#构建-App" class="headerlink" title="构建 App"></a>构建 <code>App</code></h3><p>在 <code>create</code> 项目之后，项目的根目录下会生成一个 <code>www</code> 目录，这个目录包含了 <code>webapp</code> 的入口页面 <code>index.html</code> ，入口文件的话是 <code>www/js/index.js</code> 文件的 <code>deviceready</code> 事件中。</p>
+<p>如果要构建代码的话，执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build</span><br></pre></td></tr></table></figure>
+<p>这个命令会构建你安装的所有平台，如果只想构建某一平台的话，可以把平台的名字加在命令后面，如</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build ios</span><br></pre></td></tr></table></figure>
+<p>如果想了解更多的参数的话，可以看一下后面的链接。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-build-command">更多参数</a></p>
+<h3 id="测试-App"><a href="#测试-App" class="headerlink" title="测试 App"></a>测试 <code>App</code></h3><p>构建完 <code>App</code> 之后我们就可以测试了，通常各平台的 <code>SDK</code> 中会提供模拟器，我们只需要执行下面的命令就可以启动模拟器。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova emulate android</span><br></pre></td></tr></table></figure>
+<p>当然如果你觉得用实机查看更自然一些的话，也可以把手机插上数据线与电脑建立连接，然后执行下面的命令就可以了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
+<p>上面演示的是 <code>Android</code> 的 <code>App</code> 测试过程，每个平台虽然基本类似，但还是有出入，所以，下面提供了不同平台的调试方法，供你预览。</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#setting-up-an-emulator">设置Android模拟器</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-run-command">Cordova run 命令参考文档</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-emulate-command">Cordova emulate 命令参考文档</a></li>
+</ul>
+<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><p>如果只是开发一个 <code>Cordova</code> 框架的 <code>WebApp</code> ，那么你不需要装任何插件，直接用前端技术开发就好了，但是应该没人会这么做吧，毕竟开发这个的目的就是为了跨平台开发原生级移动 <code>App</code> ，因此要调用移动设备的各种功能就必须安装插件。</p>
+<h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p><code>Cordova</code> 插件是一些使用 <code>Javascript</code> 调用原生 <code>SDK</code> 功能的包；<br>你可以使用两种方式找到你想要的插件</p>
+<ol>
+<li>通过 <code>Cordova</code> 提供的包管理平台 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/plugins/">插件搜索页</a></li>
+<li>通过命令行搜索 <em><strong><code>cordova plugin search camera</code></strong></em></li>
+</ol>
+<p>选好你要安装的插件之后你需要执行下面的命令来安装它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova plugin add &lt;plugin name&gt; <span class="comment">// 如 cordova plugin add cordova-plugin-chrome-apps-proxy</span></span><br></pre></td></tr></table></figure>
+<p>如果你的包没有发布在 <code>Cordova</code> 的平台上，也可以使用 <code>git</code> 地址来安装。<br>另外 <code>Cordova</code> 还非常贴心的提供了一个工具 <code>Plugman</code> 来帮助开发者更好的管理 <code>Cordova</code> 插件。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/plugin_ref/plugman.html">Plugman参考</a></p>
+<p>如果要查看你安装了哪些插件可以使用下面任意一种命令都可以。（咱也不知道为啥提供这么多方式，反正好用无脑）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">plugin ls</span><br><span class="line">plugin list</span><br><span class="line">plugin</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">$ cordova plugin ls</span></span><br><span class="line"><span class="comment">cordova-plugin-whitelist 1.2.1 &quot;Whitelist&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>如果想知道更多关于 <code>plugin</code> 的命令参数，可以看右边的链接 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-plugin-command">plugin参数</a></p>
+<h4 id="使用-merges-自定义每个平台"><a href="#使用-merges-自定义每个平台" class="headerlink" title="使用 merges 自定义每个平台"></a>使用 <code>merges</code> 自定义每个平台</h4><p>虽然可以用一套代码来构建多个平台，但一些平台会有自己的特点，就好像 <code>Chrome</code> 浏览器默认的字体大小与 <code>IE</code> 的不同， <code>Android</code> 与 <code>IOS</code> 也有不一样的地方，这种情况下去改 <code>www</code> 目录下的文件显然是不合适的，所以 <code>Cordova</code> 提供了 <code>merges</code> 方式来适配不同平台各自的特别处理，你要做的就是在项目的根目录下创建一个 <code>merges</code> 目录，比如你要适配 <code>Android</code> ，你就可以在 <code>merges</code> 下创建一个 <code>android</code> 目录，然后在下面或覆盖或添加新的资源。（这里官网没有说 <code>merges</code> 在哪里创建，试验后发现是在根目录下）</p>
+<h4 id="更新-Cordova-和你的项目"><a href="#更新-Cordova-和你的项目" class="headerlink" title="更新 Cordova 和你的项目"></a>更新 <code>Cordova</code> 和你的项目</h4><p>如果你要更新你的 <code>Cordova</code> （通常不建议这么干，当然你知道后果并想要使用新的特性或者修正 <code>bug</code> 除外），那么你需要执行一下 <code>update</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm update -g cordova</span><br></pre></td></tr></table></figure>
+<p>当然你也可以指定更新到什么版本（这都是 <code>npm</code> 的知识了）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install -g cordova@<span class="number">3.1</span><span class="number">.0</span>-<span class="number">0.2</span><span class="number">.0</span></span><br></pre></td></tr></table></figure>
+<p>你也可以使用下面的命令查看当前的版本（还是 <code>npm</code> 的知识）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm info cordova version</span><br></pre></td></tr></table></figure>
+<p>你是不是以为这样就可以了，不好意思还不行，你还需要把各个平台进行一下升级</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cordova platform update android --save</span><br><span class="line">cordova platform update ios --save</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>
+<p>其实这也好理解，你都已经轿车换 <code>SUV</code> 了，总不能还用原来的车轱辘吧，只是我希望能不能在换车的时候一块儿把车轱辘换了（这里的意思是希望直接自动化处理了）</p>
+<p>到这里你的第一个 <code>App</code> 就已经开发好了，是不是还有点成就感。</p>
+<h3 id="一些参考资料"><a href="#一些参考资料" class="headerlink" title="一些参考资料"></a>一些参考资料</h3><p>到这里一个简单的基于 <code>Cordova</code> 搭建的 <code>App</code> 就实现了，当然一个 <code>App</code> 绝不这么简单，各平台的 <code>SDK</code> 安装也没那么简单，但这不是本篇文章要说的事了，下一篇文章我会说说如何应对各种不同的开发平台，在这之前还请你看一下 <code>Cordova</code> 都支持哪些平台，具体看一下下面的链接。</p>
+<p>好了，今天就先写到这里，下篇文章我们再见。</p>
+<p><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/support/index.html">平台支持</a></p>
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/11/10/learn-cordova-1/">从零开始：学习Cordova（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/11/10/learn-cordova-1/" title="从零开始：学习Cordova（一）">https://blog.lifesli.com/2020/11/10/learn-cordova-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-cordova-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Cordova/" rel="tag"># Cordova</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/11/10/learn-go/" rel="prev" title="从零开始：学习Go（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Go（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/11/11/learn-ionic-1/" rel="next" title="从零开始：学习Ionic（一）">
+      从零开始：学习Ionic（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81What-is-Cordova%EF%BC%9F-Cordova%E6%98%AF%E4%B8%AA%E5%95%A5%EF%BC%9F"><span class="nav-number">2.</span> <span class="nav-text">一、What is Cordova？ Cordova是个啥？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">二、快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8FTip"><span class="nav-number">3.1.</span> <span class="nav-text">小Tip</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%AF%A6%E7%BB%86%E4%BA%86%E8%A7%A3"><span class="nav-number">4.</span> <span class="nav-text">三、详细了解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E6%A6%82%E8%A7%88"><span class="nav-number">4.1.</span> <span class="nav-text">1、概览</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#WebView"><span class="nav-number">4.1.1.</span> <span class="nav-text">WebView</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WebApp"><span class="nav-number">4.1.2.</span> <span class="nav-text">WebApp</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F"><span class="nav-number">4.1.3.</span> <span class="nav-text">插件系统</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.</span> <span class="nav-text">开发工作流</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B7%A8%E5%B9%B3%E5%8F%B0-CLI-%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.1.</span> <span class="nav-text">跨平台(CLI)的工作流</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B9%B3%E5%8F%B0%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.2.</span> <span class="nav-text">平台为中心的工作流</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8"><span class="nav-number">4.2.</span> <span class="nav-text">2、开发应用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85%E6%9E%84%E5%BB%BA%E7%9A%84%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6"><span class="nav-number">4.3.</span> <span class="nav-text">安装构建的先决条件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BA-App"><span class="nav-number">4.4.</span> <span class="nav-text">构建 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%8B%E8%AF%95-App"><span class="nav-number">4.5.</span> <span class="nav-text">测试 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.</span> <span class="nav-text">添加插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.1.</span> <span class="nav-text">插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-merges-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%AF%8F%E4%B8%AA%E5%B9%B3%E5%8F%B0"><span class="nav-number">4.6.2.</span> <span class="nav-text">使用 merges 自定义每个平台</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0-Cordova-%E5%92%8C%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.6.3.</span> <span class="nav-text">更新 Cordova 和你的项目</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%BA%9B%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">4.7.</span> <span class="nav-text">一些参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/11/10/learn-cordova-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-cordova-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-cordova-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a4005127111acde54f7cdf6470853204',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/11/10/learn-go/index.html b/en/2020/11/10/learn-go/index.html
new file mode 100644
index 0000000000..5e74a3b07e
--- /dev/null
+++ b/en/2020/11/10/learn-go/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Go（一）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/11/10/learn-go/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Go语言">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/11/10/learn-go/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>从零开始：学习Go（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Go（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/11/10/learn-go/">从零开始：学习Go（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/11/10/learn-go/" title="从零开始：学习Go（一）">https://blog.lifesli.com/2020/11/10/learn-go/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-go/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Go%E8%AF%AD%E8%A8%80/" rel="tag"># Go语言</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="prev" title="Linux目录说明">
+      <i class="fa fa-chevron-left"></i> Linux目录说明
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2020/11/10/learn-cordova-1/" rel="next" title="从零开始：学习Cordova（一）">
+      从零开始：学习Cordova（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/11/10/learn-go/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-go/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-go/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd98febf9046a1d2c5fdb5b95b9682ce1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2020/11/11/learn-ionic-1/index.html b/en/2020/11/11/learn-ionic-1/index.html
new file mode 100644
index 0000000000..3c97ae649b
--- /dev/null
+++ b/en/2020/11/11/learn-ionic-1/index.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Ionic（一）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2020/11/11/learn-ionic-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://blog.lifesli.com/">
+<meta property="article:published_time" content="2020-11-11T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Ionic">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2020/11/11/learn-ionic-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>从零开始：学习Ionic（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Ionic（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+<span id="more"></span>
+<h2 id="Ionic-简介"><a href="#Ionic-简介" class="headerlink" title="Ionic 简介"></a>Ionic 简介</h2><p>学一门技术，我们首先要知道它是谁，能干啥，有啥好处。要了解一门新技术最好的方式就是去它的官网看看。<br>（一言不合丢给你一个官网 ⇒ <a target="_blank" rel="noopener" href="https://ionicframework.com/">官网</a>）</p>
+<blockquote>
+<p>One codebase.<br>Any platform.<br>Now in Vue.</p>
+</blockquote>
+<p>翻译过来是这样的</p>
+<blockquote>
+<p>一份代码<br>任何平台<br>现在支持Vue</p>
+</blockquote>
+<p>看着是不是眼熟，嗯，跟 <code>Cordova</code> 的口号何其相似，目标都是跨平台，只是 <code>Cordova</code> 跨的是 <code>MobileOS</code> 而 <code>Ionic</code> 跨的是前端框架。<br>最下面一句 <code>Now in Vue</code> 像是在说，“嗯，我也支持Vue了（Vue发展太快了，不能掉队）”，要知道，最开始的 <code>Ionic</code> 是妥妥的 <code>Angular</code> 派，不过无所谓，管他黑猫白猫，能完成任务就是好猫。</p>
+<p>再往下看你会看到，巴拉巴拉说了一堆好处，比如开发迅速啊，组件优美且丰富啊，社区强大啊，还有跨平台（支持原生 <code>js</code> ，<code>Angular</code> ，<code>Vue</code> ，nice~），另外还提供了 <code>native</code> 的组件来直接调用移动设备的功能，可以说是相当强大了。</p>
+<p>好了，看完了介绍，我们赶紧快速上手吧。</p>
+<h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>在使用<code>Ionic</code>做开发还是要做一些准备工作，<code>node</code>，<code>git</code>都是必不可少的，所以请先行准备好。</p>
+<p>目前，<code>Ionic</code>提供了两种创建工程的方式:</p>
+<ul>
+<li>一种用官方的话说叫<code>StepByStep</code>，看过之后我理解就是通过命令的方式，一步步来；</li>
+<li>另一种的话是官方提供了一个向导工具，就跟安装软件一样填一些必要的信息，然后一路下一步就生成了一个工程；</li>
+</ul>
+<p>接下来我将使用这两种方式分别创建工程，首先是第一种。</p>
+<h3 id="StepByStep-创建工程"><a href="#StepByStep-创建工程" class="headerlink" title="StepByStep 创建工程"></a>StepByStep 创建工程</h3><ol>
+<li>全局安装<code>Ionic</code>的脚手架工具<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli</span><br></pre></td></tr></table></figure></li>
+<li>创建工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ionic start myApp tabs <span class="comment">// myApp 是项目目录名称也是工程名称 tabs是模板名称</span></span><br></pre></td></tr></table></figure></li>
+<li>启动工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd myApp</span><br><span class="line">ionic serve</span><br></pre></td></tr></table></figure></li>
+</ol>
+<p>嗯，上面三个步骤之后，你的Ionic项目就启动起来了。（What ！？ 这么简单？！ 嗯，是的。）</p>
+<h3 id="向导式（App-Wizard）创建工程"><a href="#向导式（App-Wizard）创建工程" class="headerlink" title="向导式（App Wizard）创建工程"></a>向导式（App Wizard）创建工程</h3><p>这是一个在线创建工程的手段（感觉对于开发人员来说貌似还是命令行来的方便，这种可视化方案应该是给小白用户准备的吧），地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://ionicframework.com/start">https://ionicframework.com/start</a></p>
+</blockquote>
+<p><img src="/" alt="此处是个图"></p>
+<p>点开上面的地址，你会看到如图所示的一个界面，我们可以看到它要求你输入的一些信息</p>
+<ol>
+<li>App Name</li>
+<li>Icon</li>
+<li>Theme Color</li>
+<li>Template</li>
+<li>Framework</li>
+</ol>
+<p>可以看到这比命令行要多出几个信息，上面的命令行只要求了 <code>App Name</code> 和 <code>Template</code> 难道强大的命令行不支持设置这些么？答案是否定的，当然可以设置这些信息，只是以参数的形式而已，先不说这个，填写好上面的信息以后我们点击<code>[create App]</code>按钮，这时我们进入了下一步，选择代码仓库（Choose a git host），你会看到下面有一个<code>[Skip]</code>按钮说明这步不是必须的，我们先选择一个<code>git</code>仓库，这里我选择<code>github</code>，其他的感兴趣的同学可以自己试试。点击<code>[connect]</code>，这时会弹出一个窗口，申请对应git仓库的鉴权认证，认证通过后我们点击<code>[choose]</code>，等待程序运行一会儿后工程就会被上传到git仓库中，并且会跳转到一个<code>DashBoard</code>，提供了可视化管理工程的页面（也太高大上了吧），右侧我们看到如何把代码下载到本地，并运行它，真的是很方便。</p>
+<p>例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli cordova-res <span class="comment">// cordova-res 指的是安装 cordova 的开发依赖，因为除 cordova 之外还可以选择如 phonegap 之类的MobileOS 框架</span></span><br><span class="line">git clone https:<span class="comment">//github.com/lixuguang/li-app.git li-app</span></span><br><span class="line">cd li-app &amp;&amp; npm install &amp;&amp; ionic serve</span><br></pre></td></tr></table></figure>
+
+<p>执行完上面的命令以后，我们的工程也就运行起来了，也是十分方便，即使不会写代码的人，跟着指南也可以很方便的搭建一个Ionic工程。</p>
+<h2 id="深入学习"><a href="#深入学习" class="headerlink" title="深入学习"></a>深入学习</h2><p>Ionic 的体系当中，最重要的莫过于 Ionic CLI 和 UI Component 两个了，接下来我将分辨将这两部分中最重要的内容拿出来说说。</p>
+<h3 id="Ionic-CLI"><a href="#Ionic-CLI" class="headerlink" title="Ionic CLI"></a>Ionic CLI</h3><p>在上面的快速上手中，我们已经使用了几个命令，但这些还不够，Ionic CLI 提供了强大的命令，请与我一起看一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli <span class="comment">// 全局安装 Ionic CLI</span></span><br><span class="line">ionic start myApp tabs <span class="comment">// 用模板创建工程</span></span><br><span class="line">ionic start --list <span class="comment">// 查看可用模板</span></span><br><span class="line">ionic serve <span class="comment">// 启动工程</span></span><br><span class="line">ionic serve --lab <span class="comment">// 以android或ios方式打开</span></span><br><span class="line">ionic lib update <span class="comment">// 更新包</span></span><br><span class="line">ionic serve --address <span class="number">192.168</span><span class="number">.89</span><span class="number">.1</span> <span class="comment">// 指定Ip，给外部用户访问</span></span><br><span class="line">ionic platform add ios/android <span class="comment">// 添加平台</span></span><br><span class="line">ionic build ios/android <span class="comment">// 构建平台</span></span><br><span class="line">ionic emulate ios [options]  <span class="comment">// ionic run ios [options] 模拟器运行</span></span><br><span class="line"></span><br><span class="line">ionic generate <span class="comment">// 创建新特性</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">options</span><br><span class="line">  -l <span class="comment">//livereload， 实时刷新变化。</span></span><br><span class="line">  -c  <span class="comment">//打印app里的console</span></span><br><span class="line">  -s  <span class="comment">//打印设备的console</span></span><br><span class="line">  -p  <span class="comment">//指定设备的端口</span></span><br><span class="line">  -i  <span class="comment">//指定livereload的重刷端口</span></span><br><span class="line">  --debug <span class="comment">//debug</span></span><br><span class="line">  --release <span class="comment">//release</span></span><br><span class="line">  --host=<span class="number">0.0</span><span class="number">.0</span><span class="number">.0</span> <span class="comment">// IP</span></span><br><span class="line">  --port=<span class="number">8100</span> <span class="comment">// 端口</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">ionic resources [--splash] [--icon] <span class="comment">// 上传代码到官方平台</span></span><br><span class="line">ionic upload <span class="comment">// 登录</span></span><br><span class="line">ionic info <span class="comment">// 查看系统信息</span></span><br><span class="line">ionic browser add crosswalk <span class="comment">// 加壳预览（手机浏览器性能问题解决）</span></span><br><span class="line">ionic browser list <span class="comment">// 查看可用的browser</span></span><br><span class="line">ionic browser revert android/ios <span class="comment">// 删除安装的browser</span></span><br><span class="line">ionic state reset <span class="comment">// 先删除平台和插件，再安装package.json文件中的平台和插件。重置</span></span><br><span class="line">ionic state save <span class="comment">// 保存当前状态信息</span></span><br><span class="line">ionic state clear <span class="comment">// 先删除平台和插件，然后按照package.json文件中包含的平台和插件重新安装。</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/angular@latest --save <span class="comment">// Ionic + Angular</span></span><br><span class="line">ng add @ionic/angular <span class="comment">// 使用Angular CLI 增加Ionic的组件库，可用于Angular项目改造Ionic</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/react <span class="comment">// Ionic + React</span></span><br><span class="line">npm install @ionic/react-router <span class="comment">// 在既存的react项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务，加在根组件下</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">npm install @ionic/vue @ionic/vue-router <span class="comment">// Ionic + Vue ，在既存的Vue项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js 文件中加入引入</span></span><br><span class="line"><span class="keyword">import</span> &#123; IonicVue &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = createApp(App)</span><br><span class="line">  .use(IonicVue)</span><br><span class="line">  .use(router);</span><br><span class="line"></span><br><span class="line">router.isReady().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  app.mount(<span class="string">&#x27;#app&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/index.js 用Ionic提供的vue-router替换原本的vue-router</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue-router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  <span class="comment">// routes go here</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(process.env.BASE_URL),</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务 main.js</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">From here, you can learn about how to develop <span class="keyword">with</span> Ionic Framework <span class="keyword">in</span> our [Ionic Vue Quickstart Guide](https:<span class="comment">//ionicframework.com/docs/vue/quickstart).</span></span><br><span class="line"></span><br><span class="line">## Ionicons CDN</span><br><span class="line"></span><br><span class="line">Ionicons is packaged by <span class="keyword">default</span> <span class="keyword">with</span> the Ionic Framework, so no installation is necessary <span class="keyword">if</span> you<span class="string">&#x27;re using Ionic. To use Ionicons without Ionic Framework, place the following `&lt;script&gt;` near the end of your page, right before the closing `&lt;/body&gt;` tag.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script nomodule src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br></pre></td></tr></table></figure>
+
+
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2020/11/11/learn-ionic-1/">从零开始：学习Ionic（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月11日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2020/11/11/learn-ionic-1/" title="从零开始：学习Ionic（一）">https://blog.lifesli.com/2020/11/11/learn-ionic-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/11/learn-ionic-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Ionic/" rel="tag"># Ionic</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/11/10/learn-cordova-1/" rel="prev" title="从零开始：学习Cordova（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Cordova（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="next" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Ionic-%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">Ionic 简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#StepByStep-%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.1.</span> <span class="nav-text">StepByStep 创建工程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%91%E5%AF%BC%E5%BC%8F%EF%BC%88App-Wizard%EF%BC%89%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">向导式（App Wizard）创建工程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0"><span class="nav-number">4.</span> <span class="nav-text">深入学习</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Ionic-CLI"><span class="nav-number">4.1.</span> <span class="nav-text">Ionic CLI</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2020/11/11/learn-ionic-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/11/learn-ionic-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/11/learn-ionic-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '14783da363eff35eb9b5be49fc63f514',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html" "b/en/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..e9bbe5014a
--- /dev/null
+++ "b/en/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+<meta property="og:url" content="https://blog.lifesli.com/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2021-05-08T08:03:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode插件">
+<meta property="article:tag" content="path-intellisense">
+<meta property="article:tag" content="路径别名">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<h3 id="场景："><a href="#场景：" class="headerlink" title="场景："></a>场景：</h3><p>前端开发我们通常使用VSCode，使用时常见有一个常见的场景：</p>
+<blockquote>
+<p>引入一个文件、图片等</p>
+</blockquote>
+<p>如果不利用VSCode的插件，我们通常会写相对路径或者绝对路径，但为了方便写代码，我们通常会利用工具来帮助我们减轻负担，这种情况就引入了今天的主角，VSCode下的插件<strong>path-intellisense</strong>，是的，有了它编辑器就会聪明的自动帮我们提示出文件在什么地方，这的确方便了我们。</p>
+<p>但是，在Vue开发过程中，或者说是利用Webpack作为构建工具时我们通常会定义一个变量如：<code>@</code> 来简化路径的书写，使代码变得简洁美观，这里的<code>@</code>，我们称之为 <strong>路径别名</strong> ，这也是Vue官方十分推荐使用的，但因为路径别名的使用，原来的智能提示路径的插件就会无法正常工作，因为工作中确实遇到了这样的坑，所以简单的写个文记录一下。</p>
+<h3 id="问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示"><a href="#问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示" class="headerlink" title="问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示"></a>问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</h3><p>这个问题其实比较容易理解，因为路径别名是Webpack构建时使用的，并不是VSCode原生支持的功能，所以它并不认识<code>@</code>，这是个什么，所以解决思路就是告诉VSCode <code>@</code> 是个什么就好了，专业一点说的话就是加上映射关系</p>
+<h4 id="解决步骤"><a href="#解决步骤" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>打开path-intellisense插件的setting</li>
+<li>找到Mapping配置项</li>
+<li>加以下代码<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;path-intellisense.mappings&quot;: &#123;</span><br><span class="line">      &quot;@&quot;: &quot;$&#123;workspaceRoot&#125;/src&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启插件搞定！</li>
+</ol>
+<h3 id="问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"><a href="#问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。" class="headerlink" title="问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"></a>问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</h3><p>第二个问题提出时，可能会有人有疑问，上面不是配置完映射关系了嘛，为什么还有下面的问题呢，其实你要是不问，我也有这个问题，上一步操作实际上是告诉了path-intellisense插件该怎么解析<code>@</code>这个东西，但是VSCode并不知道啊，但是Ctrl + 鼠标左键的动作又是VSCode负责的事，所以我们也要告诉一下编辑器该如何应对上面的情况，说到这里大家应该就理解了</p>
+<h4 id="解决步骤-1"><a href="#解决步骤-1" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>在项目package.json所在同级目录下创建文件jsconfig.json（这是VSCode的一个可选配置）</li>
+<li>在jsconfig.json增加如下配置<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;target&quot;</span>: <span class="string">&quot;ES6&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;module&quot;</span>: <span class="string">&quot;commonjs&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;allowSyntheticDefaultImports&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;paths&quot;</span>: &#123;</span><br><span class="line">          <span class="attr">&quot;@/*&quot;</span>: [<span class="string">&quot;src/*&quot;</span>] <span class="comment">// 这里是关键代码</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;exclude&quot;</span>: [</span><br><span class="line">        <span class="string">&quot;node_modules&quot;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启VSCode搞定！</li>
+</ol>
+<p>通过上面的解决方案，我们就可以愉快的使用VSCode进行前端开发了，你学废了吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月08日 - 08:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/VSCode%E6%8F%92%E4%BB%B6/" rel="tag"># VSCode插件</a>
+              <a href="/en/tags/path-intellisense/" rel="tag"># path-intellisense</a>
+              <a href="/en/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" rel="tag"># 路径别名</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2020/11/11/learn-ionic-1/" rel="prev" title="从零开始：学习Ionic（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Ionic（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="next" title="关于版本管理">
+      关于版本管理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%BA%E6%99%AF%EF%BC%9A"><span class="nav-number">1.1.</span> <span class="nav-text">场景：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%B8%80%EF%BC%9A%E5%9B%A0%E4%B8%BA%E4%BD%BF%E7%94%A8%E4%BA%86%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E5%AF%BC%E8%87%B4path-intellisense%E4%B8%8D%E8%83%BD%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA"><span class="nav-number">1.2.</span> <span class="nav-text">问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.2.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%BA%8C%EF%BC%9A%E6%88%91%E4%BB%AC%E5%B8%8C%E6%9C%9B-Ctrl-%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E7%82%B9%E5%87%BB%E4%B8%80%E4%B8%AA%E5%A4%96%E9%83%A8%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C%E8%83%BD%E5%A4%9F%E5%BF%AB%E9%80%9F%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%AF%B9%E5%BA%94%E7%9A%84%E5%A4%96%E9%83%A8%E6%96%87%E4%BB%B6%E3%80%82"><span class="nav-number">1.3.</span> <span class="nav-text">问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b2e8e30065993e0d72fbfbc88d91825f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html" "b/en/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
new file mode 100644
index 0000000000..ebd83cd7c8
--- /dev/null
+++ "b/en/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="关于版本管理">
+<meta property="og:url" content="https://blog.lifesli.com/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2021-05-13T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="SemVer">
+<meta property="article:tag" content="版本管理">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>关于版本管理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          关于版本管理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+<span id="more"></span>
+<h2 id="关于版本号的那些事"><a href="#关于版本号的那些事" class="headerlink" title="关于版本号的那些事"></a>关于版本号的那些事</h2><p>你会发现这些版本号通常是三部分构成的，像是‘X.Y.Z’的一种感觉，其实这是一种叫做<code>SemVer</code>的版本管理规范，下面我们就来讲讲<code>SemVer</code>。</p>
+<h3 id="SemVer-的生平"><a href="#SemVer-的生平" class="headerlink" title="SemVer 的生平"></a>SemVer 的生平</h3><p>语义化版本控制的规范是由 Gravatars 创办者兼 GitHub 共同创办者 Tom Preston-Werner 所建立。</p>
+<p>它的许可证是 知识共享 署名 3.0 (CC BY 3.0)  所以你可以不用付费直接使用它。</p>
+<p>关于它的更多描述你可以到下面的地址找到<br><a target="_blank" rel="noopener" href="https://semver.org/lang/zh-CN/">https://semver.org/lang/zh-CN/</a></p>
+<p>主要你要记住的是如下几句话：</p>
+<blockquote>
+<p>版本格式：主版本号.次版本号.修订号，版本号递增规则如下：</p>
+<p>主版本号：当你做了不兼容的 API 修改，<br>次版本号：当你做了向下兼容的功能性新增，<br>修订号：当你做了向下兼容的问题修正。<br>先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。</p>
+</blockquote>
+<p>更多的内容的话，请到官网查看吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">关于版本管理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月13日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" title="关于版本管理">https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/SemVer/" rel="tag"># SemVer</a>
+              <a href="/en/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="tag"># 版本管理</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="prev" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      <i class="fa fa-chevron-left"></i> VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="next" title="数组方法哪些有副作用，一目了然！">
+      数组方法哪些有副作用，一目了然！ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E5%8F%B7%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B"><span class="nav-number">1.1.</span> <span class="nav-text">关于版本号的那些事</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SemVer-%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">1.1.1.</span> <span class="nav-text">SemVer 的生平</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c46de69ebcbf868a013e35aee8671932',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/03/11/\346\220\236\346\207\202EventLoop/index.html" "b/en/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
new file mode 100644
index 0000000000..a0ccb49939
--- /dev/null
+++ "b/en/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搞懂EventLoop">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="article:published_time" content="2022-03-11T08:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="EventLoop">
+<meta property="article:tag" content="事件驱动">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>搞懂EventLoop | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搞懂EventLoop
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+<span id="more"></span>
+
+<h2 id="浏览器的事件循环"><a href="#浏览器的事件循环" class="headerlink" title="浏览器的事件循环"></a>浏览器的事件循环</h2><p>首先我们要知道，浏览器的事件循环是有这么两个部分构成，一个叫做主线程（main thread），另一个叫做调用栈（call-stack），所有的任务（Task）都会被放到调用栈里，等待主线程调用，这个怎么理解呢，打个比方，主线程就像是物流配送中的传送带，如果没有快递往上放的时候，它是空的，当有快递包裹放上去的时候，它就开始运行，而你购买的产品要放倒包裹里，然后包裹在放到传送带上，最终被送到你家里，这里的传送带就是主线程，包裹就是调用栈，而购买的产品就是任务，不知道这样解释是否能好理解一些。</p>
+<h3 id="同步、异步任务"><a href="#同步、异步任务" class="headerlink" title="同步、异步任务"></a>同步、异步任务</h3><p>JavaScript中的任务有两种，一种是同步任务，另一种是异步任务。</p>
+<ul>
+<li>同步任务会排着队，逐个执行</li>
+<li>异步任务在执行得到结果后，将回调函数添加到任务队列中，等着主线程空了再执行。</li>
+</ul>
+<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>栈，是一种数据结构，后进先出（LIFO），后入栈的先执行，执行完后出栈执行栈顶新的那个函数，直到栈空，像个瓶子，只有一头有口。</p>
+<h3 id="任务队列"><a href="#任务队列" class="headerlink" title="任务队列"></a>任务队列</h3><p>队列，也是一种数据结构，先进先出（FIFO），队头出，队尾进，先到先得，就像排队买东西，或者汽车排队过隧道。</p>
+<h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a>任务</h3><p>任务分为两种，一种叫做宏任务（MacroTask），另一种叫做微任务（MicroTask），首先他们都是<strong>异步队列</strong>中的任务，那它们之间是什么关系呢？简单说来就是微任务是VIP优先执行，全部微任务执行完之后才轮到普通用户宏任务执行，而且执行完一个后马上要看有没有新的微任务执行，有的话宏任务还得等着，就这样往复，看着像不像是在银行等着排队办业务的你（其实是我）。<br><img src="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg" alt="JavaScript的执行流程"><br><img src="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png" alt="宏任务与微任务"><br>那么哪些是宏任务，哪些是微任务呢？看下表吧。</p>
+<table>
+<thead>
+<tr>
+<th>宏任务</th>
+<th>微任务</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>setTimeout、setInterval、js主代码、setImmediate(Node)、requestAnimationFrame(浏览器)</td>
+<td>process.nextTick、Promise的then方法</td>
+</tr>
+</tbody></table>
+<h3 id="举个例子"><a href="#举个例子" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    resolve();</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h4 id="分析一下"><a href="#分析一下" class="headerlink" title="分析一下"></a>分析一下</h4><p>JS 运行机制为<strong>从上而下</strong>，那么这里的执行顺序应该是什么样的呢？</p>
+<h5 id="第一轮循环："><a href="#第一轮循环：" class="headerlink" title="第一轮循环："></a>第一轮循环：</h5><p>1）、首先打印 1<br>2）、接下来是setTimeout是异步任务且是宏任务，加入宏任务暂且记为 setTimeout1<br>3）、接下来是 process 微任务 加入微任务队列 记为 process1<br>4）、接下来是 new Promise 里面直接 resolve(7) 所以打印 7 后面的then是微任务 记为 then1<br>5）、setTimeout 宏任务 记为 setTimeout2</p>
+<blockquote>
+<p>第一轮循环打印出的是 1 7<br>当前宏任务队列：setTimeout1, setTimeout2<br>当前微任务队列：process1, then1,</p>
+</blockquote>
+<h5 id="第二轮循环："><a href="#第二轮循环：" class="headerlink" title="第二轮循环："></a>第二轮循环：</h5><p>1）、执行所有微任务<br>2）、执行process1，打印出 6<br>3）、执行then1 打印出8<br>4）、微任务都执行结束了，开始执行第一个宏任务<br>5）、执行 setTimeout1 也就是 第 3 - 14 行<br>6）、首先打印出 2<br>7）、遇到 process 微任务 记为 process2<br>8）、new Promise中resolve 打印出 4<br>9）、then 微任务 记为 then2</p>
+<blockquote>
+<p>第二轮循环结束，当前打印出来的是 1 7 6 8 2 4<br>当前宏任务队列：setTimeout2<br>当前微任务队列：process2, then2</p>
+</blockquote>
+<h5 id="第三轮循环："><a href="#第三轮循环：" class="headerlink" title="第三轮循环："></a>第三轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行 process2 打印出 3<br>3）、执行 then2 打印出 5<br>4）、执行第一个宏任务，也就是执行 setTimeout2 对应代码中的 25 - 36 行<br>5）、首先打印出 9<br>6）、process 微任务 记为 process3<br>7）、new Promise执行resolve 打印出 11<br>8）、then 微任务 记为 then3</p>
+<blockquote>
+<p>第三轮循环结束，当前打印顺序为：1 7 6 8 2 4 3 5 9 11<br>当前宏任务队列为空<br>当前微任务队列：process3，then3</p>
+</blockquote>
+<h5 id="第四轮循环："><a href="#第四轮循环：" class="headerlink" title="第四轮循环："></a>第四轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行process3 打印出 10<br>3）、执行then3 打印出 12</p>
+<p>代码执行结束：<br>最终打印顺序为：1 7 6 8 2 4 3 5 9 11 10 12</p>
+<h2 id="Node环境的循环机制"><a href="#Node环境的循环机制" class="headerlink" title="Node环境的循环机制"></a>Node环境的循环机制</h2><p>Node的Event loop一共分为<strong>6</strong>个阶段，每个细节具体如下：</p>
+<ul>
+<li><strong><code>timers</code></strong>: 执行setTimeout和setInterval中到期的callback。</li>
+<li><strong><code>pending callback</code></strong>: 上一轮循环中少数的callback会放在这一阶段执行。</li>
+<li><strong><code>idle, prepare</code></strong>: 仅在内部使用。</li>
+<li><strong><code>poll</code></strong>: 最重要的阶段，执行pending callback，在适当的情况下回阻塞在这个阶段。</li>
+<li><strong><code>check</code></strong>: 执行setImmediate(setImmediate()是将事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数)的callback。</li>
+<li><strong><code>close callbacks</code></strong>: 执行close事件的callback，例如socket.on(‘close’[,fn])或者http.server.on(‘close, fn)。</li>
+</ul>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="Node EventLoop"></p>
+<p>具体细节如下：</p>
+<h3 id="timers"><a href="#timers" class="headerlink" title="timers"></a>timers</h3><p>执行setTimeout和setInterval中到期的callback，执行这两者回调需要设置一个毫秒数，理论上来说，应该是时间一到就立即执行callback回调，但是由于system的调度可能会延时，达不到预期时间。<br>以下是官网文档解释的例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncOperation</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Assume this takes 95ms to complete</span></span><br><span class="line">  fs.readFile(<span class="string">&#x27;/path/to/file&#x27;</span>, callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> timeoutScheduled = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> delay = <span class="built_in">Date</span>.now() - timeoutScheduled;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;delay&#125;</span>ms have passed since I was scheduled`</span>);</span><br><span class="line">&#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// do someAsyncOperation which takes 95 ms to complete</span></span><br><span class="line">someAsyncOperation(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> startCallback = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line">  <span class="comment">// do something that will take 10ms...</span></span><br><span class="line">  <span class="keyword">while</span> (<span class="built_in">Date</span>.now() - startCallback &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    <span class="comment">// do nothing</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>当进入事件循环时，它有一个空队列（fs.readFile()尚未完成），因此定时器将等待剩余毫秒数，当到达95ms时，fs.readFile()完成读取文件并且其完成需要10毫秒的回调被添加到轮询队列并执行。<br>当回调结束时，队列中不再有回调，因此事件循环将看到已达到最快定时器的阈值，然后回到timers阶段以执行定时器的回调。<br>在此示例中，您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。</p>
+<h3 id="pending-callbacks"><a href="#pending-callbacks" class="headerlink" title="pending callbacks"></a>pending callbacks</h3><p>此阶段执行某些系统操作（例如TCP错误类型）的回调。 例如，如果TCP socket ECONNREFUSED在尝试connect时receives，则某些* nix系统希望等待报告错误。 这将在pending callbacks阶段执行。</p>
+<h3 id="poll"><a href="#poll" class="headerlink" title="poll"></a>poll</h3><p>该poll阶段有两个主要功能：</p>
+<ul>
+<li>执行I/O回调。</li>
+<li>处理轮询队列中的事件。</li>
+</ul>
+<p><strong>当事件循环进入poll阶段并且在timers中没有可以执行定时器时，将发生以下两种情况之一</strong><br>如果poll队列不为空，则事件循环将遍历其同步执行它们的callback队列，直到队列为空，或者达到system-dependent（系统相关限制）。</p>
+<p><strong>如果poll队列为空，则会发生以下两种情况之一</strong></p>
+<ul>
+<li>如果有setImmediate()回调需要执行，则会立即停止执行poll阶段并进入执行check阶段以执行回调。</li>
+<li>如果没有setImmediate()回到需要执行，poll阶段将等待callback被添加到队列中，然后立即执行。</li>
+</ul>
+<p><strong>当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。</strong></p>
+<h3 id="check"><a href="#check" class="headerlink" title="check"></a>check</h3><p>此阶段允许人员在poll阶段完成后立即执行回调。<br>如果poll阶段闲置并且script已排队setImmediate()，则事件循环到达check阶段执行而不是继续等待。<br>setImmediate()实际上是一个特殊的计时器，它在事件循环的一个单独阶段运行。它使用libuv API来调度在poll阶段完成后执行的回调。<br>通常，当代码被执行时，事件循环最终将达到poll阶段，它将等待传入连接，请求等。<br>但是，如果已经调度了回调setImmediate()，并且轮询阶段变为空闲，则它将结束并且到达check阶段，而不是等待poll事件。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;start&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer1&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise1&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer2&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise2&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;promise3&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;end&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>如果Node版本是v11.x，那么执行结果和浏览器一致，结果如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>如果是v10版本上，那结果将会出现两种情况<br><strong>如果time2定时器已经在执行队列中了</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">timer2</span><br><span class="line">promise1</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p><strong>如果time2定时器没有在执行对列中，执行结果为</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>具体情况可以参考poll阶段的两种情况。</p>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="NodeEventLoop"></p>
+<h2 id="setImmediate-的setTimeout-的区别"><a href="#setImmediate-的setTimeout-的区别" class="headerlink" title="setImmediate() 的setTimeout()的区别"></a>setImmediate() 的setTimeout()的区别</h2><p><strong>setImmediate和setTimeout()是相似的，但根据它们被调用的时间以不同的方式表现。</strong></p>
+<ul>
+<li>setImmediate()设计用于在当前poll阶段完成后check阶段执行脚本 。</li>
+<li>setTimeout() 安排在经过最小（ms）后运行的脚本，在timers阶段执行。</li>
+</ul>
+<h3 id="举个例子-1"><a href="#举个例子-1" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p><strong>执行定时器的顺序将根据调用它们的上下文而有所不同。 如果从主模块中调用两者，那么时间将受到进程性能的限制。</strong><br><strong>其结果也不一致</strong></p>
+<p><strong>如果在I / O周期内移动两个调用，则始终首先执行立即回调：</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readFile(__filename, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line">  setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>其结果可以确定一定是immediate =&gt; timeout。<br>主要原因是在I/O阶段读取文件后，事件循环会先进入poll阶段，发现有setImmediate需要执行，会立即进入check阶段执行setImmediate的回调。<br>然后再进入timers阶段，执行setTimeout，打印timeout。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">   ┌───────────────────────────┐</span><br><span class="line">┌─&gt;│           timers          │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │     pending callbacks     │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │       idle, prepare       │</span><br><span class="line">│  └─────────────┬─────────────┘      ┌───────────────┐</span><br><span class="line">│  ┌─────────────┴─────────────┐      │   incoming:   │</span><br><span class="line">│  │           poll            │&lt;─────┤  connections, │</span><br><span class="line">│  └─────────────┬─────────────┘      │   data, etc.  │</span><br><span class="line">│  ┌─────────────┴─────────────┐      └───────────────┘</span><br><span class="line">│  │           check           │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">└──┤      close callbacks      │</span><br><span class="line">   └───────────────────────────┘</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="Process-nextTick"><a href="#Process-nextTick" class="headerlink" title="Process.nextTick()"></a>Process.nextTick()</h2><p>process.nextTick()虽然它是异步API的一部分，但未在图中显示。这是因为process.nextTick()从技术上讲，它不是事件循环的一部分。</p>
+<p>process.nextTick()方法将 callback 添加到next tick队列。 一旦当前事件轮询队列的任务全部完成，在next tick队列中的所有callbacks会被依次调用。</p>
+<p>换种理解方式：</p>
+<p><strong>当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。</strong></p>
+<h3 id="举个例子-2"><a href="#举个例子-2" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> bar;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setTimeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setImmediate&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncApiCall</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  process.nextTick(callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">someAsyncApiCall(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;bar&#x27;</span>, bar); <span class="comment">// 1</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">bar = <span class="number">1</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>在NodeV10中上述代码执行可能有两种答案，一种为：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line">setImmediate</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>另一种为</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line">setImmediate</span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>无论哪种，始终都是先执行process.nextTick(callback)，打印bar 1。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">搞懂EventLoop</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 08:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" title="搞懂EventLoop">https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/EventLoop/" rel="tag"># EventLoop</a>
+              <a href="/en/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" rel="tag"># 事件驱动</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="prev" title="数组方法哪些有副作用，一目了然！">
+      <i class="fa fa-chevron-left"></i> 数组方法哪些有副作用，一目了然！
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="next" title="前端开发插件">
+      前端开发插件 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器的事件循环</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5%E3%80%81%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">同步、异步任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E6%A0%88"><span class="nav-number">1.1.2.</span> <span class="nav-text">调用栈</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97"><span class="nav-number">1.1.3.</span> <span class="nav-text">任务队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.4.</span> <span class="nav-text">任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90"><span class="nav-number">1.1.5.</span> <span class="nav-text">举个例子</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%86%E6%9E%90%E4%B8%80%E4%B8%8B"><span class="nav-number">1.1.5.1.</span> <span class="nav-text">分析一下</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.1.</span> <span class="nav-text">第一轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.2.</span> <span class="nav-text">第二轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.3.</span> <span class="nav-text">第三轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.4.</span> <span class="nav-text">第四轮循环：</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Node%E7%8E%AF%E5%A2%83%E7%9A%84%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">Node环境的循环机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#timers"><span class="nav-number">1.2.1.</span> <span class="nav-text">timers</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#pending-callbacks"><span class="nav-number">1.2.2.</span> <span class="nav-text">pending callbacks</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#poll"><span class="nav-number">1.2.3.</span> <span class="nav-text">poll</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#check"><span class="nav-number">1.2.4.</span> <span class="nav-text">check</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setImmediate-%E7%9A%84setTimeout-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.3.</span> <span class="nav-text">setImmediate() 的setTimeout()的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Process-nextTick"><span class="nav-number">1.4.</span> <span class="nav-text">Process.nextTick()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-2"><span class="nav-number">1.4.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4c0b019331b8f624445898903a038300',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html" "b/en/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
new file mode 100644
index 0000000000..4ea8ef7811
--- /dev/null
+++ "b/en/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
@@ -0,0 +1,785 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组方法哪些有副作用，一目了然！">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-03-11T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="数组">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>数组方法哪些有副作用，一目了然！ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组方法哪些有副作用，一目了然！
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+<span id="more"></span>
+<h2 id="关于数组的那些方法"><a href="#关于数组的那些方法" class="headerlink" title="关于数组的那些方法"></a>关于数组的那些方法</h2><p>其实上面的问题：</p>
+<blockquote>
+<p>数组有哪些方法会改变原来的值</p>
+</blockquote>
+<p>现在有个词挺火的，叫做纯函数，什么是纯函数呢，就是没有副作用，什么是没有副作用呢，就是结果是幂等的，等等….怎么越来越绕，简单来说，就是这个函数干几次都是一样的结果，出了函数就不会有任何影响，他就像一台加工机器，输入原料，输出产品，没有任何其他输出材料，比如废气之类影响大气的东西。好吧，你不明白也没关系，反正我对上面这个问题的理解就变成了</p>
+<blockquote>
+<p>数组的哪些方法是没有副作用的。</p>
+</blockquote>
+<p>要说有哪些方法是有副作用，首先你得知道有哪些方法，</p>
+<p>比如，push，pop，shift，unshift，splice 这些别跟我说你不知道，这些都是常用的数组操作，出栈入栈，<br>还有什么呢，数组的排序啊，比如sort，reverse，还有一个用的不多，fill是用一个固定值填充数组的起始元素到终止元素，这些呢都是在原数组上进行操作，所以肯定是影响数组的值的，也就是说有副作用的。</p>
+<p>那么哪些没有副作用呢，简单说其他的都没有，<br>啥！？，是的，其他的都没有。。。所以记得上面这些就好了呀，怎么样，是不简单。</p>
+<p>那还剩下啥？</p>
+<ul>
+<li>concat 返回的是心数组，</li>
+<li>join 返回的是字符串，</li>
+<li>indexOf和lastIndexOf返回的是索引，</li>
+<li>slice 返回的是切割后的新数组，别把它和splice混淆了哈，</li>
+<li>entries 返回一个新的Array Iterator对象，</li>
+<li>keys 返回一个新的包含全部Array索引的 Iterator对象，</li>
+<li>values 有keys就有values，返回一个新的包含全部Array值的 Iterator对象，</li>
+<li>every、some、includes 返回 布尔值，</li>
+<li>filter，map 返回新数组，</li>
+<li>reducer 有点神奇 返回累加值，</li>
+<li>find、findIndex 找元素 一个返回第一个符合的元素本身，一个返回他的索引，</li>
+<li>最后还有个flat，展平了数组，</li>
+<li>forEach 遍历数组， 这么一数起来，方法还真不少呢！</li>
+</ul>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>想要记住所有的方法呢，不下点功夫是不行的，但是想要记住有副作用的，然后排除掉他们的话，还是容易的，最后做个表，方便直观的来看。</p>
+<table>
+<thead>
+<tr>
+<th>方法</th>
+<th>作用</th>
+<th>返回结果</th>
+<th>有无副作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>push</td>
+<td>数组尾部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>pop</td>
+<td>数组尾部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>shift</td>
+<td>数组头部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>unshift</td>
+<td>数组头部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>splice</td>
+<td>增删改数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>sort</td>
+<td>数组排序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>reverse</td>
+<td>数组反序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>填充数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>concat</td>
+<td>连结数组</td>
+<td>合并的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>join</td>
+<td>合并数组为字符串</td>
+<td>字符串</td>
+<td>无</td>
+</tr>
+<tr>
+<td>indexOf</td>
+<td>查索引</td>
+<td>第一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>lastIndexOf</td>
+<td>查索引</td>
+<td>最后一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>slice</td>
+<td>截取数组</td>
+<td>截取的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>entries</td>
+<td>迭代数组</td>
+<td>迭代器对象</td>
+<td>无</td>
+</tr>
+<tr>
+<td>keys</td>
+<td>迭代数组的key</td>
+<td>全部的key</td>
+<td>无</td>
+</tr>
+<tr>
+<td>values</td>
+<td>迭代数组的value</td>
+<td>全部的value</td>
+<td>无</td>
+</tr>
+<tr>
+<td>every</td>
+<td>每个都满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>some</td>
+<td>有一些满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>includes</td>
+<td>包含某元素</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>filter</td>
+<td>过滤数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>map</td>
+<td>加工数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>reducer</td>
+<td>迭代数组</td>
+<td>累加值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>find</td>
+<td>查找元素</td>
+<td>第一个元素或undifined</td>
+<td>无</td>
+</tr>
+<tr>
+<td>findIndex</td>
+<td>查找元素</td>
+<td>第一个元素的index</td>
+<td>无</td>
+</tr>
+<tr>
+<td>flat</td>
+<td>展平数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>forEach</td>
+<td>遍历数组</td>
+<td>void</td>
+<td>无</td>
+</tr>
+</tbody></table>
+<p>就到这里，怎么样，清楚了吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">数组方法哪些有副作用，一目了然！</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" title="数组方法哪些有副作用，一目了然！">https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/en/tags/%E6%95%B0%E7%BB%84/" rel="tag"># 数组</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="prev" title="关于版本管理">
+      <i class="fa fa-chevron-left"></i> 关于版本管理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="next" title="搞懂EventLoop">
+      搞懂EventLoop <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%95%B0%E7%BB%84%E7%9A%84%E9%82%A3%E4%BA%9B%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">关于数组的那些方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.2.</span> <span class="nav-text">总结</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'db78d1426f603a30e18b6b2eaa8d1437',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html" "b/en/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..ab1881e083
--- /dev/null
+++ "b/en/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CodeReview代码审查指南.md">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CodeReview">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>CodeReview代码审查指南.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CodeReview代码审查指南.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">CodeReview代码审查指南.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" title="CodeReview代码审查指南.md">https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/CodeReview/" rel="tag"># CodeReview</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="prev" title="前后端分离开发规范">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发规范
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="next" title="Restful API 的设计规范.md">
+      Restful API 的设计规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%EF%BC%8E%E5%85%B3%E4%BA%8ECode-Review"><span class="nav-number">1.</span> <span class="nav-text">1．关于Code Review</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-Code-Review%E7%9A%84%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.</span> <span class="nav-text">1.1 Code Review的目的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-Code-Review%E7%9A%84%E5%89%8D%E6%8F%90"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 Code Review的前提</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-Code-Review%E9%9C%80%E8%A6%81%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">1.3.</span> <span class="nav-text">1.3 Code Review需要做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-1-%E5%AE%8C%E6%95%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Completeness%EF%BC%89"><span class="nav-number">1.3.1.</span> <span class="nav-text">1.3.1  完整性检查（Completeness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-2-%E4%B8%80%E8%87%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Consistency%EF%BC%89"><span class="nav-number">1.3.2.</span> <span class="nav-text">1.3.2  一致性检查（Consistency）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-3-%E6%AD%A3%E7%A1%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Correctness%EF%BC%89"><span class="nav-number">1.3.3.</span> <span class="nav-text">1.3.3  正确性检查（Correctness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-4-%E5%8F%AF%E4%BF%AE%E6%94%B9%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Modifiability%EF%BC%89"><span class="nav-number">1.3.4.</span> <span class="nav-text">1.3.4  可修改性检查（Modifiability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-5-%E5%8F%AF%E9%A2%84%E6%B5%8B%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Predictability%EF%BC%89"><span class="nav-number">1.3.5.</span> <span class="nav-text">1.3.5  可预测性检查（Predictability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-6-%E5%81%A5%E5%A3%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Robustness%EF%BC%89"><span class="nav-number">1.3.6.</span> <span class="nav-text">1.3.6  健壮性检查（Robustness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-7-%E7%BB%93%E6%9E%84%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Structuredness%EF%BC%89"><span class="nav-number">1.3.7.</span> <span class="nav-text">1.3.7  结构性检查（Structuredness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-8-%E5%8F%AF%E8%BF%BD%E6%BA%AF%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Traceability%EF%BC%89"><span class="nav-number">1.3.8.</span> <span class="nav-text">1.3.8  可追溯性检查（Traceability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-9-%E5%8F%AF%E7%90%86%E8%A7%A3%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Understandability%EF%BC%89"><span class="nav-number">1.3.9.</span> <span class="nav-text">1.3.9  可理解性检查（Understandability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-10-%E5%8F%AF%E9%AA%8C%E8%AF%81%E6%80%A7%E6%A3%80%E6%9F%A5-Verifiability"><span class="nav-number">1.3.10.</span> <span class="nav-text">1.3.10 可验证性检查(Verifiability)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-Code-Review%E7%9A%84%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">1.4  Code Review的步骤</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%EF%BC%8ECode-Reivew%E7%9A%84%E6%89%A7%E8%A1%8C"><span class="nav-number">2.</span> <span class="nav-text">2．Code Reivew的执行</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1%EF%BC%8E%E4%BA%8B%E5%89%8D%E5%87%86%E5%A4%87%E9%98%B6%E6%AE%B5"><span class="nav-number">2.1.</span> <span class="nav-text">2.1．事前准备阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-1%EF%BC%8ECR%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.1.1.</span> <span class="nav-text">2.1.1．CR的对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-2%EF%BC%8ECR%E7%9A%84%E5%86%85%E5%AE%B9"><span class="nav-number">2.1.2.</span> <span class="nav-text">2.1.2．CR的内容</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-3%EF%BC%8E%E8%AF%84%E5%AE%A1%E8%A7%84%E8%8C%83%E5%92%8C%E6%A0%87%E5%87%86"><span class="nav-number">2.1.3.</span> <span class="nav-text">2.1.3．评审规范和标准</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-4%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%8F%82%E4%B8%8E%E8%80%85"><span class="nav-number">2.1.4.</span> <span class="nav-text">2.1.4．选择CR活动的参与者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-5%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%AE%9E%E6%96%BD%E6%96%B9%E5%BC%8F%E3%80%82"><span class="nav-number">2.1.5.</span> <span class="nav-text">2.1.5．选择CR活动的实施方式。</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2%EF%BC%8E%E5%AE%9E%E6%96%BD%E9%98%B6%E6%AE%B5"><span class="nav-number">2.2.</span> <span class="nav-text">2.2．实施阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-1%EF%BC%8E%E5%87%86%E7%A1%AE%E8%AE%B0%E5%BD%95"><span class="nav-number">2.2.1.</span> <span class="nav-text">2.2.1．准确记录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-2%EF%BC%8E%E8%AE%B2%E8%A7%A3%E4%B8%8E%E6%8F%90%E9%97%AE"><span class="nav-number">2.2.2.</span> <span class="nav-text">2.2.2．讲解与提问</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-3%EF%BC%8E%E9%80%90%E9%A1%B9%E5%AE%A1%E6%9F%A5"><span class="nav-number">2.2.3.</span> <span class="nav-text">2.2.3．逐项审查</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-4%EF%BC%8E%E6%B3%A8%E6%84%8F%E6%B0%94%E6%B0%9B"><span class="nav-number">2.2.4.</span> <span class="nav-text">2.2.4．注意气氛</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E4%BA%8B%E5%90%8E%E8%B7%9F%E8%B8%AA%E8%B7%9F%E8%B8%AA%E3%80%82"><span class="nav-number">2.3.</span> <span class="nav-text">2.3. 事后跟踪跟踪。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-1-%E7%A1%AE%E8%AE%A4%E5%8F%91%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">2.3.1.</span> <span class="nav-text">2.3.1. 确认发现的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-2-%E4%BF%AE%E6%AD%A3%E9%97%AE%E9%A2%98%E8%B4%A3%E4%BB%BB%E8%80%85"><span class="nav-number">2.3.2.</span> <span class="nav-text">2.3.2. 修正问题责任者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-3-%E4%BF%AE%E6%AD%A3%E7%BB%93%E6%9E%9C%E7%A1%AE%E8%AE%A4%E8%80%85"><span class="nav-number">2.3.3.</span> <span class="nav-text">2.3.3. 修正结果确认者</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%EF%BC%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">3．注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%BB%8F%E5%B8%B8%E8%BF%9B%E8%A1%8CCode-Review"><span class="nav-number">3.1.</span> <span class="nav-text">3.1. 经常进行Code Review</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-Code-Review%E4%B8%8D%E8%A6%81%E5%A4%AA%E6%AD%A3%E5%BC%8F%EF%BC%8C%E8%80%8C%E4%B8%94%E8%A6%81%E7%9F%AD"><span class="nav-number">3.2.</span> <span class="nav-text">3.2.  Code Review不要太正式，而且要短</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%B0%BD%E5%8F%AF%E8%83%BD%E7%9A%84%E8%AE%A9%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BA%BAReivew%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">3.3.</span> <span class="nav-text">3.3. 尽可能的让不同的人Reivew你的代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-%E4%BF%9D%E6%8C%81%E7%A7%AF%E6%9E%81%E7%9A%84%E6%AD%A3%E9%9D%A2%E7%9A%84%E6%80%81%E5%BA%A6"><span class="nav-number">3.4.</span> <span class="nav-text">3.4. 保持积极的正面的态度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-5-%E5%AD%A6%E4%BC%9A%E4%BA%AB%E5%8F%97Code-Reivew"><span class="nav-number">3.5.</span> <span class="nav-text">3.5. 学会享受Code Reivew</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B5%84%E6%96%99%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">资料来源</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c924b0e12619cc62fc9f8f6b6c449efb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html" "b/en/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..a448b46329
--- /dev/null
+++ "b/en/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Electron编码规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Electron编码规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Electron编码规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">Electron编码规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" title="Electron编码规范.md">https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/squid/" rel="prev" title="Squid 服务器学习笔记">
+      <i class="fa fa-chevron-left"></i> Squid 服务器学习笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="next" title="前后端分离开发指南">
+      前后端分离开发指南 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '99afda0593c714fd1c1e3a98bbbc8a52',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/06/01/GIT Standard/index.html b/en/2022/06/01/GIT Standard/index.html
new file mode 100644
index 0000000000..e5db7a091b
--- /dev/null
+++ b/en/2022/06/01/GIT Standard/index.html	
@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:type" content="article">
+<meta property="og:title" content="GIT Standard.md">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/GIT%20Standard/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GIT">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/GIT%20Standard/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>GIT Standard.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          GIT Standard.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/GIT%20Standard/">GIT Standard.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/GIT%20Standard/" title="GIT Standard.md">https://blog.lifesli.com/2022/06/01/GIT%20Standard/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/GIT%20Standard/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/GIT/" rel="tag"># GIT</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="prev" title="Restful API 的设计规范.md">
+      <i class="fa fa-chevron-left"></i> Restful API 的设计规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/DockerFile/" rel="next" title="DockerFile">
+      DockerFile <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E3%80%81%E8%AF%B4%E6%98%8E"><span class="nav-number">1.</span> <span class="nav-text">1、说明</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%E3%80%81git-commit-message-%E8%A7%84%E8%8C%83"><span class="nav-number">2.</span> <span class="nav-text">2、git commit message 规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commit-message%E6%A0%BC%E5%BC%8F"><span class="nav-number">2.1.</span> <span class="nav-text">commit message格式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#type-%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.2.</span> <span class="nav-text">type 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#scope-%E5%BD%B1%E5%93%8D%E8%8C%83%E5%9B%B4"><span class="nav-number">2.3.</span> <span class="nav-text">scope 影响范围</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#subject-%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.4.</span> <span class="nav-text">subject 描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#body-%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.5.</span> <span class="nav-text">body 详细描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#footer"><span class="nav-number">2.6.</span> <span class="nav-text">footer</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%E3%80%81%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7%E6%A0%A1%E9%AA%8Ccommit%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88%E8%A7%84%E8%8C%83"><span class="nav-number">3.</span> <span class="nav-text">3、使用工具校验commit是否符合规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commitlint"><span class="nav-number">3.1.</span> <span class="nav-text">commitlint</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-commitlint%E5%AE%89%E8%A3%85"><span class="nav-number">3.1.1.</span> <span class="nav-text">3.1 commitlint安装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%94%9F%E6%88%90commitlint-config-js%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 生成commitlint.config.js配置文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%9C%A8commitlint-config-js%E5%88%B6%E5%AE%9A%E6%8F%90%E4%BA%A4message%E8%A7%84%E8%8C%83"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 在commitlint.config.js制定提交message规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#husky"><span class="nav-number">3.4.</span> <span class="nav-text">husky</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-husky%E5%AE%89%E8%A3%85"><span class="nav-number">3.4.1.</span> <span class="nav-text">3.4 husky安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E9%85%8D%E7%BD%AE"><span class="nav-number">3.4.2.</span> <span class="nav-text">3.5 husky 配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E6%89%A7%E8%A1%8C%E6%B5%8B%E8%AF%95"><span class="nav-number">3.4.3.</span> <span class="nav-text">3.5 husky 执行测试</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">5.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/GIT%20Standard/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/GIT%20Standard/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/GIT%20Standard/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ce85ece7124706bead5be0c45b1e25a3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html" "b/en/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..c853ac96db
--- /dev/null
+++ "b/en/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"	
@@ -0,0 +1,823 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Restful API 的设计规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Restful API">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Restful API 的设计规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Restful API 的设计规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">Restful API 的设计规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" title="Restful API 的设计规范.md">https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Restful-API/" rel="tag"># Restful API</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="prev" title="CodeReview代码审查指南.md">
+      <i class="fa fa-chevron-left"></i> CodeReview代码审查指南.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/GIT%20Standard/" rel="next" title="GIT Standard.md">
+      GIT Standard.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-URI"><span class="nav-number">1.</span> <span class="nav-text">1. URI</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E8%A7%84%E8%8C%83"><span class="nav-number">1.1.</span> <span class="nav-text">URI规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88-vs-%E5%8D%95%E4%B8%AA%E8%B5%84%E6%BA%90"><span class="nav-number">1.2.</span> <span class="nav-text">资源集合 vs 单个资源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%B1%82%E7%BA%A7%E8%BF%87%E6%B7%B1%E7%9A%84URI"><span class="nav-number">1.3.</span> <span class="nav-text">避免层级过深的URI</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9Composite%E8%B5%84%E6%BA%90%E7%9A%84%E8%AE%BF%E9%97%AE"><span class="nav-number">1.4.</span> <span class="nav-text">对Composite资源的访问</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-Request"><span class="nav-number">2.</span> <span class="nav-text">2. Request</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">HTTP方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E5%85%A8%E6%80%A7%E5%92%8C%E5%B9%82%E7%AD%89%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">安全性和幂等性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%8D%E6%9D%82%E6%9F%A5%E8%AF%A2"><span class="nav-number">2.3.</span> <span class="nav-text">复杂查询</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Bookmarker"><span class="nav-number">2.4.</span> <span class="nav-text">Bookmarker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Format"><span class="nav-number">2.5.</span> <span class="nav-text">Format</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-Response"><span class="nav-number">3.</span> <span class="nav-text">6. Response</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%86%E9%A1%B5response"><span class="nav-number">3.1.</span> <span class="nav-text">分页response</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="nav-number">4.</span> <span class="nav-text">7. 错误处理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E6%9C%8D%E5%8A%A1%E5%9E%8B%E8%B5%84%E6%BA%90"><span class="nav-number">5.</span> <span class="nav-text">8. 服务型资源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">6.</span> <span class="nav-text">9. 异步任务</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-API%E7%9A%84%E6%BC%94%E8%BF%9B"><span class="nav-number">7.</span> <span class="nav-text">10. API的演进</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%89%88%E6%9C%AC"><span class="nav-number">7.1.</span> <span class="nav-text">版本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E5%A4%B1%E6%95%88"><span class="nav-number">7.2.</span> <span class="nav-text">URI失效</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#11-%E5%AE%89%E5%85%A8"><span class="nav-number">8.</span> <span class="nav-text">11. 安全</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="nav-number">9.</span> <span class="nav-text">参考文档</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '87a803ec8807b6c7c829e15dfc89d222',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/06/01/squid/index.html b/en/2022/06/01/squid/index.html
new file mode 100644
index 0000000000..8dd43c1d30
--- /dev/null
+++ b/en/2022/06/01/squid/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Squid 服务器学习笔记">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Squid">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Squid 服务器学习笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Squid 服务器学习笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/squid/">Squid 服务器学习笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/squid/" title="Squid 服务器学习笔记">https://blog.lifesli.com/2022/06/01/squid/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/squid/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Squid/" rel="tag"># Squid</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="prev" title="前端开发插件">
+      <i class="fa fa-chevron-left"></i> 前端开发插件
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="next" title="Electron编码规范.md">
+      Electron编码规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0"><span class="nav-number">1.</span> <span class="nav-text">Squid 服务器学习笔记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.1.</span> <span class="nav-text">Squid 服务器介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.</span> <span class="nav-text">代理方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.3.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.</span> <span class="nav-text">配置文件</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/squid/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/squid/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/squid/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ca7fe19740e9a82c32028c1decb39305',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html" "b/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..f7a186c473
--- /dev/null
+++ "b/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发指南">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发指南">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前后端分离开发指南 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发指南
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">前后端分离开发指南</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" title="前后端分离开发指南">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="tag"># 前后端分离开发指南</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="prev" title="Electron编码规范.md">
+      <i class="fa fa-chevron-left"></i> Electron编码规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="next" title="前后端分离开发规范">
+      前后端分离开发规范 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF"><span class="nav-number">1.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%A4%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">认识</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E8%A7%A3"><span class="nav-number">3.</span> <span class="nav-text">分解</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%BA%A4%E4%BA%92%E5%BD%A2%E5%BC%8F"><span class="nav-number">3.1.</span> <span class="nav-text">一、交互形式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F-%E6%B5%81%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">二、开发模式&#x2F;流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87%E6%96%B9%E5%BC%8F"><span class="nav-number">3.3.</span> <span class="nav-text">三、代码组织方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%E8%A7%84%E8%8C%83%E6%B5%81%E7%A8%8B"><span class="nav-number">3.4.</span> <span class="nav-text">四、数据接口规范流程</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E7%A6%BB%E5%90%8E%E7%9A%84%E6%94%B6%E7%9B%8A"><span class="nav-number">4.</span> <span class="nav-text">分离后的收益</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">5.</span> <span class="nav-text">注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E8%AF%AF%E5%8C%BA"><span class="nav-number">5.1.</span> <span class="nav-text">前后端分离误区</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">5.2.</span> <span class="nav-text">前后端分离适用场景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.</span> <span class="nav-text">前后端分离具体方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%BB%E4%BD%93%E6%96%B9%E5%90%91"><span class="nav-number">5.3.1.</span> <span class="nav-text">总体方向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%89%8B%E6%AE%B5"><span class="nav-number">5.3.2.</span> <span class="nav-text">技术手段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.3.</span> <span class="nav-text">部署方案</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88%E6%AF%94%E8%BE%83"><span class="nav-number">5.3.3.1.</span> <span class="nav-text">前后端分离部署方案比较</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">6.</span> <span class="nav-text">结语</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">7.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">8.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6e50aecacaeaab3d5f765b63ec317b46',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..7d869a4cf2
--- /dev/null
+++ "b/en/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发规范">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发规范">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前后端分离开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发规范
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前后端分离开发规范</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" title="前后端分离开发规范">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="tag"># 前后端分离开发规范</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="prev" title="前后端分离开发指南">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发指南
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="next" title="CodeReview代码审查指南.md">
+      CodeReview代码审查指南.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83"><span class="nav-number">1.</span> <span class="nav-text">前后端分离开发规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB"><span class="nav-number">1.1.</span> <span class="nav-text">一、为什么要前后端分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.2.</span> <span class="nav-text">二、前后端分离存在的问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E5%A6%82%E4%BD%95%E5%81%9A%E5%88%86%E7%A6%BB"><span class="nav-number">1.3.</span> <span class="nav-text">三、如何做分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E5%9F%BA%E6%9C%AC%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.</span> <span class="nav-text">四、基本格式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%A5%E5%8F%A3%E5%AE%9A%E4%B9%89%E5%8F%82%E8%A7%81%E3%80%8ARESTFul-API%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83%E3%80%8B"><span class="nav-number">1.4.1.</span> <span class="nav-text">接口定义参见《RESTFul API的设计规范》</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.2.</span> <span class="nav-text">请求格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.</span> <span class="nav-text">响应格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.</span> <span class="nav-text">响应基本数据格式</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%AE%9E%E4%BD%93%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.1.</span> <span class="nav-text">响应实体格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%97%E8%A1%A8%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.2.</span> <span class="nav-text">响应列表格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%86%E9%A1%B5%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.3.</span> <span class="nav-text">响应分页格式</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.2.</span> <span class="nav-text">响应特殊数据格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%B9%E6%AE%8A%E5%86%85%E5%AE%B9%E8%A7%84%E8%8C%83"><span class="nav-number">1.4.3.3.</span> <span class="nav-text">特殊内容规范</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.4.3.3.1.</span> <span class="nav-text">布尔类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.3.2.</span> <span class="nav-text">日期格式</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%E5%AF%BC%E8%AF%BB"><span class="nav-number">1.5.</span> <span class="nav-text">五、相关文章导读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '60d1eb7b5bcc44b44d1ef4ed204e1409',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html" "b/en/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..cf6fd6678a
--- /dev/null
+++ "b/en/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端开发插件">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前端开发插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端开发插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端开发插件
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">前端开发插件</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" title="前端开发插件">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="tag"># 前端开发插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="prev" title="搞懂EventLoop">
+      <i class="fa fa-chevron-left"></i> 搞懂EventLoop
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/squid/" rel="next" title="Squid 服务器学习笔记">
+      Squid 服务器学习笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">插件安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Prettier-Code-formatter"><span class="nav-number">1.1.</span> <span class="nav-text">Prettier - Code formatter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ESLint"><span class="nav-number">1.2.</span> <span class="nav-text">ESLint</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vetur"><span class="nav-number">1.3.</span> <span class="nav-text">Vetur</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-2-Snippets"><span class="nav-number">1.4.</span> <span class="nav-text">Vue 2 Snippets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vscode-fileheader"><span class="nav-number">1.5.</span> <span class="nav-text">vscode-fileheader</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="nav-number">2.</span> <span class="nav-text">配置项</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7f23d4e2961d0aa08c30b8c2cc113e7f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/06/02/DockerFile/index.html b/en/2022/06/02/DockerFile/index.html
new file mode 100644
index 0000000000..c27b3c971d
--- /dev/null
+++ b/en/2022/06/02/DockerFile/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:type" content="article">
+<meta property="og:title" content="DockerFile">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/02/DockerFile/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-02T11:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="DockerFile">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/02/DockerFile/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>DockerFile | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          DockerFile
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/02/DockerFile/">DockerFile</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/02/DockerFile/" title="DockerFile">https://blog.lifesli.com/2022/06/02/DockerFile/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/DockerFile/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/DockerFile/" rel="tag"># DockerFile</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/01/GIT%20Standard/" rel="prev" title="GIT Standard.md">
+      <i class="fa fa-chevron-left"></i> GIT Standard.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="next" title="Docker数据卷">
+      Docker数据卷 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerFile"><span class="nav-number">1.</span> <span class="nav-text">DockerFile</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%88%99%E4%B8%8E%E5%BB%BA%E8%AE%AE"><span class="nav-number">1.1.</span> <span class="nav-text">原则与建议</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="nav-number">1.2.</span> <span class="nav-text">常用命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM"><span class="nav-number">1.2.1.</span> <span class="nav-text">FROM</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RUN"><span class="nav-number">1.2.2.</span> <span class="nav-text">RUN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM-scratch"><span class="nav-number">1.2.3.</span> <span class="nav-text">FROM scratch</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#COPY"><span class="nav-number">1.2.4.</span> <span class="nav-text">COPY</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ADD"><span class="nav-number">1.2.5.</span> <span class="nav-text">ADD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENV"><span class="nav-number">1.2.6.</span> <span class="nav-text">ENV</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#EXPOSE"><span class="nav-number">1.2.7.</span> <span class="nav-text">EXPOSE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VOLUME"><span class="nav-number">1.2.8.</span> <span class="nav-text">VOLUME</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#WORKDIR"><span class="nav-number">1.2.9.</span> <span class="nav-text">WORKDIR</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#USER"><span class="nav-number">1.2.10.</span> <span class="nav-text">USER</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CMD"><span class="nav-number">1.2.11.</span> <span class="nav-text">CMD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENTRYPOINT"><span class="nav-number">1.2.12.</span> <span class="nav-text">ENTRYPOINT</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#LABEL"><span class="nav-number">1.2.13.</span> <span class="nav-text">LABEL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARG"><span class="nav-number">1.2.14.</span> <span class="nav-text">ARG</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ONBUILD"><span class="nav-number">1.2.15.</span> <span class="nav-text">ONBUILD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#STOPSIGNAL"><span class="nav-number">1.2.16.</span> <span class="nav-text">STOPSIGNAL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SHELL"><span class="nav-number">1.2.17.</span> <span class="nav-text">SHELL</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Dockerfile-%E7%A4%BA%E4%BE%8B"><span class="nav-number">1.3.</span> <span class="nav-text">Dockerfile 示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BANginx%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.1.</span> <span class="nav-text">构建Nginx运行环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BATomcat%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.2.</span> <span class="nav-text">构建Tomcat环境</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/02/DockerFile/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/DockerFile/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/DockerFile/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '39151c1a8c03d8ae778168d8cd592ccf',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/02/Docker\345\221\275\344\273\244/index.html" "b/en/2022/06/02/Docker\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..2aedcb1883
--- /dev/null
+++ "b/en/2022/06/02/Docker\345\221\275\344\273\244/index.html"
@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker 命令">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-02T16:20:30.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Docker 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">Docker 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 16:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" title="Docker 命令">https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="prev" title="Docker网络模式">
+      <i class="fa fa-chevron-left"></i> Docker网络模式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="next" title="Nginx指令">
+      Nginx指令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Docker 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%95%9C%E5%83%8F%E6%93%8D%E4%BD%9C"><span class="nav-number">1.1.</span> <span class="nav-text">镜像操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%B9%E5%99%A8%E6%93%8D%E4%BD%9C"><span class="nav-number">1.2.</span> <span class="nav-text">容器操作</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a081f271a8e8ac19ee446766d7822faf',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html" "b/en/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
new file mode 100644
index 0000000000..61f426ed82
--- /dev/null
+++ "b/en/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker容器端口映射">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-02T11:22:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="容器端口映射">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Docker容器端口映射 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker容器端口映射
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">Docker容器端口映射</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" title="Docker容器端口映射">https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="tag"># 容器端口映射</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="prev" title="Docker数据卷">
+      <i class="fa fa-chevron-left"></i> Docker数据卷
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="next" title="Docker网络模式">
+      Docker网络模式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84"><span class="nav-number">1.</span> <span class="nav-text">Docker容器端口映射</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E4%B8%80%E4%B8%AAnginx%E5%AE%B9%E5%99%A8"><span class="nav-number">1.1.</span> <span class="nav-text">启动一个nginx容器</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '10e2e4348d8f98814935329e740851e9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html" "b/en/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
new file mode 100644
index 0000000000..7c3cb566a2
--- /dev/null
+++ "b/en/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker数据卷">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-02T11:21:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="数据卷">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Docker数据卷 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker数据卷
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">Docker数据卷</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:21</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" title="Docker数据卷">https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="tag"># 数据卷</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/DockerFile/" rel="prev" title="DockerFile">
+      <i class="fa fa-chevron-left"></i> DockerFile
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="next" title="Docker容器端口映射">
+      Docker容器端口映射 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.</span> <span class="nav-text">Docker数据卷</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%85%B3%E8%81%94"><span class="nav-number">1.1.</span> <span class="nav-text">创建数据卷关联</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E7%B3%BB%E7%BB%9F%E6%96%B9%E6%B3%95%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.2.</span> <span class="nav-text">利用系统方法操作数据卷</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%AE%B9%E5%99%A8%E4%BD%BF%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">数据卷容器使用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8b6cb0e2059545649ab1960868289564',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html" "b/en/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000000..cfede77364
--- /dev/null
+++ "b/en/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker网络模式">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-02T11:23:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络模式">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Docker网络模式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker网络模式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">Docker网络模式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" title="Docker网络模式">https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="tag"># 网络模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="prev" title="Docker容器端口映射">
+      <i class="fa fa-chevron-left"></i> Docker容器端口映射
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="next" title="Docker 命令">
+      Docker 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.</span> <span class="nav-text">Docker网络模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8network%E5%91%BD%E4%BB%A4%E7%AE%A1%E7%90%86%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.1.</span> <span class="nav-text">利用network命令管理网络模式</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a95ad7def1cc94bf8609dcb1c96d9202',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html" "b/en/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
new file mode 100644
index 0000000000..6c50f57791
--- /dev/null
+++ "b/en/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Hexo在Github发布之后自定义域名的配置">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-59-28.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Hexo在Github发布之后自定义域名的配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Hexo在Github发布之后自定义域名的配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">Hexo在Github发布之后自定义域名的配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" title="Hexo在Github发布之后自定义域名的配置">https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="prev" title="Nginx指令">
+      <i class="fa fa-chevron-left"></i> Nginx指令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/http_stub_status_module/" rel="next" title="http_stub_status_module Nginx的性能模块">
+      http_stub_status_module Nginx的性能模块 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名的配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E4%BC%9A%E8%A2%AB%E6%B8%85%E7%A9%BA%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名会被清空的问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.1.1.</span> <span class="nav-text">解决方案</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e1954edd54e6891edefdc69124103dc8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/09/Nginx\346\214\207\344\273\244/index.html" "b/en/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
new file mode 100644
index 0000000000..fe4f7af400
--- /dev/null
+++ "b/en/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx指令">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-09T10:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Nginx指令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx指令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">Nginx指令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 10:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" title="Nginx指令">https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="prev" title="Docker 命令">
+      <i class="fa fa-chevron-left"></i> Docker 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="next" title="Hexo在Github发布之后自定义域名的配置">
+      Hexo在Github发布之后自定义域名的配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E6%8C%87%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Nginx指令</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ab005b7b6c0961fb70d3e42d12ae906a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/06/09/http_stub_status_module/index.html b/en/2022/06/09/http_stub_status_module/index.html
new file mode 100644
index 0000000000..8232d4595c
--- /dev/null
+++ b/en/2022/06/09/http_stub_status_module/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:type" content="article">
+<meta property="og:title" content="http_stub_status_module Nginx的性能模块">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/09/http_stub_status_module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/09/http_stub_status_module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>http_stub_status_module Nginx的性能模块 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          http_stub_status_module Nginx的性能模块
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/09/http_stub_status_module/">http_stub_status_module Nginx的性能模块</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/09/http_stub_status_module/" title="http_stub_status_module Nginx的性能模块">https://blog.lifesli.com/2022/06/09/http_stub_status_module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/http_stub_status_module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="prev" title="Hexo在Github发布之后自定义域名的配置">
+      <i class="fa fa-chevron-left"></i> Hexo在Github发布之后自定义域名的配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="next" title="架构实践">
+      架构实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E7%9C%8B%E6%98%AF%E5%90%A6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">查看是否安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8"><span class="nav-number">2.</span> <span class="nav-text">配置使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90"><span class="nav-number">3.</span> <span class="nav-text">解析</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">4.</span> <span class="nav-text">使用场景</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/09/http_stub_status_module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/http_stub_status_module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/http_stub_status_module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f6050ae231ce7a150e77da6c4f45b5bf',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html" "b/en/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
new file mode 100644
index 0000000000..0201eac9e4
--- /dev/null
+++ "b/en/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="架构实践">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-15T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="架构">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>架构实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          架构实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">架构实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月15日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" title="架构实践">https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E6%9E%B6%E6%9E%84/" rel="tag"># 架构</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/09/http_stub_status_module/" rel="prev" title="http_stub_status_module Nginx的性能模块">
+      <i class="fa fa-chevron-left"></i> http_stub_status_module Nginx的性能模块
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="next" title="前端常见知识点整理 ---- 网络安全（2）">
+      前端常见知识点整理 ---- 网络安全（2） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">架构实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%86%85%E5%AE%B9%E4%B8%80%E8%A7%88"><span class="nav-number">1.1.</span> <span class="nav-text">架构设计内容一览</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">应用架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.2.</span> <span class="nav-text">开发架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%BB%B4%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.3.</span> <span class="nav-text">运维架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD"><span class="nav-number">1.1.4.</span> <span class="nav-text">基础设施</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9244a08b6c874b506f5c3d8fa11af833',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html" "b/en/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
new file mode 100644
index 0000000000..791599dfa3
--- /dev/null
+++ "b/en/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"	
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全（2）">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-16T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全（2） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全（2）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">前端常见知识点整理 ---- 网络安全（2）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月16日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" title="前端常见知识点整理 ---- 网络安全（2）">https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="prev" title="架构实践">
+      <i class="fa fa-chevron-left"></i> 架构实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/06/30/nginx-timeout/" rel="next" title="nginx中的超时设置">
+      nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86-%E2%80%94-%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">前端常见知识点整理 —- 网络安全（2）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.</span> <span class="nav-text">SQL 注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5%E5%8E%9F%E7%90%86"><span class="nav-number">1.1.1.</span> <span class="nav-text">SQL 注入原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E9%A2%84%E9%98%B2-SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.2.</span> <span class="nav-text">如何预防 SQL 注入</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%91%BD%E4%BB%A4%E8%A1%8C%E6%B3%A8%E5%85%A5"><span class="nav-number">1.2.</span> <span class="nav-text">命令行注入</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.</span> <span class="nav-text">DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS"><span class="nav-number">1.3.1.</span> <span class="nav-text">网络层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#SYN-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">SYN Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.2.</span> <span class="nav-text">ACK Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#UDP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.3.</span> <span class="nav-text">UDP Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ICMP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.4.</span> <span class="nav-text">ICMP Flood 攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.2.</span> <span class="nav-text">网络层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS"><span class="nav-number">1.3.3.</span> <span class="nav-text">应用层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CC-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">CC 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DNS-Flood"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">DNS Flood</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTTP-%E6%85%A2%E9%80%9F%E8%BF%9E%E6%8E%A5%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">HTTP 慢速连接攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.4.</span> <span class="nav-text">应用层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B6%E4%BB%96-DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.</span> <span class="nav-text">其他 DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-XSS"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">利用 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9D%A5%E8%87%AA-P2P-%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">来自 P2P 网络攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DDoS-%E6%9C%80%E5%90%8E%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.6.</span> <span class="nav-text">DDoS 最后总结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%81%E9%87%8F%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.</span> <span class="nav-text">流量劫持</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DNS-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.1.</span> <span class="nav-text">DNS 劫持</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.2.</span> <span class="nav-text">HTTP 劫持</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.</span> <span class="nav-text">服务器漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.1.</span> <span class="nav-text">越权操作漏洞</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.2.</span> <span class="nav-text">越权操作漏洞防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.3.</span> <span class="nav-text">目录遍历漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.3.1.</span> <span class="nav-text">目录遍历漏洞防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F"><span class="nav-number">1.5.4.</span> <span class="nav-text">物理路径泄漏</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.4.1.</span> <span class="nav-text">物理路径泄漏防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BA%90%E7%A0%81%E6%9A%B4%E9%9C%B2%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.5.</span> <span class="nav-text">源码暴露漏洞</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '91a4932d2f243ad53df24e812627447b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/06/30/nginx-timeout/index.html b/en/2022/06/30/nginx-timeout/index.html
new file mode 100644
index 0000000000..c6ad08c3a7
--- /dev/null
+++ b/en/2022/06/30/nginx-timeout/index.html
@@ -0,0 +1,669 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:type" content="article">
+<meta property="og:title" content="nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/06/30/nginx-timeout/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-06-30T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Timeout">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/06/30/nginx-timeout/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/06/30/nginx-timeout/">nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月30日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/06/30/nginx-timeout/" title="nginx中的超时设置">https://blog.lifesli.com/2022/06/30/nginx-timeout/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/30/nginx-timeout/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Timeout/" rel="tag"># Timeout</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="prev" title="前端常见知识点整理 ---- 网络安全（2）">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全（2）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/linux-scp/" rel="next" title="在linux之间传输文件的命令scp">
+      在linux之间传输文件的命令scp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">客户端超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#send-timeout-time"><span class="nav-number">1.1.3.</span> <span class="nav-text">send_timeout time</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.4.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">DNS解析超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.1.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.3.</span> <span class="nav-text">代理超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.3.1.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.2.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.3.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E9%87%8D%E8%AF%95%E6%9C%BA%E5%88%B6%E8%AE%BE%E7%BD%AE%E3%80%82"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">失败重试机制设置。</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#upstream%E5%AD%98%E6%B4%BB%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.4.</span> <span class="nav-text">upstream存活超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.4.1.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.5.</span> <span class="nav-text">lingering_timeout</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/06/30/nginx-timeout/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/30/nginx-timeout/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/30/nginx-timeout/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0759ecbfe5e89f3c11a085b91d1e74ee',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html" "b/en/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
new file mode 100644
index 0000000000..0087a3ad68
--- /dev/null
+++ "b/en/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"	
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+<meta property="og:image" content="https://www.creationline.com/lab/aquasecurity/43087">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="镜像安全">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" rel="tag"># 镜像安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Oracle-Linux-install-Docker/" rel="prev" title="在 Oracle Linux 中安装 Docker">
+      <i class="fa fa-chevron-left"></i> 在 Oracle Linux 中安装 Docker
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="next" title="Nginx中的超时设置">
+      Nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker-%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">Docker 镜像安全最佳实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%92%8C-%E5%AE%BF%E4%B8%BB%E6%9C%BA-%E7%9A%84%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">Docker 和 宿主机 的设置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A1%AE%E4%BF%9D%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8"><span class="nav-number">1.2.</span> <span class="nav-text">确保镜像安全</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9B%91%E6%8E%A7%E5%AE%B9%E5%99%A8"><span class="nav-number">1.3.</span> <span class="nav-text">监控容器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">1.4.</span> <span class="nav-text">参考</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fe6d49c9ace5c50d790fccbfeaad0d6e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html" "b/en/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
new file mode 100644
index 0000000000..0c06dab61b
--- /dev/null
+++ "b/en/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"	
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker Compose">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Docker-Compose/" rel="tag"># Docker Compose</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="prev" title="Postgresql绿色版使用">
+      <i class="fa fa-chevron-left"></i> Postgresql绿色版使用
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="next" title="">
+       <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Network-in-Compose-%E5%9C%A8Docker-Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C"><span class="nav-number">1.</span> <span class="nav-text">Network in Compose 在Docker Compose中配置网络</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-number">1.1.</span> <span class="nav-text"></span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '685d37bae61617a8ad0ad275b3c6825d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html" "b/en/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
new file mode 100644
index 0000000000..52b7fa0482
--- /dev/null
+++ "b/en/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="超时设置">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">Nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" title="Nginx中的超时设置">https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="tag"># 超时设置</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="next" title="Postgresql绿色版使用">
+      Postgresql绿色版使用 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.4.</span> <span class="nav-text">lingering_timeout</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.5.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.6.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.7.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.8.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.9.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '33009a37f22e2c20a939c2f2841185ac',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/08/02/Oracle-Linux-install-Docker/index.html b/en/2022/08/02/Oracle-Linux-install-Docker/index.html
new file mode 100644
index 0000000000..6fa99f4e21
--- /dev/null
+++ b/en/2022/08/02/Oracle-Linux-install-Docker/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在 Oracle Linux 中安装 Docker">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/Oracle-Linux-install-Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/Oracle-Linux-install-Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>在 Oracle Linux 中安装 Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在 Oracle Linux 中安装 Docker
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/Oracle-Linux-install-Docker/">在 Oracle Linux 中安装 Docker</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/Oracle-Linux-install-Docker/" title="在 Oracle Linux 中安装 Docker">https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="prev" title="服务器高危端口列表">
+      <i class="fa fa-chevron-left"></i> 服务器高危端口列表
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><span class="nav-number">1.</span> <span class="nav-text">Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6535dc71bfeab8715f33e5f8109cb20f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html" "b/en/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
new file mode 100644
index 0000000000..ca320c75ec
--- /dev/null
+++ "b/en/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:type" content="article">
+<meta property="og:title" content="OracleLinux内核从uek切换到uek">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="kernel">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>OracleLinux内核从uek切换到uek | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          OracleLinux内核从uek切换到uek
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">OracleLinux内核从uek切换到uek</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" title="OracleLinux内核从uek切换到uek">https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/kernel/" rel="tag"># kernel</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="prev" title="搭建Docker私有仓库">
+      <i class="fa fa-chevron-left"></i> 搭建Docker私有仓库
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="next" title="systemctl 命令">
+      systemctl 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7b30c0c55b86a926bccd7a22f847cb15',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html" "b/en/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..604016a62c
--- /dev/null
+++ "b/en/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Postgresql绿色版使用">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Postgresql">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Postgresql绿色版使用 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Postgresql绿色版使用
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">Postgresql绿色版使用</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" title="Postgresql绿色版使用">https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/Postgresql/" rel="tag"># Postgresql</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="prev" title="Nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> Nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">初始化数据库</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E5%86%8C%E8%A1%A8"><span class="nav-number">2.</span> <span class="nav-text">注册表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E6%9C%8D%E5%8A%A1"><span class="nav-number">3.</span> <span class="nav-text">启动服务</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fc36a1f9292cd17d1c7b9c716a50e323',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2022/08/02/linux-scp/index.html b/en/2022/08/02/linux-scp/index.html
new file mode 100644
index 0000000000..29cb229110
--- /dev/null
+++ b/en/2022/08/02/linux-scp/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在linux之间传输文件的命令scp">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/linux-scp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="scp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/linux-scp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>在linux之间传输文件的命令scp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在linux之间传输文件的命令scp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/linux-scp/">在linux之间传输文件的命令scp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/linux-scp/" title="在linux之间传输文件的命令scp">https://blog.lifesli.com/2022/08/02/linux-scp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/linux-scp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/scp/" rel="tag"># scp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/06/30/nginx-timeout/" rel="prev" title="nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="next" title="搭建Docker私有仓库">
+      搭建Docker私有仓库 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E8%B7%B5"><span class="nav-number">2.</span> <span class="nav-text">实践</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/linux-scp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/linux-scp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/linux-scp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '63ff3b5514c53f3d422048fb8476101b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/systemctl \345\221\275\344\273\244/index.html" "b/en/2022/08/02/systemctl \345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..e58b1a6d6a
--- /dev/null
+++ "b/en/2022/08/02/systemctl \345\221\275\344\273\244/index.html"	
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:type" content="article">
+<meta property="og:title" content="systemctl 命令">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="systemctl">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>systemctl 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          systemctl 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">systemctl 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" title="systemctl 命令">https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/systemctl/" rel="tag"># systemctl</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="prev" title="OracleLinux内核从uek切换到uek">
+      <i class="fa fa-chevron-left"></i> OracleLinux内核从uek切换到uek
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="next" title="服务器高危端口列表">
+      服务器高危端口列表 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#systemctl-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">systemctl 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl"><span class="nav-number">1.1.</span> <span class="nav-text">systemctl</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-unit-files"><span class="nav-number">1.2.</span> <span class="nav-text">systemctl list-unit-files</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-units-%E2%80%93type-service-%E2%80%93all"><span class="nav-number">1.3.</span> <span class="nav-text">systemctl list-units –type&#x3D;service –all</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-get-default"><span class="nav-number">1.4.</span> <span class="nav-text">systemctl get-default</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-multi-user-target"><span class="nav-number">1.5.</span> <span class="nav-text">systemctl isolate multi-user.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-graphical-target"><span class="nav-number">1.6.</span> <span class="nav-text">systemctl isolate graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-poweroff"><span class="nav-number">1.7.</span> <span class="nav-text">systemctl poweroff</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-reboot"><span class="nav-number">1.8.</span> <span class="nav-text">systemctl reboot</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-suspend"><span class="nav-number">1.9.</span> <span class="nav-text">systemctl suspend</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-rescue"><span class="nav-number">1.10.</span> <span class="nav-text">systemctl rescue</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-hibernate"><span class="nav-number">1.11.</span> <span class="nav-text">systemctl hibernate</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-emergency"><span class="nav-number">1.12.</span> <span class="nav-text">systemctl emergency</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-%E2%80%93reverse"><span class="nav-number">1.13.</span> <span class="nav-text">systemctl list-dependencies –reverse</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-graphical-target"><span class="nav-number">1.14.</span> <span class="nav-text">systemctl list-dependencies graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-sockets"><span class="nav-number">1.15.</span> <span class="nav-text">systemctl list-sockets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-show-etcd-service"><span class="nav-number">1.16.</span> <span class="nav-text">systemctl show etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-mask-etcd-service"><span class="nav-number">1.17.</span> <span class="nav-text">systemctl mask etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-unmask-etcd-service"><span class="nav-number">1.18.</span> <span class="nav-text">systemctl unmask etcd.service</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '133edef8ca19cc98b054d830a5d7d23b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html" "b/en/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
new file mode 100644
index 0000000000..1bbaed2cab
--- /dev/null
+++ "b/en/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搭建Docker私有仓库">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="registry">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>搭建Docker私有仓库 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搭建Docker私有仓库
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">搭建Docker私有仓库</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" title="搭建Docker私有仓库">https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/registry/" rel="tag"># registry</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/linux-scp/" rel="prev" title="在linux之间传输文件的命令scp">
+      <i class="fa fa-chevron-left"></i> 在linux之间传输文件的命令scp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="next" title="OracleLinux内核从uek切换到uek">
+      OracleLinux内核从uek切换到uek <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">搭建Docker私有仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8B%E8%BD%BDregistry"><span class="nav-number">1.1.</span> <span class="nav-text">下载registry</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E5%90%AFdocker"><span class="nav-number">1.3.</span> <span class="nav-text">重启docker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BAregistry%E5%AE%B9%E5%99%A8%EF%BC%88%E5%85%B3%E8%81%94%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93%E9%85%8D%E7%BD%AE%EF%BC%89"><span class="nav-number">1.4.</span> <span class="nav-text">创建registry容器（关联私有仓库配置）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8E%A8%E9%80%81%E9%95%9C%E5%83%8F%E5%88%B0%E7%A7%81%E6%9C%89%E4%BB%93"><span class="nav-number">1.5.</span> <span class="nav-text">推送镜像到私有仓</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dc68bd5127849ced1fcd0badc3538808',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html" "b/en/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
new file mode 100644
index 0000000000..018c16756f
--- /dev/null
+++ "b/en/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
@@ -0,0 +1,865 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:type" content="article">
+<meta property="og:title" content="服务器高危端口列表">
+<meta property="og:url" content="https://blog.lifesli.com/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="port">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>服务器高危端口列表 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          服务器高危端口列表
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">服务器高危端口列表</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" title="服务器高危端口列表">https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/port/" rel="tag"># port</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="prev" title="systemctl 命令">
+      <i class="fa fa-chevron-left"></i> systemctl 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Oracle-Linux-install-Docker/" rel="next" title="在 Oracle Linux 中安装 Docker">
+      在 Oracle Linux 中安装 Docker <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">服务器高危端口列表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bd802251d773c166c7898694d8cf069a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html" "b/en/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
new file mode 100644
index 0000000000..089ad2d886
--- /dev/null
+++ "b/en/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:type" content="article">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title> | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"></a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 10:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" title="">https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/en/2023/09/20/test/" rel="next" title="test">
+      test <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerCompose%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">DockerCompose安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4ffb1c914c2349d5a2b57071366b4db6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/2023/09/20/test/index.html b/en/2023/09/20/test/index.html
new file mode 100644
index 0000000000..d37211237a
--- /dev/null
+++ b/en/2023/09/20/test/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="test">
+<meta property="og:url" content="https://blog.lifesli.com/en/2023/09/20/test/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2023-09-20T18:33:23.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/2023/09/20/test/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'en'
+  };
+</script>
+
+  <title>test | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          test
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2023-09-20 18:33:23 / Modified: 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    Donate
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/en/images/wechatpay.jpg" alt="李旭光 WeChat Pay">
+        <p>WeChat Pay</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/en/2023/09/20/test/">test</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 18:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/en/2023/09/20/test/" title="test">https://blog.lifesli.com/2023/09/20/test/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/test/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/en/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="prev" title="">
+      <i class="fa fa-chevron-left"></i> 
+    </a></div>
+      <div class="post-nav-item"></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/2023/09/20/test/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/test/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/test/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8a1ab8ddacfc55d991be10a17ba690cd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/@attachment/README.html b/en/@attachment/README.html
new file mode 100644
index 0000000000..ead0849ba9
--- /dev/null
+++ b/en/@attachment/README.html
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="这里追加图片">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/@attachment/README.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="这里追加图片">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/@attachment/README">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title> | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="en">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+            <li><a href="/en/@attachment/">@ATTACHMENT</a></li>
+            <li>README</li>
+          
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <h1 id="这里追加图片"><a href="#这里追加图片" class="headerlink" title="这里追加图片"></a>这里追加图片</h1>
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+            <li><a href="/en/@attachment/">@ATTACHMENT</a></li>
+            <li>README</li>
+          
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%BF%99%E9%87%8C%E8%BF%BD%E5%8A%A0%E5%9B%BE%E7%89%87"><span class="nav-number">1.</span> <span class="nav-text">这里追加图片</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/@attachment/README.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/@attachment/README.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/@attachment/README.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '10c59544c184ef862526e5c0a211b5af',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/about/index.html b/en/about/index.html
new file mode 100644
index 0000000000..81fe550059
--- /dev/null
+++ b/en/about/index.html
@@ -0,0 +1,707 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ZH | EN  | JA Xuguang.Li FrontEnd Engineer 10 yearsTel: 15641181846E-mail: &amp;#x6c;&amp;#105;&amp;#x78;&amp;#x75;&amp;#x67;&amp;#x75;&amp;#x61;&amp;#110;&amp;#103;&amp;#x33;&amp;#x31;&amp;#54;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#120;&amp;#109;&amp;#x61;&amp;#105;&amp;#x6c;&amp;#46;&amp;">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Know About Me">
+<meta property="og:url" content="https://blog.lifesli.com/en/about/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ZH | EN  | JA Xuguang.Li FrontEnd Engineer 10 yearsTel: 15641181846E-mail: &amp;#x6c;&amp;#105;&amp;#x78;&amp;#x75;&amp;#x67;&amp;#x75;&amp;#x61;&amp;#110;&amp;#103;&amp;#x33;&amp;#x31;&amp;#54;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#120;&amp;#109;&amp;#x61;&amp;#105;&amp;#x6c;&amp;#46;&amp;">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2021-04-23T01:00:00.000Z">
+<meta property="article:modified_time" content="2021-04-23T16:54:11.340Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/about/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Know About Me | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="en">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">Know About Me
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>ABOUT</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <p><a href="../../about">ZH</a> | <a href="../../en/about">EN</a>  | <a href="../../ja/about">JA</a></p>
+<h1 id="Xuguang-Li"><a href="#Xuguang-Li" class="headerlink" title="Xuguang.Li"></a>Xuguang.Li</h1><blockquote>
+<p>FrontEnd Engineer 10 years<br>Tel: 15641181846<br>E-mail: <a href="mailto:&#x6c;&#105;&#x78;&#x75;&#x67;&#x75;&#x61;&#110;&#103;&#x33;&#x31;&#54;&#x40;&#102;&#x6f;&#120;&#109;&#x61;&#105;&#x6c;&#46;&#99;&#x6f;&#109;">&#x6c;&#105;&#x78;&#x75;&#x67;&#x75;&#x61;&#110;&#103;&#x33;&#x31;&#54;&#x40;&#102;&#x6f;&#120;&#109;&#x61;&#105;&#x6c;&#46;&#99;&#x6f;&#109;</a><br>Github: <a target="_blank" rel="noopener" href="https://github.com/lixuguang">https://github.com/lixuguang</a><br>Blog: <a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io</a><br>Address: HuangHe Road 852 ShaHeKou DaLian</p>
+</blockquote>
+<h2 id="SKLLS"><a href="#SKLLS" class="headerlink" title="SKLLS"></a>SKLLS</h2><ul>
+<li><p>Use Html/Css/Javascript/Jq，Responsive Layout，MobileWeb perfectly.</p>
+</li>
+<li><p>Use VUE/vuex/axios/vue-router/element-ui etc perfectly.</p>
+</li>
+<li><p>Familiar with separation of front-end and backend，RestfulAPI，Git/SVN，CICD etc.</p>
+</li>
+<li><p>熟练使用chrome-dev对项目进行前端代码调试/调优</p>
+</li>
+<li><p>Familiar with Nodejs/Electron/React/less/sass/bootstrap etc.</p>
+</li>
+<li><p>Familiar with webpack，npm etc.</p>
+</li>
+<li><p>掌握前端架构方法，对前端规范性要求非常熟悉，能够根据产品/项目需求给出最优技术选型方案。</p>
+</li>
+<li><p>熟练使用svn/git等代码版本管理工具及gitflow管理方式进行代码管理</p>
+</li>
+<li><p>8年前端开发经验，参与过100+的项目开发。</p>
+</li>
+<li><p>善于团队协作，自我驱动，持续学习，热爱工作，责任心强。</p>
+</li>
+</ul>
+<h2 id="WORK-EXPERIENCE"><a href="#WORK-EXPERIENCE" class="headerlink" title="WORK EXPERIENCE"></a>WORK EXPERIENCE</h2><blockquote>
+<p>华宇（大连）信息服务有限公司：主要面向政府、公检法机关及互联网市场大客户。<br>2014.5-至今<br>资深前端开发工程师 团队规模：30人 公司规模：600人<br>主要职责: </p>
+</blockquote>
+<ul>
+<li>编写代码<ul>
+<li>完成正常项目任务<ul>
+<li>累计完成项目超过150个</li>
+<li>参与项目类型包括pcWeb、padWeb、手机Web、微信Web、触摸屏、指挥控制大屏</li>
+<li>业务类型涉及政府、公检法各个领域</li>
+<li>使用技术包含HTML4/5、CSS2/3、ES5/6、bootstrap、framework7、Angular、Vue以及Artery框架等</li>
+</ul>
+</li>
+<li>极短时间内完成任务<ul>
+<li>竞标项目如：<ul>
+<li>5天60个页面带领一个初级前端和一个中级前端完成。</li>
+<li>3天完成一个问卷调查包含各种交互的特效。</li>
+<li>封闭1星期同3位开发共同完成canvas画板功能，支持检察官记录员实现档案卷宗实时编辑。</li>
+</ul>
+</li>
+<li>演示项目如：<ul>
+<li>1个月带领一个初级前端一个初级开发完成整个系统包含业务逻辑除后台的所有功能，实现超高保真原型。</li>
+</ul>
+</li>
+<li>救火任务如：<ul>
+<li>上线前2天解决其他人无法解决的问题，此类情况居多。</li>
+<li>项目工期提前，顶着压力加班完成任务。如1天13个页面。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>新技术框架研究应用<ul>
+<li>前后端分离技术<ul>
+<li>组织前端团队学习前后端分离思想，研究前后端分离所要学习的新技能知识，面向对象的思想以及面向接口的思想等。</li>
+</ul>
+</li>
+<li>前端自动化构建、自动检测<ul>
+<li>组织前端团队学习前端自动化构建如：npm包管理工具、各种cli工具使用、eslint、stylint等自动化检查工具，以及webpack和gulp等打包工具使用。</li>
+</ul>
+</li>
+<li>MVVM框架等新技术<ul>
+<li>组织学习研究Angular2、Vue2等数据驱动的MVVM框架，并在实际项目中使用VUE框架。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>组织构建基础服务<ul>
+<li>前端通用组件库</li>
+<li>Vue组件库</li>
+<li>前端题库</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>制定规范<ul>
+<li>前端编码规范<ul>
+<li>包括HTML规范、CSS规范、JS规范、Vue规范、通用规范等。</li>
+</ul>
+</li>
+<li>团队协作制度<ul>
+<li>包括代码管理制度、团队协作规范制度。</li>
+</ul>
+</li>
+<li>代码审查规范<ul>
+<li>人工审核</li>
+<li>自动化检测工具审核</li>
+</ul>
+</li>
+<li>知识考核规范<ul>
+<li>前端知识点地图</li>
+<li>前端技能栈思维导图</li>
+<li>前端考试平台</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>团队建设<ul>
+<li>面试官<ul>
+<li>从原来的2人前端团队发展至16人前端团队，4年流失率仅为3人。</li>
+</ul>
+</li>
+<li>组织师傅帮带<ul>
+<li>组织先进带后进，高级带初级，建立前端梯队，组织共同学习。</li>
+</ul>
+</li>
+<li>前端兴趣小组<ul>
+<li>每周二组织前端兴趣小组，了解当下最新的前端知识，组织分享活动。</li>
+</ul>
+</li>
+<li>前端培训<ul>
+<li>不定期组织学习公司将要使用的新技术以及开发过程中遇到的问题解决方案</li>
+<li>定期组织基础知识、中级知识、高级知识、实践应用四个层面的培训。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>人才培养<ul>
+<li>人员考核<ul>
+<li>根据建立的知识点地图建立考点地图，建立试卷进行考评，关系到员工晋升。</li>
+</ul>
+</li>
+<li>建立人才档案，定期谈话<ul>
+<li>根据不同人的特点建立对应的人才档案，通过季度谈话的方式了解员工最新动态，根据员工特点设立学习方向和目标，引导员工成长。</li>
+</ul>
+</li>
+<li>参与人才晋升考官<ul>
+<li>参与员工晋升考核，给出努力方向。</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<hr>
+<blockquote>
+<p>大连新桥科技发展有限公司：面向教育系统提供整体服务。<br>2013.1-2014.1<br>用户体验团队负责人 团队规模：6人 公司规模：50人<br>主要职责：</p>
+</blockquote>
+<ul>
+<li>接访客户<ul>
+<li>去客户现场或客户到工作现场，负责接待客户，了解客户需求。</li>
+</ul>
+</li>
+<li>设计、编写代码<ul>
+<li>根据客户或领导需求完成需求分析、视觉设计、代码编写等任务。涉及pcWeb、padWeb、手机Web等。</li>
+</ul>
+</li>
+<li>团队管理<ul>
+<li>根据任务量分配工作，协调团队资源。</li>
+</ul>
+</li>
+</ul>
+<hr>
+<blockquote>
+<p>百维数元信息科技（北京）有限公司：一斑网在线调研平台。<br>2011.9-2012.12<br>开发工程师 团队规模：3人 公司规模：8人<br>主要职责：</p>
+</blockquote>
+<ul>
+<li>设计、前后台代码编写、运营、客服<ul>
+<li>初创公司，开发运营团队3人，主要负责设计工作、前端开发、部分后端开发、运营、客服等工作。</li>
+</ul>
+</li>
+</ul>
+<h2 id="EDUCATION-EXPERIENCE"><a href="#EDUCATION-EXPERIENCE" class="headerlink" title="EDUCATION EXPERIENCE"></a>EDUCATION EXPERIENCE</h2><blockquote>
+<p>大连外国语大学<br>2008.9-2012.6<br>信息系统与信息管理（日英双语强化）<br>本科<br>主要职务：</p>
+</blockquote>
+<ul>
+<li>计算机部部长<ul>
+<li>组织计算机竞赛、考级</li>
+</ul>
+</li>
+<li>团支书<ul>
+<li>组织班级党员发展、思想工作。</li>
+</ul>
+</li>
+<li>网络协会核心成员<ul>
+<li>为在校生提供vod服务，翻译日英影音资料供大家学习。<blockquote>
+<p>主要荣誉：</p>
+</blockquote>
+</li>
+</ul>
+</li>
+<li>学习标兵</li>
+<li>优秀团支书</li>
+<li>优秀毕业生</li>
+<li>每一季度奖学金（一、二、三等均获得过）</li>
+</ul>
+<h2 id="PROJECT-EXPERIENCE"><a href="#PROJECT-EXPERIENCE" class="headerlink" title="PROJECT EXPERIENCE"></a>PROJECT EXPERIENCE</h2><ul>
+<li>ERP系统<ul>
+<li>法院执行线索分析系统v2.1-v2.2</li>
+<li>数据质量检查系统v2.0-v2.3</li>
+<li>法官办案辅助系统</li>
+<li>量刑规范化服务系统</li>
+<li>裁判文书上网直报系统V2.0</li>
+<li>律师阅卷管理系统</li>
+<li>… 100+</li>
+</ul>
+</li>
+<li>CMS网站<ul>
+<li>诉讼服务网系列 50+</li>
+<li>法院官网 20+</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>pad、手机、触控屏系统<ul>
+<li>信息引导侦查系列产品</li>
+<li>远程视频会见系统2.1</li>
+<li>领导驾驶舱</li>
+<li>移动办案APP</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>普通网站<ul>
+<li>企业官网、政府官网 10+</li>
+</ul>
+</li>
+</ul>
+<blockquote>
+<p>涉及技术包含：<br><strong>语言：</strong><br>HTML4/5、CSS2/3、ES5/6、JSP…<br><strong>框架：</strong><br>JQ、bootstarp、mui、framework7、VUE…<br><strong>理论：</strong><br>前后端分离(面向对象OOB + 异步请求ajax + 面向接口api)</p>
+</blockquote>
+<h2 id="INTRODUCATION"><a href="#INTRODUCATION" class="headerlink" title="INTRODUCATION"></a>INTRODUCATION</h2><p>从2011年算起我已经从事前端开发8年、设计2年（重叠）、团队管理4年（重叠），参与各类大小项目200+，涉及各个业务领域包括公检法政、教育、调研，覆盖目前主流的前端技术（游戏向不包含）。基础能力扎实，能够解决绝大多数普通问题和部分棘手问题，从小在军营成长让我对团队纪律与制度有着深刻的认识，知道规范与制度的重要性，这为我建立高效优质的团队提供了良好土壤。谦逊使我可以与团队中以及团队之间有着良好的沟通，好学让我不断逃出舒适区，让自己不断的学习进步。有着个人荣誉感与集体荣誉感，让我对工作和团队认真负责。抗压能力强，让领导放心把最紧急最重要的工作交给我做，加班也毫无怨言。工作久了让我总结了一些工作中常见的问题，我会讲这些分享给他人，让大家一同进步，将问题扼杀在摇篮里。愿意组织活动参加活动，喜欢阅读，跑步，骑行，篮球。</p>
+
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>ABOUT</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Xuguang-Li"><span class="nav-number">1.</span> <span class="nav-text">Xuguang.Li</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#SKLLS"><span class="nav-number">1.1.</span> <span class="nav-text">SKLLS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WORK-EXPERIENCE"><span class="nav-number">1.2.</span> <span class="nav-text">WORK EXPERIENCE</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#EDUCATION-EXPERIENCE"><span class="nav-number">1.3.</span> <span class="nav-text">EDUCATION EXPERIENCE</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#PROJECT-EXPERIENCE"><span class="nav-number">1.4.</span> <span class="nav-text">PROJECT EXPERIENCE</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#INTRODUCATION"><span class="nav-number">1.5.</span> <span class="nav-text">INTRODUCATION</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/about/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/about/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/about/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e6397545c34934851001fd9b2b241d6f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2013/06/index.html b/en/archives/2013/06/index.html
new file mode 100644
index 0000000000..216fd77728
--- /dev/null
+++ b/en/archives/2013/06/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2013/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2013/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2013/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2013/index.html b/en/archives/2013/index.html
new file mode 100644
index 0000000000..fb8592d1ea
--- /dev/null
+++ b/en/archives/2013/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2013/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2013/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2013/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2015/12/index.html b/en/archives/2015/12/index.html
new file mode 100644
index 0000000000..4145f140af
--- /dev/null
+++ b/en/archives/2015/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2015/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2015/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2015/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2015/index.html b/en/archives/2015/index.html
new file mode 100644
index 0000000000..2f88af05e3
--- /dev/null
+++ b/en/archives/2015/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2015/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2015/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2015/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2016/10/index.html b/en/archives/2016/10/index.html
new file mode 100644
index 0000000000..4ca9ad0f17
--- /dev/null
+++ b/en/archives/2016/10/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2016/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2016/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2016/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2016/index.html b/en/archives/2016/index.html
new file mode 100644
index 0000000000..f1ed4e489a
--- /dev/null
+++ b/en/archives/2016/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2016/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2016/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2016/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2017/08/index.html b/en/archives/2017/08/index.html
new file mode 100644
index 0000000000..3e2be2e8ec
--- /dev/null
+++ b/en/archives/2017/08/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2017/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2017/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2017/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2017/10/index.html b/en/archives/2017/10/index.html
new file mode 100644
index 0000000000..687ac28457
--- /dev/null
+++ b/en/archives/2017/10/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2017/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2017/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2017/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2017/12/index.html b/en/archives/2017/12/index.html
new file mode 100644
index 0000000000..6da9952c6e
--- /dev/null
+++ b/en/archives/2017/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2017/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2017/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2017/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2017/index.html b/en/archives/2017/index.html
new file mode 100644
index 0000000000..688566ab17
--- /dev/null
+++ b/en/archives/2017/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2017/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2017/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2017/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2019/12/index.html b/en/archives/2019/12/index.html
new file mode 100644
index 0000000000..a4e387d200
--- /dev/null
+++ b/en/archives/2019/12/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2019/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2019/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2019/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2019/index.html b/en/archives/2019/index.html
new file mode 100644
index 0000000000..f8d7d9440e
--- /dev/null
+++ b/en/archives/2019/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2019/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/01/index.html b/en/archives/2020/01/index.html
new file mode 100644
index 0000000000..bce4c8b7aa
--- /dev/null
+++ b/en/archives/2020/01/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/2020/01/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2020/01/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/01/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/01/page/2/index.html b/en/archives/2020/01/page/2/index.html
new file mode 100644
index 0000000000..6d48bb4488
--- /dev/null
+++ b/en/archives/2020/01/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/01/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/01/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/01/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/01/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/archives/2020/01/page/3/">3</a><a class="page-number" href="/en/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2020/01/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/01/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/01/page/3/index.html b/en/archives/2020/01/page/3/index.html
new file mode 100644
index 0000000000..c5639315a0
--- /dev/null
+++ b/en/archives/2020/01/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/01/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/01/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/01/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/01/">1</a><a class="page-number" href="/en/archives/2020/01/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2020/01/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/01/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/01/page/4/index.html b/en/archives/2020/01/page/4/index.html
new file mode 100644
index 0000000000..831d6ce210
--- /dev/null
+++ b/en/archives/2020/01/page/4/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/01/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/01/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/01/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/01/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/01/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/01/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/02/index.html b/en/archives/2020/02/index.html
new file mode 100644
index 0000000000..5918bfe7ce
--- /dev/null
+++ b/en/archives/2020/02/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/02/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/02/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/02/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/02/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/02/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/03/index.html b/en/archives/2020/03/index.html
new file mode 100644
index 0000000000..4aa0c86815
--- /dev/null
+++ b/en/archives/2020/03/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/2020/03/page/2/">2</a><a class="extend next" rel="next" href="/en/archives/2020/03/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/03/page/2/index.html b/en/archives/2020/03/page/2/index.html
new file mode 100644
index 0000000000..6ffa2b0834
--- /dev/null
+++ b/en/archives/2020/03/page/2/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/03/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/03/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/03/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/03/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/03/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/04/index.html b/en/archives/2020/04/index.html
new file mode 100644
index 0000000000..4b11df6a60
--- /dev/null
+++ b/en/archives/2020/04/index.html
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/04/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/04/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/04/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/04/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/04/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/05/index.html b/en/archives/2020/05/index.html
new file mode 100644
index 0000000000..7b3819d658
--- /dev/null
+++ b/en/archives/2020/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/07/index.html b/en/archives/2020/07/index.html
new file mode 100644
index 0000000000..e640519ba3
--- /dev/null
+++ b/en/archives/2020/07/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/07/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/07/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/07/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/07/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/07/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/08/index.html b/en/archives/2020/08/index.html
new file mode 100644
index 0000000000..7f5340bc4e
--- /dev/null
+++ b/en/archives/2020/08/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/11/index.html b/en/archives/2020/11/index.html
new file mode 100644
index 0000000000..e6f0c2ec76
--- /dev/null
+++ b/en/archives/2020/11/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/index.html b/en/archives/2020/index.html
new file mode 100644
index 0000000000..f97ed12067
--- /dev/null
+++ b/en/archives/2020/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/2020/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/2/index.html b/en/archives/2020/page/2/index.html
new file mode 100644
index 0000000000..ea34504bcc
--- /dev/null
+++ b/en/archives/2020/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/archives/2020/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/3/index.html b/en/archives/2020/page/3/index.html
new file mode 100644
index 0000000000..9f930a4625
--- /dev/null
+++ b/en/archives/2020/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><a class="page-number" href="/en/archives/2020/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/archives/2020/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/4/index.html b/en/archives/2020/page/4/index.html
new file mode 100644
index 0000000000..48cbc97c64
--- /dev/null
+++ b/en/archives/2020/page/4/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/en/archives/2020/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/5/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/5/index.html b/en/archives/2020/page/5/index.html
new file mode 100644
index 0000000000..3a09411e08
--- /dev/null
+++ b/en/archives/2020/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/4/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/en/archives/2020/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/6/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/6/index.html b/en/archives/2020/page/6/index.html
new file mode 100644
index 0000000000..4d7aaead7b
--- /dev/null
+++ b/en/archives/2020/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/5/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/en/archives/2020/page/7/">7</a><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/7/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/7/index.html b/en/archives/2020/page/7/index.html
new file mode 100644
index 0000000000..297544d2ab
--- /dev/null
+++ b/en/archives/2020/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/6/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/en/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/en/archives/2020/page/8/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2020/page/8/index.html b/en/archives/2020/page/8/index.html
new file mode 100644
index 0000000000..74c1825a5e
--- /dev/null
+++ b/en/archives/2020/page/8/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2020/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2020/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2020/page/7/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2020/page/7/">7</a><span class="page-number current">8</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2020/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2021/05/index.html b/en/archives/2021/05/index.html
new file mode 100644
index 0000000000..b6afd4afbd
--- /dev/null
+++ b/en/archives/2021/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2021/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2021/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2021/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2021/index.html b/en/archives/2021/index.html
new file mode 100644
index 0000000000..85ee9419a7
--- /dev/null
+++ b/en/archives/2021/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2021/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2021/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2021/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/03/index.html b/en/archives/2022/03/index.html
new file mode 100644
index 0000000000..48362ddf8a
--- /dev/null
+++ b/en/archives/2022/03/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/06/index.html b/en/archives/2022/06/index.html
new file mode 100644
index 0000000000..d62d41311a
--- /dev/null
+++ b/en/archives/2022/06/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/2022/06/page/2/">2</a><a class="extend next" rel="next" href="/en/archives/2022/06/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/06/page/2/index.html b/en/archives/2022/06/page/2/index.html
new file mode 100644
index 0000000000..2f572c19c7
--- /dev/null
+++ b/en/archives/2022/06/page/2/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/06/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/06/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2022/06/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2022/06/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/06/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/08/index.html b/en/archives/2022/08/index.html
new file mode 100644
index 0000000000..3b337f6d3d
--- /dev/null
+++ b/en/archives/2022/08/index.html
@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/index.html b/en/archives/2022/index.html
new file mode 100644
index 0000000000..9c5f8e9c6d
--- /dev/null
+++ b/en/archives/2022/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/2022/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2022/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/page/2/index.html b/en/archives/2022/page/2/index.html
new file mode 100644
index 0000000000..bbd5b1fd44
--- /dev/null
+++ b/en/archives/2022/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2022/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2022/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/archives/2022/page/3/">3</a><a class="page-number" href="/en/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2022/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/page/3/index.html b/en/archives/2022/page/3/index.html
new file mode 100644
index 0000000000..d8793bf36b
--- /dev/null
+++ b/en/archives/2022/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2022/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2022/">1</a><a class="page-number" href="/en/archives/2022/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/en/archives/2022/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2022/page/4/index.html b/en/archives/2022/page/4/index.html
new file mode 100644
index 0000000000..dee274e4ac
--- /dev/null
+++ b/en/archives/2022/page/4/index.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2022/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2022/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/2022/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/2022/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/2022/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2022/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2023/09/index.html b/en/archives/2023/09/index.html
new file mode 100644
index 0000000000..225cdc8cc2
--- /dev/null
+++ b/en/archives/2023/09/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2023/09/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2023/09/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">Untitled</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2023/09/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/09/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/09/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/2023/index.html b/en/archives/2023/index.html
new file mode 100644
index 0000000000..2682dff61d
--- /dev/null
+++ b/en/archives/2023/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/2023/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/2023/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">Untitled</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/2023/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/index.html b/en/archives/index.html
new file mode 100644
index 0000000000..ab534017c5
--- /dev/null
+++ b/en/archives/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">Untitled</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/archives/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/10/index.html b/en/archives/page/10/index.html
new file mode 100644
index 0000000000..0ff1d7731c
--- /dev/null
+++ b/en/archives/page/10/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/9/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/en/archives/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/11/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/11/index.html b/en/archives/page/11/index.html
new file mode 100644
index 0000000000..3b25ac8dc9
--- /dev/null
+++ b/en/archives/page/11/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/10/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/en/archives/page/12/">12</a><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/12/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/12/index.html b/en/archives/page/12/index.html
new file mode 100644
index 0000000000..e2b02b4cfc
--- /dev/null
+++ b/en/archives/page/12/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/11/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/13/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/13/index.html b/en/archives/page/13/index.html
new file mode 100644
index 0000000000..28e75dbb15
--- /dev/null
+++ b/en/archives/page/13/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/12/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/12/">12</a><span class="page-number current">13</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/2/index.html b/en/archives/page/2/index.html
new file mode 100644
index 0000000000..80c2f5f53f
--- /dev/null
+++ b/en/archives/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/archives/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/3/index.html b/en/archives/page/3/index.html
new file mode 100644
index 0000000000..8e4c1b57fe
--- /dev/null
+++ b/en/archives/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><a class="page-number" href="/en/archives/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/archives/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/4/index.html b/en/archives/page/4/index.html
new file mode 100644
index 0000000000..5a020d33bb
--- /dev/null
+++ b/en/archives/page/4/index.html
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/en/archives/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/5/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/5/index.html b/en/archives/page/5/index.html
new file mode 100644
index 0000000000..c296af4ac2
--- /dev/null
+++ b/en/archives/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/4/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/en/archives/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/6/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/6/index.html b/en/archives/page/6/index.html
new file mode 100644
index 0000000000..721e76e740
--- /dev/null
+++ b/en/archives/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/5/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/en/archives/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/7/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/7/index.html b/en/archives/page/7/index.html
new file mode 100644
index 0000000000..fa004afc23
--- /dev/null
+++ b/en/archives/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/6/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/en/archives/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/8/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/8/index.html b/en/archives/page/8/index.html
new file mode 100644
index 0000000000..fd2b1bc6df
--- /dev/null
+++ b/en/archives/page/8/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/7/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/en/archives/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/9/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/archives/page/9/index.html b/en/archives/page/9/index.html
new file mode 100644
index 0000000000..500a6c5a00
--- /dev/null
+++ b/en/archives/page/9/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/archives/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/archives/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Archive | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">Good! 128 posts in total. Keep on posting.</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/archives/page/8/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/en/archives/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/en/archives/page/13/">13</a><a class="extend next" rel="next" href="/en/archives/page/10/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/archives/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Database/Postgresql/index.html b/en/categories/Database/Postgresql/index.html
new file mode 100644
index 0000000000..6fcd50df63
--- /dev/null
+++ b/en/categories/Database/Postgresql/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Database/Postgresql/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Database/Postgresql/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Postgresql | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Postgresql
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Database/Postgresql/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/Postgresql/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/Postgresql/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Database/index.html b/en/categories/Database/index.html
new file mode 100644
index 0000000000..3a0cc8bb19
--- /dev/null
+++ b/en/categories/Database/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Database/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Database/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Database | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Database
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Database/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Docker/index.html b/en/categories/Docker/index.html
new file mode 100644
index 0000000000..1c895babfa
--- /dev/null
+++ b/en/categories/Docker/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Infra/Docker/index.html b/en/categories/Infra/Docker/index.html
new file mode 100644
index 0000000000..beb4d1d303
--- /dev/null
+++ b/en/categories/Infra/Docker/index.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infra/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infra/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infra/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..69db8060a6
--- /dev/null
+++ "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html" "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
new file mode 100644
index 0000000000..8a278e1552
--- /dev/null
+++ "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Squid | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Squid
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html" "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..607cf684d4
--- /dev/null
+++ "b/en/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Infra/index.html b/en/categories/Infra/index.html
new file mode 100644
index 0000000000..ad71d533ca
--- /dev/null
+++ b/en/categories/Infra/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infra/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infra/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Infra | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infra
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infra/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Infrastructure/index.html b/en/categories/Infrastructure/index.html
new file mode 100644
index 0000000000..8a31b1ab3d
--- /dev/null
+++ b/en/categories/Infrastructure/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Infrastructure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Infrastructure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Infrastructure | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infrastructure
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Infrastructure/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infrastructure/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infrastructure/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Linux/Oracle/Docker/index.html b/en/categories/Linux/Oracle/Docker/index.html
new file mode 100644
index 0000000000..11b32875e2
--- /dev/null
+++ b/en/categories/Linux/Oracle/Docker/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Linux/Oracle/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Linux/Oracle/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Linux/Oracle/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Linux/Oracle/index.html b/en/categories/Linux/Oracle/index.html
new file mode 100644
index 0000000000..ed6df54946
--- /dev/null
+++ b/en/categories/Linux/Oracle/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Linux/Oracle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Linux/Oracle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Oracle | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Oracle
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Linux/Oracle/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Linux/RPM/index.html b/en/categories/Linux/RPM/index.html
new file mode 100644
index 0000000000..5dc046212b
--- /dev/null
+++ b/en/categories/Linux/RPM/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Linux/RPM/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Linux/RPM/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: RPM | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">RPM
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Linux/RPM/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/RPM/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/RPM/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/Linux/index.html b/en/categories/Linux/index.html
new file mode 100644
index 0000000000..50e3ba97ee
--- /dev/null
+++ b/en/categories/Linux/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Linux
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/NodeJS/Npm/index.html b/en/categories/NodeJS/Npm/index.html
new file mode 100644
index 0000000000..46741c9df5
--- /dev/null
+++ b/en/categories/NodeJS/Npm/index.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/NodeJS/Npm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/NodeJS/Npm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Npm | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Npm
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/NodeJS/Npm/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/Npm/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/Npm/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/NodeJS/index.html b/en/categories/NodeJS/index.html
new file mode 100644
index 0000000000..2e0cdcaec3
--- /dev/null
+++ b/en/categories/NodeJS/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/NodeJS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/NodeJS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: NodeJS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">NodeJS
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/NodeJS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/OracleLinux/index.html b/en/categories/OracleLinux/index.html
new file mode 100644
index 0000000000..24cf40cb9a
--- /dev/null
+++ b/en/categories/OracleLinux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/OracleLinux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/OracleLinux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: OracleLinux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">OracleLinux
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/OracleLinux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/OracleLinux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/OracleLinux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/en/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..ff23b1a430
--- /dev/null
+++ "b/en/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/Web\346\234\215\345\212\241\345\231\250/index.html" "b/en/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..8911d16a3e
--- /dev/null
+++ "b/en/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/index.html b/en/categories/index.html
new file mode 100644
index 0000000000..04194d3848
--- /dev/null
+++ b/en/categories/index.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="分类">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-08-29T09:40:17.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:03.348Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>分类 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="en">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">分类
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>CATEGORIES</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="category-all-page">
+            <div class="category-all-title">
+              54 categories in total
+            </div>
+            <div class="category-all">
+              <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/Postgresql/">Postgresql</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Docker/">Docker</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/">Infra</a><span class="category-list-count">9</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Docker/">Docker</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">Squid</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infrastructure/">Infrastructure</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/">Oracle</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/Docker/">Docker</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/RPM/">RPM</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/">NodeJS</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/Npm/">Npm</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/OracleLinux/">OracleLinux</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/linux/">linux</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/linux/systemctl/">systemctl</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">前端工程化</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">Webpack</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前端开发规范</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">前端技术</a><span class="category-list-count">43</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">CSS3</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">前端常见知识点整理</a><span class="category-list-count">23</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">前端问题</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">微信</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">计算机通识</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">React</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">Vue</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">后端开发</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">Go语言</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">大前端</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">全栈</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">客户端技术</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">移动开发</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">效率工具</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">Labrary</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">VSCode插件</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">杂七杂八</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">博客技巧</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9E%B6%E6%9E%84/">架构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">源码原理</a><span class="category-list-count">14</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">自己动手实现系列</a><span class="category-list-count">13</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">自我提升</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">人生思考</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">杂记随感</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">虚拟化</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">Docker Compose</a><span class="category-list-count">1</span></li></ul></li></ul>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>CATEGORIES</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/linux/index.html b/en/categories/linux/index.html
new file mode 100644
index 0000000000..3a8b2616e9
--- /dev/null
+++ b/en/categories/linux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">linux
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/categories/linux/systemctl/index.html b/en/categories/linux/systemctl/index.html
new file mode 100644
index 0000000000..6df125340e
--- /dev/null
+++ b/en/categories/linux/systemctl/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/linux/systemctl/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/linux/systemctl/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: systemctl | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">systemctl
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/linux/systemctl/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/systemctl/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/systemctl/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html" "b/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
new file mode 100644
index 0000000000..525765593d
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Webpack | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Webpack
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" "b/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
new file mode 100644
index 0000000000..b5d67201aa
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端工程化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端工程化
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/en/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..3bf6b1b946
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端开发规范
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
new file mode 100644
index 0000000000..b4679289ba
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: CSS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
new file mode 100644
index 0000000000..b9a6f170a7
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: CSS3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS3
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..2b221b60f3
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
new file mode 100644
index 0000000000..8a47d4cc42
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
new file mode 100644
index 0000000000..ab72c6bdbe
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
new file mode 100644
index 0000000000..e7e4d58707
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
new file mode 100644
index 0000000000..d452284d96
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><span class="page-number current">5</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
new file mode 100644
index 0000000000..cc00c83f2e
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 兼容性 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">兼容性
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
new file mode 100644
index 0000000000..cecbdc5bdc
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..80669505db
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
new file mode 100644
index 0000000000..75edce8edd
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><a class="page-number" href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><span class="page-number current">3</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
new file mode 100644
index 0000000000..d00090773b
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端问题 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端问题
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
new file mode 100644
index 0000000000..0a6f74e021
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 微信 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">微信
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html" "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
new file mode 100644
index 0000000000..7bbe8764a5
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 计算机通识 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">计算机通识
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html" "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
new file mode 100644
index 0000000000..f4dcc1eb4b
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: React | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">React
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html" "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
new file mode 100644
index 0000000000..7bdad711d7
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Vue | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Vue
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html" "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
new file mode 100644
index 0000000000..c4e082a274
--- /dev/null
+++ "b/en/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 前端框架 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端框架
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html" "b/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
new file mode 100644
index 0000000000..8f89d0333b
--- /dev/null
+++ "b/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Go语言 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Go语言
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html" "b/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..9be79540e8
--- /dev/null
+++ "b/en/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 后端开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">后端开发
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\244\247\345\211\215\347\253\257/index.html" "b/en/categories/\345\244\247\345\211\215\347\253\257/index.html"
new file mode 100644
index 0000000000..2b65235f78
--- /dev/null
+++ "b/en/categories/\345\244\247\345\211\215\347\253\257/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 大前端 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">大前端
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html" "b/en/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
new file mode 100644
index 0000000000..9ed66a01ef
--- /dev/null
+++ "b/en/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 全栈 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">全栈
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html" "b/en/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..5c1b408380
--- /dev/null
+++ "b/en/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 客户端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">客户端技术
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html" "b/en/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..4cbf2bfe1c
--- /dev/null
+++ "b/en/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 移动开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">移动开发
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html" "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
new file mode 100644
index 0000000000..36f7d1c4a5
--- /dev/null
+++ "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Labrary | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Labrary
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html" "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..186edfa0af
--- /dev/null
+++ "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: VSCode插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">VSCode插件
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html" "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
new file mode 100644
index 0000000000..c62d76ffe8
--- /dev/null
+++ "b/en/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 效率工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">效率工具
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html" "b/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
new file mode 100644
index 0000000000..08d544e9d4
--- /dev/null
+++ "b/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 杂七杂八 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂七杂八
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html" "b/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
new file mode 100644
index 0000000000..2f7f9d0f23
--- /dev/null
+++ "b/en/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 博客技巧 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">博客技巧
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\236\266\346\236\204/index.html" "b/en/categories/\346\236\266\346\236\204/index.html"
new file mode 100644
index 0000000000..0ba5187471
--- /dev/null
+++ "b/en/categories/\346\236\266\346\236\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%9E%B6%E6%9E%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%9E%B6%E6%9E%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 架构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">架构
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html" "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
new file mode 100644
index 0000000000..c87ea378c7
--- /dev/null
+++ "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">2</a><a class="extend next" rel="next" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html" "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..df773672a1
--- /dev/null
+++ "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html" "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
new file mode 100644
index 0000000000..d8c7b05923
--- /dev/null
+++ "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">2</a><a class="extend next" rel="next" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html" "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
new file mode 100644
index 0000000000..d78c381b66
--- /dev/null
+++ "b/en/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html" "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
new file mode 100644
index 0000000000..f0bc395e08
--- /dev/null
+++ "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 自我提升 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自我提升
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html" "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
new file mode 100644
index 0000000000..6e38082c6d
--- /dev/null
+++ "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 人生思考 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">人生思考
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html" "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
new file mode 100644
index 0000000000..b3b6311f03
--- /dev/null
+++ "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 杂记随感 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂记随感
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html" "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
new file mode 100644
index 0000000000..3713cde68e
--- /dev/null
+++ "b/en/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">读书笔记
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html" "b/en/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
new file mode 100644
index 0000000000..0a5ef61d4d
--- /dev/null
+++ "b/en/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: Docker Compose | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker Compose
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/en/categories/\350\231\232\346\213\237\345\214\226/index.html" "b/en/categories/\350\231\232\346\213\237\345\214\226/index.html"
new file mode 100644
index 0000000000..807a316b09
--- /dev/null
+++ "b/en/categories/\350\231\232\346\213\237\345\214\226/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>Category: 虚拟化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">虚拟化
+          <small>Category</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/index.html b/en/index.html
new file mode 100644
index 0000000000..1d106d0ce2
--- /dev/null
+++ b/en/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2023/09/20/test/" class="post-title-link" itemprop="url">test</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2023-09-20 18:33:23 / Modified: 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/en/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/10/index.html b/en/page/10/index.html
new file mode 100644
index 0000000000..3cff73e429
--- /dev/null
+++ b/en/page/10/index.html
@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" class="post-title-link" itemprop="url">OracleLinux内核从uek切换到uek</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/9/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/en/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/11/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/100/index.html b/en/page/100/index.html
new file mode 100644
index 0000000000..f1893a67dc
--- /dev/null
+++ b/en/page/100/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/100/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/100/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-copy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 深浅拷贝</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/99/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/99/">99</a><span class="page-number current">100</span><a class="page-number" href="/en/page/101/">101</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/101/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/100/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/100/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/100/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/101/index.html b/en/page/101/index.html
new file mode 100644
index 0000000000..839cf482b3
--- /dev/null
+++ b/en/page/101/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/101/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/101/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-new/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/100/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/100/">100</a><span class="page-number current">101</span><a class="page-number" href="/en/page/102/">102</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/102/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/101/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/101/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/101/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/102/index.html b/en/page/102/index.html
new file mode 100644
index 0000000000..010f41dea2
--- /dev/null
+++ b/en/page/102/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/102/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/102/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-Closure/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 闭包</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/101/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/101/">101</a><span class="page-number current">102</span><a class="page-number" href="/en/page/103/">103</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/103/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/102/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/102/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/102/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/103/index.html b/en/page/103/index.html
new file mode 100644
index 0000000000..08ca0f074a
--- /dev/null
+++ b/en/page/103/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/103/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/103/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 执行上下文</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/102/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/102/">102</a><span class="page-number current">103</span><a class="page-number" href="/en/page/104/">104</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/104/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/103/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/103/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/103/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/104/index.html b/en/page/104/index.html
new file mode 100644
index 0000000000..4363cbd170
--- /dev/null
+++ b/en/page/104/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/104/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/104/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-this/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- this</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/103/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/103/">103</a><span class="page-number current">104</span><a class="page-number" href="/en/page/105/">105</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/105/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/104/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/104/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/104/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/105/index.html b/en/page/105/index.html
new file mode 100644
index 0000000000..c10600e46f
--- /dev/null
+++ b/en/page/105/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/105/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/105/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-instanceof/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- instanceof</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/104/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/104/">104</a><span class="page-number current">105</span><a class="page-number" href="/en/page/106/">106</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/106/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/105/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/105/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/105/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/106/index.html b/en/page/106/index.html
new file mode 100644
index 0000000000..ef808f0aca
--- /dev/null
+++ b/en/page/106/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/106/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/106/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/21-Day-Challenge-01/" class="post-title-link" itemprop="url">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/02/21-Day-Challenge-01/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/105/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/105/">105</a><span class="page-number current">106</span><a class="page-number" href="/en/page/107/">107</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/107/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/106/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/106/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/106/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/107/index.html b/en/page/107/index.html
new file mode 100644
index 0000000000..bb5697ceac
--- /dev/null
+++ b/en/page/107/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/107/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/107/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-prototype/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 原型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/02/FE-guide-prototype/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/106/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/106/">106</a><span class="page-number current">107</span><a class="page-number" href="/en/page/108/">108</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/108/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/107/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/107/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/107/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/108/index.html b/en/page/108/index.html
new file mode 100644
index 0000000000..6dd0a8e075
--- /dev/null
+++ b/en/page/108/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/108/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/108/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/02/FE-guide-dataType/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/02/FE-guide-dataType/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/107/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/107/">107</a><span class="page-number current">108</span><a class="page-number" href="/en/page/109/">109</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/109/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/108/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/108/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/108/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/109/index.html b/en/page/109/index.html
new file mode 100644
index 0000000000..b2c8ccf57a
--- /dev/null
+++ b/en/page/109/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/109/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/109/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/01/Hello-2020/" class="post-title-link" itemprop="url">你好2020</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/108/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/108/">108</a><span class="page-number current">109</span><a class="page-number" href="/en/page/110/">110</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/110/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/109/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/109/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/109/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/11/index.html b/en/page/11/index.html
new file mode 100644
index 0000000000..680a207e47
--- /dev/null
+++ b/en/page/11/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" class="post-title-link" itemprop="url">搭建Docker私有仓库</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/10/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/en/page/12/">12</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/12/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/110/index.html b/en/page/110/index.html
new file mode 100644
index 0000000000..e519af9737
--- /dev/null
+++ b/en/page/110/index.html
@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/110/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/110/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/31/GoodBye-2019/" class="post-title-link" itemprop="url">再见2019</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/109/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/109/">109</a><span class="page-number current">110</span><a class="page-number" href="/en/page/111/">111</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/111/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/110/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/110/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/110/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/111/index.html b/en/page/111/index.html
new file mode 100644
index 0000000000..2ec7acae61
--- /dev/null
+++ b/en/page/111/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/111/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/111/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/31/gitlab-cicd/" class="post-title-link" itemprop="url">基于 GitLab CI/CD 的自动化构建、发布实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2019-12-31 08:22:22 / Modified: 08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2019/12/31/gitlab-cicd/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/110/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/110/">110</a><span class="page-number current">111</span><a class="page-number" href="/en/page/112/">112</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/112/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/111/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/111/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/111/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/112/index.html b/en/page/112/index.html
new file mode 100644
index 0000000000..fff5c19e91
--- /dev/null
+++ b/en/page/112/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/112/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/112/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/31/weichat-h5-compatibility/" class="post-title-link" itemprop="url">微信的H5兼容方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2019/12/31/weichat-h5-compatibility/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/111/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/111/">111</a><span class="page-number current">112</span><a class="page-number" href="/en/page/113/">113</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/113/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/112/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/112/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/112/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/113/index.html b/en/page/113/index.html
new file mode 100644
index 0000000000..79e484b851
--- /dev/null
+++ b/en/page/113/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/113/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/113/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/30/begin-learn-java/" class="post-title-link" itemprop="url">重拾java开发技能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2019/12/30/begin-learn-java/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/112/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/112/">112</a><span class="page-number current">113</span><a class="page-number" href="/en/page/114/">114</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/114/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/113/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/113/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/113/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/114/index.html b/en/page/114/index.html
new file mode 100644
index 0000000000..0f049d099c
--- /dev/null
+++ b/en/page/114/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/114/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/114/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/27/Actions/" class="post-title-link" itemprop="url">巧妙利用Acitons进行博客的自动构建</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2019/12/27/Actions/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/113/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/113/">113</a><span class="page-number current">114</span><a class="page-number" href="/en/page/115/">115</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/115/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/114/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/114/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/114/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/115/index.html b/en/page/115/index.html
new file mode 100644
index 0000000000..5a52282800
--- /dev/null
+++ b/en/page/115/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/115/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/115/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2019/12/27/Vue-Component-Communication/" class="post-title-link" itemprop="url">前端面试Vue篇：Vue组件通信的几种方式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2019/12/27/Vue-Component-Communication/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/114/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/114/">114</a><span class="page-number current">115</span><a class="page-number" href="/en/page/116/">116</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/116/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/115/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/115/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/115/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/116/index.html b/en/page/116/index.html
new file mode 100644
index 0000000000..528f4d4a35
--- /dev/null
+++ b/en/page/116/index.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/116/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/116/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/12/12/Git-Shell/" class="post-title-link" itemprop="url">Git的常用命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/115/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/115/">115</a><span class="page-number current">116</span><a class="page-number" href="/en/page/117/">117</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/117/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/116/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/116/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/116/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/117/index.html b/en/page/117/index.html
new file mode 100644
index 0000000000..47ade9914a
--- /dev/null
+++ b/en/page/117/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/117/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/117/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/10/12/web-quanzhan/" class="post-title-link" itemprop="url">《Web全栈工程师的自我修养》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/10/12/web-quanzhan/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/116/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/116/">116</a><span class="page-number current">117</span><a class="page-number" href="/en/page/118/">118</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/118/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/117/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/117/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/117/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/118/index.html b/en/page/118/index.html
new file mode 100644
index 0000000000..3020791492
--- /dev/null
+++ b/en/page/118/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/118/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/118/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/10/12/VSCode-ESLint/" class="post-title-link" itemprop="url">VSCode ESLint JS代码静态检测工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/10/12/VSCode-ESLint/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/117/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/117/">117</a><span class="page-number current">118</span><a class="page-number" href="/en/page/119/">119</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/119/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/118/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/118/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/118/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/119/index.html b/en/page/119/index.html
new file mode 100644
index 0000000000..9dddc5a6e4
--- /dev/null
+++ b/en/page/119/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/119/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/119/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/10/12/us-gitment/" class="post-title-link" itemprop="url">给博客添加基于github-issue的评论系统</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/10/12/us-gitment/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/118/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/118/">118</a><span class="page-number current">119</span><a class="page-number" href="/en/page/120/">120</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/120/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/119/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/119/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/119/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/12/index.html b/en/page/12/index.html
new file mode 100644
index 0000000000..fb57b013b2
--- /dev/null
+++ b/en/page/12/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/linux-scp/" class="post-title-link" itemprop="url">在linux之间传输文件的命令scp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/11/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/en/page/13/">13</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/13/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/120/index.html b/en/page/120/index.html
new file mode 100644
index 0000000000..4816ec20c4
--- /dev/null
+++ b/en/page/120/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/120/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/120/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" class="post-title-link" itemprop="url">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/119/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/119/">119</a><span class="page-number current">120</span><a class="page-number" href="/en/page/121/">121</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/121/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/120/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/120/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/120/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/121/index.html b/en/page/121/index.html
new file mode 100644
index 0000000000..e02c736928
--- /dev/null
+++ b/en/page/121/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/121/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/121/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/08/30/Vue-basic/" class="post-title-link" itemprop="url">Vue基础</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/08/30/Vue-basic/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/120/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/120/">120</a><span class="page-number current">121</span><a class="page-number" href="/en/page/122/">122</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/122/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/121/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/121/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/121/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/122/index.html b/en/page/122/index.html
new file mode 100644
index 0000000000..831d54dc95
--- /dev/null
+++ b/en/page/122/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/122/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/122/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/08/30/Vue-VSCode-Snippets/" class="post-title-link" itemprop="url">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/08/30/Vue-VSCode-Snippets/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/121/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/121/">121</a><span class="page-number current">122</span><a class="page-number" href="/en/page/123/">123</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/123/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/122/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/122/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/122/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/123/index.html b/en/page/123/index.html
new file mode 100644
index 0000000000..8e885fd1e4
--- /dev/null
+++ b/en/page/123/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/123/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/123/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/08/30/npm-source/" class="post-title-link" itemprop="url">npm相关资料</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/08/30/npm-source/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/122/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/122/">122</a><span class="page-number current">123</span><a class="page-number" href="/en/page/124/">124</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/124/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/123/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/123/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/123/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/124/index.html b/en/page/124/index.html
new file mode 100644
index 0000000000..e5feed7bf6
--- /dev/null
+++ b/en/page/124/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/124/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/124/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2017/08/29/browser-incompatibility-problem-solution/" class="post-title-link" itemprop="url">浏览器兼容性问题解决方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2017/08/29/browser-incompatibility-problem-solution/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/123/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/123/">123</a><span class="page-number current">124</span><a class="page-number" href="/en/page/125/">125</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/125/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/124/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/124/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/124/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/125/index.html b/en/page/125/index.html
new file mode 100644
index 0000000000..5d7b696bb9
--- /dev/null
+++ b/en/page/125/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/125/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/125/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" class="post-title-link" itemprop="url">《晨间日记的奇迹》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/124/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/124/">124</a><span class="page-number current">125</span><a class="page-number" href="/en/page/126/">126</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/126/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/125/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/125/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/125/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/126/index.html b/en/page/126/index.html
new file mode 100644
index 0000000000..86aaeeaf05
--- /dev/null
+++ b/en/page/126/index.html
@@ -0,0 +1,696 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/126/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/126/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2015/12/31/Read-Let-your-boss-promote-you/" class="post-title-link" itemprop="url">《让老板提拔你》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/125/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/125/">125</a><span class="page-number current">126</span><a class="page-number" href="/en/page/127/">127</a><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/127/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/126/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/126/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/126/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/127/index.html b/en/page/127/index.html
new file mode 100644
index 0000000000..9a666d071b
--- /dev/null
+++ b/en/page/127/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/127/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/127/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2013/06/26/CSS-Triangle-Circle/" class="post-title-link" itemprop="url">CSS border三角、圆角图形生成技术详解</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2013/06/26/CSS-Triangle-Circle/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/126/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/126/">126</a><span class="page-number current">127</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/128/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/127/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/127/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/127/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/128/index.html b/en/page/128/index.html
new file mode 100644
index 0000000000..0bbcb36b91
--- /dev/null
+++ b/en/page/128/index.html
@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/128/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/128/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2013/06/17/Read-High-Performance-JavaScript/" class="post-title-link" itemprop="url">《高性能JAVASCRIPT》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/127/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/127/">127</a><span class="page-number current">128</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/128/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/128/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/128/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/13/index.html b/en/page/13/index.html
new file mode 100644
index 0000000000..bb3cda5fe4
--- /dev/null
+++ b/en/page/13/index.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/30/nginx-timeout/" class="post-title-link" itemprop="url">nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/12/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/12/">12</a><span class="page-number current">13</span><a class="page-number" href="/en/page/14/">14</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/14/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/14/index.html b/en/page/14/index.html
new file mode 100644
index 0000000000..a4d5707391
--- /dev/null
+++ b/en/page/14/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/14/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/14/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全（2）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/13/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/13/">13</a><span class="page-number current">14</span><a class="page-number" href="/en/page/15/">15</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/15/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/14/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/14/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/14/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/15/index.html b/en/page/15/index.html
new file mode 100644
index 0000000000..475b4abd2a
--- /dev/null
+++ b/en/page/15/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/15/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/15/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" class="post-title-link" itemprop="url">架构实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/14/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/14/">14</a><span class="page-number current">15</span><a class="page-number" href="/en/page/16/">16</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/16/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/15/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/15/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/15/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/16/index.html b/en/page/16/index.html
new file mode 100644
index 0000000000..d40ddb0175
--- /dev/null
+++ b/en/page/16/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/16/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/16/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/09/http_stub_status_module/" class="post-title-link" itemprop="url">http_stub_status_module Nginx的性能模块</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/15/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/15/">15</a><span class="page-number current">16</span><a class="page-number" href="/en/page/17/">17</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/17/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/16/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/16/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/16/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/17/index.html b/en/page/17/index.html
new file mode 100644
index 0000000000..9b48bd19a5
--- /dev/null
+++ b/en/page/17/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/17/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/17/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" class="post-title-link" itemprop="url">Hexo在Github发布之后自定义域名的配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/16/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/16/">16</a><span class="page-number current">17</span><a class="page-number" href="/en/page/18/">18</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/18/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/17/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/17/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/17/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/18/index.html b/en/page/18/index.html
new file mode 100644
index 0000000000..02e2eaf30f
--- /dev/null
+++ b/en/page/18/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/18/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/18/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" class="post-title-link" itemprop="url">Nginx指令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/17/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/17/">17</a><span class="page-number current">18</span><a class="page-number" href="/en/page/19/">19</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/19/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/18/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/18/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/18/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/19/index.html b/en/page/19/index.html
new file mode 100644
index 0000000000..0f7a167c1c
--- /dev/null
+++ b/en/page/19/index.html
@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/19/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/19/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">Docker 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/18/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/18/">18</a><span class="page-number current">19</span><a class="page-number" href="/en/page/20/">20</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/20/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/19/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/19/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/19/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/2/index.html b/en/page/2/index.html
new file mode 100644
index 0000000000..3df579e4eb
--- /dev/null
+++ b/en/page/2/index.html
@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" class="post-title-link" itemprop="url">Untitled</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="page-number current">2</span><a class="page-number" href="/en/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/3/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/20/index.html b/en/page/20/index.html
new file mode 100644
index 0000000000..85153c9f7a
--- /dev/null
+++ b/en/page/20/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" class="post-title-link" itemprop="url">Docker网络模式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/19/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/19/">19</a><span class="page-number current">20</span><a class="page-number" href="/en/page/21/">21</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/21/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/20/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/20/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/20/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/21/index.html b/en/page/21/index.html
new file mode 100644
index 0000000000..3dab89b27c
--- /dev/null
+++ b/en/page/21/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/21/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/21/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" class="post-title-link" itemprop="url">Docker容器端口映射</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/20/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/20/">20</a><span class="page-number current">21</span><a class="page-number" href="/en/page/22/">22</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/22/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/21/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/21/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/21/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/22/index.html b/en/page/22/index.html
new file mode 100644
index 0000000000..95bea8ed3d
--- /dev/null
+++ b/en/page/22/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/22/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/22/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" class="post-title-link" itemprop="url">Docker数据卷</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/21/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/21/">21</a><span class="page-number current">22</span><a class="page-number" href="/en/page/23/">23</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/23/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/22/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/22/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/22/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/23/index.html b/en/page/23/index.html
new file mode 100644
index 0000000000..7f1ace403c
--- /dev/null
+++ b/en/page/23/index.html
@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/23/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/23/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/02/DockerFile/" class="post-title-link" itemprop="url">DockerFile</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/22/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/22/">22</a><span class="page-number current">23</span><a class="page-number" href="/en/page/24/">24</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/24/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/23/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/23/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/23/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/24/index.html b/en/page/24/index.html
new file mode 100644
index 0000000000..bcb429d235
--- /dev/null
+++ b/en/page/24/index.html
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/24/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/24/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/GIT%20Standard/" class="post-title-link" itemprop="url">GIT Standard.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/23/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/23/">23</a><span class="page-number current">24</span><a class="page-number" href="/en/page/25/">25</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/25/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/24/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/24/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/24/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/25/index.html b/en/page/25/index.html
new file mode 100644
index 0000000000..45207290c4
--- /dev/null
+++ b/en/page/25/index.html
@@ -0,0 +1,736 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/25/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/25/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Restful API 的设计规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/24/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/24/">24</a><span class="page-number current">25</span><a class="page-number" href="/en/page/26/">26</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/26/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/25/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/25/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/25/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/26/index.html b/en/page/26/index.html
new file mode 100644
index 0000000000..f7396c89b2
--- /dev/null
+++ b/en/page/26/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/26/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/26/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">CodeReview代码审查指南.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/25/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/25/">25</a><span class="page-number current">26</span><a class="page-number" href="/en/page/27/">27</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/27/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/26/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/26/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/26/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/27/index.html b/en/page/27/index.html
new file mode 100644
index 0000000000..1c918e6bc5
--- /dev/null
+++ b/en/page/27/index.html
@@ -0,0 +1,570 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/27/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/27/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">前后端分离开发规范</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/26/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/26/">26</a><span class="page-number current">27</span><a class="page-number" href="/en/page/28/">28</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/28/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/27/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/27/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/27/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/28/index.html b/en/page/28/index.html
new file mode 100644
index 0000000000..1be9f2e3d6
--- /dev/null
+++ b/en/page/28/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/28/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/28/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">前后端分离开发指南</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/27/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/27/">27</a><span class="page-number current">28</span><a class="page-number" href="/en/page/29/">29</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/29/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/28/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/28/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/28/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/29/index.html b/en/page/29/index.html
new file mode 100644
index 0000000000..ac7e002784
--- /dev/null
+++ b/en/page/29/index.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/29/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/29/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Electron编码规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/28/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/28/">28</a><span class="page-number current">29</span><a class="page-number" href="/en/page/30/">30</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/30/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/29/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/29/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/29/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/3/index.html b/en/page/3/index.html
new file mode 100644
index 0000000000..0833f6ac09
--- /dev/null
+++ b/en/page/3/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/2/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><a class="page-number" href="/en/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/en/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/4/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/30/index.html b/en/page/30/index.html
new file mode 100644
index 0000000000..8326794787
--- /dev/null
+++ b/en/page/30/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/30/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/30/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/squid/" class="post-title-link" itemprop="url">Squid 服务器学习笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/29/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/29/">29</a><span class="page-number current">30</span><a class="page-number" href="/en/page/31/">31</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/31/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/30/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/30/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/30/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/31/index.html b/en/page/31/index.html
new file mode 100644
index 0000000000..2dfff2c1d2
--- /dev/null
+++ b/en/page/31/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/31/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/31/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" class="post-title-link" itemprop="url">前端开发插件</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/30/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/30/">30</a><span class="page-number current">31</span><a class="page-number" href="/en/page/32/">32</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/32/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/31/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/31/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/31/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/32/index.html b/en/page/32/index.html
new file mode 100644
index 0000000000..c67d5f70d7
--- /dev/null
+++ b/en/page/32/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/32/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/32/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" class="post-title-link" itemprop="url">搞懂EventLoop</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/31/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/31/">31</a><span class="page-number current">32</span><a class="page-number" href="/en/page/33/">33</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/33/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/32/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/32/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/32/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/33/index.html b/en/page/33/index.html
new file mode 100644
index 0000000000..d7ac31db9c
--- /dev/null
+++ b/en/page/33/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/33/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/33/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" class="post-title-link" itemprop="url">数组方法哪些有副作用，一目了然！</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/32/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/32/">32</a><span class="page-number current">33</span><a class="page-number" href="/en/page/34/">34</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/34/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/33/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/33/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/33/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/34/index.html b/en/page/34/index.html
new file mode 100644
index 0000000000..3c9e3ba8c3
--- /dev/null
+++ b/en/page/34/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/34/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/34/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" class="post-title-link" itemprop="url">关于版本管理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/33/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/33/">33</a><span class="page-number current">34</span><a class="page-number" href="/en/page/35/">35</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/35/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/34/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/34/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/34/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/35/index.html b/en/page/35/index.html
new file mode 100644
index 0000000000..cbb2235f87
--- /dev/null
+++ b/en/page/35/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/35/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/35/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/34/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/34/">34</a><span class="page-number current">35</span><a class="page-number" href="/en/page/36/">36</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/36/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/35/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/35/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/35/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/36/index.html b/en/page/36/index.html
new file mode 100644
index 0000000000..25d46956be
--- /dev/null
+++ b/en/page/36/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/36/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/36/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/11/11/learn-ionic-1/" class="post-title-link" itemprop="url">从零开始：学习Ionic（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/11/11/learn-ionic-1/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/35/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/35/">35</a><span class="page-number current">36</span><a class="page-number" href="/en/page/37/">37</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/37/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/36/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/36/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/36/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/37/index.html b/en/page/37/index.html
new file mode 100644
index 0000000000..a0cfe57e00
--- /dev/null
+++ b/en/page/37/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/37/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/37/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/11/10/learn-cordova-1/" class="post-title-link" itemprop="url">从零开始：学习Cordova（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/11/10/learn-cordova-1/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/36/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/36/">36</a><span class="page-number current">37</span><a class="page-number" href="/en/page/38/">38</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/38/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/37/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/37/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/37/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/38/index.html b/en/page/38/index.html
new file mode 100644
index 0000000000..76f5e4cb95
--- /dev/null
+++ b/en/page/38/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/38/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/38/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/11/10/learn-go/" class="post-title-link" itemprop="url">从零开始：学习Go（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/11/10/learn-go/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/37/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/37/">37</a><span class="page-number current">38</span><a class="page-number" href="/en/page/39/">39</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/39/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/38/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/38/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/38/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/39/index.html b/en/page/39/index.html
new file mode 100644
index 0000000000..0ae281718c
--- /dev/null
+++ b/en/page/39/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/39/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/39/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" class="post-title-link" itemprop="url">Linux目录说明</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/38/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/38/">38</a><span class="page-number current">39</span><a class="page-number" href="/en/page/40/">40</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/40/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/39/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/39/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/39/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/4/index.html b/en/page/4/index.html
new file mode 100644
index 0000000000..f50d06c3ce
--- /dev/null
+++ b/en/page/4/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">Postgresql绿色版使用</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/3/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/en/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/5/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/40/index.html b/en/page/40/index.html
new file mode 100644
index 0000000000..0a41292c00
--- /dev/null
+++ b/en/page/40/index.html
@@ -0,0 +1,576 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/40/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/40/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">rpm命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/39/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/39/">39</a><span class="page-number current">40</span><a class="page-number" href="/en/page/41/">41</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/41/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/40/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/40/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/40/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/41/index.html b/en/page/41/index.html
new file mode 100644
index 0000000000..ce73dc24bf
--- /dev/null
+++ b/en/page/41/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/41/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/41/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/05/28/Prettier-Setting/" class="post-title-link" itemprop="url">Prettier格式化配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/05/28/Prettier-Setting/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/40/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/40/">40</a><span class="page-number current">41</span><a class="page-number" href="/en/page/42/">42</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/42/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/41/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/41/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/41/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/42/index.html b/en/page/42/index.html
new file mode 100644
index 0000000000..da7925144f
--- /dev/null
+++ b/en/page/42/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/42/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/42/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/05/14/css3-pointer-events/" class="post-title-link" itemprop="url">CSS3新属性-pointer-events</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/05/14/css3-pointer-events/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/41/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/41/">41</a><span class="page-number current">42</span><a class="page-number" href="/en/page/43/">43</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/43/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/42/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/42/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/42/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/43/index.html b/en/page/43/index.html
new file mode 100644
index 0000000000..447b0a1231
--- /dev/null
+++ b/en/page/43/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/43/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/43/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/16/what-is-npx/" class="post-title-link" itemprop="url">npx是什么</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/16/what-is-npx/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/42/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/42/">42</a><span class="page-number current">43</span><a class="page-number" href="/en/page/44/">44</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/44/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/43/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/43/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/43/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/44/index.html b/en/page/44/index.html
new file mode 100644
index 0000000000..c589b9a969
--- /dev/null
+++ b/en/page/44/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/44/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/44/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/16/0-vuecli-3-component/" class="post-title-link" itemprop="url">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/16/0-vuecli-3-component/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/43/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/43/">43</a><span class="page-number current">44</span><a class="page-number" href="/en/page/45/">45</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/45/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/44/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/44/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/44/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/45/index.html b/en/page/45/index.html
new file mode 100644
index 0000000000..59d57e3e0b
--- /dev/null
+++ b/en/page/45/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/45/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/45/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/15/node-sass-slow-problem/" class="post-title-link" itemprop="url">如何解决npm安装node-sass依赖慢的情况</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/15/node-sass-slow-problem/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/44/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/44/">44</a><span class="page-number current">45</span><a class="page-number" href="/en/page/46/">46</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/46/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/45/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/45/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/45/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/46/index.html b/en/page/46/index.html
new file mode 100644
index 0000000000..24856033e2
--- /dev/null
+++ b/en/page/46/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/46/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/46/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/15/talk-about-full-stack-big-fd/" class="post-title-link" itemprop="url">前端全栈和大前端有啥区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-04-15 15:59:00 / Modified: 15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/15/talk-about-full-stack-big-fd/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/45/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/45/">45</a><span class="page-number current">46</span><a class="page-number" href="/en/page/47/">47</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/47/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/46/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/46/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/46/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/47/index.html b/en/page/47/index.html
new file mode 100644
index 0000000000..b873b2427e
--- /dev/null
+++ b/en/page/47/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/47/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/47/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/07/Electron-Offline-Build/" class="post-title-link" itemprop="url">国内配置Electron开发环境的正确方式【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/07/Electron-Offline-Build/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/46/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/46/">46</a><span class="page-number current">47</span><a class="page-number" href="/en/page/48/">48</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/48/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/47/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/47/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/47/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/48/index.html b/en/page/48/index.html
new file mode 100644
index 0000000000..a3fbc7ff87
--- /dev/null
+++ b/en/page/48/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/48/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/48/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/07/webpack-uglifyjsplugin/" class="post-title-link" itemprop="url">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/07/webpack-uglifyjsplugin/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/47/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/47/">47</a><span class="page-number current">48</span><a class="page-number" href="/en/page/49/">49</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/49/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/48/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/48/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/48/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/49/index.html b/en/page/49/index.html
new file mode 100644
index 0000000000..f84f019a5f
--- /dev/null
+++ b/en/page/49/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/49/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/49/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/04/03/source-code-react-diff/" class="post-title-link" itemprop="url">React 源码剖析系列 － 不可思议的 react diff【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/04/03/source-code-react-diff/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/48/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/48/">48</a><span class="page-number current">49</span><a class="page-number" href="/en/page/50/">50</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/50/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/49/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/49/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/49/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/5/index.html b/en/page/5/index.html
new file mode 100644
index 0000000000..068cae46f4
--- /dev/null
+++ b/en/page/5/index.html
@@ -0,0 +1,565 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" class="post-title-link" itemprop="url">Nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/4/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/en/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/6/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/50/index.html b/en/page/50/index.html
new file mode 100644
index 0000000000..2b31976753
--- /dev/null
+++ b/en/page/50/index.html
@@ -0,0 +1,784 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/50/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/50/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/webpack-learning-1/" class="post-title-link" itemprop="url">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/49/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/49/">49</a><span class="page-number current">50</span><a class="page-number" href="/en/page/51/">51</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/51/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/50/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/50/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/50/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/51/index.html b/en/page/51/index.html
new file mode 100644
index 0000000000..e2a7feae00
--- /dev/null
+++ b/en/page/51/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/51/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/51/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-call-apply/" class="post-title-link" itemprop="url">自己动手实现系列 ---- call、apply、bind</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/50/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/50/">50</a><span class="page-number current">51</span><a class="page-number" href="/en/page/52/">52</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/52/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/51/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/51/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/51/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/52/index.html b/en/page/52/index.html
new file mode 100644
index 0000000000..c7d54c74e7
--- /dev/null
+++ b/en/page/52/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/52/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/52/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-async-await/" class="post-title-link" itemprop="url">自己动手实现系列 ---- async、await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/51/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/51/">51</a><span class="page-number current">52</span><a class="page-number" href="/en/page/53/">53</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/53/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/52/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/52/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/52/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/53/index.html b/en/page/53/index.html
new file mode 100644
index 0000000000..a04fd76bc0
--- /dev/null
+++ b/en/page/53/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/53/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/53/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" class="post-title-link" itemprop="url">自己动手实现系列 ---- EventEmitter(事件触发器)</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/52/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/52/">52</a><span class="page-number current">53</span><a class="page-number" href="/en/page/54/">54</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/54/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/53/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/53/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/53/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/54/index.html b/en/page/54/index.html
new file mode 100644
index 0000000000..3d0b62a1eb
--- /dev/null
+++ b/en/page/54/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/54/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/54/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Vue双向绑定</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/53/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/53/">53</a><span class="page-number current">54</span><a class="page-number" href="/en/page/55/">55</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/55/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/54/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/54/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/54/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/55/index.html b/en/page/55/index.html
new file mode 100644
index 0000000000..f10ab494bf
--- /dev/null
+++ b/en/page/55/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/55/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/55/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-map/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.map()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/54/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/54/">54</a><span class="page-number current">55</span><a class="page-number" href="/en/page/56/">56</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/56/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/55/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/55/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/55/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/56/index.html b/en/page/56/index.html
new file mode 100644
index 0000000000..d2008d2c17
--- /dev/null
+++ b/en/page/56/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/56/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/56/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-create/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Object.create()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/55/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/55/">55</a><span class="page-number current">56</span><a class="page-number" href="/en/page/57/">57</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/57/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/56/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/56/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/56/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/57/index.html b/en/page/57/index.html
new file mode 100644
index 0000000000..0433cb8d89
--- /dev/null
+++ b/en/page/57/index.html
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/57/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/57/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" class="post-title-link" itemprop="url">自己动手实现系列 ---- 事件代理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/56/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/56/">56</a><span class="page-number current">57</span><a class="page-number" href="/en/page/58/">58</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/58/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/57/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/57/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/57/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/58/index.html b/en/page/58/index.html
new file mode 100644
index 0000000000..7599f14db0
--- /dev/null
+++ b/en/page/58/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/58/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/58/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-flat/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.flat()函数</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/57/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/57/">57</a><span class="page-number current">58</span><a class="page-number" href="/en/page/59/">59</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/59/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/58/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/58/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/58/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/59/index.html b/en/page/59/index.html
new file mode 100644
index 0000000000..7122cff31d
--- /dev/null
+++ b/en/page/59/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/59/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/59/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-isArray/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.isArray</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/58/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/58/">58</a><span class="page-number current">59</span><a class="page-number" href="/en/page/60/">60</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/60/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/59/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/59/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/59/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/6/index.html b/en/page/6/index.html
new file mode 100644
index 0000000000..11485d62d9
--- /dev/null
+++ b/en/page/6/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/5/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/en/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/7/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/60/index.html b/en/page/60/index.html
new file mode 100644
index 0000000000..520a96b8ed
--- /dev/null
+++ b/en/page/60/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/60/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/60/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-new/" class="post-title-link" itemprop="url">自己动手实现系列 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/59/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/59/">59</a><span class="page-number current">60</span><a class="page-number" href="/en/page/61/">61</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/61/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/60/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/60/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/60/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/61/index.html b/en/page/61/index.html
new file mode 100644
index 0000000000..5db61993f4
--- /dev/null
+++ b/en/page/61/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/61/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/61/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/24/do-it-yourselfery-reduce/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/60/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/60/">60</a><span class="page-number current">61</span><a class="page-number" href="/en/page/62/">62</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/62/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/61/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/61/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/61/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/62/index.html b/en/page/62/index.html
new file mode 100644
index 0000000000..560d066ac1
--- /dev/null
+++ b/en/page/62/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/62/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/62/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/23/path-join-vs-path-resolve/" class="post-title-link" itemprop="url">path.join 与 path.resolve 的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/61/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/61/">61</a><span class="page-number current">62</span><a class="page-number" href="/en/page/63/">63</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/63/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/62/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/62/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/62/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/63/index.html b/en/page/63/index.html
new file mode 100644
index 0000000000..a230fab266
--- /dev/null
+++ b/en/page/63/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/63/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/63/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" class="post-title-link" itemprop="url">使用阿里镜像加速brew（转载）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/62/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/62/">62</a><span class="page-number current">63</span><a class="page-number" href="/en/page/64/">64</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/64/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/63/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/63/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/63/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/64/index.html b/en/page/64/index.html
new file mode 100644
index 0000000000..242b2142fa
--- /dev/null
+++ b/en/page/64/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/64/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/64/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/24/Vue-plug-in-development/" class="post-title-link" itemprop="url">vue插件开发（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/63/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/63/">63</a><span class="page-number current">64</span><a class="page-number" href="/en/page/65/">65</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/65/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/64/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/64/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/64/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/65/index.html b/en/page/65/index.html
new file mode 100644
index 0000000000..1522312211
--- /dev/null
+++ b/en/page/65/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/65/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/65/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" class="post-title-link" itemprop="url">v8引擎如何回收内存（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-02-23 08:00:00 / Modified: 07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/64/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/64/">64</a><span class="page-number current">65</span><a class="page-number" href="/en/page/66/">66</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/66/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/65/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/65/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/65/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/66/index.html b/en/page/66/index.html
new file mode 100644
index 0000000000..920ab2285a
--- /dev/null
+++ b/en/page/66/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/66/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/66/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" class="post-title-link" itemprop="url">Vue 响应式原理的实现（课程笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/65/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/65/">65</a><span class="page-number current">66</span><a class="page-number" href="/en/page/67/">67</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/67/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/66/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/66/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/66/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/67/index.html b/en/page/67/index.html
new file mode 100644
index 0000000000..c812644f27
--- /dev/null
+++ b/en/page/67/index.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/67/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/67/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/19/develop-custom-cli-tools-using-node/" class="post-title-link" itemprop="url">使用node开发自定义cli工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/66/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/66/">66</a><span class="page-number current">67</span><a class="page-number" href="/en/page/68/">68</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/68/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/67/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/67/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/67/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/68/index.html b/en/page/68/index.html
new file mode 100644
index 0000000000..73cc12c522
--- /dev/null
+++ b/en/page/68/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/68/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/68/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/12/vue-proxyTable-problem/" class="post-title-link" itemprop="url">Could not proxy request XXX from localhost:8080 to localhost:8081</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/67/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/67/">67</a><span class="page-number current">68</span><a class="page-number" href="/en/page/69/">69</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/69/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/68/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/68/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/68/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/69/index.html b/en/page/69/index.html
new file mode 100644
index 0000000000..74e85396e6
--- /dev/null
+++ b/en/page/69/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/69/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/69/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/12/print-table-problem/" class="post-title-link" itemprop="url">由打印引起的一点小问题，写table时别忘了写thead和tbody</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/68/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/68/">68</a><span class="page-number current">69</span><a class="page-number" href="/en/page/70/">70</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/70/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/69/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/69/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/69/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/7/index.html b/en/page/7/index.html
new file mode 100644
index 0000000000..7a2b02f402
--- /dev/null
+++ b/en/page/7/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/Oracle-Linux-install-Docker/" class="post-title-link" itemprop="url">在 Oracle Linux 中安装 Docker</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/6/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/en/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/8/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/70/index.html b/en/page/70/index.html
new file mode 100644
index 0000000000..0b3f4584b0
--- /dev/null
+++ b/en/page/70/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/70/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/70/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/11/restful-architecture/" class="post-title-link" itemprop="url">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/69/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/69/">69</a><span class="page-number current">70</span><a class="page-number" href="/en/page/71/">71</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/71/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/70/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/70/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/70/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/71/index.html b/en/page/71/index.html
new file mode 100644
index 0000000000..d6f4f9d37d
--- /dev/null
+++ b/en/page/71/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/71/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/71/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/02/11/SSR/" class="post-title-link" itemprop="url">SSR</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/02/11/SSR/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/70/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/70/">70</a><span class="page-number current">71</span><a class="page-number" href="/en/page/72/">72</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/72/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/71/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/71/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/71/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/72/index.html b/en/page/72/index.html
new file mode 100644
index 0000000000..a310b24e3b
--- /dev/null
+++ b/en/page/72/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/72/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/72/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/22/FE-guide-safe/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/22/FE-guide-safe/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/71/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/71/">71</a><span class="page-number current">72</span><a class="page-number" href="/en/page/73/">73</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/73/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/72/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/72/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/72/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/73/index.html b/en/page/73/index.html
new file mode 100644
index 0000000000..df0818487b
--- /dev/null
+++ b/en/page/73/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/73/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/73/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/22/Wepack-Tips/" class="post-title-link" itemprop="url">webpack中loader和plugin之间的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/22/Wepack-Tips/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/72/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/72/">72</a><span class="page-number current">73</span><a class="page-number" href="/en/page/74/">74</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/74/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/73/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/73/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/73/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/74/index.html b/en/page/74/index.html
new file mode 100644
index 0000000000..cbdd1cd4db
--- /dev/null
+++ b/en/page/74/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/74/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/74/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/22/Es6-arrowFunc-arguments/" class="post-title-link" itemprop="url">es6中箭头函数没了arguments怎么办？</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-22 06:50:21 / Modified: 07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/22/Es6-arrowFunc-arguments/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/73/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/73/">73</a><span class="page-number current">74</span><a class="page-number" href="/en/page/75/">75</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/75/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/74/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/74/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/74/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/75/index.html b/en/page/75/index.html
new file mode 100644
index 0000000000..a19a1d0857
--- /dev/null
+++ b/en/page/75/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/75/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/75/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/13/hexo-search/" class="post-title-link" itemprop="url">给我的Hexo博客添加文章内容搜索功能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/13/hexo-search/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/74/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/74/">74</a><span class="page-number current">75</span><a class="page-number" href="/en/page/76/">76</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/76/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/75/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/75/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/75/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/76/index.html b/en/page/76/index.html
new file mode 100644
index 0000000000..af22f161b1
--- /dev/null
+++ b/en/page/76/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/76/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/76/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/13/Javascript-Design-Pattern/" class="post-title-link" itemprop="url">JavaScript 设计模式 Design Pattern</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/13/Javascript-Design-Pattern/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/75/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/75/">75</a><span class="page-number current">76</span><a class="page-number" href="/en/page/77/">77</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/77/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/76/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/76/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/76/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/77/index.html b/en/page/77/index.html
new file mode 100644
index 0000000000..0e05e60e96
--- /dev/null
+++ b/en/page/77/index.html
@@ -0,0 +1,580 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/77/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/77/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/13/FE-guide-inherit2/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承类型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/76/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/76/">76</a><span class="page-number current">77</span><a class="page-number" href="/en/page/78/">78</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/78/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/77/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/77/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/77/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/78/index.html b/en/page/78/index.html
new file mode 100644
index 0000000000..15ceb420ef
--- /dev/null
+++ b/en/page/78/index.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/78/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/78/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/13/do-it-yourselfery-promise/" class="post-title-link" itemprop="url">自己动手实现系列 ---- promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/77/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/77/">77</a><span class="page-number current">78</span><a class="page-number" href="/en/page/79/">79</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/79/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/78/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/78/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/78/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/79/index.html b/en/page/79/index.html
new file mode 100644
index 0000000000..1ad4409277
--- /dev/null
+++ b/en/page/79/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/79/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/79/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/09/career/" class="post-title-link" itemprop="url">如何正确使用时间[转载]</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/78/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/78/">78</a><span class="page-number current">79</span><a class="page-number" href="/en/page/80/">80</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/80/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/79/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/79/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/79/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/8/index.html b/en/page/8/index.html
new file mode 100644
index 0000000000..e256f86d06
--- /dev/null
+++ b/en/page/8/index.html
@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" class="post-title-link" itemprop="url">服务器高危端口列表</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/7/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/en/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/9/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/80/index.html b/en/page/80/index.html
new file mode 100644
index 0000000000..fb62189024
--- /dev/null
+++ b/en/page/80/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/09/solve-get-params-so-long-problem/" class="post-title-link" itemprop="url">解决get请求过长的问题小记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/09/solve-get-params-so-long-problem/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/79/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/79/">79</a><span class="page-number current">80</span><a class="page-number" href="/en/page/81/">81</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/81/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/81/index.html b/en/page/81/index.html
new file mode 100644
index 0000000000..53afca2a5e
--- /dev/null
+++ b/en/page/81/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/81/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/81/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/09/do-it-yourselfery-jsonp/" class="post-title-link" itemprop="url">自己动手实现系列 ---- jsonp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/80/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/80/">80</a><span class="page-number current">81</span><a class="page-number" href="/en/page/82/">82</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/82/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/81/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/81/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/81/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/82/index.html b/en/page/82/index.html
new file mode 100644
index 0000000000..d254c66b09
--- /dev/null
+++ b/en/page/82/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/82/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/82/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/09/FE-guide-data-structure/" class="post-title-link" itemprop="url">计算机通识 ---- 数据结构</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/81/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/81/">81</a><span class="page-number current">82</span><a class="page-number" href="/en/page/83/">83</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/83/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/82/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/82/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/82/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/83/index.html b/en/page/83/index.html
new file mode 100644
index 0000000000..02ce8f1e1a
--- /dev/null
+++ b/en/page/83/index.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/09/FE-guide-Net/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/82/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/82/">82</a><span class="page-number current">83</span><a class="page-number" href="/en/page/84/">84</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/84/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/84/index.html b/en/page/84/index.html
new file mode 100644
index 0000000000..7fb6ae5409
--- /dev/null
+++ b/en/page/84/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/05/FE-guide-vuepress/" class="post-title-link" itemprop="url">介绍一个好用的doc展示库 ---- vuepress</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/en/2020/01/05/FE-guide-vuepress/#more" rel="contents">
+                Read more &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/83/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/83/">83</a><span class="page-number current">84</span><a class="page-number" href="/en/page/85/">85</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/85/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/85/index.html b/en/page/85/index.html
new file mode 100644
index 0000000000..3710049dc1
--- /dev/null
+++ b/en/page/85/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/05/FE-guide-currying/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 柯里化 currying</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/84/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/84/">84</a><span class="page-number current">85</span><a class="page-number" href="/en/page/86/">86</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/86/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/85/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/85/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/85/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/86/index.html b/en/page/86/index.html
new file mode 100644
index 0000000000..5d227b2df8
--- /dev/null
+++ b/en/page/86/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/05/FE-guide-about-reduce/" class="post-title-link" itemprop="url">reduce函数的妙用 ---- 实现map和filter</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-05 08:55:00 / Modified: 08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/85/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/85/">85</a><span class="page-number current">86</span><a class="page-number" href="/en/page/87/">87</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/87/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/87/index.html b/en/page/87/index.html
new file mode 100644
index 0000000000..8e9bd57ba2
--- /dev/null
+++ b/en/page/87/index.html
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/05/FE-guide-ArrayOprs/" class="post-title-link" itemprop="url">数组常见操作 ---- 去重、扁平、取最大最小值</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-05 03:05:00 / Modified: 07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/86/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/86/">86</a><span class="page-number current">87</span><a class="page-number" href="/en/page/88/">88</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/88/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/88/index.html b/en/page/88/index.html
new file mode 100644
index 0000000000..28945bba3c
--- /dev/null
+++ b/en/page/88/index.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/04/Algorithm/" class="post-title-link" itemprop="url">JavaScript实现经典排序算法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/87/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/87/">87</a><span class="page-number current">88</span><a class="page-number" href="/en/page/89/">89</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/89/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/89/index.html b/en/page/89/index.html
new file mode 100644
index 0000000000..94782779d6
--- /dev/null
+++ b/en/page/89/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-store/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 浏览器存储</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/88/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/88/">88</a><span class="page-number current">89</span><a class="page-number" href="/en/page/90/">90</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/90/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/89/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/89/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/89/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/9/index.html b/en/page/9/index.html
new file mode 100644
index 0000000000..e952c0bb5a
--- /dev/null
+++ b/en/page/9/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">systemctl 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/8/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/en/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/10/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/90/index.html b/en/page/90/index.html
new file mode 100644
index 0000000000..71e27639e9
--- /dev/null
+++ b/en/page/90/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/90/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/90/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" class="post-title-link" itemprop="url">为什么 0.1 + 0.2 != 0.3</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+              
+
+              <time title="Created: 2020-01-03 04:10:00 / Modified: 04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/89/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/89/">89</a><span class="page-number current">90</span><a class="page-number" href="/en/page/91/">91</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/91/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/90/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/90/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/90/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/91/index.html b/en/page/91/index.html
new file mode 100644
index 0000000000..a1812d787e
--- /dev/null
+++ b/en/page/91/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-async-Proxy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Proxy</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/90/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/90/">90</a><span class="page-number current">91</span><a class="page-number" href="/en/page/92/">92</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/92/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/92/index.html b/en/page/92/index.html
new file mode 100644
index 0000000000..bf69b395b0
--- /dev/null
+++ b/en/page/92/index.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/92/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/92/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-async-await/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- async 和 await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/91/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/91/">91</a><span class="page-number current">92</span><a class="page-number" href="/en/page/93/">93</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/93/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/92/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/92/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/92/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/93/index.html b/en/page/93/index.html
new file mode 100644
index 0000000000..062645e221
--- /dev/null
+++ b/en/page/93/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/92/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/92/">92</a><span class="page-number current">93</span><a class="page-number" href="/en/page/94/">94</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/94/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/93/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/93/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/93/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/94/index.html b/en/page/94/index.html
new file mode 100644
index 0000000000..6365df5b6b
--- /dev/null
+++ b/en/page/94/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/94/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/94/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-Generator/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Generator 生成器</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/93/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/93/">93</a><span class="page-number current">94</span><a class="page-number" href="/en/page/95/">95</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/95/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/94/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/94/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/94/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/95/index.html b/en/page/95/index.html
new file mode 100644
index 0000000000..fd345ab505
--- /dev/null
+++ b/en/page/95/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/95/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/95/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-Promise/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/94/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/94/">94</a><span class="page-number current">95</span><a class="page-number" href="/en/page/96/">96</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/96/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/95/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/95/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/95/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/96/index.html b/en/page/96/index.html
new file mode 100644
index 0000000000..157bdb8661
--- /dev/null
+++ b/en/page/96/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-call-apply-bind/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- call, apply, bind 区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/95/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/95/">95</a><span class="page-number current">96</span><a class="page-number" href="/en/page/97/">97</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/97/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/97/index.html b/en/page/97/index.html
new file mode 100644
index 0000000000..92bd975678
--- /dev/null
+++ b/en/page/97/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-inherit/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/96/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/96/">96</a><span class="page-number current">97</span><a class="page-number" href="/en/page/98/">98</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/98/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/98/index.html b/en/page/98/index.html
new file mode 100644
index 0000000000..c6cc460be9
--- /dev/null
+++ b/en/page/98/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-debounce-throttle/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 函数防抖和节流</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/97/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/97/">97</a><span class="page-number current">98</span><a class="page-number" href="/en/page/99/">99</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/99/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/page/99/index.html b/en/page/99/index.html
new file mode 100644
index 0000000000..4eb2d79a3b
--- /dev/null
+++ b/en/page/99/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/en/page/99/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/page/99/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/en/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/en/2020/01/03/FE-guide-Module/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 模块化</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">Posted on</span>
+
+              <time title="Created: 2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">Edited on</span>
+                <time title="Modified: 2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">In</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  , 
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/en/page/98/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/en/">1</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/98/">98</a><span class="page-number current">99</span><a class="page-number" href="/en/page/100/">100</a><span class="space">&hellip;</span><a class="page-number" href="/en/page/128/">128</a><a class="extend next" rel="next" href="/en/page/100/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/page/99/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/99/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/99/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/en/tags/index.html b/en/tags/index.html
new file mode 100644
index 0000000000..876bf9d3ec
--- /dev/null
+++ b/en/tags/index.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="标签">
+<meta property="og:url" content="https://blog.lifesli.com/en/tags/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="en_US">
+<meta property="article:published_time" content="2017-08-29T09:59:00.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:17.041Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/en/tags/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'en'
+  };
+</script>
+
+  <title>标签 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="en">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">标签
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>TAGS</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="tag-cloud">
+            <div class="tag-cloud-title">
+              90 tags in total
+            </div>
+            <div class="tag-cloud-tags">
+              <a href="/tags/Actions/" style="font-size: 12px; color: #ccc">Actions</a> <a href="/tags/CI-CD/" style="font-size: 12px; color: #ccc">CI/CD</a> <a href="/tags/CSS/" style="font-size: 12px; color: #ccc">CSS</a> <a href="/tags/CSS3/" style="font-size: 12px; color: #ccc">CSS3</a> <a href="/tags/CSS%E6%8A%80%E5%B7%A7/" style="font-size: 12px; color: #ccc">CSS技巧</a> <a href="/tags/CodeReview/" style="font-size: 12px; color: #ccc">CodeReview</a> <a href="/tags/Cordova/" style="font-size: 12px; color: #ccc">Cordova</a> <a href="/tags/Docker/" style="font-size: 15px; color: #adadad">Docker</a> <a href="/tags/Docker-Compose/" style="font-size: 12px; color: #ccc">Docker Compose</a> <a href="/tags/DockerFile/" style="font-size: 12px; color: #ccc">DockerFile</a> <a href="/tags/ESLint/" style="font-size: 12px; color: #ccc">ESLint</a> <a href="/tags/Electron/" style="font-size: 15px; color: #adadad">Electron</a> <a href="/tags/EventLoop/" style="font-size: 12px; color: #ccc">EventLoop</a> <a href="/tags/GIT/" style="font-size: 12px; color: #ccc">GIT</a> <a href="/tags/Git/" style="font-size: 12px; color: #ccc">Git</a> <a href="/tags/GitLab/" style="font-size: 12px; color: #ccc">GitLab</a> <a href="/tags/Github/" style="font-size: 12px; color: #ccc">Github</a> <a href="/tags/Go%E8%AF%AD%E8%A8%80/" style="font-size: 12px; color: #ccc">Go语言</a> <a href="/tags/Hexo/" style="font-size: 21px; color: #6f6f6f">Hexo</a> <a href="/tags/HomeBrew/" style="font-size: 12px; color: #ccc">HomeBrew</a> <a href="/tags/Ionic/" style="font-size: 12px; color: #ccc">Ionic</a> <a href="/tags/Linux/" style="font-size: 12px; color: #ccc">Linux</a> <a href="/tags/Mac/" style="font-size: 12px; color: #ccc">Mac</a> <a href="/tags/Nginx/" style="font-size: 15px; color: #adadad">Nginx</a> <a href="/tags/NodeJS/" style="font-size: 18px; color: #8e8e8e">NodeJS</a> <a href="/tags/Postgresql/" style="font-size: 12px; color: #ccc">Postgresql</a> <a href="/tags/Prettier/" style="font-size: 12px; color: #ccc">Prettier</a> <a href="/tags/RESTful/" style="font-size: 12px; color: #ccc">RESTful</a> <a href="/tags/RPM/" style="font-size: 12px; color: #ccc">RPM</a> <a href="/tags/React/" style="font-size: 12px; color: #ccc">React</a> <a href="/tags/Restful-API/" style="font-size: 12px; color: #ccc">Restful API</a> <a href="/tags/SSR/" style="font-size: 12px; color: #ccc">SSR</a> <a href="/tags/SemVer/" style="font-size: 12px; color: #ccc">SemVer</a> <a href="/tags/Squid/" style="font-size: 12px; color: #ccc">Squid</a> <a href="/tags/Timeout/" style="font-size: 12px; color: #ccc">Timeout</a> <a href="/tags/UglifyJsPlugin/" style="font-size: 12px; color: #ccc">UglifyJsPlugin</a> <a href="/tags/VSCode/" style="font-size: 12px; color: #ccc">VSCode</a> <a href="/tags/VSCode%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">VSCode插件</a> <a href="/tags/Vue/" style="font-size: 18px; color: #8e8e8e">Vue</a> <a href="/tags/Webpack/" style="font-size: 12px; color: #ccc">Webpack</a> <a href="/tags/ajax/" style="font-size: 12px; color: #ccc">ajax</a> <a href="/tags/es6/" style="font-size: 12px; color: #ccc">es6</a> <a href="/tags/get/" style="font-size: 12px; color: #ccc">get</a> <a href="/tags/jsonp/" style="font-size: 12px; color: #ccc">jsonp</a> <a href="/tags/kernel/" style="font-size: 12px; color: #ccc">kernel</a> <a href="/tags/npm/" style="font-size: 12px; color: #ccc">npm</a> <a href="/tags/npx/" style="font-size: 12px; color: #ccc">npx</a> <a href="/tags/path-intellisense/" style="font-size: 12px; color: #ccc">path-intellisense</a> <a href="/tags/port/" style="font-size: 12px; color: #ccc">port</a> <a href="/tags/promise/" style="font-size: 12px; color: #ccc">promise</a> <a href="/tags/registry/" style="font-size: 12px; color: #ccc">registry</a> <a href="/tags/rnpm/" style="font-size: 12px; color: #ccc">rnpm</a> <a href="/tags/sass/" style="font-size: 12px; color: #ccc">sass</a> <a href="/tags/scp/" style="font-size: 12px; color: #ccc">scp</a> <a href="/tags/systemctl/" style="font-size: 12px; color: #ccc">systemctl</a> <a href="/tags/vuepress/" style="font-size: 12px; color: #ccc">vuepress</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" style="font-size: 12px; color: #ccc">事件驱动</a> <a href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">兼容性问题</a> <a href="/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" style="font-size: 12px; color: #ccc">内存回收</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" style="font-size: 12px; color: #ccc">前后端分离开发指南</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" style="font-size: 12px; color: #ccc">前后端分离开发规范</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">前端开发插件</a> <a href="/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" style="font-size: 12px; color: #ccc">同构技术</a> <a href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">奇怪问题</a> <a href="/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" style="font-size: 12px; color: #ccc">容器端口映射</a> <a href="/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" style="font-size: 12px; color: #ccc">年终总结</a> <a href="/tags/%E5%BE%AE%E4%BF%A1/" style="font-size: 12px; color: #ccc">微信</a> <a href="/tags/%E6%89%93%E5%8C%85/" style="font-size: 12px; color: #ccc">打包</a> <a href="/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" style="font-size: 12px; color: #ccc">排序算法</a> <a href="/tags/%E6%8F%92%E4%BB%B6/" style="font-size: 15px; color: #adadad">插件</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" style="font-size: 12px; color: #ccc">数据卷</a> <a href="/tags/%E6%95%B0%E7%BB%84/" style="font-size: 12px; color: #ccc">数组</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" style="font-size: 12px; color: #ccc">服务端渲染</a> <a href="/tags/%E6%9E%B6%E6%9E%84/" style="font-size: 12px; color: #ccc">架构</a> <a href="/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" style="font-size: 12px; color: #ccc">海外提速</a> <a href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" style="font-size: 12px; color: #ccc">源码解析</a> <a href="/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" style="font-size: 12px; color: #ccc">版本管理</a> <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" style="font-size: 24px; color: #4f4f4f">知识点</a> <a href="/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" style="font-size: 12px; color: #ccc">组件通信</a> <a href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" style="font-size: 15px; color: #adadad">经验之谈</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 15px; color: #adadad">网络安全</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">网络模式</a> <a href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" style="font-size: 12px; color: #ccc">脚手架</a> <a href="/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" style="font-size: 12px; color: #ccc">自动构建</a> <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" style="font-size: 27px; color: #303030">自己动手实现系列</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">设计模式</a> <a href="/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" style="font-size: 12px; color: #ccc">超时设置</a> <a href="/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" style="font-size: 12px; color: #ccc">路径别名</a> <a href="/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" style="font-size: 12px; color: #ccc">镜像安全</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 30px; color: #111">面试</a>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/en/">EN</a></li>
+          <li>TAGS</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          Table of Contents
+        </li>
+        <li class="sidebar-nav-overview">
+          Overview
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>English</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/en/tags/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/images/algolia_logo.svg b/images/algolia_logo.svg
new file mode 100644
index 0000000000..470242341d
--- /dev/null
+++ b/images/algolia_logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362">
+  <linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)">
+    <stop offset="0" stop-color="#00aeff"/>
+    <stop offset="1" stop-color="#3369e7"/>
+  </linearGradient>
+  <path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/>
+  <path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/>
+  <path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/>
+</svg>
diff --git a/images/apple-touch-icon-next.png b/images/apple-touch-icon-next.png
new file mode 100644
index 0000000000000000000000000000000000000000..86a0d1d33bc2ae8a0416ebba67d1bbb60aa29c38
GIT binary patch
literal 1544
zcmV+j2KV`iP)<h;3K|Lk000e1NJLTq006WA006WI0{{R33KRAK00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#OHfQyMIs_1FE20E)zv2_C(h2!$jHdT!ovUm|GT@p
zWo2de_xJq#{8d#|IyyQ>M@Qx5<?rwBadB~~s;ZNdlil6jh=_=NeSM#wpR}~JncM?g
z000E|Nkl<Zc-rlqiI$>33`J9dBE>4W{r{KFjMLpp4N$2iMRJCGfPM7@le{)BPzVgz
zp?ByVdWYVj|4-=tUS5SkR}Te{-Fr#UrxsqJ9+ed6YY9Kmo<u<FTLzy&klN9qhX#zu
zZar`4yoQ-jL&X=myTC%UN2btvRInUn#}WG3z-nYS%?<icgEg9g6?A_GRMa^e=vU1~
z#--x{{av$hk&SwL=+Bysi{`m8bZ^w`G^rf~T@4ESA}qB-ppPwhhYCq;f9U0!O`h7m
z(0a@uH0ncIXj{!jhUYxy1&yiM$kg_l#~^(&8%^su0dzGgh#T(nm@D+Tf#~5ZHMl`v
zYaj{7)OLaH?-@{qlhlBRc4<I~QyUF^YJoWLQUem&y#e(~ZKTwIg4VYT(gaRwz(5ZT
zqzjDHV293YNE!&K0g~2iWYcO(Z3qyJHcM?t(11pt#~?)m>Xq6n^B9DRMwF@T2u)qH
z!=wh-sAdPH_8fFy0-I1d68Zp);!FTtdweUZc2nr)?5^hh9<C~fZYDPLm$c>9w*FOU
z@NYFT^!v%iPrGly0Q*+sLVtesYh+the|AET4WK8lR^dv1IZ-3FhAuiK5V|-?gf2#j
z&_yW`x^K3G&OKl4kP$$ih@p!?B6M+)2(4Rz(6$=G6WT(;6uP)cgkEi(xI(Yi7`D(w
zo(Y6r>FyarFV`4e&^@lk@PfWf|DSeM5}?agV`>aDXt-c%3^!<aAZiRd=<H~(F@(@Z
zFKB3{TJkZI06o=@W@`*XXt>*Ij0g0Q8X5*mjbRC$9oB0MOK51O_53LU8p`RzcozW;
zx3wC>721@58xhdzx?E$}LW9xpjUu4UhOZO>Z8Us+D+1bR_}&sQXJ}B}yadb|8fraT
zV|YUw4WF(>KpPF;mjp}*eTo5XG<+u!&}PFoihwq!uhI`XPYZ1{e1FDs0nqR?Ym5YF
zqv0DwK${KUMFjNpqb>9(0vg8Y^d$otmiJc}L#s|8wD~Z~fHtQu8PG6DgwAq-&}PFY
z1KMo(WI!7YpAcwxN`zJiV(2pgG_<|npE+y^Z8UsBppAx42(;Po$$&N*J{izP!?y+W
zi2YsL=fkK`KXsymhWcmL#_y-S*Y&V_u#us^S9pDvbMSkxv7uidoc36Qa`CQ+5AC^d
z=CTJ%0ZkrQ=v?t(E_)>OCL8YaU+nX$$--iAUNb;m^jBG2!5*5enU|exmY3aQcv=O-
znjO}ft-yw<y>2|VZs2g-W`Epf@n*5gsJ2LLtC^nFlq8+?%Xc!{Z3_|hFI~!oeU$ep
z%4jE9Y9n1{ah68@W{++)8|fc~HIM4)QycHpg}3P<_K$M$L~}7jBXs?6bDwjvo+I;D
zsoi}398La6+~*osM@45l#ptQ6MrZFz597*no3v)ffsUEletxWeW~`A+ntYvaeQj?e
z*kSqGXZsrrhZ>IsxH$({IR{z11zkG`GR^j$#{%z41lp5(Ne#glJc5nj-BUaKR!X?#
zzN6F-<0?&z;|30?9q0Z}oHG*G)Q)s%Db~RbjMU)mp-u&Dmm0zkF~o<qNDXS#1xM&L
zso~Pa{5x?ED=kP3k<PdfLC;DJ(GKR2LH{$4MLbPJ2tAb=NKW^W9KidT$4D;8k)0ZR
zNex6d`v{LZUQ4R$i2M1>9eRh}p?ByVnjn4wmEZ*c=^{+H00012dQ@0+Qek%>aB^>E
zX>4U6ba`-PAZc)PV*mhnoa6Eg2ys>@D9TUE%t_@^00ScnE@KN5BNI!L6ay0=M1VBI
uWCJ6!R3OXP)X2ol#2my2%YaCrN-hBE7ZG&wLN%2D0000<MNUMnLSTYTvd>`v

literal 0
HcmV?d00001

diff --git a/images/avatar.gif b/images/avatar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..28411fd0eadae59f521f6914983f61731b759e77
GIT binary patch
literal 1793
zcmc(e`#al*0*AjzgfxoGy{05C>!#LYnzk<02ECx3bGphio%U$lDm65-%4+M{#3i&v
zF)dm;w^A*|s?pmzaZMtK$W?-bB(5QZNKm$&f8xA9e13kP=kvU$gHL&RM+pD{pap>K
z?d^{rKQig`f&P9LlQ}99ZEbD!GZ=ckeqnxIr_;%&rX*sqfX7oR6eGjKTn=YwU|>ul
znHV4Eu-TiNo08GdRgGqCZH+xRs9IQ9RH^1>XE!!BhKGj6$Hs&L!K6&KzP>J#N(Fqr
zR;wLkv2^R}tE;Qa%ge0(e$C3t(&C~<qZ#3FL_*=TQpsd6rY0vxg+jefCmtPDFD<Ps
zFDvA7?b;e|WMuwt=H}K`S7)ZDmzI`90>Rwe+~VRQXLwjF5-F8RA)i0YW~)@HafxJI
ztDT*l9U2_uak;ZIGkh*rIx(SEs}~j)c6N3ceSN_H8<gJQe+usZ>_49XM%yH8dPZgz
zB|GQ#ox8bt`S%J6i+(M>|DdF_?BS#GipRfIR#n&3KB=pJ+VJdoW7CV~me${2w!NaZ
zzkc)f-TOa2{MkY4?CS36?V~f8{j7n(A@(q5gv;X#grZTgWNdswDw~{=E0ohSvvWmY
zGjmfr8#E|v4TQF_Gc`8@&-08hUU*RDV_F8x1dNvf-Q-&Xu=7I9zp8rf8bT6VFu-K1
zp`BZ_y|*WcV(5^u3r8Z?_Lqctc&JNK!cAN~et3&LSM%8m)RAlO)U=qKp>M&~miA0b
zXA%^BkIE!eHSh{;JcHumYCCz&Hv4Tw58W8&TJUDzpa4EMr)`^Hk&pLH2#~xp+Q){T
zG-#gq>4cV;j$FAa0T2e?IaPM3FG2TOT?&y331G&9%UI%3h^7{jcjWlZnLQlvaK26P
z&Du^Nq0124n0#&HRTS@~)vg(wn2`PSjR|i?^*UZ1csS?N{1geB^pd#*wq=(WWX@1r
zv5uJro0nX~&}D6Yd!Wu)zT+Ue>E{=z;@y4ScOiE3p8m&MiDr4no6=S6wRJ0iXM)6C
z<nBF9BNM)6Uxe(g%i?^GI0fTp(yVZ(^H6lXj1r!DU6PGF>>5pRjYy47cB%WEd*@}L
z)G5pbE$Ge-JTxqUc)`~&KYX(KG|XUNFEaMuwR^Y2g@rcImI_#CkxM7>ixb}G;9?cd
z^^|X7xcI>?8NVEgi-@HW4-}Ub7>j!l$Wovi5owxWR~&d9OE??vXD<~+R;ZIoXph72
zS^L1LPNaHdal;oq)mV?S`yd78YGomCf{IVUjRFlwBDq0OKa}J>R-c=kw&xj^j*rW0
zJokM-@lH<&)bi_qsQp$(*Ii?w!M$!>g`Nv;bl`;yk4f(}y&Kco3r_*64>%zjTOC<C
z|F*2k0w=h{8ti}PcGj633#3m}GRoj=KN9@##eNvV8jNa29rd7h{XuyuUAzIK_g+O=
zO=inFGCN3)yJ3#zfoEnF$oMYG_EADZ60jAtj6xOIboS=JTEN8pfRQK4!Tojw;80#p
zztBCPNTH99Qqma*Evf^r`p6rDYO0&&4m$0*=w4A3=xm;e_jhTcr$6$ZK|49*@K?Cm
zQly>fdB@J*VqOvb=oZa>C@u2Lduq1`izsNs8+QAq_ECS490Gm#@C{iK=v!G1IsXpV
z76Y`Dp+T;=aPS1u7-^6eAPsE=Fh7@&<d8>a6*rEQ0-lhxp>WU>m<>B4%df*W$pD4<
zwi<>)ym@Zqoa-)!J73I;#~fq9mAj64U9-2aXsJvo1GRX7EFSwyF_W3m*mQ`Z=p-3(
z>GXe!z@|YJ9AMi5`@}EICbT2b$BaPO()mC;$h}Hdi}&W0Cv1_IH70cDzqaN2JSbZ{
z@pl2olL|1mz}I#g;^OjPiAXY4L|Uj@Cb#<|4jBr+K^v+&jNRfP(-(RnH>Uj+<-koQ
zK-&m;?TK*D0A<8f;Q`Fsn4l2KVgu@{NK)X|`%2r)S=kN5!CVj<lcTHhhy6?gyJ)ka
zH2MRJ%^F%{X-9fk=snO;fw5m)>+xSEq1+Eb$0bDoB-XOPkoZY08jeqI*A;y_?flt=
zh0FOL^(F`4ls>(Et~Gpqs*@n|@qZg1LiHe{HoHzns0oD{ebkq7Snv{|$@>0t7h-12
zVdLd19AD|Po<EN@*q`J@XVqHf{hCl1vLdX$Kc435UK3;NK4_jywN-q1Bqk)H4Oc?F
z0uob#S<!ZyQhI2eX9<IK*+)~x&aFe&2M;7fXdVh#b%)y-1Ia&W9!c#_AOXPlFJIhd
AGynhq

literal 0
HcmV?d00001

diff --git a/images/avatar.jpg b/images/avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..be2314b136cfbe28d23fe915b83219597abb53e4
GIT binary patch
literal 15611
zcmbWecT`i|*Dah-61tS2bdVy1qEzWpG(bY{9qApUBOqN7La#!kL<pUL^r9%zQECW9
zno2K%(ghW7@cEVZ{r>vy%@~K1a0273z1LoQ&bj9KGy7*A@EAY_0)auKWMD9uoSck;
z3PMdqNlC>_&u|68&ceyT&cepV#e0*Vi(8n7jZHurDl94{DJjXxFRLgcu5eRAQXEK5
zPEJKh#Y9cbBz~Rky7>R~>rWSejtn>q93}>G1BmE=#B{(vy})7s07we_`vUyy1tcOS
zAq9cS$SEjk0YpGzVj>b^Qc@BU!Z*VS*8n7Rr1aOtR6q>+c3^H_h<J4R3o;(n`ge>5
z6W@6y?EPZMDXv~)VrJpH!7l(6l$5$HEh8&;_a015T?39VG%_|ZH8ZzxaCCBZadmU|
z4+snjei#xO`}j%R)A$5rMrKxa&a>P+RB;KWw5+_MvZ|r6skx=Kt-YhWr?;<vU~uR?
zZW2E=Ju~}p?#uGZ>e~9o=GON9!Qs*I$?1=?b0C2DpKu62{|V@S#6w4jhlqrPm;`(o
z50EIBa1hgxkX{!9(W~f#?R*)y#iPj}s_8H4-;wi37<^~6_nV-&$}9PWZ~ro+zY+ca
z3n=FQDWd-b^q+YC%mJu~frJSorUNJePOWhIC}=#?O<)8da>KO`0&q^kIp;)CO`rtO
zL^&Br<3tm1lmO5T>e@$4kF-DlEG!Tf0D)p8i3r5NIqGT#Qh-SxCIaBQDNx!6xFOI7
z(Ie8=R1*LSlyYZ8Q3w=A0W~$CuCy!&L%4D`66&i=u89(ZBLVuF8Zsr4WQK4RN#|&!
z00z<o(1+b{rEM~BekKXfhodBv>DCGNa(M?RtqBysY65wAvXFqIEC3Q}uEkLl76<{L
zYcUc4CEOkWQ(6L{g1Qz*lZrs{(4?5+oangA+X2Ejb#W<800W#O4JIOxbm@hg16|I+
zI_tv$lkD#3GZcv#rdH>4`TpY?{Dx(7_S5gZntuRX9=UBlz7!8g2%9u&#Fo(f0TkRZ
z0axN?vefqnG(%K>BbDDS`M3V^C~o{w{-rvjT52Y37<lo6(*O*q0lSA9x>IWY)ckR;
z<(cRRYk;GV`j&|t62u2-!=MRw5?m@th9Ha$g#?T+;?E?r^a#U@6aZ@TLG(n6kye*u
zh!j&MBZQ*IRg4rM61@EKzmLm5GQb&(17U>dG~t@cq#}GG0Ej-}4a8tQib70%MMdTh
zU}s;s2NHaIPBAd`S|77HxEmPEB=qZgwCqux*z|>TmBfu__7o|}LdU-<F|!;)ogrsW
z*$>Un%R0-quKF!3TKBQ2mB!x$%6wJa*`T&uE>8%&t+eIl{j|7S?0kkVuwwDko1N#e
z5`n`hmS<B{4=OmKmvs|uuH$PlSEVCu8;8j1f$dK{TkCM`$NQ%VbVSMCn{=aVS*yQ2
zvIPf(DHw2haqPyvI~EmO@<u=MmLF@soqv{lyg>eI->h|RvA^c$x0}3$S{sjQH6ut0
zg%}<Z?;(A}WY#n!{kU#%ckPiRZOhrgJS~}uIjn1&(j5ajVxxZ?T7CTd2%Em?HY5a$
z%@6a154;?0asB-CefWJHlZ1g^5pD-@)ZbEyo*+7iG#&W%vc=tLZ_(6?rI`HzELlY&
z)=JtO*Q}!zgYsQ=kSNOe=azjPF(&3|tD-VWrFY{~QepUGcF@s+o56x7r{qhqxot&_
z&B!st(Fl0?$RBY{KQ^%4mTDsW$4{q8*@3oN`unt&4^uvJ{}k`3C{#%$BaRI5-P!tP
zby1egwlCb`<>h~k=0o~Ar{Si1;5N_prng;NvQyl>bS6iLZ5J})E=Tj12(tZ+6ZhvK
z2d2TY2GX2kad$d@&eXewj>KU(cFd<%i8tc+xzE>hrKqUseL~8OT*}tuvygNR0>C4E
z7$Ga*${^PfLZYB9)27Kl|8fZ_7yq-ui6xzp0)P=_!Wv5a_uHI*B^m}zTAWdEnNpXD
zcDXu508FKQgiK>9iN=rXezCFJr(D*+vAK0<RZY@9`k3~+XI$W-{Gcq;Hn^j<)dgeO
zG-C*3iPCZOi9P-UI6gN`{PAjqro`u)SMdiDQHE4m+MEY=nYh;*rqd4s6U*CQ7i^>z
znm^}1-1d;l>l!1TlxlKIdKD5LTruc<%bUYs5#DF$OUDDsWlyF011P;NRCxc+Z1qbJ
zp3RFS+)a%3g8s^Mda9DJIS0OkeZ@`-^b!!r^9cgbT}<P|YOv9CDpJcxs{gikS!79!
zCO3UIN_JA_6z9`kP0Ag4>__*t`}vxTw?G?hwPV=N$yiQ{wEo`k1(b95mAkMm?Ntsz
zr=pa6e2A*J8Wioa*ZSG@<y8|uCfYs?S&~3b1YTR^Tld{y$uTjR<i(5o-km#S640}_
zJK0=Z2l9so%V4b&_kg3<%^?cCk2J@YnIa3PCf!(;iZd`X*RD^Q8!gommzOa7o}A2|
zxl;Nm*PF+ji7ACKy|F2^r`%!|7pPz6j=QJj<+)mN?+-v+qy6Vw#Cv_)u%*0ZxR(JV
ze)S4*LD>eYmgCWqyh|g^mF7SywReICa%u9&10@QN+s|tyHCI~Lyq;iK>lwnQ##%`z
zcAF^sTbh0f?xl;AdIWo}JzSOfMeWE_1wJ@N8;Oa&(|Z@SWw;?z283(E0DKUALMr_C
zpoH;VX45}Kh{UMr-&YLuh;aHkU1)oQ2^bNDg#aOmkeAmCqLoQ`8U|S9X&FIqUI4gV
zvJ({2FD^6`!T<1t%;A~Z%j~jzCl|7}+^fNgW39SY<Jn!Q14>L@Sc7nR6_8uJz-f{w
zGVCijBYYG*{aViB<4tx<dV<3zNCwDx$nXz<NVe4M@HF=~pf(qiMt!#6_^YI~ldC^u
zY{h_m;0fT0Mf855j(b!d9aDxG-KMtE`u&c?RGVg1b(y)>SKJdl-(bS_%I%&xhRD%_
zUlO6+9NGK0dnBWX%D1%<EnHNu7<Sd-$)vRwSs`CY%4?8<{o`^D>`|qp&!fk_z+ZCF
zYACIhL>L{@m;0&Xu<CBY<$L*I<F@yBC6QN3g`&wk4-1--5K$UR79nE9y(OC;bWN=>
zX>IKIjWZnc{b6thdQu}{EKtgAMa>q-mJ~aSOzKtXC;KHg5eDdCzV8cP`vVA|jcArD
zxuvIZgqch7JroKTXhVLz^7idCR$Z>;s$FanxSVY8OOzyQz^L*2-)gXHdtk#CJL2Zs
z^-J=}=(3|RWA;eI@gmDZwaQ>3jZ(g3zCoD<IhPbgp^d@QffyY{vQ<uOAPZ;08g5#3
zR=nXWX$R?XjSEeM`nVkIe1vy`o-9FqRDQk1K{h)pz~-WP)rMx@3uTVD>2xp#Y>>6v
zJ)0?YyY}qbZLwhovtQk2LegBm(Pu`$mtYG)uHBT6N1$iJ1A4AR2m~=`3*ibRz=%sI
z@xKlWr~n$IPbgKFhk?NaVRQS>E(gg1G&N-vM_o<rM~==&B`OlDwc#JEex%aO01P>Q
zEm;@`U)#UcM_INdZi($pSNN#068~jQk(|FG*?&Gmclu34Tiza@8~gKx)GZ5^i`KxJ
zZU60SUO$IYOvL@`!vrn@Gg%$iQgN+Gp2XIVLwMw$A4-wu{sGW&g#}kGKsVl&{{h%k
zrN5Q;^Ti+axkhn(-JPo**wKbb6smCic4Y!5aav8j-XM0rJs#O1HwnDQ!$t+fH&aSd
zbO}DQ`_wE6%lQC$aGES@w=i!Ci3-V2VqDOs;!C^uo?nP;mJ7Ms>l9p6OUl>RHQz;<
zi4Qeez(@-FRva>I{H%tb4C-GPafP9(9M4j%41Hf!fWMbJlAgT2(r@nntxwv|fnDXd
zV2yA7PvdCM)qLVugE<vv)4VG({9E~WL31B<P%}@x|LBz!9WUAXah4)C`gUezS#MMM
z=pmaax0_GlAeGN4pU-iMSx6a1^B00X-PMJ{Y!;Gg3t!l1K8s<Tt>>*6S333P-uZ+u
z?Q9v46LZ0>Kx{%Z1HYh|4r*LIf*CwTdrBmeH_T>#VR~-f+4_l@x-045&z&8W7I{^W
z-X->_Q^uVES@0h~9qh602AuArxR>Jd`g5c7h28;=H<O#8EUCK!JQSZBP8Wwb5$L{0
zlT8JkjmGbJY9<5as|8S$UbPu?`JeM?d~FuL|Llba+O|yUaNOffi;4=@y^{wZfV3x%
z<{$Wczr8ANsVMR8m(au=cK5~sY{G#f-F1g`Ho?!nzjj#CTF~L#*iJQnTpZJu*&L{q
zrrMq3#*#Fn$fPg3#;+ZZI;k|e)a*A+=N?C6opMpca83BXYM%iCO%ed^1RMqsArwO@
z0yF~@BQHU*mmFc+EJYI`|02=SE;LEGfxhy91MaoQicRCwrk5tR4C2xX{*%ZP)rWNj
zZ*D0)U&&GD#prW!`AN)13Rdj#jQ#;U{A#Wa{(&m?jGeiG)#YAc652AR{N@>n*aR%V
zS)ci^CoJcWQaC16?9LUeg(ReRr!--&;x~%i0oDA&J$n_U$@)6V&JS$5F=lV$WAi5;
zdk(nQt-CF_8X0VmTu9b&_i*&Co=Wj#C#ZdT{;63%tuaGpJ!3|X-80$OxAW<HY9+VA
zM>K`m3h*`cNj9SslQR=<Oumth39Mh*QOIpJu#z;>k<Hg)+=8Q=F+xaLN6f1Bm9$ZM
z0(G<};PrHKOTId(hs9i190>(JZVYe2P&?wF&BGY*>kojeQVmto96;`>DA+w4C4t-s
zq=x9ff0I#jXFZZ4=|_MPUnJt|MZb(p<w`5i$346zr)xQH{nUm<Kw7X+i0DwuH7k>u
zBv{{OK(WRfBU%%-%g&b+C3|ktv~Qqmzy}LZh%+m2T%{MJ;}Oi>F0ZJ4Wi-LU-TMe*
zdP`C`IYv~`17B*cwOR?LZ&_)MQeeQPN9x~&TA^HdQJZ4?sr=_ZO?ss-v`Be^=x+mw
zi|dXz7@xk5H9;4BaI%#hD}@T770140)m_WlyW<8HWR)SFZw_N~Y#@5L{KnyXQGCQm
zXe+&z!v_a<8jnrv6$5QeZREoRQJ(!;wVEzm=5O=z0LaXm@)++?d9Y*@f*QgC_)7o~
z76hvFKT4n%gun&<=MG9>TLgB7CM~^WNKIKyGhS61>;g;~gWPKVzj&k$#*k7<yPS|u
zR@yg~4{1dovOfuqWOx)Dyxx*pzJyM4)Uh{EqMAvIgXZua&QCWb*?cz3|7PVV#x7HH
zAUcpAX1JEyLQLOGqeS=3l1oH5X;#0BBirse%|ntRe`Bv@MP=r17U`-xbm;(@&ta&%
zA?^~^bXEgD|0tRBNh(KnWNcyEH`9v|pP+#o(t%yyEJGvW9TLiOiBmK#V%j&XVczbQ
zEq<oA*J<hAj)oaa#V3{~B{^hTi*zQsvlR3mQ1t-B-^jV38B^?u^)qFKB`z3!Du=&n
ztvK=~=FEX_v;-vTji;$;>&JY0^j;C<5v*;ERL45mSh#wq@wIs>vvIgD1eKckqUya%
z*aE8)IN7ivy9FkyDzxk{n-ngXuzn>I52}@=qQdjV^~b)bCT=#v5<P9*77W>=*ZZnH
zCdU4{WQtI-;_s^g6)X#_`W8<Vt8S-CqQ-Cfv&5kqVwhFN7&kgjQu*qItNX%8UV_FL
zM|b9Ya(Et(f)Ti6Q*s7@N}j$_D>2Xu9>(S>ix9&Wy%Z0TEQht#0I5C0BJuW((c4b;
zVUtr0Vs~%I?rL)kfLgd_CO?$Kj1pze*LrNG#)%KzPAPS{552NT0hc;V$+4G)Z{&PT
zKULFRTYB^2yPV)=%O8Mq^zOvWg#}%E=XbdXsWDSu_L$_cSGWSz3O&FW`<AvN5evdX
z=LnExfcsme0B%riJ_7!~<Nz>$I1)Mwq4JVTq7b0H+*z9lzay|lK4QovlO&o_)E*9X
z{QByHAU#o1{#3{C%%C;5y$y_2<BWVv*Bx*c+$%O5$eOT`XzL=A{Apd`xT`i4ZrwHt
z*c0;a70tqz-K?QmIZYViOqGgJ!|4J{@7)Gg9RT0Sl=riky!-V;g0!9OibcB{lR^bQ
zehU7PntQGERqLXGM8CGDrR9hS-sF4o5Yv~K@0Lro4<j|DGjIL@bX<{PuYS{nTTXr%
zPqZHcwm7I>7XF&@-p4X`PW|cCrCV}-94;HE=DM%-69w_3%REdgnfMFU)|IFduVf%k
z+1DBQmH51XSrTmj*R*nCrj4T!-*@d}hQY<--N=ugM@)F18IrN<C!7JClLxgorXq2x
z4m;6DwYY<|(w8B#p2=^_qGirPuMA-Q>Q&a#EMs<&N8it_8*{2UGj3VDuy<l}N$qYC
zzAh`v%#3MjptC5`)i1(&ezYh+uVDR+3r4oO`>HiG*k!Pg#OS`;OA?cep^{rxyU)$+
z?}263OU-@@>T|lM39uQ(-?K7$4`mFmg4u-X5oZ~8El0f$C?`EF?q+RCt|3*59?<~u
zvkNc?ogvi1rr1>{3hr2AB5A)Nr=YRO6xV}t9@$D)Q-$E(X-Y_nGOu%6WiiESO7r#w
zw8>apB7i4<CeKFg>iwKfVYZ|CF>@ZN29;$ruS==5CvCX8MOn}KN@*xOAA3#mgxgrK
zi*B%M{Y}yj-w=Pk2A;({wWWK=kDPZW59;!T7wMfw!HOCq;o$F$7S^ix?s<jYFD-Wf
zoO{z!!Mw+IlSK$aZNr14fB{HZ13{8Oj}z&+5`O#x=EnaE`MfSs-KBo<Z)yq2Y9fdk
zFbI{P{9~8+iakXMWJaC@B<bZCM^*swMqNUvby>lqe)<EQ)oaf0hRz9leMrrq!esiG
z6T8rO1h-A|(p!N8X0u0CRvF41vCSc0d-u3Fexasw2S?%WepMYm8-5ou(5%nIUwVHM
z|GFw(2VPaNd-Z)v?Lg&2)!ElVlMk$J8Ctg)#c@98yoIh&qWZ{cNy0Sb{W=J%Z7}DC
zUFhN*9&q7)4GqJ&gqpzQf17@t6=DYC^EbY;&9E;g-`&+@&|xf2PNDryep+6eSl2YX
z!=fr4;m^gJx?%Y4i(+HKG3DFl55N0YP15ue*B!Fw8f4>N6d7h|a{r3IqcMXXIDqVE
zi|pMr4OSB6=UDW$PC5@C&N;B0>w(a<Qhi=6dQfUJ(ZsZie6|*~ikh6?{ECR#HcZvx
z&`ZZxunGP&$-2$|-bSX+4NjKhr1zG)ux-bL1YD#w&4OA$=U`|A?LbTJ=iPwie0%0C
z*b~3FPwwdsBW7a$UFDtw7Q#Z=-6xgCA${@y79aL4%#8uzfG-?i$;H{vE|Nnxi2}I{
zUp}=Z)=UGeSF(29|6LTCrbQ#_uh(y(kYDsZ!!SNsEyD$?od&zkrjA@0dBGdV?lE*s
zMgTQkKDvlgPI}9l7J4dQ<UTcw0?s|CA%yGro@&W#Y{Bd`G`N$*Qqw~Pv$mDKT9xr=
zWB?mlvFc!Cd!VMcgS%j~()|M<r$UHv3k-pj#m-ig5Qlow4n;GJ+nkibfn>+=-aG~^
z!-!WMPDUwbJBZp|PFSx$OQBql<e|3qJiuN@emUPG-=4xy1FB6#j}$<Y6leWYB#HD9
zZkG`5zniedrOI}xasCw*i;)%pglB&L$E~B0JLyq#{<!F(JCEQ^ag>eRy!~*dUxz-C
zqy&L%n4Jbb>i4iN;K#EPzD0aS@na*v0z#K^v-4m8P4wD9-=LMli~?BzVN16#bP#Z0
zGu8b(BD1*d-s>phH~M1?8~U`zLt&oz$9l;%A;a6~I-ZGLZZotoyK*1zsaSt`z;pG`
zBBn&tyD6@mWo4f(jwsW#^jXu+so5Bw?sEH1ZKt8?tIUUFHhKI+wVKXV>bb9jhoqi|
zzreh^=O<%z1V)v9zzd&W#lBYYU?t)8J|;#^rCK)gspm2ks>^`d#lBQdCB*G_pVElC
zHU97mKfCgbxT=*i+co>n>Kp%Yky{SFLu~nn7V(20`$EE-3rp=)XnIrqU;(IzW*<fq
zJ&C2bV!nuS+p6}iox9MQpV}s}X5Zd#OgG(`U=5!%_^NnM5Tv-3Q~<Rx`W$NP_Ki_5
zO>SQ!G$q66?hK<^xCs*z$Zo9De*2og1S6a&47u+8^?^4Z&!eXVo@L~DY9B23VT^wM
z?sNcnQej&DVH-TH@Ad}syPD`PABopCj8`%XBk$lhzJK-B9ld?Bt?l-+84uTbdo6x2
zFWQhd(k7AuA8VByFZk(JtBTd;xP!4?>DwiRi|mL`_q@s5?A7;`%GV6eIQqf{zhZCV
z*6zNbK9YLD8fO5uSpL$48tUos5x?`@=F^ja6Ny*-3cZwEdsjdWZZxNy;bes$SM2hW
zOp|{+*Y434Og;8APLZ2w8I)kImA*e|VriaLAs?+MH=*NA-zIZ-Z$Fqf+}D^@VY*<q
z(Q<gal}|^)d{k7U&X0cGRN?GKZhCFF><aUGr|y@a=ankhxy6@}_3y<I`4#N4%ol;{
zCJqcGo>yW|bwf`dJnm=uEd0LBzm0lf;~YN~N*hLWfc_a&DjAhr!Y)cJVoyZKcR3u2
z<gawYCjyGP%zUDZ93%h%bwz_F{&MU~-I#z7nl4f2q?;>KQ`1}^5kYB=&cENQ;WeY`
zk@q6Q7r2yG4t$PZK{FmcnfB(eEH`>W$zB1rI_}y%uB)x{e1R9SSz5cR_IZ`#>5h%q
z%3G?rnlIPq(ywGNW&0k6<_B)NTf=ls+;nKX2lqem2i$wIU_|dbBefMt6R5$3D`5R5
zlm>#HyrIz+JQ*Hp?oDF+*g@ajT=$6IqkPWllg0YS;^cKl{eu=+8IITCLUPTDRSnWf
z;rY$dG!3uhj;a{8al?NA0xMfqrBl-cj!sTm`?UNWTcg!Gwr<k}RiT?-)2`TA2i85N
z>@M3o+524h%5o^F@P`rez*Keiq=$cmqlrsyERRpgkN7T3qF#M+YC*8~)8Ca~i`k2=
zdL*aN*X<#E_1e2XfHw(M(&QfHMBS9GhRnQb?VLJ-MutH`s6MwqcB!;oyol+=9C9q|
zr!8X%UgZ2RL0xj!(lCQkW3RaJ&fS7|96*}W%ETx_GSHBH={Y2QrK<mRgni37_V`}7
zo#$xW2h-@m`{Mi?jaT-u42-X+e-pE%tVj(Ccib*cgf>Jy__q2)snjA-w~@z_!CECH
zMkuc97Y)owP#c0NEJwVg?g2;ZxRu7Pf3Q7aO!uXERkmel^Kq#sH0?!tN&8a|TR$Ha
z_UgjKW!U0!d|W)A%+K!<3_p@s+>_=yXdW&NxSgD(fV6Mr3Fn&BibpaoSoAkWIzPU9
zUD?T*Gl7Y7wB;za`bXT*Ez~+ItE#!_kn(|s(dU=EU)0?dldwV3yvZdVWM{ci@+a%{
z-;OPX{Pb_yQBSUU7VQ}33NITz2;`j+q|s>4N*mb175{`KNu2o%Q1QGpB0e)nmh4?k
zFF3&u1|Q~f>@cuhWGk2s4p6#0`UBXTm%8y{`KM;&!gI@n)zldE_Y%iaSD!CeGz&Gi
zS_>-UIMcvGia*1Q!@!+Sc2^e0rR&cgda$cpsr$$_6^zF!zjH}sSD3XHDxciL7CLx4
ziH&yJXRg^<WT?Eop5?&AhCe7BXB)lEu5v$jP2KRL6<dUH=!_W|v&!c%Hs{(;4=r_H
zGlyy53#I#Cv4zFRj)V|KB@n%H?JC{-Mv=zcL;hhMut8|-jwuBqjDEvwOhen98!Z9s
z8k15teA66e%B`O!v))+ag>|lPY|pm(;7gWOy9Wvv=)~1*sD5(x<d`3<3<zwbuSs8*
z>rL16JK!PuIZA4;69s=aSUYcu3;4kPB%3=}Nib(<3~Q(IVyMEMNQSOgYhH!xxK6b|
zqx*I!lg#^)Q$*+^QTXj4Z|<ZRv35B4pf31_e=+<4v^^}qSdcNOP;4hD__$V6^+&|Z
z#~$&-fMBo!-8R`#o!11`q4_0J3T9m$1z?Lz)@?SvEncbJ<F7|WA+W1b#ifF9BZZ<>
zFEQMIz})2r0^bk-HWAuR<OJOISFa=R(=4jL8|OEjGTdeFP*WM~et3%kdY?|!X>@#b
zrfdef{96=}zEDn6E?fKPo@L5Y6MA<E{NV%6?MbsYnbei~K8*?eUtaC4Fmn`rvG%ZB
zbho+Y>YN=hsaSnIJq~0>S2W!wqWY20QDFRC;s1b)qDI{+^7zoEl7gf;iH4}+!Z@=a
zJH2Kl#64vA+`9kS{w>(+Tw;=zE%%JNMSC8Ki2Rw7N_`6CD1H|<RY4MQz)b&eaHpLn
z(k8n&O0i{s5X?ri7>T8^+SE4By2b1DL@&bl{U=wEh;{P~zpgc-01$x<`e%SaB|l{V
zzx~bK3*(T}__eyy&bG!FW)tQ&Biw^eGAHZV2i#Y_1w7wLZ1>i;wLZ8;7Vjf5&n|>_
zGBW0I-`FyLMnbxkX)!=2vw8OgxUy?u{=T(Z{SXA9ybXbljr$1p=dtfrXBYJJ%5bz}
zPaliPn^sl_q0EC0dBL;#f}@%Sc>38y{kFEJJ*J6}^ox^EgJec~^zeg}a8dX#K`$X~
zWRG@Jb8D(+m>(vR>0<v^wY1gbdX6t??e9rWIhU~ofTx}k@%3NTB@<rrUk69~vT1ph
zi#iIYq<GssV<;^fN`FzZd9B-x$F^}itobclHeOTvl{<l!cX^pN{q0(Qm)F2VG-GG5
zedAT*L6QE5<`MTwA8+9ok18HUeBk|jAR3_>9!>d!0R}!XGcj$vKJ{k25&pzDzkCrK
z<-ziP?p(gK%^7aRwyP+F&D8OS5a_1aIGBIBI#E2so0!qPB=Kc?NP1=+cB!02ov}tw
z{nap!%k}!$IJT9fm8GWF{1r>CCdJ^%no?Wy95t<%{GaNWupXw~ce!}lkFiV^xA_G~
zr4yc;@XV^X`_CmOuQvvse5f>cvN3!Q^gY6k2p%l+X_N=s%G}WLw}|iz3wq2{k!MOw
zY1Z;F)C_0-A^_mMk&?YO@#Fply)M%Z%aheQ#+XG(&6mG$;`;+Hk85{bL^a5V`YrE7
z5xP+b=Vuf(bX8nNYb_}u{QSpK`p;v6_;Z#mH*-$D-=(q}_T_>NZ4giAg_O5u^$P>!
zSr#c#{7DKlZ>sgyME2O~??ld^JjQ6@JObM78u*Q9o6cg_mYwo<LHjZ0jBi=io0F;S
zr!XD1sy8+1ewbRK7l!<cEw2p<6q=Kq`xfD<FlSS_pYwy*u?w2+*9&h8Kz@%u<bI`1
zH@*Chk9p&umZ4W`?8H@FmT}=n5D!f{eR?diMiJjb|Ey7K8jVBUwH_$sy40A+pqBuc
znxJy(tNgd;{1-Z0!Uw`ZiYdjQ?f%<$CM<e@iFYTss7#~iebZBmm^10w_e!%P_ogNV
zX>eMHVVX={S4AOCMqGC=8^1g-^H2T&?qoj=rGR^`?43n%DDFH;$~P@ym?%=kR2IGt
z#^Cl8nsOHRv*gLn1C-*qYqAzILLEBw+Hk{@AroUFO~0tOVwfVE%HwuSui0~ywrAbq
za@aE3@RRM6$~1lKFx=2i+$eN!;6PXjQR-V^1&hA(T=X>V;p%Ui$$L-fY?OOfje}vn
z-51#q)Z_5o2Ty-D-2GLElH%nhY3OuFDYUqPZ-yn4f38=C+x;+}78_udOroRHlqmWF
za72w=JN2Vmb6X2vYcn4B46LRz*Nupr<h@JF6>nz+y;B3{ds85oVVRJZL#G`g+yD{u
z<~=08SUxiP1yZuux~J(yW(;sh#R}8%b<{Hfj=HvtH=bvJ5h)$no429B_SN7j8?MQ#
z%S&)ZzZ#4v$7B1)&ly}4cWiDi#bP;Pvpj9*5HlvZ=?U$R<JSiJzh24S-|Q)>g(-b_
z|2cXx(?VL#UF+V&s~)-JYTk#V3mb0W7{%1Xn&*|byiz#i;hpbXQ;#`w1dp5@x<gzF
z-7f5bTSlN#iNJdB@A>rKCTTVZ-K&&EC$&$H5W;cpcSZdNZq%yz`OY<Pdnp%XPzp5u
zUeC~7LypJwulp(dRyAg)=t|^><j~y~Y+~SjH5W8b^v3ZQK<@FyjbCl&>888Il=CD9
zu&b!R<`)mRxhM}t;m!}LIkc_mY}d1zXP=<EUQf2H(jkKuSgb-ROc-QSX%{F>k{MM(
zEEP^UvLC2s@OYcD!r4;qM;>mOy^-U)(d;w^Sg&wnX;Vwq^v}01F)S8+9UxcNNPX8P
zj^WgSsFO%wS|A%@3q-C4n4NlX8{GL0R(cX-U0qGpk^ivLJuQnxKnm|i26ZD9A)-JK
zGCCIaFJ%0$^d|X7)E5Ah666a4T+WDo^4DH*ndSyKePv4R>|oXHuu8}_R57j~uUnJl
zJ@1pJg7eP~u~I*$bWS9^s{KzjX(L%WIwj_rL9bV9<`l^l8Q8}oByAnaAvj9=tjyNA
zN_rLf+hoK^q0^50Ijfl#Nzcy%t8lQH=}cIe{m@mo>@UHNz82jcT=ROYqRhETz{k5g
zdPkBvE7BF2v2#t>TBGYST|A7BlWZP20%WjlyOx7`uI<`a3$^!S1S=oQb3E*`K@!<B
zvCC7$gazwG7_=7;!)HGn05W-|n?Cd2q*iU&%|6p$e8K+eGyP*jjT=XxY@^Sowf?4U
zM3J}doYkgi`1gx@WbX5o+?#k$zJuh5iCb~d>#{Yj@EVf+>Rwx@Re`2inEu`T2F#rZ
zIpT?%_m-*NEa-&3&-W2@Oxh@wOnT1yL~O)-0MZMvFLd8^xZTT>;#NJwT^MSpx|}YO
zADNmK=|pbi3`;i-KSZr4C^`iOK8kg)<-pi?f~{Lo=NF?(QfEMMr6Vj~L)?3@n|(AO
z;DE)*!p>v-b%(pkkHcSYT$rOl9S&xNoUxwbqdn_se*l7WwdaBp3hxira|vK&x=i)I
ztp8tAP0dGW-cbB+)=%&aMNuFu5Fi2*x}0W0Ut9B^CeIRzxL}_>Po@COk2P%YJNb|~
ziQGI^F8X-zY$N4P^N5+PPz5`+4?ejp$T0h}C1kh6i68RS&estCf;-;7u$d9}<j#+3
zeGVC!s^EM-g6I^a;o*PBWPmE<q$cr<s1nPX)17Z3Q9UL=oL=YwdH^wv0|~wLhOe4h
zmu7V|sy^h2-8KJi$?FRUmz&beyD3~W+!S6DS}RV?R|5Sx$IhH1<T7ima>Q%Ypw$R#
z&T^?|?6>T!Ic#b*sd9GsASR1->I`$CWCHO__>Z_^?nb{%M{~X8pDXgOn4jBafKxfV
z4C-@ed5IBCFnhU8wq=~LKKDi1s=wjo#lcZYZlT(-i#l^_yY6jf<C!T99;N77-9B-i
z4i!$}*ZDye42BsvbFN7)jr3H0wktjY$R)LfL$MInjQ-4E$)u1#;mz9~Yfk&9Pi8U5
zf%;(@$dOb_5)-j1_X9mj!`}SkiUFb;ORBeuVixKqPB-MeWfd#*cMRG%vbw~fO&ZgE
zVkuV(-EYgvQ~=Yt&-%t}@~T?zEiCeC4nlN&9PATMt1c28)-_L_ve9gG3h?vWKVLI-
zUc+!xnynnM;g5WgLgR?{1C+tRmvd_m{QuzCOZ>`o$#pM{4dnk7BMJGz2hkJzkF)Gj
z9&-H#g8)tSpOiHQsANvJ4?4KkvTJnRX`V6Gd?ny$$fczLdRQYk`M}UUP}Vp}%emkO
zE;^+t32d<;M_Uo$j@)$82{jzB!f6hNhm?;~X-0*H;!Rp!m}MfHW%NFJ;|J5;>&TeY
zJgCGT@j5dJmZZc~!YMU;$AQS1pVEV3{m|qqhONxsaB;aSJQ=SiZ=w#QWA2$fy;9ih
zZf-(4{8VPkqG5mu?0+~*Z2pYaav`~aUUADDRg7VI?Dq<w%#XD+5R39R;+e2(EgClE
z<%pFkg$Op#$}p8z>Z&U7^?<;sT1FE@ukxb1zbkJ4x{BqpGG47`BBb(gDGx))VjB%X
z{RwKMFHYFC1E;l1k&y7Vu|quvJ4cM<s}?(s#}MUYvM1H)9J$NQaqE6J(h6pGwceF_
zziDdQGCAf=?!VIv9J6?NkxkBIXfBp#3h102K<otgsO3i``FYSR4UWlluVxN?6)KP8
zi(^a*!fwKr){WP(jtV#f6k=O8>hc62g<>FO(SN5(1&w0?2%!J*od7YVl3D*a1||q<
z#w826Y^wc7%lr3-tIwF3j+ZmC!p1?Qz0R_Ex(=wM04%!>Te>K?klJ~JnXymGIq=;g
zH4i_^SN~;n-*xUnCOQN2<UkIl{EZ!B($jQ~`%E@d*nk3<gEnY6T!`FiPH@e4<vAHU
z`q^4O)vj$MqEb3x<oyGxrTez%spuDTi22och8?8o_f6v)9Hu{;-C-5I0}trbnfb6c
zHIB(q4^B={pI<fAuT(tDHObgYX0`1fN`;kK%}d;5CQix6TDX3M1xSp=H`QNVMXCP*
z1l|4vpt!d$_-Z#+xBc1g+G}U{1Pt2G1UP0Ta=&%*8PBP(F0No)im@FQ*r@_f_iUl{
z5#v9sp1u%!{aAW#mzRs?w(WG11#bh@XRfi(Hc1ax`?D<hQ~uH$UmeeA=s)yZJlSg$
zw=zEyyLuhur+iww+!cZr`!?dRuvsrPo9+OBj(E@3g2t&G7eD6Lxb?TKV9k?*>JUgS
zu`!G1Q9`b{^~y|@5aJOD1%uc=vp6LYJtc+EskqMu7JVDm{cVGz+OS$2Ly+1?X@_MO
z8rYViBj|3p3%8yyF;V9U4z?w@Im@n7^Fc4Ik|-5~D{U4*q5`Fjy9qEABS|4-0+M?F
zG!me$e@$vg(B*n16zod_Bq1UGX)QEG5oX<1L;zD9MK`YC#QLI!G9Cprx2)Lqcu^&n
z1zbJ^oIR_<)mO8YAp9D|o|g(JiSSSv!fPe!{Gf6B$O^l6C)Krr;*U`|22N_Kaz+V4
zw}`QD-tYnUTBA5nx@FFz;nV^NE$7zxOxiJA$x=|^4=HPmaHz4Bu-P?%*Md)um$4$a
z^e1}SjvVdPdTb)sSZ|*7;=TLT1|+8xCbRv=+=IDNjC;dn%epDv?By}q*1C#ip2D<a
z*4pO%kf`cju|BP4x3nR}iZS;G7HTrfRm*g#b%<9O^_&b{TT+*|GDqJmbLh^35(}}1
zoc*;KuamZ4-D_~8hGJ@aa#b`{2m^TZcV+x{4<wPyT7fHHD&7F}gbG0jC)74KLW7xL
z;=QEs|B?g$T1oXa2nOK4Zophh7{mbR#;(vSv@NCyW8DNxi`(UelQV*~Hkw`U*M4Z>
zcs)fgyHOf)@FQ>j8hUuW;2kqYD0T*^Z(ug9g%^jtt7g}=2}6b?Ypf?)-Et7iijLN2
zIt6IoFT6SXPEnAD19B=`>cKc{L>KPvXaHsu_RVPXp1MJFqV&W-WmpWdiXVI)N9ZNK
z$dozL)xsAmK)DlXKT_0+L${;dwwu-gbg{6<lJ$$b2GFC5#!Ow%<9-b$nrznF7N}w6
zu2PlgyY}_MzGt}N^L$fff^%M_&tdCB$Ja2ZRQ(0xl!}`_s(QNXvSAv){7)_U>sJPp
zO2%Z3U%#v#)O?_fsH=qR`&(uHUZsQ+x>W+j|Mp7~Y)SthNDR?G(yG9g77<ba5@jJ!
z(hP9iUZL;5C~h1a#9BK>Y!lY7dxJ_XONYjGX^q-Sv$VW6JPGA?|9ztrx8YM^2rjSt
zi7Z%gM1d-(EJQP{cfyCu?a>T{j{99!F{+2mTRXZ3QL@CJq~t1j(!Xf~Sq26W$xnxs
zcT5oZKJHCXpKVXkr0Rlgqh>+XtV1?1qbE%CI{vTfn$7t0W2aMWd9UnhI}i0qOI92D
zTx0qigc;Oxb4ykxI`G#WmB#`5ctrJdLy7u!p^XoFerNvb^D>pk3}4eT=mm5|qc&fe
zdVwG2HydL>89A|*d1QYZ&6n?$$)MU?|FSmI;tZ4d0E7Yf%NZ}vm$}At*?0a&asFGm
zHU1iAijmMLf?x1bhHi?2h8gJX)z_|jq5YL1QmH>q?w?jOhq825d{Xx#@k!I;&^WHL
zbvdYI!OB{*2W0Bw5fYjyA2I#fj;^4LXB7jXz;|e3$o`fFNL!xG5Wr7VVmF2>T1pBo
z_2F4Pf&lz+MJkoR@>-}ehPm8@C^70OR`R%11io9C)lY(FkY-|(-7?0=4q^J^3r_ld
zG`Jk;raRafOf`S{vOOlp+ePgu!u$@U_vRX3bcDH0Yb=yh4)S2#bgB~>5mtjohZ-LI
z>eI`32f8=(p9AlH+Op`~*s*!+h^b8>=fCF62SQToJ^s7&AWbnj(f?%I|B}@%S7H{y
zP}zMsb~%3?Mwejquj`&*mAlNhGRdj}Z2(-wR&L7QM|Tm@KgM?82H0|P_DcUA?m^sp
z&5}1}h;8j6SoW(N#bWFI+}2J%xy-!RaQ`h9L5huD-5e0!A>=ChCx)V-*@PzB(UiqS
z58EfeT*?kD0W4SCt%oChwg@i%Ye*~Ss4IwI6=iB36ck_dgp0)&-Uo$rhXoPRJPBu?
z>Ww!ehJ4W|j(Pavda|E<KvhF}(^Q=Nn`{d!|CFpeeF3Z1p;Y(xnYA9O{?m=?U!J)5
zJ96vn%Lw+0ZmPRa+~J?%qL|R(9WaW3pR@EwcCZvTrfB|LZH;Fi4o&H9DwpMVbTP@d
zc%{gyvd^-;Y1D5#6E~pj@$fgyX^X{EF0jH#Sy4w0Rp`d#;*gFyz8>ZtlF@v0Q(sU0
zHi+$T+uc@$nW>7lNzd)lT~G9%)%@>v$iMRQA35W4^Z3W^tOr!_>U5XRGcCVSIU=Ot
zqYJ4eE$c`QWh-*Gd!^LfY;IBr5+Kr*Q``2{8sbOkK>_PgoJ{N4=NFJwHUrU}BecWk
zHELf&svoiXN=M@qyJ$9FtGE|*PkT*ynxd^DjE54ndzWIH5^0ktUV<5^%=!gwg|gYH
zg1?W0Wzk40;~QKhl1(&CT@om$Zy!G)A)M0+-Napi@Uqj=5iVv7P-RC=x$No&Qkb|=
zqyKq6PQpI=MeQdMqr3*e5LRU6b%I6jLxP(Bh`}>i;ZXZp&HnIn6KnjupS+3M5aXWH
z90r&XYU=WZn(}MV^4^!o$XhZOn@2TuRGT7^ep0O2zu&X<KCLdY`1YM!SxIoONB^hR
zO7GO$ju`ds{pqT`o324OXW0ccO2%wrk83C6(;0+vI1%yAx8<)eN~Sj1qZd(tX11Sg
z-pwNVpfY&<I|$I$U{XK3!?5C?M?pwImp#{iqc%dyQ~d>Ne=T$#GAfzIHU^72qyRIw
z?C@=HR;x}n@tsh^U|$WeyyJ2jh3hIl774ngqN|T`u`){R13=mIijjVS=i}FVO1We`
z4O7YC^O96%I!nv-3YuOG9v)Mi0%x3?p(bOCncL9QprLRl-YXOR5}O`!FV~ZikK3L6
zb05b5*#&VXUX4wLikKeH2{yJ<_GH%=%daP!cPhDdR0brS)26uZzHNr2kh8HF5DzF7
z=nb$KCK*c1JyWocqMd}7b7Doufw;^d>gz+xs8!%}+E*U7LN{W8iVyw+7Ai3zk^}a7
zAIsX8v+PUKyU=7GJKdWwY?Dj+9hFuK0PKkK2c+Y*Oks_1H%UbrZTFqAT=9?9e!8Y7
z98(U6i5t_U3|3by?<r(X{eIdUEJhGTHK`C)@uDw6?K=d<*MrlO-A_#7f2?S58^M4^
zwxpZjX0@+Y`#<!0>o2m_tinAy-HK)E@a_XC5}BXoN(YU*FiHY_q9}WojT^btLM&bY
zB}sw_tMA4+AfKU-hFZqDflZnlO`WbCnX3oN_e;3OU0@z`0Fl>4yjmCCsE~{*M8<0s
z%%dLqgwnbK@hqgEf3UeG?1p*;+I~X6siN~x+s$m8q^2vd0_7P{k-O0;i2|?>DWDQk
z-1;*iQFai+ePsv$3GMP%gDRs*A^X~WA^^Gkra8YOG-*Uuh5tK@BDDG)8cdg_9#LFG
zRgf&Lu$~@AmL3|6rrHgINhh9E>*gGY9TW~LQv1(&SFcOl^?74e`3{WSEB5(dRfqg_
z=M?zhtKsQ~i+a=Kp6PZW+)rOQ0sIzsm#sQj^0P<gWOM72*VRe;1B%H3Y1X`3?PmT~
zGwOE}H_g1WuZ2eHYbmh2xE`#JdfalQly!u-{wD0Yoj&s&ceiJfQ6c^#_eT0yE0emT
zU%X01xOtTqW(}lKR104m+4Rk=wRBL9Ps!Hl@=NKsCDO<l)&$ItAhcAmjY<-&i<~Q(
z=AMe&wf%Xk=`F=M_790Gv5WFO5v~l|yoZAcy7#djX0Fp6p=&A`-h01_dT@0aq31K!
z3UU^MtCcqA_uK_xECVc0U`&9Za#CS8Ro|RSu>o`~#$PO2dFyOk2MYgHnbpf&hBDN?
z5yhe{I$7BSNQNUq^+*9k1xPWZgfjJfEUKO=?@asd++#j710wS@;yy8H;_0%qr_5#O
zp*{eoYrtltT!wtJ(nH&yM&bi{4iI2PZQZG*<ku-y`(Wd*dc@2PGF4+~+B%RuDM;*k
zA3#doU*|@YD8a>D*fi%0$wiZtuuUMX{FSK(B-={+ZVCX!G?7+@QD{)KCIT$kMsUi~
zWZ6H10P--U+?fynvB7orD~nRJ<wP(56m)IuJIl*jrl1OZjA#gWI@hSzuUtr(*<v70
zL`q?>WT@@p{PcW=Un;J=7@o)Dz<D~E&E3i9xP^G<Xk8<&NH$_;NK;zhBm`H~5g#y3
z`Aq5%cUrx=Ui0ap{rj!ggZ>Y0Rrx5fU;@GoKKdlHZ7a$sVf_(V#okr0_z#)dT*&0P
zb%q42qyE=+$YdagDBN&QOy4<C%b&vyjlbnn^r=h==MWVMRI#|K>1$l5ED@`kn5V<j
zlHGXmuG-|B`gocO`Lgb(3;zKG&%4yM##rram62~?Ict5NO@-m*#s1dWjH%a`c^Naw
z-r=5~zm){>KswdpC&VwYD{&8&#d7$(7>XLcH_@h@rrd~l1*TByZzZY{xTjYo1E9%T
z_D5Xpa3C9SKn3!N^m~mc+(MUoL7E+@yVye~!zL5TPSGF~!sduhnM$(9fKGc}nW`+^
zU>7s5Oy?l^!q<SLlo%An+KRkwxUU8UbT{Re6I?NcP{X(~q>p4*`Wpvi^dzX1-Ho*!
zO;#M9I_iEth;eS*&snbJb+N^e%&w#Do=LehtEA?R6Z^uEX-GQ=V8PH=_i`E+43?ik
z2$M^cWU!nQ#Q<q5ft26~=g$I!^(_FgkJeNsgGnO8AwUi&3`%G>AVXW-okRdomHcuJ
zykq66K1vS{@CH3o(7T;E!UQe_qJ2VflKP@UFeQDp_qSP0RD9pu<2)Qv`j(DxNaWnc
zJIv}g?x?*Nej0RR4T4+B=FgFzL{v!js%L~9>X7%zbNPruC6qw`c7YLQOc~&cWLa7u
zMiP*vPrx~1BiDCy2oEf>BE@w2_(K8SQ2ELF5fVLO*V5uNa@b9QK7ceNw|p4|Bb*JE
zvnXtd;x^r8%hEHE05gZ75i8^FNp3Bm!3LWFU{`Mi^}JbqiSW<dAct^esy?Q2f>*qc
zeP5?GL^9FZd2ieL?r709Z3_PU_Z4Vhmw~LJpDRO<9F;zD<IydJZf%Rc^$gdV+FrdT
zY<o;LbxhdjLZOmvSCTz;_qZ3>t#h~eV84p_U{7G~?s4}aGNLY!FDE%9kk*h_Pa(0*
z(VLA5Zy|*-Ik(p+dDN)Zs4aAWYoy8;=mdQ9!|hT2)Y$WKGDoL5@!m~?X`6GfBy&%E
zbYL~I8YW7K3V9lBaYS_W@{vR_e*(ezm#BiYvv2Rab{F3HG`JLPFwT$8YA5jOYy8tm
zKQATmj%0k69&xLoHhTq{L;+`?laou0Ap}i6m)R+o*?IX~C;@OWKyoh)frf6~83Zp1
z;dxMUH3EYtvPWKep!-B1UEWaTQi98QK`*hra<OteMVpJ?2KoxVA^GhK2Ce?*<NpC6
C4jW$p

literal 0
HcmV?d00001

diff --git a/images/cc-by-nc-nd.svg b/images/cc-by-nc-nd.svg
new file mode 100644
index 0000000000..79a4f2e0d1
--- /dev/null
+++ b/images/cc-by-nc-nd.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-nc-nd.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY-NC-ND"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-411.87964)">
+      <g
+         id="g3783"
+         transform="translate(158,204)">
+        <rect
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect3785"
+           width="80"
+           height="15"
+           x="170.5"
+           y="237.86218" />
+        <rect
+           y="239.36218"
+           x="172"
+           height="12"
+           width="77"
+           id="rect3787"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578"
+           d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z"
+           id="path3789"
+           sodipodi:nodetypes="cccscc" />
+        <g
+           id="g3791"
+           transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)"
+           clip-path="url(#clipPath3442)">
+          <path
+             id="path3793"
+             cx="296.35416"
+             ry="22.939548"
+             cy="264.3577"
+             type="arc"
+             rx="22.939548"
+             d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+             style="opacity:1;fill:#ffffff" />
+          <path
+             d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z"
+             id="path3795"
+             style="opacity:1" />
+        </g>
+      </g>
+      <path
+         id="text3797"
+         d="M 357.4197,448.68503 C 357.66518,448.68504 357.85131,448.63146 357.9781,448.52428 C 358.10488,448.41712 358.16827,448.25905 358.16828,448.05008 C 358.16827,447.84378 358.10488,447.68705 357.9781,447.57988 C 357.85131,447.47004 357.66518,447.41512 357.4197,447.41511 L 356.55784,447.41511 L 356.55784,448.68503 L 357.4197,448.68503 M 357.4723,451.30929 C 357.78522,451.30929 358.0199,451.24364 358.17637,451.11236 C 358.33552,450.98109 358.4151,450.78283 358.4151,450.51759 C 358.4151,450.25771 358.33686,450.06347 358.18041,449.93488 C 358.02396,449.80359 357.78792,449.73796 357.4723,449.73795 L 356.55784,449.73795 L 356.55784,451.30929 L 357.4723,451.30929 M 358.92089,449.15122 C 359.25538,449.24767 359.51434,449.42583 359.69779,449.68571 C 359.88121,449.94559 359.97293,450.26441 359.97294,450.64217 C 359.97293,451.22087 359.776,451.65222 359.38217,451.93621 C 358.98833,452.2202 358.38947,452.36219 357.5856,452.36219 L 355.00001,452.36219 L 355.00001,446.3622 L 357.33878,446.3622 C 358.17771,446.36221 358.78466,446.48813 359.15962,446.73996 C 359.53727,446.99181 359.7261,447.39502 359.7261,447.9496 C 359.7261,448.24164 359.65732,448.4908 359.51975,448.69709 C 359.38217,448.90072 359.18255,449.05209 358.92089,449.15122 M 359.83746,446.3622 L 361.54096,446.3622 L 362.91671,448.50018 L 364.29245,446.3622 L 366,446.3622 L 363.69764,449.8344 L 363.69764,452.36219 L 362.13982,452.36219 L 362.13982,449.8344 L 359.83746,446.3622 M 365.15837,449.40842 L 367.69946,449.40842 L 367.69946,450.57787 L 365.15837,450.57787 L 365.15837,449.40842 M 368.9174,446.3622 L 370.65732,446.3622 L 372.85447,450.47741 L 372.85447,446.3622 L 374.33138,446.3622 L 374.33138,452.36219 L 372.59146,452.36219 L 370.3943,448.24699 L 370.3943,452.36219 L 368.9174,452.36219 L 368.9174,446.3622 M 380.65173,452.03266 C 380.36579,452.18002 380.0677,452.2912 379.75749,452.36622 C 379.44727,452.44123 379.12357,452.47875 378.78638,452.47875 C 377.78019,452.47875 376.98307,452.20011 376.395,451.64284 C 375.80693,451.08289 375.5129,450.32469 375.5129,449.36823 C 375.5129,448.40909 375.80693,447.65089 376.395,447.09361 C 376.98307,446.53367 377.78019,446.2537 378.78638,446.25369 C 379.12357,446.2537 379.44727,446.29121 379.75749,446.36621 C 380.0677,446.44124 380.36579,446.55243 380.65173,446.69977 L 380.65173,447.94157 C 380.36309,447.746 380.0785,447.60266 379.79796,447.51156 C 379.5174,447.42047 379.22203,447.37493 378.91181,447.37493 C 378.35611,447.37493 377.91911,447.55175 377.6008,447.9054 C 377.28249,448.25905 377.12333,448.74666 377.12333,449.36823 C 377.12333,449.98712 377.28249,450.47339 377.6008,450.82703 C 377.91911,451.18069 378.35611,451.35751 378.91181,451.35751 C 379.22203,451.35751 379.5174,451.31197 379.79796,451.22087 C 380.0785,451.12978 380.36309,450.98644 380.65173,450.79086 L 380.65173,452.03266 M 381.82921,449.40842 L 384.3703,449.40842 L 384.3703,450.57787 L 381.82921,450.57787 L 381.82921,449.40842 M 385.58824,446.3622 L 387.32815,446.3622 L 389.52531,450.47741 L 389.52531,446.3622 L 391.00222,446.3622 L 391.00222,452.36219 L 389.26229,452.36219 L 387.06515,448.24699 L 387.06515,452.36219 L 385.58824,452.36219 L 385.58824,446.3622 M 394.08956,447.53165 L 394.08956,451.19274 L 394.64795,451.19274 C 395.28456,451.19274 395.77013,451.03602 396.10462,450.72255 C 396.44181,450.40909 396.61041,449.95363 396.61042,449.35617 C 396.61041,448.7614 396.44317,448.30862 396.10867,447.99783 C 395.77417,447.68705 395.28726,447.53166 394.64795,447.53165 L 394.08956,447.53165 M 392.53172,446.3622 L 394.17453,446.3622 C 395.09169,446.36221 395.77417,446.42784 396.22197,446.55912 C 396.67245,446.68772 397.0582,446.90742 397.37922,447.2182 C 397.66246,447.48879 397.87286,447.80092 398.01044,448.15456 C 398.14801,448.50822 398.2168,448.90875 398.21681,449.35617 C 398.2168,449.80896 398.14801,450.21351 398.01044,450.56983 C 397.87286,450.92349 397.66246,451.23561 397.37922,451.50621 C 397.05551,451.81699 396.66706,452.03802 396.21387,452.1693 C 395.76069,452.29789 395.0809,452.36219 394.17453,452.36219 L 392.53172,452.36219 L 392.53172,446.3622"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-by-nc-sa.svg b/images/cc-by-nc-sa.svg
new file mode 100644
index 0000000000..bf6bc26f54
--- /dev/null
+++ b/images/cc-by-nc-sa.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-nc-sa.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY-NC-SA"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-331.6114)">
+      <g
+         transform="translate(158,118)"
+         id="g3729">
+        <rect
+           y="237.86218"
+           x="170.5"
+           height="15"
+           width="80"
+           id="rect3731"
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <rect
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect3733"
+           width="77"
+           height="12"
+           x="172"
+           y="239.36218" />
+        <path
+           sodipodi:nodetypes="cccscc"
+           id="path3735"
+           d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z"
+           style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578" />
+        <g
+           clip-path="url(#clipPath3442)"
+           transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)"
+           id="g3737">
+          <path
+             style="opacity:1;fill:#ffffff"
+             d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+             rx="22.939548"
+             type="arc"
+             cy="264.3577"
+             ry="22.939548"
+             cx="296.35416"
+             id="path3739" />
+          <path
+             style="opacity:1"
+             id="path3741"
+             d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z" />
+        </g>
+      </g>
+      <path
+         id="text3743"
+         d="M 357.4197,362.68502 C 357.66518,362.68502 357.85131,362.63144 357.9781,362.52427 C 358.10488,362.41711 358.16827,362.25904 358.16828,362.05005 C 358.16827,361.84377 358.10488,361.68704 357.9781,361.57986 C 357.85131,361.47002 357.66518,361.4151 357.4197,361.4151 L 356.55784,361.4151 L 356.55784,362.68502 L 357.4197,362.68502 M 357.4723,365.30926 C 357.78522,365.30926 358.0199,365.24363 358.17637,365.11235 C 358.33552,364.98107 358.4151,364.78281 358.4151,364.51758 C 358.4151,364.2577 358.33686,364.06346 358.18041,363.93485 C 358.02396,363.80358 357.78792,363.73793 357.4723,363.73793 L 356.55784,363.73793 L 356.55784,365.30926 L 357.4723,365.30926 M 358.92089,363.15119 C 359.25538,363.24765 359.51434,363.42581 359.69779,363.68569 C 359.88121,363.94557 359.97293,364.26439 359.97294,364.64215 C 359.97293,365.22086 359.776,365.6522 359.38217,365.93619 C 358.98833,366.22019 358.38947,366.36218 357.5856,366.36218 L 355.00001,366.36218 L 355.00001,360.36218 L 357.33878,360.36218 C 358.17771,360.36218 358.78466,360.48811 359.15962,360.73994 C 359.53727,360.99179 359.7261,361.39501 359.7261,361.94959 C 359.7261,362.24162 359.65732,362.49078 359.51975,362.69708 C 359.38217,362.9007 359.18255,363.05207 358.92089,363.15119 M 359.83746,360.36218 L 361.54096,360.36218 L 362.91671,362.50016 L 364.29245,360.36218 L 366,360.36218 L 363.69764,363.83438 L 363.69764,366.36218 L 362.13982,366.36218 L 362.13982,363.83438 L 359.83746,360.36218 M 365.15837,363.40839 L 367.69946,363.40839 L 367.69946,364.57785 L 365.15837,364.57785 L 365.15837,363.40839 M 368.9174,360.36218 L 370.65732,360.36218 L 372.85447,364.47738 L 372.85447,360.36218 L 374.33138,360.36218 L 374.33138,366.36218 L 372.59146,366.36218 L 370.3943,362.24698 L 370.3943,366.36218 L 368.9174,366.36218 L 368.9174,360.36218 M 380.65173,366.03264 C 380.36579,366.17999 380.0677,366.29118 379.75749,366.3662 C 379.44727,366.44122 379.12357,366.47872 378.78638,366.47872 C 377.78019,366.47872 376.98307,366.20009 376.395,365.64282 C 375.80693,365.08288 375.5129,364.32468 375.5129,363.36821 C 375.5129,362.40907 375.80693,361.65087 376.395,361.0936 C 376.98307,360.53366 377.78019,360.25368 378.78638,360.25367 C 379.12357,360.25368 379.44727,360.29119 379.75749,360.3662 C 380.0677,360.44122 380.36579,360.55241 380.65173,360.69976 L 380.65173,361.94156 C 380.36309,361.74597 380.0785,361.60265 379.79796,361.51155 C 379.5174,361.42046 379.22203,361.37492 378.91181,361.37491 C 378.35611,361.37492 377.91911,361.55174 377.6008,361.90538 C 377.28249,362.25904 377.12333,362.74665 377.12333,363.36821 C 377.12333,363.9871 377.28249,364.47337 377.6008,364.82702 C 377.91911,365.18067 378.35611,365.35749 378.91181,365.35749 C 379.22203,365.35749 379.5174,365.31195 379.79796,365.22086 C 380.0785,365.12976 380.36309,364.98643 380.65173,364.79085 L 380.65173,366.03264 M 381.82921,363.40839 L 384.3703,363.40839 L 384.3703,364.57785 L 381.82921,364.57785 L 381.82921,363.40839 M 389.79236,360.55107 L 389.79236,361.82099 C 389.46056,361.67364 389.13686,361.56245 388.82125,361.48743 C 388.50563,361.41242 388.20756,361.37492 387.92701,361.37491 C 387.55475,361.37492 387.2796,361.42581 387.10156,361.52762 C 386.92352,361.62943 386.8345,361.7875 386.83451,362.00183 C 386.8345,362.16259 386.89385,362.28851 387.01255,362.3796 C 387.13393,362.46801 387.35244,362.54437 387.66804,362.60866 L 388.33165,362.74129 C 389.00333,362.87525 389.4808,363.07886 389.76405,363.35214 C 390.04728,363.62541 390.1889,364.01389 390.18891,364.51758 C 390.1889,365.17933 389.99063,365.67229 389.5941,365.99647 C 389.20025,366.31797 388.59735,366.47872 387.78539,366.47872 C 387.40234,366.47872 387.01794,366.44255 386.63219,366.37022 C 386.24644,366.29788 385.86069,366.19072 385.47494,366.04871 L 385.47494,364.74262 C 385.86069,364.94624 386.23295,365.10029 386.59173,365.20478 C 386.9532,365.30658 387.30118,365.35749 387.63567,365.35749 C 387.97556,365.35749 388.23588,365.30123 388.41662,365.18871 C 388.59735,365.07618 388.68771,364.91543 388.68772,364.70646 C 388.68771,364.51891 388.62567,364.37424 388.50159,364.27242 C 388.38019,364.17062 388.13607,364.07954 387.76921,363.99915 L 387.1663,363.86653 C 386.56205,363.73793 386.11965,363.53298 385.83911,363.25167 C 385.56127,362.97035 385.42234,362.59125 385.42234,362.11435 C 385.42234,361.51691 385.61656,361.05743 386.00501,360.73592 C 386.39346,360.41443 386.95185,360.25368 387.68019,360.25367 C 388.01198,360.25368 388.35322,360.27914 388.70391,360.33003 C 389.05459,360.37826 389.4174,360.45194 389.79236,360.55107 M 395.22657,365.26908 L 392.79069,365.26908 L 392.40629,366.36218 L 390.84037,366.36218 L 393.07798,360.36218 L 394.93524,360.36218 L 397.17286,366.36218 L 395.60693,366.36218 L 395.22657,365.26908 M 393.17914,364.15588 L 394.83409,364.15588 L 394.00863,361.76875 L 393.17914,364.15588"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-by-nc.svg b/images/cc-by-nc.svg
new file mode 100644
index 0000000000..36973490ad
--- /dev/null
+++ b/images/cc-by-nc.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-nc.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY-NC"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-302.67749)">
+      <g
+         id="g3711"
+         transform="translate(158,87)">
+        <rect
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect3713"
+           width="80"
+           height="15"
+           x="170.5"
+           y="237.86218" />
+        <rect
+           y="239.36218"
+           x="172"
+           height="12"
+           width="77"
+           id="rect3715"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578"
+           d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z"
+           id="path3717"
+           sodipodi:nodetypes="cccscc" />
+        <g
+           id="g3719"
+           transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)"
+           clip-path="url(#clipPath3442)">
+          <path
+             id="path3721"
+             cx="296.35416"
+             ry="22.939548"
+             cy="264.3577"
+             type="arc"
+             rx="22.939548"
+             d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+             style="opacity:1;fill:#ffffff" />
+          <path
+             d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z"
+             id="path3723"
+             style="opacity:1" />
+        </g>
+      </g>
+      <path
+         id="text3725"
+         d="M 357.4197,331.68502 C 357.66518,331.68502 357.85131,331.63144 357.9781,331.52427 C 358.10488,331.4171 358.16827,331.25904 358.16828,331.05005 C 358.16827,330.84377 358.10488,330.68703 357.9781,330.57986 C 357.85131,330.47002 357.66518,330.41509 357.4197,330.41509 L 356.55784,330.41509 L 356.55784,331.68502 L 357.4197,331.68502 M 357.4723,334.30926 C 357.78522,334.30926 358.0199,334.24363 358.17637,334.11235 C 358.33552,333.98107 358.4151,333.7828 358.4151,333.51757 C 358.4151,333.25769 358.33686,333.06346 358.18041,332.93485 C 358.02396,332.80358 357.78792,332.73793 357.4723,332.73793 L 356.55784,332.73793 L 356.55784,334.30926 L 357.4723,334.30926 M 358.92089,332.15119 C 359.25538,332.24765 359.51434,332.42581 359.69779,332.68569 C 359.88121,332.94557 359.97293,333.26439 359.97294,333.64215 C 359.97293,334.22085 359.776,334.6522 359.38217,334.93619 C 358.98833,335.22018 358.38947,335.36218 357.5856,335.36218 L 355.00001,335.36218 L 355.00001,329.36218 L 357.33878,329.36218 C 358.17771,329.36218 358.78466,329.48811 359.15962,329.73994 C 359.53727,329.99178 359.7261,330.395 359.7261,330.94958 C 359.7261,331.24162 359.65732,331.49078 359.51975,331.69708 C 359.38217,331.9007 359.18255,332.05207 358.92089,332.15119 M 359.83746,329.36218 L 361.54096,329.36218 L 362.91671,331.50015 L 364.29245,329.36218 L 366,329.36218 L 363.69764,332.83438 L 363.69764,335.36218 L 362.13982,335.36218 L 362.13982,332.83438 L 359.83746,329.36218 M 365.15837,332.40839 L 367.69946,332.40839 L 367.69946,333.57785 L 365.15837,333.57785 L 365.15837,332.40839 M 368.9174,329.36218 L 370.65732,329.36218 L 372.85447,333.47738 L 372.85447,329.36218 L 374.33138,329.36218 L 374.33138,335.36218 L 372.59146,335.36218 L 370.3943,331.24698 L 370.3943,335.36218 L 368.9174,335.36218 L 368.9174,329.36218 M 380.65173,335.03264 C 380.36579,335.17999 380.0677,335.29118 379.75749,335.36619 C 379.44727,335.44122 379.12357,335.47872 378.78638,335.47872 C 377.78019,335.47872 376.98307,335.20009 376.395,334.64282 C 375.80693,334.08288 375.5129,333.32467 375.5129,332.36821 C 375.5129,331.40907 375.80693,330.65087 376.395,330.0936 C 376.98307,329.53365 377.78019,329.25368 378.78638,329.25367 C 379.12357,329.25368 379.44727,329.29118 379.75749,329.3662 C 380.0677,329.44122 380.36579,329.55241 380.65173,329.69975 L 380.65173,330.94155 C 380.36309,330.74597 380.0785,330.60263 379.79796,330.51154 C 379.5174,330.42046 379.22203,330.37491 378.91181,330.3749 C 378.35611,330.37491 377.91911,330.55174 377.6008,330.90538 C 377.28249,331.25904 377.12333,331.74665 377.12333,332.36821 C 377.12333,332.9871 377.28249,333.47336 377.6008,333.82701 C 377.91911,334.18066 378.35611,334.35749 378.91181,334.35749 C 379.22203,334.35749 379.5174,334.31194 379.79796,334.22085 C 380.0785,334.12976 380.36309,333.98643 380.65173,333.79085 L 380.65173,335.03264"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-by-nd.svg b/images/cc-by-nd.svg
new file mode 100644
index 0000000000..934c61e15e
--- /dev/null
+++ b/images/cc-by-nd.svg
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-nd.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY-ND"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-384.81244)">
+      <rect
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3767"
+         width="80"
+         height="15"
+         x="328.5"
+         y="412.86218" />
+      <rect
+         y="414.36218"
+         x="330"
+         height="12"
+         width="77"
+         id="rect3769"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578"
+         d="M 329.99996,414.36218 L 329.99996,426.36218 L 350.33474,426.36218 C 351.64339,424.61187 352.52652,422.5777 352.52652,420.36218 C 352.52652,418.16144 351.65859,416.10503 350.36599,414.36218 L 329.99996,414.36218 z"
+         id="path3771"
+         sodipodi:nodetypes="cccscc" />
+      <g
+         id="g3773"
+         transform="matrix(0.9612533,0,0,0.9612533,164.83416,184.507)"
+         clip-path="url(#clipPath3442)">
+        <path
+           id="path3775"
+           cx="296.35416"
+           ry="22.939548"
+           cy="264.3577"
+           type="arc"
+           rx="22.939548"
+           d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+           style="opacity:1;fill:#ffffff" />
+        <path
+           d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z"
+           id="path3777"
+           style="opacity:1" />
+      </g>
+      <path
+         id="text3779"
+         d="M 357.4197,419.68502 C 357.66518,419.68502 357.85131,419.63145 357.9781,419.52427 C 358.10488,419.41711 358.16827,419.25904 358.16828,419.05006 C 358.16827,418.84377 358.10488,418.68704 357.9781,418.57987 C 357.85131,418.47002 357.66518,418.4151 357.4197,418.4151 L 356.55784,418.4151 L 356.55784,419.68502 L 357.4197,419.68502 M 357.4723,422.30927 C 357.78522,422.30927 358.0199,422.24363 358.17637,422.11235 C 358.33552,421.98107 358.4151,421.78281 358.4151,421.51758 C 358.4151,421.2577 358.33686,421.06346 358.18041,420.93485 C 358.02396,420.80358 357.78792,420.73794 357.4723,420.73794 L 356.55784,420.73794 L 356.55784,422.30927 L 357.4723,422.30927 M 358.92089,420.1512 C 359.25538,420.24766 359.51434,420.42582 359.69779,420.6857 C 359.88121,420.94558 359.97293,421.2644 359.97294,421.64215 C 359.97293,422.22086 359.776,422.65221 359.38217,422.93619 C 358.98833,423.22019 358.38947,423.36218 357.5856,423.36218 L 355.00001,423.36218 L 355.00001,417.36219 L 357.33878,417.36219 C 358.17771,417.36219 358.78466,417.48812 359.15962,417.73994 C 359.53727,417.99179 359.7261,418.39501 359.7261,418.94959 C 359.7261,419.24162 359.65732,419.49079 359.51975,419.69708 C 359.38217,419.90071 359.18255,420.05208 358.92089,420.1512 M 359.83746,417.36219 L 361.54096,417.36219 L 362.91671,419.50016 L 364.29245,417.36219 L 366,417.36219 L 363.69764,420.83439 L 363.69764,423.36218 L 362.13982,423.36218 L 362.13982,420.83439 L 359.83746,417.36219 M 365.15837,420.4084 L 367.69946,420.4084 L 367.69946,421.57785 L 365.15837,421.57785 L 365.15837,420.4084 M 368.9174,417.36219 L 370.65732,417.36219 L 372.85447,421.47739 L 372.85447,417.36219 L 374.33138,417.36219 L 374.33138,423.36218 L 372.59146,423.36218 L 370.3943,419.24698 L 370.3943,423.36218 L 368.9174,423.36218 L 368.9174,417.36219 M 377.41872,418.53164 L 377.41872,422.19273 L 377.97711,422.19273 C 378.61373,422.19273 379.09929,422.03599 379.43379,421.72253 C 379.77098,421.40907 379.93957,420.95361 379.93957,420.35616 C 379.93957,419.76138 379.77232,419.3086 379.43783,418.99782 C 379.10333,418.68704 378.61643,418.53164 377.97711,418.53164 L 377.41872,418.53164 M 375.86089,417.36219 L 377.50369,417.36219 C 378.42085,417.36219 379.10333,417.42783 379.55113,417.5591 C 380.00162,417.68771 380.38736,417.9074 380.70838,418.21818 C 380.99161,418.48878 381.20202,418.8009 381.3396,419.15455 C 381.47717,419.5082 381.54596,419.90874 381.54597,420.35616 C 381.54596,420.80894 381.47717,421.21349 381.3396,421.56982 C 381.20202,421.92347 380.99161,422.23559 380.70838,422.5062 C 380.38466,422.81697 379.99622,423.038 379.54304,423.16928 C 379.08984,423.29788 378.41007,423.36218 377.50369,423.36218 L 375.86089,423.36218 L 375.86089,417.36219"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-by-sa.svg b/images/cc-by-sa.svg
new file mode 100644
index 0000000000..463276a8cf
--- /dev/null
+++ b/images/cc-by-sa.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-sa.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY-SA"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-356.81188)">
+      <g
+         id="g3747"
+         transform="translate(158,145)">
+        <rect
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect3749"
+           width="80"
+           height="15"
+           x="170.5"
+           y="237.86218" />
+        <rect
+           y="239.36218"
+           x="172"
+           height="12"
+           width="77"
+           id="rect3751"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578"
+           d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z"
+           id="path3753"
+           sodipodi:nodetypes="cccscc" />
+        <g
+           id="g3755"
+           transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)"
+           clip-path="url(#clipPath3442)">
+          <path
+             id="path3757"
+             cx="296.35416"
+             ry="22.939548"
+             cy="264.3577"
+             type="arc"
+             rx="22.939548"
+             d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+             style="opacity:1;fill:#ffffff" />
+          <path
+             d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z"
+             id="path3759"
+             style="opacity:1" />
+        </g>
+      </g>
+      <path
+         id="text3761"
+         d="M 357.4197,389.68502 C 357.66518,389.68502 357.85131,389.63144 357.9781,389.52427 C 358.10488,389.4171 358.16827,389.25904 358.16828,389.05005 C 358.16827,388.84376 358.10488,388.68703 357.9781,388.57986 C 357.85131,388.47002 357.66518,388.4151 357.4197,388.41509 L 356.55784,388.41509 L 356.55784,389.68502 L 357.4197,389.68502 M 357.4723,392.30926 C 357.78522,392.30926 358.0199,392.24363 358.17637,392.11235 C 358.33552,391.98107 358.4151,391.78281 358.4151,391.51756 C 358.4151,391.25769 358.33686,391.06345 358.18041,390.93485 C 358.02396,390.80357 357.78792,390.73793 357.4723,390.73793 L 356.55784,390.73793 L 356.55784,392.30926 L 357.4723,392.30926 M 358.92089,390.15119 C 359.25538,390.24764 359.51434,390.42581 359.69779,390.68568 C 359.88121,390.94557 359.97293,391.26439 359.97294,391.64215 C 359.97293,392.22086 359.776,392.6522 359.38217,392.93619 C 358.98833,393.22018 358.38947,393.36218 357.5856,393.36218 L 355.00001,393.36218 L 355.00001,387.36218 L 357.33878,387.36218 C 358.17771,387.36218 358.78466,387.4881 359.15962,387.73994 C 359.53727,387.99178 359.7261,388.395 359.7261,388.94959 C 359.7261,389.24162 359.65732,389.49078 359.51975,389.69708 C 359.38217,389.90069 359.18255,390.05206 358.92089,390.15119 M 359.83746,387.36218 L 361.54096,387.36218 L 362.91671,389.50015 L 364.29245,387.36218 L 366,387.36218 L 363.69764,390.83438 L 363.69764,393.36218 L 362.13982,393.36218 L 362.13982,390.83438 L 359.83746,387.36218 M 365.15837,390.40839 L 367.69946,390.40839 L 367.69946,391.57785 L 365.15837,391.57785 L 365.15837,390.40839 M 373.12153,387.55105 L 373.12153,388.82099 C 372.78973,388.67363 372.46602,388.56245 372.15042,388.48743 C 371.8348,388.41241 371.53671,388.3749 371.25618,388.3749 C 370.88391,388.3749 370.60877,388.42581 370.43073,388.52761 C 370.25268,388.62943 370.16367,388.7875 370.16367,389.00183 C 370.16367,389.16259 370.22301,389.28851 370.3417,389.37959 C 370.4631,389.46801 370.68159,389.54436 370.99721,389.60866 L 371.66081,389.74127 C 372.33249,389.87524 372.80996,390.07886 373.0932,390.35213 C 373.37644,390.62541 373.51806,391.01389 373.51807,391.51756 C 373.51806,392.17933 373.3198,392.67229 372.92326,392.99647 C 372.52941,393.31797 371.92651,393.47872 371.11455,393.47872 C 370.7315,393.47872 370.3471,393.44255 369.96136,393.37021 C 369.5756,393.29788 369.18985,393.1907 368.80411,393.04871 L 368.80411,391.74262 C 369.18985,391.94624 369.56211,392.10029 369.92089,392.20477 C 370.28236,392.30658 370.63034,392.35749 370.96484,392.35749 C 371.30473,392.35749 371.56504,392.30123 371.74578,392.1887 C 371.92651,392.07618 372.01688,391.91542 372.01688,391.70645 C 372.01688,391.51891 371.95484,391.37423 371.83076,391.27242 C 371.70936,391.17062 371.46523,391.07952 371.09837,390.99915 L 370.49547,390.86653 C 369.89122,390.73793 369.44882,390.53297 369.16827,390.25166 C 368.89042,389.97035 368.7515,389.59125 368.7515,389.11435 C 368.7515,388.51691 368.94572,388.05743 369.33418,387.73592 C 369.72262,387.41442 370.28101,387.25367 371.00935,387.25367 C 371.34115,387.25367 371.68238,387.27912 372.03307,387.33003 C 372.38374,387.37826 372.74656,387.45193 373.12153,387.55105 M 378.55573,392.26907 L 376.11985,392.26907 L 375.73545,393.36218 L 374.16953,393.36218 L 376.40714,387.36218 L 378.2644,387.36218 L 380.50201,393.36218 L 378.93609,393.36218 L 378.55573,392.26907 M 376.5083,391.15588 L 378.16324,391.15588 L 377.3378,388.76874 L 376.5083,391.15588"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-by.svg b/images/cc-by.svg
new file mode 100644
index 0000000000..4bccd14f6d
--- /dev/null
+++ b/images/cc-by.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="15"
+   id="svg2279"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2281">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3442">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3444"
+         width="20.614058"
+         height="12.483703"
+         x="171.99832"
+         y="239.1203" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.5125"
+     inkscape:cx="40"
+     inkscape:cy="7.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="80px"
+     height="15px"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="935"
+     inkscape:window-height="624"
+     inkscape:window-x="50"
+     inkscape:window-y="160" />
+  <metadata
+     id="metadata2284">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="BY"
+       transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-271.87688)">
+      <g
+         transform="translate(158,54)"
+         id="g3693">
+        <rect
+           y="237.86218"
+           x="170.5"
+           height="15"
+           width="80"
+           id="rect3695"
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <rect
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect3697"
+           width="77"
+           height="12"
+           x="172"
+           y="239.36218" />
+        <path
+           sodipodi:nodetypes="cccscc"
+           id="path3699"
+           d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z"
+           style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578" />
+        <g
+           clip-path="url(#clipPath3442)"
+           transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)"
+           id="g3701">
+          <path
+             style="opacity:1;fill:#ffffff"
+             d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z"
+             rx="22.939548"
+             type="arc"
+             cy="264.3577"
+             ry="22.939548"
+             cx="296.35416"
+             id="path3703" />
+          <path
+             style="opacity:1"
+             id="path3705"
+             d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z" />
+        </g>
+      </g>
+      <path
+         id="text3707"
+         d="M 357.4197,298.68502 C 357.66518,298.68503 357.85131,298.63145 357.9781,298.52427 C 358.10488,298.41711 358.16827,298.25904 358.16828,298.05007 C 358.16827,297.84377 358.10488,297.68704 357.9781,297.57987 C 357.85131,297.47003 357.66518,297.41511 357.4197,297.4151 L 356.55784,297.4151 L 356.55784,298.68502 L 357.4197,298.68502 M 357.4723,301.30928 C 357.78522,301.30928 358.0199,301.24363 358.17637,301.11235 C 358.33552,300.98108 358.4151,300.78282 358.4151,300.51758 C 358.4151,300.2577 358.33686,300.06346 358.18041,299.93486 C 358.02396,299.80358 357.78792,299.73795 357.4723,299.73794 L 356.55784,299.73794 L 356.55784,301.30928 L 357.4723,301.30928 M 358.92089,299.15121 C 359.25538,299.24766 359.51434,299.42582 359.69779,299.6857 C 359.88121,299.94558 359.97293,300.26439 359.97294,300.64216 C 359.97293,301.22086 359.776,301.6522 359.38217,301.9362 C 358.98833,302.22019 358.38947,302.36218 357.5856,302.36218 L 355.00001,302.36218 L 355.00001,296.36218 L 357.33878,296.36218 C 358.17771,296.36219 358.78466,296.48811 359.15962,296.73995 C 359.53727,296.9918 359.7261,297.39501 359.7261,297.94959 C 359.7261,298.24163 359.65732,298.49079 359.51975,298.69708 C 359.38217,298.9007 359.18255,299.05208 358.92089,299.15121 M 359.83746,296.36218 L 361.54096,296.36218 L 362.91671,298.50016 L 364.29245,296.36218 L 366,296.36218 L 363.69764,299.83439 L 363.69764,302.36218 L 362.13982,302.36218 L 362.13982,299.83439 L 359.83746,296.36218"
+         style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'" />
+    </g>
+  </g>
+</svg>
diff --git a/images/cc-zero.svg b/images/cc-zero.svg
new file mode 100644
index 0000000000..0f866392f1
--- /dev/null
+++ b/images/cc-zero.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="80px" height="15px" viewBox="0 0 80 15" enable-background="new 0 0 80 15" xml:space="preserve">
+<g>
+	<g>
+		<rect fill="#FFFFFF" width="80" height="15"/>
+	</g>
+	<path d="M22.797,2C23.8,3.595,24.39,5.477,24.39,7.501c0,2.023-0.589,3.904-1.592,5.499H80V2H22.797z"/>
+	<g>
+		<path id="text2809_5_" d="M12.42,2.031c-3.137,0-3.926,2.959-3.926,5.469s0.787,5.469,3.926,5.469
+			c3.137,0,3.924-2.959,3.924-5.469S15.557,2.031,12.42,2.031z M12.42,4.094c0.127,0,0.242,0.02,0.352,0.047
+			c0.227,0.193,0.336,0.463,0.121,0.838l-2.09,3.838C10.738,8.33,10.729,7.855,10.729,7.5C10.729,6.395,10.807,4.094,12.42,4.094z
+			 M13.982,5.863c0.111,0.588,0.127,1.203,0.127,1.637c0,1.105-0.076,3.406-1.689,3.406c-0.127,0-0.244-0.012-0.354-0.039
+			c-0.02-0.006-0.039-0.014-0.061-0.021c-0.031-0.01-0.066-0.02-0.098-0.031c-0.359-0.154-0.586-0.43-0.26-0.92L13.982,5.863z"/>
+		<path d="M21.229,3.848c-0.465-1.152-1.143-2.172-2.035-3.066C18.907,0.496,18.607,0.241,18.302,0h-3.708
+			c1.248,0.348,2.367,1.009,3.354,1.998c0.736,0.736,1.299,1.576,1.684,2.516s0.578,1.936,0.578,2.986
+			c0,2.184-0.746,3.994-2.227,5.441c-0.771,0.746-1.635,1.32-2.596,1.717c-0.344,0.143-0.694,0.251-1.046,0.342h3.892
+			c0.336-0.257,0.664-0.529,0.972-0.834c0.895-0.871,1.57-1.871,2.021-3c0.465-1.143,0.693-2.363,0.693-3.666
+			C21.92,6.211,21.691,4.99,21.229,3.848z M6.957,12.975c-0.746-0.746-1.322-1.59-1.729-2.527c-0.396-0.951-0.6-1.93-0.6-2.947
+			c0-1.029,0.203-2.016,0.6-2.955c0.406-0.949,0.982-1.803,1.729-2.561C7.916,1.004,9.021,0.346,10.268,0H6.58
+			C6.289,0.235,6.004,0.484,5.732,0.762C4.816,1.676,4.117,2.721,3.631,3.887C3.156,5.041,2.92,6.244,2.92,7.5
+			c0,1.268,0.236,2.471,0.711,3.613s1.164,2.17,2.068,3.086C5.994,14.49,6.305,14.752,6.623,15h3.88
+			c-0.345-0.088-0.686-0.191-1.019-0.328C8.547,14.277,7.705,13.711,6.957,12.975z"/>
+	</g>
+	<g>
+		<path d="M80,0v15H0V0H80 M79.25,0.75H0.75v13.5h78.5V0.75L79.25,0.75z"/>
+	</g>
+	<g>
+		<path fill="#FFFFFF" d="M30.514,8.106c-0.279,0.233-0.678,0.35-1.197,0.35h-0.993v1.717h-0.991V5.398h2.05
+			c0.473,0,0.849,0.123,1.13,0.369s0.422,0.628,0.422,1.144C30.934,7.475,30.794,7.873,30.514,8.106z M29.753,6.387
+			c-0.127-0.106-0.304-0.159-0.531-0.159h-0.898v1.406h0.898c0.228,0,0.404-0.058,0.531-0.172c0.126-0.114,0.189-0.296,0.189-0.544
+			C29.942,6.669,29.879,6.492,29.753,6.387z"/>
+		<path fill="#FFFFFF" d="M31.733,5.398h1.015v2.933c0,0.328,0.038,0.567,0.116,0.718c0.12,0.268,0.383,0.401,0.787,0.401
+			c0.402,0,0.664-0.134,0.784-0.401c0.077-0.15,0.116-0.39,0.116-0.718V5.398h1.014v2.935c0,0.508-0.079,0.902-0.236,1.186
+			c-0.293,0.519-0.853,0.777-1.678,0.777c-0.826,0-1.387-0.259-1.682-0.777c-0.157-0.283-0.236-0.678-0.236-1.186V5.398z"/>
+		<path fill="#FFFFFF" d="M40.085,5.907c0.146,0.203,0.219,0.446,0.219,0.729c0,0.292-0.074,0.526-0.221,0.703
+			c-0.083,0.1-0.204,0.19-0.364,0.272c0.243,0.088,0.427,0.229,0.551,0.421s0.187,0.425,0.187,0.699
+			c0,0.283-0.071,0.537-0.213,0.761c-0.09,0.149-0.203,0.274-0.338,0.376c-0.152,0.117-0.332,0.196-0.539,0.24
+			c-0.208,0.043-0.433,0.064-0.675,0.064H36.54V5.398h2.308C39.43,5.407,39.842,5.577,40.085,5.907z M37.492,6.228V7.28h1.16
+			c0.208,0,0.376-0.039,0.505-0.118c0.13-0.079,0.194-0.219,0.194-0.419c0-0.223-0.086-0.369-0.257-0.44
+			c-0.147-0.05-0.335-0.075-0.563-0.075H37.492z M37.492,8.07v1.273h1.159c0.207,0,0.368-0.028,0.483-0.084
+			c0.209-0.104,0.313-0.303,0.313-0.597c0-0.248-0.101-0.419-0.304-0.512C39.031,8.1,38.872,8.073,38.667,8.07H37.492z"/>
+		<path fill="#FFFFFF" d="M41.313,5.398h0.998v3.916h2.384v0.858h-3.382V5.398z"/>
+		<path fill="#FFFFFF" d="M46.275,10.173h-0.991V5.398h0.991V10.173z"/>
+		<path fill="#FFFFFF" d="M47.665,5.897c0.385-0.393,0.874-0.59,1.468-0.59c0.795,0,1.376,0.264,1.743,0.791
+			c0.203,0.296,0.312,0.593,0.327,0.891h-0.998c-0.063-0.229-0.145-0.402-0.244-0.519c-0.178-0.207-0.441-0.311-0.79-0.311
+			c-0.355,0-0.636,0.146-0.841,0.438s-0.308,0.707-0.308,1.242s0.108,0.937,0.324,1.203c0.217,0.267,0.492,0.4,0.826,0.4
+			c0.342,0,0.603-0.114,0.782-0.344c0.1-0.123,0.182-0.308,0.247-0.554h0.991c-0.086,0.521-0.304,0.943-0.655,1.27
+			s-0.802,0.489-1.351,0.489c-0.68,0-1.214-0.221-1.603-0.661c-0.389-0.442-0.583-1.049-0.583-1.82
+			C47.002,6.991,47.224,6.349,47.665,5.897z"/>
+		<path fill="#FFFFFF" d="M54.797,5.502c0.335,0.11,0.606,0.312,0.813,0.606c0.167,0.237,0.28,0.494,0.341,0.771
+			s0.091,0.54,0.091,0.79c0,0.635-0.128,1.173-0.383,1.613c-0.346,0.594-0.88,0.891-1.602,0.891h-2.059V5.398h2.059
+			C54.354,5.403,54.601,5.438,54.797,5.502z M52.968,6.228v3.116h0.922c0.471,0,0.8-0.232,0.985-0.696
+			c0.102-0.255,0.152-0.559,0.152-0.91c0-0.486-0.076-0.859-0.229-1.119s-0.455-0.391-0.909-0.391H52.968z"/>
+		<path fill="#FFFFFF" d="M60.466,9.749c-0.36,0.371-0.882,0.557-1.564,0.557s-1.204-0.186-1.564-0.557
+			c-0.483-0.456-0.726-1.112-0.726-1.97c0-0.875,0.242-1.531,0.726-1.97c0.36-0.371,0.882-0.557,1.564-0.557
+			s1.204,0.186,1.564,0.557c0.481,0.438,0.722,1.095,0.722,1.97C61.188,8.637,60.947,9.293,60.466,9.749z M59.842,9.023
+			c0.232-0.292,0.349-0.706,0.349-1.244c0-0.535-0.116-0.949-0.349-1.242c-0.231-0.293-0.545-0.438-0.94-0.438
+			s-0.711,0.146-0.946,0.437c-0.235,0.292-0.353,0.706-0.353,1.244s0.117,0.952,0.353,1.244c0.235,0.291,0.551,0.437,0.946,0.437
+			S59.61,9.314,59.842,9.023z"/>
+		<path fill="#FFFFFF" d="M65.116,5.398h1.436v4.774h-0.929V6.943c0-0.093,0.001-0.223,0.003-0.39
+			c0.002-0.168,0.003-0.297,0.003-0.388l-0.904,4.007h-0.97l-0.898-4.007c0,0.091,0.001,0.22,0.003,0.388
+			c0.003,0.167,0.004,0.297,0.004,0.39v3.229h-0.93V5.398h1.451l0.869,3.754L65.116,5.398z"/>
+		<path fill="#FFFFFF" d="M68.84,5.398h1.129l1.689,4.774h-1.082l-0.314-0.981h-1.759l-0.323,0.981h-1.044L68.84,5.398z
+			 M68.774,8.369h1.223L69.395,6.49L68.774,8.369z"/>
+		<path fill="#FFFFFF" d="M73.175,10.173h-0.991V5.398h0.991V10.173z"/>
+		<path fill="#FFFFFF" d="M74.093,5.398h1.046l1.895,3.329V5.398h0.93v4.774h-0.997l-1.943-3.388v3.388h-0.93V5.398z"/>
+	</g>
+</g>
+</svg>
diff --git a/images/favicon-32x32-next.png b/images/favicon-32x32-next.png
new file mode 100644
index 0000000000000000000000000000000000000000..e02f5f4d5c43e3e179083b1eb287b47e1ded6b08
GIT binary patch
literal 640
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaMM3p^r=f%IJvW-JI^#13S11^9%x`eYU=fq|TyoQjGHgbgIWfB*jF%NI8{
zx2;>Zu3x`iO-&6bs0aoM3JPUqWq0n}*}Qo(P|Le_@AmKC57(%ytPE5IHwwrGiqzKD
z{{8#c)YSCg!Gk}3{P_R>|Gj(no<D!CudhFE-aMdQporr2*&Bea(kTh@3udTz!maS5
zzUJnoI|ueKpKgoPKYC#A$1{5mCV8*46}?%seb(V;&yU~xc<k7_{fyEDJwSa=JY5_^
zEKV<-d{d~&fX7vIMd*~Z9UNWK9nqiu?@xE1<CXoQ=W(sq^Lgz{c1rfvO?e)fJKb1p
z=i$0H4O4<yw#;4gaBYG2jjMuHw`Qzm`ORY@xps>6k4eJyZq^Jd4Jw%*zpM57yY9pK
zMcQgs21j>QigM54W!RCVazM0UCtHDVhG46xh5pA!(TqDDnlwLEm~eRS(JM@6p3293
zNMwDW(!P~x!s$%jghh-wOB)P19fJ88oOHECttPa5*~LF^Vp#0%pwrbyN~~|szWB|o
z_J4%n&U>rEu5s2%I6jof{A;(j!|>g|;yo?%ZfFGheBJp^9_Zijs*s41pu}>8f};Gi
z%$!t(lFEWqh0KDIWCn(cIgdZ_a1@4VXq@stea7=?5CgL^w_Y;0u(GiCWD#az1(ybs
x!zs+ln?n>%-?(z($eANDN7zp{cr5VJV|XPlSn|oqbSlsa22WQ%mvv4FO#p=N1nU3*

literal 0
HcmV?d00001

diff --git a/images/logo.svg b/images/logo.svg
new file mode 100644
index 0000000000..cbb3937ecd
--- /dev/null
+++ b/images/logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xml:space="preserve"
+   enable-background="new 0 0 512 512"
+   viewBox="0 0 512 512"
+   height="512px"
+   width="512px"
+   y="0px"
+   x="0px"
+   id="NexT"
+   version="1.1"><metadata
+     id="metadata3390"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3388" /><path
+     style="fill:#222222;fill-opacity:1"
+     id="path3384"
+     d="M 256.4,25.8 56.4,141.3 56,371.5 255.6,486.2 455.6,370.7 456,140.5 Z m 92.6,328.8 -18.4,10.7 -18.6,-11 0,0 -112,-142.3 0,142.6 -18.4,10.7 -18.6,-11 0,-197 18.5,-10.6 18.5,10.8 0,0 112,144.5 0,-144.6 18.5,-10.6 18.5,10.8 z" /></svg>
diff --git a/images/wechatpay.jpg b/images/wechatpay.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..31f490785b148ac8fd03147a7137475dae3e74e2
GIT binary patch
literal 188112
zcmeFZcUV);x;7j{iXb3LM~zaXgNTSqiH#;AA_7t)B3(d0dPr2HHvs{uktQNwq$@4b
z71T%#MF<HXpdbk)1d^=0%irE-_v?J`Is5zPy{<hZy0TbVYv!4m`+1&w?twMNnt|-Q
zY+!5vVPk_pjKCiVi+F57Kg7co0x>m(C_*3*ZU`saeh52w#0LIA*d!nve;h*~R&0`g
zId)`||MNAwAdp=L{(60k2W0o3uLti5c@Mt9r~JOtpa1820)cRWpLQQVaY8+n?N7&S
zyVxPm|LeT^@#D|g{(8sfyZ-BryC<Hr|JN~RW(nt?uK{oNN8w~+|MMBnzpXbL|6l9P
zCh~XnX8W(Zu^ry^m#4^L|9ro{t2b+mH3@kP+U<AQ1-{sK?b^k@n;k5>Id=ap9Go0~
z6wW^vu0IO*@3QAF<&SUg+O->e?cwC${LA_O>jTylSZ8k5dx#)6Xt5x6HYvz1K{j?l
zHdYr~5!h^wKPvd!+<z3Xo?ykexcBhz?t|=NV`tyBo1Fu!FL-6dZ=>%P<k){y{XFLZ
zb0;n-KcN#3QwzDJFI2Y+UmqaLXx#RHw1-DTR7_k#_L!W!g5pWdQ(C9boV|ES-@wqw
z__D<fODpS}Hnz@pTwLAUJv;;M2L=U)goZ^vj*5<njf+o9f0~h*^(;H5sJNu`McK>p
zS2eYD^$m@0-!*k~c6Imke)!loI5a#miXR)FAd+V1=D#m2F8!dat#52nw`kit;3)W0
zbHIQ9sXc;Vdv@*K&AyxKcYD}&1%q#P!QC83)j9W{H|KKlJ0Nx9A-B+l)WYiaJ<=N2
z$-=k&2Y5teP7-A)znk<&i~jE#^yq)pqQ5lgFYRGXK=!h;fgQ#!2!TP?!sLsvU)C9N
zJW69oJ_J7n-|Kyw1?dDJ@!AQKO7OZ^n-Ry`F3GaVnld6m9-Qh01*GOxab#cHNpf^+
zsk>MCQsaVkLAbl)grCx$Bbi3Yw-Y`+EnoY%_vJmL#UsA3lQnr)mcrf7uWfBluIql&
z+B^HxX;d-e7_olG*B56d{hdc?c{P>=spjg!Mu&-%z5XdmO;>$ZeR-glZ^kX!B;eki
z-IGyl=XiqmvFW7R<j5^sQcztIE<MF%A8%E8l}!>%_YTFDCcU;&*uO`RY~B@6oEEZh
z$g2neOG?~6q=llP*4zTGa(yng9Jnw0sYxZAx`FarlNH|BdccCXzz&6M8AaUgHy>I_
zJvQvL%dGx$GhJ0(rC(`c((LdqXu2|QfzW|ODhndOf;b5zqV^-a%R|&U8*P17RHr+>
z+hyO$l+V$<q|{x1Cr);+wCvc~BWy-;e%CAyMv7ZxrR5?fBk+uRIo@`gDx|(aBw|O&
zXQOR$1ye||6y6d|K+T}xbzF}a0YqQ6pXxTbDZ=)-H(lbLWbU0<^&j%?f2F*K8hxvT
z`@<QW&}uB2Y{r5lq4@M9QsQl=ekG~qh^?wSs_yn#d}8#PXg(UTeXi1o{X2X7puNU3
zedDGRTfsx#=(&Lbi_Ya=>g5Vft{Jcd(>gPFy4hEnPdxpV8BMON*QjN$j{g>La9?h%
z*PEYKN6!hy>EK{r*8C!qnj3?A&S3P&@MSLwo+SG4WD1l9yCOQ8(^IJX*jSS9$CDG%
z4hM->IL3-<(u@t>AGu)?<JWhYKM~`#GGw-HV0rq$nZyyTD71$CNB`!DCHSh>s-9I*
zt2Ak=11o~qPfM?0C{yaZ4wn{R{c3b={viMLOS(a4pY%WB7dRrZ9=7&#ApcBLpm5Fr
z<|JZTjrV$#&9$n-Hu`l#Q<}wK8>|5y8y4i4*({tM&4MiTjbfil02u5{DSGV=pvi)~
z^#$^(ytdC{e!$sLa~2jr8;p63YX`P*h6PExjb);;fZP`-*4MvG1HCk6o}QWqflKpH
zu>HF{yD7(;rBxNOMY!Vu0ld}5aH)OO#cAhclfT`1U^oC1M|r_w9M6t0v_oI;GObj2
zEz_1Ke^h_dtbDn(|HHvz_@_OWo;Zo0=^4D>BCsGUyh5yH=qp04lis0bzU?e?Njl#f
zgS{MTl*_?7`cS8*&Ps2H_Oc-L=%_&7=!svEFK%9Z`J)LaJELK5sFur-xqZiay+m#+
z&B*z7!deuEz(MPxNnosiodtPpyRGTq_`_Gw^U2NF)yb=(3SP=V4GQ=1N;0u7Q<{b9
z+q&#758n%Kd+7%nCa8Nf2G(QsaG!xp-P0l2IR-w#wiS2r>p>ob=`e!HlJhER7joE9
zk``VzvACNBxf@y?l1!p*7dJ&}<<wp8<TkpU1DndP)=tw>rSd*{hq+7hqWd6JX($p}
z<OiNtWmqf6F*(zK*O=X5+9R_^nzv;zySV<uld)i#S-Cvxxp^V-H=Bgw{*T_LhUhKW
zEM#F8EjOE(cSsfPH|4?X<=<J{A;47x#<7Qy1lXQHv-pBtl*UJzhkOPnJMm#L)SM~1
zUYT?o&s2z$HCF(y<*xCIw`w4LAq!~QD*YDl1$_Vs@kDW+6!$5H-WfVN6zpMeEZHtN
z66fKgHwfH*Rats2YR`7)CgX8Yvm)ioDZlbPvL4erdgX?u;j-)2y7p#?p{<^QOE=6t
ztA^_$ZarUF_4rk~Zro}%K8c=mo~c^sh|}YQCAM6dh;&Df$#rXtYus#YAo1kOJ1}a*
zss$!KoLF9P{pGa)XGe}q*cWh<p&bN?p9Z?HODWff0u{=JqCWX8^^m5&cP=j`Cc79u
z$hdd$C`|p9DKg0XCVp1g#UQV$sL{c4s21<gI8`<Ib+#v@BF8GvMae^$SJmruxq%gu
z+SK#KY}%u4Zlkdr;YZ0#r-;rPCg?;w-+t6-JF=?g-7+#MmvQpb(mVfqL8++)O8xFd
zZMR$9uKSm(OupNuY6zd*EOUIZ=8d)bg-~KaIFwnCbU6x!*@@bi_k#EFp{xny>$vR`
zC<zwin-&Xl)vBKH9KWgd5WA*O&Vs<9Ksr0~@XkRN<fA$q!1l8srb95+z+a{l50H$y
ztwxi@FTbPEsrKZuZUVITRRgB7``#Ak^hUSH?WP>ziHBG9Zip{bp-zu5vr+9@b7@eT
zoZ4gA*bJAUdMWOiN2<Tx=p(CV0Q0CGS4{=dQhE3JX3dDuBGi=#kr24*=h`1M#Fs?R
z_UqmXGJ^=RHNGmBjyu7E#3&=XQS1HoEJ%AKiXw#S%!J*>ZqL6)&9q}_@c?uKHsMPo
zbodG(`v`1|2%?z~jbKR|B4Px7<ltk=Xpy7@@w8c+5udv<>b4Wp$`FGm(bpim^CW=B
zFt-&mfX9WXMw4quFG02IX)bNDAp7hY=P4-<rOfs(m^Ti3r`xrj+S#NQp0%G6dJ{e1
zjc5>%3?*ipD5f&SfucKv4PF5T2Xq=m;h>oTQNvjBZsgm4s3eTo53PnX*6=X$EdoOy
zrT3E_1Pt4{by+cAVDIGWO7^fIf;u);-#n&|){{?RUxgHRf=43qNo6$TAycVjwS7yw
z^Kbw7BCkTE?{)vI9d}rLwGk@>&S|q~U@s-880>Za0YI9zU^{$Lsoz_)YfHp0#G>61
z`gQYK4LeDaDMH$_f{{*=q9dv&zEH1MRMj?R%CI2jCwzA}Vt`$dz!B^o7UXMF763^Z
z!_xeFm#tY4oq8NY3>+|mhKw`LRB&h&*e(EjC0USIOfU2ic3<0JcPKA#5IJ-<Wkmr+
z(dwMu)jYC%a`iD`Z<%TMN@LBEh011BLp6e$^Ww$bN*_CO*OqjIv3MXo0j>djMY7Xe
z$ao^x`&A*DMz^C5C96|FFocVQ?s1Sd9zmQh_Xvw?h|o3~-pE&6qxP)4KCCU{tE_Ql
zCDY$nCJps6TZ_4?lLcWr5B3@SF$=QjV8Vhx3^z<!5dNFYcot+K^BoHk$;pC{l-4Q$
zo)kJCgO8c2qekSjBl5s2Cq|}*wP1JOX(YYrNo+pP&ZQgxe~Km>;U+XXv30B6=!dX6
ztp_K~_R)52B2`U^Di_UAVm~J~Gnfe>KEG(8Z+>K*crJDAZ3p!regg(}!6FNidVq*$
zK2~EvHf~r_kVnbM*3lm;@P!xD(=LCO$=OPS$x`qgz@hi|3N%C?wOd3Py_~qLpc&fj
z&XhD<x7HW3UJC`>pgiDUH-XK4WO%V4_Xx~0w)nM3_{bJRs1~?_?!j*Hu^>YkRVaB)
zrsa$;Bi<8*2OUnydltkPh=HwL0lN;f23~R>#~S>bS&T!?WRoZDQSG`q2YkbBUZ9?R
z^x>Mzqul-{_l}45UgblHSu%@I?dk<LS&$iY8)w?C4*fc;qGj+Y{gp4rTXD}<;dL}|
z7DW0ob_TU`!|bPTVK3upNXicQtc@nOb+1{K@EL(+8}iV5Z0+iD2K@qZ0I59cvyrd*
zv!j6hYt_lz(AmLFrEwLNX`4*}zU?5tl5z#9UpH=vevMx<8}~J)b-x0p966a!v2MP!
z%fMk;R;O)n?0t-=DdvZSYXwPkfMHzTTj2>D9jy00Azf7eIccralYH{}hbnCWnWwi~
zVJrId8^|eeK-3jd_(wnd$kDBzPMX1pwYIpm+s@Bz1(OabYFByoerg)Rkec6Fw+`SD
z_w1f#g@?`ww6P$!R>uWq@bPVOwDeA>kd83Lw*$McH(JwS*Ls(~-ITlD;fC5w>K?a9
z!<P8lRe{Q>1}lizwCRjA(mC-l>&-JjDzpH40OgYsi>@WC5Xjb4Q5NLUosb@s0An})
z<QC;n-?zo!t@V)mo+}aHti4lT+KQc2UYRYJQd8mh=4!O+qcc7iexaIQnrO{9aFKe2
zwnPbcWER3aFneB9&rHd6O`r4?_Y}1MtXCbX^>9<rjr}#+SK7>fVl2~mGo{upL*rHG
zt`Yto2EdF%o&Y9c4fw=18RQVQn($zjj9X#D*m+u=ZR}FQ?VnoOv1$$Q;Nk7JGZnkw
zE!&)6mZo(x5&hOb>qzvjwsl$~3$mL8*8d4G0DXgc0P~nsVAzo>NchebiP>`l2mvDR
zO@s26Q&Y-PTh_yx?ysMx_EahJ2KY&fDt<=i<&E^@6_oE^5LzC`q1w-)yadKONr$Tg
z$ZFKnl<)QA-tI;{(MB@<!DhwEiBRv2DW!9x$0&!(OFXZt*q*7+9GY!$EjaWhBF+6a
z?}Ab_J(ya~#Gsr}NmyYd2g8O2qqvc(m;fetHs8X8A`+>WT0(HQ<y)oR#b<V!j%*bB
z1>brS>U<@hH&j*bMxbFnB}I#wiwLK<5z(D0lGGc_Cwig?O$sjI<g>t5wQJ<In9A2x
z;l%#c<;kd4%3(|uuUTDpMA(%a_>-mnBE#?bG-wK%1Gygoqj9_ja0D?uO@tVQ8bdch
z!0Oc(ks_3a!U&JjkQy`oZZ~E@lj$<CB>KC!zskllC-vsbshro?j+-;jhxig>+E>^C
z9&554F{K-t1Q%<Q{~>Wh0JJr~aiwa8U!k36?WBoMLs;5UlV%+?OT|U$QxVB1dXQ`S
z2=qSKBO9m>apa#s2ROQR6craxw^s$GLy7?&wg}3_^Z5H_5QHh^R4ONy65M`DPdeQ$
z!>8r#%JK?-mh!#QTwdSWzO7d}@87pKdilIg0C)#j5GlD%44oSeg6PYN8N@XZ$oQoP
zVc;b10#eay`m?P^S&*_LD9!uk`X~|fTs9f=FTe<n`WL9>2;%RD7iCNYYUhf;26{1o
z1(E4S?XVzfOsy-dp})bW0ocqld_ozj9fsh0c{XdGE&PLJSbk%p9Q!vCHlYc?VP~>&
zGAObce0PiDub(b2g>Qbr%Q$|UQ8@T0{BRG}gRB7<WS~G8+<1u|C0tC|mZv~B=fRZX
zK5oHvmPA<ArXw7Fm`@QrS&+S1y=my!0y!FN)=0K#Kr=$`Q=D&$X{cYJzV1}U*7)+|
z^62VIyT*JE@$lQPbv~(0_+DYA!tSDJQY%~S@NrZ(*G2Nyqn5jBw?<mjd`Y}~TE>r7
zSJG|l3Hq3hK<~>UjZY(9sHpfH(`c%bm$K?{tN=a4-mff(8`wLVG%vCj)rle+g_J|M
zVq?r`Syha41G3HU-VRjB+60Db9<mA#f!itFcJXj~@-iNl|BzjHJ}hNrlP(<+PK^P3
z%uQ`Vv^Uj(rhT0vy@ciarE_Msq_u&JjFZnau3riiD;jrsInfvA`@%rvjEZtu8uz#7
zpu@L7FA08N1TiCF-q7*jSxsy#;=C`>cegtLr5P27lA{aB)0-=G30f^9WjXU|%bE%A
z0<%?pZinvs)-IkX{i=4J8>$J65*pMPLhJ@Kiy3)@F69`NsB<R5>A*4c!Bahhk|x2i
z-|}NVeJjuJS{s+yvCcr^;be0)&>`1DA0eFR!QlJ}_bN0g&6jh;FC*+ca~dkA1+uK`
zhgKHI3$d?@l4b^1>$#^#Ha@6~OFwb2kK2=-;YN#c1`T+YS%!5(3nPanQaWLL3@)05
zT1-9RP)PW-K^<+$A5iB(N3Gf+pVxPs8noZKSqOcG?p)|`un=d@-B)pW;BjTscK(>>
za3R;H*DQz%b_SD8KLmo@5VO+fF3d+woUxmhMVd4{Fk2QE=xx?HVG)8ed+Y5p+y2JA
z>Xk>?)s}%7iHkB}g#}Bc&B0G6qYa!@Igoc5n#>r4bvRhP<OZ_ViV~?xf=<$HNO=(w
zjU$Of1>Bz&i{CoYU-8pS_UGBMI7j_t(%|Wl`xHGyzps*~Kq?9xk2K|mDp!DmS;+9f
zgqV=9UEU%eml?b--6xd8G)HrvJKE_+(MB6g{XfeLm`3>W=k>sjPH4}364Qs5z`=OI
z9TVLITTUT2l2Upw52i(E7WCsGu=Z(%;rpnVHf8*ZTRQ15hA$~G$Ayt|mwK&g<>MVI
zyY;=5xO-pTPT`C@?i0x8Q({oH0^Pned30RcNrVjTB576FbjCD@e$MPL{AZ5!vt#L>
z3L@b4b#`NA@7|>uc!fyx3{O<@9bRO7wMVXiQA-$X?h-8!WLbDw5T>v&!Wgu!I<o}j
z<~u1$jiW`)qQ@+Vz0qwVA-?BFly6KgIdVsLV>T2{j@ix{<=%)Y+!J{CWsi&O%{ui*
z(vZ0b&;|WtSVh*8M}3G9T!Jzc<wz(a+_n^D`Ux2AJb~pjfjn4(+1i!=0i}TXTS~#~
zA1H<4zd@(p(bJYxKd@(MCb!4+JYVv2`jcIq-t!+na3v;>ldy@3z$Y+n${jF)F%IN*
z>^oOFwXtGsdG4dk)D#4=iJ3s`1yQvWPKJT?-fa9j3tZMQWQL-495lAy(vDIRs1IoE
zML*zm3(+ciXKDDGH1zYEOTa;j3bV0u!%O#sWVu5!y3F3uP;}>3=#lIKLU`eX@q0`b
z3*v#Dls-S&#?3gw%m;)J^6x0P?v%r@*m<&JZH0RqbcmtvG#kNg8F7mH*UH^Xwl^A5
zJMc!9T@PcEVrA|i%8BT)<_@^9<|>E?W!>R~_yP_JS38W~UBar0_!ih7QekORHV|l+
zyS27DbCc9nar~T>7H{HwlK=ts0K{WHQEDydlmaIZ?xPGgQmY!N_pwg+tbh>hP?Zms
z$V0i}NB9|>-oERHL{w$k%}zfdl9hD=M~0avPzD>6USH_a+cm=QnDG@_gw<=s)Z-3^
z6hvIbb!seywPw6X_YEg{tD1P<{@Ia(p&oz4>oo<@CB!|Z?!I`^doR>I<5On;3ZcgL
z;Sj*19!zd_9AbDbkz?McP@tWF#Hjb`^GAHAMmx=G8_8L@W%eJ?-hyL29hxnT84l;y
z&ueaQt<?L`0~!06nEU9lETUc{#e#(GOc7?t4z0-HOGnGb%RDnBdP-js96irQ+8T4L
zbd6r?_0WBJ{B!8t>*F`Yui@txz+4iQFbz9=vX<sXmtts+>L?JKTNO$0Slg@)FC5=z
z4=0%bz2}*2{B3BuiFN+vvP^He-GWIaO*8CfGay&Xf+VB%=!Am9z?Q~F*Bd{TKm?;$
zToG-^iu}~pwZhGF{};)D3cEu{3uL2~=aN?_k0I54#YFcNvxJ8>N!(hFD`j{xV>Hbs
z(qOSWdHWEY6w$7TfcIfmSyWyuue)!Nr1A2~Bd=NdZ7+w5AL6xdzKAz1XWK7xw@YhN
z1)Qck6zdMNaW3k!bkH$DJ7Gd0StNaYbTAD)dm%*2vL>eMY}C5~@)+(Ob?woc@!oyW
zhRuPYrzW4TL%6mHv|RexF@y;7CBuw<hvCP}(=<yq28pDQitZ-4&aoD@^4xrri<JDq
zDGz*3Pus2L`e;&*(6^i$)VKimHDk#P*BSPoAPmZ;L?WPcD-cR9Z^Dw12T(LCM;N&=
z@g!=Wm!o*oyKqbFS6Oo2sWfiyy55Lm#<Ih*c2Ba`tu#K^?}NF)W?G?ZQi!uG$eSn@
z1c;As(**~nCoML_kXlUU>M#>Q_BRDT(1X$<ucEsE2?~G0Ou}a^J^6K+1`YVd`C4~h
z-&=QTSdc5X@UpuHGK|yIsiF+gV&IZl44k?T%YqD;Tfe6jf&tS(!x9u2XT&k3VRH$+
zVHZJO<s9I-SQHPaz&>ga;WPy|Mm8)7^$X0G%am+^YhF8Gg7GL5^)a1>2Z-1m|9Z?k
zC-zkfn9QY`n(ffQu;m$a3HEgXFa}-aCIH{@$!3lG4FbhsZ=-37Wy_!Gy1*w#VVd@A
zvxC2>oqjw~Rbp`P%+X_Z*{%-BLkcjZL`HEQe!W&dLUb?1KuH0kY_R{^XFJOXRrF#6
zA!b_YyN*U;ftK?8!qZUriKbeQEr;u{N*pbMu<XZz=pkiUkoVl!ZK;%hI)i-%dkp2(
zge5wjG~2x-+CV*^bHeodx60SgQg%OhB9o?ZYmUP}$9mwf95WW-^c-<1o!FWZdvbEJ
z_e}vX+=O#=-S?ro(nWPPE~7+ct%2v(K@IDro4yBV$@MU=%j%xgNem%ihh1$)-|v@V
z%;>$1r9Q2BniaF^GwMBa10;i{fL`eO0twE5B!J|v{6C#hA|J42#xVk&XD6W$_ld-_
z8Qt?B+0c35&G|#P@qF&Y4_bRQlDbcbdQ5cjtgQ+HUk>Y%@m;ZcVua=R9Xo~9sqZ#N
zjczp<yFC5)F5qdh)F;tknIp0fE2>EF{X;b3p%wDx%DdNUOB^IV0n)&u5yKg}nM+CI
zFpv%-ZlS7s8QU}vks(qn$XxtCp8>q<)yB(ucU)5fsx-f+p0!<?K$hH&ycTU!pnEBG
zuU}6|?I-T-S^FBw52dd<CUjwhIk~<*W3)`!Tt6b1Bky{@5T)bJySz?GUxl^aq}QK_
zmt)Kynab0$x~fi<SHYUsR_7E^MrQk5OJ)rul(179&G64tnrpD<=zs1@F#ajSHiF^y
zq(G<M{sG`X`z!rZF@b@az0|0tbEU3H!a>4mSMthnml^TH8<Q)N7Vie?Pk+)n<==9^
zAgm;{+R);cnBWbs`E}fZ^(#RVAv%U?%8fO(0|e}Sq+buzs6gh6|IRxrSbAE})q&c9
zGJ@$fbA93MkF+!Yf29wjf1MukMGwxRxI-`&WXE@h-<8IW<LB>Z?AO09BVvE{jd+h1
zTk06T?He%4f*eq5lXYNR9lllbwk1E+DXC~8lPue15i0ns?@VIl1-0xr!8D=B&xl6-
zAmX~jM)Ak1rb>kGVKimBcy!tF%Nu@4t3Fv1EJ)l2K9L3S6gWWZA$tyaSlxqnIt4oU
z2Hkm^<G!DaJ~MlwuM;^Mc;UwK^d~)kF;@rR>qOL6*JIj~9e%X0pJwZ3>xNa&9Z~dz
zy0OrzbiYhxRZJg8$1zS(aju1UB@Z{TY&|y>AGGOcuc@O#?-%>E@~WY6pN4SX?W)6%
zM^iXjKUtXVD>yxFQ+)gVX|4=eqg&iFPtI>>ZnUCT&XniAJ%(p!mHrSM|Dg`IDO{hW
zOI>IfsA>^=@;uSdL&z!r@Hwr0lh1Ot<Kw?~I(rUaYlBYvGYEoFO@&JEhy#<}Lz9K&
zuf0U4rSNKqi?5D{S6v|4Wk1`?F7w6Vi?&N#Wt04C597w5(DmGO|IB6iqWDW_FcAG0
zDd7KxxWWT3vBb~NH((gauIbAVHw8J!Vk(pcdG1;Tl6ndio3`=W@J-2M;F+7K8F>Z)
zII;yk{x^lm23><GqW(X=jm^PMt^+(4^ou{x!U!`k9kUDFXq9Ylo*k*zmPbrBhUDp=
zeE7ll*z_4O!&U?1?F5KEV&TC2H{FbDmK3p@&5LRA&0x&miAK|s((kG5y_Km2&9cbS
zsB@O^^G~mzYOpePXjo3c{`bvTlcR>xw!tV@mV8BoAkpGIt8gE^+n3W0cks%J%l-Vp
z2~oaKjnpmVr!xF$PHZu5H*(NXf>uaBoiZU!j4Iigs%!|r`MNiI&u7{Nxlf$ZI8k}=
z)5XjnHjD2%)}p*$iHt9lWS-+07!Lz2ucluuIB2J>j$l_@hxirw;l>k5m+xIQpUhDT
zmaN0vdA$LKj(>0GmmtKRM1tYT#@-Pu*+uhSP8mZel2m{$>n%D@you3Fx_wBsSHCIF
zQBv}=wMC8*Nj*2lfUfh3Iw<$dSxHh```!hn5(zfxfH{eaSs||*T2#_-CM{snDv{T$
zdUT-jmg=B}E${OhW9g3S2Q?xb@2{IbpbPx9XPI8W5yD@4RwoNMI6wy%a=&W)juM^@
zqdIe7P9P7$=}DlS$Z5SeW4Pi*@g>D1t0JJ4wCmj>9;$BjISQNdSAxpL+y~+H9`}0I
zLeUCNQjC)0*Uxi((Q%+7LxwugA{$utA3;ct+6FssYx)h-S*3g4K9!DBA_}Fa;#H<h
z`u6&(epf{P>iGy1|C#saVw`UiW<d%A)fl^Ab6|b`&Q?(J_mnXd@Gz$l*!u!gsJS|k
z&=n@oh24ud-u89S!Skna3%)*I%{aB*Bv#ouQ`^phJ?bGGm*dc#ZLnYAIRA;WsAy=N
z6^3$PwxF5ZH`}o@n(k8O5hVHs_wr`$J(;)RrKxvN>e1X$h&Q5X&;rmMn%De^&<CTR
zeF0IZKT+Z-+fc>7w^9l%z;GGHf}Hzo$AWNLSpTROLcJXSGoO9|B=~hZup6qSEXV^x
zM#>x)z<&e`UEGj;EJ*DFLy$1b)x8=`J^T3VXetZTkU++#!^e*$Mih5RcsI{WM$+Gj
z30%Z^vLMH8!Q~|k?W`7X&76V*=Fv>!jT{!_h%L3|TLoWaWNFlkLXp)wl^6n9ukk3c
z601~1-u4z7j12ZvkPVj&S8Xsxq_DmM00=G+rEME#4RSxjn;C=hxk$myh%!tC5|V&2
zFRz0t_ZMpt9ozlxqBSmvZ%IcC9@ksTV?l0=aE({B4N-9_h?!=s8K23#6`Z|Wo^?OP
zdat2Iu~@*{t9+MF*u7|*U56iNIbGHja`{Gv_2nvs@{W?=1iNtupO%fF2m#_Z8as88
z`3@<ckZ)&-*D<NQO24vIZOl<xq`r_XeDsm*#x<^LP3BF;Ddv;=zA^A>HfH*!H1mzj
zplTI{N4ulZTFY)e!(ZGeuEhJ93_FysU6Z;gJV#D}4EDXk2`eU-8oSTYeHXA+<Lifo
zXwWEPp5@)X7gClKVd1>_7g?rDLBA%fy<0P?K<pFQ#Ek_|pWt=4`%4^eE`{|b)b%Iv
zS|x{0qn4lT4O(&vcc(miUw~T%oCN1ulFQ%9pHLeh2m%}o3yK;zk@?JszI&G@g5yr&
zxV@TWQnOVSqP4S?`P$IpX*aq?S5Dbn?6JIfXz@e`R{tfY4HobnriyY~9q;Uc?`=D~
z2xtuGh)nRO`j&aB|2Sda5G6BcawKN?Biqo*t&FRea%+g(Jpnx`A-OZy6}4H@U<-;P
zx^T>WT42;?wq+E-r}w-{57YsO+fwBVc+VdfWWE?j%)MJ94<6gr!437v^E=ObdlBui
z`;e+jhtJ>{XB%>SN{QYk#-l~qh3o4<RKTI`GjH{i-3K7%+17HqeZHd}!TEH|XHsIP
zkGvbc^-e<nMQYLFS??)km&Fv}^|LIFU!`jgc$;yS+mC8b)Cxlqnfm&>-kR$RaWmLJ
zS5l0c=YWEXpTBHakYThjW{m^0x$`g2KNnz)gF?3z$mwhDzW03t+<osI(NH}OIeo#{
z^tTe~clqO3_K(AT!-o>bQy?|FmmchSwoJQ#{6lQTnYnx7Z^c#+=zlA=Vs%04{~r`w
zfz^iox1y`x?fQRFcr^*R2mu9qzcqW{ivv{c{YkFJ$^C~~kDKQYogO#OpUd7q3jgmS
z@RtG#057tEcL241T;OXT?;hTL|Ksw9e(&nv3&G}or=P*F#~tzV&v*Uj{XepS0PE|2
z%=f<^HUg}H|CsOJG2h^S%=hn@Z|Fbf`*+MY{2%lEJLVhtkNN%`^Ns$;eE*L5@c)ka
z1ZvtOfe#W{U1ppfZO3D}25!D6it1AF929Er(b^*l%Ro$0q}xw0v?&FpGuy96w>K8X
zTyLy(Qu0=0X4f%z)OZ$PlogHo`4FUJl8|?RA=sK7!juJZ=mj1rE!Vab3mCFru0K6-
zy?!&|H4@X!P=C~Mhj!P2+csdnxjDRN)nMh_%*Zt3IN6P%EO2NM5OfP64IkSh-JA5`
zS^x15(kZ3)EVs0l&(Aatx4_G3qa>a7(u;GKy6%Jy1u`zI!(r(&Ky_S{YSPc8VH#4T
zudVr+d8g+6>9z!Gny8*UvS-5VQHy#xt@#SYj+tc|+xK<KZr3L+C#lnOEXX@J*Q=~s
z#pS2xW;Zo=D(GIck6;E*MG7~jd-v3zRxQS)i^`GZ;u$Y7Ch^C|!cL=IE}W{t5AO&F
z)-Xg49N%f<Ian?mVK?$~q}juHRV@Zx?Et(Z+SFr3e?0oKvqp$WYOPg{PwbQ*I{g7;
zQ3B6~Q8DodW8#!uN7(#oOyCE;)|JGhgRv2Ye#>F;OnzoEa0*<`w@ryEkj=}@y=8Yb
z6*rw2n4niN5>ZjbtU_|JARTT+S}6=I-)7svViv^c5>&IhX>(~L{UsG+aUks)=3%ll
zXMOU|iq&;^>P85#uie?-Gi3RdS`P2Db#uh(_eQJBKVS6D>kFB~`H^RZ%pHkjjTt;c
zH6Ka82#f)}^n<&6HI~6zOr<A!uS@shk2Q8WmDzgcYX*J!gk`f6wmlst*iu?EfDAH>
z8Gsj|$?vh7x~O>#7NiLz45K+%kaBP_PXWywaU|@NJwxHJJ+SW)D8@ydRRA0(YwoBu
z!yfb=1czuB?$FH;z3`qlCR5|t*Nm*)aZ|DZ+xP*P7^se8!ia7UeOjD+NydSqjcF&>
zY{#9sLVJSuNR|z@#n3G2M?qWEQ0h|>QAA~6kS?<NEh6&c)LZ9OW+8<ILFDXkk+wR~
zG~2d4@5sT_7%F_iQEQ!nfl2cF)rPsjR;>qaowj6NFKaBLfA+>?=4$(Xqqn4Yy4Ljd
zi^qWN$7fBi4SD#leq+cMVfA6eho~Q6EJ&Xl*pKF*hKLsw)ZhUN82wdSFw^1_Y=JNf
zUDrDR94!b2xiuDK`y^~zdi^!_VjXTQ*kt&mr0E@6(;cl-1K;k_C7$p;N4R}n$#WCd
zVjNdvn!&fPfF#5#I^A>-q}evK9YjB`>wUhP3Aldq8GESZ{jtX{&y9k4{vpJC8s$(n
zF~Ov3{5q}FX;W?q;5(OG`d0(N#f`nKS}=6$)vq2q8B-6uNfS0wQ;BZQ!e4YLH@r4t
zt}`FQ>NF)Qz=hVUI@r3twH4sgm#Jktar(6{8cR2@f7?LoNWBBSQxoXlO;Rk24#jKC
zcP;_)V9zZ$2=6HTee?M!L14dfH^$Y&_(Q=(5#UQcaXo06@Mc!qe+>7+G<1xSdm#F<
z<?J2C5F?xDX0MRaKPx_~uvYF~pTNjHGa+Bp(z%dwj^;$(GN%>JO2W97(pBmj&ySb7
zs8$#4%{+1|)iIkQM}^a}$hgaIDV(KLZKmR+<U&K<uIG7sOA00R`Xt&OFr#%uKKs26
z`8CgdgV&8sx*VqQBz#9=1?vM9O@g&gSVs~OCa=sEKERgpbajEvh-9er^P2J7KjFD{
zND~Uo@;w>JcaO2IY&pE?SKIj1vVIESnqL7Y%0c7};f<8{tK*|vvyK_%KQf!<!mbUu
z8eMMT^rqv3{15rTwXB!0%it1)R8~Cf=MI!9?6|;xtDL0nS8C~?4H%A*4_jP3lzmYk
zE{QZWxN<jl5#da!otekACk6FiY8p9U>Gk1C`=Inb`-9FLxv>0@`iOQqD3|*Hs&erO
zsKr1s(<z@=XefL=L-S5{XZLu7vZ{-nz<FEsFqIuuA}AhyikJauEr_|}03Aj%>jboD
zr6sh0E-Kc0=ymXRs&B}alfRz(_)R1y))Y%jZ-bz|f`no^9?L+sMJf`TXnj7V$I`A&
z5E$882esax{xlfb<+LD_-q-?4YPs7MX8DBa;DY+zd@?%_<;y5&WkF^)P@QrJ2*`nh
zOtKsXMPr7cew<R<F5bef>BRs?et~lZroaRx!gFRl5=zu?KwNu<i^)US)&&<&dKW>o
zxJqMVK`t}`W{xZfWd}BV7rt(|ikgE`xB_6?+h(iada4xi_yD|?K>kR8z!pK8{o_vp
z05fEq2!1cHBaB@O+hRdd27uz*EJzLvye){cvD(=z2(Ax>z-}L)M8`7={`o<FZ-A6d
zNm0fCov;mZ`rmK>(t<t@njW2a()uf`4);h$jZ7y!1rCy<vc^u%)i*xT|8A^$XgE{5
z)XfK3zrKlhp~k1E>2lew%z6C^j!j2ZD#SDCjDFopLw*B~{A+Z3+x`(o0Le~(chOH=
zb#;zgR|s_g>T)orXP<vsqUGcncTjEc>Ylalr6g}jVoEYYpBRo6TMW~|Pgo`v*biRP
zI`QO$(fM`ZLmzhYZ?-=<-#!!1+@M9wRH+eHAKzcyv!oPzx0o%r`9o;1-W(psf=IF;
zt}q^k5nlvRzUsd30S&HDEiqEs38ZV9j8%WwarS}|{I}aQ#S-`O!HjutYji4|(}Q>@
zEW~J}6PHuuxB<6j;&)&zjCf2H;tXAaVMfu5at4Kt7KX`$YjLhgE(J5Et;E?LO}@c>
z&57wH)WDLEhiO+?knWv=>auT>9*c)&ANRLDJU#2rwu4_P>ws+^a})=)>0+o1=hS-y
zT@Q;M{R*Wj#23fCGaPop76LgIex3@Y;em}8DP<&d2U-vzg?A!@E3K+3K0e1{uSg6`
z4SCG&{*amn2!FTSk)#_VbcX?XMChQ-(GvSkj{v{2to>%qx48WS>JIE!iw1&<{|ogE
zIZK->%9Zk8&S}g=fzK}pTyPFS)?%)ocGnVXJ}lz>p4OO%*~=lScrV?$X)$XXEjDIj
z_L5+?L@mCLzb<1W5acg}e9;y^jJktLZs2V@#IHTVF4G>&X~^K15(9R<!Mb6&v9U-^
z_ohn~-wmDa4Si0|^<GckCSmU?eI>RXEKMj?%*eG0vSNfCUVxDKp&Fexs^a~@6JAC5
z`*bu87q25nf^m4_3PWCWn4SeRt<{Z_ChZDmQX}nG!mU^MNWv7Y9sxl@&m<{6V7D8l
zf8Qiy-BAgylvpZenRnz@x(77p`?Ik7)tU<C!HIUpZ6BkA%<X$2)-Mr?G*c2RVPdK$
zium!?BQJLe*YHREV(bt0=-=L>!>`o;a}!FHB3pPk@(s7R_~*Ke9$PDt!=wwq-#1FN
z=0&RBti0l3;!P;r%oBdntN!U|OgY(eei1t}M$7HS)}njNI9IdG$=|lDmeLn&ZZ93z
zMk^^7Gv|d#Y27j>PFfsI`bx}*=GJ>G0mM!<NbB)>@1F6$s;fkqB*EH2)svnE<x3;U
zLq`@t0=^qwtVe#o_jchc549E$yBR3%v|WnKY;AMj`ErW<ON?XBOz6TVYW>Q>eeA{W
ziUWi9BkUZp36}?yzhhhSNT+Wlm87QByp+L%4z5$1;SHja9v#?*Q>w6h2vHiH=z#3(
z3bTH^THHMJ-KO~H4gaz-$H(`)78K^|x3e_Q*bSgLE*|M#@13}YR@tm`SlK#c_88`j
zNdRQVPgQYXW2z?erurnV>lP=3;%bFoJI`X@A2OM#oVbJbIa?q7{BcBa-`b;3*w9nI
ze7+@nQI$F;lD=0Jj{P{Bl$R-L(N(1aM#BdmBl--hUrWx)byk?g0c^tvjT0$#HK7fd
zDY>f_Xk;|@d>0uB{V_<@3aB4KWqF%@^8<uukcF^U$9_yKHLlm!*{)R6EcC-~pli!|
z#-`E%LCMhxqYsuxX1^|!Y60SeSzqR!Ey5PKT$h9lX6DASAZUMjHqDI6sSO~^z%4VV
zxsX=j6)5=&2otD9Gf<e+X3g;GtIwCbL8g`m6nO>V+#+1*$D(L=oW@2i-(+}H3`aVa
z7v~<xB*~X54$ljJ&tVK?>znL7@C}>cD|wk2^jsNr)EZW!>ASs#2AGXBD;~ANehL3@
z>9g?zz=sj+LLZ7wB@hj%2B6E)vtU684J-%`BIOP9DP7}iYv;`BdvLzH0bhakVU@e6
z+J;p+2qn3wD|f9hNB-sp@Iv&P`ur&j15`76J|s@f&4y**zANEByiv!*M=4eqqCV^t
z?EP3it057BxB{1M-MN2v21|SlNTI%>E;ANDmle1clhPuNBGbEbVjc&cA-#JyL~#Dd
zzmn)zpanr)W^Q4+2@@8k!>+U;l8sY+<|U6Far0Q1{4b6O(F1d02o<p}@xeZm+Zw-G
zF3nW(!yiZ4%h;x8H2RuoEaWH|(xpKUg$4tp)k#zobX=m5u?^ZBImu8WzJoeba4veE
zz7*A={%Wf0homjpkM-T-Vrux3i&LorE_yu?LM8j|g-E59d{P85UQGQwoAEmRcJnVa
zS)*d;%9;1L#;R+W3hW&y8>+*GazWSUhwi8&)U585A*V%`^Vju{!s8D*&Tba!2fCG~
zxuo^nULrbCbKt6&x#aLJ7NjPt2e-HQ%E|K;7m8&!wygp-1Q|8xcBS|Ax^k8SJ~_QN
zYjQf~^)@Ve22Sr(Jn-5P!+cSj%<UQY7*Isx8EJQa*!;HFy!o*O<L9!*FOg2-%O-NJ
z)griiPHmWJouqTR{nqjH9`g!WFB@&`#sOWJ#rj~pJSGw*!ZS_AM{5$qy!I^~maOwy
zxiG6|f7#N+IlX@$%(fj<gmr;$t2Bu+>%eT%tAhQ!WfhPAcwLIgv3A1)38gW)HBZxm
z)?I@c8qi+f9U-tcv0qV?zIBv%2zw7y0OK^&;{2j5JK$cy9rxu#n}9?{VrLbSj-SV_
zfG$y*8pnb-s(`S7A6xjQa*;PWu<+PK0~P$urk)0Qfh%)HHoo}GnPZs^4VaJ8#2xvf
zwtWou->c96)A#>=HG!W6A#Qc5i6O2H`<%pZ*_KXyu0!69Un@DMaQch=11~&`_ynnq
z`YIy8;A;f;w*BxOcO&^m0;06q8zTtk`_xSQsUrDtsZirv<30QKpT;!9h!|iuXirxZ
zgB|^Q_uiY2Yn5$P96I`rHeRKJ4BRlyI(kj#D!-=RSi$A2uz>EsA%oXpa_s^<KOK2!
z&P5?^UB@dWqMquz=m*~8H>UR)!J-i7Da}+*+PhhJ+{8j$i*9MR9y(m!J^yv#1p^4Z
z@_kAVR$oVfR3+Ne#8C$RUc;<x`t@Rd>XX#Gh*3yNmvuS~L(QNW&Qu{+JN1r^$VOhP
z@vbSFyfSmpZB_9JiXHBqed~DO@!_S>a(5-0DW#<sZ81N;olkcOT-!OR9{A3~;2S1e
zY23zhq#!?~-|P^BgO*Dsn8sL9Tyrw1Tl-_L_3Bt?Xy2DKkHd_Zjn5Ld7)qFE3CFB^
zxoWGTE7p2#cUo3Jg+sE^{vkLmfNp47me2Xat{=+pDEp0M5-MdF2$gafX2;3!do6l=
z>)f3tKQHt|@6kJd<>V-y8jOMcfak|4m_rIIGDMpzvTL}9=!WA=OK3uof^B`vrV$mC
zMyg92?KA0F%XvR=_ep=ayOo%CTj#>^p_{AgL)s~@pcY?1OcW@?FkYaxECXyYE1eY1
z&KoV&Ddz{rRbHfN%9y1I#_k5zCtjjDgAkWMtrKU)Z!qaq`q1rs!Zt(pY^skLDuIE^
z_@v<|*kzr6_ma%_X$*ldFFjC)8uPvOHPFPt?K17bt>&6kmpJ^Db}I`|vY}>4{Z&;K
zlDXPhW;&#KQ$^D-QQFbiW1+WM%ynPrs}o@l>>m;|XP~t)y}rLOc?_5yS^+V+r4{W;
zSoi&zzdT}1O`*|AW|5*3y00V4Y~iZK2a~@qeCm68T5PO;2mdZIlbtUr^H{v6Km@!j
zV7aDz?(N>D5Qd^(vF>L6R>S8hn5JteAAb3e=E^WW>#z==@~^=&64$QTB%AG8WW(K3
z#Qtqk4DO5~HtT^1&VHFu1|s;=e>BI!p}Ps&aKIFBYuB;n)Cx9bLFUZ>qiv;LJ&;Iv
ztkFGzi9&)xkmZjPP;Iv?tZzhfF7!&y52O&nk)qbV;`q~+{JFmL)0Q8%y`xO>!}DLx
zB^!M~NzAr5knFHxAz9`W-3?>Do>Gk~ONWCLd^%<FB1~PEZ1pg&35GA+gEW3<r7he!
zML9XxaF)1lKT46-ZPU@H2Q|IV6!=&epK;Kx;*qyao1L!@`r+mlLkrf8+1b5_+9H7n
zmgWxTCJVHBkTS>@02ts-=QUHrPtZ9=lJLwuXBPlo9~5m0N`9%Qg8G^cZhUS4zm$Z>
zFsr~6=VaUL57ek5NQ9s>^cDcaZ%_`DCm|Ls2uOLf3F1$#DDrB5rcY0ckDAxrxz+Lu
zMj3+NW|)lV1eb(ZdEugW?woCSE2AGjJ<GIHfT_!UN)S8zT8XmNQLvY`Ig{@rAV_lt
ziK@(EZ?r0WIlE*sHFE7EuL46K`3(6b7$p&y&$I4GYY#o08N9Y~_m?uME=?2OvRp3Y
zyMCC{Umfny`7Yn{Ye*R5+ZSN7!Ri;7yP?a-a{EY>8}ko)6blBex0ci58-qvb?zlXJ
z3Ec!3n&uafi)-O?DeHz#XPQWYTfQdE{jULm9jML#2B;`{el-Skr>dy!V{Pe7j4vYK
zRfy}*`)Qu9nkwdjoa;XGwRJi7Z+>OGwAGZBSu-p}`k^|W|2FT1tM5P=(<B<uay%6f
z*F*f-bi=dHIIwyx&-$4wP1(7Vs4grglrhyrZL&q{|I^d3W_9_O!R(T6{O1A1xYsJu
z`Hvn6Y4nIa*dr&dS5Nc(#~zD-dQo81-r6DJ;L64!OYfODCw-v(_65ZicD<`%!LJk3
zW0eL2b|&&LULIgl9Yl_ioV~a9a{cshj)(t*R>RiHoZSf48y7z+Q8k}<)+*k)F~?}Q
zPV~%Cv4?r~$sv^>i{pbzfN$&pca^PngZ@nhkIRDd=pA>o{~YW$Q{`QnKmHBO0__uP
z4;JWPZ6g6;E^yrK55zG<!1I(Qifpc{b<oqc**UqcZ|CMF@=d~EYkKkjVmM}yRDxE!
zCRVm$)dr;B4$FF!+<eF_o@{ijJ6W#;Z~c!=zqgZ|`*KNi$Rnq|vcWoYrQxQVLGsPX
zfz$^_=z@+xF!6*6p=!SR?;)Y1UfHCh!pTo_%&xlNe<@gy;*Cp;ZeL$L%Jb@sOaVlw
zZ%2;mL<>ToC<eVN>b^sD2uFLj!ZD;i%nGpVkL<i$e{(Q-Wo-RKOIt{bsg9=Z+#t{@
zFzovf;5Gw?$=*7+z*Ano`8~gMzh`~-C1b#iTBK%ZETR5;T$#P$p<fwgj<WIHQgKrE
z;!V;jxsNp7*0x@h>&i!>cxYUX6po_rUXsR#xUQT!E--V|i){7dyH|g<&o4VfZL@au
zuTTDFB(IIbiamyWJYpd#!uc(kADI1JiG$)1%EvgL`ij*bYks-h=C<m~P(sC^Hk3Tz
zG<L2(cGUm<XZXYW*3g}wX23%{fd!c;Fk|R9K{s|`$+92`0c}H*tAInG2d^qc&FqCT
z^nI2NL%-hVo{Kp@<Xty5e>C5_(CDJzdzmBRnvAV~VxeA}bbak22@C5RY>l!YWWkL*
zS(31F=b?kj$6xW4ftq6Yw)OXj(uxp^j-8E<ey<m)VTsjAueMH6KK1Fc1<LS%iA0ny
zc@>EARsyx{w|;M^U&l~E6iTIoJ_#cN*6b&7r}rf3<+ZM>>Cf|<2mo7um!r%;`>ZFi
z^zn7SAnXb2A%@yIECNQfV`%?oi!Otk48&kGP$d5kCm6g%Z((>_)CND8mH@*P6iEdf
z-_Jpr<wG^#+-jS`q}@0}pCVjUV!T`3@$$>qLd$bH;9vi;X4e-c*SmezQeBu0$(bH3
zc_r)Bu<|29n63zdj`vsWN*NFde?h3@O3*n!lM>a0iDjq<QdJBl-Llj&)4V^nZ{M-9
zpv5yjGBZ$f4U2H<5DRi1GhjAR0T})MO9FR65v(GUH~RZ*rqxr29PAu&>Aj{4|KaX0
z{GS7Cs_;!IU$8VUXbO1QNs#VJ0(mR3VnCvI7Su5Ffkdzi3(}*sV5>yJ)>BaHJ8;?o
z7DQuBZL>@RY~Cw0?I8Bk4&0Ra3ef%LdFqV`De0rk%Sye@J12M{VdvqmzyF#A1PP74
zOi*u$_&f$hxdtTXdy#n!S&%37S<GPYxfg`#KTvbmS&&93vlJfK{<d$#67Hp?WEVsT
zpqlY$*jpVtjjptOy5bdZYNZYDHWyt=w`7Dj4*NV$=$5>G#^FXp^oJSFBY}^~QJps#
zD6pT(KvcPlrFDm#s%AlsdJ%S3<$%XtXWI_jw5hIcflT##^fo%hl9Y%8ol*S_@bf(2
zHUKA&!ayQ)5yZ8Rl4^iDycAZ8PHZur#YHvfNmCpaChNsZvmN28r)z{}5Y?|ROYpc1
zx+Gl+^>P0Y>}P8)5Cykrr|oR|UDZ@PRk`K8X}Ac8xZV6@;4FVz>9SYG;@rekuv;gg
z0nW&r#OzRhrwgWtGPo6T9JOZWgZ<g_yYn>H@)2Lcfo*HX6~=lZcFqe7{|{o-`zn_O
z*<76;aLJ^@tDrSy?^kKo6A(&F>~nU<ky#GQm{Vk}qY>Fnjq~s`$X)_h9ZdAcddN?B
zj^xV?56Gkbd#>wEakB7VDMYSv%y3&?4xL}%!=Q<%H8913z}8@v<l4wIlapO40Jsp+
zh{~G2O-tyKfJfao!R`BL!L3~B>~SYxvH1CxE(Zcl*I*cc92RY|2T;J?t~UBwTIW#o
z&|mP}X0P1zJKqUsKqR<3LcFp~a;e7CQDn&Nep7g`g~}(&y`bKFoWx-^`?*orvZhOD
z**99v7hsRdYpLTg$(HgzLT4&&MQ&oO+FY)`aK4;qam^ZE9E5tLmoDBVT(K~AS6OOA
zHaJ|{c&*jq2grFDBZuH?ms-HU$({>%tW-w>$CXTfCv0<8V693Z7Rggji<x0w>=4aT
z^WcB}P~zr$SNnrx0bvX=f)mP13pOJ!@2{gQkt-FKA+9{?X<Wj;3<cDxnp)3X-=0D{
z@8#3aHaXxM*lzf}gzy8=N;2El#_*%YRN?b*YcJ>;H#pf}?+1s>v6l5~G#jUv2=h0z
zqOHNwk*HcbmA95_V_N=G0gef;ia(Z48;U98_C8=6PAl70#u1Yb^PC?w#h6H)$m6>V
zvk4UK){<Qugcp)UmmOwEpp-M7;dc+M>|dX^J9$3g4A)XS=Bv`;uVXcDqX)VIT70Uj
z7hj*}xvI+-iU$cPb_}SI-8Js+Q|RMR^7idkrmHgQignrWowrb@s3fhn)sbi9OtVd$
zru;oh+73Id@TuzU(s24-S|6|$zQnM&edldziSM`mt-Q4Got!Gr1sx(0b|jQhtDms5
z@E60@?8Jk-_*CXH1sb)j5qzHjaDceT-KNYq*+w&+-J=72Io*pod9PbNQ&zF$@(E7K
z0;SJNKX8+3fQdJr88U%dJl1A`>07rIER8F_DtT-WmP<?LFyl+XTu7^PK9*JF+7Man
z7?NOH^R;e6Eg<5=g$H}r7Q`86@vGL45E@=Hggr}+Vzt+*Jw}&A5Am|CL%Y6XPor+*
zqP?qVMGGX6ViE6?PV<vK2Q@pBi(ylTdc&9on6Gb@RH^q}Vl&q!2T-{%KXSs+`}b;l
zhHZxjP*JE{Mv4wCY1W8w$f=COiCSev<vo4=XSU?`Te?wUhmfwwG5G$#BrQ^MOv%z?
z1H_qw!EtYW400SV3RBsIKhb=t`OH#;Q=n{Cl(*D~TU2n9-ObR%iXj;_&!6SpLgge+
z^BkWqeSJV#nO)ai&AlCMB9(WR2QMqqRl>FyDI+;b>t29J?@A#Efglpl6g^?YyT}RX
zhLRZ=@V$7QvRRPApre6Z!7NDE#ZDA19!uk59N5T=XH0;ut(xu*E`-1Uo}3h#9kd~a
z$peDNO!-R|#AXp(L;#_G28^!-1^7VX3iKs2P_o&e?SKEsVx}9oGOGu=$OkcuOFCK%
z8c0b#0QXuMdy(l>kdR9opB2~ve3`qgD?G9FjlE0(bF|T@UcXzo=cH`3-I3&^#lEZO
zG0$2oN!}Jcj#5~PLBj|9#M5Y-c-3xYgVT;vN^>E_u)_FKiTguM5!R{OsMr>-$WL#`
zh3AbgpJ;AsG-yT}06icYdV^@V3ZkL#&K5id%C09n#yCb<c2pa_TY`=LKcu~PRFmts
zE{YXF0TJmXYYB={L<DRgQ4tVXfT9qJkfn%-fPi!fiHd?0K|w%3h>D2RNJmPd^eUau
zLqhLK2$1@DUiZG^?w{*-@7VjC^9N)2Wte<zzVCeIGoLx9ZqR$pi{EXM&+$!HQ1AdA
zgwd!;JVC%7vNfnUgJ(W()%R!|bR8Poq@N`SRTLln?))Q0B`5l8YH9j_L%cri10E0-
z|N5m2NVcgK$xtO>NOOc*d=l@@H%w>$rWQkl`8?<(Z@We%aw=rf5C!mz&?H%dExt-v
zWgy9pG^+h%V>~U3W6IGm#hO7KLsdWgLPmHe2AJ-f0wDRUlH}R9)W&R6YZ$nGZ2k4e
z4Qou!*_lYyDUIit(%Eo*g}}P2)Mu;VD=Ra-SSM4t!klvH2?e)Y>DY|$$TU}5g>;X!
zn_k-eH*T<Qja9DF|6*@MGIf8u+E}J1OaRk`3;D^1`2axe8ezblpUXq~=>2x_w!=-_
zCmMvsrv$bDE*!+B)hK||F4S!DpeU|N{^oKoS+`0x%8J^skeuPWy#pruSRvs!#a#%y
ziWqIqrbzrn>8bzq9MIm2FuFty*!t+0Iiup7{w2x+oicCKtsOm~FcP6-O^}N3$F?NM
zPYnz5;(3Ysa@Z{>&C;*cv3D{GL<3G3|7n9>#_YiTfB}9Znk0r-w6*DwK659%%_nfI
zx<pT-KUSP`bH8_;jKRLA7q?g$^KJRIm2hq%y4?2G$Lgd-$aqCzuNUV*y3<vUm8Nw}
z*0^DS-;Ng_iRJ1=vc9fzY?bJE7J>q6I9=^R6KSd>M3Rha0&#~t6(#86dvO9K%kwc9
z8J-3&2jvt@wg}sIK5P2UfO1S%#pFHBHb}|aag$77N%|7l>!CmS3?nz!q6M4!*yV5y
z_0-;)WnK{0t-)5?Cj~$nsQ>%5%NC|%t@D2N2btI>SZX-49D0;QVhU-1nmuFgpO8Ah
zNe4HfZKhxq6B)Y=1Ap=@?1#@TatISx08IDVCGoZsxcra+mxrl^fn9ei5;LJq;F^VO
z1I-XT>#bqZC8oK{M;FG$*N)TA&1FolT-r*wc{rc?R$S1^2{An0ah5QVHstd3HFYpD
z@Y!?Egsl6Hoqein8XJRM>owP!?9?jnV7>jLZhtG$)O#e)6S(5W=!s<CAgS9_3P&a2
zoK~6GKWx+Y*_c=)F6$0+V4cK&UiX>vmR4cACPI<jXEA4G2;65l%wjc`EsASnhW}wB
zzB3E$#wY{pP>V&3Idw?-!pBJjHl3&LX5X=?_4z|2D`RcqL*!w;|Bb(G|98?{5wJ!6
zuJQ3hc~J4VN%*j?4fRL3WLgl$zwq7C@eDPKzxfXl3^8|*tOLIieFgkrQRuLyX}OnZ
zF<Be~H+tZKR{El4S*3CGkkRUaW7~vY^TVz+pyRQIdIaGVLR}dLMxf>GFVfq7!yXY9
z6|llsgInMwQF`5Y@j#W{I%`>sSGsfiZ0rfk<10<Qy<Lc4-}!@2i;TV}WZc?ydb>Dy
zuIWfA=mgh>N~-mM*P^w$Qw?bfWiRB2s%q{ELxF1B-5Zq9Pvx8#xEejha!6E2GQi@?
zh|5{cY4s3&huF;1dS?$08LIc^qZ8o<%|35+T&pEygjL=;Wti!NBw(+X!*`$nG*T4K
z2DMGs0ARUO=(d?+!L-tM3L*{S@0c%>?)(UzJv)!3xndT;6Nu{vN&eh2UePZzjqjtz
zrkL^W!+|Gq2fa}EG3~(DxMT8N(Bm+=B$dGPN(B!M*QL%6iE4}kd5h+T!nn&I7graM
z#B;6O<o?M4WY|;ek}MTPC=0S}3c<TDa2Y``t}@Re?ICw1gi)c-l4<1?{p1rbVd6?5
zdu->lIHw5|4kbbFFf4T&1>nP;fslO{zHkGxggm(vAbWzB>c6U9813_xfqR49VS92p
z2|(HH+?A}SsKN*AQD6E`zUA1u%8kyU#d@|#D5Nrf=2u#Fpvj_~G;_JNT~hUN?Gwyp
z+8Nc!WBp?)ud?NPzq0g^FA`;{HTNRCU2|D5K)_IY30pC9?x7HO6ho_ole5sjXz3w-
z9;@P4T88=F&Q3oz+l`%B5cTmK@nlk*nzvEt!Q@H=u_;E=Z0G_!mW9o(Ym{p>Gtz!H
zLI(ks5_$@B@PXBN!WJw(2Ey&k%vZFJA2;6LDsKFs{jo76sDR`^^o`v!fAY*qjc=m0
zgd5%#xst=Cfo<(2YCH4fO=@`U5tqZZez_A$HE(?qmu0XkxP>5G4BV|VdYKY(6D`Sf
z^gQ0$dVZrRddkeZ%V^icGsth_)Z6h-vi!@1M|^7HR!6v<{XW9VxTI+}$=FCM$8N;f
zQn{yj)*$A;xnq{A<kBYX)7_rC)rt?BCyu|&ZPp7N_y`<o0CNP`LC7YL4p5^GRB{Ko
z2I9zr0H~*f-Os2K7@i2YeGq&BnDXD9#T%f|Ra!apl(Wj2#x%w<T`(^Q3}xV<RUvIm
z9xI8<1c90}<OGrfQ6NLm1%piBYj7ZO`o}Bs#nhQ|1wdF>B*Iw(zuLG+pZq=F_>Y|8
zU4Wt1G*~pS4BEJL(1D{MraXsXDgESY=Ydremi8+MHn<JjoB?<Df;i3Jm>*z5JK2ET
zx5yU%R@J*&Fnr1R%JnmQPj7hyf0GB706N6-$NJ#*1<<kj2^)DVN3U(@Gn3nil8!qA
zu(vcdue*IW`oRGKxCF{V()*L{v8P^xt(WBrINBSF0W;zpX^tvN6D$A>bw>UIq@Gex
z6_s41e>*yMENkMl4pn)ngBpj7!0U!BKnHxyq!WV^6{r3AkHGrU@%`+1ipajZ<NJ!r
zQZ2m&Z<xvF?Rw|@@g>>HnDq@89D2N8!QI(RqV1O-4as`S)qj_jLeVz8M52KYys>hG
zsaJtGsQNaPz_dqJB7Zx!@g~vc+2}0EXwvFycpbZ#5wH=&OT&w!&NH2yD4zRWi$)j3
z+Ej}3+Y6uUoj~P$Lno}jsLe32poHMiP75Hr=>9E!mPB{KCGg6D7|QH(?H3{qGS6Nl
zRDUzxb5i(u=-r9Kr^FXb7i?|_sr28?b~qYU$cPUzcZeq!2EJ9gGxY&4HNNb)GCK_a
z{S3rht}fGdg77R6@emWLuFxYpFJWuYN}qo1!GF~J6a(~yWIAF2<38upkD;nq&~ROz
zgT0MtRa#OQ%Fu^WV>fG^I8Il3v2xp0@JOuE*0G)U=r<;J*zbLB6s}e}&{qBmw~J<e
zHL~eKjM&cXjx1L@)lXITf-&{5$0T9&;d>|8xM+8!s;_0StuNw&4s0>`aV&bvOa+X2
zTjVjEu@l(tHf2ChEq=$i!=K}IshAhqQ5u4a#FXn|wn@Ha$r;ujgDrv&iOooAjXp4g
zuGt&_=&xfZZDzg>Y)wDlm1~e<8sMDWQjfBaBh&itQoJtvSRn2$W~FD%6S&9uzhT+i
zz_WfF5BO6*dhD`2^%{A#wo_yd0qrS_>v3DmKJdDlZklj?bf<jGX+}Zsh8{C&5@Zm1
z5k)lXnxLHTLT`LclT!?>$D$uK<@;jFW4V!Nz@Xvg35+Wl(t8e~$^uigU!yN`-rwmf
zYIhMCXd-)cht99$=9;K?v*LlwYbJb+#y~8Ah~i-Rg`a$7Shf)Q3)hq?pH+|J9}m31
zo?jwYk0d)?X|FO5<d5X0|3+x_bw=ZL`_Qr|{XUdKrhS8-k4v$;&;7vwIiHeHpwoGK
zXg&|0kxLyT^)y4zs6Vb-n>-JE7U+0m{B6!`JB<2$9E9obKX4#!1K2$3_ybL$u&7ne
znk19>&$P^8u)>#^fOI)0q)G?xCI+D~K!;CprDs6XBCh~0o2v}D;OwB<ak0|Muz8fl
z!$wI2UmZ->Jj898@CB&-HXPT=Tj&7+jbmSN9lK#8@f7j?<(lHTGd8v#FDePpx9x?`
zW}*{9@D@uJ%V#s%Iq<adGXMKcJ@}|Ub05WF`zAebgoO~&&RY-eMdCKDtCydE{7EyY
zYkr*Ff#wSfZl7pp7n0N7KHh`6e|r5hoE%yWki3E6CXW@xb!*2F?pr*!E-#m8c{lHT
z^HtYA<rcw9KtYs%fMkm)$~-=8Tq_1TjntzB$*+e`bcUrneJ2KFGA+2Bz`=$IgHTFH
zlC(LaLBr*u!QNHGw4dN$cG)<zga}ntML1u{3wX<LR9##B{pb8qdzsI&xmTDWu9RiR
zVOi7E2qgnK*)qQHZL(3Yftu(TyuC`tO+{DxPS50ZJ^3gy`^~4K3cF0KiH9F)3hfE~
zg9Qt*<pB1v#iJ6~nXCnGJF(S|HSqrsW3vA*F{bsE8B7zYC+*=Hi$tI_y{9c;`;3M(
z&0xN-f<sv`{p>AyP)`xpw#(OZD@r@e9w`?1nkD)1$&Tm{C1=#%Q!cJcXV#E!`q}Xu
zd9J+Yo;eGetV8IXjNC&bhTdV3Bb-r&1~<2#99fYPA9&BQL;*5wD-MR4k;j#f<=fe!
z6+A2xi=c%C;++i^>jr0A?YR6GYErl_Xp88YTQ*)R9ud+kSGcLHM8tB>F*~Vs<onq>
z%A;1FW%8DSAI0z|8pymAYSdBM!{DdljA=WoJ~5px*3fq14u}1yJ(Pktn_#>?r%EP-
z5rnyt9J90libV|NYutkAK-i8*ADO26p_^`x=TsRt>cq~V-k^@(SiQYrg0X{Dxg<Zk
zr_i}0=`+XHJu~=lQ$W@zVM3t}1h5#YG8C!>wh&N2%r%5jiGVx8%xS@)Ex<+9TL*A8
zvEMaV>ww()RtDlpI5`>;z;xzsLOaTt2yDk&|8Pp+TkbV(35M>urj7Y$qW%JSA;n~{
zwabpAitKdg2s-#d;Gnvv+T|Q`{`Q5P7MVdV|2V_CMmR~ZdN=h}Bd_{Y&+xEAQT5D>
z$AT2<-Biq($$Ve(!Q^1W^%!%<vYJi<)pX4A<ofFE?Dgpx0%hr8KN<mz`p4JNBuy$`
z#>+RvHVd4RmF3^|ZnlST?fdrI4}{Pm(Acn;$tR{;{qwK%kBLK_?`~GOEVwDCf1G}t
zR%r_<YeWpXTvN^=4!J^bstM+%kXpeDiidO9$<F<Mupd>$E+WsN`_9B}1bo*J^@%Mt
zdKnV%h0R8&a^&ZfFEMpJf(|UlU#m#O<hbl+TT3pN=0<5eORRKUk~iAWjHaXBR}gh}
zEFBLfOk-lXr)MW7*UiPNNJHgdOGa`#TNe7e7#;@ob`9yzGB4h#!YAB{;8!Y^!>o5W
zBj!bxJgK(%fXaE6OF68m_U%)eY|QgO*TU6q%o*<F;Wp=}f^6ga_)A=|XH4`b=jbpQ
z+505t{-1nF$r~EAom*^CC#d?#WZh%C?Tz;Q*m<&jv<lW(BN(Z=DWjdS>+^YAMUL3+
zuxB#fnPzsH){f7)p}$c0RM{AY_#z8>;#R^7gHNGBY`55eVVnUl-krcwFGsFVx`Mzq
zWdhoH7b~IDfo7A)U=P|rzk9hencE+w>GC*{UynFdls7*^Pl@u6@4k=G?A$-+t+&u9
z>~TFYDgfWK+#t>ZrYE?%0fM#nAc9Z^P>uq&-)8|F4@_4F5cw7Yhb6vA80m-4$zZ%W
z#_U-n^hgymp~~&-z6{bikT_`>Ky-tXkU5AI>aYI$uR-G=<T=;N3FZ0Vz(2$ZRB^~<
zF7tnM=KUDY>)<9`dEcS0;6mRCl9+-Z#+}v}R)kDlqT!1y0z=eM(;=(gRAc}A_=y3v
zYB%_>-=K?Xz@Z6F=C_tnKK@9`B3;d$m1}Nhw+y+^Ay2DLNjndnAd{h$(ueS41w^n=
z9+h@R=pPKNO_#rGy+L;9`_Uk_>-d9nPHcoY(hO=Q(CvLY*<?5rib%Th;>N`zZFhQ3
zG<#jCpS(+6Kpl^>=q}Cx`}QFwcm!ula9jc4=3jtEvB!)S3k8GZoftqDGPr>pRR(C$
zrLkjn6Wa}=2|U2AVkVGOkrpKLmS;3(ZR9do@5yjxe~26B7<V5nsa9l}z`Q&TOsPbV
zpt01WjSVOWP@&*UKU7lnG@sS=TV;<gwlnCSBFC4651h)88|@xmtt|f=_roF@TZF4$
zRX`aJpb+odvhowS?<d8~7ntAV9!qaq!*y4xcD2(hZ7Nj!Ja4bQU-9M_zFB<ca?GI(
zbGGh1G`NsDF%&R{^kD?Fy#*ll&;NFRh(#-L3I+_sfLF6bm`}f2Y!av%Onx${0sc5$
zhk1U-i_XaL?%peRE<qitmmXv&>n3<Ro<x2ml!tSlpfo_G4{+yQZfo}ldYxa6)!oW8
zN^d2-Vj^U2GrXi<{H4B|p6gjKe=Ms>F8<QX`pmIrt1HJ%K*lcn6Ji8ebn-ht&9Q_a
ziZbTsUe*TB-OyNCY*YjNFb8vHs_lzd{lE*E5R8acNAm-_p)eIGJ5>ZBZh`cELu09*
znx-!mxK#|Z*TDs`+uPrJ?Wl2!0%k})WN|L#FmCkA8=I?{GFOIRgJ17Bm<oi4$wZdi
z%I7`A%AiN~1tEpCTfEa!p2&sl2>OxC@pH99r@H=)`co_Qu2WRN$bOew&wl6?FmV@n
z<%Fr^dGNlugjPHs(|{UWkCgJ;>}HtUEDIat|C(+MtBiho`w!hW>4Q@12k`v5O}Db|
z9F;Q8i<`sFppP`LemIA9IvcB_8I$5}%E8D=m!Z%NMo;Q9s{1TNLI4x9#MC{UhcgZV
zr|}rTy2jjjWEh4|Uje1n<Jel;;JJGLgXWF#8=r%mt)-mhUs-G-XdUP~P&anxQGKz%
z@8h+{hj)JNIG8&5bfsHtp{B;rBbnIorNqj$&!Q%-mwJX7E?qz5zwcB|X)km;0~SzL
zMr4F^W?{%RzF4-H3$RvTnv+&@@ZCT8++OHXT%wn%Vf<m4UxLR5lM52hRT-h@UVyTk
zsgB>%sg6bt4N}8zBE8-+Jk*mg2GewysLw;@u=c(FYG);Em3%4#?vgu$e1R=VNcxX5
zhp$~9`|apr$9yY9cYJR=cC{F3hWIye-kA5H6Q5v$3qAe;#!GKQQYptyyBA8i+L`3L
zr?0j%kW5bpkcAuqfv*mR*^l-fH$Pf1Te<CS@(_(E8{=*D8P~G5ha?&~y+N-j>(*$7
z?sT5YkWD_UcANFp(_`N_ap>rGfTQ1_nEz2O@vCIwfA+WK=l^k;wulkcvlbqq4>wG$
zb%a$C%I~Ns4=aW$eqOt+@-~2#3k*yEU8jGd&);HF=pNBHnttoC-NMbKpo{#YT8JQy
zGU^r;`4laEPX_ryCpSdhcd_hlq6=>->hP$)(edR_UYA=oEqu9Q!b}6DAly?>+7fmy
z@rK>EkX_BLB3&Pdqtioo5Q2Mg5!wC&M4m*}lC7kO*Rr0x-kqC{^th@QppJ~w)Su2r
zbqKE`3Am2$?RANpAz7G3DUAe_pH^DtvraF@F<ol?ai155pB2P!+t+chK0>gNT__FD
ze*iAN+BKNA``Z~r)cWqgWtYAyRmKvRHI)9AP$Eu|mQQOJaouPKnwKc2A6+rgHR}Gx
z5MNLJ<SnNlA?|84KXf$3-heT#M9B$qv^N$F%j%G}HFO-Xu3Xue3+7)ApxKj&^_NQQ
zVLKO;EvtH+<A1zT^n0$TvBlxrsLy;;4f<uE4|LH(1Nz>DnR|tNWX0nPbkx##!g!vP
zJHIjEGJX&Td*;1XPf;C6F)1lyVO7axeu!gDPMTJhmT@s7u6{G<J<M3hNFGd=$pX7s
z$1UOryL`!*X7`iNsu~||)qOEQ%;Z2=`s^RN`?R8*I(0xevqzKW20a;u@jw|N@bmYW
z3vbW9c;GptMXwwcO8r{)rDv3Z9MpyGU^z}aH{A_T$?%f!47mTNB(`{P=Ta|KtAVhS
zP=+BZR~1%5-E=OYutjy!#bNyRRVX<JTT=ebLJH-K?=Gm;47z!*()WSV6S~QjxLHNd
zr2W_e)urhq1k|)47mF?DRilgb!lj{HHCQpam-Ubvz>RHQPz5!7%$u=5A|&xkBE$pR
zi=vgf>4q{hJ9D0Bm)4m3p~U)?-Vcf3xCST7`aL6$-wL0`MWD{Uu&exw`{agDYGy$A
zE86mYgx`cn7<81GoPQ{stSj*~K2#}dI#L{B#CD1FZHP}>W*%v|Ah?Xx2?vD@I+tJD
z#}BFhKwR!AmG=QNG_<1vs;aBJ<*pi?)GGGnLo9kOO>=bZxGDgXJdLWqm!yBF`Y%nX
z+ocBFU6^W2M0jteAACE;rE@nIRw#+Or~gNqrp_d8tn>PFj3AUn$b9II+>6rinKY&f
zr43dL{PDC?+nZY}F2Ak(TvIPDAD#NrYwB2aX`#ALO_JxD3j@C0OI+=1o#Y#xW&0Au
zMbfNB8%+<h@sXL9$JJp5&D<4~*hIV>&Z}P&OlUg>8*kdyLr};++WzqMNupY3ne(eo
z>r?LWotAEl#s5&f>^1;#)Gw!}N*~AjMCW!)g3^J5P7~FL#{NXNrD+ZSBewqdJRb53
zuLKeqv9Y%|5zfXR?iN<hXtX*9rw`-<x9oueF+;ix4%%i61f6bl>&S%0!2VBI@3$!1
zj=1tF0A@gcGq@drT!t6MbP54Ku?2vW$r8-JeKqT1_iFX|+~K<^w*-!^-nRK*dErUB
z*Kv!j1Pgsps1cH)65{hw7hma&nR(R?Jy4_EuMQ180$aX`89M7mY%R{~l~%R9+~z;<
zoE;-eSvk;gXfpiDw0%py<Rnv(1j(V0-S{I$M6_)8`lUPs<hb(g(%;J6HqEBk&GStU
z*L9<!f-fmmRwdjF`@?o@P$ehkWBj+R)!Qhs%R<yi@{a5tgM27ga5>hzcvugAYM&^*
z9zPZ$K{$?9L4`0M({2Ss*;H{P5~_~ebiZ87@4=hWUuJG`oPkFix%p?yX`eoNFC<HI
z8FWE~gtyLfR7%h0-_JRt%3Ad_vt5FhZZ;ryaL@IZ<g3=6#16xU^#4xrg?&{Udlft0
z^jV5=2(S4el3RYP$wJJ|Dys_q)~B8F2`;YZa6LZBqY9RbDa?xE!h)!DPhnSTW?1eg
zEz{um_SUgOqrpy3&Zq|>>OG^wDJ}q+2+hk}{5W^!(0e(r32w1zm52rdd5>9TLi9`9
zY4WMt)43>)a_EUsM61LLrn8d2&LBz=@Sdq;EE@`E5i2U5WM0<xim>ZI{^$fVyM~Nk
zEZ#a+aii2Y!RTt0gXKLEHMn@=<YW>zPDA`BA2Ax+L)h)MY5I>3x+e*fy$qg(Pow8%
zD~!yu{fBHu73ITALmv-pq9j&P;KG5J<%fP#?>{6h`xmZAZChzk`NA~}Ko%=E5d`ik
zi1grP({!)(=`^KS77p9zMH;*fjXy9UJoRWtFfsyQ0gW(7h<LR6G({b5T|y}KC^8!8
z#@34--F5akrN(nZ&3x-?)xIL@k(#o8tpzw)@mPyjpLYVwX@~qZ)A8w{vJ@7K?^l5!
zpnd<NKroNM<c0Kd4swsvn(8!!7YFoD^<s)$YAPcyA%28;G-p5Y*<B&WrsV#ckq<)>
zC?uFY#M!-US{w1;l`B2ZGUSs^^osN7G4WJI@t~vjN!RL+kQct1IvgdmNY>tfza-PT
zb061#?K2tjF=P<$7NonhVM{%~dq!aQRXb$fOBd`Wlz8Ol|MdVqtWF-DE{--kAlCE_
zmjHP0csv}eZ?I0|2asGe!4!QM-KD>sX_7N?7gC9#%~m~c#omdy?eK0g?ngB-`QI*A
zu2;29`T5&L>w6Y{evq+-s254Zy0Jeus^L_hr&WizhaQOkw8D9>@w-ufG2JN3i0ib1
z7rZnNpL>cgpl;6-vqEogNz28YH8kOXJZEzj*^>={z|K%`8UBwAp>&OZ`7CYm+fP18
zhPs$J^<zN9QLK+rQOKu*(H^&lk6Dc<>!hE+3&uF;olwZ<xD@~|AU7%d`sM?fA@uIO
zS;NaGR+ZQXSumMj-B}BnTmH!{Mxy(HG^n(b1AyXt#4K?sI)^0dTk}oM;I#CTKXD<T
zL4>c4ru97uFOp8n+qZfD&h>rb!#<lPHy}T@#h$K&zsmCdtg7US^0ts?_W4y{#4e{)
zf1FCfslaz0#`PeXf9ESh;YR?R6TmP*Rnm7m3!d;bK&k+ukv7c2t((GtmICCnAeUJZ
zZI2d?wFcgcF}L$a4Gg+4fLtGk^L8Otvw<Gb6dJ{BB%sV(IlJahBwZO3kunFAV$<Mj
z7uO%~0pb|uZ`crWD40n{r451^3irK{PPJc+6a{mF?+$O2<#rabv%*F-UbJO6+#<Ji
zxZO)9E)8+HK%ewqN%~wy+3JR9&;6B8mHNlh{`%1wTX>{#@+~GGFv<VCbOEnKaNYbA
zLOZuIE6lbx{$4C(23v!l$lW-(0i=_02R~tm!LdBSY9u73Y62c_D~7uj3F#soP|8d{
zk=o9k_JR82tkV7E0hrSnqVd(Uvghw(?bt^pn+t8+4YKV{SeGrf73;6or3<w`;QHp?
znx{7<<o6CN7Q4*2EGGeqxNH%s_JA|QkVlC9*njHfWYa<Emlepb!<8pBSTYn$lSVt+
z1=MvYdebZ#RCDfiA7=)b_yvb6MtqdZGhK%?&La!G>cp#$cy8S_8F3-!@uQp!zAbY*
zP);22z+s{-Rfzah-cq+i;@04m{neIqsmDbACl-hBU87ZHx9`hM)}WJX-<-KleU*0h
zMyV%*1?$4gOxw8Y+Y0u{PhYcz>ytE?XDy^b$@5f1U>#I#53*o(%<v5l-Uq#HRP6V1
zJCR7mn&9LDJLePByr`1s2c|gqvyhr!Le!Rhv~XS^NOP64bg7DUl^T(d%G??L=N^VL
z*nlIpw{Epcc_>R;icGmRQ`D^NY@aC`fwtHVr7mr>0jG#Mmp86AWv;yrvf3ChgT2R6
zN09vR*)R}}J?j2thyS+h<_OewBw+ilg+f3y2da?Z<Tv>3VAsgv=Rp;~QztBP<VY;?
zrq+UfZv9WbwT+}P4Z7YUB<nUY%cX(@i3}Xly#cSs4bPH2Bf0$fOrJ|pmZlvShCV!R
z*{TwLs`1jxS1be`fCWvI05A@75f0D$SM>+5|BVtRW&$)E#UJY_S><=l{$zi{PFm@r
zi&wj>bX&2^n$|;BI!xq9|7)3%i>n3Uo!;grpC7Y1GEjg06NTY#&YtgAoW~9A2D{L6
zZV)e<OxW)j^2y=&IBAI`rEiCN`ZhlC?BXEC6|;RbaF%S8ku_*IGd^4$u=ntSt-TcN
z262{ushBcN#Wu>Tc6ucazjHf%+$*CUb_9Mwb;IkCk;s9{3jcEAv3;3VV++{1hc^Tw
zq5c--uzHj7RYQDPFuaL+3S9oUd~7XxR~PrR)VD7sk;gToPaG#@>wqa5M2hH%Vlruu
z(U1hq<iTY3+hrIa`Vkc4WogPf4cjp0bM^7&$jBx2oA4zAIv7^gLt(eZ2waV|*N9VW
zkh|ga^`h4oj+x;@b<D*;zmRp#A6y@(wbJ4l{%}P@W}8@6+n<!vA~q3c#R=hEH00L4
zmmTWWEqcOEaVPfVW$mz$dm{2#hlRI&)4AK$I-GlE3B99kXxY6=T+U1(wO}y^9^waz
zC-0)=2TD9e9NW?i98z1$BfP8loZrT@o^`|FnpQ*gb!ir{5S)pyra7!Rj$UXJ6#I7l
z;vancILn9e1BAcb)|cW>u%}$Eswyqvr!ZHkv0|8ey}6E>CD-$+hTAa7EdGD+_O6^g
zm}VYuOT<W!Wb<qIo#=O(AS{hc!k**BkTOiqdfHsJUeUKJ0@fB|a&jfNz1-HAIoRRe
zw8K89TB_X9isq-D)vw<pXP=3CI<=Hy=TWr|cQ}j#B4)rBftcY6uzDbxQ;Ge@F@Ba~
z57Zs!013Dibdg;=;R@F1JZ8chZumd=cI>jd3vVldE5Oh0NWpYfBAId)|4Bef0m_od
z+YjfWXMtuj1Nz7Df1UI^RD1`^IGP0Ui~W;8bfnSRCh#@XsH<Nf(tzTCa(}|q+Ft$D
z*Apv8O%7En5DvAIPf?VY6<z$77qht?_51JD$=V{q)!wGM1tT5P-`nHmXeVmO@|I^k
z>kvh*o84P;wJ+}6QW+ECCKx#xJ?cPN>QqTHxp3Lb-z`Ufg_nZXX2yfXE&6A-{(-=(
zD;4(74*bwM{!!!@B+a)a#(0eHae67+5BY-!>iC}Zoh*AG<?^_H((jZ?>w{fv8Qxnk
zvO~)bWlKe2JYFFjd##+Rqx8y7?Rz{o#uGxve`j@`34DkfA3I5Gn?eIzf|LlhQrme5
zkv?DU&&hv?YwMzuhKrC<Xpt}x`M}-vl8Kd<wt^9n&sBG0_JsaHwtvsi0o~TMjT=d9
zISs;UCg62>MSUeBLQWPHJ*B54W_spjPCI!gINyA-3)kd1EH<H#O^v@1%sYPiXtmD6
zsqgw)Qy@-Dv=kl12%I&pac&5dGdmJ;CwjVd)1(GIA%{OWHOSQ)hYMJvJGdq$99#{q
zm<!8p!_-|wd4Nr;mIJYo)J){C?4-{ZD_RImX@ajU4zrp<^RxCBd>3cVCvSr5h7Bcc
z+)Pt0Wk%3sh;2g=?(Rx*@%_%p78X|5)^+HtTaA>39Nz`gj<Gp(K;4&)HMI-xFO+ae
z+IdL<IPPf%VQKv%%D9~RV38o^7nNpU*?*x$PV5yFE1`e&5r6xbMP@LV&|oHiN}O)7
zY({H@hoj{@1?I$JnV0+mTc^#<N`$`q%yocF0M9YgE>P{H_OzckF#t5?#`dh!w2wy<
z(o067C6>p^*A__YPE!`cBuYbhEb4B$Z1>phUOjy~_%TeINvH66hWrlHEAs$Xsj9g4
z`Z$vorA_T&u08BU`hk*M3xAA~i*4y&{wjevRV}=+q?R4%9H<#7tyX=N{27wJm+pYi
z%`lGg%GqmiU-!|e(Ha^tA8lp58iq2-4K#KvqA7%Hme&-%G?Cpl>c>CG&>_an6xAZE
zBt~?m9==tqFK(s1!pYxa#H|oI?#GUMN-&ErQmw=F3Ai7Bls*LrrDUZ^Fh@5o*m^y0
z(a%Gu=gEiL2)^|#VQ#c03bAR-ZSv69_x9Dw7QJeYVjEsVBBvEm;Uk=kFStQ77<B#w
za=jJ~G^-2A)_!shc9GaRS^G{OwnZ4TDBUFjCj+YsSI7FV2Fwq#_&3G@zH!L{TNT)y
zRk)K(SK2lkrVE7w6Q5fOurE6pt7j_8nL}q})u3b0BP9A?fKz8fKo9=9pL)aI`bzuh
ziKQN63SRk^i?QxT$=Ju&c4!yI4&d}8?n0-iW3iFiM=q8nb%!IZ&i2>zQQi0{Np<-!
zN_Z#^rJj3ONG0*f4OCaV{$l9*;)3d0?1l-mM^BUjXP)Pt*YA+D^*Z1JSCdqJ6f~jA
z&|hbNC%!_4yq?)lW4g5jnZQcDegqkuX<NN|Xn6W93V@3h!UU|dGfGb*m#I~Ma$K7D
z=dp2{OHN+K{PI!{pPUBe^hG#s;@EBoD71ApJeLEge+Lrk2vqFcu~|fSJnv6L-asAh
zSCb|R{`hYh`5z0;mbG`Z=WD*kTeQxStt##XIfh&a9XRUk9n$}kPp24gsC3dl>TT8!
z5Y&J2-N&$CB^GR&Cr=nZ84VwGULa^~h={|dEZ{bfOC95?AzB}!26{o9+ws5o2mASd
z)l%`_RfGTN48|DQ04eFXgCIJdz%Ue%$)L*$H<2WUAp(T+E|Mn}0iUupm<Dq#u~p2+
zK<WgEK%i)?M|z^4$H%m`Q2w5xSMj4mf2?rv`D@}D4@tlSKIN6HDVY7@3u7x;-w>c#
zGmzPB6HPQt{Z~AT=j$3H1P=Ua<rly@!P+_6IEmF|z59a=KCwk_T@*@9A=yRfBa#ck
zh)s3WZVH?w<!8ZW1D?-7C(2RXT%{>nI|nTaf~P6Bz=X6TCAsU64Ti3~wD}DaOQ2R^
zO5qek-V0u8G31EvC17|(u~OW7<xR1}lF<Hy@gz6iV_q@uV+@Of7%Fo=)u@-Pg{{S-
zd7*?E;6TgZ1H}YS5!P-d5~?u!6=xBvM?^sz@pMm2O;WIj8!X!*g4PyheRCNeJl@92
zFU>E11?V85^`Cr}8W2dXaT1G5V@Gm1_LuNI1oAFAerWrbRj6mIyxsC^(~yyOda^i+
zWr%X3<ON&%!FPdY#nP)b`SCFY;21i%kw1~|FohcRsb}>akl$oV3ctmL274;L%s31W
z{Fr`>|FjN^Wp3>}Z6ZAxxmHwNYhy>t7Z3Jb3A}MS{d!yB%Z6S=*<xjI1|w>+b2-T4
zZj!=2=CxBP6Vu9l-&kUWdtFvx8|;TJ`9a}J*L=K#Xo%~Tm9IXfxSb3LIGFsV%tUGZ
z5MBjW{FCn%jCG{)7mi=U`D{zIZkW-|vRd!<H6ENAHH&Ot8`Zh-SIJDbdQui^CAjlf
zRsR8ra3IC(09Jz#<(z;zvAgk#D9zCNakbveuYC#&lmqkLYEJIAcgS9SRPdk6=)VZO
zwNxW8m26em=7m<>_`yC#mCmhNS^JiE&$aw?Mf+}Vp28WNY3P2R-0DYe&np3d^(<b!
z<5-3HpV<g$<6+}hs=8<0OZ#|^AggxnmzM1uc$d`U80cv1KP5?Y5(H#Ep#D-GjMbIC
z0l*aq7(9O!w7wq!N8b~`t;hl6vw5(}-hq6e1v(WJ!Pt@-l^|!FKSwBP`W`E?Fpx5y
z^sz&J>~)mdU-xJJmJZ_I(X6w2=2O~ET-FWOBn>6+8}E(o-oE>hZ+&>q;K=4qf;1$F
zy3WLYMj24o69BGTk4g<%Jz#qv=}LvKpYqGrALseIhzq1fQ_ivmIUvGM=s3mH^t0Mn
zMxvx<bF^k_(aZCjJMpPX?O)dKUe7j4QnAn1>22nTJoVx3ROELo6BEvE)cqKTPnrvQ
zjV)6CHuTZex#y_-Xk0t7e0$u(IMZGX`KA7^ut)~O-2+xr6s`@!1Yw;7Va^{+M0WN8
z0nM*WH35+6;U3^<Cj!oWfOp~DY$MExhct87cn_N~b2spFz+~C40PX%5h%O%W0)F5&
z5M4N+L(si&k!lSpks`yy)LM7A-S)VZ<kU=0>v)^?!vv@IZ@>Lj-Lw7-kgs~eOZ1Gh
zM;FTNFR;pe^ynV)JLh-HiTp)OPQ5dDrtj<FD^~+Z7G12BLlhKFGHk=<uLD`SS-u(N
z9-^_1QPf!IvM1<!$cD{2`u%<=EW+$sM<&yP5S)Gunnnk#kno$>@1Np7q*D{7DQljM
z&0%&xECVh)SAU%MLSHEmS?Bm?B{i|!ZAa<&7vmw^Am4O2x6tM6{&o3c<aMYA#+Q#*
zog<Cd?Nf6+)Z4`}tBraJqqlV8HZ7c*E^~upj3WkY-ekN7;mls+3%gd4S@2@avY|6>
zWH?ZSBLA(tUvaCd{gAAHPmK6&<&~BdbJ;~>kr`jrt59cy`v!*S*nSH3{7Yb-VvCm2
zYh>*P3z>oMoI<<aOL5Hja8FXk9Ou4~lvrSC^U<Lo`pgp{bPl>fW`BxH?MRyS^+7+=
zChu3#c}{oXml>T=zlKLVL2J~PBPQl6tN-4Pe|-J{VeFOpw%EVk#x&NPyx8LlP?>O9
zPyX}rUTsr%3B8+&H;Q3CEjXkSIh(BcAopZoW(L^rltPSm1%@Eh+GiuOmF64t5k$wu
z%tW3@+fTj`Q!CTeD7Txk_a!8}k8Efp9>5zEa46wXq$affK(%GlR857C6eC*hD11xG
zgxlIEabNDOd)Mtxbk<eGD-_zWna`Jx=sxu2g7)bJ+v)|uR3ZIxUR0i0XXC-DM(csr
ziFB<tKK>qp0dxv=9rILSH*hAOWOwv^(rOZ{?U8y+>RS;U(@&tETslb37V3P?wLJh+
zQ}cgru~}R_Nu^Z6Mv9S_d||>&SE-;Ru@<jMe7&skA~JK@&-q!)wB6B;F&w@bdQ5IN
z`>X0%R%B>N+A!MVb3Wk1AlYAa*6+`NwjZ95jxqOS0SLe@_`;YnB<?)|{4nnIPd+=~
zJJ;5zps)lWZ&5{H<nLm+iEwTNTiS&aaE}=9(hkf2?Sreh)<)y0QE%+J6<d5`18Rc$
zhB{x(dUQ&UR7vAz7mfe_N=jX7g9;S)<#1db2g=4n;@}8sXM}eJlcI1m>!f=A2kRP+
z5^8raIMYB<{BSJ)w_0gwa3<;DUuUxa{RWUbe=B{-oy=@F#Q{XruZu@qt9PF_$$Sn_
z7YIe0vF|X{@k#<upbInMhN0zfOeaY7w)i7V31Xw9glg8=`Z(pdB5A%s@3eXiWF}f1
zvE;cF0qn%|FHnTA31f?gzyxP)@{A7FmaOCt1^FA30zDdrVsv3Drz)$vr|%D#+84CI
zM9}}eYK|@q6x2wX79D>a>_!F3+y~swn_zmQB}mPlh^>DiHagTI*5EBDnq;Z(SRpMG
z$ywdFN`q=>s@G`PNYwcwK?O(u6p(@|U45o|HRKU@ksd=Z!Tb$cMQ&$iKvi|%g%NSJ
zfvvG(=FfQj0iL=r1UcR9dC;>xvPmnw@#U#e`l-KjW84Z}GGVHW=>k<@fv|4@zAX0Z
z&KqItpa5ncaR$4ToN1EHb?cEAdoc8|xNzycByQ1>B-&8jCY+Q6y$<nI=zT!hvj?$>
zVU(d;5shd~UJ+MoVs-yLN6D|$<>~rL_m16{;u^&xH~FH8LkVE+GMai1Ovg6!uQ*^j
z|Il}0lF(CgU!}wCrfcnWhg6r|!1($%dF3LP15NBKJ>1h1*WkXsxr~0_s<W2bn)y?j
z?fdE1FTH;R|BKj2g6Z!JjGu%xcu1&Ta4!kAKYkQv8=!(>4TdWEq}P>SL)r%#K!)mK
zfWss(EQuG|KWC0U$~kT_!KXUhF!4U}Lw5g&QOJGQ*Ou*Gg&7e{ht&CCHzyX<pNG?v
zr7Y$iwuyRifR-Rd_1Vq+I7#Fqu5>=p3GTprXX}@KKDR+UnOJC|^kC1iJ6GTG9ujNW
zBHu$4DFMr3IA*Q1Qw{Y~ns2e*tF`@`=l0a*cRf>7GctB3&OOZe@bsMc^}n}#<3s%L
zO1HO+&gmfdRcYv+?F^-MhA-Y!j>sXcjHX1cwvuYtM`u$|PBh<iex@5PFlN`VZT|9*
zlb}Eyp;bWf)V9+t6oTNP6#IyD${h`*Jli+xYE4Q+#*v(Pf0^-ApO5!mMl5S6-pw?U
z-jjFC5Ut4dU|!2c9i-*|h&YqfJA26f$QLha{I|}{r1v;@j8`f0pfff9EQ~8wON&2R
zZ#qaxEE!0DvCdkiuj!#d52hcnwIV^knapwsNN%)~K-XR^pylZVLbVM%;o5}fCV(<g
z3}Z%kD3-2~3&Fc#FEPLI$06@IfCp;X2b7JtMFODU8vu^|*MjVS`wzkZ*(yeoHa2Hs
zC7;2kavLxsAm+2w&k4BHR~;>mh%@;nZoqN51iG2b!B-c6GR7MtiJ3|cOogiNKvvAt
zjx!<k7CTNg7^E!L5Db<oh%w_=t<!XjvB@WED%o0WNoc4CKFb#2unCjK8$SSAfOla?
z{Xnz@Jv@xt#tXr$0dffp4SR$_aE-DtT^f)D=(m9FYP~mnBYK~1vu*05?U5$Ddpxx8
zZ`r$5`4D}Bv}*T*$_n=SoA8Sh1xJHwR1)O%%@H1}z1^@>Bv3;=<7xmV82oxy?i!tN
z?kC@GfPQuw?a=^VUDrp(!TD$~$XEx=c)Sc;3?9YwDp&*x2ccjxHqt}y+B=gn8)2nr
zY~0<>aU+GNXscQxE>Lp9q5=N=g<LwU>ytg$p_6i7P1#TO=}vn6<nz+pD9DpjJrgx}
zXsWDm&e_-75+@lN<zv2>-~jP2!Rz1=Xjx_!`Hh}2dFXNTZoTagUBJ8b6lDBfoVaLr
z6twp^I%_zvY)Nli7Bt--s?v(-v||NNz?M3LsIgb{5A<=3bvn4+ONj%0?j?V0giMsY
zIV&tCzMhXBOENFLynFFjNhNNP4*zmorXq(4h~2x_uBLY9%b+p(O&$7tyac>-Ab))^
zGev5;Z+4$&Nz7b$OrIa?9862NeKZ!Q!zdNExDvVHCQa^jv3JWd61_Y>qjFkK^RI%X
zhqtW<-Q`t8y)$Gr6mc4@ROXrc=@KcC<88Tm$jR^~p=}czk9u0${PM@LB@!RK0AySU
zPc$T$A<pauLmL<MHHb&KhLqijmH3(mblqSEpZ~UZ;*9V{&!M%+w3zZ>O4|LCv|Bec
z18R!f^CZ9AMYH*I`K~`Cw#LNDmOMCOeC^4u@7w(k5ROn#O`>)<b(@L?ckJv8Mw=Od
zb)wl|T_Qfs*TVN8XNL%8k`^br4aMoRv*!)>U)dQG`>SVy2746-D(cxgyMahV3<SM5
z6oG{pV&G@s+-G@&#cB+DFK$lum(w*%;(3AZfKpxMEtob^(gJ#QqMQrvXoQeW7g+{{
zqDq~>UUAcq70V2n3oqN`#-D{lgd`SXS|@PS8DjH9>5i(vXO1Ju&vV+NrA@ZWJvkGK
z{0!qK+yf#VJFaGDz3!v}?t@CL;?+vG`fXE(GYEH-`TTTPA%;QH)}9FdlV=<d*Je(6
zM$k?>*jm-uTir<?x0ni%rzLH?2E@CobFcbX2}Z<aw~H96C#Eq#N)0o_$>>`D{FCor
zo43u{u~j#$K!`u`9y4OW+gbMg)&jAyH`^M4YFj%~^tM+tx?>Je-_dIBO(JGFPsI)`
zaLakWgf!@G_+kTrafWvZgbJWtkMT0t{z1fGfa|WP<AF))Yw#f2HR$5ndh84e4uo8j
zv-IZwp@QpQm0nwZ{vVG$5ZW!IY}IdCkmRgGj!oR#*yE&Mb-uwJ^c9i0(fY-HPLkd{
zE12tcM2W*!$|zs*m~=Q<OW5nV<d@2HS6kP;uqSDs+SS$PD=@8>Ti|v)9r!-H{9(0m
zm7Yg(ah~sfRj@1;q2)3nKjgIHRF|_rm6sQ83)x5RKz(05UALq^$pY)Cn8K7K*C1+<
zf~d3a-MpnV-j(mP8T>m#Q`vP>evyvdNb<$Jz$*`aFB|3a@_Dk~8<~Ya#`}mC2{blK
zS%dbOnpyi<I+cG(xSwv+wEInz3McUoL9RC~DWZVuOv%62a5BSv`0c8eaK&gK?9n%z
zMO2}-ghHas>jGlu#r$lB{^2`PmnOVeXoU~)QTDn+2R%Ic-}Yn9p~Vc7z7K1AbT6rY
zXG<j#u&q3Z+E#)V=t&cn_MO|MPZ2eJ1gYSo))l{FD7Qis+35lS90inQO=Su_*sWJ-
zrRT)aHz1uE{4gaHlIomD;<8DY346>l6s!Q<Ly%MV%fB#8YPk0C%IM|i`0H{iU->Y(
z3^2gfwKImqH~|(28X&4kUkkm~cvm0_-T~db79HqnlJ%I#)dcnx+m8*y?nH@EQ<n+U
z=Z1P1&yg8cPqI(>C#|0Mpue=mH-dyqQ3VZkt$9PRMKWG9YD<i{_W(f^R4nR)&U-^}
z9xD|1Ca|7`PSZx9uofV$YKL*}SHcIX2}8lKTdZJP`!!usge|Ne%3ik(hEJDxknZ1~
zorC>DuK#;M!0aqndlvLHlvM_O4Uhe2iR8bYkf^b-at&|{ps4{64*<sFMuiLX2nlTy
zfiCs)KB1+V_GHf&9=;j^O=|wd_G)>DUN(<Jtm~}3@WUUY5u@}lpFibOc!uk$6<tO}
zXFj~lC=<PoPG~_iPA>Fj+g;0)HC&2q)ygvy9IQ<6>Y5IHsGf&Ek92|R;q+^MB7kO`
zMM@!te)1KHa9@uZfJMn727vN^e9!vXbP(dd!pm}vtAEjS^gr)n*10714zxXS!T296
z&2&uwEtbQmk(>(FSHUz>(66{pBH2kBW>j!v)wZ;)Ae*h#^R8d9vc%=F%l4;%F(y)q
zajFb2bSG^4_w9lDO|cs`AlQk{4O5}a2j4Y2SXK^jg}y9xRV<mDsPe)l(?4%D<g6&`
z2-V;+en4N9d9TyrdD|b=FMjX~X18fF_yTZ5Ld<QEr~0bOk2j>@nSPG4RLLhO1&3<&
z_qMJU%EB96O84u!iXL5Jr?BEduC<1o2Kxpi)V-^essTTgfs*JkpFOs1(#OnuyuazC
zaO93U$d&Iv4F6ar(Tj{1zWN*N2|Zk&XLfxwo<1;Og7imQ0LQ>O&+XcO)sRnoj<5?D
z;wOOG3GX4lS*zcVdqW}Zvxu31Y2@m4LOnqn-N=0aHc~?h0TiyX5o8baJnCORXvP$U
z*Lgk}*Q1uCB<8>W^qwMg!XZi3Pq9UsKfyWt&s~cBX6R@2Ece2|R^OXSSXELV=u)Nk
z<dbtsS8Y#9l$WPHBSbAd>$|=JH7f#T|4<vSEUp1(GQT&qc#2&z3NGt@rZBq|-^ldf
zh%s@9ICTSxI%O{Lt!7!dbK-nW)SgD{jlvCF&l@sz^O<kapQa8l^Kxn33-;foU}iZx
zP?M9Z!>eSA&>nja8FIDB=R@aWI(g=+8(E%7u$BASnRQZX2R7ccCeepNMv4vx2E2BT
z06flG5Zo_hxP^<Koa>M@>8)0MZ|{1dr&*0L_e9|6L07p0!Z^h^3yPP1LO8h-#^i6p
z-YcZe6uRWT*=?+Sm>er7_kIe8KNjLfKS?QHhS5YQxa6BbUfTK6gz3h<m(lR~T;4of
zPJ^REJ`s?V64D-!DAwZPE!t`#w%<?xebROroAi@e0-w9G0yUCG&EbuL+POyQ`(kwt
zeyTh<SE=E^QQXjKf)@dKzf4KeRo9Mp<9L%)^PBtPS4D+jL_vXdT!P*;P-xcJl8)Tv
zHjwhs;FWx9X$j$+@tcpFxYC(%0bT)KgK6SaN~n&iKM~Q`#u)oUq4!UO@>o=e>H=&x
zG^QYc7m$qd)$LHZ_C0PaapBJupXmyip^k`n{H^uRUk`4g?LuZekCFfCwd>lrhA!kH
zsy4CWi=^W4#!lfRj?1&7E25{zT+5b37q+X-u1VvR`?ci*F2=VGlq{z5&zDgopF`$5
z(0zAdC5Z19qR%)YQEC%+AlagUaD6Ocmk8Mr=ah4oJ@z%;tSa=%;|ldX5h}0-ll_?N
zLAy%wB4k1TLZFB{52ksYYQu5-k@3cB{gwuM%EgrS9tl$VJ0~OimKPs8g<ZT+*I!bF
zi^L2Lo0XiP&08<Zg(+PhQ{{G4-IZ4C0|<R+8#yHQg`S&oq)vFGso6HS%&*QGO0z3*
z$v^rR-#Y0bn)5zcHilRVvxk53C9|Fe-tp;hv^7F?rVvLwNNv{`ViU@BWGacAp76f?
zont%p?pHWt!0{57U!0ZCv0;ws-K5<CYw`TSPtTw996v1^etd682Ra4i&V1npYRNV-
zDAH0P`7i74rVR(}l%&d=q2<OLEQ0-XrhAhQr41W9^%cv-vxxmP^r8KCd%s_sCwv&>
zX*8(SCQ1qz9Iji+BYo%&Sw+5b1W{I}MV*lR|F<{^y?uVWkacr9U;2NjmX7o@u*{1a
zys|yKD5*6`C@2Ipl-ud5LZtI7Mp5!{R~j5Z!_Eb?(C>7Ksnso=;3k96+2-@GRT*9%
z)1p9RAE-~7DG^3@J4=`V;Ge}pbly%r(Af9(G|P_Y27PAU7bQ#0tb@+d)iGzdC-L}P
zCn|b;n6lzrUJ@~r@IzeGR8#+vuo=1+-400)pp>bhmwI&;T}rBalp2rhBwD?kHrUpD
zYRQeH8bQO<W3~qhHv(8D?sj58b+2-p>;CpB|4U8n_3SOkfOzV%-u7unKaI??BJL0e
zzT4}dTwES4!CP+F-l{c@RJDY*Ll5>Ukz_snF*`DIV4trc)e!GdR<tUVA#DXm84Ej%
zb3UYW*7_j%{AQERY$+?<)ltV=N5%Ng5O=NKrumlU`eN^}rN_e?s*I!!5rCd8z}SUq
zI4FkoK+J3W8pQAic0Yy~h+)XA2b%IA7`z2*MvmpixMD^~Y|~#v3LJ=x2vBwEFOd-q
zHn=&lz8cDq<_1ut_Q-^lM3&J`)fu~=-eY`g7JCEHi`}=*)2hX9AJ8+*8x*o^vv_K%
zUf8rMZsWbS_0+;~U29|=CJMienVA)Z6S%iqsr&QsVH5fdgQf2DI!;@{Cay=7eAiT7
zFg~d|;{&V4g5(|KFZ{{pa?QP{VIzelv?mg7xZoKGk_0Ex1*vy%l;Eaai6>STe;jAl
zK3*|brRJIs<PjUZn4vdHPY%qiE^B?0b$PRU)p-o*2obTe?`hVb_2rm%ybmRRGD-b<
zW%^D9lFa}9Is_(1pd=+`TFd^tkXji&+s8%JuN;a|m6y3LKWRGiwvwBWzlp6u@1y}T
zQ_p3Bsb@tVsUZG!3GY>}F|;9Uc@8~)brGo+7~YhAl$XIZgV&M5_O*NpJkznUkn*Kj
zt03r7C%@33uzmKoMb_60W)h;u<G%KDje?s!r4r|ZJ@;g8pUXORwm2pkX2;85ihf3&
z#xn!5KzEB`!*H{R3oW9GKVsZbwfCo6Rvv=%Xt;XEbh2GER>gF@j81n*Lf43VB}2;D
zSUOqxpqZhg>sgm+g>LA6&51q+Od#;uMXE*k5?6=3=<VTr`|(v{%iv;#B?~2DIMhv&
zd(Si>mzH!-8PgOp8cJOD95{z|bqLYjGD>{UwPj`leE4)+BDG$oEj;b9sr}#Qf~K4J
zM9%le-b6;GpQ3%LqHU`$Pd`H2)96-J_Ct%_7`pNyrZwY{YF30+Gx<n}V|XKRl#m|-
z!6$b)zwvugs|%WnlAHt9mp8G+gdO@St|SSRm`B04)+Fj<@uff3<i7bZPhPd;Ix#Ii
zaBomw4-3EBe)82FQ{A^ddnzWOtq+gkS~Q+uB-SmSIvxwRD_1{}=KXxt<2&V2!~%TS
z@dLq?0T-J?AE5FGk=nT>Nq>Ef`e9qN^=YH|<cK^^)jd`_E4J>8RcV~H8v(mse1-{s
zKIalBaI?_lbf&9vKj!3mF$)%&evBGZHQ~9}f$383-{BE_x8agvnB$ME$}dwgGj9Kj
zy>E|)s^9(}QHp9xBveyTZb^kMlF>zyq#Ki@sia(zP`QLHg_281N@YZn#N=Mcb_tav
z*U2T9q1-d$GKQJi{nm7z=Q)+m`F_vkcfRNKI_D41qdjKt&;ESYXRY^I>%G>e7i~yu
zSG|lawLRZJ^y!O<QdxX^*8`H+4ma@t=!mt_!!1hJ{VF-)#D2vps=}TKb(6Q4V+G@Y
zyY}k1`6|0y<YTd{Oj>=^5JwGpZO5qKITN8%Qo}fR_s@~1Yxyl-AeAH872K>f9}uJm
znTbs(ob1PcsKB;|XYmlwg<YHTRDZ0i{ORLoj`m~oO`!80s_v4j2n@)>%2*3zjzfmA
z*!TlItU2A0H<TT09ev~i^LiC~X1J<y)zAXf@i~3Sz)gr04Wn~x>oCdps@yHkGG#L<
zqC2~8H5F{zF16@H-Ui6?^|4(+Uto!#afs|s9w#iW6;y{FNF>LB5!*7%{fb-t#%h=H
zDu<kdPRiY*YRyR7Jt+EpPk~Ujdlnm<hUo(g1L(y;;Cw<$a%G_OyRDNaI!?s^*Z--r
zF{G^SBj7r}B5)mZAxRyd>p8#{zKA_NQ|gAWLDkuKh{n55Wp8>w-jvXtCy|zwoq2}&
z>TzSZ-{$pHGinf5gL9HS=jAxh&o4=R;||4)X*b242hS&1c<q{hm-HdL*YZPv%JwXu
zjO_XY<L-V7B1o5`%*&3Cd@`YZ(fds6hfT2<fz$?V8ak}R<x<}h8;h{bm?VVL=OA6i
zV`JnSOd}4@D54|yGj%o~Stl|-Qy*LBDeW!}TBJB^1AB9wqDs;sx$1JwZ6RsX0|Fwn
zkaLC}7uyIQwk@qE2649^VrI|K)B;MQDiG-;K2cJf1Bp*P<qX^I++Nez`}D?cqlIUY
z)vazJ#hxjoDn^O!CF&-V$Xx14=lE97i)}4aJ{@QhcQB6mq~2itV$R_mA5~sd$S}xI
z^8)cupJkO=8-=p;Up>zzSl^o6q<&ij`8erC0B(vf&crhzv0HP&ogV4hzBO}G2CFKT
zyu8%&R)=~s_Z;WA`*Oy!(8i*NWU=NII&<60vV`2;wugN2FU%`>C_C+v&x0CCd$w@T
zt$@>J;d|4Yto2e;Iia<@(z@CX;_STj+%@c@;@9XKjTiES=bCgFI2xUbCNA?hbdh`;
zT2vvn_-hN-i8YuWR`p9CTdj3x`U4-N;TE@Jyk7|)=U%xy)lk+@?Y5kwf!h2~qrLjn
zkhd;$C1zm>X3q_Nt2Qw2sCZk%z8uWjZqSU!8YUWRP2<?WN=LqoJn4VxIHO~)w#pYd
z2X$Q|BlX9Zq((n^^!C}#*j%(f{o3y86|y-Qcc%m$xU0EtW6_FD5?m%J)<u|J8jMMO
z^oT8#&dm&2Ro0j_pwjUb=eF!kXA{n2hJ$6U-CorQ@#hie(2rRiuJeiX5jXp=Rl%BH
zo<xpWQCdBjq`U00HbN0{Mc__x<m8OLx2rmRR_!A8Kd~f_6uXDF5*j0Pa}GSolkLVI
zU5oqp;qw9g5vyARd$4XK&f{tu;i|SEvuTO_G~1imAtgH<UI{%WHe7w$%YH=7EIM&O
z>$t1MQdN0uC+~v5OR2-Q_><F0oH?opcQQqmoyMBWi2E|em7+FvpLU&XzND#`qEq%M
zJJ{(N?VYC_FECHd>H@_uE1kAv{^zPzWs8p|XW!*ar}ch3-rMj*bKzCwNz<&9`b~1B
zTKEwC()PoiYL^*myAI{%1!D^qF0^ioGBRC1xX!h>k>O0f2wS^nd|O<!jkD&Ol+$%t
znL!pe<x4t_*35S>%}AjyIP8I#*J$M2R9QMaxKqD(C}okSpnoa#m5tf$!9HY#$)0_o
zzO?H1m7oGTR3Hv$-VSj<A4I2t$n`!2-Q<w*snpI+ejM<Rey%)0D{!W#rNYL8ZPv8}
z-PEc&c7YEKbAe27i^6dp(cbiZfhww)ICAnQ>eWLk^mu3?$7mZABV#gU+*KmuMy;KF
zEs5^O-=EGXmp_#Glq1)?GsHk9O)%h6_{L)QdU7=7X~Y$+7e+6mq@433*Cp@qFx^!>
zCNktWT|?=^qpBy#_rT*WXuXThxb`-oEyaczUe|AHn-tK(J~99!dtV9K&J*5InpNRV
zNJY3x0}`d}3!Dxa?&|p{b<}s>POB&Fldq|XZSPyDoxw7e826R&UAh0^<IU1Z87GH#
z2^QtX&p4>jy>~R`OL8M^K!lsldwx%bKE?myMaz`+QXQ5YTKBt@C)RFL?r2k!%=IiS
zZQ?p^nut6WPS9ZAXAaPJ62(1bTiE_DXUCV!ZKgR36%z!m^qD2O=34t-K9l$Q#c^7z
zi?+&V^@LAlGh5I#PqOQ6>f6CN_uP%B|E**x{@)Y6{^O^BzVO5cqf#nKvMHB}BNBwR
z%kH24Y-%j-Y?rV^hqy_NgM?yB{cEb8MWSdBb@P{iCi@q6$RW#z44l*>=A^hTJ=Ry6
zaALhYQ$s@BL|*MEgrFDw-X|^@xJGJBBX3p8K1NjBireRwoU&fLXw|;P>$bOI9?!W!
zRyV&Lr&JxkRMYNZc9K*xn@SIUiJ#w~dz9Yq*uFpO;%LmyO(Gvkw&9XR{FNTp-e^((
z*mBz?z;H)uXQI6P#~k!!#>op8;@_<}wL&iQwhMmFjiZ!vi|Q)4%ND9YR`cU1CR7H7
zfwW#%p(eCGOk~JE{dnbb2Rb75@#T^1+T_oH*@+dhid@lSPrG7nJZSE_U2`KN>=~4#
z$bDN4t8VGc`_Vn;8{UPhhPa-fZ>QK~(hmDgpGv&)q(|{#b+*zR2b(?Ttws%<;aCY8
z-F(Twrn+1`)*YFSRpo>a{c{`_#yW1E=P5**+=^Vm)YuNrPDpFHZhH5C?BD~-t?tQA
zl||EoN~I)T?lIq2O1n|3Z<v|s?5ua6w7z851KVBcciYn(?WlSeVjnW)1GUWBMT0Y3
z;t%B19)G9Tu*`ZAoPGG9P4DTX=aCA@*6;Q@hvlrZsk^7YzC5$V1jI`J7C%D0|NWsu
z2j9qNhTjiyTfNGJuzCF>tNW|s?e=Jtmlt;oI5{g<sQWGdQhYl&K|YL>?qPp`!MZ;;
z@&4iR_~y-yVLG4Jl8d)%MCk4f+tuB(-$viy_QnfQcbI}e;}6!BZ?w+LTZKwqi%U50
zCOX*RbaLAnQHy|9hr^b-66X?kJ$T-;0fi>eE0SEZGah`Bug!TH<F71x_vf=sly?-F
z)~QGL#<duoko$Cbb-HV5a+R8C`o6uk`}d!q4@g=#cD}@x=3eYi9<hDicKv8bXGpl;
zeWBJmkD&WVTvO7Q+fFKRg~yj)&)L?lHGlPWSBYKz@p}zFrrxv8e9-vp^NI5-I?`6X
zmJfxhIo(aSNU`o3?D%%Pk7f(2<?@%!5i*up5l&`r^FkL{zS}Ts(}F<Pa)~%;5YBZQ
z)XyGuFjm-aZ1uXt;6(6db{KO*F(Pqph)$4r8>nC&vSq5`bVc5WnwyK9p@016T$aB=
zqKUCw=i2kd{>A%~_8Qx~e!j6$<O@W&t}fK5%3bW*YDhG`xj>BfGBiKl`-0cU%~7rM
z7mgHF>T0I?rkt0Uue-x8+tH?{VT08uBy~(qEX`T4`76#KJBYLMd1%#V*&8<{tv(v1
zDGHGwG%G4gC-7!KQKv9Op^Isfy4E7qK_PZBRWED2)8%Nf>KYr(jO&sES!owEc&`O^
zW{IgM>vXMMFF)ytsf!=E`pDdd^KnkLQ|0>nPwKwzIrBiIG$tZFe86M7aeR5Xvy+>>
zgi90@8MYtD4P86W()Oy<_TfdDGmcd1DjL4{5O1=VeXr18Az@Ld)WfXslNTG-&-!Gl
zKOO%_HUu1X#w{q0x#Zl!o&$(W;?O4vhlHhR>OR(`ZFbU<<C%$%Z`kc+*%lE*PJ}!t
z@mM>@zaqx}W@Bxb;`$Alr`XPiYur_n53v38&qPGJ11r8$=Em^4MXkeHv}(=KehTxB
zY5JN>yZElRO;V@&KfDfpGPpyyRgJu?()`w`k{9!yRo&5NZQMEKLO@~Ren#z~{aI-#
zC><~15>f2z3mr!q;@%}Vyj%F$<VFC?{AKHf=_2_t{vCIl?sa^rSRH4&Yu7$!`$Wi=
zKJen}w1gv37feIx4cmMVy!&)^sp<AFQ#+*n{ioc^*f>;3Om8VcgfIIylEe098jV>z
z5;*(7%^qnM7<Mo}8GzchTy0*%D7oKexUJM6BcmpEmHyInwFmc&%%4<0l^Q3#879Te
zZx@g5ejL;s|H8;WO=0g@30KDq+r#7TFuPQB#w7pW&g;!ar@FKkdkWMv9$@&!jN7#@
z4tV9C6uxoW{FOZA8!^fE^mP+->thdU#P8a1wxiliBUUdL%6WFVp9hGaig1R60sB54
zC8SeImBU5luO)jCnhwMgBcrJ^V{#T+1Br!_%Bk<smVLW0cs7wMLjHUflVwr^w8%@!
z==W@fOcWerK0Al+r+i5ilVnVK4y+}`Z@Ne8aYp>!Lqm3X1G{7Vm3G3gqyHH6|MGYI
z*Z-c&{J)&4UrjCk>pyfZ^RI6CpL7lX_n)BkpEON>>0R;vSkvFXbld-w>-fLF(aV3z
z6#cdL#Q$T(BY*AI{|TSr|9)c1f5P<qPw$BTCwSuD48L+BW1){VJ$Sy0bCKqy-1FIa
zvDPP*x9WsgJiBdi%;yp=e^tpQsXm+Tf;T&q6OyD?JZRswA<I7ZlLEDt0*!Yrqr-D)
z!~q_kov?@BFNhHV{en7qK$C<Jkj;4T$Xc0tkIpWXDWZma3dV#y_w4~z7o&(U4e3%z
zMp`)b*fuDHwP;i2O@{spUvWU|epQ1cJZml+z_Wd%(7{qD!X+v``d>YdSkq*0IqJvV
z9MCcb;hBqs8#Sb!3hv6%Lh`t%EoBsIgaACSxP0fa4S<AZ=Y#?A3>nlQ^qgLs$|=GY
zZ?os7K(DaiH#W*6CnpZ8XuA7SaP>2R!-e#tW72<mJ%}aGid~BVVWU;=lZM22+Qf+<
zw)tv{LD0zT5b$1DE!;r8@jHQic|ZrbvggiM+;W5=I~eKDGyTQTewr(uVF`=ug1l4!
za?DL4d-j;2uICc~+&_=(=f%MuwqH=qCDO%De8rU!xKp_gV^9-h!muXJ)jo$85zU1E
zuHS#x?`M(vg_!?$|NX8Rex9uV?mtlL6SUMf^YCB&`Ct3@U;D?$OaCkUl1N7ywzTQ_
z0nM3STBI%YEc<!J^Xiz~6S-$yg@V;9uTQt0*LbD$RHxSXna}e#TrJwi%GjHg&~egT
z_?G4HLV2+Wm8!}Xr_LUQm|WTR{|RdTPoMv@VrVZUTcOr9oC+k{4^D<aX1LY+F0s-R
zr~t1IGK_eB>McCQpzJe9iQi-HJ8mMcCxRXEIk;I<AqGW=S)2cXFxLO{hX2&hQAHFw
z8Yn~mFE4oCsymT9Q|cRgC;`|}7xoo*WF2w%;paS30NO-(OkBexW4eGE#f<_Wfx*3u
z9fIJn*FW+@{3k{1{<~QJlEr%8(G}y5ITJ4z{v+c3-^KcuELP>e)nX~X@zi9un6RxG
z<Wl0S;d%5sdl_}tkVlPjJqPDT)(M9Q`Y7!Pja@X$p=q~p;vRAtjjMf$6$j3(un)?Z
zIRIq*F6agE-m?ZB#xb%mfseq_FvlUg(@BFPUvc<oUINl30Not~bHH%HNms*!3{@UZ
z3o_we&ImU`hft#;!F_=gbrEgI<2V;HI93^sMjwN&5gx+*;C$=gMUmD8z*<}SUU)=Q
z7f~fM#_<ginAbueSLAO%F@so)u!*x5oMyqo7Phc67=p6`yv>#Wx}l;LNNW^19TLyL
zM;o{--4g7%q`{hX(Dz=FLHxGJvwL-C`>3?um@D>L@niOucMbs#It2GUdhNP6@jdKH
z_Im+cLLfBW)@#>mhvqb-A>H<1_VTs;Yuiw1TWmqf``neRhQs&I+0M~FdG^o)v2>dQ
z*Pc$x@5JpE9?tn&CZt^QB7`2EwxqXQ)v}IuInUY5C^WN)^htV>wBX+RGhuI1QudyH
zB`h3piCi_nABv~?ZUJ5RFMn+O!Scr^F~)&9qFKCzyv3eS?IW5?Y$yAfxOw!m5)(zG
zNPGSDEoRS?3sYJWx<p1{y<EU~YH7u<m(tS&DOiWvQK5fZMo9uh9j<D6h8>HN@qJ_9
z^sq=>H?U}j401>Pc}YQl#S6~_42D4tr!e-kG}_Y9zTn3$OUl|ZDGyrYuP%NO+S;?b
zTyfv&%E|Sg4CkulcCPOy-$s9ylxTd<Tz~8^`m+$~O_XWDai5qx4c=wMN>$pknv7G?
zR&-%Cys0*!?9R=w>XUVeu0NfxC@TA^etqX>YAPy?Q;228G9k5yxue$nlUF04<*x<s
znu4_Fvdy+J`b)yvUTo^Odyt*++_hd}zjt4R!h@lDT^Hi7AD)}j8XTxWz5-1%-RHFP
z9F|<$!(13_@#v78h{@8MpCv*Hr!3#>?IIKwG}6PLnR3Y>;<vT+<yuqO=Sw#;iW;rm
zd}^N<F1=Ujczs7@!m$<k@`85-4xzt(AR0lPuuil+t;jb~q#H?FEnJWXqIk36;eA_M
zWxbPU=gSQ~Iko>zsz5>eqW64JBm}zZm6Bz8TBc*7F1_?+m*(%YIV@diKO%Gd+1~f*
zbx*af%vapIKU_-SVyPQ$#7%k3ZKCQR{DX`3tJeUU+0TjyhuycLe(Ig5Iwoo&FXE$v
z|FWUd`kc9Q%2*U895ZOfxMap0cxkp#yKHxLM#9;y>RtZZV^+rHig_2BF5Qr|-Syq7
zAO*nzx9`y&_u;q7(IjgkOYqWH+>X<>BPS++$+5$$zv3J{A8{Lj2Pba8-J`t{_%DNV
z#?JiAfcabh{ZGmk{gbdro(nG->8Q&CYx5!L3DPYWKD^PL$${YN>m+wDH7RBgjIGjF
z5M=wu_>WUqifju&+W|;=i?_B6d%TjGzTkvw)o1aLwv+p_LUoJoPuI2-zNAA~zK2Xx
z<!Z*VfK+{7yB9k3I8(Te!R&K-efxkB?Lot)4*(+?hsf?HjR4te<|Cdz(q)tl&5iDX
zDVraQE!e{m2a`oP_Z4?(Lj|^8hw!Rag69YU+Q-CWa1zBAlyMTs)%<=ye)~O(iNo?A
zk=A!ZpiXuR4{GQlhfqdO@P~LHPgA*4U~~B`lxhhnM!adGWVRYGE81@ea07oiOmrdI
z3bF0f&H_q3g~XT~UpQllxzfh-qN6!thsqpYL|b`Vl%FUOjJhE(MkH5LxwFkM!}wx^
zrQU>eOT;0ojCq>yA`)mvgFERf&ce793pu!3xNoC4sTI!^H(>Sh9$+}EiiG0fP!iu6
zYq$6rraV7z_)YV9v0ay+w=9|45p+8m-_oNzCJk?w=-JRRysi;xO|5`RQra+yBkFF#
z%qpp<zf?#N^IY7lf}x2XY5jBL^hL75&Mnu!958vFvEW4=g83d@L><jQx#DK5WHyPT
z@2<mkZKaBv)pxnge8{T1p5c@JB;@j50q4!7VKtFB?B*kChb_kM{EWPBw}TSPG9tE?
zT%(tdm*@o;L}(>QyM!KfNVJVyNV(v=<dM!$#iR{Sjq|0Bxd=}3+ISwlOuR-I+|LCz
z=h1t>PTg^w`ehK+J{QbhI@)JPwHa;r9N(sVTUA5q)AQTDap&(pxP9$;ewd(K)MOm8
zSbc&hbp8cVcta~h#*{o~Km)gTz%GqjMH_V`-}VGq@V3TYMF}$AQQL!OxR}seNR0k_
zC9#&uHfwjuK2HyPc-24s^2(XftpN*t(K%>aPfKPNZ|0g7_VP4-8L$A)5nxegABfRp
zMP72Q2eZ9xz+20Ro_OJ&>|t7Zqs%ktVX&ET=#ZSFf@Ofjo6yzkC3u?vptw^xw%lFJ
z;DU<!;F1<GEy44dnyf$}yq#J}n37tPo{Z&u38M1sSJY0?pXXPHKm&vqh!oYLcJ|}*
z?NEm4NjTW0>xZSUhNTC5SEh@|k{KiRjb@mij6HWQ<T?1KqyGFF<1i_cp?P<hC*ve9
zz!v!SX`~?y^7EFIftO?nkj?E{&WT(FUebz)VyK1v5_RsHf=avj#@Jl32Lf+z-k0)y
z4gHVje@1nokLaIw4Iot5H4I_ytRZY09$?8xZyeI)L>pEiui*;vLNQ_N?WksPOW_P@
zb0x!biw)A2*3e|?CKa#xoMth(Vpqm+I1brJWE_HqdD>8Km7ECLp@4izgO}m%{_X44
zlA0S^ih0uJCWh0N8EjclQ^%R>7&r83b>~vO!{I};A5{v%b@U>JJXRk6G(ibK4()rL
z!WX3InPhAlh|Ds(c;v&${a<mF*U0fB+*;3Ca=LIa{(~s}V`(3gv$99O4Hc|!Ftb_J
zU?k-HZiW5+^zzO_!q<HlIozFDJA`mInz8C&;3bVP$u|-1X)j_j*uRNem2Xu|co}Gy
z1LW`uEGfX>ipI<HP-4fR=W^u32_xRz@WILFDYHEnxx~`r14n|dcxpU1D|b44x9Q{C
zlqWj|X9+BxHF>^3zC`hRVb&N2<ok81yAr77llq{R5A=44j6r*6c-OGwY-8w$_bv>U
zI)(OLT!6cn3z|DLzFn0wy@xoyZ>cK}ISgl!i*Z<MXc-s!o%S)p-$q0R3^u(j+MBbx
zYG-j%tNz7Mqe)LQ@a(1beWsIr-ZEV_cWF6nP{gWpdc;G%;#3p_$Cgob*hb)M7!{x_
zscLlip(dS5->&-Q$d#kAA+>r>k4-+0P6J0KfxQ+h(sagdl<E*ZesUj}U{aL3{Kr~Y
z&td2X*^u-+mYf1Z58W-yl+=|NA@=QKloou&&4a@qQ6cxW%#m2KmFC-_xVMV3h3^vV
z<*xZ{p6C7sKgCP?Kn$8p{@Jb&zSI59&~6)tZF@xRjrh^1pxAo7ALR*5)ZZdc_zoL?
z>^buD20?zdP=aI9zZ#_HMx+3i&a&bXF-@D=Dr$6DdTaK6w?4^%^K#E`wqMYx6e^7@
z4-np{AUNoW#@n-(WO45p`J;W-&tUO4?7)uMj-LmOr;NN#XD4DMcY=Ac>CyNPHvdj&
z=O5|}`bWU<UypXEAepUq2!n1dGl;!C0ATc&QGJ!aAnawO+^DP~==KR%rAq&iAV(s`
zpH0C;<}me25n-YwMU2g9%X>V&=7ojBk?Tz{vZ>2y3PEdLJ;_aw4bdT-+CwfSakVIX
z4H6Rp;KnPH!aWhpb|v;F!I2Fs;7J0fz&k3(A;;25%vw+(@_ZE%2k1rxG>B9zw$KR7
zbEN@1Ki`aqsp$|tBuQ}3Aw{nt=Wjo*=uBpdT7&(t9cjU)>2eIYXL!*glq)w|B)LYa
zS1c-%hDX!Ibf<gn+c_jG`)2FA%|Xw*bqHy-++k2s&>*Pe2pgpGa5fe5n~ZG!<z<}b
zblNbCRLBIjuQij*3nUT7b*;&7jgeg_L)U(64MhR~Wvv5jX_FfQ96b4rBv+ynGm?iW
z#M3nq@ahd{V#C-aI<?Q5v&P*HT3%_gDXq^m${i0_TueTE;mU{7sf8;(bQrf@0F|Ii
zrVW7R!gfYLhKu(S8P0b502<#G1K4M%f-;oAUI&xto&98vKG&8P;<<qx)+*e`q+7c$
zZdIMmyTc*w^i?>qUAxwP!OLf^Rr)i#kDvGye0UxByGm$)YU2P5jb6(0eE^74Ec+L$
z;qKQ?kzvQujjo+DTHsPQma)<4;H?U0$2X6wUg=D}qVss2V6?cv8`7_oH2V@YHFp)*
zib=d=u1s6GTH#@7wvUtLgRZ*Dg9mjo>z*v}mY8})bgO=$*Lpcn^p?8F0y1L|0VD5k
zPQxZOAk0W&8&p~WRuRvkawn&O9ab0M`B#!lGx?TYmY4pyM&*74-MCuzjek*J=3Vc6
z!k7h__T`>(d3-~;V$<N(fYO?9q4&a)%#)ZtIRNbw1%%tJ9?o41&}qW8_rmW1{}Q?P
z<O_{B(&-3KIS9=<h)s1@p?f$L99~+*J=%6H)*`VhYt`X{yY3$-)|$C+t-wWLTilsV
z5-g)1<s0Fi@FK<xuod;Vw~bz+<E#wWInQj_J=8ilUxRg@-ODlNo?~R?6N94^BZ@r*
zna5L$61u~5rz@VhUN{u3I!SNQ%aBC(Cz@`gen0L8GT*6)u?Bd0kwoFTc@cvE0ce3D
zyo?nS(&Pbw*}lxvX4|*kQnzy}p%*NEuK#60$cg7$9WwQ$T=(iNLGNnf6sVPC_A+7t
z;!9b8SY4=?!Zohkces*Xx#G*sW_`JUX|bUaCU18p<y*AOrwt1LnxOGLlt?qA)fm9U
z!f5;}JbOt5_pT(&<so~Xk}vwuW~{n(v=4;MU66K~YsiQw+}$M|&O_@@M6Qp&p1br?
z|I5^MoHuwuEmGy#KXn%(2M`&?Ee-bVetlz4xEnIro9M3Y8yBY8Kic>qNa6U<LCMRD
zwQaOl&KoX0$h`tGABKT5uos-4xqt`*Kv<N25|(;EgujxOUIK$e8PmFFfaN!kv1>Nm
zd}{X{)++X52Fhw+%i1xkSyAt+OR#m>c{xwR_D1P1I-i+-<Y{T@$C%)$)1(^1nrNVm
z82t$NR9EA&u*ruJW)BY2d_?UdVGF2yXRT5la87<=1-4P|*Q>+<t?=Ehh1h5?sG12g
zdy;np>8RJ1Kt80whU{K`Zg}!h7mK2U@|WD#KXfrDI$v0(Uzrq>o_<mPsQ9c$TXhbE
zo{65RuaToO`D9PapvVg-fm@AqElXEge@s8d#Zo3z$Jp<YmNX8VJVG85IgHS(iNmty
zen0yVBPpufIZmwQk)%knZ|2)UvA3SJ&abs7V|FIPC|jP?XBX3RKC<LC<8y;dnN)0)
z)a3GdMY)|)GE<JNTeQ$hus`w_h=x=tF@*Lz0qo3R+GEA$z^2ldi^kJe<bfD@pF&>u
zx~oH*u0$$NE;4W4FU(FfzR$#8nU1g(jEV^hxbt~8-3{6Ye8&^J8b$((y|*}C33`=w
zC}v&blGMQmLAp4Pl%FKxuc?opOc89=Unsv{nWA_wMN}HXUMktYmRZEQROh+G%$>~C
z%3B<~Evvfuy}tOWF+;Vt^Me)VtQXPjjKg_WkcL2HCl>*6>{6Q^&#ea?pD)1^{l!&r
z0k#^sI_o#Ln*7bJUI1>j25$rMC$HKVylO-6svE$o*7&|#x#vF5CWx<_q*FKofFI-5
zYK*6mZ?t3)p>KgamVXB6HY|6iN+HjQ`#tUGDA#`}ra+m;Kg?(v_Zh$4&Oh>l{FAtt
z|JG;+x<ay*P|)OX5^wKLz9#P-K8$J-TOY%`TWYTaSx!;|&%ZsI508H<B|%-$RzJ$%
zN`5$mYOV~$?@{O!+tEANR9E0T3Kt{eBUR||`Yyroxzx^hOw^BmwJ>;mq!t-or~Ipn
z3WAIiXgv8hO#Bu1Cs3>mpg3{--0z^6ij^b=^Oo>I@wX5lrUQW;!r%q+Eab}qz$Pn6
zBOLN8fF^>Nku4q1D?*2TMR4p%{>tM8pzSRw^<^dG)c7JJaTjV^iBF=<_|4GJrjLg{
z6w6g_H!tZtw%TZcAr6tRA+Z2_O+U$Z&?@B_otWr-I6DIxb^*GF{_@y-KvrjoZ90UP
zA0>FHNRbrwhB&OxT@T~zLJHx~6k@#|c9rNyWSHaGfOkls_FnC+z;g7!%@n~#)hT0>
zO%WP+L&LMlYitN96@5u|N1Yt(8Hq(HW#Xs1%Hj(}QWF+k3W}x;h9I0{SnXUIZ4Coj
zq=-A{%05==nS*=$z)QINy$B8~$y<)RUe1i*UCbcxmW861H92$gi5U_7tLVf9E>1-a
zqc1<g@gX~FHIz4)C0bMCTpoJ6hRX%k+?6;dH_Po3xmFlDll8@Z#cib&QP?Z|xDXw@
z6N6Im4HsCuc#&Efob~R8OuQc^)urhf|B&sp|5@g9-x9f-QZbq5^|lEvzTvfLLGKto
z8vhH7-DiS&lc%wBUSdMb$?^VNna78$8j3HT$jZsMUaYQrBSES6)tgXl-xoAYMwJDS
zIVOcp<jyOH5<1BC@WBv>SePQ5?&M)j87D13WR1tOIKtdR?0cN8o>k2Y*v3p+v9w<h
zcR@nIg{5_2Pj-!-ciQ+Or)-YaUa<$Uk1Suc2GEA*Ok7SJ7f^t=2Dsof8v<(u8R_a$
z9=}N~LD>qOUb&JSRrkqh>}wp&u1s{MyODO9?XmHjeq#0J8c$N*R7?w9zG~a?y?UE<
zsD%UUQ)ojL=3ff-oMEvR>g#j}jSvAcM2al2T6EY%3zq$o6v}=~Y)gfNS<ATcLRpZY
zfEKPX4mky00SsbB1P8!(<pF38Ivt3pbU<^yWxPbB>xl~_*`}x=%>4rV0||c8x1d<x
zL;PH%u7#Ce<$l4HW4H~S6VK>it?H&ygR?SX4lRFZe7Wr2#W#wl&gD~U?I+0QT3zH6
zg;9c}2J^&_nMi9kfdRDR3VskG#;C1=E4c*|7Z`*<gABH_aTh;8m+%!AI~O(Tz0M$l
z@)zQ&zu#8~Zq4upBfRxA**BS)dzP=fD!2Z;$TO+apR>nte?-)&9Wtyi-V@Y1cqaB9
z5mTQbN<WPrjkj)IT+`p5)Rq@6>#y*|e9!DHN0hv9a4t2Y9?7uhNd(UZ*R8}JQ}QBa
z9#m#WPM8^EXG2~p(dM~^%z+Me5`B$HxPb8PJ3@1%2mmHC{FQ=k4J^B3Eq6IhYY#M5
z*bxx<LTB>d6u}^axi45l>=?<DMrgG(EYy%ZodkA?VHiBN(cYIbG6E{<LD+6UZ{&Lf
zhA}d>nlcZe)!hb*<v{Ct;dvG*Fa}TTjr&nJuHfKFEF7XJuWElcbe=;<0iFnc8kO&-
zkublF;ExTg{V6I387CETg%MX053xEQ!bmSD=&m!QUtQcS+**$8YWdA`Lq1eH!0^t8
zb6?Vi`~UFrNW8$cgmFD<9m3O^?+m5Hm>~yV_w~Ulq)%8FyU|4JDW7PC2Xig44&I)z
zEC?D7Dnzhj+@a*0)FD6E`gb(r{IN0TKVC}Dw^IMLxqpYvwc!V%CfZyGME!M}d)R_b
z@TLgonk5=hUE&L*S5On0`iD-R9_F}y_J~&c0_g}GZnfKPVMZ*uexOg7AG2jpu>4Ap
z;8H3mcwYw|1)MQ92;O89lzaLGNw-oRnQ48#f#BD7r21^H`e18jX5cYjx%vHDbtLqj
ziVMW+N^nnmR#OPt>$>1<Bj_fptk1qkt*<v_U)%3LZ*k2Riy(!nPlYi`uO>a3kDCGs
ziQ{KUj9O5&G8|~PQ>hQCcE)Lx{fWSUvq14YaSC70)Ik^oGESqSiO4IZQS2GufapkU
z>UVy|;n(q=l|;gc8kM6FbmEnJ3-_Ct)SkYw=&8``&u2AwSG&<PYQ9u@ujxa!eH$%=
zzU_paQcdU%Z+&g@J{>}F>CavYWI9&6Z(|EHHf&>Gpa+t-vyo_1@_}yWw8n~=x9#Sq
z7>Lh&)zv#s=}rDDy+wn{W0PUN0(sF$*8?`+G-Q$aQO>6=4V{>wExm>3pIwTD>XToZ
zd&EO1#)^%$6C3bt=w)|uyPd7s`w_~l?wihaYqNcdi!*A|M-@Vg)c0<XE$P{j`gGAH
z?^WbFJXbBa4>%87X#fY5GQQ<exEht@rg;7bydOS5iq>Hj=&+$XANwSdv9&scw~}13
zc+AMGpk<^VOa-JMd5*N(Y^T=JLV|ElrET*Z#;$9zHoK?HZmREQF?L=osT1kC=)0+)
zpo8>qw{S-(ckVvS(7*_y;z6bGunKaSG2(_PGVCwAJ3LGdZr?b!!u+YJP)zf9^M)&z
z{ijYB(<wS5)Y`5^i~7ZIip(W=Zzf#VoA@dMe}2awUw*=ubqLpqj4c&oxNq?H9>8Cn
zDAYA^40Nk^TKU?1m6L7dS@|@3ze?M=<CmHrdhNQEr6O7=t0ro{e7#P2)_I4ppbYld
zL`lRUj_Ln<5rs&>4Dtlo-SZc2TSR6U!od*iOU0CwmW$^G#Cu4Zd2vpxueddzzmTF%
zHeOhr-066r6*t9b6WI|mV91h|EXh)0p!R%TlD2%8CxQ7n=V5o9TW&~!o!z4*-RawB
z&#c*c=J7@^{_zuSv4|C6Tv3}3Y?5gF?97Z{07biO=~P|-{1UEzSb$vb+}F+6*E$-Y
zJ;_~*Nxr5vJEm8&jv8%EbI!_&^vE4uyLOIQ?Ca&JuY5j!yt@3YzFY?_?c4OX{2*dQ
z=2q6^LGd(*3-DFQ=4{GURvilw<C>kc7Aq2xe!+Dp@luLWDe^HE^uo=X^xRG!+k6ul
zX@Itiu(zM{;kZ&6_6)=;+W-9%o;<e6ggjCL$D5h>;C|uWQ)84nkw5lV1Al)3_BZ#a
z0AmV)%dk4OHQ03$d0bz^ebq#;z>nzu0s@d@M#f<HKLK2R3jH^8EWrU7ECi9TkV|xw
z=hjUgpFaYCFSms+eDkzH?r6#3;89fQ5Z-6}A`kbgi#i0z&P{N;NkelcI_NmhqVJ74
z>C;+%GvB4Q`Tzpw6UO&BkrOp0fQ2{A2u|3D-sff*-K!Wf{VLN(d=L3LrR*ZKqycW#
z-~A)}Pijf<Zw?HoY^9hDSh45I{d-@2w7x44_7z6}2$^J(la`KpHIj8AW@WApRXDe<
z`?@3eY2uuvG%ge2bX2kosAJFyX7n|6U>`PHRRkj6(q)i*X#eK9iZQ4>fhQ<qA(0V{
zZ>9ESk%x+*b9I<r{b{uG+E-l5GW3NJduuMNnvSh1S2&mpuJ2`oLUecvxGecD(67;p
z=#8eDBNdX+^x4pp36Pb3Q+1X*X=rxXn(V`?S8<(a0}<RMhb3TBX+&UxrI>_g>GrC#
zshx(Y-tS)rHt)1u*mw5bdo>+tjsKsyi9H)%&d#itGuFQBWpfZS2AiIg&B}?#KDY&D
z_{KWf&8kc<N>#ikxopkr!s`lx<Ix;*Dwk!%>DvFMdx`J1>G(5_%Iu}^_Gyrfkb>A_
z{#7FTG4`C;dRx+&)RIE>T48_U!c_`qi_@#(5A^Xft9KdVJeYjZCcl*IH~Wf{*MJuF
zC3f)JjtA6!7J5bXM@^`+P+;FRv(VLx-3ctiP2{H0LW&6cn2}HO%uvH6<+s!Av_kFL
z<-$(imZN(S{Q{NhdO3S5MpZE&1`wMics<?3K@q<0Tg7h+_6R?XePDi|^sCu$$R!gF
zyt4Pg<+qC9TD6x?@|^4PYNiouO)S9w3UVRo&x?)9Zw--NFTVQeBJb5xH*S)+^c6QX
z!UyS^VF?*5{#|g$Tw<zj#v7~#nPwVuM%e$XduTl7*-q`xe%i(;_3i(p-&$oS8@gJ`
z^hluT_O4BWi~O6u^%<Fx^T77`2ZaT%^B;NAY`@|*hGF9pV{p&OJ9BfM@}Pf-lf{O{
zw^^De7Oqh!TI<j$bc8ktkDYcB;_+%1APXSIcXoL_9?3N9f;?|n;r9h1F#sz5_-9C=
zDV;Jt9nPC<-AduR({2=7KrB%J+dM?H|9CtXg!0F~BrtBe#ABD%qU_o7-#qqaI1C->
zOhsBY2WK=uqs!wU=03<|<j23$<1UR-1OYD}z=S{#LX6^zBv*3MfjB0Fw-jrcwvSH=
z5!$^`VH+MR@v)8N%s5w#`rr*atJLo}(PXX`@BTJL)Amm5kckbv<>qBb{9`MUYoN?S
z%s}UT26Us{^&G8EO19K|_i$~Q$c7`Dt(F%x#$hslS|mQ~5-N&RARY_$WA5yg3GSbt
zIBO~h0wsl-hyD5WA#hb-pkYVa!b@|%@X#tN%$fz6!IOQy&D;E!mfw);-@0geSlGq7
zJP@KE<sLU4#$tP0Bd6^B2X$pM*Q70;ylD~l>U;k&{GUf&kMEPe-<6%!=f_CfTYHvs
zp)4nG;hIqE7=5|(&D^x7aug@BDXhTKHuAWjDblKiwCOC|#8I4trl}TY9QD>xd(c4`
z9|?Ma#rn@nqHkZM8?-Lp*chjD@jY(cqzBRXHf4Ho(rb2HyVzpSbN9Bejkw$w4&%m2
zG*%qt3z>HoDMWIWIi(0}BRy-ms^#^!LiMu(z}erWD14c_eCD>m<1j1n-_)4u58EeQ
z0Vi-VpTBoEU^L>OEqN})9*ygW!=XFIm*hGBnN63-XVU@2OqVv%@h25Yj1swXECBVk
z#q&JO;V)|-ok!~=aV7RZVDcC`Pf79E>GXFvkjr2Qu$m;A*Ef*!?WoZPSIngJ#WnAq
zeYGA)9wHv0y_gHi8?^deuhT{oeqMC~<Eje@^Qt4W@dSu2GDs}5-&B9>pO>UL{s&bo
zj{GqBgaUH?ir*E#3&e7n29j5_mB+5UzGJQ`H4j_gJ6iU$5kV~;SZkU(J*?kkb-ZL?
znMUw=&68GA(KFz99i;Uc0>NM~8B}xFqFcPt`!>J0>P4LL3x)&r^Ri!%A#gn380hu%
z`_F_@Ak@Tm@D8gJC@~p;=042C^Aw*`!`oFy<$Hq5b72r6ThZb<?NAehE+$6&K|J_9
zfc-cA|DV;+=l=kFWPxhDyVj(RoQV|K-gzB5b?@h1r&k60kr>08sLAe|c9|SM@@hv&
z(-|v44(PqhSzz;}_%{Cva1Mgm2JQd}Hr-L>P7UVTvXwc;G%gF_bXBqvsbhTrH!7p?
zfH%Zi_;}+)8FVC&g~pG>HWk1dQ%<3bB}68*mD=x29;yep5v$km1?>dW)w0ct2zcZB
zn_K<-Y}6ag0Jw1y^l%`-2G|i%fIdAS={NGj?PGs_I3|M8&VkvXVB_i@k9)BTMBXsG
z8)(-b-wmZu*ec11aXk=FER22Fyyd)XX6;(n)ywZVGAuUe7kkd*{q}8}wKq*2KCgE_
z`??&b_dP#U<Ipepq5MqNH-0FhK>jgFi&1UIpo5%uE(F**ddRFPRgeNO+b#TgGD1cf
z1_NWO$$l`YpoOctd&eeGdq=Tp9uO@tV0^`4bmF-AMjZU}K-NMzM*o8fyK|2Z7A-$H
zJy^@;jmK2^C7FrrSG>IB({os*?BqmcoW|{yg7cBY9XJfI-VaMc?`6d>SSZ5T?r!uV
zrTX+~l}_fe$IRFBS9EpJR%}tmZ4x@WB=5}ct4(8l<S3anzUHWLmpflIy;G#AFZW1}
zl3LpAMf8Uj_S}7Z*x14q2DEyW`bDtq<W=rkdq!#DEThDOdduCkqn;#b9S!%%o-|c{
z(WM&FV~<c8<`T~vRA%pCQ=J@9@!VsH%3d1xbodOhilX<zqbsyb+m4;lxU<BFr=^E!
z<V}^8y>82vt~#BJW-Nzp%3pE4v6w8cjoh3J4_%Z<9B(IJ-U^e3vbP1w1xV}{(_e?1
z`5+Q<hCi<QQ|;wq+5n4!h;+k85S>t?F~Yx><zs|7?9=r9-ZKtX>B}uPHgT!H73GC<
z)K7YY$sxzD-MPtogo!2Y=pcx9jZF^b@=D2#=Wv^x&e>TC9%|lseKW<i<H%#}2MlGI
zpXHL>iHYoZOGzQWe7Jf4HQU2_!kBg&wY{{T^xNjpA=Ei@B}DgEYYcp7EY3dR=R7mk
zb?LiE6B+Bd*7H=Fj<?MUJ+oemGzc#|l>%UC27o26L4>I>O5=)Uo67Ujxdibq$G6xe
zd^*s9ls>o@h?tR&^WhLc7I%LfCOmL<qrKs^iW+s!wF6fhvk%;pl+QdM5Lrg;*@B76
z3eCpexLweb28(k!sO&lp`e>-p23vF_Po?*7*&A}dI>|CSWE(w2cD-PYkFb9={281}
zHavxokzI-GNS+gjwo>tYG+j90@|F4cnQQk@#@v8NK}bCa%PI~#Sr>;0IyY=fdMKnB
zeuL$`vwtYoYSbcmtw3Z2waWm5gX>pW5k#~e>@R<pa2H4P7Qrr932rOhUYoHJ+=!??
zJ#ZuJmNgB(d+z``zHJWEh$lcr7z>TCWvDyadSzD8ii=Egxvu-6ZkJcWY<X(4>i5r{
zG@5<>{=+wmYV6`NLVR0OV`XPouRF5t@i~q#;M0de>riX5$P=4cNTG^-K8RvOSvJ=l
zNJX#>XZ%JqwcQVzt`5>4LxO+4_&fV_Sb%#GDcDWyVC60Pifh{N6}SBe)k}GRUmhdO
zjiS9IaQu+&=@JZxMxI2U61cas3K5Q=9%NJ&=AqQ<#3RHpHT%oJ0i6>36}N4p2ck32
zkxeNw8O)v2Qy21DO6g5?iPZKU*hV#gOxYyt(i$>*Hi1oJ?&FvoYNGb5G545|a4vUD
zT30~>!35=e&p(u*0B=n8!Iji)1>s(cE?wW$wJBZ<_qtW2ReMe-I11`f2;DFq>0V7D
z^FyCQzlA<=(e9>gN6wtPvq+D>5!Dmu)al!M=exbQqc#gCIXhIp3s;T^OJ~#q6zd$I
z@Xk_RBDuCt*+%CaJr!Nlr6|It)hL*fiZ>8=vHhPw*0+*{Zy>7?vMak}5^Yr*iESC>
z9j}EHoz6XntwpR{)?+j&Z&AGR>XpZrZvV0lcvJmIp&1~{>GeqKR-_#udLF?2=<*0m
z2s8&*;&(M}^}9L)^#US3%^v(6HE=vGg1QX^f8e{>1Wc9ln|+J@!+7Zs091W{Z}lIZ
zOD-TcB>!gJg8#5we2?V&TUY-4U~n;P|1fUawZB^~@PB^1dqo9zF3q@V#1LuQQ*FOE
zXLh5_o!r}V4WGNLy7z#NPWSx%s~R$8%byL+&(l2q*-Mt%-H1(10@1CeQ#sP7iNirv
z=&eZX9@^^PGH9o*1VPq^?I5N73W6-@??KUo3Yvd$IrhI*g>No_6<c)<x(lCX-;e3K
z8Ak4r#AIrZWMyS-yJ;O4TBo~p>u%HASMzblBS-yb;1E2SQHG>v@x&++NbAi}5U)Lu
zf6n3<AeD+tBW#*I!mdTmqyu&z`F4E=q$3oWq(6N?;D49;-FHc&qM$bad{5A$6K?w3
zcmHWO{b59Z{jT4?=3g8tX&C%JAwPz2kmmxd!gE<A*Q2d}OOf*s`=)DqR*juydN_T}
z&BqJ&8bi69>>`UrkaZNtkp_K0ExSU5^>q!}HzN+>9huY~7J5UKtz5y4+65Pm*r@`|
zHUo}*BaMI>73yG*F*Xz+DWey2*F!k$isqE7i3fS;yYv?|{Yjm{9vyFUVncP0hA#>T
z+Ek7x-vF&N4I<_S9Cf79gh9n-J^@|bkF2C*;tMF(P;tbXdWAB}Q<^P*kV*2@DBtr%
zowsjC^%vDsr`r^w^(VhnsC;$Vd#&>9V$TaC)&&l53SQrFmxmCkIx@bhOK@yGWNXZL
zP*!n+oe1O0Lb*0*icx*Uj+$X&ePi3hz@&o)M-hv*kE^BnJGTWLhzqKh2&we4v;=c}
z-L}apdJ=j~^=eC+YQK~RQ@%JNlPt<L+W4X*36XQui)~)5xv?nR^61>Di#lf4q3I0}
z6Z8ecd;;IFO_XE(nQcnH(jK(`#ED8O&UpGXxm(XBp;Yq?tZ3eyBh~#!DD-%r_Rw`9
zre>yTlMg5e&9ZF0bh!I3roMCt^_?#V8f;mPd2CyHnX;<C_Pl4$o>i%~2dx{qw#L~x
z>&)ZFa<AnWxL$JcJ@MVbIapbCW<)erMHC%*ar(;wqR~_43g|LlT=Zmjk+}1ow49t-
zj~@%jg?TA+z`**(@gj*`i7sH;g-sCddDJf(0(8~9XPAn+3LE99ushpmg~5{D3s*Bu
zQYL4cT5E0`mK+^j9<geBp^VFd4#!7vSB%%;qP)>aBHI#eAYoU5V9ziBpj49BMEscm
z-e=-PyaDSiUr|K9LJ>l2jApp&!ifffM)`RX)vb93_skBZ-P!fj=V7KxyV#*akGI7&
z`Rq0e)d32r!=I!EcCHCjf&WQt+yQR>6wZfez5s6>gkKDEp_N;MDC<HhgP0#^Q$d%%
z5>wZIy2X$&^3pAi-l!-3W@w(u&LG*nZ$vF{Az|g7lb|+E1p^+{4tHY!R%R`j2H6?z
zBn?c0-V8iPQWYIOE5S3^Ej(lal9kC|z2InaEto|AJfby?Fk{$m%T`+h+m_ic#|_hI
z%joih7B~C01um;S(J*bDQ2QkG9NLyZJV6;(YKEXkK`pRL7Es^e*(%Q5JENC~eHLWi
z(n$37V;pvw*qXR@mS>eFv8aq(-=oXEy~a;FdbGPOM&o?CY2EDEcMrPyuKaXB@zhD-
z1v5O=kO|`k6ZCV^g8UwKtpYrFzUMry9@{>~-S8S+(kH`c`iqg0NITlzw8-~wXUjM3
z-kF$ldYeP_64drlj2H19k*$mtP_I#D6RpTIY!?bJOfu*OQ?)dN#12_EcoaA3E97J!
z3t-CP@>i~tU$<x!LI)E>f#U;rk^?<@r&$}8!@mAzS=(p{bgQ$*a7-=DI9^e=8?WY|
z<zSIoLeLg_$I4f;^WS7PEvy}l=W3|-ff3g=D@56vX^<Sv;C@634kI0d=Ttd@*2uU@
z;?N{7;x5#l?1PG7YFG`nnjOgSD~zND<|;nsUF(a?yk@!P{!xcd2X)1xjEl3i>{DvP
zGgFEt;g{q=vS)&}cw`UNcHG;lMPG3oKvLajM@D%#_ax4&F6mAm^!R|UHi5Z<;t*$Z
zQ*(!&gYCIFTeMazct;D&x72<~s#S;M3H}I6ll}-x<ERL*i#k5%0R;F^o``hs4{sG0
z;5EB1gOCcTwS_aOyJg&P!TEzR>XCL0i<Xy9_Y!z5mq35ka=B%22Ui9(uQ|Y5{aC6F
zkY8o@@gh*`wKd5fwIy8Q!sD)ctJ_vhU5<2zpCeC4PLLZ`m(q<c57>K3vZF*VcpNO$
zmkZO&-M`h~^76MO%W=5Z@^OfD`fh>4c+OsH&4({IYq+~B)eZDBW`MU`bnwYs7OShO
zTs`&Rt4CM-Mb%a<!cEbqy1*LxQTc0Y_T4rIr;a~^DCpbx-}UXYgP<1OCQfbeuLa|~
zn<9VG9pByb4<-K3y6F#=;jiBG``1kTCc+a(nm7*LvG-ON;Zh=;&Uq3Q>%z3*9D%l+
zF|NKAv$1DQYQqkujDh9M1f>L}9U<3OUDvbWnZ~~OfhhZb&H?)OY8moV|Mc7ndT@ym
zADNs5<|%M87f^lEd+V|C>7&OVYc(45$!zMh31gEUlE4?4n}Zp03Mi~qR4lX{%7u_3
zPtTH;VH0(G&KRJC*?QcyoqcwoPb{`U1I$o_DZxDoJGOq{=j-A>f0JAy0UI_7_Q&6O
zM+tTa=Nxx2JAz~G?wP|b<!HFL_0sX)$!9qm6h_Qf3TN3~GgekV@_gU(X*ec1Sc7*M
zwDn@Nqda|pGsA{5zRF6FA&kw#^U1O?MoCCZI{)<IPW(a_!4mRxt$nVo6hgO}mD?9e
zTL0V#+%$`!S(+V_^px_0F3?7A|B9%KrnP*)1JAIH$h#N|rZpH|a)P7mrH%d;78WF$
zz==7=13ZT?2vTZrXG67sIK<YHtB|g3=!<eQY!e9`DKX*+(HMGwYW5CcIr@+=m&U>I
z1`2{Fi}DuMam}dR&2t$a;Yg^=BnOG4xb!Wm>O(8HS8n?9R!3rFEq5iMAMU=D0wD~3
zpNnD|o+Aq&ugV?lM@l?kPGC%P&PC%taaed>Fwwfgw<W{bE7!K2>gV<_@P2oM<P0Zg
z%|$^=FIexMyZGv-Tlf<6k+ecIej@RDOqyTRC_)8)ZC^Wne7u@CoU93@j)Eh=tfoO?
z(fkqe;W<PAW231(2hp1pwk(-@@BDqpFnk)tg1pfL8ywdP_CF1Ijk>5|B^od~)5Nhz
zYIg)CY7V#MwN`NE!JYI^P(Ryv5r0AB{!`@sXL9#_n{PBu2F0I{-jYxBZuo@y<|(-}
z8Zqh;&YjNMWA-sk*hT8LVBlky<pD&IA$zuc#fL`Bza$XaKEg!Nm6@`b=stJ_l{PX*
z0^q=K<`)!dELbwEUiKEIDl41KgQJ02HjEL7l1x6-%{srQC;JHgG;Qu<6RQHpct<e-
zdL95NUqN78cZKzmNBfEFY#s)0y9IfD$GU|jT}vE3M(gI`Ja@wuBjnBSd`nD2eXwa<
zglQS!t>x4PeOGws_8O_1pIiDRR~yY`-1n=HNu236o4k9%?s|v+kw(r2qy8dzsta1A
zt<88xX;+=nGux(NMbfOux*oBePTTYaZd{+aTKT~*gE)lOM*UKp*;w5|Wj2Q?`4VW$
zmWkwUw`4ToP(zcRwD?V_(+fgqs+Bjql}m_iUSDyiDC2VDG#&@SK-Z{!EPoswlj$DK
zHY!3ztq<N%v3EWhcc4h!ZZvdztFEPXtM`oaH}*gS8~Cws34VD{{_@!wdd1puxrRjj
zD!Y#CoaZ;%7JEym%4Vt+K9Z{|{{{V3K@h-&FP9gHc0I9b867mjmIO~&MRp+=-L#eo
z*VEYu#|$e+CEWMewNm|%S?V7z9LhD7mN7W#B>QBC`K!q~ZJU;%S9*AouweUP|Ma?S
zz+Pk!d2*rra_iqqTn7QJFVx0!XZaaDW2ey*iPQBG)vwvmPQ6)X<+Vc6ig<QqMcs?j
z=#+0MCmg@Bk*rC@E>6aI!Y2Jm6CQreNNneq9S1UcBni`UjZe~DhHnO*j;y?WSw&%~
z;Az2u$?L{Rj2GnhS$wjs4nYFK%AMf*zL$^2H`{Ee{IP!I|J*EA{X2Eidfp<*rfz1a
z`eY!|E>Z1$ZrVP!8vPxOrrc*L?{fn)1T1`nS|@oZ$55k)wv;gq>NSL=Y)cr|Uy6ek
zKpTZwOTlVf`ii^JJAkb+2M?^Von^w#X}42r>-5sH<i%5ar+3@hvy`9ZmTa}2XCJzB
zkI!D$C1^k-hk{K@0acR3sK)Y=(cw@V$Z*)c^Hg>}z#tS5g__;Bu)`9N<6U!Sh#5M3
z(qB_|`=!;Itxrmq>$H+$Nu7FJ2{N`bzJxF`@(}4hbXEXvhTp`yigZPP#eLG`Kp`H;
z)lXMQgOec&16i73!iNaVACK*$qU>T%;OZCbMo$syhgg1WVjD%&U6x5?HOIyGZvNtu
zSLQI~gKlm@&e_UnqMCr06WR9$fZQR*2G&V-B}ea&O&uznj_<EOt9$iJX~UvRWv17J
zh<Rt<?TETfokDH4XD{yL27HrB8eb|qqw&7PHc;Q0G~S#6?xPP-8#q4U0)|>at&S+R
z0O8mnmD*o%ZvsJ!5U962HQXn&<2f5$B58$$xx@B-h6h=-_Q(9*`Fp(Ikb5+1^OxAq
z+vdq@kw({&-x_h}#$&t4g(yp@5u6UYk2p^)+VBE?h=rF0UgJe#nqh>OwgNkiLomO#
z4}E5fq<l2I^6;EOW6V|Bb<GnfMH-xU9#jZMV=vL+-N@iQuv{g|gMtu!h``oh^+Xx>
zEu5{`yJiAp65{i<6*)xK`B>H!6|I3(otsry&!_hA^JOxsZ)4ZJYL^%joLDvdt%k#o
zj5U&njnKhZ3+NxyJ8s9jo-0hJ_!83eidt|k4HX=s`TOCQSvgtFp{|a8$4HKI_Z7_d
zw(S;Cz)}6UBmi<!yz5%C=^mtl=B3PvdJQ|V9<vS4JPTZ~LyT4Wl8%M@+b&88`E$G{
zQh5l~qd&_s*|}RYF6eojsqMkzQRkxWPj{Y`H}#|V;{`IpLdR#Fv1QMpei>?8%MC@R
zfbS&<H5FA>U4l<*(GH0VUvY<y!$KP(LT*&9k1DY@oiaX~I^gs(&O!f-bG+1`7b1>D
zuBR2dNnZ5a$lbt<zxqYHG`8y?cISfYnmS~K=!MI!GB%S+MW*Eojgv-J{RQDZ(J}+E
z53V<(4+N%H_(kEE5v(ZmiCSC|`XQM<BsKfN(Y)>9+a&Zm{5jHS5cQ|h`9zMy|2ItY
z4vfZq&k7*we8pKImzt#*XyHalj{V;1k+_^FRqc6e3RONCHa<Kn{Q1brnYN6I3BunC
zCX{;`Ze!y42H2_S$psd430esOoTQ_=Nd-r4`t`3g`mC<9%7Js6FmJjh9X)Op<E8D&
zZs+WGpTWC(TKx_=Kzj*R7;(t-@OzI)S8lP_BPY(SmU+uH>2Q+k!b==60IZu}x1Ae>
zMi>0Dx)lW2yduP28ia4&w^9otaXf%R-W2x>Y*Wq_cLzx7Uc<y}iH&ZCH!se(k>)B^
zka_m`v+K$AA@jJ&@rx`Xxs9;2*d?^}E+w<GubLsxvQA|P7Zc_p7QHDp&Z9HzSsM~k
z#NWlqoZX{2D7=&Q5#lUAC@5sn{@uc$F|z!M@j_fnUV@edQ?jk@J})8KhH{Lvu{1)?
zjGMSU775ignP({*LS6*qQ^XKWmE?*`vUahLa@5^7GK2$jt$CE>F1KT59~*hTUyN4l
z?%UpUJvC}-hnR9Vp6!P3GXNh(_$yA4*1|o8URP2O<TL?VR5y}gTkK#4`zCAC9`v41
zIegGCBkZmBIlPSBk$INe*DaFnQtpHU;Po)W|3}@M$3wlo|Kn3g_Ut64vQ@V16`6J+
zX{BsaNl23HVP2w$L=;M)5|U+-ElVbQl8BHc%Mi&nV;RFN{jTYp^M1E|evj|(`^WEl
zzJHu^dK~AB*SzlgzV7Gsyq?$dx;0?IxW2`V8B>Sdc7U^TWf5JZh@#OvXVoZvm^^jM
zH@#85te%m4soOp*e9O>|?G@~&fg}9o9sy&5nkaA*(qJ_zK?aekVUY|rI}p-;3Fqb^
zfEPGa7!d`H=1sd>_5DU{&k7s5aw87CH(K6Q2wpsiI(<{anL7QOKMIOD^`jd2FSY$H
z3)rFsP4tA08Ujt!GwM66xmGfXTS?a?N7eML98DI`Uvl#MrB?6kIxJ^vw^l1c_w}0;
z?#I*4A%AKU<^y*v@I)(s+yfqegARs{E5FW&#hjUnKynRhU!p0YjK{NTP<`iku-lz)
z_#x%md3t);)dyF6&6||dJt9-CZhE($1KEG{Pby<bM4ORQ*u{02h5hBgVu_AnmJwV8
zI_m~uQ_7JHE1`7Z;;e49wR=0o<c>P8{n2|K?;nwlx!s3SBQ~p#w1=>;Wnw3@reTU9
z4b{v;tR5m!swTYDD#*!L&7KR;?73WNKH(2w4cV$qTLV`~Hsh(mGUmH2hSf@covvHf
zNfi^Eo$1MMkBOZanO860c+9f~r~4i}m8O1M>-}^Q>O3ir5<+V0`{y9VwjMXpjaHU&
z*k!~$aaS<v&DV>|Hsc54{x6Ui{j021%C5sk2=*jgOJ*wz=vU)=YLHEo7C7)M|G4#@
z5WhPzo2t}lDek;UZDUZzVwGw5Ls@y5R0`7Hf?+C@CoygS-JYD^SE1HrR)Gl9J?&C!
z9)59el5g0KyR}!$#8+18z&gd@lh|ek6ncKeWS)y^zjx9#gAttV0Ev_0M~$KxQ@gOC
zV8;oLm=+-|Chb-kHD$Pc`<~YMa^8PIEHfY+C-mPyraikt8Q0_c7PoMthA{)p0G-Sj
zY#y%km5{hszyI~I!NdeSk$`gy-3jnymhU}*<OJYE7@N^Y+L!!sY|v~xFVkmwhS*pT
zTZUU5RI7)5ZlhAKa=s=0Q$AnWrW#z)d+069rR`yUBybSyuV)K25gQvP%92(aJuaZh
zXIcjpe%?9RwP&+i_+k<v3EFLcx+5M4z;Pd#!sHe)*gf%dQ6N@oEGiM;RVop2K$`o@
z+|%i<jM%{tNOo2(OG@Bq{rdcd!N~yL=hn}T^|`J8++!HhWF6T?wfSAAgu(%|sCxK4
zw_Nt6kE#WzFbp4Npy$s;2GQf_;6nLIx^YM^-&rZ2^T%D%gzG-P<1)LC(!Bf{KY8kZ
zD!M^zVut{7OP-2+L%E?Ds!0(2nFORizHj<8LEsx|QWnB+YcprxEGt6L-_pI|4z$9x
zqgNPc`;65YNVm?$x6ColG8fw(e>k|R%1!U})!TSZCrRnd#WRp?Lb1;S!=hleeUgH9
zr)a>u+KY_?Q`8L><H@A?ZLRujL_NlFZC5_asx({WOYS8+*R@u>5e@c#Bh4@1)`-jO
zAcd0cn8wNA?4b!v?x+d0QhtV~<#1<2o>xBaGWfwWak}=aW*Wx)5HxE~=OP-`SZgzM
zPmJNo<Q+z$hr&@GnrHp`R*YHVE~j%izceN)IqsBxdirjqs@cgH4d+=rQ(Az=0&cp%
z;#E9G=%)Tlpux>JIT#t&1W|>t#k}t}G??aWL9@uR2j_tn3Em5pr-a}3WXGHzT)_J1
z+;o<A#XYJ#&4{W-L?W|1UgU4(_Z=#BRBLfsTJI`ncb0>l{#I!b4G@9;1>Pwz)AhHh
zRm}4ICYHZTG-%e5-@5qmLqPlddNi1+nF~N|{niZqKmf&fNN{q6<DJKObrxWa|Iwtc
ze0qmV#SYvvalbHp>V^V$&_<n%;c^U|nKC9Yn}Y2K$wCp3nyneU;T+f*KY7+|LwDiF
zKhsXp#TXfr1*MoP9lAwAJ^^cD#wNV7&n@i{<0^97{F&eR>m`<e^ba%?{U$u<JzO1j
zC2}^v>XmmgS9Vs8EQv1u{!>8CsLM6ykZWn5UQN<MwONCXevV4tk2f`d@eqNuEsT&S
zeto=5kbH>en6~MTdNrbz$>j?noY6$~=a+*^bckhQgp-8+0?hQqUQwX>%==*U>-jPA
z@OPtmgDI*m?EKG+RHmN4UJG*_b!o%Cdpp|o`|=8E7I&_nKJ9pK-I3^-H8qz)e_wS5
zoR}aiQXfNy_x2)+8E=L~nmI`b88c89RxaoRX#mxEP%eC{b5+N(uF;b>O(brj_IIq>
zSTSZT9e~gvk*XhJ8NxmLki4j(G{lW!_F?SN3p!?3u@vP|%%X{Oz!EG5Yzd~%C36$T
zkGCMRaa$IF!urk7F-K^*EzxmekT(77V6yop(N915%pIDm1G)5nJFNmS#*iZiL3ry}
zVdy4vFXde9PTsF>vnQkJ+NE$N<?$0INi;0rDWV>qyjC)wbyY^M)}?U0>wdbz#z%M1
z-wN_`y4N6wO3dg%S%k3&7<`_CAvV!tnk12r;s+rYa(EyRi1{G~5?Fg_H$*5VcNA?M
zeHT><Zl)zZfaT2ttg0==QcgNPA8lGGIqA|1my+x4^Cxe05$-NRZkJB5GYc;l`p*%1
zoS-7GGs#!ga{1d9j+oxPwI3u{7tlsP7j1wpMkqRPG$SDb2NeNhnOQ?{gv~mjI6)&3
z4l(W^4%e?YG_CT9*{hfzb+FJ`=~SGCN_BVIsU6WPSGm;_2?-^CBDc0g{T{yNi|E4X
z6duL{!Wn#&II_ZEouw1WN!W2-$GE*H(@il^Ia=dJAX~(mVS?M22TRM?C?Sm0a&hKc
z8Sz&7NwT@$6RnB;<HvWns5DmH4cEG}Vfm}B^o04v-?`r>Z0-Mfm&t$MC-vxp{i#rL
z;4sZ6QKD%Ix1L!08~BCI9n6dx@6W&qo}6x&>@^C@i@blSV`k=$?PkizulEQTy#5ja
z5sN<}1Hw7L1xOxJ-Pd`&zZN{7!*5zvJUzQ|sDrGM`s&3_w(jjK<Ztszzb_J9lrp^Z
zU-tkAb4tHUzS|Oh_y7Iu)4-@-Oqp?oV>@(Ejl7Fm38Q;on|+3<!vB?&|8M-6?cZex
z6TExb_gKWeu#?hGl_cW3bSb_a<-%0eukB6dZ3=lYo7IlDpj1YTtlV~c4Xv+hXfMaZ
zjd}-7y*M=i;cF*41R*Jmfml9sQUD4sTz%wQl;hNHPcpi$r2IxeTI1uMk6B*ArgG({
zTXwzK8zWKMv!)4i71snjvwtJ)02H^EFm9Eh(|kIJd^Z@3xXeq+r%Vkt4c**p=cG|-
zBrA0x^x;@n`CU9n$$!!n1nPh@K9Z-#;7L*d`KU9NX#}?RhBQdrnv008^kr}ihZ2}4
zo;(m3o&Ws@3nPP(cQJI)H-kp)1cy^4>=?cltAK4j*BFV9U3O(wpQPz_EkW(*E^_&*
zo<LuY|6=vsnr8KPlhYYc;|Mo%zJ*-*GkA3|LomD`1u*RZlNyUw0tZgr#}%CR1~LhO
z$@zQ*?@IALk)vh1U3Ej-&a1?=dzc(GbPg#xsX%j(<B(-{zkiul^(VS4U<#7X6vkcT
zixpXy$p+=4X;YjW^AnPf4rbY4Ms*+}bUr6v`_!iN&aN!)*I_y|&oyC!r8)dQ3z>tk
zQ~x0UMphqX-~eK%5r*n<Xpoo!j5SGrAV3(KktIU^km%ul@rtN0+#0GC(S-+F+@`PV
z;c{NCFzC}mhXecv^1oKQ_i!_G@q;`R0B*PHsky*^WMF359|&|$Q3KH94dCY77e*kh
zgtrmn3{v~~8y-#9m>j@WRP%{#KG{k)v~zu8^|)U-Q}per-TWdqC6<k_N6h2<-w}$M
ze$L~!p|@H50=@RdGJ1decej^}u&|-0%<}eZf89Y-wrY!~O|Ge5#flDXK!N{%R)mPq
zvc0R^u`PJIK@`OvDtNBdeN;YYxCOQ86;Lj13$4Oal^n)r$eMLfTk(GQMP^O#L9*&Y
zmvpN#3Z+4)!E<f()i*ur+&sMf!jWx@cd^wL<A8q^jYzkcwb}3{jiI%zJy1Vo5UBy!
z07NM^$Nw1F<z-|0tp|pyZq+$Hop~0s``S7F*Xi-n$K0?9uzMCUo$<`81Yx9K8~+U@
z*U^e59f|_)k1%9z0v;~)LI=5R8~Qz=#<hzERw^P66}rjKk%|D!!S{3vVrV$AYs4~g
z)45oWd2tO+AGx~~>m_-v=nrlh!^$F6@rV;)QGyN`^<`Zw{f4bNz>N%8vv!g<!|yBt
zJUU{Xzl2)FlAKlOF*R@v7^(B+vebDCaPjWUzjseGveM~s{M&@Rca4O0N_1b@JVL^E
zeucv0uV)c7KFqsFe?i~0YcHIH+#3KE&N9zDVVfl|xf*Dv{dE}81!hvc^j)n5D%<sq
z_-=a*?vGs0eb4K5;Ww1VUUK4~L?bR8jO0OhhFuh+n}ROAoj|{Zeak9Q8$j0a>rV{-
zSxEPv7xEHPu>(0PuoTz!4JDqBMf+oN3D2Ij<{!%+6+W<c@b;T{;Wv8)%Yx5$a{7<x
zTU2<!;sYSbi>C`CgBBCIq!x6z?Xq?)D-~70j0tnS(R8Dt?wb<Pt5jcX9!!`=eh++r
zYX7U_{zu&Xh3zv?v)%ngVJr<rXLlv2cKz+#oxL+13C=T*^UnB4H5JF$ci9|_6s^6O
zlCT&A<>ZA0Mmo|Ti=fLj=>cRyjT-M*0!Mi~(R6!G_F(ag7sq2IkDRQ0^+rHC49^L0
zS(Vv}%&JozplRkjjLamYe_hAcz~u5#I!tvV`Bh*A<}%jaJ3tzavP<vLXU{iP$ybsR
zQC_man0%98&*BM-r&|tPnqbY_0M@)w%-i+Wrnehh{9G^e$A<56k9={6&#UjJpW7na
z(5;D4bTMy=L*etHLWJMvPX571tE?;sH=sZ+o=`z1(8Uxfu4KiaIXDHKK7Q3<Zcj(&
z&2u%oyV(WwO;^UP?Z3a&7r@Tb|K6nd_uw061~#g}gt6|!0O5?3W*)Juru$<t)0cXI
zV#T{aGQhIQ8;fI!j0r0-zw9<f{O>me=I&F58i28j%uX~P;k3))+IfPY)`ZCcGohXK
z(l1(5!gr*7N>w4ejnQ}Tsnx_LfZ%WzqS~)PHz1m(goBSjobO>)^wRZU6K~bml`r#V
zI~cjHK`QXGm+wWR`{y>lQ=*pq@uHa0mj3c@Q^@?QTykERg&XMQQ?aDJ8nlqwgzaK?
z<)TY_s+`~o{07VFmfMGVmR4Ng%9;FaIsq8&N5g`ZQ9&KNs}=tCs`M;WGH6WhToR2E
zNPRglb;S~M+0#^Erdq>jmA7WkD{`$}*k}1z-_2Z+N(<J1B2K|yu}qv2N1c0&Ys4=1
z#9l8MjyK42NHubmva;GzCwni<eDzMuDzSR}B^FEnv-usI{3vR`NM+NaLP8Uhqx;~m
zkH@?K)wM4)Cfb*j#|%r$gYfLtRzvM3wkHCl_G;~?N|S~wu_&z1ezS>%^K<4_chbVP
z7f#2XSO`9I;G)kfZTe!zIG7=tF!%G+VkxS+%-EgVqz&nt1&GNEk(a=6EKzlY@UVss
zW%5VykKh=|HzI}~K;{X!fqy3zE`i-@aJpWZB+O#izQPS&A)QkC-avj2ZjBLnV`@#_
zDChX24^G8<gaT5g#Aia(TRF99^S^sX9pKDDs-_IYkoQ`Uw5xWNRn-zW=FF%{ap~d{
zoTQOMp|7?eA&+FFVj7O_DNZ>4z|QN8dGP1u=0oc^?`PmExS5H_Uws5haBDn;v}|wo
zI<}!G>P2*o+2Z<3YRsk9@4r8CI_r^v8i7Y<MggQ7;bg7~g(mrM+v{*u#B0-RX!7(G
zZHNOVFiDEKJ^Sp1uk#7$F7HoPDRPH==Y{s^WKM5Ha~j0XUInsnz;!|zF2gu#7`b#X
zDxzH3$#!c?ez%!0R=dZm)oTCruB@k}$K!*1Ca@(({`A@?;P}CPuOHo+vM-;Jq}{~!
z_0qc(Qo9^!u4b;FTD{6$^^U>Y>Ds874aGaQ=?D7adls3i31|BjHsiwy6isk&J1URD
z^})UN<J*&&0-qqVBGKhTpU^pj)uTG*y~<u~kAh5&cM?rzC|CE$2E9SEM`|dMh6$xj
zzsM*b2)qJR{_A`DVX1$3Z)Wh`fIte2*FvgpGB<#C^m~LPG)zc=3uK|C1=AmIu$2*C
zU}Dy_)0SL*H+z)8D{m%b{juAsan<~RQNsx{UdWy|lwNxi)U(tV?+Tl(*IyYnn^P8S
zHk$(6J=`y?(9E@8*eElUG>FDo{usss92+%rKrE`?=CDy2nfE}Q^xOH3`fhiIjg0JV
z_wTR^r|*Pp?GM>7A;*%rhw$sQfFFwsG&se`LYx|TC}va#&T7JnFGXAC^5;n(dHjwG
zZD!jSIq;l*;v6Os=lau*eTilAtOr?BDr~Tib$0L-9Ppo?24c(+S2gN7Y%t<X2w4=r
zOy4}9#8?`jctm_kyN7HX`ABkY7rXz68sv`fod5XKF@zb>NPl9v79$6TK8vjI-%Omq
zY%6NjUa!?2G|6S}<ued|sK2gu`E6c5i#CKb1ig>5hi0*K_F{ZCytwZjHUB*cN)(wu
zgMEx}KoF+R6f3H<GbtI{HZj*w>Ni%J=YB3~mHqi+8*T9K_H4#yeSx%08ROVQ-QXIC
zIG9DO9I51UezlmC>-%s)YBGCr&ECf|14bdD3lajs$;M=XA48PIFz4@5rIM&1j0j+x
z8+}}Kb+VmtZoFweS^LqaIu}i)dZ9eguD4~vb!X>{7uYCl04jA@LjX=d*qOEK=$K_0
zvi&}B;6i(|)V({|w<k189w-(LhEL+ac=9k9PlkA+8S7(SFqD2U*_qf1V^oxgv2FPl
zN@S%y2RA4Mx~OjI(FAw^dluFVHZ6g*X&+7e<i3M!!u<GRbA*XebU_-?ta2&@IJRhn
z%xP3!NGiYQnPJ3ko|pM1E>|m6Bx%Ws7wjFgGrzZ&p_psOIuVDd;7iF9OUQmzearI$
z_DKJ8n`FYCCHnroXUR|hpevzae-2c$Q{%wBv6qpj#@on)yQrl(KHdA;&&@u`8FY4b
z_DzXytX5gECOMMlbjJjr$aiBqiz;kU{CFY}-8D5(c(otlcWy6XU)=vht;_jE?-9=x
z^<vGkBb)s@dVntZJHr1EE-?eI5mC&S)Gq`ompk_T9IQ+K_gDCzWB*d%)nXPxGIX4r
zH48hKeC?3`zV&YB7Pr&Z6|6je@Jg~Ht%g1j;Zf0uV|4uP*ekLGjHGEzSCeN=wUg;Q
zh4}ZFPI1apNcSe(NwmY%s{@VPV{iyOzaN5Kv7LkA>rH~u5^E2rPhe|2e|H%Kdw9Md
zZGN!7xb@<)I(|12QmVyHnzf<t`QX2y)`lVBinSsKcjI;-s^1lDELGe8=3nT4mupbj
z6mcpLDm+g9%4F9n*FwYrsXUl!>qKzs9QMUHhdt`cQz|__J}7HY@Z~nRI111=LFV+{
z8dL?CZzzuzqzVpeRXJu*jW7UA$(0VK=*XfO#qeW!6$PIU;csGw-s$Bs<Lz+roqC@(
zfMF~zQeli4dV`Y(x2OU<Gq!3Q8Z0VV9oxI2zM+)Rj7B5qWJy5!(=g;~7!ri5O86aI
zSol~%7Z~g5M~zR-W|ter^G`5sd!{7b`Ho@(k1neHmW`rVc3AvdFtZkzY53$%+SAyH
zSop6xK~-o%J?si3h%kX_q|Y$s!;JTxpy}ujMbA&oJRZ%HsKXU7j$8ch{I(6<a5NyE
zCc<n_CcQ?l@C0l3N}#Q{FqFas4`6F1F!r5y582SliZ$oeBlurB4;rsyn+I$LsN%@q
z-_DSZ5rJ1I3$L*58_M0HpHE~7jRB|*I+ynXCj;=Q=R<NQmb4(uC>};Cp<;2>j(H;w
z-9<RZY+0ChV4xd1hwRWg?%kqPjz1{{c@e4`z??_Lpk+gtqxe?*$4r)eYRC?%(^EQh
zbX<vI3b{^fH8(YxK%b$hHfcya?96+6YtwYz{rOSssb6+CvI1M+O26MxgQZD={pp4n
zLQ&U$&`0t==);EtH|1l-<T>Q8K42pS=59}M?-{r3U7dyzXP3UAJ-L&0ospVFn;LN|
zfZitb{j}o$^E>&5dTRI$6&uAI1~v{_%%edNXZH<NoJm>+7kUY`6fkZWMx<QKr)U6A
z-vDL9DXOtnW~1%|rmNiH7UhMd3eDhMY2oBM4b3s^wfw)n8+teMO)?rYaF?kK+gTjI
zBB2Q85u7TH8pnBe&NCi~T{k#WSNo}xR@O0={HFzjoy;cyi{=2@JbPv}tdR=^O-%+K
zZQ&cL%dfnShF7fbT&C;0@QD!NF&xia<$-+3K|TYqQ{p^~{7EMbv`MHmdQmBP0lx7h
z6yoZzbN_5z8e=yK2N`iyWE4ZRiJk(U45nz(ApCQ;`#01&7+TSaB>*BPkI^o$o`zK0
z6?$bH82}J<C7mhclk@l!#q9Y4=8R*l`fz=z7t~x&mGiL#eLvTGziWcFurNY@3Mb`1
z`vtrM{@E|C|Lm9g|Lhl}3cB8fF!U^BUK@w{dv&pkkC6o^2u+^F3{b(*AI&t!&=LqJ
zNLKp#s3)sn-2gL30FiN}l(_;+-A@=6pkRs^_r}p*uw?RZ6#=<LnB;X>HK;}S<%=S}
z@r`)G7nbs02F@Zc#3hNlU`U`#mnV?25aK~bHU$=#k>}7f>?^ac+}3+gsyp5Cr>EM8
zaV0G1CtpWXR^EbFn(7a;&Hfj*XtPfqM8Ye{HCvj({FC#(p`2}dY!-Y!<uye=?!M1E
z=%pFyEYpHK|FqNnM(^Rw!8EV?#7uZU<q$rs;C|*SqHnP2HQwMr!{)q?0Igtwr;IQ_
z+7A%(%!rA9ouVd2w%_+tbiQ-sHR}|GxRq{dMD(@4pt*pO{?8nwR21SJJA#P&bAkxL
zWWeD%PAVXerpFYzv0=uPw!cZUo@T8g#<*+K?d>2bIfvf`2oHq})EP3vN0<;DXlb{Y
z5@@D08I1P<QgFr76$m6e1|Hv_hJr2#NN0$<CJ#5{x!x<)<9CZ(!1pau?U>x~e<~a%
zt1(|@BeOXxzZZT(!2wI|e_Z@2Dh|-rqyLvv&4h#S!$;86D6qkUuEFld(zmz!^T6U7
z(q++|Tbw>XFe?hk#L4e1beXoR>w9<ck_UdMi(n7!<k;y8tQm{BZiLyVVA66ov%jhP
zI^`pTL7iu$#CiH!gmjzro>e~h;W{X0isKEE@BE8(&-YD4SoC`SE*x6NhW;r6Wni8Y
z2BsBh?r-7n+kmNE9Yg92rU2K;NS&E%TExWXy{<JlH&UoX;wC)&E}RYg?vVHn?w|)|
z+a%zS{(OGZvAGuGsj!2ul3I^aePIdEbh*B+OIZo=T?UO5o21j~JM$dwD!6@i*gVxz
zUj1)lfI9w7V(_x2LBq&NrZ{~qIl1~e&yknKr1EIL3`6$EPmL+h@*hgzSF2kKDYYt%
zM0Ne+Q~S4%W*7^9LMCOZg{AWpXZP{pdU2|-0RzXp2+tKG^i}KzOl65&Ix}CrgiW*?
zUlbnp;B``aZR8kqpQ1qE`qK=jITmUMdM4Z!f<$0kTO$=u(IIuvg%9t#M=2#?uI13}
zGpR?i%Ph~Nh+MET))rDZmRB_s6ttsCdham7Cvzs{*Df3s9kw#0$w%NUIk7kyn?}!a
zKE^}sWUA7#tiC+MY88dPR|)nJF8FL_+?2bX$(dayf<{c6ECsowGH$vEzTNegTPV<g
z^^t4naA`b>&w`JXFYwo<`63lt^`&TQ{dJqm+y<J&`lvwxR!77H_<96)T}zXc@8R_y
zSsztPc)Eq|2yf}9PM;@i(CYIZ{gIQROsbo>p5aqlS6wbwMw+Ick=iV)6K%Nuc29m_
z$jlZy2Z=fSyRVF4_yif`bp;vAeCdH_@WYT=7JCEi*ZNCM%%xTqNj`%|Z!woo$ft#o
z+SSQi1`3=niUX_}x4RN`mj|i4&Id2lZ63WG&J1*37=;fT0N2k7Fpz)giDmF}qdo)H
zoll1RCBczE6?X^Le}<UO5H<w}uyoRy%)%6)g!uWje%}rVYzJ4^4)|&ikyBV~8?Z%T
zX@Ki4dw*w({9W4+$0inAM96l!`DH#~q^qc_yHx++g1FEQoxJIb!iok3bfXTI^z#>e
zQXmv0SjAsFk%u*K;8p^QQM1#5Kc*hCpwRwn;`pC#S<u1!T`gvNO!5j94=ckyq@MS+
zl$diKbKVoZP5HWhrsN3$$tBN~7FYhdrZ^N`ku|vwdTM#0r}nTk;(dDwHTXL(cAUkF
z!QWn)z_tAv;ekYN3`6B|!4?6ym<gaAhO2iy6U}VuTS7ld_BJH9XJp#?Tv~TJvdhm=
zXfy9Exm}uSvP))aaBD3ni8NP#Z8E+F<g|WuX#R5P(Y~(UHSMd5Osue5B=l=d?mRv@
zyq{eA;wY#d7CL55!Xp$jN-<yH`u^+y7sOB(YgPulFs8IS%?o+237GjE!07sXq$&qF
z50ogfaQr>YD%S}Fcdb7(q_M#!PC(~kCp2joT(d>eCTeMa-?+4pjo8=s=P~&nw5%q%
zo6mC^tirH2(-U6|-oloD&yklbbkh)ASJFC0Wd0PVE!DZo3%ABq*u-~L(B$#8f;{#S
zLFHKMsS$(Nh4k-yEG*cr*4-?+IDux!<W8lj!&J1#T2Y~e1P(f&5-yRFRr6Cm2AvL0
zpOwd!M+{Fo?mV4AE3Vy)uLaeWXVXL{d_oiCKU)C5C^U1fhZ!5J-=C{irWruQ@^w;u
z%QU6mx?MLqecM>oSjg(_=#Be!?d3{%0&M9HOpyaa7!cSOD7oG<h3ZG&MB7Sn*N|OT
zB?phaucxD4);|!iXF%V4VmU9+Nup!u75;|AiJjYCv}*f$v<0;+Pu;V(Kg4CI{+-e7
z2oGX;&#&9YFP$#rH{e=rb_LBw$M#Q!^~#iydh^g>Bk|+&(Gs15&Uy!)@4<~dTpjqu
zIA%F#FgD}J|I)S!Wxhk$weX!y1It25!Mi^Uw~fzYF!pVg8%z|FHQ!#$cva!g>m@n~
z88^CCd}0BLq_;pmS9J*al8?WsH1-YE{nL20a%ceWa}6et4Dlf#l{66X!4T!=tEDa9
z3|5zzCZ)&;cD<?>{<Pz{$RXd=Vy_fl%KjXj7X$t@2NQ~Nbi0Q&1IglJNm4=P30oBw
zhu@z*!M3GBX^+I^+P&5Z!(+_`KM_!6%s}oQQf;wXh`!NdYRvLDCy#qCRNHmrl=6j?
zFB`4ukFChs@>?_k4t2@^$P_K$P*sNsD*!OFD&Zr*U@Ii3F*$nLr$Pv>7;&Uxn`bGu
zQ@B<}ESHoPO=iF6JEzB$nlRjBwZ3GTR{W4${`UQT!q_XZzgs~r;(tBu3!#(>2$!}#
z0+h2<fo!@>Gu<V_SvTQGdvta|W0`s_k!XJ{roM?4QLO(|rGQq^=g3JIPP>DVWuR_N
z*Cg{7xIgILp4x-Ge*IXB5zh|t18a<g9u&5zU4&l+e<+&W&x<e@H699qa+c&e9yXY0
zRVTBG?7}1%WS=;<QtHLpFu{Ep3jKB?oA+6KaRCCp23x2$ZZUv#3)NNW7|4_5M?&MP
zG_30-^TRjqOB-6frtICF&f2Zc6PD}P$SkV=hr4**Y}}J3O2tz2a>?3JA!SCsL{YL<
zT+80`#7J4eLVgrhEysH%*_dX|VrC=1bCKV9G?o|j|8WoMf0ZrKi@s|~%Uf{rRGw;#
zfcB_Ds3}?H>bt~?lyNcpkguA;x0NN9Es5k}cPQ{W0>=7KV)CO{0UG{>0#6i;R*?ND
zU8W|}_~`PC;4;3ateQLLoHX_j**h>+Ras>&Y#^zkcc8uV%KIu_p^aQhf`z+Bq+j5>
zE&r5=oPYq<jQc>CMS+XXl25>_*j%!xH0zonV(B7wbvoGRp|vz=O=D72xR}-TdpGzc
zU8dS*XLZ$=4<%V$d!;79cjw(6x8Oz`y5kGsmk9#5mn^~u^4l`vzySzDOs4bZ!);}}
zC`@sNL*zpjVZ@cMHYKA6C>hzkXWctZP8~k*BIuZZ#$Cy4$NFy+*)QWC_p|8r0GC%V
z`m&r_(4AU_e5@rbnrP!1I)3lcf7|x|VI+$*^Fv>*T4iz<ai(gXAmqtsSwq*AuJ#%<
zO^^uY3A$Re@T}qfIf+`mj*md;{j>_mU#kG=R;U`T0hvXE2h=i4WLh3q3TbOJn)G?9
z)0G*_1fJzpgBf#I3Uk#<nhMg4)L^KRP5`xH7pH)z*acz{$iWr`SPnyMDwqW!!X6wu
zU7S=jzCa=vQce3yuV-eXch8jFRkM*xEL*TV)ARaT`mlS%I^xSqe-%KKs6oH_fiTKD
z$Q(3txc?hjus8P}{IMlt9os8b!KA>ByQjCiyLgR#^oqe8iObm58$i^@Q*4T#7Zu;a
zlJ`2<8Ez`euRXRD`P@RdYx-XUev4oH_fhoFc1(W^7L5J_6y}KvSF@=xE+&=DCQrK_
z&wFL_n4L=VsSYoEYAm)*Vi|kn6;FI1GBArSP-CF<l>pv*BlLJ|i!QYN$R|Mp`s};g
zbqk1$z(oN&zLnfWMCt$%O*Rdx)ojulbIv|bAuFG3JsBf$HT!W$pW1MPlDMX!>fY5Z
zY!O4rY3XgM!;1VzyejIZ@mE=RX54Um4XJ>0&z4Sl!SyCGzJMG)OS&Derm275(`e@S
zx#Qxx>@%|NQ-`jHkrRhA*v6p6QJe_fOC!}dUh2b4A55h!Z(*BOq7cRTxI@zMUAKIB
z5574kaWJ}eyyHl*c~-cOuaRFyaxTuJ483t?%4FD#F=H!A;u&nZf;g%zvGkd$e7x(}
zHM|N}52Xm@F6FTpd^x(&@4>m*M{hcEBQo;GYi1Og3n_1tX~Xf!(~iTjM71;3tbg@n
zU&m&Q-Vu811*e=tu{t{xikte*B8eFKEGE%Vi)2;Z+O)QAC2yWON+4tFhJu2LM3T_4
zck$}CZjd*6f?H$!+O)&r+7T|Ls*)pYjFa?HGWOH1i*kxzk#ys%AqQ8tgXCkTHF-xS
zKD;E_?5u93s#(WZoZ%p^(m7lZ+I66QN$IirD|^G=7>lDe^73z4;k*DB;jd8wF-cgJ
zJgOq&)8#`aR1$)^X1>;}cf2H$>hmc%r;oHK&=t=Nlo5j?phsYu04=$lb_hg*Y~a7c
z=?$CHb3u6b8An_x$d52*v5P1li*G2@B%oB)C~5%bgb6eb2ynwfO83F=f{r0mP$aGQ
z2O=XVfG)wvD-(W<`;aW+X?nJ*1`%4lGACtOtQ)(I`n#crD-4x|x1@<&Xi=ZfY5IQh
z;MXEG*uRh7T-`V)V8<T@+2Fsh-J~M@FO>%BF6RrN950%vCJr=61sHr9Ink1D{{C8X
z@qq`qJoPAEifG4sIJjoiVCHf%O@n$1`=M-iKn^ug)zjo|PU^AAi5;AY4bKj^aIq;y
z+&cbSAi#HAf+5lXq#zvp_)xdMM*=)V0>H_CMFN{IFxnK7y7}=U@W=oyHPUYnKU`~Z
zn+{7HWP*E#;brppj1d)rzaP9ROBH6yxp;B&Y#vi*w%3;{yTB(VB5-@%B}OAY5jeM>
zTe%TI&#we_rkYQDKc;#@fJg}LFD!1G<&uk8J|#GGIU+jW@KQ>O%&I}&&G-#Kf!Pp#
zJ-fECq+66SYCJHM66D7C@rUH{x_vEWvc#)##Nol6Ay$5K0bBXr?%1ptN8HF$%XUUH
z`u>R-Z0OvdY7n@h|HQ(7-az>kMglB<5{3g~kH04DZ%7Sz>g=6xpK|Eq?GLJ}<Io$<
z>^UX2N!F!vdvGZ@JSDQ)k*4S(J1J?@tF(3gDo_i%fm_u%+ELV%lcj8LW4vBIV%Le7
zeNV#oUOV?-C`P@Duq~6E@~gqd1A!|bas4Y!!6JQ+Q;+}$Q&Qmy=DdoK_@^K(9Gg~v
zB-rcsV}Z*+DmEeKkTB>gti3zv*A%9+(&jq#yz{z=+IzgY%fxxsyD-l^ACX$79yv$9
z*D(vfgEcGUCMQf^TmaWFt}kr!36ZnER2P09<+b?#=RnPWm9fuv{q*lxhL%(gY+=xC
zr2aM?q6gj?%TNkoO(p)5pka&BESAXydAeeD|I{Mo160ssj8V*DN0wau_f3KCy!1cN
zHV<)2aUT##!kO!dr=|v$;bm?ql-x}1jOkLkF}CE?otdM#L3Qbt3t#`zRfJ~ZU~cfH
zZlwP?WU)6ODHkwjz*up&LSPK+lfR*)@b5s92+t;yO>;(?2VLMB0ff-S7Gp^J@LdAL
z_z5)01WS&uN!-8n@X_3kwA}E${gFM&TrRGwZE`mR&+M(+>Wd$OLG?cj<@|d<7>W`4
zoj@5eqm07m1~Nau;Q~A&PS>IO5|1fs@hOfY4p+xr((GrlPsL78ud$0e<*UsQ0}}-}
z=G%aD>0&V;7p53%f>=uMuYE8In_s7os+`9fH-%KS5n%NBDi;FjIDBmF*v#K@l3%`d
zM+HueY+E#l7d^|=BFj|{ns=zCy)2DBvf6j#;$+1Ultwja8HYP~E@0b=pacRwYU3_=
zAD*g9!|4M`ch$6|HQo)MSsB|E661KVr{CyujM-Ac?F8nOfiP09L~><Z_LyQQL<SnH
zE`hIkoLMU-mWQ?S+41>I(Vl1lN^ED<>erhzE``%Ete>YcJ1OECAG>|ZJ5LsQ-Qc9S
zJgj{9N>Y81o0&J~y1-!z6<A5ktT47h25{OMlcq(GK3s8Ro3a63|1$0LSl4b!Xa=>U
z%Vg^wE|;`}X<h3bhYv++$i9B97>!Ln0{M7*6J6MWx$p1*mQjb9CHrE}qfGs`!oly2
zf5W)K6cqx>X3e`~ibPpXIwhC!D93=qN2kSQ*`}e6g1h^4dcEI9KMk_ob71?XegSve
zLNVuP*`{ix`m_L*9BT63<~7my)P|>;=k{s#^WI;&8^=k_+)wHV(Kii19AK1%L6QFR
z#*zDaQx^kXDPQVvC)H8zwEAyHh&IlH6oSUrg92M>m3;hPd@>%m?R(<l-cj2XxQ$eY
znk~0{f{&198}-lc^IE_vY>zom{H}kG?;Jj<am}?1ix@q$L(Bl_Lx$h30?bL|WFNbu
zj1<-N$ykX_ltMUj%?p!I2!d^~N7op;2lpjcmVe|FC7F$<(~ePHiJqxZRiAd6t`sXe
z$z3CI(9Kz6kNR!SSbYzA=4771GB?}LQkD1Z6#UaRv}SHT_Oi71PE(UYW|+ll^@^=9
zg*vJRw~~}v)U9v$WcNvdZ7qc@xZn&rht1oJX4fMges$SWFUK1DsYRrBKJ9zyI~{j=
zybVP3j|>t+t48_Pc4QgNYCd4*7q@8poS|Se!1E7HztHY)?@G#hWucNrbvqe0*(K>;
zJUMjnSkShf6{uxPhF=gm&4^Lg3?!QviN4xhovE*aC~tgMnr1gY=Nyd)+PK?>QLd~N
z=I`{t->^mBj<+PXDc05bR3z%gsUFK64HdS&pQ6q#=<Xw*&(;l}%)zS;@_4T_622(5
zCu&2r;Mmv%R`UMf*-GPs9~aLpv)SX(<$QQiC-;Mjr_wr4DM|Kb>$T6HjRa}7XT`D4
zELsqALg7U6B3GX3%V&I%J?zu9sYBRhH|nAx`_SAh9$zkx>#|+ZLRYf$>-X=)emzjP
zu4mJgz4yw`cS=@>PM%a>)x2*ZYmZc%i|o_{|JP5RM+-F8#lF9zu!qQLt3*_zdK!*H
zblefp!Q`F7P(S-%#@)#lHQ;<kaFX~;=IAyPr?`wg9SOwkZ=<0ti!!yZoQqz7c*g&P
zHJ{xK4pv1XAh%V}V04fs0$?W@U`w!G6LT~6(d?mhOf}5;sH+CtR7IK@l`v3L)u8jN
zSt~i0kt7~F{CD&bs#C6>b{;y*Vm7%iL#QqQQevQQaVLlW5=at$8%T&B8)9|C{Afdl
zg@I@y2bLU}<Fe)9xl7#SL-aa4DH3g=^pgXb))IQcSD62a?%vNsyR(*j_1WIfo(CCs
zoto9zn8(}9sF#W+vZ3wfMiG-o1w;LW^FRB8kw@N_U*k1~scYQ?h06X^bU{Z{nS2%%
zUCrE31lx^fG=83Fv!#uv;z9_F@p+&WD|dQTICab4$=o0AB>I=%W!m7+@)_TRr>@tn
ziwZ;X2(P3t(*7Gh9NyQi(4Kv+>-g%(ehK?XbNlXf_CrrbvT;Ejf6{2cFuXa}ZYyS}
zlq+2f$ZT>6Af`w{q3Z-2ZLiP8y2@m+f{&i2y8BDSZ`Mga7W;f=`TNOFLKzq(83EDh
zn!i<2E!ZU(XG|nIZ+CgFGbz~ex>1ykkL|dTGhZzwaN|DTrypOrw`Tiy18lwyrO96|
zh<QaOS1fHi{SYIioXeT1NzKcsdwRBT%WS*4(JI02tCv->hj<F*58#|6M)2D7sQ()V
zq5iAfo`PBIn>bluU?jL)$w%)XNgyi!b6dXj@uR9PiHTyn4f!8D7d;trz(>0a?kQfR
zssK#sk{1=?`lzD5P-@Q{cI}#>_)@phR{3+cmmA<3nbJ`e<@(K^3qqO>ha7kCiJ7zy
zIw3SL6ft?@uJ7TFNN38@KaU{?p{y^4b&htcj)7R(1w(B_lco{af#EhC%%#BWlM|??
z!cidSlQ9GE^WFr4$SW%hQxofot4z`-V<%?FXltqy%@SJ_Mb~}k6nf-&{)?l9$6VR#
zm*3WY5*F4etI8#t6ifBQK8Go~Y73jtk{~dB0lHs46b>o?KYlyNLF=9Xes^YqqR3Q*
zK-w?^Lw+oJW)E;yp-B_SM^Iy=7BM+&5%O2eKo<}xW(;8yS2}kYK%KVvts+ZEb#y%}
zWj(912r%uk1wy}69!bTJ^afmCnel(}F&ogiDsws2*1BNmnW0?FvczaRwY$fgHiWC+
zceBm=%cD&64}%BBD1@78KMfv$-}PNdhnQpY>gd8VlwIWbS4e2N3R$gc%<q%c@n(;)
z(&Db+(S3Q1=OZU~yg@Yx`G5`gJ#6;~YeKjJII1yg5*4AD!|s6qpyVIEHDohU7TsHH
z@7g~ajY}}NyCUdar9^+oMkB6O#)9ICNhr32m%C98VA06^5-b`ukS_{^psg0n9r4L?
zU1p5s9rMM%7*D${aN8msPMBHQZIY}8G2|FR+TVT4mB#I_u$$H*?IBQgtQ6m%)?G!s
zM@=5Y6*$XR#C309Z@0Y1D|641Td3Iv;RJ>fBWTzWIcXL=9_ozL><sc{V=9VUM`OdW
z;`*9T>d2ZkThy-KZJ+Kwlw=h(rRCRf-g<ib4(`PcoM=i&meoB~#}2WM_q8)OdfaYq
zL+`XP3(cn)spZ%dbALp?D{I=8pm%KWRC<F_Ebm+X)>c`W*wHN<Z~1S%y}L(wGf2bk
zTX@C4jO@~0X`TMS5vPH$`x}xzPu^YoxXVAfXM$Gzv429bxj&qFP1*loTCZa}a}Di?
z+ehndd0|GC8^8t{Q8AFS**{Z9iI1CKx+}78Sm?si;AX*&1e&)Ab%5yN3Krr6Cf%XI
zX05~(%Id{ZK|_4i(|hz*ey-7$_?XU9n(XUu%*dA8X%N+Ka<ZbEQh#|++E{T~uA|mg
zj*J73z2Oi3I|JnDBbzjGS35k93=B}J!}}lJ<i;*|^?-V*w^>G3Ue?z`MW1>&cW4;)
zJHMf1PriFn^?KIn^rkmtD*2c@wt=Jh_yH}&oK2e-JM<G?b`8D@H;Sh{#bleu^_vx!
zH)sUk3QnHs2(RlNv%BPx<8MER7PlQM*C~w~x+5x?Jz!gPa`loVl=d8<YKoWYUMs_o
z6)ALyOqR+?IiG!H=2XN)v>|Cq+O5W4nwaXVrY65HF4Ce7&ue<AqY{5j*Q<OLS?7k<
zjl#)_=B0hUuT~3f-Q&D!_wo<s_J^`JT$BrM-QVUiMc<ucTz<r8L-*tbYvU!Imp}9`
ziE%C@c|Do&xzwYa<kp>k>z(>2*1*hDCG8rS{oUufR_(9JeCH?3Yhu3oWThNP_s9};
z@6L8%e<;mwFEZSXF@>8sv1MOh{t;BvO(zQiO&)g^sjB~mg4|`jH<rrd0J)3v>^&w|
zC-R_)X82faWwm$*n@PFe+9suG_oh`AGoLLhEi5$f9FmSK^`w9zD~C({g!HSVgDfcJ
zxA?_-(EJo~5c3=v?;srp%S^$6rYO*8VnQB~ktlx?O7aBXey1~6M`$Y5ab)||K7&%H
zZdhEE-aK3mDB_2+%8F3t7`hORxi5YI)NIwrY{?}WGjOvRn~yAL#Q4f&Q>o$==1OUf
zm$cUMnAo534Bu$P%@b!=ztt!w=dUhmwgo9F0CNse#&ZwXYch)OXPd6gZ#@3-Yy7jF
z5(W8dWW&9WSl=<~M{UlrY+`b6r8)F|s&H^8D|{YEY}ds;@4A?E!EnXA=yd3>mQCo#
zz-=FDVwM_0t0#CH5I`c)e;=KDb>hBwJce%~$!YMoba|V1!^V1j)1D3$vN)5gjV9$t
z5GXUta!TfRd06(WWy&FByStaM5lm11s3};1n!!HY@{{R6-Cw2yQXr{naRP&A=ve?!
zKo;R7Av8&VnoT=I6@O)5&>C;v?CE^{N^zl=$8k}WR8NkZnY<do6%$y6KTLvy4m2CU
zt{p7wnqY<WA07FIlEL34I5%~U^v{pGk(4Z{3p8D-7iJlCW@lWx)Ykoy_K8H3;yA8A
zlh7E=5*_=`X11I0AG!Zv=@G~hkPU%_O%X$+6i?^KhYLjeGXbbkXAnWE4dO#&Nv<_m
ziAKC5*;>A(yPjR}vewC1EA>6uuk89(bu=D<L^vHwGQnKNaF-kSpC)5Ma4L@KV3`+k
zt>ZwITuiOdNjIVMZ}){x=B~PLF{}bbi3$<IP`^Ly<WqxS60Wsm@f+wOfB1rc&1LYf
zU8x(U#_LHKivN42bPs(ssoGZN*74*6CV8v!jE1w6xVHIs_@BrfjVxenwCHbQ4YA+G
zvPK&@3W$C+Gz6s)95DU2v3ZKG;HwB2Qp4QINR^;Zi0R6Jttz}Rjp*BX$~CX16E$N}
zaxPg6N+UbIPr?0h1T#z5@zXB<ej~l_<1FWd=>c2=V|XsQLUT&9R%Sz7S={oWm~E}k
zmF;JgHh(_2M>A5X9Y!tun<k+AtL&iuV>R&E-=QDjr0*ipnIh!&C}+Im{O*-jCa>ch
zt!pc8KiB2tT_Q8r1`tpaP?97Vkjxs<Hv>8H1*wdp+F_tUJPZ?xA=wB}Em}nmeDA@p
zMV?17gb;qDzXVOfze7{kdtdd}rETz+C-p(tI`c_KAf#k6BkQ_U<|hu0h?%ZCayKid
z#JEhqWCz!7)26xnR@6h`0Gd?UGusHW=K2srf+Y#mr!1@NAPoI1wTSF&MU54x?h`+2
zs~EMvsMWI5lPCWEj?=!uw|n>No^Tk&zB~GR0T6}kXrsD8ybGkZkzEH=i%9M05L?v`
zW$H31t{K{IM(5Q~cWOyj)Sg95)Yr8W+{XT-h@w9OMPvh%+P-A@K<HkkiI9&nK%*~@
zQ}o|K&7@(dw`{4=M5R8VuR6W5Nxgd47ZQAhMDq(TT)q<{qN!e&p-q2cF$=(#-5h8%
zCo-0C!vejy+i4s684Dwc4wP?X+$A{lU6WZ|LUy>pl=)IJoaa~6R9gBx^7!MA55?V|
z)mH{`KEq!GdqX(ZA)1Wa;HOM=hi}#l(n>@TxVR91On+Y&o`}6lU!Pv_cy#6YEV7kl
z_v%OqyXEO;*Y)#X;%2rxQ!82Ot)Xe0GV<{(4B~>`Kkh~0-K<6~gx^Wba#=807yGQ$
z<IADmu3o9pLz^B&aO~R67x)x~vS{)+z}W(t%uWO}?xInG5a4TFnH!?0=Lj$?H@xl|
z{LD@l$`x2G*i6QRiD=r<y*E}Ri<a$q(;vkDP-pp8!(RM7>0X%kDStOiF6nVn+P&Q<
zuRcEIY;Cn`y`rsnqSbZhY|Gm9c5bmgy&mS~oKIE*&T1eGz^1ZCFUm1j0k`0R8Nk-|
zRU+US$j9;wgbGKhdI!s`iH-TbT$SW7-Z;?5?xR;xE=tq6q471Oz0RcQNQlt$ol1cZ
zTx_N^b&KUXh^`ZwL_Ra3chms6D5Ol&&wg{hpv|t=JjREwoKw}TlN_tTwKIE44gfto
zz^%|Q5wa%3Za&HOQ{Nf-OgMces#4w1mzMyUi~XIr4c+ugoe1)-%_*w5&>bn_Jjr+B
zR^Bb^J<iL0C1>THD0a69KMR`y6_;SMv*(viU*H{4l=(PZf(^qg!L1p^tuH2!3W^B@
z_vT+%SO<N&C=u22LRzsOU+rRHUKC`ap59}#_m$T3b@fBZFDzejM1(c1JioZo48NUd
zb7E9yMFZuU-9ds|m2}-|R+o9<PU4L{wVTG_s^NPz!X1v+ih2Xd6sIM{EHs(JBROPI
zB);U0Vdj{{Hn!jb3#TTjXYOB}Q$E-ihV-0!FQ%&+o)wvTSy6PD__QRZL@y&%)akrW
z%vpmCx0fXwwRkK%-i+P+*mI;KZBy2#!-vQ(vs*0XC*zVg1iCyFQswu{{i^h3LEG`|
z6+Y=BIXcX_oh!ByxF_=kmfHA)bGFBH_0}H~%6;425G%Q<j>k5@yhV>RcDGY@kh7!g
zQi<KMhNpL`o&~g1o+&3!25l$idit43G=`c9e)V2bT)8%9Yx#EU(X$qdId=oJuPkov
z<Iy0!-rhY*1zSnEl92tM#HB6`;azK=9q?92TPs+0e8Ka{9+$b&M1zUrC@+bVq3pBD
z0@?0eE^iZ5)8&l!FZaak*p%HQ{*};`r1fDgL{E(9drV+A?>2O(aa~()V@%89dc>z+
zR^afMZH%RiU&8r8JpN1xOp#)ftaa|9v!#5QKWLorDZl8Zmf`$?y5Y^|Zlp_J5U{og
zVwCin9^t$Ycmm}!iakx|FVi{D+tYnad-myr%r*O-&JSE;Y}oMTwOfE$A-L<5OXasB
zj!*C|v%XoO6w|L+Q9Nq{z1-qP6bQ$W-**2JW>xRn589Z>gH}DG(^j%hMf;?~1#5dZ
z$#smUnoIhni6(Z^!(ghN0h+2fkUn973?QM4(&?f3S6Vzq&D-C|hX~4DtNFO0-@Y_~
zPQteW&;HAFCfo^&?a_bmEx{AU`UU<l+yqf16c$aG(DqPuDVfyx0fgJ%u)`x!*0e22
z$=S-e(=J4!ay@rAKWgLwJ{~jh{2K~da+PFc;XFt5(T{qfi~8tEW;IbXJ|n2L$+OxE
zdH^zKpY4@pBr&DN7Uz267voX}CNzk{#4~Dg&+E@eOpg01SI3z8x%h)N9~2q&&;3Dm
zk?R1T&~j|-3!u;y%%9|DFGRd=wC}AqKeSx-iR{B18nKQZivbfW2Ns^ZtJL&`ZS)A^
zIp*w>_jXalqHApjP^b?Iuh<^Y+Bl{r0%!-%n!As7d_#$p?R0bTl-jNA`o#F?;Dw{H
zA(PuV*)85_fl>4bP5n!PVHgNqLu_Tp9QQ3l?q>Kz85b27-rZTFrO{KH6PX^A#l<f3
zs7#|glo1WVc+@}$`Pc@jI?LCZ0d2m&T*BqnjC_OT{;R3NG%ace5nqAl98KaSM+UPC
z9Xs1)^W3u6vMgS(dP3w0+xpXI4hJ_!W79o>pb$v`$7~{&;b+PEXdpTPr~P`v(u64j
z)MBz8<r*WkOb@)*@!{G6(p0^}K@^j0#bb$+<HLS_-f;>(kL8UF4>UwqNaEiZ|DmWB
zh<V)iGgg3C%Im;dmG_FI5hl+=kpC|N!?TdglxSkLT0JrYdlm7WOwk3X@^Gk<SV}~D
zvn%CN<mB=0v<gy(O`CSKou}V}2f0aphuLE!Y={->Uy45Sc@3tgf2`eBp?|-Lo)Sp=
zl<q}!wOWuT;wQ9a{r3k~-8^QLmR64IEsVO*5@so=>LtGXVQ$A#0{hrJ%xv(5CN)+)
zb`I*Xo4>Hl(SCj2uV?`S0e@wxiRd_nw@fMB=hW6+Db_j3=WlXF_%6quknFw{m3;}g
zw}ZXmdVg`y|1?+rpKh%D@UQAW5T~Sln3I;GI8#$HN5v0yVvqYcA5GvIa9@?XH}1Jc
z$(EZ(Z$||2ZwJqZ-|XlS84T$?Azy$Yk}L=~q#eLjBy1`^DcUyJaYke`lkYqMN*6Vo
zk0u5^P&PZs688dfy1{sWe0fY|!MGwU{bD)P7lQ2R4%C-K(8#h?UJ?kWJ7+s@IY;RV
zi|LwX5`C;wvm#QXKi%$+h=}CF9b&}&HSF7Y)`ZDrBXSehg%gPLP=8SPVfyVx%wWs@
zVHl0DVFTe0gXvMna;$2SmXWYg%8y$8T^}ABquewauH$3md#gXbBYQC`{FM%u<SJqb
z`oF{Mw<?AlzBXhb+Z?=21|T`_APs}O*M{@NosCdGdD#k5ok&x!1l$!bm#L>weW#X&
zy-Riy&AqMQ6*?X3ZKo(XnlSNnvwXO+Z%#(i-POnzRLqNHaer;9_uzcttvUmVR{tH8
zlUFzo<cAMcqosm;pLV-nzVBJ%+2;&oa1!t$0o(@v%%m4tG6)Fo9VTy{A&dp+{}e*u
zjgALChbv_GNb*+_EP_1rRF=MR;%(x%TITgW{|bkyx%Po$SJ}2+;P62I@dHnV<0+-s
zh4JM1=8Wi;-JhhE$vhZ3z?QjS2J3Ru|17m?0Mjj8XDM)%?waki(xvF5ex|eO4&rjV
zPxd@I9}KxQj1<{2@LwwlHxcUkxtCSUZp;eFwP!eKdN;Yy<UtOUKh&*$-4)0oLT*u|
z>(xF%0_=%UgH6=S1Ja7sNo(6Z@{{HdemM8A6ozk<E}b#mpjmoiNt|5AwD^Apw&TaE
zD4a<W1iR#`f(>g^a&AbhxyFtoFTx5He_tU;Y5%)KXx96h`tf}|3&`nU`YAGIH(c0>
zdUH`=$2v9`A95cW-WL_hS@8BK9;5&%OvyS*07OY=h?1fZz{w>P5C>Fxnsqi&5L1nb
z)`6l>(KyNFvc?6k*O)Oh@kI3Dqo&3aD>#lOY(w><Bs%6_vbfoQhQczr3#_d06DCbP
zgvC+Jm2W7Y=4GA*jWvnY7G5#=ny<c+Uth_T&3N-X`t|DR<@l4opOv!U@p$YEyw0gx
zhMnjCo<tvrNtp`j>Lm<fKNj_SU(-MO)b?ywY7<?q*R!p0Wa@Ee=HBb&M%Tr=!bMJ#
zP}1sVgrZ2{Rj;M*Uc~rrF{|hwJfm)neKi)B%eabLBKv?BHdrk0MoG}bR43jsuk5XR
zefq{mJyiPGbi3&Agx%Sdr4oy=^;gYqYq-_B8k1h?9{ynP$zC<(oXZ{CH_f-A%h!&J
z5>~CGWE-`6ok)-1#}(93-@LNfo@#cs{P5_^4t&IPj)r>^N~U-C#lbHZ*Ns~xb<@m<
ztDfse7Lqz2Mw8?OwUWJ0@#e~{=ZxS@I*W*IKbhvVY_ji&xkub;_M0UUancu2S$+JL
zwwOpy>7xalPA3Zv3WmOkdJ}HAdCx25V=fY(KCbf4#$MYJ_e5V?-+aEM*LZpd`$a>k
z8>zKc+z)OV6m;)5H<UN@ep?%m^v=spdREe&BadfpDtMS*bM$DL?%<1YS5>W-u9mb_
zg)R99yDP6=-;sS)Rx$I$<&I_eQE%_(J(kusa>|$6jI*py7dC5{?W`EJ4Shgg)na8@
z_M&Z{_m=y$gRe`~qcjBd#3V4|F>bc1Zif>#s2dbry`Y*B{dxYqv$&VoC7M&1zBhj3
zDTVbjyFPE0GO~Wc9^6~pIa2cReR))~;PfYfua64VW<QgnA<1-gbJxjmO}n2%4{EWF
z+ITByt6Tdm8jl%T<KBx>^6(0Sdq!E)S#Kn+5X&2Khusv+Np0CZbZ@fOblS@&-LKPh
z!!35CKUs4v$4Pc(qx8pd+M}0MgZSX{{(5Ad!*QF=Fq=y36V~^xUs_1gwZFsfeWvUH
z-xUKN{KLq)w>71S#*T$0H^o&FKOfn|i6Zd@?4)hQ9(OEX?KpSnP}BJIx&v>QU0nWd
ziQ-HDk<><4kqft0^R3OOdnUn*omHziHmOFp7i<-^cRb;B;@H#6(e>wpn;l--9k(96
z-puf3T=Ps`-b=q|5+E3C#z^+^xm|=-#U0{6Fuz|i7PEXb!R#)&=T7hRd)`|-`=<0?
z_aFl3^^J%o*1iOSrWy?HPH5%N7M9e@v#ah^CL7++-qWFfGV{~erR$F#7QalKR9JU^
zL;TIW6JC<U;zjqATCdlsW)CIO+J}<CGW}PEmta8XzoRQQN)z_SSi~NQnvmf^A%lyT
zX!8?Zgqcpv)WdBu4%z;^R2AaZLnGE?&cIm}lY?c5hTpx!ExpH6-Rb)${~zk!JRZva
z{Tm(;MKvV~m8pnIQY5mC79@!_Q(2~xY)L91%qb<=5<*diHkFuUE8ApGvPITvY$5B6
zWehWOb{}(X-=g31{GR8&U$5VF|KX}@8Z+nlIX|D{cpvX$dHdaAM;t}|Yg@FIZAsxU
zP1wDr0>{qACiYHwXGT0~HL$U<l`5IHF#e|c!|i^%4!=E&IgZ)1esJX~ADeAL31aDd
zosIak#<z|Ycbzw)E8H)8^jr!z#2ICrcC(H;EvFT3A{%q{_l6A22+!uxeztij%R2lA
z#_3Yk?TJBW2X)}{B-=hJeciU$D8tOa+-?2)T^<6`+r`J{14Jt!|5ZA?5peUPYF%96
z3adI*Z3F#!rws4aedY@N>z3Hb`+YcHvU<h)-oEW-2bAY*6MR~$D_uR)A9%Y!ddip;
z!Z3m<8aN+x4eQ}S2J!m1dC;|-I#r``%7!5xi!558qO3kI;d<LSUDe3~BCsz7Tk&1v
z`BF&Zr$#i~7-kweb5ueH08{L0EF!bkgA46+ebZij6*tEVm!wB=H!0BA81hV4!r+2!
zVrzl2(6S>64+JHJgoMJZ?g9@q2{$&|kr5r_g=KGUa+IFeK-r?egdjrSQ?e`Tc4_Ut
zJ<-9>T6RlHmWfaK6C-f+qb8H8ig>hC6USYwjX^YivtJcEsDaeQULH0}VmqCeIAn7l
ziF%|KA)cxq?B(WsPLg>!-&fy2Jq7yu6jJG-#dvAf?4eV1wHxC&Y+l>`ZFNJBGnKDZ
z)pW~QHkFrNKK;5cY;}~yq#bd^ITc;$vYCsCn}N#+x4i#CO?K=xjT{ET?y3<2Cs(A8
z*5Jnuc=6aia|#rP)Mjx+g-X9}X3z#09ZrPOmTyB;Pi%m#pFH(-c(-2gv12cFKdLN@
zPgSo{HbxYQr~Wx^=skQ}(B^X7z^9JKVSC7|J!jQra3eiDhV3>mY%rPRkDvc>HK>2p
z2)G%e-6F@dy(Za5ixkTSsEm_y7Cj0#5$WrD9v^kmN%k$~ydkKDO65cH!1r8Bs}<S|
z&pw&5%COxtHo1KDb?Eg}gHnPKA<k-E_j<hQFv<`3vAD4nN8gu+Bh(^i$o^7ssn*&d
z_tezn3=;z$gz%-`nP2smue?kSP_qeZSFQq7emg30ghDwAqX2UK9)FL)4mfpuG1-~!
zzc2S@kFkhqy5qb+si95hdif-mOFNFi+yxqxir1X3fc{jO9~dbPRI>O!alg8q$_>^c
zI$1w6x7gdLaawd+SX0N4RvUi|20cV=-vIL%1f3E3Y7-uTX{2=!3aw*loH-HDXp=%p
zZf+tvD09gsnc;n=YG(pOGKIX>%8T(OL7Sp2q={5KA?Gg&G%$NHkh;W%jQd8N6Tv6y
zorg9)BrZss9Yr{YZAs`7l#k&+nea6es4@_Q1o~SKJS&D90N1C~n_U&lV3(>mY+bq}
zHOv3#PNT)~@`I*y5xz<cvd5Jtk~TZzldG}HcGjVbt>ww{qBWij%jt(+5}jvjFG=}w
znFAQ<kJerOb_1?gA9YGVjE@CZ^UL)eLJE&|kf-K-g%D{MnREEU_(SVQ4lQ>sJZUz$
zBvU#pw>9GIWm`M-coD!|QSOQ8RW&MWkvvei2Anl<yr)<>j0zZnxrOVQLxww_4|nb}
zf-trqh4S#p{8sSET4atf2KVdl6F)(!a?jL+DK~UWe=Iv-qm4$@6Seo>TKO9JHyBdB
zS)+@1GhS+>CZHSy@?#y2Q;BdxhDW}B2L`A6z7yiSCjH^j`l@o%hsU$q+I=94<#=Sm
zO1efV(J|?Zazlr0X-~M=CH1ybVKGfFJShu%m#AbU4<$M}D_fs8RF;`HqCB?}Lx9yc
zDx{7H0^ju39cCF&L!DdG%p20l(Bu>s`<V9mXp4Ej=!SDe3T09oi`)0_#&`;&g-E+1
zox&A7L#40AGbo*{%z;|fWOJx^Pkd&7Y3b6aXsP0m<u#D9?@!%EFx@WQ0aL@^o6_Jp
zOY)v`0G{<6ZNl5wKYq=PAuXxaOb<6~PhNNTPWT7o7ap>4hLjFu#saX9b0ZU?XiR&S
zxj=7iIqrJ;W1HhU*DXoyTIeC@qdfwNE{u;pc4Y$}o$MD-Ui%^dKQ@eGnN6;o7l(Pl
z-%%~XfAvN4Ed2KlJR@FU`i+PFa=L()xt0a%BFS49;O$|&tdSQSzU{F}oH?N!JN|ZR
ztHZ~SrAqwAj_Tej^gqxl=CJ6zajH7z`1$jWZ2=pFcUuVxD!$gqDJbA53_|QoJ(?M(
zgwcESAtL{g>+X)I)hl+a%M{&oBCO1WBF>l}cYpcK75iG<^#%8xC#0AppEtYQG+0z}
ztV?Cf_0|s&*Uvw{(EDNORKul=9%JdG`LE}-#|vXqK0_;HYO<AzrTJU^%8ySByc3Ru
z)(bxt|JD^9jX#m0oFhSEh&1_nq*y;cn1AD&myG@F>km^N?d^7Tw7+q>+$`+KAaQRO
z*R#>(+ygV&*CXE~_1k>0`%&caf%>u6TAC{|Qw8w0YITvhnw-K)`S;4++spQ0sub3J
zyJaMIUxAabD^>b)9Qo=w?+}v=XY24s9&Q@<1vh)Ro_Wd_bZ#y7tJ%)l)LuPr+!F_a
zg7b>xss&a433%dTuORM|+OwY&S2P$dU0kd(l09#U^fl6h+^Mn-d~v1ZP$}6%yyT^3
zk)_;-MCR6{dFKpPdJ-Z-pT}2cv|BhlTq@^DDQ2%b$+$utxf{hUZ|c)IAY-x6d-RC)
zfp8s}i>H>)+9%Y#t-2vK1v-?mVl749Nqf?E<yaVq-gtLz)1HwFhs?h3wk3Snb<Z$Z
zIgFzm+U-feVQa6gT30rxd5>d!^QK&uvKEzjyZ-TO7~R-@_nzvjE>6=<Ws=S(2DSh{
z&mNV3UEf*1;bAU&mER|eTU$ll#<Up01R7B^y`Y0O+fiD2PLg6tn%F$j!PQ>x4zU+~
z%-84Mrn*u38zOv99XWjI-hyjGoq66C@<Y8|=8q<;O<4Eoj(V?I1a3mR=YHqs_REIc
z<OZuT^D39j9avyM0u9a6O5z2NS>MKz4NRlTU615O+7;fadZer%DCFy{*^xhv&(DbZ
zR1p5vX7g)P-IgMOMfEP<iBaT*UaAPay6nQy(mk^06)PWJy_cXFO+Kt8Wg6L0n|I9X
z1?mr(@FrDtbjz+f2b@C|L>h&$HUViPojqpw_f$w{w~NAY=X*h=1FJ+S3uVbu0}ld1
z72T3|ew|v-eYy5~mkqCd*7514+V^|mi=I`gA8jU=mvO{1ODpzqUyd(x6mcJXAhq?*
zrCnE+%55z#Y$J3ZCOt<A%rCBRGv&P@cD_b;x6DKPt6ru#DZ8A)A_WND#A%+gp;&y-
zYbT}YZDzx<$jaPx_n$4V3REe7D<GUY&8{B~b+vc3)-<;&WRA+I$p-Gf?jb28m{cRQ
zecBsmH~^?{o8V(B7=w$iqi1@20T(~te(#53aPijVvLnWx-~KBueeH{-48nDpOE-<J
zDvufpEW1%4;3{xB7QWEg4?H3eDOVN&AB4Fm-tz;q1nG)|5yx+{L(vFBOCiphd~u#L
ziADtsP}Ks?L8xLF(ve{0&rx+WToYkXFMilIIBj#*ISi&N{4((NOM6qUPB)NtV6%Sl
zq?n%mA!NFuT_+ei4tR52M;b>6ym<fx(ku5b>rft`&G-eX+9yjrm#LpUyEnpQv7Qva
z{ibF2efT488e@>-w+Z;^Hv>+MML@4^C9)RbSg^V?AU6r3k3#cy;?%rmq-__{NxY5F
zkA%4Gs;Am`>(KVqD-J!DUj51`Y|qW6h1FGJ5rG(#*vo4(nSkN;k&o>!KcO-XIhdXM
za$_((FaM&W+~?fM(l!^OpDH^Ukj0))7xR>etmm!@@0<jpTC8XqdZCx3y*gbaVV><W
zbdeGd`A7ls;W2Z<_@B4&!|AxFHWfb1bX%SCs+>igZV{`?v$R#x@0kj^aaLRL9*$}>
z%3p?xC)y<1Pn~iSyzeOf;*6Vkz!FvYC%a7r9R^qQ{yk9R&q*Bbom)XIrvaAuxH^99
zNjKHZai-KmWT(=Ed|zl~E;!<_UDT4rox*D$P*>rje<|DexrF1t`FHHUYe-<&?M>^8
zR*nlsrHwn88`WIQ$#XW(@i(a(SnV;iapQ`U*Cie<yZ@!h@384y*?WAtOLWQ|e_*r@
zqLbou8b|D=#0hSY&Ke`(4QDeOUfW<6q0v|uD*!_Cjo4d|S~KX*Uho1^bc0^^*)E)8
zEOQ3JG-p&7QT(KpK5E%?B%c(y`0C?D&t9eBp`#m5hF#lA*L?SFztO_y=lHZ|V-PvA
z120m7$k$uS`m@REK@Um)1lhm|C6*1fg@6W_KySGb0K3ws!1|eUL2BVPuPs?1i^_5E
z(OOMC0w6D>woHET=+g~>5=h}T?*c%dQ8gfQMXx~8v$&#Uz;bO-faO96-+MTsj%}1u
zoIfr76Z1_cmA{{~qApf9_nJkYlxxWgIsK?vPo)nX{;aDmSq+VyE4kr~sCy!JWZidx
z&CAQA5_Eioqu_+lZBY?0+$*tuxbe~F&_uqFFsw=f;8I|nFTpWjg+1_64r(9v%P?82
z9a8$}>{8>jn1R9-D_bmfBxhY(pwcMlgO8O$uTk4>EG*i1g+Z*;^RoEv{!WM`PboE-
ze&<O{TXe3mi_pNAM_xNKxCy6-*Dp9md>=j@w?<~SW5$)!qUp1SE0hH`Bn0+IO7_9X
z!ia$=>SzgmILx3~5$Op;XsdJas8lr59!T5dc4y9tqd?lWj8Ozx0I{fxE;hS{V%+^r
z7;CPH-jRJ>m+~MdU=3!ozWZID;}Xjk-&>@+LhbJlda`SG;~59B%Y0Y%Q4|@rWw@)-
zvl^Baq3VpU{_WiTi%vP3bN95goC|%QdXr#QFyK;&xg3eC1Pp($KcJ4;%<_3AvliF<
zc^2eCLM0TYeBiM@=EmTAlX#7`LXa!JM1}I;Mi^B>g~Eyqd~m*u*DCsxq)umH2kJ?-
zT=Iiv<EKX~Jj}xM<Re|qhAta$wQ+iJ?(Nlg@z@Wv3`?Zi7Fvx%kkh!AS__TX%Q<Vq
zk9_))Zdbm6Pkth_J_a?RwnxFBKjPFHo%Qg<6o(-&qkJD`>aeQm{_So974*^eiDJq!
zyL>T*j{lQ2`3aBvvi<TR#~&3m-Ra4?+pzodtOX6G9`V>3rB}dySHu3w*V~6N71zh~
z&UQE8s45NALN&R0A(f?(1~f~?poUe_6UP{*l(Yw5N{|!YQpU537rfHja9}>rKYL!i
z+$OMmk?zvo2e~@^%oy&y7iXWm%40oj5AqChv+KHPe6rGV#RAErd+!P?^2P4KFz54h
z=*fTS&>v2+v_u@NNR!YFX2>yMmr^rV7=R*ftZm&;{MC*`zpn7z_YV_}rmea241-zI
z6+wJwmcZUb`lv$tT#YTP7BgHPo};ia#C_+wliLOK-fiJ)BRl?cB6U8w{=mR+o+(wp
z(KF5y1YYy9*n1$Sunr~-%ymXspD?6cFO4_h)l5Ft+!yVqq84?$t3wV9C%r#pTi4a|
z-C}-d5QljAxPK8zTA%Q3XpML3k`*Q&cF-@}bnK%x=d_y?V<li>)fmpd@vCHhjn)bJ
z=)ro+4da&EI^w$5rO4&TNeo#_E{Ik)Gd<6U>?ex%x%3f8n>|-pS7IL*1cV#E7YN@v
zORR03DOO_GN?J#SNfr-d-j!3~6P|ncarHrBv~@;yPM-IrkF*2Xew0~SX>-VzJBNZ7
z?rw`KP2K1^xTDeHwdJ}N!<{=e7cAR@%f;pq>cShe&FtH6EcF!+!XO@5%So$WMa^+m
z%{wtfIIB~&Y3}kfI+6aG`)^B@?Rc@S<Kc~S-I<x1?20_(NZrte@t4oeADXm2AM!$w
zAdFppW%!7)1J=XZ{>9t#tGS))wD-Thg-awBz6r%XXz9D0mpeCgRrr#_RU|?%j**<a
zdbi@K?7DXgR^58J6Rh&%$?M)%KI`~q6z!<_wz*27G|%vGh>kh4sXzJ5&Bw_l_Ginx
z`V?Ln7h@KvyTq|NUaD#;Y8JNKLnUu-sQIva_7Nx9@q;(7F~?Ho4nEF}=_oX~<S41O
z>wO8aB4TLa_7&TNzQ;U<Nl9W;rys7ee|QF`5(VHX>MYi>xzAhgd}I8Rp{mQ`$;)J#
zRaZ!QZ9DO}MN?eu{iz#0-Q%T*v}4?8oMwRV?$!6a$4^Awx=c=_ICQ_rusnD$D|AQ0
z@ToW9Z=?Jxg^wPlAFiRh_v*V3n=P@8yHq#4%%<M@{A-DM+J`O_EZ<c9op3$aKIM?r
zMv7L7bIZ28Y;%P}%O0;<bEVY7I@m|U+kp737ltdv<<6zo=}IfphvMkO&jLmv!Iv^e
z@4uC9>v`;s`X{ZBu}uABlQrtRrP=F~|A+MvYjK6F>bCQIl+&y*#z=LCyx(B1!jh{`
z?HZ$ADWs=WE-PAT^?q@b<baE1+Ox+W(m#*NxOMC2A5kfNU4Ag2u1{M#yYZ%%Gkq0<
zb`5Pj8Km>@xKV4l6z2m*vr~p5GoI2c_hwX${MlrI2M&%+^*N7}tNM)>T~eCWZY0>P
zCI}kbxFvCkBXl`N;{M+5H|g3!=$zrFmVLNIsv)uuBR?w2-)+ubU70#-6s`GAtkv_<
zW3TX%tj!fkbRenKZDDOV*@$$0F2VRc4!ChC>?PmId$YACwdbfZ2QSxWzUle&wb;a2
zAS8SDr_g7Z7~8)M_KW?;B+2iDIAW8c_*UDFSr7d9*_u9(4=xpE2~*ARZ4VJX9d-9=
zW&xx624@v8RK$j{B+5$<wM)lrJ{60eN%J#56IS{jEbP?+35x%3tY<uS&V!7MFZ>qt
ze2Od7e~W&fkTQFAvRgCA{ArA2yGvDL$XgqoVlzOp&g562oLKon3VX>#GI!0*d>;y#
zS3dWv)ErRegp#17FosE~?p~Hu)kBT}O0s&5{l~hy;g<X&R3e<DDWH4wP8(mjY>fcz
zKZs&DU(DijR*903!k(@bwk85g@T2s|#>9a<w&A;kx^_a~(Id0w)KYeXe`;MnlrMpP
zpr+e|7L(_G{mM~dXf0t*Wn2q4lnZr#dLw$y(YwJ%Fnr-AdoXA%>2HuE=KU8$SYKk>
z*OD0>|2_Kh*DSXM<iw_3qn|A-G)m@e)>qTaNfmw`FKVbh%V)#izo5`gWvyGjsffMA
zYfqHekuOfk=iXyvxErNA^6Gfb8e$4?*2KS@^`s`Vla)cwf?9xqtWL5&QCN%k$i1TE
zSn-nYHjjEIYKXMYuPjPr<~X&vg}r|ewdzpYEMBx?{ErFW;{CiI^~7_>99to(oZ$i?
ztLw~+gzr4qLE(r3E5~?_VPG@9{N+zK_rz?^G~{8k#y3cjBKnaww#N%%8DDc6s%pSd
zrVT1WY9X<N$XWv|Q|BSRb}>Q@@aXVPD!lXX&+h~>=a+YiuQu9nbma4s%WWNb)x67q
zi-XG`|8*JonHL+6UC2J%$YCPv-o`OtRt4};M=xRnQS0cEs_5W*@WME6w(xZCMCu2J
zznsK_XwDD3jDtFs0z{jaH(na!)Oa8*rsl&U`Ol_%lXA}LyVR}r!8<<v*A0yNS54{s
z9ZByVI;hw_=v+cgt1hO9xSy>YpKoqP2kz6}X<<dBRzp?TgR5We_&|Sz%WuS1Qi!Mo
zmM3ZYz$6)=L6vAne}8ooo~gx6)LBOQ^mP`4ax;HLU(8njCl(f}m7jZk)guQV>mIo-
zA9WlLV`AfZa}w76@snHK5n5{E2VC_<PvSza!;BS_>*@W?Xyv?#Q_r<pjRux&?{SD=
znF>AGPh5!<kw_pmYPQ9hJt+^(#8z4KB<3}iA|u~v2d!N#=tZuHTzG26#}<{%em1hJ
zoZfnOB;o*y?cu44zD7nic>(yRSOS9G=}S#;;3-!50+)kGk<|K$3pVO3cGsUMW_;f|
z75GK<LDHOKglq9m#olea&p@3Vr@&kIDj?<QEDBnh6v|zlPAMj{j^kV9(Ey!{9~cru
z&>j6u=t=GGq|PCgQ0HV&uTwMhldwh3i~F+cvmd9BpNB^nTd&Do_@Zy|xu#QrddtTT
z>f$mZISELC71A~0s>J5EN2U~$V4V4~QJym8gVcuztsKt^<m~2VqYF7k+?0I0CC8c@
zldJ8@5Go*Oc;CN$Ipq$2YevcQ$e2wQ&pu!CagWEA#mrRWZR80J%oAdt;#Jf&P={L(
zhAS7oqd+H@uT$wd?v<M_XK^Q2&IxN-hkjuO8TkmLPDWqQ7{Y|Te<{<ii?bsz{Mg=5
zCHapE=_~@%llXpk@Ge`DR8P|3K1F5SD+*}y$1TnEK4lPM8v4X`F0Z|9DrtD!B}^B0
zJA<1~`c<A3HKn#gba4iz8BaBG*(T^lYBI68qG+nxPY1)%pjY2WmM%K<F@65lmcFms
z{R8ciYb}>aemk<zj=x2LwUZ}hx5fk%btLPNu_t>#rJcoOg|X+NjWJopcrk|<x5CPk
z9Un&z=fy}a+0w!&*L?MIa%$mr=!xtGGrGzMKQ)L$uPLxUe?+>(0YzC@10kY^EQ=z(
zBo6x9dpf&bpeG%@x%QO7rOi*o5BVBSvW3x@7l^Y-)5yp7UmJQlQbLx$EWOcZwKr)k
z=IRJ@3m?;19CBD{Jp)b<Us&t^z)-^xhS>DY3wdNlXK71W5z#kagXP~o9%yXx=NO)}
zXYR)wk4PO7T_3r|(Bh97N*<J+VKdl%uiTfGM)kWe<e8T~X5?Av&GM}9KJg-EhxVLT
z;ilSrk*WQ}$F%gU!3_3VRt_}YMz%Z8_uBi>^`Fzd_>D(mO!LPr78J9S7)n=ZgyE2?
zT!z6=^*}9qKUzgh$HEX%&YDnO<<K<`j>(3wj0w&fw?->MgvfhrMAxomnwvxV8+AUh
z7vQat<~-Y&F87@i(aYS(gCgjq-~~FhSFU^~eo*5qwnk0N+Y`ComdJP6Pu#$IPl-!<
z?4xcvCxV!&+}IPZWBQclI7OWc>|yT!W=HxGgBk1+v5(k9V>+8h=Md+dv=`qW%lo&;
z1G^>I`kFD!&>Of#UW@2Sg%dietbiBW<9jbTNmaU?-yI@lHpl1I+;2B#<zIwAmBS68
z_P(&AO^leJtNr$9`wg!7{FT^L#&k4#l1mioIBg2WOLh*+pKjyF*_D0Y8^KiM-u?Dw
zX}G(l%4~%k_D<8~izCWfHn*hW+o^bK=P3m#H7*Besv8fdpUM?$nWC{nPWXYNY?X4C
z`E@MKiOk8SqW$%JeAzcQZd-m)Rkduumc7-|aCsUFf1&XFBZsAJq3_#l87av0&zkXN
zO+~M8>CqQDD6Mg9rUUop3#}E1QUR5<*W`w6_96aawJDdZtuRnq_cbjC*%@q|?>O4f
zi3;<vRlf)<Mn8D^E~jwJqC17?85AA_$RgE{XXmT+(iSM9i`}y;ibw3#q=GCJAF4>0
z9lFM|mV;pFIQtT6{ZC1Mw5<MA2UZ!wjk)85Ps2f3*@y244gKQyiax;+W49sKy3O<W
znJ4Nxvx5Y;oz>dWcqUk5p>5sgt79wKjh%jC>rKs9ZOiXr%Cq^=`nV0;WRjG7M2CD}
zdaU;10jaJS*T;{em`4UXGky2xb;;&Lg}r*awiL6!iu9fGR*AJn4P^bWZCP)f7qJ{W
z5<|er%y)<;t&Zzc@XWMvyOQj5OT8u0_gxW`o)5E}tD9QUz|xQ(7(^C~u)+=#N-yQs
zj0K&(;+QEkaFT!etJ8li9@{N6O*a!JqK?s+_qliS@m^jmb|(^y2x%>P>P{)J+E6b&
zvFFp7$YWoJzC<1}lsql)Y~@Ye?^f99rWXpet!79yQ#H}Kq(*9*K_U6-S7DYdV`;~d
zyYZ~V!ffrEcc0r&Z0v9}YTa$NF5%YfmC72C>e_mjp_hG{rQzdT@dCmvJh4-WJ+BWx
zb#RT#6oKQn;RmKa9hq84$>2D%7oiQ(3XCVz4)Ovo<xiBc`?jXpd1-G#7Cvg25KRx;
z{pQ3-_9mI82Dw;xd`-0uOJ0@JA09nqxIbWXB4(33tCyd>@)wI~cUW<&TF}0X!0j0y
zWe;Faip^R-h!G#94qku;@(hMET4D*7)lio5K%oa|`Fk38b{QIOsEaGM<Tb(yG(m4u
z0}JRcB7rz%sOq)(cNH>C$uOh#Ph}XwUCw@1Ii1>;66)B24a}Fxpf}w2#5X6z4MZBm
z+IwHM(;7U02xG?HD|BIJY?204{Ld3n`P7^v$8e1f==x~3HQQYO^rjb&t|`98<{s+&
zt}9)xC*FyOBX%afGy%D~L39HvyP`<cp+e?Za;x&)sMY+DE!Z!gRmS77ryk~cU4eZ%
z$zF!k9;u}ccab@Io|HmRV8G4G-_q+Qy@o~TP#}tazmz4|U>>yNsHp4V^Zw_S`?=yn
zFqaSib6;?O|HBiz{#6rC0~PKwkiapeSuAq`BQan|r|e;`S(?>X;|y|z?-!AGt)@%V
zP4{8sKl*5_SAf=%%h&-U@Vr7lFzXs=oRc}^>(s2Wfn<hTX^U-9HO9SyZ9;62{MbMn
zAh>u0-}tzRCcEdM@S_nujCaT%b@t+2R7sLLN14UfzMJFBAQI4$+Q)B<^vLB=UX?3P
zA8r-SIWIOEY$}vYm_A07xECp^K~55<*5W7k<wJ-iJ{b#UbO-k(Vq4vUYXkQLv*kjI
zA(FiuMNSrZ(*a%E%T6pAc`{h1@5A{Z2-O=TDZ;QCXW=NS|A%mKKd|W+8rv#=+niXx
zpQy!g;Xc<9M61-KjDa*?gq$!+*+8+=snkMGzCE;!`@uPQ$qE-3Vn7&O443i@4p|f=
zD+3#TV5ZF7h#-AKAHy|8qk&lTAce{*AuUD<O!Bok8@LJi>MWix?p#&!V4hrs?)CRa
za|4dIYFK>UO*r!|m_#^uYcpJ~Q{%WNoL=a@h}c?39Z-Fa^p;S*2~(43ELk<q-OT%-
zHk=F|Xy-8u7ylp-*z68}ke*lMNHOvg==~i^!T49>T%`)O9<?duTXT2mEBWf>dlT2c
zrQ7ij2><4Z=2z2&LbVhb_=0ScP|jixZbE|Nt)L*IkWk#+MY4h|?MKdI1%xpJYais}
z7%+&|mZ?iO2pA^{xks1bPkl-^dUj^0ojtpA^1|B^S<8yK2d@j95?#wb^t<m0oxYuX
zbcR1syTsv+EdWT@7$X9gvp9ZA`2KYA)FMiM_%JH$%oe8|Gq!Q+<c?a%=m&AhUdmOQ
z1ouimp$b56PTO64=Hv1D#>}r6+WeyQ8?=@sGV6O*j^Y#IvDGmOLtJxoZX)}%-Q~kW
z8P8ZE<!N>8;T^VU%`4550Y*8;_Zq$xXd@K<IYNE<)M)@(jf@lQMP7z<w?d_st8Zxw
zIS9hN8*exIS^HC2)X1a*^J8h^DTfc|KL}wO#}Z)tz;<o`(i;!c;5FD_sZ0eyV4DbS
zKc%?w@h8Z43s+7EVGKg1*?in=<TN&f3<VznI?`TSA%&DlMYMy8oSB+W-8QJLles@q
z{Crb<oH3$t`=8;>`>jUlnoL_(E!)7tp@AxtjvZ{is24C)*0S<y#nB)EeE!9%J#lv_
z3DovRXmW4lE*|DQ1xLV`;*F)BAm7BN;Y&lCOFIoSSVi%$x07GM-mVouPZq-7uE^hX
z#I?j-6(h#e@J6gDEjZ?N`X^ct$ng-_&U;>EJFYv;KAgVHc9)^>V9YM-k?ea{ZaOyo
z_RGe8V1j6Z=xVRIjN5S-*2Bjj5YYd!NW92=GPM#^81%m^))*1m+nrnJBg~tK4pHk%
zWYCZiU7&#!6aB3gp!GGXCMp9HIH&X=BvJ;Dzic>+4G4Qj(S;@fBHBtEGog+=1V32T
z%Ri;Vg}A4yG9M0QlN6pSF+R>EnR@YYUx7YYvwvITH59`+!vGN$bQ@hS{QFd%fAhw(
zI@RZ2d^lL?s}{mK@jg|0d;s_B;l&`E@P7(PnfxUrl{+gBVfr%k13H~=lJE@w>nS>o
zkNPhUJ@l~O+F+tQcW6bY(+mE2&x8c{t+wmpzVsA2Lt*TExVMdPa39q+#uK{zi)gHM
z&I2|HEdC;mjftJra-$}78<M+C2G|X)8%$SgbnVz)AaIIsV&--dqKy&WPP@oy|BHcG
z<7W{+vj#kjQ>4#0dAYXCAi%Lfq<2;tEFs3?0@6}OS*vP@n{NG!7jT|CJR&}uXY1$0
zEqu5^w|wP-F+NT@0SbWV#-Wqi&ezG~;}F3=iXaq;Pd_&GeB8iVJ&)=V=OAf*mV8@m
z^$kSSRcYY<tbzxIDO%6uTI$q81m8v8`F3MDzzK)n*rYt$w#LB(wmJu4oQj*n0(x#R
z`Lu#<j-5{V1;JIp&(qGvY_Sqqpb~?bilP3um5{sPet(hb;7IcHq*nECf^p)2=Ncic
zQ_};f{A1KOGHaU56uh{M+V-6Iidv@BqIrbn=}Px3qPC{m-Ex?FiBu;bZN9hWHZDI*
z<yPVoJO0Vrl<%$RoMeD&bsZG8)LH!4&5zX8`02-z3y0J9I7p=@vbDXi454c}ioLX^
zn2aH+>VWBFtx2{}W>)alUdwu~cSQm{Ft~CJZ^FjkKa~IJr2oHa7U}P(IWGp=0w|Vb
zFLNkkG(Q4urG`Mm1^$MHqg+?`KHLNk>stO?(npdAOhbAm7qqjcC(bC!S7pnUQ(57g
zGX&>O-Z2$o=IN1+BSl{kh-T;X6IlufuV~e?nnzJ=U*QPW-5E+WO@+R5Nqdn38+=zi
z1YB&10c33Nc>T}67Xj6+6kmMX16o$%0GqvsGbf#e(DR4)lL`JuGV^S*UpcyS?mUb<
zGAuh9z1&o&y^@D&XF?a!yv7+Ar$%T@kyvfQ8xx|>%h~tya`xv4@M1WQe$ct8ztd#U
zB*}fjXuE1gWHAZnJEcj<_@bCP|6HwD>+2P?bI>^#y<P##IJyGMW4UV7zyudOLO3Af
z){6j7cO_d5oi79U!;XJ+)^G3$2jIK^PAKykn-4mr_Bc?sAcAL1iymA?uS4h7(LZ9F
zDa^>YzKYUJ!oj}t22XUI2TSrMv2z!%GCksResc+i)cU(|r&MQZ`!GH=i!0zt;fPat
z6Ar3F2j4I}3#coo_RdQ<`{@D^MhT9%Q*2F(T_<i&ZcW|Qyu%Qu3`_W49NL%PA|t11
zb0MoRABP5CMmHs~wWqm{F}`u`e^*5io{5yy&mrOP1w&|<IvmY)355+I&cPnp8#U1|
zT0S8YCec~5&=@(y#L)@(rtYt$Enkfdj?%>J5~Zxi4`bj?FeE=Os8k3iK)5*z!cF5f
z$Q)Ph0hT{19Kn|7?5I)2V_4^ZV9dPDi!;;gqa5Y#^<M8_%-bw@vgz>GPWhMJR5_#_
zrch*>aQQDfbEFKQ=DS9yd$#!0x=spfP4%E9eYoIq4~#lG@#slJd+WO4p%z6wS(n+b
zBxTnp=yzu96S~al|7niP1l9+iMk_{I2&Er6couPf`c&@LaI05e_9=FboU}31e5duT
zOq_{uG;ll?JN_&X2UmAPc}xt3^Y%eLm7734K?}vFVf|n)Nq8Mjf0<R6p_ytkH$B(f
zUq#G*(_!7WEr~IcvwZL#)HZ)I5X%6ND3%I<apQnk=F!bFU&Z{6g%)&#j$vMvii}WU
z=+yWpWK3Owe%c5BoB6w3e@b^XIyZ}b(Tg9Lhk1_qb6C&Zo^F5cAT`j)P<$L~vFgfT
z{0-5!!7FOB#HW^lFZSRuVKT``8(4MLa|~~L`{wfa+dd*w@FPquHYaq?Cbg1kscF&0
zRMy(8;y1jSi{|Gd=Cs*Xt=pd%$R(=3e9hMLS+{A^>yu(jB(`<u%FH-jpo)zYC{er0
zNpNC5!{akbgeHH+)i(T~2i=(|$})e5R?u)M&Q4kv+J0a(2N~a)$sT8@XCj9lG%Md)
zHgP`1y{+pK<v5(aTof4oMGaIs(4CyapvQ>PkP#3368wOwJn9oUGTU2-ZN|~3SC`OQ
z6w0Wgxl$wL4_N*OJY&sbRK%_;KNsxUw*I^Zq53BXs^?&LS$p_~YcgK9&Nt)hV;AxC
zRX0B=?`>Zy|FT?i3tzMz3DTQI0EU5v7VM?5w!kR}fZ3zdtOy218vF)NfS&raU!^2c
ztxZ^RJ-}fZF(c?i2=`VT`R-zOdHHDh`5NM*kF&$S?k=qt{=+tp;fbKldKj5hCQBfV
z4R>J{iA!T|9_b=da2NpMd#@7!kB-@*k!8BLcb`aUNP!f*+@FDEFIA$BT@;^GA$lSJ
zLG4WZ@o9vzAnFaAnB1GIyJHRByfVx1`E1x@B)j+Fahc#%U>{#Pa3Ev(tAJQi1Ae-3
zx(BG~0MZ)T1`?liauH0%I_!$*JbdCfi+RHBbVKi|g@)2QMbEo!>hQrYNt)60-cLVG
zJxGN>Cxcu7Dh$?UjBh<9u|XB?ob9uNFHuirI))$n@>nUyewn)q6f`D1rF_87@J59C
zKP<039bqPBGz_7OEvzgI+9$4q(Qj1+qc8E~OYsofe+%DO$qG=?hO)r_{BWLdVJCMb
z+vA!1SD^&_tmF7;>N@IKWK!Xn3D*ZU;m6pRNuG4!dD2r(YY8$bX2jXAv*|&g!pP#u
zbARTh{?1YTfB*BxziNu-?@)#Zq0B_Ufhvm5bMI;Y>c7FXPiIZ7^H{&zy~qHY>?;p;
zeA~G&{$&-P`XFTaOT?$RF#gMu`ve@aHN6@Y_=1e6f<6JQ#TmVhp9e9mF$8ZiAapYS
zfA_6kqijGRS~|+43OqJ}725g5TtC0gHZQQm`els$no&7|jjZ83>$3}c$b~*SLJtC`
zteGGYqvg#$;$C);PAKZ{7ZLfg{vB=4)U|K}$>80o?R#C`x!IKMugk-DRTFdnm>?$c
zhe~7$WPlQ?t(0con`iagLFG<#?lPAoM`F66B?%WWS3EyXOM_HXn|bf(Hx=*1fwoz4
zmN{-0x0PTJ-E=~i5JxAJ2??YG=VBUbK0vDSEg((-ldOnSOL&<^p9U%?LKjCF`{}J0
z{-57EJ|izU2BLTdY}mFnSsl(C!3@~rF&slKRD#*zh0r<#mx8WiNqrotFe00zWgHm}
z6Ln(t?G%-9vslg;H5Dr3wXyvcPD}}M??9|T#^j4|_~-_O)r;+pajTxS=V?2gmCf}1
zl3;6QeOpl@b@>DgX3GD>*-rXI9l1ah#}Ax_d0Wr-a8a<`wNRKbrpStgYT{&MQjU5b
z7ZSInPDh4woIwd4JMs-`7o}6ZpPD~v+mIywp>nm5@a}p17ku?SYlQBA@^_lMCzRT-
zce5gN>$LQ&JFxQ~=O;PNuirDFwyJQSuim`bZzM6JKsfEKB~q5+==%7UlPzD(qZv!D
z?<s!KvsCS9A=DyPXOQ$i?`UWgHP08>^}&CIa-taD7ccpr#P|+Ga=(I73>}J($ybp9
zl|<zGURUl{Q=uxTWUS`IG?q}=;;x}w*>LKOZ1fBMZ}E%u{kSQ^HOQiif07$kwQM|R
zK7%kQ$=GSkGHJ_+HP<#jWY~4nsPUqYh<l6K=lw7))MaFxQtQk*KRl=g=m2*eq099{
zzUwIno&H8kPXalPXUQX_Ce5~;PL0Kgbl;RJGj?mlg_EgG##_QCBMcX>TfN(Q**SkL
zRGh7?i<_=&gs2?mB1pkb#3mF+YQTx);@c?xjSWkdW}CfGdhET!P$sx^Ww_S5o7)x)
zyzbL*qm%(Mn0aw6_}>5+4&+*W&!fd;G31of!O{upB3H$YTrI=-w=Z?>i#jSCd+B!O
z4~+6!#{Eu-N>U<d8P-8yQ3Q8;6*|l=Lx<UNah3}21X|!HC3M7)#*`#DF9pP_TX-u9
z`4B+stEgR->BH>#4&<rLj$<e_mfUm@72ZxKFi){&+tbs^G;}gNpKpI^Ww|A4(_8w$
z>*I&`W#2VR^aQd&I(GWm_!IKPBjtl$+kaqQyP>xVh!_G~R;EEIc^+CrPB#c7DZ1;l
z^wk+QpcP#u?oT5qVNS~xU(0B4yVQ%M6}pB0s#M^4fhSphDQ9J}_6kNu3SPFkxptP+
z81@>7ULE29+B$Jx6FkiU>OMuVhrvjC3Dm5w>rk5K7kRk!?Af&Il0PtHhyL6}K$W_2
zA9<;D8uJ$u@>kJYTfblSORj$&t+wX<_Vw=ywrBFIFTbFR`<Nj{kYp?^lOhxWfDY=A
zdn1-+|5d7P$aUE@AHm2686l6)T?zCpURSzXa#(l8eep>?fP4?RcadImkX`3L1{Vf_
z&lJ8n8uhDQjI^mzfRL&Y>gWCjTJVhE^xySLU^^lOdv%0Rz=u_NbaKJvjc;s|93qaE
zFOPot_7<PB#-7%|eS_}~1}h!Ia5n!P<AY6ZWtwqs>Z~C(s>Q8(#d3XWpNVaMJ=pbH
zBRITN!eXgNTE)%1ohPb*m6rXDhDkqYcTeAwN#l?jt6(qV?BRx`S1)Vk=+$3ronXi|
z95BDHVR%YdG0L=+^RBbhE!Y|w{Z1HMUOW6(mgui+(f@Ep<zF_~QS2{*)?H~(k<q`K
z8<W4VkGj;ga-;X@>OJ9Kw`OL#-ZW4XeW81uq^=mDD?L7=amB*`bY0s)5!2Wf`ep}{
z!Wrbjxet+oBU_+QTu1u53TyGf)G*gk<hh2$+uEa77w;0q#$J%TB9sVa^>KaNC@?1L
zkn#fe3bdpY@Yqwwr{F?XaSlPzOY{RcLTf6$E7*cy6125!KpEGtQOl(Rzof~L?$C1d
z<!+~yQS$mK267#zIwkg+3iVZz0EQHt1Bb{5O0@Z)L_15E+fAvWwX&HC41>X-M0bsf
zA}iT6`l$P9^Kw}=7sIu;EnXa-Ju+o&yA85;U1ov2!G^zH0gm2<2bJOjV?>U?n|N%o
zlmf`oF82pn+CZxy@afUu<8PrLBxwXflA?gG7ur!kNb)=mge2EpRzhc4)B?EJ$rEPM
zQvx#Ltr3Kn+aK`gfOiNe<Ua1DvgTeOM&Z(J3+5A;7g^L4uaylM>aL!Z*mpG7v%z78
zJ%thT6h=1TgmiB6b%^aJCKCmaws6`a9W^g`dRa+`LRq$1tbK>0Ue3)HNBgh4Bk!a%
z*tErI0vJmc=T+;#*FWQZz1|;R&r_WJ=Zkf5H&nS_z2tb&J1Eu80;O8x6(k7if4(Vd
z0!6U*Jj=RJ3U|FH@^pk@YG%5<*us>WU8zx+QD4GpA5~T7|4Qh@k^T9<&X&Y4fZ;rx
zNIX2`Cfj|m2k!K<b1CiEnJ>m;@Bc@H>Tf^n%FQM<;zt~bOMn;olQc$G|IuT_lT?^4
z&x5{koP@y17xq_qzq=-ymx1Sb_>^OR+ILC>;#dvUIJ8&tSH{T8-9xu$H@1DEl=$wn
zU%jihR6g28*(F#`VYC`li9y&h;7J;^t6i$+V|(k7R>Fb}>ns5|(FTwcZ2<+c9uQNO
zi>XFux0>==$o|-u$9XN;R@oHPe>RW(qTSr`4BwWje9RG<e+q{^*nY>;^Y*8*mXO-|
zm%Y|oe_$@khhK<$BatHV>xKilS3Pe6+miG?e<e38f0aEI>t&GA(mx>;6)XKHtwo=)
z`cZhr!X2_bD~tDe_kY{-*ZtKGHv@ZM(+QJyRX_xmf#@+x?>=nqk0Vu>2YJLD;RM7j
zeiLyu{4R(@!!i2x9AHQ*Yl&Gj-f2MKG&sX)09nGH&jIhUfCl(^<M2eK|2YRWLLKw%
z?1>{{ux=@ED0+9KxRZBA7wO1;%2m@!+LCSjnHjR$SG;Ael=55Yb9=hXZ0>b5jEF=n
zyLLd~mgeBLc<gZKFC<k0(SHd-Hz)dKW}Y)wE3&i+-v3;5<KSe=W=o~(__lQXJTK!8
zWBH<UUfUX0Mw{jM)}C@qI{&opoy<Jl9!#b&hEz+Kf%x)o{8sMl;veH5tj5_}ID(&e
z6iHAEp->Tf=&FA1C+pW?XV30`6f!&4c-`!SaXZ>fg?#^BtiMgi|NCO)8*?f6wzxQD
zZkQJK5v#M9r1<jh4JeSRu{q$|=e_q9T?2yAV<vOT%MRZ_-{Lb9uj8$gjY`$NuAzVF
zxj`tdJz6G_9;F_v-~326>u#eatL!lbvAjs=!2V*qd6xI97Ziv*uzvxT*D?bbo&8^_
z3z7B-GRRZMIO17Lorn*RS4xA2+hGIsv@;VKB1JLc4Og6>^c}EIp8YvMA+1d8K(wIF
zrd{#YEj~I)|3L#VU;BTW_5W9mt-Gq{K`Wt2BZbMVqaCyWyfq5v;TmyIZhd|wwPG~C
ze6dj)Y1!Gq*HsI&*Yek{rGWMYZy?4411N?IMY}-_5#}g_LB`hl2j<OF{)s872EGl*
z@(~-IO~6AYs{js#x#0MA7N}6*P%}I`CjSB#-q7|;o_UA0?u8dvEI$wK6>gH^3-TGX
zmaSi%w)a(M#mHjK%+BF?;5wXs%QL;8(e<g58iPC0l8RyO3TO;G00jt=XbS{R6ppe`
z5qD`Bo*se}ns6!4=HuV7O`0#AmX9V4Z`{lMV9ifChG8oQasa0KcYwB&3@D95_;CTu
zA{OQz?1mdi1^y6hDp&6hCj=8VL_u#GnE<YVa}dhWftFLiaVvFk)Otc2mV+0AO4h$W
zh48&`;4qtj6j^b$d?KxauG(!daiW@eI!P{;iKKIrkmz{_ooV07f+t^>YP!Z_Q+X_p
z!sIOQ3BLvije{gzQaz5ohsv@W4#{81D*AyDS;`h+yA6QdLYniD=q}w`KQJ#w>$WwM
zvo(MNyR#n3h>znZRh%IlU<$%@>TB~7E;mED;?<moKQI%3#2Hl935d3et6AHr?GPmR
zSwj;>=%8~JH*_#o2T^%9Vly&ImH7Haqef_WT%5%}ZC#L}|11cG^aHb>=!5@dT?~F*
z5mTYzOF;atOrlM7%A>xHESXP8*E)|M7|TaMAcT;Z;I;;<0Gf!>Sckq6;UQkgVG}jI
zs-xA}YU-7MeXas<D6T-4R7W$ZG$-_36-}kPlvG!x0>FVd7qHedmKs{5;fCHWBYyez
z$1}S}Z9jsPyob9>;3n`!esGM@N^a!0N$B$Zf!RGW!A-~<Zq8CyuR3SP+Xqnhi%de6
zYsdiv5xFTyS3^E5O;gefC>xFB=rs-xbF{ah^<+i}nNGpCOT!1la*8!FqnV*Cq%v+2
z8q_nXv%@2fcsJ+lc-7{xhG=y8MWi<c`37WkwjDoRFz^p@Vg+tWfjkLEXeb8XUS@y>
z_Mouw*iU?PBz}hqIDmq#D}!v_FsoviwTIfS184LgcNtq|fZU8C%+RTg!}t%eXRB2%
zZC&2E-1YJFn?WB?74g<YkXhoWl1n^8uM_FMNTFJneOe#Ro{h9z=*qQEvyH%6PF8td
zq||3)enZSo#!$XTPnVdabUQ%(!LU-3CsQ7-vAkaEC~Ty;ww%>8da$0O-0&;!q$;-2
z?#-cFwR0|c_NY!l<heitKSschz{dQtg%3`dfY#5Vk^K`fR17`?X|F6}V=Mk#Vi8TQ
zJPCP~U&f6caVncKxJ#|BB3W4H+ao`j6(21eDgq}{Ua6hP7I%V-Lgo-v+Hqn66@#tg
zn}?L{L>!Sq@cGwl(RCC!Kl1E@RU`P1oF5o9*Zj}iq_bZVhkCTylsM|WaF{K?B;W!1
z)CjfB7iaTGM~xqt=Wl*sZX@V-aH2my*kL$JYbH2%m5Sgo-hctM7sn^KBn(pILT1S?
z<(wGitj5#tBZVSAFq=a&y{``9oqu4Ap`R65?-Z*wNcQTH>{S2FW6MR_u+Si5g%iw`
zXV|he*)pi8=b9Y0{M{Z8&AZWOxk)*RmJjlL;UO^iJE)u`TcA=bwu9o2(1FfK$G1z?
z4~-3{BMy@!w`Lo=i2=5z)0Zsu^0MS})6Lio{4WhsRtS+wrT54%@aRSYM-dCl#WKQo
zI5V9GC@SyR$do}ebx<VdH22NhDwQjymH;dl8YjPK#M3jgJl0l+4&2Pqclm+AZGkyH
zR#$%Iw~D?LFwLJOr{%oAw0EqkF1VrW+ITffU+dsQ_vmuA0n>Oej~0DDhZC^G_)S6S
zrA~FQYI*M`X-ruBh-0iQ7=V!i`{q$Nq08h~Gefw~fh+MXCI=Elw9M&^s5ruO<E)W7
z+#Sm#4-!?%*%pdRxMW+)RySKo$#ICHj`67a-;4mJYAEzln-6yOa8&T6c{uP9Of@i4
z%)Nxo+|VjEoWS%QwYDFcSgkpDH<-fo*>1XPqyT*R@1D7MY<>1`&K%QfW_bn%J^l1S
z{s`BfdJ<usxxcd{3Qvzh3c*m#DK>j`mM!0sJDi?=Rbte-HOn?1xEsM*B9%t(1WToN
z;Rj|dh^^ES<B%-ufC-cVJ3V#ZSB8pKv-TkE@_~KEv{P)Q2<GWvYw0twS<cMTwft=@
z=zVHiAZ^5n*ZiFNq!TRXpu%LpZz?o=@F$-B(@g{ZY~}=oPcbvIA>Z69xaCt1N1esN
zi0@Zo>|zxLuBE&)`S$i_*!KV9@BBah^#jVzA!1&0?HN1UsewAnXkWA=vjVrYCT}(D
z;ER*Z33#wE;q{uGr}%-@7aAjsdH)eVALYf*@SnFv4!rmoAo1gVJZr9#F0N|6I2Xr@
zdLa5Ug6K~aqQCPvi2l}Hu105>0|$DQI2|>4!#RSW{HG6{y1<0+*VmaP&op7(#TQp&
z-OKhjrr5rWdE5GB`#cxFyR|_!+uk)#)d+nTCv8Cr9I0KjTuIpL5Yc|$@QJNNltUZI
zuiX5pj#U2dIzkNTJlFW`k7z+-F(0=?ez|6{<fCk-gjbCa!%+`0;Kgx%5SomWIRcry
z&;$b7Kr1lPK2i02oVHqG?F45V7PuX;JX_%M6`z7{TgBPHBWB=ywXMm(AnK}Iu*?PG
z)UFm@?%Vos85(wsuxR>?aTjyL5E~*EeMiH(;{CraZ#<j9_BJ^Xaln44bN79#-4AZW
zFJkzt7Se(81xqnPXW}6EjoHeK>VYgqX@9%Um9|Pvi}bA2^qi$?YKsk4IYw?EIJjK7
zxt5=~F%Uh+3s8W~h_R!xmR=xc&|VQrxddh~=)O>crW)=p2=z$uPV!F9Nh`sHxyZ^m
z;^kK<Uw}@g-7`9w6cyOolui*QIHrhlURTkHXZW#Wrb6$4a>=I&A#I_=`KX-NS~^l}
zG<-uNBeE>uVyw3QZkdcL;quvjr`A3i(N*+;pi*GQ@+D1vW8Cy#dfkhd;(m7SF}tzY
z{#d;*pLzWP$r2}pBv+lc<5w~Scl?;ly#x+=hd6i09zP=d3IgTL0615JV46I-BMKRB
z!E@&jCf)#gd$+y<eO(5n3xSwU6dp|Z21YdZiYtyQcNtyS&u)W}2ulNU)so!LdK{A&
zcQhQ7(!;#kz(}|8(K;pgj#5JVb(3}&48Rx58`2}t(qw>55IqbwP({WOsJ`%_+6=BA
zW!|dsa(>o-Il5>Lxj3ppZ7aQOc72N}`@l|_#1BuqH@zU-!ism`>FjEt%Z#@WIU+!p
z^-cwHc5<VTwj|s_#10!OEzZ(=;l9-9;~CD*4YlPLW`7u#J*jSGdf5DG_?>R5^IHDV
zho~?GD$ovgVyC9+@M9?&sD9GaH#i&MTFY;<iqQP@YOcafYS?oO_cXk$3NJT0;FueU
zNN=ygR21b~;&1XQKKL0Gcj)P)DI55JMx>nTu7Z}r2Yo!6G#L|*ompQ;`Ln!kTGbuA
z3Pk3Ns=I<1w3vE^*koRaWGYTvcg{8H@T6hYu3Nvkx!Hc+`2fB09Y!AaH@~!&&VbtF
zUyd0+c-d(khE11IuUtpQLtw3Z_4`~%)#L>io4mXeSy8Jx43%67j`j~?E^WOoenjWM
z6{oASJSuPwoz$NXg)XjkT%6PP2Sc?E5Y`qbY}(k(qo{zIk&976XMe5{dWWMQ!cJ;a
zZr~>tz&c1Mv<ajBUP|nREOS&?>47=g_;m|Iarl~Q=<>6p>6JQbdor&M%sbO~DxA}E
zzEGm)jcUywoZ&x4&<A|=wE83{Z$&i0W^lyJOUbEnX>RPb?&gJ3NC4=G?7JB2w1??&
z@^yBI4x+p(w98DBais)MEzoK}u5JNxbt90goA3^_$!(NCGE)Vl9}cf^pN;5cn{Y%c
z-s02qqwU!{`{UH>$D9m04jFbV3tHyre(HLQ<zDZ{9U-)Cn;k5H5#8=|<X8Jmq0Oas
zMY*fNpeZ*rV$CI~ERHV)=?^AP&87659!5n(81n6r^|bi|Iyif^%&%gXKAwy-O7inK
zP&_F-AjEe^Zujz2pF}7uMM{Z6lD$)GdrI(wL#JddKfAm>3AGWxjQ%ZWcywI5zPqp6
zJZjnAlq%i9*WFoOD-udNoR{{Jmc^M}*FHAYQv1kMWOeoW(j)w(x@Q70-My4v9^L$t
zdH%)K_~7qJDNMmq|7x9ir1d}M9aOdi1JO_(-~5l;B5s1wf^?&5KD3g^H%<-8#)V`k
zo*vy3^HDYPP1bew&lY=AMUQT4+X}L)N{#($oJACLUydmtk@M^y7y}q$r8-p!F@z)7
z%9MKifJHuRtQu3Ham5*;Or(m&=`9kvxDTKHcMAe%R0*02wN)bfK(^C)aw}OJX{vJp
zta>SuQ~ZB}=4->hNmK#YDU&kdvOd~;9T8SfhxFCu%6(Q+wa(+qPQ5-*liu)B>*<O^
z&(`k=_IcZxhq;^~&dG&y+KYD}PGNY%fiOcqFq0d>zz7W*!4Ng92-3EK22Hv(LgVxG
z5G6c)3fmHm`bY!ve5*-CjeyPC&OQKy1V2pT5pn~24xMp3_Y*6sIXYLF5TC^h`BCW$
zh9O4*5u$$$sh&E9fq7PZUw|*N#2}{igppBTO5(ZCkX}BR#K4~em^K^VK8DLs;$pNE
z0M@u6oM>HKz3MO5YCiK?g#q3CpSsw7CL}Dsu}$3}fJuQ7iL8kZ#W=FfQ~Q?s?2Gn^
zdb0Z^4t$-v{ltdw`>l_(dL+uk_$Eq_wM06BJgIfx2z}c^M1veqisR%Cu>G*cKUM9S
zLUkm>igcslNoArxuuA~EK7Q|?oJFY(y@ID73=Jix^%Qb(?P|VbA+!1oYQ2W#j9MK7
z<aNA~RnDGz9b)pKM`AxfT#HD~31IDiDzF=;{%6^dKbO6K6yMQPJcxASizy4e4lwp^
zr8|6;edCyPXYg?N>`Ryv;>}G9G*jcT+bDyhJYklIQ>?=fFIGjs8BA?t2oV85Vqs~M
z$?2g*q5O8zn3^$@`4x%o=SyiOSssHMW6T0uHcKs4xEP-*QjVF&jK}shP_N;GaFAIC
zCw=0+0br6-lse}byQ-1a0%Ky0n9i)QN6lWl8da&HJD<5fnUi7u$am<|iKD}}O;!f0
zCM~>jZ*X=1|1)i<bC3N<?OF%8))Jz#8b8D{=0Ez7lyXCATL_XS7%S4Z$?@x2<zvqx
zcUm1g{%U>^zW2Ve!f1yxYXf<3`;+%m7p1U%A1=K(d7#1VROHTdTdq<H(4nS>2%|gO
z5Y`50U+plFaz~1?T9#fHZ9P=4sA#jf`HRq8t>?jqVqftUbgpb1%hSbaqW@&D4*${i
zfUfRmU!2K<)d+o_*~q|DAeIqkbXwO4^%%@-;Tf+0Tn)!FVjaVu>upb-BCJ4U4)OiQ
zjuXI)SD4JO`Sp+#m>GF+DhXq}PfmePCedxV!H)3E(+H!gy11E@R>YbNL>o`vSq;@6
za4Z}DtiOU+{}`=}Y{t`%kteqya0;7}oS_Ud%at`sY)Ty52EGPmsjvy|UyI6Ui(IuG
zDopEMEZ!Hg<$GJ8jIfbx{L84h`vyNsUkJ7ioGe0@=dmF)uR(ytk+cV}e4CGxx1V?l
z{X$C{zKTCh44ptkyk@(4dORvfZ2qz#dPFv2`1OG!OG0EU=DCbCmO?uS34)s$6|EqB
zx)|<N9mG6!yp(F8i&|-S&Bk=^rBx%R@-knCU+8&Xx3$~oMm?v>#cw%*0`*_h%%YFZ
zZeEi4Kk9i3UBY9|LFC05(0T<#Z0>f3QOTy(f+Y9wZz(C(8D_i1oA|B~Y>%rCmF5Bh
z%Blt}MdOHe0yjv*1Pw1E>JmmG={$w|X7+B5I(_Svw)xmy^v~ID{u`Xe*luwjzdyE1
zez+*%eAXV3g}Jvd)eikIR^~6$2#fTWX}mjwh^l)M3acK@jYVbcw-OhrRyr5o>a$ws
zt7!IpWlqKsGtX~}-^t8(C|+r+x&5SWpUJT}Hae$*y|MMEg+&>K^(cLRPVm=b*6Ziu
zM!ti`UvpWgaGKoSVsGJAtIy^MYfgsM*rteuS!PXpM~%>gho1O1P^WiJ@={?bc2aJ{
z%sW^4%-vCsTJIFzZnWcnvG?YIQ15-;_-Ioo*_UD}O14xIvP=?^5JJ|egpi%G&Q!97
z3855ImXMgT?_(E|-DEc?vd&n>Fw6OUbY171w(Gg?>v^vGzR&Y}u0PH>otb9l`~7@B
z@Av1uyxy-@muc1FK9@92{Y%%kF$&cG!_%lTnid5c&4A}KHlq5W)qv?z@oEYgF>ns|
zIYE9Rub?E-ldW1f#Y(9q<I^^`bTG8CjQM~fi(#oxbi-jYGZ%n+EuLAn{8gU?AP4NR
zCL3;J(X&68_8@*_{S*`R3FbL~{$cyI8sWLPx*e55ROS3P<=vli<LYBBMrvMNe0kkw
zzg4t!+2NzNLAwlAl<<pE6rS}DfA`19glmQ8ug<LyQ6vl@=*cK1q~9sR+A7WR!PHaj
zdtRx>L;4ku#d)ik%a20bhwms0{$gARQ=LHj49=AA28$r{z^q?LSAti^vHed;2gwE$
zb4xG8>X^=ptjpM-@#4rqyFAt1S6wa^{suY8=N=Kj+vo$K16kQyzb7$S^oFM>noxcg
z@LZo3`kd(jbdZ5mwdm5%ZcMY-!1@BJpt-1fGOU2;qr6+ngQiYf;e+bM$y;+M>eZcj
zoD$+Vz&p<O!TULD>bH>G|M?=<U!LISA50MeXcn3zO11*|AV8>%+*95|Uhlx<3)pyf
ze&&qA+g>V)R;zu%qHN6=a2hJ12ggZKPo->#)W1*$eq-BhG}R47_SBd)0A&h)9GztW
zM*ai==ZNvf@v<vpLjYN~6u8br5b^B=0D3(NXwkK!J;8j1LK|Iv1HjHja|7|>E7&#k
zI>$VgVCxO0AwhvO_!0v207ZZb_6HEnMP6iFlu<*PV+qr!kLmRL6bzLQ#CybM7`_Mk
zR+qM86;750G0`}1?GeAcOspVw6oehQlhx=xv@v08dd<!Q7Gg@bm{-f#&0Ab6p5M4<
z)oRnQIq4C@8Vufrp|Y9LwbSd7q!WY4FI;KJV}`#da9w1aRr)7Fw66pG#>)j1;SGGg
zH8c#H=UfYDL=ZBB`ufi$7`sgO+s8)+>oEIoZMm<(B)1t5F0G{{V{_m?t}*nRbr?nx
zn<1bqLMbQf0zhA0HI}rk3%i_fiu}WZW9jnn&`Pkj_hRWd#1`U_>`~-SubknLbA*+_
zb<aoI>82%-{hjJT2PNK_gs5#6o>)1-Kr^2nS!AjJwWs6AsY9UjWJW&|k6!85rESMe
zIfCIODN-A@B&=bwp47Ut_O%l%&vBdKhwblB?YQ}^fRe0@bQD_<v_4tGBPmlO5sA#t
zX)tNftcvMwXI!lRz9j)rxS!!+u+ao$uE-s#bQXEM){?8ZsE4Xx>zdJbzCWTXWZqH8
zF8NyaewNJ{azczRFm(%LpQ5>JfTWEmqBDcS7kLPR)WZIO+Aa7yYL|A2Y(nv;cVVH*
z2ffTjgX<R9RWiLa8cP#j24@W%j3{SS3VI<{?aJT6&v>SzgyGS>QvnGZQi?xqL(pda
zk;(=K%JFkMDf_8Rv`7T2*8|c+GGlVf3-VI++xnAFyk)v^b{uVDW+g{IwC?#V&+AvU
z(q>9c0N<U3=pR{@8$gccwgH~ocE<VJKgVf(a2~8Ps^57Web*VWhkA~<mp>>VLs9pH
zsFgFb^qH}<YvZSDSr|rf4f+3y;B9peae#D-YzR=-ZjCi)?))YhZCRaCo`;PBb%md7
zws*`Aafrgi*#heQFh5)Pb1-Q23!v~?(I|8_9_WJGmh>K>@4nIbMc*Nl$>Pb8m&L<x
zxJ6MiPkE2{cw$mBejf|n{EHlCV=@U1T*-I5SWBBg*KJ*#7Kj~1kAMPcLt9@!4U`?R
zpX}sILmE+R`wwZ&JT@$UntAPluoLIiOS`uE1LyOtXPN|_Y2(Zeqn9ARaV8*X9DjuT
z(JyUY<NuG$@vB>cP~ZTx7TvaiWZMHu`JFdr-h7XHJ3RbP8KO*^Hi$I!X!(<Yqwx*g
z^}_nEVR@3L*aCioNK9>BS~c3J7f;e|ffVbE%*XHG?FIra?&p`9mzv!ckJ%_sOyIn~
zGdqx74}XVy`f4+kAvq2W2)1^rKVH(diY{`0@C!dJl_cvbp38F&&*FC2dSA|^sE2M~
z6!q}0Mo~u=esozNlV`?`CXM8_RksOzfwL=a#%IoY&hZV+z4WC#G34t=xtUU8u=sXw
z7=&`|SAi9#!-qNroEHcmzN!4)fknMKjA;kcRk$i-5WsIY&R{qB8Frx!I>tJjFx-bH
zqX$EiqYoMlu^EjX8<zu|3Z>#3733c*+xRn<$~jItMnhw57VcZ}6X7)$Opa3e-JUOO
zPefa^x$tv1OFX^RJj?h#B?`<O?EfVvhd(ocgOoyUrJOLI;X!Vf@mhW&(;ax^eO!mR
z^JQkv#)Rx}ZY2QcAT6jNh2Vr0=K(W%@E&I>w+T4RN@?I}-ZP_jBl)m){vu;rarHDy
zB~xuC-!1va2GpG2+L~xhHXD989|=soUXAniHzSURpKtnUo{47i6V9sAI2=2Oeg!*8
zgwxg70d7J!90XF-`*ic~#-+X;o%&Dy8TQ*>iX-M%Gfw{?2Kv?Z4HBRKQ3oJnGldI~
zm7wWN97K&qBqPik%}%D^D_^ajtgv#u@^CO&C|3e^IP&DX*X5Z)fZXn;-bOaAh$i)J
zG|GV2xl@Ry+MvkZu#E#t?Fa~<7;b_S3&`_a%Qq(WfSQO1tpGcf24Wsb;OY2M=z_Wc
zao?c@BB&}e7#*N&K4x=KJ(0Cdzd;<G*F|r`$;=?1ZE#o_q3=+mXj5Hi&sWePaU(ob
zU8xYOj_l>te0DV;sBvM5QK<Rshcl5SAot4ap)LbI>H^ZvZy=~Z*Zx;8LjW{&8C>ZP
zI`i=NhDaUk->a*@$MtNKSB)MqP*~y3JXEepx~>Q);k`K-4{p65o7E3k{YEjcMekFf
zE0vF>ad$JU-QA$pf%h%UGJ^h&BXCJo9iX|@h#6<X=8b%0rC%7p!)SL?KqVP<8VY!I
zIU!(1hiC<6bi%Q-(jb)ka$#d`r>;Mp%8^An*;}AcVP!yeca-_G+^KsaXnK|>+DKyV
z?$N!`x||HuTi-!Vu@$W%bQL4`N&}3x#kk%TSuG2@_Rd-}ne1>A!^Z;Tt^L^E0S4us
z)h&9$$ApjV%;aTCY2URK;)486hXP(Bfb{Qw`NTTgF5X8ueRt9aI^Vv8<L6lSzS6@9
zC8-F7k)P59FdIQ{#|e-ZRb{o&!H`Z1>KE;`%98{Pm4iZ3BN&HzV0gW(@GBLOnB>8F
zZ@W{2L&w6r_9{AUKCjYWwRg9gf6Qqp3$pq=Y@!))5EM=dF!b13c%vcm8kV4sT04#o
zMXt;_fQpF=j@a{c>;d{?(;2DXLlyHACbto#MvX%!i19VqcFO|Sv~CwTgp5a?x%x2c
z_?V&fM8;f__!sB@-94-O>pcsKZ4Ebo2achG_(vZE{oEk_2?t(LTn#AzCoCd?R}8bj
z(Kq!0uL#gt6JS24h{jolp>E9w$1(^?!#dyzP=c0oB#aX<6EPD3iLAs-uETmZI^<AZ
zn72^m@i&s$<#&&<KgTCVx+Xa+SKfg=k|K+@QIm8)3Hgen6tKVoFuwZ*G@yRmu161V
z-k5K^2S+wVQ(<6C2t|+Ag(Crx4q<>aM9WZS^Ey>q1!YxqRYpCxOS0{o(;x2Zg~{}5
z)M|1ZYdNNvv@-Oajefn~4fj#$Ktm}ykD)>VgI+CGz^iwyK*`;tv(vXM&QLw>%q;Wn
zyO&%TPm6!~8%X;{vGH;`Hdo1jzN3e-$H6pl_-!UtzA#~N-A*Jy)$<l}lQ{RSs>i!D
zMZ)U3k)u!1Z?B*7@9yxEDKw50v4+`~jRp!MTkIiprI~hRP_}9^AUM;4JQir8k;N72
z!oe3yg7y~(#r9}CXE~j2=My_0k=gISfBhwM3tvhSA7o2v)Y0oV_eO4K1V9@~24+0#
zNAINZy{|)3ZSKI{nu?RBe|plu(7$nY>A=-JXPq_r<(Utlu0Q!pkRjGB449Fgk{d@U
zSO|!T%hx{y_;r-`wrwpH&p#rtYiisGe@BrYvUcrPl^8v;CJ{XbuflLNjY|cZc1@kC
zi(9bAu{G|!U%TJPy6#m=liq+LkhL-XxqWpS<f`9z-;F2h@Q!|z-U|avnXOE1wQ%lo
zGue<61I(xbRhEa<yqfnO4Lwd#UA-Ks10d^(K&!+8RK6d<^Wv+~{j4VBP)8y_sF8z|
z_(yboRfKcvKb>eh>ZX`}VdC)2MlQ+*Z!g;5{yP1Y-(~VVNS{S8SWvU;2kkdq8i$rM
zm1!gK?O7|J_>Nd0tCb6+7{6e1IfL<YMd4#*PmQ#Y%jg27r|NIGDaHxLSE7hTd~Lvl
zwgEtQB<8!-b%c=ts~9*NBrD~p`s7uDRGqQ}IWMOPGhK+-m+(P!B2uoos<3czOWpZ^
zpj+|{pb*nJ{cV8oGqUKvch36%Uu-VFj6wdXLgeq-H`rhBQhcSF_)(mGof|Wm{v!d!
zuU<U78O-#5%SvHa4ALC&^Ym+3KNBNAX9c*0A3}g0nkDW5d7R`<W+O^j0u0t^f*@*a
zr{%fML!}k@k#^y(;RoWb=<vLG&Wg_o0~{=PP!P9<t_#!mf*tAs!^2zBshq0SNt|RP
z#lmZ(2C==<F<*(lWmZ`&E%n-As}Wn~!fwlLm!th#A%5Dwj5I11YT*S^b9+XIwzbsI
zImxJ;FQ?R>@`m;I_LDB-gO0ivaPDP@0iEpC&1y&vIH3<&;7sE}u>lKiaNc0dxryyB
zqK7qxfQqJ-EZ{yl4IPl=qG}^+t?6J4+DK6Y6uS7ZK)SDm&Nn<X4d10GnlaLh<B>Jh
z4$plzDY2-y{r!7gea)s53<G+XJY~I>2TFtvnjCm|@6<icQ5?}B6VV4PF!zb*cBL8-
z`Cm1UGGu7q*}Rt(w2J!cxu`e%PS7w|dr6HkSfB^!#fMq$FD@+Yd3`NT7W*ixVJSKH
z&Ct7jqha(GFb7pGMM~;jLGDC+fOC|q;weoYG+k}N=S){ecV^BwzU0DN8tQw4^cl8z
z$WViSx&;UwjU7#cE?UDt-Z0aT106U#X8aXa2WiC`@f(DPu7KzS6r~2l_y&G-I8^|n
zt9W}|C(~`!=(eUnd316MNAzp1p3B!g0nMB-Kt0-04uhyj1Srol16(*0gnnoWGZ#bW
zZQJM=ChG!`avoJWC$g3gkfJVYQsu#cJcX>e0}Cw`r(6d(XKC6a<WvmV9i+toY!V11
zG$3<PG<GDAkuQZ3fUv03uQrVa^%!~<1eIsewE(FTOa=Mt(`0O+F4+nOIw_&BU>L!I
zbz?B=fA{*7cY_Q4ofRCEy8$aW*!vE!(KLh<Q3J3}W~mUMvqP`U{Z10*Q(mZM41QVX
z3~J~%Yb+@aP4^nBI?frvS!8}#AZw|JzDJ4#QibHVV=yXj>sLai9zeVEZ9kY=g_-7{
z@0cUB;aBG*De@-Ni?rv8O4dZi`mSl?-dy|AZgFp~cC$BZ>eexm1q}Puy)eZ;nG#@J
z9pVB+b3ZIL>ibo>$asvx00M`n8|8&JCy?vMW@grF3Ai9X*xwDPYqZlN;^Z-|g6!Pw
ze={E!My0Jz7a2BUeUtS+u{7CCZQqqcAm6bjzFu$tZZg4RWT!;7j8w=lR~Kf??14kJ
zX@jVhYpmC>hmjFu2H4(!!0G3`!-YrYug)e?PIx(x+yEdO%1V`P|8vXl4A+#9R=YVH
z8NN+b6mm}i)FYv4TqKd%9e5~<*8-`KjKu5m+1*<IfI_;u6>-Pwg<gFm`TF%{As3e_
zXvTBa$p5MR`l}WWZsGf9Wt{4#NERi;;3bOk{EibMpW;Jhc0X|I_s>0T!#45U|BkJb
zj&eT3G}o_^K9CE3hVG^_f%Kq2^3e!~pU_KklD6Ebfs-$8#ymdz_y~uW+|XTg8U)E?
zNK-)m4fSaVP@mcW_1SMcH1fSIVk`)Zwa{QRQ~r}>Xwa}gE@0(#Jysk&T*Gxw_Q@kr
zw^tAe!%Md9Opy7hzZ7)&FVEWYe_qk}t40&{zm6upI@FD5Vk79Jp9U=*=pxXGK+X$*
z`omG<6^f<R81x>RvD_?67vq&)&3^=wIXJiE<g`rj{_Ou;Z2tC{MhN7%&qYQ;iW<@l
z{iA+8$V^zqDKKP*3^<pVvXL9@gq<G7tD;|D2gtfV-+=!3*>*+(4*oZ~OvKJV=`um4
z`NLQGaupO*B<364ijp{b`oUh;=S&%4M_)a6f$U{C&E@$&G&;R%?_-mgZHGIhj&b0c
zi<os}AzZk3E-j*=S3`Zv@i%h&!r3gfeqIF#QVjkhpC*8zJpBz)WD9H_%8azu74%xb
zrw1;#F?q$DFDmlY*44@j`mi{Z^jX-7lklpP{q?0-p?y*C_r}x{&U2eVVlGmLB+G!J
z7wG2EnmgdNzjy=rqtyFp=pd+#$^7)X#y|Md4_GSO>KJGs2~a(VPEY?XWG@J{vkIb<
z93FS-=GVxIy_?;9B`T>HGX-{=I8mI=EKX!?9A;>z^EQn-vrQ{QeOnUG>3C2w9m8L+
z?|kw8LfPAx@a0wnE65Vn>EB7w|1;OO4vG$6d70xkc$q=nXdUn}qhz|sm<=iWA*v51
zqM&66LE^0wRif3!AD6fix1C=d(6Nc|HE8Alm}%BeOv^Ob2Bp?_^vmj!2z2|`lld#j
z^?%}o#{9u+ob%J5J_?-Yf6fvb7M2v}6^G4t8U=X?Sjz8?z3wS*q%Xfk5D0D1DBrak
z{zj~Wk|N(2>1U*e>2Ac*4xn1vC>EJcoEZ-)NH_n&-&nWPhtxni8RT`Sd;WUZ<w3{m
z9(LQUuehl29=M~JP&o;LuA9iF8NU-?-ZcwD6Hch){Y71Oqs;I%B@$m;qBG&frMSsZ
zlGU4DMZRpy8^&{E%yQu*=_Y5<h~#InQhWya506WO$%2(#VRU{hJ_UILx-P0L1hS88
z5dH4O^p22)7V6=l!wTdtV?(kH!xBB7lyi#8osBzbv$$iaXuJDPhEX54RSPKrViQoo
zG#)diavP69QRSOoP>;n_4GVSqDX+$#did<is{R1q8R0#ukDuJO65;!j0HGBmV}me1
zEsFSR0DU`9RBjwrZl{ZAj-$aY+~=#1c;d7tbEeY;l}`U^me&LBcb|EJ$?*P;;cuu`
zH>P)fY6$#yYpnjIXixrYngo~+7_wNh0=*t_^pbwvklix|(3FD$3cqZlvb=okodNji
z_}zuaqYrz^efioz<D?wKQHe;(L<dO=vj(QzR+}&j2LDSf-sh~NnAsxuQvGj`g&2)K
zC+y^d-ykE0uob#LiLz^bD^`C8b`P5i#5Q?=_@y?2h^%HEi<8>zXS~D~bF$R(_%W(G
zZXurfoqR8%@m!}z?xc3^z4oSv;R_CevmPJXrBCzA{Da8xS1<q5U4-8~(#3+-(qqQ4
zoRQDpY<r0rcPA|qMMAP+H>JV~drQ;0k7>Mq$HjizP!Gt+10rU6104sd-byj_buPL6
zcdX?ZUvN>`ku@e@s+eUMB<*L>R72!VXl{PzAfgq<Y@67xDNN{n^!~l3&7oe!XkEaD
zRJp-Ch0a306I-PhgG%4?1p4+B=RZLE@ZrxOBl|}q)DYmen6^VX%lGQ4yawbcfLW}c
zmV=}FiqMwD$vZW?hOS41<vvtl+``r#1}^A+9>BQpRe;7oC=Bp%(pQv!zkW{tKRzb@
z<KKhfC5XDTZO%x-0bRP-9T<icDAKjJZYa`)@t6o?XS=*o5dn&HHCPlf7bwAfec1kZ
z(8QVPmGO5VHIZFkI`DLjn6$dP2?u$bULIuD3>geRrx?B{z7A^b_kZ3pzkdt#Iyjb-
zKuF`4KwtSm9r_3DXn;W!+>x>;HR6%aLp3#cHzSo>=uF3nkv_O?aaTUY*F-nub-bV6
zfs-uK#8}7}HhvvK1BP->tYt4epEW!@d^dELtO07xCkXozS^%n@Z6NEf3`B0`HjRAo
z@?Do5PQU+Mt=)~phf!1Kqw4Lzfd6;T8G;~hbh!?NSuo-?9!--=dZh2M5>()Ao;Tq3
z>xD0O+Z*Q%g)9|)h)NwuDjw7kSH2^BE-hZ!RC+vzK}MwS$nQ3VM2?1<s>i&#0prq1
zv)<YlIjJ=;sh;cDtozJ~k&A)>L!a?LuY9L9=<pFiB?5xninRV?nUq_=o=}9-*JNnZ
z$eM#d*n6`Ha#RtC*Z9uNI2qP}EpG|cK#}CS;?%^Dg`PUw8;RM7q#iScJ)qI=c-2`T
z|8z{Q@b(fV9iC0u7q>{dI`84~Has_bd9yaf0z)O~Ql^X-RYB-*lDG?NMX~py_qQ07
z6a~WaNU83p4!4GH8Qrwik7Hvt9N@B~eF0$&JCb;bfi{;Vo^gHu-6@R&ah2+{dq7_r
z<Z^9+#<KePolPm~CPNRTp~u#Q7ae92zLLj?!#3ash6^-T@W51LUVNL`1J8uoc=r!5
zLK1_>rhFOr9~NYByCzjr`LLI=Jm>Mky!3n9-|ZVb1j2$kTHFlX3rkzPL6Q8MJH)MK
z{<yYKLa3K9{Z22O%nBugAl~>-j|mcn(Wh@(S?AITy(Up9YNe$uNB6NVYnCO@%aPye
zm}5e*qsgTwqmlu$EL(w+U<31>caGT?+*R1?4{+Sxu3&LmC?Ikt#DAPr249;+uePVm
z-NG*Q!4_V?tKrmxNgx+^-nu~Fq6rEzpiuPVVov{Ixr@GZW`P6d^yX5(TeAn9$>(Mx
zIp^gTZD+;TKq>Qk+o$P*t$)UH*b7BU!M-7~EZWD_*5Yywlv*iXz5nKFVTq8C2%w63
z{KwkNBB^XwO$SJKh%ti!?C4!bx6<{{1*$XfPO0xU7S|exsJF%x77}n(&WuB3H{s6o
zm^v}k!Q>Eu_}M&xw3KQgA%KeLbN<uD5WA4SFr2$1ggCEsdVnmJ%mxZTTqdjimD!p1
z`D15SuPM$grP`gG%#q~?gS26$%;+0+<$Yh}N|u0J2?uVe>lb|tFk5G@(4pb;H%6kr
zr~d!*V9vi3Im|y3qZ9!XcqVJq3ok_0Iy`NP-md?7#{FIOC1kR8chXir6&<7NSKghE
z8g#j_nF1W@{UQ(=@a2Nj2gKYBD6*CxIBHa$N>R6?s19WD-=#V`NLiS*SrC<U0Lmo;
zI{OH~9=F@H0FpNl3iHG8k|0Uhb`wiD03%{XF>|-!OMM_JNzv$^$4=&fs6-tQ2k3tH
z<u`u(ZR|blA0n~PKXqWif%x6mr~LTibS63uxYrG->pyf-!M%0=^!;cwSu!UpZ8`y*
z5-Bf-Rc{Fu_Q-l4mw4(%uu{;hNAS}AuCi(`8)xGBS>Dg1sTHE}Eeuq~{FgA$jfxkT
z3Z7N^U91VY2VImNL{+;@x$0+FQqVd7GECd%OwL0E@tvXX_Fch|G%gktl)beL<xNV>
zI0WJ`H2Eym01QSsj8HeI!9p=}0VJa!Gh|;n{w7C?hA@J^GdA`vOR8z(LzM~sRo$P(
z%OR5B$N9dgu3|<}hTpni+PwWg!f>{4^9LVhS7j+;Pu(q~DSTh-)jgBYDahVv2X{K#
z2BA(n|0)2gfUsc9p$~gKa3@8NdeDfEvHp~@3dpsJXDCjTgBU7Nmofn`x{Mn^M#qXj
z&qk1uIm0dev9H$M?RtV&!r}Hkns)|gA$y;>IeZN=zT142(!l*i)w00e+SX-WRg38D
z$FV%$1nb1li<4J>--rPJ4-SMK&fu_>28ZokHUOH065`0l^njCaG8>eP1Lwi-do|^c
zjd&W`)d*q_iw+qn5PJaTc4ps9jgZ$*uj{82ZjoLJ6yAtEV*e1z?Y_itt3{_<MwDOR
zRIgbkr;|9l^h2d{7rnA!KRziOjC|m=UJK>4*Sm9fs|e$se7`~BGaS~h{<$Iq;|<Om
zaNO<$$L*a(B=H2YMg)YTn=OH@DgrVbq!0Rf0f?!<sp1!={D(d<0~yo+wp_L*Gz1bg
z70;_j<9JS84Y#0=7GFXu_`L_j8TE(>WQ`e!Cs_KBqi2!ha4_g)*0yYc#Gfmq_0Cur
zC@7m#37++c-L#y)DF_40n9A+;py>!HCwg*q+uw={?NwvU*`cp){|TW4f+g<j(Yk$E
z_3G+Jka*GJiD$n-S`yO`H5a#Of5yJB>)PW$Q}6G;$j~S8E+U{EA0lJ?lRcV%yUOWm
zgU+EcUb`Jf%{ofmIR|hwj_}9GZ_Jv4r87C+cJQazk?GUT*NX!Iu{Wvwrhtyb6~-;D
z@GS;U`Uc#i>sA#L93jZ-$T#p%MFl&Gpr06MZAo5@Q{q4RZmHpQ`g_E7kpq<_KN<VI
z*pgy3rrbB1pR>5?e6xA*oE_$8W2$C^-5|})Dn^Viwz#NiS~5^X*+=qZYYMHR{iIVD
zku$xgR@WibNG`8yvNtArW_unzR4ESMt#MJ^LBWs+4;;`cH|&*YI{FU612&)s1xHvS
zUYnlqGax?XP~Mi80d!~qv1@z|?0jh{y*rP#1fbI>GHNvt;xL`WMO3xFeX~>vzs+v@
zfnnVRD9Hhke&JE<Dnx}Ej<(dHMoyoGr1z~`?i#AquxkoI7`kz*9I5@Lp!I1&{{-u9
zqzX}zOIX85g)M}l28p-(gw(sY@7JJGDj*)9aPo~Ybo^*4AT0g!8T_d)&9D)de!GuA
z@v2&bs)47Be5@T)D@aOrP;7H_C=g2IL#>-DLF8qqfxqu4yKGmNnSxI?jBl^0K~%p2
zy0VZ2jfgX~+O${B^D=uL&s|d%sIXWpO`d3F<h!=bVKF)>TG7_y=B4$3FbJK5{O<I4
z2PI1+wibmVHhU>|)keR}QUowduQ^_wX{_~QCvm}Zd~&Tw8Q7n9L3;??hJ>^^5ZQ?~
zj}b%dI>tc1x)BAPhJtqpq2zS>9UPX-3c?i*5U!|azua;v_7Umcg}J4a8>?11vJ46I
zwLgrGi>v@bC2SCHK5L+$zL?GAr4JBjHJIX4Dxd*Yuxj=Ke-W*AgjmFR60_>T5Ah&%
zuo}9LmK#)eSX<9zH@VgpH~VDfo*D${`<+|rO^i!PpLWe(_v|*-%j`E5G2s*}KB&ou
z8MXSuNx{2<scbfy!a&FOQs*%%@a(i3g(vCebAZ@_{r4{Z#()2(QJ#M(I+t=NDW%g>
z+n3}-evy15E_#|DxRRii%aU`W>Tz~y(Y<PC&t5cn5?Tehp0FAQdcD922bs~*uv3pV
zC|I`?p{e#LvNg8fj2@~Rh9qctgFq;YazFVFEExOa>%g*q{4BQk{QvD=icQ9lg*EQ@
zxf5nczQmKLae&RT7u<tI*X6YdRHiscrefIg3ocGazlu)H<lD@*4QrI~eDeXY6*nIU
z|N8H5{<!f16Mu4kf@A-_!B&<#3{AqBW7trCT|mj7CfuDfq|8N5i%olY?}S6mb_uZ9
zhVX$3fX)Pm&v)YVZQqI0!^j6W5Ke})8o)K*7(ZJ^k)yYpvd#$+ux7n<esYX%*Q}ye
zny#y>YwA!v%P|elJql&{R}C+1(iDLhllDY`iViWJ%E?n}d4L!^8wi*xD>=H3cqSSx
z4)<Nj&kLMP(l63Gwqx&=yepe@7**iS8r0(>bCO^6?!Wu-+L52$xP<)i%He|t|G8Ug
zW2Lflj4sq;g5i71O<rx3EqvO7W^+z#3zA<E-!UiTt=z?Y(<qjcyGjHyxe5DX`uD|W
ztpTIOw`(w=BkZ1SLHblhLR|LP^|yuHarpcJ(fPWA!<$~bKRj^z%D9q?15uaG=S+$N
zcmjhlG?g8U4ZWh{4?kyZhX1o0AQyDsU{7?(VzyNPw@Fu`z4m0??FFq$m<%~l)afzR
zJ6)??QhKLUXq%q!xt6Fw+b}AaFZ}N_o?5Jpg_J%(h1fa=C7dj9kPM`uf<4~Z7A5k_
zUyD<?Zls|O$r9z=7am|azOgx|CR80jlYXORAyiqSB9{yw^PZcRaaa?IRuUveb<FS0
z65mcxVcZv4&}@g!U7ZsZOuMl_z|@OnNnDRfv4lXbwynRS4^4r+Z<_Dpm@L=d!g3{`
zdduOl5_o8Dk?hD$KND+f4zNK};f;G;?|qmj&2t%Q2**@y&c1yDlrcbr%~C|sLUxFP
zhqS{PMg}mC7G!=AjU5dl@X<IBLqr&_?f@qXEApo|^nUs<(&f>A-<NI>gYH+}MKvXR
z5?ksMFeoa|YqC@G_~{!~X#F=yow6}=M+@ui^i*zca@pk~zAgxQX;g5{_Zt0<kx@jE
zvt(<Y+BRnUq(i=YA~bV&wDS^XYXtT&nV-!ry0uFhw+-t6z!vz0pEfTH5B9R1^ZG$$
z5Ia{(PJ(0<GtUm93PFI5{Q0dZ41EXNDC=IT0xgNEl|rV}_6G+oOcI5c8l5xxTkOQ^
z93>x}N_~}@DW-n9L1h`!lklfZ-Cv@2@|U6o0iJ%-U-_T^={V^xH4*$*eo!0N_CNiw
z{!*h$|9)8it64PIZ~q#McUfED?YM;7b)Y<B&wu}mql4pXyTulX*X(lRTK8>k+f*4|
z+#&po!CZhVP3&2;{;YG*>o46AY8~mT&~hZ9hz>xo?Q;OQI@&w{#?!%h#*D;E(RTGi
z=`7h;@+ZVDJ-92qq8F3`92RV6VMIP6d}$2k3-bbplQZ=on4lj}1;<t_sM&(Scy3Ua
zgs%(a!>D{_V4Rz}HyO1uUqq$AeObxjWXu{7T7mvg{;bCOsu|rMQxQy6_cNxFQNwM+
zFtQm)D3MdQKuAQecKq9bJs?qvrw2QNY=4{42-OYCcsPaT3woQ%xZzs5kg_=4Ph-J$
z0ZIj7@O|vE!VM((c;N;l2U#;h)&c|9g~0&ZEba_u$^#zh{eGucLG=U81-?XRHE$L5
z<88ryx^ql*^I;%@FoSF>SbYN~;oHK%g0WHhD2+cZDD<Z_Hy-`OiNttfC;KTMk#)B9
z$hHvLEDhu@KinDWr@I#?xP`%Rr6Wso{<E+#=`rkN9fE`)f@ko<t!eyt_pxMoHR#Nc
z^BSp=1pW6j1zYvs&-CAR`mN*px1Ijm_x^dR{M+~b`#k+7RQSK@JQZKkAT<+3g8lS}
zFs*Jy=~t%Hq_<Oqvz>h(;@Mu`8^ecjhreOjyg7Vwiw~~plJS$LuG$wYpjL;4{Z=`=
zP;lv*a>?`OMf2yMP63%szqe~u09y8UnYI6||1$iGWMu#93C4fX^|Ai;uK}O_7hT?8
zx|#y+nf14S4KC*Y+2#A!bk6>tUA})!_47YmK5<e!J~#-$H|VEGn8lI!tp=6Cx1E{c
z9vj%E*(Q&1IM|eQTt6&c5|xcV!WrkF?=h~Y8VfgcC)$V60E^yzT_A0{IUh~=%<o3l
zz#F_d+jZiljT}VyY|O0q6tWxiyxKmkLIG%Lw;P7GrEwk<!V#zZc6KaRAjh!5C;aV)
zj?CudFtu=mXGMg&AlcwP^e*TQ<vm_z_(SQh$-cFuLY}vp+cmB9dAHr%>khx%=e4K0
z)Uo?^FTZ43MV*G|fitg~{Z%#<$w*4;^vszy8Wu**54}4if9ZJiDHn&S<8+=&Z+Z^5
zzWn5?;P`^nCl#z$YrR5<HMf=@?)=n0JzQzK)T)M98T4YsS0o3Ob$Cn}7H=JkP@&de
z`tJ4!(9PP;hW?H9ux-=Xf`?%4zd@u4h#wb$+DOZpJt3el=6BKS7Vo|S3a5r+@x`Z+
z?yFv{-rhwlEju*&OG9U@CcV(LeV-n~UpME*Wtsr|sq`nGxyn5z{nOChiV9Y~?5)m9
zw9<3o$6vo5-R&RYDl<YA0}RmdcqC=}0CK7tt`umT#q}90jnC~)I*@>TkCk2#AJ?rx
z2lH#xVA!X9Y=g5UbF%07Qlf-v#jm^VL?{@~!y7ScLP-GhhB-vPhTSPXQ`{fE-;#-`
z-(v-)OZ45T6L&l;jf<<L!z_zwU3C;ayO2S(>6BV=kTjB1x+$_d)<fcQ?9L?Rf+c@M
z5~2pac*yGk9g71KOp;!M3ir}O>eXWnJr>rW;#J;iEVry#ln+`;Di`*73;KhejSxT%
zx3@U|20<jC$X5lBbO8FIEceX81(0?X26&!ugIaE%6UI}dFS3v4FMV2SVC*b6qwm4O
zLG8$9gibFa8+VVntVxQNx>w-Hs18@MAX}|boM5iK-Yq0Anox5JaPG5!n$7B$tZ`Hb
zVi&qf@K`rh$knAt->%c!Ms3Ts@r-R)d*$6;r13HM9ghXxA=B(<@s&2$&RjmyDBevI
zUo;~{gH^_jq1M-6?~Ga5KFOKN-7v1jgs#mwBxwi|K9~izOpOuPiWE$TX1n}#S<)bH
znNoxakklLuU=4HLM#g9p_Z3DGZ>AaFu)g?irXz@zuTj^BTxutOP~<v7^9<XgalW!c
zE4~BoJL2)E$WcOml5}xL&i>8=)&>eM^p-s26vu~)Ptj&OrTip`x>b6*n-2D(vdtWi
zjb0IF;cC2=z9>U(B|gBXf$~k;UQ4q56n9}$bg#Lqumr+jMS!)!|B!EO3$qTFomPSr
z2E8T?1ibFXS*XW}uqykwnPQc2P1%vKYEt29rDVs=`F5=>tA!o!f>XrLJr7vnS|1>C
zjG}7%W$~Y}nU}q;eb|%buk0-pb#dPKa?=*~Zhq<$f)q7!7zzgd0x|RmQ(7q*T#0a5
z9hSrbAjusz6*}y-U5QNdt~x`w7-dxLUM~J(iR-VbHPg~MZ*`ypJoGGa1ZMo}5su0O
zAMK8-o9X0Vb@dv$f6hJsH%Pe`b!Lq4(c3VS-(_eDp?RmOyABs57+sz^8@3Jry`iNd
zL9hKxPDTl@d(Mi>-B2e*T)ytC_f8HYV151CYo@4b#th6bEY$Kym+~GetedLh!ey0P
zB)Y|x*KYd&zZDjihTwn?w`7c%!`o2D$JC?VR<-O+SS?10qy;<^(lK_l$L37-yDl){
z-CjNV(w;F8U8b9kZXG$326RwPAP^e@@|?y!&^+U+V??+C+Jwljh!A|+e9R!fRg})9
z{GdBw1=GI=&swc}-*Pt(H@ACJw!LuUjR^VuuB)k6r?4L?O67NYUriG2Q@gEP#$4@H
z`k3)?Q%0A?(9>n3>1B<{IWC!s@>TanhnqnrFRz4z9XEMA3Q^L`-jfLWeCK=OwR*F!
z=O+pqM$2=iKy(%PiI2>>*Uojt7#9Yqajh#5eF4LS#fE1#4G#Bku<NAr?)U0TlPF7k
zBnacDu6E^1+8PCY9>0(q_gVbJ@e9Nk))9>QjRijPkp{*)WpsQBF)tQu2c<(>X4C^6
z<Tc^i9=Miw&B<Xs0cU!hJW2|(d_}F_6uIt=dBq-5cYTwFj(Dq{vsG32LCFI-)_QPD
zdh^KkaxS8gg^v`Es_@IIGuIX;L?bA9&-}$(l$FU+X9yy7G>w`{-q6kueOEuet{-rJ
zE`rX)sJ}GUm%A~RSYlR$hA%2jQ)Mla;4IDBZkm0!E3p$^*<6{grV=WHg)h!<yY)3G
zI*3WUx|A!c4k5|JTY4mS<tg%2*Y}@)UtnwPond}3?LMokVlY!wrj5u)rs;BH!fJyu
zV^9N<^Go!XnT!|F(4$uSJlkH7Fjr`gl@Hk=S<8`}{IhIIL9dOrJ?ZAYcYzwoyUZsC
zOGG62*^#Z%{Y(jxAHu2;AH!^NpHgz~HY!K7<GQWQmG&BOdtQb4d(g|!$%K*32JdsH
zi^F7`jbJt-=vM=dy0t#*#v}tmQE)k&c)?Ea&>NIq9)+{hTR%MKlV||hrqa8|qh)B1
zeo3b%Z@BEq=o9)vEL_%d2P$9E9stU+T-J30u&egy^76O@uV&YTX;dO!jL9TNF!9`w
zyKomxZw_A2R?7<UlE#0EOUFCz8qhBForp*cJ$EgTHwu@|wN?$!LISr)jh=(iYmNcZ
zv7PWov0q$057+XJZ?(35yFh*sl&&S?vf=s#*o!7^dLhqrD{5!=c_B4Xt!3EQs}ab4
zt8nyHK<qg_a$gxnc6RCTLTg1Ib`MP4MmC!oM}4RS+_!X|lWDJq{Lc4Wh1qs3ZB4@0
zp0AyBrB96$W#*BEu)00YJN=a4JE{yZE2M$^(MNZ8nN;MuFs%1Jc7g^}Y4MmE`NJ?L
zJ*=s$>L!vG+PGwSvQP<qcArVz)W?9h_bJJi0E+P;2^DSk6<r-gNHGDDshOfG2T<jY
zR|GT){7B5(XL>FrcRH64O4LmxY!1lTyPenXUl%7Sn<QgZkT<0I49*gY?t_km7}=8(
zOO$G{sG7en$+L>14bywpR?KWntj#5LZ4K=`ZK+D3Ee;fx^SwCjo4AL1YFv{^y#I&!
z?0=LCGyL|iX`=o|F<;Khw2X!q?9+yNRSX{))^XYdifX%`*7#0o6`~~NOCe8ZNRkKS
zkz~!v=q9f=dzuqLW44j-pxV-K_SBW``4ooxtHG_4lxp2(7=tBA`(bZ`<)wa2aImxZ
zr!%=&N}c$exZ`lW!pUK*TQ~JR*`E+FHc}TlPOmL232SYWHQq%$!<Zow2k^lGKvQ>T
zC4-mLC@IO$cwFED0JJ5qMO&D^YuO@4ALBsPP4oitD|Ejs9$hnF`z8o4BdLDueqP?b
zK;_8VPkL);dulWJEpepbHwZUod(XUb%S#~+u1CTlk9>+&Q6-oc300p;NBRw^JZlKs
z!EO^-)|u8hBC}HyU5kha#w}3JTTs=>BY4bqvbuU9VZ!+OIhx??tCKsHFDye7{TV6e
zy&ha9plixTcHiKUwDY%hbt1m2h@{{5*tg2Hrb@7?JEa?_EJ8-sothZ2eVhBN9CL5L
z*lJfm(n}!jn5+z=N)mB3LmIV7{5=sp)WtJR&_^>5vtybdMt!$#O<y5$Wb28R4VZa!
zHX5ll?5Z@5$a;_yYvS&f)khT@d_^M_!KK?Pd8t<jjB~8`7r?FWQQdp$o!)1&yvKE^
z$d+@Lce~F$3j=&`=v<!g6X{P4$qt#VnWk<dRtZKX4}FAUf~YS3Gow$n%CeXrFG!@_
z5D5v=IAi!I@;)2<wjY$1yCQIKe|x2fI*!y5Xg1Zj@X&(>CNg)g&aC9H9B~b5P}6VB
z(n^h=p<O2C(nVXAOkHbjwc;Gq^y~nLN81O=Gh<YFgz#zROaJ2VW%C9XtH-5+O47J#
z@uURrdFcD%s5GZ1*Dlj-u%7Hdl!q^0N=d(^j{A6Is`x36Y1a4YGhtLZEuFrTdXQ{o
zyA>DglwQ!YfIjw-kzL~xK(Qu{9FMF`a(F6(_wIN()0L6NIy3QM*FnN`4*UJLj~p^P
zO^3>0i%5}0Whb)g&cw#Lg`FxHuaxqJ>x9{@u9`2EDPF_g$X1jmH1Eks%YEC$jpyZU
zmN2W`^|(<UQ|)P^&XSrbuzkidituWB5guyEtE%wkR79Z)K%^=$R#?@p4Z4h!daRWs
z;EG1wTwpw^QUGNYyH(j+(rh5z2JvNj_hs`w?QJikDzb8fO<dn#C??}vb+veCAdY>z
z<8tc}W2dl84vytbZ<Q5GP@}71iI+3E9q-A>4~j1ikZem!W5(e@otlY{nnbpSLZ=6Y
zD_2i`5Yph#33!Q?DVV$M)HtUI6cK7{c>OptGAUa2>lOof%0sl*<xso@bd=UJADi0W
zZ_b<ni9Q^=hf$tyQ%T!LE&ACuHY9ExxcW4VI_)iN;(-NVO&r3~TP@uwJCN_5j7fnv
z;WW;I$)0<W?pwK>Z&Ta2D-PE_5Irm|WkUjN2B@vHLfAw$=-FEC2H6Q*5VrtgY5}j!
z^~SY&#FK&68AE~Fg^NQiNRa`;9<Qay`dCKrd-|QA<thjx<VdsxOye-8n(YoPbT7&U
z)V$Y`-eb(g)Nx*ibXyJyxQEW&y1Rk~I>7}92Sg`)(R2eN1s7RkqM<uZXz!^ly=kg*
z*N!XVk$fME7#oj>2*kA)%L}uUT9ZV87Ahu&8feUY(c=xLU1fw+32WVZj@s+R=8B1f
z=Eg(ZD3;`BA)Tih0wn4fR%DjX!g4VUEg|||`D&sEf(#}b+ZPpZlVm>u(;||d(@<<%
zor}DY2nRB&%dL>4Jut82OFBW$Uq4bIQtNMnTo%xkvMnaWM4D*iMIus$E0bui5L^RZ
zlqwE~TOnClQ(|3p6L%~3zmJOcFA*FcuH@{(S_7F?A8lG?`qh*WC&%k1R-Q>m4cjLK
zD+{LKyA`)m%>6W(8ABwS`!XPAs*0}lRnw<o$5v%XANOi|jamoRU3^q#N4wdE%k@JX
z=To{+v?m}_Icn9i?L)s?h0$bV<+d$eBekQXZb{^_J#Mb8UTW>&@IergTQ|}l$gIWS
zb^C6Qt3Mr!fa;ZZ815@5FN#xNN|8GoWrBjMz%%Gdoz4Xq28V<riO?svy{%3hJLFn2
zw0*P4a4Feft7#(BbSl5I1LlxV68|T;*UGFs{L5+Fz46*`jkn}Idz~d7a9X*SFfnE-
zGSQNNKnB}@-x0zINw-()A6{iC4c?jL<GWnFthbiru#}HzhVE5)*N&ruCOlncPI)H*
zId^x||Inmr=hfpTx*Y0nTNT~B&4OgrHJhUbxW)-{VvkKfq}j9k*u89QCJ6FZnuW#s
z8SP3<e4X&1t1@n;VBtk8;v<X)9OB|cF*5U6G$KB^&{oXtV9AvCJje6ZRzDNCW-CRE
z>RB8+`BaTn_<r88q~n^3(cU@8I&>bY9<yUA9&rG7BJf^Ay=*hx?PSk80fsgMOC#Ih
z2IDNT715S?A1N|pD{&XIOv9MHl`F4z)(oLc7<(3Mt1$5z<)h+Owd;}#p)xHy8Flnm
zPu*`~Vwj%fTi^Ba?aU1FBd*2)L%nqB{gj{p`_M~1zPen$%yp-n!Lsc$xInI+q(ap=
zMVsSsT>dZPTQH-DBtIpBQ7nN{!+$$4|8b3)Eia32d2swSf6dQWA*7vi2w>eEi%S!B
zi+|JkvEPh^T4p6@16??&jVSihByK09-|<}7J-O4`R$PSg=~g;jQ4PUleqmL*$yKza
zxjuAN<WS{ggey~`nAhbSMQf656zGG;E2^xjM^aL67e#kSwaqKE1y&yE^kW{6kgY%U
zAwkB>muF;RzF+m0>wtLoW_SiMy$ap$u4&S)b|{5^5)<RgunM78Ar4@VD07n!jEqS|
zfXr=&`Lt+S_LqI<$8VkE>rbK7d9)(Zr|7(3uI|_rx}WEGDo<`smty++vSQ_s3fH9C
zO~u9fG6M2qVako!6re`bCSH5lIF>1_{OXDsWw3X62sZlV<4PMh71lwu9UUKyxH@sl
zHzbxMkki7pg@yD%zTOKOfe`WAN#2Q{K{4Jayl63~x#uj2`{T8NAlAhFAEZZw6V`d^
zh85b&58|(m3)m$|p4k52jm7&1q7ZhaZQhu~$^%pevK|qw8Q)OJT^Up}fBpE=fouFc
zRZYj!F`1*dKAW&x&fAlx&2mVK^w)^&I=##mQR}w>m=;nt!r~ToCf$7zsaIT7hAl45
zzhkB<5#F@>;5|`!=9s2>e<I~1)q`x3;-w=MlqC5^Te?;9v-vs2cSi))pGY?+4WrMK
zp?U?84fL^Q(YR0hq8^@mCLSm^DE$#PjLbvL_KiAok=<}(&<9euOM#1O$%#>C-+6Ng
zrlNEhd$A|+Bd=)=v_$ch%HA28&>D!PdSMg|TBurc+tY;Jf)#rFg#QZyFcSEka;{e+
zWOP-=z5ugGC1M?AR6%opOpbI?BUj)UYcPC=qRbeO48%p;huwUf<&8r<9{c#5f!{*}
zb;co!07sQ?&6$o*+DW)X{BYuMyC%t%5>k78i_u>8V*_E;L~bkrJtp`z(@%tGpejSl
zG#@bc3w&^R{|l!{#v++@zZa?>)3ypM&$R-s-*vGx37#G+ezBy5SXeOHqVo2D!BP?F
z8M$>78&(<^fep;>h4%SAgu~u-zM$_8AgfH+CakGfrqNO>w@kqq7jDikD;a+%>h7bK
zX?iEfSf;y7R|I)u(2AmX3+IN?xuPJd0;CvQHuUMmm6HDB-ijVvYe!sJ&c4-;@LZ@I
z2^t|xE<rgv8!x?2XE8S}aJ1Xwm+dTtc2C?A5CzY{=GxZB6Bq8Gf@MOftyU_VPD&u`
z_Q9q{Mg&+pEBOGR`yv^T3Y?bt4T1&OnTXpkR>Tf^Cz_@Fbfqw%;bGL!_TdA9H~RR@
zJ*?a0<PKDr2g#KSc*>qP$7rO`^OfW8Wqy8QDPt7J?}ySnVqCPA@|Kog$z^8e6IfJN
zv7cLRW!vuI=lc+3*0|HK{=Iu|3$9Ee-y*4TVD8Y82fEH~h~=fS($cB^87I@m%Iu^*
ziQHM;@zy_9r3$KInMpZL-9dgrSRK1aWDLu%cCaF8CJ!G}U;CK388Z1c=iSv;m)?(C
za$55aDH)IXJj$i23x$Y|+g%mW*`-;QzT|5Hckci++d#bTU_X*}9|S<{{8$-3hS65l
zF~$e^BRjsN3Kw;5JyHh=k++#_zqJ6*8Yz&iUEuQ5AP6Kq!0%D<zRfj#zS;cHZt+cS
z!=Ed+71H7mihVlqMhO}*Cv3&OxP(<vcH0-D8BD$AJ++%pnn`uz>Mq1{n8_KYoG}PY
zL0npy$JijUZ=8}1s^lUIN}k$O=wtN2$z+gN!;;4_7}HjQX@G~1uwyDk$<vg&+bn7s
zR$Q<BQ|_`hE2n3!V$xTzTj{tYA%Y4)u)vv=war>$;RM26Y+2oJBFFo4xh<Vfbv&2`
z`TJ>Pt`bsr?JCoW!%Zq4c_VZNbLWW0&zyEwUA)dmrE$Ib<hyJcvQ|@6E;S~pT7%f%
zMb%6ziJa7Za`248oMOPN#<nsj)K8GOTC3ooh2{M+_CdV&dPpeO;yVTy7?XQ!T(6UO
zUOGQUAMU*-V9!M;@U~a0v2U~BpGHkF*Cte=$8~pnoM8)0=rSrW7V~Dw#q6VdVH(i=
zoAEV3Q9UN(M&T=C-C~$sej9Z$Cb8r<$n^;X*E%bOpZshFy~9{5c2z6Iyve!EB4P=H
z52|+oQJd8L-ldvS*#~&kal56b-j{dXI)A)`v<3PBd%n$1!p3axdCNsj06ANkK%RC@
z5|qzT(LJg)5~fcR#=@i4LIGvZr^cnn|K)k^zXpH$ALO}Pw`8)UZ*kj>vBuG1R70X*
zup@q8$nEm1WAf!&s+7C~84cI1KZUN!jGr*-ek-#t;eLXyuYlK0f1hKI?6m8(d==o`
zv<tLY-8*SyZAXz%xUOugyUXRF6P9*+K1i2OruiSt!$Vi|ohkFIL`;og+$CNOF{Mb+
zksD~bkL+iM85ci`*-Z8LT%BedJ!;*_aLlLnY9@Y|Pb>DI?}Bp_<?WvzPqD3mE!-Gc
z9fX2(z|_yUG?rGF=(vB$DfL{8#Oc9VPTPS)*z=Wp5cTWo&-V2w@3%+2(!MideJA&{
z0{*GO(`BytPfu2EnkS?Ln>sBdQ(1HI^C#**ySvtmrdXG`<-&s}{GG2p_fzVLO6{D@
zpQ%&5*Pf~m@!w(IjjP;6@H296URO&H6Joz`7*e%v9OczEu3HU8juUK2Tv4I(&&>~^
zuW-JB%|$JyS9+5$ZLANV`HiSbk^HzFq8-b(6io--t_9OhAefO-_RG=|6y_k5M7Agi
zK1q`vY9n_^w&0ue)IE`LO3<fY*46|Ktj8AE$g*`fQ*@vwpU0PI@00mQF0mC8PLGDA
zfb^5k>p`Q>VC8<I+JL3yd&m(l2*Vw~7Pp)O#~ccy#u<JdZ}OKdQe6x4>d)B~FFjE)
z=PxzIH4WdA9WhdmVXCUoUe=(mtzpx=9sM^`r0i@jk^AtU8o67ACkL)UrycwX_kIj>
zU4lOuc&O)jtb1SS2Ur437j~oUej!<W?4?yiZ?#5uDelw4Y!guKEUHDWbn4Q$d)CD%
z=Jujj30j5`kvk{aPh<55u+g|l<M00#iK?OS*@MRkPCHCPqU_V_F3XX?IC*CuFx_j&
zChjtjy_6xr;Nv6-fNG<p>)<PN?7FB!2ll4!+5sGLWfhcC@{FI+ziY7gfEL<>Co4G8
zpDfE^*TiptgbrY7iv*=9)-ygI5{X8<5>hXV!avsBY7{!$rZ~#KCPZh)a3I@_W<c-_
zBjX0J1?jcW5J4$&Ja;BOaodc3KDX=sIL^VcAUA2a6tX6mTo2S#VnG)LB!@G&hRMe_
zRqK0P!?O|ZspxPQxi2=4Lk;ftf4-F)i|R)AIZaQmj=l_Z_ZDvxf3i5Qb*wI85cm1^
z9LPfsV(OtQi^zwVZq~jsm0mv?LV#LF0YzTI`HHl2kY2DwC;M@wdIX&QZQ{3D93>Oi
zu0Nvtj$#Q5PpKszl);qw0(fiELB|92uAJGcdfn*fGV9oML?4WC&V%A$r#w=5xI<^3
z`E>{@5jWApwdif>X~x((n~iZ_I<j|c(9-w=p>Q?ZH){^L1T)9t^8wRGH%Mt2K+oy{
zMxAU2M%h`%3g0S+;;(v=9(a{cN}pxBH7TGf=s*;#q|xr@dkgncwQ`~;#V>*&{vYFD
zot2n_W8s!U98AXxlGeSUX@vNYk|c$rX@MCjEr%AYI}TCMPE;Lo9$xo;see-1Se|UG
zuaE}x;oT3P_~f^sOo>RcBQyZL0+Q+~@JPpIny}70^%OD8H>xZB+T;cA%w0sP!k_iL
z^sVO&R~EZuXWBfZ7(s5UGrz@nEHkjyZLwh>Yd&TksmhN?bI!DTXy4nnc;tYIu@IvJ
zOL*8?&;qHEtYYmc^K8U<Y2PjNI_B`qYWgWqtO4oyyNEO-E*uEeVrp2~!2crk!CnkS
zE(=+r*=;@Fyh#%?TE+NMQOV=;QuUwmU6yM5mn!Blxt0jq=|<{FRCU{W2y*lkP$}>P
z18zJ>dsHA@hU}U{hO1MY2RyfLarJ%}Xue?3H0WA|X*Cs}5O)na;^Gqfx~C8(QSX)h
zq&H1W`cr<4uFm>x0D7;yL>&}gjwkKz?D0Tz%m}*+6Hl||9$BCzU{7YPh>*C!HP%$%
zm}pCxfCGCZ74s6mT_iGMU1SaVf^4C!CI50nO@u5M0jx6p0$DV(Av=G#bqmzIa12K5
zr@CNzkpnl1$*N8~^NHtKz!$I^Pt<!5Uk@~x<-#+E#y%NK^r$U|QTyC=vE`i$*(;LD
zM)yAV^qw2iVJdxg55_;xt7w=*##mU`*7M&l!m%ERk2aFLo8&sB9Q$4me(06v5wj_T
z9siQvgs%2nJ57n)L&V^XLo1o>m3ca3KF)jYkQ}`{wtX~CU0?nDcmd+p4NF-fJm|G^
z{t&A{QYTI?yk7C#giwm-77waJY;uKSi+omS#;X?f*nH(+*jTyFRZF?h{^MbvR-N*3
zZSTcjy&+=5mNBg6WMl2_$->SB;U(*PvSK+O8|6rI=Gk1I&!ncjwm>DOnY!E#aCjNq
z56^|xp*B;M&~*mnMgwgn%$7}()2&#iSz5b~P5Dz&5YZ`O%=tlSd?<ClKk0$VS;@V`
zdDW7Oo5M#5YF;v2Q{Anvw3zow#wITyDv<A2XNWTPPdpV1>fNe`l$`zjs1yOI(DJKe
zaNa?)A@b9U@fQ<%58jiFE#ivsVVb3H_iE7~u+~+G)SIq8A&Cp^k7>4OTiUO8H);?U
z(_!xM)*!;rbk%OepsDt=jNO<}Sj8lF;&5rs<V^f`o6Q4RdxHvgKt?cqGY0HCcvQY|
z7c!@~O{$p2Oh541fi_Y`-$7|3jEup9l|^spjzL*=RKAPO7x{2HqQnPOu|F5<h9L8i
zwb&rb14tIHheQ5_a-FIZbpkHqLeaGa?%3Qzs6(*?GwnFN0Dp-tREm7#l=vvLA9G3D
zVBDtE%CW`qlM1=v4jY+&y}U&MqspMWJG)IBAvXENPo<t*en>00A<I{DaYS22dlnHu
zHXvn@Eykg2m&sP=fMv+=DHfN%JCifZ0W71lqNo9}k#FP6+PEB^((A9iNL|Fak3LM<
zECd2vSl=pLOEwTTvj74<dzu#QC3YgzE1q7W@f#$CJ4rjS7ZZ?Wd8^#nxfEaX4E~_u
zlh-qA2lq3i+^%yYOL9`*yO;luz4w4>YTed`QJPXjML=p)5Rj?@qEaF%O+-Wmlon|s
zAfg}=T9%>+0uliM1tBUR-H0@)kq!dVgh-JPdMBZTkjDRd&VTNA_C9yq``xq8z2lB=
z>@jqNw3W5ydgpwf*`7HK+?FotiA^?h0R}gMrGk^biH!r^_T5y(-Hl9!ejA>S^J56k
zcMOD$VM273XT%O-LUns4ubL{hOf~LwsC^i9q~jd*TZH0NAzu(#!_Gaqkmyr6S>o_C
zL7}QFrDRawX;qFQ(7V^3nr0w3afo9iaN@-#+kV7FR?mR-EQW(|HZ%W|;bB^OBuj(b
zF|UMR38o+g%5TNN?WTm*4V#{afv9Lb#&6zqW87&C+kF%c$=?mmpkZ)#pe3aJoy6tu
zh*wnCU(nQW<?4SsH2v3f+x#ccl)r=T+Tg72!R~wXVghIH&@Q90M)PqChnRVfwMo@}
z_=rz^)IHf2HV`zcCot?#$8Cnp-0lkfEPVMsG`{QmNbaHLeY8jR>AEKwj_mA>V$a!G
zsW1j8b~)e58+Pexge`thKXW*^W1H*7eI5;AErA8`;-U)#f7(Nkq)8@evL2WMa3=_n
zfo91v_yNI}AmCK_^-I^GS_&03qnvq?0X`wX0`x7vd9DEpc=E1!G1*bu=&EZ=`@mN@
zLGa-V)2NV{pv!aBUN6|=?Te%V{TP9PgU6jua4!W!tb3ZAFYdk9vYMP<J3Oi;c+2rw
zQIy2d=Z2t~z@CHyxtqvR`-9z{AGB?<TK3@YNaxy~;LAS{BA~MknDB^!)VJvjB{En3
z`yrj;iK@sJiLCqOpV^-qo<ZoxP9m*~a=wMCSV*o~Pt#$3wYFyx9q&*hKA(rnT(6pN
z#-=UMQUm4Y(?|wZM@`;oRd^ehy^Ib1MssBx_4-1fZP8?L09iEPC%GA_UQy8Mad!k2
z?9F3_zkQ0(VimaHR{5#YL^!_f5$k~ni=BNH3?3HM9PwhZB?ERS*<ZW)_|ib#2)+(z
z9ZITmsZugi{18^<ps{g0!8<3LozE;kXbg1v435E=JH!%M8~~Ob8TATB9VfruIf%@)
zE$?+Kb?nNo&);XMy<5%pTD0H8T!Sk!7boKS`=tzm8~Tq)Z@&~R&h=Kau*jm=uK4%>
zJ&YnwB36+b3r4NZzfZZj-*Tb)MhoLkF=-7|!)hMpgti4KJ~FQiZ}P{UsJK(dVPGH)
zTW{tjf3V+Od-8L0YdSz7s`V>DN4^eAAA7uzt}3^o+K}o+zc*JqSZgg1W>M|Ynwb(-
zWb%+!fJK9`wPqX2)#8BUB^H`4`7lOlB0nIDG`Myxj1#=xo+_boKit28A#;q8K8RDC
zK{3rB5l5Sm1Ebuh+wPwGa6760oZ{lm#g0PGr=!TPsz%>-(UZ)`Wwc%YAvW%YZpjau
zg_JgMowl<n4CIT!^x>4X<;ZGHsaz#V9ktfIjfwnq8?iE~MQTo>@CR7elWo$W?fb3W
zXABt~d80#=RGa#HWM9XDi!;@whVz-vSjQRaRKMI0VWU5-=B=LXeIXYw&3M*1aV265
zN6f7Ti@LKGB1w6%4&e4znggF?H?_xHtTe)RyRYKMkRwV>KAw_X9?2hg7(R#;`tc9;
ziB%v?($I)(ct-g|t2(}XuiURRCBuovNy0>`tBOxsvSdg<n+A&L`NOu!*VKv@v=4(?
zl}5sV3Cjdb0i6Rb!hT!)LxvOiAa)hUO?5(iS9UB**&ne@MdmD*!4yv>d$uf2PgjKn
zsK|CKR%+!Shi8{5t(S_51D|H7i9Y^h@M`061-i}P_<{1fFLTODgujou@@jra)`_0S
zAFaQuV&lGNenx$K@Kb=+Ad45Scr)X8OVha^a}(`IzHQw`<D3>8v1Zq~tr=9t>3Uzf
zB3&s+7xM+f>nVOQ?CW=pCz^5W>ksZ6JG9QjEwmyszeHD<^~3k29;3#2Qat315{7H_
z=q*>h^W|AWlJ`^1f~*E0(Q4Tl#C8V1Uta40<+-;JjZ#ZT_Sy>Q&q69|G*#XSGk#I0
zyC)UhP(J}0We$QgsekZ^N$T3y*!yOIzK~AL29|C|tybL=WLy5JB$#wFM)~EwaWC6K
z)_EgrqQYbv<eP&Sa<}Rhy{(e&Cgaqi)Fjh;l4^@OgwH>T%`Kx2`@C!wjm&+TH~=DB
zG4vIXLEYF@gr$)|ZN(`es@^DkLtqxMMpk7#_E?8%zF^pA_IaEB6(YlS=gNiq9&`v%
zap8ciKMTf*Lp)&}%Z76-P_I{Uodvx(f1#3x_6Wg@WgT)0ID2vtEg{za`lHhLY5Kua
zR(HSZs-bUath^6(IF_4#)h%J#-lQV@orOfK-2+xJy>K-0F=?qT_!9A3jl+ABjdU4-
zzDkrtOSa=%OAGAcK;H&N`HStLCvDk|t`X%I&$Vm$;S$e~OuN$VKWh{<<_Oqjnk^gG
z{%Qi=SkJnVhK+}7Iv_Hjk5AIEZ;{DHEcp+P7}C8#Faj7qnGqaG7ouk0Lp&`N<5(zB
zcK@COmRsx93lp#y_jRgcd1mx`f}QSaaAw%chBL?C9=bJ%2yjEm{eX&DFMVMlrOOZF
zT<&rJ34-FmLaVVV)M}6gX@-ob!|a?^IJ$1>Jr7%WGmOg;qG~94@}UKzj_%H!J&r|0
z-_!^Xy)d_|o7<=@9(^(%75l8(4YzUz3}K|kE&px&>AyYZ6Zois=43>;lJ<!V1LyMZ
zvR9uAP|z~;EiII+RhWPWO78o+E(Y91nK?er8GTR*l_~j`G?WGNHFRSdwbwxV@+eMa
zs@`h*V~dU0UIB~CKhZu^9?B=%g!d{r#(`CcwePgy-9&8zw{Y_)Pg8h+-R_0i;9Y4y
zW-tQUyk5?Cg%U!YHKiUX9ZCSDVj{>U`@{w*#oo#@nyOhttw+F~SfD{OqdPDVC8YHy
zW_9_(Ba)Xb*%$Q8j@Yc#G@YJWrQs)10$;nLqjJvho83eOR~yk`!fHuA`DUtbNj=sy
z%7$ti#q2)>c{nAIWF~AV4etT&8IBo~yQWEbX#j=T%krp&UnI{=D&N1;!H6t?!I?5^
z+B)F2?9gHjgAjv2J#DU%o5+imLROfPp1o-G(#_ca%=yl_Y#tk#9f4NTh;yixa_w?#
zW7UBxr)M1FE{qG5Z(ZPCai_kn4#~COGu)nz(vKNQkP|m}9REE%ZnYZsu!CX9OsPJ|
zI8vBsiB~@GxqI|Fe{bc(=guQ8HXeLT#oD>G4oXL_W!=a|;WsfBW$%|Y9#QnN(1xge
z;;xDBA3vjAj4P~Zshez4&c}mFCD($~?tcoH^B7`oWj<DK^t5UaD}yQMbL^wX*5i8#
zMUCl6t~K!86<~oPV|T6j3s?3~lt?XIEaCS2bD!g`Rrqg#523fgW8lvmSwm6^Vtx<r
z;doC|6D`VCZ2gvru;v7&;sOabzoF(m2l9k*o*S5tF1UGZ`3apN8IYdV8eB1)_*Ksr
z4{LY$8}ssi(<Ar)U=K@mIuld96&W~oAvs59xKKAa_<eI)>$6?GX?K@PkL&0OE&mKa
z)R{$s2#{HpoxA<+1epZN5s7y<84dd{7)qsS5E6RRc)F0`!;)qmVdTB%ke^K?cen@q
z463rayoBXL)!U1AR_ZzA4O5>?QWQmFy=2Z7EZzJz!s|?qX%C!QV9)NKCU7xKm3#6$
z4rYh4OWgL~c9FXZg@g^l$IKX%0ub{sXK9SXc2=t~&QjkTh-?^0GxOXslt9jD*ygo#
z>(mzADcR~qTfM~2w<nQC>f^W%c}&ZoyRp|vzF96WoHNw%34IlwrEe!*nCqiZsC~c6
zF$4T+2)s8@N2yQKrgf!p(Y3X1XN<Zf-<ej1Kb+=GJpqF1{T))sQX??-U2AFA1!1k=
zqx>Hm53}nYYkV|&mufZg@t~2*ap~v!0cH`p%G9Msd*N=z{!vMNP{|#8-lm#<U&;v*
z?)uVkjuwU1eX`@3Q5L<!m4!+M1%HrO_g7N<Ob%3;Sf{EJi!$+f+PCIW6=+r2haIYF
zn8&I=UN$+=@}Yw$5|IzeBIQnzmC1u1Zr;^ytIui-;15nP6u-%1Q!?$%vvQPs%1AGR
zoM-x?_rv|Q7(Hc74)>FOVU=D)d;u<6+06L+sHiAkthDzw=@kyEj&4*FfkWp0-S-zN
zqVK3=um$V7GfGKQ4QAoPyNc=DPZ);5nS(oG4Ar(Zbs2wQ<fa2u8ba;)1@7N&vOy57
zcRe17<-8^r{?>09dPTn=S6`VaoThYJAjzaWlAhexG$X(`La2e!xNSk>{}mhn#lLxq
zNG6av5n|Bvo$v4^;I3MusW(-h!2yPbt%HD5{x!&J0{VrS6Pfpk1R8K>S{zYWDr`ic
z78h1Jmy7f>u&72anyD3a%R=S0DVal7&sjeZg7=noAh{5n*M@T42Z$Codmr9h_`Z1K
z`pMh-wxm|#r|N+vVI3W+?`$38H}v3>Ec}FNzvI!W>V@@HOsx8@B2)JH#l(1gWCiTf
z1>?MeAq&IV<+q_3t&l!dnvYPQr}{nfQR^L6yYaR8{NPnPYxN*a&v(OfeZr{+%3?cA
zlU$4^!?}=M(Y$QPF<ddKopFS^i&Xe!r(O=yy+&0f{Zwn<iIt4&btf(%fm}XuqGa&-
zAW*eJeP1nDL^3VG>6FCZc%pIDDEf3td^+p|`y0_l#g=9@_q|q!EHm3^x|wYxv)v<~
zW-cIeB$nx_CYghFRhF5v=muy&jtGv_>YsmGCGk>U{DoF=Z_!8hSN7g{G}rM4+XASZ
z_W<HWn|c8(GWJ&J*P5+&_kcag*KkG0)PE?}Sgq(&fuB=so44`0`q!wjaE~z^e0rcN
zz6>pNw@+0)C~n<tlTCq%u%h~N?lHIDLY7<bn_nTTo(4&*Dg`Z@tWCC})#=^CvqK+u
zOE(@{9K?G#?d$6+0QK5jRaqUm?kLgXgxQJ6X5zU;r|-|x`H~o?imEC<zO=pijj|k#
z78i1$MtcMy35{nSejq?2=K=qGaIe(iM;T(s2<>*r&YZ3y(s1%<-RWp8o}A;k_Ort!
zZvB{IT`8(0DYLdb-TGT7vBJjV$BAgWidO<Ti{Au3V-GO%s^zCqqEz2tqGDk4c%Sc^
zkKwx>oz#C_@ey|K?!(kFY^yLC8)bK{x(v*k=b8j0@ntjblSU1|zXXHv!rjKSxND=-
z@*PoG#2Ie_Z92+FRdB{+`(@scI)$K?_lxDztHvIV3LqdU!+4<hmV^n%1|1x=)2uHK
z6vA9ck+t>X@ki7<qcl3qEw+CyK3J}vVR<q3wPaE+tW)H%w%L0mzD^8!dM}%!r2Mhs
zK1%b1*=Oxth-Zi*xrZ_&?gnKilPmphzWd8dbfPXxei2x|U`Vv@qALWUK9TmUAmtkU
z90_O2l$9%&VoR3ST#mO4{0v6-Rlz9l@T?s{=A<HPY#8IRlPoT6y#Cd7*QeF1{)71P
zDMBCaO#9s{K73oV(qD{qQ`R=w)KN3_ucF1ZTcqtSC=_W-c*;RV@$|*&v6biuc`*B^
zruOe66IFF1+z%N7V7kT~s%s;@r$2qxw7lNpY`3cHF`uvF-be6#mAd&q5I<-9`e^Zw
z^Eumd^J2<h3*9@x5zK$j!M#yP`b6W5j+IZTa(z#ly^wp&g+sHLD<~3Di#YXASIq61
z7cu1||1lxa*vspKk|xbVn0kCWLJaPK<D*&*2lEogv-3RU<ZrXJ7jb`wZQQIY(M9-l
z<8&FG<jhe-z0gi-vTdrzbv9u#MnOu){P6bm6If+zLEG`VA<EU`-XB0pq{MKxj1YnD
z54KUroF6M*#kDAljJkVR_hpYNTTWT`eXw7oEVRXbol<J^P>E0^PRRc3r!pqThte1O
ze=u~(he>|ViV%Y3iKZuKPuT9r*iz?2aMPeCzjv<|riKyU`Z_6zmBeN1Ke2tfE51pg
z4iADBTk>__)_v-)0ZA#r%(Vg=CvAwKk4Mn7!@}+P&+SI5Ut51I(zN@l)1?<PE46m2
zp7-b1;Wq~<o>ZB(t5i!o#<Y%x_acJXVC>W&xwzT@o$3TvSXGP&-<SJJ{$EzHby%t?
z!xfNI4=ypbgK%9$&bqD=*>wDdc$MSw&A||?c9g(~byZG~UFf69Cz5i@n{3i^S=6_Q
zmlBK89-K4DnLtE5r5G-xk>UE}W4Rer)w*>zf2mk|o5b)ZdTJvaL&p!EnvztDpynEM
zd-*O{cj)&#Z}AOQI3pH4Kee@RyUaMg5B{l^q0y;rEEiq9&!aD4_f;3A{0y10n6RVI
zx3F#b!U)ctoU**iaMdtKYhxKhbue}-LG2|CO8h`bvQ@>WD68aUdOt0G1md?wD%K2G
zJ<0!KR5a)umHJ2lcLa`>#T|gVLE+>e18Pd3kHeuj(;n`AWwhf?MjL$iRuXNU@`RaL
zsVeZu8RWd`JS}w$&3k*_B_Mqwkw$gir#6z`tcp^wt;@zTaj_oL$ckf`@=e?Ih7|)r
zWC|llO^urAX+7+HVOOE2dr?24)o&Tlieewb_x?v@JO7IJ;D5H={*l(+Kih8q5YL>z
z=AUi1f4{~37ylO6{2yw&{a?-|_+J#;-xOZpf2f1ypFF+4o#y}6M}f`%k;16|t(X5t
z&r9H6M3wjd=<52<#4GSW7^?bzP{e=It^7gY0_aw-cmb*-_K|LRB8yWM^tz?7_U4Xs
zeE5}$HUUiabIXV|Me&JsOdEo{UCj%mqDK%Ufo7WGTHS9y_^awcfvPr_4UK>bCvrLb
zd!AR~FznAS{V9k)SHz#H@fTzAr;Ygkt?HkG_)`#nZl8bRh(7_<pCIv1wEU;r035A9
zA;F)J;D0Y9*z9F8-bMU&Ska%)|F7i1zS;Mu?EcBM!oG?BQ+EHf>^lFH-9Ih6u79QM
zNVo{7NUn|$dbda{gD~i;9aM6ETpLGH`KtT=W4)tWH(JN|n#5H`;}hZJ{P3hGE6czP
z|Bfh>a*!5D!llyugN?Nj*IApouY|L<1&rL~sZp~9SI~%|s{B3<&XA@#Id98HFI|O-
zRT1<lp%uP$!Jp^XMJ}m#H+z2@FFc~tqMby|gTznkE=p;xKog)L38j^aY&pkYr<&Q$
zoVi(T0#!H75F&85G24D5hSgdh{Pun<JuZgBbptn9JaTerp@8gk>4u#wucV6XOv$ld
z^cY(mxmj8WDRYE!_~<Q9(<v`g_z33J4Jm2Yy<z#TLIcMTBuMb5hQNT;7%JT?d9>ms
zXi?)ck+>erlLgQBi4F3kRwyPyd)@tY6IIfdIe3<5726UV!UM|DORnFpbQJXXrTF9M
z{-F7K);#DowTd^)415?iTy`H8BV%Qp$?67Ujnuofu|l@z(x@(1$GK;(`Oxr>yUzOX
zoxPvMqMY=noZLaeYHYH3!B=#fIw4PNM3UQ;KIL1*Mu{KH-vKt^tsH2^{pts#%!Q7T
zcD+~u;hXCxFKZ6R9*_%1U4<C;aVqjyGyZz&0CbyG4n`^IqE*ST<8{UEL#;*eAQaA$
zTY?_36oPcg<EPDdJreMF2In1Wzv7nm*9p{Hy}_?wJ^Xx~?j%}X)~O`F&WkB9yga+D
zMrcj0&T9bN#E?`)o%;x?QBm)gLwD|;#L|zh!Abj2#cNl09D7_fbk=jSgkH+%==lT}
zm2b~-ngKOO0VlCZKT&e?2Zcrnyeyp{U25*u_fG?q*LIf0ehZRmoqO07Rz6wvz8WtO
zo@uFYZ{i-R;bBu(eUHV*l}nMcArbQV(I5Xwt@yW|f&WF{XW#7p*Jx@^;yT6J?)AWv
zw?}OTPh|`n?zgz&E0Yvv*;};0Yx=o&&Es)#VeuK6PbX?~qSNu?h6@6819!}xVo`ON
zKr<y(wA4{(%K%;ml1LqnwAb}{-BZ&uneZu4b?)u5wp{}?=zW-u=?&IiP^5csG62_P
zHn?@&JP^&xP<}o*z?WW*W)z{CzDkDC?SgeYMgo&_lLw!wEFE;4dXeCFU#ZRPlJR&_
zNCX3YxNXicv%`W>F1=x+JF0E(Vl(KNiE4efis%8QRFx~W|6W0rQvdL<8{Qmo^#TRI
z^P_X@F@@Q>&(bl7H-xRYTcVDE5D()@T#)N_;dE~4kAecsmnhxh4WfR)iTiFgyt)Bq
z6J4N{K!B{Gs+_-Yr@Pd*i-w)Sbm`~!7OxfgC3xp`o_`zD`NZ;a^S+1z#B)Mn=EA}3
zAdTv<I;lgi7ArNhI5`;YH;w77tfs7m0i4Y}I$h_|SAIjYSFR<WPm!C$6u#E&dxZGl
zywRZTqI+|?Z?2TVPRo5vEfq+<NO@5dOHJ#AlIB}M1$w|#Z|ENLQ=pXgum6LXbYoO!
z>Rx7YwPec}Zr52aXa87U5B2MxY>k?pm$7D-JqYPB2MiJ{dBV3lBH4DN<5z^h2yS*}
z8fL7tVM7~EoN22TCFNFSyty2o6f}D6fmG&%)OR5vpLN2B+=40zONr`|>D7g~>$?2R
z$+i2@cFcD0_Slr!dD32IsmAJu*bcKF@R29U^b-trNE}%s+;J8Emeu|J;N3RioQkxl
zb#bdn-L+NCI`lx=h+zXxQ0@^6M$I8u^^QjvCv2<ZI#Pdh>iNlwvK6q?_*#}GU~3Oy
z@Pi)iIY1~(8*rDi?!jKFJtJ8?U5QuV64%jnXb<i}e8n#SBP`c4+Cdiu4OX3_Z|+*b
zbG99{33p1-osZZXysh2j%Ds*at^o+Ycav>(m;E8K7UdQ7Aj!ujvJSVa(v<62mf6l%
z2VNYJRr{jNt|wR7WlMO(up=%>Azd$!!$MU64X9DCqoB=&SA#OnF)^5oTkax#G`rAm
z8OXtXMNcPVs&;EAH7)PivVowV1IF>(2NnmzwzpdJW-4zfnZx>AqfA-s#v3n<M5Sb5
zIhg7Pk5vq@<LR1!7*arwd^_8@+_MksD%3Nm_)1t>VUb57RPGUeEAB<Rz2}*+^#wic
zm`6UU5e&Ve9To4~Kp(@qMh_akTm8p9PuW(Zl1;YDP8@gSyb=!b!1eUJE!A(ni`e$J
zwXcmCLpO-SLpIrXD$kG=D7(DXO?(ti*|?_2p1Q)#ovj;B#1x7w6p$(?@mIRkKhZQJ
z#-3&*pZ`1&@n&OKPU0lG&2MY91-KQ3jLWQgsxNUV^!}xV&t%S)iq9AQ={lu98AJFa
zaM9A$LW_wFkjN5|czUMfR$bY~gbSQH^QOYhhr$9W_XogMvahI7KqEj%G}UATda6<_
zMb$EjLy%Q43K_)Y!-F=fN@dy=PVc#N=9W6144>@Ql|>4kArFV{i|w#3jwT*^y`ZA&
zLd$N(HZD;W2wz}@KW88*2HZ1z@z{^q3T{K#tjqB=*r5-}tnGT_A^VvC+?QwGBd_vW
z5i`jhSCg6dJXYbF-60F_!xn`0nCor%clvI)$3+%u=-xp$nW?D5nGdx&x#DD#`VQO1
z1$xMIFU6hMNO0cEP+VH-4;*z3XB`IX6IYKAR@$C3w^LM3xY;TEu%oWU4M%RN_qZLn
zksREzcMSAH7Ei;^!{&jy$)=5{(pJ5ge4RGdu<Kp=dv^ZnBKg~Yp-H%Cwahif0jk5O
zYB;{R(D3a*<*2OZJ3|Qt*VJ@;rqwusArv+mOARDiJ|#7NyQorW;ycy$h8S8^x{oOu
z&ChN`)1o*qKchrg-Li0j0q#zQwX~{iGF+=x;MLpbcV^-2vx*Du4A4XvVi=@IzfdrW
zjl_2{N^X{WCc~CmR?Zn_4c1_Pig6#z0`2a*f1R1o3U<MeJjW8n5zhivROk~_!icQ!
zKoo9NTLw|2@6T(V53uU8*uVp80(b)A%yEDWvLppC=NGdZTF_yvegdiYWMa7bCL7fN
z`Uw9x8evDcxl-A2q-1RI!x4n9714^Zi_S7I3x}`GcmSpWe$;H|3FXsZ)ja=$J1qNV
z&mZ3v(`B~Aec4mIJhgC{e3NmUB<&VpTcMG1PyO&%-d(31n{0{f!(|08KVQsHDD0QI
z?Ui(?#vwBzkNG1P^c-!>2gTE`1_dNH(CTrZrR9#5e$VUt*0-ahF0)5ZzGJ<wmdm)|
z>bPj4CK2l|lXQ+@c(|!U(4sfHf}xEbvt8H9f9aSR@nJ1kOXX<*u=ciw(SKVmzkRgN
z9}x(_?W&e(%O&O?Fev>dHfcWb1!r|j;ERuS*V~h^6YoDTqVr^VN)EWEY&&7RdT#0k
z-inA|rxrHi=Q5EtCYXz_(2T;<7Qy}HTNXW51Bp%ZCPYv1uitg|*_RY}A2uyI5j_Mu
zP4LH^qidZeErt>!IeN5p9Cl#bUvDFx0{u+i>8T#`-iy5X@W7oLR-S|nSl+nQPRCqp
z<V@gkigha^acmmp&p6Hu^KxA-7I<p?yyU|6!lM1J>FQw<uqPg?0=20^T|pvmt*Ksh
zoiCL<xqft|yhb-Xg?ATe1iPN=ymj#VT5{I>f&*u&@znzlblQUi$v%|tMMWz`h|uSe
zulz4VhnWNP#uS^`JG#Yd=k`i`k{E<n;pP_MX3r$zp3L~nh-%E8fDkgM$L5HWtagkD
zVHEeU&(7My)5p|HVV-a6Cfm=ro6~#2ie7X$axwpchC`ulhhkf{(_vD5mtRyoe(fi?
z4R+kfztTYjy`^7eeXribObXh5EW=mE4|Nb{V5({MbEQT0$mH=^Y5Vl`nNzT1P>mtn
zV;f2csbcmxm9MfXf?>GJChTdoht@IT(<Z~`cdCc*QvwXZ4vG_I%&&f&-1Ia*l6txJ
zQ{IXQOu4;ND=jkh4eV7e;J)ET+Kh%R_>jwPJ&tv^UJCzk9`C0dn?RaUS?D(xdBaeo
zB~w*N=vo4YuH+0tKwEB`iKp(7Ns|Xs{%Aschj-KJo34s|)S;)a8my?HSg1v}$``il
zYzL0BS*?J*mIF|}$9?z+l=wm#pjc3b^e__8cr>+#RilZa9m?HU0mj1?YQbNHe#n`F
zEm!zKbQ>#iZo`_H1s~tgzP8Ecqz$7<STHZ)my78ap_XN2A*&Gydb6_jXu`9D)mVBZ
zn6*YYlf!DI6&MX?(5b(k2FxU!xedRn@g8bE*2DS?h#=lXu>7HsJj}BFsu!IDyzo|R
zt2pK(RG`X8Lf66n`cjoEY6vbULiC#NA8mI$q+QW&uq)GMr~k_BYDDX8A8Yt;KaFyR
zYOGnxOkBOa7**?i$II0p-`)m9KofbDXEX5=lMhNV!@zc?s=F5>hU$b!i9hwLTWf`}
zKCkb{C5}gOfA>LjyFdpJ9Gh(Jut-GVLPCZU=^JIZMdO;V$&&=m_#bb+u%$j4sA^?N
zU87q;odKZfjje}qQ^EWeD|H$>DaewtqFYIERe^S>2W~8lC0wE0LO=ankP&rb1jCLj
zy%ORHyY^j}_l1rA>8^OE2S3a92sU>RX64_7Y<>Qm%Z%+3z712n-lzqIz_(NykJjw7
zGZ+<gbu6p#h<soUIPYbqirLUp1j-CGTeA^8aM{-LP<!u_c!e2Dg~}(((cM=9DnJi-
zE6JqBi>`rcNk}NUKRu8dlir#=q<BZB9Leb8j}G2~t?l?BH?q(KSOOGHD|*K?Puf42
zvcUO?Kl)T+Zu66Xsl{ccK&N{uP2Liaeil(x(P`|1Z4vk5Bp!LN1>U)-j&UNXvZN-+
zVXRPPITk$uO$|(JgwghZfjx`XOu<dIFgMm$`05tWZ2JY=TOK%Z0Q!VxvfT!4vY@f7
z_CclDw~oL64xG4%*b4!gXK1O+W7Ui$nMs!i%a03m|FOdu;LqP3a4Q+ESS<%`rU_~v
z<0?tEfJASQ66nTU=yN#Se5R#Lt=YH3;BqrI8FEDrD8pSn9V#u}Pz^e+lDR~st16Q&
zIvR}R-F#^t^ZhkT=+~6o9X-q!&@{Ur2+*Thd!V`^(1Zh{u>t;o5huVE#y)8{1-ScL
z#{`%>)@ICgWf*B)H446Z$PK<eR7?YB@}C@F>mR>j-6zasl>97Cl*Nbi8of~JA(XOM
zygk9_txRM3k-ef*#rNUD+IIdUp#MjP{2s$&=96~K#7Dy0)k)oHpM+0DDQS+l^aLf0
z)Ve^Ddo<z^EPc*QW!ulzPuV9X&~o{=kePMXW>J+VvZz*eQLUM?&npGrrDUYt4cW4w
z$32qxN3Nc8SniLBZwnHWg84g<1J0$P>ce1#WB|}f@WxML7+Pi&V6oot6IfhuD){TS
zH-vK(#fIvFV2m?#Ln=8ac+_K?`do2I^x)T0rOUU11=_!P%n%+yq)V`;7%p9jn*{zM
zvmI{u1Z$-m@)NJpcORB{{rc|kXMsWdNYeurC&R;xi=kZ{+X2ikZ%C|>i`UWfi(1c6
zkto3I_Yph4L^c}{dCc$|<CmHov+DJ1i)&6)ifG##y=RB~p@F7vKo9=U`uQ(kjNrdO
z8ux!E!A|JYI%AK`s9BS06iu$qGqA2a_*p{cq*nr$&w+W{DAx$uncu0UVl~x;E`aL5
zY-2dNjNv$DM1%*bo-8RCmbvY@z4yfBnm6Kx_<QF1Tn>m<tA!1+3+phe`((Yf?UShs
zojfy^=P-wzMC;;V3ve%UM5oolH8Ki6lK7=#H??<sd*HZ6er#L_UM(b?`*RCC6w-lz
zT&m^8MH7l{yzoV~_a&!)_4Pbw(86C(D(^JA)cwdvC3AH<T`EY{>=B}HJ+x9$>9p3y
zh)C&cZ`U&MZ-Jz3606uuw^z}7H);<EykWC2ThP&Dp+I9SE|R4#`e{wbkZuMzdoZ7&
zCBVz_3^owp#b5%;9Y}<6bL)TdF3K0!BCzPjzk6-6%`0a@)1Dyk@OMY>Si!M)LIYjk
z^VyJu$gXC>z<?jm7fkifP<9)P3{(TdjXP5x0Y=^g9PKcEF(0)H9B{viXFkJ_%r<l`
z=0^9R_)8TC8SJsH^_$b=H1l2)vKAlI3hU<}H~;u1^zb-Cp`GL3f(L&KBK#L0VVmFo
zFuLBdoozRAD{eQ=O(0yA%sZNp>Axp5@80CGggR}`C}KFR)S7vVS~q%k1em4$_&U#6
zUSkeu>GQymrFPT~W9e3D6KP?;gD+FlQ;o3?#-cpTpGf-lvciZcwW%G4(;h|=h9PB<
z*`t4HL7gJKi&%voSMwB7!^W6$wVLaYV+hMMe;@q^`*F}uy=%eRJmXONX|1XqQL@6m
zvyIQ-5vB)cJC47ro~E|Y#oen#3WEcQm7iuQcRsij$8izaW?Q4UrM}##7EcoOoIuK*
zkq9?(aR}KqyX`|B%Fc#g_gq)$c)&G+!07U9b*l)kE;?=187%iZsq%lpk5;P-s^-0m
zu}vl=v5TXpw>IrgbToS-v^G_T{?XbrEVqoUbT~i_X!v;lIKjJa;K(}Q%CfpGppqY+
zsJyo%P}D##s;MK6*R*xn9_t+BCE=wQK6+_>h>gn_`wk_60`O{&?tXtO$dT35<6J{G
zoxCWtc7@(f<+GZ>*5Uf+h+%d2qCFK&Y+6^@HLb3j$Od28RSa#x1W;)7po$QyhNp=w
zpgsSX-pG(e&J7J!<_{K@k=V9j1)Kvksi)?ER=c}2pes1+HxzX`lld|Xw%!FlM~fXE
z9`4>#QvB56$&t{r7jxd+XS<`|4j2Ssl0jQYIla*p0dhF$BmG~_v^A9&lF&X8^lj#K
z*Jpkn1Th+fKdnJR1@VG781n46@-QLrXKMXoOt$}C1*}Zm1J0ng0P+`-;B_m<Vu+&}
zOqZh>2fT*P5*Au|(0XwQo}g>Lc&f=qGI|znoRp2~-#YL!+z&y!ImW@{;_j>Vz(%%z
zZm+1@R_(Qlm_+F{NU3TDoUkrkCrsn4)}>O&;y|&ZS@Hx8e1tC-a*M3i)fOXZ+P>M~
zZ>Ijw_E^<g=AVr9Nv?1mJznWzy(Veh?HxC}=Gq0i@u%uFNw5a3y^AvanRCaBKDT@k
zM>jW36TabYdTjKTd`{>dRm{ELucY)Ltn0-%AVv-Xo#in>b|d`U_1DLT2hPqz1MK{?
z2qtgHk^EYuUylV1Q$<yKeWE+}VH`DhVtN&NR=rXN1_3OY4Q>6^$AC-TWE-p-fi?1*
zP_k^q5hX|rOVGfotEF}R!ZWrnJny9O5011$MnaZ0;-ZTVRjI=#RFq5oFCE=VUfS!K
zXJ94$D7uJW3wD6jg!zOH0}NZx);u)@dt{-de(<>!(K_FqjnHRI_GAkEI;yuEnlB}$
z2wI8-%!x%~kp;?c<650=zy3NhGV*ZU`>>f1g}uBnYVmYVh_N;scL2*8@)CH~9pp;|
z^og>O(zeqB?9dIj*~&2aA2BbWl2v~9jv-}5N*vXXZp`{teS!>ocrae(Q}+j_%Hq$b
zV+Wf%3kIOju(y}=A#JEov#A2tUorXuCU~pJ8SfI(H;SL{KJWQG^1&8QqAfZ4<s|Oy
zQa?Avr$<+m)qX6MlPp=H8g%(KUhE?`pJ}(#jU~#(kpL@=-|zZ+k__u15*4!>>N*S%
zT}?WMfkwQ9?`Emk1{qTEISiNN^CqIjrp6kAH$J@*;t|r~2-VxSFjq>#PJ8@rxBEvB
z%9V}|Q^t*aL`j#FL<|KTDRS7YFh##~;eHg<Q5D2Zzs&0P!xgPZ=P|s3-!u`|i;8W`
zIsCXr4qr|gjF8oRi3RAAdLJ_nT(MK)I0hd?O8fn9?!LJQcgF5?15RjE(DqSJM|1v!
z#5c)LU%zIHNp!-OHF8%$T2iuPu1xv`R5v;s(OyuA$dfU;I%0Uc+w-DY&$i=I#We5(
zoB~udk?;VxfZ95AWrli8ek^6@r>04fSV`SuGSZre;Uh}}IAPY_+3uV0U6rbNjf4E}
zGu&hYu5Y)3zrQJAb(z-PiF1WQ#DpWA(hNs*c!;;IN5hVK9_=%RIX*0Vl_nGSJ=Vj9
zwFi*w(By`tfV53BH`&Cn=L*ZCDc^X1R8Q1<9AHW~LnqOfDowR6lz*3@mlSAcPDfk?
z<Pm&}kR0k*k9xirrK+l1JyJ0+SQpx3$YXP6Z#3sqR}1;9H*B9duJc)~X}xD0qxz-U
z)&!?h5hjIYCHoqbj$KR-H)PAr;o>G}FmS96$|vd=rJF>a)C(THmg(qyC)K0ccvZq`
z%}vh-#7`d`#!fwA@x+mdL3hc=I*2Nv-Ut&?xUz3?wN=$~ZvlE_1FDnN0~c4vJb<=o
z;G_`Ex_Ajw{-|qPGRmJj9^SI5jmdyy#1;#)sfpKcWMQnLt-ZUT_DZw2_wo^^j_+i>
zbdk&JhOBK&7vKtRldG3B{E8@s+^icWohFwVv4cJ{sUDQ0I2bg7CM=t>_HDBLum(Xk
z<91Zd#q;Zj8Tz9L0ji;KvK`qVjVm$JW~}Y==erWdsa)4Sa{7BQ)HCNd0qu!C?-}4=
zP2;FJQ*aM>sQp1|4@uLW>Q5Bh)~lha_*JdCnPt$@dLLWgLG`s-Pz1w=?qL|bfQ9+u
zcIkB+me^$q1Y*viZ-JL{55cg2k-9O3fTwwnvH<YA-T~slTv8@W(&AU>yTcARIUs^U
z`wrFR;M@=!a{zgdAOJhd!+t-wFOHZ2cLndtTf<n~`hfWmfFb@vbT}B@c)Amy-IJ;;
z1so4V>_rq|8Ef4TNfi*e7&1=gQsOt+Qp?R)fEjNsi&tf8vGgCW4*vUtTM^BE|5e~3
zTA;ddD|lld5*({|i^~ubME9S(U}C`hptm<6s-(y!n~?o0qL&B~(MUTtSG}{>v-sJG
zpJ^h(pOgwjE{OUal9mSQgd@#j2dr2DGjJ;SMj!SExH*|4*hm%|gTI*SKjy>k{+wVp
zBzT+U94L3)YH}>~#2ZuTIcwm=|B7pFjc87;7vrzY=cC0JdGD`NJpb_F>b_J3IMujP
z6L2qhn9(=cVAM|GW7BzNzkLmCG}|?wfYVh5s|Fea+QaR%0WKmW2T<I61ya49jF>}w
zgg#n<Ajt#VTo-Ot4G|5Iu2c+aZL$rVK9uJgJqn-CH7`H5qipK4EY1$+AQ^b3h#6nG
zowF~^lP~*bzu_yPux|k&K6+kG3jvCPtleJxz>Tu*Vf~t<186x-0k0yjHADc0y)i_|
zv+LR}WZ0=x{U`kA28<;}6xtrg&2PyM;P`8R(q58o5aiO0;s}z#qxQ{S;OP7KazR?|
z)$MeSvv2&S;^yVq$#E>6G%|s;n-G2ys>$CSJm44Fl;U4RT8~AS-(@z;2jV{gTLH^g
zh6<|p5jIRH=pyT;$?LcK3-1rDHTpN8<dBK=CrcxXnT8Ew<Ly3B_P2Gx=K9!<{Vn6H
zGXuEWxL-P?%mAq(Yz2ZTd{e`{nR%MJ=9)`jh?3(I9!d1LtGN~CZRa|lzu$hV=M*r!
zpge#jq`CmG`swvZ_);W}jGgn2*mkLa5d)$V8O(fe5A4aVOtRlEk^JVl2J^PLo_#0F
z2n<2F!~!>GRTYH5s36iI2LJsFtWx<mI&c5+m>Nygu`h5~rOun`46>jRK5zBz0Y&31
z<u8xgoR--qgUWPr>3rC4II04ik@O5GWN6V6lRt}7ZDSIo2M`g%a!CuiA~Upn#z%$Z
zhwrx=TgXiiChm8f$7lWi^fhQel{rv=%PnqHfEi#7F02kwUbN#<0Tt*b$1q8*3C+*y
zOgtG@|4h#AQ}=~1WQeK0>rVg1t32r8po)(>wAQf0Jo0baD?)(_5%QM>{?B!p0}g>d
z>{76gV+IW`1;QSgd5YFlRfnjtribcL@f*B|Ttq3H5yvmbss+09E*<;TnvoopK790N
zEIgsoHf#8H&&*y{9v}$ZIJ3f*Zz^b2)u|Dv<8{GDvOOwW{nid$=M&5TOS?T|vMF5`
zlOr!h_QG(89hELFV@sSf_KF49Eonlo>{Ms=9huV}4Z6orZT5SpX%gj)&jk(1JGKiR
z7(Ike&jD&!bYiU?$vqDz%YDU|Q$4cUms^r^4>x_@WV@QSfuG?-wLi=@Ib74wYgNt4
zTpKpA;l;RIOpsNuvW#6gSXJR?pE;r$4f1DLVq>vv*l2}FQHt@8A8p>MHw>orKFH$U
zsEQ&5Yg6If$p+-xDU!^BZ$ImHg!S(A&YVHOuc8_u&OEQ~4Pte<h3D{jJX?Km_!Y}0
z22b@F(Hf0-vmxW-8;j_#g<jl8%(1Knb&ywm)sMB)U=_g?w3SED!pH&UJp%8H&#YSM
z&F9Z`eyp+&;RgY(f;-I3p%pJu<Fk3Mj3jHF7BfpTUN<BrG5I?yPrRWzHmG+9Ts@OH
z@P<uBe&^kxvDn}ajbi&gyPBdy0~Q1|hCo5Hwseidg0>SScA*HhKxk(~^VY!mf_O>G
z->s=;Mo*d_K1sYilgykESEjm3^$vGgsAA`fTCb@Vi*^qT@4Gf06O!|AC=OwF;q{@W
z1ceq@cIVr3p}Obpnnz3*8I{^%A{jnJ#FiPaTxza)MD0&*@xe)_>D=!a2ZSWUmRY23
zD)OxhC3dzvW8`ac|50VIEqy#$#t5rI-9wf(R?CyWWzm`<ibZ{S6Q^w%IXXfC@-(Zj
zH-_vCo)OOsCxSo$_c+R-K}vymI5Fc9bDYkMUzuB`cYM@ULG=$%s-~uK{O>#!8a};W
z)=LhP%BtEK?2U>ib1p1QruiORe5*AyblyZe_K2TjV64A}WdvhP@|9(MYf=$*1J+SS
z*yW_gliDL>UJdFT^Z+gO_R+ui@Tdk<Q$XP?xT_A&WBaTGYt{PozT(I7QCL=8J?4q#
zNGj(Fq(J+|mwdI=?>v}*EB4_;sluEHO>IF;{vGZrJgfFEI;)sW4vV~}x)teki3~mc
zkkE0y`;Grpd^3Pv>x%(f=1#$cp&BsE^d)M0ka&6LYG6vL9NDod<6ZW~=+h?$lLy%!
zE_#rcSlgFK+p9H$yh{7lenbs$hw>19CY;#aw!<-sHc_TQ1bDY8--8lPEy$)$UAz%p
zbG0VZCa(Ti7D^9oIXk>Y10dm-IZArC$#(m@*g!M0jE#+L@78Jqve!ZvT@5K-Uygnp
zWIBrb<eqe;owFWs<5h`Km4U@JcxbRMA`%h>s3Wmjhnhk*t0(MK(sp{^KR8z!YbSHG
z>Bv2S=)F0+Fc}<*zPil-5IkkIz*hlD`FKVX2mlx|w9P009lY%T<tZv~Y6N2zd`2$_
zSn{`X;B}nOUwV3porvA==>QOk9s<K{Z-?Xyu3E9A<mfVBo1FSJD;>tr_to9TECn7F
zE<9DSM_Z7nx`$bMweR3gn==%*xS+?oxh79>vzKApVAOje^=O(Dh>NcSb1ROuqizS+
z-$EwT!lHovNX$m!Osh*sYokLg9L9%Z^?3~TeA<#4n8fKEbcTK@=peOX3_W;Z{R`@#
za$pWJiFWW~{FY@_?bNuufc`U|m^oYQLI)|(m?}U{HYH(0-z_Wc>sAtzW9OWFc2_ZO
zC~*?^KHm_m+{YSTqHfSm4gO<?ikV`fo(s3bH^w5os?+AswK!pD1e?11Fctl!TJzbl
zjD||eC5hlEgW;pW2@f0X1b!ewq-4+yVEHp7M~_EORCO=docMOGaSx{L3S3It81@*&
zhwQ1pe5|*y`$KdvZ{tN&K0+O;Ij-%jZ9`Y0-tQ;eE8i10GrxUY$uyo(Gnxz47*~42
z9z!lay=$BY;o&zzYOeS?-v{!3z;+|VGkXKzE{;ypP^t_wd$sDc%W#rKM(@~>n!3<h
zOtuVubr2DXBN@TDM2kBlsFbVg2P+R>HK-59`%E6w%|(=7+2M6D{l=9`^LKKN8c(xj
zU;)JRl=K*dhXMXmxbQ5*Cr!vn-y8n|b5zlC)HP~Ho=64<i2IVv;RAq2l3@YlB~rW2
z<;91*U=X4lrs(6p?)=;-i+jQvOU|WugM0vt4nu0%;qxD(<j6O&DY^M|0(-b58U#jm
zjOv(zELn&jt6h+Bi<++OKbm|$v6dwi?;4*jYLncy7_FW98LnnEj38MFU7?;J3SDFq
z%YDFoN;`+&s}o2$1P--m{t5*;cp#W^8gxzs8b>l*+5kM@JE3`Hk4?7pN!<0U1A(DJ
z%N+}^07*8E2j|+c3pw~@9oJ85K*x`_7a(p=)@)qeg#cPcBAX2ivcgmuFTjc&mFE=4
zd@mMa0B^Xi0q)^NlfW%sB5bmSr?I3C(QTkk0F7c3z{1yOA9r0-)`yhgzdHcXnFv%L
zVf6$wo`C~ub;?_fmhcXjfT1EY7d!zAWFqUF4bUWzMET7Ryg4DtG%-iCnlZF5Q%Zo&
zfdJM)W#9ovFq@bmEJfthnCAS3>zG$~Ko}*pK;>;9yJ>+_+ug(4j=f=j5G*hF3|%<=
zE@Jzy`WJXCd{Ep3*Nt<-h99Fn=J%3GdL1i&_gV9Zki)Eill?Pd2URX?!DRF&S6%%u
zjKqweOwO*28~j?Hkt(Gr%FXne8Ni(emL!`{7&k}b&uqf+Sua&}3wah>=&k6KG74Xe
z(Ze1sTmc_Rz!l|Lzkdb?9@l7V$LdeGZ)0?~=FwCBvAg1W1@;A8^k{z{RtJ&5`vdE&
zP!BVPXg|380XPvn6fZG(`Y=>A;8l$kGj+Q3wC7n4|L_h-0Dup85NJaAaFQ#qkWC)6
zz;_R(Tvvd#*wMknLerMN!WSu+O*TmoBf!w@ficQ=+hlvB1qT(XJwN@Y8oZwB!l;I%
zO}1;)hof!@;>xnziF|jQ<6tr#v%qWI@~vYWJ8D*^`V>)!iyk9QMe<A!%Y3@JXf^M5
zw^c@~?9Ak;CXYZ@4W=xrR&1#Ovxn7@r1=!3;%=I4KdZFlB9kTTbmMqbbDj9pCR<m$
z1{DT=tFBs=Sp;_%@-))Mj`EKA1u^1FKN++NTo>dyGK|Zy<2~CGr1|a#6*7FR=aPB)
z`5Cb&PNVPg62bBk{rR9q=f?hhTaCX6F$O^neUr`2oE$dl&NxZRuSu*!?T&f(RU*HA
zhB)Mug(z2~bWp1MPzR>rg&mP=@X#**r0<sLyVWKQZzErgvFGNj3Q>XLaxj@mA5hvs
z*QAum`W2=`i1%x$=50n~WZq)*0W(|7tEwy&ov%0%$W?%P3B>hakG1Va#l2MPhgExZ
zyAC_7=y^`ukgqZ@Y%|OcF8J$S72^e<bMOFw&V_cF454cE$PxVG15ZyMaL*Gu^@UCU
z3w!rx994Rq5ee;t<`(h5F;C(S7U&0Q-A9MthZ#6NeCRT()=a~9z>2LRS#n6;5h%P8
zK}wLnfxp-M7*~Bp_6IkuNng^=aG#VS*@Gg?#0I%#vO1SM$d~Iy#4^y);U!5n*(NfY
z*V>fcFtW-v?y&7`+Oy{!r2pMqpCk0&%Ran||97i)Y%s8YC)ptMkFRl>-FX)wzYhRr
zwm<U!U(guBK873gZuo%OrFV}D)spq4Y0w+gDO)q*utQ!0;&lR}9gn3B^f;KVG;H}C
z4wVYDGYS!58XE|)uDcC~))6s`mNDU7b!wsZu@MY$#5nL=gZwuRgAo0eUMj4?YIqy@
zM&f9SPDFd=x7fRka{_JfT}jMY(r}g2=rdqGPI`ou;6i0j??5`dMsY{50&>^5DKgX;
zW<If%5SA2G_PHCK;+guMTN^lE_gL|iO3|0}lN|zb=_PBxnxh(s+&cp$Y(HwiDlS{F
z4zfI!4S%izn&DK)m~;Pry&K2bvo$7gyLFEu1&E$c%gDNKa_{IJ8EEwD*iX@Grll&b
zXpZ6+5M#J-15ee{PH%3u$4t}`a52!}^LridST`!Qd%_P>E!?zPKY?kGYEM5eZAp+5
zi=D(Q=d*&VU4J5kaqebYf;4u|lpN*vvNnI{#lAJ1u-Zja?TK4Jyn+d$G{Gd;{6Wod
z)hJ7?Ldn-M={#D_(604cbgLLOwIer9$i<pna#LKf#fRVBn=fAUi};l>S3eYpZX0|&
z(Q39~NzlYEF9W+=DLA_I?;S*(J>2o9MjmTN{@8~ee}Apu)34bPF>Jd}NyH&4VC)R_
zVL_?|v0Y4mP{BGqHn0eD1Rf(qu@%&76$C@xUeT5wAvLudGj7MAM}hW*1XKZX?QB>#
z5f~13yKZ$ind>=eGO26;X-#2RJgRgD^i$e6h6^QS?^-9Oow=~SOS3i5J4}3wq|=#=
zBv#0p-O-+FJu0h_YpR~Xf;IBo9O)4j52Q1>aD1%2P>s4Tn(AhH1147AL>zwTU254~
zYNscoHTF1A)mWh9WD@T)^wUXZ!Wy)L_0<}^z(2Yg`^{#KuIMTI^GSE-xp8B)N8iNv
zBED5`{ACw!KLzHfxzl`DJiab&nW*McvEauhoW&)X?+qnx9?puWXXAb&v;zB8ALq`^
zthi{gh#t(zRbF@@Fwt>W!gIQ93*(tJc5;Qq<28yFbb}XbFjEtAhp&B6&({toevVad
zF=!b8T)BMRWlS+(JZEq#>jF#$f}Hl71R-?DUYIIGM*uR}K3zpp$+J-%6XWk=y9aIc
zl@=rl;vRhU^F9s&9@HDEgMO?~j37v;w}7YRyyNg}ufNNYYPcVAOwn$(bH4o3NP0zx
z@g&HI<hLM13Y&*WpDx>W!izNhVeYBUE63Ib6Ba;1mmwH=5!VZMN#R+#T$ZqSzr2FW
zI3?YiJ<8=}+^N^Mf(H@F0G?cdZ@~z$+LuNF`?QMokzk?D<MaaKWg|$*YKGIlqhX1|
znqdU0CLwmarb*dC2kkAvw%LckAnYxA@{A}T=`%rk7qvY}jgw|CU;4^#(ZTh8Hm4=k
zgLldqMk3ZA(kpCjT6QZf&b;hmfHp?PA&g!L#spCGs8NK%sRf-3J7la^!8Ls!-NbC+
z5t-ZP)OO8(v9xN$2)g5nMHVcwOww~rnYf(y80WM}#arl!Y^gW$%Byes28Ngw;8$E3
z+7R&S#qJmQO0{D4*qWd&94S9=zk$Y%c&qW13ajn2-$uG0N#xh&EbUs@Ut-J0K9R-2
zl9MgZ;Y;Sh`nh>R9vaWaJv6Fn)xD+pa;2jVOLs;T=x^0tCnkbQFUEdSE!FT#K)?*m
zyH#nzP^tS|!^?s(ojW?5C{L)y76%HrOjxzRt9h5ZmWq>wk9<HZ8wMQ&2ogYvt}8;4
zZDzlAr#L7aP7y8!eEvR&j}}z=UpKc{FETf)whu?U;6dSekU9wquhakzgNU2jO?&yC
zH@)}fqWlxq<z=3do4=OmVU<8g)s2b4O{ap0Dm%dGg7!^W2phNiA}3SE_LPE>>E{oO
zw~Hk>J!~1Vs_h1##RTqr^&rxjtp5Y~BOBJAn4(v+$(C?syKFE&XqM@r!=WziUlC$1
zRhBH8dIQr>XFZ(+Nd3VPh^(<v%FwQ(0HpTz{SruGBw`ruXsUnMd?>(~rUVwRDxBKO
zUa0%@AI{2<p=LJE++;hu@+(BX7e`In7-UH~(Dy@~J$~S(wRW&HfJ6AZV?X$BKGd)1
z^EM=+M(o_Qy+C(<k>?4?bYV(Co;f#EIe2AD+;Fu5fY&ck&4^X?U!_N%RzM+w)zC?<
ziuY8^*#fdKdVfOGrBIc9-Wj}x`-akUuSW}<IhAw+7{<SZ=J@h`^n0`o(}t(TzVrGz
zWSu6N2}b2M?W<#_S}hal`a%22ne$*e;Teed%B8gM$+)}N!P#-H@MA%r0^{j<I*PP(
zEYL}J)qZ>(rU+f9)v?Vz;-h;B@qLfik%W+u9q<wUuCNSF{U5ILrS!8@KT0&!#bxxT
zMxUhRPfN*jJ#cjqHlHTD{9dz+U^&EBSS{fxLI~#wi?%xKF5GR??x5LUY^T$*>!;15
z-hi!lSEQ|0f0DvR36D_6kYaUB)!Y>#mLj<;henN@VF4#ZvRt&qwwf2rd^a~TVwZa$
zFLNu_kk3;oZ`aP<Z5P;n4X%0JL6uKja3qLUI_e4{cT8lEN*?L<+e^m;B6n=xJDY_>
zTy75rUIr&8vs`&~&<50Z5xCd**SjC>z-E0JI-B_<L>5*Lg-53-HbNsQu!4prv~MdE
z4d1QQOrj*qGLH?r09(@v2B+<nDtJ3Hds984B#+*~+CD~C1;N(mRN#<p$3!TXAPXDr
zrhm#sCk^29?gk33C*jV{u<>lo`Xa%0=;r>vL{GzSE00u^CiG2kd~C~$jyfuO^?HcT
zwh!Du&9Ur^eWVpC;)}KSOy6!Z<^Qj}?~H0{>(&MlQCesb6eJ3$6cLf4NC~Kjpa>{M
znh{Z|hzL?cwt`X>!~$X=AXO0}O+-rQQBbK80VxSpYC;Ji&AT|~y?5Mm&O7e7<2#Ob
zyyN@6A1ON-J9}mAHRpQfGoQIuYu?xs`=|b5VGQnXS5-O`(_tSI=_)C#q@hjFHxOVh
z+4v#WqQcE<xg+8LjuWrd4~*>(&L9Sib0qYk92j`bEVN{w-Zg_Q0f2GCCGUP+=VM>O
z4QT3G)h(K*<*#j#ak)v`PF(P3I-sTTKp?L_ExYZ_fKcpXudPlEcaF&Wn&;+NQVA#d
zIVIDJ0v!IE6b;U1SiKZx=Om4}3~eY1F)MVQ$s*MeE+Vyfji$nPFt?%u%IPZ<-D6aR
zg{Yo@(aneMyN^qX+_|Dp8CfsOB7QAneTC|@4D@%`<AEQi+?o!OwT&Lx_qMU9-Xst|
zg>84Adw}XJ;NIy5|7Tbh6K6MpV!;s{^J9R{ukQ=uM0Ibvf)4)&X#ekgciC^D!CzQ#
zxc(Y9wpPCIcgntgMFH<R>G<Hn*|D;B&eW5y6ZCDOHnQ?5kz{ZK3k?vgqdiqx`{4;&
zdPxUsJ+gG~C0_PJRh5B?zHCbN^1y~6vUbuY?`nmRAQuzWE1~MY!O(>&=afU=d_Cc>
zudiN5?xWg84{E5<mcEWzpi)qatB4e9fI-b5)!#_QP>XsC#CMh^buNYc!BpL`rndu1
zkR%btK8KXSv$q!KY8{+QxU)++K)JbWx2JJVwH33#o7zRvAB@mDR<pC@g!$7LPs5~B
z8l|~|1G91TT=K+hZXPNXD7V|69v8MA`h>6Y4Q{6x6ttCLpbnJ9T{6r3>@|~tIgmi1
zz&aMO@I@J$oo3HpuJ{eG80fM^O)Yb~Gd=U!-OFJw)%H&4rrDpZELzzG7=Rj^w*$Sa
z53@%5A5;R&nY80ir5=0*Xc$EgkR_O19`E^gc&u;LszWqLnD~pc@>fnNW=1JQ?c`6o
z@ruuokIN3Agd%Kxs-8M2q$)hW@ifzs`@F4`(v@7mzpT>(`@Otp``#*^I3m=x^L5#3
z0P+=Dm9!GsT3ul5*-aelVsTsmQ`?QrUdxTF^(5js$i_jdTGBtcm;#<d3~9So<eHi0
zA!xIxGti$UVqi7}%CGTssK0DOyen-A|5S~xeEYRJrmNsu>X5+$_e##Xjd1oZ;sO)6
zFa_!!S$TH8-r=`x6#<oDj+?ng`EDEdP8eoXFe{m2AV-+T(g39PNr)j$>@FKd6@Q7`
z9ffrFjb_Na9IJl&V1r%Sfe0`u4&uVoQ!423;5Pw5^aNOpFRHVq9*j0G=wsd_a(N{L
z%(!uM0!M%+Op+GeFssY=X`wK?&8ISgh(+&YSCp#tj?j*EREd&!oh=AKXPk?h8}{|e
zm$&Yz$z{Gev_g)U&0sFeX1ZvNz7Mbyt?uUEdOUL7WI=oJGS}BWPB3yfjkAlLQ5C{8
z8(@J=9kdD#SlL;KIDfAY2{CWE5$bzpMZ|7CH$l&v)E0eCqPxnI+*(@Pxs>PNnRShi
z|B&D^*Z{%bXumD;={#LYt?nyOA{seQGXf6lt2F}y@Hi?dWnc34Qtgk$Ybr$i@FP4A
zq6sC6<ET%Ii01}7>pk6X(z0?t0dT*5A#DX{SLzCR=q}{dcGs?EduiDd%J)j6>~D?P
zeY$5CYz`-k3VlW$gX(mVo)0J{<cnAs+U4qbN?Y8evrZqbzAaCmHPM-ro-5msKtpEp
zE9L!=+mm#!rB=jbdt`f8p86VN#m{;Sy0-%QxQ&v+z72RBW4md6%*j8(w>)Lt$JoDe
zefiWCpd|Ror7#3|h}#9w(lg==oLm2kBLTIbK#%0q5h2FT{8c#p1f`!N$=Cc`oRrcJ
zl|Ur9ZU^G5v|gKvZo+KEmLJn7qFn-h)RfA{jw}RI$O*fJ4yFwBahPQQM$N=hD1Q`T
z@&HR`5}-!VF&|-^UXwo@p~|f-_Xc9*0PmBQ$d*WC-TTQk`w;qX2alN7jRDith@$&<
z06dxm$V3FYIPnih_$ztoI=w73rvt%<CmmtgedTO{JRxuB(hN{QEU*fgL}buzDF$)b
zor2^XpN~Y&hyx(|A{qY_Pgjg)Jr9b<&qi}@qB?iif^FC2YXm{-&9R&~2R{A8Gr*Z^
z{MO;1(+vdJfM|4mE>F8l$q$Zh@H6ooDUg$=*}t=Sf5(5+EDW4T$e`gG)NUdX1}Z=(
zC0?kS6%jl;{J1XPgSh_1af#u3xwr2@0>XGR&KvJV4G#Yniome@9kjR~RiMe?Yf5C5
zor`q%lZBH!q1G3T<kUWm0yw~xw3Pm?HPfJuuEjjU+D9K6b{WBKoazwpICJ3Mr+OV9
z8NuR~+#LN-*=D>7(g#IX{7{v^B)QkB)XV#{4|!W*s}5-f4i4g0Ly05CQPl;LZw7lk
z7>}B=s~I770_$;GEu?h%rZ#@BrWl7WGr52Sm(M^mxbwtNY>iy`Vri~jq><agSQSAx
z^(pr~*;iQ)h9uxE$vL?*R!m`f{76r^FIAkpN5ei?ZV;tenkqK6pXYvTTA=s}c3~W!
zIUsM^rMYcC(YT`^v!tl_?u96+hstu>Yq|I_sX3l~d$GP*KQ?#t_Bw1&kaDq1YL2h9
zv8siKM(XIUxxt8kFaW<2u(;TVj^E9t#~-U{zwU9XC-l~Sqy4gX?km|Mk_yZec~(zS
zkuw?8Xj68kR^n}haH(U#VWw&IV!`fMv*zTn@&=9L-)t<^KkDZ*Ao_J5a=+R-4{eMd
z2ucJu`<bBI)r0#kIjP%j7f+k$dEX6G;URl7Z*TUzAxtuK6X^1r^6S^q=hbmiS;TSp
z6W1#JAP`&m=z<u;i!JfjJiXX=I`cP!mEYZnU@U=%t0M}3-J6pC*AG3E!$6<?({e@b
zKh10Z(=p%AU$73wtMVS(_m7@2!j~?1hduNdJ+?*g^**C~>(gEgek*f(Y%IPMQI`*L
zBQ@&Dit_I5%NsoRj1#y`Ki<L4t1aNTaYMc_co-T<)o743kfI9iAU}4~;TwuFT5-0>
zV|!B_$)K)8jHO6bcrRQnsxIa*NHSU&Pb^VdUf!0!a7E$6xvf_UwC0cvt*pc`tO#8;
z<hpxoI^KUbhy`ofTFbwOJOccWGUg&+@cyf=^3U(#OYSpc6x&5IA>K8Orftr5^3wge
zlUGNt$?;WO;Y7T{-U4cMQ>t%c(qx~eo9@{U-cOVHTB8g`(<a)3aD5PWu(%=JpOlXh
z3=R~9SHEX{W}Vhyej#)}VbpB>aBi1Zf$^LgfiZ>2AQ5?5_q{GU8^aj~fxx=(YF#$L
z&fDA9)d&7O>w@BT%b2)*aO?Bjwjc{@f1HzPx^u1JJpbvNkcU8gm-mxv!Rx?JF52cU
z{E{{<c})(sXo;NdtH}YgMdsR!J_OW9j;8?K-&X@*Kfv?9(@H{{3Dd+TWXyY5eIl3l
zIRmP~G;ea!l?4_-`a3L%@1<KUZp^Wkfs6qulD=bKHi;Ih>DlMAUyKCly6pE2Cv;f4
zYAq+SB(Nj+CX@v0Of_An&_O$%^qJo{EbO8JyZma4la9<jWW73}r=}NN*qif_h!xV@
zWS~J`_*6$03KU5eF?$#0eQY9x?_MV~skyGhiEY)T$qe6ZUfTJ(`P-h11S!IcV;R<%
z!#EIgxGw^u;kE41bIHTB2foMPFZu)&=vo}@LgYO;pqqte%uVUqrEosri%jl9o<bK?
zz0a6x`tmw_Fz7%}M;df}y2`T>JL#B?n>;X*JM)=>r$zhl*2p=Ss<-deo4li1lyzh!
z!#^VMz*Y5g4KBHK?^?{(6RO&SLWrXs!@90_kNO=EJaPZ3F4ul@-bD|8*$ouQhM}7r
z-uQ+ZcxmL3_JGInmCyDbzEfIU(LAnyVk;*c^0nySJ3Z1C(@$Et=^k7qo^|rr*g+<G
z(r;Ymx)F<qTKIrA#;#Js?00fPtJCfMc48yXUr4c2HZ#rJpO*GQ^cy63rs*<Nhy2NP
zK?N5ZT9Dfei_=z<ynR{5)YV&gWOm`@hYP~6hq)YvLAQ{KS6eP}_zAZ7WQ|}a9|0A!
z`P{jpSB+=P-aZP6=w-CDglf>1;M94Rge%P!OM)dzlXD||?9nP@`}hy?2-W8!=uf%Z
z;B6}NO^}JYv4p6CNP5D-S{oZF{>&R(OK<}EC><gt#u*5AvxG(jjH^1Ak3UfojWT=C
z(M`Lg7ipyIfKA0yPT~9as>K{qEw8hPmHbBCn<_hSX#5ONtR+t#JZ!-#HCl~hyW>VH
zY0-4ik)d8B`9oJ@m$BfPaGXguxg{hi|B~4oj^<<oV=Ma|I~wUztv13*g56;G$l259
zPsJy7sErs!?tx}uBdA6{!_oJdOKxj181B#EEvAGxN?^fT0RXs#p8-Ibp&XG}0f?S8
z^}ruUtADPd6#qU}b^Rxo9H=~=*#;P&7Y_L3#BU=U3qH~cXjdk2S#1QjDuy-!s=8@B
zTkI<<ktIb>a-~F%<VJILPTAf^IR=NF_D<a%b5kMifS}Ta4Iy(L%F>8$=I}M{3>HrJ
z1@bX%z??#WU!aeHim;(5fU4xZhE^7U)h1Y4s36bh;Rr+Yu=xgvAzJ3kTm`2P6amFk
z!va>HA#Dp(2gxAWdhN!T`waYl`@1r)*OUtpF`!N}xRUb?nuN3E&@j*|y2EYE^}tvs
zvvFhIU?Bv24l9t}RDeFwdD*SYr_4g_viPI@dz%P5O%Vl<HJ%43BNFHuoH}iYq2!_L
zDBlh8tAh1$R9FnMG_khrc8QZi@I-THU}}g@LtoX@74GSqBCD}16*3|QqS(yeOp~=&
zWo^pwGEjPl@MGbN9Y>+y)@Z`JBZi&sQ$8VtMzwgn5C-mf%^M-2cf|cgfAc0b>(#cH
znU^b%ncS$hlqL(h(!}hhk?toA^=`zvw_>BPVzuY~k^Nupxh@!nPfsMSN5j}zc+Y|0
zDF?UIm-IN#r(#}qa~!kKxir^O*m+DuM1?Lk8!w9=&Zk|?ZjPh~96ul?gQFFuXS;4I
zk&w{{cl2#1j(>>+LZ`kHv=7u)=cDBu<!%MvLFeycZ<AXHOoC{0O~V!jajLu)qVGiB
z(mP0F%oBv{IAQ{&4UoHia>7@~PE+A+oJijuye&(W1QVdkn?yHoL;!;qe&{>bJ;!53
z>4a+%*TTP;rlUVz#-LbW&Wf-`@9n7CcHM`HvV7`D-JBuZp_=*FrTD_3#*M9S^uL{F
z1mV7@^{LUe(Oa3?UIk>laOyH%*wJ*{aq2C1viD^~$`|X^OcyqZPz_naW!fA3#OwUF
zwo2T{m*;A!U0yG{QBy3ZZQ>~n4D$#q%ZQFqt<s<-_p<C>G{rQLU3^JagwN0Rq=%8J
zKV!bKcCa&RgwcLoJu9U7nA!Q9KEdSI^}3H^XQ<jz7@Gy$>?UAaeRO^5<?r5ue1wRq
zBfG{`uRML7<KH&FgCmpn<0lvT36L}tFt>9$Q6*71*MDgC=a!cEba*jzD_<neOD4h)
ztd0Eq9oVnoa8@S^0h*P<X-5ctI%F5$r?%zC8<H8yO(ol^c|E8N-KhY2{6M`gT`2`r
z%WZNgq3VAh6za~ZRmxMFI}jun(8A53^7TbH*)x=k{Rd^KzEOJiuCm#r=e9)avd5Pc
z-afiyE1UjOtG)gBS}t!DM18zKnsHy3q{b9La^ec*e}h|cLjZ#@*D#n{CG<ZtXqsEY
zAJ9U9H~RE@#`7H_77|Bqp~Tmx$ZAuUS7?EWmnZL=7iBdZznbZ_E`(vp7yf$+qkq~P
z>b>Tzgc5i5>M=OG{OyzD0=(OMh;ka&d*oPASUyVhyO%##V4bhKj+^{j`@@NiaV!^h
zF?9L4EA2(k>&pR5$&M<OObxAq{5PJLlHToaEx$8zgL}KB(}lTkz(xE;!CAIy1wMUA
zH+cm%#XD6*6?c5=9fGz$#C~|NuenF`#<%IHD@M4lp}fCQTz`M9g<rH*SRsM{T&JEo
zRmCu+VNkJ5yq?uO5-W%KboU!4x;jY0+B$bjQ?uER$K-uWQ*~YW(oJ)z^i&|afv9%%
z0<?Fj=Co)HvOuGZf5$~YE@#Z1<3)iGuk`bmR3FNj#$0Q|X@wnfe4Nk{p<7`@vN6V}
zvBFtT72{xW40naF0L47hI<kkL9PB>#@!UXJXlNjSV>JPEk-t)avuJ6`d@}}#ch;?c
zVomH+AA5BCu1UVmFzlMwkFJM9du)2k1oh2ItbZ84WvJRW*>ym?5KtGf&Q>MRJo-<z
zi$<pg$&Cch74fVj;*C(wXnFRX0CVo)9*)AN_t{e}P0!rf+hCdHb_`*IvXz|$1!Z@u
z0+aprh#bza65+M6YUet*u4ZD_@T%#n#|4sC@EWu<G0KyyK3wV##OM?oWns=1K2uw>
zjzVlGSO*iPU-;@XOXl&1WD*CSS3YolBw;sM`lDIYDz4aMiI-m_oA=a{Qrp<=FXEIx
zAO1&(whp|)ZsUhvfP$KoMpSR{O2fJJ9ff7HHp{wOY<s@!dU86cVo#m5_|5OcFA(Jf
z?iNa%BMH^}{NxgltnW*V;`GxX`PrU%zSQ!<fnj$zW7?Qk$<wtSvz_x9#K9OvmSMYr
z0-b2$e8iSQF0PeHRI1ZKX{j&H=oMPP=VD^F?(xgBvE%|v6ddAG>b6|7WG?Fi+LUvS
zt)ADVlDBjubwt@birNSgVo&0@SRs@N7T~!|5vAwA>Ly~X(kz{*;d5v0<#`n5cYHs8
z4^}DTL(C!7lJVzC*#-o&qR5k7+fO*2us%zU)8bzP<c7ms%3~5jm1~h|q7XYBvo2VT
z7DeG5iqLc3XfGvMQfafn(Y|)o8J4>e?T3=$)MJZ;3z*1YY-5@hJ?4$mw17&lr|%YF
z{3VW3^!5D#b))=j!xuNd1DCNLzM27?kPh9G%0~{W9}@fl!SwXQ$SSQq=3~h!Qd@(L
zs*m`uUw<=gnSnCqImxO39?}`TmmW{4tUY(&4LzPz392T(4^9Ox)NNaW@f?pA?rf0}
zyb+A+_EJojuE6Gdwofsf#~)lZYYG#*r*kgj;^|yjy4GqEk|h>2EY!H*WKdBM^(bD(
zT+&tt)Ky$(BpP$2t^)Q%IE9S`z(A)E0=01T0R-g-1b_l3^2r3719-r@#HmXXuvBa^
z^ye=Cjq|5-F*#O-{u&EyoNa1r^&Rd0pt=&@0fFsMNFd)=0_5s^T5U|W<eJ{GyG2ph
z4Py@oqimqP10YV=8@s|#;~YR`*T5;W*js3=oM4ni(EWb1@`OI^dl6%Dmg#SGhi%ys
zo8ADU6s1pq9$n9lsk%h9AZ$f7;vyXk@n5wpmcmc*UcYn2XyKIo2dkt88746btp&Q%
zly$Oat28claAyf+xuPyumAmqtY^MBW=)n`fpuLEwNTp2Fqv*SFGyRm3kJTwh3>3S`
zb<9(*2Co6|<|Z0LovEuSqkVpKH~FbIJmI<Twt`aS%?Do?#>5@swc+BPQU3aS%S6_O
z>KSLTqaLG{EwvFFKWty#@Z6XSjisV!yV%ca)Kag2Nk_mq*K7ZBRhOTqcKC6tv7!}4
zi)xH7%M7&i=(MF~IhJ4Vl2G5pM`hh3>IV@6Vub3m%zI_b3}c?t?&QQ7U8X4O3f+SG
z3MGL)B{tc2EM7F&wXAADXlZ_-kR<N%$V6cuu5SvAjd!3q8(AQa8u5&!NspxJl6<2A
z@X=|q)l~S{+nj|~_#GkL7gE%Uh;@c-p`*y*6coR~PS)Obw68B!vf)s4)M!mbxyNS4
z!0>+MoK4Qd7kN<m-IjLR$-qPYUe{9N4R*}spB^gZtGj!Ggp0xzlul3g4nK0M92(;m
zzZf}|uWfNf<%gN#`nHJ<X!ss}Yq=0dgF<&&j0`-bkM~2FqrsSnunLx}cc`wZrn;hh
zCA3QT90h_uX}@l{rblqCCVst&cVPR0+th1e(KQp0FQxf;|N64hGUEirOv}8OOm1so
zu62cLnx}sd?!15F74fUq)dK^SXBgj~+XT5%nqx^DQLwyIL^0fJzpEg$!+ko$$fq?>
z_q?BPmM%ah2`32#PQq4VzBh)6J3;lh-hMKy$<(!?sO%8tzC~NuRenMOlg|!m(TqoY
zVdtnJ4tCmkTfF0#k04*Wr4D!nd+2Dco<<FHjpF?4Ga|fGZ3O~675s18Y*D}(s!X+U
zaR_+vs!QkJ=VZCGtB!6l3ab2kHEhQ6ILi-}4gsmCMf8w>T*6f6H!p{G2(7V}sPoW|
zCrd_46NA+YHPI@=@3KF~h0;*tAT1z7NAe;(Q(NX&FVL1DutU;4jw1UGX0JzBR_Eq^
z$Jmh1RZmffxsRm}mOcl|R#Wig-BAKUK@H_SE}<p0Bux4UocY5z@WR2}Fjdcw1gic?
zC^DEoVM*Bx5s(6CX7SaY`#n>L<u~tLnJp%Zc`6LCY6>n&OU}`%V`eUPdc41R^(R-&
zL!vISJ~7G;HhzNSyf5vU!%=*?)j22nX2|UoGx2HuaJDz|@uNlH$FwngUt?zX=8&bF
z7ujETuiDL@MDSy_IBL_YRC3k@k9Y3kczM4lqLfEz)=Qgr?wQ><d7(T(4;oTdj9%9^
zYlFIansT~~%`#gx28j_Qe}LNUAyK`PE$=0xeG40Y0_hSHlQqI+*Dfo;j_0UM-?{G%
zxwQ}LpX}sAhwTZgV36@nlejamx`V;fr%$1xmshZ+Df9y=T|tf34*}U@!@xJv=WFpr
zP=l|q)LfN?=HQO^PTO$IJPi){If27qsZ0yW8+U37D0G#cP`s?_N^-ruPLah0e`y@9
z4cnVx<ZwrfQ;E&GWWNE%BkQEP6JgHr4FtqeVA`4s;QGJl!Tl>1_yVT6mfPjI*~8h4
z)}ih#uGvnk(!B)b74l*C7(Jf-kw%bREgavt<LzzL+03&q?(kY0!mWjGaM!|B;m?!~
ztG>(Eb~zznCiXBx;^{y(9tTvBDo4Q6-%1((opkfR@?4%@unNS#vc3OK*W&pF<!=8@
q|L0%XmjAz={QtRs`4w`Mf91XYce)nOugIhQKQcG``M&Y|?EMdZ!7Ta!

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..1cc3f167b2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2023/09/20/test/" class="post-title-link" itemprop="url">test</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2023-09-20 18:33:23 / 修改时间：10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2013/06/17/Read-High-Performance-JavaScript/index.html b/ja/2013/06/17/Read-High-Performance-JavaScript/index.html
new file mode 100644
index 0000000000..5fcdeec3ce
--- /dev/null
+++ b/ja/2013/06/17/Read-High-Performance-JavaScript/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《高性能JAVASCRIPT》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2013/06/17/Read-High-Performance-JavaScript/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。 如何从小事提升JAVASCRIPT性能。 将&lt;script&gt;标签写在&lt;&#x2F;body&gt;之前——将脚本放在底部。  尽量少的&lt;script&gt;标签，减少页面中的外链数量，减少请求次数。  使用打包工具如：Yahoo！combo handler  使用">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2013-06-17T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2013/06/17/Read-High-Performance-JavaScript/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>《高性能JAVASCRIPT》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《高性能JAVASCRIPT》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2013/06/17/Read-High-Performance-JavaScript/">《高性能JAVASCRIPT》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月17日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2013/06/17/Read-High-Performance-JavaScript/" title="《高性能JAVASCRIPT》读书笔记">https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item"></div>
+      <div class="post-nav-item">
+    <a href="/ja/2013/06/26/CSS-Triangle-Circle/" rel="next" title="CSS border三角、圆角图形生成技术详解">
+      CSS border三角、圆角图形生成技术详解 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BB%8E%E5%B0%8F%E4%BA%8B%E6%8F%90%E5%8D%87JAVASCRIPT%E6%80%A7%E8%83%BD%E3%80%82"><span class="nav-number">2.</span> <span class="nav-text">如何从小事提升JAVASCRIPT性能。</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/17/Read-High-Performance-JavaScript/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '10bc7383506adcd2e934650538085543',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2013/06/26/CSS-Triangle-Circle/index.html b/ja/2013/06/26/CSS-Triangle-Circle/index.html
new file mode 100644
index 0000000000..8531bbbf40
--- /dev/null
+++ b/ja/2013/06/26/CSS-Triangle-Circle/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS border三角、圆角图形生成技术详解">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2013/06/26/CSS-Triangle-Circle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2013-06-26T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS技巧">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2013/06/26/CSS-Triangle-Circle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>CSS border三角、圆角图形生成技术详解 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS border三角、圆角图形生成技术详解
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+<span id="more"></span>
+
+<h1 id="CSS-border生成三角技术简介"><a href="#CSS-border生成三角技术简介" class="headerlink" title="CSS border生成三角技术简介"></a>CSS border生成三角技术简介</h1><h2 id="效果抢鲜"><a href="#效果抢鲜" class="headerlink" title="效果抢鲜"></a>效果抢鲜</h2><p>下图为使用CSS的border属性实现的三角效果：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何实现的，为何会有这样的效果，不急，take it easy!</p>
+<h2 id="梯形图案"><a href="#梯形图案" class="headerlink" title="梯形图案"></a>梯形图案</h2><p>看下面这段样式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 10px; </span><br><span class="line">  height: 10px; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #0000ff #339966 #00ff00</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：</p>
+<h2 id="更进一步-–-部分边框透明"><a href="#更进一步-–-部分边框透明" class="headerlink" title="更进一步 – 部分边框透明"></a>更进一步 – 部分边框透明</h2><p>现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width:10px; </span><br><span class="line">  height:10px; </span><br><span class="line">  border:10px solid; </span><br><span class="line">  border-color:#ff3300 #ffffff #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下图（截自Firefox3.5）：</p>
+<h2 id="从梯形到三角"><a href="#从梯形到三角" class="headerlink" title="从梯形到三角"></a>从梯形到三角</h2><p>上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下（依旧截图自Firefox3.5）：</p>
+<h2 id="从等腰直角三角形到普通等腰三角"><a href="#从等腰直角三角形到普通等腰三角" class="headerlink" title="从等腰直角三角形到普通等腰三角"></a>从等腰直角三角形到普通等腰三角</h2><p>上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>得到的结果如下图：</p>
+<h2 id="从等腰到不等腰"><a href="#从等腰到不等腰" class="headerlink" title="从等腰到不等腰"></a>从等腰到不等腰</h2><p>我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="实际的应用"><a href="#实际的应用" class="headerlink" title="实际的应用"></a>实际的应用</h2><p>关于应用，不多说，直接看图：<br>说明：<br>以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&amp;Dashed终极分析及IE6透明边框。</p>
+<h1 id="CSS-border圆角生成技术简介"><a href="#CSS-border圆角生成技术简介" class="headerlink" title="CSS border圆角生成技术简介"></a>CSS border圆角生成技术简介</h1><h2 id="我看圆角"><a href="#我看圆角" class="headerlink" title="我看圆角"></a>我看圆角</h2><p>一提到圆角，我脑中闪过的词就是“定位”，“嵌套”，“模拟”，“渐进增强”，“滥用”。</p>
+<ul>
+<li>定位，也就是切四个角上下左右定位，这是淘宝首页的做法，但是面对IE6的奇偶bug只能当作看客；</li>
+<li>使用“嵌套”则不会有此问题，“嵌套”分图片背景嵌套和CSS边框嵌套，使用图片嵌套则图片的重用性，大小优化有待加强，边框嵌套则技术实现上有些难度；</li>
+<li>或使用“渐进增强”，CSS3 border-radius属性，而不要去鸟IE这类自我感觉良好的浏览器；</li>
+<li>或是学习Google使用CSS模拟，而一般的CSS模拟都是使用左右边框+背景色的方式1像素1像素的拼合成的。这类方法各有优缺点，需根据实际情况采用。对于满眼圆角的设计图我是很不喜欢的，该用则用，切勿为了圆角而圆角。</li>
+</ul>
+<h2 id="border圆角图案生成法"><a href="#border圆角图案生成法" class="headerlink" title="border圆角图案生成法"></a>border圆角图案生成法</h2><p>这里介绍的实现圆角的得到与上面提到的都是不一样的，虽然也属于CSS模拟的范畴，但是其高效的程度确实相当惊人的，可谓最佳实践之一。<br>我们先看看效果，见下图，截自Firefox3.6：<br>上述效果的实现仅仅使用了三个标签，如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; html 代码</span><br><span class="line">&lt;div class&#x3D;&quot;box&quot;&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;top&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;center&quot;&gt;我是一只小小鸟、小小鸟！&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;bot&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.box&#123;</span><br><span class="line">  width:500px;</span><br><span class="line">&#125;</span><br><span class="line">.top&#123;</span><br><span class="line">  border-bottom:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cc0000; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br><span class="line">.center&#123;</span><br><span class="line">  padding:10px 20px; </span><br><span class="line">  color:white; </span><br><span class="line">  font-size:14px; </span><br><span class="line">  background:#cc0000;</span><br><span class="line">&#125;</span><br><span class="line">.bot&#123;</span><br><span class="line">  border-top:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cccccc; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们看看这段代码在IE6下的效果：</p>
+<p>这里的高效在于，仅仅使用了一层标签就模拟了3像素的圆角，按照曾经我对CSS圆角模拟的理解，模拟1像素的圆角需要一层标签(background+borderLeft+borderRight)，两像素的需要两层标签，三像素的需要三层标签。</p>
+<p>有点神奇，但是就像看刘谦的魔术一样，说穿了也就那么回事，其实这里的圆角模拟在本文的上面已经展示了，就是这样图片：</p>
+<p>您可能会疑问，是不是搞错图片啦，这显然不是一个模样的，非也非也，就本质上而言，圆角的实现与上面的梯形图就是同样的东西。现在，盯着上面这张图，我们想象一下，用力的想象，用想花姑娘的那番劲头想象——上面的梯形宽度越来越宽（不是拉伸），一直宽到500像素，是不是与上面实现的圆角的下边缘一致啊？</p>
+<p>也就是说，那个含有“我是一只小小鸟……”文字的圆角图形是有一个上梯形+矩形+下梯形组成的。参见下面的分离效果图：<br>您可以狠狠地点击这里：CSS border圆角生成demo</p>
+<h2 id="局限性"><a href="#局限性" class="headerlink" title="局限性"></a>局限性</h2><p>人无完人，金无足赤，此方法虽然简洁高效，兼容性上佳，但是依然有局限性，在实现实色背景的圆角效果时，此方法可谓首选；如果是纯粹的圆角边框，此方法也可以实现，需要用到边框重叠，但是标签数几乎要翻倍，其权衡效用将大打折扣，反不如其他圆角方法来的实在。</p>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>如果在web制作中，需要用的一些直接可以使用CSS+单标签模拟的图片，我的建议是“毫不犹豫使用CSS模拟”，例如实色的三角，或是实现实色的圆角效果，这可以说是最高效，最利于扩展维护的前端实现方法了。我们需要开阔的思维，而不要仅仅局限于眼前的技术，武侠中所谓的“无招胜有招”还是有着一定的哲学道理的，长远来看，意识与海纳百川的心态比当下的一点技术更来得重要。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2013/06/26/CSS-Triangle-Circle/">CSS border三角、圆角图形生成技术详解</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2013年06月26日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2013/06/26/CSS-Triangle-Circle/" title="CSS border三角、圆角图形生成技术详解">https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/CSS%E6%8A%80%E5%B7%A7/" rel="tag"># CSS技巧</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2013/06/17/Read-High-Performance-JavaScript/" rel="prev" title="《高性能JAVASCRIPT》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《高性能JAVASCRIPT》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" rel="next" title="《让老板提拔你》读书笔记">
+      《让老板提拔你》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E7%94%9F%E6%88%90%E4%B8%89%E8%A7%92%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">CSS border生成三角技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%88%E6%9E%9C%E6%8A%A2%E9%B2%9C"><span class="nav-number">2.1.</span> <span class="nav-text">效果抢鲜</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A2%AF%E5%BD%A2%E5%9B%BE%E6%A1%88"><span class="nav-number">2.2.</span> <span class="nav-text">梯形图案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5-%E2%80%93-%E9%83%A8%E5%88%86%E8%BE%B9%E6%A1%86%E9%80%8F%E6%98%8E"><span class="nav-number">2.3.</span> <span class="nav-text">更进一步 – 部分边框透明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E6%A2%AF%E5%BD%A2%E5%88%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.4.</span> <span class="nav-text">从梯形到三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E7%9B%B4%E8%A7%92%E4%B8%89%E8%A7%92%E5%BD%A2%E5%88%B0%E6%99%AE%E9%80%9A%E7%AD%89%E8%85%B0%E4%B8%89%E8%A7%92"><span class="nav-number">2.5.</span> <span class="nav-text">从等腰直角三角形到普通等腰三角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%AD%89%E8%85%B0%E5%88%B0%E4%B8%8D%E7%AD%89%E8%85%B0"><span class="nav-number">2.6.</span> <span class="nav-text">从等腰到不等腰</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E9%99%85%E7%9A%84%E5%BA%94%E7%94%A8"><span class="nav-number">2.7.</span> <span class="nav-text">实际的应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-border%E5%9C%86%E8%A7%92%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B"><span class="nav-number">3.</span> <span class="nav-text">CSS border圆角生成技术简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E7%9C%8B%E5%9C%86%E8%A7%92"><span class="nav-number">3.1.</span> <span class="nav-text">我看圆角</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#border%E5%9C%86%E8%A7%92%E5%9B%BE%E6%A1%88%E7%94%9F%E6%88%90%E6%B3%95"><span class="nav-number">3.2.</span> <span class="nav-text">border圆角图案生成法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B1%80%E9%99%90%E6%80%A7"><span class="nav-number">3.3.</span> <span class="nav-text">局限性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">4.</span> <span class="nav-text">结语</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2013/06/26/CSS-Triangle-Circle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2013/06/26/CSS-Triangle-Circle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2013/06/26/CSS-Triangle-Circle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5c2c8a669e5ef1c3285f602a5086c965',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2015/12/31/Read-Let-your-boss-promote-you/index.html b/ja/2015/12/31/Read-Let-your-boss-promote-you/index.html
new file mode 100644
index 0000000000..8d132b03ab
--- /dev/null
+++ b/ja/2015/12/31/Read-Let-your-boss-promote-you/index.html
@@ -0,0 +1,780 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《让老板提拔你》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2015/12/31/Read-Let-your-boss-promote-you/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。 定位自己正确认识自己，确定社会定位、职业定位。 定位-决定-定价 要素核心竞争力 与 职位 契合度 是高薪关键所在 契合度 技能、专长、经历与职位要求的契合度 专业资质和等级与职位要求的契合度 综合素质与职位要求的契合度七大秘诀 了解同行业薪酬的平均水平 赢得未来单位的心 先让对方开口 勇敢">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2015-12-31T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2015/12/31/Read-Let-your-boss-promote-you/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>《让老板提拔你》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《让老板提拔你》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2015/12/31/Read-Let-your-boss-promote-you/">《让老板提拔你》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2015年12月31日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" title="《让老板提拔你》读书笔记">https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2013/06/26/CSS-Triangle-Circle/" rel="prev" title="CSS border三角、圆角图形生成技术详解">
+      <i class="fa fa-chevron-left"></i> CSS border三角、圆角图形生成技术详解
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="next" title="《晨间日记的奇迹》读书笔记">
+      《晨间日记的奇迹》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D%E8%87%AA%E5%B7%B1"><span class="nav-number">2.</span> <span class="nav-text">定位自己</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A6%81%E7%B4%A0"><span class="nav-number">2.1.</span> <span class="nav-text">要素</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A5%91%E5%90%88%E5%BA%A6"><span class="nav-number">2.1.1.</span> <span class="nav-text">契合度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%83%E5%A4%A7%E7%A7%98%E8%AF%80"><span class="nav-number">2.1.2.</span> <span class="nav-text">七大秘诀</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E8%B0%88%E8%96%AA%E8%B5%84"><span class="nav-number">2.1.3.</span> <span class="nav-text">如何谈薪资</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%86%E7%9F%A5%E8%AF%86%E5%8D%96%E4%B8%AA%E5%A5%BD%E4%BB%B7%E9%92%B1"><span class="nav-number">2.1.4.</span> <span class="nav-text">将知识卖个好价钱</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%AB%98%E8%96%AA%E6%98%AF%E5%9B%A0%E4%B8%BA%E2%80%9C%E7%89%A9%E6%9C%89%E6%89%80%E5%80%BC%E2%80%9D"><span class="nav-number">2.1.5.</span> <span class="nav-text">高薪是因为“物有所值”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E4%B8%B0%E5%AF%8C%E8%B5%B0%E5%90%91%E6%88%90%E5%8A%9F%E7%BB%8F%E9%AA%8C"><span class="nav-number">2.1.6.</span> <span class="nav-text">失败丰富走向成功经验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%83%BD%E4%B8%BA%E4%BC%81%E4%B8%9A%E5%B8%A6%E6%9D%A5%E4%B8%B0%E5%8E%9A%E7%9A%84%E5%88%A9%E6%B6%A6%E6%89%8D%E6%98%AF%E4%BA%BA%E6%89%8D"><span class="nav-number">2.1.7.</span> <span class="nav-text">能为企业带来丰厚的利润才是人才</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%AB%98%E8%B4%A8%E9%AB%98%E6%95%88%E5%B7%A5%E4%BD%9C%E5%85%A8%E6%94%BB%E7%95%A5"><span class="nav-number">3.</span> <span class="nav-text">高质高效工作全攻略</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8D%E8%A6%81%E5%8F%AA%E6%8A%8A%E8%87%AA%E5%B7%B1%E5%BD%93%E6%88%90%E4%B8%80%E4%B8%AA%E6%89%93%E5%B7%A5%E4%BB%94"><span class="nav-number">4.</span> <span class="nav-text">不要只把自己当成一个打工仔</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%8E%E4%B8%8A%E5%8F%B8%E7%9B%B8%E5%A4%84"><span class="nav-number">5.</span> <span class="nav-text">与上司相处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">6.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ac2f8fff41b530da657ccabc49066f10',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html b/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
new file mode 100644
index 0000000000..5cf7675036
--- /dev/null
+++ b/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html
@@ -0,0 +1,688 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《晨间日记的奇迹》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。 早上写日记的好处 —— 提升效率 可以做好一天的准备 — 计划性 可以正确的写出昨天发生的事 — 效率性&amp;忠诚性 可以中立的看待昨天 — 中立性 相对自由的时间 — 持续性 总结经验 — 活用性  注意事项日记 不等于 日志日记 要记录 时间 天气">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2016-10-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>《晨间日记的奇迹》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《晨间日记的奇迹》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/">《晨间日记的奇迹》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2016年10月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" title="《晨间日记的奇迹》读书笔记">https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" rel="prev" title="《让老板提拔你》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《让老板提拔你》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/29/browser-incompatibility-problem-solution/" rel="next" title="浏览器兼容性问题解决方案">
+      浏览器兼容性问题解决方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%97%A9%E4%B8%8A%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E5%A5%BD%E5%A4%84-%E2%80%94%E2%80%94-%E6%8F%90%E5%8D%87%E6%95%88%E7%8E%87"><span class="nav-number">2.</span> <span class="nav-text">早上写日记的好处 —— 提升效率</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">注意事项</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B02%E9%83%A8%E5%88%86"><span class="nav-number">4.</span> <span class="nav-text">晨间日记2部分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Part1"><span class="nav-number">4.1.</span> <span class="nav-text">Part1</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Part2"><span class="nav-number">4.2.</span> <span class="nav-text">Part2</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A4%9C%E6%99%9A%E6%97%A5%E8%AE%B0-VS-%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0"><span class="nav-number">5.</span> <span class="nav-text">夜晚日记 VS 晨间日记</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A2%A6%E6%83%B3%E6%88%90%E7%9C%9F%E8%A1%A8"><span class="nav-number">6.</span> <span class="nav-text">梦想成真表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%97%A9%E8%B5%B7"><span class="nav-number">7.</span> <span class="nav-text">如何早起</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E6%97%A5%E8%AE%B0%E7%9A%84%E4%BA%94%E5%A4%A7%E5%A5%BD%E5%A4%84"><span class="nav-number">8.</span> <span class="nav-text">写日记的五大好处</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%B0%E5%BD%95%E7%9A%84%E6%97%A5%E8%AE%B0%E8%A6%81%E5%B8%B8%E6%8B%BF%E5%87%BA%E6%9D%A5%E7%9C%8B%E7%9C%8B"><span class="nav-number">9.</span> <span class="nav-text">记录的日记要常拿出来看看</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%83%E7%A7%8D%E6%88%90%E5%8A%9F%E8%80%85%E7%9A%84%E4%B9%A0%E6%83%AF"><span class="nav-number">10.</span> <span class="nav-text">七种成功者的习惯</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%99%A8%E9%97%B4%E6%97%A5%E8%AE%B0%E7%9A%84%E6%A0%BC%E5%BC%8F"><span class="nav-number">11.</span> <span class="nav-text">晨间日记的格式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E5%A4%A7%E5%8E%9F%E5%88%99%E5%92%8C%E4%B8%83%E5%A4%A7%E4%BD%9C%E6%88%98%E5%AE%88%E5%88%99"><span class="nav-number">12.</span> <span class="nav-text">三大原则和七大作战守则</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E8%AF%A5%E5%85%88%E8%82%AF%E5%AE%9A%E8%87%AA%E5%B7%B1%EF%BC%8C%E7%BB%99%E8%87%AA%E5%B7%B1%E6%89%93100%E5%88%86"><span class="nav-number">13.</span> <span class="nav-text">应该先肯定自己，给自己打100分</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E2%80%94-%E8%AE%BE%E7%AB%8B%E4%B8%80%E4%B8%AA%E6%83%85%E5%A2%83"><span class="nav-number">13.1.</span> <span class="nav-text">解决办法— 设立一个情境</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%90%E5%88%B0%E7%9A%84%E5%8F%A6%E5%A4%96%E7%9A%84%E4%B9%A6"><span class="nav-number">14.</span> <span class="nav-text">提到的另外的书</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1d9a810ed738d88dfbf38c78b9c9d1e6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/08/29/browser-incompatibility-problem-solution/index.html b/ja/2017/08/29/browser-incompatibility-problem-solution/index.html
new file mode 100644
index 0000000000..f9af3cf681
--- /dev/null
+++ b/ja/2017/08/29/browser-incompatibility-problem-solution/index.html
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="浏览器兼容性问题解决方案">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/08/29/browser-incompatibility-problem-solution/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960">
+<meta property="og:image" content="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960">
+<meta property="article:published_time" content="2017-08-29T17:04:31.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="CSS">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/08/29/browser-incompatibility-problem-solution/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>浏览器兼容性问题解决方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          浏览器兼容性问题解决方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+<span id="more"></span>
+<p><strong>普及</strong>：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。</p>
+<p><strong>贴士</strong>：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。</p>
+<h4 id="Normalize-css"><a href="#Normalize-css" class="headerlink" title="Normalize.css"></a>Normalize.css</h4><p>不同浏览器的默认样式存在差异，可以使用 <code>Normalize.css</code>抹平这些差异。当然，你也可以定制属于自己业务的 <code>reset.css</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link href&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;normalize&#x2F;7.0.0&#x2F;normalize.min.css&quot; rel&#x3D;&quot;stylesheet&quot;&gt;</span><br></pre></td></tr></table></figure>
+<p>简单粗暴法</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123; margin: 0; padding: 0; &#125;</span><br></pre></td></tr></table></figure>
+<h4 id="html5shiv-js"><a href="#html5shiv-js" class="headerlink" title="html5shiv.js"></a>html5shiv.js</h4><p>解决 ie9 以下浏览器对 html5 新增标签不识别的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--[if lt IE 9]&gt;</span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;html5shiv&#x2F;3.7.3&#x2F;html5shiv.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;![endif]--&gt;</span><br></pre></td></tr></table></figure>
+<!-- more -->
+<h4 id="respond-js"><a href="#respond-js" class="headerlink" title="respond.js"></a>respond.js</h4><p>解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;picturefill&#x2F;3.0.3&#x2F;picturefill.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="IE-条件注释"><a href="#IE-条件注释" class="headerlink" title="IE 条件注释"></a>IE 条件注释</h4><p>IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="IE-属性过滤器（较为常用的hack方法）"><a href="#IE-属性过滤器（较为常用的hack方法）" class="headerlink" title="IE 属性过滤器（较为常用的hack方法）"></a>IE 属性过滤器（较为常用的hack方法）</h4><p>针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960" alt="image"><br><img src="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="浏览器-CSS-兼容前缀"><a href="#浏览器-CSS-兼容前缀" class="headerlink" title="浏览器 CSS 兼容前缀"></a>浏览器 CSS 兼容前缀</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">-o-transform:rotate(7deg); &#x2F;&#x2F; Opera</span><br><span class="line"></span><br><span class="line">-ms-transform:rotate(7deg); &#x2F;&#x2F; IE</span><br><span class="line"></span><br><span class="line">-moz-transform:rotate(7deg); &#x2F;&#x2F; Firefox</span><br><span class="line"></span><br><span class="line">-webkit-transform:rotate(7deg); &#x2F;&#x2F; Chrome</span><br><span class="line"></span><br><span class="line">transform:rotate(7deg); &#x2F;&#x2F; 统一标识语句</span><br></pre></td></tr></table></figure>
+<p><em><strong>补充：</strong></em> 目前可以采用自动化插件完成，插件名称叫做 <code>Autoprefixer</code>，他可以解析css文件并且添加前缀到css内容里。</p>
+<p>把 <code>Auroprefixer</code> 添加到资源构建工具如：<code>webpack</code>后，就可以不用再手动补全浏览器前缀了，这里只需要你按照W3C的标准来书写css代码，剩下的工作就交给插件完成，目前<code>webpack</code>、<code>gulp</code>、<code>grunt</code>都有相应的插件，是不是开心啊。</p>
+<h4 id="a-标签的几种-CSS-状态的顺序"><a href="#a-标签的几种-CSS-状态的顺序" class="headerlink" title="a 标签的几种 CSS 状态的顺序"></a>a 标签的几种 CSS 状态的顺序</h4><p>很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。</p>
+<p>正确的a标签顺序应该是：<code>==love hate==</code></p>
+<ol>
+<li>link:平常的状态</li>
+<li>visited:被访问过之后</li>
+<li>hover:鼠标放到链接上的时候</li>
+<li>active:链接被按下的时候</li>
+</ol>
+<h4 id="完美解决-Placeholder"><a href="#完美解决-Placeholder" class="headerlink" title="完美解决 Placeholder"></a>完美解决 <code>Placeholder</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; value&#x3D;&quot;Name *&quot; onFocus&#x3D;&quot;this.value &#x3D; &#39;&#39;;&quot; onBlur&#x3D;&quot;if (this.value &#x3D;&#x3D; &#39;&#39;) &#123;this.value &#x3D; &#39;Name *&#39;;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
+
+<h4 id="清除浮动-最佳实践"><a href="#清除浮动-最佳实践" class="headerlink" title="清除浮动 最佳实践"></a>清除浮动 最佳实践</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.fl &#123; float: left; &#125;</span><br><span class="line">.fr &#123; float: right; &#125;</span><br><span class="line">.clearfix:after &#123; display: block; clear: both; content: &quot;&quot;; visibility: hidden; height: 0; &#125;</span><br><span class="line">.clearfix &#123; zoom: 1; &#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="BFC-解决边距重叠问题"><a href="#BFC-解决边距重叠问题" class="headerlink" title="BFC 解决边距重叠问题"></a>BFC 解决边距重叠问题</h4><p>当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：<code>overflow: hidden</code>;</p>
+<div class="box" id="box">
+  <p>Lorem ipsum dolor sit.</p>
+
+  <div style="overflow: hidden;">
+    <p>Lorem ipsum dolor sit.</p>
+  </div>
+
+  <p>Lorem ipsum dolor sit.</p>
+</div>
+
+<h4 id="IE6-双倍边距的问题"><a href="#IE6-双倍边距的问题" class="headerlink" title="IE6 双倍边距的问题"></a>IE6 双倍边距的问题</h4><p>设置 ie6 中设置浮动，同时又设置 <code>margin</code>，会出现双倍边距的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: inline;</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE9-以下浏览器不能使用-opacity"><a href="#解决-IE9-以下浏览器不能使用-opacity" class="headerlink" title="解决 IE9 以下浏览器不能使用 opacity"></a>解决 IE9 以下浏览器不能使用 opacity</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">opacity: 0.5;</span><br><span class="line">filter: alpha(opacity &#x3D; 50);</span><br><span class="line">filter: progid:DXImageTransform.Microsoft.Alpha(style &#x3D; 0, opacity &#x3D; 50);</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"><a href="#解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题" class="headerlink" title="解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"></a>解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;* IE6 hack *&#x2F;</span><br><span class="line">*html, *html body &#123;</span><br><span class="line">  background-image: url(about:blank);</span><br><span class="line">  background-attachment: fixed;</span><br><span class="line">&#125;</span><br><span class="line">*html #menu &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: expression(((e&#x3D;document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + &#39;px&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-背景闪烁的问题"><a href="#IE6-背景闪烁的问题" class="headerlink" title="IE6 背景闪烁的问题"></a>IE6 背景闪烁的问题</h4><p>问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载</p>
+<p>解决：可以用 JavaScript 设置 ie6 缓存这些图片：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.execCommand(&quot;BackgroundImageCache&quot;, false, true);</span><br></pre></td></tr></table></figure>
+<h4 id="解决在-IE6-下，列表与日期错位的问题"><a href="#解决在-IE6-下，列表与日期错位的问题" class="headerlink" title="解决在 IE6 下，列表与日期错位的问题"></a>解决在 IE6 下，列表与日期错位的问题</h4><p>日期<span> 标签放在标题 <a> 标签之前即可<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="解决-IE6-不支持-min-height-属性的问题"><a href="#解决-IE6-不支持-min-height-属性的问题" class="headerlink" title="解决 IE6 不支持 min-height 属性的问题"></a>解决 IE6 不支持 min-height 属性的问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">min-height: 350px;</span><br><span class="line">_height: 350px;</span><br></pre></td></tr></table></figure>
+
+<h4 id="让-IE7-IE8-支持-CSS3-background-size属性"><a href="#让-IE7-IE8-支持-CSS3-background-size属性" class="headerlink" title="让 IE7 IE8 支持 CSS3 background-size属性"></a>让 IE7 IE8 支持 CSS3 background-size属性</h4><p>由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">html &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">body &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">  margin: 0;</span><br><span class="line">  padding: 0;</span><br><span class="line">  background-image: url(&#39;img&#x2F;37.png&#39;);</span><br><span class="line">  background-repeat: no-repeat;</span><br><span class="line">  background-size: cover;</span><br><span class="line">  -ms-behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">  behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-7-line-height-失效的问题"><a href="#IE6-7-line-height-失效的问题" class="headerlink" title="IE6-7 line-height 失效的问题"></a>IE6-7 line-height 失效的问题</h4><p>问题：在ie 中 img 与文字放一起时，line-height 不起作用</p>
+<p>解决：都设置成 float</p>
+<h4 id="td-自动换行的问题"><a href="#td-自动换行的问题" class="headerlink" title="td 自动换行的问题"></a>td 自动换行的问题</h4><p>问题：table 宽度固定，td 自动换行</p>
+<p>解决：设置 <code>Tabl</code>e 为 <code>table-layout: fixed</code>，<code>td</code> 为 <code>word-wrap: break-word</code></p>
+<h4 id="让层显示在-FLASH-之上"><a href="#让层显示在-FLASH-之上" class="headerlink" title="让层显示在 FLASH 之上"></a>让层显示在 FLASH 之上</h4><p>想让层的内容显示在 flash 上，把 FLASH 设置透明即可</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1、&lt;param name&#x3D;&quot; wmode &quot; value&#x3D;&quot;transparent&quot; &#x2F;&gt;</span><br><span class="line">2、&lt;param name&#x3D;&quot;wmode&quot; value&#x3D;&quot;opaque&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="键盘事件-keyCode-兼容性写法"><a href="#键盘事件-keyCode-兼容性写法" class="headerlink" title="键盘事件 keyCode 兼容性写法"></a>键盘事件 keyCode 兼容性写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var inp &#x3D; document.getElementById(&#39;inp&#39;)</span><br><span class="line">var result &#x3D; document.getElementById(&#39;result&#39;)</span><br><span class="line"></span><br><span class="line">function getKeyCode(e) &#123;</span><br><span class="line">  e &#x3D; e ? e : (window.event ? window.event : &quot;&quot;)</span><br><span class="line">  return e.keyCode ? e.keyCode : e.which</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">inp.onkeypress &#x3D; function(e) &#123;</span><br><span class="line">  result.innerHTML &#x3D; getKeyCode(e)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="求窗口大小的兼容写法"><a href="#求窗口大小的兼容写法" class="headerlink" title="求窗口大小的兼容写法"></a>求窗口大小的兼容写法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 525</span><br><span class="line">var client_w &#x3D; document.documentElement.clientWidth || document.body.clientWidth;</span><br><span class="line">var client_h &#x3D; document.documentElement.clientHeight || document.body.clientHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高（包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var scroll_w &#x3D; document.documentElement.scrollWidth || document.body.scrollWidth;</span><br><span class="line">var scroll_h &#x3D; document.documentElement.scrollHeight || document.body.scrollHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高 (不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var offset_w &#x3D; document.documentElement.offsetWidth || document.body.offsetWidth;</span><br><span class="line">var offset_h &#x3D; document.documentElement.offsetHeight || document.body.offsetHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 滚动的高度</span><br><span class="line">var scroll_Top &#x3D; document.documentElement.scrollTop||document.body.scrollTop;</span><br></pre></td></tr></table></figure>
+<h4 id="DOM-事件处理程序的兼容写法（能力检测）"><a href="#DOM-事件处理程序的兼容写法（能力检测）" class="headerlink" title="DOM 事件处理程序的兼容写法（能力检测）"></a>DOM 事件处理程序的兼容写法（能力检测）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">var eventshiv &#x3D; &#123;</span><br><span class="line">    &#x2F;&#x2F; event兼容</span><br><span class="line">    getEvent: function(event) &#123;</span><br><span class="line">        return event ? event : window.event;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; type兼容</span><br><span class="line">    getType: function(event) &#123;</span><br><span class="line">        return event.type;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; target兼容</span><br><span class="line">    getTarget: function(event) &#123;</span><br><span class="line">        return event.target ? event.target : event.srcelem;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件句柄</span><br><span class="line">    addHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.addEventListener) &#123;</span><br><span class="line">            elem.addEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.attachEvent) &#123;</span><br><span class="line">            elem.attachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            &#x2F;&#x2F; 在这里由于.与&#39;on&#39;字符串不能链接，只能用 []</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; listener;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 移除事件句柄</span><br><span class="line">    removeHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.removeEventListener) &#123;</span><br><span class="line">            elem.removeEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.detachEvent) &#123;</span><br><span class="line">            elem.detachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; null;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件代理</span><br><span class="line">    addAgent: function (elem, type, agent, listener) &#123;</span><br><span class="line">        elem.addEventListener(type, function (e) &#123;</span><br><span class="line">            if (e.target.matches(agent)) &#123;</span><br><span class="line">                listener.call(e.target, e); &#x2F;&#x2F; this 指向 e.target</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 取消默认行为</span><br><span class="line">    preventDefault: function(event) &#123;</span><br><span class="line">        if (event.preventDefault) &#123;</span><br><span class="line">            event.preventDefault();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.returnValue &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 阻止事件冒泡</span><br><span class="line">    stopPropagation: function(event) &#123;</span><br><span class="line">        if (event.stopPropagation) &#123;</span><br><span class="line">            event.stopPropagation();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.cancelBubble &#x3D; true;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/08/29/browser-incompatibility-problem-solution/">浏览器兼容性问题解决方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月29日 - 17:04</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/08/29/browser-incompatibility-problem-solution/" title="浏览器兼容性问题解决方案">https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/ja/tags/CSS/" rel="tag"># CSS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" rel="prev" title="《晨间日记的奇迹》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《晨间日记的奇迹》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/npm-source/" rel="next" title="npm相关资料">
+      npm相关资料 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Normalize-css"><span class="nav-number">1.0.0.1.</span> <span class="nav-text">Normalize.css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html5shiv-js"><span class="nav-number">1.0.0.2.</span> <span class="nav-text">html5shiv.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#respond-js"><span class="nav-number">1.0.0.3.</span> <span class="nav-text">respond.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A"><span class="nav-number">1.0.0.4.</span> <span class="nav-text">IE 条件注释</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE-%E5%B1%9E%E6%80%A7%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%88%E8%BE%83%E4%B8%BA%E5%B8%B8%E7%94%A8%E7%9A%84hack%E6%96%B9%E6%B3%95%EF%BC%89"><span class="nav-number">1.0.0.5.</span> <span class="nav-text">IE 属性过滤器（较为常用的hack方法）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8-CSS-%E5%85%BC%E5%AE%B9%E5%89%8D%E7%BC%80"><span class="nav-number">1.0.0.6.</span> <span class="nav-text">浏览器 CSS 兼容前缀</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%87%A0%E7%A7%8D-CSS-%E7%8A%B6%E6%80%81%E7%9A%84%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.0.7.</span> <span class="nav-text">a 标签的几种 CSS 状态的顺序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3-Placeholder"><span class="nav-number">1.0.0.8.</span> <span class="nav-text">完美解决 Placeholder</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.0.0.9.</span> <span class="nav-text">清除浮动 最佳实践</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC-%E8%A7%A3%E5%86%B3%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.10.</span> <span class="nav-text">BFC 解决边距重叠问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E5%8F%8C%E5%80%8D%E8%BE%B9%E8%B7%9D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.11.</span> <span class="nav-text">IE6 双倍边距的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE9-%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8-opacity"><span class="nav-number">1.0.0.12.</span> <span class="nav-text">解决 IE9 以下浏览器不能使用 opacity</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-fixed-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BB%A5%E5%8F%8AIE6%E4%B8%8B%E8%A2%AB%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E5%85%83%E7%B4%A0%E5%9C%A8%E6%BB%9A%E5%8A%A8%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E9%97%AA%E5%8A%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.13.</span> <span class="nav-text">解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-%E8%83%8C%E6%99%AF%E9%97%AA%E7%83%81%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.14.</span> <span class="nav-text">IE6 背景闪烁的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%9C%A8-IE6-%E4%B8%8B%EF%BC%8C%E5%88%97%E8%A1%A8%E4%B8%8E%E6%97%A5%E6%9C%9F%E9%94%99%E4%BD%8D%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.15.</span> <span class="nav-text">解决在 IE6 下，列表与日期错位的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3-IE6-%E4%B8%8D%E6%94%AF%E6%8C%81-min-height-%E5%B1%9E%E6%80%A7%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.16.</span> <span class="nav-text">解决 IE6 不支持 min-height 属性的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9-IE7-IE8-%E6%94%AF%E6%8C%81-CSS3-background-size%E5%B1%9E%E6%80%A7"><span class="nav-number">1.0.0.17.</span> <span class="nav-text">让 IE7 IE8 支持 CSS3 background-size属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IE6-7-line-height-%E5%A4%B1%E6%95%88%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.18.</span> <span class="nav-text">IE6-7 line-height 失效的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#td-%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.0.0.19.</span> <span class="nav-text">td 自动换行的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A9%E5%B1%82%E6%98%BE%E7%A4%BA%E5%9C%A8-FLASH-%E4%B9%8B%E4%B8%8A"><span class="nav-number">1.0.0.20.</span> <span class="nav-text">让层显示在 FLASH 之上</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6-keyCode-%E5%85%BC%E5%AE%B9%E6%80%A7%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.21.</span> <span class="nav-text">键盘事件 keyCode 兼容性写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B1%82%E7%AA%97%E5%8F%A3%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95"><span class="nav-number">1.0.0.22.</span> <span class="nav-text">求窗口大小的兼容写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95%EF%BC%88%E8%83%BD%E5%8A%9B%E6%A3%80%E6%B5%8B%EF%BC%89"><span class="nav-number">1.0.0.23.</span> <span class="nav-text">DOM 事件处理程序的兼容写法（能力检测）</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/29/browser-incompatibility-problem-solution/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '853e0c1fe64ff75efa1090c8ce0a71fa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/08/30/Vue-VSCode-Snippets/index.html b/ja/2017/08/30/Vue-VSCode-Snippets/index.html
new file mode 100644
index 0000000000..750fdfb52b
--- /dev/null
+++ b/ja/2017/08/30/Vue-VSCode-Snippets/index.html
@@ -0,0 +1,777 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/08/30/Vue-VSCode-Snippets/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-08-30T16:23:17.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/08/30/Vue-VSCode-Snippets/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+<span id="more"></span>
+
+<p>此插件可用比较简单的写法生成代码片段，非常适合开发工作，减少代码工作量。</p>
+<p>Script</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vdata</td>
+<td>Component data as a function</td>
+</tr>
+<tr>
+<td>vmethod</td>
+<td>Vue method</td>
+</tr>
+<tr>
+<td>vcomputed</td>
+<td>Vue computed property</td>
+</tr>
+<tr>
+<td>vwatcher</td>
+<td>Vue watcher with new and old value args</td>
+</tr>
+<tr>
+<td>vprops</td>
+<td>Props with type and default</td>
+</tr>
+<tr>
+<td>vimport</td>
+<td>Import one component into another</td>
+</tr>
+<tr>
+<td>vimport-c</td>
+<td>Import one component into another within the export statement</td>
+</tr>
+<tr>
+<td>vimport-export</td>
+<td>Import one component into another and use it within the export statement</td>
+</tr>
+<tr>
+<td>vfilter</td>
+<td>Vue filter</td>
+</tr>
+<tr>
+<td>vmixin</td>
+<td>Create a Vue Mixin</td>
+</tr>
+<tr>
+<td>vmixin-use</td>
+<td>Bring a mixin into a component to use</td>
+</tr>
+<tr>
+<td>vc-direct</td>
+<td>Vue create a custom directive</td>
+</tr>
+<tr>
+<td>vimport-lib</td>
+<td>Import a library</td>
+</tr>
+<tr>
+<td>vimport-gsap</td>
+<td>Import GreenSock with Timeline and Eases</td>
+</tr>
+<tr>
+<td>vanimhook-js</td>
+<td>Using the Transition component JS hooks in methods</td>
+</tr>
+</tbody></table>
+<!-- more -->
+<p>Template</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vfor</td>
+<td>v-for directive</td>
+</tr>
+<tr>
+<td>vmodel</td>
+<td>Semantic v-model directive</td>
+</tr>
+<tr>
+<td>vmodel-num</td>
+<td>Semantic v-model number directive</td>
+</tr>
+<tr>
+<td>von</td>
+<td>v-on click handler with arguments</td>
+</tr>
+<tr>
+<td>vel-props</td>
+<td>Component element with props</td>
+</tr>
+<tr>
+<td>vsrc</td>
+<td>Image src binding</td>
+</tr>
+<tr>
+<td>vstyle</td>
+<td>Inline style binding</td>
+</tr>
+<tr>
+<td>vstyle-obj</td>
+<td>Inline style binding with objects</td>
+</tr>
+<tr>
+<td>vclass</td>
+<td>Class binding</td>
+</tr>
+<tr>
+<td>vclass-obj</td>
+<td>Class binding with objects</td>
+</tr>
+<tr>
+<td>vclass-obj-mult</td>
+<td>Multiple conditional class bindings</td>
+</tr>
+<tr>
+<td>vanim</td>
+<td>Transition component with JS hooks</td>
+</tr>
+</tbody></table>
+<p>Vuex</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vstore</td>
+<td>Base for Vuex store.js</td>
+</tr>
+<tr>
+<td>vgetters</td>
+<td>Vuex Getter</td>
+</tr>
+<tr>
+<td>vmutation</td>
+<td>Vuex Mutation</td>
+</tr>
+<tr>
+<td>vaction</td>
+<td>Vuex Action</td>
+</tr>
+<tr>
+<td>vstore-import</td>
+<td>Import vuex store into main.js</td>
+</tr>
+</tbody></table>
+<p>Extra (plaintext)</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>gitignore</td>
+<td>.gitignore file presets</td>
+</tr>
+<tr>
+<td>vinc</td>
+<td>incrementer</td>
+</tr>
+<tr>
+<td>vdec</td>
+<td>decrementer</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/08/30/Vue-VSCode-Snippets/">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 16:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/08/30/Vue-VSCode-Snippets/" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+              <a href="/ja/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/npm-source/" rel="prev" title="npm相关资料">
+      <i class="fa fa-chevron-left"></i> npm相关资料
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/Vue-basic/" rel="next" title="Vue基础">
+      Vue基础 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-VSCode-Snippets/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '00aefa975fc31a6359f929804ecf9c85',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/08/30/Vue-basic/index.html b/ja/2017/08/30/Vue-basic/index.html
new file mode 100644
index 0000000000..77e2f76188
--- /dev/null
+++ b/ja/2017/08/30/Vue-basic/index.html
@@ -0,0 +1,739 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue基础">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/08/30/Vue-basic/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-08-30T17:03:05.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/08/30/Vue-basic/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Vue基础 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue基础
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+<span id="more"></span>
+<h3 id="搭建项目"><a href="#搭建项目" class="headerlink" title="搭建项目"></a>搭建项目</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm install --global vue-cli</span><br><span class="line">vue init webpack my-project</span><br><span class="line">cd my-project</span><br><span class="line">npm install（推荐用cnpm install）</span><br><span class="line">如果没有cnpm ，先安装cnpm镜像</span><br><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>
+<h3 id="目录讲解"><a href="#目录讲解" class="headerlink" title="目录讲解"></a>目录讲解</h3><blockquote>
+<ul>
+<li>build和config ：项目开发和打包时候的相关配置；</li>
+<li>node_modules ：项目所需要的依赖文件；</li>
+<li>src ：主应用/页面相关文件；<ul>
+<li>assets ： 静态资源文件；</li>
+<li>components ：组件；</li>
+<li>res：资源<ul>
+<li>css： 公共css或是css预处理文件；</li>
+<li>js：   公共js文件</li>
+<li>img：公共图片</li>
+</ul>
+</li>
+<li>router ：路由配置文件；</li>
+<li>views ： 视图文件，其实也是vue组件。按照业务功能划分模块；</li>
+<li>vuex : 状态管理的配置文件；</li>
+<li>App.vue : 主组件；</li>
+<li>main.js： 入口文件，初始化vue实例并使用需要的插件</li>
+</ul>
+</li>
+<li>index.html ： 主html页面；</li>
+<li>dist：webpack打包生成的文件；</li>
+<li>package.json：记录依赖相关信息</li>
+</ul>
+</blockquote>
+<h3 id="文件的加载顺序"><a href="#文件的加载顺序" class="headerlink" title="文件的加载顺序:"></a>文件的加载顺序:</h3><p>当我们执行命令 <code>npm run dev</code>的时候根据配置文件<code>dev-server.js</code>里的相关配置去加载<code>webpack</code>的相关配置文件 在<code>webpack.base.conf</code>里面<code>entry</code>入口文件就配置了<code>app：&#39;./src/main.js&#39;</code> </p>
+<p>所以当我们在运行<code>npm run dev</code>的时候就开始通过<code>main.js</code>执行了。<code>main.js</code> 初始化vue实例并且加载相关配置插件，然后通过<code>app.vue</code>文件去访问各个组件</p>
+<h3 id="Build-dev-server-js主要完成以下几件事情："><a href="#Build-dev-server-js主要完成以下几件事情：" class="headerlink" title="Build/dev-server.js主要完成以下几件事情："></a>Build/dev-server.js主要完成以下几件事情：</h3><ol>
+<li>检查node和npm的版本；</li>
+<li>引入相关插件和配置；</li>
+<li>创建express服务器和webpack编译器；</li>
+<li>配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）；</li>
+<li>挂载代理服务和中间件；</li>
+<li>配置静态资源；</li>
+<li>启动服务器监听特定端口（8080）；</li>
+<li>自动打开浏览器并打开特定网址（localhost:8080）；</li>
+</ol>
+<h3 id="Build-huild-js主要完成以下几件事情："><a href="#Build-huild-js主要完成以下几件事情：" class="headerlink" title="Build/huild.js主要完成以下几件事情："></a>Build/huild.js主要完成以下几件事情：</h3><ol>
+<li>loading动画；</li>
+<li>删除创建目标文件夹；</li>
+<li>webpack编译；</li>
+<li>输出信息</li>
+</ol>
+<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><h4 id="babelrc"><a href="#babelrc" class="headerlink" title=".babelrc"></a>.babelrc</h4><p>设置转码的规则和插件（使用es6语法必须安装插件）</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-preset-es2015</span><br></pre></td></tr></table></figure>
+
+<p>presets 字段是用来设定转码规则;</p>
+<h4 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h4><p>配置文件编码格式的文件</p>
+<ul>
+<li>indent_style:  设置缩进风格，tab或者空格;</li>
+<li>indent_size:  缩进的宽度;</li>
+<li>tab_width:   设置tab的列数。默认是indent_size;</li>
+<li>end_of_line： 换行符，lf、cr和crlf;</li>
+<li>charset：  编码;</li>
+<li>trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符;</li>
+<li>insert_final_newline:   设为true表明使文件以一个空白行结尾;</li>
+<li>root: 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件;</li>
+</ul>
+<h4 id="eslintignore"><a href="#eslintignore" class="headerlink" title=".eslintignore"></a>.eslintignore</h4><p>忽略不符合eslint规范的文件, （一般会忽略掉第三方引用的插件）</p>
+<h4 id="eslintrc-js"><a href="#eslintrc-js" class="headerlink" title=".eslintrc.js"></a>.eslintrc.js</h4><p>定义代码规则</p>
+<h4 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h4><p>配置文件，用于配置不需要加入版本管理的文件</p>
+<h3 id="VUE-文件解释"><a href="#VUE-文件解释" class="headerlink" title=".VUE 文件解释"></a>.VUE 文件解释</h3><ul>
+<li>template： 展示模板</li>
+<li>import ： 导入组件已经js文件</li>
+<li>export default： <ul>
+<li>data：数据源；</li>
+<li>methods：方法；                </li>
+<li>mounted：页面加载之后执行的方法；    </li>
+<li>created：页面生成时加载的方法；</li>
+</ul>
+</li>
+<li>style：  样式代码  其中scoped表示样式作用范围为本vue文件</li>
+</ul>
+<h3 id="网络访问"><a href="#网络访问" class="headerlink" title="网络访问"></a>网络访问</h3><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><ol>
+<li>发送请求：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">axios#request(config)；</span><br><span class="line">axios#get(url[, config])；</span><br><span class="line">axios#delete(url[, config])；</span><br><span class="line">axios#head(url[, config])；</span><br><span class="line">axios#post(url[, data[, config]])；</span><br><span class="line">axios#put(url[, data[, config]])；</span><br><span class="line">axios#patch(url[, data[, config]])；</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>处理响应：</li>
+</ol>
+<ul>
+<li>Promise语法；</li>
+<li>处理结果：then；</li>
+<li>处理异常：catch；</li>
+</ul>
+<ol start="3">
+<li>拦截器（use/reject）：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">axios.interceptors.response.use；</span><br><span class="line">axios.interceptors.rquest.use；</span><br><span class="line">reject(移除请求拦截)</span><br></pre></td></tr></table></figure>
+
+<ol start="4">
+<li>参数：</li>
+</ol>
+<ul>
+<li>json（默认）；</li>
+<li>qs；</li>
+</ul>
+<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><ul>
+<li>Prpos：父组件对子组件；</li>
+<li>自定义事件：子组件对父组件；</li>
+<li>消息总线：任意两个组件；</li>
+<li>状态管理：Vuex（适用于大型单页面开发）</li>
+</ul>
+<h3 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h3><ol>
+<li>配置</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &#39;&#x2F;&#39;,</span><br><span class="line">      name: &#39;Hello&#39;,</span><br><span class="line">      component: Hello</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#39;#app&#39;,</span><br><span class="line">  router,</span><br><span class="line">  template: &#39;&lt;App&#x2F;&gt;&#39;,</span><br><span class="line">  components: &#123; App &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>导航</li>
+</ol>
+<ul>
+<li>push</li>
+<li>replace</li>
+<li>go</li>
+</ul>
+<ol start="3">
+<li>参数传递</li>
+</ol>
+<ul>
+<li>RESTful url参数</li>
+<li>参数查询 query</li>
+<li>锚点  hash: ‘#data’</li>
+</ul>
+<ol start="4">
+<li>嵌套路由</li>
+</ol>
+<ul>
+<li>Children</li>
+</ul>
+<ol start="5">
+<li>钩子</li>
+</ol>
+<ul>
+<li>beforeRouteEnter</li>
+<li>beforeRouteLeave</li>
+</ul>
+<h3 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h3><blockquote>
+<p>Vuex是什么？</p>
+<p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
+</blockquote>
+<ul>
+<li>state里面就是存放的我们所要用到的状态；</li>
+<li>mutations就是存放如何更改状态的方法 ，同步操作；</li>
+<li>getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。</li>
+<li>actions就是mutation的加强版，它可以通过commit</li>
+<li>mutations中的方法来改变状态，最重要的是它可以进行异步操作。 </li>
+<li>modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/08/30/Vue-basic/">Vue基础</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 17:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/08/30/Vue-basic/" title="Vue基础">https://blog.lifesli.com/2017/08/30/Vue-basic/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/Vue-basic/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/Vue-VSCode-Snippets/" rel="prev" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      <i class="fa fa-chevron-left"></i> Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="next" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.0.1.</span> <span class="nav-text">搭建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E8%AE%B2%E8%A7%A3"><span class="nav-number">1.0.2.</span> <span class="nav-text">目录讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E7%9A%84%E5%8A%A0%E8%BD%BD%E9%A1%BA%E5%BA%8F"><span class="nav-number">1.0.3.</span> <span class="nav-text">文件的加载顺序:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-dev-server-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.4.</span> <span class="nav-text">Build&#x2F;dev-server.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Build-huild-js%E4%B8%BB%E8%A6%81%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%87%A0%E4%BB%B6%E4%BA%8B%E6%83%85%EF%BC%9A"><span class="nav-number">1.0.5.</span> <span class="nav-text">Build&#x2F;huild.js主要完成以下几件事情：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.0.6.</span> <span class="nav-text">配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#babelrc"><span class="nav-number">1.0.6.1.</span> <span class="nav-text">.babelrc</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#editorconfig"><span class="nav-number">1.0.6.2.</span> <span class="nav-text">.editorconfig</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintignore"><span class="nav-number">1.0.6.3.</span> <span class="nav-text">.eslintignore</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#eslintrc-js"><span class="nav-number">1.0.6.4.</span> <span class="nav-text">.eslintrc.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#gitignore"><span class="nav-number">1.0.6.5.</span> <span class="nav-text">.gitignore</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VUE-%E6%96%87%E4%BB%B6%E8%A7%A3%E9%87%8A"><span class="nav-number">1.0.7.</span> <span class="nav-text">.VUE 文件解释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E8%AE%BF%E9%97%AE"><span class="nav-number">1.0.8.</span> <span class="nav-text">网络访问</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#axios"><span class="nav-number">1.0.8.1.</span> <span class="nav-text">axios</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">1.0.9.</span> <span class="nav-text">组件通信</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1"><span class="nav-number">1.0.10.</span> <span class="nav-text">路由</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86"><span class="nav-number">1.0.11.</span> <span class="nav-text">状态管理</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/08/30/Vue-basic/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/Vue-basic/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/Vue-basic/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c0bbfdd5174f8d9b1d9d8670004b3bd7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/08/30/npm-source/index.html b/ja/2017/08/30/npm-source/index.html
new file mode 100644
index 0000000000..0a0935e802
--- /dev/null
+++ b/ja/2017/08/30/npm-source/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npm相关资料">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/08/30/npm-source/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-08-30T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npm">
+<meta property="article:tag" content="rnpm">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/08/30/npm-source/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>npm相关资料 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npm相关资料
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+<span id="more"></span>
+
+<blockquote>
+<p>npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。</p>
+</blockquote>
+<h2 id="国内优秀npm镜像"><a href="#国内优秀npm镜像" class="headerlink" title="国内优秀npm镜像"></a>国内优秀npm镜像</h2><h3 id="淘宝npm镜像"><a href="#淘宝npm镜像" class="headerlink" title="淘宝npm镜像"></a>淘宝npm镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org/</a></li>
+</ul>
+<h3 id="cnpmjs镜像"><a href="#cnpmjs镜像" class="headerlink" title="cnpmjs镜像"></a>cnpmjs镜像</h3><ul>
+<li>搜索地址：<a target="_blank" rel="noopener" href="http://cnpmjs.org/">http://cnpmjs.org/</a></li>
+<li>registry地址：<a target="_blank" rel="noopener" href="http://r.cnpmjs.org/">http://r.cnpmjs.org/</a></li>
+</ul>
+<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：</p>
+<h3 id="1-临时使用"><a href="#1-临时使用" class="headerlink" title="1.临时使用"></a>1.临时使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm --registry https:&#x2F;&#x2F;registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure>
+<h3 id="2-持久使用"><a href="#2-持久使用" class="headerlink" title="2.持久使用"></a>2.持久使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 配置后可通过下面方式来验证是否成功</span><br><span class="line">npm config get registry</span><br><span class="line">&#x2F;&#x2F; 或</span><br><span class="line">npm info express</span><br></pre></td></tr></table></figure>
+<h3 id="3-通过cnpm使用"><a href="#3-通过cnpm使用" class="headerlink" title="3.通过cnpm使用"></a>3.通过cnpm使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用</span><br><span class="line">cnpm install express</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/08/30/npm-source/">npm相关资料</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年08月30日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/08/30/npm-source/" title="npm相关资料">https://blog.lifesli.com/2017/08/30/npm-source/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/08/30/npm-source/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/npm/" rel="tag"># npm</a>
+              <a href="/ja/tags/rnpm/" rel="tag"># rnpm</a>
+              <a href="/ja/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/29/browser-incompatibility-problem-solution/" rel="prev" title="浏览器兼容性问题解决方案">
+      <i class="fa fa-chevron-left"></i> 浏览器兼容性问题解决方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/Vue-VSCode-Snippets/" rel="next" title="Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展">
+      Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%BD%E5%86%85%E4%BC%98%E7%A7%80npm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.</span> <span class="nav-text">国内优秀npm镜像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%98%E5%AE%9Dnpm%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.1.</span> <span class="nav-text">淘宝npm镜像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#cnpmjs%E9%95%9C%E5%83%8F"><span class="nav-number">1.1.2.</span> <span class="nav-text">cnpmjs镜像</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.</span> <span class="nav-text">如何使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.1.</span> <span class="nav-text">1.临时使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%8C%81%E4%B9%85%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.2.</span> <span class="nav-text">2.持久使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E9%80%9A%E8%BF%87cnpm%E4%BD%BF%E7%94%A8"><span class="nav-number">1.2.3.</span> <span class="nav-text">3.通过cnpm使用</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/08/30/npm-source/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/08/30/npm-source/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/08/30/npm-source/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '146847c2ab99e919708cdc95d03b8a79',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html b/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
new file mode 100644
index 0000000000..f014577f05
--- /dev/null
+++ b/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html
@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。   开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-10-11T16:18:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+<span id="more"></span>
+
+<h2 id="技术栈选型"><a href="#技术栈选型" class="headerlink" title="技术栈选型"></a>技术栈选型</h2><blockquote>
+<p>这里说是技术栈选型可能并不是很恰当，但又找不到合适的描述，就是把需要的技术介绍一下，如果还不会的，可以自行学习，或者看看我的其他文章。</p>
+</blockquote>
+<ul>
+<li>node（npm），现在node这么火，没用过都不好意思出门，但是如果你还不回的话，就先自行学习安装一下吧。</li>
+<li>Hexo 静态博客程序，其实还有很多，只不过这个比较新，而且搭配Next非常漂亮，就选了它。</li>
+<li>Next 可以说是Hexo的定制系统，不仅仅是做了个皮肤，简洁美观的配置项和官网说明深得我心。</li>
+</ul>
+<h2 id="搭建步骤（安装步骤）"><a href="#搭建步骤（安装步骤）" class="headerlink" title="搭建步骤（安装步骤）"></a>搭建步骤（安装步骤）</h2><h3 id="安装Hexo-Hexo官网"><a href="#安装Hexo-Hexo官网" class="headerlink" title="安装Hexo Hexo官网"></a>安装Hexo <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g &#x2F;&#x2F; 安装hexo的脚手架工具</span><br><span class="line">$ hexo init blog &#x2F;&#x2F; 初始化博客</span><br><span class="line">$ cd blog &#x2F;&#x2F; 返回博客目录</span><br><span class="line">$ npm install &#x2F;&#x2F; 安装依赖</span><br><span class="line">$ hexo server &#x2F;&#x2F; 启动博客</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>怎么样五行代码就生成并运行了一个博客是不是超简单。<br>下面我们看一下生成的博客的目录</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
+<p><code>_config.yml</code>这是博客的配置文件，比如博客名称，副标题，作者等信息都在这个文件里设置。</p>
+<p><code>package.json</code>这是博客的依赖文件可以忽略</p>
+<p><code>scaffolds</code>这是博客的模板目录，当你要写一篇文章时，这里会有文章的默认类型。</p>
+<p><code>source</code>这是博客的网站资源，包括发布的文章（<code>_posts</code>）、关于、分类还有上传文件等。</p>
+<p><code>themes</code>这是博客的皮肤。</p>
+<p>更多配置信息请查阅官网手册</p>
+<h3 id="安装Next主题-Next官网"><a href="#安装Next主题-Next官网" class="headerlink" title="安装Next主题 Next官网"></a>安装Next主题 <a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/">Next官网</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ cd your-hexo-site</span><br><span class="line">$ git clone https:&#x2F;&#x2F;github.com&#x2F;iissnan&#x2F;hexo-theme-next themes&#x2F;next</span><br></pre></td></tr></table></figure>
+
+<p>然后到<code>_config.yml</code>配置文件将主题配置改成next就可以使用next的皮肤了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>
+<p>皮肤也有配置文件，为跟Hexo进行区分Hexo的配置文件称为<code>站点配置文件</code>， 皮肤配置文件称为<code>主题配置文件</code>。</p>
+<p>对两个配置文件进行简单配置后，符合需求的博客就搭建而成了，这里有个友好的建议，配置文件如果配置不正确将不能正确运行博客，所以在配置前务必保留好原始配置文件，注意配置时不要缺了空格，不要问我为什么知道这个。</p>
+<h3 id="更新博客主题"><a href="#更新博客主题" class="headerlink" title="更新博客主题"></a>更新博客主题</h3><p><a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md">https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md</a></p>
+<h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><p>博客已经搭建好了，接下来就是写博客了，那么如何开始写博客呢，超级简单一行命令足以：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hexo new [layout] &lt;title&gt;  </span><br><span class="line">&#x2F;&#x2F; layout 为模板类型可以省略，title为文章标题，通常可以简写为如下</span><br><span class="line">hexo new title</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>新建命令执行后在<code>_posts</code>的目录下就会生成一个你刚才命名的md后缀的文件，这就是一个MarkDown语法的文件，（如果不了解MarkDown语法的可以去学一下，很简单的符号语言，或者像我一样用支持MarkDown语法的编辑器来写文章。新建的文章打开内容如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">tags:</span><br><span class="line">---</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>非常好理解，title就是标题，date为创建时间，tags是标签方便分类，但是这些并不全，还有些常用的分类没有写上，下面我将常用的进行补充</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">categories: </span><br><span class="line">	- NodeJS</span><br><span class="line">	- npm</span><br><span class="line">tags:</span><br><span class="line">	- npm</span><br><span class="line">	- NodeJS</span><br><span class="line">	- rnpm</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
+<p>这样补充后就有了常见博客的分类和标签的功能，是不是很简单。</p>
+<p>写完文章以后还要执行下面命令，生成静态页面</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate &#x2F;&#x2F; 将md后缀文件生成成静态html文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+
+<p>这样我们就完成了博客的搭建和博客的书写，到现在我们就已经有了一个本地的博客，那么如何将博客上传到GitHub上呢？</p>
+<h2 id="将Blog上传至GitHub"><a href="#将Blog上传至GitHub" class="headerlink" title="将Blog上传至GitHub"></a>将Blog上传至GitHub</h2><p>github是一个代码托管的平台，为了方便描述代码功能，它提供了README.md文件进行说明，但是为了更好的展现，也提供了gitpage的功能，博客是基于这个功能进行的扩展，那么如何用gitpage的功能来实现博客系统呢？</p>
+<h3 id="创建仓库"><a href="#创建仓库" class="headerlink" title="创建仓库"></a>创建仓库</h3><p>创建一个以你的GitHub账号为开头命名的仓库，格式如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GitHub账号名称.github.io</span><br><span class="line">&#x2F;&#x2F; 如</span><br><span class="line">lixuguang.github.io</span><br></pre></td></tr></table></figure>
+<p>然后到blog系统的配置文件<code>_config.yml</code>里配置一下上传路径</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: &lt;repository url&gt;</span><br><span class="line">  </span><br><span class="line">&#x2F;&#x2F; 我的实例</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git@github.com:lixuguang&#x2F;lixuguang.github.io.git</span><br><span class="line">  branch: master</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置好就可以进行部署了，部署也很简单，只需要执行一下下面的命令。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save &#x2F;&#x2F; 安装上传工具</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>稍等一会，如果没有出现什么错误信息，那么你的部署就成功了。之后你就可以访问你的博客了，博客地址如下：<br>https://你的github账号.github.io/<br>我的如下：<br><a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></p>
+<p>现在你是不是已经学会如何利用github搭建一个静态的博客系统了呢，如果你还没有一个自己的技术博客，快来试试吧。</p>
+<h2 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h2><p>是不是觉得命令行还是挺麻烦的，要敲那么一大串字母，哈哈实际上这些常用命令是有缩写方式的，下面给大家介绍一下缩写方式。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo s</span><br><span class="line"></span><br><span class="line">$ hexo generate</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo g</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo d</span><br><span class="line"></span><br><span class="line">$ hexo new</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo n</span><br></pre></td></tr></table></figure>
+
+<p>另外每次发布之前最好执行以下命令，清理当前内容</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>以防出现冲突的情况，具体动作如下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g -d &#x2F;&#x2F; 文件生成后立即部署网站</span><br><span class="line">$ hexo d -g &#x2F;&#x2F; 部署之前预先生成静态文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><ol>
+<li>SSH问题</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;lixuguang316@gmail.com&quot;</span><br><span class="line">&#x2F;&#x2F; 填写你自己的github邮箱</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>敲三下回车，之后会在</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">C:\Users\Administrator\.ssh &#x2F;&#x2F; windows下</span><br><span class="line">open ~&#x2F;.ssh &#x2F;&#x2F; Mac下打开ssh文件  </span><br></pre></td></tr></table></figure>
+<p>文件夹下生成两个文件<code>id_rsa</code>（私钥）、<code>id_rsa.pub</code>（公钥），在github上的SSH处添加新的ssh，然后将<code>公钥</code>内容贴到上面起个名字可以叫hexo，保存，然后在git bash下敲击</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh git@github.com</span><br></pre></td></tr></table></figure>
+<p>然后敲<code>yes</code>就可以上传blog代码了<br>怎么样会了么？更多高阶玩法请阅读官方说明文档，文章如有谬误之处请各位指出，如果觉得文章对你有所帮助我将十分开心，如果你喜欢我的文章可以到我的github上点个<code>fork</code>，谢谢你的阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月11日 - 16:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/08/30/Vue-basic/" rel="prev" title="Vue基础">
+      <i class="fa fa-chevron-left"></i> Vue基础
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/us-gitment/" rel="next" title="给博客添加基于github-issue的评论系统">
+      给博客添加基于github-issue的评论系统 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%A0%88%E9%80%89%E5%9E%8B"><span class="nav-number">2.</span> <span class="nav-text">技术栈选型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4%EF%BC%88%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">搭建步骤（安装步骤）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Hexo-Hexo%E5%AE%98%E7%BD%91"><span class="nav-number">3.1.</span> <span class="nav-text">安装Hexo Hexo官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Next%E4%B8%BB%E9%A2%98-Next%E5%AE%98%E7%BD%91"><span class="nav-number">3.2.</span> <span class="nav-text">安装Next主题 Next官网</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98"><span class="nav-number">3.3.</span> <span class="nav-text">更新博客主题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.</span> <span class="nav-text">写博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%86Blog%E4%B8%8A%E4%BC%A0%E8%87%B3GitHub"><span class="nav-number">5.</span> <span class="nav-text">将Blog上传至GitHub</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E4%BB%93%E5%BA%93"><span class="nav-number">5.1.</span> <span class="nav-text">创建仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%80%E5%B7%A7"><span class="nav-number">6.</span> <span class="nav-text">技巧</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="nav-number">7.</span> <span class="nav-text">常见问题</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd9adabfa0065c364d6bc824a5e69f962',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/10/12/VSCode-ESLint/index.html b/ja/2017/10/12/VSCode-ESLint/index.html
new file mode 100644
index 0000000000..054316e09c
--- /dev/null
+++ b/ja/2017/10/12/VSCode-ESLint/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode ESLint JS代码静态检测工具">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/10/12/VSCode-ESLint/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-10-12T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode">
+<meta property="article:tag" content="ESLint">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/10/12/VSCode-ESLint/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>VSCode ESLint JS代码静态检测工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode ESLint JS代码静态检测工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+<span id="more"></span>
+<h1 id="安装ESLint插件"><a href="#安装ESLint插件" class="headerlink" title="安装ESLint插件"></a>安装ESLint插件</h1><p>打开VSCode编辑器，在左侧右下角有一个安装插件的图标，点击后就可以打开插件市场，输入ESLint，就会有个黄色的图标出现在你面前，不用犹豫双击它，稍等一会它就安装完了，是不是超简单。</p>
+<h1 id="安装NPM依赖"><a href="#安装NPM依赖" class="headerlink" title="安装NPM依赖"></a>安装NPM依赖</h1><p>ESLint插件运行需要一些依赖，对于用过npm包管理工具的人来讲小意思啦，我把代码放到下面，需要的直接粘贴运行就好。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;全局安装eslint</span><br><span class="line">npm i eslint -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到html中的js校验</span><br><span class="line">npm i eslint-plugin-html -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到es2015语法</span><br><span class="line">npm i babel-eslint -g</span><br></pre></td></tr></table></figure>
+<h1 id="配置eslint配置文件到项目根目录"><a href="#配置eslint配置文件到项目根目录" class="headerlink" title="配置eslint配置文件到项目根目录"></a>配置eslint配置文件到项目根目录</h1><p>配置文件名称如下：<br><strong>eslintrc.json</strong><br>内容为：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        &quot;plugins&quot;: [</span><br><span class="line">                &#x2F;&#x2F; &quot;react&quot;,</span><br><span class="line">                &quot;html&quot;</span><br><span class="line">        ],</span><br><span class="line">        &quot;env&quot;: &#123;</span><br><span class="line">                &quot;node&quot;: true,</span><br><span class="line">                &quot;jquery&quot;: true,</span><br><span class="line">                &quot;es6&quot;: true,</span><br><span class="line">                &quot;browser&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;globals&quot;: &#123;</span><br><span class="line">                &quot;angular&quot;: false</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;parser&quot;: &quot;babel-eslint&quot;,</span><br><span class="line">        &quot;rules&quot;: &#123;</span><br><span class="line">                &#x2F;&#x2F;官方文档 http:&#x2F;&#x2F;eslint.org&#x2F;docs&#x2F;rules&#x2F;</span><br><span class="line">                &#x2F;&#x2F;参数：0 关闭，1 警告，2 错误</span><br><span class="line">                &#x2F;&#x2F; &quot;quotes&quot;: [0, &quot;single&quot;],                  &#x2F;&#x2F;建议使用单引号</span><br><span class="line">                &#x2F;&#x2F; &quot;no-inner-declarations&quot;: [0, &quot;both&quot;],     &#x2F;&#x2F;不建议在&#123;&#125;代码块内部声明变量或函数</span><br><span class="line">                &quot;no-extra-boolean-cast&quot;: 1, &#x2F;&#x2F;多余的感叹号转布尔型</span><br><span class="line">                &quot;no-extra-semi&quot;: 1, &#x2F;&#x2F;多余的分号</span><br><span class="line">                &quot;no-extra-parens&quot;: 0, &#x2F;&#x2F;多余的括号</span><br><span class="line">                &quot;no-empty&quot;: 1, &#x2F;&#x2F;空代码块</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;使用前未定义</span><br><span class="line">                &quot;no-use-before-define&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;nofunc&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;complexity&quot;: [0, 10], &#x2F;&#x2F;圈复杂度大于*</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;定义数组或对象最后多余的逗号</span><br><span class="line">                &quot;comma-dangle&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;never&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F; 不允许对全局变量赋值,如 window &#x3D; &#39;abc&#39;</span><br><span class="line">                &quot;no-global-assign&quot;: [&quot;error&quot;, &#123;</span><br><span class="line">                        &#x2F;&#x2F; 定义例外</span><br><span class="line">                        &#x2F;&#x2F; &quot;exceptions&quot;: [&quot;Object&quot;]</span><br><span class="line">                &#125;],</span><br><span class="line">                &quot;no-var&quot;: 0, &#x2F;&#x2F;用let或const替代var</span><br><span class="line">                &quot;no-const-assign&quot;: 2, &#x2F;&#x2F;不允许const重新赋值</span><br><span class="line">                &quot;no-class-assign&quot;: 2, &#x2F;&#x2F;不允许对class重新赋值</span><br><span class="line">                &quot;no-debugger&quot;: 1, &#x2F;&#x2F;debugger 调试代码未删除</span><br><span class="line">                &quot;no-console&quot;: 0, &#x2F;&#x2F;console 未删除</span><br><span class="line">                &quot;no-constant-condition&quot;: 2, &#x2F;&#x2F;常量作为条件</span><br><span class="line">                &quot;no-dupe-args&quot;: 2, &#x2F;&#x2F;参数重复</span><br><span class="line">                &quot;no-dupe-keys&quot;: 2, &#x2F;&#x2F;对象属性重复</span><br><span class="line">                &quot;no-duplicate-case&quot;: 2, &#x2F;&#x2F;case重复</span><br><span class="line">                &quot;no-empty-character-class&quot;: 2, &#x2F;&#x2F;正则无法匹配任何值</span><br><span class="line">                &quot;no-invalid-regexp&quot;: 2, &#x2F;&#x2F;无效的正则</span><br><span class="line">                &quot;no-func-assign&quot;: 2, &#x2F;&#x2F;函数被赋值</span><br><span class="line">                &quot;valid-typeof&quot;: 1, &#x2F;&#x2F;无效的类型判断</span><br><span class="line">                &quot;no-unreachable&quot;: 2, &#x2F;&#x2F;不可能执行到的代码</span><br><span class="line">                &quot;no-unexpected-multiline&quot;: 2, &#x2F;&#x2F;行尾缺少分号可能导致一些意外情况</span><br><span class="line">                &quot;no-sparse-arrays&quot;: 1, &#x2F;&#x2F;数组中多出逗号</span><br><span class="line">                &quot;no-shadow-restricted-names&quot;: 2, &#x2F;&#x2F;关键词与命名冲突</span><br><span class="line">                &quot;no-undef&quot;: 1, &#x2F;&#x2F;变量未定义</span><br><span class="line">                &quot;no-unused-vars&quot;: 1, &#x2F;&#x2F;变量定义后未使用</span><br><span class="line">                &quot;no-cond-assign&quot;: 2, &#x2F;&#x2F;条件语句中禁止赋值操作</span><br><span class="line">                &quot;no-native-reassign&quot;: 2, &#x2F;&#x2F;禁止覆盖原生对象</span><br><span class="line">                &quot;no-mixed-spaces-and-tabs&quot;: 0,</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;代码风格优化 --------------------------------------</span><br><span class="line">                &quot;no-irregular-whitespace&quot;: 0,</span><br><span class="line">                &quot;no-else-return&quot;: 0, &#x2F;&#x2F;在else代码块中return，else是多余的</span><br><span class="line">                &quot;no-multi-spaces&quot;: 0, &#x2F;&#x2F;不允许多个空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;object直接量建议写法 : 后一个空格前面不留空格</span><br><span class="line">                &quot;key-spacing&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;beforeColon&quot;: false,</span><br><span class="line">                                &quot;afterColon&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;block-scoped-var&quot;: 1, &#x2F;&#x2F;变量应在外部上下文中声明，不应在&#123;&#125;代码块中</span><br><span class="line">                &quot;consistent-return&quot;: 1, &#x2F;&#x2F;函数返回值可能是不同类型</span><br><span class="line">                &quot;accessor-pairs&quot;: 1, &#x2F;&#x2F;object getter&#x2F;setter方法需要成对出现</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;换行调用对象方法  点操作符应写在行首</span><br><span class="line">                &quot;dot-location&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;property&quot;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-lone-blocks&quot;: 1, &#x2F;&#x2F;多余的&#123;&#125;嵌套</span><br><span class="line">                &quot;no-labels&quot;: 1, &#x2F;&#x2F;无用的标记</span><br><span class="line">                &quot;no-extend-native&quot;: 1, &#x2F;&#x2F;禁止扩展原生对象</span><br><span class="line">                &quot;no-floating-decimal&quot;: 1, &#x2F;&#x2F;浮点型需要写全 禁止.1 或 2.写法</span><br><span class="line">                &quot;no-loop-func&quot;: 1, &#x2F;&#x2F;禁止在循环体中定义函数</span><br><span class="line">                &quot;no-new-func&quot;: 1, &#x2F;&#x2F;禁止new Function(...) 写法</span><br><span class="line">                &quot;no-self-compare&quot;: 1, &#x2F;&#x2F;不允与自己比较作为条件</span><br><span class="line">                &quot;no-sequences&quot;: 1, &#x2F;&#x2F;禁止可能导致结果不明确的逗号操作符</span><br><span class="line">                &quot;no-throw-literal&quot;: 1, &#x2F;&#x2F;禁止抛出一个直接量 应是Error对象</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允return时有赋值操作</span><br><span class="line">                &quot;no-return-assign&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;always&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允许重复声明</span><br><span class="line">                &quot;no-redeclare&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;builtinGlobals&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不执行的表达式</span><br><span class="line">                &quot;no-unused-expressions&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;allowShortCircuit&quot;: true,</span><br><span class="line">                                &quot;allowTernary&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-useless-call&quot;: 1, &#x2F;&#x2F;无意义的函数call或apply</span><br><span class="line">                &quot;no-useless-concat&quot;: 1, &#x2F;&#x2F;无意义的string concat</span><br><span class="line">                &quot;no-void&quot;: 1, &#x2F;&#x2F;禁用void</span><br><span class="line">                &quot;no-with&quot;: 1, &#x2F;&#x2F;禁用with</span><br><span class="line">                &quot;space-infix-ops&quot;: 0, &#x2F;&#x2F;操作符前后空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;jsdoc</span><br><span class="line">                &quot;valid-jsdoc&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;requireParamDescription&quot;: true,</span><br><span class="line">                                &quot;requireReturnDescription&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;标记未写注释</span><br><span class="line">                &quot;no-warning-comments&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;terms&quot;: [</span><br><span class="line">                                        &quot;todo&quot;,</span><br><span class="line">                                        &quot;fixme&quot;,</span><br><span class="line">                                        &quot;any other term&quot;</span><br><span class="line">                                ],</span><br><span class="line">                                &quot;location&quot;: &quot;anywhere&quot;</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;curly&quot;: 0 &#x2F;&#x2F;if、else、while、for代码块用&#123;&#125;包围</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>eslint就是根据这个配置表来进行js语法校验的。</p>
+<h1 id="最后重启VSCode完成插件安装"><a href="#最后重启VSCode完成插件安装" class="headerlink" title="最后重启VSCode完成插件安装"></a>最后重启VSCode完成插件安装</h1><p>重启后控制台显示ESLint server is running说明插件已经生效，好啦接下来就愉快的写代码吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/10/12/VSCode-ESLint/">VSCode ESLint JS代码静态检测工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/10/12/VSCode-ESLint/" title="VSCode ESLint JS代码静态检测工具">https://blog.lifesli.com/2017/10/12/VSCode-ESLint/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/VSCode/" rel="tag"># VSCode</a>
+              <a href="/ja/tags/ESLint/" rel="tag"># ESLint</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/us-gitment/" rel="prev" title="给博客添加基于github-issue的评论系统">
+      <i class="fa fa-chevron-left"></i> 给博客添加基于github-issue的评论系统
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/web-quanzhan/" rel="next" title="《Web全栈工程师的自我修养》读书笔记">
+      《Web全栈工程师的自我修养》读书笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85ESLint%E6%8F%92%E4%BB%B6"><span class="nav-number">2.</span> <span class="nav-text">安装ESLint插件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85NPM%E4%BE%9D%E8%B5%96"><span class="nav-number">3.</span> <span class="nav-text">安装NPM依赖</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEeslint%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%88%B0%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95"><span class="nav-number">4.</span> <span class="nav-text">配置eslint配置文件到项目根目录</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E%E9%87%8D%E5%90%AFVSCode%E5%AE%8C%E6%88%90%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">5.</span> <span class="nav-text">最后重启VSCode完成插件安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/10/12/VSCode-ESLint/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/VSCode-ESLint/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/VSCode-ESLint/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e36e01b78aafd2b65f6cc29b79c72436',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/10/12/us-gitment/index.html b/ja/2017/10/12/us-gitment/index.html
new file mode 100644
index 0000000000..e749b6fc98
--- /dev/null
+++ b/ja/2017/10/12/us-gitment/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给博客添加基于github-issue的评论系统">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/10/12/us-gitment/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言上篇文章介绍了如何利用github+hexo+next制作一个博客系统，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-10-12T10:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/10/12/us-gitment/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>给博客添加基于github-issue的评论系统 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给博客添加基于github-issue的评论系统
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+<span id="more"></span>
+<h2 id="第一步-注册一个小程序（OAuth-Application）"><a href="#第一步-注册一个小程序（OAuth-Application）" class="headerlink" title="第一步 注册一个小程序（OAuth Application）"></a>第一步 注册一个小程序（OAuth Application）</h2><p>点击<a target="_blank" rel="noopener" href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a>注册</p>
+<ul>
+<li>Application name 应用名称 这里随便写，我写的就是gitment</li>
+<li>Homepage URL 主页地址，你可以写你的博客地址，我写的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+<li>Application description 应用描述，这里随便写点什么，反正是自己用。</li>
+<li>Authorization callback URL 这个比较重要，请填写你的博客地址，我的是<a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+</ul>
+<p>点击确定以后你会获得两个关键信息，下一步配置时会用到</p>
+<ul>
+<li>Client ID</li>
+<li>Client Secret</li>
+</ul>
+<h2 id="第二步-修改主题配置文件，添加gitment评论功能"><a href="#第二步-修改主题配置文件，添加gitment评论功能" class="headerlink" title="第二步 修改主题配置文件，添加gitment评论功能"></a>第二步 修改主题配置文件，添加gitment评论功能</h2><p>因为用的是next主题，所以配置文件地址如下：<br><strong>themes/next/_config.yml</strong></p>
+<h3 id="1、在其中添加"><a href="#1、在其中添加" class="headerlink" title="1、在其中添加:"></a>1、在其中添加:</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Gitment</span><br><span class="line"># Introduction: https:&#x2F;&#x2F;imsun.net&#x2F;posts&#x2F;gitment-introduction&#x2F;</span><br><span class="line">gitment:</span><br><span class="line">  enable: true</span><br><span class="line">  githubID: yourid &#x2F;&#x2F; 我的是lixuguang</span><br><span class="line">  repo: yourrepo &#x2F;&#x2F; 我的是lixuguang.github.io 必须跟githubID保持一致的用户名</span><br><span class="line">  ClientID: yourid &#x2F;&#x2F; 上面开通程序获得的ClientID</span><br><span class="line">  ClientSecret: yoursecret &#x2F;&#x2F; 上面开通程序获得的Client Secret</span><br><span class="line">  lazy: false &#x2F;&#x2F;是否需要点击展开评论才能可见评论，一般设置为false</span><br></pre></td></tr></table></figure>
+<p><strong>一定要注意空格，不然会报错的，别问我咋知道的</strong></p>
+<h3 id="2、然后在主题的配置语言环境的文件添加一句话"><a href="#2、然后在主题的配置语言环境的文件添加一句话" class="headerlink" title="2、然后在主题的配置语言环境的文件添加一句话"></a>2、然后在主题的配置语言环境的文件添加一句话</h3><p><code>en.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: Show comments from Gitment</span><br></pre></td></tr></table></figure>
+
+<p><code>zh-Hans.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gitmentbutton: 显示 Gitment 评论</span><br></pre></td></tr></table></figure>
+<p>如果是中文网站英文配置也可以不用写。</p>
+<h3 id="3、添加新的Dom结构"><a href="#3、添加新的Dom结构" class="headerlink" title="3、添加新的Dom结构"></a>3、添加新的Dom结构</h3><p><strong>修改主题layout/_partials/comments.swig</strong><br>在最后一个elseif分支后添加一个elseif分支：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% elseif theme.gitment.enable %&#125;</span><br><span class="line">       &#123;% if theme.gitment.lazy %&#125;</span><br><span class="line">         &lt;div onclick&#x3D;&quot;ShowGitment()&quot; id&#x3D;&quot;gitment-display-button&quot;&gt;&#123;&#123;  __(&#39;gitmentbutton&#39;) &#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot; style&#x3D;&quot;display:none&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% else %&#125;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig"><a href="#4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig" class="headerlink" title="4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig"></a>4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.gitment.enable %&#125;</span><br><span class="line">   &#123;% set owner &#x3D; theme.gitment.githubID %&#125;</span><br><span class="line">   &#123;% set repo &#x3D; theme.gitment.repo %&#125;</span><br><span class="line">   &#123;% set cid &#x3D; theme.gitment.ClientID %&#125;</span><br><span class="line">   &#123;% set cs &#x3D; theme.gitment.ClientSecret %&#125;</span><br><span class="line">   &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;style&#x2F;default.css&quot;&gt;</span><br><span class="line">   &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;dist&#x2F;gitment.browser.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% if not theme.gitment.lazy %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">               id: window.location.pathname, </span><br><span class="line">               owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">               repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">               oauth: &#123;</span><br><span class="line">                   client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                   client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">               &#125;&#125;);</span><br><span class="line">           gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% else %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           function ShowGitment()&#123;</span><br><span class="line">               document.getElementById(&quot;gitment-display-button&quot;).style.display &#x3D; &quot;none&quot;;</span><br><span class="line">               document.getElementById(&quot;gitment-container&quot;).style.display &#x3D; &quot;block&quot;;</span><br><span class="line">               var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">                   id: document.location.href, </span><br><span class="line">                   owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">                   repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">                   oauth: &#123;</span><br><span class="line">                       client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                       client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">                   &#125;&#125;);</span><br><span class="line">               gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">           &#125;</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% endif %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% include &#39;gitment.swig&#39; %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="在主题下source-css-common-components-third-party-目录下添加gitment-styl文件"><a href="#在主题下source-css-common-components-third-party-目录下添加gitment-styl文件" class="headerlink" title="在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件"></a>在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件</h3><p>此配置文件为gitment的样式文件，需要修改样式可以在这里进行书写，这里修改一下按钮样式，另外将聊天框于文章框样式统一</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">#gitment-display-button&#123;</span><br><span class="line">     display: inline-block;</span><br><span class="line">     padding: 0 15px;</span><br><span class="line">     color: #0a9caf;</span><br><span class="line">     cursor: pointer;</span><br><span class="line">     font-size: 14px;</span><br><span class="line">     border: 1px solid #0a9caf;</span><br><span class="line">     border-radius: 4px;</span><br><span class="line"> &#125;</span><br><span class="line"> #gitment-display-button:hover&#123;</span><br><span class="line">     color: #fff;</span><br><span class="line">     background: #0a9caf;</span><br><span class="line"> &#125;</span><br><span class="line">  #comments &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">    padding: 40px;</span><br><span class="line">    background: #fff;</span><br><span class="line">    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@import &quot;gitment&quot;;</span><br></pre></td></tr></table></figure>
+<p>经过以上操作，gitment就被引入到你的博客里了。</p>
+<p>现在就可以让大家对你写的文章进行评论啦，怎么样是不是又学到啦，喜欢我的文章就请关注我的github吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/10/12/us-gitment/">给博客添加基于github-issue的评论系统</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/10/12/us-gitment/" title="给博客添加基于github-issue的评论系统">https://blog.lifesli.com/2017/10/12/us-gitment/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/us-gitment/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" rel="prev" title="如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客">
+      <i class="fa fa-chevron-left"></i> 如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/VSCode-ESLint/" rel="next" title="VSCode ESLint JS代码静态检测工具">
+      VSCode ESLint JS代码静态检测工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5-%E6%B3%A8%E5%86%8C%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%88OAuth-Application%EF%BC%89"><span class="nav-number">1.1.</span> <span class="nav-text">第一步 注册一个小程序（OAuth Application）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5-%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%EF%BC%8C%E6%B7%BB%E5%8A%A0gitment%E8%AF%84%E8%AE%BA%E5%8A%9F%E8%83%BD"><span class="nav-number">1.2.</span> <span class="nav-text">第二步 修改主题配置文件，添加gitment评论功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E5%85%B6%E4%B8%AD%E6%B7%BB%E5%8A%A0"><span class="nav-number">1.2.1.</span> <span class="nav-text">1、在其中添加:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E7%84%B6%E5%90%8E%E5%9C%A8%E4%B8%BB%E9%A2%98%E7%9A%84%E9%85%8D%E7%BD%AE%E8%AF%AD%E8%A8%80%E7%8E%AF%E5%A2%83%E7%9A%84%E6%96%87%E4%BB%B6%E6%B7%BB%E5%8A%A0%E4%B8%80%E5%8F%A5%E8%AF%9D"><span class="nav-number">1.2.2.</span> <span class="nav-text">2、然后在主题的配置语言环境的文件添加一句话</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0%E6%96%B0%E7%9A%84Dom%E7%BB%93%E6%9E%84"><span class="nav-number">1.2.3.</span> <span class="nav-text">3、添加新的Dom结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81-%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Blayout-third-party-comments-%E7%9B%AE%E5%BD%95%E4%B8%8B%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6gitment-swig"><span class="nav-number">1.2.4.</span> <span class="nav-text">4、 在主题下layout&#x2F;_third-party&#x2F;comments&#x2F;目录下中添加文件gitment.swig</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E4%B8%BB%E9%A2%98%E4%B8%8Bsource-css-common-components-third-party-%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%B7%BB%E5%8A%A0gitment-styl%E6%96%87%E4%BB%B6"><span class="nav-number">1.2.5.</span> <span class="nav-text">在主题下source&#x2F;css&#x2F;_common&#x2F;components&#x2F;third-party&#x2F;目录下添加gitment.styl文件</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/10/12/us-gitment/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/us-gitment/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/us-gitment/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b91c9252d8865234396a48235753de7f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/10/12/web-quanzhan/index.html b/ja/2017/10/12/web-quanzhan/index.html
new file mode 100644
index 0000000000..80d3e97d8f
--- /dev/null
+++ b/ja/2017/10/12/web-quanzhan/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="《Web全栈工程师的自我修养》读书笔记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/10/12/web-quanzhan/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-10-12T17:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/10/12/web-quanzhan/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>《Web全栈工程师的自我修养》读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          《Web全栈工程师的自我修养》读书笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+<span id="more"></span>
+
+<h2 id="什么是全栈"><a href="#什么是全栈" class="headerlink" title="什么是全栈"></a>什么是全栈</h2><p>“全栈”是个外来词，翻译自英文full-stack，此处的栈指的是为了完成项目而使用的一系列技术的合集，不是堆栈概念中的栈。</p>
+<p>“全端”工程师是指能够完成pc端、移动端等多终端设备适配的情况</p>
+<h2 id="什么是全栈工程师"><a href="#什么是全栈工程师" class="headerlink" title="什么是全栈工程师"></a>什么是全栈工程师</h2><blockquote>
+<p>全栈工程师是指一个能够处理数据库、服务器、系统工程、客户端等所有工作的的工程师，根据项目不同，可能是移动栈、Web栈，或者原生应用程序栈。</p>
+</blockquote>
+<p>简单来说全栈工程师就是一个人能搞定一个项目，全能大神一样的人物。</p>
+<h2 id="一个Web产品典型的技术栈"><a href="#一个Web产品典型的技术栈" class="headerlink" title="一个Web产品典型的技术栈"></a>一个Web产品典型的技术栈</h2><blockquote>
+<p>服务器+数据库+服务器端编程语言+前端编程语言</p>
+</blockquote>
+<blockquote>
+<p>全栈工程师技术的兴起有两个重要原因：技术的发展和PaaS（Platform as a Service，平台即服务）服务的平台越来越多。</p>
+</blockquote>
+<h3 id="全栈框架———MEAN"><a href="#全栈框架———MEAN" class="headerlink" title="全栈框架———MEAN"></a>全栈框架———MEAN</h3><blockquote>
+<p>MongoDB-Express-AngularJs-Node.js<br>前后端采用一种编程语言JavaScript</p>
+</blockquote>
+<h2 id="全栈工程师的要求"><a href="#全栈工程师的要求" class="headerlink" title="全栈工程师的要求"></a>全栈工程师的要求</h2><h3 id="一专多长"><a href="#一专多长" class="headerlink" title="一专多长"></a>一专多长</h3><p>在一个领域里至少达到高级的级别，然后再去向上游或者下游延伸</p>
+<h3 id="关注商业目标"><a href="#关注商业目标" class="headerlink" title="关注商业目标"></a>关注商业目标</h3><p>公司聘请你是为了让你产生利润，并不关心你会什么，所以选择技术栈时要考虑的是如何降低公司的成本或者提高收入。</p>
+<h3 id="关注用户体验"><a href="#关注用户体验" class="headerlink" title="关注用户体验"></a>关注用户体验</h3><p>产品的最终目标是满足客户的需求，所以作为全栈工程师必须要关注用户体验。</p>
+<hr>
+<p>这是一些作为全栈工程师我整理出来的干货，这本书本身并不是一本技术性很强的书，倒像是一位过来人介绍些经验，适合刚入职场或者进入职场不久的人，在前端领域比较迷茫时看一看，书中介绍了作者读过的一些书，很有参考性，推荐大家阅读。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/10/12/web-quanzhan/">《Web全栈工程师的自我修养》读书笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年10月12日 - 17:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2017/10/12/web-quanzhan/" title="《Web全栈工程师的自我修养》读书笔记">https://blog.lifesli.com/2017/10/12/web-quanzhan/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/10/12/web-quanzhan/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/VSCode-ESLint/" rel="prev" title="VSCode ESLint JS代码静态检测工具">
+      <i class="fa fa-chevron-left"></i> VSCode ESLint JS代码静态检测工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2017/12/12/Git-Shell/" rel="next" title="Git的常用命令">
+      Git的常用命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88"><span class="nav-number">1.1.</span> <span class="nav-text">什么是全栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88"><span class="nav-number">1.2.</span> <span class="nav-text">什么是全栈工程师</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E4%B8%AAWeb%E4%BA%A7%E5%93%81%E5%85%B8%E5%9E%8B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">1.3.</span> <span class="nav-text">一个Web产品典型的技术栈</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E6%A1%86%E6%9E%B6%E2%80%94%E2%80%94%E2%80%94MEAN"><span class="nav-number">1.3.1.</span> <span class="nav-text">全栈框架———MEAN</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%9A%84%E8%A6%81%E6%B1%82"><span class="nav-number">1.4.</span> <span class="nav-text">全栈工程师的要求</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%B8%93%E5%A4%9A%E9%95%BF"><span class="nav-number">1.4.1.</span> <span class="nav-text">一专多长</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E5%95%86%E4%B8%9A%E7%9B%AE%E6%A0%87"><span class="nav-number">1.4.2.</span> <span class="nav-text">关注商业目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B3%E6%B3%A8%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C"><span class="nav-number">1.4.3.</span> <span class="nav-text">关注用户体验</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/10/12/web-quanzhan/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/10/12/web-quanzhan/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/10/12/web-quanzhan/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ff88db7c91ed50c44a85c96649f94b0f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2017/12/12/Git-Shell/index.html b/ja/2017/12/12/Git-Shell/index.html
new file mode 100644
index 0000000000..26e53a320e
--- /dev/null
+++ b/ja/2017/12/12/Git-Shell/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Git的常用命令">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2017/12/12/Git-Shell/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  指令表   指令 含义 备注    git add . 提示增加文件 .代表所有   git commit -m “说明内容” 提交到本地服务器    git status 显示修改信息    git pull 从网络服务器拉 更新最新版本    git push 上传最新版本    git branch 查看当前分支    git checkout develop">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-12-12T12:20:20.000Z">
+<meta property="article:modified_time" content="2019-12-31T10:38:57.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Git">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2017/12/12/Git-Shell/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Git的常用命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Git的常用命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2017/12/12/Git-Shell/">Git的常用命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2017年12月12日 - 12:20</p>
+      <p><span>最后更新:</span>2019年12月31日 - 10:38</p>
+      <p><span>原始链接:</span><a href="/ja/2017/12/12/Git-Shell/" title="Git的常用命令">https://blog.lifesli.com/2017/12/12/Git-Shell/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2017/12/12/Git-Shell/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Git/" rel="tag"># Git</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/10/12/web-quanzhan/" rel="prev" title="《Web全栈工程师的自我修养》读书笔记">
+      <i class="fa fa-chevron-left"></i> 《Web全栈工程师的自我修养》读书笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/27/Vue-Component-Communication/" rel="next" title="前端面试Vue篇：Vue组件通信的几种方式">
+      前端面试Vue篇：Vue组件通信的几种方式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8C%87%E4%BB%A4%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">指令表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2017/12/12/Git-Shell/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2017/12/12/Git-Shell/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2017/12/12/Git-Shell/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '60b7320ced8f8c9e5b36e96a6e4a96f3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/27/Actions/index.html b/ja/2019/12/27/Actions/index.html
new file mode 100644
index 0000000000..8ecb9dedfd
--- /dev/null
+++ b/ja/2019/12/27/Actions/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="巧妙利用Acitons进行博客的自动构建">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/27/Actions/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜Github Hexo 自动构建 这些个词，还真让我搜到了">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta property="article:tag" content="Github">
+<meta property="article:tag" content="Actions">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/27/Actions/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>巧妙利用Acitons进行博客的自动构建 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          巧妙利用Acitons进行博客的自动构建
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+<span id="more"></span>
+
+<h2 id="GitHub-Actions-是什么"><a href="#GitHub-Actions-是什么" class="headerlink" title="GitHub Actions 是什么"></a>GitHub Actions 是什么</h2><p>GitHub Actions 由 GitHub 官方推出的工作流工具。典型的应用场景应该是 CI/CD，类似 Travis 的用法。如果不知道 CI/CD&amp;Travis 感兴趣的建议去了解一下，下面不展开说明，直接说怎么用就好。</p>
+<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>在使用 <code>GitHub Actions</code> 之前我们先来看看我们有什么；<br>首先我们有一个放博客程序的地方，我这里是叫做 <code>blog-source</code> ，另外呢有一个通过 hexo g 创建出来的静态网站，为了存放它而建的另一个仓库，我这里是叫做<code>lixuguang.github.io</code>,也就是说我们现在是有这样两个仓库。<br>|仓库|作用|<br>|-|-|<br>|blog-source|放博客源代码|<br>|lixuguang.github.io|放博客生成代码|</p>
+<h2 id="生成密钥"><a href="#生成密钥" class="headerlink" title="生成密钥"></a>生成密钥</h2><p>因为 <code>GitHub Actions</code> 它需要访问我的 <code>blog-source</code> 仓库的代码所以必须要有密钥，密钥大家应该熟悉了，创建博客的时候也是创建了一个公钥和私钥用来在本地往 <code>lixuguang.github.io</code> 这个仓库提交代码<br>这里呢我们用下面的命令生成密钥。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -f ~&#x2F;.ssh&#x2F;github-actions-deploy # 连按三次回车即刻</span><br></pre></td></tr></table></figure>
+<p>命令执行完成后，我们会得到两个文件 <code>github-actions-deploy</code> 和 <code>github-actions-deploy.pub</code> 两个文件，第一个是私钥，第二个是公钥。<br>|名称|解释|<br>|-|-|<br>|github-actions-deploy|私钥|<br>|github-actions-deploy.pub|公钥|</p>
+<p>接下来的步骤一定要好好看，因为我在这个地方被卡住好多次，就是因为有的文章说的并不正确，或者至少是讲的不够仔细，这里我会仔细地说明一下。</p>
+<h2 id="配置-GitHub-仓库"><a href="#配置-GitHub-仓库" class="headerlink" title="配置 GitHub 仓库"></a>配置 GitHub 仓库</h2><h3 id="配置博客源代码仓库"><a href="#配置博客源代码仓库" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里的源代码是放在 <code>blog-source</code> 中，所以我现在要给源代码仓库配置<code>私钥</code>，配置过程如下：<br>打开 <code>blog-source</code> 仓库，选择 <code>settings</code>，然后选中 <code>secrets</code> ， 再点击 <code>Add new secrets</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Name|HEXO_DEPLOY_PRI（名称自动构建时有用）|<br>|Value|github-actions-deploy|</p>
+<h3 id="配置博客源代码仓库-1"><a href="#配置博客源代码仓库-1" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里生成的博客静态代码是放在 <code>lixuguang.github.io</code> 中，所以我现在要给静态代码仓库配置<code>公钥</code>，配置过程如下：<br>打开 <code>lixuguang.github.io</code>，选择 <code>settings</code>，然后选中 <code>keys</code>，再点击 <code>Add deploy key</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Title|HEXO_DEPLOY_PUB|<br>|Key|github-actions-deploy.pub|</p>
+<h2 id="编写-Actions-脚本"><a href="#编写-Actions-脚本" class="headerlink" title="编写 Actions 脚本"></a>编写 Actions 脚本</h2><p>经过上面一系列的准备操作，终于来到了编写自动构建脚本的环节，构建脚本如下，如果按照上面我做的操作一步步来的话，那么这一步你可以直接copy啦</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">name: Deploy Blog</span><br><span class="line"></span><br><span class="line">on: [push] # 当有新push时运行</span><br><span class="line"></span><br><span class="line">jobs:</span><br><span class="line">  build: # 一项叫做build的任务</span><br><span class="line"></span><br><span class="line">    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行</span><br><span class="line">    </span><br><span class="line">    steps:</span><br><span class="line">    - name: Checkout # 将仓库内master分支的内容下载到工作目录</span><br><span class="line">      uses: actions&#x2F;checkout@v1 # 脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;checkout</span><br><span class="line">      </span><br><span class="line">    - name: Use Node.js 10.x # 配置Node环境</span><br><span class="line">      uses: actions&#x2F;setup-node@v1 # 配置脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;setup-node</span><br><span class="line">      with:</span><br><span class="line">        node-version: &quot;10.x&quot;</span><br><span class="line">    </span><br><span class="line">    - name: Setup Hexo env</span><br><span class="line">      env:</span><br><span class="line">        HEXO_DEPLOY_PRI: $&#123;&#123; secrets.HEXO_DEPLOY_PRI &#125;&#125; # 这里是上面配置的私钥名称</span><br><span class="line">      run: |</span><br><span class="line">        # set up private key for deploy</span><br><span class="line">        mkdir -p ~&#x2F;.ssh&#x2F;</span><br><span class="line">        echo &quot;$HEXO_DEPLOY_PRI&quot; | tr -d &#39;\r&#39; &gt; ~&#x2F;.ssh&#x2F;id_rsa # 配置秘钥</span><br><span class="line">        chmod 600 ~&#x2F;.ssh&#x2F;id_rsa</span><br><span class="line">        ssh-keyscan github.com &gt;&gt; ~&#x2F;.ssh&#x2F;known_hosts</span><br><span class="line">        # set git infomation</span><br><span class="line">        git config --global user.name &#39;lixuguang&#39; # 换成你自己的名字</span><br><span class="line">        git config --global user.email &#39;lixuguang@gmail.com&#39; # 换成你自己的邮箱</span><br><span class="line">        # install dependencies</span><br><span class="line">        npm i -g hexo-cli # 安装hexo</span><br><span class="line">        npm i</span><br><span class="line">  </span><br><span class="line">    - name: Deploy</span><br><span class="line">      run: |</span><br><span class="line">        # publish</span><br><span class="line">        rm -rf .deploy_git # 如果上次构建失败这句命令会清除上次失败的代码</span><br><span class="line">        hexo generate &amp;&amp; hexo deploy # 执行部署程序</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<hr>
+<p>通过以上这些步骤的操作，如果没什么意外的话，博客的自动构建就完成了，之后只要你提交新的文章到博客源代码仓库，它将自动帮你生成并发送到博客的静态代码仓库，再也不用执行hexo g -d啦，如果这篇文章对你有用，欢迎follow我或打赏一下这篇文章，感谢阅读。</p>
+<p>ps：这里有个小坑需要注意一下，因为博客的皮肤也是另外一个git仓库，如果你在本地构建好用但是线上构建博客不显示了，需要注意下是不是皮肤没有上传到博客源码仓库，这里我遇到了，希望你不会因此困扰，拜拜~</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/27/Actions/">巧妙利用Acitons进行博客的自动构建</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/27/Actions/" title="巧妙利用Acitons进行博客的自动构建">https://blog.lifesli.com/2019/12/27/Actions/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Actions/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Hexo/" rel="tag"># Hexo</a>
+              <a href="/ja/tags/Github/" rel="tag"># Github</a>
+              <a href="/ja/tags/Actions/" rel="tag"># Actions</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/27/Vue-Component-Communication/" rel="prev" title="前端面试Vue篇：Vue组件通信的几种方式">
+      <i class="fa fa-chevron-left"></i> 前端面试Vue篇：Vue组件通信的几种方式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/30/begin-learn-java/" rel="next" title="重拾java开发技能">
+      重拾java开发技能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#GitHub-Actions-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">1.1.</span> <span class="nav-text">GitHub Actions 是什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E6%9C%9F%E5%87%86%E5%A4%87"><span class="nav-number">1.2.</span> <span class="nav-text">前期准备</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5"><span class="nav-number">1.3.</span> <span class="nav-text">生成密钥</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE-GitHub-%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.</span> <span class="nav-text">配置 GitHub 仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93"><span class="nav-number">1.4.1.</span> <span class="nav-text">配置博客源代码仓库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E5%AE%A2%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93-1"><span class="nav-number">1.4.2.</span> <span class="nav-text">配置博客源代码仓库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E5%86%99-Actions-%E8%84%9A%E6%9C%AC"><span class="nav-number">1.5.</span> <span class="nav-text">编写 Actions 脚本</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/27/Actions/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Actions/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Actions/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c7a2769fb2dcdb7e5a325af6c80e55c5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/27/Vue-Component-Communication/index.html b/ja/2019/12/27/Vue-Component-Communication/index.html
new file mode 100644
index 0000000000..c260602ddd
--- /dev/null
+++ b/ja/2019/12/27/Vue-Component-Communication/index.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端面试Vue篇：Vue组件通信的几种方式">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/27/Vue-Component-Communication/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-12-27T22:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="组件通信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/27/Vue-Component-Communication/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端面试Vue篇：Vue组件通信的几种方式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端面试Vue篇：Vue组件通信的几种方式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+<span id="more"></span>
+
+<h2 id="props和-emit"><a href="#props和-emit" class="headerlink" title="props和$emit"></a><code>props</code>和<code>$emit</code></h2><p>啥也不了解的小伙伴应该也知道这种方式吧，这是最最基础的通信方式了，父子组件通信基本都用它。父组件向子组件传递数据的时候通过prop传参，子组件中通过$emit传递给父组件，父组件在触发子组件$emit方法时得到子组件数据。实例如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 父组件 parent.vue</span><br><span class="line"></span><br><span class="line">Vue.compinent(&#39;parent&#39;, &#123;</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;p&gt;父组件&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;child :message&#x3D;&quot;message&quot; @getChildrenData&#x3D;&quot;getChildrenData&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;&#96;,</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            message:&#39;Hello lixuguang&#39;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        &#x2F;**</span><br><span class="line">        * 执行子组件触发的事件方法 </span><br><span class="line">        *&#x2F;</span><br><span class="line">        getChildrenData(data)&#123;</span><br><span class="line">            console.log(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 子组件 child.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">    props:[&#39;message&#39;], &#x2F;&#x2F; 得到父组件传过来的数据</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            childMessage: this.message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;childMessage&quot; @input&#x3D;&quot;emitParentData(childMessage)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitParentData(data) &#123;</span><br><span class="line">            this.$emit(&#39;getChildrenData&#39;, data) &#x2F;&#x2F; 父组件触发时给父组件传值</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;parent&gt;&lt;&#x2F;parent&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>父组件通过<code>message</code>属性将数据传递给子组件，并且通过<code>getChildrenData</code>事件来监听子组件出发的事件；</li>
+<li>子组件通过<code>props</code>获得父组件传过来的数据，并且通过<code>this.$emit</code>触发了<code>getChildrenData</code>事件;</li>
+</ol>
+<h2 id="attrs和-listeners"><a href="#attrs和-listeners" class="headerlink" title="$attrs和$listeners"></a><code>$attrs</code>和<code>$listeners</code></h2><p>前一种方法我们完成了父子组件的数据通信，那你有没有想过如果有多层嵌套的数据最上层要往最下层传值怎么办，前一种方法只能一层一层的往下传，可是这样太麻烦了，那么有没有什么方法能够一次传到你想要传到的位置呢，当然是有的，那就是接下来要说到的<code>$attrs</code>和<code>$listeners</code>。<br>假设我们现在有三层包含关系的组件，分别是level1/level2/level3，level1 &gt; level2 &gt; level3, <code>&gt;</code> 表示包含关系。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; level3.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level3&#39;, &#123;</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;$attrs.level3Message&quot; @input&#x3D;&quot;emitLevel3Data($attrs.level3Message)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel3Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel3Data&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level2.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level2&#39;, &#123;</span><br><span class="line">    props:[&#39;level2Message&#39;],</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level2Message:this.level2Message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;level2Message&quot; @input&#x3D;&quot;emitLevel2Data(level2Message)&quot;&gt;</span><br><span class="line">    &lt;level3 v-bind&#x3D;&#39;$attrs&#39; v-on&#x3D;&#39;$listenrs&#39;&gt;&lt;&#x2F;level3&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel2Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel2Data&#39;, data) </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level1.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level1&#39;, &#123;</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level3Message:&quot;I am Level3&quot;,</span><br><span class="line">            level2Message:&quot;I am Level2&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是level1中的内容&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;level2 :level2Message&#x3D;&quot;level2Message&quot; </span><br><span class="line">            :level3Message&#x3D;&quot;level3Message&quot;</span><br><span class="line">            @getLevel2Data&#x3D;&quot;getLevel2Data()&quot;</span><br><span class="line">            @getLevel3Data&#x3D;&quot;getLevel3Data()&quot;</span><br><span class="line">            &gt;&lt;&#x2F;level2&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        getLevel2Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level2的数据&#39;, data)</span><br><span class="line">        &#125;,</span><br><span class="line">        getLevel3Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level3的数据&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line"></span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;level1&gt;&lt;&#x2F;level1&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>level3组件能直接触发<code>getLevel3Data</code>是因为level2组件在调用level3组件时使用v-on绑定了$listeners属性；</li>
+<li>通过v-bind绑定了$attrs属性，level3组件可以直接获取到从level1传下来的props;</li>
+</ol>
+<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>父组件通过v-model传递值给子组件时，会自动传递一个value的props户型，在子组件中可以通过this.$emit(‘input’,val)自动修改v-model绑定的值。</p>
+<p>```</p>
+<p>未完待续~</p>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/27/Vue-Component-Communication/">前端面试Vue篇：Vue组件通信的几种方式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月27日 - 22:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/27/Vue-Component-Communication/" title="前端面试Vue篇：Vue组件通信的几种方式">https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" rel="tag"># 组件通信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2017/12/12/Git-Shell/" rel="prev" title="Git的常用命令">
+      <i class="fa fa-chevron-left"></i> Git的常用命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/27/Actions/" rel="next" title="巧妙利用Acitons进行博客的自动构建">
+      巧妙利用Acitons进行博客的自动构建 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#props%E5%92%8C-emit"><span class="nav-number">1.1.</span> <span class="nav-text">props和$emit</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#attrs%E5%92%8C-listeners"><span class="nav-number">1.2.</span> <span class="nav-text">$attrs和$listeners</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model"><span class="nav-number">1.3.</span> <span class="nav-text">v-model</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">1.4.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">1.5.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/27/Vue-Component-Communication/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/27/Vue-Component-Communication/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/27/Vue-Component-Communication/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '981a534867d3d38d7dcfe14de5d511a4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/30/begin-learn-java/index.html b/ja/2019/12/30/begin-learn-java/index.html
new file mode 100644
index 0000000000..e1b93beace
--- /dev/null
+++ b/ja/2019/12/30/begin-learn-java/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="重拾java开发技能">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/30/begin-learn-java/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-12-30T21:37:07.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/30/begin-learn-java/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>重拾java开发技能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          重拾java开发技能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+<span id="more"></span>
+
+<h2 id="公司这一年"><a href="#公司这一年" class="headerlink" title="公司这一年"></a>公司这一年</h2><p>最近对于自己的发展有一些迷茫，这一年公司前端的发展可以说是几经转折，我自己呢也一直在摇摆到底是做管理还是做技术，也参加了公司组织的部门经理的答辩，在部门前端的管理工作中也切实的了解到自己在为人处事方面不够圆润。所以目前也算是断了从事管理的念头，更希望能在技术上更进一步，前端目前看来已经不算是我的短板，而我的短板就是只会前端，一直在前端周围打转，其实如果不是看了那篇帖子，以及公司对专家岗位的要求，我可能还会更进一步在前端方向深入研究，但目前看更紧急的应该是补充一下后端的开发知识了，于是上周末开始我就开始了java的学习</p>
+<h2 id="为什么选择java"><a href="#为什么选择java" class="headerlink" title="为什么选择java"></a>为什么选择java</h2><p>为什么选择java作为后端入门，实话讲好多前端开发应该都会问这个问题，明明有更熟悉的nodejs可以作为后端技能进行扩展，我这里的理由是目前大多数公司的包括外面公司的开发人员大都还是以java作为主要语言作为后端编写的选择，另外前端js中好多的设计也是借鉴或者照搬了java中的一些思想，可以说在学习java过程中也会自然而然的提高对js的理解，更重要的是，java相对于其他语言来说资料也更多，上手也更容易，因为这些因素吧，最终我选择了java作为后端的主要学习目标。</p>
+<h2 id="怎么学习java"><a href="#怎么学习java" class="headerlink" title="怎么学习java"></a>怎么学习java</h2><p>java上大学的时候实际有系统的学过的，只是实习之后就再也没有使用过，如今9年过去了，java对于我可能也只剩下些零星的记忆，说实话刚一开始怎么学，从哪里学让我都有点无从下手，这里还要感谢一下我后端的开发伙伴，给了我很多很好的建议，看书的话大都是基础的太基础，实战的又经常忽略基础，最终我打算还是以视频教程2.5倍速快速过一遍java基础，然后再深入学习一下springboot框架，最后再进行实战，以此掌握java开发技能。</p>
+<h3 id="开始学习java"><a href="#开始学习java" class="headerlink" title="开始学习java"></a>开始学习java</h3><p>最终我选择了在B站上看黑马的java基础+实战课程的教学视频，说实话黑马的教学视频还是讲的很仔细的，老师讲的也很有趣，只是一节课10多分钟，只有一个知识点，对于我来说还是有些慢，所以我就开了2.5倍速加快进就这么着看，上周末两天时间，看了130多课，今天的内容记忆不太深刻，趁着不是那么忙又看了30多课，感觉收获还是满满的，接下来的每一天都会看上30课左右，希望自己能在3个月的时间完全上手java开发，相信我可以做到。</p>
+<h2 id="立个Flag"><a href="#立个Flag" class="headerlink" title="立个Flag"></a>立个Flag</h2><p>从今天起，每天都要把自己学习的进度做个总结，看看这一天自己收获了多少，希望30岁这年我重新起步，迈向更高更好的未来。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/30/begin-learn-java/">重拾java开发技能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月30日 - 21:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/30/begin-learn-java/" title="重拾java开发技能">https://blog.lifesli.com/2019/12/30/begin-learn-java/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/30/begin-learn-java/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/27/Actions/" rel="prev" title="巧妙利用Acitons进行博客的自动构建">
+      <i class="fa fa-chevron-left"></i> 巧妙利用Acitons进行博客的自动构建
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/weichat-h5-compatibility/" rel="next" title="微信的H5兼容方案">
+      微信的H5兼容方案 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AC%E5%8F%B8%E8%BF%99%E4%B8%80%E5%B9%B4"><span class="nav-number">1.1.</span> <span class="nav-text">公司这一年</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9java"><span class="nav-number">1.2.</span> <span class="nav-text">为什么选择java</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.</span> <span class="nav-text">怎么学习java</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0java"><span class="nav-number">1.3.1.</span> <span class="nav-text">开始学习java</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AB%8B%E4%B8%AAFlag"><span class="nav-number">1.4.</span> <span class="nav-text">立个Flag</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/30/begin-learn-java/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/30/begin-learn-java/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/30/begin-learn-java/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '4bb7c72634cb11d9d2fde4b66120fb1a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/31/GoodBye-2019/index.html b/ja/2019/12/31/GoodBye-2019/index.html
new file mode 100644
index 0000000000..16fd9e1c20
--- /dev/null
+++ b/ja/2019/12/31/GoodBye-2019/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:type" content="article">
+<meta property="og:title" content="再见2019">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/31/GoodBye-2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。 18年底定的计划学习技术1. 深入学习客户端开发（全年）18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+<meta property="article:published_time" content="2019-12-31T23:50:59.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="年终总结">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/31/GoodBye-2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>再见2019 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          再见2019
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/31/GoodBye-2019/">再见2019</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 23:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/31/GoodBye-2019/" title="再见2019">https://blog.lifesli.com/2019/12/31/GoodBye-2019/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/GoodBye-2019/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" rel="tag"># 年终总结</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/gitlab-cicd/" rel="prev" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      <i class="fa fa-chevron-left"></i> 基于 GitLab CI/CD 的自动化构建、发布实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/01/Hello-2020/" rel="next" title="你好2020">
+      你好2020 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#18%E5%B9%B4%E5%BA%95%E5%AE%9A%E7%9A%84%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">18年底定的计划</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E6%8A%80%E6%9C%AF"><span class="nav-number">2.1.</span> <span class="nav-text">学习技术</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%88%E5%85%A8%E5%B9%B4%EF%BC%89"><span class="nav-number">2.1.1.</span> <span class="nav-text">1. 深入学习客户端开发（全年）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B43%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.2.</span> <span class="nav-text">2. 学习前端自动化测试相关知识（2019年3月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1TS-%EF%BC%882019%E5%B9%B45%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.3.</span> <span class="nav-text">3. 学习并掌握TS  （2019年5月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%AD%A6%E4%B9%A0%E5%B9%B6%E6%8E%8C%E6%8F%A1React%EF%BC%882019%E5%B9%B47%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.4.</span> <span class="nav-text">4. 学习并掌握React（2019年7月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E7%9A%84%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%882019%E5%B9%B49%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.5.</span> <span class="nav-text">5. 学习前端持续集成的相关知识（2019年9月前）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E5%AD%A6%E4%B9%A0Docker%E8%99%9A%E6%8B%9F%E5%8C%96%E6%8A%80%E6%9C%AF%EF%BC%88-2019%E5%B9%B410%E6%9C%88%E5%89%8D%EF%BC%89"><span class="nav-number">2.1.6.</span> <span class="nav-text">6. 学习Docker虚拟化技术（ 2019年10月前）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B4%E7%90%86%E8%AE%A1%E5%88%92"><span class="nav-number">2.2.</span> <span class="nav-text">整理计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%85%BB%E6%88%90%E5%86%99%E5%8D%9A%E5%AE%A2%E7%9A%84%E4%B9%A0%E6%83%AF%EF%BC%8C%E8%87%B3%E5%B0%912%E5%A4%A9%E4%B8%80%E7%AF%87%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%98%AF%E6%8A%80%E6%9C%AF%E5%8D%9A%E5%AE%A2%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%85%B6%E4%BB%96%E3%80%82"><span class="nav-number">2.2.1.</span> <span class="nav-text">1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%B0%86%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%8A%9F%E8%83%BD%E5%81%9A%E6%88%90%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%BC%80%E6%BA%90%E7%BB%99%E5%85%AC%E5%8F%B8%E4%BD%BF%E7%94%A8"><span class="nav-number">2.2.2.</span> <span class="nav-text">2. 将常用的方法和功能做成插件，开源给公司使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%BB%E4%B9%A6%E8%AE%A1%E5%88%92"><span class="nav-number">2.3.</span> <span class="nav-text">读书计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%AF%8F%E5%91%A8%E8%AF%BB%E5%AE%8C%E4%B8%80%E6%9C%AC%E4%B9%A6%EF%BC%8C%E5%B9%B6%E5%86%99%E4%B8%80%E7%AF%87%E8%AF%BB%E5%90%8E%E6%84%9F"><span class="nav-number">2.3.1.</span> <span class="nav-text">1. 每周读完一本书，并写一篇读后感</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%83%A8%E9%97%A8%E5%89%8D%E7%AB%AF%E8%AE%A1%E5%88%92"><span class="nav-number">2.4.</span> <span class="nav-text">部门前端计划</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A0%E5%BC%BA%E5%90%84%E8%AE%BE%E8%AE%A1%E7%BB%84%E5%89%8D%E7%AB%AF%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BA%A4%E6%B5%81"><span class="nav-number">2.4.1.</span> <span class="nav-text">加强各设计组前端之间的交流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E4%BF%B1%E4%B9%90%E9%83%A8%E6%8E%A8%E5%8A%A8"><span class="nav-number">2.4.2.</span> <span class="nav-text">前端俱乐部推动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%9B%E8%A1%8C%E6%A2%AF%E9%98%9F%E5%88%92%E5%88%86%E5%BB%BA%E8%AE%BE"><span class="nav-number">2.4.3.</span> <span class="nav-text">进行梯队划分建设</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E5%85%A5%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E5%B7%A5%E5%85%B7%E5%92%8C%E6%80%9D%E6%83%B3"><span class="nav-number">2.4.4.</span> <span class="nav-text">引入前端工程化工具和思想</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8F%90%E5%8D%87%E6%95%B4%E4%BD%93%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84%E8%83%BD%E5%8A%9B"><span class="nav-number">2.4.5.</span> <span class="nav-text">提升整体前端开发的能力</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E6%B4%BB%E7%9B%AE%E6%A0%87"><span class="nav-number">2.5.</span> <span class="nav-text">生活目标</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AF%8F%E5%A4%A9%E9%99%AA%E5%AD%A9%E5%AD%90%E8%AF%BB%E4%B9%A6%E4%B8%80%E5%B0%8F%E6%97%B6"><span class="nav-number">2.5.1.</span> <span class="nav-text">每天陪孩子读书一小时</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%8F%E8%82%A5"><span class="nav-number">2.5.2.</span> <span class="nav-text">减肥</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/31/GoodBye-2019/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/GoodBye-2019/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/GoodBye-2019/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1c0466dbfe20d9ee92b1e0c188695cd0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/31/gitlab-cicd/index.html b/ja/2019/12/31/gitlab-cicd/index.html
new file mode 100644
index 0000000000..b5dcb543b1
--- /dev/null
+++ b/ja/2019/12/31/gitlab-cicd/index.html
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="基于 GitLab CI&#x2F;CD 的自动化构建、发布实践">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/31/gitlab-cicd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI&#x2F;CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-12-31T08:22:22.000Z">
+<meta property="article:modified_time" content="2019-12-31T08:43:48.358Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GitLab">
+<meta property="article:tag" content="CI&#x2F;CD">
+<meta property="article:tag" content="自动构建">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/31/gitlab-cicd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>基于 GitLab CI/CD 的自动化构建、发布实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          基于 GitLab CI/CD 的自动化构建、发布实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2019-12-31 08:22:22 / 修正日：08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+<a id="more"></a>
+
+<h2 id="说一下目前公司的构建和发布流程"><a href="#说一下目前公司的构建和发布流程" class="headerlink" title="说一下目前公司的构建和发布流程"></a>说一下目前公司的构建和发布流程</h2><p>1、<strong><em>手动构建时代</em></strong>：开发人员在测试需要验证环境的时候，在本地执行打包构建命令，然后将包放到服务器上，整个过程30分钟左右。<br>2、<strong><em>自动构建时代</em></strong>目前公司的构建是要在Jekins中，首先是在Jekins中配置拉去代码的仓库地址和代码分支，写好构建的脚本，在需要构建时候进行构建，一次配置后构建全程只需要点一下构建时间长度跟项目代码需要下载的依赖时间有关，通常不超过5分钟，需要注意的是要在构建前同步一下代码版本<br><strong><em>划重点</em></strong><br>在原来的手动构建时代，代码是以开发本地的代码为准，代码版本很可能跟最新的代码有出入，而且依赖于开发的电脑设备，如果他请假了，那么就GG了；另外通过一次配置后整个构建的时间从30分钟降到了5分钟，一次节省25分钟，那么一个项目周期下节省的工时就非常可观了。</p>
+<h2 id="为什要使用GitLab-CI-CD进行构建"><a href="#为什要使用GitLab-CI-CD进行构建" class="headerlink" title="为什要使用GitLab CI/CD进行构建"></a>为什要使用GitLab CI/CD进行构建</h2><p>这里实际上没有太大的必要将公司的Jekins替换为GitLab的CI/CD进行自动构建，但是呢，因为公司本身采用的就是GitLab作为代码仓库管理代码，它本身又提供了CI/CD的功能，本着多学一点是一点的原则，我就花点时间研究一下它。</p>
+<h2 id="什么是-GitLab-CI-CD"><a href="#什么是-GitLab-CI-CD" class="headerlink" title="什么是 GitLab CI/CD"></a>什么是 GitLab CI/CD</h2><p>下面我就要开始把我了解到的GitLab CI/CD的使用方式说一下，从零开始搭建GitLab CI/CD。</p>
+<h3 id="1-简要介绍-GitLab-CI-CD"><a href="#1-简要介绍-GitLab-CI-CD" class="headerlink" title="1. 简要介绍 GitLab CI/CD"></a>1. 简要介绍 GitLab CI/CD</h3><p>代码提交到GitLab上后，满足指定条件之后会触发pipeline进行自动化构建、发布。<br><strong><em>pipeline</em></strong>可以理解为构建任务，里面可以包含多个流程，比如下载依赖、运行测试、编译、部署。<br>那么pipeline什么时候触发，分为几个流程，每个流程做什么，需要在项目的<strong><em>.gitlab-ci.yml</em></strong>文件中的定义。<br>这点呢跟Jekins里面实际上做的也是同样的事，在线下开发做构建时候也是做这些事，只是通过脚本之后这些事都可以交给计算机做了。</p>
+<h3 id="2-GitLab-CI-CD-整体流程"><a href="#2-GitLab-CI-CD-整体流程" class="headerlink" title="2. GitLab CI/CD 整体流程"></a>2. GitLab CI/CD 整体流程</h3><ul>
+<li>GitLab CI/CD 的 pipeline 具体流程和操作在 .gitlab-ci.yml 文件中申明。</li>
+<li>触发 pipeline 后，由 GitLab Runner 根据  .gitlab-ci.yml 文件运行。</li>
+<li>运行结束后将返回至 GitLab 系统。</li>
+</ul>
+<h4 id="2-1-gitlab-ci-yml-文件"><a href="#2-1-gitlab-ci-yml-文件" class="headerlink" title="2.1 .gitlab-ci.yml 文件"></a>2.1 .gitlab-ci.yml 文件</h4><p>.gitlab-ci.yml 文件是一个申明式文件，用于定义 GitLab CI/CD 流程分为几个阶段，每个阶段分别干什么。</p>
+<p>关于具体干什么、怎么干，主要使用命令行和脚本操作，稍后会在实践部分做细致的介绍。</p>
+<p>如果涉及一些逻辑的话，会使用脚本（shell）。</p>
+<h4 id="2-2-GitLab-Runner"><a href="#2-2-GitLab-Runner" class="headerlink" title="2.2 GitLab Runner"></a>2.2 GitLab Runner</h4><p>GitLab Runner 是 CI 的执行环境，负责执行 gitlab-ci.yml 文件，并将结果返回给 GitLab 系统。Runner 具体可以有多种形式，docker、虚拟机或 shell，在注册 runner 时选定方式。实际上就是运行脚本的容器环境。</p>
+<h2 id="3-从零搭建一个-GitLab-CI-CD-的基本步骤"><a href="#3-从零搭建一个-GitLab-CI-CD-的基本步骤" class="headerlink" title="3. 从零搭建一个 GitLab CI/CD 的基本步骤"></a>3. 从零搭建一个 GitLab CI/CD 的基本步骤</h2><p>上面介绍了一些GitLab构建的主要环节和名词概念，接下来我将给大家介绍一下如何从零搭建一个GitLab CI/CD，一起体验一把GitLab CI/CD的整个流程。</p>
+<h3 id="3-1-新建一个-GitLab-项目"><a href="#3-1-新建一个-GitLab-项目" class="headerlink" title="3.1 新建一个 GitLab 项目"></a>3.1 新建一个 GitLab 项目</h3><p>我这用的是公司的自有仓库，各位可以在开源GitLab上创建自己的项目</p>
+<h3 id="3-2-配置Runner"><a href="#3-2-配置Runner" class="headerlink" title="3.2 配置Runner"></a>3.2 配置Runner</h3><p>GitLab 提供了一些共享的Runner，我们可以不处理Runner，这里可以理解为，它提供了一些现成的脚本运行环境，不需要我们从头配置运行环境，so sweet～</p>
+<h3 id="3-3-新建-gitlab-ci-yml-文件"><a href="#3-3-新建-gitlab-ci-yml-文件" class="headerlink" title="3.3 新建 .gitlab-ci.yml 文件"></a>3.3 新建 .gitlab-ci.yml 文件</h3><ol>
+<li>拉取项目到本地</li>
+<li>在项目根目录新建 .gitlab-ci.yml 文件</li>
+<li>提交 .gitlab-ci.yml 文件</li>
+<li>在项目的 CI/CD 中，可以看到 CI/CD 的运行情况<br>这个过程应该没人不会吧，没技术含量的我们简单一提，实际上最重要的就是.gitlab-ci.yml文件中要怎么去写，示例说明文件如下：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; .gitlab-ci.yml 示例说明</span><br><span class="line"></span><br><span class="line">image: node</span><br><span class="line"># 定义 stages</span><br><span class="line">stages:</span><br><span class="line">  - build</span><br><span class="line">  - test</span><br><span class="line"># 定义 job</span><br><span class="line"> build 阶段:</span><br><span class="line">  stage: build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;build stage&quot;</span><br><span class="line"># 定义 job</span><br><span class="line">发布到测试环境:</span><br><span class="line">  stage: test</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;test stage&quot;</span><br></pre></td></tr></table></figure>
+
+</li>
+</ol>
+<h2 id="GitLab-CI-CD-实践"><a href="#GitLab-CI-CD-实践" class="headerlink" title="GitLab CI/CD 实践"></a>GitLab CI/CD 实践</h2><p>在实践部分，这里着重介绍 GitLab Runner 和 .gitlab-ci.yml 文件，主要的流程及遇到的问题和解决方案包含在 .gitlab-ci.yml 文件的介绍过程中。</p>
+<h3 id="1-GitLab-Runner"><a href="#1-GitLab-Runner" class="headerlink" title="1. GitLab Runner"></a>1. GitLab Runner</h3><p>GitLab Runner 一般由 GitLab 系统维护者管理，配置后，同类项目可以共享，一般不需要进行修改。这里不进行具体介绍，主要介绍下使用过程中的注意点，具体使用可参考 GitLab Runner 文档。（<a href="https://docs.gitlab.com.cn/runner/）" target="_blank" rel="noopener">https://docs.gitlab.com.cn/runner/）</a></p>
+<h4 id="1-1-GitLab-Runner-使用流程"><a href="#1-1-GitLab-Runner-使用流程" class="headerlink" title="1.1 GitLab Runner 使用流程"></a>1.1 GitLab Runner 使用流程</h4><ol>
+<li>下载 GitLab Runner</li>
+<li>注册 GitLab Runner</li>
+<li>使用 GitLab Runner</li>
+</ol>
+<h4 id="1-2-GitLab-Runner-注意点"><a href="#1-2-GitLab-Runner-注意点" class="headerlink" title="1.2 GitLab Runner 注意点"></a>1.2 GitLab Runner 注意点</h4><p>在使用 Runner 的过程中，我们遇到了一些问题，下面简要介绍问题及解决方案，不做具体介绍。</p>
+<h5 id="1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态"><a href="#1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态" class="headerlink" title="1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态"></a>1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</h5><p>错误信息是：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">This job is stuck, because you don’t have any active runners that can run this job</span><br></pre></td></tr></table></figure>
+<p>注册的 Runner，默认情况下，不会运用没有 <code>tag</code> 的 job，可以在 Settings→CI/CD→Runners Settings，去掉 Runner untagged jobs 即可。</p>
+<h5 id="1-2-2-GitLab-Runner-的类型"><a href="#1-2-2-GitLab-Runner-的类型" class="headerlink" title="1.2.2 GitLab Runner 的类型"></a>1.2.2 GitLab Runner 的类型</h5><p>有三种类型的 Runner，</p>
+<ul>
+<li>Shared Runners 在整个系统所有项目都可以使用</li>
+<li>Group Runners 注册后，同一个项目下的不同代码库共享</li>
+<li>Specific Runners 需要给项目单独配置，使用 Specific Runners 注意考虑是否需要关闭 Shared Runners、和 Group Runners。</li>
+</ul>
+<h5 id="1-2-3-在-GitLab-CI-中使用-docker"><a href="#1-2-3-在-GitLab-CI-中使用-docker" class="headerlink" title="1.2.3 在 GitLab CI 中使用 docker"></a>1.2.3 在 GitLab CI 中使用 docker</h5><p>如果部署使用的是docker方式，那么在部署时需要在 GitLab CI/CD 中使用 docker 打镜像发布。可以参考 Building Docker images with GitLab CI/CD（<a href="https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）</a></p>
+<h5 id="1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录"><a href="#1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录" class="headerlink" title="1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录"></a>1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录</h5><p>我们使用的 Runner executor 是 Dokcer，在 Dokcer volumes 中配置需要访问的目录。</p>
+<h3 id="2-gitlab-ci-yml-文件"><a href="#2-gitlab-ci-yml-文件" class="headerlink" title="2. .gitlab-ci.yml 文件"></a>2. .gitlab-ci.yml 文件</h3><p>.gitlab-ci.yml 详细的用法，可参考 GitLab CI/CD Pipeline Configuration Reference 文档（<a href="https://docs.gitlab.com/ee/ci/yaml/README.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/yaml/README.html）</a></p>
+<h4 id="2-1-gitlab-ci-yml-文件结构介绍"><a href="#2-1-gitlab-ci-yml-文件结构介绍" class="headerlink" title="2.1 .gitlab-ci.yml 文件结构介绍"></a>2.1 .gitlab-ci.yml 文件结构介绍</h4><ul>
+<li><code>image</code> 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp（内部 rsync 工具）。</li>
+<li><code>stages</code> 中定义了我们的 pipeline 分为以下几个过程:<ol>
+<li>下载依赖阶段 pre_build</li>
+<li>构建阶段 build</li>
+<li>发布阶段 deploy</li>
+</ol>
+</li>
+<li><code>stage</code> 申明当前的阶段，在 stages 中使用</li>
+<li><code>variables</code> 用于定义变量</li>
+<li><code>before_script</code> 执行 script 前的操作</li>
+<li><code>script</code> 当前 stage 需要执行的操作</li>
+<li><code>changes</code> 指定 stage 触发条件</li>
+<li><code>refs</code> 指定 stage 触发的分支</li>
+</ul>
+<p>下面具体看一下我们这个.gitlab-ci.yml文件实际的样子</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">image: registry.thunisoft.com&#x2F;gitlab-ci&#x2F;node:v1.8</span><br><span class="line"></span><br><span class="line">variables:</span><br><span class="line">  # $CI_PROJECT_PATH  ：项目id,用于项目唯一区分本项目与其它项目</span><br><span class="line">  # $CI_PROJECT_DIR   ：本地项目路径</span><br><span class="line">  # $PROCESS_PATH     ：临时文件目录(包括日志和一些临时文件)</span><br><span class="line">  NODE_MODULES_PATH: &#x2F;runner-cache&#x2F;frontend&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME&#x2F;node_modules</span><br><span class="line"></span><br><span class="line">stages:</span><br><span class="line">  - pre_build # 下载依赖阶段</span><br><span class="line">  - build # 构建阶段</span><br><span class="line">  - deploy # 测试发布阶段</span><br><span class="line"></span><br><span class="line"># 下载依赖:</span><br><span class="line">  before_script: # 下载依赖前准备脚本</span><br><span class="line">    # 无 node_modules 文件时，新建 node_modules 文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkdir.sh $NODE_MODULES_PATH</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - cd webpack@lixuguang-project</span><br><span class="line"></span><br><span class="line">  stage: pre_build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;npm install&quot;</span><br><span class="line">    - npm install  --network-timeout 60000 # 安装依赖</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - webpack@lixuguang-project&#x2F;package.json</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 构建:</span><br><span class="line">  stage: build</span><br><span class="line">  variables:</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.sh</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME.sh</span><br><span class="line">  before_script:</span><br><span class="line">    # 建存此次 CI CI_COMMIT_SHA 的文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - rm -rf web&#x2F;share&#x2F;*</span><br><span class="line">    - cd webpack@lixuguang-projects</span><br><span class="line">  script:</span><br><span class="line">    # 缓存上次ci</span><br><span class="line">    - source $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - echo &quot;CI_COMMIT_BEFORE_SHA&#x3D;$CI_COMMIT_SHA&quot; &gt; $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - python3 ..&#x2F;ci&#x2F;build.py   # 编译</span><br><span class="line">    - &#x2F;bin&#x2F;bash ..&#x2F;ci&#x2F;commit.sh   # 提交编译结果</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - www_src&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 测试发布:</span><br><span class="line">  stage: deploy</span><br><span class="line">  variables:</span><br><span class="line">    PROCESS_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;deploy&#x2F;process&#x2F;$CI_JOB_ID  # 目录不要换，用于日志服务器获取日志展示</span><br><span class="line">  script:</span><br><span class="line">    - mkdir $PROCESS_PATH # 建立发布临时路径，存放发布配置中间文件和结果日志用</span><br><span class="line">    - dplt $CI_PROJECT_DIR&#x2F;.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR&#x2F;web&#x2F; $PROCESS_PATH</span><br><span class="line">    # dplt 发布yml配置</span><br><span class="line">    - echo &quot;发布完成，错误日志查看http:&#x2F;&#x2F;172.18.78.11:8089&#x2F;log?path&#x3D;&quot;$PROCESS_PATH</span><br><span class="line">    - echo &#96;ls $PROCESS_PATH&#x2F;*.log&#96;</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - web&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - test</span><br></pre></td></tr></table></figure>
+
+<h4 id="2-2-下载依赖阶段（pre-build-stage）"><a href="#2-2-下载依赖阶段（pre-build-stage）" class="headerlink" title="2.2 下载依赖阶段（pre_build stage）"></a>2.2 下载依赖阶段（pre_build stage）</h4><p>下载依赖的方案是：当 package.json 文件发生变化时，触发 pre_build stage，执行 npm install。下载的 node_modules 放在宿主机下，执行时通过软链获取依赖。</p>
+<h4 id="2-3-构建阶段（build-stage）"><a href="#2-3-构建阶段（build-stage）" class="headerlink" title="2.3 构建阶段（build stage）"></a>2.3 构建阶段（build stage）</h4><p>构建阶段，分为 3 部分</p>
+<ol>
+<li>diff 文件变化</li>
+<li>前端 build</li>
+<li>commit build 后结果</li>
+</ol>
+<h5 id="2-3-1-diff-文件变化"><a href="#2-3-1-diff-文件变化" class="headerlink" title="2.3.1 diff 文件变化"></a>2.3.1 diff 文件变化</h5><p>每次 CI 时，将当前 CI commit SHA（CI_COMMIT_SHA 变量）存在文件中，存为 CI_COMMIT_BEFORE_SHA 变量， diff 时，git diff 当前 CI 与上次 commit SHA 的变化。</p>
+<h5 id="2-3-2-前端-build"><a href="#2-3-2-前端-build" class="headerlink" title="2.3.2 前端 build"></a>2.3.2 前端 build</h5><p>根据 git diff 的变化情况，确定本次需要打包的内容。</p>
+<h5 id="2-3-3-commit-打包后生成的-HTML-文件"><a href="#2-3-3-commit-打包后生成的-HTML-文件" class="headerlink" title="2.3.3 commit 打包后生成的 HTML 文件"></a>2.3.3 commit 打包后生成的 HTML 文件</h5><p>在 GitLab CI/CD 提交代码时，使用 Git 凭证存储，提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档(<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8" target="_blank" rel="noopener">https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8</a>)</p>
+<h4 id="2-4-发布阶段（deploy-stage）"><a href="#2-4-发布阶段（deploy-stage）" class="headerlink" title="2.4 发布阶段（deploy stage）"></a>2.4 发布阶段（deploy stage）</h4><p>发布阶段，使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。</p>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>以上就是GitLab CI/CD的整个理论到实践的全部过程，实现之后你就可以解放双手了，是不是超爽。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p>持续集成是什么？(<a href="http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html</a>)</p>
+<p>什么是 CI/CD？(<a href="https://www.redhat.com/zh/topics/devops/what-is-ci-cd" target="_blank" rel="noopener">https://www.redhat.com/zh/topics/devops/what-is-ci-cd</a>)</p>
+<p>GitLab Docs(<a href="https://docs.gitlab.com/" target="_blank" rel="noopener">https://docs.gitlab.com/</a>)</p>
+<p>Introduction to CI/CD with GitLab(<a href="https://docs.gitlab.com/ee/ci/introduction/" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/introduction/</a>)</p>
+<p>用 GitLab CI 进行持续集成(<a href="https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/" target="_blank" rel="noopener">https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/</a>)</p>
+<p>如何实现前端工程的持续集成与持续部署？(<a href="https://www.zhihu.com/question/60194439" target="_blank" rel="noopener">https://www.zhihu.com/question/60194439</a>)</p>
+<p>基于 GitLab CI 的前端工程CI/CD实践(<a href="https://github.com/giscafer/front-end-manual/issues/27" target="_blank" rel="noopener">https://github.com/giscafer/front-end-manual/issues/27</a>)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/31/gitlab-cicd/">基于 GitLab CI/CD 的自动化构建、发布实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 08:22</p>
+      <p><span>最后更新:</span>2019年12月31日 - 08:43</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/31/gitlab-cicd/" title="基于 GitLab CI/CD 的自动化构建、发布实践">https://blog.lifesli.com/2019/12/31/gitlab-cicd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/gitlab-cicd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/GitLab/" rel="tag"># GitLab</a>
+              <a href="/ja/tags/CI-CD/" rel="tag"># CI/CD</a>
+              <a href="/ja/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" rel="tag"># 自动构建</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/weichat-h5-compatibility/" rel="prev" title="微信的H5兼容方案">
+      <i class="fa fa-chevron-left"></i> 微信的H5兼容方案
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/GoodBye-2019/" rel="next" title="再见2019">
+      再见2019 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%B4%E4%B8%80%E4%B8%8B%E7%9B%AE%E5%89%8D%E5%85%AC%E5%8F%B8%E7%9A%84%E6%9E%84%E5%BB%BA%E5%92%8C%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B"><span class="nav-number">1.1.</span> <span class="nav-text">说一下目前公司的构建和发布流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E8%A6%81%E4%BD%BF%E7%94%A8GitLab-CI-CD%E8%BF%9B%E8%A1%8C%E6%9E%84%E5%BB%BA"><span class="nav-number">1.2.</span> <span class="nav-text">为什要使用GitLab CI&#x2F;CD进行构建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-GitLab-CI-CD"><span class="nav-number">1.3.</span> <span class="nav-text">什么是 GitLab CI&#x2F;CD</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D-GitLab-CI-CD"><span class="nav-number">1.3.1.</span> <span class="nav-text">1. 简要介绍 GitLab CI&#x2F;CD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-GitLab-CI-CD-%E6%95%B4%E4%BD%93%E6%B5%81%E7%A8%8B"><span class="nav-number">1.3.2.</span> <span class="nav-text">2. GitLab CI&#x2F;CD 整体流程</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-GitLab-Runner"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">2.2 GitLab Runner</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E4%BB%8E%E9%9B%B6%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-CI-CD-%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">3. 从零搭建一个 GitLab CI&#x2F;CD 的基本步骤</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA-GitLab-%E9%A1%B9%E7%9B%AE"><span class="nav-number">1.4.1.</span> <span class="nav-text">3.1 新建一个 GitLab 项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E9%85%8D%E7%BD%AERunner"><span class="nav-number">1.4.2.</span> <span class="nav-text">3.2 配置Runner</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%96%B0%E5%BB%BA-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.3.</span> <span class="nav-text">3.3 新建 .gitlab-ci.yml 文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GitLab-CI-CD-%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.5.</span> <span class="nav-text">GitLab CI&#x2F;CD 实践</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-GitLab-Runner"><span class="nav-number">1.5.1.</span> <span class="nav-text">1. GitLab Runner</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-1-GitLab-Runner-%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B"><span class="nav-number">1.5.1.1.</span> <span class="nav-text">1.1 GitLab Runner 使用流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#1-2-GitLab-Runner-%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="nav-number">1.5.1.2.</span> <span class="nav-text">1.2 GitLab Runner 注意点</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-1-%E9%85%8D%E7%BD%AE-Runner-%E5%90%8E%EF%BC%8Cpush-%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%87%BA%E5%8F%91%E4%BA%86-pipeline%EF%BC%8C%E4%BD%86%E4%B8%80%E7%9B%B4%E5%A4%84%E4%BA%8EPending%E7%8A%B6%E6%80%81"><span class="nav-number">1.5.1.2.1.</span> <span class="nav-text">1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-2-GitLab-Runner-%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.5.1.2.2.</span> <span class="nav-text">1.2.2 GitLab Runner 的类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-3-%E5%9C%A8-GitLab-CI-%E4%B8%AD%E4%BD%BF%E7%94%A8-docker"><span class="nav-number">1.5.1.2.3.</span> <span class="nav-text">1.2.3 在 GitLab CI 中使用 docker</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-4-%E5%9C%A8-GitLab-CI-CD-%E4%B8%AD%E8%AE%BF%E9%97%AE-Runner-%E5%AE%BF%E4%B8%BB%E6%9C%BA%E7%9B%AE%E5%BD%95"><span class="nav-number">1.5.1.2.4.</span> <span class="nav-text">1.2.4 在 GitLab CI&#x2F;CD 中访问 Runner 宿主机目录</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-gitlab-ci-yml-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.</span> <span class="nav-text">2. .gitlab-ci.yml 文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-gitlab-ci-yml-%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.5.2.1.</span> <span class="nav-text">2.1 .gitlab-ci.yml 文件结构介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-%E4%B8%8B%E8%BD%BD%E4%BE%9D%E8%B5%96%E9%98%B6%E6%AE%B5%EF%BC%88pre-build-stage%EF%BC%89"><span class="nav-number">1.5.2.2.</span> <span class="nav-text">2.2 下载依赖阶段（pre_build stage）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-%E6%9E%84%E5%BB%BA%E9%98%B6%E6%AE%B5%EF%BC%88build-stage%EF%BC%89"><span class="nav-number">1.5.2.3.</span> <span class="nav-text">2.3 构建阶段（build stage）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-1-diff-%E6%96%87%E4%BB%B6%E5%8F%98%E5%8C%96"><span class="nav-number">1.5.2.3.1.</span> <span class="nav-text">2.3.1 diff 文件变化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-2-%E5%89%8D%E7%AB%AF-build"><span class="nav-number">1.5.2.3.2.</span> <span class="nav-text">2.3.2 前端 build</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-3-3-commit-%E6%89%93%E5%8C%85%E5%90%8E%E7%94%9F%E6%88%90%E7%9A%84-HTML-%E6%96%87%E4%BB%B6"><span class="nav-number">1.5.2.3.3.</span> <span class="nav-text">2.3.3 commit 打包后生成的 HTML 文件</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-4-%E5%8F%91%E5%B8%83%E9%98%B6%E6%AE%B5%EF%BC%88deploy-stage%EF%BC%89"><span class="nav-number">1.5.2.4.</span> <span class="nav-text">2.4 发布阶段（deploy stage）</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.7.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/31/gitlab-cicd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/gitlab-cicd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/gitlab-cicd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fcfcf3acee041a47c5994bc5aa2d7d3e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2019/12/31/weichat-h5-compatibility/index.html b/ja/2019/12/31/weichat-h5-compatibility/index.html
new file mode 100644
index 0000000000..156ca71e8e
--- /dev/null
+++ b/ja/2019/12/31/weichat-h5-compatibility/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="微信的H5兼容方案">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2019/12/31/weichat-h5-compatibility/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-12-31T01:37:08.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="兼容性问题">
+<meta property="article:tag" content="微信">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2019/12/31/weichat-h5-compatibility/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>微信的H5兼容方案 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          微信的H5兼容方案
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+<span id="more"></span>
+
+<h2 id="1、ios端兼容input光标的高度"><a href="#1、ios端兼容input光标的高度" class="headerlink" title="1、ios端兼容input光标的高度"></a>1、ios端兼容input光标的高度</h2><p><em><strong>bug描述：</strong></em><br>这个问题只出现在苹果手机上，在安卓手机上显示没有问题，可以说是非常诡异，简单描述一下就是在input输入框聚焦时，光标大小应该跟字号一直，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。<br><em><strong>分析：</strong></em><br>说来主要是习惯导致的问题，通常我们习惯将height和line-height设置成一样的值，这个时候input光标就会整个变得很大。<br><em><strong>解决：</strong></em><br>实际上解决方案也很简单，就是不设置行高，通过padding来控制输入内容与外框的距离。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; less代码</span><br><span class="line">.input-x&#123;</span><br><span class="line">	height:40px;</span><br><span class="line">	&#x2F;&#x2F; line-height:40px; &#x2F;&#x2F; 此行注释掉</span><br><span class="line">	.input-inline&#123;</span><br><span class="line">		padding: 10px 0;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这样做问题就解决了。</p>
+<h2 id="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"><a href="#2、ios端微信h5页面上下滑动会卡顿，页面会有缺失" class="headerlink" title="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"></a>2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</h2><p><em><strong>bug描述：</strong></em><br>没错又是ios端，当页面高度超过一屏，那么上下滑动时就会出现页面卡顿的情况，而且时有伴随内容不能全部显示的情况。<br><em><strong>分析：</strong></em><br>这里实际上是浏览器内核解析不同导致的问题，在Andriod设备上，微信调用的是Webkit内核，而ios中是使用了Safari的内核，Safari对于滚动事件（overflow-scrolling）会使用原生的控件。而webkit内核则会创建一个UIScrollView来提供给子layer用以渲染。<br><em><strong>解决：</strong></em><br>在做样式重置时，加上下面这句话就能解决这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; css代码</span><br><span class="line">*&#123;</span><br><span class="line">	-webkit-overflow-scrolling: touch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>但是这个方案也有缺陷，就是页面中不能有使用absolute定位的元素，不然布局就错乱了。<br><em><strong>延伸：</strong></em><br>-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.</p>
+<ul>
+<li>auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。</li>
+<li>touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。</li>
+</ul>
+<h2 id="3、ios键盘唤起再收起，页面不会恢复原位"><a href="#3、ios键盘唤起再收起，页面不会恢复原位" class="headerlink" title="3、ios键盘唤起再收起，页面不会恢复原位"></a>3、ios键盘唤起再收起，页面不会恢复原位</h2><p><em><strong>bug描述：</strong></em><br>哎，对的还是ios，问题标题描述的比较清晰了，就是键盘弹出时，页面内容会整体上移，但是收起键盘时本应回归原位的不回去了。—_—|||<br><em><strong>分析：</strong></em><br>固定定位的元素，如果元素内input框聚焦的时候会弹出软键盘，软键盘会占用屏幕面积，失去焦点时软键盘消失，但是仍会占用，页面就会不能恢复原状，也就导致input框不能再次输入了。<br><em><strong>解决：</strong></em><br>在input失去焦点键盘收起时，写一个监听事件，事例代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeBlur()&#123;</span><br><span class="line">	let ua &#x3D; navigator.userAgent; &#x2F;&#x2F; 获取用户代理</span><br><span class="line">	let app &#x3D; navigator.appVersion; &#x2F;&#x2F; 获取客户端版本信息</span><br><span class="line">	let isIos &#x3D; ua.match(&#x2F;i[^;]+;( U;)? CPU.+Mac OS X&#x2F;); &#x2F;&#x2F; 判断是否是Ios设备</span><br><span class="line">	if(isIos)&#123;</span><br><span class="line">		setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">			const scrollHeight &#x3D; document.documentElement.scrollTop || document.body.scrollTop || 0</span><br><span class="line">			window.scrollTop(0,Math.max(scrollHeight - 1), 0)</span><br><span class="line">		&#125;,100)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>延伸：</strong></em><br>在iso的微信开发中，页面元素如果用到了position: fixed进行定位，那么键盘收起时，就会被顶上去，第三方输入法也不例外。</p>
+<h2 id="4、Android弹出键盘遮挡文本输入框"><a href="#4、Android弹出键盘遮挡文本输入框" class="headerlink" title="4、Android弹出键盘遮挡文本输入框"></a>4、Android弹出键盘遮挡文本输入框</h2><p><em><strong>bug描述：</strong></em><br>刚才说的问题都是Ios端的，实际上Android上也有挺多坑，上面讲到Ios上输入框弹出键盘的问题后，Android中实际也有，只是现象不同；Andriod中弹出键盘后页面不会向上滑动，但是如果输入框在底部的话会直接被挡住。。。<br><em><strong>分析：</strong></em><br>很坑，因为Andriod中输入框focus后，并不会向上滑动，如果靠下就会被挡住。。<br><em><strong>解决：</strong></em><br>实际上跟Ios上处理差不多的方案，代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeFocus()&#123;</span><br><span class="line">   let ua &#x3D; navigator.userAgent;</span><br><span class="line">	 let app &#x3D; navigator.appVersion;</span><br><span class="line">   let isAndroid &#x3D; u.indexOf(&#39;Android&#39;) &gt; -1 || u.indexOf(&#39;Linux&#39;) &gt; -1;</span><br><span class="line">   if(isAndroid)&#123;</span><br><span class="line">      setTimeout(function() &#123;</span><br><span class="line">      document.activeElement.scrollIntoViewIfNeeded();</span><br><span class="line">      document.activeElement.scrollIntoView();</span><br><span class="line">      &#125;, 500);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>扩展</strong></em><br>Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动</p>
+<h2 id="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"><a href="#5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败" class="headerlink" title="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"></a>5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</h2><p><em><strong>bug描述：</strong></em><br>Ios的问题真的挺多的。。。</p>
+<ul>
+<li>在分享页面给A时，没问题，A把链接分享给B的时候就跳转到首页了；</li>
+<li>使用Vue-router跳转到第二个页面在分享时候，分享失败；<br>以上两个问题在Android上均没有问题。</li>
+</ul>
+<p><em><strong>分析：</strong></em><br>jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&amp;isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数<br><em><strong>解决：</strong></em></p>
+<ul>
+<li>可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功</li>
+<li>把入口地址保存在本地，等需要获取签名的时候再取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！（还没测试，有点low）</li>
+</ul>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>虽然微信H5方式开发想对来说成本比较低，但是有时候坑开始挺多的，但是微信原生开发又增加了成本，很矛盾，目前能做的就是尽量把踩过的坑都记下来，下次别再跳进去了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2019/12/31/weichat-h5-compatibility/">微信的H5兼容方案</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2019年12月31日 - 01:37</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2019/12/31/weichat-h5-compatibility/" title="微信的H5兼容方案">https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" rel="tag"># 兼容性问题</a>
+              <a href="/ja/tags/%E5%BE%AE%E4%BF%A1/" rel="tag"># 微信</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/30/begin-learn-java/" rel="prev" title="重拾java开发技能">
+      <i class="fa fa-chevron-left"></i> 重拾java开发技能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/gitlab-cicd/" rel="next" title="基于 GitLab CI/CD 的自动化构建、发布实践">
+      基于 GitLab CI/CD 的自动化构建、发布实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1%E3%80%81ios%E7%AB%AF%E5%85%BC%E5%AE%B9input%E5%85%89%E6%A0%87%E7%9A%84%E9%AB%98%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">1、ios端兼容input光标的高度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2%E3%80%81ios%E7%AB%AF%E5%BE%AE%E4%BF%A1h5%E9%A1%B5%E9%9D%A2%E4%B8%8A%E4%B8%8B%E6%BB%91%E5%8A%A8%E4%BC%9A%E5%8D%A1%E9%A1%BF%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%BC%9A%E6%9C%89%E7%BC%BA%E5%A4%B1"><span class="nav-number">1.2.</span> <span class="nav-text">2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3%E3%80%81ios%E9%94%AE%E7%9B%98%E5%94%A4%E8%B5%B7%E5%86%8D%E6%94%B6%E8%B5%B7%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%B8%8D%E4%BC%9A%E6%81%A2%E5%A4%8D%E5%8E%9F%E4%BD%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3、ios键盘唤起再收起，页面不会恢复原位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4%E3%80%81Android%E5%BC%B9%E5%87%BA%E9%94%AE%E7%9B%98%E9%81%AE%E6%8C%A1%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">1.4.</span> <span class="nav-text">4、Android弹出键盘遮挡文本输入框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5%E3%80%81Vue%E4%B8%AD%E8%B7%AF%E7%94%B1%E4%BD%BF%E7%94%A8hash%E6%A8%A1%E5%BC%8F%EF%BC%8C%E5%88%86%E4%BA%AB%E6%97%B6Android%E5%8F%AF%E5%88%86%E4%BA%AB%E6%88%90%E5%8A%9F%EF%BC%8CIos%E7%AB%AF%E5%88%86%E4%BA%AB%E5%A4%B1%E8%B4%A5"><span class="nav-number">1.5.</span> <span class="nav-text">5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">1.6.</span> <span class="nav-text">写在最后</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2019/12/31/weichat-h5-compatibility/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2019/12/31/weichat-h5-compatibility/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2019/12/31/weichat-h5-compatibility/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a1a7460a6dc7166323a24eed71939603',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/01/Hello-2020/index.html b/ja/2020/01/01/Hello-2020/index.html
new file mode 100644
index 0000000000..193e74d5fd
--- /dev/null
+++ b/ja/2020/01/01/Hello-2020/index.html
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:type" content="article">
+<meta property="og:title" content="你好2020">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/01/Hello-2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  2020元旦伊始时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-01T10:50:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/01/Hello-2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>你好2020 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          你好2020
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/01/Hello-2020/">你好2020</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月01日 - 10:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/01/Hello-2020/" title="你好2020">https://blog.lifesli.com/2020/01/01/Hello-2020/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/01/Hello-2020/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2019/12/31/GoodBye-2019/" rel="prev" title="再见2019">
+      <i class="fa fa-chevron-left"></i> 再见2019
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-dataType/" rel="next" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#2020%E5%85%83%E6%97%A6%E4%BC%8A%E5%A7%8B"><span class="nav-number">1.</span> <span class="nav-text">2020元旦伊始</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%83%E6%97%A6%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">2.</span> <span class="nav-text">元旦执行计划</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92"><span class="nav-number">3.</span> <span class="nav-text">执行计划</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/01/Hello-2020/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/01/Hello-2020/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/01/Hello-2020/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8b25c1c34c47a1e556abc2288a351b37',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/21-Day-Challenge-01/index.html b/ja/2020/01/02/21-Day-Challenge-01/index.html
new file mode 100644
index 0000000000..de051f2832
--- /dev/null
+++ b/ja/2020/01/02/21-Day-Challenge-01/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/21-Day-Challenge-01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T12:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/21-Day-Challenge-01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+<span id="more"></span>
+
+<h1 id="1月份21天主题挑战之灵感Inspiration"><a href="#1月份21天主题挑战之灵感Inspiration" class="headerlink" title="1月份21天主题挑战之灵感Inspiration"></a>1月份21天主题挑战之灵感Inspiration</h1><blockquote>
+<p>设定一个挑战主题，让自己更富有创造力，连续21天挑战，让灵感乍现，唤醒天赋。</p>
+</blockquote>
+<h1 id="第一天-Day-1-写下自己期待中的生平"><a href="#第一天-Day-1-写下自己期待中的生平" class="headerlink" title="第一天 Day 1 写下自己期待中的生平"></a>第一天 Day 1 写下自己期待中的生平</h1><p>看到这个题目之后，我闭上了眼睛，努力的回想我自己曾经的梦想是什么，什么时候丢掉了梦想，儿时的梦想，上学时的梦想，长大以后的梦想，现在的梦想，我努力回想了好久好久，儿时的梦想我想起来了，上学时的梦想我想起来了，长大后的梦想我也想起来了，但是我没能一下子找到我现在的梦想，也许现在说梦想有些奢侈，也许也有点贴不上今天的主题期待中的人生，我不太会写文章，但是想到哪里写哪里吧，我先写下我之前的那些个梦想。</p>
+<h2 id="小时候的梦想-成为科学家"><a href="#小时候的梦想-成为科学家" class="headerlink" title="小时候的梦想-成为科学家"></a>小时候的梦想-成为科学家</h2><p>小时候的梦想说出来很简单，但是是那么真诚，真诚就容易打动人，说实话我记性不是太好，已经忘掉了小时候的梦想，所以我问了我妈，我妈笑话我，说我咋不记得小时候那伟大的梦想了，妈妈说我儿时的梦想是当科学家，那会应该是上小学吧，妈妈说学校老师让写作文，标题就是我的梦想，我的作文里写的是成为科学家，这个科学家不像是别人写的，比如造火箭，造大炮又或者是造卫星造原子弹，我的梦想现在说起来与其说是科学家，不如说是药剂师更贴切，妈妈笑着跟我说我当时的梦想是做一个科学家，要研究出来一种长生不老的药，然后让爸爸妈妈吃下以后就可以永远健康年轻，妈妈说那个时候她总逗我，看到路上漂亮的阿姨就会问我，那个阿姨漂亮么，起初我会说漂亮，然后妈妈就会说那让她给你当妈妈好不好，我呢会说不好，妈妈说后来她再问的时候，我就再也不会说我要漂亮阿姨当妈妈的话了，我现在想想也许就是那时，就是因为发现妈妈越来越胖，辛苦操劳后年轻也渐渐不在我才有了这个想法吧，说实话上小学期间我一直认为自己长大能够成为一个科学家，能够造出那长生不老的药让爸妈吃下，这样我就再也不会需要一个漂亮阿姨当妈妈了。我那时希望快快长大，长大了以后我就能做科学家了。</p>
+<p>上了初中高中以后，也许是进了大城市，也许是长大了，我知道了原来的梦想可能有些遥远，学业的压力让我有些透不过气，从海岛到城市，落后了3年的时间，我通过补习班慢慢追赶，终于能够追到了班级还算靠前的位置，那个时候我的梦想很小，也很简单，那就是考个好大学找个好工作，让爸爸妈妈早点不用那么操劳，早点享福。</p>
+<h2 id="18岁的梦想-—-找个好工作，让爸妈早点享福"><a href="#18岁的梦想-—-找个好工作，让爸妈早点享福" class="headerlink" title="18岁的梦想 — 找个好工作，让爸妈早点享福"></a>18岁的梦想 — 找个好工作，让爸妈早点享福</h2><p>努力的学习，懵懂的感情，初中4年+高中3年的生活，最终我并没能特别出色的考上985/211大学，而是上了离家只有1小时车程的大外，学了计算机加日语英语，学费不便宜，每年16000，说实话没自己工作的时候不知道这16000对于一个下岗自己在家开小卖店的父母是多大的负担，工作后我才终于知道这笔钱有多少。好在原来在爸爸单位的时候接触电脑还算比较早，而我对这个新鲜玩意也算是感兴趣，大学学业上并没给我带来太大的压力，但是我也确实不是个聪明的孩子，日语仅仅过了N2，而英语则一直只是CET-4，现在回想起来，原来应该多努努力，也许现在的生活就会更好了，多想回到过去跟自己说，你要努力啊！一晃4年的大学生活就结束了，这时我终于离开了父母身边，只身去往了大城市北京，开启了我的工作生涯。</p>
+<h2 id="20岁的人生-—-多挣钱，快速成长"><a href="#20岁的人生-—-多挣钱，快速成长" class="headerlink" title="20岁的人生 — 多挣钱，快速成长"></a>20岁的人生 — 多挣钱，快速成长</h2><p>工作了以后，我就像海绵一样不断的吸收着周围的水分，学习工作中需要的技能，学习如何才能让领导器重，学习如何才能快速积累人生的财富，因为我想着，想着能快快独立反哺我的爸妈。20岁，我跟媳妇儿谈了场异地的恋爱，后来她到北京找我，再后来我们就一起回了大连。北京是个大城市，大的有时候让人迷茫，虽然工作机会比较多，但是租房的压力，环境的恶劣，家里的呼唤，最终让我选择了回到我熟悉的城市，另外找了份工资不高的工作，我不满足，我想能成为顶天立地的男子汉，后来我就来到了现在的公司华宇，而且一待就是5年。</p>
+<h2 id="华宇的职业生涯-—-5年工作，9年经验"><a href="#华宇的职业生涯-—-5年工作，9年经验" class="headerlink" title="华宇的职业生涯 — 5年工作，9年经验"></a>华宇的职业生涯 — 5年工作，9年经验</h2><p>网上有个段子我记得，一个人面试拿出简历，工作时间是2年却写着3年工作经验，面试官问他是不是写错了，他答不是，因为加班加出来的。这算是对前公司的吐槽吧。</p>
+<p>来到大连华宇时，公司还不足120人，我所在的团队还是个交互组，只有三个人，前端的话只有我和另外一个刚毕业的大学生，记得刚来公司的第一年，我参与了140个项目的开发工作，现在想想这个数字有些惊人，但是因为只是些前端切图仔的工作，对我来说感觉难度并不大，不过还是要感谢刚开始这2年，让我的基础非常扎实，再后来公司引入了前后端分离，引入了Vue框架，越来越多的业务要写，数据处理要写，加班成了家常便饭，后面这三年，我几乎没有休过除了元旦和春节的任何法定节假日，每年5天的年假也几乎都没休成，说实话每次加班加到要崩溃时候，我都会想我到底为了啥这么拼命。要不我还是换一家比较轻松一点的工作吧，工资还能涨点。说实话这段时间工作就是生活的全部，每天到家都10点以后，到家老人孩子都睡了，有时候我都睡不着，想着我的生活难道就这样了么，我不甘心，不服输。很多人劝我别那么拼命，别把公司当成自己家的，只是个打工的而已，但是有时候想着下面还有那么多新人信任着我依赖着我，我就没法撒手不管。终于时间到了19年年底，5年来培养的前端团队最后还是没守护住，要拆到各项目团队了，一开始真的难以接受，不过公司领导层已经决定了，作为一线员工只能服从，我希望大家能够把心中的担忧都能消除掉，在新的团队里开启新的篇章，也许会有更好的发展，如果有一天离开了华宇，也要江湖相望，常聚聚。</p>
+<h2 id="2020年31岁踏上新的旅途"><a href="#2020年31岁踏上新的旅途" class="headerlink" title="2020年31岁踏上新的旅途"></a>2020年31岁踏上新的旅途</h2><p>还是感谢小可爱的这个本子，让我能够有主题想想我未来到底想要什么样的生活，说句实在话，我向往不为钱发愁工作的日子，可以在做好自己工作之外的时间里多陪陪家人，带着孩子常出去走走，见见外面的世界，说实话已经31岁了，除了谈恋爱时去找媳妇儿去过江浙苏杭，工作原因去过北京/青海，好像这些年也就去了趟南京，现在的我已经有些不知道什么叫做生活了，我希望自己的空闲时间是可以让兴趣填满的，可以和朋友同事同学多聚聚，但是怕打扰大家我又从来不会主动去约别人，小时候没有听从爸妈的话培养自己的兴趣，现在有些后悔，真的空闲下来都不知道该用什么填满这时间，都是躺在床上刷手机，看电视，我不喜欢这样的生活，但是我不知道该过怎么样的生活。看到那些会做饭的视频，做顿丰盛的饭菜给家人吃，看到他们的幸福笑脸，我想做那样的事；看到带着家人过着一路向前增长见闻的旅途生活，我想也尝试一下那样的人生，我感觉为了钱我被束缚在了工作上，2020年我想过一种不为工作所累，不为钱所累，能够享受生活，陪伴家人的生活，保重身体，每天快快乐乐的，多发现生活中的美好，感恩，努力，成长。期待自己成为更好的人。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>我所期待中的生平，成为一个不被工作强迫，不被金钱所累，爱家顾家，孝敬父母，人缘好朋友多，兴趣广泛，感恩的人。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/21-Day-Challenge-01/">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/21-Day-Challenge-01/" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-prototype/" rel="prev" title="前端常见知识点整理 ---- 原型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 原型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-instanceof/" rel="next" title="前端常见知识点整理 ---- instanceof">
+      前端常见知识点整理 ---- instanceof <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E6%9C%88%E4%BB%BD21%E5%A4%A9%E4%B8%BB%E9%A2%98%E6%8C%91%E6%88%98%E4%B9%8B%E7%81%B5%E6%84%9FInspiration"><span class="nav-number">2.</span> <span class="nav-text">1月份21天主题挑战之灵感Inspiration</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E5%A4%A9-Day-1-%E5%86%99%E4%B8%8B%E8%87%AA%E5%B7%B1%E6%9C%9F%E5%BE%85%E4%B8%AD%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">3.</span> <span class="nav-text">第一天 Day 1 写下自己期待中的生平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E6%97%B6%E5%80%99%E7%9A%84%E6%A2%A6%E6%83%B3-%E6%88%90%E4%B8%BA%E7%A7%91%E5%AD%A6%E5%AE%B6"><span class="nav-number">3.1.</span> <span class="nav-text">小时候的梦想-成为科学家</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18%E5%B2%81%E7%9A%84%E6%A2%A6%E6%83%B3-%E2%80%94-%E6%89%BE%E4%B8%AA%E5%A5%BD%E5%B7%A5%E4%BD%9C%EF%BC%8C%E8%AE%A9%E7%88%B8%E5%A6%88%E6%97%A9%E7%82%B9%E4%BA%AB%E7%A6%8F"><span class="nav-number">3.2.</span> <span class="nav-text">18岁的梦想 — 找个好工作，让爸妈早点享福</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20%E5%B2%81%E7%9A%84%E4%BA%BA%E7%94%9F-%E2%80%94-%E5%A4%9A%E6%8C%A3%E9%92%B1%EF%BC%8C%E5%BF%AB%E9%80%9F%E6%88%90%E9%95%BF"><span class="nav-number">3.3.</span> <span class="nav-text">20岁的人生 — 多挣钱，快速成长</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%8E%E5%AE%87%E7%9A%84%E8%81%8C%E4%B8%9A%E7%94%9F%E6%B6%AF-%E2%80%94-5%E5%B9%B4%E5%B7%A5%E4%BD%9C%EF%BC%8C9%E5%B9%B4%E7%BB%8F%E9%AA%8C"><span class="nav-number">3.4.</span> <span class="nav-text">华宇的职业生涯 — 5年工作，9年经验</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2020%E5%B9%B431%E5%B2%81%E8%B8%8F%E4%B8%8A%E6%96%B0%E7%9A%84%E6%97%85%E9%80%94"><span class="nav-number">3.5.</span> <span class="nav-text">2020年31岁踏上新的旅途</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">4.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/21-Day-Challenge-01/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/21-Day-Challenge-01/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/21-Day-Challenge-01/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f6c03765907d7422f93e148c5fb174e2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-Closure/index.html b/ja/2020/01/02/FE-guide-Closure/index.html
new file mode 100644
index 0000000000..ef418eb75f
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-Closure/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 闭包">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-Closure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  闭包Closure闭包的定义很简单：函数 A 返回了一个函数 B ，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。 123456789&#x2F;&#x2F; js代码function A() &amp;#123;  let a &#x3D; 1  function B() &amp;#123;      console.log(a)  &amp;#125;  retur">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T13:32:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.367Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-Closure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 闭包 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 闭包
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-Closure/">前端常见知识点整理 ---- 闭包</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:32</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-Closure/" title="前端常见知识点整理 ---- 闭包">https://blog.lifesli.com/2020/01/02/FE-guide-Closure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="prev" title="前端常见知识点整理 ---- 执行上下文">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 执行上下文
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-new/" rel="next" title="前端常见知识点整理 ---- new">
+      前端常见知识点整理 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%97%AD%E5%8C%85Closure"><span class="nav-number">1.</span> <span class="nav-text">闭包Closure</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-Closure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-Closure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-Closure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cbf98c4a45d4217b3bdcb45d0bdaba22',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-dataType/index.html b/ja/2020/01/02/FE-guide-dataType/index.html
new file mode 100644
index 0000000000..49765b604d
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-dataType/index.html
@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-dataType/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言 温故而知新，可以为师矣。           ———————— 论语  这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T08:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.387Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-dataType/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+<a id="more"></a>
+
+<h1 id="JS知识点"><a href="#JS知识点" class="headerlink" title="JS知识点"></a>JS知识点</h1><blockquote>
+<p>当前市场中，如何区分一个好一点的前端开发和一般的前端开发，主要看的就是js能力的差距，好的前端开发，JS玩的转，不仅仅是框架玩的好，还要JS的基础扎实，只有基础与新技术都玩的6的前端开发才是好前端。</p>
+</blockquote>
+<p>上面这句话不是什么名人或者某位知名前端大拿说的，这是我在公司这几年面试招聘的过程中真真切切总结感受的。<br>所以可以说得JS者得高级前端，所以下面也主要是写JS的相关知识点。</p>
+<h2 id="JavaScript内置数据类型-—-数据类型"><a href="#JavaScript内置数据类型-—-数据类型" class="headerlink" title="JavaScript内置数据类型 — 数据类型"></a>JavaScript内置数据类型 — 数据类型</h2><p>无论学什么语言最重要最基础的就是数据类型，《JavaScript权威指南》这本书中详细的介绍了JS中的数据类型，下面总结一下。</p>
+<p>JavaScript中数据类型分为两大类共七种内置数据类型，其一是6种<strong><em><code>基本类型</code></em></strong>，其二是1种<strong><em><code>引用类型</code></em></strong>，我发现在面试过程中好多面试者都不会先说有两大类，而是会直接蹦出数字类型、字符串类型。。。对象、数组也会被并排放在一起，这其实不是个掌握知识点的好方法，应该先把数据类型分成上面说的<strong><em><code>基本类型</code></em></strong>、<strong><em><code>引用类型</code></em></strong>这样两个大类之后，再看看这两大类中有什么其他的子类型，在记忆其他子类型之前我觉得应该先了解一下什么是<strong><em><code>基本类型</code></em></strong>和<strong><em><code>引用类型</code></em></strong>，实际上基本类型和引用类型的主要区别是存储的区别，基本类型在栈中，而引用类型的话，引用数据的地址存储在栈中，而对象本身是存储在堆中，引用的数据地址是个16进制的数据值，它就像一把钥匙让你能够找到宝藏在什么地方。这就是基本数据类型和引用类型的区别了。</p>
+<p>那么如何记住有哪些基本数据类型和引用数据类型呢，实际上只要记住了6个基本数据类型，其他的都是引用数据类型，而所有的引用数据类型的祖宗都是Object，所以引用数据类型实际上只有Object一个，那么像是Array等其他子类型，都是Object的孩子，不跟Object在一个级别上。</p>
+<p>基本数据类型有哪些呢？其实挺好记的，数字，字符串，这两个一个像温柔的文学少女（string），一个像有点精于算计的男生（number），还有一个布尔类型（boolen）他像是班级里正义感爆棚的人，只论对错；另外还有个差生，没头脑似的未定义（Undefined）还有一个失了忆记不起来自己是谁的空（Null），最后还有一个新加入的插班生，总是带着口罩的标志符号（Symbol），这些人构成了这个班级的所有学生，也就是全部的基本类型，那么引用类型的对象Object呢就像及了漂亮爱化妆的班主任老师，有好多副面孔。不知道大家有没有看过一个动漫叫做《黑塔利亚》，他就是把国家都拟人化了，有了各自的性格，我很喜欢看，我觉得这些数据类型也各有各的特点，像这些国家一样，好了脑洞有点挖深了，有人会说我不就是这么几个简单的数据类型嘛，硬记下来不就好了，但是知识总有你硬记不下来的时候，最好的方法也是速记领域最为常用的方法，就是把你不熟悉的知识与你感兴趣的画面或者既往的知识串联起来，这样就能达到很好的记忆，如果你不喜欢动漫（怎么会有不喜欢动漫的人！！！），可以试试用其他的方法记，当然你如果硬要死记硬背那我也没办法，我继续开我的脑洞。<br>如果你是学过Java开发的同学（如果是计算机专业出来的，应该都或多或少学过，非计算机专业的我也不知道说啥了。。），数字在Java中是分成 byte/short/int/long 的，但是在Js中没有那么多，就一个Number，它是浮点类型，基于 IEEE 754标准实现，刚才我不是说了Number是个精于算计的男生，精于算计就是说他分毫不差，这样浮点型就很好的记了下来，这个754的标准可以不记，如果非要记的话，你可以记成他是自称IEEE 754团体的成员。最后Number身后还跟着一个小弟，叫做NaN，他虽然是Number的小弟，但他总是说话不算数，自己说过什么都不承认。所以NaN!=NaN。<br>老师是个爱化妆的老师，而这些学生也不是普通的学生，在学校他们是老老实实的基本类型，放了学之后一打扮，他们就各有了其他的能力，这个过程叫做装箱，具体的后面再说。（好了快回到现实吧你！）</p>
+<p>如果基础数据是字面量类型，那么他们就像是在上课的学生，只是学生而已，而当他们调用方法时，他们就成了下课后各种技能都有的新新人类，这个过程有时候是显示的，就像是有些学生喜欢大声嚷嚷，而更多的是你不自觉中就用到了装箱操作，是Js引擎提供的能力，就像是有些闷骚的学生一样。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let aNumber &#x3D; 111 &#x2F;&#x2F; 这只是字面量，不是 number 类型</span><br><span class="line">aNumber.toString() &#x2F;&#x2F; 装箱操作自动转化成数字对象，使用时候才会转换为对象类型</span><br></pre></td></tr></table></figure>
+<p>对象有个深浅拷贝的知识点必须要会，对象因为是引用数据类型，在栈中存储的是地址，当用另一个变量接收了之前的变量，那么就好像把钥匙复制了一把，两把钥匙开的还是同一个门，而深拷贝呢就像是照着原来的样板间又造了一个一模一样的房间，这两个房间长得一样，但就是两个房间，钥匙自然也是不一样的，所以呢，当往房间里搬家具的时候，浅拷贝搬进去的是一个房间，所以两把钥匙打开之后看到的都是多了家具，而深拷贝的话，我只是往样板间搬了家具，所以照着装修的房间里是不可能有的，这就是浅拷贝原数据会受影响，而深拷贝不会。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let a &#x3D; &#123; name: &#39;FE&#39; &#125;</span><br><span class="line">let b &#x3D; a</span><br><span class="line">b.name &#x3D; &#39;EF&#39;</span><br><span class="line">console.log(a.name) &#x2F;&#x2F; EF 浅拷贝原数据会受影响</span><br></pre></td></tr></table></figure>
+<h2 id="内置数据类型检测-Typeof-—-类型判断"><a href="#内置数据类型检测-Typeof-—-类型判断" class="headerlink" title="内置数据类型检测 Typeof — 类型判断"></a>内置数据类型检测 Typeof — 类型判断</h2><blockquote>
+<p>typeof 对于基本类型，除了 null 都可以显示正确的类型</p>
+</blockquote>
+<p>typeof 就像是学校的教导主任一样，他有着一双火眼金睛，不管是哪个同学，穿了什么样的衣服，他一问就能问出来这个学生是谁，大家都怕他，但是Null因为失忆了，他也不知道教导主任是谁，所以typeof就拿他也没办法，因为他不怕教导主任，教导主任甚至会以为他是老师呢。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof 1 &#x2F;&#x2F; &#39;number&#39;</span><br><span class="line">typeof &#39;1&#39; &#x2F;&#x2F; &#39;string&#39;</span><br><span class="line">typeof undefined &#x2F;&#x2F; &#39;undefined&#39;</span><br><span class="line">typeof true &#x2F;&#x2F; &#39;boolean&#39;</span><br><span class="line">typeof Symbol() &#x2F;&#x2F; &#39;symbol&#39;</span><br><span class="line">typeof b &#x2F;&#x2F; b 没有声明，但是还会显示 undefined</span><br><span class="line"></span><br><span class="line">typeof null &#x2F;&#x2F; &#39;object&#39; 这是JS中的bug</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>typeof 对于对象，除了函数都会显示 object</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof [] &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof &#123;&#125; &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof console.log &#x2F;&#x2F; &#39;function&#39;</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>知识扩展：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。</p>
+</blockquote>
+<p><strong><em>如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。</em></strong></p>
+<blockquote>
+<p>小知识扩展</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let a</span><br><span class="line">&#x2F;&#x2F; 我们也可以这样判断 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; undefined</span><br><span class="line">&#x2F;&#x2F; 但是 undefined 不是保留字，能够在低版本浏览器被赋值</span><br><span class="line">let undefined &#x3D; 1</span><br><span class="line">&#x2F;&#x2F; 这样判断就会出错</span><br><span class="line">&#x2F;&#x2F; 所以可以用下面的方式来判断，并且代码量更少</span><br><span class="line">&#x2F;&#x2F; 因为 void 后面随便跟上一个组成表达式</span><br><span class="line">&#x2F;&#x2F; 返回就是 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; void 0</span><br></pre></td></tr></table></figure>
+
+<h2 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h2><h3 id="转Boolean"><a href="#转Boolean" class="headerlink" title="转Boolean"></a>转Boolean</h3><p>一句话可以概括</p>
+<blockquote>
+<p>在条件判断时，除了 <code>undefined</code>， <code>null</code>， <code>false</code>， <code>NaN</code>， <code>&#39;&#39;</code>， <code>0</code>， <code>-0</code>，其他所有值都转为 true，包括所有对象。</p>
+</blockquote>
+<p>从上面这段话可以看出来，<code>undefined</code>、<code>null</code> 是基本类型之二，而<code>false</code>是布尔类型的假值，<code>NaN</code>是数字类型的无效值，<code>&#39;&#39;</code>是字符串类型的空值，而<code>0</code>， <code>-0</code>都是数字类型的零值，可以看到，除了<code>0</code>、<code>-0</code>有些特殊，除了插班生<code>Symbol</code>，剩下的都是基本类型的假值，由此实际上就很好记了，有时候数字这个容易忘，但是记住“非0既真”这句话就好了。</p>
+<h3 id="对象转基本类型"><a href="#对象转基本类型" class="headerlink" title="对象转基本类型"></a>对象转基本类型</h3><p>对象在转换基本类型时，首先是先会调用ToPrimitive（原始类型），如果有hint参数调用对应的的类型方法，如果没有那默认先会调用 valueOf 然后调用 toString。如果返回了基本类型，结束。如果都没返回，那么Error<strong><em>但是注意这两个方法你是可以重写的。</em></strong></p>
+<blockquote>
+<p>Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。（来自MDN的解释）<br>需要解释的关键机制是ToPrimitive函数。该函数是将任意值转换为相应的基本类型值。如果输入的就是一个基本类型值，那么将不做修改，被直接返回。如果值是非基本类型值，它将调用内部方法 [[DefaultValue]] 为对象找到一个默认值。<br>[[DefaultValue]]是每一个对象的内部属性。该方法需要一个可选的参数hint，值是Number或String。如果没有提供hint，则默认为Number(除非该对象是Date，在这种情况下默认为String)。然后将调用toString和valueOf去寻找基本类型值。在这里hint就起到作用了。如果hint参数值为Number，valueOf将先被调用，如果hint是String的话，则toString被先调用。<br>[[DefaultValue]] 返回的值一定是基本类型值。如果不是，一个TypeError 将会被抛出。这就意味着为了在这种情况下有意义，toString和valueOf应该返回基本类型值。</p>
+</blockquote>
+<h3 id="四则运算符"><a href="#四则运算符" class="headerlink" title="四则运算符"></a>四则运算符</h3><blockquote>
+<p>只有当<strong><em>加法</em></strong>运算时，其中一方是<strong><em>字符串类型</em></strong>，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。<strong><em>并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。</em></strong></p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">1 + &#39;1&#39; &#x2F;&#x2F; &#39;11&#39; 这里会是面试陷阱</span><br><span class="line">2 * &#39;2&#39; &#x2F;&#x2F; 4 </span><br><span class="line">[1, 2] + [2, 1] &#x2F;&#x2F; &#39;1,22,1&#39;</span><br><span class="line">&#x2F;&#x2F; [1, 2].toString() -&gt; &#39;1,2&#39;</span><br><span class="line">&#x2F;&#x2F; [2, 1].toString() -&gt; &#39;2,1&#39;</span><br><span class="line">&#x2F;&#x2F; &#39;1,2&#39; + &#39;2,1&#39; &#x3D; &#39;1,22,1&#39;</span><br></pre></td></tr></table></figure>
+<p><strong>*面试陷阱题之 ++ *</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 问表达式 &#39;a&#39; + + &#39;b&#39; 返回结果是什么？</span><br><span class="line">&#x2F;&#x2F; 答案是 &#39;aNaN&#39;</span><br><span class="line">&#39;a&#39; + + &#39;b&#39; -&gt; &#x2F;&#x2F; 一元运算符优先级高</span><br><span class="line">&#39;a&#39; + (+ &#39;b&#39;) -&gt; &#x2F;&#x2F; +&#39;b&#39;转数字类型，非有效结果是NaN</span><br><span class="line">&#39;a&#39; + NaN.toString() -&gt; &#x2F;&#x2F; NaN调用toString（）成字符串&#39;NaN&#39;</span><br><span class="line">&#39;aNaN&#39; &#x2F;&#x2F; 字符串接到一起后&#39;aNaN&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 类似题 &#39;1&#39; + + &#39;4&#39; 返回结果是什么 </span><br><span class="line">&#x2F;&#x2F; 其实就是&#39;4&#39; -&gt; 4 -&gt; &#39;4&#39; 最后还是&#39;14&#39;</span><br></pre></td></tr></table></figure>
+
+<h2 id="操作符-—-类型比较"><a href="#操作符-—-类型比较" class="headerlink" title="== 操作符 — 类型比较"></a>== 操作符 — 类型比较</h2><blockquote>
+<p>相等运算符的运算规则如下：<br>1、如果两个值类型相同，进行 === 比较。(这个非常好理解，就不多说了)<br>（1）数字比大小<br>（2）字符串就通过 unicode 字符索引来比较<br>2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：<br>（1）如果一个是null、一个是undefined，那么[相等]。 // 这个有点特殊需要单独记<br>（2）如果任一值是字符串，另一个值是数值，在比较相等性之前先将字符串转换为数值；即是调用Number()函数。<br>（3）如果任一值时布尔值，则在比较相等性之前先将其转换为数值，即是调用Number()函数。<br>（4）如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 （js核心内置类ToPrimitive，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。）</p>
+</blockquote>
+<p>1不说，2（1）的话单独记，其他基本类型转数字比较，引用性数据类型调用ToPrimitive转换成基本数据类型</p>
+<p>首先还是一道面试题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; [] &#x3D;&#x3D; ![] 结果是什么</span><br><span class="line">[] &#x3D;&#x3D; ![] &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>
+<p>为什么呢？我们来解析一下，</p>
+<ol>
+<li>首先我们看一下右侧，<code>![]</code>肯定是要先转换成boolen类型了吧，那么<code>[]</code>的布尔类型是什么呢，上面转换布尔的时候我们说过，除了那五个基本类型的假值以及正负0之外，都是真值，所以<code>[]</code> -&gt; <code>true</code> <code>![]</code> -&gt; <code>false</code></li>
+<li><code>ToPrimitive(false)</code>-&gt;<code>0</code>右边的值得出了数值类型的原始值</li>
+<li>看左边<code>ToPrimitive([])</code>-&gt;<code>[]</code>.toString()-&gt;<code>&#39;&#39;</code></li>
+<li><code>Number(&#39;&#39;)</code>-&gt;<code>0</code></li>
+<li>比较左右 <code>0 == 0</code> -&gt; <code>true</code></li>
+</ol>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>到这里JS的内置数据类型及类型的转换和比较就讲完了，相信大家看过以后一定会记得住的<br>PS：突然好像学画漫画，《JS数据结构们》，一定大火，哈哈哈😂</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-dataType/">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 08:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-dataType/" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">https://blog.lifesli.com/2020/01/02/FE-guide-dataType/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/01/Hello-2020/" rel="prev" title="你好2020">
+      <i class="fa fa-chevron-left"></i> 你好2020
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-prototype/" rel="next" title="前端常见知识点整理 ---- 原型">
+      前端常见知识点整理 ---- 原型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JS%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-number">2.</span> <span class="nav-text">JS知识点</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B-%E2%80%94-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.1.</span> <span class="nav-text">JavaScript内置数据类型 — 数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%85%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B-Typeof-%E2%80%94-%E7%B1%BB%E5%9E%8B%E5%88%A4%E6%96%AD"><span class="nav-number">2.2.</span> <span class="nav-text">内置数据类型检测 Typeof — 类型判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.</span> <span class="nav-text">类型转换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%ACBoolean"><span class="nav-number">2.3.1.</span> <span class="nav-text">转Boolean</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E8%BD%AC%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.2.</span> <span class="nav-text">对象转基本类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%9B%E5%88%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">2.3.3.</span> <span class="nav-text">四则运算符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E7%AC%A6-%E2%80%94-%E7%B1%BB%E5%9E%8B%E6%AF%94%E8%BE%83"><span class="nav-number">2.4.</span> <span class="nav-text">&#x3D;&#x3D; 操作符 — 类型比较</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-dataType/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-dataType/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-dataType/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9605bdfc8ff73c660e429769b79a2abd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-instanceof/index.html b/ja/2020/01/02/FE-guide-instanceof/index.html
new file mode 100644
index 0000000000..d1cd05e37e
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-instanceof/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- instanceof">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-instanceof/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  instanceofinstanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。举例： 1a instanceof Object 判断 Object 的 prototype 是否在 a 的原型链上。 我们也可以试着实现一下 instanceof 123456789101112function myIns">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T12:29:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.397Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-instanceof/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- instanceof | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- instanceof
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-instanceof/">前端常见知识点整理 ---- instanceof</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:29</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-instanceof/" title="前端常见知识点整理 ---- instanceof">https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/21-Day-Challenge-01/" rel="prev" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      <i class="fa fa-chevron-left"></i> 2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-this/" rel="next" title="前端常见知识点整理 ---- this">
+      前端常见知识点整理 ---- this <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#instanceof"><span class="nav-number">1.</span> <span class="nav-text">instanceof</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-instanceof/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-instanceof/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-instanceof/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2d2bd5f2225c6115298940d2a6a8260d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-new/index.html b/ja/2020/01/02/FE-guide-new/index.html
new file mode 100644
index 0000000000..c5d723c17d
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-new/index.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  new 一个对象的过程 新生成了一个对象 链接到原型 绑定 this 返回新对象  在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new 1234567891011121314&#x2F;&#x2F; js代码function create() &amp;#123;    &#x2F;&#x2F; 创建一个空的对象    let obj &amp;#x3">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T20:07:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-new/">前端常见知识点整理 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 20:07</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-new/" title="前端常见知识点整理 ---- new">https://blog.lifesli.com/2020/01/02/FE-guide-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-Closure/" rel="prev" title="前端常见知识点整理 ---- 闭包">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 闭包
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-copy/" rel="next" title="前端常见知识点整理 ---- 深浅拷贝">
+      前端常见知识点整理 ---- 深浅拷贝 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#new-%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">1.</span> <span class="nav-text">new 一个对象的过程</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '1548e100e8a823afabc51b1c69563949',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-prototype/index.html b/ja/2020/01/02/FE-guide-prototype/index.html
new file mode 100644
index 0000000000..3674a03bcf
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-prototype/index.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 原型">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-prototype/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  原型每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型对象，简称原型，prototype原型对象里的constructor指向构造函数本身。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg">
+<meta property="article:published_time" content="2020-01-02T11:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.402Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-prototype/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 原型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 原型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+<a id="more"></a>
+<p><img src="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg" alt="总结"></p>
+<h1 id="prototype-原型对象"><a href="#prototype-原型对象" class="headerlink" title="prototype 原型对象"></a><code>prototype</code> 原型对象</h1><h2 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a>什么是原型？</h2><p>每个函数都具有 <code>prototype</code> 属性，它被默认成一个对象，即原型对象<br>首先来介绍下 <code>prototype</code> 属性。这是一个<code>显式</code>原型属性，只有<code>函数</code>才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let fun &#x3D; Function.prototype.bind()</span><br></pre></td></tr></table></figure>
+<p>如果你以上述方法创建一个函数，那么可以发现这个函数是不具有 prototype 属性的。</p>
+<h2 id="prototype-如何产生的"><a href="#prototype-如何产生的" class="headerlink" title="prototype 如何产生的"></a><code>prototype</code> 如何产生的</h2><p>当我们声明一个函数时，这个属性就被自动创建了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
+<p>并且这个属性的值是一个对象（也就是<code>原型</code>），只有一个属性 <code>constructor</code><br><code>constructor</code> 对应着构造函数，也就是 <code>Foo</code>。</p>
+<h2 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a>什么是原型链？</h2><p>当对象使用属性时，先在自身找，有就直接用，没有就沿着<strong>proto</strong>这条链往上找，直到 Object 原型的位置，有就返回相应的值，没有就返回 underfined。</p>
+<h2 id="constructor-构造函数"><a href="#constructor-构造函数" class="headerlink" title="constructor 构造函数"></a><code>constructor</code> 构造函数</h2><h3 id="什么是构造函数？"><a href="#什么是构造函数？" class="headerlink" title="什么是构造函数？"></a>什么是构造函数？</h3><p>任何一个函数，只要被 new 操作符使用，就可以是一个构造函数（构造函数建议以大写开头）<br>另外，在 JavaScript 的内置对象中，所有的函数对象都是 Function 构造函数的实例，比如：Object、Array等</p>
+<p><code>constructor</code> 是一个公有且不可枚举的属性。一旦我们改变了函数的 <code>prototype</code> ，那么新对象就没有这个属性了（当然可以通过原型链取到 <code>constructor</code>）。</p>
+<p>那么你肯定也有一个疑问，这个属性到底有什么用呢？其实这个属性可以说是一个历史遗留问题，在大部分情况下是没用的，在我的理解里，我认为他有两个作用：</p>
+<ol>
+<li>让实例对象知道是什么函数构造了它</li>
+<li>如果想给某些类库中的构造函数增加一些自定义的方法，就可以通过 <code>xx.constructor.method</code> 来扩展</li>
+</ol>
+<h2 id="proto"><a href="#proto" class="headerlink" title="_proto_"></a><code>_proto_</code></h2><p>这是每个对象都有的<code>隐式原型属性</code>，指向了创建该对象的<code>构造函数</code>的原型。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。</p>
+<p>因为在 JS 中是没有类的概念的，为了实现类似继承的方式，通过 <code>_proto_</code> 将对象和原型联系起来组成原型链，得以让对象可以访问到不属于自己的属性。</p>
+<h3 id="实例对象的-proto-如何产生的"><a href="#实例对象的-proto-如何产生的" class="headerlink" title="实例对象的 _proto_ 如何产生的"></a>实例对象的 <code>_proto_</code> 如何产生的</h3><p>从上图可知，当我们使用 <code>new</code> 操作符时，生成的实例对象拥有了 <code>_proto_</code> 属性。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 这个函数是 Function 的实例对象</span></span><br><span class="line"><span class="comment">// function 就是一个语法糖</span></span><br><span class="line"><span class="comment">// 内部调用了 new Function(...)</span></span><br></pre></td></tr></table></figure>
+<p>所以可以说，在 <code>new</code> 的过程中，新对象被添加了 <code>_proto_</code> 并且链接到构造函数的原型上。</p>
+<h3 id="new-的过程"><a href="#new-的过程" class="headerlink" title="new 的过程"></a><code>new</code> 的过程</h3><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"> name </span>)</span>&#123; </span><br><span class="line"> <span class="keyword">this</span>.name = name; </span><br><span class="line">&#125;; </span><br><span class="line">Person.prototype.getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.name; </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">let</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>() <span class="comment">// 从 Object.prototype 上克隆一个空的对象</span></span><br><span class="line">	<span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>) <span class="comment">// 获取外部传入的构造器，此例是 Person </span></span><br><span class="line">	obj.__proto__ = Con.prototype	<span class="comment">// 指向正确的原型,链接到原型</span></span><br><span class="line">	<span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>) <span class="comment">// 绑定 this，执行构造函数，借用外部传入的构造器给 obj 设置属性</span></span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">typeof</span> result === <span class="string">'object'</span> ? result : obj <span class="comment">// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">create(Person,<span class="string">'lixg'</span>)</span><br></pre></td></tr></table></figure>
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = { b : 1 }</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code> ，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// function 就是个语法糖,内部等同于 new Function()</span></span><br><span class="line"><span class="keyword">let</span> a = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125; <span class="comment">// 这个字面量内部也是使用了 new Object()</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="Function-proto-Function-prototype"><a href="#Function-proto-Function-prototype" class="headerlink" title="Function.proto === Function.prototype"></a>Function.<strong>proto</strong> === Function.prototype</h2><p>对于对象来说，<code>xx.__proto__.contrcutor</code> 是该对象的构造函数，但是在图中我们可以发现 <code>Function.__proto__</code> === <code>Function.prototype</code>，难道这代表着 <code>Function</code> 自己产生了自己?</p>
+<p>答案肯定是否认的，要说明这个问题我们先从 <code>Object</code> 说起。</p>
+<p>从图中我们可以发现，所有对象都可以通过原型链最终找到 <code>Object.prototype</code> ，虽然 <code>Object.prototype</code> 也是一个对象，但是这个对象却不是 <code>Object</code> 创造的，而是引擎自己创建了 <code>Object.prototype</code> 。所以可以这样说，所有实例都是对象，但是对象不一定都是实例。</p>
+<p>接下来我们来看 <code>Function.prototype</code> 这个特殊的对象，如果你在浏览器将这个对象打印出来，会发现这个对象其实是一个函数。</p>
+<p>我们知道函数都是通过 <code>new Function()</code> 生成的，难道 <code>Function.prototype</code> 也是通过 <code>new Function()</code> 产生的吗？答案也是否定的，这个函数也是引擎自己创建的。首先引擎创建了 <code>Object.prototype</code> ，然后创建了 <code>Function.prototype</code> ，并且通过 <code>__proto__</code> 将两者联系了起来。这里也很好的解释了上面的一个问题，为什么 <code>let fun = Function.prototype.bind()</code> 没有 prototype 属性。因为 <code>Function.prototype</code> 是引擎创建出来的对象，引擎认为不需要给这个对象添加 <code>prototype</code> 属性。</p>
+<p><strong><em>所以我们又可以得出一个结论，不是所有函数都是 <code>new Function()</code> 产生的。</em></strong><br>有了 <code>Function.prototype</code> 以后才有了 <code>function Function()</code> ，然后其他的构造函数都是 <code>function Function()</code> 生成的。</p>
+<p>现在可以来解释 <code>Function.__proto__ === Function.prototype</code> 这个问题了。因为先有的 <code>Function.prototype</code> 以后才有的 <code>function Function()</code> ，所以也就不存在鸡生蛋蛋生鸡的悖论问题了。对于为什么 <code>Function.__proto__</code> 会等于 <code>Function.prototype</code> ，个人的理解是：其他所有的构造函数都可以通过原型链找到 <code>Function.prototype</code> ，并且 <code>function Function()</code> 本质也是一个函数，为了不产生混乱就将 <code>function Function()</code> 的 <code>__proto__</code> 联系到了 <code>Function.prototype</code> 上。</p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li><code>Object</code> 是所有对象的爸爸，所有对象都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function</code> 是所有函数的爸爸，所有函数都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function.prototype</code> 和 <code>Object.prototype</code> 是两个特殊的对象，他们由引擎来创建</li>
+<li>除了以上两个特殊对象，其他对象都是通过构造器 <code>new</code> 出来的</li>
+<li>函数的 <code>prototype</code> 是一个对象，也就是原型</li>
+<li>对象的 <code>__proto__</code> 指向原型， <code>__proto__</code> 将对象和原型连接起来组成了原型链<br><img src="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png" alt="总结"></li>
+</ul>
+<h2 id="归纳"><a href="#归纳" class="headerlink" title="归纳"></a>归纳</h2><p><code>ES</code> 把对象定义为：“无序属性的集合，其属性可以包含基本值，对象和函数”。<br>严格来讲，这就相当于说对象是一组没有特定顺序的值。ES 中的构造函数可以用来创建特定类型的对象，用来在创建对象时初始化对象。它的特点是，一般为大写字母开头，使用 <code>new</code> 操作符来实例化对象，比如：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br><span class="line">person.name = <span class="string">"Kevin"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(person.name); <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
+
+<p><code>Person</code> 就是构造函数， <code>person</code> 就是对象。对于对象而言，每个 <code>JS</code> 对象一定对应一个原型对象，并从原型对象继承属性和方法。对象 <code>__proto__</code> 属性的值就是它所对应的原型对象。对象的 <code>__proto__</code> 指向自己构造函数的 <code>prototype</code> 。所以对象的原型链就是 <code>obj.__proto__.proto__....</code> 。对于函数而言，只有函数才有 <code>prototype</code> 属性， <code>Person.prototype</code>  是一个对象，并且有两个属性， 一个是 <code>constructor</code> 指向其构造函数 <code>Person</code> ， 一个是 <code>__proto__</code>  属性：是一个对象，指向上一层的原型。原型链的尽头是 <code>Object.prototype</code> 。所有对象均从 <code>Object.prototype</code> 继承属性。<code>Function.prototype</code> 和 <code>Function.__proto__</code> 为同一对象。<code>Object/Array/String</code> 等等构造函数本质上和 <code>Function</code> 一样，均继承于 <code>Function.prototype</code> 。<code>Function.prototype</code> 直接继承 <code>Object.prototype</code> 。这里的 <code>Object</code> 和 <code>Function</code> 有点鸡和蛋的问题，总结：先有 <code>Object.prototype</code>（原型链顶端），<code>Function.prototype</code> 继承 <code>Object.prototype</code> 而产生，最后，<code>Function</code> 和 <code>Object</code> 和其它构造函数继承 <code>Function.prototype</code> 而产生。属性查找时，先在对象自己上找，找不到才会一步步根据原型链往上找。<br><img src="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg" alt="继承"></p>
+<h2 id="关联阅读"><a href="#关联阅读" class="headerlink" title="关联阅读"></a>关联阅读</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain</a><br><a href="https://zhuanlan.zhihu.com/p/35790971" target="_blank" rel="noopener">说说原型（prototype）、原型链和原型继承</a></p>
+<h2 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h2><p><a target="_blank" rel="noopener" href="https://lixuguang.github.io/2020/01/13/FE-guide-inherit2/">继承</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-prototype/">前端常见知识点整理 ---- 原型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 11:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-prototype/" title="前端常见知识点整理 ---- 原型">https://blog.lifesli.com/2020/01/02/FE-guide-prototype/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-dataType/" rel="prev" title="前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/21-Day-Challenge-01/" rel="next" title="2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平">
+      2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B"><span class="nav-number">1.</span> <span class="nav-text">原型</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#prototype-%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.</span> <span class="nav-text">prototype 原型对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%EF%BC%9F"><span class="nav-number">2.1.</span> <span class="nav-text">什么是原型？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#prototype-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.2.</span> <span class="nav-text">prototype 如何产生的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%E9%93%BE%EF%BC%9F"><span class="nav-number">2.3.</span> <span class="nav-text">什么是原型链？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#constructor-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">2.4.</span> <span class="nav-text">constructor 构造函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="nav-number">2.4.1.</span> <span class="nav-text">什么是构造函数？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proto"><span class="nav-number">2.5.</span> <span class="nav-text">_proto_</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B%E5%AF%B9%E8%B1%A1%E7%9A%84-proto-%E5%A6%82%E4%BD%95%E4%BA%A7%E7%94%9F%E7%9A%84"><span class="nav-number">2.5.1.</span> <span class="nav-text">实例对象的 _proto_ 如何产生的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#new-%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.5.2.</span> <span class="nav-text">new 的过程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Function-proto-Function-prototype"><span class="nav-number">2.6.</span> <span class="nav-text">Function.proto &#x3D;&#x3D;&#x3D; Function.prototype</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">2.7.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BD%92%E7%BA%B3"><span class="nav-number">2.8.</span> <span class="nav-text">归纳</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E8%81%94%E9%98%85%E8%AF%BB"><span class="nav-number">2.9.</span> <span class="nav-text">关联阅读</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%E9%98%85%E8%AF%BB"><span class="nav-number">2.10.</span> <span class="nav-text">扩展阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-prototype/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-prototype/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-prototype/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '721b8f7a4b90692b39730c98a9f3084f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/02/FE-guide-this/index.html b/ja/2020/01/02/FE-guide-this/index.html
new file mode 100644
index 0000000000..49c5ea1b90
--- /dev/null
+++ b/ja/2020/01/02/FE-guide-this/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- this">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-this/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  thisthis 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。 12345678910111213141516171819202122&#x2F;&#x2F; js代码function foo() &amp;#123;	console.log(this.a)&amp;#125;var a &#x3D; 1foo()var obj &#x3D; &amp;#12">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T12:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.410Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-this/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- this | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- this
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-this/">前端常见知识点整理 ---- this</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 12:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-this/" title="前端常见知识点整理 ---- this">https://blog.lifesli.com/2020/01/02/FE-guide-this/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-this/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-instanceof/" rel="prev" title="前端常见知识点整理 ---- instanceof">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- instanceof
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="next" title="前端常见知识点整理 ---- 执行上下文">
+      前端常见知识点整理 ---- 执行上下文 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#this"><span class="nav-number">1.</span> <span class="nav-text">this</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-this/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-this/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-this/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '84c33a9d5399994e7e1a99ab7caa1bd3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html" "b/ja/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
new file mode 100644
index 0000000000..a0cea664c1
--- /dev/null
+++ "b/ja/2020/01/02/FE-guide-\346\211\247\350\241\214\344\270\212\344\270\213\346\226\207/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 执行上下文">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  执行上下文当执行 JS 代码时，会产生三种执行上下文  全局执行上下文 函数执行上下文 eval 执行上下文  每个执行上下文中都有三个重要的属性  变量对象（ VO ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问 作用域链（ JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了） this1234567&#x2F;&#x2F; js代码v">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-02T13:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.411Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 执行上下文 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 执行上下文
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">前端常见知识点整理 ---- 执行上下文</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月02日 - 13:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" title="前端常见知识点整理 ---- 执行上下文">https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-this/" rel="prev" title="前端常见知识点整理 ---- this">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- this
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-Closure/" rel="next" title="前端常见知识点整理 ---- 闭包">
+      前端常见知识点整理 ---- 闭包 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-number">1.</span> <span class="nav-text">执行上下文</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'efbd0efcc974a0ae3ec54ce8c9900183',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-Generator/index.html b/ja/2020/01/03/FE-guide-Generator/index.html
new file mode 100644
index 0000000000..2c06179fed
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-Generator/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Generator 生成器">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Generator/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Generator 实现Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 1234567891011121314&#x2F;&#x2F; js代码&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数&#x2F;&#x2F; 内部可以通过 yield 暂停代码&#x2F;&#x2F; 通过调用 next">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.368Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Generator/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Generator 生成器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Generator 生成器
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-Generator/">前端常见知识点整理 ---- Generator 生成器</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-Generator/" title="前端常见知识点整理 ---- Generator 生成器">https://blog.lifesli.com/2020/01/03/FE-guide-Generator/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Promise/" rel="prev" title="前端常见知识点整理 ---- Promise">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="next" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      前端常见知识点整理 ---- Map、FlatMap 和 Reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Generator-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Generator 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-Generator/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Generator/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Generator/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cc8cd2af09a6d009471953566faf8730',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html b/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
new file mode 100644
index 0000000000..4d83ff93b8
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Map、FlatMap 和 ReduceMapMap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 123&#x2F;&#x2F; js代码[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4] Map 有三个参数，分别是当前索引元素，索引，原">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T03:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.369Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Map、FlatMap 和 Reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Generator/" rel="prev" title="前端常见知识点整理 ---- Generator 生成器">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Generator 生成器
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-async-await/" rel="next" title="前端常见知识点整理 ---- async 和 await">
+      前端常见知识点整理 ---- async 和 await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Map%E3%80%81FlatMap-%E5%92%8C-Reduce"><span class="nav-number">1.</span> <span class="nav-text">Map、FlatMap 和 Reduce</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Map"><span class="nav-number">1.1.</span> <span class="nav-text">Map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#FlatMap"><span class="nav-number">1.2.</span> <span class="nav-text">FlatMap</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Reduce-%E5%8D%87%E5%BA%8F%E6%89%A7%E8%A1%8C"><span class="nav-number">1.3.</span> <span class="nav-text">Reduce 升序执行</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bbb37c4a8466737b4d43dade72055bb7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-Module/index.html b/ja/2020/01/03/FE-guide-Module/index.html
new file mode 100644
index 0000000000..da680358f8
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-Module/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 模块化">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  模块化在有 Babel 的情况下，我们可以直接使用 ES6 的模块化 12345678910&#x2F;&#x2F; js代码&#x2F;&#x2F; file a.jsexport function a() &amp;#123;&amp;#125;export function b() &amp;#123;&amp;#125;&#x2F;&#x2F; file b.jsexport defaul">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T00:41:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.372Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 模块化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 模块化
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-Module/">前端常见知识点整理 ---- 模块化</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:41</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-Module/" title="前端常见知识点整理 ---- 模块化">https://blog.lifesli.com/2020/01/03/FE-guide-Module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-copy/" rel="prev" title="前端常见知识点整理 ---- 深浅拷贝">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 深浅拷贝
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-debounce-throttle/" rel="next" title="前端常见知识点整理 ---- 函数防抖和节流">
+      前端常见知识点整理 ---- 函数防抖和节流 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">1.</span> <span class="nav-text">模块化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CommonJS"><span class="nav-number">1.1.</span> <span class="nav-text">CommonJS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AMD"><span class="nav-number">1.2.</span> <span class="nav-text">AMD</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-Module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '110382ad56794ba40459ab185d9c4fb1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-Promise/index.html b/ja/2020/01/03/FE-guide-Promise/index.html
new file mode 100644
index 0000000000..edd760550c
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-Promise/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Promise">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Promise 实现Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promise 实例，并且该返回值是一个新的实">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T02:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-Promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-Promise/">前端常见知识点整理 ---- Promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-Promise/" title="前端常见知识点整理 ---- Promise">https://blog.lifesli.com/2020/01/03/FE-guide-Promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-call-apply-bind/" rel="prev" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- call, apply, bind 区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Generator/" rel="next" title="前端常见知识点整理 ---- Generator 生成器">
+      前端常见知识点整理 ---- Generator 生成器 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Promise-%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">Promise 实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-Promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-Promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-Promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '109295984bf2326079c14da2d87966cc',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-async-Proxy/index.html b/ja/2020/01/03/FE-guide-async-Proxy/index.html
new file mode 100644
index 0000000000..3becd8ff42
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-async-Proxy/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- Proxy">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-async-Proxy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  ProxyProxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 12345&#x2F;&#x2F; js代码let p &#x3D; new Proxy(target, handler);&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T04:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.377Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-async-Proxy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- Proxy | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- Proxy
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-async-Proxy/">前端常见知识点整理 ---- Proxy</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-async-Proxy/" title="前端常见知识点整理 ---- Proxy">https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-async-await/" rel="prev" title="前端常见知识点整理 ---- async 和 await">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- async 和 await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="next" title="为什么 0.1 + 0.2 != 0.3">
+      为什么 0.1 + 0.2 != 0.3 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-async-Proxy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-Proxy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-Proxy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cee4f8cfdf4d84d1b5890cedd3fa5088',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-async-await/index.html b/ja/2020/01/03/FE-guide-async-await/index.html
new file mode 100644
index 0000000000..f7333c2662
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-async-await/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- async 和 await">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  async 和 await一个函数如果加上 async ，那么该函数就会返回一个 Promise 1234async function test() &amp;#123;  return &quot;1&quot;;&amp;#125;console.log(test()); &#x2F;&#x2F; -&gt; Promise &amp;#123;&lt;resolved&gt;: &quot;1&quot;&amp;#125; 可以把 async 看成">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T03:52:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.378Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- async 和 await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- async 和 await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-async-await/">前端常见知识点整理 ---- async 和 await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 03:52</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-async-await/" title="前端常见知识点整理 ---- async 和 await">https://blog.lifesli.com/2020/01/03/FE-guide-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" rel="prev" title="前端常见知识点整理 ---- Map、FlatMap 和 Reduce">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Map、FlatMap 和 Reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-async-Proxy/" rel="next" title="前端常见知识点整理 ---- Proxy">
+      前端常见知识点整理 ---- Proxy <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#async-%E5%92%8C-await"><span class="nav-number">1.</span> <span class="nav-text">async 和 await</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9613d65a7c5b5c2a2078cf29cddee184',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-call-apply-bind/index.html b/ja/2020/01/03/FE-guide-call-apply-bind/index.html
new file mode 100644
index 0000000000..fe6491a4c8
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-call-apply-bind/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- call, apply, bind 区别">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-call-apply-bind/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  call, apply, bind 区别首先说下前两者的异同。相同： call 和 apply 都是为了解决改变 this 的指向。不同：传参的方式不同，除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 1234567891011&#x2F;&#x2F; js代码let anObj &#x3D; &amp;#123;    value:">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T02:19:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.380Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-call-apply-bind/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- call, apply, bind 区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- call, apply, bind 区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-call-apply-bind/">前端常见知识点整理 ---- call, apply, bind 区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 02:19</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-call-apply-bind/" title="前端常见知识点整理 ---- call, apply, bind 区别">https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-inherit/" rel="prev" title="前端常见知识点整理 ---- 继承">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Promise/" rel="next" title="前端常见知识点整理 ---- Promise">
+      前端常见知识点整理 ---- Promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#call-apply-bind-%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">call, apply, bind 区别</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0-call-%E5%92%8C-apply"><span class="nav-number">1.1.</span> <span class="nav-text">模拟实现 call 和 apply</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-call-apply-bind/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '461b53885951d36420a2aaf74ee3f472',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-copy/index.html b/ja/2020/01/03/FE-guide-copy/index.html
new file mode 100644
index 0000000000..707a99d934
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-copy/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 深浅拷贝">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-copy/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  深浅拷贝123456let a &#x3D; &amp;#123;  age: 1&amp;#125;let b &#x3D; aa.age &#x3D; 2console.log(b.age) &#x2F;&#x2F; 2 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。 浅拷贝首先可以通过">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T00:05:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.382Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-copy/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 深浅拷贝 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 深浅拷贝
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-copy/">前端常见知识点整理 ---- 深浅拷贝</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 00:05</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-copy/" title="前端常见知识点整理 ---- 深浅拷贝">https://blog.lifesli.com/2020/01/03/FE-guide-copy/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-copy/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/02/FE-guide-new/" rel="prev" title="前端常见知识点整理 ---- new">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Module/" rel="next" title="前端常见知识点整理 ---- 模块化">
+      前端常见知识点整理 ---- 模块化 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.</span> <span class="nav-text">深浅拷贝</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.1.</span> <span class="nav-text">浅拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="nav-number">1.2.</span> <span class="nav-text">深拷贝</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-copy/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-copy/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-copy/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '949cb37107b63f072a8ac7fdfe207910',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-debounce-throttle/index.html b/ja/2020/01/03/FE-guide-debounce-throttle/index.html
new file mode 100644
index 0000000000..e5b1aa40bd
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-debounce-throttle/index.html
@@ -0,0 +1,605 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 函数防抖和节流">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-debounce-throttle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  函数防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T01:04:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.391Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-debounce-throttle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 函数防抖和节流 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 函数防抖和节流
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-debounce-throttle/">前端常见知识点整理 ---- 函数防抖和节流</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:04</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-debounce-throttle/" title="前端常见知识点整理 ---- 函数防抖和节流">https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-Module/" rel="prev" title="前端常见知识点整理 ---- 模块化">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 模块化
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-inherit/" rel="next" title="前端常见知识点整理 ---- 继承">
+      前端常见知识点整理 ---- 继承 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81"><span class="nav-number">1.</span> <span class="nav-text">函数防抖和节流</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%98%B2%E6%8A%96"><span class="nav-number">1.1.</span> <span class="nav-text">防抖</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%82%E6%B5%81"><span class="nav-number">1.2.</span> <span class="nav-text">节流</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-debounce-throttle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f303075f16501c58fd8e714ca754e0fa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-inherit/index.html b/ja/2020/01/03/FE-guide-inherit/index.html
new file mode 100644
index 0000000000..b2564e22c4
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-inherit/index.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-inherit/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承在 ES5 中，我们可以使用如下方式解决继承的问题 12345678910111213141516&#x2F;&#x2F; js代码function Super() &amp;#123;&amp;#125;Super.prototype.getNumber &#x3D; function() &amp;#123;  return 1&amp;#125;function Sub() &amp;#123;">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T01:40:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.393Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-inherit/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-inherit/">前端常见知识点整理 ---- 继承</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 01:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-inherit/" title="前端常见知识点整理 ---- 继承">https://blog.lifesli.com/2020/01/03/FE-guide-inherit/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-debounce-throttle/" rel="prev" title="前端常见知识点整理 ---- 函数防抖和节流">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 函数防抖和节流
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-call-apply-bind/" rel="next" title="前端常见知识点整理 ---- call, apply, bind 区别">
+      前端常见知识点整理 ---- call, apply, bind 区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%A7%E6%89%BF"><span class="nav-number">1.</span> <span class="nav-text">继承</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-inherit/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-inherit/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-inherit/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0e572d1d3b0524d60ebb591c76029a21',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/FE-guide-store/index.html b/ja/2020/01/03/FE-guide-store/index.html
new file mode 100644
index 0000000000..2813b62db7
--- /dev/null
+++ b/ja/2020/01/03/FE-guide-store/index.html
@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 浏览器存储">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/FE-guide-store/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  cookie，localStorage，sessionStorage，indexDB   特性 cookie localStorage sessionStorage indexDB    数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在   数据存储大小 4K 5M 5M 无限制   与服务端通信">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T04:37:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.407Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/FE-guide-store/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 浏览器存储 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 浏览器存储
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/FE-guide-store/">前端常见知识点整理 ---- 浏览器存储</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:37</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/FE-guide-store/" title="前端常见知识点整理 ---- 浏览器存储">https://blog.lifesli.com/2020/01/03/FE-guide-store/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/FE-guide-store/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" rel="prev" title="为什么 0.1 + 0.2 != 0.3">
+      <i class="fa fa-chevron-left"></i> 为什么 0.1 + 0.2 != 0.3
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/04/Algorithm/" rel="next" title="JavaScript实现经典排序算法">
+      JavaScript实现经典排序算法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#cookie%EF%BC%8ClocalStorage%EF%BC%8CsessionStorage%EF%BC%8CindexDB"><span class="nav-number">1.</span> <span class="nav-text">cookie，localStorage，sessionStorage，indexDB</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Service-Worker"><span class="nav-number">2.</span> <span class="nav-text">Service Worker</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/FE-guide-store/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/FE-guide-store/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/FE-guide-store/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8787be7ee99da4516d5be2daa509a26d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html b/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
new file mode 100644
index 0000000000..6cc9fb02ee
--- /dev/null
+++ b/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:type" content="article">
+<meta property="og:title" content="为什么 0.1 + 0.2 !&#x3D; 0.3">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Proxy因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。 我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为 1234&#x2F;&#x2F; js代码&#x2F;&#x2F; (0011) 表示循环0.1 &#x3D; 2^-4 * 1.10011(0011) 那么如何得到这个二">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-03T04:10:00.000Z">
+<meta property="article:modified_time" content="2020-01-03T04:10:21.361Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>为什么 0.1 + 0.2 != 0.3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          为什么 0.1 + 0.2 != 0.3
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-03 04:10:00 / 修正日：04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">为什么 0.1 + 0.2 != 0.3</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月03日 - 04:10</p>
+      <p><span>最后更新:</span>2020年01月03日 - 04:10</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" title="为什么 0.1 + 0.2 != 0.3">https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-async-Proxy/" rel="prev" title="前端常见知识点整理 ---- Proxy">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- Proxy
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-store/" rel="next" title="前端常见知识点整理 ---- 浏览器存储">
+      前端常见知识点整理 ---- 浏览器存储 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">1.</span> <span class="nav-text">Proxy</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fe6c4bf89def8d8acbba1baf32656a3f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/04/Algorithm/index.html b/ja/2020/01/04/Algorithm/index.html
new file mode 100644
index 0000000000..6ed2a30ae1
--- /dev/null
+++ b/ja/2020/01/04/Algorithm/index.html
@@ -0,0 +1,734 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript实现经典排序算法">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/04/Algorithm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  基本概念时间复杂度一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。常见的时间复杂度有：  O(1): Constant Complexity: Constant">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldB5VS.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDWW9.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/04/ldDfzR.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif">
+<meta property="og:image" content="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBK9QH.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBKq1g.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQkPf.gif">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/05/lBQTSS.png">
+<meta property="article:published_time" content="2020-01-04T07:18:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="排序算法">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/04/Algorithm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>JavaScript实现经典排序算法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript实现经典排序算法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/04/Algorithm/">JavaScript实现经典排序算法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月04日 - 07:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/04/Algorithm/" title="JavaScript实现经典排序算法">https://blog.lifesli.com/2020/01/04/Algorithm/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/04/Algorithm/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" rel="tag"># 排序算法</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/03/FE-guide-store/" rel="prev" title="前端常见知识点整理 ---- 浏览器存储">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 浏览器存储
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-ArrayOprs/" rel="next" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      数组常见操作 ---- 去重、扁平、取最大最小值 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.1.</span> <span class="nav-text">时间复杂度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A9%BA%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="nav-number">1.2.</span> <span class="nav-text">空间复杂度</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%97%E6%B3%95%E6%B1%87%E6%80%BB"><span class="nav-number">2.</span> <span class="nav-text">算法汇总</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%EF%BC%9A"><span class="nav-number">2.1.</span> <span class="nav-text">关于时间复杂度：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%A8%B3%E5%AE%9A%E6%80%A7%EF%BC%9A"><span class="nav-number">2.2.</span> <span class="nav-text">关于稳定性：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="nav-number">2.3.</span> <span class="nav-text">名词解释：</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F%EF%BC%88Bubble-Sort%EF%BC%89-%E2%80%94-%E5%89%8D%E5%90%8E%E4%B8%A4%E4%B8%A4%E6%AF%94%E8%BE%83-%E2%80%94-%E6%B0%94%E6%B3%A1"><span class="nav-number">3.</span> <span class="nav-text">1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">3.1.</span> <span class="nav-text">1. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">3.2.</span> <span class="nav-text">1. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">3.3.</span> <span class="nav-text">1. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">3.4.</span> <span class="nav-text">1. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89-%E2%80%94-%E9%9D%A2%E8%AF%95%E6%8C%91%E7%AE%80%E5%8E%86%EF%BC%8C%E5%9C%A8%E5%89%A9%E4%B8%8B%E7%9A%84%E9%87%8C%E9%9D%A2%E6%8C%91%E6%9C%80%E5%A5%BD%E7%9A%84"><span class="nav-number">4.</span> <span class="nav-text">2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">4.1.</span> <span class="nav-text">2. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">4.2.</span> <span class="nav-text">2. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">4.3.</span> <span class="nav-text">2. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">4.4.</span> <span class="nav-text">2. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%EF%BC%88Insertion-Sort%EF%BC%89%E2%80%94%E2%80%93-%E9%BA%BB%E5%B0%86-%E6%89%91%E5%85%8B"><span class="nav-number">5.</span> <span class="nav-text">3. 插入排序（Insertion Sort）—– 麻将&#x2F;扑克</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">5.1.</span> <span class="nav-text">3. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">5.2.</span> <span class="nav-text">3. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">5.3.</span> <span class="nav-text">3. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">5.4.</span> <span class="nav-text">3. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%EF%BC%88Selection-Sort%EF%BC%89"><span class="nav-number">6.</span> <span class="nav-text">4. 快速排序（Selection Sort）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">6.1.</span> <span class="nav-text">4. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">6.2.</span> <span class="nav-text">4. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">6.3.</span> <span class="nav-text">4. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">6.4.</span> <span class="nav-text">4. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F"><span class="nav-number">7.</span> <span class="nav-text">5. 希尔排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">7.1.</span> <span class="nav-text">5. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">7.2.</span> <span class="nav-text">5. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">7.3.</span> <span class="nav-text">5.3 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">8.</span> <span class="nav-text">6. 归并排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">8.1.</span> <span class="nav-text">6. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">8.2.</span> <span class="nav-text">6. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">8.3.</span> <span class="nav-text">6. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">8.4.</span> <span class="nav-text">6. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E5%A0%86%E6%8E%92%E5%BA%8F"><span class="nav-number">9.</span> <span class="nav-text">7. 堆排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">9.1.</span> <span class="nav-text">7. 1 算法原理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">10.</span> <span class="nav-text">7. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">10.1.</span> <span class="nav-text">7. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">10.2.</span> <span class="nav-text">7. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">11.</span> <span class="nav-text">8. 计数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#8-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">11.1.</span> <span class="nav-text">8. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">11.2.</span> <span class="nav-text">8. 2 算法描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">11.3.</span> <span class="nav-text">8. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">11.4.</span> <span class="nav-text">8. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">12.</span> <span class="nav-text">9. 桶排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#9-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">12.1.</span> <span class="nav-text">9. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">12.2.</span> <span class="nav-text">9. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E5%BF%AB"><span class="nav-number">12.2.1.</span> <span class="nav-text">1. 什么时候最快</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%9C%80%E6%85%A2"><span class="nav-number">12.2.2.</span> <span class="nav-text">2. 什么时候最慢</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">12.3.</span> <span class="nav-text">9. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">12.4.</span> <span class="nav-text">9. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F"><span class="nav-number">13.</span> <span class="nav-text">10. 基数排序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#10-1-%E7%AE%97%E6%B3%95%E5%8E%9F%E7%90%86"><span class="nav-number">13.1.</span> <span class="nav-text">10. 1 算法原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-2-%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0"><span class="nav-number">13.2.</span> <span class="nav-text">10. 2 算法描述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%9F%BA%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E8%AE%A1%E6%95%B0%E6%8E%92%E5%BA%8F-vs-%E6%A1%B6%E6%8E%92%E5%BA%8F"><span class="nav-number">13.2.1.</span> <span class="nav-text">1. 基数排序 vs 计数排序 vs 桶排序</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-3-%E5%8A%A8%E5%9B%BE%E6%BC%94%E7%A4%BA"><span class="nav-number">13.3.</span> <span class="nav-text">10. 3 动图演示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-4-js%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">13.4.</span> <span class="nav-text">10. 4 js代码实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">14.</span> <span class="nav-text">总结</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">14.1.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/04/Algorithm/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/04/Algorithm/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/04/Algorithm/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a4a3ea1c3c5a54b18702b3e255bceea5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/05/FE-guide-ArrayOprs/index.html b/ja/2020/01/05/FE-guide-ArrayOprs/index.html
new file mode 100644
index 0000000000..bef8921691
--- /dev/null
+++ b/ja/2020/01/05/FE-guide-ArrayOprs/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组常见操作 ---- 去重、扁平、取最大最小值">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/05/FE-guide-ArrayOprs/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  去重1. 利用 Object 的 Key 唯一特性开辟一个外部存储空间用于标示元素是否出现过。 123456&#x2F;&#x2F; js代码const unique &#x3D; (array)&#x3D;&gt; &amp;#123;    var container &#x3D; &amp;#123;&amp;#125;;    return array.filter((item,">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-05T03:05:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T07:47:21.437Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/05/FE-guide-ArrayOprs/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>数组常见操作 ---- 去重、扁平、取最大最小值 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组常见操作 ---- 去重、扁平、取最大最小值
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-05 03:05:00 / 修正日：07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/05/FE-guide-ArrayOprs/">数组常见操作 ---- 去重、扁平、取最大最小值</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 03:05</p>
+      <p><span>最后更新:</span>2020年01月05日 - 07:47</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/05/FE-guide-ArrayOprs/" title="数组常见操作 ---- 去重、扁平、取最大最小值">https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/04/Algorithm/" rel="prev" title="JavaScript实现经典排序算法">
+      <i class="fa fa-chevron-left"></i> JavaScript实现经典排序算法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-about-reduce/" rel="next" title="reduce函数的妙用 ---- 实现map和filter">
+      reduce函数的妙用 ---- 实现map和filter <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%BB%E9%87%8D"><span class="nav-number">1.</span> <span class="nav-text">去重</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%88%A9%E7%94%A8-Object-%E7%9A%84-Key-%E5%94%AF%E4%B8%80%E7%89%B9%E6%80%A7"><span class="nav-number">1.1.</span> <span class="nav-text">1. 利用 Object 的 Key 唯一特性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%88%A9%E7%94%A8-indexOf-%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC%E6%95%B0%E5%80%BC%E8%BF%9B%E8%A1%8C%E5%8E%BB%E9%87%8D"><span class="nav-number">1.2.</span> <span class="nav-text">2. 利用 indexOf 的返回值数值进行去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%88%A9%E7%94%A8-Set-%E7%89%B9%E6%80%A7%E5%8E%BB%E9%87%8D"><span class="nav-number">1.3.</span> <span class="nav-text">3. 利用 Set 特性去重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E6%8E%92%E5%BA%8F%E5%90%8E%E5%88%A4%E6%96%AD%E5%89%8D%E5%90%8E%E4%B8%A4%E9%A1%B9%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89%E5%8E%BB%E9%87%8D"><span class="nav-number">1.4.</span> <span class="nav-text">4. 排序后判断前后两项是否相等去重</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%89%81%E5%B9%B3"><span class="nav-number">2.</span> <span class="nav-text">扁平</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%99%AE%E9%80%9A%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">1. 普通方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8reduce%E7%AE%80%E5%8C%96%E4%B8%8A%E8%BF%B0%E6%96%B9%E6%B3%95"><span class="nav-number">2.2.</span> <span class="nav-text">2. 使用reduce简化上述方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%80%BC"><span class="nav-number">3.</span> <span class="nav-text">最值</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-reduce"><span class="nav-number">3.1.</span> <span class="nav-text">利用 reduce</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Math-max"><span class="nav-number">3.2.</span> <span class="nav-text">Math.max</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-ArrayOprs/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2a810be8d9a0086b395529d607ea3044',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/05/FE-guide-about-reduce/index.html b/ja/2020/01/05/FE-guide-about-reduce/index.html
new file mode 100644
index 0000000000..f3b7913dec
--- /dev/null
+++ b/ja/2020/01/05/FE-guide-about-reduce/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:type" content="article">
+<meta property="og:title" content="reduce函数的妙用 ---- 实现map和filter">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/05/FE-guide-about-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 reduce ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。 reduce 函数在 MDN 中是这样介绍的  reduce() 方法对数组中的每个元素执行一个由 您 提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。  说实话看了一脸懵逼，这上面说的">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-05T08:55:00.000Z">
+<meta property="article:modified_time" content="2020-01-05T08:53:53.962Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/05/FE-guide-about-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>reduce函数的妙用 ---- 实现map和filter | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          reduce函数的妙用 ---- 实现map和filter
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-05 08:55:00 / 修正日：08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/05/FE-guide-about-reduce/">reduce函数的妙用 ---- 实现map和filter</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 08:55</p>
+      <p><span>最后更新:</span>2020年01月05日 - 08:53</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/05/FE-guide-about-reduce/" title="reduce函数的妙用 ---- 实现map和filter">https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-ArrayOprs/" rel="prev" title="数组常见操作 ---- 去重、扁平、取最大最小值">
+      <i class="fa fa-chevron-left"></i> 数组常见操作 ---- 去重、扁平、取最大最小值
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-currying/" rel="next" title="前端常见知识点整理 ---- 柯里化 currying">
+      前端常见知识点整理 ---- 柯里化 currying <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-map"><span class="nav-number">1.1.</span> <span class="nav-text">1. 使用 reduce 实现 map</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8-reduce-%E5%AE%9E%E7%8E%B0-filter"><span class="nav-number">1.2.</span> <span class="nav-text">2. 使用 reduce 实现 filter</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/05/FE-guide-about-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-about-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-about-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f94b3d8e80e10bf2d4b95c91075bbb2c',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/05/FE-guide-currying/index.html b/ja/2020/01/05/FE-guide-currying/index.html
new file mode 100644
index 0000000000..33d5978a80
--- /dev/null
+++ b/ja/2020/01/05/FE-guide-currying/index.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 柯里化 currying">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/05/FE-guide-currying/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  定义柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-05T09:59:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.384Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/05/FE-guide-currying/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 柯里化 currying | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 柯里化 currying
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/05/FE-guide-currying/">前端常见知识点整理 ---- 柯里化 currying</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 09:59</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/05/FE-guide-currying/" title="前端常见知识点整理 ---- 柯里化 currying">https://blog.lifesli.com/2020/01/05/FE-guide-currying/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-currying/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-about-reduce/" rel="prev" title="reduce函数的妙用 ---- 实现map和filter">
+      <i class="fa fa-chevron-left"></i> reduce函数的妙用 ---- 实现map和filter
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-vuepress/" rel="next" title="介绍一个好用的doc展示库 ---- vuepress">
+      介绍一个好用的doc展示库 ---- vuepress <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89"><span class="nav-number">1.</span> <span class="nav-text">定义</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">2.</span> <span class="nav-text">应用场景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E5%A4%8D%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">参数复用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/05/FE-guide-currying/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-currying/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-currying/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '52ff9fa2dc07c8ba31af7f3704837350',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/05/FE-guide-vuepress/index.html b/ja/2020/01/05/FE-guide-vuepress/index.html
new file mode 100644
index 0000000000..8db1e984ae
--- /dev/null
+++ b/ja/2020/01/05/FE-guide-vuepress/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:type" content="article">
+<meta property="og:title" content="介绍一个好用的doc展示库 ---- vuepress">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/05/FE-guide-vuepress/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在做公司技术规范，需要能通过 B&#x2F;S 方式进行分发，起初想法是做一个网站，用 html 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 md 文件编译生成网站，就像是 hexo 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-05T17:59:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="vuepress">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/05/FE-guide-vuepress/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>介绍一个好用的doc展示库 ---- vuepress | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          介绍一个好用的doc展示库 ---- vuepress
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+<span id="more"></span>
+
+<h1 id="vuepress-何许"><a href="#vuepress-何许" class="headerlink" title="vuepress 何许"></a><code>vuepress</code> 何许</h1>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/05/FE-guide-vuepress/">介绍一个好用的doc展示库 ---- vuepress</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月05日 - 17:59</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/05/FE-guide-vuepress/" title="介绍一个好用的doc展示库 ---- vuepress">https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/vuepress/" rel="tag"># vuepress</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-currying/" rel="prev" title="前端常见知识点整理 ---- 柯里化 currying">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 柯里化 currying
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/FE-guide-Net/" rel="next" title="前端常见知识点整理 ---- 网络">
+      前端常见知识点整理 ---- 网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vuepress-%E4%BD%95%E8%AE%B8"><span class="nav-number">2.</span> <span class="nav-text">vuepress 何许</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/05/FE-guide-vuepress/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/05/FE-guide-vuepress/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/05/FE-guide-vuepress/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a0fa71fd2bc75ef3b845c6ecca1b24e9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/09/FE-guide-Net/index.html b/ja/2020/01/09/FE-guide-Net/index.html
new file mode 100644
index 0000000000..749ef1a1dd
--- /dev/null
+++ b/ja/2020/01/09/FE-guide-Net/index.html
@@ -0,0 +1,970 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/09/FE-guide-Net/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 UDP - User Datagram Protocol - 用户数据报协议面向报文UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWJa6g.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.376Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWJGkt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/09/FE-guide-Net/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/09/FE-guide-Net/">前端常见知识点整理 ---- 网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/09/FE-guide-Net/" title="前端常见知识点整理 ---- 网络">https://blog.lifesli.com/2020/01/09/FE-guide-Net/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-Net/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/05/FE-guide-vuepress/" rel="prev" title="介绍一个好用的doc展示库 ---- vuepress">
+      <i class="fa fa-chevron-left"></i> 介绍一个好用的doc展示库 ---- vuepress
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/FE-guide-data-structure/" rel="next" title="计算机通识 ---- 数据结构">
+      计算机通识 ---- 数据结构 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#UDP-User-Datagram-Protocol-%E7%94%A8%E6%88%B7%E6%95%B0%E6%8D%AE%E6%8A%A5%E5%8D%8F%E8%AE%AE"><span class="nav-number">2.</span> <span class="nav-text">UDP - User Datagram Protocol - 用户数据报协议</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%A2%E5%90%91%E6%8A%A5%E6%96%87"><span class="nav-number">2.1.</span> <span class="nav-text">面向报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8D%E5%8F%AF%E9%9D%A0%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">不可靠性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%AB%98%E6%95%88"><span class="nav-number">2.3.</span> <span class="nav-text">高效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E8%BE%93%E6%96%B9%E5%BC%8F"><span class="nav-number">2.4.</span> <span class="nav-text">传输方式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#TCP"><span class="nav-number">3.</span> <span class="nav-text">TCP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%B4%E9%83%A8"><span class="nav-number">3.1.</span> <span class="nav-text">头部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%9C%BA"><span class="nav-number">3.2.</span> <span class="nav-text">状态机</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E7%AB%8B%E8%BF%9E%E6%8E%A5%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.</span> <span class="nav-text">建立连接三次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.1.3.</span> <span class="nav-text">第三次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%AD%E5%BC%80%E9%93%BE%E6%8E%A5%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.</span> <span class="nav-text">断开链接四次握手</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.1.</span> <span class="nav-text">第一次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.2.</span> <span class="nav-text">第二次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B-1"><span class="nav-number">3.2.2.3.</span> <span class="nav-text">第三次握手</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E6%AC%A1%E6%8F%A1%E6%89%8B"><span class="nav-number">3.2.2.4.</span> <span class="nav-text">第四次握手</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARQ-%E5%8D%8F%E8%AE%AE"><span class="nav-number">3.2.3.</span> <span class="nav-text">ARQ 协议</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%81%9C%E6%AD%A2%E7%AD%89%E5%BE%85-ARQ"><span class="nav-number">3.2.3.1.</span> <span class="nav-text">停止等待 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%B8%B8%E4%BC%A0%E8%BE%93%E8%BF%87%E7%A8%8B"><span class="nav-number">3.2.3.2.</span> <span class="nav-text">正常传输过程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%A5%E6%96%87%E4%B8%A2%E5%A4%B1%E6%88%96%E5%87%BA%E9%94%99"><span class="nav-number">3.2.3.3.</span> <span class="nav-text">报文丢失或出错</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-%E8%B6%85%E6%97%B6%E6%88%96%E4%B8%A2%E5%A4%B1"><span class="nav-number">3.2.3.4.</span> <span class="nav-text">ACK 超时或丢失</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%9E%E7%BB%AD-ARQ"><span class="nav-number">3.2.3.5.</span> <span class="nav-text">连续 ARQ</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B4%AF%E8%AE%A1%E7%A1%AE%E8%AE%A4"><span class="nav-number">3.2.3.6.</span> <span class="nav-text">累计确认</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.</span> <span class="nav-text">滑动窗口</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Zero-%E7%AA%97%E5%8F%A3"><span class="nav-number">3.2.4.1.</span> <span class="nav-text">Zero 窗口</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E5%A4%84%E7%90%86"><span class="nav-number">3.2.5.</span> <span class="nav-text">拥塞处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%85%A2%E5%BC%80%E5%A7%8B%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.1.</span> <span class="nav-text">慢开始算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%A5%E5%A1%9E%E9%81%BF%E5%85%8D%E7%AE%97%E6%B3%95"><span class="nav-number">3.2.5.2.</span> <span class="nav-text">拥塞避免算法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E9%87%8D%E4%BC%A0"><span class="nav-number">3.2.5.3.</span> <span class="nav-text">快速重传</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Taho-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.4.</span> <span class="nav-text">TCP Taho 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-Reno-%E5%AE%9E%E7%8E%B0%E5%A6%82%E4%B8%8B"><span class="nav-number">3.2.5.5.</span> <span class="nav-text">TCP Reno 实现如下</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TCP-New-Ren-%E6%94%B9%E8%BF%9B%E5%90%8E%E7%9A%84%E5%BF%AB%E6%81%A2%E5%A4%8D"><span class="nav-number">3.2.5.6.</span> <span class="nav-text">TCP New Ren 改进后的快恢复</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP"><span class="nav-number">4.</span> <span class="nav-text">HTTP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Post-%E5%92%8C-Get-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">4.1.</span> <span class="nav-text">Post 和 Get 的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-number">4.2.</span> <span class="nav-text">常见状态码</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2XX-%E6%88%90%E5%8A%9F"><span class="nav-number">4.2.1.</span> <span class="nav-text">2XX 成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3XX-%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">4.2.2.</span> <span class="nav-text">3XX 重定向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4XX-%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.3.</span> <span class="nav-text">4XX 客户端错误</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5XX-%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%94%99%E8%AF%AF"><span class="nav-number">4.2.4.</span> <span class="nav-text">5XX 服务器错误</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP-%E9%A6%96%E9%83%A8"><span class="nav-number">4.3.</span> <span class="nav-text">HTTP 首部</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTPS"><span class="nav-number">5.</span> <span class="nav-text">HTTPS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#TLS"><span class="nav-number">5.1.</span> <span class="nav-text">TLS</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-2-0"><span class="nav-number">6.</span> <span class="nav-text">HTTP 2.0</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%BC%A0%E8%BE%93"><span class="nav-number">6.1.</span> <span class="nav-text">二进制传输</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%9A%E8%B7%AF%E5%A4%8D%E7%94%A8"><span class="nav-number">6.2.</span> <span class="nav-text">多路复用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Header-%E5%8E%8B%E7%BC%A9"><span class="nav-number">6.3.</span> <span class="nav-text">Header 压缩</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF-Push"><span class="nav-number">6.4.</span> <span class="nav-text">服务端 Push</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#QUIC"><span class="nav-number">6.5.</span> <span class="nav-text">QUIC</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#DNS"><span class="nav-number">7.</span> <span class="nav-text">DNS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E8%BE%93%E5%85%A5-URL-%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">7.1.</span> <span class="nav-text">从输入 URL 到页面加载完成的过程</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/09/FE-guide-Net/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-Net/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-Net/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '02a284d58b65bb9dc8da6c2989f93733',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/09/FE-guide-data-structure/index.html b/ja/2020/01/09/FE-guide-data-structure/index.html
new file mode 100644
index 0000000000..fbd24b825f
--- /dev/null
+++ b/ja/2020/01/09/FE-guide-data-structure/index.html
@@ -0,0 +1,706 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:type" content="article">
+<meta property="og:title" content="计算机通识 ---- 数据结构">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/09/FE-guide-data-structure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理 栈 Heap 栈是一个线性结构，在计算机中是一个相当常见的数据结构。栈的特点是只能在某一端添加或删除数据，遵循先进后出(FILO)的原则  实现每种数据结">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+<meta property="article:published_time" content="2020-01-09T07:35:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.385Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lWB0nf.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/09/FE-guide-data-structure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>计算机通识 ---- 数据结构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          计算机通识 ---- 数据结构
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/09/FE-guide-data-structure/">计算机通识 ---- 数据结构</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 07:35</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/09/FE-guide-data-structure/" title="计算机通识 ---- 数据结构">https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/FE-guide-Net/" rel="prev" title="前端常见知识点整理 ---- 网络">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/do-it-yourselfery-jsonp/" rel="next" title="自己动手实现系列 ---- jsonp">
+      自己动手实现系列 ---- jsonp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%88-Heap"><span class="nav-number">2.</span> <span class="nav-text">栈 Heap</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.1.</span> <span class="nav-text">实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BA%94%E7%94%A8"><span class="nav-number">2.2.</span> <span class="nav-text">应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%98%9F%E5%88%97"><span class="nav-number">3.</span> <span class="nav-text">队列</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-1"><span class="nav-number">3.1.</span> <span class="nav-text">实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E9%93%BE%E9%98%9F%E5%88%97"><span class="nav-number">3.1.1.</span> <span class="nav-text">单链队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BE%AA%E7%8E%AF%E9%98%9F%E5%88%97"><span class="nav-number">3.1.2.</span> <span class="nav-text">循环队列</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%93%BE%E8%A1%A8"><span class="nav-number">4.</span> <span class="nav-text">链表</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-2"><span class="nav-number">4.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A0%91"><span class="nav-number">5.</span> <span class="nav-text">树</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%8F%89%E6%A0%91"><span class="nav-number">5.1.</span> <span class="nav-text">二叉树</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E5%88%86%E6%90%9C%E7%B4%A2%E6%A0%91"><span class="nav-number">5.2.</span> <span class="nav-text">二分搜索树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-3"><span class="nav-number">5.2.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AVL-%E6%A0%91"><span class="nav-number">5.3.</span> <span class="nav-text">AVL 树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-4"><span class="nav-number">5.3.1.</span> <span class="nav-text">实现</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Trie"><span class="nav-number">6.</span> <span class="nav-text">Trie</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-5"><span class="nav-number">6.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B9%B6%E6%9F%A5%E9%9B%86"><span class="nav-number">7.</span> <span class="nav-text">并查集</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-6"><span class="nav-number">7.1.</span> <span class="nav-text">实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A0%86"><span class="nav-number">8.</span> <span class="nav-text">堆</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E5%A4%A7%E6%A0%B9%E5%A0%86"><span class="nav-number">8.1.</span> <span class="nav-text">实现大根堆</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/09/FE-guide-data-structure/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/FE-guide-data-structure/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/FE-guide-data-structure/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e3228e71445a045be23e860e984926b0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/09/career/index.html b/ja/2020/01/09/career/index.html
new file mode 100644
index 0000000000..8266ecff4a
--- /dev/null
+++ b/ja/2020/01/09/career/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何正确使用时间[转载]">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/09/career/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-09T16:33:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/09/career/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>如何正确使用时间[转载] | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何正确使用时间[转载]
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/09/career/">如何正确使用时间[转载]</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 16:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/09/career/" title="如何正确使用时间[转载]">https://blog.lifesli.com/2020/01/09/career/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/career/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/solve-get-params-so-long-problem/" rel="prev" title="解决get请求过长的问题小记">
+      <i class="fa fa-chevron-left"></i> 解决get请求过长的问题小记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/do-it-yourselfery-promise/" rel="next" title="自己动手实现系列 ---- promise">
+      自己动手实现系列 ---- promise <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/09/career/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/career/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/career/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '78dff55b8b5a35a4c6c6301860b256e5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/09/do-it-yourselfery-jsonp/index.html b/ja/2020/01/09/do-it-yourselfery-jsonp/index.html
new file mode 100644
index 0000000000..df783e2034
--- /dev/null
+++ b/ja/2020/01/09/do-it-yourselfery-jsonp/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- jsonp">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/09/do-it-yourselfery-jsonp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 jsonp 实现 jsonp 思路 将传入的data数据转化为url字符串形式 处理url中的回调函数 创建一个script标签并插入到页面中 挂载回调函数  代码实现123456789101112131415161718192021222324252627282930&#x2F;&amp;#">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-09T08:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.464Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="jsonp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/09/do-it-yourselfery-jsonp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- jsonp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- jsonp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/09/do-it-yourselfery-jsonp/">自己动手实现系列 ---- jsonp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 08:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/09/do-it-yourselfery-jsonp/" title="自己动手实现系列 ---- jsonp">https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/jsonp/" rel="tag"># jsonp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/FE-guide-data-structure/" rel="prev" title="计算机通识 ---- 数据结构">
+      <i class="fa fa-chevron-left"></i> 计算机通识 ---- 数据结构
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/solve-get-params-so-long-problem/" rel="next" title="解决get请求过长的问题小记">
+      解决get请求过长的问题小记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-jsonp-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 jsonp 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/do-it-yourselfery-jsonp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9e5518b4320e88f9dfb47188c65b4c44',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/09/solve-get-params-so-long-problem/index.html b/ja/2020/01/09/solve-get-params-so-long-problem/index.html
new file mode 100644
index 0000000000..a418a74a34
--- /dev/null
+++ b/ja/2020/01/09/solve-get-params-so-long-problem/index.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:type" content="article">
+<meta property="og:title" content="解决get请求过长的问题小记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/09/solve-get-params-so-long-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个get方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+<meta property="article:published_time" content="2020-01-09T11:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="ajax">
+<meta property="article:tag" content="get">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/09/lROUMt.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/09/solve-get-params-so-long-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>解决get请求过长的问题小记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          解决get请求过长的问题小记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+<span id="more"></span>
+
+<h2 id="URL-限制"><a href="#URL-限制" class="headerlink" title="URL 限制"></a>URL 限制</h2><p>首先我在网上找到了一份资料介绍了URL长度的相关资料，从下面可以看出，从HTTP协议层面以及Get请求层面都没有什么限制，这个限制来自于<em><strong>浏览器或者服务器的限制</strong></em>。</p>
+<blockquote>
+<p>Microsoft Internet Explorer (Browser)<br>IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。<br>Firefox (Browser)<br>对于Firefox浏览器URL的长度限制为65,536个字符。<br>Safari (Browser)<br>URL最大长度限制为 80,000个字符。<br>Opera (Browser)<br>URL最大长度限制为190,000个字符。<br>Google (Browser)<br>URL最大长度限制为8182个字符。<br>Apache (Server)<br>能接受最大url长度为8,192个字符。<br>Microsoft Internet Information Server(IIS)<br>能接受最大url的长度为16,384个字符。</p>
+</blockquote>
+<p>而且，中文会进行编码，一个汉字编码后会生成9个字符，这样算来，IE下最多也就能输入231个中文，再多就完蛋了，那么通过get请求传递参数就会显得很麻烦。</p>
+<p>通常情况下，这种超长参数的请求我们都会用post，有些地方也会说post请求没有长度限制，但是前面说了，实际上HTTP协议层面并没有任何的限制，限制只出现在浏览器或者服务器限制，get和post请求在底层上其实是一样的。</p>
+<p>最后项目修改了请求类型，把 <code>get</code> 请求改成了 <code>post</code> 请求，在网上实际还找到了另外两个方案，如果对同一组参数频繁访问的化，也可以用 <code>post+get</code> 请求的方式去处理，或者用 <code>sessionStorage</code> 下面简单介绍一下。</p>
+<ol>
+<li>将预览内容 <code>post</code> 到服务端，根据一个唯一标识生成缓存(有效时间5分钟)，将唯一标识返回到前端，前端通过get方式传递唯一标识请求预览逻辑，拿到缓存的内容后渲染到页面。需要说明的是这里的缓存必须是分布式的。</li>
+<li>通过H5的会话缓存 <code>sessionStorage</code> 将预览内容存储在浏览器，打开预览页后从 <code>sessionStorage</code> 中拿到内容就可以渲染出页面了。</li>
+</ol>
+<p>上述两种方案都不太符合我们的项目所以最终还是选择了最简单的方式</p>
+<h2 id="GET-VS-POST"><a href="#GET-VS-POST" class="headerlink" title="GET VS POST"></a>GET VS POST</h2><ol>
+<li><p>多数浏览器对于POST采用两阶段发送数据的，先发送请求头，再发送请求体，即使参数再少再短，也会被分成两个步骤来发送（相对于GET），也就是第一步发送header数据，第二步再发送body部分。HTTP是应用层的协议，而在传输层有些情况TCP会出现两次连结的过程，HTTP协议本身不保存状态信息，一次请求一次响应。对于TCP而言，通信次数越多反而靠性越低，能在一次连结中传输完需要的消息是最可靠的，尽量使用GET请求来减少网络耗时。如果通信时间增加，这段时间客户端与服务器端一直保持连接状态，在服务器侧负载可能会增加，可靠性会下降。</p>
+</li>
+<li><p>GET请求能够被cache，GET请求能够被保存在浏览器的浏览历史里面（密码等重要数据GET提交，别人查看历史记录，就可以直接看到这些私密数据）POST不进行缓存。</p>
+</li>
+<li><p>GET参数是带在URL后面，传统IE中URL的最大可用长度为2048字符，其他浏览器对URL长度限制实现上有所不同。POST请求无长度限制（目前理论上是这样的）。</p>
+</li>
+<li><p>GET提交的数据大小，不同浏览器的限制不同，一般在2k-8K之间，POST提交数据比较大，大小靠服务器的设定值限制，而且某些数据只能用 POST 方法「携带」，比如 file。</p>
+</li>
+<li><p>全部用POST不是十分合理，最好先把请求按功能和场景分下类，对数据请求频繁，数据不敏感且数据量在普通浏览器最小限定的2k范围内，这样的情况使用GET。其他地方使用POST。</p>
+</li>
+<li><p>GET 的本质是「得」，而 POST 的本质是「给」。而且，GET 是「幂等」的，在这一点上，GET 被认为是「安全的」。但实际上 server 端也可以用作资源更新，但是这种用法违反了约定，容易造成 CSRF（跨站请求伪造）。</p>
+</li>
+</ol>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>以上是这次遇到问题后学到的一点知识，可能并不全面，后续如果遇到了类似的问题会继续丰富这篇文章。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/09/solve-get-params-so-long-problem/">解决get请求过长的问题小记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月09日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/09/solve-get-params-so-long-problem/" title="解决get请求过长的问题小记">https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/ajax/" rel="tag"># ajax</a>
+              <a href="/ja/tags/get/" rel="tag"># get</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/do-it-yourselfery-jsonp/" rel="prev" title="自己动手实现系列 ---- jsonp">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- jsonp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/career/" rel="next" title="如何正确使用时间[转载]">
+      如何正确使用时间[转载] <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URL-%E9%99%90%E5%88%B6"><span class="nav-number">1.1.</span> <span class="nav-text">URL 限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GET-VS-POST"><span class="nav-number">1.2.</span> <span class="nav-text">GET VS POST</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">写在最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/09/solve-get-params-so-long-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '86beaa0681335896d133ab8de779c0da',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/13/FE-guide-inherit2/index.html b/ja/2020/01/13/FE-guide-inherit2/index.html
new file mode 100644
index 0000000000..f3c0915db0
--- /dev/null
+++ b/ja/2020/01/13/FE-guide-inherit2/index.html
@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 继承类型">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/13/FE-guide-inherit2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：有下面两个类，下面实现 Child 继承 Father： 1234567891011121314&#x2F;&#x2F; js代码function Father() &amp;#123;  this.type &#x3D; &#39;prople&#39;;&amp;#125;Father.prototype.eat &#x3D; function() &amp;#123;  con">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-13T03:18:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.395Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/13/FE-guide-inherit2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 继承类型 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 继承类型
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/13/FE-guide-inherit2/">前端常见知识点整理 ---- 继承类型</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 03:18</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/13/FE-guide-inherit2/" title="前端常见知识点整理 ---- 继承类型">https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/do-it-yourselfery-promise/" rel="prev" title="自己动手实现系列 ---- promise">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- promise
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/Javascript-Design-Pattern/" rel="next" title="JavaScript 设计模式 Design Pattern">
+      JavaScript 设计模式 Design Pattern <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF%EF%BC%88%E8%AE%A4%E8%B4%BC%E4%BD%9C%E7%88%B6%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">原型继承（认贼作父）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%88%E5%80%9F%E8%85%B9%E7%94%9F%E5%AD%90%EF%BC%89"><span class="nav-number">2.</span> <span class="nav-text">构造继承（借腹生子）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF%EF%BC%88%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF-%E6%9E%84%E9%80%A0%E7%BB%A7%E6%89%BF%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">组合继承（原型继承+构造继承）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF-%E5%A4%8D%E5%88%B6%E9%99%8D%E7%BA%A7"><span class="nav-number">4.</span> <span class="nav-text">原型式继承(复制降级)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%84%E7%94%9F%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF"><span class="nav-number">5.</span> <span class="nav-text">寄生组合继承</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#inherits-%E5%87%BD%E6%95%B0-%E2%80%94-Nodejs-util-inherits-%E5%87%BD%E6%95%B0"><span class="nav-number">5.1.</span> <span class="nav-text">inherits 函数 — Nodejs util.inherits 函数</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/13/FE-guide-inherit2/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/FE-guide-inherit2/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/FE-guide-inherit2/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5ab3230a1536b4f327cde4360e74304a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/13/Javascript-Design-Pattern/index.html b/ja/2020/01/13/Javascript-Design-Pattern/index.html
new file mode 100644
index 0000000000..ba946bae47
--- /dev/null
+++ b/ja/2020/01/13/Javascript-Design-Pattern/index.html
@@ -0,0 +1,665 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JavaScript 设计模式 Design Pattern">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/13/Javascript-Design-Pattern/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+<meta property="article:published_time" content="2020-01-13T12:22:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.414Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="设计模式">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/13/Javascript-Design-Pattern/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>JavaScript 设计模式 Design Pattern | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          JavaScript 设计模式 Design Pattern
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+<a id="more"></a>
+
+<h1 id="什么是设计模式"><a href="#什么是设计模式" class="headerlink" title="什么是设计模式"></a>什么是设计模式</h1><blockquote>
+<p>设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案<br>设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。</p>
+</blockquote>
+<blockquote>
+<p>　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。   —- 百度百科</p>
+</blockquote>
+<p>不知道大家看了上面的定义以后是什么感受，说实话我第一次看到这句话并没有什么深刻的认识，什么面向对象的软件设计，什么针对特定问题，什么优雅的解决方案，这都说的是什么，后来我看了几遍之后，上面这句话用我的理解翻译如下：</p>
+<blockquote>
+<p>软件开发过程中，解决某一类问题用到的一系列套路</p>
+</blockquote>
+<p>这就是我对设计模式的认识。当然这也不仅仅是我自己的认识，在跟其他的一些开发人员交流时，很多人都是这么认为的。</p>
+<p>这些解决问题的方案实在是太好用了，所以大神就把它们抽象出来，然后起了个名字-就叫做设计模式了。</p>
+<p>这么说大家可能还是不太明白，举个开发过程中可能遇到的实际例子吧。</p>
+<blockquote>
+<p>当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件。那么这种场景下我们该如何解决这个问题呢？通常我们需要新增一个接口，兼容原来的接口和新的业务需求参数。<br>因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题。</p>
+</blockquote>
+<p>这就是设计模式的应用，实际上也许你还不知道设计模式这个词，但是你已经在工作中频繁的用到了设计模式，下面我们就来看看到底有哪些设计模式。</p>
+<p>哦，对了，设计模式并不依赖于语言，它本身更像是一种软件的设计思想，因为我是一个前端，所以接下来具体实现的时候我会使用js来实现设计模式的用法。</p>
+<h1 id="学习设计模式"><a href="#学习设计模式" class="headerlink" title="学习设计模式"></a>学习设计模式</h1><p>目前被普遍接受的经典的设计模式共有 <strong>23</strong> 种，而这23种设计模式又分为了 <strong>3大类</strong> ，看过一张图这里拿过来镇贴。<br><img src="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg" alt="lHgD4H.jpg"><br>他们分别是</p>
+<ul>
+<li>创建型模式</li>
+<li>结构型模式</li>
+<li>行为型模式</li>
+</ul>
+<p>接下来，我将会将这23种，3大类设计模式一个个的拆解开来，跟大家一起学习一下，设计模式有哪些内容。</p>
+<h2 id="创建型模式-6个"><a href="#创建型模式-6个" class="headerlink" title="创建型模式 6个"></a>创建型模式 6个</h2><p>这类模式用于<strong>对象的生成</strong>和<strong>生命周期的管理</strong>。<br>创建型模式可以决定生成哪些对象，提高了程序的灵活性。具体属于此类的模式清单如下，共有 <strong>5</strong> 个：</p>
+<ul>
+<li>单例模式（Singleton）</li>
+<li>工厂方法模式（Factory Method）</li>
+<li>抽象工厂模式（Abstract Factory）</li>
+<li>建造者模式（Builder）</li>
+<li>原型模式（Prototype）</li>
+<li>迭代器模式（Iterator）</li>
+</ul>
+<h3 id="单例模式（Singleton）"><a href="#单例模式（Singleton）" class="headerlink" title="单例模式（Singleton）"></a>单例模式（Singleton）</h3><p><strong><em>描述：</em></strong>确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。</p>
+<h3 id="工厂方法模式（Factory-Method）"><a href="#工厂方法模式（Factory-Method）" class="headerlink" title="工厂方法模式（Factory Method）"></a>工厂方法模式（Factory Method）</h3><p><strong><em>描述：</em></strong>定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。</p>
+<h3 id="抽象工厂模式（Abstract-Factory）"><a href="#抽象工厂模式（Abstract-Factory）" class="headerlink" title="抽象工厂模式（Abstract Factory）"></a>抽象工厂模式（Abstract Factory）</h3><p><strong><em>描述：</em></strong>为创建一组相关或相互依赖的对象提供一个接口，而且无需指定它们的具体类</p>
+<h3 id="建造者模式（Builder）"><a href="#建造者模式（Builder）" class="headerlink" title="建造者模式（Builder）"></a>建造者模式（Builder）</h3><p><strong><em>描述：</em></strong>将一个复杂对象的构建与他的表示分离，使得同样的构建过程可以创建不同的表示。</p>
+<h3 id="原型模式（Prototype）"><a href="#原型模式（Prototype）" class="headerlink" title="原型模式（Prototype）"></a>原型模式（Prototype）</h3><p><strong><em>描述：</em></strong>用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。</p>
+<h3 id="迭代器模式（Iterator）"><a href="#迭代器模式（Iterator）" class="headerlink" title="迭代器模式（Iterator）"></a>迭代器模式（Iterator）</h3><p><strong><em>描述：</em></strong>提供一种方法访问一个容器对象中的各个元素，而又不需暴露该对象的内部细节。</p>
+<h2 id="结构型模式-7个"><a href="#结构型模式-7个" class="headerlink" title="结构型模式 7个"></a>结构型模式 7个</h2><ul>
+<li>适配器模式（Adapter）</li>
+<li>组合模式（Compositor）</li>
+<li>代理模式（Proxy）</li>
+<li>桥梁模式（Bridge）</li>
+<li>装饰模式（Decorator）</li>
+<li>门面模式（Facade）</li>
+<li>享元模式（Flyweight）</li>
+</ul>
+<h3 id="适配器模式（Adapter）"><a href="#适配器模式（Adapter）" class="headerlink" title="适配器模式（Adapter）"></a>适配器模式（Adapter）</h3><p><strong><em>描述：</em></strong>将一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。</p>
+<h3 id="组合模式（Compositor）"><a href="#组合模式（Compositor）" class="headerlink" title="组合模式（Compositor）"></a>组合模式（Compositor）</h3><p><strong><em>描述：</em></strong>将对象组合成树形结构</p>
+<h3 id="代理模式（Proxy）"><a href="#代理模式（Proxy）" class="headerlink" title="代理模式（Proxy）"></a>代理模式（Proxy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="桥梁模式（Bridge）"><a href="#桥梁模式（Bridge）" class="headerlink" title="桥梁模式（Bridge）"></a>桥梁模式（Bridge）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="装饰模式（Decorator）"><a href="#装饰模式（Decorator）" class="headerlink" title="装饰模式（Decorator）"></a>装饰模式（Decorator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="门面模式（Facade）"><a href="#门面模式（Facade）" class="headerlink" title="门面模式（Facade）"></a>门面模式（Facade）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="享元模式（Flyweight）"><a href="#享元模式（Flyweight）" class="headerlink" title="享元模式（Flyweight）"></a>享元模式（Flyweight）</h3><p><strong><em>描述：</em></strong></p>
+<h2 id="行为型模式-10个"><a href="#行为型模式-10个" class="headerlink" title="行为型模式 10个"></a>行为型模式 10个</h2><ul>
+<li>命名模式（Command）</li>
+<li>解释器模式（Interpreter）</li>
+<li>责任链模式（Chian of Responsibility）</li>
+<li>观察者模式（Observer）</li>
+<li>中介者模式（Mediator）</li>
+<li>备忘录模式（Memento）</li>
+<li>状态模式（State）</li>
+<li>策略模式（Strategy）</li>
+<li>模板方法模式（Template Method）</li>
+<li>访问者模式（Visitor）</li>
+</ul>
+<h3 id="命名模式（Command）"><a href="#命名模式（Command）" class="headerlink" title="命名模式（Command）"></a>命名模式（Command）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="解释器模式（Interpreter）"><a href="#解释器模式（Interpreter）" class="headerlink" title="解释器模式（Interpreter）"></a>解释器模式（Interpreter）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="责任链模式（Chian-of-Responsibility）"><a href="#责任链模式（Chian-of-Responsibility）" class="headerlink" title="责任链模式（Chian of Responsibility）"></a>责任链模式（Chian of Responsibility）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="观察者模式（Observer）"><a href="#观察者模式（Observer）" class="headerlink" title="观察者模式（Observer）"></a>观察者模式（Observer）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="中介者模式（Mediator）"><a href="#中介者模式（Mediator）" class="headerlink" title="中介者模式（Mediator）"></a>中介者模式（Mediator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="备忘录模式（Memento）"><a href="#备忘录模式（Memento）" class="headerlink" title="备忘录模式（Memento）"></a>备忘录模式（Memento）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="状态模式（State）"><a href="#状态模式（State）" class="headerlink" title="状态模式（State）"></a>状态模式（State）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="策略模式（Strategy）"><a href="#策略模式（Strategy）" class="headerlink" title="策略模式（Strategy）"></a>策略模式（Strategy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="模板方法模式（Template-Method）"><a href="#模板方法模式（Template-Method）" class="headerlink" title="模板方法模式（Template Method）"></a>模板方法模式（Template Method）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="访问者模式（Visitor）"><a href="#访问者模式（Visitor）" class="headerlink" title="访问者模式（Visitor）"></a>访问者模式（Visitor）</h3><p><strong><em>描述：</em></strong></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/13/Javascript-Design-Pattern/">JavaScript 设计模式 Design Pattern</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 12:22</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/13/Javascript-Design-Pattern/" title="JavaScript 设计模式 Design Pattern">https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag"># 设计模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/FE-guide-inherit2/" rel="prev" title="前端常见知识点整理 ---- 继承类型">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 继承类型
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/hexo-search/" rel="next" title="给我的Hexo博客添加文章内容搜索功能">
+      给我的Hexo博客添加文章内容搜索功能 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">什么是设计模式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">3.</span> <span class="nav-text">学习设计模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-6%E4%B8%AA"><span class="nav-number">3.1.</span> <span class="nav-text">创建型模式 6个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Singleton%EF%BC%89"><span class="nav-number">3.1.1.</span> <span class="nav-text">单例模式（Singleton）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Factory-Method%EF%BC%89"><span class="nav-number">3.1.2.</span> <span class="nav-text">工厂方法模式（Factory Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%BD%E8%B1%A1%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F%EF%BC%88Abstract-Factory%EF%BC%89"><span class="nav-number">3.1.3.</span> <span class="nav-text">抽象工厂模式（Abstract Factory）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Builder%EF%BC%89"><span class="nav-number">3.1.4.</span> <span class="nav-text">建造者模式（Builder）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F%EF%BC%88Prototype%EF%BC%89"><span class="nav-number">3.1.5.</span> <span class="nav-text">原型模式（Prototype）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Iterator%EF%BC%89"><span class="nav-number">3.1.6.</span> <span class="nav-text">迭代器模式（Iterator）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%93%E6%9E%84%E5%9E%8B%E6%A8%A1%E5%BC%8F-7%E4%B8%AA"><span class="nav-number">3.2.</span> <span class="nav-text">结构型模式 7个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Adapter%EF%BC%89"><span class="nav-number">3.2.1.</span> <span class="nav-text">适配器模式（Adapter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E6%A8%A1%E5%BC%8F%EF%BC%88Compositor%EF%BC%89"><span class="nav-number">3.2.2.</span> <span class="nav-text">组合模式（Compositor）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F%EF%BC%88Proxy%EF%BC%89"><span class="nav-number">3.2.3.</span> <span class="nav-text">代理模式（Proxy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%A5%E6%A2%81%E6%A8%A1%E5%BC%8F%EF%BC%88Bridge%EF%BC%89"><span class="nav-number">3.2.4.</span> <span class="nav-text">桥梁模式（Bridge）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A3%85%E9%A5%B0%E6%A8%A1%E5%BC%8F%EF%BC%88Decorator%EF%BC%89"><span class="nav-number">3.2.5.</span> <span class="nav-text">装饰模式（Decorator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%A8%E9%9D%A2%E6%A8%A1%E5%BC%8F%EF%BC%88Facade%EF%BC%89"><span class="nav-number">3.2.6.</span> <span class="nav-text">门面模式（Facade）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%AB%E5%85%83%E6%A8%A1%E5%BC%8F%EF%BC%88Flyweight%EF%BC%89"><span class="nav-number">3.2.7.</span> <span class="nav-text">享元模式（Flyweight）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%8C%E4%B8%BA%E5%9E%8B%E6%A8%A1%E5%BC%8F-10%E4%B8%AA"><span class="nav-number">3.3.</span> <span class="nav-text">行为型模式 10个</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E6%A8%A1%E5%BC%8F%EF%BC%88Command%EF%BC%89"><span class="nav-number">3.3.1.</span> <span class="nav-text">命名模式（Command）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E9%87%8A%E5%99%A8%E6%A8%A1%E5%BC%8F%EF%BC%88Interpreter%EF%BC%89"><span class="nav-number">3.3.2.</span> <span class="nav-text">解释器模式（Interpreter）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F%EF%BC%88Chian-of-Responsibility%EF%BC%89"><span class="nav-number">3.3.3.</span> <span class="nav-text">责任链模式（Chian of Responsibility）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Observer%EF%BC%89"><span class="nav-number">3.3.4.</span> <span class="nav-text">观察者模式（Observer）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%AD%E4%BB%8B%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Mediator%EF%BC%89"><span class="nav-number">3.3.5.</span> <span class="nav-text">中介者模式（Mediator）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%87%E5%BF%98%E5%BD%95%E6%A8%A1%E5%BC%8F%EF%BC%88Memento%EF%BC%89"><span class="nav-number">3.3.6.</span> <span class="nav-text">备忘录模式（Memento）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F%EF%BC%88State%EF%BC%89"><span class="nav-number">3.3.7.</span> <span class="nav-text">状态模式（State）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F%EF%BC%88Strategy%EF%BC%89"><span class="nav-number">3.3.8.</span> <span class="nav-text">策略模式（Strategy）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F%EF%BC%88Template-Method%EF%BC%89"><span class="nav-number">3.3.9.</span> <span class="nav-text">模板方法模式（Template Method）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BF%E9%97%AE%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%88Visitor%EF%BC%89"><span class="nav-number">3.3.10.</span> <span class="nav-text">访问者模式（Visitor）</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/13/Javascript-Design-Pattern/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/Javascript-Design-Pattern/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/Javascript-Design-Pattern/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cc8ee385638c581fa04c74813f0f88b5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/13/do-it-yourselfery-promise/index.html b/ja/2020/01/13/do-it-yourselfery-promise/index.html
new file mode 100644
index 0000000000..85b8459f25
--- /dev/null
+++ b/ja/2020/01/13/do-it-yourselfery-promise/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- promise">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/13/do-it-yourselfery-promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 promise 实现 promise 思路基础步骤  设定三个状态 PENDING 、 FULFILLED 、 REJECTED  ，只能由 PENDING 改变为 FULFILLED 、 REJECTED ，并且只能改变一次 MyPromise 接收一个函数 executor ， e">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-13T00:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="promise">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/13/do-it-yourselfery-promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- promise
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/13/do-it-yourselfery-promise/">自己动手实现系列 ---- promise</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 00:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/13/do-it-yourselfery-promise/" title="自己动手实现系列 ---- promise">https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/promise/" rel="tag"># promise</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/09/career/" rel="prev" title="如何正确使用时间[转载]">
+      <i class="fa fa-chevron-left"></i> 如何正确使用时间[转载]
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/FE-guide-inherit2/" rel="next" title="前端常见知识点整理 ---- 继承类型">
+      前端常见知识点整理 ---- 继承类型 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0-promise-%E6%80%9D%E8%B7%AF"><span class="nav-number">1.1.</span> <span class="nav-text">实现 promise 思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.2.</span> <span class="nav-text">代码实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">then方法异步调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#then%E6%96%B9%E6%B3%95%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8"><span class="nav-number">1.4.</span> <span class="nav-text">then方法链式调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#catch%E6%96%B9%E6%B3%95"><span class="nav-number">1.5.</span> <span class="nav-text">catch方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#finally%E6%96%B9%E6%B3%95"><span class="nav-number">1.6.</span> <span class="nav-text">finally方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-resolve"><span class="nav-number">1.7.</span> <span class="nav-text">Promise.resolve</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Promise-reject"><span class="nav-number">1.8.</span> <span class="nav-text">Promise.reject</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#all%E6%96%B9%E6%B3%95"><span class="nav-number">1.9.</span> <span class="nav-text">all方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#race%E6%96%B9%E6%B3%95"><span class="nav-number">1.10.</span> <span class="nav-text">race方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/13/do-it-yourselfery-promise/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/do-it-yourselfery-promise/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/do-it-yourselfery-promise/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fe3b618c275a1b5a239a3100c47ff94e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/13/hexo-search/index.html b/ja/2020/01/13/hexo-search/index.html
new file mode 100644
index 0000000000..df2acffe78
--- /dev/null
+++ b/ja/2020/01/13/hexo-search/index.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:type" content="article">
+<meta property="og:title" content="给我的Hexo博客添加文章内容搜索功能">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/13/hexo-search/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-13T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/13/hexo-search/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>给我的Hexo博客添加文章内容搜索功能 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          给我的Hexo博客添加文章内容搜索功能
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+<span id="more"></span>
+<h2 id="主题里的搜索配置"><a href="#主题里的搜索配置" class="headerlink" title="主题里的搜索配置"></a>主题里的搜索配置</h2><p>这段代码是这样的，实际上我只需要把 <code>enable</code> 从 <code>false</code> 变成 <code>true</code> 就好了</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-generator-searchdb</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># If auto, trigger search by changing input.</span></span><br><span class="line">  <span class="comment"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class="line">  <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
+<p>然后我又看了一下上面提供的依赖地址，这里还需要做两步，一个是安装搜索的依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb</span><br></pre></td></tr></table></figure>
+<p>接着就是在博客系统的配置最下方加入下面这段话</p>
+<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure>
+<p>到这里如果没什么问题，那么搜索功能就加上了，怎么样简单吧。如果你遇到什么问题，可以到上面的地址看一下，上面有详细的说明，我这里就不贴代码了。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>希望大家都能丰富自己的技术博客，拥有属于自己的一片技术天地。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/13/hexo-search/">给我的Hexo博客添加文章内容搜索功能</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月13日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/13/hexo-search/" title="给我的Hexo博客添加文章内容搜索功能">https://blog.lifesli.com/2020/01/13/hexo-search/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/13/hexo-search/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/Javascript-Design-Pattern/" rel="prev" title="JavaScript 设计模式 Design Pattern">
+      <i class="fa fa-chevron-left"></i> JavaScript 设计模式 Design Pattern
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/Es6-arrowFunc-arguments/" rel="next" title="es6中箭头函数没了arguments怎么办？">
+      es6中箭头函数没了arguments怎么办？ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E9%A2%98%E9%87%8C%E7%9A%84%E6%90%9C%E7%B4%A2%E9%85%8D%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">主题里的搜索配置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">2.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/13/hexo-search/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/13/hexo-search/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/13/hexo-search/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3d6861c89f774fb057f9a6b08e26fb6b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/22/Es6-arrowFunc-arguments/index.html b/ja/2020/01/22/Es6-arrowFunc-arguments/index.html
new file mode 100644
index 0000000000..3f78b1b079
--- /dev/null
+++ b/ja/2020/01/22/Es6-arrowFunc-arguments/index.html
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="es6中箭头函数没了arguments怎么办？">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/22/Es6-arrowFunc-arguments/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-22T06:50:21.000Z">
+<meta property="article:modified_time" content="2020-01-22T07:34:29.919Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="es6">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/22/Es6-arrowFunc-arguments/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>es6中箭头函数没了arguments怎么办？ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          es6中箭头函数没了arguments怎么办？
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-22 06:50:21 / 修正日：07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+<a id="more"></a>
+
+<h2 id="剩余运算符"><a href="#剩余运算符" class="headerlink" title="剩余运算符"></a>剩余运算符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> func = <span class="function">(<span class="params">...rest</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(rest)</span><br><span class="line">  <span class="comment">//[1,2,3]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
+
+<p>看上面的代码，有的朋友会问，这<code>...</code>的操作不应该是展开运算符么？是的，扩展运算符与剩余操作符都是以三点开头的操作符，二者长的很像，只是在用法上有些差别。它们已经被 ES6 数组支持，能解决很多之前 arguments 解决起来很麻烦的问题。</p>
+<p>简单来说剩余运算是在参数上使用的。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/22/Es6-arrowFunc-arguments/">es6中箭头函数没了arguments怎么办？</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 06:50</p>
+      <p><span>最后更新:</span>2020年01月22日 - 07:34</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/22/Es6-arrowFunc-arguments/" title="es6中箭头函数没了arguments怎么办？">https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/es6/" rel="tag"># es6</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/13/hexo-search/" rel="prev" title="给我的Hexo博客添加文章内容搜索功能">
+      <i class="fa fa-chevron-left"></i> 给我的Hexo博客添加文章内容搜索功能
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/Wepack-Tips/" rel="next" title="webpack中loader和plugin之间的区别">
+      webpack中loader和plugin之间的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">1.1.</span> <span class="nav-text">剩余运算符</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Es6-arrowFunc-arguments/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7c5ddc08e9eee5a4e3079561f56b6ecd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/22/FE-guide-safe/index.html b/ja/2020/01/22/FE-guide-safe/index.html
new file mode 100644
index 0000000000..daed03e738
--- /dev/null
+++ b/ja/2020/01/22/FE-guide-safe/index.html
@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/22/FE-guide-safe/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-22T14:50:21.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/22/FE-guide-safe/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+<span id="more"></span>
+<h2 id="XSS（Cross-site-scripting）跨站脚本攻击"><a href="#XSS（Cross-site-scripting）跨站脚本攻击" class="headerlink" title="XSS（Cross-site scripting）跨站脚本攻击"></a>XSS（Cross-site scripting）跨站脚本攻击</h2><p>跨站脚本攻击是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。</p>
+<p>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>
+<p>XSS攻击分成两类：</p>
+<ul>
+<li>来自内部的攻击<ul>
+<li>主要指的是利用程序自身的漏洞，构造跨站语句</li>
+</ul>
+</li>
+<li>来自外部的攻击<ul>
+<li>主要指自己构造XSS跨站漏洞网页或者寻找非目标机以外的有跨站漏洞的网页。如当我们要渗透一个站点，我们自己构造一个有跨站漏洞的网页，然后构造跨站语句，通过结合其他技术，如社会工程学等，欺骗目标服务器的管理员打开。</li>
+</ul>
+</li>
+</ul>
+<p>XSS分为：<strong>存储型</strong>和<strong>反射型</strong></p>
+<ul>
+<li>存储型XSS：存储型XSS，持久化，代码是存储在服务其中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，用户访问该页面的时候触发代码执行。这种XSS比较危险，容易造成蠕虫，盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。</li>
+<li>反射型XSS：非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。</li>
+</ul>
+<h3 id="攻击手段和目的"><a href="#攻击手段和目的" class="headerlink" title="攻击手段和目的"></a>攻击手段和目的</h3><p>攻击者使被攻击者在浏览器中执行脚本后，如果需要收集来自被攻击者的数据（如cookie或其他敏感信息），可以自行架设一个网站，让被攻击者通过JavaScript等方式把收集好的数据作为参数提交，随后以数据库等形式记录在攻击者自己的服务器上。</p>
+<p>常用的XSS攻击手段和目的有：</p>
+<ul>
+<li>盗用cookie，获取敏感信息。</li>
+<li>利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。</li>
+<li>利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。</li>
+<li>利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。</li>
+<li>在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。</li>
+</ul>
+<h3 id="漏洞的防御和利用"><a href="#漏洞的防御和利用" class="headerlink" title="漏洞的防御和利用"></a>漏洞的防御和利用</h3><h4 id="过滤特殊字符"><a href="#过滤特殊字符" class="headerlink" title="过滤特殊字符"></a>过滤特殊字符</h4><p>避免XSS的方法之一主要是将用户所提供的内容进行过滤，许多语言都有提供对HTML的过滤：</p>
+<ul>
+<li>PHP的htmlentities()或是htmlspecialchars()。</li>
+<li>Python的cgi.escape()。</li>
+<li>ASP的Server.HTMLEncode()。</li>
+<li>ASP.NET的Server.HtmlEncode()或功能更强的Microsoft Anti-Cross Site Scripting Library</li>
+<li>Java的xssprotect (Open Source Library)。</li>
+<li>NodeJS的node-validator。</li>
+</ul>
+<h4 id="使用HTTP头指定类型"><a href="#使用HTTP头指定类型" class="headerlink" title="使用HTTP头指定类型"></a>使用HTTP头指定类型</h4><p>很多时候可以使用HTTP头指定内容的类型，使得输出的内容避免被作为HTML解析。如在PHP语言中使用以下代码：<br><code>&lt;?php header(&#39;Content-Type: text/javascript; charset=utf-8&#39;); ?&gt;</code><br>即可强行指定输出内容为文本/JavaScript脚本（顺便指定了内容编码），而非可以引发攻击的HTML。</p>
+<h4 id="用户方面"><a href="#用户方面" class="headerlink" title="用户方面"></a>用户方面</h4><p>包括Internet Explorer、Mozilla Firefox在内的大多数浏览器皆有关闭JavaScript的选项，但关闭功能并非是最好的方法，因为许多网站都需要使用JavaScript语言才能正常运作。通常来说，一个经常有安全更新推出的浏览器，在使用上会比很久都没有更新的浏览器更为安全。</p>
+<h2 id="CRSF（Cross-site-request-forgery）跨站请求伪造"><a href="#CRSF（Cross-site-request-forgery）跨站请求伪造" class="headerlink" title="CRSF（Cross-site request forgery）跨站请求伪造"></a>CRSF（Cross-site request forgery）跨站请求伪造</h2><p>跨站请求伪造是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。</p>
+<ul>
+<li>XSS 利用的是用户对指定网站的信任</li>
+<li>CSRF 利用的是网站对用户网页浏览器的信任</li>
+</ul>
+<p>跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：<em><strong>简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</strong></em></p>
+<h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><p>例子<br>假如一家银行用以运行转账操作的URL地址如下：<br><code>http://www.examplebank.com/withdraw?account=AccoutName&amp;amount=1000&amp;for=PayeeName</code><br>那么，一个恶意攻击者可以在另一个网站上放置如下代码：<br><code>&lt;img src=&quot;http://www.examplebank.com/withdraw?account=Alice&amp;amount=1000&amp;for=Badman&quot;&gt;</code><br>如果有账户名为Alice的用户访问了恶意站点，而她之前刚访问过银行不久，登录信息尚未过期，那么她就会损失1000资金。<br>这种恶意的网址可以有很多种形式，藏身于网页中的许多地方。此外，攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛，博客等任何用户生成内容的网站中。这意味着<em><strong>如果服务端没有合适的防御措施的话，用户即使访问熟悉的可信网站也有受攻击的危险</strong></em>。<br>透过例子能够看出，攻击者并不能通过CSRF攻击来直接获取用户的账户控制权，也不能直接窃取用户的任何信息。他们能做到的，是<em><strong>欺骗用户浏览器，让其以用户的名义运行操作。</strong></em></p>
+<h3 id="防御措施"><a href="#防御措施" class="headerlink" title="防御措施"></a>防御措施</h3><h4 id="检查Referer（参照）字段"><a href="#检查Referer（参照）字段" class="headerlink" title="检查Referer（参照）字段"></a>检查Referer（参照）字段</h4><p>HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer字段应和请求的地址位于同一域名下。以上文银行操作为例，Referer字段地址通常应该是转账按钮所在的网页地址，应该也位于<a target="_blank" rel="noopener" href="http://www.examplebank.com之下.而如果是csrf攻击传来的请求,referer字段会是包含恶意网址的地址,不会位于www.examplebank.com之下,这时候服务器就能识别出恶意的访问./">www.examplebank.com之下。而如果是CSRF攻击传来的请求，Referer字段会是包含恶意网址的地址，不会位于www.examplebank.com之下，这时候服务器就能识别出恶意的访问。</a><br>这种办法简单易行，工作量低，仅需要在关键访问处增加一步校验。但这种办法也有其局限性，因其完全依赖浏览器发送正确的Referer字段。虽然http协议对此字段的内容有明确的规定，但并无法保证来访的浏览器的具体实现，亦无法保证浏览器没有安全漏洞影响到此字段。并且也存在攻击者攻击某些浏览器，篡改其Referer字段的可能。</p>
+<h4 id="添加校验token"><a href="#添加校验token" class="headerlink" title="添加校验token"></a>添加校验token</h4><p>由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再运行CSRF攻击。这种数据通常是窗体中的一个数据项。服务器将其生成并附加在窗体中，其内容是一个伪随机数。当客户端通过窗体提交请求时，这个伪随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个伪随机数的值，服务端就会因为校验token的值为空或者错误，拒绝这个可疑请求。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/22/FE-guide-safe/">前端常见知识点整理 ---- 网络安全</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 14:50</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/22/FE-guide-safe/" title="前端常见知识点整理 ---- 网络安全">https://blog.lifesli.com/2020/01/22/FE-guide-safe/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/FE-guide-safe/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/Wepack-Tips/" rel="prev" title="webpack中loader和plugin之间的区别">
+      <i class="fa fa-chevron-left"></i> webpack中loader和plugin之间的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/11/SSR/" rel="next" title="SSR">
+      SSR <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#XSS%EF%BC%88Cross-site-scripting%EF%BC%89%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB"><span class="nav-number">1.1.</span> <span class="nav-text">XSS（Cross-site scripting）跨站脚本攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%BB%E5%87%BB%E6%89%8B%E6%AE%B5%E5%92%8C%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.1.</span> <span class="nav-text">攻击手段和目的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BC%8F%E6%B4%9E%E7%9A%84%E9%98%B2%E5%BE%A1%E5%92%8C%E5%88%A9%E7%94%A8"><span class="nav-number">1.1.2.</span> <span class="nav-text">漏洞的防御和利用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%87%E6%BB%A4%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span class="nav-number">1.1.2.1.</span> <span class="nav-text">过滤特殊字符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HTTP%E5%A4%B4%E6%8C%87%E5%AE%9A%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.1.2.2.</span> <span class="nav-text">使用HTTP头指定类型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%94%A8%E6%88%B7%E6%96%B9%E9%9D%A2"><span class="nav-number">1.1.2.3.</span> <span class="nav-text">用户方面</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CRSF%EF%BC%88Cross-site-request-forgery%EF%BC%89%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0"><span class="nav-number">1.2.</span> <span class="nav-text">CRSF（Cross-site request forgery）跨站请求伪造</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BE%8B%E5%AD%90"><span class="nav-number">1.2.1.</span> <span class="nav-text">例子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E5%BE%A1%E6%8E%AA%E6%96%BD"><span class="nav-number">1.2.2.</span> <span class="nav-text">防御措施</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A3%80%E6%9F%A5Referer%EF%BC%88%E5%8F%82%E7%85%A7%EF%BC%89%E5%AD%97%E6%AE%B5"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">检查Referer（参照）字段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%A0%A1%E9%AA%8Ctoken"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">添加校验token</span></a></li></ol></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/22/FE-guide-safe/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/FE-guide-safe/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/FE-guide-safe/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3cb95e0801884fa8ed782384a481e8fb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/01/22/Wepack-Tips/index.html b/ja/2020/01/22/Wepack-Tips/index.html
new file mode 100644
index 0000000000..b74a62f6d1
--- /dev/null
+++ b/ja/2020/01/22/Wepack-Tips/index.html
@@ -0,0 +1,622 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="webpack中loader和plugin之间的区别">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/01/22/Wepack-Tips/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-01-22T10:38:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.430Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/01/22/Wepack-Tips/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>webpack中loader和plugin之间的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          webpack中loader和plugin之间的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+<a id="more"></a>
+
+<h1 id="背景知识"><a href="#背景知识" class="headerlink" title="背景知识"></a>背景知识</h1><p>在研究loader和plugin之前区别之前，我们先来看看一个webpack配置的常见结构</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">"webpack"</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    app: path.join(__dirname, <span class="string">"../src/js/index.js"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 输出文件</span></span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">"[name].bundle.js"</span>,</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">"dist"</span>),</span><br><span class="line">    publicPath: <span class="string">"/"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.scss/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          <span class="string">"style-loader"</span>,</span><br><span class="line">          <span class="string">"css-loader"</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">      ......</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// plugins配置</span></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// 重新创建html文件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      title: <span class="string">"首页"</span>,</span><br><span class="line">      filename: <span class="string">"index.html"</span>,</span><br><span class="line">      template: path.resolve(__dirname, <span class="string">"../src/index.html"</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    ......</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><strong><em>webpack的打包原理</em></strong></p>
+<ul>
+<li>识别入口文件</li>
+<li>通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)</li>
+<li>webpack做的就是分析代码，转换代码，编译代码，输出代码</li>
+<li>最终形成打包后的代码</li>
+</ul>
+<h2 id="什么是loader"><a href="#什么是loader" class="headerlink" title="什么是loader"></a>什么是loader</h2><p>我们可以看到loader实际上是在module的rules下，用对象的方式表示了需要处理的文件类型，和需要用哪些loader做处理</p>
+<blockquote>
+<p>loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。</p>
+</blockquote>
+<ul>
+<li>处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行</li>
+<li>第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码</li>
+</ul>
+<h2 id="什么是plugin"><a href="#什么是plugin" class="headerlink" title="什么是plugin"></a>什么是plugin</h2><blockquote>
+<p>在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。</p>
+</blockquote>
+<h2 id="loader和plugin的区别"><a href="#loader和plugin的区别" class="headerlink" title="loader和plugin的区别"></a>loader和plugin的区别</h2><p>对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的<strong>文件转换过程</strong></p>
+<p><strong>plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务</strong></p>
+<p>下面我们来看一个例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyPlugin</span></span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"MyPlugin constructor:"</span>, options);</span><br><span class="line">  &#125;</span><br><span class="line">  apply(compiler)&#123;</span><br><span class="line">    compiler.plugin(<span class="string">"compilation"</span>, compilation =&gt; &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"MyPlugin"</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = MyPlugin;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// webpack.config.js配置：</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  ...</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MyPlugin(&#123;<span class="attr">param</span>: <span class="string">"my plugin"</span>&#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>使用该plugin后，执行的顺序：</p>
+<ol>
+<li>webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例</li>
+<li>在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件</li>
+<li>并且可以通过compiler对象去操作webpack</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/01/22/Wepack-Tips/">webpack中loader和plugin之间的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年01月22日 - 10:38</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/01/22/Wepack-Tips/" title="webpack中loader和plugin之间的区别">https://blog.lifesli.com/2020/01/22/Wepack-Tips/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/01/22/Wepack-Tips/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/Es6-arrowFunc-arguments/" rel="prev" title="es6中箭头函数没了arguments怎么办？">
+      <i class="fa fa-chevron-left"></i> es6中箭头函数没了arguments怎么办？
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/FE-guide-safe/" rel="next" title="前端常见知识点整理 ---- 网络安全">
+      前端常见知识点整理 ---- 网络安全 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF%E7%9F%A5%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">背景知识</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFloader"><span class="nav-number">2.1.</span> <span class="nav-text">什么是loader</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFplugin"><span class="nav-number">2.2.</span> <span class="nav-text">什么是plugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#loader%E5%92%8Cplugin%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">2.3.</span> <span class="nav-text">loader和plugin的区别</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/01/22/Wepack-Tips/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/01/22/Wepack-Tips/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/01/22/Wepack-Tips/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8171e596ca8507b13fa735d65fcdc6c4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/11/SSR/index.html b/ja/2020/02/11/SSR/index.html
new file mode 100644
index 0000000000..ab940c21f0
--- /dev/null
+++ b/ja/2020/02/11/SSR/index.html
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:type" content="article">
+<meta property="og:title" content="SSR">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/11/SSR/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是SSR传统浏览器的vue纯浏览器渲染浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js ssr浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器 SSR需要那些东西手写SSR特性：  每一次访问必须新建一个vue实例 只会触发组件的 beforeCreate和created钩子  核心库  vue vue-server-render">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="服务端渲染">
+<meta property="article:tag" content="同构技术">
+<meta property="article:tag" content="SSR">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/11/SSR/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>SSR | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          SSR
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/11/SSR/">SSR</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/11/SSR/" title="SSR">https://blog.lifesli.com/2020/02/11/SSR/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/SSR/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" rel="tag"># 服务端渲染</a>
+              <a href="/ja/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" rel="tag"># 同构技术</a>
+              <a href="/ja/tags/SSR/" rel="tag"># SSR</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/01/22/FE-guide-safe/" rel="prev" title="前端常见知识点整理 ---- 网络安全">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/11/restful-architecture/" rel="next" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      NodeJS 下 RESTful 架构的最佳实践（课堂笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFSSR"><span class="nav-number">1.</span> <span class="nav-text">什么是SSR</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84vue%E7%BA%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93"><span class="nav-number">1.1.</span> <span class="nav-text">传统浏览器的vue纯浏览器渲染</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ssr"><span class="nav-number">1.2.</span> <span class="nav-text">ssr</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#SSR%E9%9C%80%E8%A6%81%E9%82%A3%E4%BA%9B%E4%B8%9C%E8%A5%BF"><span class="nav-number">1.3.</span> <span class="nav-text">SSR需要那些东西</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99SSR"><span class="nav-number">1.4.</span> <span class="nav-text">手写SSR</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue-next"><span class="nav-number">2.</span> <span class="nav-text">vue + next</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-1"><span class="nav-number">2.2.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80-2"><span class="nav-number">2.3.</span> <span class="nav-text">前言</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/11/SSR/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/SSR/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/SSR/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '93ef368c393868ae7aa603ef7fdb4ab1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/11/restful-architecture/index.html b/ja/2020/02/11/restful-architecture/index.html
new file mode 100644
index 0000000000..adbf29c086
--- /dev/null
+++ b/ja/2020/02/11/restful-architecture/index.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:type" content="article">
+<meta property="og:title" content="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/11/restful-architecture/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  什么是 RESTful REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。  实际上就是 url 风格&#x2F; 路由风格 ， 给出一种写路由的原则  —  面向资源tip：静态路由利于seo优化 api&#x2F;news&#x2F;1，动态路由不利于seo优化 api&#x2F;news?id&#x3D;1 原来的风格| 路由 | 功能 | 描述 || —-">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-11T16:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RESTful">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/11/restful-architecture/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>NodeJS 下 RESTful 架构的最佳实践（课堂笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/11/restful-architecture/">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月11日 - 16:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/11/restful-architecture/" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">https://blog.lifesli.com/2020/02/11/restful-architecture/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/11/restful-architecture/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/RESTful/" rel="tag"># RESTful</a>
+              <a href="/ja/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/11/SSR/" rel="prev" title="SSR">
+      <i class="fa fa-chevron-left"></i> SSR
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/12/print-table-problem/" rel="next" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      由打印引起的一点小问题，写table时别忘了写thead和tbody <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-RESTful"><span class="nav-number">1.</span> <span class="nav-text">什么是 RESTful</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/11/restful-architecture/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/11/restful-architecture/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/11/restful-architecture/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '85c741f97a72ff2df60cc49821b781c9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/12/print-table-problem/index.html b/ja/2020/02/12/print-table-problem/index.html
new file mode 100644
index 0000000000..cc94b94f71
--- /dev/null
+++ b/ja/2020/02/12/print-table-problem/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:type" content="article">
+<meta property="og:title" content="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/12/print-table-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这两天复工，公司一个小伙伴在群里问了一个问题  如何在打印表格的时候，让超过一页的表格分割线不被截断  说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 tr td 就好了，接着他又发来一张">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-12T08:30:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/12/print-table-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>由打印引起的一点小问题，写table时别忘了写thead和tbody | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          由打印引起的一点小问题，写table时别忘了写thead和tbody
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/12/print-table-problem/">由打印引起的一点小问题，写table时别忘了写thead和tbody</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 08:30</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/12/print-table-problem/" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">https://blog.lifesli.com/2020/02/12/print-table-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/print-table-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/11/restful-architecture/" rel="prev" title="NodeJS 下 RESTful 架构的最佳实践（课堂笔记）">
+      <i class="fa fa-chevron-left"></i> NodeJS 下 RESTful 架构的最佳实践（课堂笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/12/vue-proxyTable-problem/" rel="next" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      Could not proxy request XXX from localhost:8080 to localhost:8081 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/12/print-table-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/print-table-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/print-table-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ef40195ab52812ccab687f88af4be2a7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/12/vue-proxyTable-problem/index.html b/ja/2020/02/12/vue-proxyTable-problem/index.html
new file mode 100644
index 0000000000..14a8fca3ce
--- /dev/null
+++ b/ja/2020/02/12/vue-proxyTable-problem/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Could not proxy request XXX from localhost:8080 to localhost:8081">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/12/vue-proxyTable-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，在写转发服务器的时候没写协议头，也就是在 target 那没写 http:&#x2F;&#x2F; 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-12T09:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="奇怪问题">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/12/vue-proxyTable-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Could not proxy request XXX from localhost:8080 to localhost:8081 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Could not proxy request XXX from localhost:8080 to localhost:8081
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/12/vue-proxyTable-problem/">Could not proxy request XXX from localhost:8080 to localhost:8081</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月12日 - 09:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/12/vue-proxyTable-problem/" title="Could not proxy request XXX from localhost:8080 to localhost:8081">https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" rel="tag"># 奇怪问题</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/12/print-table-problem/" rel="prev" title="由打印引起的一点小问题，写table时别忘了写thead和tbody">
+      <i class="fa fa-chevron-left"></i> 由打印引起的一点小问题，写table时别忘了写thead和tbody
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" rel="next" title="使用node开发自定义cli工具">
+      使用node开发自定义cli工具 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/12/vue-proxyTable-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/12/vue-proxyTable-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/12/vue-proxyTable-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '32e6f019d51344c44b62e83e0531b7eb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/19/develop-custom-cli-tools-using-node/index.html b/ja/2020/02/19/develop-custom-cli-tools-using-node/index.html
new file mode 100644
index 0000000000..918023d2d5
--- /dev/null
+++ b/ja/2020/02/19/develop-custom-cli-tools-using-node/index.html
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用node开发自定义cli工具">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/19/develop-custom-cli-tools-using-node/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。 今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-19T15:00:00.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.451Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="脚手架">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/19/develop-custom-cli-tools-using-node/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>使用node开发自定义cli工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用node开发自定义cli工具
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/19/develop-custom-cli-tools-using-node/">使用node开发自定义cli工具</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月19日 - 15:00</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" title="使用node开发自定义cli工具">https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" rel="tag"># 脚手架</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/12/vue-proxyTable-problem/" rel="prev" title="Could not proxy request XXX from localhost:8080 to localhost:8081">
+      <i class="fa fa-chevron-left"></i> Could not proxy request XXX from localhost:8080 to localhost:8081
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" rel="next" title="Vue 响应式原理的实现（课程笔记）">
+      Vue 响应式原理的实现（课程笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%87%86%E5%A4%87"><span class="nav-number">2.</span> <span class="nav-text">准备</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="nav-number">3.</span> <span class="nav-text">初始化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%8C%87%E4%BB%A4"><span class="nav-number">4.</span> <span class="nav-text">创建指令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#github%E4%B8%8A%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%E4%BB%93%E5%BA%93"><span class="nav-number">4.1.</span> <span class="nav-text">github上创建模板仓库</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E9%98%B6%E5%A2%9E%E5%8A%A0%E5%8A%9F%E8%83%BD"><span class="nav-number">4.2.</span> <span class="nav-text">进阶增加功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8inquirer%E8%BF%9B%E8%A1%8C%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%AD%94%E8%AF%A2"><span class="nav-number">4.2.1.</span> <span class="nav-text">使用inquirer进行命令行答询</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8handlebars%E4%BF%AE%E6%94%B9package-json"><span class="nav-number">4.2.2.</span> <span class="nav-text">使用handlebars修改package.json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8ora%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E4%B8%AD%E6%98%BE%E7%A4%BA%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81"><span class="nav-number">4.2.3.</span> <span class="nav-text">使用ora在命令行中显示加载状态</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8chalk%E5%92%8Clog-symbols%E5%A2%9E%E5%8A%A0%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%BE%93%E5%87%BA%E6%A0%B7%E5%BC%8F"><span class="nav-number">4.2.4.</span> <span class="nav-text">使用chalk和log-symbols增加命令行输出样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9B%86%E5%A4%A7%E6%88%90"><span class="nav-number">4.2.5.</span> <span class="nav-text">集大成</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%91%E5%B8%83%E5%88%B0npm%E4%B8%8A"><span class="nav-number">5.</span> <span class="nav-text">发布到npm上</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%8E%E8%AE%B0"><span class="nav-number">6.</span> <span class="nav-text">后记</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0a85dca20bc91e9ac0d3a66eba1a95d0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/21/Implementation-of-the-vue-response-principle/index.html b/ja/2020/02/21/Implementation-of-the-vue-response-principle/index.html
new file mode 100644
index 0000000000..d6b9450390
--- /dev/null
+++ b/ja/2020/02/21/Implementation-of-the-vue-response-principle/index.html
@@ -0,0 +1,693 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Vue 响应式原理的实现（课程笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/21/Implementation-of-the-vue-response-principle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。 Vue2 原理什么是 definePropertydefineProperty 其实是定义对象属性用的  defineProperty 其实并不是核">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-21T23:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Vue">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Vue 响应式原理的实现（课程笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Vue 响应式原理的实现（课程笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/">Vue 响应式原理的实现（课程笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月21日 - 23:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" title="Vue 响应式原理的实现（课程笔记）">https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Vue/" rel="tag"># Vue</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" rel="prev" title="使用node开发自定义cli工具">
+      <i class="fa fa-chevron-left"></i> 使用node开发自定义cli工具
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" rel="next" title="v8引擎如何回收内存（笔记）">
+      v8引擎如何回收内存（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue2-%E5%8E%9F%E7%90%86"><span class="nav-number">2.</span> <span class="nav-text">Vue2 原理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-defineProperty"><span class="nav-number">2.1.</span> <span class="nav-text">什么是 defineProperty</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-%E4%B8%AD%E4%BB%8E%E6%94%B9%E5%8F%98%E4%B8%80%E4%B8%AA%E6%95%B0%E6%8D%AE%E5%88%B0%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.2.</span> <span class="nav-text">Vue 中从改变一个数据到发生改变的过程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%BC%E5%A4%96%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9%E2%80%94%E6%95%B0%E7%BB%84%E6%80%8E%E4%B9%88%E7%9B%91%E5%90%AC"><span class="nav-number">2.2.1.</span> <span class="nav-text">格外注意的地方—数组怎么监听</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue3-%E5%AE%9E%E7%8E%B0%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">2.3.</span> <span class="nav-text">Vue3 实现双向绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%94%B9%E7%94%A8-Proxy"><span class="nav-number">2.3.1.</span> <span class="nav-text">为什么改用 Proxy</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%98%E8%83%BD%E7%94%A8-Proxy-%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">还能用 Proxy 做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%A0%A1%E9%AA%8C%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.3.1.1.1.</span> <span class="nav-text">校验类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9C%9F%E6%AD%A3%E7%9A%84%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F"><span class="nav-number">2.3.1.1.2.</span> <span class="nav-text">真正的私有变量</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%99%9A%E6%8B%9FDom%E5%92%8Cdiff%E7%AE%97%E6%B3%95"><span class="nav-number">2.4.</span> <span class="nav-text">虚拟Dom和diff算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="nav-number">2.5.</span> <span class="nav-text">vue 性能优化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e5b61d22575e73fbd665ff493718c803',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/23/V8-engine-memory-management-and-optimization/index.html b/ja/2020/02/23/V8-engine-memory-management-and-optimization/index.html
new file mode 100644
index 0000000000..13737202d0
--- /dev/null
+++ b/ja/2020/02/23/V8-engine-memory-management-and-optimization/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:type" content="article">
+<meta property="og:title" content="v8引擎如何回收内存（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/23/V8-engine-memory-management-and-optimization/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  V8引擎如何回收垃圾为什么我们要关注内存 防止页面占用内存过大，引起客户端卡顿，甚至无响应 Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出v8引擎的内存回收机制v8的内存分配新生代内存空间 from to老生代内存空间内存大小 和操作系统有关 — 64位（1.4G）32位（0.7G） 64位下 新生代（64MB） 老">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-23T08:00:00.000Z">
+<meta property="article:modified_time" content="2020-02-23T07:57:18.745Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="内存回收">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>v8引擎如何回收内存（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          v8引擎如何回收内存（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-02-23 08:00:00 / 修正日：07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/">v8引擎如何回收内存（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月23日 - 08:00</p>
+      <p><span>最后更新:</span>2020年02月23日 - 07:57</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" title="v8引擎如何回收内存（笔记）">https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" rel="tag"># 内存回收</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" rel="prev" title="Vue 响应式原理的实现（课程笔记）">
+      <i class="fa fa-chevron-left"></i> Vue 响应式原理的实现（课程笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/24/Vue-plug-in-development/" rel="next" title="vue插件开发（笔记）">
+      vue插件开发（笔记） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E5%9B%9E%E6%94%B6%E5%9E%83%E5%9C%BE"><span class="nav-number">1.</span> <span class="nav-text">V8引擎如何回收垃圾</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E8%A6%81%E5%85%B3%E6%B3%A8%E5%86%85%E5%AD%98"><span class="nav-number">1.1.</span> <span class="nav-text">为什么我们要关注内存</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v8%E5%BC%95%E6%93%8E%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">v8引擎的内存回收机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v8%E7%9A%84%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D"><span class="nav-number">1.2.1.</span> <span class="nav-text">v8的内存分配</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%AD%98%E5%A4%A7%E5%B0%8F"><span class="nav-number">1.2.2.</span> <span class="nav-text">内存大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E7%AE%97%E6%B3%95"><span class="nav-number">1.2.3.</span> <span class="nav-text">垃圾回收算法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#V8%E6%98%AF%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E5%8F%98%E9%87%8F%E7%9A%84"><span class="nav-number">1.2.4.</span> <span class="nav-text">V8是如何处理变量的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E5%A4%84%E7%90%86"><span class="nav-number">1.2.5.</span> <span class="nav-text">变量处理</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8BV8%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8%E6%83%85%E5%86%B5"><span class="nav-number">2.</span> <span class="nav-text">如何查看V8内存使用情况</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%B3%A8%E6%84%8F%E5%86%85%E5%AD%98%E4%BD%BF%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">如何注意内存使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E5%86%85%E5%AD%98%E7%9A%84%E6%8A%80%E5%B7%A7"><span class="nav-number">2.1.1.</span> <span class="nav-text">优化内存的技巧</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E6%AD%A2%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="nav-number">2.1.2.</span> <span class="nav-text">防止内存泄漏</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '55ee92bd1fe6a9d53fd580329a16be79',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/02/24/Vue-plug-in-development/index.html b/ja/2020/02/24/Vue-plug-in-development/index.html
new file mode 100644
index 0000000000..77fad70fa0
--- /dev/null
+++ b/ja/2020/02/24/Vue-plug-in-development/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:type" content="article">
+<meta property="og:title" content="vue插件开发（笔记）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/02/24/Vue-plug-in-development/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  vue插件开发 Vue.use({install(Vues){}})  Vue.use把给到的内容执行一下举例 1234function a()&amp;#123;	console.log(&amp;#x27;a&amp;#x27;)&amp;#125;Vue.use(a) &#x2F;&#x2F; a 有 install 就执行 install 1234567function a()&amp;#123;	console.l">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-02-24T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/02/24/Vue-plug-in-development/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>vue插件开发（笔记） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          vue插件开发（笔记）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/02/24/Vue-plug-in-development/">vue插件开发（笔记）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年02月24日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/02/24/Vue-plug-in-development/" title="vue插件开发（笔记）">https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%8F%92%E4%BB%B6/" rel="tag"># 插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" rel="prev" title="v8引擎如何回收内存（笔记）">
+      <i class="fa fa-chevron-left"></i> v8引擎如何回收内存（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="next" title="使用阿里镜像加速brew（转载）">
+      使用阿里镜像加速brew（转载） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#vue%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91"><span class="nav-number">1.</span> <span class="nav-text">vue插件开发</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-use"><span class="nav-number">1.1.</span> <span class="nav-text">Vue.use</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/02/24/Vue-plug-in-development/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/02/24/Vue-plug-in-development/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/02/24/Vue-plug-in-development/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '880597f1d093ae229dcbc879450fb8ad',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html b/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
new file mode 100644
index 0000000000..a48c24a8e0
--- /dev/null
+++ b/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用阿里镜像加速brew（转载）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  使用 Alibaba 的 Homebrew 镜像源进行加速平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：  brew.git homebrew-core.git homebrew-bottles通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址  1. 替换 &#x2F; 还原 brew.git 仓库地址123456789# 替换">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-03T22:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="HomeBrew">
+<meta property="article:tag" content="Mac">
+<meta property="article:tag" content="海外提速">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>使用阿里镜像加速brew（转载） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          使用阿里镜像加速brew（转载）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">使用阿里镜像加速brew（转载）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月03日 - 22:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" title="使用阿里镜像加速brew（转载）">https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/HomeBrew/" rel="tag"># HomeBrew</a>
+              <a href="/ja/tags/Mac/" rel="tag"># Mac</a>
+              <a href="/ja/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" rel="tag"># 海外提速</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/02/24/Vue-plug-in-development/" rel="prev" title="vue插件开发（笔记）">
+      <i class="fa fa-chevron-left"></i> vue插件开发（笔记）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/23/path-join-vs-path-resolve/" rel="next" title="path.join 与 path.resolve 的区别">
+      path.join 与 path.resolve 的区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Alibaba-%E7%9A%84-Homebrew-%E9%95%9C%E5%83%8F%E6%BA%90%E8%BF%9B%E8%A1%8C%E5%8A%A0%E9%80%9F"><span class="nav-number">1.</span> <span class="nav-text">使用 Alibaba 的 Homebrew 镜像源进行加速</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-brew-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.1.</span> <span class="nav-text">1. 替换 &#x2F; 还原 brew.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-core-git-%E4%BB%93%E5%BA%93%E5%9C%B0%E5%9D%80"><span class="nav-number">1.2.</span> <span class="nav-text">2. 替换 &#x2F; 还原 homebrew-core.git 仓库地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%9B%BF%E6%8D%A2-%E8%BF%98%E5%8E%9F-homebrew-bottles-%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">1.3.</span> <span class="nav-text">3. 替换 &#x2F; 还原 homebrew-bottles 访问地址</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-zsh-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.1.</span> <span class="nav-text">3.1 zsh 终端操作方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-bash-%E7%BB%88%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.2.</span> <span class="nav-text">3.2 bash 终端操作方式</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a0bf77749ca7606e323f2ddb3cd3eb73',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/23/path-join-vs-path-resolve/index.html b/ja/2020/03/23/path-join-vs-path-resolve/index.html
new file mode 100644
index 0000000000..7534080b09
--- /dev/null
+++ b/ja/2020/03/23/path-join-vs-path-resolve/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:type" content="article">
+<meta property="og:title" content="path.join 与 path.resolve 的区别">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/23/path-join-vs-path-resolve/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="path.join 与 path.resolve 的区别 对于以&#x2F;开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以&#x2F;开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。   12path.join(&amp;#x27;&#x2F;a&amp;#x27;, &amp;#x27;&#x2F;b&amp;#x27;) &#x2F;&#x2F; &amp;#x27;a&#x2F;b&amp;#x27;path.">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-23T14:42:52.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="NodeJS">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/23/path-join-vs-path-resolve/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>path.join 与 path.resolve 的区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          path.join 与 path.resolve 的区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/23/path-join-vs-path-resolve/">path.join 与 path.resolve 的区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月23日 - 14:42</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/23/path-join-vs-path-resolve/" title="path.join 与 path.resolve 的区别">https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/NodeJS/" rel="tag"># NodeJS</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" rel="prev" title="使用阿里镜像加速brew（转载）">
+      <i class="fa fa-chevron-left"></i> 使用阿里镜像加速brew（转载）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-reduce/" rel="next" title="自己动手实现系列 ---- Array.prototype.reduce">
+      自己动手实现系列 ---- Array.prototype.reduce <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#path-join-%E4%B8%8E-path-resolve-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.</span> <span class="nav-text">path.join 与 path.resolve 的区别</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/23/path-join-vs-path-resolve/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/23/path-join-vs-path-resolve/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/23/path-join-vs-path-resolve/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6631e0e5575e39fd5f0a8c627b7fb420',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-EventEmitter/index.html b/ja/2020/03/24/do-it-yourselfery-EventEmitter/index.html
new file mode 100644
index 0000000000..00758c717c
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-EventEmitter/index.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- EventEmitter(事件触发器)">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-EventEmitter/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 EventEmitter 创建一个 Event 类，包含构造函数、绑定、解绑、触发方法 on 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组 off 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件 emit 触发event事件，并把参数">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T15:45:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.452Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- EventEmitter(事件触发器) | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- EventEmitter(事件触发器)
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/">自己动手实现系列 ---- EventEmitter(事件触发器)</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:45</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" title="自己动手实现系列 ---- EventEmitter(事件触发器)">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="prev" title="自己动手实现系列 ---- Vue双向绑定">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Vue双向绑定
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-async-await/" rel="next" title="自己动手实现系列 ---- async、await">
+      自己动手实现系列 ---- async、await <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-EventEmitter"><span class="nav-number">1.</span> <span class="nav-text">实现一个 EventEmitter</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c93cfd0234c4f008b7c519910fbb75b7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-async-await/index.html b/ja/2020/03/24/do-it-yourselfery-async-await/index.html
new file mode 100644
index 0000000000..698eacf7be
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-async-await/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- async、await">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-async-await/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理就是利用 generator （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制 实现123456789101112131415function _asyncToGenerator(fn) &amp;#123;  return function() &amp;#123;    var self &#x3D; this, a">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T15:50:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-async-await/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- async、await | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- async、await
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-async-await/">自己动手实现系列 ---- async、await</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:50</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-async-await/" title="自己动手实现系列 ---- async、await">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" rel="prev" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- EventEmitter(事件触发器)
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-call-apply/" rel="next" title="自己动手实现系列 ---- call、apply、bind">
+      自己动手实现系列 ---- call、apply、bind <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-async-await/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f85c734ee4c7f229d0758b2b1e273112',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-call-apply/index.html b/ja/2020/03/24/do-it-yourselfery-call-apply/index.html
new file mode 100644
index 0000000000..50f373047c
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-call-apply/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- call、apply、bind">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-call-apply/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版先来看一个call实例，看看call到底做了什么： 1234567let foo &#x3D; &amp;#123;  value: 1&amp;#125;;function bar() &amp;#123;  console.log(this.value);&amp;#125;bar.call(foo); &#x2F;&#x2F; 1 从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T15:54:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.453Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-call-apply/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- call、apply、bind | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- call、apply、bind
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-call-apply/">自己动手实现系列 ---- call、apply、bind</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:54</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-call-apply/" title="自己动手实现系列 ---- call、apply、bind">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-async-await/" rel="prev" title="自己动手实现系列 ---- async、await">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- async、await
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/webpack-learning-1/" rel="next" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-call-apply/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0a815d3ec174165d1d84114318199ef4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-create/index.html b/ja/2020/03/24/do-it-yourselfery-create/index.html
new file mode 100644
index 0000000000..e99d930336
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-create/index.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Object.create()">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-create/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个 Object.create() 方法 创建一个空匿名函数 函数原型对象指向传入对象实例 返回构造函数创建的实例  12345function create &#x3D;  function (o) &amp;#123;    var F &#x3D; function () &amp;#123;&amp;#125;;    F.prototype &#x3D; o;    return new F();&amp;#125;;">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-create/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Object.create() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Object.create()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-create/">自己动手实现系列 ---- Object.create()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-create/" title="自己动手实现系列 ---- Object.create()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="prev" title="自己动手实现系列 ---- 事件代理">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- 事件代理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-map/" rel="next" title="自己动手实现系列 ---- Array.prototype.map()">
+      自己动手实现系列 ---- Array.prototype.map() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Object-create-%E6%96%B9%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">实现一个 Object.create() 方法</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-create/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-create/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-create/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dcf196133283654cd4c67c010e1890ee',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-flat/index.html b/ja/2020/03/24/do-it-yourselfery-flat/index.html
new file mode 100644
index 0000000000..0898c3c327
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-flat/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.flat()函数">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-flat/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理将多层数组扁平化 实现1234567891011Array.prototype.myFlat &#x3D; function() &amp;#123;  var arr &#x3D; [];  this.forEach((item)&#x3D;&gt;&amp;#123;    if(Array.isArray(item))&amp;#123;      arr &#x3D; arr.concat(item.myFlat()); &#x2F;&#x2F; 如果是数组的话继续循">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T13:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.462Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-flat/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.flat()函数 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.flat()函数
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-flat/">自己动手实现系列 ---- Array.prototype.flat()函数</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-flat/" title="自己动手实现系列 ---- Array.prototype.flat()函数">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-isArray/" rel="prev" title="自己动手实现系列 ---- Array.isArray">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.isArray
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" rel="next" title="自己动手实现系列 ---- 事件代理">
+      自己动手实现系列 ---- 事件代理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-flat/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-flat/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-flat/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'abcf077c7f4f2e6bc40887a5274d1eab',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-isArray/index.html b/ja/2020/03/24/do-it-yourselfery-isArray/index.html
new file mode 100644
index 0000000000..be128aef4e
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-isArray/index.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.isArray">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-isArray/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个Array.isArray思路很简单，就是利用 Object.prototype.toString 123Array.myIsArray &#x3D; function(o) &amp;#123;   return Object.prototype.toString.call(Object(o)) &#x3D;&#x3D;&#x3D; &#39;[object Array]&#39;; &amp;#125;;">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T13:30:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.463Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-isArray/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.isArray | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.isArray
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-isArray/">自己动手实现系列 ---- Array.isArray</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 13:30</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-isArray/" title="自己动手实现系列 ---- Array.isArray">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-new/" rel="prev" title="自己动手实现系列 ---- new">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- new
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-flat/" rel="next" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      自己动手实现系列 ---- Array.prototype.flat()函数 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAArray-isArray"><span class="nav-number">1.</span> <span class="nav-text">实现一个Array.isArray</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-isArray/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6d459834f008409daa6356f2742fe361',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-map/index.html b/ja/2020/03/24/do-it-yourselfery-map/index.html
new file mode 100644
index 0000000000..9e307396ad
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-map/index.html
@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.map()">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-map/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原理先看看 reduce 和 map 的使用方法 12let new_array &#x3D; arr.map(function callback(currentValue[, index[,array) &amp;#123;&#x2F;* Return element for new_array *&#x2F; &amp;#125;[, thisArg])let result &#x3D; arr.reduce(callback(accumulato">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T15:20:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-map/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.map() | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.map()
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-map/">自己动手实现系列 ---- Array.prototype.map()</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:20</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-map/" title="自己动手实现系列 ---- Array.prototype.map()">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-create/" rel="prev" title="自己动手实现系列 ---- Object.create()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Object.create()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" rel="next" title="自己动手实现系列 ---- Vue双向绑定">
+      自己动手实现系列 ---- Vue双向绑定 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">2.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-map/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-map/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-map/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '87654a0e0e2f98bc98678ff9d3c5e8de',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-new/index.html b/ja/2020/03/24/do-it-yourselfery-new/index.html
new file mode 100644
index 0000000000..2591401b36
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-new/index.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- new">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-new/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现一个new操作符我们首先知道new做了什么：  创建一个空的简单 JavaScript 对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤（1）新创建的对象作为 this 的上下文 如果该函数没有返回对象，则返回 this  知道new做了什么，接下来我们就来实现它 123456789101112131415function create()&amp;#123;  &#x2F;&#x2F; 创建一个">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.467Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-new/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- new | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- new
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-new/">自己动手实现系列 ---- new</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-new/" title="自己动手实现系列 ---- new">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-reduce/" rel="prev" title="自己动手实现系列 ---- Array.prototype.reduce">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.reduce
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-isArray/" rel="next" title="自己动手实现系列 ---- Array.isArray">
+      自己动手实现系列 ---- Array.isArray <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAnew%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="nav-number">1.</span> <span class="nav-text">实现一个new操作符</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-new/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-new/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-new/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'cf74224d7c08535daa399efd0911e3c9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/do-it-yourselfery-reduce/index.html b/ja/2020/03/24/do-it-yourselfery-reduce/index.html
new file mode 100644
index 0000000000..2277ba4bcc
--- /dev/null
+++ b/ja/2020/03/24/do-it-yourselfery-reduce/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Array.prototype.reduce">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-reduce/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="原版1Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])  自己动手12345678Array.prototype.myReduce &#x3D; function(callback, initialValue) &amp;#123;  let accumulator &#x3D; init">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T04:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-reduce/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Array.prototype.reduce | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Array.prototype.reduce
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-reduce/">自己动手实现系列 ---- Array.prototype.reduce</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 04:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-reduce/" title="自己动手实现系列 ---- Array.prototype.reduce">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/23/path-join-vs-path-resolve/" rel="prev" title="path.join 与 path.resolve 的区别">
+      <i class="fa fa-chevron-left"></i> path.join 与 path.resolve 的区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-new/" rel="next" title="自己动手实现系列 ---- new">
+      自己动手实现系列 ---- new <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">原版</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B"><span class="nav-number">2.</span> <span class="nav-text">自己动手</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-reduce/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '526eaf28424799803c52625501edf729',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html" "b/ja/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
new file mode 100644
index 0000000000..6f9cbbf0d0
--- /dev/null
+++ "b/ja/2020/03/24/do-it-yourselfery-\344\272\213\344\273\266\344\273\243\347\220\206/index.html"
@@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- 事件代理">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="实现123456789101112131415161718192021&lt;ul id&#x3D;&quot;color-list&quot;&gt;  &lt;li&gt;red&lt;&#x2F;li&gt;  &lt;li&gt;yellow&lt;&#x2F;li&gt;  &lt;li&gt;blue&lt;&#x2F;li&gt;  &lt;li&gt;green&lt;&#x2F;li&gt;  &lt;li&gt;black&lt;&#x2F;li&gt;">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T14:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.468Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- 事件代理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- 事件代理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">自己动手实现系列 ---- 事件代理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 14:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" title="自己动手实现系列 ---- 事件代理">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-flat/" rel="prev" title="自己动手实现系列 ---- Array.prototype.flat()函数">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.flat()函数
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-create/" rel="next" title="自己动手实现系列 ---- Object.create()">
+      自己动手实现系列 ---- Object.create() <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0"><span class="nav-number">1.</span> <span class="nav-text">实现</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '21a1466d43169a547b410d904115b945',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html" "b/ja/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
new file mode 100644
index 0000000000..3d5f2cd949
--- /dev/null
+++ "b/ja/2020/03/24/do-it-yourselfery-\345\217\214\345\220\221\347\273\221\345\256\232/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:type" content="article">
+<meta property="og:title" content="自己动手实现系列 ---- Vue双向绑定">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Vue 2.x 的 Object.defineProperty 版本1234567891011121314151617181920&#x2F;&#x2F; 数据const data &#x3D; &amp;#123;  text: &#39;default&#39;&amp;#125;;const input &#x3D; document.getElementById(&#39;input&#39;);const span &#x3D; document.getElementById(&#39;sp">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-03-24T15:40:22.000Z">
+<meta property="article:modified_time" content="2020-04-02T03:20:12.469Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="自己动手实现系列">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>自己动手实现系列 ---- Vue双向绑定 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          自己动手实现系列 ---- Vue双向绑定
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">自己动手实现系列 ---- Vue双向绑定</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 15:40</p>
+      <p><span>最后更新:</span>2020年04月02日 - 03:20</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" title="自己动手实现系列 ---- Vue双向绑定">https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" rel="tag"># 自己动手实现系列</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-map/" rel="prev" title="自己动手实现系列 ---- Array.prototype.map()">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- Array.prototype.map()
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" rel="next" title="自己动手实现系列 ---- EventEmitter(事件触发器)">
+      自己动手实现系列 ---- EventEmitter(事件触发器) <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-2-x-%E7%9A%84-Object-defineProperty-%E7%89%88%E6%9C%AC"><span class="nav-number">1.</span> <span class="nav-text">Vue 2.x 的 Object.defineProperty 版本</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue-3-x-%E7%9A%84-proxy-%E7%89%88%E6%9C%AC"><span class="nav-number">2.</span> <span class="nav-text">Vue 3.x 的 proxy 版本</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6564f5e5ca7b723824665834355966e3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/03/24/webpack-learning-1/index.html b/ja/2020/03/24/webpack-learning-1/index.html
new file mode 100644
index 0000000000..1795bccb9c
--- /dev/null
+++ b/ja/2020/03/24/webpack-learning-1/index.html
@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:type" content="article">
+<meta property="og:title" content="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/03/24/webpack-learning-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="推荐序这里是我自己写的，看了这篇文章把我零碎的 webpack 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 webpack 了解服用更佳。2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言2020年即将到来,在众多前端的招聘要求里, webpack 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 cr">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg">
+<meta property="og:image" content="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg">
+<meta property="article:published_time" content="2020-03-24T20:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Webpack">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/03/24/webpack-learning-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/03/24/webpack-learning-1/">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年03月24日 - 20:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/03/24/webpack-learning-1/" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">https://blog.lifesli.com/2020/03/24/webpack-learning-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/03/24/webpack-learning-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Webpack/" rel="tag"># Webpack</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/do-it-yourselfery-call-apply/" rel="prev" title="自己动手实现系列 ---- call、apply、bind">
+      <i class="fa fa-chevron-left"></i> 自己动手实现系列 ---- call、apply、bind
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/03/source-code-react-diff/" rel="next" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      React 源码剖析系列 － 不可思议的 react diff【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8E%A8%E8%8D%90%E5%BA%8F"><span class="nav-number">1.</span> <span class="nav-text">推荐序</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A5%E9%97%A8-%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%94%A8%E8%BF%99%E4%BA%9B%E5%B0%8F%E4%BE%8B%E5%AD%90%E8%AE%A9%E4%BD%A0%E7%86%9F%E6%82%89webpack%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.</span> <span class="nav-text">入门(一起来用这些小例子让你熟悉webpack的配置)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">2.1.1.</span> <span class="nav-text">webpack 是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">2.1.2.</span> <span class="nav-text">webpack 的核心概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"><span class="nav-number">2.1.3.</span> <span class="nav-text">初始化项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.4.</span> <span class="nav-text">开始我们自己的配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEhtml%E6%A8%A1%E6%9D%BF"><span class="nav-number">2.1.5.</span> <span class="nav-text">配置html模板</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%9A%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E5%A6%82%E4%BD%95%E5%BC%80%E5%8F%91"><span class="nav-number">2.1.5.1.</span> <span class="nav-text">多入口文件如何开发</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#clean-webpack-plugin"><span class="nav-number">2.1.5.2.</span> <span class="nav-text">clean-webpack-plugin</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%8C%E6%9C%9Bdist%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%9F%90%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8D%E8%A2%AB%E6%B8%85%E7%A9%BA"><span class="nav-number">2.1.5.2.1.</span> <span class="nav-text">希望dist目录下某个文件夹不被清空</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E7%94%A8CSS"><span class="nav-number">2.1.6.</span> <span class="nav-text">引用CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BAcss%E6%B7%BB%E5%8A%A0%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E7%BC%80"><span class="nav-number">2.1.6.1.</span> <span class="nav-text">为css添加浏览器前缀</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AApostcss-config-js%E6%96%87%E4%BB%B6%EF%BC%8C%E9%85%8D%E7%BD%AE%E5%A6%82%E4%B8%8B%EF%BC%9A"><span class="nav-number">2.1.6.1.1.</span> <span class="nav-text">在项目根目录下创建一个postcss.config.js文件，配置如下：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E5%9C%A8webpack-config-js%E9%87%8C%E9%85%8D%E7%BD%AE"><span class="nav-number">2.1.6.1.2.</span> <span class="nav-text">直接在webpack.config.js里配置</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86css"><span class="nav-number">2.1.6.2.</span> <span class="nav-text">拆分css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%86%E5%88%86%E5%A4%9A%E4%B8%AAcss"><span class="nav-number">2.1.6.3.</span> <span class="nav-text">拆分多个css</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%93%E5%8C%85-%E5%9B%BE%E7%89%87%E3%80%81%E5%AD%97%E4%BD%93%E3%80%81%E5%AA%92%E4%BD%93%E3%80%81%E7%AD%89%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.7.</span> <span class="nav-text">打包 图片、字体、媒体、等文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%A8babel%E8%BD%AC%E4%B9%89js%E6%96%87%E4%BB%B6"><span class="nav-number">2.1.8.</span> <span class="nav-text">用babel转义js文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BAvue%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.</span> <span class="nav-text">搭建vue开发环境</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90-vue%E6%96%87%E4%BB%B6"><span class="nav-number">2.2.1.</span> <span class="nav-text">解析.vue文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEwebpack-dev-server%E8%BF%9B%E8%A1%8C%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="nav-number">2.2.2.</span> <span class="nav-text">配置webpack-dev-server进行热更新</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4"><span class="nav-number">2.2.3.</span> <span class="nav-text">配置打包命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8C%BA%E5%88%86%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%8E%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83"><span class="nav-number">2.2.4.</span> <span class="nav-text">区分开发环境与生产环境</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%98%E5%8C%96webpack%E9%85%8D%E7%BD%AE"><span class="nav-number">2.3.</span> <span class="nav-text">优化webpack配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E9%80%9F%E5%BA%A6"><span class="nav-number">2.3.1.</span> <span class="nav-text">优化打包速度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%90%88%E7%90%86%E7%9A%84%E9%85%8D%E7%BD%AE-mode-%E5%8F%82%E6%95%B0%E4%B8%8E-devtool-%E5%8F%82%E6%95%B0"><span class="nav-number">2.3.1.1.</span> <span class="nav-text">合理的配置 mode 参数与 devtool 参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%A9%E5%B0%8F%E6%96%87%E4%BB%B6%E7%9A%84%E6%90%9C%E7%B4%A2%E8%8C%83%E5%9B%B4-%E9%85%8D%E7%BD%AEinclude-exclude-alias-noParse-extensions"><span class="nav-number">2.3.1.2.</span> <span class="nav-text">缩小文件的搜索范围(配置include exclude alias noParse extensions)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8HappyPack%E5%BC%80%E5%90%AF%E5%A4%9A%E8%BF%9B%E7%A8%8BLoader%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.3.1.3.</span> <span class="nav-text">使用HappyPack开启多进程Loader转换</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-webpack-parallel-uglify-plugin-%E5%A2%9E%E5%BC%BA%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9"><span class="nav-number">2.3.1.4.</span> <span class="nav-text">使用 webpack-parallel-uglify-plugin 增强代码压缩</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%BD%E7%A6%BB%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97"><span class="nav-number">2.3.1.5.</span> <span class="nav-text">抽离第三方模块</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E7%BC%93%E5%AD%98"><span class="nav-number">2.3.1.6.</span> <span class="nav-text">配置缓存</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF"><span class="nav-number">2.3.2.</span> <span class="nav-text">优化打包文件体积</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%95%E5%85%A5webpack-bundle-analyzer%E5%88%86%E6%9E%90%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6"><span class="nav-number">2.3.2.1.</span> <span class="nav-text">引入webpack-bundle-analyzer分析打包后的文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#externals"><span class="nav-number">2.3.2.2.</span> <span class="nav-text">externals</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Tree-shaking"><span class="nav-number">2.3.2.3.</span> <span class="nav-text">Tree-shaking</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack%E7%B3%BB%E5%88%97"><span class="nav-number">2.4.</span> <span class="nav-text">手写webpack系列</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99-webpack-loader"><span class="nav-number">2.4.1.</span> <span class="nav-text">手写 webpack loader</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#loader-%E7%BC%96%E5%86%99%E5%8E%9F%E5%88%99"><span class="nav-number">2.4.1.1.</span> <span class="nav-text">loader 编写原则</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99webpack-plugin"><span class="nav-number">2.4.2.</span> <span class="nav-text">手写webpack plugin</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack5-0%E7%9A%84%E6%97%B6%E4%BB%A3"><span class="nav-number">2.5.</span> <span class="nav-text">webpack5.0的时代</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E9%98%85%E8%AF%BB"><span class="nav-number">2.6.</span> <span class="nav-text">更多阅读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/03/24/webpack-learning-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/03/24/webpack-learning-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/03/24/webpack-learning-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'fd6ffe56bb6a14e2aa928bc7f89c63da',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/03/source-code-react-diff/index.html b/ja/2020/04/03/source-code-react-diff/index.html
new file mode 100644
index 0000000000..7418adf16d
--- /dev/null
+++ b/ja/2020/04/03/source-code-react-diff/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:type" content="article">
+<meta property="og:title" content="React 源码剖析系列 － 不可思议的 react diff【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/03/source-code-react-diff/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 Reac">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg">
+<meta property="og:image" content="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg">
+<meta property="og:image" content="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg">
+<meta property="og:image" content="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg">
+<meta property="article:published_time" content="2020-04-03T12:38:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="源码解析">
+<meta property="article:tag" content="React">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/03/source-code-react-diff/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>React 源码剖析系列 － 不可思议的 react diff【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          React 源码剖析系列 － 不可思议的 react diff【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+<span id="more"></span>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，让用户可以无需顾忌性能问题而”任性自由”的刷新页面，让开发者也可以无需关心 Virtual DOM 背后的运作原理，因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染，因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。</p>
+<p><em><strong>行文至此，可能会有读者质疑：React 无非就是引入 diff 这一概念，且 diff 算法也并非其首创，何必吹嘘的如此天花乱坠呢？</strong></em></p>
+<p>其实，正是因为 diff 算法的普识度高，就更应该认可 React 针对 diff 算法优化所做的努力与贡献，更能体现 React 开发者们的魅力与智慧！</p>
+<h2 id="传统-diff-算法"><a href="#传统-diff-算法" class="headerlink" title="传统 diff 算法"></a>传统 diff 算法</h2><p>计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。<a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">传统 diff 算法</a>通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着如果要展示1000个节点，就要依次执行上十亿次的比较。这种指数型的性能消耗对于前端渲染场景来说代价太高了！现今的 CPU 每秒钟能执行大约30亿条指令，即便是最高效的实现，也不可能在一秒内计算出差异情况。</p>
+<p>如果 React 只是单纯的引入 diff 算法而没有任何的优化改进，那么其效率是远远无法满足前端渲染所要求的性能。</p>
+<p>因此，想要将 diff 思想引入 Virtual DOM，就需要设计一种稳定高效的 diff 算法，而 React 做到了！</p>
+<p>那么，React diff 到底是如何实现的呢？</p>
+<h2 id="详解-React-diff"><a href="#详解-React-diff" class="headerlink" title="详解 React diff"></a>详解 React diff</h2><p>传统 diff 算法的复杂度为 O(n^3)，显然这是无法满足性能要求的。<em><strong>React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。</strong></em></p>
+<h3 id="diff-策略"><a href="#diff-策略" class="headerlink" title="diff 策略"></a>diff 策略</h3><ol>
+<li>Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。</li>
+<li>拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。</li>
+<li>对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。</li>
+</ol>
+<p>基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。</p>
+<ul>
+<li>tree diff</li>
+<li>component diff</li>
+<li>element diff</li>
+</ul>
+<blockquote>
+<p>本文中源码 <a target="_blank" rel="noopener" href="https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactMultiChild.js">ReactMultiChild.js</a></p>
+</blockquote>
+<h3 id="tree-diff"><a href="#tree-diff" class="headerlink" title="tree diff"></a>tree diff</h3><p>基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。</p>
+<p>既然 DOM 节点跨层级的移动操作少到可以忽略不计，针对这一现象，React 通过 updateDepth 对 Virtual DOM 树进行层级控制，只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。</p>
+<p><img src="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg" alt="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  updateDepth++;</span><br><span class="line">  <span class="keyword">var</span> errorThrown = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>._updateChildren(nextNestedChildrenElements, transaction, context);</span><br><span class="line">    errorThrown = <span class="literal">false</span>;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    updateDepth--;</span><br><span class="line">    <span class="keyword">if</span> (!updateDepth) &#123;</span><br><span class="line">      <span class="keyword">if</span> (errorThrown) &#123;</span><br><span class="line">        clearQueue();</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        processQueue();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>分析至此，<em><strong>大部分人可能都存在这样的疑问：如果出现了 DOM 节点跨层级的移动操作，React diff 会有怎样的表现呢？</strong></em>是的，对此我也好奇不已，不如试验一番。</p>
+<p>如下图，A 节点（包括其子节点）整个被移动到 D 节点下，由于 React 只会简单的考虑同层级节点的位置变换，而对于不同层级的节点，只有创建和删除操作。当根节点发现子节点中 A 消失了，就会直接销毁 A；当 D 发现多了一个子节点 A，则会创建新的 A（包括子节点）作为其子节点。此时，React diff 的执行情况：<em><strong>create A -&gt; create B -&gt; create C -&gt; delete A</strong></em>。</p>
+<p>由此可发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是以 A 为根节点的树被整个重新创建，这是一种影响 React 性能的操作，<em><strong>因此 React 官方建议不要进行 DOM 节点跨层级的操作</strong></em>。</p>
+<blockquote>
+<p>注意：在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg" alt="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg"></p>
+<h3 id="component-diff"><a href="#component-diff" class="headerlink" title="component diff"></a>component diff</h3><p>React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。</p>
+<ul>
+<li>如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。</li>
+<li>如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。</li>
+<li>对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。</li>
+</ul>
+<p>如下图，当 component D 改变为 component G 时，即使这两个 component 结构相似，一旦 React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，而是直接删除 component D，重新创建 component G 以及其子节点。虽然当两个 component 是不同类型但结构相似时，React diff 会影响性能，但正如 React 官方博客所言：不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。</p>
+<p><img src="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg" alt="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg"></p>
+<h3 id="element-diff"><a href="#element-diff" class="headerlink" title="element diff"></a>element diff</h3><p>当节点处于同一层级时，React diff 提供了三种节点操作，分别为：<em><strong>INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）</strong></em>。</p>
+<ul>
+<li><p><em><strong>INSERT_MARKUP</strong></em> ，新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。</p>
+</li>
+<li><p><em><strong>MOVE_EXISTING</strong></em> ，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。</p>
+</li>
+<li><p><em><strong>REMOVE_NODE</strong></em> ，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。</p>
+</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueInsertMarkup</span>(<span class="params">parentInst, markup, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,</span><br><span class="line">    markupIndex: markupQueue.push(markup) - <span class="number">1</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: <span class="literal">null</span>,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueMove</span>(<span class="params">parentInst, fromIndex, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueRemove</span>(<span class="params">parentInst, fromIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.REMOVE_NODE,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: <span class="literal">null</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如下图，老集合中包含节点：A、B、C、D，更新后的新集合中包含节点：B、A、D、C，此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。</p>
+<p><img src="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg" alt="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg"></p>
+<p>React 发现这类操作繁琐冗余，因为这些都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。</p>
+<p>针对这一现象，React 提出优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，虽然只是小小的改动，性能上却发生了翻天覆地的变化！</p>
+<p>新老集合所包含的节点，如下图所示，新老集合进行 diff 差异化对比，通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置，此时 React 给出的 diff 结果为：B、D 不做任何操作，A、C 进行移动操作，即可。</p>
+<p><img src="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg" alt="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg"></p>
+<p>那么，如此高效的 diff 到底是如何运作的呢？让我们通过源码进行详细分析。</p>
+<p>首先对新集合的节点进行循环遍历，for (name in nextChildren)，通过唯一 key 可以判断新老集合中是否存在相同的节点，if (prevChild === nextChild)，如果存在相同节点，则进行移动操作，但在移动前需要将当前节点在老集合中的位置与 lastIndex 进行比较，if (child._mountIndex &lt; lastIndex)，则进行节点移动操作，否则不执行该操作。这是一种顺序优化手段，lastIndex 一直在更新，表示访问过的节点在老集合中最右的位置（即最大的位置），如果新集合中当前访问的节点比 lastIndex 大，说明当前访问节点在老集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不用添加到差异队列中，即不执行移动操作，只有当访问的节点比 lastIndex 小时，才需要进行移动操作。</p>
+<p>以上图为例，可以更为清晰直观的描述 diff 的差异对比过程：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，通过对比节点位置判断是否进行移动操作，B 在老集合中的位置 B._mountIndex = 1，此时 lastIndex = 0，不满足 child._mountIndex &lt; lastIndex 的条件，因此不对 B 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，其中 prevChild._mountIndex 表示 B 在老集合中的位置，则 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置prevChild._mountIndex = nextIndex，此时新集合中 B._mountIndex = 0，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，通过对比节点位置判断是否进行移动操作，A 在老集合中的位置 A._mountIndex = 0，此时 lastIndex = 1，满足 child._mountIndex &lt; lastIndex的条件，因此对 A 进行移动操作enqueueMove(this, child._mountIndex, toIndex)，其中 toIndex 其实就是 nextIndex，表示 A 需要移动到的位置；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 1，并将 A 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中A._mountIndex = 1，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 D，判断老集合中存在相同节点 D，通过对比节点位置判断是否进行移动操作，D 在老集合中的位置 D._mountIndex = 3，此时 lastIndex = 1，不满足 child._mountIndex &lt; lastIndex的条件，因此不对 D 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 D 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中D._mountIndex = 2，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，通过对比节点位置判断是否进行移动操作，C 在老集合中的位置 C._mountIndex = 2，此时 lastIndex = 3，满足 child._mountIndex &lt; lastIndex 的条件，因此对 C 进行移动操作 enqueueMove(this, child._mountIndex, toIndex)；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 C 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中 C._mountIndex = 3，nextIndex++ 进入下一个节点的判断，由于 C 已经是最后一个节点，因此 diff 到此完成。</p>
+</li>
+</ul>
+<p>以上主要分析新老集合中存在相同节点但位置不同时，对节点进行位置移动的情况，如果新集合中有新加入的节点且老集合存在需要删除的节点，那么 React diff 又是如何对比运作的呢？</p>
+<p>以下图为例：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，由于 B 在老集合中的位置 B._mountIndex = 1，此时lastIndex = 0，因此不对 B 进行移动操作；更新 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置B._mountIndex = 0，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 E，判断老集合中不存在相同节点 E，则创建新节点 E；更新 lastIndex ＝ 1，并将 E 的位置更新为新集合中的位置，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，由于 C 在老集合中的位置C._mountIndex = 2，lastIndex = 1，此时 C._mountIndex &gt; lastIndex，因此不对 C 进行移动操作；更新 lastIndex ＝ 2，并将 C 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，由于 A 在老集合中的位置A._mountIndex = 0，lastIndex = 2，此时 A._mountIndex &lt; lastIndex，因此对 A 进行移动操作；更新 lastIndex ＝ 2，并将 A 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>当完成新集合中所有节点 diff 时，最后还需要对老集合进行循环遍历，判断是否存在新集合中没有但老集合中仍存在的节点，发现存在这样的节点 D，因此删除节点 D，到此 diff 全部完成。</p>
+</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg" alt="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line">_updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prevChildren = <span class="built_in">this</span>._renderedChildren;</span><br><span class="line">  <span class="keyword">var</span> nextChildren = <span class="built_in">this</span>._reconcilerUpdateChildren(</span><br><span class="line">    prevChildren, nextNestedChildrenElements, transaction, context</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">if</span> (!nextChildren &amp;&amp; !prevChildren) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> name;</span><br><span class="line">  <span class="keyword">var</span> lastIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> nextIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> nextChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!nextChildren.hasOwnProperty(name)) &#123;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> prevChild = prevChildren &amp;&amp; prevChildren[name];</span><br><span class="line">    <span class="keyword">var</span> nextChild = nextChildren[name];</span><br><span class="line">    <span class="keyword">if</span> (prevChild === nextChild) &#123;</span><br><span class="line">      <span class="comment">// 移动节点</span></span><br><span class="line">      <span class="built_in">this</span>.moveChild(prevChild, nextIndex, lastIndex);</span><br><span class="line">      lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">      prevChild._mountIndex = nextIndex;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (prevChild) &#123;</span><br><span class="line">        lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">        <span class="comment">// 删除节点</span></span><br><span class="line">        <span class="built_in">this</span>._unmountChild(prevChild);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 初始化并创建节点</span></span><br><span class="line">      <span class="built_in">this</span>._mountChildAtIndex(</span><br><span class="line">        nextChild, nextIndex, transaction, context</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">    nextIndex++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> prevChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (prevChildren.hasOwnProperty(name) &amp;&amp;</span><br><span class="line">        !(nextChildren &amp;&amp; nextChildren.hasOwnProperty(name))) &#123;</span><br><span class="line">      <span class="built_in">this</span>._unmountChild(prevChildren[name]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">this</span>._renderedChildren = nextChildren;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 移动节点</span></span><br><span class="line">moveChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, toIndex, lastIndex</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (child._mountIndex &lt; lastIndex) &#123;</span><br><span class="line">    <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">    enqueueMove(<span class="built_in">this</span>, child._mountIndex, toIndex);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 创建节点</span></span><br><span class="line">createChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, mountImage</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueInsertMarkup(<span class="built_in">this</span>, mountImage, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 删除节点</span></span><br><span class="line">removeChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueRemove(<span class="built_in">this</span>, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_unmountChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.removeChild(child);</span><br><span class="line">  child._mountIndex = <span class="literal">null</span>;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_mountChildAtIndex: <span class="function"><span class="keyword">function</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  child,</span></span></span><br><span class="line"><span class="function"><span class="params">  index,</span></span></span><br><span class="line"><span class="function"><span class="params">  transaction,</span></span></span><br><span class="line"><span class="function"><span class="params">  context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> mountImage = ReactReconciler.mountComponent(</span><br><span class="line">    child,</span><br><span class="line">    transaction,</span><br><span class="line">    <span class="built_in">this</span>,</span><br><span class="line">    <span class="built_in">this</span>._nativeContainerInfo,</span><br><span class="line">    context</span><br><span class="line">  );</span><br><span class="line">  child._mountIndex = index;</span><br><span class="line">  <span class="built_in">this</span>.createChild(child, mountImage);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<p>当然，React diff 还是存在些许不足与待优化的地方，如下图所示，若新集合的节点更新为：D、A、B、C，与老集合对比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在老集合的位置是最大的，导致其他节点的 _mountIndex &lt; lastIndex，造成 D 没有执行移动操作，而是 A、B、C 全部移动到 D 节点后面的现象。</p>
+<p><em><strong>在此，读者们可以讨论思考：如何优化上述问题？</strong></em></p>
+<blockquote>
+<p>建议：在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg" alt="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg"></p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li>React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；</li>
+<li>React 通过<em><strong>分层求异</strong></em>的策略，对 <em><strong>tree diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>相同类生成相似树形结构，不同类生成不同树形结构</strong></em>的策略，对 <em><strong>component diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>设置唯一 key</strong></em>的策略，对 <em><strong>element diff</strong></em> 进行算法优化；</li>
+<li>建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；</li>
+<li>建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</li>
+</ul>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">A Survey on Tree Edit Distance and Related Problems</a><br><a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/reconciliation.html">Reconciliation</a></p>
+<p>如果本文能够为你解决些许关于 React diff 算法的疑惑，请点个赞吧！</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/03/source-code-react-diff/">React 源码剖析系列 － 不可思议的 react diff【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月03日 - 12:38</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/03/source-code-react-diff/" title="React 源码剖析系列 － 不可思议的 react diff【转载】">https://blog.lifesli.com/2020/04/03/source-code-react-diff/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/03/source-code-react-diff/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" rel="tag"># 源码解析</a>
+              <a href="/ja/tags/React/" rel="tag"># React</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/03/24/webpack-learning-1/" rel="prev" title="2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】">
+      <i class="fa fa-chevron-left"></i> 2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/07/webpack-uglifyjsplugin/" rel="next" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F-diff-%E7%AE%97%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">传统 diff 算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%A6%E8%A7%A3-React-diff"><span class="nav-number">1.2.</span> <span class="nav-text">详解 React diff</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#diff-%E7%AD%96%E7%95%A5"><span class="nav-number">1.2.1.</span> <span class="nav-text">diff 策略</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tree-diff"><span class="nav-number">1.2.2.</span> <span class="nav-text">tree diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#component-diff"><span class="nav-number">1.2.3.</span> <span class="nav-text">component diff</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#element-diff"><span class="nav-number">1.2.4.</span> <span class="nav-text">element diff</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">1.4.</span> <span class="nav-text">参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/03/source-code-react-diff/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/03/source-code-react-diff/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/03/source-code-react-diff/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '77234a7d8fa732109885affa0a388649',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/07/Electron-Offline-Build/index.html b/ja/2020/04/07/Electron-Offline-Build/index.html
new file mode 100644
index 0000000000..c5509a8ba1
--- /dev/null
+++ b/ja/2020/04/07/Electron-Offline-Build/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="国内配置Electron开发环境的正确方式【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/07/Electron-Offline-Build/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-04-07T18:22:22.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/07/Electron-Offline-Build/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>国内配置Electron开发环境的正确方式【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          国内配置Electron开发环境的正确方式【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+<span id="more"></span>
+<p><a target="_blank" rel="noopener" href="https://blog.yasking.org/a/zh-install-electron-development-2020.html">转载</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/07/Electron-Offline-Build/">国内配置Electron开发环境的正确方式【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 18:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/07/Electron-Offline-Build/" title="国内配置Electron开发环境的正确方式【转载】">https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/07/webpack-uglifyjsplugin/" rel="prev" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+      <i class="fa fa-chevron-left"></i> Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/15/talk-about-full-stack-big-fd/" rel="next" title="前端全栈和大前端有啥区别">
+      前端全栈和大前端有啥区别 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/07/Electron-Offline-Build/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/Electron-Offline-Build/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/Electron-Offline-Build/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '17b78aaed934c98025d947a8024c6996',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/07/webpack-uglifyjsplugin/index.html b/ja/2020/04/07/webpack-uglifyjsplugin/index.html
new file mode 100644
index 0000000000..0d0be04e29
--- /dev/null
+++ b/ja/2020/04/07/webpack-uglifyjsplugin/index.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/07/webpack-uglifyjsplugin/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 U">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+<meta property="og:image" content="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/">
+<meta property="article:published_time" content="2020-04-07T11:22:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="UglifyJsPlugin">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://github.com/mishoo/UglifyJS2/tree/harmony">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/07/webpack-uglifyjsplugin/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+<span id="more"></span>
+
+<h2 id="UglifyJsPlugin"><a href="#UglifyJsPlugin" class="headerlink" title="UglifyJsPlugin"></a>UglifyJsPlugin</h2><p>关于 UglifyJsPlugin 的介绍，在 webpack 的官网上有这样一段描述 </p>
+<blockquote>
+<p>ℹ️ webpack =&lt; v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0</p>
+</blockquote>
+<p>简单来说就是在 webpack3.0 之前，引入了这个插件的0.4.6版本，并用 webpack.optimize.UglifyJsPlugin 作为它的别名， 在 webpack4.0 中引入了插件的 1.0.0 版本，用了同样的名称作为别名，用的时候请注意。</p>
+<p>那么“这个插件”是什么呢， webpack 的官网也告诉我们了，那就是<img src="https://github.com/mishoo/UglifyJS2/tree/harmony" alt="UglifyJS"></p>
+<blockquote>
+<p>A JavaScript parser, mangler/compressor and beautifier toolkit for ES6+.</p>
+</blockquote>
+<p>翻译过来就是“一个用于ES6+的JavaScript解析器、（榨汁机：翻译的挺有意思）/压缩机和美化工具。”</p>
+<p>再简单点说 uglifyJsPlugin 用来对js文件进行压缩，减小js文件的大小。<em><strong>其会拖慢webpack的编译速度，建议开发环境时关闭，生产环境再将其打开。</strong></em></p>
+<p>要用它的的话记得先安装</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>安装完成就可以用了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> UglifyJsPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>当然他有很多的选项，具体想了解可以去 webpack 官网，或者去插件官网都可以找到<img src="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/" alt="uglifyjs-webpack-plugin"></p>
+<p>当然知道你们懒的去看了，心里肯定也在说“直接给我个现成的配置他不香么？”，别急嘛，这就给你们</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">    <span class="comment">//删除注释</span></span><br><span class="line">    output:&#123;</span><br><span class="line">        comments:<span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//删除console 和 debugger  删除警告</span></span><br><span class="line">    compress:&#123;</span><br><span class="line">        warnings:<span class="literal">false</span>,</span><br><span class="line">        drop_debugger:<span class="literal">true</span>,</span><br><span class="line">        drop_console:<span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>当然版本间可能会有些差别，但是option是不变的，有调整的话各位自行调整一下。<br>公司用的 vue-cli3 所以这里再给出个 vue-cli3 默认配置文件下的写法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"></span><br><span class="line">configureWebpack:&#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line">        minimizer: [</span><br><span class="line">            <span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">                uglifyOptions: &#123;</span><br><span class="line">                    <span class="comment">// 删除注释</span></span><br><span class="line">                    output:&#123;</span><br><span class="line">                      comments:<span class="literal">false</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="comment">// 删除console debugger 删除警告</span></span><br><span class="line">                    compress: &#123;</span><br><span class="line">                      warnings: <span class="literal">false</span>,</span><br><span class="line">                      drop_console: <span class="literal">true</span>,<span class="comment">//console</span></span><br><span class="line">                      drop_debugger: <span class="literal">false</span>,</span><br><span class="line">                      pure_funcs: [<span class="string">&#x27;console.log&#x27;</span>]<span class="comment">//移除console</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="问题收集"><a href="#问题收集" class="headerlink" title="问题收集"></a>问题收集</h2><ol>
+<li>运行出现报错 UglifyJs</li>
+</ol>
+<blockquote>
+<p>Q: DefaultsError: warnings is not a supported option</p>
+</blockquote>
+<blockquote>
+<p>A: 降低版本(使用 “uglifyjs-webpack-plugin”: “^1.1.1”)，打包正常，效果达到</p>
+</blockquote>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/07/webpack-uglifyjsplugin/">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月07日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/07/webpack-uglifyjsplugin/" title="Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger">https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/UglifyJsPlugin/" rel="tag"># UglifyJsPlugin</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/03/source-code-react-diff/" rel="prev" title="React 源码剖析系列 － 不可思议的 react diff【转载】">
+      <i class="fa fa-chevron-left"></i> React 源码剖析系列 － 不可思议的 react diff【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/07/Electron-Offline-Build/" rel="next" title="国内配置Electron开发环境的正确方式【转载】">
+      国内配置Electron开发环境的正确方式【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#UglifyJsPlugin"><span class="nav-number">1.1.</span> <span class="nav-text">UglifyJsPlugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%94%B6%E9%9B%86"><span class="nav-number">1.2.</span> <span class="nav-text">问题收集</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/07/webpack-uglifyjsplugin/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd808332e84eb806355f879beb03aee16',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/15/node-sass-slow-problem/index.html b/ja/2020/04/15/node-sass-slow-problem/index.html
new file mode 100644
index 0000000000..627241b86e
--- /dev/null
+++ b/ja/2020/04/15/node-sass-slow-problem/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:type" content="article">
+<meta property="og:title" content="如何解决npm安装node-sass依赖慢的情况">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/15/node-sass-slow-problem/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-04-15T23:24:49.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="sass">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/15/node-sass-slow-problem/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>如何解决npm安装node-sass依赖慢的情况 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          如何解决npm安装node-sass依赖慢的情况
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+<span id="more"></span>
+
+<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在使用sass时要安装node-sass包，但是这个npm包安装不尽慢的要命，下载下来之后还要进行编译，编译环境不合适或者网速不好的时候，光为了这个包的使用花上个把小时绝对正常，记得第一次折腾他用了小半天的时间。</p>
+<p>那么有没有什么方法可以解决这个问题呢？</p>
+<p>有痛点就会有人想办法解决，但是包名已经占用了，想用的话还是要有点配置的代价，但总好过编译和下载</p>
+<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>首先我这里假设你是知道 yarn 这个工具的，对的，接下来我们要用 yarn 进行安装，但是安装的不是 node-sass ，而是一个叫做 node-sass-install 的这个包， 安装他的话就不用在安装 node-sass 这个包了，通常来说安装这个包不会超过10s ， 当然网速不好的话超过10s了也别怪我，总之要比装 node-sass 要快上很多，命令如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add node-sass-install</span><br></pre></td></tr></table></figure>
+<p>是不是很简单，当然如果你觉得为了安装 node-sass 还要再装个 yarn （鄙视你居然不用 yarn ），那你也可以用 npm 安装，命令稍有不同，长了一点</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass-install -D</span><br><span class="line">npx node-sass-install</span><br></pre></td></tr></table></figure>
+<p>比 yarn 多了一条命令，那么他为啥这么神奇呢，且听我分析一下</p>
+<h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>这个 node-sass-install 其实只是在 package.json 的 dependencies 中做了一些配置，如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;dependencies&quot;</span>:&#123;</span><br><span class="line">    <span class="string">&quot;node-sass&quot;</span>:<span class="string">&quot;npm:dart-sass@latest&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面这个配置的意思是，当你安装 node-sass-install 的时候，会依赖并下载 dart-sass， 然后起了个别名叫做 node-sass。偷梁换柱，狸猫换太子了，哈哈。<br>所以的所以呢，如果你在项目中用到 sass 的话建议你尝试一下新方法，说不定更香呢～</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/15/node-sass-slow-problem/">如何解决npm安装node-sass依赖慢的情况</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 23:24</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/15/node-sass-slow-problem/" title="如何解决npm安装node-sass依赖慢的情况">https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/sass/" rel="tag"># sass</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/15/talk-about-full-stack-big-fd/" rel="prev" title="前端全栈和大前端有啥区别">
+      <i class="fa fa-chevron-left"></i> 前端全栈和大前端有啥区别
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/16/0-vuecli-3-component/" rel="next" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.2.</span> <span class="nav-text">解决方案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.3.</span> <span class="nav-text">原理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/15/node-sass-slow-problem/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/node-sass-slow-problem/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/node-sass-slow-problem/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e1a3cf696890fe4b029664b572f70a62',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/15/talk-about-full-stack-big-fd/index.html b/ja/2020/04/15/talk-about-full-stack-big-fd/index.html
new file mode 100644
index 0000000000..3547f61afa
--- /dev/null
+++ b/ja/2020/04/15/talk-about-full-stack-big-fd/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端全栈和大前端有啥区别">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/15/talk-about-full-stack-big-fd/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问  前端全栈和大前端有啥区别  以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+<meta property="article:published_time" content="2020-04-15T15:59:00.000Z">
+<meta property="article:modified_time" content="2020-04-15T15:51:22.987Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="知识点">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/04/15/JicTqe.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/15/talk-about-full-stack-big-fd/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端全栈和大前端有啥区别 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端全栈和大前端有啥区别
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-04-15 15:59:00 / 修正日：15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+<a id="more"></a>
+
+<h2 id="狼叔说"><a href="#狼叔说" class="headerlink" title="狼叔说"></a>狼叔说</h2><p>狼叔在解答这个疑问之前直接上了一张图，图我贴在下面供大家看一下<br><img src="https://s1.ax1x.com/2020/04/15/JicTqe.jpg" alt="JicTqe.jpg"><br>这么一张图实际上已经胜过千言了，但是为了方便大家理解，狼叔还是在下面对图进行了解释</p>
+<blockquote>
+<p>前端全栈：分node全栈和其他语言全栈，比如ror搞全栈是最早的，其他php、java也有，不过纯前端的不过，在react，angular之前搞后台还是可以的。<br>所以前端全栈，我理解是等同于node全栈的。node本身是做后端的，但在前端工程化和BFF领域大放异彩，所以node全栈涵盖了前端的方方面面，是比较合理的解释。<br>大前端：更泛化的概念，移动互联网时代开启后，hybrid曾经很火，基于h5和webview做跨端，确实是很理想的做法，但复杂交互搞不定，机器性能网络等是硬伤，所以后来出现了rn和weex，整体还是前端写法，所以hybrid里前端也是占了一定的开发，结合之前前端和node的关系，综合3者：1）app里的前端，2）前端，2）node全栈，统称为大前端。这里的”大“含义是可以做的事儿的范围更广，触达前后端移动端，对前端职责有明显提升。随着技术发展，基于electron的桌面开发也日进流程，ott和iot等领域采用js也愈来愈多，所以只要和用户直接触达的端采用了前端技术开发的都涵盖在大前端范畴内。</p>
+</blockquote>
+<p><a href="https://www.zhihu.com/question/379563850/answer/1152553428" target="_blank" rel="noopener">原帖地址</a></p>
+<h2 id="我说"><a href="#我说" class="headerlink" title="我说"></a>我说</h2><p>之前我的概念里前端扩展开来再进一步的话分两个方向，一个叫全栈另一个叫全端，‘栈’的话是纵向的，简单理解的话就是一款产品一个人能从设计到前端实现后端实现运维等一个人搞定，那么他就可以称之为全栈，狭义一点理解，就是前端后端都会，那么这里所说的前端全栈，我理解是更方便前端掌握的一些后端技能如node、php、ror等，而不是java这种后端技能，所以叫前端全栈，我想这里大部分指的都是node作为后端；</p>
+<p>那么我理解的全端是什么呢</p>
+<p>‘端’我理解为容器，任何跟用户直接接触的技术都是端的技术，早期的pc端，后来的手机端，手机端里又出现了h5、hybrid、native这么几种，后来又出现了小程序之类的容器，pc端也出现了如electron等客户端技术，那么随着物联网智能家居的出现，更多的端出现了，就如狼叔说的OTT和IOT领域也成了端，大前端的大是指范围广，属于用户直达所承载内容容器的都是端。</p>
+<p>总的来说跟狼叔的理解一致，我个人也努力在往全栈全端发展，不过真的好难还有很长的路要走。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/15/talk-about-full-stack-big-fd/">前端全栈和大前端有啥区别</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月15日 - 15:59</p>
+      <p><span>最后更新:</span>2020年04月15日 - 15:51</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/15/talk-about-full-stack-big-fd/" title="前端全栈和大前端有啥区别">https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" rel="tag"># 知识点</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/07/Electron-Offline-Build/" rel="prev" title="国内配置Electron开发环境的正确方式【转载】">
+      <i class="fa fa-chevron-left"></i> 国内配置Electron开发环境的正确方式【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/15/node-sass-slow-problem/" rel="next" title="如何解决npm安装node-sass依赖慢的情况">
+      如何解决npm安装node-sass依赖慢的情况 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8B%BC%E5%8F%94%E8%AF%B4"><span class="nav-number">1.1.</span> <span class="nav-text">狼叔说</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E8%AF%B4"><span class="nav-number">1.2.</span> <span class="nav-text">我说</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/15/talk-about-full-stack-big-fd/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2a8607a7921a722316ac40a79c927269',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/16/0-vuecli-3-component/index.html b/ja/2020/04/16/0-vuecli-3-component/index.html
new file mode 100644
index 0000000000..fb1c11b6b3
--- /dev/null
+++ b/ja/2020/04/16/0-vuecli-3-component/index.html
@@ -0,0 +1,678 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/16/0-vuecli-3-component/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件vColorPicke">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="打包">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/16/0-vuecli-3-component/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><p>如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。</p>
+<ul>
+<li>Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库</li>
+<li>npm：组件库将存放在npm</li>
+<li>webpack：修改配置需要一点 webapck 的知识。</li>
+</ul>
+<h2 id="二、大纲"><a href="#二、大纲" class="headerlink" title="二、大纲"></a>二、大纲</h2><p>想要搭建一个组件库，我们必须先要有一个大概的思路。</p>
+<ol>
+<li>规划目录结构</li>
+<li>配置项目以支持目录结构</li>
+<li>编写组件</li>
+<li>编写示例</li>
+<li>配置使用库模式打包编译</li>
+<li>发布到npm</li>
+</ol>
+<h2 id="三、规划目录结构"><a href="#三、规划目录结构" class="headerlink" title="三、规划目录结构"></a>三、规划目录结构</h2><h3 id="1、创建项目"><a href="#1、创建项目" class="headerlink" title="1、创建项目"></a>1、创建项目</h3><p>在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vue create .</span><br></pre></td></tr></table></figure>
+<h3 id="2、调整目录"><a href="#2、调整目录" class="headerlink" title="2、调整目录"></a>2、调整目录</h3><p>我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">...</span><br><span class="line">|-- examples      <span class="comment">// 原 src 目录，改成 examples 用作示例展示</span></span><br><span class="line">|-- packages      <span class="comment">// 新增 packages 用于编写存放组件</span></span><br><span class="line">...</span><br><span class="line">.</span><br></pre></td></tr></table></figure>
+<h2 id="四、配置项目以支持新的目录结构"><a href="#四、配置项目以支持新的目录结构" class="headerlink" title="四、配置项目以支持新的目录结构"></a>四、配置项目以支持新的目录结构</h2><p>我们通过上一步的目录改造后，会遇到两个问题。</p>
+<ol>
+<li>src目录更名为examples，导致项目无法运行</li>
+<li>新增packages目录，该目录未加入webpack编译</li>
+</ol>
+<p><strong>注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。</strong></p>
+<h3 id="1、重新配置入口，修改配置中的-pages-选项"><a href="#1、重新配置入口，修改配置中的-pages-选项" class="headerlink" title="1、重新配置入口，修改配置中的 pages 选项"></a>1、重新配置入口，修改配置中的 pages 选项</h3><p>新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。</p>
+<p>这里使用 pages 修改入口到 examples</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项"><a href="#2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项" class="headerlink" title="2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项"></a>2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</h3><p>packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。</p>
+<p>chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">  chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.module</span><br><span class="line">      .rule(<span class="string">&#x27;js&#x27;</span>)</span><br><span class="line">      .include</span><br><span class="line">        .add(<span class="string">&#x27;packages&#x27;</span>)</span><br><span class="line">        .end()</span><br><span class="line">      .use(<span class="string">&#x27;babel&#x27;</span>)</span><br><span class="line">        .loader(<span class="string">&#x27;babel-loader&#x27;</span>)</span><br><span class="line">        .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 修改它的选项...</span></span><br><span class="line">          <span class="keyword">return</span> options</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7">链式操作</a><br><a target="_blank" rel="noopener" href="https://github.com/neutrinojs/webpack-chain">webpack-chain</a></p>
+<h2 id="五、编写组件"><a href="#五、编写组件" class="headerlink" title="五、编写组件"></a>五、编写组件</h2><p>以上我们已配置好对新目录架构的支持，接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。<br><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">GitHub - 颜色选择器：vcolorpicker</a></p>
+<h3 id="1-创建一个新组件"><a href="#1-创建一个新组件" class="headerlink" title="1. 创建一个新组件"></a>1. 创建一个新组件</h3><ol>
+<li>在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/</li>
+<li>在 color-picker/ 目录下创建 src/ 目录存储组件源码</li>
+<li>在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。<br>修改 /packages/color-picker/index.js文件，对外提供引用。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/color-picker/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件，组件必须声明 name</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./src/color-picker.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">colorPicker = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  Vue.component(colorPicker.name, colorPicker)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> colorPicker</span><br></pre></td></tr></table></figure>
+<h3 id="2-整合所有的组件，对外导出，即一个完整的组件库"><a href="#2-整合所有的组件，对外导出，即一个完整的组件库" class="headerlink" title="2. 整合所有的组件，对外导出，即一个完整的组件库"></a>2. 整合所有的组件，对外导出，即一个完整的组件库</h3><p>修改 /packages/index.js 文件，对整个组件库进行导出。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ./packages/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入颜色选择器组件</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./color-picker&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">  colorPicker</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否安装</span></span><br><span class="line">  <span class="keyword">if</span> (install.installed) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">  components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&#x27;undefined&#x27;</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">  install(<span class="built_in">window</span>.Vue)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">  install,</span><br><span class="line">  <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">  colorPicker</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="六、编写示例"><a href="#六、编写示例" class="headerlink" title="六、编写示例"></a>六、编写示例</h2><h3 id="1、在示例中导入组件库"><a href="#1、在示例中导入组件库" class="headerlink" title="1、在示例中导入组件库"></a>1、在示例中导入组件库</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件库</span></span><br><span class="line"><span class="keyword">import</span> ColorPicker <span class="keyword">from</span> <span class="string">&#x27;./../packages/index&#x27;</span></span><br><span class="line"><span class="comment">// 注册组件库</span></span><br><span class="line">Vue.use(ColorPicker)</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<h3 id="2、在示例中使用组件库中的组件"><a href="#2、在示例中使用组件库中的组件" class="headerlink" title="2、在示例中使用组件库中的组件"></a>2、在示例中使用组件库中的组件</h3><p>在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> v-on:change=<span class="string">&quot;headleChangeColor&quot;</span>&gt;&lt;/colorPicker&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	data () &#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	methods: &#123;</span><br><span class="line">		headleChangeColor () &#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;颜色改变&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<h2 id="七、发布到-npm，方便直接在项目中引用"><a href="#七、发布到-npm，方便直接在项目中引用" class="headerlink" title="七、发布到 npm，方便直接在项目中引用"></a>七、发布到 npm，方便直接在项目中引用</h2><p>到此为止我们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用。</p>
+<h3 id="1、package-js-中新增一条编译为库的命令"><a href="#1、package-js-中新增一条编译为库的命令" class="headerlink" title="1、package.js 中新增一条编译为库的命令"></a>1、package.js 中新增一条编译为库的命令</h3><p>在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。</p>
+<p><a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93">Vue Cli3 构建目标：库</a></p>
+<p>以下我们在 scripts 中新增一条命令</p>
+<ul>
+<li>–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。</li>
+<li>–dest : 输出目录，默认 dist。这里我们改成 lib</li>
+<li>[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;script&quot;</span>: &#123;</span><br><span class="line">	<span class="comment">// ...</span></span><br><span class="line">	<span class="string">&quot;lib&quot;</span>: <span class="string">&quot;vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ul>
+<p><strong>执行编译库命令</strong></p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run lib</span><br></pre></td></tr></table></figure>
+<h3 id="2、配置-package-json-文件中发布到-npm-的字段"><a href="#2、配置-package-json-文件中发布到-npm-的字段" class="headerlink" title="2、配置 package.json 文件中发布到 npm 的字段"></a>2、配置 package.json 文件中发布到 npm 的字段</h3><ul>
+<li>name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。</li>
+<li>version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。</li>
+<li>description: 描述。</li>
+<li>main: 入口文件，该字段需指向我们最终编译后的包文件。</li>
+<li>keyword：关键字，以空格分离希望用户最终搜索的词。</li>
+<li>author：作者</li>
+<li>private：是否私有，需要修改为 false 才能发布到 npm</li>
+<li>license： 开源协议</li>
+</ul>
+<p>以下为参考设置</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;vcolorpicker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.1.5&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;description&quot;</span>: <span class="string">&quot;基于 Vue 的颜色选择器&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;lib/vcolorpicker.umd.min.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;keyword&quot;</span>: <span class="string">&quot;vcolorpicker colorpicker color-picker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">false</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
+<h3 id="3、添加-npmignore-文件，设置忽略发布文件"><a href="#3、添加-npmignore-文件，设置忽略发布文件" class="headerlink" title="3、添加 .npmignore 文件，设置忽略发布文件"></a>3、添加 .npmignore 文件，设置忽略发布文件</h3><p>我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。</p>
+<p>和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 忽略目录</span></span><br><span class="line">examples/</span><br><span class="line">packages/</span><br><span class="line">public/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽略指定文件</span></span><br><span class="line">vue.config.js</span><br><span class="line">babel.config.js</span><br><span class="line">*.map</span><br></pre></td></tr></table></figure>
+<h3 id="4、登录到-npm"><a href="#4、登录到-npm" class="headerlink" title="4、登录到 npm"></a>4、登录到 npm</h3><p>首先需要到 npm 上注册一个账号，注册过程略。</p>
+<p>如果配置了淘宝镜像，先设置回npm镜像：</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm config <span class="built_in">set</span> registry http://registry.npmjs.org</span><br></pre></td></tr></table></figure>
+<p>然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm login</span><br></pre></td></tr></table></figure>
+
+<h3 id="5、发布到-npm"><a href="#5、发布到-npm" class="headerlink" title="5、发布到 npm"></a>5、发布到 npm</h3><p>执行发布命令，发布组件到 npm</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm publish</span><br></pre></td></tr></table></figure>
+
+<h3 id="6、发布成功"><a href="#6、发布成功" class="headerlink" title="6、发布成功"></a>6、发布成功</h3><p>发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker</p>
+<h3 id="7、使用新发布的组件库"><a href="#7、使用新发布的组件库" class="headerlink" title="7、使用新发布的组件库"></a>7、使用新发布的组件库</h3><p>安装</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install vcolorpicker -S</span><br></pre></td></tr></table></figure>
+<p>使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 main.js 引入并注册</span></span><br><span class="line"><span class="keyword">import</span> vcolorpicker <span class="keyword">from</span> <span class="string">&#x27;vcolorpicker&#x27;</span></span><br><span class="line">Vue.use(vcolorpicker)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在组件中使用</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<p>暂时没有做包含多个组件的时候的按需加载，以后研究了再补充。</p>
+<h2 id="八、项目地址"><a href="#八、项目地址" class="headerlink" title="八、项目地址"></a>八、项目地址</h2><p><a target="_blank" rel="noopener" href="https://github.com/zuley/vue-color-picker">Github 地址：https://github.com/zuley/vue-color-picker</a><br><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vcolorpicker">npm 地址：https://www.npmjs.com/package/vcolorpicker</a><br><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">DEMO 演示：http://vue-color-picker.rxshc.com</a></p>
+<h2 id="九、参考文章"><a href="#九、参考文章" class="headerlink" title="九、参考文章"></a>九、参考文章</h2><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/30948290">从零开始搭建Vue组件库 VV-UI</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6">Vue插件开发</a><br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/components.html">组件基础</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/16/0-vuecli-3-component/">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/16/0-vuecli-3-component/" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%89%93%E5%8C%85/" rel="tag"># 打包</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/15/node-sass-slow-problem/" rel="prev" title="如何解决npm安装node-sass依赖慢的情况">
+      <i class="fa fa-chevron-left"></i> 如何解决npm安装node-sass依赖慢的情况
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/16/what-is-npx/" rel="next" title="npx是什么">
+      npx是什么 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%A4%A7%E7%BA%B2"><span class="nav-number">3.</span> <span class="nav-text">二、大纲</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%A7%84%E5%88%92%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">4.</span> <span class="nav-text">三、规划目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.1.</span> <span class="nav-text">1、创建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E8%B0%83%E6%95%B4%E7%9B%AE%E5%BD%95"><span class="nav-number">4.2.</span> <span class="nav-text">2、调整目录</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E9%85%8D%E7%BD%AE%E9%A1%B9%E7%9B%AE%E4%BB%A5%E6%94%AF%E6%8C%81%E6%96%B0%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="nav-number">5.</span> <span class="nav-text">四、配置项目以支持新的目录结构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E9%87%8D%E6%96%B0%E9%85%8D%E7%BD%AE%E5%85%A5%E5%8F%A3%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-pages-%E9%80%89%E9%A1%B9"><span class="nav-number">5.1.</span> <span class="nav-text">1、重新配置入口，修改配置中的 pages 选项</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E6%94%AF%E6%8C%81%E5%AF%B9-packages-%E7%9B%AE%E5%BD%95%E7%9A%84%E5%A4%84%E7%90%86%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84-chainWebpack-%E9%80%89%E9%A1%B9"><span class="nav-number">5.2.</span> <span class="nav-text">2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6"><span class="nav-number">6.</span> <span class="nav-text">五、编写组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E7%BB%84%E4%BB%B6"><span class="nav-number">6.1.</span> <span class="nav-text">1. 创建一个新组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%95%B4%E5%90%88%E6%89%80%E6%9C%89%E7%9A%84%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%AF%B9%E5%A4%96%E5%AF%BC%E5%87%BA%EF%BC%8C%E5%8D%B3%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">6.2.</span> <span class="nav-text">2. 整合所有的组件，对外导出，即一个完整的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E7%BC%96%E5%86%99%E7%A4%BA%E4%BE%8B"><span class="nav-number">7.</span> <span class="nav-text">六、编写示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E5%AF%BC%E5%85%A5%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">7.1.</span> <span class="nav-text">1、在示例中导入组件库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%9C%A8%E7%A4%BA%E4%BE%8B%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%BA%93%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6"><span class="nav-number">7.2.</span> <span class="nav-text">2、在示例中使用组件库中的组件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%83%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm%EF%BC%8C%E6%96%B9%E4%BE%BF%E7%9B%B4%E6%8E%A5%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8"><span class="nav-number">8.</span> <span class="nav-text">七、发布到 npm，方便直接在项目中引用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81package-js-%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%B8%80%E6%9D%A1%E7%BC%96%E8%AF%91%E4%B8%BA%E5%BA%93%E7%9A%84%E5%91%BD%E4%BB%A4"><span class="nav-number">8.1.</span> <span class="nav-text">1、package.js 中新增一条编译为库的命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E9%85%8D%E7%BD%AE-package-json-%E6%96%87%E4%BB%B6%E4%B8%AD%E5%8F%91%E5%B8%83%E5%88%B0-npm-%E7%9A%84%E5%AD%97%E6%AE%B5"><span class="nav-number">8.2.</span> <span class="nav-text">2、配置 package.json 文件中发布到 npm 的字段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E6%B7%BB%E5%8A%A0-npmignore-%E6%96%87%E4%BB%B6%EF%BC%8C%E8%AE%BE%E7%BD%AE%E5%BF%BD%E7%95%A5%E5%8F%91%E5%B8%83%E6%96%87%E4%BB%B6"><span class="nav-number">8.3.</span> <span class="nav-text">3、添加 .npmignore 文件，设置忽略发布文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81%E7%99%BB%E5%BD%95%E5%88%B0-npm"><span class="nav-number">8.4.</span> <span class="nav-text">4、登录到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5%E3%80%81%E5%8F%91%E5%B8%83%E5%88%B0-npm"><span class="nav-number">8.5.</span> <span class="nav-text">5、发布到 npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6%E3%80%81%E5%8F%91%E5%B8%83%E6%88%90%E5%8A%9F"><span class="nav-number">8.6.</span> <span class="nav-text">6、发布成功</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7%E3%80%81%E4%BD%BF%E7%94%A8%E6%96%B0%E5%8F%91%E5%B8%83%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">8.7.</span> <span class="nav-text">7、使用新发布的组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80"><span class="nav-number">9.</span> <span class="nav-text">八、项目地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B9%9D%E3%80%81%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0"><span class="nav-number">10.</span> <span class="nav-text">九、参考文章</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/16/0-vuecli-3-component/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/0-vuecli-3-component/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/0-vuecli-3-component/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '890e70913448327a6fa1b841c95f3f2b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/04/16/what-is-npx/index.html b/ja/2020/04/16/what-is-npx/index.html
new file mode 100644
index 0000000000..df9a3bab7b
--- /dev/null
+++ b/ja/2020/04/16/what-is-npx/index.html
@@ -0,0 +1,648 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="npx是什么">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/04/16/what-is-npx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-04-16T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="npx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/04/16/what-is-npx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>npx是什么 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          npx是什么
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+<span id="more"></span>
+<h2 id="npx-起源"><a href="#npx-起源" class="headerlink" title="npx 起源"></a>npx 起源</h2><p>我从阮一峰的博客中看到介绍 npx 的文章，开头的一句话说明了他诞生的日子。</p>
+<blockquote>
+<p>npm 从5.2版开始，增加了 npx 命令。</p>
+</blockquote>
+<p>为了验证阮一峰这里介绍的正确性我特意下了对应的npm版本验证了一下确实如此，而且在网上找到了另一位大佬司徒正美（大佬走好）博客中也对 npx 做了介绍</p>
+<blockquote>
+<p>最近我在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。</p>
+</blockquote>
+<p>由此，我可以肯定的告诉大家，npx是npm在5.2.0之后版本推出的一个工具，那么他是干嘛用的呢？</p>
+<h2 id="npx-作用"><a href="#npx-作用" class="headerlink" title="npx 作用"></a>npx 作用</h2><p>想要了解一个技术，最好的途经是他的官网，于是我到网上找到了 npx 在 github 上的仓库，地址如下<br><a target="_blank" rel="noopener" href="https://github.com/npm/npx#readme">npx仓库</a>，其中对 npx 有这样一段介绍</p>
+<blockquote>
+<p>DESCRIPTION<br>Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.<br>By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.<br>Unless a –package option is specified, npx will try to guess the name of the binary to invoke depending on the specifier provided. All package specifiers understood by npm may be used with npx, including git specifiers, remote tarballs, local directories, or scoped packages.<br>If a full specifier is included, or if –package is used, npx will always use a freshly-installed, temporary version of the package. This can also be forced with the –ignore-existing flag.</p>
+</blockquote>
+<p>上面这一大段英文我想大家一定看了就头疼，所以为了大家不那么头疼，可以看一下下面我翻译的内容，如果有翻译不对的地方，还请指正。</p>
+<blockquote>
+<p>解释<br>执行 command 命令，无论从本地（我理解为项目目录）node_modules/.bin 或者从全局缓存中， 安装所需执行的任何包。<br>默认情况下，npx将检查 command 是否存在于 $PATH 中，或者在本地项目二进制文件中，并执行该命令。<br>如果没有找到 command ，它将在执行之前安装。<br>除非指定了 —package 选项，否则npx将根据提供的说明符猜测要调用的二进制文件的名称。<br>npm可以理解的所有包说明符都可以与npx一起使用，包括git说明符、远程tarball、本地目录或作用域包。<br>如果包含完整的说明符，或者使用 ——package 选项，npx将始终使用新安装的包的临时版本。<br>这也可以用 ——ignore-existing 标记强制执行。</p>
+</blockquote>
+<p>上面这段机翻简直让人无法理解，所以我又去大佬博客下看了下他们的解释</p>
+<blockquote>
+<p>npx 想要解决的主要问题，就是调用项目内部安装的模块。 – 阮一峰<br>根据 zkat/npx 的描述，npx 会帮你执行依赖包里的二进制文件。 – 司徒正美</p>
+</blockquote>
+<p>司徒大大文章写的太简洁了，不过他还是举了例子，我进行了一下精简，如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./node_modules/.bin/webpack -v <span class="comment">// =&gt; npx webpack -v</span></span><br></pre></td></tr></table></figure>
+<p>简单来说就是找包执行命令的时候不再关注他在哪了，直接就可以用了。</p>
+<p>阮一峰老师的文章更像是官网的翻译加理解</p>
+<blockquote>
+<p>npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。<br>由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。</p>
+</blockquote>
+<p>另外阮一峰老师还介绍了一个临时安装命令使用的场景，我理解为对上面英语介绍倒数第二句的理解</p>
+<h3 id="避免全局安装模块"><a href="#避免全局安装模块" class="headerlink" title="避免全局安装模块"></a>避免全局安装模块</h3><p>除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。</p>
+<p>下载全局模块时，npx 允许指定版本。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx uglify-js@3.1.0 main.js -o ./dist/main.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。</p>
+<p>注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx http-server</span><br></pre></td></tr></table></figure>
+
+<p>然后阮老师还对官网最后一句话做了解释</p>
+<h3 id="–no-install-参数和–ignore-existing-参数"><a href="#–no-install-参数和–ignore-existing-参数" class="headerlink" title="–no-install 参数和–ignore-existing 参数"></a>–no-install 参数和–ignore-existing 参数</h3><p>如果想让 npx 强制使用本地模块，不下载远程模块，可以使用–no-install参数。如果本地不存在该模块，就会报错。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --no-install http-server</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用–ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx --ignore-existing create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>然后对于官网上的 example 阮老师也挑了重点的做了介绍，如选择指定的 node 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx node@0.12.8 -v</span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。<br>某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。</p>
+<h2 id="更多参数"><a href="#更多参数" class="headerlink" title="更多参数"></a>更多参数</h2><h3 id="p-参数"><a href="#p-参数" class="headerlink" title="-p 参数"></a>-p 参数</h3><p>-p参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p node@0.12.8 node -v </span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令先指定安装<a href="mailto:&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;">&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;</a>，然后再执行node -v命令。<br>-p参数对于需要安装多个模块的场景很有用。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay [<span class="built_in">command</span>]</span><br></pre></td></tr></table></figure>
+<h3 id="c-参数"><a href="#c-参数" class="headerlink" title="-c 参数"></a>-c 参数</h3><p>如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"><span class="comment"># 报错</span></span><br></pre></td></tr></table></figure>
+<p>上面代码中，cowsay hello | lolcatjs 执行时会报错，原因是第一项 cowsay 由 npx 解释，而第二项命令localcatjs由 Shell 解释，但是lolcatjs并没有全局安装，所以报错。</p>
+<p>-c参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay -c <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm run env | grep npm_</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数可以把这些 npm 的环境变量带入 npx 命令。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npx -c <span class="string">&#x27;echo &quot;$npm_package_name&quot;&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码会输出当前项目的项目名。</p>
+<h2 id="执行-GitHub-源码"><a href="#执行-GitHub-源码" class="headerlink" title="执行 GitHub 源码"></a>执行 GitHub 源码</h2><p>npx 还可以执行 GitHub 上面的模块源码。</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 执行 Gist 代码</span></span><br><span class="line">$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32</span><br><span class="line"></span><br><span class="line"><span class="comment"># 执行仓库代码</span></span><br><span class="line">$ npx github:piuccio/cowsay hello</span><br></pre></td></tr></table></figure>
+<p>注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>因为还没有实际使用过的经验，所以更多的内容从其他大佬哪里白嫖来的知识，做个笔记以观后效。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/04/16/what-is-npx/">npx是什么</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年04月16日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/04/16/what-is-npx/" title="npx是什么">https://blog.lifesli.com/2020/04/16/what-is-npx/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/04/16/what-is-npx/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/npx/" rel="tag"># npx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/16/0-vuecli-3-component/" rel="prev" title="从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】">
+      <i class="fa fa-chevron-left"></i> 从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/05/14/css3-pointer-events/" rel="next" title="CSS3新属性-pointer-events">
+      CSS3新属性-pointer-events <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E8%B5%B7%E6%BA%90"><span class="nav-number">2.</span> <span class="nav-text">npx 起源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#npx-%E4%BD%9C%E7%94%A8"><span class="nav-number">3.</span> <span class="nav-text">npx 作用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97"><span class="nav-number">3.1.</span> <span class="nav-text">避免全局安装模块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%80%93no-install-%E5%8F%82%E6%95%B0%E5%92%8C%E2%80%93ignore-existing-%E5%8F%82%E6%95%B0"><span class="nav-number">3.2.</span> <span class="nav-text">–no-install 参数和–ignore-existing 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%8F%82%E6%95%B0"><span class="nav-number">4.</span> <span class="nav-text">更多参数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#p-%E5%8F%82%E6%95%B0"><span class="nav-number">4.1.</span> <span class="nav-text">-p 参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#c-%E5%8F%82%E6%95%B0"><span class="nav-number">4.2.</span> <span class="nav-text">-c 参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A7%E8%A1%8C-GitHub-%E6%BA%90%E7%A0%81"><span class="nav-number">5.</span> <span class="nav-text">执行 GitHub 源码</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%80%E5%90%8E"><span class="nav-number"></span> <span class="nav-text">最后</span></a></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/04/16/what-is-npx/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/04/16/what-is-npx/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/04/16/what-is-npx/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd7e4e5c80e5bd6c7c259c1c1ccb4cee2',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/05/14/css3-pointer-events/index.html b/ja/2020/05/14/css3-pointer-events/index.html
new file mode 100644
index 0000000000..b8e017cef7
--- /dev/null
+++ b/ja/2020/05/14/css3-pointer-events/index.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CSS3新属性-pointer-events">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/05/14/css3-pointer-events/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0J0XD.png">
+<meta property="og:image" content="https://s1.ax1x.com/2020/05/14/Y0YEjO.png">
+<meta property="article:published_time" content="2020-05-14T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CSS3">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://s1.ax1x.com/2020/05/14/Y08cbd.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/05/14/css3-pointer-events/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>CSS3新属性-pointer-events | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CSS3新属性-pointer-events
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+<span id="more"></span>
+<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>MDN上是这样介绍这个属性的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">传送门</a>。</p>
+<blockquote>
+<p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。</p>
+</blockquote>
+<p>它有如下这些个属性值：</p>
+<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Keyword values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: auto;</span><br><span class="line"><span class="attribute">pointer-events</span>: none;</span><br><span class="line"><span class="attribute">pointer-events</span>: visiblePainted; <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleFill;    <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleStroke;  <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visible;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: painted;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: fill;           <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: stroke;         <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: all;            <span class="comment">/* SVG only */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Global values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: inherit;</span><br><span class="line"><span class="attribute">pointer-events</span>: initial;</span><br><span class="line"><span class="attribute">pointer-events</span>: unset;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>这里有一个特别的值，它进行了专门的介绍，也正是因为这个原因，水印的功能才得以实现。</p>
+<blockquote>
+<p>除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。</p>
+</blockquote>
+<p>由上可知，当我们将pointer-events值设置为none时，它就有了穿透的特性，也就是说你“看得见它，却摸不到它”，而且也不具备鼠标指针的特性，这不正是水印想要的效果嘛，完美~;</p>
+<p>接着往下看我们可以知道它的初始值是auto，并且可以继承<br><img src="https://s1.ax1x.com/2020/05/14/Y0J0XD.png" alt="Y0J0XD.png"></p>
+<p>水印功能就这样实现了是不是简单实用，那么是不是就没有缺点呢，当然要硬说有的话那就是兼容性的问题吧。</p>
+<p>因为这个css3的属性是新出的，自然ie9及以下自然就不支持了，而且ie不支持的范围要到ie11以下，所以ie你为啥不去死呢。。。</p>
+<p><img src="https://s1.ax1x.com/2020/05/14/Y0YEjO.png" alt="Y0YEjO.png"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/05/14/css3-pointer-events/">CSS3新属性-pointer-events</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月14日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/05/14/css3-pointer-events/" title="CSS3新属性-pointer-events">https://blog.lifesli.com/2020/05/14/css3-pointer-events/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/14/css3-pointer-events/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/CSS3/" rel="tag"># CSS3</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/04/16/what-is-npx/" rel="prev" title="npx是什么">
+      <i class="fa fa-chevron-left"></i> npx是什么
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/05/28/Prettier-Setting/" rel="next" title="Prettier格式化配置">
+      Prettier格式化配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.</span> <span class="nav-text">介绍</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/05/14/css3-pointer-events/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/14/css3-pointer-events/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/14/css3-pointer-events/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'aa80a6d12d326b65010f86a64451789e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/05/28/Prettier-Setting/index.html b/ja/2020/05/28/Prettier-Setting/index.html
new file mode 100644
index 0000000000..6cfda3fffe
--- /dev/null
+++ b/ja/2020/05/28/Prettier-Setting/index.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Prettier格式化配置">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/05/28/Prettier-Setting/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-05-28T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Prettier">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/05/28/Prettier-Setting/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Prettier格式化配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Prettier格式化配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 使能每一种语言默认格式化规则</span></span><br><span class="line">    <span class="attr">&quot;[html]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[css]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[less]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[javascript]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*  prettier的配置 */</span></span><br><span class="line">    <span class="attr">&quot;prettier.printWidth&quot;</span>: <span class="number">100</span>, <span class="comment">// 超过最大值换行</span></span><br><span class="line">    <span class="attr">&quot;prettier.tabWidth&quot;</span>: <span class="number">4</span>, <span class="comment">// 缩进字节数</span></span><br><span class="line">    <span class="attr">&quot;prettier.useTabs&quot;</span>: <span class="literal">false</span>, <span class="comment">// 缩进不使用tab，使用空格</span></span><br><span class="line">    <span class="attr">&quot;prettier.semi&quot;</span>: <span class="literal">true</span>, <span class="comment">// 句尾添加分号</span></span><br><span class="line">    <span class="attr">&quot;prettier.singleQuote&quot;</span>: <span class="literal">true</span>, <span class="comment">// 使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.proseWrap&quot;</span>: <span class="string">&quot;preserve&quot;</span>, <span class="comment">// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行</span></span><br><span class="line">    <span class="attr">&quot;prettier.arrowParens&quot;</span>: <span class="string">&quot;avoid&quot;</span>, <span class="comment">//  (x) =&gt; &#123;&#125; 箭头函数参数只有一个时是否要有小括号。avoid：省略括号</span></span><br><span class="line">    <span class="attr">&quot;prettier.bracketSpacing&quot;</span>: <span class="literal">true</span>, <span class="comment">// 在对象，数组括号与文字之间加空格 &quot;&#123; foo: bar &#125;&quot;</span></span><br><span class="line">    <span class="attr">&quot;prettier.disableLanguages&quot;</span>: [<span class="string">&quot;vue&quot;</span>], <span class="comment">// 不格式化vue文件，vue文件的格式化单独设置</span></span><br><span class="line">    <span class="attr">&quot;prettier.endOfLine&quot;</span>: <span class="string">&quot;auto&quot;</span>, <span class="comment">// 结尾是 \n \r \n\r auto</span></span><br><span class="line">    <span class="attr">&quot;prettier.eslintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用eslint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.htmlWhitespaceSensitivity&quot;</span>: <span class="string">&quot;ignore&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;prettier.ignorePath&quot;</span>: <span class="string">&quot;.prettierignore&quot;</span>, <span class="comment">// 不使用prettier格式化的文件填写在项目的.prettierignore文件中</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxBracketSameLine&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中把&#x27;&gt;&#x27; 是否单独放一行</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxSingleQuote&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.parser&quot;</span>: <span class="string">&quot;babylon&quot;</span>, <span class="comment">// 格式化的解析器，默认是babylon</span></span><br><span class="line">    <span class="attr">&quot;prettier.requireConfig&quot;</span>: <span class="literal">false</span>, <span class="comment">// Require a &#x27;prettierconfig&#x27; to format prettier</span></span><br><span class="line">    <span class="attr">&quot;prettier.stylelintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用stylelint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.trailingComma&quot;</span>: <span class="string">&quot;es5&quot;</span>, <span class="comment">// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）</span></span><br><span class="line">    <span class="attr">&quot;prettier.tslintIntegration&quot;</span>: <span class="literal">false</span> <span class="comment">// 不让prettier使用tslint的代码格式进行校验</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/05/28/Prettier-Setting/">Prettier格式化配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年05月28日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/05/28/Prettier-Setting/" title="Prettier格式化配置">https://blog.lifesli.com/2020/05/28/Prettier-Setting/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/05/28/Prettier-Setting/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Prettier/" rel="tag"># Prettier</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/05/14/css3-pointer-events/" rel="prev" title="CSS3新属性-pointer-events">
+      <i class="fa fa-chevron-left"></i> CSS3新属性-pointer-events
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="next" title="rpm命令">
+      rpm命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88"><span class="nav-number">2.</span> <span class="nav-text">一、技术栈</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/05/28/Prettier-Setting/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/05/28/Prettier-Setting/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/05/28/Prettier-Setting/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '75dbf451042ef6538508121346fa7fcb',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2020/07/19/rpm\345\221\275\344\273\244/index.html" "b/ja/2020/07/19/rpm\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..33211e3560
--- /dev/null
+++ "b/ja/2020/07/19/rpm\345\221\275\344\273\244/index.html"
@@ -0,0 +1,663 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:type" content="article">
+<meta property="og:title" content="rpm命令">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  安装sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm] 卸载sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64] 查询功能命令格式 rpm {-q|–query} [select-options] [query-options] 　　RPM的查询功能是极为强大，是极为重要">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-07-19T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="RPM">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>rpm命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          rpm命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">rpm命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年07月19日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" title="rpm命令">https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/RPM/" rel="tag"># RPM</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/05/28/Prettier-Setting/" rel="prev" title="Prettier格式化配置">
+      <i class="fa fa-chevron-left"></i> Prettier格式化配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="next" title="Linux目录说明">
+      Linux目录说明 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%B8%E8%BD%BD"><span class="nav-number">2.</span> <span class="nav-text">卸载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%9F%E8%83%BD"><span class="nav-number">3.</span> <span class="nav-text">查询功能</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '556c5a1b194bddaed36e7ada0b01f8c1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html" "b/ja/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
new file mode 100644
index 0000000000..24cf92465e
--- /dev/null
+++ "b/ja/2020/08/02/Linux\347\233\256\345\275\225\350\257\264\346\230\216/index.html"
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Linux目录说明">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  &#x2F;bin：bin是Binary的缩写, 这个目录存放着最经常使用的命令。 &#x2F;boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。 &#x2F;dev ：dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。 &#x2F;etc：这个目录用来存放所有的系统管理所需要的配置文件和">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Linux">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Linux目录说明 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Linux目录说明
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">Linux目录说明</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" title="Linux目录说明">https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Linux/" rel="tag"># Linux</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" rel="prev" title="rpm命令">
+      <i class="fa fa-chevron-left"></i> rpm命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/10/learn-go/" rel="next" title="从零开始：学习Go（一）">
+      从零开始：学习Go（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#bin%EF%BC%9A"><span class="nav-number">1.</span> <span class="nav-text">&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#boot%EF%BC%9A"><span class="nav-number">2.</span> <span class="nav-text">&#x2F;boot：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dev-%EF%BC%9A"><span class="nav-number">3.</span> <span class="nav-text">&#x2F;dev ：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A"><span class="nav-number">4.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#home%EF%BC%9A"><span class="nav-number">5.</span> <span class="nav-text">&#x2F;home：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lib%EF%BC%9A"><span class="nav-number">6.</span> <span class="nav-text">&#x2F;lib：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lost-found%EF%BC%9A"><span class="nav-number">7.</span> <span class="nav-text">&#x2F;lost+found：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#media-linux"><span class="nav-number">8.</span> <span class="nav-text">&#x2F;media linux</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mnt%EF%BC%9A"><span class="nav-number">9.</span> <span class="nav-text">&#x2F;mnt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#opt%EF%BC%9A"><span class="nav-number">10.</span> <span class="nav-text">&#x2F;opt：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proc%EF%BC%9A"><span class="nav-number">11.</span> <span class="nav-text">&#x2F;proc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#root%EF%BC%9A"><span class="nav-number">12.</span> <span class="nav-text">&#x2F;root：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sbin%EF%BC%9A"><span class="nav-number">13.</span> <span class="nav-text">&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#selinux%EF%BC%9A"><span class="nav-number">14.</span> <span class="nav-text">&#x2F;selinux：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#srv%EF%BC%9A"><span class="nav-number">15.</span> <span class="nav-text">&#x2F;srv：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sys%EF%BC%9A"><span class="nav-number">16.</span> <span class="nav-text">&#x2F;sys：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#tmp%EF%BC%9A"><span class="nav-number">17.</span> <span class="nav-text">&#x2F;tmp：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr%EF%BC%9A"><span class="nav-number">18.</span> <span class="nav-text">&#x2F;usr：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-bin%EF%BC%9A"><span class="nav-number">19.</span> <span class="nav-text">&#x2F;usr&#x2F;bin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-sbin%EF%BC%9A"><span class="nav-number">20.</span> <span class="nav-text">&#x2F;usr&#x2F;sbin：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#usr-src%EF%BC%9A"><span class="nav-number">21.</span> <span class="nav-text">&#x2F;usr&#x2F;src：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#var%EF%BC%9A"><span class="nav-number">22.</span> <span class="nav-text">&#x2F;var：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#etc%EF%BC%9A-1"><span class="nav-number">23.</span> <span class="nav-text">&#x2F;etc：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bin-sbin-usr-bin-usr-sbin"><span class="nav-number">24.</span> <span class="nav-text">&#x2F;bin, &#x2F;sbin, &#x2F;usr&#x2F;bin, &#x2F;usr&#x2F;sbin:</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bf439fbd502ecba9e50197a57c8a0609',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/11/10/learn-cordova-1/index.html b/ja/2020/11/10/learn-cordova-1/index.html
new file mode 100644
index 0000000000..cf0829f55d
--- /dev/null
+++ b/ja/2020/11/10/learn-cordova-1/index.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Cordova（一）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/11/10/learn-cordova-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，Cordova 就是其中之一。 接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+<meta property="og:image" content="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Cordova">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/11/10/learn-cordova-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>从零开始：学习Cordova（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Cordova（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+<span id="more"></span>
+<h2 id="一、What-is-Cordova？-Cordova是个啥？"><a href="#一、What-is-Cordova？-Cordova是个啥？" class="headerlink" title="一、What is Cordova？ Cordova是个啥？"></a>一、What is Cordova？ Cordova是个啥？</h2><p><img src="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png" alt="Logo"><br>移动端开发和 <code>Web</code> 开发有一些不一样，<code>Web</code> 端开发面向的是浏览器，而移动端开发面向的是各种移动设备，那么针对各种移动设备提供的 <code>SDK</code> 进行开发的话，我们通常称之为***<code>原生开发</code>***，原生开发虽然通常调用底层 <code>Api</code> ，性能更好，但是因为不同移动终端底层技术不一样，所以每种设备都要单独开发，这样开发成本和能力要求都比较高，所以通常都会有一些框架来兼容各种平台，就好比 <code>Java</code> 虚拟机可以运行在 <code>Mac/Windows/Linux</code> 一样，为了能够写一套移动端代码可以在各种设备中使用，于是乎就有了 <code>Cordova</code> 。</p>
+<p>上面说了这么一堆废话，其实简言之，***<code>Cordova</code> 就是提供了跨设备调用底层Api的移动端开发框架（这种开发方式又叫做Hybird 模式）***</p>
+<p>知道这一点应该就够了，当然这是我认为的。</p>
+<p><code>Cordova</code> 的官网地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://cordova.apache.org/">https://cordova.apache.org/</a></p>
+</blockquote>
+<p>其实从这里就可以看出， <code>Cordova</code> 是 <code>Apache</code> 基金下的一个项目，其官网是这样介绍它的</p>
+<blockquote>
+<p>Mobile apps with HTML, CSS &amp; JS<br>Target multiple platforms with one code base<br>Free and open source</p>
+</blockquote>
+<p>翻译成中文的话就是</p>
+<blockquote>
+<p>使用 <code>Html</code> ，<code>CSS</code> 和 <code>JS</code> 进行移动端应用开发<br>一份代码多平台使用<br>免费并且开源</p>
+</blockquote>
+<p>三句话解释了 <code>Cordova</code> 的三个方面，</p>
+<ul>
+<li>使用前端技术开发-对前端开发友好</li>
+<li>跨平台-节省开发工时，降低开发难度-从图标看支持 <code>Android/IOS/WP</code>三大平台</li>
+<li>免费不用解释开源的话意味着会有很多人贡献代码</li>
+</ul>
+<p>以上奠定了 <code>Cordova</code> 强大及流行的基础。</p>
+<h2 id="二、快速上手"><a href="#二、快速上手" class="headerlink" title="二、快速上手"></a>二、快速上手</h2><p>在使用 <code>Cordova</code> 做移动端开发之前需要做一些环境准备工作，首先要安装 <code>Node</code> 以及它携带的 <code>Npm</code> 包管理器，这个现代的前端开发应该都知道，我这里就不多说了，装它就完了。</p>
+<p>装好之后我们就要用 <code>Npm</code> 全局安装一下 <code>Cordova</code> 项目的依赖，命令很简单；</p>
+<p>方便的话还要装一下 <code>Git</code> ，因为一些命令要在 <code>git-cmd</code> 上执行，当然管理代码也是需要它的，所以装吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cordova</span><br></pre></td></tr></table></figure>
+<p>就这么简单就可以开发 <code>Cordova</code> 应用了，接下来我们要创建一个项目，创建项目的命令也十分简单。在命令行工具中输入下面的命令你就创建了一个 <code>Cordova</code> 的应用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova create &lt;path&gt; <span class="comment">// 这里的path是项目的路径</span></span><br></pre></td></tr></table></figure>
+<p>如果要查看创建项目时还能设置什么参数你可以执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova help create</span><br></pre></td></tr></table></figure>
+<p>怎么样是不是超级简单。<br>做了上面的工作你就创建了一个具备基本功能的 <code>Cordova</code> 项目，接下来我们要给项目配置一些东西。</p>
+<p>首先刚才讲到了， <code>Cordova</code> 是一个跨平台的框架，那么你的项目要适配什么平台你需要进行一些配置， <code>cd</code> 到项目目录下执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform add &lt;platform name&gt; <span class="comment">// platform name 为适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>如果不知道名称是什么命令行工具也贴心的给了查询用的命令，通过此命令你可以看到你安装了什么平台的适配，有哪些可以用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cordova platform</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>执行了这个命令你将看到下面这样的 <code>list</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/***</span></span><br><span class="line"><span class="comment">Installed platforms:</span></span><br><span class="line"><span class="comment">Available platforms:</span></span><br><span class="line"><span class="comment">  android ^9.0.0</span></span><br><span class="line"><span class="comment">  browser ^6.0.0</span></span><br><span class="line"><span class="comment">  electron ^1.0.0</span></span><br><span class="line"><span class="comment">  windows ^7.0.0</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>项目也创建了，简单的配置工作也完成了，我们可以启动项目看一下效果了，那么我们就该执行运行项目的命令了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run &lt;platform name&gt; <span class="comment">// platform name 适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>到这我们就快速的创建并运行起了一个 <code>Cordova</code> 的工程。</p>
+<h3 id="小Tip"><a href="#小Tip" class="headerlink" title="小Tip"></a>小Tip</h3><p>如上执行启动命令后，默认会启动<em><strong>8000</strong></em>端口，如果被占用的话可以通过增加命令行参数的形式改变端口号，参数如下设置</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run browser --target=chrome --port=<span class="number">9090</span></span><br></pre></td></tr></table></figure>
+<p>以上就可以自定义端口及浏览器启动应用了。</p>
+<h2 id="三、详细了解"><a href="#三、详细了解" class="headerlink" title="三、详细了解"></a>三、详细了解</h2><h3 id="1、概览"><a href="#1、概览" class="headerlink" title="1、概览"></a>1、概览</h3><p>官网开头介绍了 <code>Cordova</code> 的身世和适用范围，前面开头已经讲过了不想再讲，直接看看 <code>Cordova</code> 的架构设计图。<br><img src="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png" alt="此处是个架构图"></p>
+<center>Cordova 架构图</center>
+
+<p>这个图理解起来不难，大的方面是两个部分，底层是 <code>MobileOS</code> ，也就是手机的操作系统本身，上层是由 <code>Cordova</code> 构建的框架；</p>
+<p><code>Cordova</code> 内部的话是两层结构：</p>
+<ul>
+<li>上层的话是由前端代码构成的 <code>WebApp</code> 部分；</li>
+<li>下层是 <code>Cordova</code> 的视图渲染引擎，它为 <code>WebApp</code> 提供了 <code>HtmlApi</code> 和 <code>CordovaApi</code> ；</li>
+</ul>
+<p>也就是说我们可以调用 <code>html</code> 的原生 <code>Api</code> 也可以使用 <code>Cordova</code> 提供的 <code>jsApi</code> ；</p>
+<p><code>Cordova</code> 还提供了丰富的插件系统；通过 <code>Cordova</code> 的视图引擎调用 <code>Cordova</code> 的 <code>NativeApi</code> 来调用一些 <code>Cordova</code> 提供好的调用设备的信息的 <code>Api</code> ，另外也可以调用一些用户自定义的 <code>Api</code> ；</p>
+<p><code>Cordova</code> 视图引擎和插件系统再将上层的需求通过 <code>MobileOS</code> 开放的 <code>Api</code> 能力实现具体功能，由此完成了整个 <code>Cordova</code> 框架的使用；</p>
+<p>总的来说这个原理跟大多数跨平台的框架原理都类似，由框架提供统一的 <code>Api</code> 能力，再由框架处理不同平台的兼容，这里特别之处在于渲染引擎可以允许使用前端原生的 <code>Api</code> ，这将大大降低开发的难度。</p>
+<h4 id="WebView"><a href="#WebView" class="headerlink" title="WebView"></a>WebView</h4><p>说到移动端开发，不知道 <code>WebView</code> 应该是不可能的，在原生移动应用中，<code>WebView</code> 就是移动应用内部嵌入的一个‘浏览器’，它可以允许你使用前端技术展示内容。</p>
+<h4 id="WebApp"><a href="#WebApp" class="headerlink" title="WebApp"></a>WebApp</h4><p><code>WebApp</code> 跟 <code>WebView</code> 两个词有些像，事实上它们也确实有些关系，<code>WebApp</code> 从名字就可以看出是使用 <code>Web</code> 技术开发的 <code>App</code> ，那么它跟 <code>WebView</code> 是什么关系呢，打个比方，<code>WebView</code> 就是个快递盒子， <code>WebApp</code> 就是你买的商品，一个是<em><strong>容器</strong></em>，一个是<em><strong>内容</strong></em>；这样说应该就明白了吧，通过前端技术开发的 <code>App</code> 通过 <code>WebView</code> 嵌入到 <code>App</code> 中，就可以带给用户原生应用的体验，忘了说 <code>WebApp</code> 是只能用浏览器访问的 <code>App</code> ；</p>
+<p>和纯 <code>WebApp</code> 不同，嵌入到 <code>WebView</code> 中的 <code>WebApp</code> 需要有一个配置文件，***<code>config.xml</code>*** ，它在项目的根目录下，说明了应用的一些信息，这个文件必不可少！！！</p>
+<h4 id="插件系统"><a href="#插件系统" class="headerlink" title="插件系统"></a>插件系统</h4><p>刚刚在上面的架构图中我们介绍了 <code>Cordova</code> 的插件系统，它提供了我们通过 <code>js</code> 调用 <code>MobileApi</code> 的能力，如电源/相机/联系人等等；<br>官方维护了核心的功能，当然如果你愿意也可以调用一些第三方提供的插件，你可以方便的通过 <code>npm</code> 包管理器安装；</p>
+<p><em><strong>但是有一点必须要说</strong></em>：项目创建后默认是不带任何插件的，即使是官方的核心插件也是需要你自己导入进去，第三方的更不用说了，另外<code>Cordova</code> 只提供了功能 <code>Api</code> 并不包含任何的 <code>UI</code> 部件和 <code>MV</code> 框架（你可以根据自己喜欢使用 <code>Angular</code> 或者 <code>Vue</code> 或者其他什么都可以），这一点要牢记。</p>
+<h4 id="开发工作流"><a href="#开发工作流" class="headerlink" title="开发工作流"></a>开发工作流</h4><p>使用 <code>Cordova</code> 开发 <code>MobileApp</code> 的时候即可以开发<strong>多个</strong>平台的 <code>App</code> （一次开发多平台可用，降低开发成本），也可以专注开发<strong>某一</strong>平台的<code>App</code> （使用前端技术开发，降低开发难度），因此开发工作流也分为两种：</p>
+<h5 id="跨平台-CLI-的工作流"><a href="#跨平台-CLI-的工作流" class="headerlink" title="跨平台(CLI)的工作流"></a>跨平台(CLI)的工作流</h5><p>官网上说了很多，也不难理解，这里用我自己的话说就是， <code>Cordova</code> 提供了一个牛叉的 <code>CLI</code> 工具，它可以自动的完成一次编码多平台构建的事，你只需要按照它说的方式开发就行。：）</p>
+<h5 id="平台为中心的工作流"><a href="#平台为中心的工作流" class="headerlink" title="平台为中心的工作流"></a>平台为中心的工作流</h5><p>这里不得不说我没有看很明白，但是结合下面的注意事项我是这样理解的，因为只为某一平台服务，所以有一些针对此平台的特殊的功能或者插件你就可以使用了（虽然不太清楚为什么这么做，如果你知道告诉我，谢谢），<strong>但是一旦使用了这种开发方式，那么就回不到跨平台开发了</strong>，因为你使用了针对某一平台才能调用的代码，这也不难理解，从字里行间感觉就是不建议使用这种开发工作流（好的好的，知道了）。</p>
+<p>好的，接下来开发 <code>App</code> 啦；</p>
+<h3 id="2、开发应用"><a href="#2、开发应用" class="headerlink" title="2、开发应用"></a>2、开发应用</h3><p>快速上手中已经介绍了如何准备、创建和启动应用，如何添加平台，这里就不多说了。说些没讲过的。</p>
+<p>上面说过检查目前平台安装情况的话可以使用下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platforms</span><br></pre></td></tr></table></figure>
+<p>我们也可以使用另一个命令来看，我试验了一下，效果是一样的。。。（问号脸，一样的为什么搞两个命令）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova platform ls</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>事后我发现，无论我使用的命令是 <code>platform</code> 还是 <code>platforms</code> 加不加 <code>ls</code> 都可以查到当前安装的平台。。。 啊~兼容性好强。</p>
+</blockquote>
+<p>每执行一次 <code>add</code> 命令，你就会发现工程目录下的 <code>platforms</code> 目录下就对应生成了一个对应平台的文件夹，切勿手贱删除，你虽然删除了文件夹，但是各处设置的 <code>platform</code> 并没有去掉，会导致报错，如果要删除请使用 <code>remove</code> 命令。 想知道还有哪些命令的话就看下面的链接吧。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-platform-command">命令大全</a></p>
+<h3 id="安装构建的先决条件"><a href="#安装构建的先决条件" class="headerlink" title="安装构建的先决条件"></a>安装构建的先决条件</h3><p>因为 <code>Cordova</code> 的底层还是要调用 <code>MobileOS</code> 的接口，所以各平台的 <code>SDK</code> 是必须要装的，当然这里指的是你要进行构建的平台，比如你要构建 <code>Android</code> 应用，那么你就要装 <code>Android</code> 的 <code>SDK</code> ，<code>IOS</code> 同理。<strong>这里有一个例外</strong><code>broswer</code>平台是不需要依赖其他 <code>SDK</code> 的（明明是开发 <code>APP</code> ，这里只是为了验证画面比较方便）<br>要看你是否满足了构建需要的依赖，可以执行下面的命令查看</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova requirements</span><br></pre></td></tr></table></figure>
+<p>执行完后你会得到如下结果</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Requirements check results <span class="keyword">for</span> android:</span><br><span class="line">Java JDK: installed .</span><br><span class="line">Android SDK: installed</span><br><span class="line">Android target: installed android-<span class="number">19</span>,android-<span class="number">21</span>,android-<span class="number">22</span>,android-<span class="number">23</span>,Google Inc.:Google Apis:<span class="number">19</span>,Google Inc.:Google Apis (x86 System Image):<span class="number">19</span>,Google Inc.:Google Apis:<span class="number">23</span></span><br><span class="line">Gradle: installed</span><br><span class="line"></span><br><span class="line">Requirements check results <span class="keyword">for</span> ios:</span><br><span class="line">Apple OS X: not installed</span><br><span class="line">Cordova tooling <span class="keyword">for</span> iOS requires Apple OS X</span><br><span class="line"><span class="built_in">Error</span>: Some <span class="keyword">of</span> requirements check failed</span><br></pre></td></tr></table></figure>
+<p>这样你就可以清楚的知道自己需要安装哪些依赖才能完成对应平台的构建，简直方便的不要不要的。<br>具体想知道不同的平台都依赖些什么，你可以参见下面的链接；</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#requirements-and-support">Android平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/ios/index.html#requirements-and-support">iOS平台的要求</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/win8/index.html#requirements-and-support">Windows平台的要求</a></li>
+</ul>
+<h3 id="构建-App"><a href="#构建-App" class="headerlink" title="构建 App"></a>构建 <code>App</code></h3><p>在 <code>create</code> 项目之后，项目的根目录下会生成一个 <code>www</code> 目录，这个目录包含了 <code>webapp</code> 的入口页面 <code>index.html</code> ，入口文件的话是 <code>www/js/index.js</code> 文件的 <code>deviceready</code> 事件中。</p>
+<p>如果要构建代码的话，执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build</span><br></pre></td></tr></table></figure>
+<p>这个命令会构建你安装的所有平台，如果只想构建某一平台的话，可以把平台的名字加在命令后面，如</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build ios</span><br></pre></td></tr></table></figure>
+<p>如果想了解更多的参数的话，可以看一下后面的链接。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-build-command">更多参数</a></p>
+<h3 id="测试-App"><a href="#测试-App" class="headerlink" title="测试 App"></a>测试 <code>App</code></h3><p>构建完 <code>App</code> 之后我们就可以测试了，通常各平台的 <code>SDK</code> 中会提供模拟器，我们只需要执行下面的命令就可以启动模拟器。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova emulate android</span><br></pre></td></tr></table></figure>
+<p>当然如果你觉得用实机查看更自然一些的话，也可以把手机插上数据线与电脑建立连接，然后执行下面的命令就可以了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
+<p>上面演示的是 <code>Android</code> 的 <code>App</code> 测试过程，每个平台虽然基本类似，但还是有出入，所以，下面提供了不同平台的调试方法，供你预览。</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#setting-up-an-emulator">设置Android模拟器</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-run-command">Cordova run 命令参考文档</a></li>
+<li><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-emulate-command">Cordova emulate 命令参考文档</a></li>
+</ul>
+<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><p>如果只是开发一个 <code>Cordova</code> 框架的 <code>WebApp</code> ，那么你不需要装任何插件，直接用前端技术开发就好了，但是应该没人会这么做吧，毕竟开发这个的目的就是为了跨平台开发原生级移动 <code>App</code> ，因此要调用移动设备的各种功能就必须安装插件。</p>
+<h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p><code>Cordova</code> 插件是一些使用 <code>Javascript</code> 调用原生 <code>SDK</code> 功能的包；<br>你可以使用两种方式找到你想要的插件</p>
+<ol>
+<li>通过 <code>Cordova</code> 提供的包管理平台 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/plugins/">插件搜索页</a></li>
+<li>通过命令行搜索 <em><strong><code>cordova plugin search camera</code></strong></em></li>
+</ol>
+<p>选好你要安装的插件之后你需要执行下面的命令来安装它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova plugin add &lt;plugin name&gt; <span class="comment">// 如 cordova plugin add cordova-plugin-chrome-apps-proxy</span></span><br></pre></td></tr></table></figure>
+<p>如果你的包没有发布在 <code>Cordova</code> 的平台上，也可以使用 <code>git</code> 地址来安装。<br>另外 <code>Cordova</code> 还非常贴心的提供了一个工具 <code>Plugman</code> 来帮助开发者更好的管理 <code>Cordova</code> 插件。⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/plugin_ref/plugman.html">Plugman参考</a></p>
+<p>如果要查看你安装了哪些插件可以使用下面任意一种命令都可以。（咱也不知道为啥提供这么多方式，反正好用无脑）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">plugin ls</span><br><span class="line">plugin list</span><br><span class="line">plugin</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">$ cordova plugin ls</span></span><br><span class="line"><span class="comment">cordova-plugin-whitelist 1.2.1 &quot;Whitelist&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>如果想知道更多关于 <code>plugin</code> 的命令参数，可以看右边的链接 ⇒ <a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-plugin-command">plugin参数</a></p>
+<h4 id="使用-merges-自定义每个平台"><a href="#使用-merges-自定义每个平台" class="headerlink" title="使用 merges 自定义每个平台"></a>使用 <code>merges</code> 自定义每个平台</h4><p>虽然可以用一套代码来构建多个平台，但一些平台会有自己的特点，就好像 <code>Chrome</code> 浏览器默认的字体大小与 <code>IE</code> 的不同， <code>Android</code> 与 <code>IOS</code> 也有不一样的地方，这种情况下去改 <code>www</code> 目录下的文件显然是不合适的，所以 <code>Cordova</code> 提供了 <code>merges</code> 方式来适配不同平台各自的特别处理，你要做的就是在项目的根目录下创建一个 <code>merges</code> 目录，比如你要适配 <code>Android</code> ，你就可以在 <code>merges</code> 下创建一个 <code>android</code> 目录，然后在下面或覆盖或添加新的资源。（这里官网没有说 <code>merges</code> 在哪里创建，试验后发现是在根目录下）</p>
+<h4 id="更新-Cordova-和你的项目"><a href="#更新-Cordova-和你的项目" class="headerlink" title="更新 Cordova 和你的项目"></a>更新 <code>Cordova</code> 和你的项目</h4><p>如果你要更新你的 <code>Cordova</code> （通常不建议这么干，当然你知道后果并想要使用新的特性或者修正 <code>bug</code> 除外），那么你需要执行一下 <code>update</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm update -g cordova</span><br></pre></td></tr></table></figure>
+<p>当然你也可以指定更新到什么版本（这都是 <code>npm</code> 的知识了）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install -g cordova@<span class="number">3.1</span><span class="number">.0</span>-<span class="number">0.2</span><span class="number">.0</span></span><br></pre></td></tr></table></figure>
+<p>你也可以使用下面的命令查看当前的版本（还是 <code>npm</code> 的知识）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm info cordova version</span><br></pre></td></tr></table></figure>
+<p>你是不是以为这样就可以了，不好意思还不行，你还需要把各个平台进行一下升级</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cordova platform update android --save</span><br><span class="line">cordova platform update ios --save</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>
+<p>其实这也好理解，你都已经轿车换 <code>SUV</code> 了，总不能还用原来的车轱辘吧，只是我希望能不能在换车的时候一块儿把车轱辘换了（这里的意思是希望直接自动化处理了）</p>
+<p>到这里你的第一个 <code>App</code> 就已经开发好了，是不是还有点成就感。</p>
+<h3 id="一些参考资料"><a href="#一些参考资料" class="headerlink" title="一些参考资料"></a>一些参考资料</h3><p>到这里一个简单的基于 <code>Cordova</code> 搭建的 <code>App</code> 就实现了，当然一个 <code>App</code> 绝不这么简单，各平台的 <code>SDK</code> 安装也没那么简单，但这不是本篇文章要说的事了，下一篇文章我会说说如何应对各种不同的开发平台，在这之前还请你看一下 <code>Cordova</code> 都支持哪些平台，具体看一下下面的链接。</p>
+<p>好了，今天就先写到这里，下篇文章我们再见。</p>
+<p><a target="_blank" rel="noopener" href="http://cordova.axuer.com/docs/zh-cn/latest/guide/support/index.html">平台支持</a></p>
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/11/10/learn-cordova-1/">从零开始：学习Cordova（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/11/10/learn-cordova-1/" title="从零开始：学习Cordova（一）">https://blog.lifesli.com/2020/11/10/learn-cordova-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-cordova-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Cordova/" rel="tag"># Cordova</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/10/learn-go/" rel="prev" title="从零开始：学习Go（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Go（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/11/learn-ionic-1/" rel="next" title="从零开始：学习Ionic（一）">
+      从零开始：学习Ionic（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81What-is-Cordova%EF%BC%9F-Cordova%E6%98%AF%E4%B8%AA%E5%95%A5%EF%BC%9F"><span class="nav-number">2.</span> <span class="nav-text">一、What is Cordova？ Cordova是个啥？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">二、快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8FTip"><span class="nav-number">3.1.</span> <span class="nav-text">小Tip</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E8%AF%A6%E7%BB%86%E4%BA%86%E8%A7%A3"><span class="nav-number">4.</span> <span class="nav-text">三、详细了解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E6%A6%82%E8%A7%88"><span class="nav-number">4.1.</span> <span class="nav-text">1、概览</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#WebView"><span class="nav-number">4.1.1.</span> <span class="nav-text">WebView</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WebApp"><span class="nav-number">4.1.2.</span> <span class="nav-text">WebApp</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F"><span class="nav-number">4.1.3.</span> <span class="nav-text">插件系统</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.</span> <span class="nav-text">开发工作流</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B7%A8%E5%B9%B3%E5%8F%B0-CLI-%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.1.</span> <span class="nav-text">跨平台(CLI)的工作流</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B9%B3%E5%8F%B0%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">4.1.4.2.</span> <span class="nav-text">平台为中心的工作流</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8"><span class="nav-number">4.2.</span> <span class="nav-text">2、开发应用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85%E6%9E%84%E5%BB%BA%E7%9A%84%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6"><span class="nav-number">4.3.</span> <span class="nav-text">安装构建的先决条件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BA-App"><span class="nav-number">4.4.</span> <span class="nav-text">构建 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%8B%E8%AF%95-App"><span class="nav-number">4.5.</span> <span class="nav-text">测试 App</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.</span> <span class="nav-text">添加插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6"><span class="nav-number">4.6.1.</span> <span class="nav-text">插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-merges-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%AF%8F%E4%B8%AA%E5%B9%B3%E5%8F%B0"><span class="nav-number">4.6.2.</span> <span class="nav-text">使用 merges 自定义每个平台</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0-Cordova-%E5%92%8C%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.6.3.</span> <span class="nav-text">更新 Cordova 和你的项目</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E4%BA%9B%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-number">4.7.</span> <span class="nav-text">一些参考资料</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/11/10/learn-cordova-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-cordova-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-cordova-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0b007fa93ced835b0548ff95aac62b75',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/11/10/learn-go/index.html b/ja/2020/11/10/learn-go/index.html
new file mode 100644
index 0000000000..5d16488a6e
--- /dev/null
+++ b/ja/2020/11/10/learn-go/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Go（一）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/11/10/learn-go/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2020-11-10T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Go语言">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/11/10/learn-go/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>从零开始：学习Go（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Go（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/11/10/learn-go/">从零开始：学习Go（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月10日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/11/10/learn-go/" title="从零开始：学习Go（一）">https://blog.lifesli.com/2020/11/10/learn-go/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/10/learn-go/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Go%E8%AF%AD%E8%A8%80/" rel="tag"># Go语言</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" rel="prev" title="Linux目录说明">
+      <i class="fa fa-chevron-left"></i> Linux目录说明
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/10/learn-cordova-1/" rel="next" title="从零开始：学习Cordova（一）">
+      从零开始：学习Cordova（一） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/11/10/learn-go/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/10/learn-go/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/10/learn-go/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'dda06e6811c5f25e15fc433eaf33f7dd',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2020/11/11/learn-ionic-1/index.html b/ja/2020/11/11/learn-ionic-1/index.html
new file mode 100644
index 0000000000..da3c114679
--- /dev/null
+++ b/ja/2020/11/11/learn-ionic-1/index.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:type" content="article">
+<meta property="og:title" content="从零开始：学习Ionic（一）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2020/11/11/learn-ionic-1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言在移动 App 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 Ionic 么？”，是的，就是 Ionic 框架。 之前已经学习过了 Cordova ，它和 Ionic 可以说是一对黄金搭档，一个面向 MobileOS ，一个面向 UI ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 Ionic。 好戏开始：）">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://blog.lifesli.com/">
+<meta property="article:published_time" content="2020-11-11T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Ionic">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2020/11/11/learn-ionic-1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>从零开始：学习Ionic（一） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          从零开始：学习Ionic（一）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+<span id="more"></span>
+<h2 id="Ionic-简介"><a href="#Ionic-简介" class="headerlink" title="Ionic 简介"></a>Ionic 简介</h2><p>学一门技术，我们首先要知道它是谁，能干啥，有啥好处。要了解一门新技术最好的方式就是去它的官网看看。<br>（一言不合丢给你一个官网 ⇒ <a target="_blank" rel="noopener" href="https://ionicframework.com/">官网</a>）</p>
+<blockquote>
+<p>One codebase.<br>Any platform.<br>Now in Vue.</p>
+</blockquote>
+<p>翻译过来是这样的</p>
+<blockquote>
+<p>一份代码<br>任何平台<br>现在支持Vue</p>
+</blockquote>
+<p>看着是不是眼熟，嗯，跟 <code>Cordova</code> 的口号何其相似，目标都是跨平台，只是 <code>Cordova</code> 跨的是 <code>MobileOS</code> 而 <code>Ionic</code> 跨的是前端框架。<br>最下面一句 <code>Now in Vue</code> 像是在说，“嗯，我也支持Vue了（Vue发展太快了，不能掉队）”，要知道，最开始的 <code>Ionic</code> 是妥妥的 <code>Angular</code> 派，不过无所谓，管他黑猫白猫，能完成任务就是好猫。</p>
+<p>再往下看你会看到，巴拉巴拉说了一堆好处，比如开发迅速啊，组件优美且丰富啊，社区强大啊，还有跨平台（支持原生 <code>js</code> ，<code>Angular</code> ，<code>Vue</code> ，nice~），另外还提供了 <code>native</code> 的组件来直接调用移动设备的功能，可以说是相当强大了。</p>
+<p>好了，看完了介绍，我们赶紧快速上手吧。</p>
+<h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>在使用<code>Ionic</code>做开发还是要做一些准备工作，<code>node</code>，<code>git</code>都是必不可少的，所以请先行准备好。</p>
+<p>目前，<code>Ionic</code>提供了两种创建工程的方式:</p>
+<ul>
+<li>一种用官方的话说叫<code>StepByStep</code>，看过之后我理解就是通过命令的方式，一步步来；</li>
+<li>另一种的话是官方提供了一个向导工具，就跟安装软件一样填一些必要的信息，然后一路下一步就生成了一个工程；</li>
+</ul>
+<p>接下来我将使用这两种方式分别创建工程，首先是第一种。</p>
+<h3 id="StepByStep-创建工程"><a href="#StepByStep-创建工程" class="headerlink" title="StepByStep 创建工程"></a>StepByStep 创建工程</h3><ol>
+<li>全局安装<code>Ionic</code>的脚手架工具<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli</span><br></pre></td></tr></table></figure></li>
+<li>创建工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ionic start myApp tabs <span class="comment">// myApp 是项目目录名称也是工程名称 tabs是模板名称</span></span><br></pre></td></tr></table></figure></li>
+<li>启动工程<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd myApp</span><br><span class="line">ionic serve</span><br></pre></td></tr></table></figure></li>
+</ol>
+<p>嗯，上面三个步骤之后，你的Ionic项目就启动起来了。（What ！？ 这么简单？！ 嗯，是的。）</p>
+<h3 id="向导式（App-Wizard）创建工程"><a href="#向导式（App-Wizard）创建工程" class="headerlink" title="向导式（App Wizard）创建工程"></a>向导式（App Wizard）创建工程</h3><p>这是一个在线创建工程的手段（感觉对于开发人员来说貌似还是命令行来的方便，这种可视化方案应该是给小白用户准备的吧），地址如下</p>
+<blockquote>
+<p><a target="_blank" rel="noopener" href="https://ionicframework.com/start">https://ionicframework.com/start</a></p>
+</blockquote>
+<p><img src="/" alt="此处是个图"></p>
+<p>点开上面的地址，你会看到如图所示的一个界面，我们可以看到它要求你输入的一些信息</p>
+<ol>
+<li>App Name</li>
+<li>Icon</li>
+<li>Theme Color</li>
+<li>Template</li>
+<li>Framework</li>
+</ol>
+<p>可以看到这比命令行要多出几个信息，上面的命令行只要求了 <code>App Name</code> 和 <code>Template</code> 难道强大的命令行不支持设置这些么？答案是否定的，当然可以设置这些信息，只是以参数的形式而已，先不说这个，填写好上面的信息以后我们点击<code>[create App]</code>按钮，这时我们进入了下一步，选择代码仓库（Choose a git host），你会看到下面有一个<code>[Skip]</code>按钮说明这步不是必须的，我们先选择一个<code>git</code>仓库，这里我选择<code>github</code>，其他的感兴趣的同学可以自己试试。点击<code>[connect]</code>，这时会弹出一个窗口，申请对应git仓库的鉴权认证，认证通过后我们点击<code>[choose]</code>，等待程序运行一会儿后工程就会被上传到git仓库中，并且会跳转到一个<code>DashBoard</code>，提供了可视化管理工程的页面（也太高大上了吧），右侧我们看到如何把代码下载到本地，并运行它，真的是很方便。</p>
+<p>例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli cordova-res <span class="comment">// cordova-res 指的是安装 cordova 的开发依赖，因为除 cordova 之外还可以选择如 phonegap 之类的MobileOS 框架</span></span><br><span class="line">git clone https:<span class="comment">//github.com/lixuguang/li-app.git li-app</span></span><br><span class="line">cd li-app &amp;&amp; npm install &amp;&amp; ionic serve</span><br></pre></td></tr></table></figure>
+
+<p>执行完上面的命令以后，我们的工程也就运行起来了，也是十分方便，即使不会写代码的人，跟着指南也可以很方便的搭建一个Ionic工程。</p>
+<h2 id="深入学习"><a href="#深入学习" class="headerlink" title="深入学习"></a>深入学习</h2><p>Ionic 的体系当中，最重要的莫过于 Ionic CLI 和 UI Component 两个了，接下来我将分辨将这两部分中最重要的内容拿出来说说。</p>
+<h3 id="Ionic-CLI"><a href="#Ionic-CLI" class="headerlink" title="Ionic CLI"></a>Ionic CLI</h3><p>在上面的快速上手中，我们已经使用了几个命令，但这些还不够，Ionic CLI 提供了强大的命令，请与我一起看一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @ionic/cli <span class="comment">// 全局安装 Ionic CLI</span></span><br><span class="line">ionic start myApp tabs <span class="comment">// 用模板创建工程</span></span><br><span class="line">ionic start --list <span class="comment">// 查看可用模板</span></span><br><span class="line">ionic serve <span class="comment">// 启动工程</span></span><br><span class="line">ionic serve --lab <span class="comment">// 以android或ios方式打开</span></span><br><span class="line">ionic lib update <span class="comment">// 更新包</span></span><br><span class="line">ionic serve --address <span class="number">192.168</span><span class="number">.89</span><span class="number">.1</span> <span class="comment">// 指定Ip，给外部用户访问</span></span><br><span class="line">ionic platform add ios/android <span class="comment">// 添加平台</span></span><br><span class="line">ionic build ios/android <span class="comment">// 构建平台</span></span><br><span class="line">ionic emulate ios [options]  <span class="comment">// ionic run ios [options] 模拟器运行</span></span><br><span class="line"></span><br><span class="line">ionic generate <span class="comment">// 创建新特性</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">options</span><br><span class="line">  -l <span class="comment">//livereload， 实时刷新变化。</span></span><br><span class="line">  -c  <span class="comment">//打印app里的console</span></span><br><span class="line">  -s  <span class="comment">//打印设备的console</span></span><br><span class="line">  -p  <span class="comment">//指定设备的端口</span></span><br><span class="line">  -i  <span class="comment">//指定livereload的重刷端口</span></span><br><span class="line">  --debug <span class="comment">//debug</span></span><br><span class="line">  --release <span class="comment">//release</span></span><br><span class="line">  --host=<span class="number">0.0</span><span class="number">.0</span><span class="number">.0</span> <span class="comment">// IP</span></span><br><span class="line">  --port=<span class="number">8100</span> <span class="comment">// 端口</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">ionic resources [--splash] [--icon] <span class="comment">// 上传代码到官方平台</span></span><br><span class="line">ionic upload <span class="comment">// 登录</span></span><br><span class="line">ionic info <span class="comment">// 查看系统信息</span></span><br><span class="line">ionic browser add crosswalk <span class="comment">// 加壳预览（手机浏览器性能问题解决）</span></span><br><span class="line">ionic browser list <span class="comment">// 查看可用的browser</span></span><br><span class="line">ionic browser revert android/ios <span class="comment">// 删除安装的browser</span></span><br><span class="line">ionic state reset <span class="comment">// 先删除平台和插件，再安装package.json文件中的平台和插件。重置</span></span><br><span class="line">ionic state save <span class="comment">// 保存当前状态信息</span></span><br><span class="line">ionic state clear <span class="comment">// 先删除平台和插件，然后按照package.json文件中包含的平台和插件重新安装。</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/angular@latest --save <span class="comment">// Ionic + Angular</span></span><br><span class="line">ng add @ionic/angular <span class="comment">// 使用Angular CLI 增加Ionic的组件库，可用于Angular项目改造Ionic</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/react <span class="comment">// Ionic + React</span></span><br><span class="line">npm install @ionic/react-router <span class="comment">// 在既存的react项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务，加在根组件下</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">npm install @ionic/vue @ionic/vue-router <span class="comment">// Ionic + Vue ，在既存的Vue项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js 文件中加入引入</span></span><br><span class="line"><span class="keyword">import</span> &#123; IonicVue &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = createApp(App)</span><br><span class="line">  .use(IonicVue)</span><br><span class="line">  .use(router);</span><br><span class="line"></span><br><span class="line">router.isReady().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  app.mount(<span class="string">&#x27;#app&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/index.js 用Ionic提供的vue-router替换原本的vue-router</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue-router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  <span class="comment">// routes go here</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(process.env.BASE_URL),</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务 main.js</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">From here, you can learn about how to develop <span class="keyword">with</span> Ionic Framework <span class="keyword">in</span> our [Ionic Vue Quickstart Guide](https:<span class="comment">//ionicframework.com/docs/vue/quickstart).</span></span><br><span class="line"></span><br><span class="line">## Ionicons CDN</span><br><span class="line"></span><br><span class="line">Ionicons is packaged by <span class="keyword">default</span> <span class="keyword">with</span> the Ionic Framework, so no installation is necessary <span class="keyword">if</span> you<span class="string">&#x27;re using Ionic. To use Ionicons without Ionic Framework, place the following `&lt;script&gt;` near the end of your page, right before the closing `&lt;/body&gt;` tag.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script nomodule src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br></pre></td></tr></table></figure>
+
+
+<p>（待续…）</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2020/11/11/learn-ionic-1/">从零开始：学习Ionic（一）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2020年11月11日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2020/11/11/learn-ionic-1/" title="从零开始：学习Ionic（一）">https://blog.lifesli.com/2020/11/11/learn-ionic-1/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2020/11/11/learn-ionic-1/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Ionic/" rel="tag"># Ionic</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/10/learn-cordova-1/" rel="prev" title="从零开始：学习Cordova（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Cordova（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="next" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Ionic-%E7%AE%80%E4%BB%8B"><span class="nav-number">2.</span> <span class="nav-text">Ionic 简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B"><span class="nav-number">3.</span> <span class="nav-text">快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#StepByStep-%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.1.</span> <span class="nav-text">StepByStep 创建工程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%91%E5%AF%BC%E5%BC%8F%EF%BC%88App-Wizard%EF%BC%89%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">向导式（App Wizard）创建工程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0"><span class="nav-number">4.</span> <span class="nav-text">深入学习</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Ionic-CLI"><span class="nav-number">4.1.</span> <span class="nav-text">Ionic CLI</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2020/11/11/learn-ionic-1/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2020/11/11/learn-ionic-1/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2020/11/11/learn-ionic-1/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '7fff7550893e85bb9cd6938ee52b047f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html" "b/ja/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..c19136ab01
--- /dev/null
+++ "b/ja/2021/05/08/\345\205\263\344\272\216VSCode\344\270\255\345\210\253\345\220\215\357\274\210-\357\274\211\347\232\204\344\275\277\347\224\250/index.html"
@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:type" content="article">
+<meta property="og:title" content="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2021-05-08T08:03:48.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="VSCode插件">
+<meta property="article:tag" content="path-intellisense">
+<meta property="article:tag" content="路径别名">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<h3 id="场景："><a href="#场景：" class="headerlink" title="场景："></a>场景：</h3><p>前端开发我们通常使用VSCode，使用时常见有一个常见的场景：</p>
+<blockquote>
+<p>引入一个文件、图片等</p>
+</blockquote>
+<p>如果不利用VSCode的插件，我们通常会写相对路径或者绝对路径，但为了方便写代码，我们通常会利用工具来帮助我们减轻负担，这种情况就引入了今天的主角，VSCode下的插件<strong>path-intellisense</strong>，是的，有了它编辑器就会聪明的自动帮我们提示出文件在什么地方，这的确方便了我们。</p>
+<p>但是，在Vue开发过程中，或者说是利用Webpack作为构建工具时我们通常会定义一个变量如：<code>@</code> 来简化路径的书写，使代码变得简洁美观，这里的<code>@</code>，我们称之为 <strong>路径别名</strong> ，这也是Vue官方十分推荐使用的，但因为路径别名的使用，原来的智能提示路径的插件就会无法正常工作，因为工作中确实遇到了这样的坑，所以简单的写个文记录一下。</p>
+<h3 id="问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示"><a href="#问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示" class="headerlink" title="问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示"></a>问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</h3><p>这个问题其实比较容易理解，因为路径别名是Webpack构建时使用的，并不是VSCode原生支持的功能，所以它并不认识<code>@</code>，这是个什么，所以解决思路就是告诉VSCode <code>@</code> 是个什么就好了，专业一点说的话就是加上映射关系</p>
+<h4 id="解决步骤"><a href="#解决步骤" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>打开path-intellisense插件的setting</li>
+<li>找到Mapping配置项</li>
+<li>加以下代码<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;path-intellisense.mappings&quot;: &#123;</span><br><span class="line">      &quot;@&quot;: &quot;$&#123;workspaceRoot&#125;/src&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启插件搞定！</li>
+</ol>
+<h3 id="问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"><a href="#问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。" class="headerlink" title="问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"></a>问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</h3><p>第二个问题提出时，可能会有人有疑问，上面不是配置完映射关系了嘛，为什么还有下面的问题呢，其实你要是不问，我也有这个问题，上一步操作实际上是告诉了path-intellisense插件该怎么解析<code>@</code>这个东西，但是VSCode并不知道啊，但是Ctrl + 鼠标左键的动作又是VSCode负责的事，所以我们也要告诉一下编辑器该如何应对上面的情况，说到这里大家应该就理解了</p>
+<h4 id="解决步骤-1"><a href="#解决步骤-1" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>在项目package.json所在同级目录下创建文件jsconfig.json（这是VSCode的一个可选配置）</li>
+<li>在jsconfig.json增加如下配置<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;target&quot;</span>: <span class="string">&quot;ES6&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;module&quot;</span>: <span class="string">&quot;commonjs&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;allowSyntheticDefaultImports&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;paths&quot;</span>: &#123;</span><br><span class="line">          <span class="attr">&quot;@/*&quot;</span>: [<span class="string">&quot;src/*&quot;</span>] <span class="comment">// 这里是关键代码</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;exclude&quot;</span>: [</span><br><span class="line">        <span class="string">&quot;node_modules&quot;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启VSCode搞定！</li>
+</ol>
+<p>通过上面的解决方案，我们就可以愉快的使用VSCode进行前端开发了，你学废了吗？</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月08日 - 08:03</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/VSCode%E6%8F%92%E4%BB%B6/" rel="tag"># VSCode插件</a>
+              <a href="/ja/tags/path-intellisense/" rel="tag"># path-intellisense</a>
+              <a href="/ja/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" rel="tag"># 路径别名</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2020/11/11/learn-ionic-1/" rel="prev" title="从零开始：学习Ionic（一）">
+      <i class="fa fa-chevron-left"></i> 从零开始：学习Ionic（一）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="next" title="关于版本管理">
+      关于版本管理 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%BA%E6%99%AF%EF%BC%9A"><span class="nav-number">1.1.</span> <span class="nav-text">场景：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%B8%80%EF%BC%9A%E5%9B%A0%E4%B8%BA%E4%BD%BF%E7%94%A8%E4%BA%86%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E5%AF%BC%E8%87%B4path-intellisense%E4%B8%8D%E8%83%BD%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA"><span class="nav-number">1.2.</span> <span class="nav-text">问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.2.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%BA%8C%EF%BC%9A%E6%88%91%E4%BB%AC%E5%B8%8C%E6%9C%9B-Ctrl-%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E7%82%B9%E5%87%BB%E4%B8%80%E4%B8%AA%E5%A4%96%E9%83%A8%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C%E8%83%BD%E5%A4%9F%E5%BF%AB%E9%80%9F%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%AF%B9%E5%BA%94%E7%9A%84%E5%A4%96%E9%83%A8%E6%96%87%E4%BB%B6%E3%80%82"><span class="nav-number">1.3.</span> <span class="nav-text">问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%AD%A5%E9%AA%A4-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">解决步骤</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'de18afad9155aaeb012a405294eb460d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html" "b/ja/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
new file mode 100644
index 0000000000..72762cfbf4
--- /dev/null
+++ "b/ja/2021/05/13/\345\205\263\344\272\216\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="关于版本管理">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2021-05-13T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="SemVer">
+<meta property="article:tag" content="版本管理">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>关于版本管理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          关于版本管理
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+<span id="more"></span>
+<h2 id="关于版本号的那些事"><a href="#关于版本号的那些事" class="headerlink" title="关于版本号的那些事"></a>关于版本号的那些事</h2><p>你会发现这些版本号通常是三部分构成的，像是‘X.Y.Z’的一种感觉，其实这是一种叫做<code>SemVer</code>的版本管理规范，下面我们就来讲讲<code>SemVer</code>。</p>
+<h3 id="SemVer-的生平"><a href="#SemVer-的生平" class="headerlink" title="SemVer 的生平"></a>SemVer 的生平</h3><p>语义化版本控制的规范是由 Gravatars 创办者兼 GitHub 共同创办者 Tom Preston-Werner 所建立。</p>
+<p>它的许可证是 知识共享 署名 3.0 (CC BY 3.0)  所以你可以不用付费直接使用它。</p>
+<p>关于它的更多描述你可以到下面的地址找到<br><a target="_blank" rel="noopener" href="https://semver.org/lang/zh-CN/">https://semver.org/lang/zh-CN/</a></p>
+<p>主要你要记住的是如下几句话：</p>
+<blockquote>
+<p>版本格式：主版本号.次版本号.修订号，版本号递增规则如下：</p>
+<p>主版本号：当你做了不兼容的 API 修改，<br>次版本号：当你做了向下兼容的功能性新增，<br>修订号：当你做了向下兼容的问题修正。<br>先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。</p>
+</blockquote>
+<p>更多的内容的话，请到官网查看吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">关于版本管理</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2021年05月13日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" title="关于版本管理">https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/SemVer/" rel="tag"># SemVer</a>
+              <a href="/ja/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="tag"># 版本管理</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="prev" title="VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法">
+      <i class="fa fa-chevron-left"></i> VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="next" title="数组方法哪些有副作用，一目了然！">
+      数组方法哪些有副作用，一目了然！ <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E5%8F%B7%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B"><span class="nav-number">1.1.</span> <span class="nav-text">关于版本号的那些事</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SemVer-%E7%9A%84%E7%94%9F%E5%B9%B3"><span class="nav-number">1.1.1.</span> <span class="nav-text">SemVer 的生平</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a1e94bae73853c8fdbe48066f62ea7a9',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/03/11/\346\220\236\346\207\202EventLoop/index.html" "b/ja/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
new file mode 100644
index 0000000000..5dd61ba462
--- /dev/null
+++ "b/ja/2022/03/11/\346\220\236\346\207\202EventLoop/index.html"
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搞懂EventLoop">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。要知道javascript是一个运行在浏览器或者Node环境的单线程执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。 但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp">
+<meta property="article:published_time" content="2022-03-11T08:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="EventLoop">
+<meta property="article:tag" content="事件驱动">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>搞懂EventLoop | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搞懂EventLoop
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+<span id="more"></span>
+
+<h2 id="浏览器的事件循环"><a href="#浏览器的事件循环" class="headerlink" title="浏览器的事件循环"></a>浏览器的事件循环</h2><p>首先我们要知道，浏览器的事件循环是有这么两个部分构成，一个叫做主线程（main thread），另一个叫做调用栈（call-stack），所有的任务（Task）都会被放到调用栈里，等待主线程调用，这个怎么理解呢，打个比方，主线程就像是物流配送中的传送带，如果没有快递往上放的时候，它是空的，当有快递包裹放上去的时候，它就开始运行，而你购买的产品要放倒包裹里，然后包裹在放到传送带上，最终被送到你家里，这里的传送带就是主线程，包裹就是调用栈，而购买的产品就是任务，不知道这样解释是否能好理解一些。</p>
+<h3 id="同步、异步任务"><a href="#同步、异步任务" class="headerlink" title="同步、异步任务"></a>同步、异步任务</h3><p>JavaScript中的任务有两种，一种是同步任务，另一种是异步任务。</p>
+<ul>
+<li>同步任务会排着队，逐个执行</li>
+<li>异步任务在执行得到结果后，将回调函数添加到任务队列中，等着主线程空了再执行。</li>
+</ul>
+<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>栈，是一种数据结构，后进先出（LIFO），后入栈的先执行，执行完后出栈执行栈顶新的那个函数，直到栈空，像个瓶子，只有一头有口。</p>
+<h3 id="任务队列"><a href="#任务队列" class="headerlink" title="任务队列"></a>任务队列</h3><p>队列，也是一种数据结构，先进先出（FIFO），队头出，队尾进，先到先得，就像排队买东西，或者汽车排队过隧道。</p>
+<h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a>任务</h3><p>任务分为两种，一种叫做宏任务（MacroTask），另一种叫做微任务（MicroTask），首先他们都是<strong>异步队列</strong>中的任务，那它们之间是什么关系呢？简单说来就是微任务是VIP优先执行，全部微任务执行完之后才轮到普通用户宏任务执行，而且执行完一个后马上要看有没有新的微任务执行，有的话宏任务还得等着，就这样往复，看着像不像是在银行等着排队办业务的你（其实是我）。<br><img src="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg" alt="JavaScript的执行流程"><br><img src="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png" alt="宏任务与微任务"><br>那么哪些是宏任务，哪些是微任务呢？看下表吧。</p>
+<table>
+<thead>
+<tr>
+<th>宏任务</th>
+<th>微任务</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>setTimeout、setInterval、js主代码、setImmediate(Node)、requestAnimationFrame(浏览器)</td>
+<td>process.nextTick、Promise的then方法</td>
+</tr>
+</tbody></table>
+<h3 id="举个例子"><a href="#举个例子" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    resolve();</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h4 id="分析一下"><a href="#分析一下" class="headerlink" title="分析一下"></a>分析一下</h4><p>JS 运行机制为<strong>从上而下</strong>，那么这里的执行顺序应该是什么样的呢？</p>
+<h5 id="第一轮循环："><a href="#第一轮循环：" class="headerlink" title="第一轮循环："></a>第一轮循环：</h5><p>1）、首先打印 1<br>2）、接下来是setTimeout是异步任务且是宏任务，加入宏任务暂且记为 setTimeout1<br>3）、接下来是 process 微任务 加入微任务队列 记为 process1<br>4）、接下来是 new Promise 里面直接 resolve(7) 所以打印 7 后面的then是微任务 记为 then1<br>5）、setTimeout 宏任务 记为 setTimeout2</p>
+<blockquote>
+<p>第一轮循环打印出的是 1 7<br>当前宏任务队列：setTimeout1, setTimeout2<br>当前微任务队列：process1, then1,</p>
+</blockquote>
+<h5 id="第二轮循环："><a href="#第二轮循环：" class="headerlink" title="第二轮循环："></a>第二轮循环：</h5><p>1）、执行所有微任务<br>2）、执行process1，打印出 6<br>3）、执行then1 打印出8<br>4）、微任务都执行结束了，开始执行第一个宏任务<br>5）、执行 setTimeout1 也就是 第 3 - 14 行<br>6）、首先打印出 2<br>7）、遇到 process 微任务 记为 process2<br>8）、new Promise中resolve 打印出 4<br>9）、then 微任务 记为 then2</p>
+<blockquote>
+<p>第二轮循环结束，当前打印出来的是 1 7 6 8 2 4<br>当前宏任务队列：setTimeout2<br>当前微任务队列：process2, then2</p>
+</blockquote>
+<h5 id="第三轮循环："><a href="#第三轮循环：" class="headerlink" title="第三轮循环："></a>第三轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行 process2 打印出 3<br>3）、执行 then2 打印出 5<br>4）、执行第一个宏任务，也就是执行 setTimeout2 对应代码中的 25 - 36 行<br>5）、首先打印出 9<br>6）、process 微任务 记为 process3<br>7）、new Promise执行resolve 打印出 11<br>8）、then 微任务 记为 then3</p>
+<blockquote>
+<p>第三轮循环结束，当前打印顺序为：1 7 6 8 2 4 3 5 9 11<br>当前宏任务队列为空<br>当前微任务队列：process3，then3</p>
+</blockquote>
+<h5 id="第四轮循环："><a href="#第四轮循环：" class="headerlink" title="第四轮循环："></a>第四轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行process3 打印出 10<br>3）、执行then3 打印出 12</p>
+<p>代码执行结束：<br>最终打印顺序为：1 7 6 8 2 4 3 5 9 11 10 12</p>
+<h2 id="Node环境的循环机制"><a href="#Node环境的循环机制" class="headerlink" title="Node环境的循环机制"></a>Node环境的循环机制</h2><p>Node的Event loop一共分为<strong>6</strong>个阶段，每个细节具体如下：</p>
+<ul>
+<li><strong><code>timers</code></strong>: 执行setTimeout和setInterval中到期的callback。</li>
+<li><strong><code>pending callback</code></strong>: 上一轮循环中少数的callback会放在这一阶段执行。</li>
+<li><strong><code>idle, prepare</code></strong>: 仅在内部使用。</li>
+<li><strong><code>poll</code></strong>: 最重要的阶段，执行pending callback，在适当的情况下回阻塞在这个阶段。</li>
+<li><strong><code>check</code></strong>: 执行setImmediate(setImmediate()是将事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数)的callback。</li>
+<li><strong><code>close callbacks</code></strong>: 执行close事件的callback，例如socket.on(‘close’[,fn])或者http.server.on(‘close, fn)。</li>
+</ul>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="Node EventLoop"></p>
+<p>具体细节如下：</p>
+<h3 id="timers"><a href="#timers" class="headerlink" title="timers"></a>timers</h3><p>执行setTimeout和setInterval中到期的callback，执行这两者回调需要设置一个毫秒数，理论上来说，应该是时间一到就立即执行callback回调，但是由于system的调度可能会延时，达不到预期时间。<br>以下是官网文档解释的例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncOperation</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Assume this takes 95ms to complete</span></span><br><span class="line">  fs.readFile(<span class="string">&#x27;/path/to/file&#x27;</span>, callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> timeoutScheduled = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> delay = <span class="built_in">Date</span>.now() - timeoutScheduled;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;delay&#125;</span>ms have passed since I was scheduled`</span>);</span><br><span class="line">&#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// do someAsyncOperation which takes 95 ms to complete</span></span><br><span class="line">someAsyncOperation(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> startCallback = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line">  <span class="comment">// do something that will take 10ms...</span></span><br><span class="line">  <span class="keyword">while</span> (<span class="built_in">Date</span>.now() - startCallback &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    <span class="comment">// do nothing</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>当进入事件循环时，它有一个空队列（fs.readFile()尚未完成），因此定时器将等待剩余毫秒数，当到达95ms时，fs.readFile()完成读取文件并且其完成需要10毫秒的回调被添加到轮询队列并执行。<br>当回调结束时，队列中不再有回调，因此事件循环将看到已达到最快定时器的阈值，然后回到timers阶段以执行定时器的回调。<br>在此示例中，您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。</p>
+<h3 id="pending-callbacks"><a href="#pending-callbacks" class="headerlink" title="pending callbacks"></a>pending callbacks</h3><p>此阶段执行某些系统操作（例如TCP错误类型）的回调。 例如，如果TCP socket ECONNREFUSED在尝试connect时receives，则某些* nix系统希望等待报告错误。 这将在pending callbacks阶段执行。</p>
+<h3 id="poll"><a href="#poll" class="headerlink" title="poll"></a>poll</h3><p>该poll阶段有两个主要功能：</p>
+<ul>
+<li>执行I/O回调。</li>
+<li>处理轮询队列中的事件。</li>
+</ul>
+<p><strong>当事件循环进入poll阶段并且在timers中没有可以执行定时器时，将发生以下两种情况之一</strong><br>如果poll队列不为空，则事件循环将遍历其同步执行它们的callback队列，直到队列为空，或者达到system-dependent（系统相关限制）。</p>
+<p><strong>如果poll队列为空，则会发生以下两种情况之一</strong></p>
+<ul>
+<li>如果有setImmediate()回调需要执行，则会立即停止执行poll阶段并进入执行check阶段以执行回调。</li>
+<li>如果没有setImmediate()回到需要执行，poll阶段将等待callback被添加到队列中，然后立即执行。</li>
+</ul>
+<p><strong>当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。</strong></p>
+<h3 id="check"><a href="#check" class="headerlink" title="check"></a>check</h3><p>此阶段允许人员在poll阶段完成后立即执行回调。<br>如果poll阶段闲置并且script已排队setImmediate()，则事件循环到达check阶段执行而不是继续等待。<br>setImmediate()实际上是一个特殊的计时器，它在事件循环的一个单独阶段运行。它使用libuv API来调度在poll阶段完成后执行的回调。<br>通常，当代码被执行时，事件循环最终将达到poll阶段，它将等待传入连接，请求等。<br>但是，如果已经调度了回调setImmediate()，并且轮询阶段变为空闲，则它将结束并且到达check阶段，而不是等待poll事件。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;start&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer1&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise1&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer2&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise2&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;promise3&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;end&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>如果Node版本是v11.x，那么执行结果和浏览器一致，结果如下：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>如果是v10版本上，那结果将会出现两种情况<br><strong>如果time2定时器已经在执行队列中了</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">timer2</span><br><span class="line">promise1</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p><strong>如果time2定时器没有在执行对列中，执行结果为</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>具体情况可以参考poll阶段的两种情况。</p>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="NodeEventLoop"></p>
+<h2 id="setImmediate-的setTimeout-的区别"><a href="#setImmediate-的setTimeout-的区别" class="headerlink" title="setImmediate() 的setTimeout()的区别"></a>setImmediate() 的setTimeout()的区别</h2><p><strong>setImmediate和setTimeout()是相似的，但根据它们被调用的时间以不同的方式表现。</strong></p>
+<ul>
+<li>setImmediate()设计用于在当前poll阶段完成后check阶段执行脚本 。</li>
+<li>setTimeout() 安排在经过最小（ms）后运行的脚本，在timers阶段执行。</li>
+</ul>
+<h3 id="举个例子-1"><a href="#举个例子-1" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p><strong>执行定时器的顺序将根据调用它们的上下文而有所不同。 如果从主模块中调用两者，那么时间将受到进程性能的限制。</strong><br><strong>其结果也不一致</strong></p>
+<p><strong>如果在I / O周期内移动两个调用，则始终首先执行立即回调：</strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readFile(__filename, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line">  setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>其结果可以确定一定是immediate =&gt; timeout。<br>主要原因是在I/O阶段读取文件后，事件循环会先进入poll阶段，发现有setImmediate需要执行，会立即进入check阶段执行setImmediate的回调。<br>然后再进入timers阶段，执行setTimeout，打印timeout。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">   ┌───────────────────────────┐</span><br><span class="line">┌─&gt;│           timers          │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │     pending callbacks     │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │       idle, prepare       │</span><br><span class="line">│  └─────────────┬─────────────┘      ┌───────────────┐</span><br><span class="line">│  ┌─────────────┴─────────────┐      │   incoming:   │</span><br><span class="line">│  │           poll            │&lt;─────┤  connections, │</span><br><span class="line">│  └─────────────┬─────────────┘      │   data, etc.  │</span><br><span class="line">│  ┌─────────────┴─────────────┐      └───────────────┘</span><br><span class="line">│  │           check           │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">└──┤      close callbacks      │</span><br><span class="line">   └───────────────────────────┘</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="Process-nextTick"><a href="#Process-nextTick" class="headerlink" title="Process.nextTick()"></a>Process.nextTick()</h2><p>process.nextTick()虽然它是异步API的一部分，但未在图中显示。这是因为process.nextTick()从技术上讲，它不是事件循环的一部分。</p>
+<p>process.nextTick()方法将 callback 添加到next tick队列。 一旦当前事件轮询队列的任务全部完成，在next tick队列中的所有callbacks会被依次调用。</p>
+<p>换种理解方式：</p>
+<p><strong>当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。</strong></p>
+<h3 id="举个例子-2"><a href="#举个例子-2" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> bar;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setTimeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setImmediate&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncApiCall</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  process.nextTick(callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">someAsyncApiCall(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;bar&#x27;</span>, bar); <span class="comment">// 1</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">bar = <span class="number">1</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>在NodeV10中上述代码执行可能有两种答案，一种为：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line">setImmediate</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>另一种为</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line">setImmediate</span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>无论哪种，始终都是先执行process.nextTick(callback)，打印bar 1。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">搞懂EventLoop</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 08:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" title="搞懂EventLoop">https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/EventLoop/" rel="tag"># EventLoop</a>
+              <a href="/ja/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" rel="tag"># 事件驱动</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" rel="prev" title="数组方法哪些有副作用，一目了然！">
+      <i class="fa fa-chevron-left"></i> 数组方法哪些有副作用，一目了然！
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="next" title="前端开发插件">
+      前端开发插件 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器的事件循环</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5%E3%80%81%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">同步、异步任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E6%A0%88"><span class="nav-number">1.1.2.</span> <span class="nav-text">调用栈</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97"><span class="nav-number">1.1.3.</span> <span class="nav-text">任务队列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%BB%E5%8A%A1"><span class="nav-number">1.1.4.</span> <span class="nav-text">任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90"><span class="nav-number">1.1.5.</span> <span class="nav-text">举个例子</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%86%E6%9E%90%E4%B8%80%E4%B8%8B"><span class="nav-number">1.1.5.1.</span> <span class="nav-text">分析一下</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.1.</span> <span class="nav-text">第一轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.2.</span> <span class="nav-text">第二轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.3.</span> <span class="nav-text">第三轮循环：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E8%BD%AE%E5%BE%AA%E7%8E%AF%EF%BC%9A"><span class="nav-number">1.1.5.1.4.</span> <span class="nav-text">第四轮循环：</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Node%E7%8E%AF%E5%A2%83%E7%9A%84%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6"><span class="nav-number">1.2.</span> <span class="nav-text">Node环境的循环机制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#timers"><span class="nav-number">1.2.1.</span> <span class="nav-text">timers</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#pending-callbacks"><span class="nav-number">1.2.2.</span> <span class="nav-text">pending callbacks</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#poll"><span class="nav-number">1.2.3.</span> <span class="nav-text">poll</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#check"><span class="nav-number">1.2.4.</span> <span class="nav-text">check</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setImmediate-%E7%9A%84setTimeout-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.3.</span> <span class="nav-text">setImmediate() 的setTimeout()的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Process-nextTick"><span class="nav-number">1.4.</span> <span class="nav-text">Process.nextTick()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BE%E4%B8%AA%E4%BE%8B%E5%AD%90-2"><span class="nav-number">1.4.1.</span> <span class="nav-text">举个例子</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'ba7a3fbf8d3802a0e0c55b5c1a0dd1c6',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html" "b/ja/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
new file mode 100644
index 0000000000..779463dc38
--- /dev/null
+++ "b/ja/2022/03/11/\346\225\260\347\273\204\346\226\271\346\263\225\344\270\200\347\233\256\344\272\206\347\204\266/index.html"
@@ -0,0 +1,785 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="数组方法哪些有副作用，一目了然！">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-03-11T07:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="面试">
+<meta property="article:tag" content="数组">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>数组方法哪些有副作用，一目了然！ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          数组方法哪些有副作用，一目了然！
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+<span id="more"></span>
+<h2 id="关于数组的那些方法"><a href="#关于数组的那些方法" class="headerlink" title="关于数组的那些方法"></a>关于数组的那些方法</h2><p>其实上面的问题：</p>
+<blockquote>
+<p>数组有哪些方法会改变原来的值</p>
+</blockquote>
+<p>现在有个词挺火的，叫做纯函数，什么是纯函数呢，就是没有副作用，什么是没有副作用呢，就是结果是幂等的，等等….怎么越来越绕，简单来说，就是这个函数干几次都是一样的结果，出了函数就不会有任何影响，他就像一台加工机器，输入原料，输出产品，没有任何其他输出材料，比如废气之类影响大气的东西。好吧，你不明白也没关系，反正我对上面这个问题的理解就变成了</p>
+<blockquote>
+<p>数组的哪些方法是没有副作用的。</p>
+</blockquote>
+<p>要说有哪些方法是有副作用，首先你得知道有哪些方法，</p>
+<p>比如，push，pop，shift，unshift，splice 这些别跟我说你不知道，这些都是常用的数组操作，出栈入栈，<br>还有什么呢，数组的排序啊，比如sort，reverse，还有一个用的不多，fill是用一个固定值填充数组的起始元素到终止元素，这些呢都是在原数组上进行操作，所以肯定是影响数组的值的，也就是说有副作用的。</p>
+<p>那么哪些没有副作用呢，简单说其他的都没有，<br>啥！？，是的，其他的都没有。。。所以记得上面这些就好了呀，怎么样，是不简单。</p>
+<p>那还剩下啥？</p>
+<ul>
+<li>concat 返回的是心数组，</li>
+<li>join 返回的是字符串，</li>
+<li>indexOf和lastIndexOf返回的是索引，</li>
+<li>slice 返回的是切割后的新数组，别把它和splice混淆了哈，</li>
+<li>entries 返回一个新的Array Iterator对象，</li>
+<li>keys 返回一个新的包含全部Array索引的 Iterator对象，</li>
+<li>values 有keys就有values，返回一个新的包含全部Array值的 Iterator对象，</li>
+<li>every、some、includes 返回 布尔值，</li>
+<li>filter，map 返回新数组，</li>
+<li>reducer 有点神奇 返回累加值，</li>
+<li>find、findIndex 找元素 一个返回第一个符合的元素本身，一个返回他的索引，</li>
+<li>最后还有个flat，展平了数组，</li>
+<li>forEach 遍历数组， 这么一数起来，方法还真不少呢！</li>
+</ul>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>想要记住所有的方法呢，不下点功夫是不行的，但是想要记住有副作用的，然后排除掉他们的话，还是容易的，最后做个表，方便直观的来看。</p>
+<table>
+<thead>
+<tr>
+<th>方法</th>
+<th>作用</th>
+<th>返回结果</th>
+<th>有无副作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>push</td>
+<td>数组尾部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>pop</td>
+<td>数组尾部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>shift</td>
+<td>数组头部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>unshift</td>
+<td>数组头部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>splice</td>
+<td>增删改数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>sort</td>
+<td>数组排序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>reverse</td>
+<td>数组反序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>填充数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>concat</td>
+<td>连结数组</td>
+<td>合并的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>join</td>
+<td>合并数组为字符串</td>
+<td>字符串</td>
+<td>无</td>
+</tr>
+<tr>
+<td>indexOf</td>
+<td>查索引</td>
+<td>第一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>lastIndexOf</td>
+<td>查索引</td>
+<td>最后一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>slice</td>
+<td>截取数组</td>
+<td>截取的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>entries</td>
+<td>迭代数组</td>
+<td>迭代器对象</td>
+<td>无</td>
+</tr>
+<tr>
+<td>keys</td>
+<td>迭代数组的key</td>
+<td>全部的key</td>
+<td>无</td>
+</tr>
+<tr>
+<td>values</td>
+<td>迭代数组的value</td>
+<td>全部的value</td>
+<td>无</td>
+</tr>
+<tr>
+<td>every</td>
+<td>每个都满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>some</td>
+<td>有一些满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>includes</td>
+<td>包含某元素</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>filter</td>
+<td>过滤数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>map</td>
+<td>加工数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>reducer</td>
+<td>迭代数组</td>
+<td>累加值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>find</td>
+<td>查找元素</td>
+<td>第一个元素或undifined</td>
+<td>无</td>
+</tr>
+<tr>
+<td>findIndex</td>
+<td>查找元素</td>
+<td>第一个元素的index</td>
+<td>无</td>
+</tr>
+<tr>
+<td>flat</td>
+<td>展平数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>forEach</td>
+<td>遍历数组</td>
+<td>void</td>
+<td>无</td>
+</tr>
+</tbody></table>
+<p>就到这里，怎么样，清楚了吧。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">数组方法哪些有副作用，一目了然！</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年03月11日 - 07:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" title="数组方法哪些有副作用，一目了然！">https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%9D%A2%E8%AF%95/" rel="tag"># 面试</a>
+              <a href="/ja/tags/%E6%95%B0%E7%BB%84/" rel="tag"># 数组</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" rel="prev" title="关于版本管理">
+      <i class="fa fa-chevron-left"></i> 关于版本管理
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="next" title="搞懂EventLoop">
+      搞懂EventLoop <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E6%95%B0%E7%BB%84%E7%9A%84%E9%82%A3%E4%BA%9B%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">关于数组的那些方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.2.</span> <span class="nav-text">总结</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b8d0fe598cfd908dfdd6b6707e03e9e3',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html" "b/ja/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..a868557fe7
--- /dev/null
+++ "b/ja/2022/06/01/CodeReview\344\273\243\347\240\201\345\256\241\346\237\245\346\214\207\345\215\227/index.html"
@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:type" content="article">
+<meta property="og:title" content="CodeReview代码审查指南.md">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1．关于Code Review1.1 Code Review的目的Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。  Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的：   在项目早期就能够发现代码中的BUG  帮助初级开发人员学习高级">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="CodeReview">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>CodeReview代码审查指南.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          CodeReview代码审查指南.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">CodeReview代码审查指南.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" title="CodeReview代码审查指南.md">https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/CodeReview/" rel="tag"># CodeReview</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="prev" title="前后端分离开发规范">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发规范
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="next" title="Restful API 的设计规范.md">
+      Restful API 的设计规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%EF%BC%8E%E5%85%B3%E4%BA%8ECode-Review"><span class="nav-number">1.</span> <span class="nav-text">1．关于Code Review</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-Code-Review%E7%9A%84%E7%9B%AE%E7%9A%84"><span class="nav-number">1.1.</span> <span class="nav-text">1.1 Code Review的目的</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-Code-Review%E7%9A%84%E5%89%8D%E6%8F%90"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 Code Review的前提</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-Code-Review%E9%9C%80%E8%A6%81%E5%81%9A%E4%BB%80%E4%B9%88"><span class="nav-number">1.3.</span> <span class="nav-text">1.3 Code Review需要做什么</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-1-%E5%AE%8C%E6%95%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Completeness%EF%BC%89"><span class="nav-number">1.3.1.</span> <span class="nav-text">1.3.1  完整性检查（Completeness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-2-%E4%B8%80%E8%87%B4%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Consistency%EF%BC%89"><span class="nav-number">1.3.2.</span> <span class="nav-text">1.3.2  一致性检查（Consistency）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-3-%E6%AD%A3%E7%A1%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Correctness%EF%BC%89"><span class="nav-number">1.3.3.</span> <span class="nav-text">1.3.3  正确性检查（Correctness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-4-%E5%8F%AF%E4%BF%AE%E6%94%B9%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Modifiability%EF%BC%89"><span class="nav-number">1.3.4.</span> <span class="nav-text">1.3.4  可修改性检查（Modifiability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-5-%E5%8F%AF%E9%A2%84%E6%B5%8B%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Predictability%EF%BC%89"><span class="nav-number">1.3.5.</span> <span class="nav-text">1.3.5  可预测性检查（Predictability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-6-%E5%81%A5%E5%A3%AE%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Robustness%EF%BC%89"><span class="nav-number">1.3.6.</span> <span class="nav-text">1.3.6  健壮性检查（Robustness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-7-%E7%BB%93%E6%9E%84%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Structuredness%EF%BC%89"><span class="nav-number">1.3.7.</span> <span class="nav-text">1.3.7  结构性检查（Structuredness）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-8-%E5%8F%AF%E8%BF%BD%E6%BA%AF%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Traceability%EF%BC%89"><span class="nav-number">1.3.8.</span> <span class="nav-text">1.3.8  可追溯性检查（Traceability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-9-%E5%8F%AF%E7%90%86%E8%A7%A3%E6%80%A7%E6%A3%80%E6%9F%A5%EF%BC%88Understandability%EF%BC%89"><span class="nav-number">1.3.9.</span> <span class="nav-text">1.3.9  可理解性检查（Understandability）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-10-%E5%8F%AF%E9%AA%8C%E8%AF%81%E6%80%A7%E6%A3%80%E6%9F%A5-Verifiability"><span class="nav-number">1.3.10.</span> <span class="nav-text">1.3.10 可验证性检查(Verifiability)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-Code-Review%E7%9A%84%E6%AD%A5%E9%AA%A4"><span class="nav-number">1.4.</span> <span class="nav-text">1.4  Code Review的步骤</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%EF%BC%8ECode-Reivew%E7%9A%84%E6%89%A7%E8%A1%8C"><span class="nav-number">2.</span> <span class="nav-text">2．Code Reivew的执行</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1%EF%BC%8E%E4%BA%8B%E5%89%8D%E5%87%86%E5%A4%87%E9%98%B6%E6%AE%B5"><span class="nav-number">2.1.</span> <span class="nav-text">2.1．事前准备阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-1%EF%BC%8ECR%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.1.1.</span> <span class="nav-text">2.1.1．CR的对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-2%EF%BC%8ECR%E7%9A%84%E5%86%85%E5%AE%B9"><span class="nav-number">2.1.2.</span> <span class="nav-text">2.1.2．CR的内容</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-3%EF%BC%8E%E8%AF%84%E5%AE%A1%E8%A7%84%E8%8C%83%E5%92%8C%E6%A0%87%E5%87%86"><span class="nav-number">2.1.3.</span> <span class="nav-text">2.1.3．评审规范和标准</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-4%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%8F%82%E4%B8%8E%E8%80%85"><span class="nav-number">2.1.4.</span> <span class="nav-text">2.1.4．选择CR活动的参与者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-5%EF%BC%8E%E9%80%89%E6%8B%A9CR%E6%B4%BB%E5%8A%A8%E7%9A%84%E5%AE%9E%E6%96%BD%E6%96%B9%E5%BC%8F%E3%80%82"><span class="nav-number">2.1.5.</span> <span class="nav-text">2.1.5．选择CR活动的实施方式。</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2%EF%BC%8E%E5%AE%9E%E6%96%BD%E9%98%B6%E6%AE%B5"><span class="nav-number">2.2.</span> <span class="nav-text">2.2．实施阶段</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-1%EF%BC%8E%E5%87%86%E7%A1%AE%E8%AE%B0%E5%BD%95"><span class="nav-number">2.2.1.</span> <span class="nav-text">2.2.1．准确记录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-2%EF%BC%8E%E8%AE%B2%E8%A7%A3%E4%B8%8E%E6%8F%90%E9%97%AE"><span class="nav-number">2.2.2.</span> <span class="nav-text">2.2.2．讲解与提问</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-3%EF%BC%8E%E9%80%90%E9%A1%B9%E5%AE%A1%E6%9F%A5"><span class="nav-number">2.2.3.</span> <span class="nav-text">2.2.3．逐项审查</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-4%EF%BC%8E%E6%B3%A8%E6%84%8F%E6%B0%94%E6%B0%9B"><span class="nav-number">2.2.4.</span> <span class="nav-text">2.2.4．注意气氛</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E4%BA%8B%E5%90%8E%E8%B7%9F%E8%B8%AA%E8%B7%9F%E8%B8%AA%E3%80%82"><span class="nav-number">2.3.</span> <span class="nav-text">2.3. 事后跟踪跟踪。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-1-%E7%A1%AE%E8%AE%A4%E5%8F%91%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">2.3.1.</span> <span class="nav-text">2.3.1. 确认发现的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-2-%E4%BF%AE%E6%AD%A3%E9%97%AE%E9%A2%98%E8%B4%A3%E4%BB%BB%E8%80%85"><span class="nav-number">2.3.2.</span> <span class="nav-text">2.3.2. 修正问题责任者</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-3-%E4%BF%AE%E6%AD%A3%E7%BB%93%E6%9E%9C%E7%A1%AE%E8%AE%A4%E8%80%85"><span class="nav-number">2.3.3.</span> <span class="nav-text">2.3.3. 修正结果确认者</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%EF%BC%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">3.</span> <span class="nav-text">3．注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E7%BB%8F%E5%B8%B8%E8%BF%9B%E8%A1%8CCode-Review"><span class="nav-number">3.1.</span> <span class="nav-text">3.1. 经常进行Code Review</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-Code-Review%E4%B8%8D%E8%A6%81%E5%A4%AA%E6%AD%A3%E5%BC%8F%EF%BC%8C%E8%80%8C%E4%B8%94%E8%A6%81%E7%9F%AD"><span class="nav-number">3.2.</span> <span class="nav-text">3.2.  Code Review不要太正式，而且要短</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%B0%BD%E5%8F%AF%E8%83%BD%E7%9A%84%E8%AE%A9%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BA%BAReivew%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">3.3.</span> <span class="nav-text">3.3. 尽可能的让不同的人Reivew你的代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-%E4%BF%9D%E6%8C%81%E7%A7%AF%E6%9E%81%E7%9A%84%E6%AD%A3%E9%9D%A2%E7%9A%84%E6%80%81%E5%BA%A6"><span class="nav-number">3.4.</span> <span class="nav-text">3.4. 保持积极的正面的态度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-5-%E5%AD%A6%E4%BC%9A%E4%BA%AB%E5%8F%97Code-Reivew"><span class="nav-number">3.5.</span> <span class="nav-text">3.5. 学会享受Code Reivew</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B5%84%E6%96%99%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">资料来源</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e8432bb99d62cbc01a3d995bec43b660',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html" "b/ja/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..ee1ee6e2cb
--- /dev/null
+++ "b/ja/2022/06/01/Electron\347\274\226\347\240\201\350\247\204\350\214\203/index.html"
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Electron编码规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  目录代码规范  2  说明 2 基本原则 2 C++与Python 2 命名相关 2 工程目录结构 3  Electron代码规范   说明Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范  基本原则    不要直接">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Electron">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Electron编码规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Electron编码规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">Electron编码规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" title="Electron编码规范.md">https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Electron/" rel="tag"># Electron</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/squid/" rel="prev" title="Squid 服务器学习笔记">
+      <i class="fa fa-chevron-left"></i> Squid 服务器学习笔记
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="next" title="前后端分离开发指南">
+      前后端分离开发指南 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'e9d63e93219b2d6aad719fbc8bea3d75',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/06/01/GIT Standard/index.html b/ja/2022/06/01/GIT Standard/index.html
new file mode 100644
index 0000000000..eddaded422
--- /dev/null
+++ b/ja/2022/06/01/GIT Standard/index.html	
@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:type" content="article">
+<meta property="og:title" content="GIT Standard.md">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/GIT%20Standard/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1、说明项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。 在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：  commitlint: git 提交信息规范与验证">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="GIT">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/GIT%20Standard/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>GIT Standard.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          GIT Standard.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/GIT%20Standard/">GIT Standard.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/GIT%20Standard/" title="GIT Standard.md">https://blog.lifesli.com/2022/06/01/GIT%20Standard/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/GIT%20Standard/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/GIT/" rel="tag"># GIT</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" rel="prev" title="Restful API 的设计规范.md">
+      <i class="fa fa-chevron-left"></i> Restful API 的设计规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/DockerFile/" rel="next" title="DockerFile">
+      DockerFile <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E3%80%81%E8%AF%B4%E6%98%8E"><span class="nav-number">1.</span> <span class="nav-text">1、说明</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%E3%80%81git-commit-message-%E8%A7%84%E8%8C%83"><span class="nav-number">2.</span> <span class="nav-text">2、git commit message 规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commit-message%E6%A0%BC%E5%BC%8F"><span class="nav-number">2.1.</span> <span class="nav-text">commit message格式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#type-%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.2.</span> <span class="nav-text">type 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#scope-%E5%BD%B1%E5%93%8D%E8%8C%83%E5%9B%B4"><span class="nav-number">2.3.</span> <span class="nav-text">scope 影响范围</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#subject-%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.4.</span> <span class="nav-text">subject 描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#body-%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0"><span class="nav-number">2.5.</span> <span class="nav-text">body 详细描述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#footer"><span class="nav-number">2.6.</span> <span class="nav-text">footer</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%E3%80%81%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7%E6%A0%A1%E9%AA%8Ccommit%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88%E8%A7%84%E8%8C%83"><span class="nav-number">3.</span> <span class="nav-text">3、使用工具校验commit是否符合规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#commitlint"><span class="nav-number">3.1.</span> <span class="nav-text">commitlint</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-commitlint%E5%AE%89%E8%A3%85"><span class="nav-number">3.1.1.</span> <span class="nav-text">3.1 commitlint安装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-%E7%94%9F%E6%88%90commitlint-config-js%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 生成commitlint.config.js配置文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E5%9C%A8commitlint-config-js%E5%88%B6%E5%AE%9A%E6%8F%90%E4%BA%A4message%E8%A7%84%E8%8C%83"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 在commitlint.config.js制定提交message规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#husky"><span class="nav-number">3.4.</span> <span class="nav-text">husky</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-husky%E5%AE%89%E8%A3%85"><span class="nav-number">3.4.1.</span> <span class="nav-text">3.4 husky安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E9%85%8D%E7%BD%AE"><span class="nav-number">3.4.2.</span> <span class="nav-text">3.5 husky 配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-husky-%E6%89%A7%E8%A1%8C%E6%B5%8B%E8%AF%95"><span class="nav-number">3.4.3.</span> <span class="nav-text">3.5 husky 执行测试</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">5.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/GIT%20Standard/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/GIT%20Standard/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/GIT%20Standard/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5ea87fa6a03895d616fe83ac69b7894f',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html" "b/ja/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..b7d1442c8d
--- /dev/null
+++ "b/ja/2022/06/01/Restful API \347\232\204\350\256\276\350\256\241\350\247\204\350\214\203/index.html"	
@@ -0,0 +1,823 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Restful API 的设计规范.md">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  1. URIURI 表示资源，资源一般对应服务器端领域模型中的实体类。 URI规范 不用大写； 用中杠-不用下杠_； 参数列表要encode； URI中的名词表示资源集合，使用复数形式。  资源集合 vs 单个资源URI表示资源的两种方式：资源集合、单个资源。 资源集合： 12&#x2F;zoos &#x2F;&#x2F;所有动物园&#x2F;zoos&#x2F;1">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Restful API">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Restful API 的设计规范.md | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Restful API 的设计规范.md
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">Restful API 的设计规范.md</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" title="Restful API 的设计规范.md">https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Restful-API/" rel="tag"># Restful API</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="prev" title="CodeReview代码审查指南.md">
+      <i class="fa fa-chevron-left"></i> CodeReview代码审查指南.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/GIT%20Standard/" rel="next" title="GIT Standard.md">
+      GIT Standard.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-URI"><span class="nav-number">1.</span> <span class="nav-text">1. URI</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E8%A7%84%E8%8C%83"><span class="nav-number">1.1.</span> <span class="nav-text">URI规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88-vs-%E5%8D%95%E4%B8%AA%E8%B5%84%E6%BA%90"><span class="nav-number">1.2.</span> <span class="nav-text">资源集合 vs 单个资源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%B1%82%E7%BA%A7%E8%BF%87%E6%B7%B1%E7%9A%84URI"><span class="nav-number">1.3.</span> <span class="nav-text">避免层级过深的URI</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9Composite%E8%B5%84%E6%BA%90%E7%9A%84%E8%AE%BF%E9%97%AE"><span class="nav-number">1.4.</span> <span class="nav-text">对Composite资源的访问</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-Request"><span class="nav-number">2.</span> <span class="nav-text">2. Request</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">HTTP方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E5%85%A8%E6%80%A7%E5%92%8C%E5%B9%82%E7%AD%89%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">安全性和幂等性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%8D%E6%9D%82%E6%9F%A5%E8%AF%A2"><span class="nav-number">2.3.</span> <span class="nav-text">复杂查询</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Bookmarker"><span class="nav-number">2.4.</span> <span class="nav-text">Bookmarker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Format"><span class="nav-number">2.5.</span> <span class="nav-text">Format</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-Response"><span class="nav-number">3.</span> <span class="nav-text">6. Response</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%86%E9%A1%B5response"><span class="nav-number">3.1.</span> <span class="nav-text">分页response</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86"><span class="nav-number">4.</span> <span class="nav-text">7. 错误处理</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-%E6%9C%8D%E5%8A%A1%E5%9E%8B%E8%B5%84%E6%BA%90"><span class="nav-number">5.</span> <span class="nav-text">8. 服务型资源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1"><span class="nav-number">6.</span> <span class="nav-text">9. 异步任务</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-API%E7%9A%84%E6%BC%94%E8%BF%9B"><span class="nav-number">7.</span> <span class="nav-text">10. API的演进</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%89%88%E6%9C%AC"><span class="nav-number">7.1.</span> <span class="nav-text">版本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#URI%E5%A4%B1%E6%95%88"><span class="nav-number">7.2.</span> <span class="nav-text">URI失效</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#11-%E5%AE%89%E5%85%A8"><span class="nav-number">8.</span> <span class="nav-text">11. 安全</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="nav-number">9.</span> <span class="nav-text">参考文档</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5c681952ef4d3be8762991f63074736e',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/06/01/squid/index.html b/ja/2022/06/01/squid/index.html
new file mode 100644
index 0000000000..d67a0e26aa
--- /dev/null
+++ b/ja/2022/06/01/squid/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Squid 服务器学习笔记">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Squid 服务器学习笔记Squid 服务器介绍用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。 代理方式 普通代理 透明代理 反向代理  安装123456789101112&amp;">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Squid">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Squid 服务器学习笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Squid 服务器学习笔记
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/squid/">Squid 服务器学习笔记</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/squid/" title="Squid 服务器学习笔记">https://blog.lifesli.com/2022/06/01/squid/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/squid/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Squid/" rel="tag"># Squid</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="prev" title="前端开发插件">
+      <i class="fa fa-chevron-left"></i> 前端开发插件
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="next" title="Electron编码规范.md">
+      Electron编码规范.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0"><span class="nav-number">1.</span> <span class="nav-text">Squid 服务器学习笔记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Squid-%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.1.</span> <span class="nav-text">Squid 服务器介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.</span> <span class="nav-text">代理方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">1.3.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">1.4.</span> <span class="nav-text">配置文件</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/squid/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/squid/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/squid/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd5d6a580b83d0c24f37004d574288c15',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html" "b/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..deefaee420
--- /dev/null
+++ "b/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发指南">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  背景前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。 认识 在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发指南">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前后端分离开发指南 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发指南
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">前后端分离开发指南</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" title="前后端分离开发指南">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="tag"># 前后端分离开发指南</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" rel="prev" title="Electron编码规范.md">
+      <i class="fa fa-chevron-left"></i> Electron编码规范.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="next" title="前后端分离开发规范">
+      前后端分离开发规范 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%83%8C%E6%99%AF"><span class="nav-number">1.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%A4%E8%AF%86"><span class="nav-number">2.</span> <span class="nav-text">认识</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E8%A7%A3"><span class="nav-number">3.</span> <span class="nav-text">分解</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%BA%A4%E4%BA%92%E5%BD%A2%E5%BC%8F"><span class="nav-number">3.1.</span> <span class="nav-text">一、交互形式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F-%E6%B5%81%E7%A8%8B"><span class="nav-number">3.2.</span> <span class="nav-text">二、开发模式&#x2F;流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87%E6%96%B9%E5%BC%8F"><span class="nav-number">3.3.</span> <span class="nav-text">三、代码组织方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%E8%A7%84%E8%8C%83%E6%B5%81%E7%A8%8B"><span class="nav-number">3.4.</span> <span class="nav-text">四、数据接口规范流程</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E7%A6%BB%E5%90%8E%E7%9A%84%E6%94%B6%E7%9B%8A"><span class="nav-number">4.</span> <span class="nav-text">分离后的收益</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">5.</span> <span class="nav-text">注意事项</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E8%AF%AF%E5%8C%BA"><span class="nav-number">5.1.</span> <span class="nav-text">前后端分离误区</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">5.2.</span> <span class="nav-text">前后端分离适用场景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%85%B7%E4%BD%93%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.</span> <span class="nav-text">前后端分离具体方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%BB%E4%BD%93%E6%96%B9%E5%90%91"><span class="nav-number">5.3.1.</span> <span class="nav-text">总体方向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E6%89%8B%E6%AE%B5"><span class="nav-number">5.3.2.</span> <span class="nav-text">技术手段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88"><span class="nav-number">5.3.3.</span> <span class="nav-text">部署方案</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2%E6%96%B9%E6%A1%88%E6%AF%94%E8%BE%83"><span class="nav-number">5.3.3.1.</span> <span class="nav-text">前后端分离部署方案比较</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BB%93%E8%AF%AD"><span class="nav-number">6.</span> <span class="nav-text">结语</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90"><span class="nav-number">7.</span> <span class="nav-text">参考来源</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E"><span class="nav-number">8.</span> <span class="nav-text">版权声明</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '28440c7ed55bcf17970159c0e49fe033',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..a088a91e75
--- /dev/null
+++ "b/ja/2022/06/01/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前后端分离开发规范">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前后端分离开发规范by lixg （本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。） 一、为什么要前后端分离 前后端专注于各自擅长的领域 前端配置后端代码运行环境，节省搭建环境的时间 明确前后端工作职责 提高开发效率 分离有助于前端、后端分别优化  二、前后端分离存在的问题 前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。 接口对">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+<meta property="og:image" content="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前后端分离开发规范">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前后端分离开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前后端分离开发规范
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前后端分离开发规范</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" title="前后端分离开发规范">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="tag"># 前后端分离开发规范</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" rel="prev" title="前后端分离开发指南">
+      <i class="fa fa-chevron-left"></i> 前后端分离开发指南
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" rel="next" title="CodeReview代码审查指南.md">
+      CodeReview代码审查指南.md <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83"><span class="nav-number">1.</span> <span class="nav-text">前后端分离开发规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB"><span class="nav-number">1.1.</span> <span class="nav-text">一、为什么要前后端分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.2.</span> <span class="nav-text">二、前后端分离存在的问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E5%A6%82%E4%BD%95%E5%81%9A%E5%88%86%E7%A6%BB"><span class="nav-number">1.3.</span> <span class="nav-text">三、如何做分离</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E5%9F%BA%E6%9C%AC%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.</span> <span class="nav-text">四、基本格式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%A5%E5%8F%A3%E5%AE%9A%E4%B9%89%E5%8F%82%E8%A7%81%E3%80%8ARESTFul-API%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83%E3%80%8B"><span class="nav-number">1.4.1.</span> <span class="nav-text">接口定义参见《RESTFul API的设计规范》</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.2.</span> <span class="nav-text">请求格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.</span> <span class="nav-text">响应格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.</span> <span class="nav-text">响应基本数据格式</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%AE%9E%E4%BD%93%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.1.</span> <span class="nav-text">响应实体格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%97%E8%A1%A8%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.2.</span> <span class="nav-text">响应列表格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%88%86%E9%A1%B5%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.1.3.</span> <span class="nav-text">响应分页格式</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.2.</span> <span class="nav-text">响应特殊数据格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%B9%E6%AE%8A%E5%86%85%E5%AE%B9%E8%A7%84%E8%8C%83"><span class="nav-number">1.4.3.3.</span> <span class="nav-text">特殊内容规范</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.4.3.3.1.</span> <span class="nav-text">布尔类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F"><span class="nav-number">1.4.3.3.2.</span> <span class="nav-text">日期格式</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%E5%AF%BC%E8%AF%BB"><span class="nav-number">1.5.</span> <span class="nav-text">五、相关文章导读</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '68f6b8b9e165bbf00c4dbb580fa7e089',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html" "b/ja/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..713181df1c
--- /dev/null
+++ "b/ja/2022/06/01/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端开发插件">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  插件安装Prettier - Code formatter格式化工具 ESLint校验规则 Veturvue代码片段及代码美化 Vue 2 Snippetsvue2 代码片段 vscode-fileheader文件注释 配置项12345678910111213141516171819202122232425262728293031323334353637383940">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-01T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="前端开发插件">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端开发插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端开发插件
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">前端开发插件</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月01日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" title="前端开发插件">https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" rel="tag"># 前端开发插件</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" rel="prev" title="搞懂EventLoop">
+      <i class="fa fa-chevron-left"></i> 搞懂EventLoop
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/squid/" rel="next" title="Squid 服务器学习笔记">
+      Squid 服务器学习笔记 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">插件安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Prettier-Code-formatter"><span class="nav-number">1.1.</span> <span class="nav-text">Prettier - Code formatter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ESLint"><span class="nav-number">1.2.</span> <span class="nav-text">ESLint</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vetur"><span class="nav-number">1.3.</span> <span class="nav-text">Vetur</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-2-Snippets"><span class="nav-number">1.4.</span> <span class="nav-text">Vue 2 Snippets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vscode-fileheader"><span class="nav-number">1.5.</span> <span class="nav-text">vscode-fileheader</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="nav-number">2.</span> <span class="nav-text">配置项</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a292d5080ff7059fe73a96440970f63b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/06/02/DockerFile/index.html b/ja/2022/06/02/DockerFile/index.html
new file mode 100644
index 0000000000..837d483501
--- /dev/null
+++ b/ja/2022/06/02/DockerFile/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:type" content="article">
+<meta property="og:title" content="DockerFile">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/02/DockerFile/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerFile原则与建议 容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。 使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。 为了减少镜像的大小，减少依赖，仅安装需要的软件包。 一个容器只做一件事。解耦复杂">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-02T11:20:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="DockerFile">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/02/DockerFile/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>DockerFile | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          DockerFile
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/02/DockerFile/">DockerFile</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/02/DockerFile/" title="DockerFile">https://blog.lifesli.com/2022/06/02/DockerFile/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/DockerFile/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/DockerFile/" rel="tag"># DockerFile</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/01/GIT%20Standard/" rel="prev" title="GIT Standard.md">
+      <i class="fa fa-chevron-left"></i> GIT Standard.md
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="next" title="Docker数据卷">
+      Docker数据卷 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerFile"><span class="nav-number">1.</span> <span class="nav-text">DockerFile</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%88%99%E4%B8%8E%E5%BB%BA%E8%AE%AE"><span class="nav-number">1.1.</span> <span class="nav-text">原则与建议</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="nav-number">1.2.</span> <span class="nav-text">常用命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM"><span class="nav-number">1.2.1.</span> <span class="nav-text">FROM</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RUN"><span class="nav-number">1.2.2.</span> <span class="nav-text">RUN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#FROM-scratch"><span class="nav-number">1.2.3.</span> <span class="nav-text">FROM scratch</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#COPY"><span class="nav-number">1.2.4.</span> <span class="nav-text">COPY</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ADD"><span class="nav-number">1.2.5.</span> <span class="nav-text">ADD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENV"><span class="nav-number">1.2.6.</span> <span class="nav-text">ENV</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#EXPOSE"><span class="nav-number">1.2.7.</span> <span class="nav-text">EXPOSE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VOLUME"><span class="nav-number">1.2.8.</span> <span class="nav-text">VOLUME</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#WORKDIR"><span class="nav-number">1.2.9.</span> <span class="nav-text">WORKDIR</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#USER"><span class="nav-number">1.2.10.</span> <span class="nav-text">USER</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CMD"><span class="nav-number">1.2.11.</span> <span class="nav-text">CMD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ENTRYPOINT"><span class="nav-number">1.2.12.</span> <span class="nav-text">ENTRYPOINT</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#LABEL"><span class="nav-number">1.2.13.</span> <span class="nav-text">LABEL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ARG"><span class="nav-number">1.2.14.</span> <span class="nav-text">ARG</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ONBUILD"><span class="nav-number">1.2.15.</span> <span class="nav-text">ONBUILD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#STOPSIGNAL"><span class="nav-number">1.2.16.</span> <span class="nav-text">STOPSIGNAL</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SHELL"><span class="nav-number">1.2.17.</span> <span class="nav-text">SHELL</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Dockerfile-%E7%A4%BA%E4%BE%8B"><span class="nav-number">1.3.</span> <span class="nav-text">Dockerfile 示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BANginx%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.1.</span> <span class="nav-text">构建Nginx运行环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E5%BB%BATomcat%E7%8E%AF%E5%A2%83"><span class="nav-number">1.3.2.</span> <span class="nav-text">构建Tomcat环境</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/02/DockerFile/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/DockerFile/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/DockerFile/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6dbbc5907acdab4143e571b4f2711300',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/02/Docker\345\221\275\344\273\244/index.html" "b/ja/2022/06/02/Docker\345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..ec4ccae731
--- /dev/null
+++ "b/ja/2022/06/02/Docker\345\221\275\344\273\244/index.html"
@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker 命令">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 命令 帮助命令docker –help  镜像操作 搜索镜像docker search hello-world  下载镜像docker pull hello-world  查看本地已下载所有镜像docker images  查看镜像历史docker history hello-world  备份镜像docker tag hello-word:last hello-world:v2">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-02T16:20:30.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Docker 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">Docker 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 16:20</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" title="Docker 命令">https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="prev" title="Docker网络模式">
+      <i class="fa fa-chevron-left"></i> Docker网络模式
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="next" title="Nginx指令">
+      Nginx指令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Docker 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%95%9C%E5%83%8F%E6%93%8D%E4%BD%9C"><span class="nav-number">1.1.</span> <span class="nav-text">镜像操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%B9%E5%99%A8%E6%93%8D%E4%BD%9C"><span class="nav-number">1.2.</span> <span class="nav-text">容器操作</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'bcbf62cd5aaa0ed718db202d35d4da8a',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html" "b/ja/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
new file mode 100644
index 0000000000..e86cdc35b6
--- /dev/null
+++ "b/ja/2022/06/02/Docker\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker容器端口映射">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker容器端口映射常见容器服务需要做端口映射，这里以nginx为例进行举例 启动一个nginx容器docker run -itd –name nginx1 -P nginx:latest #随机端口docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口docker run -itd –name nginx3 -p 172.16.1">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-02T11:22:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="容器端口映射">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Docker容器端口映射 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker容器端口映射
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">Docker容器端口映射</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:22</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" title="Docker容器端口映射">https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="tag"># 容器端口映射</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="prev" title="Docker数据卷">
+      <i class="fa fa-chevron-left"></i> Docker数据卷
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="next" title="Docker网络模式">
+      Docker网络模式 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84"><span class="nav-number">1.</span> <span class="nav-text">Docker容器端口映射</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E4%B8%80%E4%B8%AAnginx%E5%AE%B9%E5%99%A8"><span class="nav-number">1.1.</span> <span class="nav-text">启动一个nginx容器</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5946f0c656dfe134e805be7671612c54',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html" "b/ja/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
new file mode 100644
index 0000000000..0bfcaba406
--- /dev/null
+++ "b/ja/2022/06/02/Docker\346\225\260\346\215\256\345\215\267/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker数据卷">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker数据卷宿主机与容器进行数据交互，共享宿主机与容器之间的数据 创建数据卷关联docker run -it –name my_ubuntu1 -v ~ &#x2F;Desktop&#x2F;test:&#x2F;test &#x2F;bin&#x2F;bash  利用系统方法操作数据卷 查 docker数据卷docker volume ls  创建数据卷docker volume create volname  共享docker run">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-02T11:21:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="数据卷">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Docker数据卷 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker数据卷
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">Docker数据卷</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:21</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" title="Docker数据卷">https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" rel="tag"># 数据卷</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/DockerFile/" rel="prev" title="DockerFile">
+      <i class="fa fa-chevron-left"></i> DockerFile
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="next" title="Docker容器端口映射">
+      Docker容器端口映射 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.</span> <span class="nav-text">Docker数据卷</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%85%B3%E8%81%94"><span class="nav-number">1.1.</span> <span class="nav-text">创建数据卷关联</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E7%B3%BB%E7%BB%9F%E6%96%B9%E6%B3%95%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%8D%B7"><span class="nav-number">1.2.</span> <span class="nav-text">利用系统方法操作数据卷</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E5%8D%B7%E5%AE%B9%E5%99%A8%E4%BD%BF%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">数据卷容器使用</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'c15ce4267bbb92b7a5024e1d75e45eb0',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html" "b/ja/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000000..460b4c053b
--- /dev/null
+++ "b/ja/2022/06/02/Docker\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Docker网络模式">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker网络模式Docker常见的两种网络模式  host网络模式：创建的容器和宿主机共享同一个网卡 bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网  利用network命令管理网络模式 查看网络模式docker network ls 创建网络模式docker network create –drive br">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-02T11:23:20.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络模式">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Docker网络模式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Docker网络模式
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">Docker网络模式</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月02日 - 11:23</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" title="Docker网络模式">https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" rel="tag"># 网络模式</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" rel="prev" title="Docker容器端口映射">
+      <i class="fa fa-chevron-left"></i> Docker容器端口映射
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="next" title="Docker 命令">
+      Docker 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.</span> <span class="nav-text">Docker网络模式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8network%E5%91%BD%E4%BB%A4%E7%AE%A1%E7%90%86%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.1.</span> <span class="nav-text">利用network命令管理网络模式</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '6039f5b144eeeb15ec9d40216ef97ca4',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html" "b/ja/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
new file mode 100644
index 0000000000..46eb1e7344
--- /dev/null
+++ "b/ja/2022/06/09/Hexo\345\234\250Github\345\217\221\345\270\203\344\271\213\345\220\216\350\207\252\345\256\232\344\271\211\345\237\237\345\220\215\347\232\204\351\205\215\347\275\256/index.html"
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Hexo在Github发布之后自定义域名的配置">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Hexo在Github发布之后自定义域名的配置进到你的博客发布所在仓库，如：选择Settings，然后是pages，滚动页面找到Custom domain，将你自己的域名绑定进去保存一下就好了。 在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是lixuguang.github.io Public，这样你的GitHub Page">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+<meta property="og:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-59-28.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Hexo">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://blog.lifesli.com/@attachment/Clipboard_2022-06-09-12-57-48.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Hexo在Github发布之后自定义域名的配置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Hexo在Github发布之后自定义域名的配置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">Hexo在Github发布之后自定义域名的配置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" title="Hexo在Github发布之后自定义域名的配置">https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Hexo/" rel="tag"># Hexo</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" rel="prev" title="Nginx指令">
+      <i class="fa fa-chevron-left"></i> Nginx指令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/http_stub_status_module/" rel="next" title="http_stub_status_module Nginx的性能模块">
+      http_stub_status_module Nginx的性能模块 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名的配置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E4%BC%9A%E8%A2%AB%E6%B8%85%E7%A9%BA%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">1.1.</span> <span class="nav-text">Hexo在Github发布之后自定义域名会被清空的问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">1.1.1.</span> <span class="nav-text">解决方案</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'd4a64108d6f7548b5d0ade9569347bc8',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/09/Nginx\346\214\207\344\273\244/index.html" "b/ja/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
new file mode 100644
index 0000000000..1995fa70d6
--- /dev/null
+++ "b/ja/2022/06/09/Nginx\346\214\207\344\273\244/index.html"
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx指令">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx指令1234567891011121314151617181920212223242526272829303132333435363738394041424344#启动Nginxstart nginx#重启Nginxnginx -s reopen #重新加载Nginx配置文件，然后以优雅的方式重启Nginxnginx -s reload#强制停止Nginx">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-09T10:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Nginx指令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx指令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">Nginx指令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 10:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" title="Nginx指令">https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" rel="prev" title="Docker 命令">
+      <i class="fa fa-chevron-left"></i> Docker 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="next" title="Hexo在Github发布之后自定义域名的配置">
+      Hexo在Github发布之后自定义域名的配置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E6%8C%87%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">Nginx指令</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '3b5a9b6f152993c81b6211ba585682df',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/06/09/http_stub_status_module/index.html b/ja/2022/06/09/http_stub_status_module/index.html
new file mode 100644
index 0000000000..a88f831c54
--- /dev/null
+++ b/ja/2022/06/09/http_stub_status_module/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:type" content="article">
+<meta property="og:title" content="http_stub_status_module Nginx的性能模块">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/09/http_stub_status_module/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块： 1--with-http_stub_status_module 查看是否安装12345&#x2F;&#x2F; 查看nginx版本及安装了那些模块nginx -V&#x2F;&#x2F; 如果安装了的话会显示下面的信息--with">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+<meta property="article:published_time" content="2022-06-09T12:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Nginx">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/09/http_stub_status_module/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>http_stub_status_module Nginx的性能模块 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          http_stub_status_module Nginx的性能模块
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/09/http_stub_status_module/">http_stub_status_module Nginx的性能模块</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月09日 - 12:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/09/http_stub_status_module/" title="http_stub_status_module Nginx的性能模块">https://blog.lifesli.com/2022/06/09/http_stub_status_module/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/09/http_stub_status_module/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Nginx/" rel="tag"># Nginx</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" rel="prev" title="Hexo在Github发布之后自定义域名的配置">
+      <i class="fa fa-chevron-left"></i> Hexo在Github发布之后自定义域名的配置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="next" title="架构实践">
+      架构实践 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9F%A5%E7%9C%8B%E6%98%AF%E5%90%A6%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">查看是否安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8"><span class="nav-number">2.</span> <span class="nav-text">配置使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90"><span class="nav-number">3.</span> <span class="nav-text">解析</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">4.</span> <span class="nav-text">使用场景</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/09/http_stub_status_module/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/09/http_stub_status_module/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/09/http_stub_status_module/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0e2816417b18e5b58c6394385bfab303',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html" "b/ja/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
new file mode 100644
index 0000000000..a477472ab7
--- /dev/null
+++ "b/ja/2022/06/15/\346\236\266\346\236\204\345\256\236\350\267\265/index.html"
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:type" content="article">
+<meta property="og:title" content="架构实践">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="架构实践架构设计内容一览应用架构设计 Transaction执行控制（在线&#x2F;批处理路径和控制） Session控制 死锁控制 接口处理流程(适配器设置&#x2F;文件备份) 命名规范(实例&#x2F;SID等) 中间件参数 (初始化参数等) 认证(处理流程&#x2F;错误处理) 帐户(用户ID体系&#x2F;权限管理&#x2F;申请方式)  开发架构设计 系统景观(各种环境名称、利用方法等） 转运路线(转运路线&#x2F;转运工具&#x2F;承认方式) 开发账户(用">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-15T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="架构">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>架构实践 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          架构实践
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">架构实践</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月15日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" title="架构实践">https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E6%9E%B6%E6%9E%84/" rel="tag"># 架构</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/09/http_stub_status_module/" rel="prev" title="http_stub_status_module Nginx的性能模块">
+      <i class="fa fa-chevron-left"></i> http_stub_status_module Nginx的性能模块
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="next" title="前端常见知识点整理 ---- 网络安全（2）">
+      前端常见知识点整理 ---- 网络安全（2） <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">架构实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%86%85%E5%AE%B9%E4%B8%80%E8%A7%88"><span class="nav-number">1.1.</span> <span class="nav-text">架构设计内容一览</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.1.</span> <span class="nav-text">应用架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.2.</span> <span class="nav-text">开发架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%BB%B4%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">1.1.3.</span> <span class="nav-text">运维架构设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD"><span class="nav-number">1.1.4.</span> <span class="nav-text">基础设施</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '9f2e156b05980fee1680e2e75697ec6b',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html" "b/ja/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"
new file mode 100644
index 0000000000..6c3f906557
--- /dev/null
+++ "b/ja/2022/06/16/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206 ---- \347\275\221\347\273\234\345\256\211\345\205\250\357\274\2102\357\274\211/index.html"	
@@ -0,0 +1,728 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:type" content="article">
+<meta property="og:title" content="前端常见知识点整理 ---- 网络安全（2）">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前端常见知识点整理 —- 网络安全（2）SQL 注入SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-16T14:40:40.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="网络安全">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>前端常见知识点整理 ---- 网络安全（2） | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          前端常见知识点整理 ---- 网络安全（2）
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">前端常见知识点整理 ---- 网络安全（2）</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月16日 - 14:40</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" title="前端常见知识点整理 ---- 网络安全（2）">https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"># 网络安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" rel="prev" title="架构实践">
+      <i class="fa fa-chevron-left"></i> 架构实践
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/30/nginx-timeout/" rel="next" title="nginx中的超时设置">
+      nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86-%E2%80%94-%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">前端常见知识点整理 —- 网络安全（2）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.</span> <span class="nav-text">SQL 注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5%E5%8E%9F%E7%90%86"><span class="nav-number">1.1.1.</span> <span class="nav-text">SQL 注入原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E9%A2%84%E9%98%B2-SQL-%E6%B3%A8%E5%85%A5"><span class="nav-number">1.1.2.</span> <span class="nav-text">如何预防 SQL 注入</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%91%BD%E4%BB%A4%E8%A1%8C%E6%B3%A8%E5%85%A5"><span class="nav-number">1.2.</span> <span class="nav-text">命令行注入</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.</span> <span class="nav-text">DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS"><span class="nav-number">1.3.1.</span> <span class="nav-text">网络层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#SYN-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">SYN Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ACK-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.2.</span> <span class="nav-text">ACK Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#UDP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.3.</span> <span class="nav-text">UDP Flood 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ICMP-Flood-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.1.4.</span> <span class="nav-text">ICMP Flood 攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.2.</span> <span class="nav-text">网络层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS"><span class="nav-number">1.3.3.</span> <span class="nav-text">应用层 DDoS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CC-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">CC 攻击</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DNS-Flood"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">DNS Flood</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTTP-%E6%85%A2%E9%80%9F%E8%BF%9E%E6%8E%A5%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">HTTP 慢速连接攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%B1%82-DDoS-%E9%98%B2%E5%BE%A1"><span class="nav-number">1.3.4.</span> <span class="nav-text">应用层 DDoS 防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B6%E4%BB%96-DDoS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.</span> <span class="nav-text">其他 DDoS 攻击</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8-XSS"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">利用 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9D%A5%E8%87%AA-P2P-%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">来自 P2P 网络攻击</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DDoS-%E6%9C%80%E5%90%8E%E6%80%BB%E7%BB%93"><span class="nav-number">1.3.6.</span> <span class="nav-text">DDoS 最后总结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%81%E9%87%8F%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.</span> <span class="nav-text">流量劫持</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DNS-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.1.</span> <span class="nav-text">DNS 劫持</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-%E5%8A%AB%E6%8C%81"><span class="nav-number">1.4.2.</span> <span class="nav-text">HTTP 劫持</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.</span> <span class="nav-text">服务器漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.1.</span> <span class="nav-text">越权操作漏洞</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B6%8A%E6%9D%83%E6%93%8D%E4%BD%9C%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.2.</span> <span class="nav-text">越权操作漏洞防御</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.3.</span> <span class="nav-text">目录遍历漏洞</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95%E9%81%8D%E5%8E%86%E6%BC%8F%E6%B4%9E%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.3.1.</span> <span class="nav-text">目录遍历漏洞防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F"><span class="nav-number">1.5.4.</span> <span class="nav-text">物理路径泄漏</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%A9%E7%90%86%E8%B7%AF%E5%BE%84%E6%B3%84%E6%BC%8F%E9%98%B2%E5%BE%A1"><span class="nav-number">1.5.4.1.</span> <span class="nav-text">物理路径泄漏防御</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%BA%90%E7%A0%81%E6%9A%B4%E9%9C%B2%E6%BC%8F%E6%B4%9E"><span class="nav-number">1.5.5.</span> <span class="nav-text">源码暴露漏洞</span></a></li></ol></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '81a42dc6ffb5dcdd2118d8aa51cfdc96',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/06/30/nginx-timeout/index.html b/ja/2022/06/30/nginx-timeout/index.html
new file mode 100644
index 0000000000..0fd9a47515
--- /dev/null
+++ b/ja/2022/06/30/nginx-timeout/index.html
@@ -0,0 +1,669 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:type" content="article">
+<meta property="og:title" content="nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/06/30/nginx-timeout/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  nginx中的超时设置Nginx主要有四类超时设置：客户端超时设置、DNS解析超时设置、代理超时设置，如果使用ngx_lua，则还有lua相关的超时设置。 客户端超时设置对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、长连接超时时间。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。 cli">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-06-30T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Timeout">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/06/30/nginx-timeout/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/06/30/nginx-timeout/">nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年06月30日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/06/30/nginx-timeout/" title="nginx中的超时设置">https://blog.lifesli.com/2022/06/30/nginx-timeout/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/06/30/nginx-timeout/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Timeout/" rel="tag"># Timeout</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" rel="prev" title="前端常见知识点整理 ---- 网络安全（2）">
+      <i class="fa fa-chevron-left"></i> 前端常见知识点整理 ---- 网络安全（2）
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/linux-scp/" rel="next" title="在linux之间传输文件的命令scp">
+      在linux之间传输文件的命令scp <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">客户端超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#send-timeout-time"><span class="nav-number">1.1.3.</span> <span class="nav-text">send_timeout time</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.4.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">DNS解析超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.1.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%90%86%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.3.</span> <span class="nav-text">代理超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.3.1.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.2.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.3.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%B1%E8%B4%A5%E9%87%8D%E8%AF%95%E6%9C%BA%E5%88%B6%E8%AE%BE%E7%BD%AE%E3%80%82"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">失败重试机制设置。</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#upstream%E5%AD%98%E6%B4%BB%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.4.</span> <span class="nav-text">upstream存活超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.4.1.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.5.</span> <span class="nav-text">lingering_timeout</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/06/30/nginx-timeout/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/06/30/nginx-timeout/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/06/30/nginx-timeout/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'a355a72295b48c9037bbe15db106dc07',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html" "b/ja/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"
new file mode 100644
index 0000000000..2b9b54ad75
--- /dev/null
+++ "b/ja/2022/08/02/Docker \351\225\234\345\203\217\345\256\211\345\205\250\346\234\200\344\275\263\345\256\236\350\267\265 /index.html"	
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="Docker 镜像安全最佳实践Docker 和 宿主机 的设置 保证宿主机和 Docker 的版本是最新的 不要暴露 Docker 的 守护进程（daemon） 的套接字 使用 rootless 模式启动 Docker 避免使用特权容器 限制容器资源 隔离容器网络 提高容器的隔离度 将文件系统和卷设置为只读 完整的生命周期管理 限制来自容器内的系统调用  确保镜像安全 扫描和验证容器镜像 使用最小">
+<meta property="og:locale" content="ja_JP">
+<meta property="og:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+<meta property="og:image" content="https://www.creationline.com/lab/aquasecurity/43087">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="镜像安全">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://sysdig.com/blog/dockerfile-best-practices/">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" rel="tag"># 镜像安全</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Oracle-Linux-install-Docker/" rel="prev" title="在 Oracle Linux 中安装 Docker">
+      <i class="fa fa-chevron-left"></i> 在 Oracle Linux 中安装 Docker
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="next" title="Nginx中的超时设置">
+      Nginx中的超时设置 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Docker-%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.</span> <span class="nav-text">Docker 镜像安全最佳实践</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Docker-%E5%92%8C-%E5%AE%BF%E4%B8%BB%E6%9C%BA-%E7%9A%84%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">Docker 和 宿主机 的设置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A1%AE%E4%BF%9D%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8"><span class="nav-number">1.2.</span> <span class="nav-text">确保镜像安全</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9B%91%E6%8E%A7%E5%AE%B9%E5%99%A8"><span class="nav-number">1.3.</span> <span class="nav-text">监控容器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">1.4.</span> <span class="nav-text">参考</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '5d594942f0463b9bdb13148df525cefc',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html" "b/ja/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"
new file mode 100644
index 0000000000..063bc1f17c
--- /dev/null
+++ "b/ja/2022/08/02/Network in Compose \345\234\250Docker Compose\344\270\255\351\205\215\347\275\256\347\275\221\347\273\234/index.html"	
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在Docker Compose中配置网络">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Network in Compose 在Docker Compose中配置网络12345678910111213141516171819version: &quot;3.9&quot;services:  proxy:    build: .&#x2F;proxy    networks:      - actsnetwork  app:    build: .&amp;#">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker Compose">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>在Docker Compose中配置网络 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在Docker Compose中配置网络
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">在Docker Compose中配置网络</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" title="在Docker Compose中配置网络">https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Docker-Compose/" rel="tag"># Docker Compose</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="prev" title="Postgresql绿色版使用">
+      <i class="fa fa-chevron-left"></i> Postgresql绿色版使用
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="next" title="">
+       <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Network-in-Compose-%E5%9C%A8Docker-Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C"><span class="nav-number">1.</span> <span class="nav-text">Network in Compose 在Docker Compose中配置网络</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-number">1.1.</span> <span class="nav-text"></span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '997152b37173e0149b646f67818ce7d5',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html" "b/ja/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
new file mode 100644
index 0000000000..b8fe3819fc
--- /dev/null
+++ "b/ja/2022/08/02/Nginx\344\270\255\347\232\204\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Nginx中的超时设置">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Nginx中的超时设置client_header_timeout  指定等待client发送一个请求头的超时时间 语法: client_header_timeout time 默认值: 60s 上下文: http server 说明: 指定等待client发送一个请求头的超时时间（例如：GET &#x2F; HTTP&#x2F;1.1）.仅当在一次read中，没有收到请求头，才会算成超">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="超时设置">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Nginx中的超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Nginx中的超时设置
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">Nginx中的超时设置</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" title="Nginx中的超时设置">https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="tag"># 超时设置</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" rel="next" title="Postgresql绿色版使用">
+      Postgresql绿色版使用 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.</span> <span class="nav-text">Nginx中的超时设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#client-header-timeout-%E6%8C%87%E5%AE%9A%E7%AD%89%E5%BE%85client%E5%8F%91%E9%80%81%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.1.</span> <span class="nav-text">client_header_timeout  指定等待client发送一个请求头的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#client-body-timeout-%E8%AF%A5%E6%8C%87%E4%BB%A4%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E4%BD%93%EF%BC%88request-body%EF%BC%89%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.2.</span> <span class="nav-text">client_body_timeout   该指令设置请求体（request body）的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#keepalive-timeout-%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%E4%BA%86%E4%B8%8Eclient%E7%9A%84keep-alive%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.3.</span> <span class="nav-text">keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lingering-timeout"><span class="nav-number">1.4.</span> <span class="nav-text">lingering_timeout</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#resolver-timeout-%E8%AE%BE%E7%BD%AEDNS%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.5.</span> <span class="nav-text">resolver_timeout 设置DNS解析超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-connect-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8Eupstream-server%E7%9A%84%E8%BF%9E%E6%8E%A5%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%B6%85%E8%BF%8775%E7%A7%92"><span class="nav-number">1.6.</span> <span class="nav-text">proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-read-timeout-%E8%AE%BE%E7%BD%AE%E4%B8%8E%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%AF%BB%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.7.</span> <span class="nav-text">proxy_read_timeout 设置与代理服务器的读超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-send-timeout-%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%BB%99upstream%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4"><span class="nav-number">1.8.</span> <span class="nav-text">proxy_send_timeout 设置发送请求给upstream服务器的超时时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#proxy-upstream-fail-timeout%EF%BC%88fail-timeout%EF%BC%89%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E4%B8%AAupstream%E5%90%8E%E7%AB%AF%E5%A4%B1%E8%B4%A5%E4%BA%86%E6%8C%87%E5%AE%9A%E6%AC%A1%E6%95%B0%EF%BC%88max-fails%EF%BC%89%E5%90%8E%EF%BC%8C%E8%AF%A5%E5%90%8E%E7%AB%AF%E4%B8%8D%E5%8F%AF%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">1.9.</span> <span class="nav-text">proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '8ab404ddbe00e19728f8126b21c48ef7',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/08/02/Oracle-Linux-install-Docker/index.html b/ja/2022/08/02/Oracle-Linux-install-Docker/index.html
new file mode 100644
index 0000000000..137d4b3854
--- /dev/null
+++ b/ja/2022/08/02/Oracle-Linux-install-Docker/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在 Oracle Linux 中安装 Docker">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/Oracle-Linux-install-Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)12345678910111213141516171819202122232425262728293031323334353637383940# 查看systemctl list-unitssudo yum remov">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Docker">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/Oracle-Linux-install-Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>在 Oracle Linux 中安装 Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在 Oracle Linux 中安装 Docker
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/Oracle-Linux-install-Docker/">在 Oracle Linux 中安装 Docker</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/Oracle-Linux-install-Docker/" title="在 Oracle Linux 中安装 Docker">https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Docker/" rel="tag"># Docker</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="prev" title="服务器高危端口列表">
+      <i class="fa fa-chevron-left"></i> 服务器高危端口列表
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><span class="nav-number">1.</span> <span class="nav-text">Oracle Linux install Docker(https:&#x2F;&#x2F;docs.docker.com&#x2F;engine&#x2F;install&#x2F;centos&#x2F;)</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Oracle-Linux-install-Docker/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '39ecdefe64968fe4e93564a525bcd521',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html" "b/ja/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
new file mode 100644
index 0000000000..86abfc4a54
--- /dev/null
+++ "b/ja/2022/08/02/OracleLinux\345\206\205\346\240\270\344\273\216uek\345\210\207\346\215\242\345\210\260uek/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:type" content="article">
+<meta property="og:title" content="OracleLinux内核从uek切换到uek">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="12345678910111213141516171819202122232425262728#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失： yum install -y grubgrub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf #&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="kernel">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>OracleLinux内核从uek切换到uek | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          OracleLinux内核从uek切换到uek
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">OracleLinux内核从uek切换到uek</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" title="OracleLinux内核从uek切换到uek">https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/kernel/" rel="tag"># kernel</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="prev" title="搭建Docker私有仓库">
+      <i class="fa fa-chevron-left"></i> 搭建Docker私有仓库
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="next" title="systemctl 命令">
+      systemctl 命令 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'b4df7a18cf279ec407d13775653cdc72',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html" "b/ja/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
new file mode 100644
index 0000000000..6c13ed6919
--- /dev/null
+++ "b/ja/2022/08/02/Postgresql\347\273\277\350\211\262\347\211\210\344\275\277\347\224\250/index.html"
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Postgresql绿色版使用">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="初始化数据库c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8 注册表c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data 启动服务c:\pgsql\bin\postgres -D c:\pgsql\data">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T19:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="Postgresql">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>Postgresql绿色版使用 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          Postgresql绿色版使用
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">Postgresql绿色版使用</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 19:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" title="Postgresql绿色版使用">https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/Postgresql/" rel="tag"># Postgresql</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" rel="prev" title="Nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> Nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="next" title="在Docker Compose中配置网络">
+      在Docker Compose中配置网络 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">初始化数据库</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B3%A8%E5%86%8C%E8%A1%A8"><span class="nav-number">2.</span> <span class="nav-text">注册表</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E6%9C%8D%E5%8A%A1"><span class="nav-number">3.</span> <span class="nav-text">启动服务</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '74e5f8bba398d19510477330ea061fd1',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2022/08/02/linux-scp/index.html b/ja/2022/08/02/linux-scp/index.html
new file mode 100644
index 0000000000..49599ff69b
--- /dev/null
+++ b/ja/2022/08/02/linux-scp/index.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:type" content="article">
+<meta property="og:title" content="在linux之间传输文件的命令scp">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/linux-scp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="作者：李旭光引用请标明出处  前言这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现为了能够成功的传输文件，需要做到以下几点：  A需要知道要传输的的文件本地的路径 A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥 目标路径 因为Linux权限管理的要求，私钥的访问权限需要设定为600  当然还有一点">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T00:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="scp">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/linux-scp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>在linux之间传输文件的命令scp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          在linux之间传输文件的命令scp
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/linux-scp/">在linux之间传输文件的命令scp</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 00:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/linux-scp/" title="在linux之间传输文件的命令scp">https://blog.lifesli.com/2022/08/02/linux-scp/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/linux-scp/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/scp/" rel="tag"># scp</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/06/30/nginx-timeout/" rel="prev" title="nginx中的超时设置">
+      <i class="fa fa-chevron-left"></i> nginx中的超时设置
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" rel="next" title="搭建Docker私有仓库">
+      搭建Docker私有仓库 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E8%B7%B5"><span class="nav-number">2.</span> <span class="nav-text">实践</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/linux-scp/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/linux-scp/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/linux-scp/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2351f555b61990492010c74f95ff5ede',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/systemctl \345\221\275\344\273\244/index.html" "b/ja/2022/08/02/systemctl \345\221\275\344\273\244/index.html"
new file mode 100644
index 0000000000..5899a16280
--- /dev/null
+++ "b/ja/2022/08/02/systemctl \345\221\275\344\273\244/index.html"	
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:type" content="article">
+<meta property="og:title" content="systemctl 命令">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="systemctl 命令systemctl范列出系统上面有启动的unit  systemctl list-unit-files列出所有已经安装的unit有哪些 systemctl list-units –type&#x3D;service –all列出类型为service的所有项目，不论启动与否 systemctl get-default输入目前机器默认的模式，如图形界面模式或者文本模式 systemctl">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="systemctl">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>systemctl 命令 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          systemctl 命令
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">systemctl 命令</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" title="systemctl 命令">https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/systemctl/" rel="tag"># systemctl</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="prev" title="OracleLinux内核从uek切换到uek">
+      <i class="fa fa-chevron-left"></i> OracleLinux内核从uek切换到uek
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" rel="next" title="服务器高危端口列表">
+      服务器高危端口列表 <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#systemctl-%E5%91%BD%E4%BB%A4"><span class="nav-number">1.</span> <span class="nav-text">systemctl 命令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl"><span class="nav-number">1.1.</span> <span class="nav-text">systemctl</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-unit-files"><span class="nav-number">1.2.</span> <span class="nav-text">systemctl list-unit-files</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-units-%E2%80%93type-service-%E2%80%93all"><span class="nav-number">1.3.</span> <span class="nav-text">systemctl list-units –type&#x3D;service –all</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-get-default"><span class="nav-number">1.4.</span> <span class="nav-text">systemctl get-default</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-multi-user-target"><span class="nav-number">1.5.</span> <span class="nav-text">systemctl isolate multi-user.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-isolate-graphical-target"><span class="nav-number">1.6.</span> <span class="nav-text">systemctl isolate graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-poweroff"><span class="nav-number">1.7.</span> <span class="nav-text">systemctl poweroff</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-reboot"><span class="nav-number">1.8.</span> <span class="nav-text">systemctl reboot</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-suspend"><span class="nav-number">1.9.</span> <span class="nav-text">systemctl suspend</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-rescue"><span class="nav-number">1.10.</span> <span class="nav-text">systemctl rescue</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-hibernate"><span class="nav-number">1.11.</span> <span class="nav-text">systemctl hibernate</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-emergency"><span class="nav-number">1.12.</span> <span class="nav-text">systemctl emergency</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-%E2%80%93reverse"><span class="nav-number">1.13.</span> <span class="nav-text">systemctl list-dependencies –reverse</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-dependencies-graphical-target"><span class="nav-number">1.14.</span> <span class="nav-text">systemctl list-dependencies graphical.target</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-list-sockets"><span class="nav-number">1.15.</span> <span class="nav-text">systemctl list-sockets</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-show-etcd-service"><span class="nav-number">1.16.</span> <span class="nav-text">systemctl show etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-mask-etcd-service"><span class="nav-number">1.17.</span> <span class="nav-text">systemctl mask etcd.service</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#systemctl-unmask-etcd-service"><span class="nav-number">1.18.</span> <span class="nav-text">systemctl unmask etcd.service</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '21872a145d4d2faae26bb6d0b19fb508',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html" "b/ja/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
new file mode 100644
index 0000000000..915fc22411
--- /dev/null
+++ "b/ja/2022/08/02/\346\220\255\345\273\272Docker\347\247\201\346\234\211\344\273\223\345\272\223/index.html"
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:type" content="article">
+<meta property="og:title" content="搭建Docker私有仓库">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="搭建Docker私有仓库利用registry搭建私有仓库 下载registry1docker pull registry  配置12&#x2F;etc&#x2F;docker&#x2F;doemon.json# 配置 &#39;insecure-registry&#39; 重启docker1systemctl restart docker  创建registry容器（关联私有仓库配置）1docke">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="registry">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>搭建Docker私有仓库 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          搭建Docker私有仓库
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">搭建Docker私有仓库</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" title="搭建Docker私有仓库">https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/registry/" rel="tag"># registry</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/linux-scp/" rel="prev" title="在linux之间传输文件的命令scp">
+      <i class="fa fa-chevron-left"></i> 在linux之间传输文件的命令scp
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" rel="next" title="OracleLinux内核从uek切换到uek">
+      OracleLinux内核从uek切换到uek <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93"><span class="nav-number">1.</span> <span class="nav-text">搭建Docker私有仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8B%E8%BD%BDregistry"><span class="nav-number">1.1.</span> <span class="nav-text">下载registry</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE"><span class="nav-number">1.2.</span> <span class="nav-text">配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E5%90%AFdocker"><span class="nav-number">1.3.</span> <span class="nav-text">重启docker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BAregistry%E5%AE%B9%E5%99%A8%EF%BC%88%E5%85%B3%E8%81%94%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93%E9%85%8D%E7%BD%AE%EF%BC%89"><span class="nav-number">1.4.</span> <span class="nav-text">创建registry容器（关联私有仓库配置）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8E%A8%E9%80%81%E9%95%9C%E5%83%8F%E5%88%B0%E7%A7%81%E6%9C%89%E4%BB%93"><span class="nav-number">1.5.</span> <span class="nav-text">推送镜像到私有仓</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : 'f1f888af48d2520883ca2ec3c89e8640',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html" "b/ja/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
new file mode 100644
index 0000000000..128c772723
--- /dev/null
+++ "b/ja/2022/08/02/\346\234\215\345\212\241\345\231\250\351\253\230\345\215\261\347\253\257\345\217\243\345\210\227\350\241\250/index.html"
@@ -0,0 +1,865 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:type" content="article">
+<meta property="og:title" content="服务器高危端口列表">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="服务器高危端口列表   协议 端口 服务 渗透测试    tcp 20,21 FTP（文件传输协议） 允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)   tcp 22 SSH （安全外壳协议 ） 可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等   tcp 23 Telne">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2022-08-02T18:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="port">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>服务器高危端口列表 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          服务器高危端口列表
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">服务器高危端口列表</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2022年08月02日 - 18:00</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" title="服务器高危端口列表">https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/port/" rel="tag"># port</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" rel="prev" title="systemctl 命令">
+      <i class="fa fa-chevron-left"></i> systemctl 命令
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Oracle-Linux-install-Docker/" rel="next" title="在 Oracle Linux 中安装 Docker">
+      在 Oracle Linux 中安装 Docker <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8"><span class="nav-number">1.</span> <span class="nav-text">服务器高危端口列表</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '2131f19416e99714aef51c16160a6c54',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html" "b/ja/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
new file mode 100644
index 0000000000..53dc3fca01
--- /dev/null
+++ "b/ja/2023/09/20/DockerCompose\345\256\211\350\243\205/index.html"
@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:type" content="article">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="DockerCompose安装12345DOCKER_CONFIG&#x3D;$&amp;#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&amp;#125;mkdir -p $DOCKER_CONFIG&#x2F;cli-pluginssudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;re">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.314Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title> | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"></a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 10:18</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" title="">https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" rel="prev" title="在Docker Compose中配置网络">
+      <i class="fa fa-chevron-left"></i> 在Docker Compose中配置网络
+    </a></div>
+      <div class="post-nav-item">
+    <a href="/ja/2023/09/20/test/" rel="next" title="test">
+      test <i class="fa fa-chevron-right"></i>
+    </a></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#DockerCompose%E5%AE%89%E8%A3%85"><span class="nav-number">1.</span> <span class="nav-text">DockerCompose安装</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '321bf7884dc824a813ba59e40726a7bf',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/2023/09/20/test/index.html b/ja/2023/09/20/test/index.html
new file mode 100644
index 0000000000..178b1fd783
--- /dev/null
+++ b/ja/2023/09/20/test/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:type" content="article">
+<meta property="og:title" content="test">
+<meta property="og:url" content="https://blog.lifesli.com/ja/2023/09/20/test/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="前言最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。 原文 你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2023-09-20T18:33:23.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.318Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="经验之谈">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/2023/09/20/test/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : true,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>test | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content post posts-expand">
+            
+
+    
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">
+          test
+        </h1>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2023-09-20 18:33:23 / 修正日：10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+    </div>
+
+    
+    
+    
+        <div class="reward-container">
+  <div>如果觉得不错请支持作者</div>
+  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+    寄付
+  </button>
+  <div id="qr" style="display: none;">
+      
+      <div style="display: inline-block;">
+        <img src="/ja/images/wechatpay.jpg" alt="李旭光 WeChat 支払う">
+        <p>WeChat 支払う</p>
+      </div>
+
+  </div>
+</div>
+
+      <!-- <div>
+        
+          <!--  -->
+<div class="my_post_copyright">
+   <div style="text-align:center;color:#ccc;font-size:14px;">
+      ------ 版权声明 ------
+      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
+
+      <p><span>本文标题:</span><a href="/ja/2023/09/20/test/">test</a></p>
+      <p><span>文章作者:</span><a href="/" title="访问  的个人博客"></a></p>
+      <p><span>发布时间:</span>2023年09月20日 - 18:33</p>
+      <p><span>最后更新:</span>2023年09月20日 - 10:18</p>
+      <p><span>原始链接:</span><a href="/ja/2023/09/20/test/" title="test">https://blog.lifesli.com/2023/09/20/test/</a>
+         <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://blog.lifesli.com/2023/09/20/test/"
+               aria-label="复制成功！"></i></span>
+      </p>
+      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license"
+            href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
+            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0
+            国际</a> 转载请保留原文链接及作者。</p>
+   </div>
+   <script>
+      var clipboard = new Clipboard('.fa-clipboard');
+      $(".fa-clipboard").click(function () {
+         clipboard.on('success', function () {
+            swal({
+               title: "",
+               text: '复制成功',
+               icon: "success",
+               showConfirmButton: true
+            });
+         });
+      });  
+   </script>
+</div>
+<!--  -->
+        
+      </div> -->
+      <footer class="post-footer">
+          <div class="post-tags">
+              <a href="/ja/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" rel="tag"># 经验之谈</a>
+          </div>
+
+        
+
+
+        
+    <div class="post-nav">
+      <div class="post-nav-item">
+    <a href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" rel="prev" title="">
+      <i class="fa fa-chevron-left"></i> 
+    </a></div>
+      <div class="post-nav-item"></div>
+    </div>
+      </footer>
+    
+  </article>
+  
+  
+  
+
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%B1%E6%97%B6%E9%97%B4%E8%A1%A5%E5%9F%BA%E7%A1%80%EF%BC%8C%E8%AF%BB%E6%96%87%E6%A1%A3"><span class="nav-number">1.1.</span> <span class="nav-text">花时间补基础，读文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%BC%9A%E6%90%9C%E7%B4%A2"><span class="nav-number">1.2.</span> <span class="nav-text">学会搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E7%82%B9%E8%8B%B1%E8%AF%AD"><span class="nav-number">1.3.</span> <span class="nav-text">学点英语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%BB%E4%B8%AA%E5%9B%BE%EF%BC%8C%E6%83%B3%E4%B8%80%E6%83%B3%E5%86%8D%E5%81%9A"><span class="nav-number">1.4.</span> <span class="nav-text">画个图，想一想再做</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E5%A5%BD%E4%B8%8B%E7%8F%AD%E6%97%B6%E9%97%B4%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.5.</span> <span class="nav-text">利用好下班时间学习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E5%A5%BD-ToDo"><span class="nav-number">1.6.</span> <span class="nav-text">列好 ToDo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%8D%E6%80%9D%E5%92%8C%E6%95%B4%E7%90%86"><span class="nav-number">1.7.</span> <span class="nav-text">反思和整理</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/2023/09/20/test/" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/2023/09/20/test/" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/2023/09/20/test/" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0ff089cbf54c4f98308ee98fcd238d4d',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/@attachment/README.html b/ja/@attachment/README.html
new file mode 100644
index 0000000000..77dfc07fbb
--- /dev/null
+++ b/ja/@attachment/README.html
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="这里追加图片">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/@attachment/README.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="这里追加图片">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.310Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/@attachment/README">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title> | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="ja">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+            <li><a href="/ja/@attachment/">@ATTACHMENT</a></li>
+            <li>README</li>
+          
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <h1 id="这里追加图片"><a href="#这里追加图片" class="headerlink" title="这里追加图片"></a>这里追加图片</h1>
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+            <li><a href="/ja/@attachment/">@ATTACHMENT</a></li>
+            <li>README</li>
+          
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%BF%99%E9%87%8C%E8%BF%BD%E5%8A%A0%E5%9B%BE%E7%89%87"><span class="nav-number">1.</span> <span class="nav-text">这里追加图片</span></a></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/@attachment/README.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/@attachment/README.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/@attachment/README.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0795bae6af2502da17479967a9940b10',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/about/index.html b/ja/about/index.html
new file mode 100644
index 0000000000..a5f6b390cd
--- /dev/null
+++ b/ja/about/index.html
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="ZH | EN  | JA ﾘ　ｷｮｸｺｳ フロントエンド開発 10年スマホ: 15641181846メール: &amp;#108;&amp;#x69;&amp;#x78;&amp;#117;&amp;#103;&amp;#117;&amp;#x61;&amp;#x6e;&amp;#103;&amp;#51;&amp;#x31;&amp;#x36;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#x78;&amp;#109;&amp;#x61;&amp;#x69;&amp;#108;&amp;#x2e;&amp;#x63;&amp;#111;&amp;#109;ギ">
+<meta property="og:type" content="website">
+<meta property="og:title" content="私の履歴書">
+<meta property="og:url" content="https://blog.lifesli.com/ja/about/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="ZH | EN  | JA ﾘ　ｷｮｸｺｳ フロントエンド開発 10年スマホ: 15641181846メール: &amp;#108;&amp;#x69;&amp;#x78;&amp;#117;&amp;#103;&amp;#117;&amp;#x61;&amp;#x6e;&amp;#103;&amp;#51;&amp;#x31;&amp;#x36;&amp;#x40;&amp;#102;&amp;#x6f;&amp;#x78;&amp;#109;&amp;#x61;&amp;#x69;&amp;#108;&amp;#x2e;&amp;#x63;&amp;#111;&amp;#109;ギ">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2019-04-15T09:00:00.000Z">
+<meta property="article:modified_time" content="2023-09-20T10:18:17.322Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/about/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>私の履歴書 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="ja">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">私の履歴書
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>ABOUT</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <p><a href="../../about">ZH</a> | <a href="../../en/about">EN</a>  | <a href="../../ja/about">JA</a></p>
+<h1 id="ﾘ-ｷｮｸｺｳ"><a href="#ﾘ-ｷｮｸｺｳ" class="headerlink" title="ﾘ　ｷｮｸｺｳ"></a>ﾘ　ｷｮｸｺｳ</h1><blockquote>
+<p>フロントエンド開発 10年<br>スマホ: 15641181846<br>メール: <a href="mailto:&#108;&#x69;&#x78;&#117;&#103;&#117;&#x61;&#x6e;&#103;&#51;&#x31;&#x36;&#x40;&#102;&#x6f;&#x78;&#109;&#x61;&#x69;&#108;&#x2e;&#x63;&#111;&#109;">&#108;&#x69;&#x78;&#117;&#103;&#117;&#x61;&#x6e;&#103;&#51;&#x31;&#x36;&#x40;&#102;&#x6f;&#x78;&#109;&#x61;&#x69;&#108;&#x2e;&#x63;&#111;&#109;</a><br>ギットハブ: <a target="_blank" rel="noopener" href="https://github.com/lixuguang">https://github.com/lixuguang</a><br>ブログ: <a target="_blank" rel="noopener" href="https://lixuguang.github.io/">https://lixuguang.github.io</a><br>アドレス: 大连沙河口区黄河路852号</p>
+</blockquote>
+<h2 id="持てる開発技術"><a href="#持てる開発技術" class="headerlink" title="持てる開発技術"></a>持てる開発技術</h2><ul>
+<li><p>熟练使用Html/Css/Javascript/Jq，响应式开发，移动端Web开发</p>
+</li>
+<li><p>熟练使用VUE/vuex/axios/vue-router/element-ui等vue全家桶完成项目/组件开发</p>
+</li>
+<li><p>熟练进行前后端分离开发，前后端接口联调，基于git的版本管理，CICD开发等。</p>
+</li>
+<li><p>熟练使用chrome-dev对项目进行前端代码调试/调优</p>
+</li>
+<li><p>掌握Nodejs/Electron/React/less/sass/bootstrap等开发</p>
+</li>
+<li><p>掌握webpack基本配置，npm包管理等前端工程化开发方式</p>
+</li>
+<li><p>掌握前端架构方法，对前端规范性要求非常熟悉，能够根据产品/项目需求给出最优技术选型方案。</p>
+</li>
+<li><p>熟练使用svn/git等代码版本管理工具及gitflow管理方式进行代码管理</p>
+</li>
+<li><p>8年前端开发经验，参与过100+的项目开发。</p>
+</li>
+<li><p>善于团队协作，自我驱动，持续学习，热爱工作，责任心强。</p>
+<h2 id="働いていた会社"><a href="#働いていた会社" class="headerlink" title="働いていた会社"></a>働いていた会社</h2><blockquote>
+<p>華宇（大連）信息服务有限公司：主要面向政府、公检法机关及互联网市场大客户。<br>2014.5-至今<br>资深前端开发工程师 团队规模：30人 公司规模：600人<br>主要职责: </p>
+</blockquote>
+</li>
+<li><p>编写代码</p>
+<ul>
+<li>完成正常项目任务<ul>
+<li>累计完成项目超过150个</li>
+<li>参与项目类型包括pcWeb、padWeb、手机Web、微信Web、触摸屏、指挥控制大屏</li>
+<li>业务类型涉及政府、公检法各个领域</li>
+<li>使用技术包含HTML4/5、CSS2/3、ES5/6、bootstrap、framework7、Angular、Vue以及Artery框架等</li>
+</ul>
+</li>
+<li>极短时间内完成任务<ul>
+<li>竞标项目如：<ul>
+<li>5天60个页面带领一个初级前端和一个中级前端完成。</li>
+<li>3天完成一个问卷调查包含各种交互的特效。</li>
+<li>封闭1星期同3位开发共同完成canvas画板功能，支持检察官记录员实现档案卷宗实时编辑。</li>
+</ul>
+</li>
+<li>演示项目如：<ul>
+<li>1个月带领一个初级前端一个初级开发完成整个系统包含业务逻辑除后台的所有功能，实现超高保真原型。</li>
+</ul>
+</li>
+<li>救火任务如：<ul>
+<li>上线前2天解决其他人无法解决的问题，此类情况居多。</li>
+<li>项目工期提前，顶着压力加班完成任务。如1天13个页面。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>新技术框架研究应用<ul>
+<li>前后端分离技术<ul>
+<li>组织前端团队学习前后端分离思想，研究前后端分离所要学习的新技能知识，面向对象的思想以及面向接口的思想等。</li>
+</ul>
+</li>
+<li>前端自动化构建、自动检测<ul>
+<li>组织前端团队学习前端自动化构建如：npm包管理工具、各种cli工具使用、eslint、stylint等自动化检查工具，以及webpack和gulp等打包工具使用。</li>
+</ul>
+</li>
+<li>MVVM框架等新技术<ul>
+<li>组织学习研究Angular2、Vue2等数据驱动的MVVM框架，并在实际项目中使用VUE框架。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>组织构建基础服务<ul>
+<li>前端通用组件库</li>
+<li>Vue组件库</li>
+<li>前端题库</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><p>制定规范</p>
+<ul>
+<li>前端编码规范<ul>
+<li>包括HTML规范、CSS规范、JS规范、Vue规范、通用规范等。</li>
+</ul>
+</li>
+<li>团队协作制度<ul>
+<li>包括代码管理制度、团队协作规范制度。</li>
+</ul>
+</li>
+<li>代码审查规范<ul>
+<li>人工审核</li>
+<li>自动化检测工具审核</li>
+</ul>
+</li>
+<li>知识考核规范<ul>
+<li>前端知识点地图</li>
+<li>前端技能栈思维导图</li>
+<li>前端考试平台</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><p>团队建设</p>
+<ul>
+<li>面试官<ul>
+<li>从原来的2人前端团队发展至16人前端团队，4年流失率仅为3人。</li>
+</ul>
+</li>
+<li>组织师傅帮带<ul>
+<li>组织先进带后进，高级带初级，建立前端梯队，组织共同学习。</li>
+</ul>
+</li>
+<li>前端兴趣小组<ul>
+<li>每周二组织前端兴趣小组，了解当下最新的前端知识，组织分享活动。</li>
+</ul>
+</li>
+<li>前端培训<ul>
+<li>不定期组织学习公司将要使用的新技术以及开发过程中遇到的问题解决方案</li>
+<li>定期组织基础知识、中级知识、高级知识、实践应用四个层面的培训。</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><p>人才培养</p>
+<ul>
+<li>人员考核<ul>
+<li>根据建立的知识点地图建立考点地图，建立试卷进行考评，关系到员工晋升。</li>
+</ul>
+</li>
+<li>建立人才档案，定期谈话<ul>
+<li>根据不同人的特点建立对应的人才档案，通过季度谈话的方式了解员工最新动态，根据员工特点设立学习方向和目标，引导员工成长。</li>
+</ul>
+</li>
+<li>参与人才晋升考官<ul>
+<li>参与员工晋升考核，给出努力方向。</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<hr>
+<blockquote>
+<p>大连新桥科技发展有限公司：面向教育系统提供整体服务。<br>2013.1-2014.1<br>用户体验团队负责人 团队规模：6人 公司规模：50人<br>主要职责：</p>
+</blockquote>
+<ul>
+<li>接访客户<ul>
+<li>去客户现场或客户到工作现场，负责接待客户，了解客户需求。</li>
+</ul>
+</li>
+<li>设计、编写代码<ul>
+<li>根据客户或领导需求完成需求分析、视觉设计、代码编写等任务。涉及pcWeb、padWeb、手机Web等。</li>
+</ul>
+</li>
+<li>团队管理<ul>
+<li>根据任务量分配工作，协调团队资源。</li>
+</ul>
+</li>
+</ul>
+<hr>
+<blockquote>
+<p>百维数元信息科技（北京）有限公司：一斑网在线调研平台。<br>2011.9-2012.12<br>开发工程师 团队规模：3人 公司规模：8人<br>主要职责：</p>
+</blockquote>
+<ul>
+<li>设计、前后台代码编写、运营、客服<ul>
+<li>初创公司，开发运营团队3人，主要负责设计工作、前端开发、部分后端开发、运营、客服等工作。<h2 id="教育经历"><a href="#教育经历" class="headerlink" title="教育经历"></a>教育经历</h2><blockquote>
+<p>大连外国语大学<br>2008.9-2012.6<br>信息系统与信息管理（日英双语强化）<br>本科<br>主要职务：</p>
+</blockquote>
+</li>
+<li>计算机部部长<ul>
+<li>组织计算机竞赛、考级</li>
+</ul>
+</li>
+<li>团支书<ul>
+<li>组织班级党员发展、思想工作。</li>
+</ul>
+</li>
+<li>网络协会核心成员<ul>
+<li>为在校生提供vod服务，翻译日英影音资料供大家学习。<blockquote>
+<p>主要荣誉：</p>
+</blockquote>
+</li>
+</ul>
+</li>
+<li>学习标兵</li>
+<li>优秀团支书</li>
+<li>优秀毕业生</li>
+<li>每一季度奖学金（一、二、三等均获得过）<h2 id="项目经历"><a href="#项目经历" class="headerlink" title="项目经历"></a>项目经历</h2></li>
+</ul>
+</li>
+<li>ERP系统<ul>
+<li>法院执行线索分析系统v2.1-v2.2</li>
+<li>数据质量检查系统v2.0-v2.3</li>
+<li>法官办案辅助系统</li>
+<li>量刑规范化服务系统</li>
+<li>裁判文书上网直报系统V2.0</li>
+<li>律师阅卷管理系统</li>
+<li>… 100+</li>
+</ul>
+</li>
+<li>CMS网站<ul>
+<li>诉讼服务网系列 50+</li>
+<li>法院官网 20+</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>pad、手机、触控屏系统<ul>
+<li>信息引导侦查系列产品</li>
+<li>远程视频会见系统2.1</li>
+<li>领导驾驶舱</li>
+<li>移动办案APP</li>
+<li>… 30+</li>
+</ul>
+</li>
+<li>普通网站<ul>
+<li>企业官网、政府官网 10+</li>
+</ul>
+</li>
+</ul>
+<blockquote>
+<p>涉及技术包含：<br><strong>语言：</strong><br>HTML4/5、CSS2/3、ES5/6、JSP…<br><strong>框架：</strong><br>JQ、bootstarp、mui、framework7、VUE…<br><strong>理论：</strong><br>前后端分离(面向对象OOB + 异步请求ajax + 面向接口api)</p>
+</blockquote>
+<h2 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h2><p>从2011年算起我已经从事前端开发8年、设计2年（重叠）、团队管理4年（重叠），参与各类大小项目200+，涉及各个业务领域包括公检法政、教育、调研，覆盖目前主流的前端技术（游戏向不包含）。基础能力扎实，能够解决绝大多数普通问题和部分棘手问题，从小在军营成长让我对团队纪律与制度有着深刻的认识，知道规范与制度的重要性，这为我建立高效优质的团队提供了良好土壤。谦逊使我可以与团队中以及团队之间有着良好的沟通，好学让我不断逃出舒适区，让自己不断的学习进步。有着个人荣誉感与集体荣誉感，让我对工作和团队认真负责。抗压能力强，让领导放心把最紧急最重要的工作交给我做，加班也毫无怨言。工作久了让我总结了一些工作中常见的问题，我会讲这些分享给他人，让大家一同进步，将问题扼杀在摇篮里。愿意组织活动参加活动，喜欢阅读，跑步，骑行，篮球。</p>
+
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>ABOUT</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+    <div class="comments" id="gitalk-container"></div>
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%EF%BE%98-%EF%BD%B7%EF%BD%AE%EF%BD%B8%EF%BD%BA%EF%BD%B3"><span class="nav-number">1.</span> <span class="nav-text">ﾘ　ｷｮｸｺｳ</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8C%81%E3%81%A6%E3%82%8B%E9%96%8B%E7%99%BA%E6%8A%80%E8%A1%93"><span class="nav-number">1.1.</span> <span class="nav-text">持てる開発技術</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%83%8D%E3%81%84%E3%81%A6%E3%81%84%E3%81%9F%E4%BC%9A%E7%A4%BE"><span class="nav-number">1.2.</span> <span class="nav-text">働いていた会社</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%99%E8%82%B2%E7%BB%8F%E5%8E%86"><span class="nav-number">1.3.</span> <span class="nav-text">教育经历</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86"><span class="nav-number">1.4.</span> <span class="nav-text">项目经历</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.5.</span> <span class="nav-text">自我介绍</span></a></li></ol></li></ol></div>
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/about/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/about/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/about/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+
+<script>
+NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
+  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
+    var gitalk = new Gitalk({
+      clientID    : 'd0f9385a6852112b2abe',
+      clientSecret: '55829d977cda5d295b07f0249ef5b1ffcb52f170',
+      repo        : 'lixuguang.github.io',
+      owner       : 'lixuguang',
+      admin       : ['lixuguang'],
+      id          : '0c3822a85883fb7dd9ace475b00d39aa',
+        language: 'zh-CN',
+      distractionFreeMode: true
+    });
+    gitalk.render('gitalk-container');
+  }, window.Gitalk);
+});
+</script>
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2013/06/index.html b/ja/archives/2013/06/index.html
new file mode 100644
index 0000000000..04e67b5090
--- /dev/null
+++ b/ja/archives/2013/06/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2013/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2013/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2013/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2013/index.html b/ja/archives/2013/index.html
new file mode 100644
index 0000000000..f99452b94a
--- /dev/null
+++ b/ja/archives/2013/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2013/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2013/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2013/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2013/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2013/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2015/12/index.html b/ja/archives/2015/12/index.html
new file mode 100644
index 0000000000..3c88bec416
--- /dev/null
+++ b/ja/archives/2015/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2015/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2015/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2015/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2015/index.html b/ja/archives/2015/index.html
new file mode 100644
index 0000000000..71c6a9cf89
--- /dev/null
+++ b/ja/archives/2015/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2015/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2015/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2015/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2015/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2015/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2016/10/index.html b/ja/archives/2016/10/index.html
new file mode 100644
index 0000000000..659dd3c305
--- /dev/null
+++ b/ja/archives/2016/10/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2016/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2016/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2016/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2016/index.html b/ja/archives/2016/index.html
new file mode 100644
index 0000000000..8dcf17cd83
--- /dev/null
+++ b/ja/archives/2016/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2016/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2016/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2016/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2016/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2016/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2017/08/index.html b/ja/archives/2017/08/index.html
new file mode 100644
index 0000000000..cbb5323e0f
--- /dev/null
+++ b/ja/archives/2017/08/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2017/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2017/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2017/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2017/10/index.html b/ja/archives/2017/10/index.html
new file mode 100644
index 0000000000..7d850247c6
--- /dev/null
+++ b/ja/archives/2017/10/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2017/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2017/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2017/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2017/12/index.html b/ja/archives/2017/12/index.html
new file mode 100644
index 0000000000..08278128cb
--- /dev/null
+++ b/ja/archives/2017/12/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2017/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2017/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2017/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2017/index.html b/ja/archives/2017/index.html
new file mode 100644
index 0000000000..502132629a
--- /dev/null
+++ b/ja/archives/2017/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2017/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2017/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2017/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2017/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2017/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2019/12/index.html b/ja/archives/2019/12/index.html
new file mode 100644
index 0000000000..a3806244cf
--- /dev/null
+++ b/ja/archives/2019/12/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2019/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2019/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2019/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2019/index.html b/ja/archives/2019/index.html
new file mode 100644
index 0000000000..0bd7522339
--- /dev/null
+++ b/ja/archives/2019/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2019/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2019/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2019/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2019/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2019/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/01/index.html b/ja/archives/2020/01/index.html
new file mode 100644
index 0000000000..c641b4dd2f
--- /dev/null
+++ b/ja/archives/2020/01/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/01/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/01/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/2020/01/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2020/01/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/01/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/01/page/2/index.html b/ja/archives/2020/01/page/2/index.html
new file mode 100644
index 0000000000..431ab304d6
--- /dev/null
+++ b/ja/archives/2020/01/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/01/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/01/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/01/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/01/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/archives/2020/01/page/3/">3</a><a class="page-number" href="/ja/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2020/01/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/01/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/01/page/3/index.html b/ja/archives/2020/01/page/3/index.html
new file mode 100644
index 0000000000..f1c6b01f86
--- /dev/null
+++ b/ja/archives/2020/01/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/01/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/01/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/01/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/01/">1</a><a class="page-number" href="/ja/archives/2020/01/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/archives/2020/01/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2020/01/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/01/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/01/page/4/index.html b/ja/archives/2020/01/page/4/index.html
new file mode 100644
index 0000000000..3e1f8112f0
--- /dev/null
+++ b/ja/archives/2020/01/page/4/index.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/01/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/01/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/01/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/01/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/01/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/01/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/01/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/01/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/02/index.html b/ja/archives/2020/02/index.html
new file mode 100644
index 0000000000..e91cfb32e0
--- /dev/null
+++ b/ja/archives/2020/02/index.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/02/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/02/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/02/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/02/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/02/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/03/index.html b/ja/archives/2020/03/index.html
new file mode 100644
index 0000000000..9721fb3d43
--- /dev/null
+++ b/ja/archives/2020/03/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/2020/03/page/2/">2</a><a class="extend next" rel="next" href="/ja/archives/2020/03/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/03/page/2/index.html b/ja/archives/2020/03/page/2/index.html
new file mode 100644
index 0000000000..4338d76f5b
--- /dev/null
+++ b/ja/archives/2020/03/page/2/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/03/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/03/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/03/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/03/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/03/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/03/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/03/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/04/index.html b/ja/archives/2020/04/index.html
new file mode 100644
index 0000000000..9461582bf8
--- /dev/null
+++ b/ja/archives/2020/04/index.html
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/04/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/04/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/04/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/04/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/04/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/05/index.html b/ja/archives/2020/05/index.html
new file mode 100644
index 0000000000..d5c3396835
--- /dev/null
+++ b/ja/archives/2020/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/07/index.html b/ja/archives/2020/07/index.html
new file mode 100644
index 0000000000..1a852a4f9f
--- /dev/null
+++ b/ja/archives/2020/07/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/07/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/07/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/07/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/07/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/07/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/08/index.html b/ja/archives/2020/08/index.html
new file mode 100644
index 0000000000..50b41f0ed1
--- /dev/null
+++ b/ja/archives/2020/08/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/11/index.html b/ja/archives/2020/11/index.html
new file mode 100644
index 0000000000..10f754bddf
--- /dev/null
+++ b/ja/archives/2020/11/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/index.html b/ja/archives/2020/index.html
new file mode 100644
index 0000000000..42953aa985
--- /dev/null
+++ b/ja/archives/2020/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/2020/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/2/index.html b/ja/archives/2020/page/2/index.html
new file mode 100644
index 0000000000..5245576d23
--- /dev/null
+++ b/ja/archives/2020/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/archives/2020/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/3/index.html b/ja/archives/2020/page/3/index.html
new file mode 100644
index 0000000000..007fb3d57f
--- /dev/null
+++ b/ja/archives/2020/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><a class="page-number" href="/ja/archives/2020/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/archives/2020/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/4/index.html b/ja/archives/2020/page/4/index.html
new file mode 100644
index 0000000000..11f57cde04
--- /dev/null
+++ b/ja/archives/2020/page/4/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/ja/archives/2020/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/5/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/5/index.html b/ja/archives/2020/page/5/index.html
new file mode 100644
index 0000000000..77874a40fe
--- /dev/null
+++ b/ja/archives/2020/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/4/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/ja/archives/2020/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/6/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/6/index.html b/ja/archives/2020/page/6/index.html
new file mode 100644
index 0000000000..528e1bd6f1
--- /dev/null
+++ b/ja/archives/2020/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/5/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/ja/archives/2020/page/7/">7</a><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/7/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/7/index.html b/ja/archives/2020/page/7/index.html
new file mode 100644
index 0000000000..f4b5f1a1de
--- /dev/null
+++ b/ja/archives/2020/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/6/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/ja/archives/2020/page/8/">8</a><a class="extend next" rel="next" href="/ja/archives/2020/page/8/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2020/page/8/index.html b/ja/archives/2020/page/8/index.html
new file mode 100644
index 0000000000..c9b5077caf
--- /dev/null
+++ b/ja/archives/2020/page/8/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2020/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2020/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2020/page/7/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2020/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2020/page/7/">7</a><span class="page-number current">8</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2020/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2020/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2020/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2021/05/index.html b/ja/archives/2021/05/index.html
new file mode 100644
index 0000000000..e84b500a2b
--- /dev/null
+++ b/ja/archives/2021/05/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2021/05/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2021/05/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2021/05/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/05/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/05/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2021/index.html b/ja/archives/2021/index.html
new file mode 100644
index 0000000000..308de079e3
--- /dev/null
+++ b/ja/archives/2021/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2021/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2021/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2021/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2021/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2021/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/03/index.html b/ja/archives/2022/03/index.html
new file mode 100644
index 0000000000..1354337371
--- /dev/null
+++ b/ja/archives/2022/03/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/03/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/03/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/03/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/03/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/03/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/06/index.html b/ja/archives/2022/06/index.html
new file mode 100644
index 0000000000..813e6e3217
--- /dev/null
+++ b/ja/archives/2022/06/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/06/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/06/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/2022/06/page/2/">2</a><a class="extend next" rel="next" href="/ja/archives/2022/06/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/06/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/06/page/2/index.html b/ja/archives/2022/06/page/2/index.html
new file mode 100644
index 0000000000..a10c2b3d23
--- /dev/null
+++ b/ja/archives/2022/06/page/2/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/06/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/06/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2022/06/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2022/06/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/06/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/06/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/06/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/08/index.html b/ja/archives/2022/08/index.html
new file mode 100644
index 0000000000..747fb09cf6
--- /dev/null
+++ b/ja/archives/2022/08/index.html
@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/08/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/08/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/08/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/08/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/08/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/index.html b/ja/archives/2022/index.html
new file mode 100644
index 0000000000..8c40d77062
--- /dev/null
+++ b/ja/archives/2022/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/2022/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2022/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/page/2/index.html b/ja/archives/2022/page/2/index.html
new file mode 100644
index 0000000000..56d9870c6b
--- /dev/null
+++ b/ja/archives/2022/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2022/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2022/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/archives/2022/page/3/">3</a><a class="page-number" href="/ja/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2022/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/page/3/index.html b/ja/archives/2022/page/3/index.html
new file mode 100644
index 0000000000..04ec1c7588
--- /dev/null
+++ b/ja/archives/2022/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2022/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2022/">1</a><a class="page-number" href="/ja/archives/2022/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/archives/2022/page/4/">4</a><a class="extend next" rel="next" href="/ja/archives/2022/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2022/page/4/index.html b/ja/archives/2022/page/4/index.html
new file mode 100644
index 0000000000..5f0da6f357
--- /dev/null
+++ b/ja/archives/2022/page/4/index.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2022/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2022/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/2022/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/2022/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/2022/page/3/">3</a><span class="page-number current">4</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2022/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2022/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2022/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2023/09/index.html b/ja/archives/2023/09/index.html
new file mode 100644
index 0000000000..e76f0575ea
--- /dev/null
+++ b/ja/archives/2023/09/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2023/09/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2023/09/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">無題</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2023/09/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/09/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/09/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/2023/index.html b/ja/archives/2023/index.html
new file mode 100644
index 0000000000..2e72f323b8
--- /dev/null
+++ b/ja/archives/2023/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/2023/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/2023/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">無題</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/2023/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/2023/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/2023/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/index.html b/ja/archives/index.html
new file mode 100644
index 0000000000..4787f173e1
--- /dev/null
+++ b/ja/archives/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T10:18:17+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" itemprop="url">
+            <span itemprop="name">無題</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/archives/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/10/index.html b/ja/archives/page/10/index.html
new file mode 100644
index 0000000000..2f9f8370b3
--- /dev/null
+++ b/ja/archives/page/10/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/9/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/ja/archives/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/11/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/11/index.html b/ja/archives/page/11/index.html
new file mode 100644
index 0000000000..ce04f7d1b1
--- /dev/null
+++ b/ja/archives/page/11/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/10/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/ja/archives/page/12/">12</a><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/12/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/12/index.html b/ja/archives/page/12/index.html
new file mode 100644
index 0000000000..3babd6ec5f
--- /dev/null
+++ b/ja/archives/page/12/index.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/11/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/13/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/13/index.html b/ja/archives/page/13/index.html
new file mode 100644
index 0000000000..abec2ef38e
--- /dev/null
+++ b/ja/archives/page/13/index.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/12/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/12/">12</a><span class="page-number current">13</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/2/index.html b/ja/archives/page/2/index.html
new file mode 100644
index 0000000000..de31084708
--- /dev/null
+++ b/ja/archives/page/2/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/archives/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/3/index.html b/ja/archives/page/3/index.html
new file mode 100644
index 0000000000..dfa68cbdf9
--- /dev/null
+++ b/ja/archives/page/3/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><a class="page-number" href="/ja/archives/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/archives/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/4/index.html b/ja/archives/page/4/index.html
new file mode 100644
index 0000000000..29d0ad8441
--- /dev/null
+++ b/ja/archives/page/4/index.html
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/ja/archives/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/5/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/5/index.html b/ja/archives/page/5/index.html
new file mode 100644
index 0000000000..44ee5a1bb0
--- /dev/null
+++ b/ja/archives/page/5/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/4/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/ja/archives/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/6/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/6/index.html b/ja/archives/page/6/index.html
new file mode 100644
index 0000000000..fc56283b46
--- /dev/null
+++ b/ja/archives/page/6/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/5/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/ja/archives/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/7/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/7/index.html b/ja/archives/page/7/index.html
new file mode 100644
index 0000000000..604eb1e175
--- /dev/null
+++ b/ja/archives/page/7/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/6/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/ja/archives/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/8/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/8/index.html b/ja/archives/page/8/index.html
new file mode 100644
index 0000000000..19dcf5f134
--- /dev/null
+++ b/ja/archives/page/8/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/7/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/ja/archives/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/9/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/archives/page/9/index.html b/ja/archives/page/9/index.html
new file mode 100644
index 0000000000..fe685e9b4d
--- /dev/null
+++ b/ja/archives/page/9/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/archives/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/archives/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>アーカイブ | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content archive">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        
+        <span class="collection-header">いいね! 全 128 ポスト もっと書こう！</span>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/archives/page/8/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/archives/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/ja/archives/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/ja/archives/page/13/">13</a><a class="extend next" rel="next" href="/ja/archives/page/10/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/archives/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/archives/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/archives/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Database/Postgresql/index.html b/ja/categories/Database/Postgresql/index.html
new file mode 100644
index 0000000000..48c87115fa
--- /dev/null
+++ b/ja/categories/Database/Postgresql/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Database/Postgresql/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Database/Postgresql/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Postgresql | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Postgresql
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Database/Postgresql/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/Postgresql/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/Postgresql/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Database/index.html b/ja/categories/Database/index.html
new file mode 100644
index 0000000000..50138d4412
--- /dev/null
+++ b/ja/categories/Database/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Database/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Database/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Database | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Database
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Database/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Database/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Database/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Docker/index.html b/ja/categories/Docker/index.html
new file mode 100644
index 0000000000..20a9535706
--- /dev/null
+++ b/ja/categories/Docker/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Infra/Docker/index.html b/ja/categories/Infra/Docker/index.html
new file mode 100644
index 0000000000..951dfb5ad8
--- /dev/null
+++ b/ja/categories/Infra/Docker/index.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infra/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infra/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infra/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..83b544e8f3
--- /dev/null
+++ "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html" "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
new file mode 100644
index 0000000000..750ce3a3d1
--- /dev/null
+++ "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/Squid/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Squid | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Squid
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html" "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..76357cba57
--- /dev/null
+++ "b/ja/categories/Infra/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Infra/index.html b/ja/categories/Infra/index.html
new file mode 100644
index 0000000000..8e8c479c9e
--- /dev/null
+++ b/ja/categories/Infra/index.html
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infra/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infra/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Infra | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infra
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infra/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infra/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infra/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Infrastructure/index.html b/ja/categories/Infrastructure/index.html
new file mode 100644
index 0000000000..ba280b7949
--- /dev/null
+++ b/ja/categories/Infrastructure/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Infrastructure/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Infrastructure/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Infrastructure | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Infrastructure
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Infrastructure/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Infrastructure/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Infrastructure/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Linux/Oracle/Docker/index.html b/ja/categories/Linux/Oracle/Docker/index.html
new file mode 100644
index 0000000000..3b8bcf8524
--- /dev/null
+++ b/ja/categories/Linux/Oracle/Docker/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Linux/Oracle/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Linux/Oracle/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Linux/Oracle/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Linux/Oracle/index.html b/ja/categories/Linux/Oracle/index.html
new file mode 100644
index 0000000000..e85cc53519
--- /dev/null
+++ b/ja/categories/Linux/Oracle/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Linux/Oracle/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Linux/Oracle/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Oracle | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Oracle
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Linux/Oracle/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/Oracle/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/Oracle/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Linux/RPM/index.html b/ja/categories/Linux/RPM/index.html
new file mode 100644
index 0000000000..429249b80c
--- /dev/null
+++ b/ja/categories/Linux/RPM/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Linux/RPM/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Linux/RPM/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: RPM | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">RPM
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Linux/RPM/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/RPM/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/RPM/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/Linux/index.html b/ja/categories/Linux/index.html
new file mode 100644
index 0000000000..e9efb8c0d5
--- /dev/null
+++ b/ja/categories/Linux/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Linux
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/NodeJS/Npm/index.html b/ja/categories/NodeJS/Npm/index.html
new file mode 100644
index 0000000000..07b37a60d3
--- /dev/null
+++ b/ja/categories/NodeJS/Npm/index.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/NodeJS/Npm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/NodeJS/Npm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Npm | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Npm
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/NodeJS/Npm/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/Npm/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/Npm/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/NodeJS/index.html b/ja/categories/NodeJS/index.html
new file mode 100644
index 0000000000..c85bf951d0
--- /dev/null
+++ b/ja/categories/NodeJS/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/NodeJS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/NodeJS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: NodeJS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">NodeJS
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/NodeJS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/NodeJS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/NodeJS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/OracleLinux/index.html b/ja/categories/OracleLinux/index.html
new file mode 100644
index 0000000000..91226ad02c
--- /dev/null
+++ b/ja/categories/OracleLinux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/OracleLinux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/OracleLinux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: OracleLinux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">OracleLinux
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/OracleLinux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/OracleLinux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/OracleLinux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html" "b/ja/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
new file mode 100644
index 0000000000..85812686cf
--- /dev/null
+++ "b/ja/categories/Web\346\234\215\345\212\241\345\231\250/Nginx/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/Web\346\234\215\345\212\241\345\231\250/index.html" "b/ja/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
new file mode 100644
index 0000000000..c30b9b6acc
--- /dev/null
+++ "b/ja/categories/Web\346\234\215\345\212\241\345\231\250/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Web服务器 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Web服务器
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/index.html b/ja/categories/index.html
new file mode 100644
index 0000000000..96aaef0924
--- /dev/null
+++ b/ja/categories/index.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="分类">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-08-29T09:40:17.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:03.348Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>分类 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="ja">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">分类
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>CATEGORIES</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="category-all-page">
+            <div class="category-all-title">
+              全 54 カテゴリ
+            </div>
+            <div class="category-all">
+              <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/Postgresql/">Postgresql</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Docker/">Docker</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/">Infra</a><span class="category-list-count">9</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Docker/">Docker</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/">Squid</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Infrastructure/">Infrastructure</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/">Oracle</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Oracle/Docker/">Docker</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/RPM/">RPM</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/">NodeJS</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/NodeJS/Npm/">Npm</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/OracleLinux/">OracleLinux</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/">Web服务器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/">Nginx</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/linux/">linux</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/linux/systemctl/">systemctl</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">前端工程化</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">Webpack</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">前端开发规范</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">前端技术</a><span class="category-list-count">43</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">CSS3</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">前端常见知识点整理</a><span class="category-list-count">23</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">前端问题</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">微信</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">计算机通识</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">React</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">Vue</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">后端开发</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">Go语言</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">大前端</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">全栈</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">客户端技术</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">移动开发</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">效率工具</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">Labrary</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">VSCode插件</a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">杂七杂八</a><span class="category-list-count">6</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">博客技巧</a><span class="category-list-count">5</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9E%B6%E6%9E%84/">架构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">源码原理</a><span class="category-list-count">14</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">自己动手实现系列</a><span class="category-list-count">13</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">自我提升</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">人生思考</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">杂记随感</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a><span class="category-list-count">4</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">虚拟化</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">Docker Compose</a><span class="category-list-count">1</span></li></ul></li></ul>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>CATEGORIES</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/linux/index.html b/ja/categories/linux/index.html
new file mode 100644
index 0000000000..dc9f351c71
--- /dev/null
+++ b/ja/categories/linux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">linux
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/categories/linux/systemctl/index.html b/ja/categories/linux/systemctl/index.html
new file mode 100644
index 0000000000..210f0b58b8
--- /dev/null
+++ b/ja/categories/linux/systemctl/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/linux/systemctl/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/linux/systemctl/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: systemctl | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">systemctl
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/linux/systemctl/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/linux/systemctl/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/linux/systemctl/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html" "b/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
new file mode 100644
index 0000000000..4b8c5cb259
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/Webpack/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Webpack | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Webpack
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html" "b/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
new file mode 100644
index 0000000000..9170702792
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/index.html"
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端工程化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端工程化
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/ja/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..5a036f0114
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端开发规范
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
new file mode 100644
index 0000000000..df89ce65ae
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: CSS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
new file mode 100644
index 0000000000..db5daf0e1b
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/CSS3/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: CSS3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS3
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..eb64a6a3b7
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
new file mode 100644
index 0000000000..c2e9e3978a
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
new file mode 100644
index 0000000000..dd11c80229
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/3/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
new file mode 100644
index 0000000000..a0cd8e4f46
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/4/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">5</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
new file mode 100644
index 0000000000..705b7f3c1d
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/page/5/index.html"
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/4/">4</a><span class="page-number current">5</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
new file mode 100644
index 0000000000..6a4baa056e
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\205\274\345\256\271\346\200\247/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 兼容性 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">兼容性
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
new file mode 100644
index 0000000000..471c245e89
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..aa4a8c2e26
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">3</a><a class="extend next" rel="next" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
new file mode 100644
index 0000000000..94d2fd2dc6
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\345\270\270\350\247\201\347\237\245\350\257\206\347\202\271\346\225\264\347\220\206/page/3/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端常见知识点整理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端常见知识点整理
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/">1</a><a class="page-number" href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/2/">2</a><span class="page-number current">3</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
new file mode 100644
index 0000000000..3aa690b583
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\211\215\347\253\257\351\227\256\351\242\230/index.html"
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端问题 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端问题
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
new file mode 100644
index 0000000000..6b04654612
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\345\276\256\344\277\241/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 微信 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">微信
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html" "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
new file mode 100644
index 0000000000..7f0b336bb8
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\212\200\346\234\257/\350\256\241\347\256\227\346\234\272\351\200\232\350\257\206/index.html"
@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 计算机通识 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">计算机通识
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html" "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
new file mode 100644
index 0000000000..aa4a24be22
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/React/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: React | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">React
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html" "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
new file mode 100644
index 0000000000..3b32580a67
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/Vue/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Vue | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Vue
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html" "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
new file mode 100644
index 0000000000..433a0fee57
--- /dev/null
+++ "b/ja/categories/\345\211\215\347\253\257\346\241\206\346\236\266/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 前端框架 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端框架
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html" "b/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
new file mode 100644
index 0000000000..e892adb45a
--- /dev/null
+++ "b/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/Go\350\257\255\350\250\200/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Go语言 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Go语言
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html" "b/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..a3478c9483
--- /dev/null
+++ "b/ja/categories/\345\220\216\347\253\257\345\274\200\345\217\221/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 后端开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">后端开发
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\244\247\345\211\215\347\253\257/index.html" "b/ja/categories/\345\244\247\345\211\215\347\253\257/index.html"
new file mode 100644
index 0000000000..c3c355cad2
--- /dev/null
+++ "b/ja/categories/\345\244\247\345\211\215\347\253\257/index.html"
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 大前端 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">大前端
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html" "b/ja/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
new file mode 100644
index 0000000000..0db0855e4c
--- /dev/null
+++ "b/ja/categories/\345\244\247\345\211\215\347\253\257/\345\205\250\346\240\210/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 全栈 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">全栈
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html" "b/ja/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..611ac7cca6
--- /dev/null
+++ "b/ja/categories/\345\244\247\345\211\215\347\253\257/\345\256\242\346\210\267\347\253\257\346\212\200\346\234\257/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 客户端技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">客户端技术
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html" "b/ja/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
new file mode 100644
index 0000000000..a07e27d3dd
--- /dev/null
+++ "b/ja/categories/\345\244\247\345\211\215\347\253\257/\347\247\273\345\212\250\345\274\200\345\217\221/index.html"
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 移动开发 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">移动开发
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html" "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
new file mode 100644
index 0000000000..c0cc9480fb
--- /dev/null
+++ "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/Labrary/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Labrary | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Labrary
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html" "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..684d11c893
--- /dev/null
+++ "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/VSCode\346\217\222\344\273\266/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: VSCode插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">VSCode插件
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html" "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
new file mode 100644
index 0000000000..bb1d16b2d9
--- /dev/null
+++ "b/ja/categories/\346\225\210\347\216\207\345\267\245\345\205\267/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 效率工具 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">效率工具
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html" "b/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
new file mode 100644
index 0000000000..9703be5c45
--- /dev/null
+++ "b/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/index.html"
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 杂七杂八 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂七杂八
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html" "b/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
new file mode 100644
index 0000000000..e5faa7c823
--- /dev/null
+++ "b/ja/categories/\346\235\202\344\270\203\346\235\202\345\205\253/\345\215\232\345\256\242\346\212\200\345\267\247/index.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 博客技巧 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">博客技巧
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\236\266\346\236\204/index.html" "b/ja/categories/\346\236\266\346\236\204/index.html"
new file mode 100644
index 0000000000..4228067540
--- /dev/null
+++ "b/ja/categories/\346\236\266\346\236\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%9E%B6%E6%9E%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%9E%B6%E6%9E%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 架构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">架构
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html" "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
new file mode 100644
index 0000000000..d0a16e3828
--- /dev/null
+++ "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">2</a><a class="extend next" rel="next" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html" "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
new file mode 100644
index 0000000000..66ad3141e1
--- /dev/null
+++ "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/page/2/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 源码原理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码原理
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html" "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
new file mode 100644
index 0000000000..0215505e87
--- /dev/null
+++ "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">2</a><a class="extend next" rel="next" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html" "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
new file mode 100644
index 0000000000..2d84bd8ea4
--- /dev/null
+++ "b/ja/categories/\346\272\220\347\240\201\345\216\237\347\220\206/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html" "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
new file mode 100644
index 0000000000..8d7526df7f
--- /dev/null
+++ "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/index.html"
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 自我提升 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自我提升
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html" "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
new file mode 100644
index 0000000000..3387ba7f22
--- /dev/null
+++ "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\344\272\272\347\224\237\346\200\235\350\200\203/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 人生思考 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">人生思考
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html" "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
new file mode 100644
index 0000000000..e099730572
--- /dev/null
+++ "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\346\235\202\350\256\260\351\232\217\346\204\237/index.html"
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 杂记随感 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">杂记随感
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:24:49+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/02/21-Day-Challenge-01/" itemprop="url">
+            <span itemprop="name">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-01T10:50:00+00:00"
+              content="2020-01-01">
+          01-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2020/01/01/Hello-2020/" itemprop="url">
+            <span itemprop="name">你好2020</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-30T21:37:07+00:00"
+              content="2019-12-30">
+          12-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2019/12/30/begin-learn-java/" itemprop="url">
+            <span itemprop="name">重拾java开发技能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html" "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
new file mode 100644
index 0000000000..ebf5a8c4a3
--- /dev/null
+++ "b/ja/categories/\350\207\252\346\210\221\346\217\220\345\215\207/\350\257\273\344\271\246\347\254\224\350\256\260/index.html"
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 读书笔记 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">读书笔记
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T17:37:07+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2017/10/12/web-quanzhan/" itemprop="url">
+            <span itemprop="name">《Web全栈工程师的自我修养》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2016</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2016-10-27T22:22:22+00:00"
+              content="2016-10-27">
+          10-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" itemprop="url">
+            <span itemprop="name">《晨间日记的奇迹》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2015</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2015-12-31T22:22:22+00:00"
+              content="2015-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" itemprop="url">
+            <span itemprop="name">《让老板提拔你》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-17T22:22:22+00:00"
+              content="2013-06-17">
+          06-17
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2013/06/17/Read-High-Performance-JavaScript/" itemprop="url">
+            <span itemprop="name">《高性能JAVASCRIPT》读书笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html" "b/ja/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
new file mode 100644
index 0000000000..d5f1e7b793
--- /dev/null
+++ "b/ja/categories/\350\231\232\346\213\237\345\214\226/Docker-Compose/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: Docker Compose | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker Compose
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/ja/categories/\350\231\232\346\213\237\345\214\226/index.html" "b/ja/categories/\350\231\232\346\213\237\345\214\226/index.html"
new file mode 100644
index 0000000000..ea13d18faa
--- /dev/null
+++ "b/ja/categories/\350\231\232\346\213\237\345\214\226/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>カテゴリ: 虚拟化 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content category">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">虚拟化
+          <small>カテゴリ</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/index.html b/ja/index.html
new file mode 100644
index 0000000000..afe3495a55
--- /dev/null
+++ b/ja/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/test/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2023/09/20/test/" class="post-title-link" itemprop="url">test</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2023-09-20 18:33:23 / 修正日：10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T18:33:23+00:00">2023-09-20</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/ja/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/2/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/10/index.html b/ja/page/10/index.html
new file mode 100644
index 0000000000..281b200ea9
--- /dev/null
+++ b/ja/page/10/index.html
@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" class="post-title-link" itemprop="url">OracleLinux内核从uek切换到uek</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/9/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/ja/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/11/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/100/index.html b/ja/page/100/index.html
new file mode 100644
index 0000000000..21632ad0ce
--- /dev/null
+++ b/ja/page/100/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/100/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/100/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-copy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 深浅拷贝</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/99/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/99/">99</a><span class="page-number current">100</span><a class="page-number" href="/ja/page/101/">101</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/101/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/100/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/100/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/100/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/101/index.html b/ja/page/101/index.html
new file mode 100644
index 0000000000..2d3077f2bb
--- /dev/null
+++ b/ja/page/101/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/101/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/101/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-new/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/100/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/100/">100</a><span class="page-number current">101</span><a class="page-number" href="/ja/page/102/">102</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/102/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/101/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/101/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/101/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/102/index.html b/ja/page/102/index.html
new file mode 100644
index 0000000000..8696ceadf7
--- /dev/null
+++ b/ja/page/102/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/102/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/102/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-Closure/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 闭包</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/101/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/101/">101</a><span class="page-number current">102</span><a class="page-number" href="/ja/page/103/">103</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/103/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/102/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/102/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/102/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/103/index.html b/ja/page/103/index.html
new file mode 100644
index 0000000000..7afa84bb7e
--- /dev/null
+++ b/ja/page/103/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/103/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/103/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 执行上下文</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/102/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/102/">102</a><span class="page-number current">103</span><a class="page-number" href="/ja/page/104/">104</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/104/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/103/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/103/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/103/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/104/index.html b/ja/page/104/index.html
new file mode 100644
index 0000000000..1e085417d5
--- /dev/null
+++ b/ja/page/104/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/104/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/104/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-this/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- this</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/103/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/103/">103</a><span class="page-number current">104</span><a class="page-number" href="/ja/page/105/">105</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/105/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/104/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/104/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/104/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/105/index.html b/ja/page/105/index.html
new file mode 100644
index 0000000000..752df496ea
--- /dev/null
+++ b/ja/page/105/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/105/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/105/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-instanceof/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- instanceof</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/104/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/104/">104</a><span class="page-number current">105</span><a class="page-number" href="/ja/page/106/">106</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/106/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/105/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/105/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/105/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/106/index.html b/ja/page/106/index.html
new file mode 100644
index 0000000000..9354a011e8
--- /dev/null
+++ b/ja/page/106/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/106/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/106/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/21-Day-Challenge-01/" class="post-title-link" itemprop="url">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/02/21-Day-Challenge-01/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/105/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/105/">105</a><span class="page-number current">106</span><a class="page-number" href="/ja/page/107/">107</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/107/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/106/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/106/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/106/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/107/index.html b/ja/page/107/index.html
new file mode 100644
index 0000000000..28a0c6641f
--- /dev/null
+++ b/ja/page/107/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/107/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/107/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-prototype/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 原型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/02/FE-guide-prototype/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/106/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/106/">106</a><span class="page-number current">107</span><a class="page-number" href="/ja/page/108/">108</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/108/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/107/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/107/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/107/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/108/index.html b/ja/page/108/index.html
new file mode 100644
index 0000000000..94ae0e7090
--- /dev/null
+++ b/ja/page/108/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/108/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/108/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/02/FE-guide-dataType/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/02/FE-guide-dataType/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/107/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/107/">107</a><span class="page-number current">108</span><a class="page-number" href="/ja/page/109/">109</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/109/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/108/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/108/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/108/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/109/index.html b/ja/page/109/index.html
new file mode 100644
index 0000000000..87fc0aeb0c
--- /dev/null
+++ b/ja/page/109/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/109/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/109/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/01/Hello-2020/" class="post-title-link" itemprop="url">你好2020</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/108/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/108/">108</a><span class="page-number current">109</span><a class="page-number" href="/ja/page/110/">110</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/110/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/109/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/109/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/109/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/11/index.html b/ja/page/11/index.html
new file mode 100644
index 0000000000..d97d4f4398
--- /dev/null
+++ b/ja/page/11/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" class="post-title-link" itemprop="url">搭建Docker私有仓库</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/10/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/ja/page/12/">12</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/12/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/110/index.html b/ja/page/110/index.html
new file mode 100644
index 0000000000..b51a07ac0a
--- /dev/null
+++ b/ja/page/110/index.html
@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/110/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/110/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/31/GoodBye-2019/" class="post-title-link" itemprop="url">再见2019</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/109/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/109/">109</a><span class="page-number current">110</span><a class="page-number" href="/ja/page/111/">111</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/111/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/110/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/110/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/110/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/111/index.html b/ja/page/111/index.html
new file mode 100644
index 0000000000..cc1445794f
--- /dev/null
+++ b/ja/page/111/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/111/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/111/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/31/gitlab-cicd/" class="post-title-link" itemprop="url">基于 GitLab CI/CD 的自动化构建、发布实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2019-12-31 08:22:22 / 修正日：08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2019/12/31/gitlab-cicd/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/110/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/110/">110</a><span class="page-number current">111</span><a class="page-number" href="/ja/page/112/">112</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/112/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/111/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/111/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/111/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/112/index.html b/ja/page/112/index.html
new file mode 100644
index 0000000000..53b3ac2db7
--- /dev/null
+++ b/ja/page/112/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/112/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/112/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/31/weichat-h5-compatibility/" class="post-title-link" itemprop="url">微信的H5兼容方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2019/12/31/weichat-h5-compatibility/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/111/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/111/">111</a><span class="page-number current">112</span><a class="page-number" href="/ja/page/113/">113</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/113/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/112/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/112/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/112/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/113/index.html b/ja/page/113/index.html
new file mode 100644
index 0000000000..d7406769fd
--- /dev/null
+++ b/ja/page/113/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/113/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/113/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/30/begin-learn-java/" class="post-title-link" itemprop="url">重拾java开发技能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2019/12/30/begin-learn-java/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/112/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/112/">112</a><span class="page-number current">113</span><a class="page-number" href="/ja/page/114/">114</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/114/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/113/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/113/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/113/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/114/index.html b/ja/page/114/index.html
new file mode 100644
index 0000000000..47b4f54486
--- /dev/null
+++ b/ja/page/114/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/114/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/114/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/27/Actions/" class="post-title-link" itemprop="url">巧妙利用Acitons进行博客的自动构建</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2019/12/27/Actions/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/113/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/113/">113</a><span class="page-number current">114</span><a class="page-number" href="/ja/page/115/">115</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/115/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/114/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/114/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/114/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/115/index.html b/ja/page/115/index.html
new file mode 100644
index 0000000000..6dd429f006
--- /dev/null
+++ b/ja/page/115/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/115/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/115/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2019/12/27/Vue-Component-Communication/" class="post-title-link" itemprop="url">前端面试Vue篇：Vue组件通信的几种方式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2019/12/27/Vue-Component-Communication/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/114/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/114/">114</a><span class="page-number current">115</span><a class="page-number" href="/ja/page/116/">116</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/116/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/115/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/115/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/115/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/116/index.html b/ja/page/116/index.html
new file mode 100644
index 0000000000..ec7cbd4128
--- /dev/null
+++ b/ja/page/116/index.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/116/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/116/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/12/12/Git-Shell/" class="post-title-link" itemprop="url">Git的常用命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/115/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/115/">115</a><span class="page-number current">116</span><a class="page-number" href="/ja/page/117/">117</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/117/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/116/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/116/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/116/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/117/index.html b/ja/page/117/index.html
new file mode 100644
index 0000000000..84f4789a50
--- /dev/null
+++ b/ja/page/117/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/117/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/117/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/10/12/web-quanzhan/" class="post-title-link" itemprop="url">《Web全栈工程师的自我修养》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/10/12/web-quanzhan/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/116/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/116/">116</a><span class="page-number current">117</span><a class="page-number" href="/ja/page/118/">118</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/118/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/117/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/117/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/117/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/118/index.html b/ja/page/118/index.html
new file mode 100644
index 0000000000..45b198d31c
--- /dev/null
+++ b/ja/page/118/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/118/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/118/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/10/12/VSCode-ESLint/" class="post-title-link" itemprop="url">VSCode ESLint JS代码静态检测工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/10/12/VSCode-ESLint/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/117/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/117/">117</a><span class="page-number current">118</span><a class="page-number" href="/ja/page/119/">119</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/119/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/118/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/118/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/118/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/119/index.html b/ja/page/119/index.html
new file mode 100644
index 0000000000..b5fbf4250b
--- /dev/null
+++ b/ja/page/119/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/119/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/119/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/10/12/us-gitment/" class="post-title-link" itemprop="url">给博客添加基于github-issue的评论系统</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/10/12/us-gitment/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/118/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/118/">118</a><span class="page-number current">119</span><a class="page-number" href="/ja/page/120/">120</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/120/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/119/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/119/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/119/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/12/index.html b/ja/page/12/index.html
new file mode 100644
index 0000000000..cb2eeaa3a0
--- /dev/null
+++ b/ja/page/12/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/linux-scp/" class="post-title-link" itemprop="url">在linux之间传输文件的命令scp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/11/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/ja/page/13/">13</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/13/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/120/index.html b/ja/page/120/index.html
new file mode 100644
index 0000000000..6e7b44709e
--- /dev/null
+++ b/ja/page/120/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/120/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/120/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/" class="post-title-link" itemprop="url">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/10/11/use-GitHub-Hexo-Next-make-blog/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/119/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/119/">119</a><span class="page-number current">120</span><a class="page-number" href="/ja/page/121/">121</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/121/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/120/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/120/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/120/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/121/index.html b/ja/page/121/index.html
new file mode 100644
index 0000000000..a627c70cdb
--- /dev/null
+++ b/ja/page/121/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/121/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/121/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/08/30/Vue-basic/" class="post-title-link" itemprop="url">Vue基础</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/08/30/Vue-basic/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/120/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/120/">120</a><span class="page-number current">121</span><a class="page-number" href="/ja/page/122/">122</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/122/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/121/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/121/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/121/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/122/index.html b/ja/page/122/index.html
new file mode 100644
index 0000000000..320af5c59b
--- /dev/null
+++ b/ja/page/122/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/122/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/122/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/08/30/Vue-VSCode-Snippets/" class="post-title-link" itemprop="url">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/08/30/Vue-VSCode-Snippets/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/121/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/121/">121</a><span class="page-number current">122</span><a class="page-number" href="/ja/page/123/">123</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/123/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/122/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/122/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/122/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/123/index.html b/ja/page/123/index.html
new file mode 100644
index 0000000000..9e99eb585e
--- /dev/null
+++ b/ja/page/123/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/123/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/123/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/08/30/npm-source/" class="post-title-link" itemprop="url">npm相关资料</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/08/30/npm-source/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/122/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/122/">122</a><span class="page-number current">123</span><a class="page-number" href="/ja/page/124/">124</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/124/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/123/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/123/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/123/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/124/index.html b/ja/page/124/index.html
new file mode 100644
index 0000000000..be5ab0cea0
--- /dev/null
+++ b/ja/page/124/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/124/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/124/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2017/08/29/browser-incompatibility-problem-solution/" class="post-title-link" itemprop="url">浏览器兼容性问题解决方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2017/08/29/browser-incompatibility-problem-solution/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/123/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/123/">123</a><span class="page-number current">124</span><a class="page-number" href="/ja/page/125/">125</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/125/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/124/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/124/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/124/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/125/index.html b/ja/page/125/index.html
new file mode 100644
index 0000000000..94b90853c5
--- /dev/null
+++ b/ja/page/125/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/125/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/125/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2016/10/27/Read-The-miracle-of-the-morning-journal/" class="post-title-link" itemprop="url">《晨间日记的奇迹》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/124/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/124/">124</a><span class="page-number current">125</span><a class="page-number" href="/ja/page/126/">126</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/126/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/125/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/125/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/125/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/126/index.html b/ja/page/126/index.html
new file mode 100644
index 0000000000..8668908e24
--- /dev/null
+++ b/ja/page/126/index.html
@@ -0,0 +1,696 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/126/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/126/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2015/12/31/Read-Let-your-boss-promote-you/" class="post-title-link" itemprop="url">《让老板提拔你》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/125/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/125/">125</a><span class="page-number current">126</span><a class="page-number" href="/ja/page/127/">127</a><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/127/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/126/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/126/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/126/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/127/index.html b/ja/page/127/index.html
new file mode 100644
index 0000000000..1cf0ef9758
--- /dev/null
+++ b/ja/page/127/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/127/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/127/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2013/06/26/CSS-Triangle-Circle/" class="post-title-link" itemprop="url">CSS border三角、圆角图形生成技术详解</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2013/06/26/CSS-Triangle-Circle/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/126/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/126/">126</a><span class="page-number current">127</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/128/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/127/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/127/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/127/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/128/index.html b/ja/page/128/index.html
new file mode 100644
index 0000000000..e5fa39a2b8
--- /dev/null
+++ b/ja/page/128/index.html
@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/128/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/128/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2013/06/17/Read-High-Performance-JavaScript/" class="post-title-link" itemprop="url">《高性能JAVASCRIPT》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/127/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/127/">127</a><span class="page-number current">128</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/128/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/128/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/128/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/13/index.html b/ja/page/13/index.html
new file mode 100644
index 0000000000..032a94ef0d
--- /dev/null
+++ b/ja/page/13/index.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/30/nginx-timeout/" class="post-title-link" itemprop="url">nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/12/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/12/">12</a><span class="page-number current">13</span><a class="page-number" href="/ja/page/14/">14</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/14/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/14/index.html b/ja/page/14/index.html
new file mode 100644
index 0000000000..fea72bf13c
--- /dev/null
+++ b/ja/page/14/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/14/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/14/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全（2）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/13/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/13/">13</a><span class="page-number current">14</span><a class="page-number" href="/ja/page/15/">15</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/15/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/14/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/14/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/14/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/15/index.html b/ja/page/15/index.html
new file mode 100644
index 0000000000..5e821a6315
--- /dev/null
+++ b/ja/page/15/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/15/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/15/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" class="post-title-link" itemprop="url">架构实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/14/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/14/">14</a><span class="page-number current">15</span><a class="page-number" href="/ja/page/16/">16</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/16/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/15/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/15/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/15/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/16/index.html b/ja/page/16/index.html
new file mode 100644
index 0000000000..d301aafa20
--- /dev/null
+++ b/ja/page/16/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/16/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/16/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/09/http_stub_status_module/" class="post-title-link" itemprop="url">http_stub_status_module Nginx的性能模块</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/15/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/15/">15</a><span class="page-number current">16</span><a class="page-number" href="/ja/page/17/">17</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/17/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/16/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/16/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/16/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/17/index.html b/ja/page/17/index.html
new file mode 100644
index 0000000000..075acd64a0
--- /dev/null
+++ b/ja/page/17/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/17/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/17/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" class="post-title-link" itemprop="url">Hexo在Github发布之后自定义域名的配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/16/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/16/">16</a><span class="page-number current">17</span><a class="page-number" href="/ja/page/18/">18</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/18/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/17/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/17/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/17/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/18/index.html b/ja/page/18/index.html
new file mode 100644
index 0000000000..4d72844796
--- /dev/null
+++ b/ja/page/18/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/18/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/18/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" class="post-title-link" itemprop="url">Nginx指令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/17/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/17/">17</a><span class="page-number current">18</span><a class="page-number" href="/ja/page/19/">19</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/19/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/18/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/18/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/18/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/19/index.html b/ja/page/19/index.html
new file mode 100644
index 0000000000..070afe7bbb
--- /dev/null
+++ b/ja/page/19/index.html
@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/19/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/19/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">Docker 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/18/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/18/">18</a><span class="page-number current">19</span><a class="page-number" href="/ja/page/20/">20</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/20/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/19/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/19/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/19/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/2/index.html b/ja/page/2/index.html
new file mode 100644
index 0000000000..d078223394
--- /dev/null
+++ b/ja/page/2/index.html
@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" class="post-title-link" itemprop="url">無題</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="page-number current">2</span><a class="page-number" href="/ja/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/3/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/20/index.html b/ja/page/20/index.html
new file mode 100644
index 0000000000..d6b58d3509
--- /dev/null
+++ b/ja/page/20/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" class="post-title-link" itemprop="url">Docker网络模式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/19/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/19/">19</a><span class="page-number current">20</span><a class="page-number" href="/ja/page/21/">21</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/21/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/20/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/20/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/20/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/21/index.html b/ja/page/21/index.html
new file mode 100644
index 0000000000..e784277f41
--- /dev/null
+++ b/ja/page/21/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/21/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/21/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" class="post-title-link" itemprop="url">Docker容器端口映射</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/20/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/20/">20</a><span class="page-number current">21</span><a class="page-number" href="/ja/page/22/">22</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/22/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/21/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/21/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/21/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/22/index.html b/ja/page/22/index.html
new file mode 100644
index 0000000000..5e7153b1c2
--- /dev/null
+++ b/ja/page/22/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/22/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/22/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" class="post-title-link" itemprop="url">Docker数据卷</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/21/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/21/">21</a><span class="page-number current">22</span><a class="page-number" href="/ja/page/23/">23</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/23/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/22/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/22/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/22/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/23/index.html b/ja/page/23/index.html
new file mode 100644
index 0000000000..d3b7dece50
--- /dev/null
+++ b/ja/page/23/index.html
@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/23/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/23/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/02/DockerFile/" class="post-title-link" itemprop="url">DockerFile</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/22/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/22/">22</a><span class="page-number current">23</span><a class="page-number" href="/ja/page/24/">24</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/24/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/23/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/23/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/23/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/24/index.html b/ja/page/24/index.html
new file mode 100644
index 0000000000..3a19673c96
--- /dev/null
+++ b/ja/page/24/index.html
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/24/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/24/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/GIT%20Standard/" class="post-title-link" itemprop="url">GIT Standard.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/23/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/23/">23</a><span class="page-number current">24</span><a class="page-number" href="/ja/page/25/">25</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/25/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/24/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/24/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/24/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/25/index.html b/ja/page/25/index.html
new file mode 100644
index 0000000000..5616624613
--- /dev/null
+++ b/ja/page/25/index.html
@@ -0,0 +1,736 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/25/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/25/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Restful API 的设计规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/24/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/24/">24</a><span class="page-number current">25</span><a class="page-number" href="/ja/page/26/">26</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/26/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/25/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/25/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/25/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/26/index.html b/ja/page/26/index.html
new file mode 100644
index 0000000000..c26f7a6bdc
--- /dev/null
+++ b/ja/page/26/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/26/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/26/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">CodeReview代码审查指南.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/25/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/25/">25</a><span class="page-number current">26</span><a class="page-number" href="/ja/page/27/">27</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/27/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/26/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/26/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/26/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/27/index.html b/ja/page/27/index.html
new file mode 100644
index 0000000000..bdbe5b97b8
--- /dev/null
+++ b/ja/page/27/index.html
@@ -0,0 +1,570 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/27/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/27/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">前后端分离开发规范</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/26/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/26/">26</a><span class="page-number current">27</span><a class="page-number" href="/ja/page/28/">28</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/28/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/27/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/27/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/27/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/28/index.html b/ja/page/28/index.html
new file mode 100644
index 0000000000..3f4e42f872
--- /dev/null
+++ b/ja/page/28/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/28/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/28/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">前后端分离开发指南</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/27/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/27/">27</a><span class="page-number current">28</span><a class="page-number" href="/ja/page/29/">29</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/29/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/28/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/28/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/28/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/29/index.html b/ja/page/29/index.html
new file mode 100644
index 0000000000..86cc890e01
--- /dev/null
+++ b/ja/page/29/index.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/29/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/29/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Electron编码规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/28/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/28/">28</a><span class="page-number current">29</span><a class="page-number" href="/ja/page/30/">30</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/30/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/29/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/29/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/29/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/3/index.html b/ja/page/3/index.html
new file mode 100644
index 0000000000..ee94aa1506
--- /dev/null
+++ b/ja/page/3/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/2/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><a class="page-number" href="/ja/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/ja/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/4/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/30/index.html b/ja/page/30/index.html
new file mode 100644
index 0000000000..56041240ae
--- /dev/null
+++ b/ja/page/30/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/30/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/30/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/squid/" class="post-title-link" itemprop="url">Squid 服务器学习笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/29/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/29/">29</a><span class="page-number current">30</span><a class="page-number" href="/ja/page/31/">31</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/31/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/30/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/30/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/30/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/31/index.html b/ja/page/31/index.html
new file mode 100644
index 0000000000..a1d52bcb1d
--- /dev/null
+++ b/ja/page/31/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/31/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/31/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" class="post-title-link" itemprop="url">前端开发插件</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/30/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/30/">30</a><span class="page-number current">31</span><a class="page-number" href="/ja/page/32/">32</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/32/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/31/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/31/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/31/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/32/index.html b/ja/page/32/index.html
new file mode 100644
index 0000000000..977951ddfe
--- /dev/null
+++ b/ja/page/32/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/32/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/32/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" class="post-title-link" itemprop="url">搞懂EventLoop</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2022/03/11/%E6%90%9E%E6%87%82EventLoop/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/31/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/31/">31</a><span class="page-number current">32</span><a class="page-number" href="/ja/page/33/">33</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/33/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/32/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/32/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/32/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/33/index.html b/ja/page/33/index.html
new file mode 100644
index 0000000000..aff04b8173
--- /dev/null
+++ b/ja/page/33/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/33/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/33/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" class="post-title-link" itemprop="url">数组方法哪些有副作用，一目了然！</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/32/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/32/">32</a><span class="page-number current">33</span><a class="page-number" href="/ja/page/34/">34</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/34/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/33/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/33/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/33/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/34/index.html b/ja/page/34/index.html
new file mode 100644
index 0000000000..7aad801757
--- /dev/null
+++ b/ja/page/34/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/34/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/34/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" class="post-title-link" itemprop="url">关于版本管理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/33/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/33/">33</a><span class="page-number current">34</span><a class="page-number" href="/ja/page/35/">35</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/35/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/34/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/34/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/34/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/35/index.html b/ja/page/35/index.html
new file mode 100644
index 0000000000..6705169f96
--- /dev/null
+++ b/ja/page/35/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/35/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/35/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/34/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/34/">34</a><span class="page-number current">35</span><a class="page-number" href="/ja/page/36/">36</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/36/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/35/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/35/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/35/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/36/index.html b/ja/page/36/index.html
new file mode 100644
index 0000000000..f66b9a3c55
--- /dev/null
+++ b/ja/page/36/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/36/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/36/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/11/11/learn-ionic-1/" class="post-title-link" itemprop="url">从零开始：学习Ionic（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/11/11/learn-ionic-1/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/35/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/35/">35</a><span class="page-number current">36</span><a class="page-number" href="/ja/page/37/">37</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/37/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/36/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/36/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/36/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/37/index.html b/ja/page/37/index.html
new file mode 100644
index 0000000000..d76a911105
--- /dev/null
+++ b/ja/page/37/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/37/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/37/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/11/10/learn-cordova-1/" class="post-title-link" itemprop="url">从零开始：学习Cordova（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/11/10/learn-cordova-1/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/36/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/36/">36</a><span class="page-number current">37</span><a class="page-number" href="/ja/page/38/">38</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/38/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/37/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/37/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/37/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/38/index.html b/ja/page/38/index.html
new file mode 100644
index 0000000000..dfc753a82a
--- /dev/null
+++ b/ja/page/38/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/38/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/38/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/11/10/learn-go/" class="post-title-link" itemprop="url">从零开始：学习Go（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/11/10/learn-go/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/37/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/37/">37</a><span class="page-number current">38</span><a class="page-number" href="/ja/page/39/">39</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/39/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/38/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/38/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/38/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/39/index.html b/ja/page/39/index.html
new file mode 100644
index 0000000000..a5e7392175
--- /dev/null
+++ b/ja/page/39/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/39/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/39/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" class="post-title-link" itemprop="url">Linux目录说明</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/38/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/38/">38</a><span class="page-number current">39</span><a class="page-number" href="/ja/page/40/">40</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/40/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/39/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/39/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/39/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/4/index.html b/ja/page/4/index.html
new file mode 100644
index 0000000000..c9542739dc
--- /dev/null
+++ b/ja/page/4/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">Postgresql绿色版使用</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/3/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/ja/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/5/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/40/index.html b/ja/page/40/index.html
new file mode 100644
index 0000000000..5a6c9578a6
--- /dev/null
+++ b/ja/page/40/index.html
@@ -0,0 +1,576 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/40/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/40/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">rpm命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/39/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/39/">39</a><span class="page-number current">40</span><a class="page-number" href="/ja/page/41/">41</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/41/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/40/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/40/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/40/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/41/index.html b/ja/page/41/index.html
new file mode 100644
index 0000000000..e836a4dd46
--- /dev/null
+++ b/ja/page/41/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/41/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/41/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/05/28/Prettier-Setting/" class="post-title-link" itemprop="url">Prettier格式化配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/05/28/Prettier-Setting/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/40/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/40/">40</a><span class="page-number current">41</span><a class="page-number" href="/ja/page/42/">42</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/42/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/41/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/41/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/41/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/42/index.html b/ja/page/42/index.html
new file mode 100644
index 0000000000..b312e5f0fd
--- /dev/null
+++ b/ja/page/42/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/42/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/42/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/05/14/css3-pointer-events/" class="post-title-link" itemprop="url">CSS3新属性-pointer-events</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/05/14/css3-pointer-events/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/41/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/41/">41</a><span class="page-number current">42</span><a class="page-number" href="/ja/page/43/">43</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/43/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/42/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/42/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/42/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/43/index.html b/ja/page/43/index.html
new file mode 100644
index 0000000000..c0c8632bb4
--- /dev/null
+++ b/ja/page/43/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/43/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/43/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/16/what-is-npx/" class="post-title-link" itemprop="url">npx是什么</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/16/what-is-npx/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/42/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/42/">42</a><span class="page-number current">43</span><a class="page-number" href="/ja/page/44/">44</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/44/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/43/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/43/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/43/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/44/index.html b/ja/page/44/index.html
new file mode 100644
index 0000000000..86a87e265b
--- /dev/null
+++ b/ja/page/44/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/44/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/44/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/16/0-vuecli-3-component/" class="post-title-link" itemprop="url">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/16/0-vuecli-3-component/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/43/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/43/">43</a><span class="page-number current">44</span><a class="page-number" href="/ja/page/45/">45</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/45/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/44/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/44/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/44/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/45/index.html b/ja/page/45/index.html
new file mode 100644
index 0000000000..163a0eb343
--- /dev/null
+++ b/ja/page/45/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/45/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/45/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/15/node-sass-slow-problem/" class="post-title-link" itemprop="url">如何解决npm安装node-sass依赖慢的情况</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/15/node-sass-slow-problem/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/44/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/44/">44</a><span class="page-number current">45</span><a class="page-number" href="/ja/page/46/">46</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/46/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/45/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/45/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/45/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/46/index.html b/ja/page/46/index.html
new file mode 100644
index 0000000000..fdc37a5413
--- /dev/null
+++ b/ja/page/46/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/46/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/46/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/15/talk-about-full-stack-big-fd/" class="post-title-link" itemprop="url">前端全栈和大前端有啥区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-04-15 15:59:00 / 修正日：15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/15/talk-about-full-stack-big-fd/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/45/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/45/">45</a><span class="page-number current">46</span><a class="page-number" href="/ja/page/47/">47</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/47/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/46/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/46/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/46/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/47/index.html b/ja/page/47/index.html
new file mode 100644
index 0000000000..ee704f1bfe
--- /dev/null
+++ b/ja/page/47/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/47/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/47/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/07/Electron-Offline-Build/" class="post-title-link" itemprop="url">国内配置Electron开发环境的正确方式【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/07/Electron-Offline-Build/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/46/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/46/">46</a><span class="page-number current">47</span><a class="page-number" href="/ja/page/48/">48</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/48/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/47/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/47/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/47/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/48/index.html b/ja/page/48/index.html
new file mode 100644
index 0000000000..9394f681e9
--- /dev/null
+++ b/ja/page/48/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/48/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/48/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/07/webpack-uglifyjsplugin/" class="post-title-link" itemprop="url">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/07/webpack-uglifyjsplugin/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/47/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/47/">47</a><span class="page-number current">48</span><a class="page-number" href="/ja/page/49/">49</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/49/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/48/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/48/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/48/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/49/index.html b/ja/page/49/index.html
new file mode 100644
index 0000000000..8f516f8f3f
--- /dev/null
+++ b/ja/page/49/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/49/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/49/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/04/03/source-code-react-diff/" class="post-title-link" itemprop="url">React 源码剖析系列 － 不可思议的 react diff【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/04/03/source-code-react-diff/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/48/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/48/">48</a><span class="page-number current">49</span><a class="page-number" href="/ja/page/50/">50</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/50/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/49/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/49/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/49/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/5/index.html b/ja/page/5/index.html
new file mode 100644
index 0000000000..7ca5745d30
--- /dev/null
+++ b/ja/page/5/index.html
@@ -0,0 +1,565 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" class="post-title-link" itemprop="url">Nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/4/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/ja/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/6/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/50/index.html b/ja/page/50/index.html
new file mode 100644
index 0000000000..a51b22a4a8
--- /dev/null
+++ b/ja/page/50/index.html
@@ -0,0 +1,784 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/50/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/50/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/webpack-learning-1/" class="post-title-link" itemprop="url">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/49/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/49/">49</a><span class="page-number current">50</span><a class="page-number" href="/ja/page/51/">51</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/51/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/50/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/50/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/50/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/51/index.html b/ja/page/51/index.html
new file mode 100644
index 0000000000..a3eec84141
--- /dev/null
+++ b/ja/page/51/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/51/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/51/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-call-apply/" class="post-title-link" itemprop="url">自己动手实现系列 ---- call、apply、bind</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/50/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/50/">50</a><span class="page-number current">51</span><a class="page-number" href="/ja/page/52/">52</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/52/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/51/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/51/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/51/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/52/index.html b/ja/page/52/index.html
new file mode 100644
index 0000000000..e6e0438b1a
--- /dev/null
+++ b/ja/page/52/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/52/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/52/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-async-await/" class="post-title-link" itemprop="url">自己动手实现系列 ---- async、await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/51/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/51/">51</a><span class="page-number current">52</span><a class="page-number" href="/ja/page/53/">53</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/53/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/52/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/52/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/52/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/53/index.html b/ja/page/53/index.html
new file mode 100644
index 0000000000..2f6161fa63
--- /dev/null
+++ b/ja/page/53/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/53/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/53/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-EventEmitter/" class="post-title-link" itemprop="url">自己动手实现系列 ---- EventEmitter(事件触发器)</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/52/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/52/">52</a><span class="page-number current">53</span><a class="page-number" href="/ja/page/54/">54</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/54/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/53/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/53/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/53/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/54/index.html b/ja/page/54/index.html
new file mode 100644
index 0000000000..a29dca1a2f
--- /dev/null
+++ b/ja/page/54/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/54/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/54/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Vue双向绑定</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/53/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/53/">53</a><span class="page-number current">54</span><a class="page-number" href="/ja/page/55/">55</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/55/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/54/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/54/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/54/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/55/index.html b/ja/page/55/index.html
new file mode 100644
index 0000000000..6be2a8988d
--- /dev/null
+++ b/ja/page/55/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/55/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/55/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-map/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.map()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/54/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/54/">54</a><span class="page-number current">55</span><a class="page-number" href="/ja/page/56/">56</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/56/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/55/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/55/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/55/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/56/index.html b/ja/page/56/index.html
new file mode 100644
index 0000000000..5189673d1b
--- /dev/null
+++ b/ja/page/56/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/56/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/56/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-create/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Object.create()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/55/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/55/">55</a><span class="page-number current">56</span><a class="page-number" href="/ja/page/57/">57</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/57/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/56/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/56/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/56/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/57/index.html b/ja/page/57/index.html
new file mode 100644
index 0000000000..cb32356f60
--- /dev/null
+++ b/ja/page/57/index.html
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/57/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/57/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" class="post-title-link" itemprop="url">自己动手实现系列 ---- 事件代理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/56/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/56/">56</a><span class="page-number current">57</span><a class="page-number" href="/ja/page/58/">58</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/58/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/57/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/57/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/57/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/58/index.html b/ja/page/58/index.html
new file mode 100644
index 0000000000..b9c0809d4c
--- /dev/null
+++ b/ja/page/58/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/58/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/58/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-flat/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.flat()函数</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/57/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/57/">57</a><span class="page-number current">58</span><a class="page-number" href="/ja/page/59/">59</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/59/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/58/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/58/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/58/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/59/index.html b/ja/page/59/index.html
new file mode 100644
index 0000000000..bfff706568
--- /dev/null
+++ b/ja/page/59/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/59/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/59/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-isArray/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.isArray</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/58/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/58/">58</a><span class="page-number current">59</span><a class="page-number" href="/ja/page/60/">60</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/60/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/59/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/59/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/59/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/6/index.html b/ja/page/6/index.html
new file mode 100644
index 0000000000..6553956dc5
--- /dev/null
+++ b/ja/page/6/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/5/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/ja/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/7/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/60/index.html b/ja/page/60/index.html
new file mode 100644
index 0000000000..86b03b0589
--- /dev/null
+++ b/ja/page/60/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/60/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/60/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-new/" class="post-title-link" itemprop="url">自己动手实现系列 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/59/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/59/">59</a><span class="page-number current">60</span><a class="page-number" href="/ja/page/61/">61</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/61/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/60/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/60/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/60/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/61/index.html b/ja/page/61/index.html
new file mode 100644
index 0000000000..ba5a3c9b63
--- /dev/null
+++ b/ja/page/61/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/61/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/61/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/24/do-it-yourselfery-reduce/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/60/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/60/">60</a><span class="page-number current">61</span><a class="page-number" href="/ja/page/62/">62</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/62/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/61/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/61/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/61/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/62/index.html b/ja/page/62/index.html
new file mode 100644
index 0000000000..a953162a55
--- /dev/null
+++ b/ja/page/62/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/62/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/62/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/23/path-join-vs-path-resolve/" class="post-title-link" itemprop="url">path.join 与 path.resolve 的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/61/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/61/">61</a><span class="page-number current">62</span><a class="page-number" href="/ja/page/63/">63</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/63/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/62/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/62/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/62/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/63/index.html b/ja/page/63/index.html
new file mode 100644
index 0000000000..14cd65b14b
--- /dev/null
+++ b/ja/page/63/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/63/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/63/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" class="post-title-link" itemprop="url">使用阿里镜像加速brew（转载）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/62/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/62/">62</a><span class="page-number current">63</span><a class="page-number" href="/ja/page/64/">64</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/64/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/63/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/63/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/63/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/64/index.html b/ja/page/64/index.html
new file mode 100644
index 0000000000..3d3faf193a
--- /dev/null
+++ b/ja/page/64/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/64/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/64/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/24/Vue-plug-in-development/" class="post-title-link" itemprop="url">vue插件开发（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/63/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/63/">63</a><span class="page-number current">64</span><a class="page-number" href="/ja/page/65/">65</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/65/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/64/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/64/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/64/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/65/index.html b/ja/page/65/index.html
new file mode 100644
index 0000000000..228fc8b96e
--- /dev/null
+++ b/ja/page/65/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/65/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/65/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/23/V8-engine-memory-management-and-optimization/" class="post-title-link" itemprop="url">v8引擎如何回收内存（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-02-23 08:00:00 / 修正日：07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/64/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/64/">64</a><span class="page-number current">65</span><a class="page-number" href="/ja/page/66/">66</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/66/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/65/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/65/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/65/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/66/index.html b/ja/page/66/index.html
new file mode 100644
index 0000000000..d9c7ce134b
--- /dev/null
+++ b/ja/page/66/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/66/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/66/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/21/Implementation-of-the-vue-response-principle/" class="post-title-link" itemprop="url">Vue 响应式原理的实现（课程笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/65/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/65/">65</a><span class="page-number current">66</span><a class="page-number" href="/ja/page/67/">67</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/67/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/66/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/66/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/66/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/67/index.html b/ja/page/67/index.html
new file mode 100644
index 0000000000..ebab709770
--- /dev/null
+++ b/ja/page/67/index.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/67/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/67/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/19/develop-custom-cli-tools-using-node/" class="post-title-link" itemprop="url">使用node开发自定义cli工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/66/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/66/">66</a><span class="page-number current">67</span><a class="page-number" href="/ja/page/68/">68</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/68/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/67/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/67/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/67/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/68/index.html b/ja/page/68/index.html
new file mode 100644
index 0000000000..8ac25004d4
--- /dev/null
+++ b/ja/page/68/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/68/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/68/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/12/vue-proxyTable-problem/" class="post-title-link" itemprop="url">Could not proxy request XXX from localhost:8080 to localhost:8081</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/67/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/67/">67</a><span class="page-number current">68</span><a class="page-number" href="/ja/page/69/">69</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/69/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/68/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/68/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/68/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/69/index.html b/ja/page/69/index.html
new file mode 100644
index 0000000000..2c5aac17ae
--- /dev/null
+++ b/ja/page/69/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/69/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/69/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/12/print-table-problem/" class="post-title-link" itemprop="url">由打印引起的一点小问题，写table时别忘了写thead和tbody</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/68/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/68/">68</a><span class="page-number current">69</span><a class="page-number" href="/ja/page/70/">70</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/70/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/69/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/69/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/69/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/7/index.html b/ja/page/7/index.html
new file mode 100644
index 0000000000..df16f6e742
--- /dev/null
+++ b/ja/page/7/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/Oracle-Linux-install-Docker/" class="post-title-link" itemprop="url">在 Oracle Linux 中安装 Docker</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/6/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/ja/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/8/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/70/index.html b/ja/page/70/index.html
new file mode 100644
index 0000000000..3d4deae5e4
--- /dev/null
+++ b/ja/page/70/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/70/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/70/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/11/restful-architecture/" class="post-title-link" itemprop="url">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/69/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/69/">69</a><span class="page-number current">70</span><a class="page-number" href="/ja/page/71/">71</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/71/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/70/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/70/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/70/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/71/index.html b/ja/page/71/index.html
new file mode 100644
index 0000000000..2f53d464dd
--- /dev/null
+++ b/ja/page/71/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/71/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/71/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/02/11/SSR/" class="post-title-link" itemprop="url">SSR</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/02/11/SSR/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/70/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/70/">70</a><span class="page-number current">71</span><a class="page-number" href="/ja/page/72/">72</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/72/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/71/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/71/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/71/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/72/index.html b/ja/page/72/index.html
new file mode 100644
index 0000000000..72dc4da7f4
--- /dev/null
+++ b/ja/page/72/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/72/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/72/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/22/FE-guide-safe/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/22/FE-guide-safe/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/71/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/71/">71</a><span class="page-number current">72</span><a class="page-number" href="/ja/page/73/">73</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/73/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/72/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/72/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/72/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/73/index.html b/ja/page/73/index.html
new file mode 100644
index 0000000000..4ce5b58c20
--- /dev/null
+++ b/ja/page/73/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/73/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/73/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/22/Wepack-Tips/" class="post-title-link" itemprop="url">webpack中loader和plugin之间的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/22/Wepack-Tips/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/72/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/72/">72</a><span class="page-number current">73</span><a class="page-number" href="/ja/page/74/">74</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/74/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/73/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/73/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/73/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/74/index.html b/ja/page/74/index.html
new file mode 100644
index 0000000000..3ded8da175
--- /dev/null
+++ b/ja/page/74/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/74/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/74/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/22/Es6-arrowFunc-arguments/" class="post-title-link" itemprop="url">es6中箭头函数没了arguments怎么办？</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-22 06:50:21 / 修正日：07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/22/Es6-arrowFunc-arguments/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/73/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/73/">73</a><span class="page-number current">74</span><a class="page-number" href="/ja/page/75/">75</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/75/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/74/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/74/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/74/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/75/index.html b/ja/page/75/index.html
new file mode 100644
index 0000000000..a5d7bd8ae4
--- /dev/null
+++ b/ja/page/75/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/75/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/75/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/13/hexo-search/" class="post-title-link" itemprop="url">给我的Hexo博客添加文章内容搜索功能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/13/hexo-search/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/74/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/74/">74</a><span class="page-number current">75</span><a class="page-number" href="/ja/page/76/">76</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/76/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/75/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/75/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/75/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/76/index.html b/ja/page/76/index.html
new file mode 100644
index 0000000000..e8fb3f03dc
--- /dev/null
+++ b/ja/page/76/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/76/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/76/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/13/Javascript-Design-Pattern/" class="post-title-link" itemprop="url">JavaScript 设计模式 Design Pattern</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/13/Javascript-Design-Pattern/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/75/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/75/">75</a><span class="page-number current">76</span><a class="page-number" href="/ja/page/77/">77</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/77/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/76/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/76/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/76/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/77/index.html b/ja/page/77/index.html
new file mode 100644
index 0000000000..ef7f796451
--- /dev/null
+++ b/ja/page/77/index.html
@@ -0,0 +1,580 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/77/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/77/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/13/FE-guide-inherit2/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承类型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/76/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/76/">76</a><span class="page-number current">77</span><a class="page-number" href="/ja/page/78/">78</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/78/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/77/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/77/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/77/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/78/index.html b/ja/page/78/index.html
new file mode 100644
index 0000000000..51e6d0b6e3
--- /dev/null
+++ b/ja/page/78/index.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/78/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/78/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/13/do-it-yourselfery-promise/" class="post-title-link" itemprop="url">自己动手实现系列 ---- promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/77/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/77/">77</a><span class="page-number current">78</span><a class="page-number" href="/ja/page/79/">79</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/79/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/78/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/78/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/78/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/79/index.html b/ja/page/79/index.html
new file mode 100644
index 0000000000..b8c7a3e4cf
--- /dev/null
+++ b/ja/page/79/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/79/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/79/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/09/career/" class="post-title-link" itemprop="url">如何正确使用时间[转载]</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/78/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/78/">78</a><span class="page-number current">79</span><a class="page-number" href="/ja/page/80/">80</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/80/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/79/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/79/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/79/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/8/index.html b/ja/page/8/index.html
new file mode 100644
index 0000000000..9228604c69
--- /dev/null
+++ b/ja/page/8/index.html
@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" class="post-title-link" itemprop="url">服务器高危端口列表</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/7/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/ja/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/9/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/80/index.html b/ja/page/80/index.html
new file mode 100644
index 0000000000..df49949ca8
--- /dev/null
+++ b/ja/page/80/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/09/solve-get-params-so-long-problem/" class="post-title-link" itemprop="url">解决get请求过长的问题小记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/09/solve-get-params-so-long-problem/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/79/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/79/">79</a><span class="page-number current">80</span><a class="page-number" href="/ja/page/81/">81</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/81/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/81/index.html b/ja/page/81/index.html
new file mode 100644
index 0000000000..2bad554f16
--- /dev/null
+++ b/ja/page/81/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/81/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/81/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/09/do-it-yourselfery-jsonp/" class="post-title-link" itemprop="url">自己动手实现系列 ---- jsonp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/80/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/80/">80</a><span class="page-number current">81</span><a class="page-number" href="/ja/page/82/">82</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/82/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/81/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/81/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/81/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/82/index.html b/ja/page/82/index.html
new file mode 100644
index 0000000000..57fd055f04
--- /dev/null
+++ b/ja/page/82/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/82/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/82/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/09/FE-guide-data-structure/" class="post-title-link" itemprop="url">计算机通识 ---- 数据结构</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/81/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/81/">81</a><span class="page-number current">82</span><a class="page-number" href="/ja/page/83/">83</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/83/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/82/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/82/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/82/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/83/index.html b/ja/page/83/index.html
new file mode 100644
index 0000000000..3c9363aafe
--- /dev/null
+++ b/ja/page/83/index.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/09/FE-guide-Net/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/82/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/82/">82</a><span class="page-number current">83</span><a class="page-number" href="/ja/page/84/">84</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/84/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/84/index.html b/ja/page/84/index.html
new file mode 100644
index 0000000000..87db48d78a
--- /dev/null
+++ b/ja/page/84/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/05/FE-guide-vuepress/" class="post-title-link" itemprop="url">介绍一个好用的doc展示库 ---- vuepress</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/ja/2020/01/05/FE-guide-vuepress/#more" rel="contents">
+                続きを読む &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/83/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/83/">83</a><span class="page-number current">84</span><a class="page-number" href="/ja/page/85/">85</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/85/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/85/index.html b/ja/page/85/index.html
new file mode 100644
index 0000000000..fb766b9369
--- /dev/null
+++ b/ja/page/85/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/05/FE-guide-currying/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 柯里化 currying</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/84/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/84/">84</a><span class="page-number current">85</span><a class="page-number" href="/ja/page/86/">86</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/86/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/85/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/85/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/85/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/86/index.html b/ja/page/86/index.html
new file mode 100644
index 0000000000..51ccb1b2a5
--- /dev/null
+++ b/ja/page/86/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/05/FE-guide-about-reduce/" class="post-title-link" itemprop="url">reduce函数的妙用 ---- 实现map和filter</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-05 08:55:00 / 修正日：08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/85/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/85/">85</a><span class="page-number current">86</span><a class="page-number" href="/ja/page/87/">87</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/87/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/87/index.html b/ja/page/87/index.html
new file mode 100644
index 0000000000..b404b86064
--- /dev/null
+++ b/ja/page/87/index.html
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/05/FE-guide-ArrayOprs/" class="post-title-link" itemprop="url">数组常见操作 ---- 去重、扁平、取最大最小值</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-05 03:05:00 / 修正日：07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/86/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/86/">86</a><span class="page-number current">87</span><a class="page-number" href="/ja/page/88/">88</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/88/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/88/index.html b/ja/page/88/index.html
new file mode 100644
index 0000000000..3ff2f4c6fb
--- /dev/null
+++ b/ja/page/88/index.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/04/Algorithm/" class="post-title-link" itemprop="url">JavaScript实现经典排序算法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/87/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/87/">87</a><span class="page-number current">88</span><a class="page-number" href="/ja/page/89/">89</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/89/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/89/index.html b/ja/page/89/index.html
new file mode 100644
index 0000000000..f1a60b2afd
--- /dev/null
+++ b/ja/page/89/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-store/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 浏览器存储</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/88/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/88/">88</a><span class="page-number current">89</span><a class="page-number" href="/ja/page/90/">90</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/90/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/89/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/89/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/89/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/9/index.html b/ja/page/9/index.html
new file mode 100644
index 0000000000..743b799eb1
--- /dev/null
+++ b/ja/page/9/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">systemctl 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/8/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/ja/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/10/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/90/index.html b/ja/page/90/index.html
new file mode 100644
index 0000000000..5547249656
--- /dev/null
+++ b/ja/page/90/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/90/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/90/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" class="post-title-link" itemprop="url">为什么 0.1 + 0.2 != 0.3</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+              
+
+              <time title="作成日：2020-01-03 04:10:00 / 修正日：04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/89/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/89/">89</a><span class="page-number current">90</span><a class="page-number" href="/ja/page/91/">91</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/91/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/90/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/90/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/90/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/91/index.html b/ja/page/91/index.html
new file mode 100644
index 0000000000..a28e98a1bf
--- /dev/null
+++ b/ja/page/91/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-async-Proxy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Proxy</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/90/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/90/">90</a><span class="page-number current">91</span><a class="page-number" href="/ja/page/92/">92</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/92/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/92/index.html b/ja/page/92/index.html
new file mode 100644
index 0000000000..f93da92917
--- /dev/null
+++ b/ja/page/92/index.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/92/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/92/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-async-await/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- async 和 await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/91/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/91/">91</a><span class="page-number current">92</span><a class="page-number" href="/ja/page/93/">93</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/93/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/92/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/92/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/92/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/93/index.html b/ja/page/93/index.html
new file mode 100644
index 0000000000..e90c534fe2
--- /dev/null
+++ b/ja/page/93/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-Map-FlatMap-Reduce/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/92/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/92/">92</a><span class="page-number current">93</span><a class="page-number" href="/ja/page/94/">94</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/94/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/93/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/93/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/93/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/94/index.html b/ja/page/94/index.html
new file mode 100644
index 0000000000..ace4a1b696
--- /dev/null
+++ b/ja/page/94/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/94/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/94/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-Generator/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Generator 生成器</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/93/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/93/">93</a><span class="page-number current">94</span><a class="page-number" href="/ja/page/95/">95</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/95/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/94/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/94/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/94/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/95/index.html b/ja/page/95/index.html
new file mode 100644
index 0000000000..756a8d2f33
--- /dev/null
+++ b/ja/page/95/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/95/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/95/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-Promise/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/94/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/94/">94</a><span class="page-number current">95</span><a class="page-number" href="/ja/page/96/">96</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/96/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/95/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/95/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/95/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/96/index.html b/ja/page/96/index.html
new file mode 100644
index 0000000000..ce55cd67f4
--- /dev/null
+++ b/ja/page/96/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-call-apply-bind/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- call, apply, bind 区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/95/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/95/">95</a><span class="page-number current">96</span><a class="page-number" href="/ja/page/97/">97</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/97/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/97/index.html b/ja/page/97/index.html
new file mode 100644
index 0000000000..22faa02f17
--- /dev/null
+++ b/ja/page/97/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-inherit/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/96/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/96/">96</a><span class="page-number current">97</span><a class="page-number" href="/ja/page/98/">98</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/98/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/98/index.html b/ja/page/98/index.html
new file mode 100644
index 0000000000..a156abda21
--- /dev/null
+++ b/ja/page/98/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-debounce-throttle/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 函数防抖和节流</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/97/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/97/">97</a><span class="page-number current">98</span><a class="page-number" href="/ja/page/99/">99</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/99/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/page/99/index.html b/ja/page/99/index.html
new file mode 100644
index 0000000000..d7efd8b375
--- /dev/null
+++ b/ja/page/99/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/ja/page/99/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/page/99/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/ja/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/ja/2020/01/03/FE-guide-Module/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 模块化</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">投稿日</span>
+
+              <time title="作成日：2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">編集日</span>
+                <time title="修正日：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">カテゴリ</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  、
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/ja/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/ja/page/98/"><i class="fa fa-angle-left" aria-label="前のページ"></i></a><a class="page-number" href="/ja/">1</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/98/">98</a><span class="page-number current">99</span><a class="page-number" href="/ja/page/100/">100</a><span class="space">&hellip;</span><a class="page-number" href="/ja/page/128/">128</a><a class="extend next" rel="next" href="/ja/page/100/"><i class="fa fa-angle-right" aria-label="次のページ"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/page/99/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/99/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/99/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/ja/tags/index.html b/ja/tags/index.html
new file mode 100644
index 0000000000..bad5dbe6fe
--- /dev/null
+++ b/ja/tags/index.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="标签">
+<meta property="og:url" content="https://blog.lifesli.com/ja/tags/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="ja_JP">
+<meta property="article:published_time" content="2017-08-29T09:59:00.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:17.041Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/ja/tags/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'ja'
+  };
+</script>
+
+  <title>标签 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="ja">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">标签
+</h1>
+
+<div class="post-meta">
+  
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>TAGS</li>
+        
+  </ul>
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="tag-cloud">
+            <div class="tag-cloud-title">
+              全 90 タグ
+            </div>
+            <div class="tag-cloud-tags">
+              <a href="/tags/Actions/" style="font-size: 12px; color: #ccc">Actions</a> <a href="/tags/CI-CD/" style="font-size: 12px; color: #ccc">CI/CD</a> <a href="/tags/CSS/" style="font-size: 12px; color: #ccc">CSS</a> <a href="/tags/CSS3/" style="font-size: 12px; color: #ccc">CSS3</a> <a href="/tags/CSS%E6%8A%80%E5%B7%A7/" style="font-size: 12px; color: #ccc">CSS技巧</a> <a href="/tags/CodeReview/" style="font-size: 12px; color: #ccc">CodeReview</a> <a href="/tags/Cordova/" style="font-size: 12px; color: #ccc">Cordova</a> <a href="/tags/Docker/" style="font-size: 15px; color: #adadad">Docker</a> <a href="/tags/Docker-Compose/" style="font-size: 12px; color: #ccc">Docker Compose</a> <a href="/tags/DockerFile/" style="font-size: 12px; color: #ccc">DockerFile</a> <a href="/tags/ESLint/" style="font-size: 12px; color: #ccc">ESLint</a> <a href="/tags/Electron/" style="font-size: 15px; color: #adadad">Electron</a> <a href="/tags/EventLoop/" style="font-size: 12px; color: #ccc">EventLoop</a> <a href="/tags/GIT/" style="font-size: 12px; color: #ccc">GIT</a> <a href="/tags/Git/" style="font-size: 12px; color: #ccc">Git</a> <a href="/tags/GitLab/" style="font-size: 12px; color: #ccc">GitLab</a> <a href="/tags/Github/" style="font-size: 12px; color: #ccc">Github</a> <a href="/tags/Go%E8%AF%AD%E8%A8%80/" style="font-size: 12px; color: #ccc">Go语言</a> <a href="/tags/Hexo/" style="font-size: 21px; color: #6f6f6f">Hexo</a> <a href="/tags/HomeBrew/" style="font-size: 12px; color: #ccc">HomeBrew</a> <a href="/tags/Ionic/" style="font-size: 12px; color: #ccc">Ionic</a> <a href="/tags/Linux/" style="font-size: 12px; color: #ccc">Linux</a> <a href="/tags/Mac/" style="font-size: 12px; color: #ccc">Mac</a> <a href="/tags/Nginx/" style="font-size: 15px; color: #adadad">Nginx</a> <a href="/tags/NodeJS/" style="font-size: 18px; color: #8e8e8e">NodeJS</a> <a href="/tags/Postgresql/" style="font-size: 12px; color: #ccc">Postgresql</a> <a href="/tags/Prettier/" style="font-size: 12px; color: #ccc">Prettier</a> <a href="/tags/RESTful/" style="font-size: 12px; color: #ccc">RESTful</a> <a href="/tags/RPM/" style="font-size: 12px; color: #ccc">RPM</a> <a href="/tags/React/" style="font-size: 12px; color: #ccc">React</a> <a href="/tags/Restful-API/" style="font-size: 12px; color: #ccc">Restful API</a> <a href="/tags/SSR/" style="font-size: 12px; color: #ccc">SSR</a> <a href="/tags/SemVer/" style="font-size: 12px; color: #ccc">SemVer</a> <a href="/tags/Squid/" style="font-size: 12px; color: #ccc">Squid</a> <a href="/tags/Timeout/" style="font-size: 12px; color: #ccc">Timeout</a> <a href="/tags/UglifyJsPlugin/" style="font-size: 12px; color: #ccc">UglifyJsPlugin</a> <a href="/tags/VSCode/" style="font-size: 12px; color: #ccc">VSCode</a> <a href="/tags/VSCode%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">VSCode插件</a> <a href="/tags/Vue/" style="font-size: 18px; color: #8e8e8e">Vue</a> <a href="/tags/Webpack/" style="font-size: 12px; color: #ccc">Webpack</a> <a href="/tags/ajax/" style="font-size: 12px; color: #ccc">ajax</a> <a href="/tags/es6/" style="font-size: 12px; color: #ccc">es6</a> <a href="/tags/get/" style="font-size: 12px; color: #ccc">get</a> <a href="/tags/jsonp/" style="font-size: 12px; color: #ccc">jsonp</a> <a href="/tags/kernel/" style="font-size: 12px; color: #ccc">kernel</a> <a href="/tags/npm/" style="font-size: 12px; color: #ccc">npm</a> <a href="/tags/npx/" style="font-size: 12px; color: #ccc">npx</a> <a href="/tags/path-intellisense/" style="font-size: 12px; color: #ccc">path-intellisense</a> <a href="/tags/port/" style="font-size: 12px; color: #ccc">port</a> <a href="/tags/promise/" style="font-size: 12px; color: #ccc">promise</a> <a href="/tags/registry/" style="font-size: 12px; color: #ccc">registry</a> <a href="/tags/rnpm/" style="font-size: 12px; color: #ccc">rnpm</a> <a href="/tags/sass/" style="font-size: 12px; color: #ccc">sass</a> <a href="/tags/scp/" style="font-size: 12px; color: #ccc">scp</a> <a href="/tags/systemctl/" style="font-size: 12px; color: #ccc">systemctl</a> <a href="/tags/vuepress/" style="font-size: 12px; color: #ccc">vuepress</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" style="font-size: 12px; color: #ccc">事件驱动</a> <a href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">兼容性问题</a> <a href="/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" style="font-size: 12px; color: #ccc">内存回收</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" style="font-size: 12px; color: #ccc">前后端分离开发指南</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" style="font-size: 12px; color: #ccc">前后端分离开发规范</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">前端开发插件</a> <a href="/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" style="font-size: 12px; color: #ccc">同构技术</a> <a href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">奇怪问题</a> <a href="/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" style="font-size: 12px; color: #ccc">容器端口映射</a> <a href="/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" style="font-size: 12px; color: #ccc">年终总结</a> <a href="/tags/%E5%BE%AE%E4%BF%A1/" style="font-size: 12px; color: #ccc">微信</a> <a href="/tags/%E6%89%93%E5%8C%85/" style="font-size: 12px; color: #ccc">打包</a> <a href="/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" style="font-size: 12px; color: #ccc">排序算法</a> <a href="/tags/%E6%8F%92%E4%BB%B6/" style="font-size: 15px; color: #adadad">插件</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" style="font-size: 12px; color: #ccc">数据卷</a> <a href="/tags/%E6%95%B0%E7%BB%84/" style="font-size: 12px; color: #ccc">数组</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" style="font-size: 12px; color: #ccc">服务端渲染</a> <a href="/tags/%E6%9E%B6%E6%9E%84/" style="font-size: 12px; color: #ccc">架构</a> <a href="/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" style="font-size: 12px; color: #ccc">海外提速</a> <a href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" style="font-size: 12px; color: #ccc">源码解析</a> <a href="/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" style="font-size: 12px; color: #ccc">版本管理</a> <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" style="font-size: 24px; color: #4f4f4f">知识点</a> <a href="/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" style="font-size: 12px; color: #ccc">组件通信</a> <a href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" style="font-size: 15px; color: #adadad">经验之谈</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 15px; color: #adadad">网络安全</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">网络模式</a> <a href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" style="font-size: 12px; color: #ccc">脚手架</a> <a href="/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" style="font-size: 12px; color: #ccc">自动构建</a> <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" style="font-size: 27px; color: #303030">自己动手实现系列</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">设计模式</a> <a href="/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" style="font-size: 12px; color: #ccc">超时设置</a> <a href="/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" style="font-size: 12px; color: #ccc">路径别名</a> <a href="/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" style="font-size: 12px; color: #ccc">镜像安全</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 30px; color: #111">面试</a>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+  <ul class="breadcrumb">
+          
+            <li><a href="/ja/">JA</a></li>
+          <li>TAGS</li>
+        
+  </ul>
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          見出し
+        </li>
+        <li class="sidebar-nav-overview">
+          概要
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>日本語</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/ja/tags/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/js/local-search.js b/js/local-search.js
new file mode 100644
index 0000000000..31f945fd7a
--- /dev/null
+++ b/js/local-search.js
@@ -0,0 +1,278 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Popup Window
+  let isfetched = false;
+  let datas;
+  let isXml = true;
+  // Search DB path
+  let searchPath = CONFIG.path;
+  if (searchPath.length === 0) {
+    searchPath = 'search.xml';
+  } else if (searchPath.endsWith('json')) {
+    isXml = false;
+  }
+  const input = document.querySelector('.search-input');
+  const resultContent = document.getElementById('search-result');
+
+  const getIndexByWord = (word, text, caseSensitive) => {
+    if (CONFIG.localsearch.unescape) {
+      let div = document.createElement('div');
+      div.innerText = word;
+      word = div.innerHTML;
+    }
+    let wordLen = word.length;
+    if (wordLen === 0) return [];
+    let startPosition = 0;
+    let position = [];
+    let index = [];
+    if (!caseSensitive) {
+      text = text.toLowerCase();
+      word = word.toLowerCase();
+    }
+    while ((position = text.indexOf(word, startPosition)) > -1) {
+      index.push({ position, word });
+      startPosition = position + wordLen;
+    }
+    return index;
+  };
+
+  // Merge hits into slices
+  const mergeIntoSlice = (start, end, index, searchText) => {
+    let item = index[index.length - 1];
+    let { position, word } = item;
+    let hits = [];
+    let searchTextCountInSlice = 0;
+    while (position + word.length <= end && index.length !== 0) {
+      if (word === searchText) {
+        searchTextCountInSlice++;
+      }
+      hits.push({
+        position,
+        length: word.length
+      });
+      let wordEnd = position + word.length;
+
+      // Move to next position of hit
+      index.pop();
+      while (index.length !== 0) {
+        item = index[index.length - 1];
+        position = item.position;
+        word = item.word;
+        if (wordEnd > position) {
+          index.pop();
+        } else {
+          break;
+        }
+      }
+    }
+    return {
+      hits,
+      start,
+      end,
+      searchTextCount: searchTextCountInSlice
+    };
+  };
+
+  // Highlight title and content
+  const highlightKeyword = (text, slice) => {
+    let result = '';
+    let prevEnd = slice.start;
+    slice.hits.forEach(hit => {
+      result += text.substring(prevEnd, hit.position);
+      let end = hit.position + hit.length;
+      result += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`;
+      prevEnd = end;
+    });
+    result += text.substring(prevEnd, slice.end);
+    return result;
+  };
+
+  const inputEventFunction = () => {
+    if (!isfetched) return;
+    let searchText = input.value.trim().toLowerCase();
+    let keywords = searchText.split(/[-\s]+/);
+    if (keywords.length > 1) {
+      keywords.push(searchText);
+    }
+    let resultItems = [];
+    if (searchText.length > 0) {
+      // Perform local searching
+      datas.forEach(({ title, content, url }) => {
+        let titleInLowerCase = title.toLowerCase();
+        let contentInLowerCase = content.toLowerCase();
+        let indexOfTitle = [];
+        let indexOfContent = [];
+        let searchTextCount = 0;
+        keywords.forEach(keyword => {
+          indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
+          indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
+        });
+
+        // Show search results
+        if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
+          let hitCount = indexOfTitle.length + indexOfContent.length;
+          // Sort index by position of keyword
+          [indexOfTitle, indexOfContent].forEach(index => {
+            index.sort((itemLeft, itemRight) => {
+              if (itemRight.position !== itemLeft.position) {
+                return itemRight.position - itemLeft.position;
+              }
+              return itemLeft.word.length - itemRight.word.length;
+            });
+          });
+
+          let slicesOfTitle = [];
+          if (indexOfTitle.length !== 0) {
+            let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText);
+            searchTextCount += tmp.searchTextCountInSlice;
+            slicesOfTitle.push(tmp);
+          }
+
+          let slicesOfContent = [];
+          while (indexOfContent.length !== 0) {
+            let item = indexOfContent[indexOfContent.length - 1];
+            let { position, word } = item;
+            // Cut out 100 characters
+            let start = position - 20;
+            let end = position + 80;
+            if (start < 0) {
+              start = 0;
+            }
+            if (end < position + word.length) {
+              end = position + word.length;
+            }
+            if (end > content.length) {
+              end = content.length;
+            }
+            let tmp = mergeIntoSlice(start, end, indexOfContent, searchText);
+            searchTextCount += tmp.searchTextCountInSlice;
+            slicesOfContent.push(tmp);
+          }
+
+          // Sort slices in content by search text's count and hits' count
+          slicesOfContent.sort((sliceLeft, sliceRight) => {
+            if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
+              return sliceRight.searchTextCount - sliceLeft.searchTextCount;
+            } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
+              return sliceRight.hits.length - sliceLeft.hits.length;
+            }
+            return sliceLeft.start - sliceRight.start;
+          });
+
+          // Select top N slices in content
+          let upperBound = parseInt(CONFIG.localsearch.top_n_per_article, 10);
+          if (upperBound >= 0) {
+            slicesOfContent = slicesOfContent.slice(0, upperBound);
+          }
+
+          let resultItem = '';
+
+          if (slicesOfTitle.length !== 0) {
+            resultItem += `<li><a href="${url}" class="search-result-title">${highlightKeyword(title, slicesOfTitle[0])}</a>`;
+          } else {
+            resultItem += `<li><a href="${url}" class="search-result-title">${title}</a>`;
+          }
+
+          slicesOfContent.forEach(slice => {
+            resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(content, slice)}...</p></a>`;
+          });
+
+          resultItem += '</li>';
+          resultItems.push({
+            item: resultItem,
+            id  : resultItems.length,
+            hitCount,
+            searchTextCount
+          });
+        }
+      });
+    }
+    if (keywords.length === 1 && keywords[0] === '') {
+      resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x"></i></div>';
+    } else if (resultItems.length === 0) {
+      resultContent.innerHTML = '<div id="no-result"><i class="far fa-frown fa-5x"></i></div>';
+    } else {
+      resultItems.sort((resultLeft, resultRight) => {
+        if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
+          return resultRight.searchTextCount - resultLeft.searchTextCount;
+        } else if (resultLeft.hitCount !== resultRight.hitCount) {
+          return resultRight.hitCount - resultLeft.hitCount;
+        }
+        return resultRight.id - resultLeft.id;
+      });
+      resultContent.innerHTML = `<ul class="search-result-list">${resultItems.map(result => result.item).join('')}</ul>`;
+      window.pjax && window.pjax.refresh(resultContent);
+    }
+  };
+
+  const fetchData = () => {
+    fetch(CONFIG.root + searchPath)
+      .then(response => response.text())
+      .then(res => {
+        // Get the contents from search data
+        isfetched = true;
+        datas = isXml ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => {
+          return {
+            title  : element.querySelector('title').textContent,
+            content: element.querySelector('content').textContent,
+            url    : element.querySelector('url').textContent
+          };
+        }) : JSON.parse(res);
+        // Only match articles with not empty titles
+        datas = datas.filter(data => data.title).map(data => {
+          data.title = data.title.trim();
+          data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : '';
+          data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/');
+          return data;
+        });
+        // Remove loading animation
+        document.getElementById('no-result').innerHTML = '<i class="fa fa-search fa-5x"></i>';
+        inputEventFunction();
+      });
+  };
+
+  if (CONFIG.localsearch.preload) {
+    fetchData();
+  }
+
+  if (CONFIG.localsearch.trigger === 'auto') {
+    input.addEventListener('input', inputEventFunction);
+  } else {
+    document.querySelector('.search-icon').addEventListener('click', inputEventFunction);
+    input.addEventListener('keypress', event => {
+      if (event.key === 'Enter') {
+        inputEventFunction();
+      }
+    });
+  }
+
+  // Handle and trigger popup window
+  document.querySelectorAll('.popup-trigger').forEach(element => {
+    element.addEventListener('click', () => {
+      document.body.style.overflow = 'hidden';
+      document.querySelector('.search-pop-overlay').classList.add('search-active');
+      input.focus();
+      if (!isfetched) fetchData();
+    });
+  });
+
+  // Monitor main search box
+  const onPopupClose = () => {
+    document.body.style.overflow = '';
+    document.querySelector('.search-pop-overlay').classList.remove('search-active');
+  };
+
+  document.querySelector('.search-pop-overlay').addEventListener('click', event => {
+    if (event.target === document.querySelector('.search-pop-overlay')) {
+      onPopupClose();
+    }
+  });
+  document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
+  window.addEventListener('pjax:success', onPopupClose);
+  window.addEventListener('keyup', event => {
+    if (event.key === 'Escape') {
+      onPopupClose();
+    }
+  });
+});
diff --git a/js/motion.js b/js/motion.js
new file mode 100644
index 0000000000..026199aabb
--- /dev/null
+++ b/js/motion.js
@@ -0,0 +1,177 @@
+/* global NexT, CONFIG, Velocity */
+
+if (window.$ && window.$.Velocity) window.Velocity = window.$.Velocity;
+
+NexT.motion = {};
+
+NexT.motion.integrator = {
+  queue : [],
+  cursor: -1,
+  init  : function() {
+    this.queue = [];
+    this.cursor = -1;
+    return this;
+  },
+  add: function(fn) {
+    this.queue.push(fn);
+    return this;
+  },
+  next: function() {
+    this.cursor++;
+    var fn = this.queue[this.cursor];
+    typeof fn === 'function' && fn(NexT.motion.integrator);
+  },
+  bootstrap: function() {
+    this.next();
+  }
+};
+
+NexT.motion.middleWares = {
+  logo: function(integrator) {
+    var sequence = [];
+    var brand = document.querySelector('.brand');
+    var image = document.querySelector('.custom-logo-image');
+    var title = document.querySelector('.site-title');
+    var subtitle = document.querySelector('.site-subtitle');
+    var logoLineTop = document.querySelector('.logo-line-before i');
+    var logoLineBottom = document.querySelector('.logo-line-after i');
+
+    brand && sequence.push({
+      e: brand,
+      p: {opacity: 1},
+      o: {duration: 200}
+    });
+
+    function getMistLineSettings(element, translateX) {
+      return {
+        e: element,
+        p: {translateX},
+        o: {
+          duration     : 500,
+          sequenceQueue: false
+        }
+      };
+    }
+
+    function pushImageToSequence() {
+      sequence.push({
+        e: image,
+        p: {opacity: 1, top: 0},
+        o: {duration: 200}
+      });
+    }
+
+    CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
+    && sequence.push(
+      getMistLineSettings(logoLineTop, '100%'),
+      getMistLineSettings(logoLineBottom, '-100%')
+    );
+
+    CONFIG.scheme === 'Muse' && image && pushImageToSequence();
+
+    title && sequence.push({
+      e: title,
+      p: {opacity: 1, top: 0},
+      o: {duration: 200}
+    });
+
+    subtitle && sequence.push({
+      e: subtitle,
+      p: {opacity: 1, top: 0},
+      o: {duration: 200}
+    });
+
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushImageToSequence();
+
+    if (sequence.length > 0) {
+      sequence[sequence.length - 1].o.complete = function() {
+        integrator.next();
+      };
+      Velocity.RunSequence(sequence);
+    } else {
+      integrator.next();
+    }
+
+    if (CONFIG.motion.async) {
+      integrator.next();
+    }
+  },
+
+  menu: function(integrator) {
+    Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', {
+      display : null,
+      duration: 200,
+      complete: function() {
+        integrator.next();
+      }
+    });
+
+    if (CONFIG.motion.async) {
+      integrator.next();
+    }
+  },
+
+  subMenu: function(integrator) {
+    var subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
+    if (subMenuItem.length > 0) {
+      subMenuItem.forEach(element => {
+        element.style.opacity = 1;
+      });
+    }
+    integrator.next();
+  },
+
+  postList: function(integrator) {
+    var postBlock = document.querySelectorAll('.post-block, .pagination, .comments');
+    var postBlockTransition = CONFIG.motion.transition.post_block;
+    var postHeader = document.querySelectorAll('.post-header');
+    var postHeaderTransition = CONFIG.motion.transition.post_header;
+    var postBody = document.querySelectorAll('.post-body');
+    var postBodyTransition = CONFIG.motion.transition.post_body;
+    var collHeader = document.querySelectorAll('.collection-header');
+    var collHeaderTransition = CONFIG.motion.transition.coll_header;
+
+    if (postBlock.length > 0) {
+      var postMotionOptions = window.postMotionOptions || {
+        stagger : 100,
+        drag    : true,
+        complete: function() {
+          integrator.next();
+        }
+      };
+
+      if (CONFIG.motion.transition.post_block) {
+        Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
+      }
+      if (CONFIG.motion.transition.post_header) {
+        Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
+      }
+      if (CONFIG.motion.transition.post_body) {
+        Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
+      }
+      if (CONFIG.motion.transition.coll_header) {
+        Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
+      }
+    }
+    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
+      integrator.next();
+    }
+  },
+
+  sidebar: function(integrator) {
+    var sidebarAffix = document.querySelector('.sidebar-inner');
+    var sidebarAffixTransition = CONFIG.motion.transition.sidebar;
+    // Only for Pisces | Gemini.
+    if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+      Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
+        display : null,
+        duration: 200,
+        complete: function() {
+          // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini.
+          sidebarAffix.style.transform = 'initial';
+        }
+      });
+    }
+    integrator.next();
+  }
+};
diff --git a/js/next-boot.js b/js/next-boot.js
new file mode 100644
index 0000000000..52ec9aec0f
--- /dev/null
+++ b/js/next-boot.js
@@ -0,0 +1,114 @@
+/* global NexT, CONFIG, Velocity */
+
+NexT.boot = {};
+
+NexT.boot.registerEvents = function() {
+
+  NexT.utils.registerScrollPercent();
+  NexT.utils.registerCanIUseTag();
+
+  // Mobile top menu bar.
+  document.querySelector('.site-nav-toggle .toggle').addEventListener('click', () => {
+    event.currentTarget.classList.toggle('toggle-close');
+    var siteNav = document.querySelector('.site-nav');
+    var animateAction = siteNav.classList.contains('site-nav-on') ? 'slideUp' : 'slideDown';
+
+    if (typeof Velocity === 'function') {
+      Velocity(siteNav, animateAction, {
+        duration: 200,
+        complete: function() {
+          siteNav.classList.toggle('site-nav-on');
+        }
+      });
+    } else {
+      siteNav.classList.toggle('site-nav-on');
+    }
+  });
+
+  var TAB_ANIMATE_DURATION = 200;
+  document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
+    element.addEventListener('click', event => {
+      var item = event.currentTarget;
+      var activeTabClassName = 'sidebar-nav-active';
+      var activePanelClassName = 'sidebar-panel-active';
+      if (item.classList.contains(activeTabClassName)) return;
+
+      var targets = document.querySelectorAll('.sidebar-panel');
+      var target = targets[index];
+      var currentTarget = targets[1 - index];
+      window.anime({
+        targets : currentTarget,
+        duration: TAB_ANIMATE_DURATION,
+        easing  : 'linear',
+        opacity : 0,
+        complete: () => {
+          // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
+          currentTarget.classList.remove(activePanelClassName);
+          target.style.opacity = 0;
+          target.classList.add(activePanelClassName);
+          window.anime({
+            targets : target,
+            duration: TAB_ANIMATE_DURATION,
+            easing  : 'linear',
+            opacity : 1
+          });
+        }
+      });
+
+      [...item.parentNode.children].forEach(element => {
+        element.classList.remove(activeTabClassName);
+      });
+      item.classList.add(activeTabClassName);
+    });
+  });
+
+  window.addEventListener('resize', NexT.utils.initSidebarDimension);
+
+  window.addEventListener('hashchange', () => {
+    var tHash = location.hash;
+    if (tHash !== '' && !tHash.match(/%\S{2}/)) {
+      var target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
+      target && target.click();
+    }
+  });
+};
+
+NexT.boot.refresh = function() {
+
+  /**
+   * Register JS handlers by condition option.
+   * Need to add config option in Front-End at 'layout/_partials/head.swig' file.
+   */
+  CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
+  CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img');
+  CONFIG.lazyload && window.lozad('.post-body img').observe();
+  CONFIG.pangu && window.pangu.spacingPage();
+
+  CONFIG.exturl && NexT.utils.registerExtURL();
+  CONFIG.copycode.enable && NexT.utils.registerCopyCode();
+  NexT.utils.registerTabsTag();
+  NexT.utils.registerActiveMenuItem();
+  NexT.utils.registerLangSelect();
+  NexT.utils.registerSidebarTOC();
+  NexT.utils.wrapTableWithBox();
+  NexT.utils.registerVideoIframe();
+};
+
+NexT.boot.motion = function() {
+  // Define Motion Sequence & Bootstrap Motion.
+  if (CONFIG.motion.enable) {
+    NexT.motion.integrator
+      .add(NexT.motion.middleWares.logo)
+      .add(NexT.motion.middleWares.menu)
+      .add(NexT.motion.middleWares.postList)
+      .add(NexT.motion.middleWares.sidebar)
+      .bootstrap();
+  }
+  NexT.utils.updateSidebarPosition();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  NexT.boot.registerEvents();
+  NexT.boot.refresh();
+  NexT.boot.motion();
+});
diff --git a/js/schemes/pisces.js b/js/schemes/pisces.js
new file mode 100644
index 0000000000..41633eacbf
--- /dev/null
+++ b/js/schemes/pisces.js
@@ -0,0 +1,86 @@
+/* global NexT, CONFIG */
+
+var Affix = {
+  init: function(element, options) {
+    this.element = element;
+    this.offset = options || 0;
+    this.affixed = null;
+    this.unpin = null;
+    this.pinnedOffset = null;
+    this.checkPosition();
+    window.addEventListener('scroll', this.checkPosition.bind(this));
+    window.addEventListener('click', this.checkPositionWithEventLoop.bind(this));
+    window.matchMedia('(min-width: 992px)').addListener(event => {
+      if (event.matches) {
+        this.offset = NexT.utils.getAffixParam();
+        this.checkPosition();
+      }
+    });
+  },
+  getState: function(scrollHeight, height, offsetTop, offsetBottom) {
+    let scrollTop = window.scrollY;
+    let targetHeight = window.innerHeight;
+    if (offsetTop != null && this.affixed === 'top') {
+      if (document.querySelector('.content-wrap').offsetHeight < offsetTop) return 'top';
+      return scrollTop < offsetTop ? 'top' : false;
+    }
+    if (this.affixed === 'bottom') {
+      if (offsetTop != null) return this.unpin <= this.element.getBoundingClientRect().top ? false : 'bottom';
+      return scrollTop + targetHeight <= scrollHeight - offsetBottom ? false : 'bottom';
+    }
+    let initializing = this.affixed === null;
+    let colliderTop = initializing ? scrollTop : this.element.getBoundingClientRect().top + scrollTop;
+    let colliderHeight = initializing ? targetHeight : height;
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top';
+    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom';
+    return false;
+  },
+  getPinnedOffset: function() {
+    if (this.pinnedOffset) return this.pinnedOffset;
+    this.element.classList.remove('affix-top', 'affix-bottom');
+    this.element.classList.add('affix');
+    return (this.pinnedOffset = this.element.getBoundingClientRect().top);
+  },
+  checkPositionWithEventLoop() {
+    setTimeout(this.checkPosition.bind(this), 1);
+  },
+  checkPosition: function() {
+    if (window.getComputedStyle(this.element).display === 'none') return;
+    let height = this.element.offsetHeight;
+    let { offset } = this;
+    let offsetTop = offset.top;
+    let offsetBottom = offset.bottom;
+    let { scrollHeight } = document.body;
+    let affix = this.getState(scrollHeight, height, offsetTop, offsetBottom);
+    if (this.affixed !== affix) {
+      if (this.unpin != null) this.element.style.top = '';
+      let affixType = 'affix' + (affix ? '-' + affix : '');
+      this.affixed = affix;
+      this.unpin = affix === 'bottom' ? this.getPinnedOffset() : null;
+      this.element.classList.remove('affix', 'affix-top', 'affix-bottom');
+      this.element.classList.add(affixType);
+    }
+    if (affix === 'bottom') {
+      this.element.style.top = scrollHeight - height - offsetBottom + 'px';
+    }
+  }
+};
+
+NexT.utils.getAffixParam = function() {
+  const sidebarOffset = CONFIG.sidebar.offset || 12;
+
+  let headerOffset = document.querySelector('.header-inner').offsetHeight;
+  let footerOffset = document.querySelector('.footer').offsetHeight;
+
+  document.querySelector('.sidebar').style.marginTop = headerOffset + sidebarOffset + 'px';
+
+  return {
+    top   : headerOffset,
+    bottom: footerOffset
+  };
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  Affix.init(document.querySelector('.sidebar-inner'), NexT.utils.getAffixParam());
+});
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 0000000000..74a6dfd558
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,415 @@
+/* global NexT, CONFIG */
+
+HTMLElement.prototype.wrap = function(wrapper) {
+  this.parentNode.insertBefore(wrapper, this);
+  this.parentNode.removeChild(this);
+  wrapper.appendChild(this);
+};
+
+NexT.utils = {
+
+  /**
+   * Wrap images with fancybox.
+   */
+  wrapImageWithFancyBox: function() {
+    document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
+      var $image = $(element);
+      var imageLink = $image.attr('data-src') || $image.attr('src');
+      var $imageWrapLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a');
+      if ($image.is('.post-gallery img')) {
+        $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery');
+      } else if ($image.is('.group-picture img')) {
+        $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
+      } else {
+        $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
+      }
+
+      var imageTitle = $image.attr('title') || $image.attr('alt');
+      if (imageTitle) {
+        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+        // Make sure img title tag will show correctly in fancybox
+        $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
+      }
+    });
+
+    $.fancybox.defaults.hash = false;
+    $('.fancybox').fancybox({
+      loop   : true,
+      helpers: {
+        overlay: {
+          locked: false
+        }
+      }
+    });
+  },
+
+  registerExtURL: function() {
+    document.querySelectorAll('span.exturl').forEach(element => {
+      let link = document.createElement('a');
+      // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
+      link.href = decodeURIComponent(atob(element.dataset.url).split('').map(c => {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      link.rel = 'noopener external nofollow noreferrer';
+      link.target = '_blank';
+      link.className = element.className;
+      link.title = element.title;
+      link.innerHTML = element.innerHTML;
+      element.parentNode.replaceChild(link, element);
+    });
+  },
+
+  /**
+   * One-click copy code support.
+   */
+  registerCopyCode: function() {
+    document.querySelectorAll('figure.highlight').forEach(element => {
+      const box = document.createElement('div');
+      element.wrap(box);
+      box.classList.add('highlight-container');
+      box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
+      var button = element.parentNode.querySelector('.copy-btn');
+      button.addEventListener('click', event => {
+        var target = event.currentTarget;
+        var code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
+        var ta = document.createElement('textarea');
+        ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
+        ta.style.position = 'absolute';
+        ta.style.opacity = '0';
+        ta.readOnly = true;
+        ta.value = code;
+        document.body.append(ta);
+        const selection = document.getSelection();
+        const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+        ta.select();
+        ta.setSelectionRange(0, code.length);
+        ta.readOnly = false;
+        var result = document.execCommand('copy');
+        if (CONFIG.copycode.show_result) {
+          target.querySelector('i').className = result ? 'fa fa-check fa-fw' : 'fa fa-times fa-fw';
+        }
+        ta.blur(); // For iOS
+        target.blur();
+        if (selected) {
+          selection.removeAllRanges();
+          selection.addRange(selected);
+        }
+        document.body.removeChild(ta);
+      });
+      button.addEventListener('mouseleave', event => {
+        setTimeout(() => {
+          event.target.querySelector('i').className = 'fa fa-clipboard fa-fw';
+        }, 300);
+      });
+    });
+  },
+
+  wrapTableWithBox: function() {
+    document.querySelectorAll('table').forEach(element => {
+      const box = document.createElement('div');
+      box.className = 'table-container';
+      element.wrap(box);
+    });
+  },
+
+  registerVideoIframe: function() {
+    document.querySelectorAll('iframe').forEach(element => {
+      const supported = [
+        'www.youtube.com',
+        'player.vimeo.com',
+        'player.youku.com',
+        'player.bilibili.com',
+        'www.tudou.com'
+      ].some(host => element.src.includes(host));
+      if (supported && !element.parentNode.matches('.video-container')) {
+        const box = document.createElement('div');
+        box.className = 'video-container';
+        element.wrap(box);
+        let width = Number(element.width);
+        let height = Number(element.height);
+        if (width && height) {
+          element.parentNode.style.paddingTop = (height / width * 100) + '%';
+        }
+      }
+    });
+  },
+
+  registerScrollPercent: function() {
+    var THRESHOLD = 50;
+    var backToTop = document.querySelector('.back-to-top');
+    var readingProgressBar = document.querySelector('.reading-progress-bar');
+    // For init back to top in sidebar if page was scrolled after page refresh.
+    window.addEventListener('scroll', () => {
+      if (backToTop || readingProgressBar) {
+        var docHeight = document.querySelector('.container').offsetHeight;
+        var winHeight = window.innerHeight;
+        var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
+        var scrollPercent = Math.min(100 * window.scrollY / contentVisibilityHeight, 100);
+        if (backToTop) {
+          backToTop.classList.toggle('back-to-top-on', window.scrollY > THRESHOLD);
+          backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
+        }
+        if (readingProgressBar) {
+          readingProgressBar.style.width = scrollPercent.toFixed(2) + '%';
+        }
+      }
+    });
+
+    backToTop && backToTop.addEventListener('click', () => {
+      window.anime({
+        targets  : document.scrollingElement,
+        duration : 500,
+        easing   : 'linear',
+        scrollTop: 0
+      });
+    });
+  },
+
+  /**
+   * Tabs tag listener (without twitter bootstrap).
+   */
+  registerTabsTag: function() {
+    // Binding `nav-tabs` & `tab-content` by real time permalink changing.
+    document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
+      element.addEventListener('click', event => {
+        event.preventDefault();
+        var target = event.currentTarget;
+        // Prevent selected tab to select again.
+        if (!target.classList.contains('active')) {
+          // Add & Remove active class on `nav-tabs` & `tab-content`.
+          [...target.parentNode.children].forEach(element => {
+            element.classList.remove('active');
+          });
+          target.classList.add('active');
+          var tActive = document.getElementById(target.querySelector('a').getAttribute('href').replace('#', ''));
+          [...tActive.parentNode.children].forEach(element => {
+            element.classList.remove('active');
+          });
+          tActive.classList.add('active');
+          // Trigger event
+          tActive.dispatchEvent(new Event('tabs:click', {
+            bubbles: true
+          }));
+        }
+      });
+    });
+
+    window.dispatchEvent(new Event('tabs:register'));
+  },
+
+  registerCanIUseTag: function() {
+    // Get responsive height passed from iframe.
+    window.addEventListener('message', ({ data }) => {
+      if ((typeof data === 'string') && data.includes('ciu_embed')) {
+        var featureID = data.split(':')[1];
+        var height = data.split(':')[2];
+        document.querySelector(`iframe[data-feature=${featureID}]`).style.height = parseInt(height, 10) + 5 + 'px';
+      }
+    }, false);
+  },
+
+  registerActiveMenuItem: function() {
+    document.querySelectorAll('.menu-item').forEach(element => {
+      var target = element.querySelector('a[href]');
+      if (!target) return;
+      var isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
+      var isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
+      element.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
+    });
+  },
+
+  registerLangSelect: function() {
+    let selects = document.querySelectorAll('.lang-select');
+    selects.forEach(sel => {
+      sel.value = CONFIG.page.lang;
+      sel.addEventListener('change', () => {
+        let target = sel.options[sel.selectedIndex];
+        document.querySelectorAll('.lang-select-label span').forEach(span => span.innerText = target.text);
+        let url = target.dataset.href;
+        window.pjax ? window.pjax.loadUrl(url) : window.location.href = url;
+      });
+    });
+  },
+
+  registerSidebarTOC: function() {
+    const navItems = document.querySelectorAll('.post-toc li');
+    const sections = [...navItems].map(element => {
+      var link = element.querySelector('a.nav-link');
+      var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
+      // TOC item animation navigate.
+      link.addEventListener('click', event => {
+        event.preventDefault();
+        var offset = target.getBoundingClientRect().top + window.scrollY;
+        window.anime({
+          targets  : document.scrollingElement,
+          duration : 500,
+          easing   : 'linear',
+          scrollTop: offset + 10
+        });
+      });
+      return target;
+    });
+
+    var tocElement = document.querySelector('.post-toc-wrap');
+    function activateNavByIndex(target) {
+      if (target.classList.contains('active-current')) return;
+
+      document.querySelectorAll('.post-toc .active').forEach(element => {
+        element.classList.remove('active', 'active-current');
+      });
+      target.classList.add('active', 'active-current');
+      var parent = target.parentNode;
+      while (!parent.matches('.post-toc')) {
+        if (parent.matches('li')) parent.classList.add('active');
+        parent = parent.parentNode;
+      }
+      // Scrolling to center active TOC element if TOC content is taller then viewport.
+      window.anime({
+        targets  : tocElement,
+        duration : 200,
+        easing   : 'linear',
+        scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
+      });
+    }
+
+    function findIndex(entries) {
+      let index = 0;
+      let entry = entries[index];
+      if (entry.boundingClientRect.top > 0) {
+        index = sections.indexOf(entry.target);
+        return index === 0 ? 0 : index - 1;
+      }
+      for (; index < entries.length; index++) {
+        if (entries[index].boundingClientRect.top <= 0) {
+          entry = entries[index];
+        } else {
+          return sections.indexOf(entry.target);
+        }
+      }
+      return sections.indexOf(entry.target);
+    }
+
+    function createIntersectionObserver(marginTop) {
+      marginTop = Math.floor(marginTop + 10000);
+      let intersectionObserver = new IntersectionObserver((entries, observe) => {
+        let scrollHeight = document.documentElement.scrollHeight + 100;
+        if (scrollHeight > marginTop) {
+          observe.disconnect();
+          createIntersectionObserver(scrollHeight);
+          return;
+        }
+        let index = findIndex(entries);
+        activateNavByIndex(navItems[index]);
+      }, {
+        rootMargin: marginTop + 'px 0px -100% 0px',
+        threshold : 0
+      });
+      sections.forEach(element => {
+        element && intersectionObserver.observe(element);
+      });
+    }
+    createIntersectionObserver(document.documentElement.scrollHeight);
+  },
+
+  hasMobileUA: function() {
+    let ua = navigator.userAgent;
+    let pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
+    return pa.test(ua);
+  },
+
+  isTablet: function() {
+    return window.screen.width < 992 && window.screen.width > 767 && this.hasMobileUA();
+  },
+
+  isMobile: function() {
+    return window.screen.width < 767 && this.hasMobileUA();
+  },
+
+  isDesktop: function() {
+    return !this.isTablet() && !this.isMobile();
+  },
+
+  supportsPDFs: function() {
+    let ua = navigator.userAgent;
+    let isFirefoxWithPDFJS = ua.includes('irefox') && parseInt(ua.split('rv:')[1].split('.')[0], 10) > 18;
+    let supportsPdfMimeType = typeof navigator.mimeTypes['application/pdf'] !== 'undefined';
+    let isIOS = /iphone|ipad|ipod/i.test(ua.toLowerCase());
+    return isFirefoxWithPDFJS || (supportsPdfMimeType && !isIOS);
+  },
+
+  /**
+   * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
+   * Need for Sidebar/TOC inner scrolling if content taller then viewport.
+   */
+  initSidebarDimension: function() {
+    var sidebarNav = document.querySelector('.sidebar-nav');
+    var sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.offsetHeight : 0;
+    var sidebarOffset = CONFIG.sidebar.offset || 12;
+    var sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
+    var sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
+    // Margin of sidebar b2t: -4px -10px -18px, brings a different of 22px.
+    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += (sidebarOffset * 2) - 22;
+    // Initialize Sidebar & TOC Height.
+    var sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
+    document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
+    document.querySelector('.post-toc-wrap').style.maxHeight = sidebarWrapperHeight;
+  },
+
+  updateSidebarPosition: function() {
+    var sidebarNav = document.querySelector('.sidebar-nav');
+    var hasTOC = document.querySelector('.post-toc');
+    if (hasTOC) {
+      sidebarNav.style.display = '';
+      sidebarNav.classList.add('motion-element');
+      document.querySelector('.sidebar-nav-toc').click();
+    } else {
+      sidebarNav.style.display = 'none';
+      sidebarNav.classList.remove('motion-element');
+      document.querySelector('.sidebar-nav-overview').click();
+    }
+    NexT.utils.initSidebarDimension();
+    if (!this.isDesktop() || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
+    // Expand sidebar on post detail page by default, when post has a toc.
+    var display = CONFIG.page.sidebar;
+    if (typeof display !== 'boolean') {
+      // There's no definition sidebar in the page front-matter.
+      display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);
+    }
+    if (display) {
+      window.dispatchEvent(new Event('sidebar:show'));
+    }
+  },
+
+  getScript: function(url, callback, condition) {
+    if (condition) {
+      callback();
+    } else {
+      var script = document.createElement('script');
+      script.onload = script.onreadystatechange = function(_, isAbort) {
+        if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
+          script.onload = script.onreadystatechange = null;
+          script = undefined;
+          if (!isAbort && callback) setTimeout(callback, 0);
+        }
+      };
+      script.src = url;
+      document.head.appendChild(script);
+    }
+  },
+
+  loadComments: function(element, callback) {
+    if (!CONFIG.comments.lazyload || !element) {
+      callback();
+      return;
+    }
+    let intersectionObserver = new IntersectionObserver((entries, observer) => {
+      let entry = entries[0];
+      if (entry.isIntersecting) {
+        callback();
+        observer.disconnect();
+      }
+    });
+    intersectionObserver.observe(element);
+    return intersectionObserver;
+  }
+};
diff --git a/lib/anime.min.js b/lib/anime.min.js
new file mode 100644
index 0000000000..99b263aaeb
--- /dev/null
+++ b/lib/anime.min.js
@@ -0,0 +1,8 @@
+/*
+ * anime.js v3.1.0
+ * (c) 2019 Julian Garnier
+ * Released under the MIT license
+ * animejs.com
+ */
+
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),rn.running=_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.1.0",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
diff --git a/lib/font-awesome/css/all.min.css b/lib/font-awesome/css/all.min.css
new file mode 100644
index 0000000000..3d28ab203d
--- /dev/null
+++ b/lib/font-awesome/css/all.min.css
@@ -0,0 +1,5 @@
+/*!
+ * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\f95b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\f952"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\f905"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\f907"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\f95c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\f95d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\f95e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\f95f"}.fa-handshake-slash:before{content:"\f960"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\f961"}.fa-head-side-cough-slash:before{content:"\f962"}.fa-head-side-mask:before{content:"\f963"}.fa-head-side-virus:before{content:"\f964"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\f965"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\f913"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\f955"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\f966"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\f967"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\f91a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\f956"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\f968"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\f91e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\f969"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\f96a"}.fa-pump-soap:before{content:"\f96b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\f96c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\f957"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\f96e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\f96f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\f970"}.fa-store-slash:before{content:"\f971"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\f972"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\f941"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\f949"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\f974"}.fa-virus-slash:before{content:"\f975"}.fa-viruses:before{content:"\f976"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
\ No newline at end of file
diff --git a/lib/font-awesome/webfonts/fa-brands-400.woff2 b/lib/font-awesome/webfonts/fa-brands-400.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..141a90a9e0a4b5a794557efa098a5c52320fb226
GIT binary patch
literal 76612
zcmV(_K-9l?Pew8T0RR910V_lR4FCWD0tR>h0V?SMO9Bi400000000000000000000
z0000#Mn+Uk92y=5U;vA15eN#0vs{Jdd;vBBBm<3f3x<3E1Rw>A1qZ1-Teh2VMdmgQ
zUYvB30mQLfUUz2%GaC`R9ppkUVokv~W(8~<z!>lL&;I}ae@B8Zp0PEv=-d6s7a_@v
ztm?Y%B2pP4tcak5AOvsYsTxc{_p{C2F4o)Sa#l^s1zXEXrKhqgPs?kmY+K4JSbZ7t
zyp4K3qZXtQ+>8Jtz-W4*4X7b`!)Ci5UEac31QT9h2!s#-D=9#CEXN$y!u9wGHts?#
zQ?J6xc4f9P=w9C9)(GBa!|}WCiEf@s($gQ<+u`Ob(GmjzfWZJ5kOVVIihUj5g*82<
z)P#L}hF{&<hn-8WKJ8^#+7j>;cYWJq*eRnw;y^i|;-9~t(dGK{yZ`&OEuN2Oo}%p8
zyDg_NCgyM);Qz}OY#G<FtgtD=y+ot)HtPHH{B-`Y`z&dDpCl<Q@{$V0lhnXdF*HSN
zhUm12Pm0-8Vf)ODsrnzDpIh%QqS#<b#YV-F$Q4<mCDK4fl%i4w7+^$VV4i_hcSfF`
z)mIAt-{1SLv+wKuSBo_&ef)Dw10KOln1j(fJij*I`%zc_-!*x`ad6ZfchKqu2Q5dG
zAQGjZ5@mxJprQgsPsONBteDZ83v1!jX)krUa%=zJwf?`=os(oIIZ2%qc6C<+UU&>2
znB5RM1Up8J`oawfHA15Ma@4FpxXq9=Lqvz_5dUA|1K_Zq+RxY@XOf#CP=Y{#F_kn<
ze2L@T^|6Pmbd|1pPj=jLU<nG#aN7NW4_x^F?_U4R0Sa-jPq>N(yI-(?h5}sLT^@mF
zUkB)Kvvg*E(-r}e0)(e|w+stkboh2_l{8`jD<IKM6!HK?G@hG%yEk{g4$cdC#6f_<
zj<+2Y1Bo=k=BuUtf7QFYs=q845IAx7^nh*I*8<BB2h2APHpI~;iq3ud{AjW1-cFyt
zD;N+MW>~Te0*iy!iDPs3^n=}dXaE1KX}xrnuI+9I(11w>j3IJ7fRdgwUdr@rc?k}e
z_SL<|K?K1P{@?QW1KR!nU#qN_aqmw@byqEeQ1M6&3u^iJ2vgVIYd<tBr)dH_I|(Z~
zewS5*3d+F(McJE>|Nm>LeO0`xisw^-2_<s~Ovwxfupsc+Gbfwvdw==f_Ci5RZ766E
zL~(;GumX}X;f4=Oj0Tgb)qTiS9b#DwAV4-kS_Ec&4UjRj9sc{Dd;j#xn@R?uyJ`XD
zL*pv!9-G*iK=A{h@r9#YR%LuM_Zbmcu*(HK<0XJnX}Z08cinY!ejYtO(pUN>NGijC
zpujNTw##<IFc=O23%Knn;5fEY49va*1OWb5Ks_RijgK}^zjw|k`CU5-49M~G6RvOt
zy3nWr=-$vqKnM(Mw|684=cTrix_prPwygfW4wx;es-F4Fez^HB`|T=h0qPjZBZ(B$
z{HtoNpewISmsXW3r}Ve`GE8-t^D<|`2aEAZ%STYwMIe1SmMethLJ0CbQgT|aQ(mV3
zNhtv+JHaPRA0YYO1E?#Ylmc7@Q%alUODSzDeONM%V5*eX)*<V3Wy`_$bE5uARv3Fd
z3gvM`mrs};A!=%JTJPsowQ4C(k}rDZQu18XWna;yqTHgqrosCkp!oj>C?QA|08$nJ
zN+XbxM*t{W0Aw$vNwmGen`g2w`*Icl$redzMkJkRPgsXdxw;Um5OUXD(bh+ho?0p4
zfk>r!fu_KfCIuQTK9nWP1cx>r2n_Pwi@t;HZ&Pgpq-oMheY5W~%Pgn;@yRR=k4&(s
zSZhVZhJU$q2HP}(&X3g)U(sNJ60ynSbAxQ_-vRaoFiOe6CX6yb8zhap_kJwlW-q{t
zF=d#PwZJy^YyBj-OHN=Brvm+)e$P6f0)|Tv6j^o}0ssU6c(Y9QCjju)id|JLK4hpR
z3IK5cAV6Te2MDBV1VHd>JQWlGj>km+&{p2=zrqSz01zmK=RL|VYFPl?AKagU5B#6q
z@fk347>C30004xwkB{{|$9ee#;P1ZL6GWZ>fP)dhgczUy(AN6eU|ZU5w#TB&SHVhC
ziKeMqb(*bKb!eW3wM0v`LYuT-M>VC}`b+QhH5TUZ<otw+%_^H#HM>ngS}pZf@BRMZ
zkxIy*o@T6c(!&B4Gs+li*u@bhImKC~xWYXi@{BjUN56?Cn>@^zU5ZkYUKy9hOwQE2
zna}g@x~joiQLAf1?W(<Xw9eF2U9OMiTJ+Oi_OPz*%lr0zzEAagM);C5-Q=0>bg$=m
zz$4!2-9GFyzV2Io?587SsK<)2Zk!+2#^dpFqGvUE({@Hp<4oStpw-1j+O<Fsu1IC7
zQmv-TnwIwlM#;yuM~8J@SM)+}^&$2G5ktZ&bq7XFcTQ9&%?fLD#851XwXrdFq${6_
zn{j{5Vwz~79Y2==Mp({D*0Cq`oa7AW1J`;U^C#~DwdP*h%*kC_cFTB{FABHv-13Vn
zXY}-YvE#73ay{_y7V|EQO8m1r(Ddq>mVbl%<Nj`2ZL!%V>#Vifm=TLCG-Ob(PBSzr
zR;WM<GXp(eS!v~b9+#%9$s@#n7yobH{Pp0<rHjT0omQ<3eeUzvw`CfKwyDY@PhxMh
z;Oscc_cxp2;MbL`cq#qSp-qdZBkgTl8(Uvjt+iBENg>7g*n>^?xn8S@I?F1`qReHu
z+D-R|!G|+*rt~>XIb~3w=c@G?^^m$rU8mlqwo)6YwbWFqma2~EFU{qsE}{W{u}w&@
zRqyo6Uw+Ca{6C_13-1L0;Pn93Sbzhk0Ni~g9ma%|uP9&x_QMT>%Xl?bG#Y26PWMY0
z-89f$(e!qvg1w@A(irB{BfY@*;ah{qWay<wiBc<%v(+e=37X)a>9`4=6a`2}-uh_q
zV!6f>g@R_$$_vq5vLJOPc7`PBk`c_Plboy{$uW4(INYNvR)9seVJJ$zjuCL8SDSR5
zDwD;ir3Ss!xIGy%z}g&#;#5R=Hn&ZqZjLQ+ifS0TFn-vY3K=MN7Hk3foMU0(7i$<+
zp}IJEL+ND~9H2yDo~O6FdymLJ;MUt>c&UbE3;<CYpjK^8^h?I$r71w8ZR!}#QJf)>
z{$xagVYJ86Al=jZF}1gZXaX%eR3^FCSZ4B4&I$<4YHCUI7+)}EW!p|Sh@&>TPtNW|
zqn9T%jI{=rmayg}7=nuIGp`7rt(LeCCp~JN<w8~MRjwpwP%$8YoeehyP_Pp^mE)Bw
zGhxB$<%%{L9$)g{9T;Y~*_~9mME!i~ePUmDA6|(>UiOY%GBa#W0Rp9)&mGPrW<r)T
zSk!raNQU64@LmeBe4f5V6niPBy++K~T54x5C&bMr19F6bvVme{&%u{XsF=gql1S0H
zc)!2?Zj^{MKyeZvSeL8gh&F6!Bzb<N@jhh+ZcK<A7E4FZ_9O(8oJ3j%GGx|C*qo#~
z$6%9#$BLts%ocg#3BI<qQ<g`it<~p~g~Mp8$a^PEH>EYvgJmwBsA%7kl!YxH!^OKs
ziG4=tXq8r^9a*E5wlGTjB;LREi>{fAWFg*Qb$t-6^CUC_-hN1^$DN`*@gIVB-A&{W
zqTlCSR%~Np4!|0NumBD+s~Q+DMbi}AA-=+d1xg?WoMiEWeKCJdp)4VMwK}0>Dv^Ts
zf0|Sq2j487X=uZFH);J5SvskTGewHS(cn@?7TMd(Zv(#G6~(Yrs$o{jE>UV01d_Zv
z8Aa0xYMy?oN1bitQiG4aD%nT4(G#X?^Ytu*=R;W}=4F8e%lSvhFwYTaHtombJ3U$u
z0~PR{w*;b;CHZsO#glxruOiN-K%@cZU9@iXxIZs)8uF~$$mMRwEi!yAGp@EJT`nA{
z2VJA4t^tdiHk;6J9S7fCgh?)qWPLdv-)ltbjGI-HxFS!T!$^l*EH_8%xpQD{AUqHd
z+S3aXxtO=>(C>6TyYS5A+}}i*OBU(%sV17~1i2ZaD#?gVFGLp=3Ts_75Oj$Hex3Uq
z;YcROGxi3jRl)q_Yx1W5YM6)0EN3qjM5L@$XO52S#-=}%rMteu#*XMy`m;33Nb<M$
zegWr&??2a39<K@Th0=>s_dZUKdS^3t!<^zlVp-p|6OJR<u3jb67;Q*TIS<nM^}_or
zz~y~Wq#gMSI)@7`7CQSbH+=U30fzk@?`{?_NW531tYeQVoZJpnNwvjl@q}IWlUYBl
zC%Gz(33?Vbh0q(%3vFrr6$iEJ!h=Um3p$Fk<YL0}l#f;m^d*n}VUc2!*!tzS3&d7>
zCW0}P622gf0i7TA{yPB6fp6#F_Uchc@tkbWot);&Qd|sA!r+XrC#^&{95eb*8ZVgh
zw9K9LclUuxv+K)4S&!BElY0s10F#OWl9R*|(dp6U<64jY$yOfLC}XWMgr@$k`6s=W
zFHDE>v$eykfH9?~Wo?T<+csS|*FG|p->O=<{m@016C$ye8)#LsBJl2P#XxTJQBy9)
z*sx`C)wE@wSe`5lM_%;Bc0A>l8jeI5YL3RU<yc!Hj=N611D~ki2BZy%!)<V_@nm+v
zwX^lIGIVR}i{>W7%05b<+mJQKFyM-_$>aotyKjH_6~8HeWR85~OZRf~!CPf!1EV`7
zPg8{2|4|#q&Bf5}bhn8)!R#;l_U$DKQ-mUf#kOxt5DUlM!{)-iI-U(^%R38Uo1C#^
z?d`}{uDj1J;D7$iOjWuv`CYsI=EU}AF>b1-9$ZP*pA##~wAEKT*4>lT&ZJ4n#zCsR
z7hgJB9Efz-_LXhjWp7U=7f+6>Nm$NidGmE`x&Y0V@qRgUXjDCCbja|J&FG(WIKTBu
zY3o$19wY)9KoFy(!fs2%L_+$x$X>WcmQ5#UG~<J7-_=+!a|lfBB_v!e>Cxh=z|;JM
z^^C~uhbd32sEO+E70v{t(waqIhd3Fg)yuf!kEahl2=@oLQH;{JZK_Pb?0tW_yp)Lj
z+3lJaC+B%OENMN(50C7OsR}6%XDuBu(Tx}oqC@S)ax6mYeE`8fewp~p=;t8YG1$?H
zQ6-qvq)5{+0ZU(17#yE5`SmjZTA?eF?Z{2vgALbLm*%sDan{vA-22dE6#%L^5i{&+
zA6UArenMnxs}h6JtwBc?LWcv+AwJm^%D_Oq-Pztr&NC7$`~7&4%%X=)w^SUp=tc|Q
z#^~xwGPgnw{AH}t0bzuQ%Lu9lQ6$cB#-vMdqHT+LC7lHzn`OC4ZaeI=ZYWK)0hO}s
zA;6EZ!Fr_%k%#~+WtcR1S|Lzm%mPk28;W9*DF@DXU?X7&UBvoay==af^J-@wY}Q<Z
zlle+b5%14;RL6&<#+lk`&54L10=J|w5<dokVmYR)dqM*2rSK|J>pE7b3xs~yAfjB|
zK3?vuZeBPap>=dx<sP+;u#s*77U#FCKBS;gcc{f)*~BWjvRS3t_ZJ0%$5>w(cz{^2
z^1|{Aum0a#%pFWFXOGLK(uNj2>?7xTIM(SbqI!dP@Q`cuy1YCEC?~lhkp3t!9R-u&
z#l+_ye59XyedVl_H}+jVSET@ykz2W)WhR?`6i=wmoqxuJcNok9j-3XeH|nqgJ=;Tk
z?Y(hLi~%0-xMpYjQiOwvb6>u95C7X~Kuq<n#li;HfK(I1$V^2(=6i$kYUWrm@?i^I
zt*F-qRgMSl?ka8XZHXsu1sYWlucbG|v7~cYzOWy${L;bAdcjK&7XdD-e@zUrCb~~4
zY`N5?Ee|Bei}GNAxL4C!o!`E#LfASxxb#<}-DE$WSdwbeYg9iQGri%$=8;{!HDy|>
zk>)jLuB<{@vk0wgl^}#yXis{icRkgbi|l&D3__1CWJd#DXs^w@)l<k89g|@m8|<vm
z^PFzDMriufH@?8y*c#rIqrzGZb)+ai%@((EA%>DpuZS{7LSZnH4Vq0in)iowl3&&|
z%I;spMw|`Ez0$FpYZU^$X6wux!6N<m3Y_~Ocda&`I?pQPUeGhPkm^cG31no2vZ+XO
zG_UmfXbT0=3InLKrOg%YsF!z34ufN!^ILuk2sJYFoQ?j&kG-fdsK@?cd@s2ZU3nsL
zu}_24Z(WZjQI5YiOtk{0LHE|ht*g{Oaz|CTz7zYxcEMSWh%!kc3G%SSA_bMrC=wKv
zBPcboc{@#&>d78Ax?V}&v+<(i=GQ}dF_G$te=Aaanorhy1EviDFpi>?I>ny^5c=Vm
zbR+&o`0V5o7$c!MK1@2cD+zS&0{M%-{S~H2pV>f}Yl$6Fj7ZS}<G`T~x!}q5YtSx;
zgWl@=L}^Z3Z$x3WBl$$m-=59PLnL|qJ5^hRwA1rIEKJUqcy~DWrx6e!!$uQMB=HyM
zJJLq~5i~c969gg&)aH?76pj=kfQHW{`>Q2gwJMG?MPE|&6f}7)FubI=o`NhiO2nd)
z3^CY5C4`XCD2mjonVicqqs9!NV=T)yKk1IjTCp=dR_f+kn*>!$o5PDkNI^D@-$G!B
zv`SS}1Zke3@)y+tallm9T3Rtgvi8{;EQ(WU#~>dZKq*Hg>Kp#azL4Yz2>cXiN)o!i
zI4Ymwt*5CR&Nv{OD2d&j%ro;vMe$*a(DcO8`weNOu*eO=GpGOzCaKQpoGhdg9I0BS
zkpN0_l2L7NQG=_Df*wo}QC&2(>Js;x8^pDQL=nqcEKiyYcPt{KBRpSo(0L=1rl))&
z?hYou;=@<R++y#U)-g<&__F)X<g?632xl{1JP{8hpTZ+HcH1lt76<w1$^awFsJAcF
zSTVxZ35H9oQjP(znsX&ej}96UqH1jgJXA_6=t^50&#DMwe4F}UAhby--4n1OS7`y5
zRwF_r%VVvd9k27zl0^mPwC#Gh5%z0@Dy7`?2Y~X0Lv<cqOIt|mN@1?S$)lj%EbD2(
z)jGmD(`HW=Y#9DajBZ=tlazA-T_Si~GZuWezperxBnRVn2Rk8f2$ELfCm&c|b8b$U
zszQWo-Je_b*Hi80^Ii|sR1e>@Lc=|Tv}^XJrQtB9fIn9AK+?GL`llnK_2jlxs&v14
zf8BU%ve~^on1tH&p(Kh{kGlCEk@De~8VJ>@nHFmrgOBr!h?pGg#gsnwH`bGmxw!ZM
z25;|bY$AQ|xyJMR7n%1UA`Fz0g~j^Oy${z<FLdYB90ifo{`+-NbcVlP>5{t)v)bQ&
ze67E~wTX`J3)55IG-<!_V0Fme!Vv4T;}>B!*gfeA$sa)Jy)bq5nXoT3iT3rCxjj6-
zGGV;Yg8V{nob`H2%-j#|ZDYx;{6i^S!SbdcI`Ys8TV1~^Ra$|IdGu1)1$rCu1E@FX
z9c9_J2BL{kMT{+EiH8Tl_pkio_|F<+RvZc3&ANs?^m;C=N_b!zMBfPOM1|N99B<oU
zMoYHLeYy&W3h^?;Qw~f24TEc5?9T;ihXKa7YGAihyQCoIaBtFFEMN4TIYc9_J=*_7
zYMR$taX2x3(GmWos~H5G;Pru&cFG^8*0hD(Ng9V{I<*l$@6u6Z?Mi&s%GAeBlKftg
z;Fm(=baH}r-8{Xv24GxYjF=*6l^-M?8ZqdjiTgUsPpZCgsM!@lmXu@zK7C5KQ*)ir
z9l@Qj%DXSRXNxA_tmTC;^hu%ZDJYdh0Xy9Y?7q?=m~&(bm#BL-Iri?s#AsE;w)Z?(
zUjWRYQ>2PENXN!yJYi#<brI>Hm0=WO<D5AObFEP=3Ar`04t!%08lq632fYsbgc=E&
zVUCGBYYH9Nz!_p_CeuIq4U(A&%fT6xtcw)#7b{7{{ZmQ9g7cWgdX`KQS%WeGEbjyh
zyB4In$mzlKA^mg>MPatM?U%YFpbcIgU{IJkq<xVZF(p9vh*Cg0o&&I!b*l$peTCIP
z-zAlYDT1~_afE)cWuWCDWCH3ehr`51yExBdr986IDTNNPs`y)Ae?&jUMn%DA^hk}>
zoY_FWXc(cl8}q&S$nGz>{FLG7cB2w(g}+SR$hvng9z#1MxB7aW*Q1LRx39Avpdc##
zenIU-K!X8Myx<-*E2eT#jy5xd_?&P@6OcEzq@C~DF6keuYV&n$x9<;KYL#aZh3DVi
zWSzU+>V7bFx=$lIZ`!_KrFY}}6&)<3fDz8FvY7$cT5$2V<W(6iV~#GyflYg34>ztr
zWfmz1fVJVxi<gCu;pWtd=REF3QUI>O0Rjy!DGp6S)|Ob<H`{Ksy|SIDVrD-=?1Tb2
za(MstGj?>^N^Qaj+DOVx*1b6#cEjV|it4;l8nt3W5(Y=+$mvytoo%JVPQ39B<89+L
zQh&~f5@_;A$h~!*Y0L55(v{Vq%1j#v@%{8}bpDf6y823A+&r|Od{WLZRKs)zYu#QK
zq3f&v`ndb2FsZRh#Kp7*un7aITHsTTUZG4l?mg+gDmtHWsd%3~R%M(I${47m0%D<5
z5OP&G7OgBI9E!sl(;(Aaa$80|Jvb!FaA0*Qq(_g4igS*v588M67}>*;(KRL2Jp&$e
z$BE`YLckJ0WOSEQD@Zt)8QQTMZ5$PMPkIiUBJJbJUHtvHpnIBZ^gymzwR=sNLElD~
zbJTlIYhf>{v8~f<I8bf>(MMV!jyQ)91=Zpj0zm@7qT#i~njQsOjMAdux<;cU1%fPI
zX?`TGbDi0t6diJdm+kXOirLL`>(i1huR@~Uw4vw5SswHgoIbjD`qKUI>M;;W;&|=M
z>M)X4)U<*hVc{J&c_LY)f!)c&LOws%RI@BG!4Z@1!<}>Mg?1b$x4QY#;^-O(1f{pG
zm#cvqz^!DthOzU+BNqv5R$hwQ*Y#;pIQCSJy^=JlldEg&eezMPpplGP+AoL>I%46`
zHa2aO`<|?y?0v+ZhFjfdRohtB2-$b4$5HIW!IhvxoktL-T|rJ(0O>H*#MSq@*Ozp5
z|63s5T2eAR+55}jzi95RM3ZK)_B|b$%FypAXIA{rdOAB(hsew-7C5oYaVzsyFY~4f
z^c(fk+jT3_STty+-|eRVD1H1>CI3#vLt09~`Vqj>)l9NBoe-$sBoibbrfub$Gl6*?
zrT{Mhsh8H52{qZq62N91R)$7>47NKV1R5*@LO2J2#z;O`>Fr9-2v|U^=qk+^d#Zp=
zd02BBw`|_FRhB-l*P>KG)YsM^){c)U9HU325(dDpkAz;^mt5Hk%)r?XfH^fdEZ^+o
zU_3M#t4|uRa|(C1M};i4{j_U8!~qCg6{K#s8Sd&W^oSOEb0tHn75ksIG_cMZJTa@Y
z$IP?(TXIy@3~)hEop$~X+2HwY*@GhCrKBJDXT7>q_WTFeP*xV9{N-MmsXy#If@s88
z)pokMH(`srj+@fO4HY5MfOsX?%`Sso<f=wgsR!anM}YLQo5DVLV_nA~aTW7|N0a=s
zMN~O(w~FjP`}@(I<X(IgY#y-04ST#|V{$Mm{jUZp*`|q`@!khN!(^DWuxI8j1KP*6
zMZdLLZu*YU>-Z90QKY%4H?C^N?=pj-=`AQyNW}*B6c~g>XB7+tqT-i8mbH>2IbGcp
zeOnbo4?OBqD34WG;XEWxkc`#?(QDEci{k37$0dy=g;?hdHat=Bp>EZ^(x3JzCq8Dh
zraN(Z#8k_aCcI;h2(5i)LfkjopL-k!8sA*!blJ^0&y4x?lamEpFXHcNI_B1rAgx9m
z1*>C(JrRXJ&JgD2sI}T@uVqw=zl=!@xQbb&Su@0`G;wDuSa6~4=sw-XnP{g=;D|YI
zsA=lmAR<o!+~s!v3$Gl1K)z&f<x@+d69WxQKnwZFLncaSVZb1{I6)8<Y`-Gpz*y$`
z3+ehlyqN0T_h$JTqVq%jvu{0HA`*hGNx+WBQi~}CbKlOFjuRA>DJ4$7`&|nVlCK(q
zrl8D@Y^yp}Q~`yn+2)$<a$B&eJ)wR<>AUDOrI3FXIF|lm!32VD*i0`XaL*9n00#i=
zV1_x63}l26wgA}T6e>;9V-N7GQUw8)nH(Kv_L=Y0lB#L(YZ2nKo+gB7I$L?$e5ue~
zlCWhYyrYy&nLB=KbfS5>jK|byzY{8L#!Wz*g48<IEkM2{?Udx!gC<Hd()}`kv*`d0
z{86&qLEl0j;RII93xYt|Dd!C7U>EZOk*Y(!rY06TjSLNI!=qo6iURQhXdF7fi)a=A
zR*)MiErQ&WrT6t(8Nwa33#dXR64t3)x*aPXXoQ;cUK_GYh!eLnY9pixRb>pgH8cE2
z1=SBEIRrVo(>yFDVt&S8>~o4Ks(HY$5*N_SXNFKo#8)sO@xBBWFh>qB0mcSSoPNM*
z5En%b#bF)*D(>EYQwGS2jEKC-0YW7XfCDJ~ZbQlY3%wO+xaz&xxA(<N!U)wa&nOsr
z7%F>JfWz($GPe^M-l234;q1YNfy4@vPb;}vW|=bR?rfNNT3-#p@Y@D~z#;JcflgIX
z>WAftby_LLj}-{~c;LjP()Hxrh*Df&)ttO@SoAWu%ipKJQ@B^qixUm>XUkCtUg%B}
zEk$<PkF>Ociq5oNes48!y&8aJnmJ-43p7#*5Oc<Cj4LMLp6^jJw!k#brFM)LlVcJH
zI-<iG;J)NBX6%RAnt;h@WZ7XcuVk5#V>7W3WqByf%Ntc)o|Ctc!jia>6>1Z9$-UB@
z-`-nw!3bm@j4D_aa=@S4PD`#3q#8K?-qSPfW1)On_^VpOTawc+1$N#O!Gu=R;De2P
zrv(Y06~x1CYd_P3fbj~1RmfeSz~R08@3oAKbOXX_VR;pM6{cI-8V_9N$tA7xwsk{I
z?@p?0zEu*}*4ld_&*@2jRcE7D+YNLjx=gJ5M#(|Sk9Q6t4R!@~us4y9HWLn;(ZB**
z3B5k2<pIC>a~KWCvh3;g>lTcH6f1&7VFDh!uTbhp4pOnlZMq-u6XC*#;_@qXQ_8%W
z2}vZo@I#+ajYZ$i03^8g3nR&_2zd>5Ec&9xL7#`yY*9NwhI5%g!jNtEXGr_;NCx(C
zETX<e$pPJ8q87H~DpU<Dq#GqXP(XKw@u2a(jU3uF@u0eC=;pP=^2oS6=1BmKdS59x
z{vqH|W3v#H>D4x*IE7(MI`Olgpv{h-NqIri+StRIf94hJbK?FbZegmN2Oet->wQOv
zZuqgym?P<?3)U%44YY49zISiY>i85Io_&9n8#J8{>HESOqW$S7SQoZ#smVu#=kFq3
z>mjf2t7IBgx%tt=$Ag74AGNn$?wP-S-Pd#J=8o2Xj?oYhO5xVt@?^w!=;xZ=n)%1D
z(eh0~q3c=HuvOv$;^<@?AiMOfbcL92&-wYGmxko7J(-J*xAk}a8_yNZrtI%$dunY!
zt1LmSsa>5zY?Nbzuz?IyDw!y@?Pi+Ao`SAp4`?7<nH};Zt3D-TnUT~~fO_C_=vcKC
zq)10d%`4b&1|rppR{pK2r=}G8*T;+U>?RMJ{`lv+@4QL%xd<|0v~U6#D!<?0Jts=L
zJKNd8)(b4FOW5j@*^I)s2<(RfQX=K$aC*Bc#MglZlbIVtqs;S^LQV!TRTt0|*MHNy
zPd{$HWUCD+`H4WRfiTXEK;AD*{%>@GpRD>B<JynAwpZTvkYWltSe$({-hn7F78YHE
ziGU1Bw;NSChbYbm4Acj|o-%|y5HYM-YP-=Lh0;RQJZzQ3Na!43+?I3G%>qkKnTAHV
z*4<}+*HhF&Dw2IJ(!jSfl0I*1X*Ci_u6l_JCr!*VNTjAvv)0C#pW?9hrm5B{Gs;Q$
zAd@9AmL#O87l3pp8t+=`Q#3i{?O_a46{+W<sT`imC*y`EK(tf^7mAWvKis4vTi{EV
zBBXtoG%nM;#H5S>S8os1>zq1&MWM;C=K0cJ<cCM^3Sr?xXwH|26+?KvnFZp&b{f5A
z@_yM*?*k43LX&ig#d-PX3dJgP+AbJzz^YuzxInluMu6AGy10g9%!kPcagtZwG=LF1
zQI0dfhue0NBlAW!!(1!4dftR|sz|rTY5H+#?JFQ4O+!{POD!OC;Wxd?Z7(r!5%R3n
zg&YJ6YX3jZJmmSyFmzg?tIF<;&Y+M#eX@?LmZCIh0d_-mzl&SV_jTKX&Paj=;G(Mu
z+GwK&z)$rLVi!dmOQioBa@W!XH-9h08~WD^&D_q+o!PZ-<N3Q=Yl};^t@YERy<)+e
zu|kqm$C3h0g68_ix94I;eoHpt>4I8B9~;&P9`I3igwZE+tCiFFKV@b9o1b6;8FMCM
z1|TXexW07@QqL00R-?=a-8|fZtZ7r#3+=}HX}ld)f4hGju>aztm^t&y)!^*KNZ3s;
zWv&BM&BFv7`Y%6X&ivs0$m^dQ-@o@o&2c-A6=%&oP~UNMpoZuxWlydkw(4ybz!{wt
z%q{Ol*<3Wu5*(BmTAO`G^F`aaH5z%WRPfvzdi3RF#AfKryz7-qAAm}6J^EG2u`7A6
zmBiLjHtGDRF!T~^42I90*o%hm4o0$~{YgS4oDdi7S5uqO-zZDOyOorx0U=PL@M$Uj
zpIS?)l=)lhUUokXOxF|3g6VQ1R%UXQdiMz&@<T9BC##oEJ944q&R0R)Ec6tg{XW^L
zb-CR~`J%t2{dSX38gok~R4?uT`w~>71<B6r%3Sl-lTaxH?^t{<2}ofJQKsr}=+RO+
z;rQpFtFP`;?DG}2W!3sNEN>ftS?&BA=eFu6T`#`b%6Ez#iFL#3x9$`${CnfcF^Dvi
zwoIIZ2?gH|7GwuK89;!U4q@EHkDqsFU}wnog|R{D2Disp)e-@yg;n(=AILcHDL86P
zB})iuCIBd6;U+;?d9}#@avzUAY5);}DKa!PAmB)OzTT*ZK3>BUBM*lVNY{Hzpl+(4
z#$(*a`{u%&L-2*n;AMu;WxX~D1*@@FnX>W`YHqAlb8E4j2>|Ma*N6Aj$b6Ad-TaP6
zbL*?!&&dq^yzyQ)-nwJSz7_F1gWg~@&Re-=Ke=WBmOYSE@OWXqrWb~8UtCWTy{Icq
zXZN~!n^c8<TLUc8X42OUKAo|<gG`J)5_M+`lfR0j)fZQ59D*rB1*sOMy+)=|Oroyz
zQws@9`-Wjj(YQ@3$psk*-$o=L8GP#!7$;kBB<2oga7%|?xtccYyo#h6s%daWgvd&F
zeKZ7T?N)1$947TauA3yr-u#$7X@7iRQg*7`-0E)+Phv$=Q+U9phEEGl^1|(YPPOCV
z1Z;Cp?KO;fQ@=ij-rV9vf-D3F*)hq&=A-$9h1Tm|MDXBJuSk!^^LM8@pSnLkesm&M
zC*ev?=6xnoi)fnaq_>uUgBRk!=c1j(|0J~)eETlqc_3C~R9gmp>A+tk>@3f7soz%R
zM817{|GoxcBzvc)=NYJ7=Pv#zweBWu#Z9c1M#$0`rM*(&td@9+up(Im7+sr}AOM>B
zSvDra=#ZV+p67zJD!E@Au;j@L7w;D(+q`_qF&7YKSz-sC>;YZ8Y$lyj*?jfFuaC?C
z%jiqlPSj=4!!!=c^FckNSeaN%CQqY4tp(=i`rT|~erdmu%%9PR%VneQ^Kk?}@z=6>
zuf!=I7eD+>BczpH`s+bjaqJ3LY(`%jGyp+P0LFbem(X}MIc_@b0~;$o0INfN8|4m{
z=9L&4pgt-M57APA&xNax^sv#$X@gfwcSQ9+K%8h;HxXZeJs7IRrTm?sE8wQk37C=j
zG(dp1!w@?bdwOwbV-fH}xIiut9H0Upd`%doEjwmK%ArCK*@)gRjyBJ2^*DX!I8st|
zUG|E-)`+*~5I`E`>(8zgCy<v^FaH#C#+s|vKGuOyzZuz#NxWIcE*Y%UkKR=S5q>|3
z`wB31Wwtx^Avi9IngN<IcaqhJXZbwR=QPU$ZzD7k){Qt%1o}B)OOhCg*<~1k@9LYq
zsrvstJQcWOjIxJ&DmmZH`^g_XwJ*I*Lp(458oKFuI6C}mP1D!7wBK_mg66#B9$S9p
z3EYiNQ+RuV@vFS;K#%KhKZaPJE4O!m_*(ZVz02Q*o0YcTLG=s-8nu?mBhOpQ0#-`y
zP1;{{SN-pO2#7Vk9DJJU4UN2Gvk!EG2U$#Kxm`QIJ~?0pXUASL6(Ou)p?&*WYvAJI
z*5)pLOCAc(n?C=7Ho(0Zy<#UT5BtOUOYYyvQO}P~udM1J$lIinci-*eH;Tmu%#dRb
zdyZWHH&P>>JL*79W1#JN^+oKG!iVB<lY92|Wh9s}+G<bQcXqpNRhv~=jy3n>y|twQ
zMZ~p`Yi%TrPX_(QXR**v+tRj^cRA#0?1mu^lC{yl-<trQBiE@h85(a<46%B1Cf>au
z24s9a%0Tte>7a9Pxp%-TL2h$D|J0cGVPVA9+(rlg;&fe*#?V$njjwN=v6NPKUcb+T
zfNsA*Pu~L+48=`DX$BT>c-H{tA-x8mg(u)S#=8#Y0lBMQ$1<<U9}(zp!fWu^$?$rl
z8C4!DZG)FIJ3~D@mXFG^nuhX*8Cfpf5T>(AZf=UuNh^vZH^*8=Px{upu_W3tudOte
z@gEys-5vO?m`SSQlFq!D9VUukuoZyqG^n(jS&SuNaoWec5oNM6*IVB@qaP-{ku(EA
z!0Vh%-g(5FUfSoCVF6fpWVcrxFjG-YNk_!zr{lz880xjhI!UAKtbd7mw<}0;21!bT
zGitfQv6XYS7_T505g>})%4EG-q6|9?E=KIVN>~#{xLF7JkbuZcfLcr};F9i|ZL2J)
zU}C(^uFWNvglHj9Io#J<oh;5)3q*+%g)Vdv3BkGDEJ>-{6M&VuvSPWVk1XishsTXV
zsI+~zo%*e8DJ?(CKte|sa7)hTCrNrFlA%E@$Da}2+Ua+C-v@#z2al?^!#qnIvFi_3
zt2g51ubkuhB=hv)qoP*Xf@<S7P1j9fO-jEFaiGEJrup<I&GcJ;>7@VYWdIUgZ>Qe4
z**1QCs$oRt$`8fKR_?hETbXySO=sS;a|j;Z=w|=)S=V~~&u!}&S36HAQxt6!XqnKU
z48F)3MefYleZ-dW@2iUZTYR;h3GH_yzelz&WSKG88aJP>LE~!U$pTwTffBci?#BM#
zf2r#fIa@U=qIfF`TXPzN+Yq91utr?J%&OQg{oGCv_ny9=*SxItGW;UZ{aq{*eOxPj
z(_xF!{?FTgo@~8|BS%}&nSG@a8?(Iql<{)}ypO%J3tr&AKk}e5YVW;56hxh&m0}(~
ze~Uhp1WJq-IX|LmH&x!+Qi4kQk8_-Bbj2`Ri{h73xSBENc(H5$T0a+|n5L~uvH{{a
z5c5KgF4rREGJx5z6rNLh+*Y!94sC(njcjJfNBzjo3@h^}!(ncl&-S3ae}@eehj@^I
zfh8|bhhX`frYExje^=8`+CioQ9AUIE<2Q4fjS&J8hT(`MCkoPwJzB}NzG+Dgct=0A
zn^|QuMdgpTwIQ{Fuoq>H!^3yfM4O7!A#IWD>&LWieS{u3QX#Ap6CsP(3f57z$6GE&
z$@EmW?`-ZG<i{N;j8k%<x$Yc$l}?7q8P~Q%t&V+D`P#H~_Uv`{^E}H;xEQ1R6${<A
z4}1#JRiDIIb<R~O41}ORd5Izkj)eT|&1QCs9Mifa5=SskabMFJ!2*_K@cobRXsO$s
zM#W>sV6y%L60F5y%w6u8Tb#9etW|J~b?l&?&*t|BbPlAIB=_0ltVB!^)~a!g$|zyH
z)27IV3_6Y1O@bPFsp>i_m6JO-)xjKV4+$?~Nrg;TloPQpBW2RDKDIc0XYRT^VP>cB
zkcTG%(O>S^{2v5_+voAo@+j!x@~O5LJjdFiafN~)Do;Q4JGKI~ukDI9t+|&`ss4%t
zEd5~#akAqmA=gz6TOh})8FAOJ0N+T{@(T_aQcS~|f2cYesn4UCj=|^>_u&(&EXQ}+
zu1r^h=6wVE&V;`_cI#rEWj<w)Vjf8PLT!n?j(sDZQjFAMvELzQ9gMgIUqGsxL{2tS
z_hez5=qIt+b~+^wCVP|V{z*md#{A`zCGm>9U6Z7D^qJB9qyXi0zQ&b4(sFV4a6l@F
zW5?9MJr!D(nBSS<8cEJhBvlcmY6C2NZ7@^hjvV(<f_%H{U;TXWD;r7Hi)1E#3sVEb
zgxwlU52D+x*W;-j^M4wo0AaLF)`rSxO-7My;tp|*hsebpH<B%lLda{%zwgg`eo3PZ
zRa55w?EhNdVygR!Fj}uvFxlSp%0Pjjn6&@FK63jKg{-;@7SE*KTq8<KA?_EgEK~hd
z*dj^6a>L?d)mh#d(I#g}l$`RTpe&25kizL&5$!WT3MYGin25*%*=Ro4(6NN)m8yMI
zM)5&xx~rJlO*gbe!;%7VQ}PTTof%dTVk6Y?70gQD&v$(9h_wYzag!(m5e}(Rb%LG*
z?Z%=T_fL7%=dbkdJ@po0{>tuDeD+h(Ds-&PF-}zsywtsPKj~NSjV@j8MEa%1xOlm8
zd+%f-_wFDU2dm<q%w5ij*~H(Fwzbax-6rKz^$(S#wv!TwEKnhi{w)gUYMBR`WSF^3
z9On9R_?i{Vrp4hq46+ogzhD(B?ev97A-WsjhGs@fQ<fc<JTE_*flfxqnAZ8zIjIu-
z3QIM*v_7>Fnfi6p5#`uU2))@XXBmF}-rVZRaTfF+63Rvie%xL^>U?oJf7+DBA4!$C
z;r1}K*kdUG-QGV-c{8c<m01KjRuA7d3vWz+XMO=iQtJ-0rAY+@k2jc^>>kscY>eaq
zBT#W;0wL<jM)(WwWw4BSs*Gc36Ey^oG~=}-@@gncb{0he(D>AQ(d#+^PoN#6I4GtJ
z@#(BN6NTYRF3J>0TPgj+p7GSwU3Zr}wZXL<PswKcyKO^8c4fTSDS}DE8uxhEyMHUa
z-%Cn7GP1#(Vc3@{<HR*;hM9b0sA|s6ey$bn3AIv#;}s(w8FDk@DT8=?^GA8TA+47~
zmNv__ZR%OWW0pN+jE*dhpC6A{6vHX`<H)V_u`O@EL`HBf;?HNVazimf{t&y_vm-NH
zx2?qhhbkI8cb9ES`-*~NLO7@Qw>{J5#kXd{)Z7`^*|JW-xQ4d!^oi&l+g>yF2x+~)
zQ%I6>1|23>44t<LC2+i;-L-Vug@rc82}tkxg2ygm=$tUC8;qq9C=XJ^TNVKQZ)pxw
z4mhFR$F@nKTVAf%0usk}f)Thr${qsj7wMBOC)uS*2$V<FlgD^Kps}ipRTY4|LMDLU
z`u3~&5Sba{b+rA-<T-SDshPf)U!XYiAiWWnKh^Vms>Otj>a_abQFqWYyS5_x>C|uj
z0Vb!gAxoM8p})6{UnKtdXR420K0tIK|BbcH*dHqcE$2Q9`>l^E&vX0g?x*!v^nBH2
zwwZ2fu13gvF3CHE4tayz{AhE5*9<*tphfWymmNc+l!W_Zui0T=n`XDyQwE?MXx>u7
zDxBXs1Yut@T%z1)LpLB>UWgDlBpP~&K88bRh1<X^R{$>-mU9Hn(USHpu5;VX(P078
zL#1X#2m~^|WAX)R>_>cr+NlNmTS=~;(N(1BJ4HjN$kLm|h=WHX6p9DmnY3KFa3I|e
zIf}}BcNOz+Y}nmtD;}h68I!G6uzBNfZb-5F`4>|`Xw@-=M2<*|G6#ZHaF;ITQTsNI
zO3H*bp0+g4)?WaFo2QaI8n_8c2n?>ZCi%D^Mb?AAQ&=(lbK?tWx$6@R+_pGU9IGY-
zHPuriNLMtLf_abig>yzuTL>NW9<J|fohWThA72+wqzi}c6$XE%O5>OD=$<CiT?W5#
zAC5~>F)iMKGE*(k-K*k^8|pOALS>el`I|%tp7)3R|EQnFIdQGDHO(w`ax|%o-VhuS
zR?GIWQ<pf)iHnid$U~<LS{}UZrO^dEahgBJ>MiwGpkLU0Pf*-p=J!xlLIp%!X#{zK
zv^0h;S~V{&GVuRTC!;sj<hryMyZ2tYdGG#<m5J_dOBQ$R<>YpaB{XY$qEDk65#KR2
zKB29W1j>t8v#+SyMw0%~3!`JbS>2Uy6&B{i%1WBYV?yl-_L8@N0e1K>`=j>*I6SE;
zh?+1@H-}bM^XGj1>w_EVLZKXyR-jkAtzqu>Sbf-Sp4eAi=`G)VD|c_jm}k$<8^wb*
z4&#*F8zy(|zL=+(@Tp=Z<AfMn>5$=UG=lI%yNKs^jCfedO6h~TM>8Q;9#lT-o7Rq0
zB{#MAFo*p8Zr)d+FQQTC;*pAfxtMa8`zR2PkV91abD<Rd*a@PpAG$dnI2iW#l6E+M
zQisZd`<_1R{H1r%3655mI`{RgMD_@8))QzYm((!S9<9JVEX_r}0j1W4Ml5^g!+XP2
zTg&w<i?n$TXxFOEovw5!A*8s&i02u>b|y&+Fy<xDn~{C9JF}8j1`r^`2Km-8$A`Jc
zI)FdV)t2T8&GSV{63Lq95JrF{VcxH+H4NU52(4jPwOQIoMyxkk6{T_zsf1yE*fTdz
z18H7FlF;rHq`Kxps!?cTS=|!D<dx}k0b7#_ZCOHKVH7(Z$)G}tDU^F%u7NU0P$e5L
z&!(mhtunUIP|=%nvb3wSgbBnVDuQ^y4;C-u?}^ps#xP9W#*HY*jNmjITPrPKVI`YV
zk=nJv=0%vg4<MboL{J2?n^DOO<~hpctZJa932>>kRuLdIbeK612_;Y`xfM=^MXf_b
zv&hR1g)pic5QR#+(d?iybvADUVSAmc`#@u9gWiKEmh~is8E<$R>J@#Ta*~}%zhF1n
zuIgBw4cF^93N}h^+V=K;g?Vj^Q!i}WRPsCno;Av^x(1yfU*pyX<Oa<ZEWdfW-!&b#
zIncg)2mu*8{C;9_^rvp`FfbY7qBP%Y`gILMVwxOR3?4~|vP+azeyA!YA;0h{;0#ZB
z{iBsr8)ZomPoDT~)j{Z%$U8c(YSm79X-Dnd-5C^|{*+ff1C?_W@<bI*E%v0M@N+!C
zJQ+XT4zB1=Pb^j94x-%|eZOKvI`C%aEz}Ga`R_THMvlC|0bU_w#DVklnLwi~z$Z86
zfM;pYu{&5Td_T2Mw}<PETO=PunAB9*vkc6;{e$|sS`QkC5Po=1@}Qe%zk!CTkB6$V
zgsYES`;yss5)S`oT_q;6>BwG&=3Vv<CNaJ8#R&4BV~fW}(7LvCV)!fL{@HNly<z~x
zlRK@u{9O#-5#aQ2;`*oa?&H+r@L-(4X6YZ4MEg%6I1OytYiTsV2K*I3t<)whbpT0p
za5A?wHwlGv^@VJSKMFcn?lp1o&E&?22`s#Qm1<r~X^FdItwH)p|3r=VY*#i|2nStT
zhS<`6xnV$hwInO`w5;At{T(vJoTL`4LU9xnZqukgrvhy9y_en@>Tk5Qv?4&86APHu
z(ruz!T&rvB5r_krJjo&dP7X~fqh!i7oxU2<WVQZgh5-p<hm-0E;aJ5+*#D4q|CMWU
zf!-O5A~rhOaqx*7h9K@9zfQG5E?}!^MT@a8DTtj;3|B`52%M>qF{G{<js^8r=64ig
zDiG4@Scmks#L5N>V-64|ckq<$d{SQNRX7ra*AQ6X^mh(ya~p<Fgubf9XMI8U1S5nn
z(Zkym_Tpm_R|j0u$!~|r*)weP1jpNXE0@K(w8qk8IXqe<B1M8_K6D|jN<juJC3YQv
z2w#+bY)~*IU<MAKq-8-6D-3i?Ac85t1DF}u3PdLY8Wba+BG{_P3rub-fCN5}k|P)k
z5`r(Jf&(zP2Qo}m$X29uQI?N|gqca@BmyP{B7w8TB!qzlf(5l#9@MjOfC4~apo0^0
z8XkfINUe4@ED8(WD6-0j&gz(OqpV*owbpiuQUaw)`o^AjraV$DVd(@eMcM~2uu99L
zN3%Op?@U){PnV|Yc29)fTI;3mJSRsY3pVd<k5^AlQr%hRE3Tl}Vv{xvq^h(RV~796
z$zf(>p-bAGW{PA15OXtU#`jhwSv+J9;<1dIxm<vi)f7P1Vj3^vA`~}Ss{~Zgh~Bbl
z5pkw>-l$A1V*Fqb<ODYs>0(+uGXLT_>bQw+<~dnhOU`?r50WpM65b$vL5{6Xd!P>M
z{CqZTHf+AdUf8vycEbKhLI=;Xoo2`zPQddwrQw+561Tn}m5dj;K}I6)&~}`kj+n(-
z-CXWZ-Cvl)60qkB@r*v%ZrN94wqIxH_akZKCXW{v$e?mco>5I2gT=)%Nv$XCH{ZIS
z@c3k}>Z$9RX`04VV{$GIo6q7RzU9hGa#O4vexV4Oh6H)30dAdO74Z1^TlMV<cH6bv
zT>k+OU<2fRD0LKtK0#FR7J$pMJ=pv3nsJpmvEc=5YTp+!!LjcK9e5uzF=*9H86Z-*
zAylcfGDj&`l(r_&kqV-D#S#MQt7ae|$yKWOLn~EUTpwxH8dew5v>Ih{tJN4^7;nzV
z9Gs|nooreA)k5wFLD(uNIkE=9taC?5u_b4Sw4JQ0)#TSy78p<aTKd*fK9!`ot$I;p
zgtTkXT1_jaNm&>K;8cKWBxA)ysv68b4KRhGz)g3*E%F|WTIoUd5n@`AwE<gwUGw*v
z>rFcE<VH&g-Xul{iUG-N7u@1U&}6>M8^<D<WG#)P!$@m>Gn>b0z@(k5KtZCE$+7~#
zCoLEu8pRohuUV9<mLo`c++{lqiIPC|5D6zKsG!4uDb%+lwA*;fea-K+!{YB!lbCY!
zX;HnU7qsHlSwPX_Wo}%;{8Ph}(ymhMNi3c?c=r3~v;B3+Rt>{}W_Y7aVnNryprS>T
zE)ok7Zai0$1d(%A);|IiZ-snL2@I0{A;Jy90^9u(WtM1eevn#7Nd8pP;6$P2VI9|5
zJ}O88Ktu!4I82Uej{H=ZCxk$yaklcJZNTfC_`ibCn=oo2bXu_=Rc4(Y{~Go8fEYJc
z#7r{BFN1LegdqNU9(SHrr#tUI(T#&VS-2y+?zYnY5-OP)-34<g1dcTt$Z0{+Bfug;
zm>E-zIMc&ZU?=Q@cxAT{h!RTev{DMVVpNNFw6i#iQHEfEzpcf_V%*w@W|kA3TRFB+
ze%J$4E}ACdi)8uw&wH2Hlg$gwx=}<?6qZBUaiF${mlc6w(8s5F_C2*7(&-od@IFLb
z@?<@}#Hc|on<0p@6#?L}WzB^H8fC^75Pa$|0Nkvx(W+-ojwN0bt0wf0uM3H(547=4
zPC8vCeAUvB+f9D&qYn2Wj6ethc(5dBjoMUN+e8QSE&PP8z~&G!heJu~$(%{3;zV?#
z`CJXlxXP+bwzTVWI^y8I#dY6!Dc10TSUt~abK&~Nw6=1rPx-6jd63(xNWB7rIh_I7
zhWF}iQE97po5b!pbA|LWn^f#%8n6BR&$;xCxVa}SkoH8wYvax!JZi;imZ7K;<mPkK
z!DMyFS|w4L!X1!Un#^R)V9*PKhC-3GhK6BL7Lmpy<K08Rl^Sx(F>H@)$1=9Ylycbn
zG<76wIA<y=n*kZ6aYX=RRgMI$Nu-gY#r>c8Ldh%`v_+)03q`@x26#D>+lTd5-nx1?
zO`#+pcK2KE6G|K$BZu2M;~IWNp;3=J9IGTg)d&g3iq;0^RWg<Etcn_Mixp6)0NsU^
zazz}I6{gzQ@skIwjk=~|7{`30jk62mq;kba<y8c)HUkK~!t1N4I5m$q#!5=9p$>A{
zE#@k^4}ce}dWJ~>u@bSvZw;1BBpdO3?fzAMc$|}lkc6%65G5K1?5*4*dgK+iN`bcm
z%KQfh+KrLGB4%D*#o7(B2<Q#G&@G!OeepixlW5*|%PbQ+tq(0f&ing5|8SA_&uyOg
zgXsV-K+wO*GQEfC3Yh#J-kq!*8I8&=6pH>VVd7WbLG#4FO7glO8%G+)Pdz$1oj4;H
z)tA*IIz?aa4aDHgnLnn+ORp-3dNa~==Zr-|w-PpI9>ME67oI;T_I~p(8WM`Xc|+Fp
zVkRQ;5cOr7&NlA*yZhjiRAX9iy*2~#Mv`dXX$4NF+f(Up$w;AtAW%<HY2Pg#!4_pA
zA<Gg92#2{V<9?xC>J&yPq|gtoFx*OLfkx;|v_yg;`fdFNRKnz|7UKIrOZm(haQGZR
zBik+kFf$L-3hdCKzZ1D`lxpAsMT2|Sz(LP@4)wsC)PFX+q6nz;{9`lH2&6;PqEZzE
z)nPOM)>`#pefbTm(0h)jP_~3`z2@DwTekibz!qSA(5b4Gs`78;b6u+xn#o`r5ixWp
zzi2bcQ%IKfL#8)r&RTU=3f^`+fKHweZWOLyN_^LfGLBb!i&U={hDEbMm1Iu59Fvfv
zgNP=%QkVpxVo(xm$AQQY^UCGg=@9vJP59p(Z5l$u=_cpL(;YbZofq>b35QYCJkPRB
zR@)Z1w~rAESt}thBiXMZYhmVypiiXLWk7g5L95XOMEbtzq+5yomlyLw9FCZy*&ob;
zGM(?PNMxDKc+C%LY%>~c4tkdclfLtgj=ry>AJ3@Dh7nnSk{Wr6y<nf5y3OvaT1J2$
zr&rHfYZ|EgnA1^8pLkDodW+@k`d0cqXLBa~<2GuUq%}mN56X~*$~0d!s$#rT{%U8^
zu<;9JUKwmpT%_ya*O=cek4kguJGEte<bTz85FJey?OqGM5iW13gyHMO7aRt>YF0LH
zs~i~~+Qb3UqC8;kZ%koaLdLQReFeNEG{+)E0s#d5Q?vcrJsrv1t1Y9)irZ$`oEk>p
z9cg?ao=m&`i^ibZJW+74_h4Ac8VR!j%`f%0Cl+!OdbE0`?Gh%ijQ9us&aAUCo%hSS
z*?H1S@3a=89JLB27)gN+icfrOEtF#l7UC`$t$S%z2<fe>=Jcy<-_A4J@z!F$+zo3&
znJZS;Va1P_=XpzNr)jGGInv6K*>?+kqm?Sl8IsywoDNV{^S!qC+uM)D$x*}o0>Ud-
zO^p9Uh1k{TzWo2f#k$SH`OKrnH5i)u4*a`=`DctIn!jW*Y#Jua#yoM-Dn5O2hfJAw
zZ_8=JAu@5JKw|}~=A7QTtRh*{o~X=~)+XXLA!~Z|)_f!(4u_*IlwLEu4Y$jkbf(Z*
zO07oxMkSk<3q&`BnZ>Ez@B!5@I*lu~CKqsU?9e6G@1R9W{=+%{&9|HbGvs?5OR7b@
zZWk9?zanht+*vtH^iG__&U$COP7L*?N?dt)Hc26)H#0Yk@3^N^s015|XlT<2Yp{JK
zI5LQ<xOo_lZcNh<%;(30UOC(Q;L{V9es5&;jO=85{#6wWf9d<h|I+-gQs`nFdV}ul
zE>Ci(?JeZpB-?*+WB<(vN`(+&1B)E>m>St$za7UUmw5eKv^uzVp(#Ruqm~fA#kMXC
zyj2X6#LQbPHieNbDF~PtCrTw;GWrFEFTis_2@F;^%0(G-2QF!QqVK3iw(1o*>6<fY
zV;wXlsEg%g87r-)mm|1nyI@k_tSgzONQNyPdL<m8w{^Cfh4^v`Fy$Dowjvf7Hy$B)
z(@HhXaB<S6h<`};<JPgEB+Zo(z~@uba@mc>rpu8K$rQii5APtJe^lKca$EZzP*G56
zT?7lYvWkHnH~AA)*VlBnb>My5*{;=Jgko}Wo%OUY(b26;ZqPZhn-7PQj&xwKm$s+x
z`N7~ITO|(v8YCf6dw{DtGokET5n@O4T@{e9Tsr#xR2f@MmP3-JI4;LiH}o5tk3GmW
z6$+3Sk=i_%5<@po!x(Ze38VlE%iIe_OaysI^J)IPO6fd%JIm@@EU^~|Q0)5A)WoN_
zjI`xhlcbW+%Mp%Wf*T)Z5vQ;a$3kVUR_oXaTKIUS7(H8!>#ma~8;F(a>QUe_{%qj!
zW|P3k^Je>?tlWrp>m~dwYV03Dv@C6n99o(jj0cISe2s5>l&%2^-^%IL=;1}idb!-;
z&ZEb!Qu(6?&*-gJBylNLK=nRu&YhG3YpdpGH?UmQW0cFJ^PAC65tXtof;IVb_JR9r
zw2T*Pok*22z@o{oP&j{0v^sp@nmbxJ^WjKo*e#{=Co@+1nl)?~7T9pz7_p|{5@-DV
zDeu%wbzF1a96o;S)L$Icqr81x;ROLxI@0(7@nhEb{v5FQ-(e;{(@Z)oO?pqp{i9ny
zW4z6ovkt1xF?Vs=z8t2n@H$AMu-}mBKKX+&LYr6Ix;IdLZaR0$-9y}az%Pz0mM&KC
z`C-Y079X-TX8OM0Y}H~qvb2}nKcvpFk)?TV(m@ZSt~osS;FNCW{)wZ00@zV()U73B
zl#&dlODf1}q^nnZlY{52jRI~|D1>2EytI##ZkhwQQ>4ur(Dq7mmn8{2BA%=GRZYWd
zElj8|54~%98M!n8433c0^u8p{rxy7Gg*8e4-v=%rBGSL}oNF54H=v$3<K@~m^-L7!
zjSt18Q;YK%O>Ed*)KU6}$OWE7E~hm`fJqGt-=Xgr=*-Yq_p=sSP?2kdlB7zY8rX`_
zi3yb$$GcmGQq!zsA49HtR_lj@sx<|yx|Ll_hGio}NI(YyIFZIGn$*WDL1gqQ59Bi3
zUP7eS3Y}YZ`^712zI@`j1n%G0+)k}3btP#Cv0<VvRWf0;ft%mh3%1zW>kuK2@o}-Q
z3=xl;-q)fAUC(H5yUlU8-f;CPT`i7I6(}h+^$)ZubyC|~VxRTjd?juU-nK)*2|^Dg
z_x<3sRvmwkM~4|}9zGCZnPV*JVR?A=6(pqn5YT=U2;_QEylFfr2LDrR+$#C2<}wOi
zbV<B%3-LIxx>V(Ib=EzWr~=fg-N{9tMl_Pdhy?CjeRv*TKL+ow$e8Y%gGSWp-6B7n
zFR*t;4O-C1A={P3##!6&bkdA<W?DImC6xvDbp-Fx`RTEZ#O+8TXLiAmxV$#Uc1Por
zHP&RF+3oGLx!q1Aq@ND0Hy_M0WAH$Q1P@|ErC}ej=CfK)m+y}-F5C;S3d<@-P~j3R
zghY|92(|LSvJ9cA``0v;bgrO*Or$czg}1qbF4NABH6Llb9vQ?LwzEm<m9uw;kn=@h
z96ZrDbfkgyt!m{Cj1Haq#;3+q=H+v>4S#zzhk&o2?`D60xkkKkJ@I#L4*&Y2ebF|~
zycIiv#`Y}zjh$8Q!{K*79r5P1PWlg*l;2%C!X|$g@j(TeP0bb*X<P7Q7$>LS-UvDb
zt&JuhR$4v+1ZhgGX{J$;DfvkbFuI+V0IC9#As;X%N`X>ABwAWA-x??qJ4n%RJB(%N
zNF`1OUYKD$ZIl~6SOuoi@cbhOxJaNs%qm7D98LSpfZe{C+kb2@InX%wmC~X2Y?_4-
zq03PRmMmnmvNWZP>*u+q#59RfIuf8>kLGq3i(>mI?_xUAO=$Q|9dV{QNv+GAI(Kxv
z!VNoJ*xI|>A0ecUn@<mM-S*98t<zYPVVYCQtL;<GgD*dMery%OeF<XGQ4f?N_IJ2?
znd}rxi~;skf5<d~Xi6L*ghJMY{u*iSYg!gC{A(`xR*c-6<1o4Uxq+fuCvHxd(1G*U
z@=#)F?W@4xP(sHJP02btzQMJf?h?y}p-HY2x|b6KegsjZf%zu*8Fh_%;a}K{YHWFz
zM%g6bFe6qupVR@XdL06-F*+sq)0PWT4u8f}THIa_K3+>OKE4~I;X@L5AI+a2g;b8D
zjUq{*fl5A?Wk#mNa&U9Cm^FFED)21sFPF>|wbFTN+OCG^#S|a3yTJ?KOy7lLSIDU|
z9~ei_x=rWL9?e`jaWQiRo*(>R>@t7<+y(0>Ub%^p6rlyMfq>Hb52#a%^{T^Wn#T>7
zxy6~<3~gooeDdZkJw+_CXJ<nB0HU}AVc(s9CXAlPHGU&i5lHBne8JD-D<CBO83D(x
z#c_BZE_&XyWt9SW-B$sO#fUZ1$cTL{vQb{1E;VZ^zr@+pZzV!&fK7K~BDSm=tNZL)
z&w8)q4yyG+xL~SPAB6#lukL&1cZ5aquMs$CoM2t&8r0jljI)&vm1&9QX(5LyM5l4T
zWJAVc)_9VorB!N&c4*E+Lso$V_+6N7<-qp<S6_k-F=e@W0&YMkBejdV54L9pAZ?(K
zWms81E(YN|zsdi5$dR?PX1#0Hk4DfAIWr*ORB&ohj=WP_a-K>SDaFz$C7Hdjd5^_v
zdm2cU)J=>i5*E<by3Mg|)?gt;hIC0FqG}C--FQ1Ce7NjDNarQydS<1QmuCeKD`!vU
z4Xm3du#Pox=bK$KKkQDAp*fgt$E_naol|T^aqJp(C4U!p$h~vdTVLQxZ6Y!^WAIk#
z+jt(wgePDJ6nzOI7vTuQ4GPTMd6H26CK^G|#7U&Byq(2uZUCaGP(OTAU<JQQ9h0CH
zN6aT)7Kej5eBU((NfTZI2XLsuBxp-`!lPsUrS-=%c+$bqez0CDIq^1>w`EWb&%-aj
zmF<VH7l4d70jj<8_p}A@?17{@WL*Id9T-!^Z#N@sB8ab#a)qg0?X~VwCy=b-hrPva
zD68UmTt<HTG_$p%`Qgin*VFb-8fSp6oI?J1WGW__jbyF=0`WZ4!6YqgV)3k>7?9QS
zZtC5SFef&6iSa7G7-;_9u>QS>l==D}kuq)tf-aDDp+CXAYs}v0$%t5zDot|JG;`*K
zlcrfxVp)0Ca3;1gRk?R$QKtlQ6SE9>dA7<SMK?*+X6C}}4<Q{+bxQ<4e^zN`vk@S@
zC!)JkzLn@O?-U1<KpJ<bwCd0EEFiMfX=aG^##?!$<#wgnt9L7rSAUsUBbBE0z>f6t
zqK%KqkRoA24YkYpeuta=2j4Vi0E@z3m!TGFE&+^9Y?&C(kVjft81>zJ&EnZ^{(`L`
zM5rnkPPGI=m|B0K@%}M`S|_5Z8^)|pa1+(VT@XbR+58bm->z6M&^OZb+l=+TfLM32
zti2snX`6KWP!tYvE)Fk>KAjMl<XqqX^1wjQ<y(MIHZNt2SYk4frp!O==|sn}1R-OM
zR6+!CAR@$k3zJ8Z(URV(fawaDZnvsDx}c?Q(_^kV?VRp+vd7=}CI1E5=AuF`iq3Ld
zIn(yk)U;;<w)*^V#bC1fW<dKSt=i(<G)G5cXrB^N=?EJKVL_a^;hK4XPaPWymPZhQ
z3i?fppf>_k!Uzwi>+hCFq)2ccD>|EmTj6cR!b(9U8jWkM#A#4Nz(`IJ=`C{1O6Kj_
ziMTsa<8@L-L>paGX5!_E8jF*)4Q-*x_!d0C#HE4^LNd}}(Yt9u_fyywj9+pYX@kQ=
zAi7+B42GKZC~mozn+h^NQ4eo`cv3$l?ui1O`6uV>#euXb@mU5kaE;DkmV*u#t^Mrj
zT^DVm{@Jty$7d`NB(@E&UWvEe_60iP9t!w_Y|@VCI0v@qX|dP11TrxU8`ZRr+9?py
zV-3~yzIJ6{DyaEbsIvpWOA55FDN1d3d2VT%uHcElXOgs$o_m_L3a(2k=+H4OgS1SU
zO8HC`>5%|rL7n#RjdDFeZ>qNH^xTI`%SCj!jRSb6#O<n`cF>X1v`&D6Ez?1qoWpM|
zIu(ir^?xI^vnI01bpj}*aCQvhZQ40b^Gai~EQ*9evJdfyM)*@8=$cO+-mE9ILC7jn
zLSZB5<uK@AG=lckmabx|WaJeiDzYv}2(|!1!C7;51OIqq_P<uDLp!yC@ay%L!DKRz
zJl%LtzM%A(BB_F}MD-C{4)b=f6CoM!dGsB?q^y(H_?l~UJ9F(#5va9ic8bO;Ms$O4
zzf%gA{=n1hEcmHt;@#S--n=`zV}RIuAk2RA^^eIY>SbkE*HuQJOuaVZ`YtuyHH|sK
zX2=42;G}I<^9JmJoH?ttYGfV=k`VuoAXW#<GQ3d7n!usb{>TQQaI@3fo+LXm4!N8h
zT?f=8Nhr5Tecf)~e)Y;jdcF}g7pYcyN3UIt{N;0uCBm7i+&L=#WjG5j|6%grX>xk|
zJquv%r5!RY=|f(ceJs4PhDm;391wx5Uh9n)hC=R9M$6n_axh3r_GyR{%t`1b4O-=W
z#0(3g`ve5pdz=anilM!(txEwgA1X^ryq#qTmgOn~JUwUXvMD}bKmflHGRYKpwcaET
zM*-oikTe-hR=fgdJVmU9OBjF!bBHbR+92ScCm^z6o~5GqKRASx(vs(#sTRn(0c9%|
zOZYT2i*?*oS5ldc0}Ta-A-ay6B+2=>)&-<P(zXtmqRV>;X6(J7eD|V9ow8vaL=tNb
z*>F@X1t#FXcNq!9oQ4R?aT8wdg`#Zc0|UhuS?0Gr=8_J$84*JCBatva0xmNV?Udq{
zW|#mLir;UUWgZ8Vk_=`g112_SUZ)HUfk+rA;dOab0`8)t`z1-(vg$0uStd)kYmpP+
z4FXRobdmd6+7xnO^f>P$cW)8ph!`3Dj+Yaqsj*p3URnDK>bk0`ZxAX_2qNh@C+Dfo
zN1hbGRw{3q=c)T+lyiZp7etvByBZ6%CXTbcWL+mf@w{*BB*@)c*Xlhbavg?g(B2zG
z3KoP&rzXZUgf-NbA#~kO-BVy>tlNJN+ihd-l5TFM+%V!7AW$s%x^J;&(=KHtD<U_d
zu%<Q^=iD26Dk*s+nHmT-C?m+$I_f?LI89hgfA!i~6X-)gEvSfe89+_^e^??`|6a$+
zi)7^-Ub|m5jAQOBCW-8a0C$ET#d(h1jsbMB(j;=9;1!{rni{5z$-ID8$~HqS(1c%*
zeUg;Y+Wwl)ib()#T+E~ax3!5i2k$q;_MlnXz_N3r^e-j>)IaeAD09|(jrf&SQ0w)%
z%~$kXtd}<gPT$zs?e^SA+}no>TXf;Zi;2D$N0)kwVygM@?8)_Px?;Ch@_Zh)p3HK5
zfmW_|oIC|jpuSZkqPg>e%>0ck-h6AEKPtzmwU{21x>K4eQV>D=XSyymM*#tIr-XDQ
z2ArLGOZyd~*=Rq3<#7wN*T~ZN`{Kzg%Y;W3bXE{gR_mqrxH7L;7xf>9o?iMjD<vcn
z2sVf?!|ItUw&G2%b#MXLs{LHBcJO?v`|8l#HQxBz@|QwahJtdaFQZZ9ev0QCj6rp!
z%97sH*4a|J*HH^r_XeRqd$s#(i)59j?6A8#G#Q>2&Rwofrgx^pI>c8$N0t;aXg#a{
zxOV8ZghP6WWgToddD|^y7l2F+eFH364PDCrbYbFKSmuEiVjjpz3@7u@toEWS){Rx3
zIr~Nl-1_zx=(o$AR`_SEH+ooc{T1f%%{=Z9yrq*@DRLvP7}?8D9;P5qaZ}MstP)6^
z?jJ{#4u7U9TvF?;m(ys>w5r;dj2a-3MRf>BtYu}yBt6s%?NOeP>H?3%{{Ww9`;Ry9
zvV$WH3JDG9^;45)9C+Y)GRu#7?CxO+9=wrs=iZ0yyIxvs$(R58Ib`1$+f&vu_?aLS
ztPvUu463mJv?VIu7d&ZFx{m={hT#I5u@wy0XxWiKjy#wo?e&6vfyKz-vm8izr8xC{
zEw{|ajtH6%u)>k?Nzsr<GqFjor$ajG1tA6I55-`$Zc|+26mo6rK)Q^CJ+^*~U_-Fu
z@s4DC%?lEz3Yg<KsM6=<j}b`|<QXb||ImsycUR@Ij@$9hL7)IM){HI$0+I0ji>+w4
zi9n@RloO{1;8)Ga5X9<2V|WAWca^56G2C;)eXR68tp9s`mD$kr1b128zm;wuckS4@
zm<%eWSwefYt|!ueJA+(L_!VLZ7%AO^U<x=KuMZx{!T7_@)xI;!GN+(he*9pqYk93+
z_pm?jZJE%Nv%XoOY+^T$5a~m~d`6K2zEsC^2v`qB|0_nZ{*=>(j3e0Cd^UZ?K=*R=
zqD_ikhPyHDOrrChBIsMASwHTC>$SadrY)FN2rzq0cy^bUOYL`P@uHm1w?>l39`%t<
z6yKBS4dNG-Lewl#petAKQE~aF3td<{B=cn4APi3uR3C|W%4Cwq)_E>inU&}?Dbmtt
za@~9hMd;jOrR+nnG8EIT4n6CfsGYTz{$d+JrdBM<AG{>LTvh=Kn^*qo7%anI6>uZs
zMlg=Sfo*roG%w;X54daM=#ov>4d{f40avQb(rDhM^1`NrX|Z5%)xBrStHU2K0-Tke
zAW3IH5ZVYHi?#B(Y=z3!sG)fejCno4tubcAzgaxxk|F_`K5Qc`?ce9>(xUTe+j|1m
zi&wht{K<1kD*Cc*eBgu!%Go30FJ8}lXy;<!a_(^W)$sdnF1)iL1>UR~d_9|f&+DWE
zFY_^)Ir70p4;;Aw%-AhCe&M_g_01a!kN>X=pYZ-&zWBs*cZN=>XVEvnlQU-y9UC(G
zVc`o&ZJ<cr&wnL|L721mieD>cAt(Mp=}XPy{r9ZAR`9<TR)(y{wte^bse?KD!TB?5
z-`#03-f1{4>|HXS&)AT~yaNsFJik22u=!ibJ{~L#t!}U6jAmI3eZjefO(lsvq)@Sq
zF4Kb!sZP_1C^mm~ekT<`^qw|e3>fWv_Kf`aTM)`jy(7tU%TC5jPcLD;!?t+U1L-9(
ziXC%!(tSMAX4|y0P}}pjWG+nzp<dUn5zB1$y!I(V8J=sR8cc}I-8-xEjP-1A^I(6Q
zz3M8ty+_+S)2a5~YXPS4{lU3I?ROq*jo=NBw{CAfC%5ih8oP3J*YW?r1_<`nQztK9
z+S+5GZr^|UvX}MKJ5N1$1X)i$dY%r$-HAIW*&wHE4rko0#+ovM(-NFQ2Y>))?Ifgj
z><N$EiX1_JIZ}cbKBpA|DMOamDT-rG10@0=*8!j%&eC0mkP9`33^0!e0Tk0&yhNz#
zp>n@BpM!!>ag8v)15s${GmOnPnS_C^?NmHisX}8FAERahh_m`BFkJ_S(WaX7*x&?H
zkM?okzQ#<5(MTZJ1Q7j(OAv7w_;BFBM}hllRzBj)SZ<Ulu+$hwbn-X~Y_Cvc48+v5
zs|iKoB*p;OG#i1GllmE|)58x6=O_>Pg^pz|DVD5vI8cSUAOa}N5-0e!q2_kck(Df-
zd?gt)XLql7|M90gALOO>{(Q?)x^j55uCb`5n3oNf=AA<OxI77^=@8JEkt+O1J)HXd
ze9MTliy|Tu?k_vZHyr^`z85}|WG(c~;xh1@*F%A`EK5dd`COhl&RlC%LJ*TgD~#eA
z5uJa>U}*;C3TdHjF4uZfhiYNzG_4HJbxY6DJe%`8BNbE&@7O7>O%hY6&h6R)fzuN}
z;!OTvB3D`VMLdCW7AR@@NeIe8&JfG8bZKe(hG^Yx8$kyrNX5Hgz#&RxZ!!4S3~6S0
zoX)bGR3qkv*-`md^n(aNqnMi<9e*P5-Td@iz}5#`A~_<32};L5s$t?XAclD!csj?{
zS)U6cmyeJnVV)F+TP?<u%5oa9{Me1dkqn$wj4}XID!`QRA6|@B-~kCMHjDQL4V=5t
z4Xvb@ymY4+wtx*8f?^qP#4rWH16VX@W@12dd$NQWhYD4ZT84-=LxY&34N0rSxd0_m
z5Iz{NgGlu(@vLGkF`|f2l?NC$!_0>48vQ*=1sBEUn-3++_;}NqVa%mabj7)KpGkZR
zsvhE3c9KW=I5lK@iF1~Fl|yu9%7+t!@zLnoonBA$$b-R!p~OV2_bz9cNgafpD=qd~
z>GgAu^Bbhd1A!H6+~a4K*6`x;`%=YlD@|=eK!jc)Mi$=_;MuVed!Uz9Z=09iHy<Z+
z^L~#Me;TZFbV%_L&pxj@sql(6Yu!dJIBI)mBoB0SdHKL84f4I~AG~?A$U#Cn#!Ok|
zF@c5wv{z_0r_#ApHfLoF$_QtiQSOkJqSt3EZJI`y@a~hkkC^g$OF#Mv##crV%TKid
z-fVu%4Q5jr!U)J!A)RH7O<N3_BSoima%Fh7(<+}aMvR~qPxXn~=!u{)^%G~eL%l({
zI73=`ygTM^Yf~~W@KcUqPUXDQ^rFRV@A@*NcQ%oFJHw)b$#x&RbFs6SnvvBg6FWn>
zRM8v-`tpg{(1shs^I2vx3@A4r%}U8*nkQokA;wcPn&Z*-aK+f|r+Y-&ltFr>N`X*L
za-`96E2DWj0rh0=A+YSaL^NB9ry8vB+P52(dDWkbsY0k0s@<now#ju>%S4rhy$G2v
z@)D?XdO^B#WRnmu3k1Cp)w_$1*RH$c^`!X$Au*S^SXM=thfI0|Mnb)t*1ufcVb7^H
z{dB5_2}S^6(Iu8~mX?rE`G<s}7@w|>Qv?G%L{t9gXQY1wWjC5WP3>Z{k)8Pvg=498
zo(b@1K2i*A^I?T>PVW{IlIM^0)0fTapfl--dusXV=U=_LM5VOQeDW*eJeq$v64iDJ
zztiOTV^{68JD#q#$#)$+M!&sIkD8F?vu<M&X_=&SAl^kuT{kkY!x<A`aG1<w(SUIZ
z%1YM0(}HTkTmXRuzkQ~0o_Wo?Sym2-wTxoDHfXiK`v`)?rG1?CbpT65Xo*WSH<X$)
zq2M_Uj(lLEU;nE)CVbJz5V)Zam!ON_OG(b8>D(x#>FL;lC~*3Qe&^1;^y(f4?M%C(
zV_seh42kX<m|CGdU8V|u7kYGWaIqWDwITwHvoC=Fw0sXZ?!&z|FHC$>f7S9I14LHc
z(3r2)1>BypbfbIm8wYnFABZx?YND|4yZCB@kAXSoaNtwIP{-P2y;m>ALpu=u{Cg<0
z5so$ndSwV4W|Y3wW@<B(D4orXpplDI4b0VbsNb~(hqe9SLc6{gywBLmCdf=W8X4zn
zM)50~drFU=dc|MeP4+kR3q)m<R5n{9!asjrS#I`dd%Gx{iyaf**l*`m45(_!%nt+g
zf_lkRfXuXyO;E?u;Ud;(j31rP0zgCH5_E#PX8BXq@Amsajg`}(yN{j0+qWOVWN=lw
zneU>Dlz#e1AR&M#vxSz}G_N22MRn*r$<fC|zO<krYjK~O_!07N9BvZ;7$Xx&Ll3o+
zLJ)K#1D#sx?>0`Db{5D>5%rTRAtr=c9Ea?M5y1_}%h&?v10%sN0}`$lnZOE_;1mWc
z#Wg4i%(}MzPsvx_ib?msjKRO$-}AC~&60`CxK><n{onu%GN7n<m^BI)UMUEU^L2V<
zToAQE{bepvVM6QTtHwYF1`Pc;+&}7q6y0{pm&Z9=dED2qy@F0B_X}8E9J<gWNep;)
zkhN;sDSKqs4qeNw*?7H8t>boO<6}?>QshlWaYhWAsY<$f#LFH=Ki+c)>m>h@C4F>S
z9IL2u_(^&CFReF&XuhU>q;v-#Mms-ok|L7sD<yqnzER~%-RU_4SXF04ICt1~9VUn{
zv~njH3Qpa-C^ej@XnqGZ%W~FXe7W=@o;RhL!kErW_KHs~14zM=&U9&ig4;<^NL==3
zBP$wSQ(YyLM(%no9kmFu@Y*D`^FSl5trMY{qwX}!2mtET7zwtNDby!uIrFL^)537O
zeb*RrvsKF6C7L?&vL$(PyE^IT(DEG888%pKruP@QG=+>-f*EWS7-l3h!`4eF=RT@>
zC9N8yDp<G|!X8R9<-7;0iK_|%**6UQ$cZSKz94YS=Y%_T_ZMA{T>*2{E43I(g5qAH
z_-m8@E&`F%r@S&vO!D^iNA_O9s+^t4d1d&0fNiMf3O<?X7S60rYu!Etn$R5yX~xcQ
zOCiVVfea-Km7z~8Y@$y<o9sW+H>+m{SxTLyvnN#xJ#KJ8ti%KXQnd~~uga!2wvi<e
zS?erajPqxviKHbKe^p-gD;9VmW8zAgak_PGeav$W>Pngqk%>R0NLVN8AzdWEXqk)B
ziL(|0Xs9Eo58@SKcQ2wKNC@)-4+ctz$W)LqS#X^sN#?cakBk8@RZS&?>*{nN<(^^Z
zz~k`IuTGAmxld7UK-!+kRk+DRfe>TUB_gPK7OV6mGu($CISe0<H9iT7BjSp>T;k%U
zmOzs?*ZPP(%a&wWPHRlK6Nxz3_KAKZASiXx<11CtIHfHNSftt%0tSH2k3@HhS&^3;
z!hM;^=h^90mPKtFDb9=o$R+Lok+iJ2mrtJ_g@l%i?mKbzMC_zsQaM?<$4^6{8r-L$
z9^(=!<QZiM5p*D^_EDK;mBKXGxGXc*6ss-iL(&pzOVSWrqW6UwSoI5WSQ0tiI=+J~
z+6rbSvAjnj)bxS26H_HbPxz=NzzdG`0|hL`?fH7PFj!=$t~Ipf&~DTb2&{-6oX~Iv
zfviJv#1VkzeJpo3q^eW`LDlwD9i#w2OFrn8fN`{o48--*PPP_Up0Un^3RAGD>8m41
zk?YT%K-+;>t147HNj|UWmJ<=cmQG;~$N;%VnRB#p&Sq(ZkqGJ8l}O~CYps{L3<+2D
zQL?}kmsk=lpBIIX49>P<%r!2&`9K+<WUfQ%#2FWWU<otILKIp3Rwb=D90|?MAE*L9
zbFrrkakT)eDum5qrBkRNC=QbyT{%I)WB@`SL?Yd*nKH}7a=B9Yd4V;xi4ao6hq6|}
ziTMAH2>crzs**UC7x2LR$QI;-1X92<ST+?OmB_PL36V`Z*O<yE9FZ2n!5tVEg%eV0
z9F=_~?aqfWV#t|0fa3{rt*jhmpNM-T(At;25e<hrh3ZO|g_4rp2${LQVC2w(NY9aV
z6~~{fEpE;NsBACA2TwCfL@pW2FEb~?+zGW;UB~^95}_11dRu^)^I>J)=|hbFD+{!z
zB^)7Gl%$|J_<%CA^T6vRBQB({nbp0Jh@j#~SfQB{rhqGss6a^BywVh7N<>p2Jc!dP
z=@Y{VKj21=x;aV&nCY}CSoELS9q2NbxU#_tizkGp;D!;TqXGrh<|L2krdSpHBO28i
z0QZd{_tOFykX7@{(uGk>mrYfBPqKV$lu;E8m$r^EY;uNJX(^O08XUo_pnyE_07|Ce
zW{#(v;Y?tcfbs*L^eQTx?UQM;rWJ@%7N&!DtDG=~CvqT?5yPZ`=IN1}#C9I7imh|<
zX55QfrPiZ`l%cz+&g-Ev{954`2fM^2Dv}C7=t7rk1%DLV7^)*a9U+f0|798V7~q=o
zg}MHb4<P?jq<p$&7Fk+MD?9%DJ-bfh>iRbhwdcm@CXzx391$u$6hLUb&qUB5ocXlG
zO$u~h^YZpW0@2>i9JCzc*&@rxOgZwD`wRQH%XYF?DG@Jk0lk|H@iI4IR$_j|U;IT7
zh=On>S}z%8SH~O(63a2g1dtuN2We}Fm{H4jYdcnsT1$G`)BP*;QK?yGK!s3-E=v`-
z>#PU4xIHsBa|Xo9nVC3KzZRs;5Q9nKGvXY*`ue)5S)m!?VyC^D5X1e27}c1#B1WJt
za*L|wK~HqmXWv1X6O+n8lejCXk*1hiQGE0jDmD20VEILM&P<w(6CnpAd@#ZDhd#_R
zVv@@`6h^9)-Ez7BPcaE0uBT-HmYce1YSVFOY1ScvHG#Ub<`?V6qu!yDRcPS!!GHv$
z{Sv_$q+$b{I3Y!7)ugqi5_}~}JBCG-w1;ly6U(#gpouw>>`{%thq<aMKBVll6+y^h
zMsjGQVr=W=gik{h9GkCZ%%RK&Ov1YKnp_}i0E$GAm+%v7dnAw9b9RQaGTHZDfHL<)
z17~jLS|mMj!WbqVVI)n8<EK=yqqNUDc~{Fz5=(w<Gy4)R5HAiyBshfvi?J&`!RXH(
zyE*hq+D9rzTpo9eo}G6(#Wz-Oxf<7csHod^tf8_LKrD0v#R)H2IWvElJ6-W{t`mL{
z-8~WKf|)pgQcXUoZJN0yJUL&2CX`eeu9k7B%q~Ay>`;oDFAXc_!vocD)#8)9>KiOL
z9W`QL!$?~8d@FlMB28khE2!Sle)rc@vdQz~w{t`GfY$736jeK&HnX-ih-TAAIvln)
z<m<umIFJV6h5P{Nbci(DE=#**xGLNGn{P~x(+T203?{GN>7%Tgvo)lxCuLc4H3(7b
zHQlamOOw7FE9U))TZ1U6q+DGiww1gQRVlwmG?IK&wXid_JQ>Y{dOTli!oM!JZ;}Nf
zrCS2<4S%J&^`?ESr^V@@$|Wfv#PV!4*)A+N#R{$vjaL4v2TMI8O?%Nav;BPgi^rG}
zB^F0KPW2}`8P=ff0zg~oW`F+~CHdi0mSJvYc;ecbs1RN^#97-wFUy=~vsm?TG;~WQ
zjFSWlWR5_}laN-4HlbG3nhZ&=K8L?3U+d<Bzvs}T0EzsnjHixk9Xq6t<=dOdvcbv0
z-od`a1wjV~b_E8sj9~<I&Wa;TvuJ}N-~T3n%b~6u$Mczs5pwo_Sp7u!!vg~JWK=tC
zLp6%Q+`36nVo;S3jNJkj83y_WQl*M<3VBEaGEEq<5z5FnXhd8*tnIBv4P-4a<T^tL
z)uGRBZ;UZk%fJjHJSZ4eYo7P-pS}Lz?cN@iQDOk1V9Kp+zIJfa%w{b-k@^=P$<yz-
zSDZzU7EvN^4x#z*%I}AEmur$U4W)M$4^80`3BQW`GzS6%=CnObmJmupKFXnrdywZW
z&&cEwzmZ&xt0X*D>XH+<wIRO9Ln&#NBMe+XXY5`|HpL3dw17)!FJKIvQe2NL86%4b
z24BB#UwwCKBOY`tyP@qnzr4iY_HqHh&w182<$Wb;fB2IOkK#$5-n{VZg=8hriSG)o
zGu#>j(!==FX&M?qCr@xyj3y;y>tB9(PO=YxC5I$^zjiPJ;%Wxuw1UkhK`v|lhJWv?
zy}qyDtCqeG9e<;`-zOG*nRq0;VDYMI?)I^9UuH7TzDCLtzf3?`O(kPZ-@)w!8+Y^s
zWqw9d$JG3aAb;}jd&T3E-+h(QC}RwVk$i><<?z}&`d{DK2L&tTl~-0t75yWC3h`$1
z_LN86%el$gxdb=LzoxP=mcBEvUs{)(Hal>wvb8CL1p4Sq1!Y){=1Yru)jEt;uxc9x
zgtyQaEYV5C-h<^nN@9vY#Vf6?Cg@|p6}5XV1$qjbw!Zx8cIP(2x=dYbzI<bC{6U+b
z#%oco_fyI=->EYXdJx?FkgM+R=&o7c`|wgi7u)l>QhT{P8|paSc-XJM)6W#$!4O4V
zF`*iQRI-OHqlMVLSQY7@ld;a-1MLU(rPhk&JC-KK5M-~URVB2#&z?=^mc1ePrA|p}
z|Aom^+s_p`L$FP`Dt7Akk9u%nGrG3?>~6KWcLORpZT)2w$7W?UF>XtG%@qWL%HdL!
zPpuRpY;uD*5DGlV62C&P1KQOSLAS5lP<F=HBp}#sbjN)-#Pxz*WhR(=(3aAO=U7Et
zi4uj18HrszNYDiIk+?p1-i8;qY|J(@M2dy2fR{MiMDW|`#^sf*gYDD9-9YcM-0W5B
z0$GLXc&*t^&w_l3tMjlx*lfaE$u<Kb$#6Pn1PGVZQAQ)An8`z<MEg%(RgeM@@v*lU
zyl5QGkd)&}c%S@KjTJSuQF?-_;^;E2)is%c??yelQ8T7#qZw3`__Ir1fse%M?c)QY
z-_i{~E|#YRiH*b42UGfxt}IuW$O{n%Txl>VSfycgD{xY+>4Ve3J=v3PA8WOoyzxrW
z=a%mfAoe=a;;nwU*h)HwgL}PMW`6Xxx1KzD6xreL+wJ@N1C;~zjT4N#1n#j~sglM?
z*{=Fuo81jMT#pPYqq(Gi>BjU^JHa<DJUN2?MZX&>vpn27`r<;=e{TCK_nYvgyB`!g
zoqL7zyD@023cT)Zq#sWWH*6)FnN{iZUe!9S7j97$&_Q@59dt9y_v)4D;qDnbRpGWp
z`;5JTL6S-Dr*OZQZ7>Y}NErFL@Me{Z_P3;&ZFQuo7ZYFvi<jY?%<Cmf-N=K}s#sv>
z@|DX`I1cfXCQE;k<V)f>falikTF(oIGRhP0*phi5CN6YVJs`z+A!XqBig_%BtQ>J*
zq^A1jMU^GgnQg0{qey$n<<%jm5HV%j-)lg!(cQ4~WM%snDOtlAZWg;)UScBADP^}1
z_-4;qDoJm=r+idNXlb?IX=+%i7pJQUw?><jRlYSm=hTlo6OpNf#vb^()lsnVV}AI_
z*X{E^Q*G>Rou|hjtGW0d5q|X};b39zEgve$`TRn;B_vH>a2J02r-fp~IwxAc*pz*c
zt7K2}lP^Y;5oP4+{2F2UR*Bbp1MQD?iqjS(jgxm)5$xfX=j`m9otP!@tf!J?#UxeQ
zk0+K#CPMPk+$l#5!m`>qfAq4lh;V>RL<?kGq{`hmwKzS6ZFphhJci!8QxHWdCo@!A
zpb}ZuTDOT+N3@yQ$$}*ezp>_Avz4-46P2d5<1Q9@JwqbeRlQ<9hge(OT6!VyL7#fB
z@4MK?pyC&GNMS9|&n~1_q>H4N`mgFy4Er>?9H$q1U~Kf&xzc%GM&J;CD7=L%YV~eF
zE_M*TmBu7!2}B<jUDmE=KS#9XZd1?{V4HKb#lQyDi!)SaNR8K$)yO=Pb*&?f4JGD4
zH9MgkhLVgQxDiV-uCT*98tHx~1d2_q8EvjNgiX9bv>j|*0oOfDw2C*l*M{caaqKE#
zmC_{RhE8KIvbKM?LW7;%a;w`8v!u+-X10k?vHWVaI)q0c_WRWwo5uyyQnBrdIx%I7
z;ra?T=?t(r1#Ls>>lmd_6}stag3#%RsbS-`*EtbQCr@68CVPiRNB26tXJ_v|y_VfG
zO|AUiw4U<b%b{WX;?5T`N3b+WLuh4=QA1$j48z3nVZu7C)LILB8O%-3N{Tm-BGD?J
zY5oQ%z4!_2lD8S*tsRPp&=D)-vhUFcdFKQSuDEeUCYK`wx0!?lQ$9|fL^?4PX17Ct
zSiM*f@{A!8DIj9Ge{$6O&*HUd#1zmJE6eAIfaJ3|Qw<9@-A5i1%=;~%D8d2@$_mgn
z!w>R_QG(VDGrkWTrDO@6M@hkPD(e5mQk=YNRLkl`P_K1$Bmzo$H|RiKkrj$j_rR91
zX4&eAfx}_Qq<U=)Vc`MvIKoM;;!<l?i2l0$@{g9h=qb)7$~iTTTz}9zoP;&kPze&<
zo*XN>k9R&IwFhpn@i1$lkQO1A>m5J!s(=szIk^$dm_?L3icjXGBZ-#xyN|}Hp6JT-
zaox1CYuCF6UCj-PFzU>geP*Tn{d)J;CJa?+D-G)HDk`u18yb<elx`2}-7YsV+54h;
zSzC>4N@AL?A7i*8!8uqB9F74$xTrRdYLW_7c<ZoOp&^#xUGmYwp5*xBWe_-F^}A<+
zc>j?R==jT6C1YlR+qm)4z&zUCUhCfPeNgX>*^4@)_9juUO$Cci)dOk=&Sb$V!&)B;
z{=ck4dt0eJWs&PKDe)X`@`58v)7)B;`(j*s9iK<n<?}?fX|>!z*qCKPPe$Ov=AB*}
zYxe+P*ZrM>kzHhVtn&Ti%TpcOj+L!>pKpRYjO<XVcDA?mHex?Gfjm-W5>o;T(}h)U
z(e{WW%Dj0Xz1CbYk|=BSN-PNk4soPmugV}h;)baN`Fg5Y%p!E8uddTY4KnJV)(ocM
z5WE<p`!((D`C6VM<$i3IrA#rj+gAuHUePAr2C|a<)NBAPv>=~AxZMG);!+5)%ZE&x
zfeQut9mf6F2#ZlzGL<B7Q5%vHr?N%CWi`;$97KJJYVx$T#=_#5jDFdcu)5lKd47Tz
z!<UiLMgH~x#3thPw+eLdRubuWX)Efla_O7M80^9My0P}3NgK3Y89BpbhMWj9@(mG8
zKv||~Dk<=aGD^to5PUe<ocjd$`7!~L_!5BoG`IR{$^P!yshNLy&jzq6Se76lFeYz~
zh5k4VH)+=b-F0eK!aI@;W6-It_CM=*`&Io(U0ukEgwUnv!65_%45<-yXAEp$2MNJz
ztC<X#$PP@l1x@2N^WF(u{b%ehW&rc6x9QjmU4A+8AJ4UrRAH8}vmJp!HX(jtlXaSG
z79B9?vC!gvYI3Y(f&v0ZK!5jA9bg_A0^2g+G6Wi$(^70N44~R}SE;>wvwq1Mj-H$$
zi*y#`ic#&~;MBM2zKZegneINmYRT8mbUlr}cJh?%?m|X*x7doMrVTa3s25rvdB;uY
zWkkDKJOi16IcY4pL!y3=UKU0}J6SVCf3;%e)kz6-S@qG7uzTKqKx{=!a!!`4XK4yf
z$NK!imoKC3d->K-;<xAazf^|9;o*9?dm)u%ByQ{2&6k%-f5nAlvCRGkQD7rm7|f5W
z;;=cg2t(nQrv9-Fb{J}oEl<@HrB%7)LrCMbJOiYa;;nJ9x4TDK%@T8R8UouS_oz}e
z_FlK8t=#1#L|L;pB>9hUrR&2FXSKR^A@liM8YQq`j4{E;*)4#lzWWNd>kgvWh9Hxa
zZ`YDzL}V_d;aYFjzrGDAZx`J9XyPz~+^}U2`~s2#98GRW;JeY@C4smkmxsNhUC16A
zLFY_czp%)#CA}Um9E^<-wSq3@b9l`h=yT2Iluts7okf^r7lv(98vY|G74XT>+jdJc
ziTgjB@Mn`Pp$^3GwD_!r4NmgY=49w}85vr?kR-}Z928Nkn|kf8W8NBIfm5$fA^g|7
zf$BYPD~t7^eTkvCqt4sK+iP8~VR0QKlOI{`P2IpG1wtl!Ob!Ay9sWx@DI{~5A@q!j
zR-mIoVofQ9Mx#=^Q^ZtiegEVOs4xIRDmd=|ry~r-kx8{a;VF^s<D`@glE@YPSmCX@
z@o8LGN!NRS{>z-kfKN7rppRYLANfAs!?=Dg8+<>O(KsiC`0f@$Y)v6{EXpYA@4rL|
zSSv^1ZX6v5)L>V_QF}WQKThN5#5vm9Fm<KYl+hN=sqRL>F;XEhyCp<+n@`{W;OLD(
z{%;3fs=m~C#J4>=S}fw<W(qn~7i2@4fBVy1bM&mx{HykUL1DG5oE(A(5(}$iIGJsx
z;=Z{qDO7Rl<ix#Hp$I}WW(rNApotsCDwaw_qDb)GK0&9cB75h?lz-BH(W4?$R3XU*
zRcumnsNg_q9ug)Zs8%j^305lHm$-^F!AyFZ7k76Wj-K!>PBOqlP=p+nKu~PaM8<{l
zlA7b!F$IoQ?nFc1Oi8cO|EK8}3w6#RNqSXGQc@^?e_9?2=AjfnV?-{O<!*~zg&G$Y
zE!B&+sub(fv-<UHDT=3*K``NpW-1;BQFT$ixC{Hqg4JqVbgmdhsW`xWf=As!;5@u}
zoSz#HIyh}IZbD>v^Jviehmf38U2N1>R*pxbK1Str&s|vgT_o3qd&v`HDl`?SXaM~L
zAMghSnJ$@kSic7T9~bt&6ug{2)08<#Wz2}9ib^EInJ#Hg(9k`h_*C&S5jfauFQF08
zTAoBF@rTDr+BPltkypj%le1gSw;XTr^HYsAa@qGJ<em`^=ahDm_D43ip(3n7(jq1t
zQG2S_618(AT-lywCXT1=x2L1|i4uu@BT(3bDMY#DlgB5DR}eEdkZF=>WL&fBLW5(c
zz_?XBcbTI9p{3w6-{1$<XU1jvcp%d%cu<)Kam5Z#@Ng`w@<GD61WA^$sn(^_g_aXX
z&dOL5PcZ<WsaOt`l^gD&f+v_YT%yyg#TKrGli-2<=(`@4NhE5`0h0;lcq=i(oFMvk
z!RtJ^=wnkEq+ZUvCfUC+6U*=7A-6p02me52Bi2u*JLf7H!PaO8==Bc}sL;4*Xhen{
zw?{d`kd`1uTsM!F4yzFkLRqv)W&L`=81a8G-!NYfR=owfnKN;AB3Y`P?h+$SLD_lr
zRNk`x($+~MQ4U^x@doI5#B9fiGMs}*&VIslJ4|wznf5Ib6N>94&pngqJ_!0Vi8PE%
zuHHpcHAZ5>un38&0ie@*%<U#NEOVxE4UE^HnnqEofw-sZgk!@uw-rmQ^QN!=yw`-7
zH`p-tJq;;59M3wwPv~?UFB*4j0^8*|YV{y*nh`o7xZ~bR)_c~k_<yW)AKYAAutR-(
zW!uUV;KHv82CvP=1wa?Z+s03*9j<%_e;UgXX^_+W9ge=P=@BuVU`T*m)L!%Ys53C_
zh<Qth(g@b2KR)+I4fo+q>hn5VAFVKOQmTyy-`UFCHvg(iCmcr3xJC~>=yJC74RpX9
zyAC1ha0LUt?Qm{J%$5s@MDjzzxgLS$4nHU5;BuQm5aD}TtufwvaDlzt1IIM;hc`N?
z{6wNwhFOt2*vY&-rq1`2@_Nil`GlCH)Fjq(@-I-e+Mbj_&9M@M$R>A}4W#LMP=O92
zh~DFbGlH@_jbQY_u&E<439p4WIqosf4KKIdbr_T2x<YOtu-3xUJLc_o^PBve!|&7g
zb65kY*st1kV9TNdJG^#%dF5}DS4!Uc6}&q@zb}0tc_~#0B>2*x>d!V0BZo4MQEtk8
zd+LnXGf6c4l<^}NhuyI3$8jCVWLxO11nz4Q76R6+Mp1OLHUuA<IWygz2B`PsW(^++
z^i|a)e16f&m1kk-h%N{HWMC&^s;=`<t+Ph|Br>&t;ep0Tzm!uq<j{L^zh!S%1xb;<
zRMQKxO7Ur`1_}hH#*UybU@uW*m|EZ&Ht8SDt5$Pnqug1JkZ!K%(V`Z?7gFI#GXUBv
z!MQ${5*eOFJeY1~JM0skuO*hRpfG}Co_js>x<lZ<gy;gMRiaqFbD)XZCpMp2?JE<A
zn0bD(cJIBj+44u7tIQbBAnjKdkBK;B&R9=%&3Z)5bz!#wIhLJwyyO{0RX}OB1>Hib
z9GASi_7MFNY0lQYo~8(Og283p@oi52#Pvv&eyC7|$qPRumA1l_5S$stvw^Qnid~ai
z?K|f~%ulgG4EX`A=pccw;`URd08w328-N$y6@w-F_p<N(mf9vuM%>yvBeAI>&=GFP
z%jdXkkf?16VUHZ{|BG>t2L(Kda&@P%j98H57L_|tW>*2BS-Wr43jF!$zQ&U&sn6YF
z6~v;aTE;6AY#6GrcUP(0?QfaniH(hkOkZ=yIa3{?c6AC!V<=a`Z=;e(xskCzh$jyh
zN28Ta+hnDK6JFClo!i+p_@@#(cpl52EukHmbi)ZB5j_)SKz&#cmgDh><F^1M$icK?
z>+mH%7JC=9j|-wu)5&}2MW`HvD=aJOz^C9<5l}=GYZN_>-isArhJ+f#BsAM0g@f&5
zY{1r&zgt0eYy9SBM_Jrw{E7b`p96*etQkkq3_m$zscA$Od9{pOYNfIs81!$p-;AYh
zX#(QN`clmMhxJE}a7yovC52Zl0m3MEM-2_6V2Z#+YO?(chhm!`^w7bjJ|p#X!YB=y
z;r~_Yk?p4txTZbCand0C?%>$qYzit_P#|dOEJ0uqm5A{ytBy*iN`u<la%e#uu!xwo
zn7;CedLY?xx0874Ff6Y-CPWhx6A`g{mpw7Z`0P+5U&vAzRdjFZKN>ehF($iI{_U$#
zgI1lTZQz>SWU0T5F-Am6R_U%QW{2Xi(&nE#1s|S2c>DXRJTR1;lBy0U+HJ~dOO9+G
zii`p`Sw=&L$}T{g7UEN!sU2~A9oBpyRKIoWKwYSqolMG}!i;rVPW!d>Wu$?YuIDW1
zgWI>><|G9Wlzfvr@PxhQ<>5cy6s9~w)ITj_^>pD-Q6>E-J=n)3J~&21m;Zk9sV>kp
zH98_a7E+N&#JP7Zt0ne`oBf?vuNGgDTu2&M0;sjiSb`)QdQxiI4x1!_TjH|Br4`cK
zLwUv~na^6r;wRgj%UYMP(4C@!DKcJS^rA7lo5|I2#Uj+(+?#WSPvS9h{jRxH#UWz8
zo6;0!0GS<(L-vOpCg>is>6?{G4fF|z&2)D;W3#>SXpa~4Lx>ljPP`l=2oEKEPIO|)
zVdD5Zl*0f<K)JsmItXDEFjG~QP`3gR^)oX(=2>+kuu@so`bdA|7J_=5``p++tGg&w
zA{L6eo@wzj{RV@gL=kHj%neZP0#J~j?VWF4EBpcja{pCMe3ueV?sr={Q%}vABbpD$
zBByT>x;4w+r(AEu2Gwc(r1r4^i_99Kbw^(tUvsq~NQ(~Df`6C7@8#2U%i8NzKc;`%
z^6A@CI)(njvSEH;wtKwdDUJSA16~{~?dUGM^);g?SF2Pjf2QEl)xNQERcg9YVtE3E
z_9wmZ0oUg-AK;j;=OZzgy>Y@3J|V63r&8i(;vXPiB@ghT$sa3av_z_ZFPSxDy<lMi
zGJJh)NYNHLhI|okFxM&+S`CN=8m&Sxr3Q=?e1Ljz<hY}NSE$iaja041TYEq9fi~Y0
z|6hdnD%4M@|I^3{Fa-X4G~18oWIrZ<oV2@CPcv^tAF`j7y#M0ABJ6Ax$tI&`7}7S8
z#VI-8*;r#vP+*WT$QdVpn-g_9wCID7v>Pp($Yt9e3O#6Bj#*1yiwTK!x0|rDJ7iae
zK2ZhS13l3Q0Uf3)^%#j65;^#`H~buDBvYky54Q`8z`tVs#3wHbu*3hvevjYmu2On<
zWZlD)bg|Wh4_N|`!*1%(baj}UG!z_}$w0??0+f4eH<c<$bwL?-Hw(3EC~_c|i0E`U
z;@z-ga&iZ{7p)Kj13gypZ|8PHXQo|dL}%xhPA4PZXmFfunsVIE#B9+zN9w#4-dykP
z-e5{-$0G776Y}wb#5$th*Ph7B`Fn7`t=w|$gt}n2O~~?QFld;NPn;AtwgjlR+M-O^
z7n5!-3sCH#*n!XI_9D<j2z<#|c-^w}93U<(U!Ts#>5^fSX0rwbjlN=e-{LA3I?=<q
z;oKq1GDW|1uY^WE=8|sVz?&MY@<fO;Fsw>)bq{Y77&~)p1<CxS$BtoJMgk_)(^g2K
z(5PMVM6nOu9z_x~e{0UmI>M7efmv3t;t&;;6jx!QCiU3iv1**@o-1H5>r^WtSPAKj
zKVdw{Kn#L<iW2sdm=8XjLgP~XuZDt>qrK<sNBwURRd0}lyW!*s=lyD|;h=WM^(P@g
znK>pZ0RuGj>B&b3jEU{2Pv>YIjFm<4@wMd!8CR3K@AKErc{lObzt*iLq$MaQA~z{{
zm0E*L)~XVadS{J?kGT7HBE6C&p_nVx8g3#z_talsiU`aHct){{$#J@xf7i{aVX+nW
z8bCf*%wZF(#Um3$FPH6Te*T0A`d@x|x~1Qmm1w>%$>^2|*c>sJeZ};4>hODhqV1-U
z)YSWB*;m+HF_*Li8N6_w&&2;Ig8cjoY2%t2bHOjmL}P{9m$@X*AGDbLidz$hAM!^x
z*^Q<oZw4=}DY-~Rgu-V_{`%?^#kshg1P>QSAMAI59t!`&yn`S5CH;QakmLy=<io2C
zbq=*j%m@yT3J!{l4GdH#9JHwoS8)Fa2S>SfZr<*;7B<ht%~8<q%6AJRidK!}99M3i
z6;F?MwmLa2<9LRqO=fzREpiqHhD{ezMroTU@}FV{E>^26K!fj(X;d{eDotX00W&_!
zJ|deZ7$xS!RW&*|6vh=gK(TpM!5zNn3H|MPXCh+LpU*E`oVxj+pM!sUExIv@-TJ)V
zqVd+il!4)J=B4?Ff?aWkHsAb%#d7%iHOm3jc>U)0%$OOfPLaB^k5Fui2xFs^8ktla
zC6+=_ZUev0W2IY`e&3TSy!9f_)%0FzuWW=yI23fLZ=;NRs9qFrWww8x?FkamNg@L?
zxkfLOoeHxDBiIq^S|I=L3k7o$gABZ%&Hh^}iNW5-iLM&LW~##wV&-EUI<Rv+d29{{
z%gfzWl5Smj*2M&RGBY!F7bjVl-ElVc<bi3&3afIeS$KMJDmN^fsgx{{X2sAAD@)Yt
zhLVlaqzp6LbRyIlM<A%Nk%TAFxkO8rATiIF$-4|Tnv4eKounF6(-xDB7Nbc_QBA7l
zm+B18H;u6@+v?MYZ$wGCLfsifm-aI`>9M4csR8$aN`|sL!BetZ8kI7PWwz`_O0%En
zflzc`^t%=Nr`g=e^NWwv{mBVJQ)n;TMv)YS*pOb#7bpT<4tG?LAaUq&^bm<em%tq)
z0A@!l0WFi>Yq{<5>5DVguHPh$mNa8iQwa^RbJkpVt2V}Y$$ga`jz5;BF4TYI&YHn;
z=aXn<Y>YqnYPXQEfw1zgrTh1fbxXu(QC4WI{C3UWnnj<IBi_*kU6a<_ac-PKc%b}A
z=Oq#Nd5vbPX_trX3uXxKMgz~S1FKl-GbYSkpZ)~Y_B7C95l&^{DgOwx$EK5v<kiD?
zflK<5lTuzEL02G=R$yW|G`RnEf~I<~S-ToS)=|a-YkVs?Tv0=0%wM;D|3m+M4R}Ls
z5}Ef!p4gF;w3aJ_5<VYNMZ9z=Sv63%M*%<+rLNc87S=HX{PL@vzYtdI8C0AHfojLL
zwG`E%k!a}W+q$UY=}jnuGmFj$%x@pQoOgG$iAE#5my&#9XWupqBkgSLDlh@c<&&m@
zh?Y^~WGeNVKVK^roueu56wh1;!S3IyBpMtzx_d4-K(6-_?Q$T;|6ya_w(~ALC+FqI
z%KL!vAG04VOYLlz^)y6?$&#Dvf4NydcJl*WN5_6Vd@2mkX`do~=ShAZ`TBAB*%%~i
zA8G!y`$xl;j?`1Vy`tJYv9f0TNArVanXTPYOLoh;4FvV)y`AdL;~>)W)#c9RYtL2C
z$GRi+BO^d~;rBsWKRSKPfr9FsN$WKfLy{Dsok2RXm&_hH9p86i;h&@^c$Sq#4^!jy
z*z+%rO<DntKYX8{wy|D)CM*8_WJS(e4!vNJ7U!6gk0bGkR*BFvPXtfH)HfNC1=#9a
zA4`!K1f%S^QWz^>l+q`V93vP6I^<$D1Kbu#)K6Hf&?AhM1E;DU?HJI$AUFiNl|B|Z
z(~OcbPfTi8!Rg);&&Y4=+-6jxz_t%7j7^shb0uO9M=e>NFGRZCo=OO!9fYG+Y2Jtw
z<KgPi&xAitA?Wln2~B?KDG*8DNlGEqG=e4dHykfpSbG61CNLxyKsY&myOjyXC+X;n
zfA0F|M<uhSZDuk$b1Fr$ge66GAi{%mo=BBOju#*LWXA$*(Y9TsHQgFrZmuqVMuDF4
zwCvWyk}OR?LPCJ-ItP^~_FGQzFT&*chsU~tJvRD7N4NV(xr;h#o^xhOUrf_UD!!+F
z^zB&01@sXYlcvq>tQMl-Q{SmmyOHtkCZoa72rE^)>&B*nE`@GFs*;hjoRUyZjWHuK
z!&RMah^UG?)KzWed&#}{yl3Pe4Ta(F%kT4eX7syDLo}A3N~X~gCm8Enz2WLS)9*rZ
zdm)Zi<_+THK@zKURaDNkkZ&{OLD4C&MXxZK%oelhkWlN`cGFkUJCBwICVG2U=TN2>
zVWANzbj1=1-GorSSS;cjXw9BZ$?>U4;u|NP*$Fwo73MyA5kLJ3>B`cxlv;`%r9?c=
z|D+OhONAY4SMxs72Q)&kpm2))l!R#xQ)XH!!Moey%F@#7qBjhlix3ysG+`OQ_-Uo-
z^RQpaxGYLPO)}ANBkL@Qr{63h(9=^4o3FFz6#71m&=n2yXGK4&)08hE@nFt3znf|P
z(xNAfwev?;u5gm~v%vn4v`GYd+P$;BXCk*j=sd&R5G$7!9ri<sV9H|58XX@Ki9;HP
zci^$j<Sxo938+j@Bt!l5cu$|g28jA#Gdk&)1%Y_GZ0a<KBtx6UIvFOIj)n?tcmXy_
zz8J$`$b0ko7H{bn$DQSYfDJZlu21>_HK*b+-<#C_i*ZG!dA8NrPL500MdM2fCO2<o
zk2llXX9zxLR#VC;WBa1!;VF_NGy*H)gU{~N6Pmw(Q~?_fyOocCs&YMP%sLnQi4lUt
zpw~)RwNbaAmow@Z>vwzc*hv&W@#u3;+wW5PkEGDbq|m~I#NfzAkNB1^QQ55%lGEe*
zo%2v@B6#9?@MhFJ1&=8^07pq$Nq&OQOSGyW{71P&1)u}&p70w|7Z5=tiMa>YQ4}{-
zzY1&h`T(PU16WdQFvcwX*4~{QLxpW*kzE%_ku?}qL7}!XJh28L`tb=iO+iKbqj(do
zM<}eBq|WC?F;p#1t*0wdtgumEU5TR>Ah>o$%&*nSkK#E2`8WF4X_=PG*8)!kN3Eko
z+k1TypDY`S2%bzv4T`UEm#QKcGzo+|IwGnvG1!cybZsG$3RXnA%acReMHopzr%i7p
zPMIg-(8DNbZdm(Jn#1Y_On;c45`F@L`Vbc%qCz}1Hmy`iu)+T=bGrfgH&LW|;3D&!
z4H8mkarYb}t3lk-K{10cv}I2s+1Tt5p|{*i=q2_RHgnn>N|z(f->n}J+9gx+`(6h!
z|1wqXcFBE#MEu{|oKSwz+6%|!xV3i<6C|yfelLJy6NigC$_Vm0mVYpYsK_ohQnC*p
z8u0j3Je@Uw>iz8ZE?#$`2&=<HkiZrm8YT-gLQ9~{!o(`pW$^rX``HkQiO^YIaw4Fr
zVw@0ALKB(j&}n>JdYvSY?<evTOr)Y0Jz;3eiE+$A1HoTNod#i)D=K;72|MAoA(Bw@
z@ro>hqo^(W=wu2+Ycko$Hc?xowp3Rt_D)cG+8s8fqdkWl*r%?YB$UjfX7jiWGo2|<
zS+pctAHjn|y`dO|ksT@wj1)A|yCle0n?Ho?S>^SKw7`-8Npg{k%uu36fv4m+HUMYU
zHgy@!Gd0d%oR&-52@92__@e=m-(sdwZoBOWqHG?Lj#DGHaw?IDvnD&~7BB%toF$5d
zR%ZmT=5b;!XS^|Kv^HOCqDV8b1H%#qhO{k0whPY4hMG8<R3DfkJPJ9rP)!l)LG~_B
zs?-Sc4K$%%dVLNrQ))!MG$}9Yg4{zbTD^^kMgD>^VYDkcdORQj!7c;<;vxUB<gH)9
zOgbb47O-UdRx!dmXXaeWr&jG0ZK*_~)ur)HDJl(|ivuVANkZo=h85Az(CkDtZ=OmZ
zrBV?z6f<Hu6^o#+cOQDwKQ_u22h?3j(LxqqsbQ2-qA<QDC+dm0REy8||8+)ITth7E
zO6(FTpF5@)qOi~2*#~^_MBu`0IG))yu<w{)CKZk`jl`6Q0fS4<awWU24U6;z3S&1?
z5V&YDvYA&M=@>JKJ|{U(!|NwFKU!{$-P{Ek?9VNwMK?3dqKN$AGslLlQGbY6tw)hj
zkJA1|Clwy#b6Yl`=t4J5tB@+TY13>yeGSc`1eR;{(l!e$Rfr~XU{mASHA@qh1?R2{
z7MdmV1-^ocUgi#=?QsVABuBW;&++UQIR^J0<`83UGzw+^ET^(D-f!tV26(IoX0D$-
zEmWn`gll4z?C?>`l`n;jaqNcpc7BK*%DB3YIXJA+kmE!4xn-eJc8Fbw@{Ks*LkVTC
zvMb*|c`7a(mo+_H>+`GXYRJ*)*Pi<je3vS0u)kI5yL;-v+5#S(u0RDTyS?{%eHKc9
zmcroKFcqPJf=Iq>6MVo>tun~vbOv1F@BTk*F|*6NzxM7m8a`mZD_<tz(f%^$Z1?8V
zXY+*1>FA5?bHno-rZb!e9z|aPMRvFcjQhBVMDCs0i(eEw)5O<kY{UF)PO>xNrB!aq
z^!GOrn5}iDS=wXL4K5^~Uk1j#L{IQ9tgA^1&q@!732CFmPsG&W&<+7U`(2V>5xJcK
zp!e&v5rMQ`=9?*2kC%mZ(<nUl4BR`UBj<#uO78fz3A%wTn22%lZV^5M6AdZec48?b
zp=j~HGszmN6~(KX07gYYhrz!scmV^mnFeyu#6y@-^%5VG&6V<{ZlnT7w_wbBwCLw?
zj3YF}9`RnjbZ^&b@X*otP7?E?Kw3~1W;u05ws>k9dmPYzazMbpIWh}D8mT1}B2rh0
zk=6AHq=ZRYG_iv~xO)G}AXHb1lHjI@bO-=$b5st3NGn#Mc9M(a8ivr={74L;`UylQ
zf%-)O>A}Yomm$2bM5n<5v;ifop8(9^>m$!XfcZD#gHoH=u)I3Vq1|zK@|0p<LY6T(
z!IY8?W~OVxMGsqN-0jURpkr`YB{+y}kL$yB*2#u^VyyfQkYtiU0Q9CgV{?zj)uj8F
z<LY5np7;|ut~5UlsC!@&i?i&r7|HeK&mg$$meh0#;184+AOP0n)x#k2pt0Iv9Z-YB
z<ieuO`UL-H{+aschD86MDEP>42EFuKs$ZZJEE8w}zO%@qWbWJy<-By=;yz1Rm2k%f
zVRdtyaO$=lmFle$mhZn6iq0$QnN6w;<fL42ce^<8>8Pe??FNhHB$(?K{(*1&@j_s<
z!_x;IG=;3|c|X?Aw=QCIZ%?RCU6>XImfVW4E!&_>x(32Dif56d=XZwsKGP_!^QhwJ
zAAj`MEd!pn`mE|8OLCHYcKFn#@T>pNNKoX}uzg#<NJ|QIRpjXy1xKcmy@c=RBBv6R
zZ?+JhM_2%esHq}+I75N^fyA&lAAd~r5#B6(3@C4vpi&m|GNvWvUO+$Ze$0bjY1D(L
z753Sf|6$I(lppuMOnF&7>SfH2$7>iZBVdI6jE3n_VHSX+^uYe&(P3Ji*8K$qUaW$r
zC41~?dagjCjhz!io^ig85+%K6cL(t$|56)`l;)D6-kwXKIoHYjYGG%xuVmRLl7Vy)
zPZJn+Zq?)R2f16tqy@rrxtChv76h@o9pN6x&FKz&0J+p8KHbRE@NT91;+SrU>%U}#
zS+1#8jUsyZcqs;tT6q8A(_!BQb*f3^(RwoAq$B<n?;nX@jWF=Hz2-JBr@_l<mwV?m
z_X!tQCJ2m+FFu$E((DE`W)lpbj!}L7Hi`mlMTRhAK!QtV)EwS9VOwUu$@MDf?Tz)I
z8D*SH5HpByhfS_*s=#kKj;}3N+WI9p1biwGhuTMh>jzUNrAJA{&Y1K5(&nz9&93vx
zuRh<VfwW_2Pkw?&t#VN4nR%bNm_}EnN*Yzo<xJ3YvAk_D5%HNB!HRlF?IL9Fdg`a=
zgPB=sby`MycSa1;=HuIZE4ZZla#~6HqV&n-u^^>8Z%spetj|Z0VyBB*xqJ1TVMt$P
z=&}yAB0iboq0(1V6x&r4&`Y9EQ<-<^_gk!=Bt|qhgE?bil_pcdL!+s-@UqcGrtF7W
zlPPSfO@FL3`8i?xeM^02)aD^`Vuv(C1^59cKA&*?hL6L4)1g|%ZlWD~`Vd?P-rmZz
z=x$UC&b~wXcZk=&;s!Ks<0fYu3Qp6dEi3f_@g8!Ns4Ba8_5i*P|KeOufC9(r<js*a
zrf;fxc;_O1-oQW`SdS(Fy3;-wPmMx1qv7UBEQDQ;KB5!Hnx3N(3rNswa&x?{e=&}o
z`lP~n>eaZ$l(^{EE<Dw!RzRAJ&#FS~PS~R|R5HmNj&4B%#Bl@4J}lYf;bFSP7noPP
zsh#BYRJG_>9r|W@#_xqQuw@<M@^F+o+A<K)PVdl36lMy$PmOfj+xHWu7uu6}S8h?&
z+73xg)PQ1xgOoM@qZ~R6U8`?Ayp<^pm#RM+b6RM3+Vq}VYgVur5^i6m^7bNpH7&Yk
zKkt+fy+2JROq2>u=rQF)WS)J|qC^!6Fel<v^jJOb$5hMOA(m%XKYV$_>U43izy16(
zW?NZ5Hi4Y^d0G<p4Sy>f8@TdHxlC?IeDDKVCY*|o{hl*6b6qvag4!kegJLz2opmN~
zMp4fp|0I^h6w9h1JQ*M1c;7-SFk83yFk1mkYbvO+t$q|-KIoz5dMH<{2YR=t_{hOC
zVGffwAB~ir{5y9tfaXtlwnO<Tax8`8u)e=bm_PjT39;u(lY2a)cw7049ZBcn`1G)g
z-Q|(dM>pk^Bk|9&F2zX4gB>dSwe}nBH`#xOaHD=Q>jMm18b7NV$32_Zx-RIzUI%kz
zO##6TmY0!s-h#&uc7#dS7X)l1f_GNzm^D-E-9o}rn)bw{ie(W|@37|q7a!2;$opW!
ztLO8{-Q*uEzm(jgYT5JlluiV0i)_U)TkWwjX<vUYsgFt~Oz^Sx5h{bWtVut!piBJN
z0{gG4{lNvI@ImOjCAi53=mKhw-7-3^w><zaa*5dKcW|Cxdo?>gim<eJJM&n&2ZtTN
z7nBD84^OthQOKW(%ERU8%wzEgLu7T&fb!-CJhPYB+=h0|5I2DxQwM8m25M>t`Pdp*
zxZ}#-P2r7|gdaO}!bwLZ*@pmrZ!GN1K6fmksVdIgP+>^-N%l~r`o~vSCV;Om!4OT9
zB4Tws2oJ{PZT!e~JjHikB?0Yp#Pz&O3c~00f8dyG<KDEXWd4F;U&l;sXsXoHGSFY7
z4y~@y=uQ}>)ubfW*C!^`O*fbt8o{o+7VTHK>rzuo#4XQ85gW5>m-(4{Efz3R$Ba4i
zJSsIdu1U*&V>)wvn-)r%XFZ%bD~w2tWGos~2iU#?HEugee=G5r2b91(Fpi{qRn+~U
za?!JP;n-LAgPVnqf2P)lEp<+dnBp7Mold!5gKtDx;3jtxwcl#7%~q?kHR7ylva_3g
z6Jl~V#ZhcwC`5cR$$R-sbrsR5PDyk~6*?peQ<EH0gl;o}Mpy(T0+Q@u5Q>iw_gIHb
z0W`YjCx*Z=-&^IdiBSNwYQ%hPOw81-m#-8(sydhXM`L1vX6=`i-&!-)#mWCBTmM~L
z^6Sc-ZI1m8yWkrW<15+aEcGe2JlCW0=9#_CJe&6w^$G#p@xQ21*eGfczVEr=%6J;J
z@A{l*e$vj~?DzS$K~K4ppL_eWUs7iG{$R}o=)Y$UPyJGynwq%y{(>YHw+Sq6p%ziQ
zGuzrSVY_rw8>v(HcHgeYcs|Ex{?;2s;zK|G#R)h*@6lqrh8_-R=_8bpCB{5is#gt%
zly$BmWgY{11S~msi&p+(5eC^xWPi!5DEWG!{3@X&C9rGuDmT(n;_HFw?E+QX8Mmkm
zA1c9uaPdw^LDs0i8IED|>C?IK_XtAZZ7B~AFE>5Q?#YG(DkK5|Bm!S(lY=fJgy41n
z!=<HQke*Ay2+3>|M%m#EBt=1F3g#}p)Dq&8RJ4WU_KH*;^9S#%r<e5R1rvKdWEl8@
zx@5vV7^J8vqYNbDW(PS)90Ig^3qOnUr`2xXUOSEm4-aI6G}w()l5b-a*!(=U&85)8
zPt*TJsG7pL7fHwGunUve5)dv-BXFkB7_=?H?MoDV>b`bZ!N|o{-&n`Rp|esuUyhD$
z2H!6s>Gq-1Lq=~MsSv>t($QIa>U5a_b3VElrQH~u+beCWri|}+vlDSpmPrAS@X1Ec
zY{~|1l4<8#QI5?I03m7sWnGR1{9Zvn2AJ7+i4MRZNJCe)sHmq8m`#hDrnUlF)e{X+
zVw?oTjS#7Txsy7nBO$%aMiV3Vb=6cf(`L}bKteEVMM!p(Qz>EAgy868pZmJe*%+(>
z>z!Y4Pt?9psVnrNN8gih<j$CH?rfjj?a#uIC-EtF!4o@~2A7;7eezzT@R-ilG{i-R
z|D;?|KbHu(dOLqhyiTW$r<r?7^@uWKB`3gP-)qKMYo2Isd8AXyk;^uJyx=*X-Z!Y`
zx<);>rQDuJ_5`l;w~g2+z4auEa3-82*74)yLvcmg{?`^Cwcbb6^a|Wc9rFHA3lcV!
z+DD)FP2bnUmwy13qA1SlRl180v#<q@j!PW9;sb4K=GF-On|XqTRWe;lyp0XZgI<)1
z|39%JsnE|a@m&fmx^*3M3dj6x`B0BKp`<FBSrn-Eah7VkA_z{wh=&tWaYcRj!X2?9
zbukRO6F#V+;Oy2Xx;%vrSh>?=rmXph7f+Dyct=G_4d^WI!MSh?C-&=tA^SJI_pcfb
z=(ZpcizTrajwK`jz(<Hk0j{*_s#{SA{`~CIkSJ6@a#*O{)tS5SL&QH<H*}jyPu-zj
zJ}(q3jd0gelblSjDDMO3u$#K)6bG7YJv=iV9Y0ABI6Et&B=w)JC|a&ikB*#oP@!g|
zt@TM7nxtuJhgK;~)9HbLURSbkbh4t(D-pH<9FxIph1F>dVGg`VW82{a<VRTiPW0+J
z)$P<SZ+x0!k=;)Q^)QQ}KJi>wmH|tE#k%648Daaw5)XuK{pl$-ormP8%0R5%S7ys2
z`ly(E84HC@CClu*cJ6LZm^|AQy+#XzN=DUg{8+^O1V<nW*XS!c4X6g9%%T4?ImYH+
z?BAsU$=0F|kBY$l&o(!$Go49erl+I?<T(0ior%UJ3vSu4er+EM^XcQX<}mlNsTPri
zO0iIq={B<xU<-Z<izy8h%=6Jq3|B+Jdu+K?RBfrOwoIFJ-9m4k&NJXuTku>vg;JE?
z1s3o)Aj668(!5>hU)7003ZKwDVK-yLj4pDTxocW#)C~2ze&A*5*t6$L)eb^Xkt|Zh
znuv;C@Fc|9OD>l(B!vN9e-n7#xtwrUr8846M<DR$c>zL+MilEE=@5Ufqns39Z3>qX
zhKB(R1qZ&6KR86e2YciuEsRsDlV$RLDYYXiBgM*t<s%iBoFfuKlafLqD)Q2*cNtc{
zbgOk=(~%yS8wm0*Mtt63+O0Hpj${|kn*Vpe{aa4Rbz)|ny#-#5A+h`Wb9j7bJ}+ng
zJp}HFV`{%$>IxyHuf=QZVSNA27(!ma6FE5EExk%S<w;lw-cx&mXBzXu7=}1@&{rD6
zYzEGT%l9$}_84qDg>w{o3t<RrNBX^*wcbGV^u*FdBF%RUZkf+gQgwbNS1=MdBH(5w
zAwh13cXxAJ#sk$-nkO2YFigcqKWN7bzik$A!&$aO_xe6x339$V#RurV*d>w^Q^Uzu
z`BxU_Q@%xtrA<HN(cx0C{;9^pm*vptAoftH-Cd?FgcXeTRb?j=KgAm!wBcFfbAE78
zEjc}h;T;v_EqnRscH)`_-FmG+uq0@SfY7lpq8QIVQhKla{*1$hIikqi^(lD4!<j*m
z!6kc@y};?jEK5{oLKNk2JbrX|M8vu}HE;@dl5ozVs<cRLemKG)S$dLNn({NqSPl%4
zZ-XOTQ2*<*xk@HVd6k{$h4Ws0To0s-O&}57TRu87MS&aJesj+qTX!|HlV7-yUtFYN
zySb{^j$F&~==kJWT|1*9H)dpJq;HCfgm%wv0VgMNEknbw%ZYjK%Xs$vVbZ06W!}_+
z(gG?dUgy6JbogzvCshl)3LeY8@87Vd;Bcnw=f&U+SLU(IZ<|f&@ZZKFf#;f|{8mhp
z*p|FNO7U+>d?eFW`1utga@0}hQ?-^X{CQy%B4?7TbD;B`1?<ZO+ybtlj9Ol@E^r+<
zR#!^vp+SUnW+{rGr=%V~UO6m5OadhssECq9M%nitoJ@o14b(c>DcQ*=|5Nsrga0=4
zV)d0WFrL(5li(5;i%M`;BHdX$T{vo69_*KPll!n6TX~0Drh!eAEbht*dQA!MiL}jz
zz!Sd}ruta!?zzx28~o>t8?(3(Az<&(xE@ZmD8U7J;pxICVb?HOCN%=@YBQ|${0#uq
z*VHgAcm42Pr(@=SnGk|O0A=UDy1~hkj(QV7UPn_Ow3yKBwPsfA(9U#0%TN?(0Jz9s
zVbL3dKN=?$bU-SF0)sMK739f%VJP%<yyCz;%_cm-z{*vJmg=!m&5qRnGY|;vNDf!K
zNs|pqU+L#QDW6%$1tLt&H#K(#uA+(U2{=lj5>!<Wns?xlPkMlORvirzl2eP3Pk<y4
zDpNwzpGpgK!>0I85Qj2lpJ9c=bkS7(_(D~X=EH5WVvpF2oIveKdt`{oCeNkP4N9JW
zOkcUvb8~!FkWaZ!4^$DF?C-TZI$%)-@yKpYIw-ZZT>p1T<>~hjFH08DNhhw{s+8&x
z8{#zP`E7yNLC>@2{zr>?lz#Ri<+Dn)ALhq?=H1{g)pt(Exu$)p3_8NODEPf*#h2|L
z(FN11=Jz0?{<_<5^g>5l&IdG|Z@z!r9)W$OGRzDK$2y}at2PJD1(h|e|JwruP;}M8
zoW>vxMs7B@)?>y<FgGigDvd%S54>$SuO|h!14IOsNo0B<2bJzsAvEe|7^yIUfokxd
zZ}oAgFroo8wvs1__MFMx+UV&oVOF4Y6%wR?Z|aXy0NUNR_JmU3TOfk~ob4}N)pi|R
z_fSr3xrrk(hLq-m&e_9!Kx66Sc_(X99LzX#+ln>M1j6%K<-!>IaS))h0~4%TTPOdw
zXKHLflR*9KgA*mCv=ly?gMZj?y!uZh_oz4O#N0!NP;j&I+lJgs)3hj3-pZrFdT|D3
zlq9OCD2mV3N~SIQu<{!_Y5MdnVyz@{V%mO{FSk1VO#XP4Bf&g~CGmjp)wOoQa=3GX
z)@AAh;XME1K+;zYoDv8q2m0I8Ra5*Of)i7?YMBzAu$eVJzP@`W@V8tq?$&1bG>=(D
zzc=l^=sF4VzOyzP=3M^V7X02~AZ0%2Jy%Ef59jK8C7de%W1<4_I|!VUn;Wjn&D-ca
zT{uXqJ(Rawut9KXIM@WviO$#O>OWR?uKu@PqcPOY;U+x)K0MqvxA5za3dBn#;GORo
zuCl2|n>Re~HQw4N-OqLh<tM?XS=<InABGs(j#CwVLfTjaP6%ENsp(l)F>L=l;k@Rw
zb{++LZ3;c)D_-^J*^fZKC;2xjePrDXg@P+BNCJ7l4wfbA4NN0cDMV17{S}QgU&T9X
zae{AGI$IhEt@jtvCw-3-_F2NM3MT9k7kt!*LNIa}-V`%2;1l{3H-S~-{&|%M`W{+j
zw6DZz3w=Ruyve?X1N;`OFBaSk;69Z4^b7yLeI-gPDvsn9-V6=(%k%1@QkKpa&JMjk
z+7#-Xzw~jurAGI_5J^C<k+@^8suf>5a`cWo(M`D`;i=k!5)Dgul+)T%tng#CPdM;3
zTauG4t%o~N=cnWR{NSwy{qHdDOH0}y#B&LT!jlA4Lk7pon^Q}!al&vft&siT9_AD!
z8U+D12q54VaLbAEfAhfM2Y_xv;883)ibY^!1jii{z~B@IfEw7e6k!HrJ$6CTN~qbF
z0X^nH>gmTcYE}@7;F}SajYibo<$#?df-uYimkeIVs-gvD<AQl?XQ*U;N#qH5a<q6}
zf+?E)hcMn1V7#$`cHWDdJ9ZT6$_*|K+M)d%4N7Y%r2uWTy8~x(6w>ilu!x1Y6pz_D
z%m$9dV^ZI=^W!q!X)&Z$suCM3;}aUDC1pniRC-XCC#GZ)3LE3LW<*DaXSfskdCq9b
zorVKwih#G`>bfA&B2bpC3@rv#>agoHTBE~74_j=o%<P@=>qH`+vY^BXIbb}5T-3C8
z0Gj>o7cc(JUo><DG>+dmvRG>8MTNz2NF)7L`p+LW^BT>S{DYU)r2jtc(hQD|&~obR
zghYwq;Knb#qRg;-%taAiW<}|z9b-UMx-#^C)T*_(AY1oglhSif&8v)y_^lWE3v<MP
zYp#t)=iR^0wcun8ht2E%fEEKF_=k>;k<QMIb+scM3!}BUT5Y0E`%33BFBZxiNBeu|
z=|&-(#<{pigpjzndoIelEzrAQWqUUasB?_f(*1CFsYHDc#iAFWgc5{}@vKV~n-loS
z{hmV)dd`)Po+V1q3b!R*L8t|WXn8RNk&E`^=NW%Kyey6ArKxeTHeuc2Z%3X4nkKxC
zG?{3o=e`R7ueXM?5S~z9rT2o0e)O~Yz>>*#|6qtaYrvfRrFhaF{1WbALmCg-E5-Uq
zEqoqp!iYepE4Qy~`q{=s$i+PJ1O@60ut%5VcMYQYNFA}Q0KxO_bHwKZNwC5!Qz5B*
z*zSQPC`MV@yUXmFxdyi)zV7^e^ReWo_9tae@h+u}vudn^R+q9uaZr~ak(Vpu<rg^O
z%;1+a$B1Pr`UW4x;&<}=c+8ayf2Yx|%NE_om$w#sK~$+`JQug1I8F7?2ni}T3UC8f
zb*D!)jQ7k&Bb`CVYGhe7-P&NL+M(LeyV$r)Jbu(p8K`usX3Y0POYH+>!`1T3Gop8l
zY_D6_=3OleUSOO_;8%l;&)HE$FrYd5a^1CR+l#Wdv6<2C#%g`EzS+MynbKA5#%)XS
z7)@pPzRBXwp6td&T{irIIJa7k`e|^k4=5Y+I53w7yRnVJxjvZ_m@IQ!!|ecKCfw-q
zm^U1Bsq@DmhZzFc5Z;1D{bl{#hlXI8LD%15O;6J3nE^>scY@puA=ru2foW$r#&_27
zViQ;6PM(zi7MX{-N(;0Yzam}{<CmZR29b}tCRk3)Z(CW4r?Hs@yUU%Tvn-d){M}nq
zGr<2&H&(6`Z=~)2jJBRbZEe}mhxvYfiKK&u(D5R3rKwUFKB*{E!!PxmQQQ`sPJV-`
zB&HXXxmYdMfzgEHGiL1HHMeZ^msLR?Ta~SdzT4l6HqpobM<peCzWY)Vm1O<{o|JSt
zX6MZrA<pcpr43tct1x_)Te%QN<GH&623K;qmYlfbPnLw4az4(4wVOn#&srb#xTHIQ
z2HsBKr{BRo%NpJ05T{goRqNgnnrz<ReVRFe+s3fQa(?^`L2IRUg1m6=595pWW-TvC
zzkcQ18A#;}&({m+j+3~Qc`Y8erwd`;j2H)B!I!Xrpi6MSRE5g<X@}in`x2hrCMie~
z|0UU`0ND)8i7dn_9<T&+IFB-b3`8N05>f}LJ0DO4T2HNjJ5GZ%!77zkHYqqFZqXTB
zGO@pe=paB6?^NvqJI@j}h~J!t(d)YZmxgYzM9#>9`5Hc`3Hu@~Z$rqNf2Lj3#Q*C&
zR}YS5?u}7TMBdN^FLu7~C4@{k`E!!&`5d3+MOSnJ8<(%P`A5+0Zxziif&C=7djOP(
zDhO!uGCwFop%2<>n;IJmjVcNZx4+Y={nltnB$_Ga)L8nVV(iS5C$(&2sJiOO0&1X*
zot8$icRzAVpn8pHkq9y)$Sq(nLTK+IcSlF*$u^5kcL6*e6Hm}O=!a;h#d~O7)CubF
z#9fZ8+4&+hkr@gcumf#YAOVTeDyM9`h8Eg=gj9*Gb3@CYpL7&WznT9gtHyrewD2GC
z6RT(Nu`5uQ+8f7eOkL1o*o9fqA}D$RqJlxbB&lK1)vj~V-L3k6=N^v*EQk9=Y@x!b
z!r==NLg(f+9kl;`3naM)12?=}lWp;nVOX;%L15Ei2wI)sGCF;dSuw)SO)uFqJ1flO
z^T#DO&x(o;skfA5B<ideBFon0fU{Jph1s*!C<`s!aI^_CuYb$#|3^nFwMvMeoePO1
z^pi^c)R-v4*$^7d3C?BnI;i5hj-o{xQEe_I*Z%*+s3_5c;HR<j(#Wtt(vI39vdS>3
zM+Hi)@0;GAEoi9uXm7{(r4@xsyfu`+OtPa%7Lez)MRCGEsx)L}OytJ&`X^dRtU5vG
zFC{QjDN-Z%kI)>!oU1NcP8+O|aDl(z8$+AlDC!>*GJUf<S_mBns?+&#x`+{1m3cYY
zLy>eIbAG5QUm5{I%N^0qHZ;i0nLQj5hcu$K$!-djm*tX*1vSydgQKhGY#g=H3dq~~
z(s2Gqk3Jk9-;O!-D2OZ@jAYu2b0e4W+P)b~H#IeXjGo?PTTRz)DaGyQ{fn2}VapE8
zt<BX+C1Ma(F|ar0&4(3_oioyp$NnV|tWx<!9`FE3-W_dgZ_{({Ms@p`mwWM#jFo6I
zn+>Lhb)L(~t}CV*p7I`7n=6RTJ2%=A&#{ed;Q#Oik%%udladyVA^*^DqQIunYHwB~
zW!^zVy1o-7{`zfL)VJ-&jXusPZ*$b>EfAXXX05B*b-4fFb#jtVE#qc4r=~T}PF3&1
z#ieEO6NFDXzVXZa;`99A^6$x`^HxNLee;X&{Q170Z-+&O+nN;ANp1q8q)u^%FxJ1F
zqjpyASSC;Yq7vW52~j2xc!RqftzgBNEgVBD#d(YMu7m#Mbb}ZgI&R|?tW;u}%2ZM0
zN<PP@Ru*O1WAM;#D6(CLWR9nMIplBSV4}fY&zvC;tQX5>3i%si#`<Foo(HTsf0LAN
zgW5(E-$n~IxFjE*)CfD&ymSP$hP6<<g_J+S)@{()pE?v9jv)3bK5rU@9U5Ygz#b{}
zmJ-Ly5F}bpFjXksYykK!*Ma287PrK{t5|Q91!NV{5<H2(wOa~(KftIL-sNTgdkBp#
zdJ_77WL&_)YIYLa<dY-F4=OU>51Ak+NVm_|P`|#e5FJ0Qa0Q6Kz?|=qVOI?#vu4fl
zN!%sXL^(P5!8mh-&Mr?5;+fR(@#_1&R^Op%U+I?4i_C}{d%9ErOwIw@M#-QFTpIJ{
zq(@uQDeq{_7yeC4&T8<j`k=lF<We6>6JCm(HB}wK+R9kn;Z487`uN$*vgXO)(63JB
zI2e|>#-RvZTU-#^h=ZW+v$Z*}lev&0=`+gu47g1qNtnq*u~N6h6Gf&~v6_tviB<CG
z4CLdTvVLc;ZEy@xB(a<)St9J?jZ?>Y!llyrB}a#lG7MJlv>B(3+X#ER$Y$kFrJ1p<
ze;BYg83ydr=lNSWbGByC@M~7ii&PFT_oW;)K4Oe9mA;d}$M!v4L`%LfMc6KR&C_Y4
zUx}Go{SrqF0>>RoEY~C(PaH6XLu)_(=}`Yec`{`qEJ4wE3B}CxdEt4IS6+MujR87i
zhmC5>htg~>l{$DOhO>2qB`G9dD?>%n{UoV$tRhtTHF#^k?{`e(&csVwwr{GwwRy*u
zordIcfaGi{7`TnUz(Rlkmt^Sn2A?>xZj&9^w_{>p)t0q~IUf7ov|j1N3VH^K%Wsum
zfPR1yGlD_pq7AMnx75d6UDb~s)VG40(81i3`A6-eLENlx_1Vb8B<1IZH{0%7@X>Xn
z+5FrsoNO-qI)`a8FEVilJ*Va%=1zzP<GF?bs@~}jxJsIlxqj3W)yeNgB@?|eGVv1b
z?eDlGlh)bGYa~4*OlpC?qST5K-c!NaXa?Utf{~&X^fYs*gDmCi6R9a(ZTux<b4oZP
z<%cFp3a6z29}mu)$VnV}8S|{zWv<DGzt{n|Icep;RFM@Y@G{rps47i>u-a3d?DSY}
zw#&DE@b;<^7I?GT1ZVWOs<*Gr-L+_4N{I_={W_L<qf{BCN4<>p?Om0)gKeaY%WFxO
zw?s)wiX63nE0RtcRhXd3sR!1Ry8n|{zzB{$LV&F<!##(s=RRINwvx4KO*}sqWOCb1
z{m07luF8$R*aYQA3wDTx!@PQC?$*1xsrQpaSB#-j=)}dfj@^mX8ufr_gfBRimjhw}
z7`Ljc5#9I@7B?;){t*ry#USRQxl4;34%GR%hr^pQ{hBeZInf0(o)@Bpx`+_x3_7e~
z{i28i)dICD+HKRp4U~i2I+yu@AVen4Wzl1j1tX1Yz-}Cw9NHjtD8f>_$h0^gw_J0T
zqTeR+!7bx<hnD}>k(nu`K#WZXCKX~zI7J6cSH$-u;{PLvS{(!V9*I~bkxYi41H%iv
zkTrO~IK5+GBr9Q{=0zf960*;(%{P|$<;TC;ruRzOF&geK_pXBMTlFFLT+DM%pFU7t
zPaT5y&v?=@MR7-AKua9AQr|GQe&VA;ilat!>ox0u?m*`0nw$r-oPt;5j;OV$0Y~<!
zqP|%UIL3?Nu{=!K+Rb5MX~0j-;UpsGfz{xuE)^fV_|!T4T82Pf;Ed<d?{eJ8QdO2S
zUZriFF4fcchbu;;guy`q4>6<2G`{L>v1Sj=G0B<mOiU(1ZmT2#gnyIr{|KgdXS@uf
zFdc?3MWV6fB9_~T2yR6^Dni>Rk`6ZJOEGoeXo8iEksw4n9gkwABK=gvtca?7Fe*wL
zh<AvHQL7!ce#3@|@KHftbRSn|yc|U!hHFTCmh2rKCl@p5Q`XG9O7{@376fO-%Dj*%
z75rR2VW6_c3nb5D8kAyLma|Vo1?%&2t4t|o8qQ>SJKr}yaHeP80fr3XO@g799f-77
zYP7R{uXxsW3@E^%UMh7D%Wh=zqfH;9;4n`IAo&04>#3IO$$&~<^K=cx^pz4ZcWW>N
zfnL}qd#_i|ia|KbhX)^J+yD@O|M~!sKv7VNVL96K1uKX25MT(NpwXm4rSR*dr+@L?
zNeV0|FM_bc;~op*bP(+cKo3An8S!3w{#CCWQOe(&FovwI{V=T-$EaD}fPe<fSIB=|
zlhg6K7OImq?tl^iX~m8ID*<YO?KTJ?{JjM79ktQ)$Kp4duiW4?-Nq_R&_7*XVu&yy
z2W&WiT?O#!&0XCdHHF={b5C6%SOwSW%b|$?D*tQ0^PI%fJL}e^{hfmt&{pDdB#EFG
zlE5i{ir_X2!iZ{vppG@7WC_To9wJ)^-|+xqz+h&9f=a2FZ3}@jaC1vpUO9)2hd@hI
zs|UP38!0sgNLrwQI2eYITf8uDZrmTx-wF!+vj6<>Xl-ZN?p-b`l}ejYPw|i6VW==S
z1nvX7p1@#@G1^=|lZu|SQeOp{{k%VTGq0R};a|^XTl{a|c>gy^>@6V*bVBC4+1(=^
z*vXr>PkSGxuq~0dPYr`wuQAl@Ke0lc^Y9g>4_s-0DtyXI<N?@c1r7xl!=C4SmjB_5
z5-tY`v4>(wk~l%Jq$7|qKDNG*G_o!A;l^kbAu2wT&w<lsT3ek?;1w(-eMWg?gy=cn
z>lB=n@qBHzPw5%zi2A>9wj3mhqGft_S7=D+wLcS-^{TWIpWqyzNC>jYK)pNldrpZ>
zkY1h>>{F7as^@&EHX85Rg6uL2INsqr!js3!F+@!55R%s-f6sZudc<+qd13JELkaU8
zD~<JznL=wLNk1-nux)WE;uZqa=|7mw2a2GrFEkHml4!q!jCd(yb3J#o<odJ-Z;ILr
z(2S_f&+eYWqU<i*hxB_KEg7xt`&&CQo;*Sn&$p&#`$R{VimmYxy=Fxl=ySn5yZL<{
zn{#HLxPAm2p}}$=)3OcO)de8)x;joh5TXuQ&>y4@N{t9s2lqn@lJd{aM*7vjF>gb0
z!!$qDI4d=2H$VDCz|DDgqn+Z_pXr2s{UC<-alRyY=(WJ0)Td-b7{o~tWuYS9Z?E&h
zkehi&^Y99&^yK>c--0Izhg)YhRW^v<3qlCq>B;FTmhUUx6Z#bG9{nE8{$y=Yu1xcR
zwqm~I<Lku=LWCWp{xPlj;?P_*WleMzwR8{a|KV?DpS`~%yz2jGOv2oTdy?G_-T)4r
zFj-nrd}dZ3wZcB%r{xCu`>&Z3OWS4c8F^-R(fH;Xt?og((JtXwmMn0ya&uBvPM9)3
z+fe4G1pW)KEr+4(72ed=kJnb3&#B||r-ra()q&5@nKEK8sTYk^CLzd`7{MCS8uNcC
zGS+U2p%<0VA%qgbKUW!DD4=Sg)aTYp5iYEz8fK4@Sz#ZZi-0`u?QYnsf8sHrm#`=w
z@5vqi05H?|(<u1pBe`5j$>`ghHJ!OggQXHPd30934M7Z)ddTD7KUFfnvqfkuw|ast
z>Byz9T{Y(Alx8thW`o3hIvYud_JldV>^xA|;Ol^9H<2%x&p*y-m`#m8lb;BBy-R|G
zu$*L1fML<(fDi`uO9&=(^qDiNltLquJS(v`0?IwYhzCi%%J}NmIAg)E7Nh$Zu}9*L
zrNGpMhL0<<J(R^sARK5)QtK%gq!h5mVjdMdGK@EbJKiq$qsRyP6CC+{%-~c2_Lt1-
zDK=-%7<7$cP+$nAwyTF~pXZqo)JY5}q-Y#N#E{L<l`HI1RiWw9vj-yX)sGF7<HFZ3
zBFHvJ)=HxX)$u`tENJ<qECBG6ymj(1X=A)mojyk^mAo|BS}SiMsD7CFByJN7Mcv!Q
zyCo;AxD9a1$6_y#$N4zFbJn6I8;JZ90+JdIED|F9;@#ue6_`QH!f97v7-ZEZf&bx=
zg=<F+--z<p5ncXq;PQd^7FtnEj-gfzTf&yCo#m!X=q*Cn2sDQO2LXlA1RNzvRq%=2
z6hu2g6=sZ-5&@85dl9?B0Gy~V(})K&aJ$R|arm?<4T#3)66hRFXpGuIL9r8>!5kJC
zhtQY;7svTJZZbd@q8Jr8sb%%Fg(sqThW{@GASh${BDsJrLF5)7Ff6Kc@+0J`5*df!
z<_J#LofKlzS*LX<thw5%Y7x89xz0m1&uJS72W@7%Ct93t$F}1vR^q)}z0X6X_A%4@
zAQt}#DJRS*Mh{__hg18pW=c>Zpq7ur;W1$4sW!BKE`QaSY>wq0-N%p3jjVbn2VoOl
zm0KTJ8(#HfXzv{N`+tY0IYBXVO;PfAOzN!JyQ4ofD5jz!AkO;jyp{5~w?Vq%RR@Sj
zVIx{M@2EisM|KP@`n0t!f=%5v6hJUn^{mL{&)jmTINhZ2tcXrXs9vx=I%POMq-L}$
zW7?gJiVc$~sml1%HwP$D@5*`SG3-HF;6o<X>^QYW#+CAK4wrlxH&quhswRF#RO;H?
zId<70`E~7XaowRUv)<N41vfc8`7uL(>jlra$6O?FB=fFxScL4!i^f?X=mO3b`q{hr
zd}mfsW=ng?c<bDZVx{U`(v-Nksx-sTnxh4cGCz~gG;4bi2m-oX_WQpE&TOdi4LmJi
zqncImFXg#o=tFJawfhB*5H!u?`^OBKmGmj|)p`H{N(rW_I7@6_<&+JPQczDAE2bSR
z*oSxsP`+gBq$M7dy$&cN0-y&)^EgeKztQcXU-oTcSe%#qK_dc21%ouuTdhn?1_>hm
z)@3~|ngqB_t#LO8+K@)MNABdJV<5X@n73*b&q*HX?vE61F!rw}Jy9Ux<{$Uin+@-R
z|BX!Joa7w6br*g2fNe}AEa6}OPCEgn4&om2anhOGdl08PfBOhug(DMj-?35l&M3C}
z!N~p_DjdtmJ!PI$C;qX}i|=&kL;(8-<GPbC=9UpporYj4A}ZPgr}_fp7+U01M*2H5
zK|DfDE;sxhT}QWPVLqg>s;Eeg14s;~i2dGbGT}6)r=b^kS#QYoiaSu@L4QaEBB@^)
zDhwFBSPZF3=|1tkFH|i>a7TPDvGM80oi6+;L+?Yvg~s%01kN?l%sldLm3HkO@1ohk
zPg?>4Dxb#sPq$i!Ej3PAMjg|y5jn2>_88Cp1+gF;(epXf5wxv#1VM!@SO4uGJkZH`
z@el2sW=7!nM!*<V>bM|xOE-z7xoD@{W}dS15J9kH6`Xbe4t^QI(MW(H(G}Z+*g1t%
zj<1JW2>zzvo?JbX54HU`U98<;a?z~XtSSELECn|??0W?CBfJF*LK7qGWm2Udkn^z|
zd;C?ggTkt5S2I>{tDPCWpn=Z;y~58{E>rH}qLq&4Rgp4L|2To0XeDieahrdXMK(TH
zD@j!)Sg~>oink2_3iN_!;vJg^3cyh#GRuJzR;<p<@o~S@QU95LQm%h(J~`tT>q+$F
zETr)a02pIgfLFDjh2sNt&;~sH%{M0L0N=54FG!GHxT|84&$A0lvDIOtr)DN6(c2|w
z5~j{qu+I<BrLLe^jQ#E|KW_jwR|YQrYFx8gt_p>Z-}HR$&Sk``)(R5(qTwzA-1Pqv
z%OsOMxQisFCVl&+WINq(1k{rjp5&fg0GY7mc~hp|v{1|ui=g(Z&<FUzl=9~yXIBP3
z0=pVja0+L`c~oB-i-Ak#69J*rx94O~DGpAQX#g84qATY~rDoxYgKq6WfZ|){H3EHr
zMA}We9s<UF8p<#}+7%hTiVjb>1t%UfS6s)H!h#(ki;^KZNrTe|HHs<}2S}2T<tR$!
z7@D=CV<US<P^jl0KkA>(^=XkPQB0_YPEWAi>10~S{&C9~O|(h0`P`@C>UI%ayhek%
zgir${jzCO9tY-_>U3@s+T_?{{-EWJVx7K>JrWWpQIRG(0&cE2}61Re2)GM9I!o+G^
z|MpfxASSkpS;(RRcHkCOT9Z7<SO%(v*c7Z9ht6=)Gs#-1aRa*}N&v__hXrQcdP}ZO
z6ef4xKr)7>@w0OnosM+*g?cfBti>DgPK<DRhWbS$nrO_m`)R-??;=6zzW3v^2DTF>
z_@)?sf76zCXsodT+OAC#Y0?)5TJHMO?mrhVwcgB8B&jpv0Q2?M<|`!G%b-`TTSm$+
zcbBe?HI6!E$JpyI!LU0O`se6mQ!i-?g9AA!$(@`KZ$2cpaAY|*;ObvBGhm^B9{NP$
z-5CScOzp3#npashU;c{yYZrW&>4HsCG+cv0n5(9_?=<e-_=&ze5{zsj%L>S*CQ71$
zF87Uw4&;JenjCja&?%Qsu%v0dHN_HMFfsHlSlx|PV=TqNtRUxA&FXTYr?6u!+OtJx
zfmXy{gxsmE%Ev^df(mB<XU{m3c>b%4xnm<TZ;Lh&{D-Ed<e{G%QC5=EFh>D_7c64=
zwA^(7LG&|Xf-&mIXw9nM_al<P8E}fQ=g#Jt)j%tOsF^^0{&TdB^4F$2*M68$gZ{iq
z_~@pu0nYfzoC?iKL7ox-?u4a|Gk3pNhbNN&TYzcNY^}Dsl?LrvL_2BxLq*&W3vR)&
zDkPL~HPA#4d#I;5<8OVPz6>RKK;kD!mE1Fk@m#~?e?MR^{&X63hN~&5p-{EM#r)t<
z{~CZcr%?2XWT7pG`lgVKT*)c#B6a==E*Sd3LP+zpbKxRhtHbD!p$UM4^B!xo_Z;qZ
zHx5Ar{~r6&%XN#g3aX02`-n|_KD?UU5V!}(s|7>f!8519vQHX+S3#f^3&d~*!~_rU
zHBZbCMdOc{{G1}b2sf__plm6tG<Ndcf1&En?SK;lYa&PRjfCHw6g=D4g<y+608U+@
zq`i$cE-!l!?L`3WS@pUoX3t1&UxY(I_Yrq5clbJN=|gJeMY;*p=nSwY7lv~Z1V>t>
zzWD7-#BI~#NfqA-JtA#o@Jp0QN659c;M1*N3v)aWcts?Xs|8pd`BFu`F;g$H>eOTe
zl98gcvT>?M6ldnbfj-F(57Z?AA$R?{@<lIQ-^37&yv*|s$QrgkS9i<<fV!Jh`mYU4
z8!U(jy;}d?)zJ6Kj@Ofjd_&`?F^N-)W@f??fyP0~hW}a^i}IADf^y7eI;t#UPp5Df
zyx&?^9__Z*(LL3eAk1|7l)CIL%njolr8=#`y(~bP4<iN_L+ER}p~o{v{En9galFCd
z<8rJ88jxlE<AaX2t@xa`z_@_N79EzbLcDz|e0`^QsrF6{z1U6TZSx3j0HF!=@-=Pf
z9d2)5<bb6ACaV5Sz@0zqJls!~1mTw74|%FGphvaZ-X<X0=YU2SuC2Mkk?m#h7Ek}>
z1`9Z!fllyvQ>Thm^^Uq<ehj711%5O4gkJf6dOeTl%9}*PraPmqN+j%V(n(G`OwjT6
zA3SXVrfOWIiJAp0jNs9d3&mvD&WI9X>-fkz((y4?TBz5-+tHtfQ-@!daoNU3$~$10
z@4cpVe}wSL);*^rDU$VA+xp*aalYIbm$nXE-z1nOoHmWW`>^4_SumK9^dgVh*1_|`
ztv6FArPVx^>Dq5HruL;9r>Xs>=sgvvOrh=rZ({&F77H)2PQ=Y;r@hA^PV#neZkicS
zeWw8cqvu2dTu+F+%@36&wmp{_G7-M}0PwkNUk)c(XFVa^<!(23XlCdv$yXo1zq_4L
ztN;w-YV?a&^r++TR>#WBkYa0&i8K{|(3V=V{eJORwBqj_^HwZ`WQG*1T7<>o?}6y&
z2sj!c;PuDQh)5fX8OHwY3`e6p8AZ_{Cib^BB!eJ}Scim%U5#^pBJRWYRRLan@U&=u
zzPI*2@fi3?%X)j%df%*!?g<&b=8Tl}7ed2P#F(2kbZ_ySIG7rL)n&`UT`fI^=Nje}
zFT?AHGhT7*#^n^YA;Ul#dQ`V}2Tkk{!&%l`!;9m{Vxf$KjtlLRW`<8!eUbr+$+&v_
zO7(T`j<{;Pk_YY$1D}7v;uY!O*B9=$_^$r-6lD3D1-rE$LH$+8s9-B#>a<)b+bscs
zmbm0TkiEITAF6zW>w=piC@`5ZC{%{A1=Psm9MR0cpt^6Wha#k~TuTZIfIM{`PWnB!
zthwdNtKS%k=!oK+#ubd;UR`OKUB-FEz}BQ#U;Oj>9mm-@Jj%&MotdWOynFr6-?O7Y
zgcr8vGG<Bn+pL#em?|fVC7ijKGni@%`hJ;&JX>-Q-x-2gjtS|t0oA;H72QVSQQM+{
z{vu$D?LH&%WcU(U=XvriHx+M1Tjp{bch!lyue&ju1;tjp+l$z=?j}BW>)*L{1a@MD
zBZe}uJm9X;2Eo4DO1``$ZJ;jpF|bZf+3efP=h!S-?NrCSCB4Pm&glNQTm0T;?>=6?
zBVqleM^wv|cbG!n!M(*uZ^;>qxxtjN_|bci9agSsokj>;)m2JVLswC;x1clA&N$Ts
z7df4YxiP*%>VQ*}`M^2Nvfq{$Z~ZHEi<?9@tfMs5Ly~Z}l_l@&h8OND*tc-ue;vIn
zYgdT&Ku8+;brVGs(8N)uL|Gm%%R<d*W@~O8>GlZBK>!mWWs%|a>V=e(-UxEJe$VDL
zp3?qD3)S`EzD$=U?V3SHlvp#6y1cYBFYs3oqvOVK&9gI9(QA?DKnWG`8C-L$L<Eh&
zKSQX!BW96qp>PF3+_JgEqtE=;nSGPxe4x~MPzYq*WCw1Cv`*Q6aLv;q2?dVox+H!A
zB-VDRow|za$KW4zOv;99Q6+|kFXemkaE0@4CIh=Mp;BlUHYpTZh2xWBc2=u0N9YO0
zTCC$rq4HtNIWq%%5gf8}^B4<|m)MrLd5(GcR{vR}?cIAz_J=IqKJsbhTXzIex!Evx
zeGA^-AB|}7LgiG#P-&lGeBoFp-XBpyi5pSqt%P5P`cH)C6}S3sKw8DU`SK`kQSI7=
z9y_(0dqMJk7{S7t0MFf-R7g5y6d!R51*H?_JY>~9gCuFGTh7||!)#jiqGRyjM@}-8
zaP^oEnnIIe{o$FvsywDr`Xxc_pi+5eWetggioKWfi{VAt3gv+kueD#L<XY!lIcOTH
z9<F&<xiFrz6@2&0Rp#2=#&vumTsV9q``60(I)VS6ln5flV^~Ts-Qt(i8b_Sn$BgKX
z(s`0JLLak&CF}f_hgZp%Jg$xm7HI^8c#3+HcN3oHXG7xi>UWUY#Ulrs1dcQ=9(4b2
zpDG~9gh+Bh+ouzm5EU1PAWv&auO932h=%yzGsgvb$4jet_FY|wqy7<g#6dix%r(MU
z1bg3rpS@!>0`ngIEo*Lp1m*UkV|FQ#`BNtXm3ZYbqV1?6EX8U2u|D#<^u(1rghb_%
zSR{6XwvJ-(|Nky!WwDT7QdX{*U;b<Mo3tN6b<5FYlcAzGvUDa%=?eYZSZ+?4(VS#5
zz9n4?(YqHq>dR|m^cA&w$IH@C{g2tUt}3OQw0#(1OQmg+jnV|0BUQXKpgyRrwe1o5
zB@?5fC_R%<Pk9SiiUodJk~Nxt7=nhhCkf`|Fj_6>x>Iq@jcgK)F9nS&8lb*LHu>rU
zhxERdQrHYqQ)j29%>JnbZWOV4-;)~Dn|6L_wO;sSR!385;_CU+yl;3;!hi|fIo8va
znsu$aQ(Pw&Od7~(;FFhqzv|j*$DKO?RQ!~b%LmV_uGRz9a@I%(-h_fjvL0!)Gaf`h
zsVmy8=Hse7$YNQ7ZgC;Ps-@u9PhPQK`R}scl#y66<Q?g7F4+*G=BHBuq#0sa78K*d
zer47z6hh$iGnVRK7m0k08V7LhVgMB4+u*kRbnEq;)@1;|y3cs=I=+9d>U`S+M52hi
zJ6*5T->DGX2CH3Ju=k2WeKh@++zhj?nvgG|0#MN?G|IJ#M5??)sR!440d#>bI|D$~
z6ID;0Hd!12xj<lyWc|W+p=c^Ha*@wTm%*Ob1zP{ud@cG)coy}!d9fX%W-GCHJbx@T
zhO_2%fZw^a`X4Z+ZGBsNr@L>CnAj^zUSIJ_Ac3<Jz|q66{uJwHNfL_F-A=6}2j5I;
zywZQzb_bc1SeU-cKj%FE!SdAAW<$|CYdYw&PZ`B9w>UVltprna2kig;?(N(X);Os?
z&^{q6KHJ{H`W3I|HQ9JNI<`UFDO-sl=0~EazV)=nwp1?}>u}1=TPg9JA!2<XE~H_D
z{WZrX(>tbx^`2EdkLW$br_4i9r!bfyHy`ATbvk6Ag4YJj|JG>66k`<k0Jlzk;O%4s
z^mn<_D+*#2F`Ax95_-df?xuJaYmj0D5dzBJTStR6S(&ibXdG%lafz1-@*B3V?l?L{
z_eEkljF2_i>YOVX651S#1Q}Y4lKN<2{uE}Xqi`_BZnAOZ-uOsP*nO!D&1-9ohQht(
zO4HcqaOB)Zow~h^AbtZ(EHqBAsnM4D!9kqbPbU6TOu6y2!BDuJWD(pT6=SDx%yq{3
zN}g<5ETh{GI2%v<+vHC8%vhvcm+(=ANN7^2YBZLC0gG;sm0&CVZ{QDJ1}~sXcwqS9
zcly-*FuJj`bjGaAaPZu8$}PbV6DRVA*i+;*&zsYCh?mU3Z4ILhY-Q`-Mc$=Q)=hsN
z?M1pj$nJ^F?n;_b798zN3i0v3a0bx9%D%u~**&h%<VI4sK+Xx7kkB&1g47qrzp2n%
zozHN()6MMT!?c2iC;;?+SC$`GCSEqQCC!{?%8OxfE>-q`Oi^Z(eVofLxks%?<$uK|
z8rzOv^HWuKubd2;mfjL8O1}_bAG!AcY0<Vfk?#tZcD6V<M?~JgIrFn{R578*b@ST8
zGQ$b)qy!whP0d%SQn=t=h~{d0iqFwn@(lFZ>m;qiD_`Hmv1!4<@u}AJ_iuoS`a_MW
zvRD}2KR<OB>x2I}nRDD~@5iOniiMu%{<^JKqnuX{mrMXTMdpL#7pI$}8_NIap~uD|
ztN0&uR)*AMXD%S7mGya>w4qv8KI8_+z=MIIo59-LyuMJqBg6gvJ!D%N{d6^3!hDp2
zBRk`Nzkcaw=(!tTRs{ddwEN#lezEP@^4MQqHhf47i&VTj_mUu0sl*2xoxF|?UixYE
z$!A+berDLdi@$p#@8;=I*3U~fw)CC9@xV6q(je{4KmM6^wy7Dm;Cqk?d$6NnC#Jmz
zb3h%m1U?=^O$VnVdYw1I>ppm7Ek&ZY&b-@BWPbRZV~3u`%Jm<9%oeec=YM-UkHmQ0
zM0tSOOAi*-pI$AuQYlwXCbb=}&s#iHSeOx2UuZHUzAkhs6APCXByL=%NGz;BS)Vt)
zBB?$-qA)QlJ@Mbfu1XZLaP+1%8x!j<uI#D<a~%|Ng;*g`B!_sY)gI;XLcB(J!tl~<
zQCW_C#qsbelHKm1aNmqOUp{(!dlKbq4PT#U8%)VrRK4fVcfw8y8J2LF??=9BV1A3t
zh--@WN7R0Dbfg-d-x3SMxy`9vb4jBynK>)$R0Y&6TSg0sg8}V1$Xdjpih(^Gh)#iM
zgBxhX5SYESjv%QNA+&~ss5Zk8Zv+h>W?GJqA@V=lMa9QIfaWiL03EKV-Us|sIH1-5
zZ9}Dxt8tKl3$Mt6L0f|+GhG(UE#a^L#25lFYzicKGM*K<!on6^P0!lf6WrOzv0siH
z`TI%AdB|Qv5XWIruuaoc4RdsTi-2TVh%taOfQRrnuf_IpQO-;mIb+BdW^(wKc(fGf
zGE%C73q$4-oikaF_eB`!?bDm7)%E|)em*m0euWH%<Xo7(v%c(r%{uPd?&=x84S_ia
z)yjyeK2DvL&tKS|5)q_*Xv;(fYnD5_O#Rwwne-e}1^QFsN*47!jG{L;?*;#VcK>ro
zWJ7fN@6Rvb`hUc~wcmZVxRLT=oo>jDyvvIxk&gJbr|Rm(nV5={;>{=Qhkl{_Vj0Wu
zAMQ!%R5;upkE@WIB09Inf5#wQ1!B@;RkcGL8dZ-Pn-m?6uo^Np7Y<2?5J)~EmBL8`
zm)6OGLvUY)CZzhZCCzRGPu88;Y{@YcydEyJLr5a~MxIf?^0CLKqYyPzUWrf4Pu9fg
ziu-kFvKVMG!HLq+WH1p19=F_W`8+wez9YIjdT~KOk~bsSJJCJG7yM(_@axveaRge6
z;DTC-?xEwH^x#~vOWHJ^O`(=rM73-|*5Wl<SS?bMfT^WwYRRsrCIMH=)MyE{eE#M%
zmlC|O{GcV^m#j&_sGME|tNn0E=q1@h0jI_<9P&Y2c*1+1Y4);OspI9kN=BlASSvvA
zT2vc?wV;0<;}z*jlmTJWY#X{fsk-fRzHP_w<!wJM8S_3wgj3lt2ShQ9clR%6*e$#X
zDC7XP0*SqQmw=LJIYO@e#fcR<Ds*fJKn{eMTfHN>`>Jr&>fRQ4xWOf|vIW%DFtN5t
zp%tq|UL50oZG#jnTNRIyi<xw9fCy4b^4FcH9kGqx`Lp%%&%iH|K(l3SB8$n?o7Y;*
z0pe%Q#51iwCj$gKYfr4Jl{mWbi3C;AOf!yc)LSbyEI5MCKYh3H_TBG1rR}%R_(ZV|
z1~|zX?lWEYW)1qnmZyC2*Y(D)CX(>)FWAs*H5?i<(rRkZBwrAcA{?|74HmK2V;PKp
zH@h&kg^}OGnN4uBL+S@dbvne_1^QZIOV&-LHWM2!Am^cNBrcYoq|TMo^l-W&9kxhJ
zgA9;{Zp7|F7z99LWIMqz^aci72Seen%-@@d#N|K-peO`f3rVFga3QTE$UZz2u^)9h
zq72noeH^_K?cg6H@Hy5~2w32u92?w|O0HD12v1wtM666j>D5GS75;XL0tFHJKJ6Y3
zLMreNVzrj2)}xA666U9(_;PhVCA!U(rj@oprd(eS)Gweh+tu|QrkzO>%mX<aA#iXW
z!E+|A*#GoDI@i=2a9AOWLOBzA#iNQI#1PFhk%dAa3SHI`_XW9R0S`9(|9ielD)BTk
zKC!=IGvwv_Ee|6_BM9z7*Qa;g&^V~vglWDC;?ZQYRTKaC%S{7BFQo$3uI@s#fbe~c
z@Q*-jNd`032)Q0H_!Nm{SG<H@@rbwtwKqyY#HK~#w)F40fq1NMcKC9q{{j<{k%s+z
z^k`B^v-R8o5etqW0oM@ErC8VcWj~HlHiE%1`Uu@Jki-moP}I=xKu}=KBS$Gk-I|=P
zyM@1C_&$QV5Cz{|l{nH@oK2n*74BOJARNmfG^p7^ivW`73^KWcMmvarA5EcxYv^Pt
z-LDdoOk4a7SBK5|-X6?KCT0-kci9M-(+mO&fsL2OhWiaL&>9I%2Bguk6!Z?5_~4)<
zx)*_I7=ZgdRX2(TS86LPjXu6{v3}CWYOl-EFnhnN(?&5sUb@mKmG(-E0eLGCV5f{m
z1A$pIrXG$H318C~2v9CbF6v&g_>A#BP0uS3R9m99&r)Y*sFWY>cVuiQxM-OM6H^S1
z*`BdcuRdF}I7YjwoK?O{8Z@Km)_}rgKWm?}_p1F(GXkZ%OIRhVwa#TlzYQsz4>YLA
zoBpP-DIUPzJ+moq9m{?5e6k<FYif0;olhr5>K<R27M`ffbjmVWG;!~rY9b4FJ0B@D
z_^gs?AlR0L;zxaF?{eQ&wxWhe%9CKA*%)ME{`|uHb1W)t+1yfz^8=E9Jb;`h)yH3k
zh9|sZMIpsL9!4r9nF6tYCEJH{`a&_pK`Yd?^NQiM$ABoS1{s}<a>%THr*U!%Dhvr&
ziR0@Tu&gyai9Bw21IfBw7<Y*fR+!b4?U`dTj18rh+nWE&V@bu45Sb`W@mTpQes53p
zsttODztS^Un05Zpq!^NGR`Lwljq5WqN!a@y*)3M5*G-fUW9EMx0HDQh=71&bNhg&P
zu14#N;>;$c5%`@VdHb`2DpCZXHEdm_lfU74rp&u3eGRA+U7=DQ92L&<83#@PXbOd^
z{C%|wm52h|wsXm36h%c5k6fNFIrP^K)SW$W^kjuNihh|O@zMyK)wY5SaT10}W@5B#
zVy>gxn+$lRH&<apd^$?uy=3O{+0ZqM$S&Y<=jf=q!xd2&RB1y<avbIJ>?Adiw%N{m
zxVHwl0Y3r9j}x0pG?inBq9bVW<J<4^?EJkuM&}UD^^S%lIWhrmBharNf*}NM8>lJT
zb^?ceM)(ZL97vg~VstYUJxmV)G4*gNj@ig2@Z|4eB_UJ>6|>xEgX#YhtLUOI3iDWO
zJ*0HABzepb5`wV+%?h%>X}SOo5m4Y}X=W1gcZ!1OEqu0gMOLGbLV<(kLtEu4Tcs;h
zmh0N@;26JpR&e+#>JlCz>0{rE^2~b!tSA&rv^C}BgCIDnF^VWkIRst@pdUaEDE9-a
zM*2lw6~X}#5`hje6;<(v3GE<rmYYNxgH-l%s<VnAuw%jy3PMjY4NKa)$r2A6Is_13
zmj_Fx(2Da{_Z7qavf)@YQ%zTU)9Cafzf6R}lj5i-rjUp$(?Lg1^pqoD8E8&o16Ae^
z2=pIGHBd4&IzvZn?qQ9Of|o@TD{qqI!<kGYl{U#fl*xRNk;5san>8U@5XK`8Disrs
z13U!i#e`46Bi&zviWDdJB`vzyta%6k|1dc%b|tTFN9coC2&*5UmiVV1kZ^{QFJ)Bg
z6inwp#@51d8vy|U<`Jl3T2Cszn!l-@l1(nmTWk=Xj`h%SwK02?NeIHTXyu6$L4Ktr
z4z&F?a80tv+3Z&tA1vVVQ9K6#$RtPZ7B5C>DLnjN2lA(XPdaU5A@TH1FZiS)hF1yE
znv5%;#|<>*5whr}nP4SplRukXcF~|_p-Oz8o(Wuy>qyX=3C{upk4)!qlx^E$SS;@H
zwl+4V?`TlqS6hX`VkQg+M&lhDP-xR^gE_G{2&O>s_Uhlxe4hU<efDCrxw^!@yRb98
zxvaScnX-M=>JvE%j{e5r?xE}Td)0~D(A?{Tdp7A7l++YhI%cD6D-*Rf<+D<=az0$U
za^+fk+`hbgE<%pP)mgwfZz*};!Gr$6JeM(&_^;~n-0Arm?Q|C^o6RxhoIxpmu={xY
z3WfaW>7bieB~nIcgGw6JWNlCTYx?ZQLLE*p;!>U4fB*do_)OM*6DS2C+gCq~Q|g-{
zAK%n#c5H>&MwVluc9JiWqYjsD0weLOp0PIb$5}WvU!{{vRRlEW2hcPyVHHxPW}sO(
zlSdRw<vJB#Ju&cIG3oOM4DHHz8(k)(pJKr~KKSk*YXn}yF<vakN2yv<VV+xX5a2t9
zgh7$3NX!xeg*KgFweMxDf~AbegQunyo)PYk)x4K!2L(UHzAMIe|GS2w*-rP0|4b)(
z5A81!FFDNF_O>+|wNXQQPRN#U^j`zEY^_U$ee8(w^;Ch7gg^3~cnsv^Dq%?Dck#D1
zx;?QBzHHT@HG0dwh8081V6UIzfn)-Y8ohFL$Cb^_Tu1SN#7MFABrM+R?XS1@A%J)@
zkGGER)jY?)a0kIOFFZ_Em3=YX8V<pdkngzTUtGMg^_TH7z(TO#(||t|!WzN6@fy3L
zUA22jVB+KWB-qMlYJY=9?Xq4>qVkJA?k+-7H7wHiLkNj~wr(#30S>1&zK8Z$!Q&a~
z;WW59n*_>HV@w2Q3m_H9;qDOtekJ~Sfs$ZEuMiLr5RXwq$k{O_I$EX>k~lOTr~2T>
z_RZ^md>U{Nu&wO=pIe9PJO@i05%A}=51R}ck(WP<<WG*tt@K*TfIwoB6anLyYq?12
zhb7&hswMqli?44aEG4S&q210d-=@nw;KU(WdhZ`Tjq;W3&!tx;i`T6~$<xC=g=+_s
zRtI_qa-(_%g*>C7B<>ibx=uhnC!W(K>N?-jN^1?|SMlfj@mEu)drcFsLT!)s_rv@>
z-<o^Uw#oAzv=1@c+wV8ao6fEt=8&#@XFm^L#MI!tQ;AFpKTXP&4j?Zm387)CR#K=E
zIo1V2A%js-+Cieq+&?3S?Ez%2_yTb?j<g$@NfG;a_-Yy=vXK6ni1L@rkv8~`BJ*HY
z7FMYgkDeRSMs-xu)fxbQ{0>Kie<Bvr*W6-KA&v!eCJ_o2XjXQ&8v5dFP>hBl(fih<
zV5qy`(8m{oBlH>TN0PEN+@htCWPSvntPPxmA|J$&9zkBnvDJHO%akc_^baWe=@pps
zZ!_3tr*sl)uBO`)E-raEF56bu{ksVeU)+RK>#FK-+x4&t6z!(azA7bjBChXqaHDUi
zOv=I2K)1rP4Oa!^QZ>FpE1EbK8=g5n$``_=M8T9T|GfK~P1Kah${#r<6kPDRJfR+r
zTzBaXB)Qa0TwXa}MCFah>91iJ1}RZ40JU}~H<Tbo-*7*ZhYu-5S$7vXa=k7dVatCP
ziHm+%H%%7diHL{td;|SC0EAsN>+B|)Bm~=z!F<i@72$lbc+u*}F$g$SNL{Yc%ac64
z!|h(c1jn-BLSeP2ql~ZM!Z?NZR5jf8yr%jTQJ?9_C>)*$v7G?+X1OE0Ds7Kt&l0F^
z@%QX^uxtVw7^yGuUt~~kYg7V0i5~y3*TZ_J#ZH;GYxHDcdtsRn=ObJ8pc#4ETPIdx
z=nqtjeRm?xvj2NP|Hw!U;K_Lb0{NsILaa>|8J^q{p-K3HIIVs|L!Ios`<;}&k(WIr
zF1GaEN;8=k@x8;DBwydm1uF%CsiF;^mGdctDU_wDvi~y0+7&1JF1UEZR_i4%c;X*L
z3D|gcktB6gi{*;kom2j(x~B~;0NX<Cwbd45=sx~{TD+aXSk0K<?zFeZDg4u-;I;Ny
zv3@6{U_3f`Riaq*+aWr4QotrQl}C20PT&-br!vZzst{!xX<|m8S{bcL^OnDs@N^lz
zKHdf5P~j&u^Il`PDpnt0@L+#<Y>3`Vkbg1L`QM1eFZjYWz}{3XT<bal*7=d}f4l$x
z%Q2=tK0`cC{9|`cNOF{pefzWfzu#psb%`mlD((V}F4YVUHmN)d1M<V9{PJQ$yp3Ps
ztiX4?+5MN+yTq2SrgMwD9Xtz?h~l)5s0k{$HxR7XSDw*aw2OZKQs+pLT^A&!N`c*E
z3$R!m?{>%JtzHg;F$mM-@}8~=&)o2xkaZ)HpwqzfOYMAW^N*KU+X0Az0bC+Z4hP6f
zxEAM`1}Q|)ssX=Y7cesO2MK~Dus@D2$>?ZpECnAqP#DcY&d>X^97zB?5+W>?rG$zh
z9DMXg4;fq19eKm_`g21)T7okd9)MYFe&r-$V0q_l;Zq?%QgcuSi-<5~Los{##XyXa
zs-e6tGasNQiUEmpW%+qjHKGYw?)}lB6g9Ug=Zcq_Zd5~&GXa1B$NpV=f<)vu4_41@
z1rXZAmFPr(#~6k(rHXWgG0B(v>83^u?&J_05LUUZsb~pEEb~tGN)lrUHmgX2Qp5^o
zeg%Fy1bCY4m4TcnaM}UUU(h;!b0#}*YugUQEktjtC@K;B>P?ksQNh>L%RvYnsw-SA
zWguyisJVI)*dWXjGv9@~w<h_U{i`4p0T$ps#AwePLkxt6r)4n>5{z&12@^%%ey;lg
z02YF>X=0Hfvv6F0QMm=W5r*K#Dt5OLM}*4x+e-1xE|--;O`A3<?$+do-Kfdq`f~Oo
zfpfN<G>%3_L6UvC?$|OWx@q@3m<gdk4d9pCDg0{~bE*v6-1SOrxABswEL&CG>Xq|2
zl$j1Gq5~5&oWEphI|>EFLx4N)%Xjbmb2zQyK3Y-U4}O;4EsBEG4PuJjj4XGPf<~``
z0OBGn+aZ2ZjNl5QPA<+6dSP=`7q7lw47xXR#j3<{pfYJ8RUY~CPV0N7j%sODk=qN}
z&h?ZvgWd07KcZI*3jNM&j@NQ*XFx}$Q~)P`JKU!~IP7^xloRH3GHzzk!b9Pxk9YI2
zm8tP@tSEklrE676T&OEgrjTF6527e74g4)Shob!|B$G|xAJX-}k)FgFat3UxAV##s
zLWBig!2~kD2+}#p#_#u*8cka)bX%^feMZqDYId&3ZhSgB>EHCMePjK-cEgZCcsM_(
z-GR+sv*^bX_gBULg^1>+QjodRyHx)NagT?$2lw|Rb&s-G=l>`MLecvL|BR$f4<nbj
zPbwG;PE5~$-mz^9x40|nd-jJ*vv@IU5wzK?YqISiL|o8{i18ctL05iYN0o4Ag!<vb
zdUL|6i%n{`2fBF04gC@XOW)|yH3n<MGzALhQQ_U6K5{bm@LZA~pa?yY7)3Ccc!KO_
zD1s)e^mdfuk5${l(;M?SM5joxu;92stY=dl1n@>gTnPlLm(IT+R<tNWXmh=o%CWa%
zb*(@(=g3HB7XbO~GL8shKpya%V0_IQY+BT{{SXGHpP7`W8Rfsx4>S6t%{4X6(gCaj
zMYjaVk7+Z)rU$Toq)mCzm;%K%!)<`U0~ml=dVpA0JfjdZF9_BW(}ZWh?kVj&12Ubt
zoUQzs7}bfIxc_^Mp&X2b8^ZEbnfo#u)_#nI%NzQ{(6;w~{RI>=gFK6Z!wbBY(oqiW
zpvi!+*$mz)d{pFI-5c=l=E`uJZlqYTuD=!F!^thTIB@&2Dd@qC>Dni*K*v(~q~3m}
z_101R_?Qn<pJ!Pl{KYIIGCZcS2M|{E>`viElOlsT-GJ(YoY${Hfs@uv<NJ?SL4E>z
zLsYv0oIT@d+BHqKe_w)W{Kn!Qx4a#hqz2^scxOkn_T<9tOfGLk1b)F}iocCytu9RV
zgD+o~HeI;`04kkX!Cnpm|F`g);+g~&)LPW2l#o#9FVRWFI`Ohs4(G~-`U+k*yrpp7
zV2SHXhIelE&hQGz3`(r82jBOX%%5L^vEP8@)ttCzo7B|UVB)@_ybz-zBpHq=W!3fq
zdnW<4a}vW;p91$w$7EzV7kYa-2plMTJ~|%#-uLC??C4aRq>Y<t-Hr=4?%zM6<o5Ke
zFF7IF6G>YU0fCeJ(s%mX1TH@&a|`!wv9V=iX{hi)*u1t$OpT4|qfmypJ1B*pD2<8b
zAsKo}X>n?xcw+l>mPqF9e>mKhb~Hs1x`gG<JcC54^bhe@Iw)!Bfe!rHeshIERoK*9
zB%^&QaGhy4{3r_hS3Fpym#k7dB$ha5t3zw;CwJA>c`Gr?T=ux^PH^7i+#dM#?7OE-
z%Zs-Kce1(dT{PySAVR1#y|h+B4T~3h(6Z$*$sS)80%)R#siDE-o#M4IN(fH~{kQ4i
z=ikCS{6tvM_dtKKzJwCq8}8HVQzmvGcR$zTlFZC9xjQOoU=H2JRook@CLZ2R@(PUq
z7xS@~)QQ6X@4?X38k_ciUMqJ(i4OkakWfaUD}*$LxK+7NZ%N2W@pd`kLhFn36YGOF
zdhH|WQa2r9i8k$bW^Jp`glb(OR(VvAV#}qdMm)S&3;>lT=)JL40zWDZCu0ybX#$pZ
z?8uySdn#6L2{OFFj3JAy@~FmPNlKcwP))~6`7-`4U^!4l>x+8;keZo{VXR^%EsC_t
zLhkuLR_MrbEDvX*(o7WN2`0ppi(`}Uayl{c%#Y#}7Egni^vAOqIWs0@VtH5_=H|&6
ztQ~b(4PX;u85zyA>q(0u=$=1R^2k}VjE=@Ly)TJ2VmTi(Jp8bD+Qwkb4!lgolte3B
zIHf6>jJeyBA|m$?9mG)>T!?>?kBmg^;WFeH?_eLiQjbM0s0pm*ABb{n*zagq)<A2L
z>Y&)QX-gyLr>#}x6K#Tvq}~ygGdI{Wg6o$2TX6Ri6&Md`E6z)g1lOjJ93rMS#p?+4
z{*#VGXUwuOMALLA<Ly@Kqx^lo@S_#W)ljU&G=UnKHr8qSbG6L3A%zt3zUL9Qt)Bl-
z;mX&KIOL?aeAVuy4BW!KdQI5;-#BBhNV?WZy4@Zlr7vF!1adFYI^jCe9%1(;??BUw
z^z+IT#PeXGH&pB4!XJx9+F3i;(f3@AR}Nin7;rR*yty6QE!K@z<@=aU{OThX(uA32
z{8mtL*6D`+&cX-2<A-{R9%cl_oEzau_ZP$EI3e<Yba;y#iF#QRBp8+o$52nt*P^Hk
zv|>5Ozu}>IuPkHR-ndACz>aE(Psaiye2_GdWOJEU$V(TKg#P_po{0jFuMRY+5$rxK
zG~W7T{13}Y<=)<WqV!{<HoNl1>1U$W9PESC)nYfLw}4A6(lMQYx#bYn31xZXRD89<
zDh+G)ZEZUcOB@qA#&1>O_9#L#NVsP#@OLy-Iiym~(UqgCdA;>XhK)^~37wX>qHAhH
zg01DsZ!oe9Pk+2jT#^RQ3eFyLSSWXClO46{ob=X=M;TO?Ks|S1Acjb|oGZJ@{2T@5
zu)HcR;EO+2Bb!LUdv$8Gn3aE{LJo9ckhw?})MA7jgX2=h+1N6K>Wy(?3h8F`oa6Z`
zYOq^0(Qls*cQNKbZGr&hfDa?~l#3Of^oJyImV~w%=JzL_LwKR^O};C$+~ua|b*vNo
zQXupn79ao2Q0ukf`@NpR5Bzqb6~DawcXlB>oFM&!TJJPL28z+>&QM(Q8?B8%r@Z;d
z@=D*fk~nE>;w)DoV>ppHAF^e%p~!*g`pT+{tQ{Fx;8I=(z#lV!?p#d-YTvMF-0%8N
zHhh?I`>JTH$Hp=FSNfKS=@p~*z2BDsS8aFSF>{9DetS8l+=|kj`I1mBiK^(di9=+c
z=N*S<d&DiQkVIwbzqlyeN=dgdAiO;IMtFutswH>&YeEI#rFgOMtRX~}XKW|1F5&Cx
zDDCNz44x6r_uyw?;0T)_7iUw`^}fFA^wUmG`6B1QAQS91L#M|xUGD=~elgv$IBv45
zOEh@Cy5l(YHC)@ty%ob9*BFJyYiBnlZt8P0+8N#Z7NgHzGpdc(f3wrX+<++up6plf
z8@V=PZ>Eo;QukDF8_`o$6?>@sHa~77pSnjF6LYJ)eEdC?dc09}3;ex;;JJy|0TP^8
zREz<IT1pF11Ift)5cs%#CEO+<D!cO}e=kYjvzA%9a@}#l43B-t`pfailhbARQQl0#
z`E@HxnQPl+q$B*3P1(p^f|Rp`@28po_sh4iyZYse9RbmOkh3eTyI3Bux?gq|`Bp_A
zp!w97lc#Argo{k|(q7~=>z9}3$!&@nhF~Mx2!|SqY@`FUsN2Lx>q_yTg`be6>mCVi
zr-%nYe~M<!`cZ_}5t#9PooqQ`d4lwuT)r8r+SAZh=wFq_eP@Y}?=b|`*xB<bJ?`V|
zzy4aye3-gnJ=nV>e0N1p3jiAWoNr(Hz9d6%6p;;c;LFH&ceXrKz})P>6ILj5ruV0t
zH=u?!`+uM9&Lcas<@-8sMI4tdfa~Nb;F~acnL=gwF7{-lDIl9jRGni`+pz&zNv0sw
zPC3q~ph~e4laoscB2!{w1cKLBulD^sAEVyRc7IXK2k==`P-+=Y!eGyK@#^Z*5{nD{
zA_mv@uesXwoM>Oms`lMtGa3P$<Gg!NdvWm)YZ3?qWk%~XFB^-MDnnAWmua^s-&GpK
z8Z_I*OemwFthDDD%gxY~1+sUGeNYfxxM+pxxL^Pvws~mNyhiR%c<Fp5{vie@MA(sr
zG!}+w9p=@VoY}!d8Z&CQU4|4ANs<dN#6ve9P?+Jmp@*O$m6^%{7qp^S;Me#8E2Err
zf3sy?Bjz=1o<6r$TG`AtQ>>I}RyWZW(e%4J>_P1WMRm37BoNrgI@)z5^4}(gcc7yE
zU%4T{n3#%XkBz=hdQs&&KuVNwLBcQBs;P-7J|<df21QleUXGQBkU>Kf8eEL-juw=%
zEhAb8%{|kd#;w_8CX|*w))_tPE1LzVRmsS=cewhrKL*#_UbQbgt*0wpw2entTSC;}
zhrJA6<&kp$4dK8osj}(SI~LG`*nkQxo+b+{P4O9-uoNvm-n4b)n{CbA?5b9M<4&xR
z&+j5k(2v?JNRw&nGvbPa{qx@#mMz^4_e3y6#-rmAC^4gN9|9>0p&p))-rRL%XyOX6
z9J(P(0pxZ5<K+jnfyCXm@V08Gdf&ZZFP<oBnLUHx+_4AQhM!Ki4J$DO4QepM<!UP!
zP|u*6<hr^<|44ne+T_g<hy@|LyH3WhnD+gu^9Y{aTxSkm2r4P`$9qdsd2&L!b@qMA
zE~-KsAwWPTIY=g=5J%|{%)~^fe>-zQ*P=N`%OJUghiRJ3=_6y$gdK-Ub?5N>sBbsb
z<5`y2ZhGX<*-1Bi_4m4*TQnFz21y~KLU!0fDyx5T+w{Z71}Kyj84+(UTKC-u$SjQE
z5TPY5XGPA^8Vxkecf*bHGb<R;qZDb3E~p4YQ6`fuq5_o?$YwDMqksy0r-Ep(2=YrQ
z6tYo;V#^PJc8-pjFu<AZnEO@^MyLl4_n7E&oEX)Eq?Wn)?VE;ApZ6?hv&~LzLc7V7
z15nUhBmSkL$w>M&9J^+R1}vY~Zqe#;?8e;c{sZeY)rT)dGyn-;wOa7gojWVx;T#0Z
zHmNJbIveJ-mib|T9=QPM_3K|8FDF)5Y@lG$%Z1q?tJI0VyIjT8>2onnYQXTIa#kJy
zs!ApXqy!)X3OW4C5fTW2=IUqo#UZ3a!ZZLBQhE-UbxSarGQ|Xt$GmL-SUE)Al=3VA
zoz4s)D2n8^VI*XE;CT)zl^jk4$$*Ma7xX!inz(g=rKOfqJ{LA2%`S_x7)S83ZY3rB
zCC}@~dad^3o*0%Q`xX~~n^r`jFwpVL7B-N?NKO+09vvb_Yqwl9&Tkv4Ue1gRL%;;l
z;z&b|*3J&B8v65;70S16%rjz$Q9=rgC`_;>M;9Z@&o<(A@|NlF)PZuRZ-tvs21VnJ
ziSV4GJm?e^Zv%9>akrYx-f^t^pnU940$ibr8sOEt*JeKo4Nx&F|B8MmLn%{UR%)X0
zT>O(MS|4G+FAvfsQs)vwWV(27C%SxT%H4FeuP%H%8P?R?MykN(Jv<G%LutAbyc20h
zX@gGJuvwQD6*cG`Z*Y8|;bD$<<+%dM6s;&CqUeRd!<I2=q(XQk(7*30y=9T%L~pNX
zW9QL9iP^(^%JXzX#!};n$YPWK0B4K7-*46#n=_^@87Yq+ryODz6tbbd)8)cj*9kL@
zEL}FI_f(nSYJgbZVR-Z?au}7H%i8^V-QkW7U`!=6+YKtt7&lhepY}dwF1-*w)xc0L
zH=Yeu?%MQIOa@Zo@RmWkIm~=YdAasjpD?9gR}7v+U-GNZo_|c>6^GYsiwU<iEC^@1
zAkmPp?Jpj<zWA-}S;ZGj)jk8uYCk-;BX2p}Qyi5ttXPxED98nsG~04U7=#Qt=m|3l
zy%6QAU?r1+Ebt>=cECF_e~~khj*%~W>6Wq}c*!bwd7;-#g4-|z<Hj&%k;GHMqZ3#`
z(P71KWE9N?zA>+3<{IBBd&4>v^LFO5!Tm3SFMS{LaD(Aqei5?`w&Cg8ihmY%f~9cY
zQ)9=BhGorJZvDPJJEuWu=+!bi?#DSyO6S^rR~j9k@%{Ap<}Ef+#L~?pzDMnF_WIi(
zCJu(MdBQ}yBnq58aMHH<))(?uayhzq)^zK6`pwt~CkO+69i*H2?BsseS$%1k{eovl
z7MpBB6tNBf2IZi^CmaUZJPI-}%F;22Wa6Xzut->M4F*BxOsTkj_6}xT(4P4fjn{6(
zS{$H8MJ0&vjILs}T_OcFeqAFH=%i)&XB(yV=-*yF6GGoc^ud^yw~I!_`NTRxIPjqc
z5PiW%)k<@t+TxEJ{aL)Thq7G|vS>~lj_5R3Nx3)3CLJ`PsQEArh}%A;QF#(^V_rX{
zFp!4Zi70>|8R$ZzBPoXlBWs`(;h>fX#NzvLk&X3!tHpFPM{M9r7F-U#lmPC8K2*+i
zL|_HufA|AG*zU<5`2(EX11{}+<>Mo6@3BBE@<*@aTcCf83`S*)j1T6%0*!V#HwwNw
zyMKN@%gWrpPTyN*a{Vj${Q|NKo_-hid}0de83gd~Ml!Yc!Q-w&xjNiZ<JZK_#qof-
zJRFH=qWuTD=@DiV?O<(kXIz9h6mfsrkb_CTPEyVsUV(YwO2;JIgkEX3JB7`X1FSX;
z5T=JF;ovi3LExN#ix2^$90FM8gz&T}5a4wXJ_kN~ON9==Ch!h5qF#Q%p2AaUgM%@r
z3ilKY4XFTYmxC-2gYSnGzt}$ou0*bx_?|}{b(G?bKJRDueC1`=*(kc$GE`)VPH=sq
z%oN)xq$gaZzOk{>;$kbJ6Nt9Z1XpM_iM~m`mO0F8*Nm{W!(^CNpMdml2yJM`y~flK
zXQ#+Wr^E=S-GDP&f{(v@+c^~sp$;e7hye8TOiLZJrN09R!w&HQR5eW>Ei_H$Wb&09
zJ%E?r$MM4$1cBiB@4gQI|6`YngC%lqWMnV^2aA_2o2nz#JJrzs&gsF($UDa=r?<<N
z6)_($J~zH&Se7q8Y@BM8p8bvYQ4i^_EW+bknD-e)Zz_iuFOoh$gY)~j+@odc=`pCg
z%qLrZo6&*t+5zlc>_BZ<I`xE6Q#BGFZ-q|RTJ?l})>UtDgI0V~5tzeU)`j=hH~_P0
zE>7+LNUR(|kElf3))<Tk+8+hGX88;K1n+poRdjt{p>jDx=68l@R0)d`4_v6Ma=za*
zMTNn7p9?elMz13>)$7Z0W?l1Z?m+M^A$h$Tf)+!;y<>r6lZ9SRE%#>Ke8DQ)wmWLg
z7W+DAXdTcB?||MofY{Cpmz1p#tEgI`&MiYD%e3KdM5?#8HAi+N2mLq#jkFPtyfhY!
z98tX?@P@aVk8<%moASaWr~JZg>dHCvYPo)!<Gd1EgD`Ajpb1yAm02QlHQbh+JwxHM
zds*tlt-TG~n6Ag$#yC?Z+Vx&Z(a~L&70Vy3KrUR&NOKz&;yY~N*+K0<u5jB@k>@f;
z*OV6UAZ+k=*Xahiu*O<8x_;|dd8c#-mXF@(gmQ8mOOd7d(2nB;0fx&EH>`uGhMW_H
zO>K>hNm9VEC|m){2;7Kagi#XWh6on*<sb*bBIF3(L?le^d)Yuy)x>|039>z%I>Lnq
zXcl*YtPaU0x;yNXsud+6w?>Uhk53<cYjo$Jr1KQ4xIT2^C@-48rZL&|qa}Hv6;GNc
z&)D9SA6ov&;XN0Vtbg88<VB8+J8$_mGq!qc_5Dbz@AnZWOefu=zK&nKC!(5_WCeSI
zW_;zfcDkZWu_tN|-+rKIJUo^lMoDsiXc`f-NWu`pT3a49KTmz<11ino%eTrc-bmcm
z!Suc5Sy13#Xm_h71sO}=)dumWFyxCu&TiAo%>cA)Qd1W#o2iq8^ikA5zlb53^(mwk
zv1GwxN2l0;z}R<>Nov4d$7Bl%B-vd}7d?Dhs6*TGvnl@a1G_$$)c`pbfazo2J%ZOA
zm6G0}VD&2Woh+GbF*-#u#kYhzxSZ%#hQ@vp9{jZ_Bt3X2T2mGw3HzDujn6;>EG<-r
zXj6S7lgBv0Hy3qsw_5#4|D=-Ej-HO4JjfP54kB3F&<sI1Ct(k_??!EZQ><(O)UR)d
z*us^OL3)C$tZ9un4LkkeSnWsc$I6f8x0|FI#!P2j9DF_>r<EY03r~C=@E*2{cKc?)
z@|w;meercCDbEv{iF|}X?+edKfBN#GEHG6~(KbLcF0;q@A6Rq;D-)DeD>&Pnpg;Gt
zOQ;xZk5u_?=AL4fd#u|HP5SJ{di9XdsB!45k^}0#agP^%1|b)9X?y|OwB9D4@@j}w
zT}?He7TETr5TW<Ip0TS}3gN^9=$k&6Lz24(6GKzn{^++sJC0BYN47kb+5&#2BIUtx
z$a4dk_)#sS=eo&|I%Q>+|Nq!%TC2TIn<18@d2&)R7Q2gV0@zifFI?Qz?jNq0JuMN|
zxL!SAyGH)7{`aZp;lwllHJtw9Wi$$)=VHAsoS2lA_h;dI-%7}xO2v(U1CXiwP*K<Y
zCFhuf=e}NtH2uQS(EB~-$Eb6eT;!`!hyKVEA$ZPvozGDA*Ti_q7ryMNgEe(`ytE4w
zGfZm`5Y0dh0)K8hg$>x;FcVNiHF&%3)#5zgb&;V*7VU$X2JiT?KO@}3Jq6X8a8U$o
zK!O&<A(qOAu=c&h`_DSUk~H7{g>2Y9aRm#V&YIaqV~h`ZRl~M<$+??OJ$RVlaDKbd
zH6=`<lhx+~Bn9x^6HQ`y27&r4Y9gXc<>82Y{PugL#Y~F{TAy5l&0%ZY{SgFDqZTgs
zDmxrQHGq$AR!~0l+kC=#@`?;~Rd`|uK|vD<Qe;?Mc2kqD!J*$#Rkk1bj8810|A4ov
zjSQ)}iz3A@5SWL&3%iA&ijIz@vIyKBNs!Ax%X2E2#KKMGebS6{saWgPqQg*i>T4yP
z>YePJlv<k+Ckucwhyj16KveIW0uV8#cwkrwO-WifGSYv{sleO$34i_R8;}I|YxVTN
zaUblGNwc1svrtsd0MYD)Dnfnm>|A>8R(r>j!v5jp(4K2?K&WdBMH+QEczo>kbh{@$
zYc|3(-x5<7$D$<{T6i}gLimv<s@Z<NCA+;Wsx0z{HZ?eW3BCYtzX8|<;h?d306B<2
zJ1^kxnRbgRYWE~`4DM#p)H_YR6QQ^iZHnfAG1+KpJ?i`f1W;B6?F%17jF8R|Mkf*2
zh;(<~mViW<C#a}w3<jTl8BakZ4^ie-jyh#>(%GkaP?0kvMnv@M@V7&>`gfGpp&?O#
zE+WZk`w)TG0b-_MRZnB|zYn09!52>_LTu9z+3-&f%GoN8ZjJzwvIw`>k)exS1yfuE
z3lRM~tj<&Sbsbk}@&!Q*9K6ZDsL}~;JnhEwY-08S8F`vem%TPHXsGJ+5x|^8dPyjl
zjCYkCGu^Z7UZZd$Bo#);6#6QQX{i)a;*p9e`}#6K5hUeMYO%Ka>3t>=YCz-)B4!Z{
zK?SArYLg38LL_xTF(3g9E_0O#RdJqE5GT}xNbHM5Sm^tU5*VG36aZusnK*5v2}u)t
z0EKMDJRr&62nMk*YucCekw}46DI}&eksK46x(Kkf=G@@<_yE~lTL97JNWSsF=Y?CJ
zg({-35lLFir_MouuT%w6B@#7YggK8)=-nj-;0i6NB9iFB2#1Iov*v#nAz(;cHVg?D
z+_tE$3i3mQ2<pGb(KRLt;d6-hL7)&EMRW(u%vQzZonT(}VddDmOT&nZOM8e+b<?B5
z{J)A%Lvh+_nXQpWts+b6E2mZ|%1@)Q*jSK9dO3cCECz->tLA56O5mz&$dy)?1!OK?
zF2-syYc-TL8>YfWe=`?IzErF7O&NXGZf@!nHnIyiF;f<qLktlJ0dg8-t1;VzB+cYT
zL*;U-kGcMVeLE8?QA{==WuWs^>+<Huw>N!|mpbvxh~k^p#IM<Jj{7tjexl~rq2{^W
zuC`j%Kv_S<wd`|aOy^Li>9Ti#BvV<f-XWgq0`}xP(MV`arfev5Mu_FCxZDUCsIf-Z
zh&E7|%{4WX&L;@a9B9m}q>#@5(4OX83Tf_K`ZFMw3A;Uy8r&^L^eo+A>z+f3ChWE0
zdy!siqlHHn>g_S?GUjA-OyYNySsWotj4&O#L@4BEa-_0w0qK#ibQVuo-0@0HQN=6w
zjnM1QPc`4POUEBMwEU4^g5=)U+poWV3ga&^)=7dILh@a;`NrhjRo48ZY7s~#vltp@
z6{ce9ilVY~)|I}hECq^<R5otKvneCYJ)7uImlu~G4AP6AU+L*f`bf6*?Z2$<gQ8NU
zM)oOMvfX#Z$YvEQlysQnP1B%Mn6i?ql$F48)92%uMEV%P)p3Tsv=Le{G_3+j;wCFi
z+da4qRVB7#=)LqT>QvWO8Y=Ly7upK#m(|GnMf_?(weXPCoB+Q8b1ID0R(#Ey=4X~H
zQ6%;xz0<56p;0G3ovWYU+XNvXwx?Z*eh`&<eWp_b6y1$AbA_cr+hgf9Q^16RDo(VB
zCE^R<cXMvfCS7pcS*O{*1_#Jb9sp}?{NrZapK{mgP0_~O!TPwuB->n1f7FzyUAQSS
z-2S!(TLkZ4Ck}zsrW&f=RW41G_t6Zf^xN^$`GcIukC#ten=w;SwT=NGUV(xi5TwO5
zTZ3u@!8-PT_iznfEQQqlm!l*>aP=%*P?f+}>a`;CDfqo`*Y*{QH)N%2LeQ#(t8$R}
znGll#3lsBjcb4+;Q4qlDy_lNsafqC53?HxDP=m|T7;zXRl&uW`6#n1PDF*kUpOZP#
z-*S}A-)-dEMS2G4W`-YtJhQ8dGoj92wO6EUn!rg!I(vd&PY+M}gzIN}|K7J3mq;xD
zUVUR05OiCV(~X45Rd6Waw9b$P@DQzS7<zRZbb6qZ5cOfDczTHCxU^9rHD=(mh_Fy2
zRD*=H5s9l1T;<qTyqp+EjE98Fbs5E23}BNGidki5AcXXgMkP2WL<mrK>8*Vzg@pLR
ze$>Q0dJyB!=->G;-`A`JkP8j;$s#-|zfcM?wfE1OBd7&=?czjF|Fj**EzsNv+rM#a
zg6bd;i(uMtpW-rY@I->dv=T%&DSg4-O+Z{Ld<A_@WIAt!GSdt<;-zfMT>zs2+F1xG
znkIs=EJhLF11KAyISADzc;O~9iM3M!>!uf7;<A<H@cjE?|9^S`b2_(*kuHY(meXlI
zG8n|H5K5qAGhOO!4**;{0UkbIg5dON6kvkEs3g(3=}5%!oe{WzXh`X<=D|@-235Wm
zah{A-A!LOE31#`vs|b4xPo@S+X{<=uk?R0ApPmBH+pC=^($!^~R76SG)OF0=Jz4w!
z*u{wW71Nz3pmob+4Zf>h=zu7X0wC-J(R6&jO=e)MQ?fwkDAF)MDVlRg+2M!*Cf$CR
zed>JSFwTy#vIN`6u(mXY8RPI*fyro}ZFz&aj=6}1a~#&{U2t1?GgTF~kzTH)HWV0S
z0)i4^!)hGV!2+n`HZ)ndJFHR;r+nzu`u=a#F0QSuuEF1-2ptY0YH-E=V$SvK*RK~{
z%#F+v9xPc1{V*&#pV4*>{PUV+Ld*TpIh*A?lq?mGTZ;;1wJ1A<u3K0ol}CleF``B}
zL?8*fG{MDKsBwwojFd30n}vQv9T5p`UPH${yjmq#tkwwOLjQ^O-L_$<m@+1n>_N>7
zmqtq=hy_NkDR<f9r)EYRg*s|NEIs~k#!T~fZz4oW5awjyE%HmWgO^DAa>g?%lpH@*
z1lfdPDM7~f<H^1pMK3|%9=s<6`&lUz32ENz2#-vd@tz<g3mKuv1LMGaNjt@37@w|O
zlWzgpWWOzbOFy?xUatJ4MVU6|wNRWJ;iWs-^!0XUiaMufw9u>-Ib9r9cQg|+US2zd
ze9Ev@dQD@e&G=U+&Iy-?uU>KyYcmS-Slx39wc3VAfeX(46+N!S$CE;**tv08V03lv
zR;@NAXr&Fq^M3Le0Y`Q&TxN>;l6yp}Ep{0|<SzcsvSl-to7hQoChB0|?<k2QUoRDV
z)hB+h<q^uQ-ZP^9T+zxEKH-wGA`p%rc(p&wod9TYWscC%;Jz_aK7dd)i)zdDQ(*tG
z!dXC!?dIA&;r@rVXoPPtmS}T_Pz348@`fx3f!583PZB9GoG0alLxh*R9jIo%(B98k
zlyaDj+ul+jaEwCb2K?4L(c}HNFq-qkSNg9clb?eTEt{;OmW?ge=kv-wMhjvS0F)RP
zXb})Mr=2Zi!UDp<u@vI|wBRo<YOjLD*O`LR^M2U<n0~)m|M)%1eUQxhy?^XC5Az;2
zsoOp($~IybCUG$*60~HS;a-DT^Z^kGZ}dUdFhWfoQxngJ=hkJQw#72ke-Bniy$=!<
z>|^s<uMV$EcTSK+M5M24;5FhDM++*>Goq@O+1SUfLDduiQRcgt^zwS!pKj&i`l3cR
z>&A^%>iWUCHRz?O*tGOtZgxh)kD8HDt6MlbUjH*Kjm#FM*|^33S_!hKlfBE2bNe+u
zW=^;pIW7HierEjp)FKMXpk12VuW_;NCGXwJ2i?gblS_sgEUwl~o2=8Fe&rKf|5Tt*
z09_Js6FVz<|Dz<y_YwzVjLfSV(qA-QF0HUrNWk4%=2G()CHC8JmoDNox7q(dSP~sY
z_8Ehj@@m;B<K>x#_5lqgo&cclY>DkQcsrOGl<7!K@-c3qYBMDTT?(`nEce!-Mz@CU
z3i3%ueazFL8&m6<KT58;VXe>_G3ARI>-r}X1ZA$)rJ<6&qfi-(eT=9-Cj=Js*9B(s
znmaSIs245Z-wddr9YA?;5SZQ!v&q6)6kt~XBG{4amk*0q08m7MG6avo1cjCbfNdd|
z>j8jqIs~SLLSW`B5Vbl(S)6i%01vV_R8|trWxMm_FRcWpFvocvsBjAA`EmAmu;!ZX
zFj<$N^wnPel*Z)b(9g~ua(%m2bol|9{rZ&L*5B2i?<e-R%U+L;4&`v(e56;j)$#gq
z`(?`<uU)eT?PG`9+QEUgw#-fJ_pHqzy_btO)<R?yD?wIQF#hbXs&2CXkek1Wi6(Cw
zoszuV7?U?mYeKnn3Yqr}nXCxyf1Ann$smDfU@b)H=NK7m2_m-mmv?qVB<DXD^3}6s
zEk%cUZ!5^XITu5}YaPJBp!=@=&XljNqln;nXqW=9kxl6G`#9zS>Tdifg}>Tb-7Wi2
zZQRU6kr$0Q3UzCSRwLG`ziGV{GVKi?StG_EHJ1_l99%e<F*Y9)U@#Jagc`xHlFf$C
z0^3r=mH;<H3CCgy45tc_zy0ry8RS#LHIk3;8rdfm{pExrFp$c$b*H#?0nni1lY;A8
zh_n2$kE6g<M{*ToQy{3%<%NSqW7J0KG~mvzYU-9PRQ&%0bnB62_w1jtwi3Ds_?_bF
zfh(*%-P$1`J^tbljYO%t<JyI+44gvt@MTK~*V5juHaP{sriDbhSF*uh7ZcgU$S44y
zy_*l;ykV#k8@pyr;>L}aXQuHE097+S^8UE*@YhU~omz?9dKvng0FE{&b8=b|ATMO|
zPDCh#Z+3a_nsD9Jv+L2vF}`=AkF_WCELk|g5J6G;{44OcLyu0_00EoL)AAs;y-3$@
zFhK3?zqA@DdVR3w+M1pTDdcymXU_>u{8F@^M*Ei!>mlXNQ_fSHzc4$UM*XLkM$Frh
zO!wK@_)LyKY}rs5R>`j1h$`7MKLZV*cNf$HFN4h{z1NM#EjoI{<h+Q|>Hecm>oMQi
zQ23K9qghBrm1pGdT=Qo@W_Z^5dwy95VLof`2)<cQYP6%yq}(@E1{iBrD``FolsQIW
z1?w8CsPCX=E$lec3fLtuQUvq55!&h<LlDdZ#}|pi+m?7shLfpi&DRu3nUIC!-K<hx
z#`7bV5FBO-ENgS_G55I|(Mju{ZZCUT;DHFu6%0$fH?$>**X;y}05-U@P>dKz1l;Lt
z&@bBng;zkYL^+M?fK}lnLOUa9#WJKs@Wq<Sz3utWvPV@#-x;!$EiSqIfpoOPVb!-O
z>74L;=QES;9cuoIk&2;H)xu^h_W$AJW=J0DWyg{`nt^eG-<^>9aO+5|;h{L?;Lx3z
zCfC`2wu8h~P<9wnTI`%gd^=mkAy7_+euYsS;6@>+q7A8$lvx5D(rb!KaHZo9E-u=3
z!^V;BRF$$JFwUe4bmZ*;HiEbk<lOYOKGeLf!KDXhynlo&zBX?pSfx+CllBnV+mT$K
zhHQj7y`7b~a8N?&w<$d9Yy_LWgczz;Sx_BB8I!2ldMkvO8yYs`G)T(v*wxs*izi&8
zSOadQfHXp$3XfQ>+0#BhTMWu=tn<CXL}KR<0q(*_Xc5P+(u;nu??WSnQzqcLFNja1
zrTA!d!vl$PpSV`{|G?t;_WLOgvNi5}cf3$TiB`c>rN4OwX8tl8Mgk3z^*hw<*Oo_l
z_-J_cV(4+CVmI%)m#q~*<Yyxp2K-Mr2zjsY<k2z=^AjF6C@AcDel7CQ(<KdEw~8CS
zPLad{de*mCf#S>R^IIBAvq~Gc9RJ_t?4t7GTV3TPr=?nr;!3E&eRc7l0)b>0U3EjD
z@zY5Ke->{ucmPZPOws(h+mc>hk*JvT)wQe_QHHDVaY6T~nT>vz5zHa~rK71s&d(nD
zHD*#RcM6N)Il@AtvW52|MtEevHt%d<di7Q7+OOV=#EK`~I*~9-sGMBVNT*qPcjkJ=
z6TOF(f{Q{j#ZP%lB~@;=ed`6V|5YKu(--LwKqy5`>og2GSpN8`7j#piYJ_{rb6dSn
zjU*gimY3r4Uh$Rh{R`Nq1R2UgF?AdPPJ>lZ!YyYsW7ZEWS3!w`39wwNNPu(8I&C6I
zV5jBtq{1S}(SD%#(^2~HT7|DX3M?o_JW;xEt0~+!tn7TjBWmROh*;0n-Xq26GO(`H
z2z(>`VB%-z8a!%C=Rt76^|&-#7=XDIYsYB>UGb5P?h2KI`v&iRl5cna)gv`5xFYRo
zy9vOu@aDEz{yU}AnxVY97b-9@Q<o{G+?o|L!thvFU0|~#1YXt~2p&df)E)M?U)gAL
z{`SUAUP}Z~<~42U$ls&H)|zhJOj!#IEWOix<CVGc+Ww_IbDS7<DuIpqhAKIK1!${*
zaj^+re)Hz}c^$uwsoP6#Fcfy=n{9lV*1-%W@5kQT&rIr=f%rbkKcW_%9j@4X>5C$?
z;zzIpymZd&&NM?%a<A{T$R=jy$Ez=})AoH7B_1MLyPY)&z9B>X;N0B4vJxn5G1}`#
z-htx3jj;Dt4!u6Rs^3oZWYtP^-(j+K7fWNGN5y!BD>l_m3qK2?m+HGFw+AX=KXaxg
zOLfyWia0jj4)UHlCKoy#OrvV-m9eJ9+aFYXmc!fJTAlakzuD07zvwj*V#IG3s)%bV
zD`1gHi26pAn5m@k7yRDE1sN`0rhP0R=_YTLS&>=#h?AqIa=kP$kuemP5G-$L*LCFe
zc4xZ@J7_}1#{ewM3_uX!8-DJmx1c1UY?~eArf$y!uvvX7M}yJKvda8Fz0l?bY6A^e
zjCqky%*)R^mFsd)ZpB4}7`3P_Eidm>nrXu&O$?5;(0XXjaLhuNh0a!`i_&OWn2nYP
z*;YYtR6$ax3vheuYRv(?J-IIW%1S+G3PLJq312``XMmA#fDKb1P-gkfLy-c$bZqcu
z$|SLHJ9yHC;iof_J#>J{u9bk+s*`K>P0vIHbq4RMdSbM=&sk0u+#JU#ge={KvYW(|
zM4BU;Oib!ie~D7!;FBDz=gy4T*p={h%m&5p-UL|U$v6TPH%B~{dA2`M;_|RM5V7pj
zl9G7XA0{J{zN0elGZ+`0E;5LpR|tiZKPMU-z_`z(zGE<P<j}0LNfLxQ{y$BGWnrsf
zNMbQAea}|p`}eWak?N4up;m(PTPFL-*iO|3c9<+U@<c!OhLjseupg=XuAr#_V<DHQ
z31V+h?Hqf;X71qh8eNUOoN)I8&68ZHOaZu)vZaT>k8?bta?uqggTxC$F=iU}I$?f7
zePYrgAognyb%E*s!L+n@i-hwgTf`0aOCI$coV-8pYKxY;>?zFy^XBE7zik+u>*Jxt
zHv6EReC#tg0p`OXh(i!S*H;o>dI>?&yf$!b2&^W{{vlOC;0A#-qf9lD$f2{o!$M$J
zUF#A;TAbMJ4M7IN%whAIYVg9ke3G!HmO^v@$REOHisfVw1dQYU9E(PfUWStt-5L^S
z4;Zy|1bR1ykKI9#3^N}B2n`UnX9m;|pGp9DV{P#1h|UcIp#maQ4~-?n`lDF#aBf>o
z0JD>Tz=A9~LlqRXq)e}%Wlu}+c*LWDIbQtmgjNVjPzXL@QM}NcfdT=;1|TU4@Yh?v
zGi(Kz3SL%n0*&d#L_*NZHpvH&9EUL1jfqkcJ;2SyHGhThL{6QQ25|$Wo8ibX$G5!H
zbzg5I46lx8w0R&^A?HP+I;p*w_DAlIdPNUJ<1DQ=>*Xbjz-G|D0xekP2}8HEy*T&&
z`aL~(d#=o~=Ino|j^ZA1IGu?^YPL&xP^2{Iy*wyb&~+CZrJs56-Q_LX!G9>4{;DB5
z@i-2#W4TARe8B$a2+P<U6k4+&ABJEE_l&n34R5+3itvO#Px`pkOxyheH-drnIJFCW
z{klD*`u>tPHq3i)M6Tp`BJMLGxcpqxbLEnI6zXSxk$ayiGR59Aer9$pJbC<`!k2Vo
zT!Pe9SrL1P=M-{mJCnbg!r9v&i7MVt6tCSPT0T$ImqyU^FBdHva%3O4&K3q*t&W~9
zoi4iDRca|%>#!(6SYMYF=?nuQocS2bBOf*lONv&aQ8i?ZSrPSh2|`mv^)d{eGGEC&
zKD>|NS5IX@$jID1oB0btEp|^q=^tjXxCdAanauv3=m7B!80Mnr(^!CIq<qnKu>X3K
zqUpqmZg%&{lM8dZI%!dT&u0>qAC2%w4oEpO-fny+mt0&z&A;y}Y3k-Qf-kq3EV?tD
zb$-{R=62C9-m+lC@ERY4P%5L@LfjfI^Anw-zI(D8EtINQb`UOCkn7GhI~fOf-g87A
zbV}({Mx1A_okwrCRKphBtyj^EGt+YF+S}_On{)XA-N>ayRKzBg*435jJae;r)R5WF
zBDFm;%hz2o`7Tlw#r|NszueYC<4!v$UP|-Q!)nv=@A@eUyiPm2Z~)+F2h!WmYcbL>
z-0f;h?00clFBUI$sg^@>!uer48|l36xBxO5hxxmFLcVIHi75n_dURh}`I^08^VrMP
zZHL0hEjaNw8C-y0B8#PJ2@~6dA`X{(SFBjJzvG#Zn<}eWC1s{o?`4>Zy{9r{hN68O
zCds)2l<l9aM!SkqJMJB~JP6@+6>*&NNV2nlV&~yh?^y3fIO`5iSH-&7Bp@<_#m5lm
z|7rEbdKz{f?8lkTxevn1e>*r#lulc@^R12NT337C+=W;=^qe=0lzes(i{k77CIPrC
zxU>b1Hn6lb0zY**P7LhffqO;xS~^VWF`B*mXenQJ`-<%q)C<alV0<%W#V4<e&b-Vp
zso@GZCc)#!F}NtBA+2%knHyx1xMsTcJ7?B5rj^INf{eSPB5}j8mvG254#z#SLX+0~
zQ}9V27)dK#zth>3-M(4`{5-IJV2~C!#AFKPG44j=#ID{mkNVW}md541zm@=2M+*MF
zu}LphiXaVZx=#J_-(iiu*gs%#;zZxO7^8G7x-7Za(}bo-Qmz+xp&*LEU(*PHRIo(K
zbgH525({eK^LhJqt1;B0t>4za#)&DVyJ8>^)2|2=80t_N3oRn4cTVSEWtYc5n>Nd>
z5pAcSFn?i9TH*Y8g)kHYNCs=ar$=}7@~KT{K|XNbdh~4wS(K>}iSHFXOoM0*A^GON
z&2)tF&oT<d%kw#9=e!48)%$0={u!r0oEicl6=EePgaZu_90ZJlIsQ;_m;@TuOzKxU
zXmkKT0HqQbCy|{rm3@bD^k;U1VxH5KVCP{c%s2BA=0#rT&`F^}$u&(3Z2R%-9VF)Y
zW+h%$Kquu)IEY&<*0IaeSYo1&!WO4i_@%dVY|@08WscG|?^<Z4ZQQSgUKOpi(+TJB
zd#dU!g@sK872g*{W8g#<%uj^!hZ3>g3b3waK}W=Jh>Q>Hv%zj`>N0{YzJZy35w%%V
zI6)*qg%i%86B7Xu1j?;vXdz7zVRvnyzz70DX#)7~Ur^UrL+2HtWp<}x3agVzDZs2h
zYEl-x=BfAswU!Z4Rr}H|7O}q;eEfLzs`t@T^5a1Z<~k8{{8VwTyrFDsQvV{?MY5!U
zt!~qu2B4o~fZd_=y#(3be{@+9V<Ut1Y*H#3QZX~ePMo?y2Ix@|yKXO^Ka^uLZ5;oB
zl;GhPQvV&2{FSTl9u7KYFU$6)wtrprwVmp(=SL4{e}VVqihRl;3{lXApC5rDClCCF
z@_QhHm!Ka1?>A+5u54`N8O;6#YHC|H(=p<%Emzsp_4KXjv(jfQr!S_lt5jR*>#6Lk
z)~z&*c+TdlY}#V_^6zd2?a98C&9*!531L`;_jLeAj=C$PT)K7;yp<at>eX8S05Ax>
z{)>nv%&qOAS5))ZDhegd`^(~{l96_k?>(gA-W97@<@JMNknecHkwL~{8jf7-^*W9A
zT?!O`eH*@VHC6)tN=Uz#x%2v9za|d=gxAN@zSP8%Lz_g7god+SaZe&mg<I~Ht;p|6
ziqFO#K5*ry%(%<<*=&Gwem(n_1@H4)7Y9vTi8d)j$E+NzqjM@zpLO+>wl))DcH@I8
z9B-wl-AC}BTpq&$O>(`q=ElJXWnEJGj&vSSP$j;hwIi!=vMP0Z@|FY4HeOkjR;(S>
zo^9`(u?04-iHH83HLfs(n07G*o^yO0lfhD633BJEhyQ77LnZ44@sU9Tn$;#_;j04)
z=LI?&KTunR7;>WYl&BQYdTP#227JwFScEtr8PxJ|a2IF|4eX^mMWO+>YGacfS^aHl
z3gKBtJ9BF8L$5$#=(u!bw^ddy(iN}8%i1#dNf6#eEc{qaAAFR4r9m`41u~8F^r6)q
z;{+#ipb|b=#Zd(QR_e~)b&~0FcQeaO&f0p{dgfqq<xe5-dc(yV?E(spb54`@xm4Q*
z!<z)K!`f66huTb{iNy4OC~hH3!AiAGV#h7-+Ot~h)Y-sNL_xS)lc}B9RrAc+Sn%0!
z06t9B!WEDha>gAi((XCG2Ry@Ay=mppreKWxYXW{Dj#>_X)wQiyi`E2iS3aYY5&$a>
zm0#XD>~58nrhM*k2jQb0E`|n~+~nLFF0@6$q{!mzSJIUo*NS>6BG~Lo72N)@h42Tb
ztG4tnt!*`*{ne@2Z-j74F9MB;OnhrJj{4hi3DqGobRx(ZYb$vsvkqALIOF`Jjz0nJ
zYcEOa`2J2vko>iPfJj@H-AJif^`E^BFaN{Y)<WYSsneVaJ76}}B;eyn+gE(xbeG^k
z87D~CGd+`orkkpKK<Q*1V){*!o*MW|!tt~mZGmE`h_SyNUb*0`C0I`yIxb-w0`Gx;
z1-h>KYGwS1L7T3%X*(uxgojIx2WoV?)0>n-+C3LID6N#2*Wxv$V{HP7x6}#dDxIic
z;hWTIcFG3lzo$<!eAJ#@;9Y80@wH3a;a;F_M~pq*I=hn{^_5`iqy6yHAiO)W!v5@e
z37GJ|eq3HA-qW!DVq2RfkrQLf0bvmCf$v+lXhuAVT5@<KIH`h!b30np+I(zzRgwO;
zfK|-0*s;!m)SILd2c@$x_UFW8S*NqsvA?W@gz-X|LU(R%a>VkFLnVN3b@^LL^UFwi
zhO@G$zs+#oRLknDkuFFPKaB5SeM{$OUfY_>6O7obU85^U3MqQFM^g^BwPA5v_}lo(
z$YD-7*a;4Y{<PL>2U>CGzBrKQr2yl|`kEx#Dd^gQb|5=wE&E6NvT|(Kqt)YUc0SwH
z|Jyh|^Q3MjHa`e!etG{E9C!kJ7xXx$tLFCzB>F1J#Bw|oH#u+J?<)QC?S1?RKVW$X
z|LyczQhpf7`H>llPqCXHwrB^Pb1HR!u-<u0cz3m0RC3~M23J{~v6Kdt<}LI{)p20m
zrMczC*YnfpWq)29#=u{|M|90+ss=fzu_|d)230>T**uT&MHa^0W9O6xX0Wg_UMyO9
z#A8gl4Iy1~7%HXyb1`zah^83u5a=3oH|sENYPf=?E|PS1en!b`8ny3SiD0PG6W=v@
z3e?}YGH~UMqlrO>(PWv!XTP#Fuqt5iP3dgX{ydf76&M{BXxZQ=DbuqkpEX+DusZ5T
z0k@nMPK!v(&belCwGZ%2u+^4Ujz@j-lppTm3L|DYYXNPbSjmCiFxUirayR&{j9nm2
zk9wE`O$i3)W#nyeADEZEjh$+(w6~+SvO32_gn04X)J0=l{|L(hW*_e8k@tuu#Y#Ar
zRdQA~hZ39H(UjU?F1)Am(P3RrBiqaE(Cw|Rh)v#qxIfKrPhhK$+_{oM@X=bYu)uGQ
z<Jw%rWHjb@Z!nMp>*^}XBVqNW1U&J<Tg-c56sP1$cTbIqZ!Gtn*{#C*k*cKJ=Z8FA
zNea5j1@U`a4}k-%^4V^&j^970u2Fev+V%XWwD%{=;Vf{9z4Xy|j0JRYrc`k+?)Cg-
zq}8lCjn`_YSMw2-!5Sba#^Kkb0_)xd%BjPSN7}Q+5qS_v%EmL#w-h)h>s(7t>e0er
z^f0z}4A^?U3=UpEHn8}}$FTfA)Tnee8DaQruHmt9%;%vJd!Om9=HK9~gpcyv_X<7z
zI@wB~u0rSqdl8s$5JNc@5a@-+Qc#I+F`$I%IWUl}6@diXG{krU7ffEkgI;`x7{mnc
z;$TW&U_h|}poT@s5Qal1f<m|kLpwZ7U^r$e7>|1xP(#RpnKW4h2Gg4~^yefO3VA*c
zhVzDq&GV}%{)i-gqBqR?^IEk=1gXLdJhACCUVM>o_jw~CG`D}>)=flO%<$wX;_{`y
zBZ;55h8?)_GLup$>kFy94fh96{E`=9hpW$~GT=q^d&s;1*3m{}>&lK~Y%Y5=_1~^`
z(rl#u<3jOb#LVx(!HyO@N*eOXH7{tV>`dGs`7-{<GeR*VwLT(+xcWmrv^<^huW9D2
z<DR-(#CN$8Y;ot_w=&I|*`dD7T(SkV5esWz7T5B<)Sy*B*CDv*E)UU#h(E7y&}&7K
zFpu!1JP8;%L|C@a63`YrAyC8=G7y=EzKv2G<8WjJXUdYQ_fs>IN!WA5jzn?MhO<(Y
zxjwU>ZnEI<-(9h{KXW*HHyxs%(fLMxlsu<jk01KxrzIyqQq$5iGPAP(Z=td$Z%)4a
zZQVIQ2u4s0CrFBB_5sHWgd(v-Dw8XeDz!$d(;JK?v&Cw&JDe`J$LsS0AOs^Qh7%-3
zGc3moq9p%1{YQtU8>VGDuIC3~6enqx7iCp9ZPyRuG%xG6ALn&H@AqQ>CrFBBSdJG&
zNmf)%H%!ZRT+a_+7{y7N<waT5P22UuIH7r2xBWP;`*}a#-}iVwfCv-HxR6R4>pVXQ
zqc};kyeO->X}f+Hr+Hbo{W!1tdB0ylR`-~T<!Zgzh6MUgQPp(Av}~8#<8^#~0EA!!
z#c+b8Xolr@flwrtNM&+`Ql-{tb$WxbxXEm>+UyRe%kA;{`~V2S2#VnZNzn|;@q#GH
zimK^`Y1xkJ`9T=PNt)$FS=CM3^}{&L%ew8ydEL+Z{V)KIK%&qXEDlc~lE@S)jm}`Q
z*c>j8F93xiu|z79E0ij=Myt~sj3&rzvD)kor^|gZ(P@)AYV=<YP<+owIEy^9yX+hD
z6EpFnuy4m)*4K5|(AQlbzDf)RC_4_#KcYzeNq;ILYr$ycu>4^jN0bT9F_C$EZWf9M
z!I?6*b?)Uq?~~iV-pw<0w;q1X*gTon=@Ok4c^Xn@Ip2IjdPaSrE=4{E?zz2R750!D
zrKjGIcnIwCk)G&bu6-{0xJCOZ-OO1&tpjo@l-tI9oP8QJYvO{fpI5~(>!D4Jg*mVk
z>B|783fH&mY&X#?VGy4t84N2HVzi0vg3h!7uXw+BM;VcCy;Um>TQyfjv!I3ydDM+f
zBy83WVNlNGk6RSEai95Hjz<-aku(*Y@(Vm9DwIeLYZ9;P!x(cks;JTGTZY;02Gcky
zlyIo*1-d{RaKg7>-6V%6!hXL-H%o_`I4#$h=taN|>Z9wyITf0cn~NE{s2MAAfA~T<
z7i<U3SOQ5U#YY|)2Hs+AQ$>2B#*Ux%n8XR$BRaF+9*+<fPU6v_a(qMn;3h}Z+*E1+
zx2;f)m(qq((7PDpMFx)mCt!}6K=YKzC9;Gk%-tUBcn;ytOtcesrHY}!eAyqj=yJ!f
zo|~8tyND@;%*U`Ui<=AC-l8&N@{BJmQu_qk(lKM7RgZl}>>2^rV-B@d+I9Cz>P9>t
z<vBU;wOqVqRJ`}|0xw__Nj2U2UBL}%?JkBS#6c+2vET3SQTCY_T=b#l#8HHoO4_R-
zCs4oBvtlO4Y*vDsKhpfR1$8j0#aNE{BPxQ^3kPDlX1<j&BzmkEbPPd$kq!UWCzfXc
zGo~l~DicA`$gz+|6FTFjUB*D3F~l7l3n+zHRd(z$D=u=jYN+sil|jang3ek*QA1RA
zkoLd+WoLlEmvCG4`1<OoCv^>ha71wu4!Iem+5>i{5JM=0+)!GvkD3W9VI!K)dse*@
zR%Eo@md|$^l8@xE9_+pFiMit7QEASD-@$<{;@cD@V_<#C1?F+vj4LstcH4%Wa<@SJ
zMG9?cl(D-`5KFiiGRnh=vf11B4mEAyZ(%YPtUCNX9YNzA(doiYnbkb1X4LjpFdt^c
z9mxt#j1??zH4}x#EE(I!5{0)s5M#{N6C>=kpHy&F*!uv^9&FyQuZE^w4NIOogB*)q
zy;CU(%qL$JwaO=|Eq&cSy(l5{qkcfG8BzQlF`*gF1>=K(eOB{fvUrd5LNzFF$O{z$
z$7Ki|+A1%p0I4|M1AWyCD=oU%0IShm6d#crS**>pM;+nUzN0HWJFGn3pdBs(#`A`4
zL*QNJADFxg>`925K)uG}v&)RCR~MSBE9wBeF?@tWr9(GZ@T{ngV<dLeBsoS$WX=*4
z@KrnccE{hIQkE-31IE%zun*aH6d&VqFSw9xUHT5rF%5}okt@sEC9-E#c_d!Rp+rpx
z+;J(QO;C__s9{K&wqv%pc%nYifW`mWy!bAt1iX0-A>B}99SK^lnKWCVQGnM`<{!>K
z#TkNT$SdlIV|dW9J57C$nCXLT&|<pl@<5y|4~6}y@I($pYg`nEqLLLM+Z2^!x#Q=#
zN$GW1|EA&U%b>cDVq3<+-jr49Pl6z?Jlv7WiV?A5si>i<{{Zdknyrclo(H2%w=0fa
z9J_<~No?(*EBd#?hohgr(Qwk0GEXO`r#YyjK9X8Iy9T^}IZb26rrnEof)&}N6UtDl
z^{iKq(uVIA^+7nPm@Ix1K7;Vr!4yOpRl1I9UK@5@GseSi-S+VT_Wyt5<w{P%bhd^S
z|NXI|ESNikD+&)rN|vPJWEEzm1TOmBHo^L7F)Qr&Df*l?&@hL75`!(<FbBJR>ue9o
zajOw~N>nt{FsPO*m&Q%Xi+CLeldh%>yo;xFH~NoTp>uKqO&jt`e0S0pCDdc$owK>p
zIchGK5G&Z$xgk8Ejy~bi>+*_%d+oE76r<g=<R}QP;K(E|Vo(acYAyK2hzgP3fU#Kt
zwO#xqpH?Tu72b7S-Rcgt=6<;y%&>(Ekcr!in_{7G^mg^vyQIvkF30V<C;QN`SQNE8
zVDk)eh8vvm{MAj2LI`i80)^jPq+m3-?lH#HZNBApHC;2_)Ttc=$?sS$RdJycwQ-oW
z*TNsxq5mZQQwCfFE-lH7`khPKxxgw<+B#}mRSE^43NN^QDOK!OM{nm{<zHXLAesWw
zY8o=Hq^G%|;<1NQ^>yGt4R>T0ebb!<MEvg=a-%v6Xl^Q3yIHNnV-Z_|ieV7s9h(C$
zP!hk_3jVWx@C-3r#n;u-Z=N~Q@%*-q+W8FGd|j4*`+Y<d@AJDExYPMe4!;LKcY7_w
z>t8CdIDLfSvHE%XUxS`sQKg{(S9j7igJCZ)mrRA>@22ttliyuTRPhxYhe@#0P4l~G
z=Q-=uuaflGzZWQwoKhTEkGW8KFKp(>;5Z(XsnttP0?trG3HYupH!prL47C6KWfg9m
zefyXS8DqwbitX;tTgvhjPR|&?9ZK=e_f?f=DrFE*NgM687h0i;dg#2*MQ?*%y;rH9
zpg3Vzz$zr{MEa#937c>(*KPCJP%ARB_7nwvh7;>rkkp$#vwU*XNvwUXv>gGB$gZDR
zF%Hb}MyKB+{c@18%+?l}lV}wM$NY$+;=}|c4k`F1UO#v-;3b@IiC(|Tzz%lBTxi`q
z7TD45M$A`)Cdl}!O<$ndqAn3)Y7{V^W+i^c$D`Ur=ey#eQn5vn8Al9fyKGR{6O4d=
zj=+$^TNwpv!PpR%5Q$xEjLJ(nkQ3fgEq!9JDhllm$Y;3XR2{E7^sH%+J?#HQM#9a(
z3cV0#EO^}qtm-Y9(I^bc8+dR&J~g`1eL`2n#+PAO;b1>*%dA;`Nxh*Qz&i6hKIBU-
z7(4n9RNP#lhOm|eb=1@23Cw%CP-W^iJku6gMn^$gFcaRfw~87QN`}7feG$HzjV}y0
z_8qk=`nc@F>qjm<EBN+^>Mk6^p$Nwm))jkfpex=a&8?0^x%EwpcS~l4B=6rAJTa(z
unzg_Qp$J{1uQh+?R07Apiq*-lDS^thi<9ujp91->(}hpe&Z|^fE&u>g+})@E

literal 0
HcmV?d00001

diff --git a/lib/font-awesome/webfonts/fa-regular-400.woff2 b/lib/font-awesome/webfonts/fa-regular-400.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..7e0118e526eb53511cb57e7cfaf515784fee4345
GIT binary patch
literal 13584
zcmV+rHSfxIPew8T0RR9105uQ*4FCWD0EH|705rA%O9Bi400000000000000000000
z0000#Mn+Uk92y=5U;u|&5eN!_-9Uk@N&z+kBm;z03xYNP1Rw>9TL+IT8yRaC#xYae
z4xrTj=RL^&|34)`jUj`_9q62HRTU@G3g7X=Vg1b6uhqq7u2e{@>ogp;1Gm5-a0ndb
zsz<sU@;O2ckut49<wnO|?N|83oqoHTHj~o#Tc(~<5`MYy@mL}*vK2<FrOKh88HB&f
zvT$$g8{LNb8Almz+2itATU<ZgCE*OrCVwOc8%hcP&+m_K?Q`GzFh^1XOTI%?t1607
z3Q0<H0zLr(W(Mb7^)IbS&7lEIv)?;sl>Dw81qS5!`3YCJ0$ph2KdxyZy?beXaxZw$
zb^xFVm7EhZa?(t?&6iXAncv$?dlNWuVZoRbcDX<xY1*GlQ}6#iEx-Ghu9_>^R?D_!
zTY*yQu*)D=;&0Uy{d=*ymjN^Nn0a_g!*-Y6r7M|)RY0_Km&y`gX#iCi081MlgfV7A
zd~|GxbgN0*P1&TAEJ-942rVI(1O!V0q4WfjP-<uiiXMnSKvb|nupD4HM0g3Fp7m^}
zDBwM3D-=CT!_u$ewN3=IL&L#E5Owo+C}nustpY_n49*LA#6j>6w)?wi)0-QSq|~Q$
zF<Cb-&zvXt0viDBjqb9hEp4@WV}5>o9}%MD41`OdYyQ<)wJ@_GChes%)f?06@AX@h
z`u|J9Uta<XEZef2fJqo95oW-w=Sc#405kJ24ih%yM6l->PsHAkQ+p|;qThGzb<GuR
zYOiRU(=kP&-LoqMa8-7+gUneC%N9Gdh+qXJvJxPy492c^KkgPFfH#%90O0LTc3Gr9
zv|Jug0Spm11W4k#JCNwJ4w8cAXd^Hke8zvPwiS#taJWYcs;TRV-;&?aEf46|GnSAL
zqft5sG|6HxggUs_o)a$r->Z|@P2e(-3;+WO&z?)=%K0%lA674|Ti(*zzV&~ey%(cq
z|G)kF_Fp6(_z2MuLmWw@kwHG?w6dAcxXKv!dC52Y#^*87RP!vb)@5#RlY<U9;uoIt
zmXG~@u%no~*)unnv7hb3GIO@9jrFys6P@l{SAHiUbK|UoH(7Td{PIE3LaCU^ql|TQ
zy&Te6YrNIE{Sq5DJh}5(Cl4w66B}#p<97FX73}f<j`ZAd$g@x#@a+8G_HCUXtzEv%
zm75biTOFd{GU($f!0MgXUV7o7ubgl|rxli|=3r-IVFW9ZOe1Z*>27yA+@TJ3puO#=
zt5q#7A@9#h{+>PJjHh?Mk(*?u^Z)u&w_eoKx?4B-;_o78Q8mh}tVts>KKzGgbiir`
zOrgnP=O#C!-ajMlFTFiZRuZu;r>TwB1@1^Q#eNTE(z++o0dvIpv0>n8&>&rQd=Lf$
zBQbHrgsW?`Qh{M{NlK2!5jTVE@Hj28Vmaa{b|N{vj0?W2IhuIH(T%1e5|YM*Vm|N&
zj@Jc&I1SD;00yrxT-q4=d1`RjmK0#`b4a7<HY+!i@Dd8{OCSVERh6O~@@yc*gklwK
z{W5oAn|9Xd0g<8<aJ{V$+QH2huBNnX8XZ&tDD;7Dch6PP-OI9ECV^z0ClD3v22o^n
z1NJ_GimS5kfJQ_4_JpaHQ^E5+oMZQpKua$eA1QozP(M_)0}J08)?KN`Nik3dUzplP
z%my7?AROgZ@u;2Vhm@)Ix(0>aTvUA=fPh^}*PTT4r=;+1JJk}+{nbMwdsTJxW$!m1
zR=YPh>(7v~a|f*Sasx#GChdXTQnOi`N*Wl2cd$8NtvfzY$b4bS-e&@p+#szILI$OO
z#TQC?AxuF`NBqW2zG}*CutrIiGER_UL;!ru!19%mQ6&@i=B#U?=|WZRa?Yz1vp4iZ
zb|L#K)(N$%8Umk!{UGA#d`4MQ=#;EQ4sAkg{8pOa9LBAPxJpAJPn%jRgd}-fd_gb-
z9RnvZfc3tQ);8a6Xj4&GFqo@Zoj6(7i#GHUGjKL`!ovD|4C2D9T{OA=ZR3n$nAKL!
zGU}Z)vBbGNAs+2B&3-;D!!QkEmS_aBTd1%D4GGpg`oM&Ejd&OFKH^JI!q`b@WXJAH
z`xSlT{P=>y`(3`LiQ^0HVM|1_;Bi4FR|>35+hCy6Gzjn$dIm1w5sC*eB4^M{;8h#i
zEw|$YDVSK5lqvD2Kz8OSVvM*Oj4b>#1#I3x1ldNr&jyq(R%F8OzRGIw#O1=ujH@@u
zV6}{E2Gw6`C)eGC_ZD>ni3LnB3`$-_Fs!pxK4XyQ)<8Zh+i%NqK#LpNwsF)j$k0Zi
z6pjqaYHBDQJ`$&1J9;?w84&uhqx%d>^~kZ>A`gfE41=Svq1(A)FwOD>1eoLLv|IH$
zr~s|O^QA5iF%V6}I#aNB-NAYlmLAe4h0r-x4?>f}+*ZPp(!?JKM^7m1GiX9$%=wJb
zDEgcOio#6Mz7Y{Ly2Mh4Pwr@m!SuGJ#LaB1Tq$}VMZuBfYlBsBe4OStJbZvHTnmk_
zTGLt{MWj~G0<uXRXM=e?ESteUWv7)G*lbn_wT~|-dBm-%NJ0F>7^9|3Z#?}P!mO^M
zz=mR~lJW=h*$L_&v~NO4J#qp%wWBCMr&m%&#T)OU&JQ{Ts)t(x@;&qahb%lORry6F
z4sjaj+=momXE8V#Sgx@hU<%K9o2$Hnc(9HbuN2zTBB;TtdC^=+v?7XtQ`rVCjHQ^5
zDSm!9fOx%=+m{rE+h1Yj^VvpLX#FK1_D-A{{A2t7xeF<F`po(B;mh#u-5b}H`u+Kf
zX?gDKrAx`1<iUf9uI`)Oe5QW){@swjs^>49PgUmfvO7T^ycp~ymo8q4t4z5bE@rGL
z^h?Pu`7Lc!-#x1YRnojHXa(80Htl5dn)GFZ(in6i{kQQN>Pcf!e*%{DC)4Vfx7;hB
z(yAk$lrx3XFVP-c!5KzH_4lU3bPxu*9QOjOXMkeT0HT8&;}D3Iic%?zWI$tT3Wwg2
zo+i&}p(9*oa|-bW#|-fTt6d#cc@eg8&_v(_YMdH!!?Wh~(#|rWsnRC<@qL@lsI01<
z$Dt$-n=3p0qE<r$M!`Zx@;hQhIzzj1ni>UhwOgEc1+v2{INMp~BX#Huz>X%GRB8~7
zwwOws4q^-BP9wW}jfUDNPW53gfrjm(sfZg&gt@2bzJ@j--tGcuO1dnACTMe+KrVMH
zz>dzEmmjr0VTvkkqz@~&>FV6q??FS{k1DHM8P=Y}!kWR!ZvTkYE8H@ttKh}AH9b_-
z-s2P+;evPV$hnc|T_LoM0(pwA>o~Qlff7EVt~$*U8z#b6^)J1$U%IcIhz3r_ZQ1R#
zDZJvVg=xyP+q{A0%K-kmb#jq?G*~N7mATEP=xFiUA<AurI14aW&^z!rjASdzldnu$
zDTZhSY-X2J$kDHD8;6MXg20Mf?{l!sV;!w@8<P@e*iD6~k}d^_hi4Z=P|C{0vq<%|
zReo|&I06L}KX>!F^Dsuz3IZ(&w~2$$fvSf!bfCPVmcrITz|XlObgJ9SYP|g16&Ze<
zAY(fl$9957Fz~Vsk4?(fcBUb;0Uaq<y=-TyA9PIJBx#sUZ9B5QstoD#s&doaDm>Xx
z=V(~2m;Krb=@wp5SX1k`1y&a|eNRmKT~nuUB!0~r`b=kXsvk+{deHNrSHI#&s9!T>
zRnq|s3Io)&1Gg1}i4QM)_4jg66Z+ePVA<Fuypb@)%$p2An>tJ;8jAeeMDAnjF|=<V
z?Y`>Mf$11x)A+tFfp}6pPAtIduThgDz=7IXuT{B5-EQ8L`ZNe-Ls9CPFE&{XG?ZmK
z``|64qZ6q|Vw|h}L#;LutO?F=Who!-5~4tHo>h~x!Zr{He^_prmcPteB1?pr7C2ng
z2#;ZWDjH%6wX{R{4sL-sQok8_IFmY4sEj;BbP?leG}Q;B9!oH;%S+>U;3BE+Ut$b7
zHPjoFEZ545nrNaaRM<$Xg*?&deYPdf{RV<dRp2FZ^O|z(q9$%@1D<at!J^pxOWKR8
zzjfF?W)D+;@2jEZtoB_lLCz2*thrk%k5u^dB*axXH0;cNv#PM1wYlQ<ZyhTXI@omb
zhpbwVHMh+b_Sr)Gc4{86h+#P~mkcx<aT^`jbLQPydze9|f|YHIp3byx0@1GSt-@^h
z?}_Xxu##0_43VsBmcht=r<q7zkK+GFz~Udwa$7}o&YpGWouSrKf9=m!HGSKbF2*%?
z@JACf_W;`+POX1u@YZ>&&Zgx=A75O}J}_+Q=`G^gRaH91jNa@&ZOUebH*{<<9Tw-{
zHF}_i+S2}p4}T<av8H($G9&_2he+3tYTIxj65U5quG~zS+#^1y6f{ugf~8+C)fL_<
ziHnFz!#@X9*g<yPA;w8CcZ~>nRCeyvR0MICU2q5|RDs)i0Q8;PYUHHl&FKLrWS*<Z
zD=oyaG=Y(@Lh3^Z;W7pw=}YQ!ZKiD;k$(@lw{S3}qY2Mf+jfC9Yn6A4Wdmf_wWH&D
zLY93BwWEtSn77l;mDPn%bIo>ee2(P>v+Z?qW&YOzg}(0hrFG27DZ1|H!@WsEdVq7(
z9Cub8zVe<m?XEuZWREdouQ+z~!?OP@b-a>E7>Mem*E`Vq=Ec0Z?Gtn8q)FP_qU9(w
zt|P`)oRFFD;};oHA78f7Ft(7}dsl-4#Co{-ZSxR3+-6zpFKjU%?OU}K-T#*Ios|jm
zi;^NsfDdg7&98c+6lJ)%Xb-{;L@=3L4+;+oe4legVRJ~JdDIhlvy9NB=~I)QcMjh9
zPTa!U;M38Qy5wN(iyR*_<!-fB9Lmfh#t?U2U~S;Q&ZBh@2Pw@htU<|#wame!5zsHT
z6~2Z@q9Tv!e+WDp>^tJamMNp0!=#eaq$bDqMY;7I1!2Wdvbo1xPw#{X_8iF3Bhp0<
zv_Mz~9d?%VB}!=>#7(ZYXi2!FbrPZy`0`ysPsFG*aSSE_@CwrsOSgtShfv&&M@rq1
zzM~EW2SFzb^O%&Y<Q$$RHY*PB(d<Asa__Li)l*T5Ldgf{AHej3DU#57!Xdx~^AvjF
zyBmS*l)>g91cz^$aD-;fL&J-Y&n0UDTJ-Ok5Y4*KrZiVc;yPNWX{uT@+r<t^6Iu4>
z62o;(t68;6`QYOuZrAL1vci7`CQ`kQ>r0E5NHAurCa#|8-cF0LG;-&i9`3B>)oV|(
z=AAv}6v!UQ7!37TI+4(zS)#4!Z8cMsELTk~Wml@34tfVrqQ7i|ko5xLMoU_L!^W13
zw$+Lg5dGd#A&6<?P&@S=%N=RW6aaD%Gk>`XD8}g!xwA=-f#_NdVlepF5-3RiRM4Mj
z_r0B#fse(v-b!{2*{LfAYwE<aL3S0<Y-wU$iarA{?VzYv?xiU#1@zM8?lX{zRGC!l
z1C={QkIsR*MStRCKszo8RHJcJooZIu$>zEW15ZabYYc7ISxWxIC?U#9>*@%IT+3sP
zX^}H>e~PQPT%%6OM!I<mCU8<$pjl{m`TPT{<_9T+Xd+JwwnVqX5?d}L8a|WK7A01;
zFZ(5a|IBu5OOg#XFhdbsI>54lrbfU9QdS`3&b&mP{8zW&F~QBjuzV;#rE_7on?<fd
z^FEC4Ed#MoF;i~^$B~GR>3XbL-=5BJr~CihE1l`*{uXEdkbI)@yz99ZVtDTlScs|(
zP2BUZ&HgnRFE2GqX<ct>olAq8kjv1HQc=gddU_4lR~5NVpzjIfEV9Q|xj(k(rE*0v
zxf(^!E;mY3lkXAf%dMVj+Tc9iP@@wlr^N@|j%d1d)<Rzm_Lc{?vbge8VRfgcfL1|D
zh=W2;OZAybH%fRZHR$qCFSlW`Stet20l;AW^1nJRFP*cEvQT<hSe!m?BIjl^^m^%;
zc;J-%5k?}{bpKX{95E%`hsHjsm;9{j%S(4wTyDKBcd#aC7cYXz$;ttVRfHw_Jr9Fp
z4q`SnN<`vPFee0Ujw-E&Z<xv*uH70+LCA*Ef+ApEP>D~ed~26*#_S-WSr*v6bqsK5
z(e+8wgrgsW2L}6b3w_z@P*|IE;!hkgx|FI(EaP@JseigwQP(WhV|2+?(}a7vqu6GW
zL4IsI3@VWqH&+&~3j}Umt3S>PW=+*)66vf=`KVNQ`$>mu`?NKohDXxJT#&0<tO6dG
zk@G|q8_G0wC<k_JYk^kKP8R;;0<2c<xsk(oij%&yN2pa7zb({dPb@%7o50$aowRY>
zx`m44*W_Id-9H~TMwB!eZjlQEnsy<A(Ta1c6)-7o5g`6B^A!vNxOESR%~_^l+dgBi
z_Fu2{z*nfl*9Pv<0j`E=;jWqp`k&c069T!hQYs1qRFz}ttAesfDQvj%)%y~19+q(y
zB{~OI^vbJhnOe`VxD`56YYD{9WK1hM_0M(0rcE;525cjAs*f`>%-JOhT?T%v6(n@S
znj%j~h=R~_qUQNkSfZ*_l4?cCaNy}>zmS8AIg-kms|^&GD;#}rKsb`B#X(8AtrQB%
zoCmZYi{Xled45<J*Md2FG_ER~7_y=s4Q0bxr#V?HcRT1dD*voZl>6>>ZLz#fT5<6&
zVB9tmT6py2c*77G$b~oQ21~(``Z){asTcjSNv@m@5g*U@3#m@fI2|Wp+Zs22E-k5A
zU2@uV4IJZ9-FT_ir&NkrLYJN=CDvTAwf!|Wm15*ArFRqke|HRmNHrR^Y|+T4XzYo<
zs6}WbXMm`NVjZZY9wTAwfas@x1TiLNlGUD;C2G3#RrSR4HBd}=5VaF+fi4@|vx;+Z
z;th54s&or|)5eS2<hIh-ox*7ov|L%gfin{9MGOnfop<zLTRjse#}cePmDDui;n}d{
z=cDj&h`82EPhlN<kyuRV$)Kcjw$l2IuQYjP?VX+Cq3(0FR>ggzzP;o9tKR6Xl2UDl
zFT(*L^_d@O<g}Ir;6J4&-!}}5Q&_^8mdh|vaxiML9>hR&)aTrub+wL#=MhInHG4C3
z<E?)BN<@=W;-gDRLZj&I8%i9zVU!xGJ9A~gm_A&#@BT1co9l|gTul>AB?Ig^tRTof
zNhS<e5$zGsK5)h*RSLk4+p$H4NBFV6h*o=ovC7ZX>P3fWqph}Qr^%a1T8TxKcAEcp
znX(s(W~y0_>3?8M_Nhw``=be9GJ{woJnuWXoNz3+E>%7OHI235pLmD{cAH8pT};`3
z@d)NL35H>NrO-35o%9YgYkXX666e;_a)+ynY(RxJ&)5C7NQN|wGwLJ~`q&6qF3_xb
zCD~#}xC;{gR_swnYAe4P6zK3HEe@IP$85_6V^!9p4>27>{E{WP0=t1erD(!XBai{1
zx}Gxuc8@oF&4$SFC#fBJ9eDn+BExRO<9^7)Z}`-61VT;?!3HREN&S0vSZ`?)woPPc
zb&y^krIRjxayZM7>aD@vJXX5WQ_BIYE@Ziyn+zxeY6C1wlIgG<XI!Ii2a-d@V}>;9
zHrMZl`w<gDKlkW=8+AiH5RCaSIW`kKllcyMrSUBDKdB}5^h93v)3Ge|y)?oZsq{>(
z?>%+a*pXv08K9S{Pfjgxpk316h^viWPx@Wjc^5dQPO7`S3~N>?R%HY<P+Gj6J#WRJ
zi{7o=^-WQuAc*J)PfH8ub4ECJgXcTSQdL@gaX()smEk&kd^&J;82{TN4HnC{*V$`!
z9mBx(Q{$bTfZDD6w6-=60kO_ALc0+}Y~y?st!iE1y#P$~;}<>Fyq*pSvJSG<?6x2e
zMUX2%AQS7=`!~@i=9rUHYgZ0TRlx>9<3aup{DR9yUx$br^_>NF!we((;}t@$M+VT%
z_&Y#_`(eO?Rc)L30T#{iDHr)fOuP$Ekt2a=lrzGa9IbLZ3A%|6)<Y0Sn)(h4m}tHc
z#o3-ACMG!9YI<k?E_EDd!$(71hw-wq%%ICLGk6QsRZwXB_QxVbXl9tWpX~M;+|KI|
zltWUFut_-(1VR}HfO@H_XJ`mA7@)sM2kITuJ=2cTjST6Wnrd)4Ty4wRmfGMl#yCon
zJ@SmZ?cf1-LvHR51iWmAHf?mdu^0THomccl5fLId2ukC@l8~jMk5AUtw)zv04mt%I
zSzpn5qBSSh;P=unEOj4)fk>q?7z(~0j*>C|5{(CVv_-Fi?S2fu08_U;Z|;Y|wzLzj
zszG%BX*y|TiadJK#c#FmO;e&FR|*=rRv6Ou>WGlWc562Ve$xOFVwf+?UScg+wMFpe
zWwaJuTlVvU9Skh4M3Lvk^1AH-CS^XbrC)&{-&sYJ>vBkuznW1SG<7sc_9Hu0U7^~&
ztZlJ+gmOkyiv#U}eBB*v>%YCN@sQSYp=!zylEgT(gZZqiI6f|O=C|5du+}VxzM0XQ
zMqTgH6AwO_>&OEWdd>*v8LLHYp}HNT^k<jPE8i#v^iRU0Z%xg21)Utp&+MW@k1Y6l
zzVogCO|XK)Gp!jNB2#lyN;BA4L~s$_7$VoQ-W4yoA+RQitpEb~kgCaaOj4y(^HnlT
zK*hKa(0Wb)d*0%}Ltw`UJ!<f-kHMj9dVcHEX!^(wBX&4Ey0IYB;M6rG5zDgYhMx%4
z)Okl0M&--0`aUaVk6rJ>!ZK4`%EvPKUt}1oP{yPOaWEO)bsBPN=5x{aKr}ymwUPLn
z4DIZ^w*8=sQ_G3zvcA*6`01WK7sENO@NPfjl+kzDQdiW{{M`FWv=v>$B(m6cJXT~h
zieiIoSkLQ6z1vc!;d-t!A5K4m(buxJs3?JW71IYhmM(Qv1NsSS{za;t0?_gmK~Uhc
zQmwLMn*+}d1htnc5F~-lbV;KWmAD<f+z1H!Y6HDJ+QjYj4HX|}SCVPu%4{t^wd#Ok
zD?}~NT1Hd&(xaThvL6R<NGAnS=9uF#Q!dC+&xNCvUeXMIGOmqkpo)<<h*+tx4M&Ox
z*nK+o@h(Q7j~wCK>S!@E`9b%?2RX7}eCL1h1G=9-If~iR#rB%lH`uZAF`?(rcFvS6
zftT1P&Ez9;pFl>}akg#~7Q~aZPIz}~5(LVUGyJ7q%4m45I!7Rvf*+M<BCm(=cxA_6
z-#jlg*;jq^lb>}1@&9$=gJqn9a6f#ZJ-?@GCoNc{7UGs?a^=UivCmh_bFhhjhNYpE
zwBia8R_r}$z>#W!_<m_0Nx798_*{+*)Y(2}4Cf`iujO0xkw@9S$*6te)yhBKj+uMf
z|8$<wtCoS{&jYDjm88DX`(jW_lA5VlL{Z588S;n7tIxBy9h)io5cAmEKPs;l^G#+S
zjnrHCweLwUmf<<HnC(5<ILB5@aS+Z3#~fORc7r445NB%XSqKVbiw{kLAT0!0g0E$h
zr^wk0zs7zrLpJ6N6H7LLWAku`cB2A>GnFc7F}F0*AqbCUrlyuf!AAk9=py{ky2}Zg
zqa2q!m@ErA`r|@F$mube?>N2E#QiEyKu~EaX7GL`kyv?u5Yy`u)c>1jI4CxZvF^dn
zdbG9U!CJ<rWDqz~1-of(m~Z1-??Hvje_4<xh#;$tBc+kzYGtO0M290W`q<M~j!>8z
z?D;uVmz1Q_CMSl4{_F|n!l5Sl+{R<k@nscY(AJJnS+o|?yOl(w9k8Zhc64xLylt5m
zRmzuAz2bVsQGUVfXn2~n1e!fuh5^c`sC<2qN`P74eobo?v<N`+^_Dq#qjJ=xmZK(X
z_Sw)R|5C2yG?5;WvlV5CtBsP1Z1N*g69=gR)y5DV#_A#i`XC5345|419y{(i1{6(*
z5hOc%%wi5!P_)HPhm)ulTN4{XhXXo2<+UYZZ{OJbzcvMVS?cfDneVo~%VdA2&Vn5A
zwyX&*{o$gOEt%}{dUe*$jGZX@Yw!18PM+ehAuwwJouM{-*6poHOe8)Nk~$Z+BZv@;
zyhz|Us%i1jngvU^4U-XUQaoh2PZ;KkKu5Evm=4L#fR2U>^lt)KdUH@Xc%*F2Plrg8
zv=xIIuaY{7a<>X9KdF84&K!Q_^)K^=T3^&*=ioU%j<_Dj4GnIa8>l5yim8qc$3Afw
zZkO0~B>QMXa8k&e@JYje3D^kn-f~G)2l!!DNParinXTYQ-7VKP{krq()>WP8$gXXc
zK{zOhm90e(JgFw!TY}3ZWDR^0$eVXklNZ&Iw7Vn9u9=-j>(e65;W28S<?k;M3#}z3
zE?1m)YhhAzUI#^Y1U&AwPd7P|zs2j=Pd@fFoqy3K1yh`qcCGjg&Q!>f<m8kIlUQ8Q
zTE=*Q=&}$&_R)X#K7?Yip_z+460NtzGSxgMB?V_v@0SPM^w|G37E%@{{BR6hNDTWW
zGk{7lP^Hu#j90w0zIoSn+0eKkM5g1l%F%{QE<Y)Cnz$c+OQU5mDp*(8WO7uyKg~sr
zo7s3Ge=nIb?7hg>&(}bT8tjU(_96H5=97DTDO)aY<>_Q0g7G2Qf&aF{{j4OS4M-b>
z{#6`1B>7&mYbb@re|I^fJ-5X^WPTTk_7>hxoNn$KBt;o~{TBIp4^t3Uoogn4nv0pZ
zbQYC;g$2HUE(j8wrp9Tfr;Tycrn5oEnpT)`N=J=7?a5Cm+aC=+inTX+R;FlEG|b#w
zre;>9T=WJ~vxb@H_744)dE>Z;xkL%NarFzgZM&`eun;XZX0!!7PnGNKrbh%cajsJx
zIg#1ec*wp5nW0w2c?*5bBHIUQOScrzTk86_ABoAzXk))D<!-k0-sMJ5A5RNt4(c0@
zy0>V_We*v?)8r|#SxG%TP@LYKBEWio!~RL{-pTZS_QLFE^b87P@BKY*B15T`ruO{*
zBfrzRn6hUpwx@oMrQv*irL)?;>=F*1bJ3z>4R>S=#04KsFz^;Gej8ehl8?XJE;=A4
zDwy#o$(xJ@Ub+|J)j(j9y;(&#3>M-QD@ar_%C%!LI6x@1dw*2))e*Q-7wid1)m6f?
zU|-g!!!%!ecBL*P^?o1SD*ttwzT&AYzH}dg#0urJDC+zJ>t1#JK%`?;bH&e96j7C+
zlyTk|1;x-Psxr)&!O7op{=H)4*b16OVoLgE3C|c-L++ci&?Mav>PkWxVusn%b&;8=
zy3xh(eiP5KhcC}12d@*TDDcKNth*awivHw%U&)a=EW9gegvI!tI~(sL2sN><iHd9o
z$I-LCZb%!cJ<#n$@WsBm;S8r#Q^K7_U*ZU{!kEw(Y%8&4Vx)MSbX|G*I>)(=F*Y0W
z&s5P$c{~Gu)~`~8ji9T~3QwFCJv-B(Edw0kqBBmR@w@8pVmO>tRuLMbojYDV9upNs
zd+b^BnC5<k!KtDDG3L!#6BfA#A+N3qIWW2AZ?1KTYIx4hy$_<&Zp$K9_rI?UzIA$E
zbkl~b;3Xm|E*P|n^88I}3ec3-!rH=s_|%ABMiUchWpVR_h%=fWjpx5k`tLjM&hpPK
zTi4zFFDYO2880!8TShaMC2anw=#1$Q@NX7D-w!;%V@T5tN?k?Q#}gUEKNwGE#2yrn
zo9jXl`{D|iF_k8TS>f7%x)G2@DJrROEL(x}DF>YkHWY$~`g(hZY`5eeNpt1kQ<TP{
zBJF_L(Eew8J9>*~Y<eX<m;Wwn!s-vdbJ&kNRaHXz`J>d+$fQngmi&%FckAb+ndkcJ
ze^JcI&=7De;lh0<C8(Cem3GPH4>g^dNH!k7k@Um=(k9dNrsIEADGi!*tXs;W>MZwu
zk@{ZxCPsIYFOwaF?~9$KGrlcx_n}n>e%2!ZnUR9GEX42=7XpRJ`lZ-n@y!9yBL{ME
z@kR$z%auB<6?`*J@v1wki;h&!PC<|q6lk6z9@I(C_E~7Q+9%)or~P8`qU_Y^MHl{F
zFci&!NK*3_s4HCWk(`aZHX99M*T+@CXlbu+oP9~nc@5KVqTB7y)Fv=7I<u2QLv5SG
z`CwwP4<xwYw`g5kiq6b;1gPrJt82dhK4d+fx1c#7-eaCNC8=_u<P?up0oY!xj}B7Q
zplbt5XG^G3>OaQggeMXRI2;B8K(V!08zF1*M-%)tnTE_2eevTpjJ`fP?1tf&YCf}N
zhCtm$!T4WF0MuF=02#}T#DMTGV1!Sp-5Sa#KZZF=0!x!YZQ6zVK5KcgvsMREktfW)
z`hCCF7hRyNl=%P7Hes}HXG{2#YZ31NY6=Qq1nfWpy^&tzMWOBR8HDeRd;xEVQsR4{
z&+#~tS+PfVd`ktQs~Nb)uMY(?PFmOhCsvj%IxzQusDPNpy5`DqUF!_rO(_mz`H%4~
zl-2W#iLt6UEaQHXUeL!VYm39)_U6XIIPo5R#g^ScVrFmT777Bj!-I_b_Zfq5ds<;a
zq-!%G%u-ooa~BBi3zjc`mQd=e#;<KP3dl9`8qo#Gw1ns=?&oi)`!L1pSl9D~RKI^Z
z{U1?Ey~8dnZk|2GBh@e+Od@eD^+Ji?ZJ3UNUy=vBh-k!*Z3z*9l^Epi@J@H0&9=)z
znx*~1#Y+z)3zr?o;!#q0Onz_Zoj6tQdj|BPA;B;}OV?)%>QQINr$XU+amFc?Xh$%A
zuJY9ULCgHW-65yui7NCLjA^pQE;(V%2l|7<IlZ~I>mDYilK)jUC`Tx5GAohGua8UN
z9hc5o)Kd==4+tIM4q+1BnRpGVUtlcGc`J}bI!;&e>oHg>RrW*h;iZIaypVtyUX$RL
zhT~<3w>Kig$Cu)F{1G_*5p*-A+u;U?Q4O#i=cS3pU0lh~?Ir}b0=o&CCCSgAK{STh
z3oMwKwqi9mj-+Xg`Afozk0yn89&!zb#k?zFr4b8iH6Z%~v1(f!DJ(U3p)LxU#68H^
zw5ir;Oc$X<MD`XQ_bt-z!Qx=+o}rat#R-(Lyd>6vmeEOBusj171pBIT#MZv|!TRIt
z34ajk@g|2&Q^(pamXK3;41ocddQk*PNf9vf^XOFV-I$e|Tu&CDIXX@E;uH%{0BtUt
z&D91P&Z!Nq(P{n{M?WoBV|=b`+SJyNlr)Rn{>+DqB~^cUf8}za<esQ*?PfB0^TE0M
z=ZkUo`BEZ$nnQe4-Yb=ud$*vc|4OuAbd+!7i;do$%L^oU1hLxP+KwVI?1ozaw64p}
zxzXyY9{9Hc$$yuR1c%D3oU01DISt@<zxj33ahE3qE4Kk?d?T16z2+l>8~gvSfc$;9
zD*Hf*HJL=(bf07Z^)vpLJo;fet)1$oxvAT*an{PrR>rw;w~lWuiNHuOQ-Li)d)5%H
z?<Z4h`&TvA*fj|)A!8Dpl|F2kQ^#>;8p=zC53<+Lbw`Fqvsi^C3{3N>Jg8rOLSe2?
zbzzd!XDAi6acsQ#r+uWQY53^>uuOB*Y|N(*DjAjc_hMezVi~yq2JR5i*~X6-{T)^!
zBdcu1wqpKX^l{_!hSth|^l1>G3xnV6y)OBuvb6zxF5(zCw6$5>@FRKv35CU)R33w8
zXhLf{-s7G<q-#VrS}eqO)9KxKVKK@kULyhes>6oQEKkq-GyBky806`HZ$YZfVO8lJ
zO<*GHNuQjYH7d^v`>GaK{h4xWbKT7cKC{05vQ;iK8Z7i2%VIFDG2jyAi8#Y=YRR7Q
zPOxagBlZ*(tvM3AIl5j)@^&@iXJQGC73%!6aI;N?k^e19DbDYa`}Mbf<N3x5o{GL4
z10plwQ9_BQ6O)F?{vv}RbfR#7z^Qyoknf5W_Z+M6JX`3?^g%C<IX=L8;NSsXdlKAA
z*bOmYH>_+waNwYZrs=iD2XM?@pQgVo&h=XD$T$}*FPgrPJD<D9Z1Rc^aJnS(9%s<P
zbkuQg1y+TdTdd3^9NG?ACi?NHk5&PtaqEnrro6%Qyhmo3DJGj4cR$PwG<yY7M*Q`m
z4m~CmZWOX`g}Af*X0bV06&aKqX2ifPh81*UgpwiX7g=iOkaJA6SGvT|hg=}pRk-G@
zgtoa3)lO&37awmH15@X?p;$8W>rUopZIlGNwpbx3P(D5t<eTUja<*b!doMM#$XX+@
zFs8KB<%;VfrjTd^@QRkHCiqdnjb2+`53d&K#uE83EXWKQ8RGL>8j$l(j6&MdEpeG_
zs|=B4b!OaO9yy$%iqI6r5Q|WCPSw}uAG#t-J6!$7evSPnuV(a*2rb~L%;8b_f^wO*
zat4ve$R-kLu;uFyo;BbVGfgKW+=G_KK>U4X`$=z{tcvat#0cVwhV5BBUD1`_-MHay
zvo*NYvp3k<+^#0D`u(<Y&ebe?6o=0J7MfA#Bq3F{Qa&5X>N8;fZq}^e#7p3}*6sWJ
zPP?sdVS%g%!>rBxh3KmJ_P+CdU4GS#ewxJi)2ll(NSjT()tv!`WBQEF)u$4O-k)VG
z0|yOv7)-p)C~xh-g(D0blWAj|hr1>DLG7wFZBs&cW$4^eUY=v_jKw@Lkh8eZW70Oe
zPOVzmCoN`TSmo}H$`f0yuUD!0bI&Fbudk+QX{)ajlYYq%e`>1Ymr@~K5vm}<ZrFvQ
zrk3dRM?=xy4SSXCaq@@?I4=q@JQPjl+fpql8RA8ygaq&{b-uizl8vj^q$WHDxO_Rm
zEBiGD^ZGov+RHhDix1FNWr#%S{gr_q?m1gAM5!Bi^af@tW<lqDTQ2%tZ1L^E6hpHV
zes}r6m?-$Uw=g7T;lhX!djG=YTgt*>yEm2$bJ5Kz+J8<SOiYj0SsHXg;mpE9PGi?2
zi73*NjWCPkFrSSLYD|1Zp!lP_+{dbUvCN+zr=|4XD(22>zWEbL&yMAtFs42JIhMJE
z*IzI7q@P;6zEE(B&66j4emwGPR-EdXU_?3Ygkk5CT9Yb+mXYEst6^=X6ZWSz4r=uV
z2cD8Hol!AWGtzZ?!hDQ^?(+Bq=iH>S<Zr_)J07!FE?aX^CyU_?xDyhbnqNxt)`VDg
z(CO}IOSCC6YkIic9F&CVBpJ1x?5-THjwFq_70Jr?FyE>t@~~$*CEL<t;k>laN-ept
zRoR0Yj?3tlDGc&y4w*A8Hz;J?8TeZD`}gWvT&l~1m7B$CGCs_5pmvnFniQ5b5hWe(
zFr-r|O-Fnrm60p;!4jV%ErpRa5&4Ha&VrcoMGrLS6;YUdlpJ4Gv=wzPe$NDAkDRO~
zZRiUU+8c`Yu)_ZfMt3LigSa%VATVh+8pMy|vnG*2Vq{^&bge4lEI^z`2`&v!CM>)(
zm~!T)=HxgoSc@K~>dkyYe{n582wTqLT5iGM-{?2?$OJ9;ZMAQ^?Hw$M-=*pDmiEps
zh;aiAMbT%}ytAd&@s=pbk>xj6kA)kCvsWh=@(z0N-wyUxb3;P7jP;Wk$cvBxC3q)5
zYKj_4;K#%15ZC;}KEdIgas)DYm!g2Z{&e)gpZj*6tlb*<Ib|61jwmCW@kwoY{8m3)
zg=PWO2Cg!MOJ9F8!p=}S3@lFufeQgmZ1R4;{oDJ{c69VF9eGeyey0dB_n-w5e$GHK
z;AD7pDYzLy4$(2palK;6FVmjTz1&w?=NopOZ_25p>>@7uW~aE#N)2J5x+G;D&at-k
z$Xj;HH;@505b|T@C~3+(kNJcKIHI#dmA|cz%blC0rl5epCNnzEQxIhz$8}s+Q~SjE
zQ}No)Y;?AyV`<qY<Fhh59T|D0x?qO-9sa^yf@lcl#SG8wImU*?N*zp&fQ|3>!|-eY
zhxwoPImN~^9lK$TZkZy?Zu_Cp+;miPV~wA``-<aA_a)@G`kl>vT1de}3sX6yxhg<0
z0^|2_j#e_ys3d3!Mq=a^osiBgaI)*_B$><oQ06q~|4QMrZk;JBE0oP_leRJ0C~^tB
z|Au0ST^l>bvt9J-mk-IX8%+$G{8{95EEj#*=qRz^%SWFb@7e}!`aq%gi;PK3h}Ojs
zdrOoxO7+r2LL5LlKWSF7*t+h=!9F61Dd5m+%g{Lr-HL&_4IUV}W9>Upx1E*Rq+5=>
zF?909G8KlEG{J!1Cc4c^{9{X2#DN7Yl{Nb1$HDqdD(lp}NcGr(o3TR=0VH9;Q;ywt
zD-C?tZ4IvamJ|15GO3sXVnwh%n%YeSnr(U04)T+$3dj7;$~6v#|4G~BM>-*ofh-=W
zg8%*cmSfQmupR&N?^Xv5Uw-d_Bbz{>LN`O!e;r(-XaP6}V+`m9G7~o2u|KeY8{h#j
zLhd;r5Z2T{Qu@{R+h*w-E5Z0Sne!JX_!)2|M{;#WYGu5|jDRU(h%>RXn1dWviJlZ&
zT9A&0Du8ZCQv<mMvROP#Rodd~i<Bl-8;j3@{L@8xK%;qrQ#_C+hU)9H%oLZUYeHd!
ze^&g%$^;zdDg}^TbPqmRxuvdUeArZD*p(8sc2Pzq*Qh{Cfl8=tC6&_ABPv1&6f2>~
z1Y@^S6nNMlDF$HU)D#oI!A7xw0JjZ$`EU5Z$}ROT2w)Nt06<Fwlqd{gAf3WOV-JNR
z27E!`3B&kN1X3`|D2PzZdx}gpHj<*C#Ga)Xzz;{Fn1B{yDHaIB6<{xE!(&$Nlkq(;
zst>dNyjHCdL8>qVPi(r=UVM?D{nQ%~VVwQ@wr(QQVumMA5tlCo9!W${VTVrj$n~YX
zklNcI;|T;`R_yTfM0ipC9x^Y&*<gzxo#>Sv$=H~g>s0?4u6ELFq|Oo69EnMu202!E
zf+;8;q^UvcOU`NPvi~X12+c-neMFkvDL>>x%hMS}NSdi8nq!y!LtU{7ztc8esa6eH
z)~}LFb_$I0%s?zpaVY%IDw6d>K)!`ClM+NMD}(-Hs*xnD5x$fs0V9V9%Qms;qAhqr
zponZL5t)a+jZ&~Hj_<zUOdZ9la0kzbOnS8=QSoTQS*ePrm=);)kp++S8@E2+SG?H=
zmU-Wi$PVR~sssP0ci<0$f0dX*le%GAwsL#CKF1Fr!h|v|q|(MZAB0hyq*-2+Ro%2*
zKaA77tlNH^*ZsWT4*-I|5GV|eKwhHI7%UD?Ao_nA{`a6zX%}?{lf~w6d3=FTB$h~J
za)nZ*rmmr>rLCi@r*B|rWNcz;W^Q3=wcc!Z`@`{czFcqj$Mg06e1CsSJ@?NLw02fO
zyJo1pXYu>MWYq!JZe`epMPyH)drt{A>@ZNBD<w4NNj>B2Bl_LZ`|ZD>Rg(PXd&V1%
z#$?VIEY2Pna{$G>+M}10FxSH>98jn88l4o(qmQ7~EucdHr;Qn$#6{q>XH1eOuS87G
zdC>42LwJvngDXP0x-LKY?dGD4Ykg4$wc_)DgIsdwrQAA$Gal@}f#QJqj4TC5#&nmL
z#!I&#^AN=fRp6;`GZ#=e<ka0;B2!uw*;<|x#$m_XBA{U?GKf$Mw<>E%lw-3c$T}p8
zCJSI0X$qKqcpz2}L~iQa=kl$5YN!MPx|JA*6Rd3QSYu0z1rw(WL~%==t>rF>WbClI
zW}kvoLQgp?jW|%=FnLQ@N85i94JS1OuO9i$$14}ql4U*-*N_>6g8E2jd~JsoNPgPS
z6j0Drdx2+UTFHM9d7BCpR96@>9@bVD;W6XIy!canFnm?+!?PF$=b==R9BU1;EPv>$
z+f-V4b+}sI6`rh;-)}BU#a=3%ag5S*V=x=}!mr}@(*>o%u+B%DCo@r-+)Q^UI0MBc
zY|_k8GHS#w1dlH~4;jYs>O$1l?NNi$0rb)FoS;ks0O=Pt7ifkx0tz5Yxgvt+vj{uB
zuq|pvJ!c3((abern*)kW=hO_fZlfu<1;U0$8$MX)+l6wFi%W2&M0a#=PI<%EJc?FD
zakPwLE5nXsRj`;%a;Wnl8$DAI0rwB61_$13iir2(Kp@+t{{@Jd(|_$(-OBTZ=`~5l
zn_Gyvf>^>3KiKE8^9QMRYM$8nRkZhzH@)?N?)Teq<z^At7z!>bwdmufl)z(WIrDHr
z%?H_C3qpERgPmOv>f}b9sbJTWxBo`DeuTP;pmw@*R2@N>@K;?WZw)`MY_yd3TbOl*
z2zUwTb}}1JOs0?oJsCoRdxo~flZhS*^ACfQg&}NG!iUui;NLG(Q(>mOIlQ4A4TAG}
W8!VVrwhAGt$p&j$lnnbyiU9!e_&Ztv

literal 0
HcmV?d00001

diff --git a/lib/font-awesome/webfonts/fa-solid-900.woff2 b/lib/font-awesome/webfonts/fa-solid-900.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..978a681a10ff0478581436eaca5c5695c97445d4
GIT binary patch
literal 79444
zcmV(^K-Ir@Pew8T0RR910X9?s4FCWD0~d4v0X6smO9Bi400000000000000000000
z0000#Mn+Uk92y=5U;vp`5eN#3=2VEnD*-kFBm<uo3!fYS1Rw>9D+l3hTgh~iLA3L)
zRED{20FY%BfBdgI*|-DH9dNI3D>Pg&wq*@_91!3a&i?=Z|9@Mu2;1D9TxN57ZxBUL
zB99SEwYF6hGaE87deYA9QleN?)uhCTY?_*M<+EyvGH)K#)^dAnTYE}s2cGwG04C9Z
zDFVt<-M7}ti@eHSwFZx4TIPA45A*OhmBig2Q~^m5P!UiOP)@m)l53FDIk~%vfi8-G
z>Z;rWysLBX?iaO!tO%$Gs0b)bYtDK10gEDhWzRWpXG!B*;C1|)fGb0<`ldfkQS<r>
znNVo>Ip}dg+#%8o(hQiGAtQ=rfD^R|#qQH@x$B&eNsQo2ICwjF!QThD%7?07o6`vt
z{EZ2Fz(0CYlRS!FF4+SnOq>TK*=zgh-CL7%3&(Ij;-J0P8f)E1!5MM{cR7N#_TKxg
z*8v%GMCZS7NAyqr4_$&ifbBYfKq6Y$gD&S2{^R#+=g#}KKBy#;X!9oCAd)<G=upa*
z3W*Rs+4#@reV&_40cYwhaSLb#@@Ayntg8G%d@mVeTOt)RM7q`N_9UBRlTOW&KoUSC
zkU-Z25+Hy=2%#vRi3%YicLYJenpjx`6+76#j^$4*?Yw*Ns#pHxntBE0T9x~2C1~MY
zI<gVT5Ak#R_o&ft<YwL&6+>$FjYwlyc{69vroJ2|n8V6vHCTC8pu>cI<_B|BsAp@l
z)UxY~VGF8=@I2rD0RjL=)?ziVek%TA&={U~TMyYo1QkS4+$iWyK2tZKf^Kkun&nKi
z1x>MKWkXw9TkTF;R$6IeU3PViZR5JGTUpn*y6f)z)25%)N^OAcpx1W721*=s@__{(
z$nnj%x=GRQw$l9)5%i=(C=Z@Tr~Oxqj1NMHix9Gm0Vl?JLVADRPbsxq^s(u-Ohr*`
z0GPC9do@xYU@}z<k9kx@9$Rzj=`}RB414>=14?K{3}A4hg`=8U)tWu38aW?k2Nw{W
zG}zI{@+7C%VIH6EZ`VDirv(9$OaU@407&u?jjY8sS|kNBCDSbWsn|PaL;HL4YF=-P
zML6)m`bZ-T*qB&_e+k-}O4`8XL#Gx4@jx(aXu|;^RyRNUZ@yIRtLpWwY9?1;u&v)c
zq?lx@gPl8s01(#aMKZcSXEy2J!v(kkyQf8=7!<r?27pko+ft@T=V^xw5FIvk`@i;X
zj`(N@`5*{~sBZxWfXHzl47s4N&-486_v>(Jn#Cg_;z|2`UmAEM)cr%pG{NdV6WU~c
zAOFi{sdvi$@75Xs;tP!-@yzt@j%l__JJFTy&OxG={+AkvB9~(h5`hsyJgTYv&m^~=
z<fFij6E+BJ-k>N5h6X3P7_v{F{ortsuGY1xOQSI?Xrz&3Sg<*<mqE5Z!toEz3wiQE
zrCT^>lss1;HFOhtLIpl8f2h;|Xm4~QAOsMcLrC|Ykbbr_%uiA_nUo!X5NC@!tVL3+
zlA5OUJ<C}7wj&a3BBl;!>iA`|W&c(EVAzvh{yxV!>v|BjVmuhxBZ;JW{>QQ6zu}#4
zE5I^AS9B>FBXyf1NsjDn=Q!F<;6UK)7#6R5b8ks6>6C`DtpBq-yIP%6dgYR?$xg5E
z0tn3fr>b?8tjLiwQOfk{WJ|wiJiXuc&1v5pPQV915`aJnfIcLMhAfJvB1)D`kb+E#
zX3QcvG%fo<FeS^hGwV20oU-#|Cx`wXK$;3ESq>>#j%Y<$6?;mlPNsQE^JIEIZK<a@
z9QSZM?*DJ9^`(GJAAPU+X07d+btdlC%&d!kzTpPRhIseB_e%9%y(*y!MnC~%!;oA6
zq$oH^bW))JvI|8}BB`EPk>jN9{^zLm9ozgl`d%bRX+^e^^o=#ykJ^1_qje|WB%E-A
zc%u!%4RW8P3#As*lN0~(#yLTY5bZJM;y~+1LqbDeQIRlQ^Yy2>{r6w32YT5r(%7>c
zE+Qhq2_b|c1aX%2YyRG0vvpbR*czpog`Opy3`{_MeD8=k>lPNUB#~s6+7zrr5v6o%
z%GXOaYv`%9hZHJD5v?JK?<Vm7zpPnLt8Hg@yJu$@r)68Jh<GEQ90}z5$=&K0in4b}
zh*T*%caS;jah!MiTZ;h&*#asmD#{3ukOT<B{*VG1^L!@^u6(&q@X7<yViVI~(S%kq
zpObP11z4g#DQXxaO=#({x`W5xXtAj5t8)|1n@%rBE{6EOwn}+7FK<|~2~wy(|1L8^
z6=9V~d6S!m%lXJrvunbq>Tt1;xbXxdSX3}^!yQi&P{HHi)AQg10uBw2jD~|x!@z$`
zG74&Du3#K|+S1)q5E2#<o1nrO-tx1*m?*2d-E`yWS9|*M@jpLuFqC{ApR;rH433OR
z=Dqf~{ig-laH4G4PnXY{m9+h|`t4*gr9+1{HQJx(qOah*3opLk#do{M;p3;CdFd6`
z-g;m9>2G&YppQ}`jWu4GauG2J8F@t&O+5o+b312OFW>$|C1sRUb*vpdy!u(BrfqC)
zz39!j9i;uVUA{@p@}nd#n||JY<80L=dT#OZN?cU&$wMQe6Oz(0^NY)C>Ka<xyL$BQ
zUwBGperb7iYp1T=L+P2>x%q`<)pZT6oo(5<-A~S~*Y#~3(Sgx%gy0n2394p!ej$vK
z6w3>evRRJH9blmuR@5!~`E)qd$GOGL56@jj8*A(ZEOZG=89Q;xl6AZG+;8akse4RW
zxc{%_D_{G~-~MA7WEevhDbv-`3pperH)LdkB%ZhM2<f<E;Gtnf58F<Ild$1D-$yKo
zngOBPXijv(AIu}JRoV{Qy`_CK*z{PJbk^qy$4e3oaT4NB7n5_ey>xbcP$TA_q`8A%
zG!;f&E`3A0k|dZIaw+1Lj+Tc{ze1qpRJ5BH@1(xhGqdt*T(9%FFM7or-|~)kdq1A~
z4CI~p{!oZ-94X|9(<<)So%;<HYI*F%7xL38-qInplM~zLdi{C6?R(CT4~Q^Day_HG
zo_D(G5m&PPlxn!k8x_P1<gdT)JIMR4alZarFEN)WNO-|tN3n~yn8j1{LJKZX&@v5e
zRpv<?g^HvEgSXSMZ$sa;O<fgv7Dr*=!_eFN?K<kJOhZpqWQoU61OmMG&Kpl2J$L0o
z=TbO3`@ij0UQgnvE{i+~e4P>m-Y=(h>OB>IQDwCx`SSl}XK!sUvNyA5CrAGO{F)#6
z`2PAbY@~ZxWN93Qf$vzRE(<(IQv{AeAn@V!eC%Zsc&?)e97FxtZ8zuZ)p9ZKyEcZ}
zS7ni#TwfOIALHhm+9J1AK@j+OIUU>7cTHVoX%dHlCy6Y9Bk%9mxwlPSl|>o_zGKOf
zfT6&Pj}O<U<-BWZu@sNuP(U;UMmDQSqn1g;A_1RCr&34)MPSH>dxK7+Qp$Nu2AxWQ
z0K8EtWfCd|2#_mBsw7xPiEwwlY;5>N@c9L<UtnR>1RyL|p<todmzPj#DZ8tH)BK|J
zVghB}Xtf63c0u(gpy<Y&nIOEP;k8b(atr%J1<prD4)kIVN-b|nlDBhq<uGfOH+XFC
zs+L+t#eAbRc<fu8)L^8=?5;K6dIWc?qhN?wgB@-}PwV&$gGBnHqCKk{C2`3iRz3E-
zh$Trm=XsB#X&yA2W4&yV<&tL-LpcYKUmOoCr6n1$(GjX}T~d`)fK0c5064p+&IQ5>
ze8L;9wv;LoZ-B~0&s4uf<YL&Dz&?#JK$!cU!)U3K7yDf58Hh-41DL4*mJBZC{N3t6
zv*)!GjZ0peA1+6Ft^_*+3wpSl2Vn)dx?L0KcGj@_HvXmHnQ+zNh+esqL$^oH8+17Z
zLLr!;1rxFZPz!M~O9~k%M5J0sa<-u@)C8q80Z&JQBfZIMvHC%3`g|7;EYN{Zij#IW
z79;2g5N%OlE2EJk)$J4vYcOVbLn!*v1^4}p`HM5Y%Q;Le34b|nh!0!^vvhShDJ8O|
zmK+E|qVOdLcS4=lo3rOqSsR)2b)%CnS<oNap-)CDsB`}GaPk{~gcFGLGEZ+-`3)??
znXHthyKXWlTb^Zzg@U=lhz#S9QD$XnW!3;y9gZ}sgFNRvJZRK40m4ZrOYkUQFYWX7
z7n~UA#qPd_{yOq@giiDbSCGSvIwCVGrv`D^P)+gICK{b3@^Ym(ajS>6!KCUC&G!Z7
z8^YSU5MaU!$AbW7Ju0%hbq@&>r=Gb{`8ymEjY+dXrOe>+tcT&U?JWyb8~0G6g)EXd
z$!!-F%|xhJ1X*3vVptAg0OEcJNzyx&^K$ZoJOg$-US@i?a@x7o#9)uwpfP)I+PW+j
zb-h|$IVsy*tmGxgn&)}dJdcm|;ub;!gO4)b<~y{;2Pxo!=Xb(Z@M`I)dqR?=X<}PP
z2n^}Oy;sjefw!AY*XkWOm)<!Fn*%j@WPZ(XyS^4tjtdZ_(>jvTh+yNxDRnnk%ubJu
zY(y>%7wuA83B36lT4|kZ9JVzEW7-`pBb$<AxNcHoWRN!0^@Nf&H>wvZY9$Dra}nAd
zVEuht5ChX<n+&xWky(((XMh;xz#L?8--imL_sz{_Y5S*KK#kVD#?}B{f^*mr?Vj8D
z3JS?^_BWq-_2Icg`ev%o%B9Y%wlpl7GbTz904}!(J&7DY;X=5gqchww)ka=UB!kQF
z+<ht`M(c+x(GPm^6qkxA3Rb_WGTn?%RIfl`+Fjc{>Y}_Q<yy2JC%86M?wGoDO6q3G
zMwXhOmQJiqQ`c1U)K3{%pJbS9-21CxIXAM2E!(pntqi2mb*&XGbrKaS)>W>-5H&Z?
z858|<C~NdSAtueF?hV@TR24~hK#&-_?tZwhUf@ot_MIYhw6<L_<#}%TgcX+!7uyvl
zF4&KnRc;R)@a-cRqVNw2(5O7ZI~S%n-MUm<IBU;N$E3-`&Fkf-SKIe5l~R|@CCmoZ
z+jh~$%U2qWndv%HCLn@1;Am`oT`^zM?hI_l$W&IYLNnI!=MdFhac5tKCcn#1m$4Z$
zW*NKhs0D9UcMvgntwUE;Ekzi1D<uLkx^HjIVuK(Ko1poB_0g@(<7HykuWe}CaDIcq
z37IvF(K>ox`{x6uZK>#Ang{VAbaj(bDp?0>nr-A}C76EQO~cLvznqN(V@vQF)e2r(
zkE>oL$%p{=vj*V#xF8Oq@Ntyw4jBZw9grA@@tEg>)tM%X#;L3(LmO?M1KG4z_xe=V
z9K2C&miFj?1a@CP7yx;p7CFO$`Z9Ixb*fdX8-ug8#?X2y9cWEGFgFIRS0cI{THb|`
ziJ~TEF*k+Q`=GoMuM8hqeM1T2-;G&T15&#kFRk=~O|^ORU^eUZX7&WK_tMuX(&d&M
z$p!^gj$=}BfP^{osOLfpctJeR!;zW{k1r4S2oe-iQ;mpGJ7a6Y^DtT4V>}CIr^=m)
zFeq2Ls&@TZbk=*Ompawh6s$ZTrxIC-W{;5wX5)$JH<S*M^|Q#0dOgqMRJMt8S^i*D
zoXAw^7@jQVpYql@S`4C==RN*DV5)MPrIt<VB1Nr~R{C)m9<Q|ow6@@?BWO@=Hk(?j
zWj{YO|8i3OhP$GJ&P~@#>v%AMI=-K|R-y#C)!Ol3(3<b-DuzZjOl|FSx);w_3=J`T
z<bGx{t<B0Ab4*=G)1uYsQth6Uc>d411L<Qr(i!!!$g;j&_?cTzH{`K}sQ8Vq3vM15
zk5LW?<^T$;Ef8;w6JOwLMUh)$Vs3@0otDpB#P-l5%X9jQ^U$gg&~arivQ<|5Dm5IJ
z5?LZLVfr{Yj4HjWJaZ3NTy2XV4TshGGE>HCV{q5hS~LA_nolR0=#?x-qcI~fjN-V{
zmBz_jR!7<j4~DE)(0~{5#?@XqEpxlpOQD<EcG+NzB@@kZi&BdR9-d60$cuZOX8!u|
zQDVnjU8B}jHYMwoJDPn=S#35aU6q4rkI#GS&QS_^bs}+B4(Ze+YE_iwH><|nsq6-k
zN3l+|xIZQ1m30Pt1>CAn`GiLWXUH@TW-@?8Ra_eQYxT?33vu{5A%Xc5v0Eo@sCn^E
zt#2)N?w=F>`b%3_`xkIQBsx`SI3t_Vi@G@G#kcK$fU#2OY$iyL<zYXWbu`&?8O3B}
zrlnnUU4NFGL6g?LKNhoCb#z;kN2OjNrE9^`P6Z}mw&mHShPdb!^G%+lE<a9nmMHUg
z=YjGrxhiFRou;l`O;hvKh|Hm#k@gp}ET^cKpVSz+;w9cEcHc#<tI_-Fx?L}UF$wk}
z6Ek=){`>mZi`$Qk#!7D%A2(bsn^r-8Xy!S2bZ@1w&He0{ooa5Upc7Z18vt`4%k_zR
zoX02gzSr`alPs?YBF@dWFmiD^Q52CQWca<s($`x0Tm5>hXin&JeOmo$Ek1-gq)MfS
zL{({1$o=DZywLhtrJUk>=>^lL8GYpY!!@(<NR3jRB89IVxh2nSe~68AgWTH8W>#G;
ztHxtR3#Am@(aqU<(;Vv6a>a}03*fAbY|oF3HycA}G^|ujmZH2kO<JZpE!(zkC8TR$
zD+z#Cyf9sSPc+1XKIGOaiq;ZZmjgP)n_uBtE?MAU-*0^tFs{$3T0%d_qBLkdVeEJ6
zHyv^CkPsF%Y>WuqSv>)}lV0yW-C>64VKy5Q)R~~x&2SMu@R8!hx8P}jV$3H81#U%K
z3a_AK0^P?a?EOrcn~&j|mPI@_+j=wc#e~_%Yyfky&(dUTZF)V~@*|wTkbX?RY4I#}
zO&TO0K;|I>>_Qi-IP-EfVhI7t@~-+2e59hLgs_;SuF0p-AR(}r)DT~j7zIuP@}?s7
zp>}~)#;?8;6}a-a?8U|XXfzz%kE=~PDTF&uxUju($xFSol6o<x{wp`@GXoQd^-%IX
z2p3bIv5#f)O~~XR6AqaNN%{B~E}S}v9V~W+C?gJaLPdoh4uj0dR;oT%s1l2V?!<H#
zuOrbZj(1r{wi;wS+1Ecv-Z!e&5!VCl+`47@*kQH26E!EQVT~Aepc_`|<6Bf%UzOT}
zqd9mO>IuSH6&c|fCQp$~g>o-Wpg~@OrK$M?3q+47@sY=((eUK7VUaCN0rrIs`*8*t
zU~2A>0_EsE54!RcXfIN;Ms%r)NT|reV#ZJ7)TXUiBj7E~f%;-m#h9a*ZtynhDt5FY
zjzuKVS{E;|ShuF&{AwWYy$bA_ci6DxvyuxjTf9=!+k08_SkX*h)BM9Xh+eH9GadhO
zMu5x|Vm0dPmyleU-`CI&&4JZ7szVsk0M>OcF;1NtvH%92M0T^b2>0tF8nQ&0mr0ht
zY4DA*K{-OQr<e?&L$)CnpFt0qPMLuND*7HzJJ{D60y|519_A!J2@#H+)=;P{CA{de
z>A-8+3W57R9HcsN6Qs`DBAonAi?C6QKNM^}X0Zr^9hPGVJN{J92ADu=jrc{vncH-N
zTX*Aov92k=gSed<5ji(e#c_ZZDggppTWb>cq>3Oab4SwSdw=J~_+?c%vyyOo^y=|^
z+{vp3q+vRaevyR@!slCaHyM@3d0I_ffHV7`EWO{=DZ{q|GyIIzfTk}XCiVOw6L$pI
zg+@07p?D9F8f%eC5mRp@@!=E<rc;o^tm`MUa&gm+Cf9=4w?=$(p*eG}nHDh=<vka0
z+oQICZa}z7Y=g3FF?np1TsGBSHkLBbX*7Ao9M|_2y7c9;Z@@Q8OI&XE+RQ3h&dP4G
zBttUWtFpRiF09l{PPdiT#)lx#KrjSY1j31QX@***2%b5-?eO|as6?+&sBjS|n2D-b
zPL`hIbiE<bdkXPygGp64i?Y@^x+P#xc&t6fQ}+ZK2iaR_ifS``tcNt77)!a!@_Uld
zluiZd4l(Fp%#$6Ff+?#Z{73J!lw`GZG<36_Z;`T#oqc-BRiW$qx;g)o`VxHA6`Q%G
z--C|eysXrIt8MyRS~{y<-1nB|SV`E(QFyKl#El{72(Owe$e`B6GQ*vD8uW`<yFQkx
ztw}K1f5LI(&^O@A#@axgotzk+ER4BoMdvusQ&^6^Zqx=LxUROGg&m}W?a~KjVZ&i1
zBQ307p4T~o8Q-BV=cMZ^S<}Aj+ll(HmMrPits>}WWLs<xVr+yJB8vPR*R|EBwHsq}
z)0*XEhPW->dW%W34CME@XYAQSQz;8w5I)N0iIvfXCwmSwV0kCCx!UD(rWdUEtmqph
zadL(97ox`sCse582gh|f_Gy-;i(&xjS`H9ZRV18)>vE+?3kLaR;7ILF#m94Z&mu@!
z(M4tpvQqiw1Sy$j#1svAOFD`<O=?P@MICYdv}<H0O1JZl-{}_2k<b%AsizNReR)P9
zQr`)`^e*Lz%n^JBX%htrVZLp^&NORU(x<O_r0+{-{P!h`FIO+1;y050fUJMEJxQ24
zzC6@8(oCa)Y|_GQEExPU2u=~x9bR_HB7LVdsc1zkImU6Rhq^!ohrPGJmB7i6&!`!v
z*V;!S(U6H{vzUJ~r&p1K@TKwrCsS&9uK%2%y9znN0(>a-S30P&dY#1%c!1zGWT!)u
zK)w0C6~1qN*-6yg-UF^|J_(iO&pu97E8lt8V%5%_d6XpQ_YBYKnE?m({=?d(-+lT!
zz=}V8R1vDdc^#=~=zmOwdWF9R5qYG^=TckNMME2GLcRY;NArBAW!}>Ft*5XPh_uyF
z7kH+W*sZ$f9X>X%&iVVX#dd6_@X@*1YnmR#Y;4bv)E#*8{e#*1b9^U}Y^>$8J;gfU
zFu5`IOw}8mLD`Mm!~!%H>)|jQn<WjbVigdjQTqrDe$(rWjd#O$jw4VI$GFONSg+tn
zk7alt?PjjjQVhok&$elg$hkhL?{&i|D+4kL#x7tGl&h<EQjYBV<G>c<d*n^XCsf-9
zS9h@<A&F!3;T;mK8sM+l)o3kE`~jFM?7Hp$u5JyT26tAU_`L{Ej#BK=@51o_*%f=`
z{bvx9-@y3Udssuro(onME=|(<Z19hV*kNt*rqjSSRp5POrTyrlfXT7kS&)o$=1=@`
z(1P=wl9<2pzPw|}{$4}Fcsv#rl{+s*WJdcGE_>2}9Fh2;Mo@j2klxdOPt4d$DEXCi
z+Od;d61s-xiAlaE*;8LJK2Tz3dc(qKOc+UqwLx^`b~(#s;3|_zb%U+<p3urLNrPu{
zY{b%XHDz{_R1A+EXBac%CSqUrpgPXm42h3fz00%=E~N*TAuVQt<JNI><EB|r`>fs5
zY-lz`9t@Iwq`#gU6|0T3z&P1VW;^#o-NWs14%Vy{i{PdoMxP7lW=pVgwffPRUWGO5
zvmbLP9#GJI;zJ}2(rg{2b$`iq(&7UB6)}}#;p);0AIYYtDg-k&g-ek>R0Dl03aBu?
zi?dtK_?Aa_Ih}=m$Scg#D@in~JwSi7Y?IQL*FRa<H8XjO;l0I0=1I2^sBeBTGu#X)
z29NblMNkVX_JOJb9TxKY`5O|OD{KMVP-zT0&A4Y(R{|?D&4ZdfE-$7Dd*os(<%s%I
z63p#VBtE1TQ#%33asqFD$N&q#%kJi4s=PL*JnSY4ufll5%NW)nYe%&U(J6*XY$a99
z#fs@`<+L+N*^YY7bdql#$qRpi25A?%Ds(w%XRg@F^y13STHc#m-rk&HhJL2QW%Hx+
z`q&<1tk<0>po8M%S37Rn{e5OQ_B9~Y($9(t<>>A0WsaeHD{1Yf_@3#icrC9OrsnO`
zh5x5-zkB1jLE65c1U;qO#V!hWkoscmhs$bjaLCbicHsa6s|!56uaetcIwI^rcD9aY
zLcl44i!I?N4V`EA_Y;_#KX)!P>$7J!t`XQ6EO1&}IDbB_>@QzlzsX67(sjvaCY%-Z
z{Yvv#d@-)Jfj^T-$zo0s9r@OcjOw&<vN(+1<I#9>76st|(5nr0NGEm+G~q`D+t9R4
z3`}t>0xK#6H3$nTalQ%z*i6Lpbj%#uYV-WY3NBoA4f&XjFl<4%n|M3*1l&mpEfuMe
z+wlK=&#*Phc;O+j95{$e%=M`cAUX2`<@lGGvt|gZ4kD9>LNZ}BOJI%M9zc&hJPR$B
zj6;W=zYje=bXPZcDyf_N-k=WXgA3H9i4?Wzxku!a{ySJFqVE1-E@RITyS9eHLNV&m
zP5-URRpMp`YdHbLVt*P`<=1)V3Kgulij}mZZuiY4rLchCs==6ENS7Bl^F7F5Mp;#n
zDvvDu)#7@xvQ9Vm00Rgc5ai#=RB_Z(hTP2}HC-^36-zEiQx!`ycWT<?ET|pjF{^(R
z*2W8K?9@L?^eO@a=DpMW6{#<4izN-KnP{>Ah<J%X1=>7FB5Oh_yf7=U$3*>*Fe)QH
zt_C^6#6nRlD=t`KF5jfN#2;B!tcX=?S5caHP!lv;4I{xa>`&f+`O6I5j>~mm+2@>j
zfM@r!v*ws}S|!Hz1H`XMd?TF4y@{K)Iv;vonBtx_FiUD7j@RQP3c`h`l=$;m7rS^G
zawYcuGQ(qJtNZr2p*}4<Urt>O79*H}I2mC9(J-puhGRj|DJpC1gTdtyCT~U{WH5*y
zfZ;=qIwgc=Adu?u2+i*qzq(R^nj+pS+gw>0uj4S#)MV*$3yZ=qtE;|ayvkqs6~!U5
zlbuB3^Uf8jb_olsYNp{cLVYm?zcAn)shH9{SU+E^S$Xam1*8aWRDx~y%s15jY<uq_
z5UvPh{6sp3(K>w<S=G_6?o<O{S4UUPf~0fzY6zB03nZRZlpz}cTrsLNl>`((0Sgmh
zRksUB{vEbcKe^^#UJ>NyjU~H>dn-Keo^4bBK@iiceOyJgZ@<>=ncmG<?R-fQ4Y9<5
zV&{aOJnk8f^u8NkS=B(4$1>Bu2ku3sFMH%eU-BK+bF7s-5>?;z!m!9)(q8G_9qLp8
z*m#X7Vi9@C!Y0>*BoMY2g(Zc}qehppDA2>v<59e9)I82^b|oYV0wrDOV72Q&&Cww7
zz6ED}D#hD({z#ppMn3}N3e<V$4l?fnJ{7_W`%Z;~`|J!-0S(Dxghi2;Soc`JQRz;A
z?JNho8EQKp2~NUBl|6xAKvmuQSJroSwY7G%^TCIYh6WzopG11UW+>Yj4%>?}WK*t2
z`Ajva9<h}ddy)Z|Qy|^<=&x;>&<Lk$@!0I)$PEy92(71|22a!@zbt&eIoH`etqi5E
z($o7@l@cK#A!ua7zlDVaOJ!JXs0ftq=||^2FEv_Ijh37{OS-KFU$om;UD-1wZ!)Xn
z_R#PE7YER;u_d!Sr={uY)%Rk$2JI4|F_(T%(Y1Vpy%);T@rX8)2b0_%R>}7<ze@UI
zxcSlc30e;H*cpeWmYH{5OB1%kR9ZfhRB{FIoo|@_rv(IhGla?zmZNox;IP`wrgqt4
zIrp>JLD63{uiSs;fy>bx5u}MBw)Wbc4BJPslhVy@dstp0VQ(IHr|m-P$^2%_|5p>3
z8;LF<G$Q5*1PVaKMuVXIBe8uI<juGD<-ic(3$K47Rgy>;7dCAUP4{op1UqeEIF|Ma
zcPOWg%ig%TAA93wpst<EOKx25j~|eBAP*AjG~Mnt$j+Slk#`aES%dMi59AH9+liYN
z!%2RRg!^fSv=ez$eS)#ur93e!^bQIT?C#U`<y%xS#^RVW6qYO%rfk>;f+{`f$(!{p
zUOBg?9zeHR0C#7(E+nTe1~De6gy(qAnR|dlr)yF3k4Y=S1&#J0=@E!*$EOA=U$4&z
z?{K1!ff-2QuqUblvvY1KKym(~@*h;-0HLmKAUG|~3l#)9Trw15mP<+?2Gu~%zKD3N
zQi*^u7@fXs)wy{w*-R7oG?@;T547m{OuoS+v4KpGK#8lxdJ->)7X`i-)?h^l<4TI|
zuZkZVmNJ|TBTJL2k}|v+L-`ZS>R5+V`D(&f>ZH|9b2Mjt=OX>Ro*h%84rjPP;h@Yx
zg>0C7cEblz*P@}3A-3<iq%G)_h*7f3Kq)Rh9>;PgOOW7}3Y&UwdZ=mlCM{bjy?Z5`
zr%c)=%;MS*HsxD-LwTO0rT*yl(M$&;9(!0HI|n>{WZ;_Urvvz&b1r@HeJ8Shom2*6
z1?747LGX{mwGKOXV2H~OYzy@l60Uv}oK)<pf4}c&bo8nE-QhYAcf$TqT(?o9>ADVi
zWxXzb#T<ivtP|ZcbS3*ljpy|?-%nsd%q46h^9J6YH}cv*ViaQ&zhBnC(RQr!jA4Im
z*$Vy%ue_Yv`bteF{ZRC8;7YhvYZSNZW;j%_U8i_^Cn`nUIc&`7V*dOmd*`TGd<?UP
z&C4IcQqGt=VuX*x%rRr`lsR$O9M{J~a7Ls9$}@BS70uH`A7F_<mhEs=MKpmUtAR`c
zOX`dud=R5dt6ugez&T)E!x(Q`p_Q4+(`=d7z`(Lj#m+gI%3fl;(CQcrMpqVd=1T3z
zTuI=1Y}lH0q*@0GI;LBQ!$vL3%s7{atybo<8X)d6T<X~jxY=2O+8qfzn~d=f#`WTq
zF83NcnBRm0=10EC{1SEQfyDJW&`w$0GxqF~#>(V`-?tSxiY*>lHwRX}V=A}UZ%$vy
zn<q)q`3SkNwdJ7^-4=sxt`b1n8#ph4z<BBgZ~ma~*E5M(vgGVYNCxxEAtq>v`Qr=I
z`Fjhar5{x!^0vH|YL!%l0*V)sSY>qSfb4}}ggq(lseQb*N(Ck+8Pn_njWY|o%<uAk
zeGg3u#eEXq+&uNquC>-W9T#$V!ioWWAK1G7qNnqyd#{K2J>)LdHqf`PS>H5}2Xji7
z>W-6GfU;W~YvJBr$Yw*R`&O}WL^C&B*mW$B5cIg9Y%LY`qT!c8ED1Xaw?DxPI>px;
z%iCGxPfElvWv20rj;qE5Gx|*KO8Gz=00YYf4T2vFA^A34i<sV;meV$;M(j}|HfI~x
zsP+<;<BbU~>=|%zkqy||)V2l}0#BeuZNI3&n*yEZb~o9@{*j}~VyHARG1i(#puDh_
z$Lh<0Coh`CQ7mi2w)fd<3uXm*u`5UOv;$3kqi3SzEXR1~>ZiO_a{Uo<x$7$340Caa
zB?b&DC4QNUv;@eltwc+0kmS5Y9_s^*D!?Js)1js8p{9OwkNzS}oG9P7esp@`<F3jQ
z;YABb=?iGj3S8P2z`zzhxrHcA_cMEmEfCx0g$4Hv@xJrv!pg>W-#Gh^5-*SAoBe#i
zsMZFx6(7N4+A+_fU^##NmQ6WYJ9cTvK{7{ia7P%QX#onLQ_8<2md~<#>*piT-Hp)U
z<CZ>G#D&q!v_d<4?`RzSZR<J}iln|KBz<b59jRs4I(-w85<2i)`As#`zP#O`V}4u6
zNnm9ZcUvqLqy>=GlZ$&ae19D)M>-ogDE5M`?&c;Le6|~y{a1H*j>Q;el{~-9L@jf7
z6TQmyCpEWY$jR2@a^q^-JF(J}<r6q31u?CN*CuF&g=BuY^Wn6?n@*yG#L3-sJ<KW7
zd^ES&DhtA2*Bk&=ehW5R9rBpj_Hja3=f>2kf=T<GJ8rj!5L`D$0F(9904;Fs;f8FO
z=F-=&^_8r#%z`)a0jGDcZTl^jO>F~PhiSFTSWbjZP1FVSyKbN&y}ydU-2;uxQ1=F!
zBHyP?jnfR1RGxsQbx>=I+rknh>?yMVTNy(z9@h=r+FSvVwP_nyteT(il&nGTYjBSf
z&Q?+;dM)48`f`>F>>s&(7w&1RIrjRx7y21+*$K^wZ(I#I0SqyKa#UTDKeoG)a%Ca9
zH4IV<(~|Il_Nm$n#Ns_5&l+<H^Hm`MYirYFdG>m}WA(V6#@@whx96YxHvsvW9Jrfn
zedk|TV0vXG^<2=gCJlPwdYjq_oKM(!9cvQkBMTRSxmJr&s3}uu5E)3x^qhrL77Ka+
z1;+ZFgV<b!80w#l<3?GLH5?U{5Xa@O1R3&$pt2ym!O>Dsp5Hw?i-K&0Nc7i)ch}IF
z98c83^jR`!?YkS;#0VOm#YVSus9pTYVX%58A1i8!1Q%R9;o=G%v5v*ryF%gy$^Tsg
z8X_kG{)DiDrtl%dt?t?SI^-InLuX?128WnIkahQx*_uaAT?~62wuLstNR;nhQt;+r
z#!Kq^OBeoI!G03z`|)3cixAJ{AFKF1k52%kBi6Gx#W9aA@nXR^{uN0%vF?QT?)^Z3
z;8!3>9b5egw~8kR@vZy!qa+LTI4iukKzw|ebwkT-A#6#jvdx>$b(-aXEX+(O`R6gq
zB|EoA%&-DymT)BJk0mx<<>@2FT??GVg@Evr5J1`Fso9B_jLT920WyUO2F_5Ybg69S
zrYl*Y1XO=<QR~_!wq?xz&y1_3L^nRGp4UthD?pKg(Bem4$su03qh_mP7XLdZaV~Wc
z=l<MmP~>gaIu}^<vm*24L@1x4?TbPAL|3B5vGK4Of`&)T;Y4th>=~8A+2!7C)%q(n
z|NNwW5%RL}Y2QZ4=eC(p1F3udFkzV(YXD?RFP|Nf*ny1g;VJyv_EN>w&FI>L(bWju
zhw$L@YJ2(I*2YTO3A#$>`}pDYi~GRyT9thza16#X{D6w`%W$r^p^Q0fOqscRar8?T
zW9QUQhNz&c_X!F5uw#0-4UFbu(!EGwi(TWeJWns~@An>xYg6n>B&d=GPqOzInN|B>
zx+=5@hp_k14IUG=v9yIus_b?Tt+HOtV?;9|71Y&AKu=cc|Ai)mE0K)-J0P(imO;?P
z&i5L7ruvWH<MxnwPhq1n3ptSF)nCrNE7Sl%Wo%oozatjzUo07K=~i>f85)8oNP9_;
z*DdR!A99lrT4R!M_uw#wh%j3U)~>9y1#aO2GPYvW0QkfQY<W$-N9L~4-Zt*<FN=nW
zW&FX;!iOy-mf$m_BDH*<!3uTiz+y^wTBPv&d-+nIBGx-!MYgdPnbr)c&-EORZi+*b
zo;1+qh;kb>MGt7_JnYPy^;W}w1r@n2Dw30<V(Jvn-BKZYiho+ad~nQm2u{;R4VkD_
zIL|9P;s!TCXH?p3TdYQ!&1xRu${FCZS8P>G9*!ncMy>dF{_pj60ko_Rq|~aa0D&Ya
z{#jp4HGWi(`1!Md6S|75A2raMB#95<;^RWT10sSozM)m4XlTFLs*&H3-Z$ItX+gJk
zZ{8upH0k*cg)V%arR*n2mQ1aT$ebhkuVnUD?!xIgyU*^-m9qeyBqGpoBnCSXU&X^1
zgmcOtlFC$ZxLRoFufZ4f$rls(k$Q<&3uCpSsFy~)d?weW^anlI0;f4)#>xeD=Ci&Z
zL8l8!9XLjxj0-Y0LR6wlCa!f9HiMs|LFzIQQ(q1N6-lV2ktWqz+W6*WJ{;;Kb413Z
zn*@tL3wd3_TRFb#LF)Lz05NyeS#Z7m@T3lQlRxp$0v%IZeqz%#4-U@FNe@9NiUp<N
z<2&ttB2naM5K-s3%=bi+$rNH@LIXg#M)*w)iwj^17R^ERErvoav<!$OC8`rq5t?mO
z-azI}{HY$zupl0HdOW(f3Ou5NWDxg00-b63X*U#<j66&WTloG*j_(~+7e85?<g)Fn
z@nd2*l6`B75TUP^6qP#lDJv_%(@h6ls6R&KZQ$i2_IwU_6Hrx1FDrPtQhRAXl>PiE
z;04)Y+6CAFV1BQ2=T}!3^~S~JsP%0#3SuG7@P1*PTq`K^b%E`xmpmR$)4*ZX#yo6!
z>MTQ4(gVoH-1=*cfnbn=V15~-O9~XCO#(lv!csc?j^(^}asbr#$iJb#|0TbumCI-t
z#nXs7`7X1bLrEzD+DYp)Kjr?aPiC=h0~~muXow|}msHmAx}FD~kv?E+rmZhu93QTi
zMW;M%rB}NIc-fNlnKi^JpyYjt$nDoV9JEq3pt^ICcK&yVB;1b63S07VKdcHO2<L*J
zl}nJ)t)$8_N&Q$Oiq3K!+Z`dqabG*yhkD3f8XPj+v(LT<e^7CLp-fFC>zc}m-rmNK
z{|$XB6uvFdhMvVni;(iVV-O5?pTsM=-?6s#Ni+g281SJ3GbgVtDR|f3{_i9n2OkcT
zUN+RS;o)BzMT$x)ZBuF#R2&l~9*W9LUXVtzNJym<V1~qN*s7v)Ey%kVS}}4`3UDZn
zO-sgYvB+?d99??k6-SBXh;CwL8EsWj8L}8y#lOFR*bn~7C7eteStx|x3QH+w0pB>m
z0omyRScxjzN8K>xc)jmDf`3zG`he9`$XlemMH|99Xoelw-Y?c4;L4&P$MQCP;4<kY
z?Y(Nl91iGq0CJ#~B==hXNBlAzz_$cS4`ILZRkZ<H!^CaOJ5e&|3|1Q%<dIXJQA8(Q
zTXBPK2~WyHWR`t<5e$<f!X*t~1*<5397QugmVVdA>jXFCnv(y;=ARHRltBf=?P<xA
z4fX(y1k7<nKXb3|{S)zZy?@4U^in^qnbm_3q&)1hq(((P$o)^XNK6^Z^VepRSBUWY
zT#FBCiG2!wiK$&u;t?GpF1xhp^79ACyEZS+^PT8@DAfIKmE-0e6h{q*9|t!Sg&m}$
ztJv)>r=#r{dO2*JDJ{(<vBu5sd^eu$X4{JBf#7QoT7&nids1k|CU<wIYu-lv+|}tN
zz`b;3sP|M7+ohn!o$IGirZcxoFpdDCoXs%OwsSBiUMbyr(7Mi~#RoYj{W>bJdl(<H
zID0oP2KQ~FAh8jdzNZILE?isXSc5?lY^%BgNw-0cCy-MYx+BW0Sb@Ho$uA1FbAVRc
zVrQ#%sX|kG*<|iGkngw9`(F9(c=4I$bnailoD76opRs5p1j1{iz;VJ+*6pSt|L#VY
zrf>$D*<rO<Pgn8B%_#E4;x6t@=-ys$vB=}I`Q%%)%J7e4wB3KwwwcR{a}8P9LA2nr
zW9x-A)_IiEg`V6U%~$@s+n$fciq57X=1$1pA*%p_NEKe(6VX5iy~ZCsSVw#3ByKF$
zkC|NBCO$@V1o3SCTMlNz^zl8t#~dz#wkPiC{44zN+R^HM=449Jm9aEvI$ro}*XkEF
zU^VLK*QuruKQ-c~^XN*d%T_vzxexkp(QRiYabAsNcS!Dgfb;1jQnj$>EF3J}r}G!r
z4nT*%<=Dj77r>bpsSM(?Be!V0Uc}HY6&73XX}xG$m=;${!)o<gH2-W0WspEa5z)>P
zg~CSh-^l<eQhd1h;kS0h#`w^E7?uLyHvT3y>92E8fUAa&+Rly6PSM+HJqC0mm7L<;
zcVf=MYHt_nyWL&EAeBqS22wpafkcQ~m80t|vQY}4*#E%}^g8UUW&7ZQ|MBH}2m`z8
z6u`R<nV>a~XWr=m{T0h43Vhs!#Ju(hF=fkO_q0ahfgqc&d^qXY$>o>cuLEUiRc&`R
zfB!VeW(W93o01+u;m4EN1MGzh(hA${s>2B7*U3T4aPAhMwb~gk*?4U6gPa>wS+bSm
zXYUW&e$6TenoVYYV{EKUsNL&Q%|un0z8ah0g&3z$B$%v&XXJyd`uRa9%^+(QJjALX
zm7|M-b=qUPW;Y!yP(847Z9N)~1APxHjnQ0PG#cF5%nC(Pfw}75gdj1qM@sM8tRZ&p
z@*#?=!HHzr^ts<cZFuf3)^D@8r7=2^JMc^Tbfy>z#+|m9Qy7RXYBIph!sQeX(4i9n
z91lI<2^mKRg6k0?n7Il9j~V_meiKlqYsOuddl#BKDvOJo>q#;Ba;q!^X}?{3B5Zlg
z#M24Rb8e6|egOatM-#PkRx7Qh?sOIn_Ek*$D6Q+)?OwAT;;ur?tR{3b9Hd+|$naP6
zL^4pS0dzLTPQ!TyoDna)d@v6$#bD{O$S0v6pA%1#&O*YvJe3%^EL|SPAWc?<Mg+2I
zy2wk$M1mQyiN{oVrJ+*FAs?<}lLS?>A%|5n9O0=aZX?lglP<GWIrk_$2fxP&R&api
z>WIu;SQ1sLL{oe-9Eb3uHQrORePkavK$?s-6r5QJ?;O1*FFKR#D&>b19yWe-hbE*;
zigS%s7|Gc~F3P;tDyTq8n5|%9w|(+BmR3NBh?JNX#WuuV@Rui+MRh|qv7m}q`d<4<
zh&Yq4Hs!DiZ3554w_3(hI8@e(KumPB+fX5{lb4%pY48j^Qv-bUXA09r8YDL&3#6e0
zyS<>FcW1+04IqT%1Ag%{2jw}E6&oY`<_v|ffw(|`39q-#ee$2cz;WNu#|bcVH41?C
z7!s!DDsydTopT{>*LkXyZIB!_BaG_`BP2xG9XeleCv(x38shCKy~-2**t*JX@(B_y
zThL8i{y`q_pFtj5YL#FRkf4f_Nt%Nsv=998|9#=U`FiQitH#6(m;wZGV5Jp`GE@4T
zuNoOo`cQuDl9onOnsqD}h>DAST+110K;}HJ28_Akz9oQM4OVrM(KLJ`e6I|BG83Y2
z7rPBkyr2SQ_nUr9rZVNj`IoSUR446bb|=xPqUO&OFJS+Ajd+ROW7MYTIHZ)>B;c2z
zr8Gs94yp^RG~qY&Kpyi3Gd@<Rr?(Ct(2SO{C)i#)xutEo)IB!)vTouiv<}+Etsz1A
zYy!~h)ZX(e(>q17QpKrMWAtSh)dh&bQe})%?EYkLj`Lho4(d(I3k2eigb|uTGZ;0j
zhk5E(S(qR|Oe<H;$fWf}@MqI$9dz43Ye$^Dm6T!rKrc#}=Oq;5H)SCq4n-r~lyCdR
zdDA9V#D-MJQYO54qWDDnlnPIu%V!GVCZk|7O5%@=M!vzc$*+KHOQl0sYFwOulb~_x
zm7$G3b1(>Fvw&`t9Xq}2G0DWSh+Qg_PTYt`CvTN%ZdY?bFMe=a_;8(dK`qFZ;ykBC
zG_7>lVNQpW0;J21+1=X(yqPCRmJtr)k<V3VfFv~<oy=8*8z8%EjSJzj7BuWELb}X)
z#bCcxUL>boGyEey>E4(be6MBmJ_!=Ztu>0f4J14$F4*w%HC?pYt#wv<_!HSpR_HS6
zc;QFRL=#6@ap(A*3Jmupk!m@~6B=J@525s$Vgjcs|GN!X-p0j*2g89vC*$Fhn|tP{
zbN}B2=V5l<Y+i0Hn|vxomv_xL(jS2?HPxS*kC(By{NazhV||~bqB}LbJNocL@%S#d
zLQ*vF)`NNlG99R)K(8$sCvAwSZq@p)u(#HxL9*$PSq8gAIE&h1{bEHa7g-#WZ5rM^
zVfsbek-IV(!3OMV-GIRzFl`_df<V`?J;-?Ga$#{GIttxV0rGL;VO9EE%Fs~*XLrZt
zPI@=S{C===n_V(Di{K`S4*Q0RM7y7^id|PpUJDa)FQwfsN<8`UGwBV%Qh7|CnJOJC
zAXJx^EWYs!fu7sTsZDG>2%wCxYpq1w{8MAdh>jJxAZqW~E{&P5Nj#wH^0q4=a;RdG
zltn6@J?$Us0$TE}Yi`GhUX4pRY7~NsC+5+bF-kOy%BuYrvM_ACX%-d!LpUBIYLhEa
zJKeX6aryX(lH6>}ybj0vVeYcSW@f3CxcH;n5DB?!fUUZ6Zv|3|a)uFXPVrH!#!+R6
zyw%jZBj-L+lesQW=jqg3>Nom&YZ+S>781<*(L}Rb(9ft!u3{fNi1IRs&dEz>elP(m
z_`Rb(DN;bON-=?9iny>q;%NvuMO9?^m`1{s)M@EnGD(|72A_=5d{_HECT<a|bfZt&
zwS$7_$RS2m4xX7Zb|7Ys=1N&Ue7eOW6#G!<k@9XVBz^F^r1r{v!y}-Q^P#e1W0m$E
z7#kEg%+*K&`@DsRkSWq0Mukdo%874O*ydb^+PCyuD}3Zjr9t7!j&4@|PgC}71xzVM
zl7WoQLvlpRvSL-^OAbA*n!@$l_6X-DZY|t1YsxO-icD>c%dw!IMLidSzX}s>XBOk4
zil9|}wp4loJIArVZ9D^^=Lu8`p9*FsARzPW^av^@I1TH$Tq}76G*vy2xRwZkkTJGQ
zvBi@7GWeKkMTC(cjS}2ph}_43N5`Q)Qz}MLH7$f*rWYHvbNLr!x0wW-ihV!-tH=rL
z>Qo5<4?{C&X$Y}Ls=7d{Zz#)4Fv?jBj~-DtZmx6(XQP|!ZmCAYd@O%b?Y1t2bDx8+
zc#nTH^{&B+&VuOOgvdrEHsqE?tuPjmI>F5&4Ayy&2h<ePs8WL@5lApOetek8C}nX0
zy=Dn)^B6<=dgppoblc@)^dY@a%l)6^&N8Il)039b{t@?PsZ_nJm86)Tfk__qCYS4I
zNyQ8nW0b6ClDVD`k8Y1aGo2Kax9*ut>oF%9nypq(qG(3$&DBXQSD#kG1(X`<&6P4e
z^99cNg<fytW~$a?s-bQh^KtLGO5-~tB%e!pQNBXsO()B8PH_5%lam=ekqTX>`4Ch0
zj$>Bw>&Dx1oZu7gk1Dse9udMj=@#LoK0vKVzNpX)qeZ9~g)*eSg`rgeT&6LH*70R_
z$_k)s1)n1rbgt7>q#?3eJ0*J?&TFgkYRe{j4BITLz2(_D=2`vfiH`BXrYAd>@`r((
z+~2iQY-&C+(Xm)s*B_v%LsLzWIbd3Y=MH71F<$<WzuuJ5s%h~Zi_5R8pLxh$%jwZ-
z{m<Vb8P31Pe-SZ{r_}F$qWh>=GaiqRXj&6F`=Lz%KKAPuYAk2$^XwA5?{B4B0$uRA
zz@W)czo@~IkYMKZ$LCs3)-x_H>IQgsT8(VKrAGL5ejoS{5MP>%o&g9+fJKTby#u{!
z1jjK-sj6UTMGArnEl(s;P>vW&$C5ESK}x?s9*|ayyd_iJAWVW?KsL6kWwQPtEHvX7
zZM~<Wl}3+zi3d;UcVz@u-=-PxN7RJa>6BpGi4Rb)TzBVdR!0=&Wz^gh!^=0j<w15G
zLWPH?SAQ`oL#OuFbH5w!B8qJ+{AN%hEfjq_;AK<fXOY{0Fz>G)$V*mDm+@_;I&q<P
z2X(#&5bP~Ic+SiQiI2&pdFjjjI&Cj()rY?Dy!?Eo{q4mU#22MbdD%&|VOS*;p>wQH
z!x5@5IMMKZcx2i{ETA=N)-A8?)_daoo^H=A^)qad(Jh&Z-znS6N%bmXt;MKZhW3Ui
zrfJk|>Kkw?fV#yFS!Zr;iFje@eO^V@CHHl#CFn3XgVKL|w-N|XVBxkLqKYT9^xw`u
z`q_$XF)YZjU-hbYB31*E8^z?nVJcZ04g7~fP`#WF!+Ma~`5%Uh<<HIFp_AL{r@41V
zW1H{&04(C0$KIM~*yYWk(vvz7{vdi5D+>`I26#tATl=3r&BU@&Ga0-`2_QYaaA|oJ
zM}tIh-z1>hH+u>F04@xjRQkx06HOG3>V<`jejcw?9c6-h^%tapPr{J^HyRn&g^N!9
z1+aggIrfTQGs`xq{3TX2m4fH3fuKbqP=O0Q{s;XPv)tWn_G*~%P`s@*OD4=-RF7I0
zOLeTbMsJd0)yN`IYyG+8juHDc|2<OWUX3x+LrUM0&?1(@N~h><>M3Ex7#WGP{jGYe
z52jr84&G9!_2td9o5i{j+;`}k#Q^d7oYQ$)Qfic)H`+&Mb(7X&?D7=~c|aMYg(=eG
zv6VTP6y`2mHgj9Yt%B7{ucONVuU5}AJC+k>(St0N*rb*QYQ@v#g0WoJdUW<9@kl-*
zA&HZcLwN1`ZRf&Nd60VN4bitu^7(pkoEB6yM1$s!Jo>OXqBf7#iQ5OjvwDzx(P?-B
zRvvg%j_8#g*pbo!X>v4r2$#|X#IEhtsDbq8+QW;C^kThDCm}k=&Z@~#%!DOmS$h6`
zD)i+Xb_Lb5(WI435pm6Omd-RZt1sbr!ht}*^&zyn1VqPA_kR&L%b-*H+IdXc^`CzA
z<p4iGz`wR3(6WY~IHL<=C$Tau5XwLu$<Ujdn-@6CC?u~&P8KN!7`>0|Yk~yhDJ!37
zB}Fe`$ezMxFXg_{SxA!E8PO)`A!pM8Jx02fO~))Y*gzM$8r9N@jjrqa!lmgKt(`CU
zyD`$}{zCL>bQG)6hk~btnPG$H4+5b!c`;r3<PWo;x+&3%db>yOa&}&mI=@hgj&$*f
z(NrW9VXnj?aiNy)Mr4F^=7vX7jK3Dz)X<IvE?#ZDW;}-^Za=t^!q)#KX(^>UyZVli
z=S=2SpS+Iw<aRufTaT;T8W!LlibJ(Ht^(V9p-_^iNn(f+On`t4D?T>sB~6DegW&L@
zCFvI<v#q~h6N!dDOH-GdHuFb0>nicolYRy8Y93+{>%u?$S%74UNjZdauA+wiM3t};
zaozh{`gM)>xiY&%(%V%Q1e3L9?^Y@6%oTqRR1}9nsDPDL!qx~>jZ7+{e-sCC#O>-X
zHwMp#M846K=F*dEE53k#8v5niQMVzq0yceVasy<xjGRYkXziqx0@#fiz=(y?hlZsB
zJSG)lpgXpleSj;WQIxcsC8~&Vh-rTOq3&uf;z4p*dEB%+7TTqTti5_d?WD3anK@kj
z-2)5S^k71>jsPwH`)q_OxhfYAF<&8@QA{?BV`gI3twNwg_LWbzu~`DG?cpKS<rLYv
zK5~Dz*Kb7q!TP^MtC7dSnpsO$)n7g1KG`-<Dzax**OMYZ@93_&#$L(@W62KXMC8sp
zY{G?PJpIls*>ZEf82}z~Pt_Mnx^sX435z_qyr!1h%_P&Vt>7F}jW#yB3GUFqO(sDd
zjY;rF;yR32H<(TrYBUV4B0FMG#3fl$`cy@BFi4%D*abDjD%^@dCWB6JGeFWXS;(45
z%1)JZ0}ZuoN}#C9MWTwi@)sa{p?;0@sn7)=^B1(Gl%3}s%%VWnU<wYuB_Gtd&0`>}
zU{A}b69e4wq!`OtA+~$UT3R`|N_KnyDgTAqZOxX&Q<bcn{F_88m_zFuHm_%laoSzc
zSy_PQ2Wbkrg!;eWI0WkVz7$hux{6&+CL5X_@|m1Fu$>8?Kxb=$!}uwU#dC)ed!ZN1
zrsOII?%D;UqIxbLm%rBUSjT1aCP}(pvRViHE9oC@#tpqt3u0nui~8>g*XWhet>0Ja
zEZ@M7a3veEe}3H=-g(>mdQD9D0-DB0L>b0>>L=oTRa=FUNitPYY$f2feJxulS`PhK
zPsJX2WyPF14^@M?W=tx5nNBGY+rLAJds5{y;8qKNnBJ{z0@!KIr;oaT_?DiXL|bu8
ziId4bilQedrS-?_75=@kJ5L9?(M1;A=pQ-xn`={SwG#V;Go+eF{?0tv8TYI9Q^!BG
zol5HG7R`ll8Z?;3;+)i?liY%ITQSn5Uw4^U-(F7AGlpCVmF-uCeMAkNVwvvYshcld
zK6C2g8^Xk@vZNdc<~26EZHL{F8mavCO#Y+dB~l(5jJ5;+1tRN1DC!Mm8)dUhSxlEk
zc~%y7At~%&wX>8lthES&|L*a2V6~LyU4>4~orvQd6+|#R-X+^bw3<ZHZl7zO&r4Vb
zmIB(z{RCb*;Ji-#Kz&f7-}-P977yYvz1VBq=Q|5@u8Y$qejAbn$hS$!G#a#d4%B}Q
z@gSMt_nDK<>lLMzkZFCk*;(}kdIP2j#tg#k(QbWO8UY}cB}&G>>4Jvjgx9rT5A0T!
zqoAAoH5?pdrZAL-K>H5m2VRw=?|$wnbEkHo4pI<oVvUgBk~UBC9vEg1E!x0^rT$ii
zPY$H@Gki1dl;!X*VKy3FhfaldoojFBv%<tg?$U$E<b%0z;lz$>E*E%SO4D_F7`=Q4
z3FMa1y~p$1iW`NI!VawLS@S)buXZ(P9Z@Tr`VF^FsGgkl?Lrc>4hd)!#M?JZgkdQ=
zoCYlXB!0Z|{h1v4BpG69y$}BNB`Qq|#tr#MX?(;TVvV<D>v(*#%#jRyj<d``Esl&)
z2zm$<TrVl4)n9h!017ACSoCt0$?6cn@{f6nNqEa_b!$P6SUI0{4b~$tcm?03b|rc7
zriZvQpx6C+M^Kdd3te63<s;LU##3?dsjqfdcVAuJWF&+fI~2pwc6uN!Rx~B8;sxU~
zXhB{5T+~O`a6d3#Ni5CYG+x~Mipy8yBQXaFO$t-nNX#?bG1)9`Mnni4aE)=1!%zG+
zr8Q&_n2Y|n6w+kI@Jd=7O&>vHJeyfEf~8MoL15Yf$M-6$PA5rfv=bT&Y?re|OAydB
z1t!d@8Z5CA>1tfb<9MjnA28~gTp4P?gC7&(n{6ah_17&hZ|h`46~B!qTwKLxdBZxb
zHR084`Rqv|tMvnec7cm2e2Ds8DA!h7J<In{6`9f1bRfYAOcL44JSOuVB+p19b95y1
zuc_#e%RCf}AJaL)uCNA9cDX9USR^Ccb-r)5bsIO+=TjRDmTkNNQaVV3G#VBs`3}v(
zzTuvQMG?PSk}N%?y&UU2ddh22dHP0+O2cs`Gj6~920-CE<4s<}xc~-VTDAm*W^}lM
z11ar0+~fy(ui3C_hMPLS_^XZYMB|E;zsjwN(7fmw{fmq^#_)IIA`RczkD+=i>q>DT
z1_j&v*67wskJYUF74Ug<_lO&L@%Q0$<Ba)u+Sx8%EByIPuzS7Vu}N_v2hx#xnfE||
zE(qZn@AM!XvXr=q;4m7cxNB{v*~Ynrz_;euVx07gDShh#WdaGliS-eEMRi0Lna=p2
zP`d;-qt=&aHc%WEwaEs$c=frbY`AeNH8KI6vp%!h7j1LX+HJ41T{^kc%FKLOL(|nW
zDc#M53)fTzv_o&T1A6A_hjqdrTUv>e0oC}d%8&a=U1s(>AClPefW5yIbd^mJf*Egq
zumCKXMJu`qP$-v&EJSaO-y@f2*u%SB-sBN=j!J<Vx~WpdM8;lWv}M6m8NxOBw8eCr
ztGJb$DY1(0kvfm&x$NRoV*oKQd#uj3`(RHX(0@~-Vg;b0Ku?jcZrZMpg^$KHSXV9i
z?n^Q$LB=>G?@@D5unp5y&c~f$!*-(USTWVV0glT{`Nrw?k>UVt?P&Zex$GreO?1ZX
z<+atHS2wWm?ctfPt_qE;Xq};DtVuozot4RfbLlHgA=!}Bc#mDuoJ=%XrpD2EG#ora
zFX9Lvb(|U5&GuxL+q3JFnKVkv77RkA;jr35Wm`8aRjINJz}~9&m;3AsnYA{<FN=)b
z_w8pF_hlqM^HFD#ravm1_}jg<(1=<_bLdFrXv7!WevA7+6PzfYm)1IbS5Twl@}}ft
zu-MaQ6<5ZLC!U2UpG;SJgq?(7O}y)$r7v<7u$=a$$IPQxfh3vF8#>x65c_9OEAu5K
zMT&BD<)fbHne;x2136_v8M1KF+Y7zX8XEVFOj-O1Poz#Q=c=kbrSZLkjrrIL?v?0C
zXa)H^8(cUF6A|rt6F`A%nNuu+1D+_aXFp47L!8ONWy+M(Hhr4$jYYb4l(55}zq=Uv
z_+=<tdw=%mU6VIuZkLrQ?y9iQFS{EEFU}qNQsDS@kGxV+pyN1%TOL)y<;uBO$fLf_
zr-sJBN~72H7+=R<q&pXhWWf^ZBbkZ7r+UN3G;b#Zf0)N~2SumH{@e}QXRn3{Kyhg4
zUua**BkZ6DIFF9!IdLl{Z-77%D`%7ubU`=J9t2rfLNmX@*GL|vVS}$@sYTf}|2O6F
zcv9tbil?3)y~oM~5!^sR$rPx-BmjhuAfAjffWk+Rh)-C)A3-WH={O8st|ddwd9CSK
zQ0Y653B8v^rHP>2uX*m=vq9(xy!N4XP$I)s+lIj(z+MB*3SpD=T8nkk85NZmBfeT{
zV;9<im@=;fonzE}kGUt-z1CJfgs+_hVrDczZ6R$s%#1RPJBGk)C2b7A*c8oq8;X;u
zg!+_2K<LsAa3@h*u_hosL`Yt@wJ4d^TD`!bh=m^mSvv-{HpFnkr{^REm@m)c2cVum
z?u^CQ+0=G9)aR3|wRpI&k6lt1U$D+-^*N#&-<KC&5hTH{Y+hoW@PXiDNme;-A3)r`
zwQQvSG)$s{ZhEZwJIlo?5vL(9C4Q2p$!Lq%D*g8iR!$XNR!i3%E5#DYbayTZ7_VoW
zafM0&MN6)Ze1=vNjnbl>2gh{}oyw8JTTrq~$60h-7Dp_#Iv$RW0TDiDc+?pghNj9f
zZQ^0o4rH%;z|!vq*||8+^gY3BGe0TPh!LqLy5Fi4TZmfOt<NI_wSuV>U%vtUp%utD
z?}{wfE~M<U$q~-pZ!8dB1}2uu^ApFfo$NFbYz@1+qTCZR=Gi#<K?E#Wa&tq$vA&M?
z=V?vA(lv2(&4o*2FvwRVkbOWzk<`hio!neU^dQr5a+aMwE=*oOwlX?Um)lakD6U7@
z+*={OSWnzAu{<9k;BS1he#zDZ=EC0fstq+Q>=1JTIu5VETE}K!&4j)ZZBEt+H!5g!
z>14{qm<H*%CWmdZ8UY#+-S;bSUy-sOpL%A3gXa;xbySvj*r;AfNe!7+G~{ach*&R-
z;Ie*BUu<VF8NXt0M|2t8`&$cPW4pv*3G?u$+WTUS{R6?*gTAbE^CfIUrg*s-_=C;&
zH92l1N}N+W6yXJ&7Y;#P@LrO*tZlgWBDzLaS7+PUs@&DCgxK_U@;+Fu3op}l4x#og
zqIN+Q*&RD2#H+(HXPFjkknM8@h<2cm3~sCTP^>a`NPay1^YcC}9qZ$v!#nOK)q94p
zC~FQal~43G#<>`?p^USwy#=5Lx0UKOF4;8Gy`>{X7adJRnH?*`>Uv6@yK|R6m{Dn>
zkhH5^rdag^x4vhs>*Ssxv%NUx=r?9J9jF6IQ@(ROD{hd}MJqu)qg=eXUEVf;G!HfS
zRkl>1*^AJ0$$7aEG5EC2SJsSrqOrtG2SPt7T$fI0<MJ`{NeJX1+CQ+eEw2NFCP84^
ziUiRXX8a0ffXLuPJ)M51;Ehim{Aj>&Q{G>n?%nYKvf&P%x)mzm9&(q%*{O*kd<aVs
zav!e|hGT;E>Y-h*AD4upyhZ!btgKyCjNq)LeeRHq(j`Y#hA?YxnklR&xck&{%`7P<
z5w@jc&!5R*edul62W0wy+4f1elvb(l-_+YdpVd$_cvG0#%p=1|$1KzCQ*mc})|=a{
z&i!r+Pwe*HWNH7~f5<Mq_q#8=^G?)yzzyIJ|F=h_ULS%)0h_<5VlPN%IYq*3In<oZ
z&h71NY@p4`hn%A<Su-E3FJo@sczwUh(dWnhqfds!Xe@aH0cXoD75gy|J_1iUYZz%3
zQ<(lOk0maq4N6-^MbL|CkW7YGuCYVYUuwc&FQFKXE9v8ZnY~hW68jF)8b??%W>v|i
z{_iaUAa8*4*gOf9RKj#29ZO=Bw-KjjGfHAW{seZLqGQ>{AVCe4kVmTMwRWj4+J-I{
z;ffsOjkpQ^WBUjY!#b?9!Imio%4Xfdc6GYniU#NUp6W^4MUaO!`n(VrG>lyW)JwuT
z47Zsx`Lm`qleBn4M+EI5jNoo0LGy@8uT+Qlu0VFeI_x}|(Sr=&Jth-vN4CI1F)qhV
z%;i!c4)R%K-zVaw191(983^pOy`EvmA#%x@byPbJouB_^EA@TzNwm2$wvf`65*y&B
z)pz_$-AiNzZ*%NqYlR6Z$6ufu4cA@oH%8~5sWXu8M4Nt$yvf|4+o$DcbzpClmv=vM
zJg+N>eO-D?d&C#et*tidvB|XCNi6mVc<HoCgc_cOH2J*HbX~#|aS%4ZL!1pXRlUob
z^;Q#_y>D5NM$LHVta^1WcVN7OXr`TBW-W8*s+rdk1-~qFnblx-&+Cp7`ViPSSx^1W
z>H60Cb&D*88K_a$zH<sShlWo=b2~$_(@}ESrPyDWv>Xdh3VCDYpxP(-Z=130Yvn@H
z0~SS5z>mVO3<raCZ4(nfJOsLByJlst(0$|m;f^VV;bzu^SW0*qCk&fBv`{TaVNe7L
zIDi#57vtFYE7bLvgX>EM|9K~ddVvgDTIA3XmR?BfS^L*}R)64!N%6bE)qV1ZkoeDR
z%C{n;a|Ux?JG?9L_~q=<o~U0*J6Y0+_t0?;^Fw={`L!Dj9zESOA`zNdVp(S7!49nQ
z)suicoc_;u$%jPC7FiZ*8=;S$O`L_=DxOa5Okw=e{j&13`H|h{373l2X=b6g_X2Ao
zJ70JW3;kH;%WvsvQQ{^&kWXe-a2Js3cdl0OZ1_K3tkhSFI)@?m<}8E8PgD+5SF>9p
zYpg_Sj}BBtZG$HOxVN94D+uPx%T)j``2kBEzh~Nly5H1snan#K0&_ur%4#Lm9o-yh
z?4cdn;ToBCFrr%uUfGQaJU0aipBc0!i^wRnl-I2E(1SjGl_A1^-k{m#6`%Tp)K+@v
z+f%NubwZ;LM!nu>&&Y{rvEQHQ2<^u7K)w*D-kU?y633k+t9TuKJEEP1w^e*;0~Fqp
zlJ`*XPGBa}C+r;eG(DxJtqC5k-ow_`zICRxB$?aHDDawc*HTDHqyQ=2Y85Q+QgX@A
z3lw7~4Vk+h4B?uQZr-0Xw7B}(G>P0n?^j1!t>Is6mQ}{cyra(Vpj3Nrrip01@^Rrl
z%XFIbvBlo|hVaUY-5*hQw^v)F`!+Z<aTWxRT}8>x*Vpif?1=hdt&>F&+(L>wla>LT
z-SWt>N_21-s$6-FWCQZFJI}srvf-Sc#Jg$kl)kaFnUFDv3<oSWgU|Mm7__{!g?iWk
z_Loi-_Fb{gBzM$eA!XI)%B@9CxqL~&8MDq;sIJCbO$C2bTbbpmTzH<HJ=-MKRX}pL
zVtD{H%%<vl5fr#gf3%rLCgygU{<d^O1*QT<Bof2ov<+hk5tpg|<<ThXIM6)MGE|Cn
z`550{mLK)>B2powd`P^*>xJsM!)r&UG+Pz8Nis$+g9R3|E;^j*)-O&h9iMp3d0h!b
zvg#8ir4qqjWg;QCerhWCD~imhrL>j&ymfLRzC{qiSIuL*)QjedwPa}TlCAS?M(!Ev
zvyg8W7WoLl(a}=!I0*xLiPnQn^oitzC1{c3nn0+(V`b7Pa`%*j9@}yk(jZZ+{X>H}
ziuu(Zc?|Bc|3N>i-?)D{!J95p@#hUvs0*x5VvKA0w^~kLg}v5Z*B<>CtMO@x{p`_E
zZGcYYFZ%)Xxg;x|keod&EiDxbfr_#;8Y1Oh|6%~<&RzBzN=#inasU!*{RTu|zx3f7
z_4wt@ty9I?$)=R_fN$kJeJ0A>FD1^-g|Vl#3}1WPJmeH_)~<C=-lmkQN3G}VtdbGe
zxh56y3VvIqo=}8NJ!5dFFiqIVRyNOitC!3&=<IY%HT2~oWSn&Ol6GQg+$zUl0h8!C
z(H)5%_v_^i?4%G%cAk(&cB%3NvArAoS|geF!jrYiN2deDcc{*fOdF!Z&6YiC==xw=
zY)(;f_2Nj)VvReOKUA8x4+T>&<>LW&-&5}L+}60%q+OKqV6hr9FIh7so;bPnuZOW>
zbLn|qT8-Alzse^q*_vk#Jk!h~Ft2JTY`Q!pyo8(p0$Rq<M-BiDUaLx`a+8zJCKlZX
z?+_`|0z&XzyBC?eP`&Wx6{Q<KsijSKUCF8*gm7@I4m<r$x!?au=i-xe<wQh4UdRyN
z|4!VUHn=YT)bXuwuw#gI7Tu1R_WgdThQnl2G(db6H!t(dsH4sAv$o%h@vGseQh|_y
zDyg=yIuyiE9t5Q~t8YnXsEfUDjeJUiQ6VV4v<QHB`M9*SORlblSh;Jiw1z-CLURez
zALuCr8fOkx_s{QZ6h0y`t}RkR@%Fprvtx^;)nk<->)Fb&%|nm@be5a`96~w5XVNSw
zXsY^fHNNRUyQ%aB-z#^O$gPc?)CXFB<U@5?=Rv;_$BHS<mb6xS)<r?!AjPWJy{xwI
z_j;gw?JcKp?We{=KnjWV@^z+BI4qsgY;I7OW$2kiCf9IzvQ>sN0Yi*9IGDGZBa@X^
zpkc6zPqTGF|7o0A=HRot!<XdJGauz7n-$ria3@V&dQh>&y+OdIQK${9I<iy&+lZ4#
zp5>|HwuIhEoOY<S@9a_r56xf)0$qAW+esG`tQGD>G`20T^<>p8M!Idtp4$f>U_`?%
zHr=|(S^FCkxExaLw5n}{<P~&4lAIS>I5s4`27l~3MuMCL((NntXEqiHyvo9Or+}J}
z!dYZE8UX9_SuuUa$q|oI>SBH8T!jjkx=A~Et`(1crYN@x2tkpL$O@;GneFqC?2K&J
z4y0QgoVZ2M5qAdt(41{aI(y)R3!T<EyV!}PCn$+&ltj8u_QeaGN9lKvj2iGR^snG^
zYBJUen~R@O!k)VqU1U3?R#hAO^Je1H0;!hJZxr;DbaR4F^Jm>6o2XPqNvf@;f;Ej3
z9U@Cu^YYVyTF-bWVlwqC=H$S2Di5PabF|Nrc(8tscGOZq#*gIbWo6<6O(#F)=SGHC
zJ{eL&u;NQqnFCWl;K&k>gmZGg|IMF4AWYpYUsWI^tFj?GTuMbHuArYSdwXqkZIz{L
z%D=I=S3eqgp$@%T6o$AHb-{0rVY83@`)RWZUoc!Wy%q<SK(#P9Cg-UhwNc9C5m439
zaS}OQ&f<a-r(q8!%m+Z#t@7Z<joi|jFynN6Xy9Sc4tSsF8X5N+Jk-@7NI!g%+VM2X
z++~AWqAIq_q2@fO%9z`Nm?-D~I)wjWX{5@a2|jq;S{Xi(*|H3a2GnGfnxoM2rJMTa
z2fOxEqZs||l71}@|Co28z^DpN0gBRRcm3Ld^%jFv53;e8*Udm_M9KLApcvUUd7I=9
zNt5b`n=EBY`B@8v;tbG)nnR$M((v_7j(Vuq4IP{^*6(siIYF+;9PqkMi95ZH7l8|H
zjmGA*$f@Ddu1^8|=d^BXYi5fWv|REsb9-2CJL=KuK6};xKoiS3FQbqX7DpQ1WjA+(
zJc}Ni8h!6%u+z<`w))uQ7#+ovb-=WtZi&#$V?fg_m~UW(9&@o=@OKfNTD*?Cfd<D|
zBR-^uW|oI6pHUmtj#33>ryyT=j`hUBvjTO0R(en0JD_pYU$hhZE_hOo3w)~a+EYn1
z=YjCSGnBgPljMgu(9`!sU!4Ok7HD-5(i2OVb+aku<IxI-BK4*ow~0S~%qJ&&mW2S>
zb#>t2y;@k+qkxO$Wv}m9taKDu`d@>(ym#{zR2IAj$*HL}zU$2RYO2^9zpEiJe;l|e
z@H;E88M#-Zwx7K-qcb-IVnT~p3+k)}$?NHv!L|yV_oVC2muCJ<ChdUG79Wlutq`TF
z&b{iFZfmnx;MKe9YE=6Co4x^!1@~TPuU=zUo_`|{;>MVN|AX~qH9r2yXwZM4@67Ax
z<yoY+YUMlm8^qbfzB|PEeBqg9qNJ6+UZq$35t=LA1Y%8(-36lVEfgQ4)|-Vj{&-D9
zI-*9;2dT^jks<{xT#on=os4o**sc)t^p*+1(S<7FS}#i%;eJh21zz%B<!fGRA=5fZ
z8jpfs$lk=z8DdPImT?}mt6PeHs9&d^14)8x->!?37S|u^>k?_tLchiQJZA&Fq%HBE
z)N0dUmIKo6NfXrTlm5HD%Y(XiU)>@;^q=UaXZ}c@VNzrrDn`wPMb3`t45=t$1$OHr
z{tpgM#_kSXIe+%r!0oH?duLOL^D_-Y0&T3oN1Le}B)6Wpln@2pngCJ&^!_)#0-~e}
z?Ent9zVDJY`Q=`f1lc8=&S5a<?k9*qWA{Zg$QwOVNE?rc-vwDC$c5f|#UC+Kk))CJ
z*S9rpHQ+KaJl$^Q%2H_*XXoS2080Vbls<pmq#oJ`1M^HQXGR7GMcD14y3u0@)QC+g
zEppnAvmzusYan>MGnhLV1v;agvp`)vivpm27DmYj0Af1hr0z5z)0#|i@JM)zdf}dn
z`iyll6Q+yNR<bE4I;kB)S#xUC)Bpxd16r(I;1X4^7Ws+KwN7~&uYU1+R>g$d$yz8u
zP&M^53fED1Eg)n&=0oo^m=cqwDC|4PTI$d(kras@k^Qp5e8S~z<?kUc<pLTgx)1TW
z7l8|zRwQx57_o*+^@qVpamALo{r-B{7J`chPI%QJ5IwFAE1QSJ=1yYq>}lDj>R+@G
z&Nopm<L<fFKR&yKqSIkJ1GO7X<sm7Wny=kKpqW1|FF%3NuQ-t%+!tbdCK639eDJjX
z3d}TmgFGaU1RuAO{l0?bSO5myOz9iWrc;pG@)Y-f%p(LGEyZHVtZ9V>z*+hg=*iR1
z3GjXpzCWK-TIHEYYmZHPIRsW@Sa~jqja~zu1)cV3*+sEiNXSDr=}6UnaOM3Lq;`G#
zhC4iI(!nM+?J1#O$?U(^zWu*te!^lNwN`!7(Qd7klI$1;of%LR>+ApW|M6?c-A=|E
zkPy2`<{h5DXu7BpJ1Yw*u3VT~+Ny>-=+f9m5eU@0tGrSyw>r#jd&#LQ+Jd^>w8Q6y
z%_LbdHE~*KW366`_m&4vE80m<#m@HW*xY`myL#n3RoZeA?ouW|&15MROxo?7Q&Rps
zy5*x>j|kJZb|iqht_b;#2A>sQtc3<SsAka17h8<(8<mLlm86xinvdF)7UdLpC0g9q
z<aF2`qjx3hlpB=HDudkjRK`{ZbA%POdTg_BYf$UDKSwxhXi9M|Cs+p(HcN9%msUCa
zWY^}DSx{D#PCgKQ8BA|n?Oy2nDrJ-770JW40fNH*yXxBZS%-#O01IE8&DWn`C!#cY
zRZ3fB+raHPf<&||cwc10$FWTG23p%=Sl^L<cQHp6hTCQE0WZVgHaq^n#mGp=0v@hf
zvup4Z1AC-eZFGlOeBQ!UF2>|ERD#G1KnQI<>^qt67CWhxIIc_rL9}-$v}hPZyGkP$
zGJGXthJ@1HzM<yy9IP{sMp6Ee<)onH>ccFLtVvVOJAwodT~vg(ky;RBSYT(~%+;ut
zTy@~~w4fFgWZg=Im|01y2CRdfVeuWXcsaq@!51Zy$~u0)k_Y>^bx7@F=D>P8CXS$R
z{Eq_&P8od(DWsgn2AR^*EL%|rFQ_z@ti!y3^eln>ps;ygm2Mfd%-+a<UKx1*)YSg4
z6@B8FY2w!xz!~W8LF@f)fyIXa$}B!OB)oMO**z|TC;iMnUHdn$>|+n*BjV;Q>*=R5
z`8Z<O4O`9(J@un4vAJkRv;l%rz<o{v<UWr^ThzT$FwK>yn^^2Vqh|>eq}@O_7W#UO
z0YR2U8dCJ2RX3KtylONqL(4H8kJ(cLRm~kVB;_ODA_+~p@z6@yrB{hP-yrN#gC8S0
zsXakG(+Ad@jLXD5pnyS_ry&({%SZfFT`$1`rkItuIn{R?^jGgTDj-|u#;s$W&7V(k
zD{CxodwJubNSPE`2@<+xueE~Ct9AOp%aih$Vc0HoNEIL1f9QNupoKaa#N2bve;2%R
zFZv#DlcP{cS{qs`&tHq=I3prSB;66vq96^na+F{hJWED19iGX^Li-9isfkb0IoJHi
zz1K(?Uoq!Q$U?&JlS+vc*&bsI>}>XT%pv80rle681GwSC1lJO`U>)`%GnpqP*hGM&
zxI7UdVJc{l@jQ#N1~$y?e!9_CkPV30+<HNzxAT0%LeFvS=c>V~>NW&+lnrdZt;M1_
z2HNe?FuN$|4-+$^<&6`ad=sK;*!{zV?4)}|WgUs6r+Cwn+!^6(#CT**o;v!HExNoe
zWDy3oP8IA1H=X&J^}?H++gCz?>@g>)8)>pw8(S+j)jNo~JY~9X;;xn$A#YE7Y;^hJ
zBuPr#WX=b_MzrJ=`?S|IvR@my5OY>fk)UFh-Ofa9S>BHh>P*wox8U#JV)80?(WWN*
za$PI;^Uw6{q|r6di2!nlAz_TS>Qa?vTOH9x8>Q!01a7DW#Ny(9PQQjW-zR^pN)*N6
z$J5Lc{Bn2$c8<i26oUf@QWZW=+gWeIM>jtetgCW6GJ2UN_FgU{j5%y?oFC?Kw_k>4
z4s08etSzCf9}WpAA&18B8*|oW*ta$qSu2j#AoP3oYl-T<aFFQ42vRRM%UB^+TV>IS
zuu@;CzxZ}V{u%+t#F2L`7o89MpI;GOo3C=hq`;BsHI8FXo)8UkBc(69XiizjOkCxP
zkMSK4Y{MrH2m9}<_Kw!JuFexejc{n8VA_h7JM6CXb>Yf+kVHX*w(cet;Q((KF;M11
z95T?!0H=^RQMG|SM9!ks(yraw=;vzj3kqdx=jh^btaU$0-EPY(&Yp%Kw&u?74HyoX
zSZkF&;xE(f$yE&!p53}tnx4?fb?mM6xq=ijNHM=!RiVJYH$7vd;Nr2&5>`0RDoupK
zEOAhy89vm_8+*|P$<E%u^XIJ3L*t%NwlaBpS&uG^{rH6RcH`m^y?4&7W9M6q%N{v4
zR$1+_aE@7hr$a?6(ftvLk&OFZMi+_gS+4^9kA?hOA_sJKNKC-cD5rR0%=#Ux$5)ru
za_L)sP|M};9HGjbIv~_Ax1XxF8xOrXJK_g*?@5(yq@Q<fkXk71mnPb!JVRXYe`c=w
z#W>(hu2V8%@uzBZciPlELQa37mwc&UGv_FctiPo&j!@aAOQ~M|WRT#ZV18^jlo!$}
zpmC96qse3Pgt>zQ|1>~{qtmB`Mn$Q2w^PTtOLp3KTJwY?@e@24i^7nJsD3KVoRs#I
zk~O+{>ar(R7uFQqH2y6BMEtJSBrErLRED;n8hH<p7FK=Sz$CMGU}zsqCot3eEm=e{
z^Ry+xu5B~w!8O_Ufwe=*X4h`l1wCiIYVt*Yx{4N4*#l8$R8S%QM1MP5Ur8UIxDZnM
zx%&d(w$E{DvM8ZU1_2}NJo5NGMqy{_sX_V9kZUioWVnptRmQZT0~y~ZMk4lmf{CJh
z5nV8@aFYb$Go%3WZ@I@;BaKj#?A!w?70o1T<u$DUOh+!57VZth_e@<RwK4uCO{<G-
zdZJnNt@=)n4N8Uu3Z@n~jLH0UTjbtyF>leIdqhyil1)EJ>0W!>M7MW2^-v`60rEh|
z%=7z=^VMBrN8v*MIUb(OWCr@MWTrKl;Pas;2Ue=bN%iekFO}rYa0zSWwvn-kmf3=p
z`ms+fT{d&YVb-yemA&{DJiA~u^p2J9BoK5`X?&3Wb_<fXq4>K_&crw42MOycTm6WH
zYk}<w;|nL>eS@kB;WD)@Z{J{oTvs~&WZWY8%BY&$>}5~l(=j$E*O_=J8QWNEp$A-&
zYX&iP<pdMl@QFQnH0aah!L_~VtytbG+x~Q*1wg=Cu<3@DoCPC~Kb8&ca$elwlTE#u
z;*ztKLg~MEVn*6M2FQHs1Y^C4Yo-_YfNd{9?KvVWj-nIP3rPqYzvlW|vVwPYpoHgX
z?`}SAmOEtg7c(J<IzGyGpHO`QHuIHvW6c~~im%Hz|G<2BBek&+W-0|U0=0XB7WwM#
z&#$|D#Rs{3{o0LAZyUDQ$OOiS88uPuGC{g;YcR(FZ^47q;(5uNLbndmXiNY<eog}^
z2+r6|=#h$e6D$p?)}(27QDzb2X~9=mVH$@_7rvt64yi%{S&^D%5W>QTxgIM(ENN&l
zeYIc`8CNvIVlLbUvr>b+S6|ai6_IUdt|0Rs;Re>S0W`c~Lv<PKTU|dABlCJ=%;P2h
zg3`@RySL866Sc|MwFNLRS{>UeT~-YwP{rs(u==r-@6rKDc4=!I9@7=EGgr{*Hj{WU
zH1{3M_?px+I{H%bwS5<37;MVKymj*b`XDCkZ-W05`s6sP;rjwr#Z!-k(dEz;u)!Hz
zPjlw*Gfh98`n7e@F=9A@<h&2|oXK$)9co4eA&EYQrG9Z~Eo1Xd_x`DB^gUvSYAgQR
z-#R=~zYu9lrw`&BpKFhs+T^!J)D1Kmr3YHzeUawrUF3?FF%X^NHQfkWc<#MzpNdgM
z9dmJ!*5SD>*e~lkLJG<KZVF!-7K7X`IM;LTeT)1L-|ytxRi7!RcI^{|NAdLHsO`3{
z9xSVA-#z?P(YY{F)4mu&hiSGG8pvW64f5IIPSMMJRdP*U;k&W58AyQ3Km24oSA={g
z;tbo0s2*I!Ole8iCY^B2#_FF8Q{C_|(XhiY!<J^pPsh-&`QCll4XAHHikkl32P`dg
z%0dmUdoAym<!Jt}Qnhw7TsnO@>_M$jF41KEKVf-&TbjIU7b{|t4+0q&k3J2l|F%b(
z(o7J4m?c2&z9Kg&z-MqMf<Z?#jyGtY9zomsz^m3{*^Q!0;aFfV&R3&K1>y#7zg(`U
zi}mi^iqxk3=))BGuys28-?NrUpmJHr(e>8>4X|?&tP79ZHD)O>dM!|%SYWR3#6pj~
zmdS2clfmCu`LtsGjVAuUKBLHP&KbZ$3dN{L!!23amy-lO55;xg^?$v#>gAar1T59S
z`JC>VcOaQ&kr0sDgHZ5*WifMl_O;WXgI4SvtgF-KQ<}vO>z0<n{PnW``{BPX%zllT
z-)8cbQv(KkQHX)sv@pWT?&E?E3^}S*QMa@&8nQUKb@~ev9GYej$TLO*HRYR7m+`3_
zqiakJ2en~tIVP+~c_FXaE(v(`EXn8Yl3?6b5bD{6@NaCjqpynv%dd+sNZLtsQTvRM
z*M++2#IQof!D}&ZvD0HObbyCcX#j9XBu3#3c;K$VT+*QO4iT#?G+;pbvEhO$?hqas
zAwJL=Py$(*E7zx5zYXkngmA7!LeIZ+1FWWHkUarIJh@T=vDq+gWKlt0hqVq@!n$!F
zp6c;+-iF)Bw_k+}c;q*?fFqHH`Y{T)!wD^A)fv*+!<*BNua)!~!TmTZxR6TjMx#wc
zM%v#~o`u-h%6T!%VkrYPU&Qx!$Y*m-2l8btC4MtU&G5tPCH`uO6e=y=ySnUeO2eBw
zrm4YZnUh+9G?^{w*E2$pLV}d)>J5Ugy6k2t<Yt7boM+!l8Y+aH8?zy=h`xQCm#a};
z&KU-az2M&U;xm+NLuS7UX&|BpD}a1u`hX)P=q9KxRRb$l0et7DfHZqdNI`X`w1`Re
zn<89szwvMP59j$YeKB^>E~52HQ#$ug+lA_Wp}l2*D(!bm4Q82A@yPK;hjAsy+)4Uu
zJZc|R8ifvN!Ge)S-nARW+jPde@YR^et8WE8RMfu@L{K)^{2R!H$7qnVE^n?_CGUa0
zUSsv6p)Y0f3H!wl^==^}KIP<GJDVh@@}HdOxtq|g!vOUlD7C-Z<XZ;jYVN4bkmN%H
z7L7{H3XfUFIuYaqASInC+Eqwgppi09@yXa?^5{tdMS)%;Dv^QukjF#QS!k_8>ri8!
ziv`!fOu;7Q_N*|&_d7NHt~N^dDZ<%Jl`P9WmIkAz(iBK%&1fhC(dWJQY%p#Aq>m1E
zhBsP8nt$;m<&g0zgRoOYu&7G{#b6TQmt4&ASqI)5sGH+c=Sxwll>XD4lOBrksjw0n
zl&qyiLNff(gj=FN4QfvGVw($gO=UYd@W8}f^x<^7yylH(hr==Zfg(>=oC}{IT}7>|
z3_r-ALfm=_WZW{1YzMat32b_%y06ejt4DTN>IBKtzcY_x;rhDoC+)pk^lKKt<pDw-
z>o=}GJ92}wSjGVV+7A7_23l)(3!4wUtPHQOk@<#c{-m1VKm_tIBw9--*wn@WAHK`<
zqGond;-_NwWyryV>c9gxE4q*}3gr#ISnf-N<{5Md&k6$|uUm6urd<LJl<jY5NG`Qq
zccY^&(&oPnPF{|@rYmcUJkm!wvvZi*69xUx221@Eo#=dCYr#Qmntn(?^9d%v_bxf}
zIJNA&<Q@bzoGX)3vloV$ND6E)`9=zx85Z|I?4MwW^hk3=nV`#!z9V%we=3X!?Z{Q8
zJ+`?z8=*P8uH)+$aks;$ehatAA4Y8<Etx(h3^l%97@Z~Zoj1M|fS{ilpe+-rDfJ{b
zg*Wp2@(TN+baUAJt(6`H(~?iqw*tWc0TJli46CZ&gk81sqlsW@Del*dAJ%!OP$Vj7
zx!1~mL?M_9XZI6Xj0U;dT;08+)o?p3n(&U7T3h|4E>OF+<TfU|^`R#(#A_FB0hgu0
zPa#=9MOoeN#DLdVn`x)Hy1LuVeOrV@_hw^_3yoYlas-c&EhLNsprja9{7E710mmMo
zu^KTM5GrvVdJnU^*DtE&2S+{<^tvIdDtf{Y-}A;2+{<ueI-{J@P1I+Lp!5OZELJhr
z*Mbb!S5MYUyMUB}FH@_;C3lXd_fGNOr$3A}4A~dZ#?j|&9qff4i20pq9IjNEGpyaQ
z<RrdY$sgiv0Tz7Se~fo&B8B&3_icO~Qn+{tH)m7x1?Y7R{_Xt4>bX0B2Lto0GI8PE
z^^?c!C*t!n%N1*hJy<#GSr}bb_q*8~c?oN1Sl!4ov}vy^XZ9ijnNmMd@V<+D0fCg-
z_%Q7R(}wBQwSO)t+guspuU3Z0-^pNgAX5fOFPIzeG8vc0W!|znnxkUcvh-(iRXs^x
z`ReRX?TL{a?J*Rn%y3`aNK|J9Iz7G=%8Y@2yYD=_cxiQ&KTy>ONsKa~m$0&{#V<Sa
zemH-w(u0EIklQ7Y)8ZfK63QDGFvBW6nb5XA@<Fd(Gx4U#@Y^8D+Xau$3`>{=?9gyJ
zGkK9so|kIMqdo6Bh_%|O6cr|;s;`paFkbZ%AV{)>$HJJ_sXogS!&i|*OBKWzSv2gH
zkIP}d#r-|SC?HS=f3YEf$~UmumH6FCl3>H4vaX~|SJEsy(eCB!cfFEF4*hbLyOsFe
z<+QXbX{UqqSv|JQQ133-x@=-{9tbt12nG2g^`<Np3$=Gz3c@#OYk(DNZvPJbC$`0a
z^N{d0h*paF*P*0yHdB1IXMdV}5W8jVn7d!JP<z1%syoIkq4*t(#F_;0sSdv%E&3+r
zTUqmS2R-L3b(cp?-p#<Bi<%sFusDNIB@~U7wx5o$<0V}2vw(*)dTT8s!^Wpb``AXc
ze08Hv0voLO3ZT@Af!E4r;S_gP36GQh%iP{wLA5zQ=^VefZ|@q0Wy_}%d|Go{{@|}3
z3Nv&lBVT{k(J$qzU(U>yuLPZZ#lG8|=aU%if3GnMByb)8*LO(=G)<x=vbr+)Qm5HQ
zAs-^`)w(Ljt?7HFu2D4mg2g#v6<4+TU1ulfhnMuO5+aB-n^&-Iu{hKUXI&Mv`8{>o
z0Ci3H+qa(EW0G(2?Wc6Lz4syL*MEqooAVZCW^SEd^ZR)yZr-@lE6N{85arzJE=Uv+
zzpUgfLSlXdsto&^z=8F1r$h%OT<@q>{!EUZ8-eeSKHWpG2Y*WkYTU}~S;5nF^}FhW
zcaj%RA2au4jhTXkM|!YD4u>>nc6;XRWA&+p?1HQ;HP$+4o()+Mxii~870s+ag$2c$
z#e1a3iMQvsv7Z<%1gf8M#@HrmBlD&Ic<tVbD=kf;92?D0&pIk1m5Madke~4Kuq#L0
zJvTnoko?h*8))$$MfuH(1r*L2BGw;;WH=B2`m(<P&WW*d;~PGf*Ni&#OQj~pQv7W&
zXh$pBylv97<i5FE_5ZP$rt(Tfk{)dJq(-4I9g!VpEF{4^$Fsm=HMWu`&gZ-GwGhQw
zIt!XTH`3^ny1ptD3G&K_G1J9qw(~}ZTv?IZF);tE*hU4so;yhBO8ZWPoXdSJrWy(V
zVvd8XIX-2b9EYCM2`v=koB;PZS5;H}H1OH*k*KB!nGO_cg=e-$1CFBmr~Y4XIxIBb
z8x|2M)Z@tbTEWXO2h0w3LESv!$J=$Z&yE6`Sx)W6*j3uxOw&}0wQ__?KIVVy0gFQZ
zd#+QHlg$6R>sik|$%TRFpI{j#eS3##jONVWr^H$mfku^QHBsJZp4gmGtCX;d>rzaO
z_TLa!RLL*!;LvK^2OH2ov&<R`$kPV(;~dyc&T|cPJD{~LnWArcN;|au3l{MrP#~d<
zY8Ie)h?TFqeZfpElq$(0;M9NH1g=U~gY5lWnqufY-{50D&m5!unDzx?2%^+&_LW;!
z)e3Rl`JI5pq17UWEH-&J9+-=wq?6QN-ldg}5&KM(-2yq2br5cc_~dDm2Wf$}sxNv<
zQ$Ly7ygf6q>r}=TMnHWYNpbb)b0};C2Qg;!Zsc{3ef2dJ5TSC`$lBtgO(V4&k;iWg
z{n{rM8BoOHrESx!L->Dvi6bqId{YBciwmFJ#Z4c{;0v1G6D}Ql2~Fo9`6TaM*_UFA
z`Q<{w@|&B^lCs)Lz!%yoyq6SNBc@`omeDc|u`*Yp*wiS60cM<QWLSmV`uejX4<U!5
zuS5f>i*_XwzqWIF@I8AWUwaBfQr&VYK&n5Jt^_l-$7BS}<hN1L&QliB*V)wh31-9b
z4x?3%132G`^Ro;^uZ*yd>}rFkR1_mCZD4n`|B=7d9i^JyCB#{)<j5u@)}H02OVzBF
z_m&dbg2w&|aRpqS(MXH$Dhh~-Vt$4H?n$dAgHD5fBLbIDdKiNeB*hR|7gENxF<Ku=
z@Q8h)k5_mzo8cCXh>I=E3|Zoa`+2wUB3LVjm9w-cPo!(L)1TaL-Zl}Uync(QlMfSz
zFit}csJa!I52Jqk3`<U+1|*{L95pxcd_e0e@?d?`-Lo2;i(`Rqzd-%fI7p^x*JqU|
z9wf|ef%v?LQvVoD+>Km>gQgrsKmQGXY_p56oc=lbOxv(IxA(uJRU<Oji^R^fC$!N%
zow@eZ-Y{zrk-YDW12E*D+qwN$Dqj<wJ8-!2a=^KL*D9X|!UKm|ym<F&sDE@nExUVn
zJeq2uV#w*B{GT5^e)sM)R&mM|3*Oz5BRLONV?7Z~x~9k`5#__l>6GsgBP8zjV$fn{
zky=Jsy0S70j-HofY;8SAG8vPOQ*hotP}L<VNEf`wdW~FtcKmWTr+X~@KR#bBuEtaw
zCB~B{F!|4V(IRNcI%e3h$tnwbo!~FbVr$o9e-r$kM3rUoSlBuya3;kV39F+rGNJ+)
zqYN{n0wPA#(6mrcg>jQO2LzK+0;MNVQi%5jBeU5hA|Lbm(tHgNzF;O$cL)^3UV(wO
z^gihay!mn5ByN}yJdP$h6sJHR0M^pEDjUF-?1nQ99YBfl*x%^tlPGTtfQG6^xj!6(
z%&cfc+UozcT>#Ni9M_M#L8(<g^afL{hD-*Nfh|?d(%R7X{>;{#uDmj~G$M9?#2V44
zFl9mDjOD457M4Y6W!h?M-@dgmt;*;Ge1%pPs3T=%PENa_i{mUS`?!CXp*^DH(+Ct)
zMxZjI3DiBoJEED4Vg+OW^*XKgh8IGQSle*qske@P^`BAIGpuXZT9x&3MZL=3Ep_s*
zWvZmFQDNm@SHbql)Fq`Fb!kbWpSR|7d05ofBvtYK@kALj&E=qoN3+B@Fa}`D-8SQi
z0n8?kK{*3}x}Yo%T7$TJ3gATm|1V$SkEpF~Jg|=&hFia^U>z=nyRU1BF&Cj<+Qs+b
zcV(Tubo0407X`*I>B`KU3{p(d2?B|K7$)WT<~?YZ@Dn|_2hC_iSenG*J+YiDapFU<
z1cj>CNRgQOx3hZ4JW7DTO>2ye|K4~c_%1Iw8R^9`nX(t`xbpqlwYQ+G{Sp-E8eH2R
z*CEO83UT5+Ar15nsCB1az%9bN2^+ek0Kr}KBGtWirL2Ko>Wi=;(Qq58Eu}Xcl*Az#
zaXqRL%|Q`*bowBoJp<{+yYZQ%n;Xk$LVzN&*mOo}i39BB%?65Lbevtp+7aAjn60i@
z+yn+Z{ciBvZwhR-o}5=j8Kp24?;8N+^Lga;(ox29lIJ4w>ZLoRS3jW%yylv~fNcA`
z>A5uHR)Tth^kR3QG+7t0^{Cqw?3Zk@tj|IvyDQzo!V#E}DnR0?Puj*GGL#K+dA-WA
zZk>gf#DYYT@Cpb#!(TnmcS<Hurs#%)Jhm+3G8>m7c7`C@=xoT(r#PjHDa*K@dKTcE
z;#uJ@3yWNcvb-u77(nlKOK?Y~RbZi-tR&y|c?W-!#Js+^LJ{Z%Bh0u#z}?tMvfSK-
znGac#F3GbyzS}bij2kOf@qYe+_JR7~fXv4#;3PyA<0f%5o2Lza4>qMv_XYvO+$?-i
zqX2B>?`+&yEynb>-E)T$g4wu9+$i!<hQi=-f87o)*1AB+l0t)_1owN5YcYmu@IJNw
zF-1pt+@G6kNhkZs6?nn>l$3AgcW9|ju`{(P!l7828j`wH;fToTmbY?PxnNCx!3@ul
z4oa3HzjI6Wi;K2`6`_Mtzq96`Oy@G6#H8?Lf#-h@`Tcz0vhcOiIZks#u{9s=c%I!3
zadufyDidU~WHz3R?=bWEW@y~Zha7y!X(j`V!_k4Iz$0TZ84=Lj1di$OQ#Fm!STHFO
z+`xkZ#wcU^P2RpeDVn@?%|!#pk{hB?Iuz7aq%jOVcy?VDAGR}ngKxgslCtH(`LF^~
z05XEGB|#d{hMzK*U2hXXj7$pM%(ECM{M}$)Y#}!Ods-3dK~!@DM4&1xp5(JaZjRLg
zLb)n#9hxN!W}=#CL9E9hkbVi-`<7lpWG9_ObAuUZs37$=jQ0u?8I#lrsDi(A0iR0l
zQ1o?I+&ZEEiJ@G^XxrU#wfg1|ZcUO93FLuoh6$3ZlG?lMjHHfYah1p&YrsZ|o`-$i
zQ5@m`{a@`lBT?$rkw0v{kk1c{UWrM~%JsfwHs>&UD<y-^ei!nNol^&(Ug<PzWuXN!
z<2*uK0t$X}2PY>JEf$@aVe&A&IGPVMbW~b=TZdLFC7I@cnj7(k=VFlqdB(~ed!t+G
z*d22!>slxPG~DN-<>g9}b$Dx3L0TDBQ4Va~SSO}s49>N%P)zHPxyD*UAqeU9o@LAG
z%t$Y$XUtbz160S70q)V`@y6c<bS%)wXieC*ftU!?YCG1#G|e)+q8|8YFehW-nr0bZ
zQI88u9%?d;12QOFqj7wOGN`TPU&Q@97XOoa*LECgh_;&D(WVXNpc=0}6FbbL@E-~T
zILm&Um9hgAu1$hF3KK&B)zkj$sLRQ*+1lD{=8>2PPK7tb=X5gmo)uAbwY9x**HJ}h
z_cA)a4AW4>0ixPp3~m-#+RT|<D_a^UIPoE(_!vLQH^pLIUz1Al<tJX27JaA)W{sg)
z0ZYV8dGWkv%H?3wth_vn<<X-8tm9-pl2iBUZaF|c#|(s9EUB5p2l%5)(vhh)^()Mg
zFEGH4)f2POW%EXU0YRYtIDs+{sL>aW{vl^L81g^P9~n&8fUWPpfjDq(TPnTOBcUwY
zz}6)|ZGH;^Hm7cSo*e5r^po`nUr%tXdO_p@(~ViU$X-uTI?#7Dmyez_xS`@+89>h;
z6Rj^cK47|_c?sdo?c)gCn3>=PjdGoiaGp~$IQA^y+2qtXc|cxx_N;|rF<9W<0}gs8
ztD@K4*|W_I(D`h7*bl**+O{~FKrL86ph&out#J)ThI!%VruzMIsB2nml5L!l&#U+?
zi6NlbOFPGsxyO%>j2K7yH*Qp``~Az0SgixfNt^U3gSpH7mscK~h#`v3k$B%>!|=1{
zi1O1zoSlz1asm?Lc%OayX?Rl{7`4C&O~lXG1U>30%0f{AdIxrUEd}a@QQ07RR(N`P
z_&v|apHbuL>v07YxPty_oYd>;(UVhK{S(gkty3q1XlL8XZ~+Z((1?8ulc^1t2AHfl
zT;gC@xM4y}E?F@}QfCA2-^negvNc%X;MRZY7nJWc{sn_oY-zB)Dh)P^80`7@ER2?g
zYi66}&4Zgyo+8(RXlrE^^j%!~eo<(4P>_e5oyyi?3_9|&H-YV%KcrYUIhX66Ow~z9
zYVQ8_5dT|sa&UnfiRT*YM~y_lqX0iZz`u24t3QZ`M8F$A8zjRL?C<wOG?<{3AE=nO
zRFUMBB%QM&%jGC{60gNi;uiA8&XG!*6iZj9cWCC`@upK~JN)1B2n)0PqvEmUjiI}F
zl!3q_x^XXN!Ms40HQw7xR8Kqhj_;dQ$r#2_UL+lw;f(c6ABm6Wv)#L&dCFNBo$f{-
zoERUz6ECtn<KhS`R096fQs8#UL!Pl@(}^a`iuu8NQiD@hv>r%Z`u~5)q4T{G<6PI7
z_AC$7nS2U5U1&x~OClW<9dq}>L+Z59y!(mDs2q4qHE`7&ZZ?-1+I`I{FKxpPH_-c~
zFU8kiyV+b2KRd{faa3g)rtJMxd{$OG&@DpIac@O7ZHw0FN6a}vVT>{;D~|xEAU+@6
zE-ct=_Sepp?O{!&&Zp*maZEM_i;Y%mRchL$br*Xn2dZM)^Su03o)rCr=ld^X%*_9i
zq8Uhf<$0pc<_B0|8R#K;WzhY(`{3obJ@=#Uvyv~Zn?OC~zTwQ%v!U{MA~v7wlZywe
zeQJyz(@Uskf<^bLM^tdeDjskl3Y>_1PLc085R1ntvA9}xAK4V!w;9wxn{KyqGh>t?
z9v6!yltG=rA^U-rkrswUt8MBSh~kh&bxLv)UsUViw^`yfre*t2@E`v!LAFq?HI-v6
zXtldxMYNjMgDkE(S^$Noxun9R7Q|?kGsOrF`FA0`m_uk2`atGD;xcpbrp5t^`o<k!
zZRx`!?Q<I&W9P9gqcIVg@&kp8reJzJJy?qLf|}l`#~I>safvmtmr?o;TBI#6!#)b>
zw=gYphfiTULMKmCKH?^E59eB5X}^U*mTke}V$y)yl}Z<yh`hHrx&M2+f*?jBCBIEp
z${n&HwNX=k&Dco3=DMn#@KyjYKxBa#_8EB^#P3d;SK}h=7u=sI1r9_}zb;*)n!~aL
z&Kks^KfJ|kfwcgL&4#^zz!WYStpKdbUj~BpBe;^8c&PCkt)<{g`@oKai{tI(vl_E0
z$P$y!KXBTU6(~HGs?$X2sWPjbgr{jVLhR9=YPf-e29zuIT9T>n=UVY`BHScSFT$o6
zmvOyEcdl?3hv;-6VsBv(QQVw1Wfml?XFYCCTCla4g6F1$V|jG()`dxP9<w@=7QTPK
zAK1x!G6z^Zn3EcYTecwCe|^$|_uD-R7N3XrCCfJy?BX8uo7jn_M*_@qexuRx4MzQ2
z(>V6czqXWO0U8fF%-{0Y8Mhlt9}2MNgGM8wzRC}we$@C3clXoQQY>9OSBf-e3P0+^
z?P2yF(O=lMAgTE=6HGVTCZH%>NCo)FrL9HAc+r87XTZ%{`65@Mc(-5&Kg@ff^o~K!
zJRpjPtP%65q$PcIT0FVFNEapnfSg#Y#Qf^bUW*zpE_@vWTCxcEep_j(al=jGSf2|N
zkl-YC80=#wve>VB{E7sbF+?{2><Pdd<Mf%)PyW33Qk^8`rgI3-e=aIKohwcXdl+&5
z-k(pRqrIU|@8%vxU+4(39&m>!u460;<bJ>!<PW?dqU;&2qh&0q0Fq?bz9ow+`(`b=
zMqROHKBtD$?W>l{)xO<3FYUbi%K@D~5GP9Y)j|8rGped?!|_-p-vy>}wiXqEpGUpv
z<7DADJ>1o*@T(2|>oorC{DQtikIbR9^*%Y@pQ2!UOJ83L;gW>}!Q4y_wF^SH$^<DX
zf}hlAgi(7e!NHKgk_hx9>SG`S+XCh0Ey&B2QF0y!r#<^TJ+^pSfjA!;dVsygazq4*
zy_j~E3h+eQuIOy1LYx5-+b9O$o)PK@LqvAOo!RIf!hmLRtg@py3yHJn5(7jVe*E~R
zM#G2ic<sB6j8*WV!iIYFHURbJ1cLxwzCNeCGOtB7c9_?`3OD8DU;|Am8o-8>Kf7_i
zQ1Dw^O1aeFE~5ml8>G=w8FfozDLg?Z3TcM?#tm|5wsJY1{)Fo`pXXpJ^Jki8>iY*g
zBTu^Lo_p&tLvs6v|AU9yuU~H;4*vg#+maa`Z_mx`eq!<WzW=^^f6$2rv{}?gE1$qc
zuRD4_YC4Dm6F?e`H?8gz_PpxUAF7~+Q|_FR&8e$4()xO+<98|n1n$XurQiVfjjK{O
zk8s>iHK>CAIK?}Neb!IYczZ{ruP@8Ie{`KE?u~L<AC>BD^qm0^+-`ed&nDC@>(Q<E
zg<I+ZVWen=*dx7=OZT9byY_vM%J13(2U?F_d0|_qJ?EU{E<eU`<CUYW0~fgF7o__B
zn)o_8W_y5e!ARkPRJRwsC0kzD7W%exZo8?bDq*mWN1$K)@u$sly@>QhShDm3Md5IH
zubqaKgD(c9@u>n*gdi+k@&SY}n6TG^j~Wc&tjSrilpQ<|g^q+mR(VeisV+vFnZnEu
zBi1!%uA{8p-ofX0H1HGn|H?eQ8XO6Z2EO0IonU9O9cW%4yfH!h;3f2=fhSsO;hj5z
z2vvmO&fN=C-9&#fJ-Q@Fm7IdJT5%=Cs&nV-QG14Kcat?(O;Y09a9k?nHcm-!nu`Cu
zamX<sw>Bmw8c{2YH9AvjBff4lYiYSAdXC4X5nnY`vaJ>MWCvA*a=QP-36${Ab#2sU
z!kdLw2@C+#iO1K{C+NKZ*N&56*d6x_4LXo4GGY^bF~oQ90dmR6urMsjFmQ?@si=@p
zu8nM+JvuS4iBZdTkS0hCZ?Ib^u{?D#3yKJt^0hJVVg;P_g>w13QcxmRD8wE)49Y`c
zfE5-B?-3rgDinc9W+5Yp1L7>6T{o&!j<&_;wQ$s6@xyX^^p@)?oUI^UrBJB!*``vK
zVW3;Cc2m`$c~zG`DM5$w3%B=rMx>-f)IrSC3ynzLfkg73C{hF^2P*9zBAbW?F8XKs
zB?W{BTy|tOo!X4K@0bZtG`at3<-ySO9Ne&_7gqyZ$lkrqwiZoGV}sL76WMg{N)g%t
z7@bH_Pcu8eMqQn4&PsLSS51ott*UGdq)^N3diGe3qV|z`?-nCnNfsRL@u0X~aNsn^
zym|8;wHOAu!R715cSbd-YWw<;{)&PAj`dEb%{qMYZNSu1(bNxjx1{<cwGRxA4pj6H
z<n>N01n2rpG6<QEH$ghtRUfH(>)wM$jRFbca{^YV<f~|y8U>ewW(hqG4S)d+4Q)xF
zlOBH3<Svm0`7Iu|IK#>}w+P}^HuKB!+`Oc{r5FLpp%G*eq|Gs^4X*#%EuTeMcpeH^
zqF{KNPmvGB4?S|t(hv>c7cZm|L)OyT8C!=4JXG{0@GAnt!HsPd&6}*ZIC$-kByRs}
z5B9p~YzV-J>Mftj&zs<m#MPLfTE$n0-T)JnyYVDnd1Msy5c9>|G@|0Xk;60<$Kmbz
zjEPB774sIf-a(tN`}leEq6K>u00d@vzsU4@4RR*;>g5}uNts+a*6yvvd1@GVSlW*<
zXgBwodwPgq?~zvn0Zsoc<4t=~QuY8;9hF8b`Kz7doH^6U>B`QYW{5p&GzbhvphNqh
z40k;*a)=!i#wY_?W)cT6Cd<ku88x?SuRko{N*U}&2uqd()d7T2b*5>9u-sCqf}#sT
zQ*RZob+0*-RV&J#L830`N=^6!tixfT7<3iRE+9kd3Zgo*CrLYivuL4V2m6^Uurnfl
zDr;?RZniKiviF}R`CiPLh!#nJtMF6N$jB!l-thE9OduA=V7h9kB@YVKIF9r$?uoC0
zIoUsyW11f9fvv2KT27ESN>3+j!Pd-&op?|U-U!v77-n<IWm<DUqy^}6K|$_Xt4Sm4
za#C$=Tm_NV6`1VnDD|1efb@cvmZ=QOy!p*^iyJa5**2Zd;N&_R8i;jLav5|wo7w}p
zw9~Eg=TW2)?5estl_&yl(9j!oFmxt~dMhyatPOp=4yAgVBkA5xy&d4c2w+6+3SDL@
zDi@1m$zI`WkVwM>fvAVRb7Hf_wRyy~618sPIn;{@;8FC=j;(2>D<TP65TTqmci`b`
z23FM^=1WLlQ8r_s`6OCex~8=ND<;WV#0zQi0NWcX<-f&k=H1=4+0u?XXQsv`DIEZd
zzN%!~a8;;MczQ`;XI+7BYC7%g`L*&2Ekmh+WPR4w3uD+K^5hnP%(cC~xFXJBQ37?f
zTcU}VSXP;u63>TG97=f$*kK45lMW58L(?-Mc>8b~A^7><!x&xNp-)ba2&Q+_Ef5$S
zCQJFOM>I>y;UCjZg^bKYyH3Vlg&9E5#W;^3(pxX<P-b+in#=$4rK`JlJ=%=&|9X~~
z;1PEe+*Z?W62!tk>(!Rh<U~s`%-WQc8?zOAzV-KY|FA>d1{b}WCu$S<wffC{wQkT&
zhFp2s{73yk?7^(0oSB?Se~%D(d|*8c<Cy4L68q)^7_7bX{MU}z`40Y=7HD#@S<D#i
zQ4*T*XAwXvlxA}s+)Z`u1iqLQ<b1UdL-hd1-)M;<C^peBmw7uTBGYW;%YB3B3iJ;&
zK%mGb`XyxPw9sH9_(s;wi=O0^4<^jC12@uki2}C^)6=>d0P$yxGYFLQnhCY`^pLE5
z-Pb22^r{d<>dR)uvbMmmE=xASXfjX*c;DM8&QBZ;wjk<ilP6g>b?mViLuN)}NI~=9
z;~32e%zW|X-9yYbKU<tfF;nh0rld4bcpb-J#&q>SntuQU6N6=9*vTPjQ>TbYkTnwM
zJz|Ac(67eOV)$<XpW$K(rr@kVp%w3;5ZXK~qF=G>>77K=h;k8oQ?kxGAaB9+gJ!+#
z<|5C%PE;-#R*_OKOjK8sie!N3DtNeB<uN651a(<nxF!l5k+AG5$;2rXwzVZkq=|1<
z1qLZMKnI@SNM;LSy-OgR)$5`2fbb>QjcSlj78j`~uQ-Qu!er7WS&ZGFSqv7~Fd-%h
z0&qe-4fbw<e6XM00~?S&<i_q>c6>S&(TwYh3X(l^$0+9w6Mvi!bO6l~G{?XJKvJ}W
zKgOGgvq&`QcC8L1N7k#6d4ntl{~+vomV32w`sL5hEL~z?982n54x7QmwG;{8_x+{?
zo-Ri*VswuC-aD0m;?NTa{d%Oz-+yPI8Dy*%D&^ctY+iWbRt<6$Fq?H|@Gx!qtz_3G
z3BG#MI;sC`f9blVM!fOjD#vc^m#lPc;%{0n8qF@=|AaeSdeq)=kizd=M*{A$PbDBA
zxX#U8!Sycm7UQn=&KY16D3g>l7kLF=ma#)YW0E8R@rQyJ0o1$k@#eO6D|TdgrSm1K
zvaeR~l^oQui|8L!(D?MsUo=>+q|(bRA;RP4f}e?0$!tD2;+H=r(H3fg(%KWv!X#m?
z>d<XfzE2{*Tyyh?rU7L;`ci+8BxR!J!^XtjfF<*S2gljHrF+X7Xkqi|`-)*e8sG}g
z9*%3f8+dr;8#lkPrLALmS68^VwS41j%hzJhHYYbkQT2_f4P>(<!2&Ba>5K<_b!bp%
zwrGEP95*jopM`aekRMu_SvL2oLmj%NsChpg*qrWIB!!wHxOroAYV=G`-G6thXhTD8
zd$v`BDs)5`>KaTh5V3xJqxqNZlY0Fb-R>V4HH?n*e*jp)d1%8H-#z!~5aaWP#L5$H
z<%j^<(~TdmEdQ0O7?u0$^0jl9)i*q<Jcvg3KBnnFQ3%8U<;_y%uaTXA!ne&iQBdb5
zoE6v0PpIO%<5d&8L;ldFFMm;NVOUO_AXbYs3V2Esv+^MR+7#smJf8WZxLB_I>~Dbq
z-)58Lqi*zx@aH*#IlXfPISKjdrr4I47Wk_`>AaSKxkVaE{nmFCRRe%c+rKjKCV{+Q
z_E4EsgL{Zu2p8ZBxgX*3hXNyDSpq<$%@jd~il@8d46@X}!^A#SACq1S#!Jy^B@4?N
zZ1*)7tHppojn7XrdwcDf)vMP&Fb4I~Nt0<(G&wy@Dtda}_v6L$=4-VLN(HbuBHne1
z%00(nz(rKHOKMOc4*9?2#j<Bak&NjU#HC)tifIXvSg8_{c+=BCs}7fn{n3>(%bgR%
zVaRAyxuA0^XZLO(j-gfiW1~S4(%D44`6Xm>GHZZ56~<BsqmDi~qTmTYP^JLFRQpsS
zWnh9to(|t!nHCMt1g2Tt?2F!dBJI*@{KM_RBAbYFax15oRK9yZN9_C>7y=?v?Osj=
zotgLhA3M!AS<F8Lz$SE@K%p6x13`@?lEBGW9WR#tfF=jPVB4vkJEF58+p$i^e(pMo
zi2HJ<-?x-6`Jy+%Z(d7Za}m*~RwuJ+VsWa-kJS+Ek$R>dbnWauH<q%_L5=!`EvL=l
zNy@U}O5*Q(TDQP`d*^-C2iCR;+HqYCmFSc6(Ri%5H1aWu^fi|$k|ckvYuk|&hoN5e
zs|;<+tqkjQic@oW1;l1Xv$_{++j0xtNl)#BAzGb=s^x9QXaJ_%F|`~*2*a=T)Q+#M
zn_Os9Ds8q1RuyA3_w?dVXF_f~<joYG$XQos_2Y$|M4H&%_GdctNiV+V?ZS;A+qW6}
ziKGw$DcL5f(y-NT7FXY6Vt7hv8}RI+sR9$#;%lWYSkZ)mlt6sNGtV>u7~wxp1|miJ
z=lDlNhE`#q9V*E0Iv3%^P-lBnCIa)K8a(f^D?4sdTMZtzX7td48*D&!?u0k+c-QMo
zHgjQS0in)0SUtReG(lQ>Z6BMV8HBX-Ag9efFS+RF!J~%J0W29uYzzH%CUPvett}U>
zEroCHZj(r?N(*K(ah*?z)S{GFEDWHu-_hNFjgl1n>tC9<<8krJUk7CP2b{jBW+r2j
zlPK5vJB|Z(>}G1XUI<BDuGoZ{=l3C6v3c!J)e@u;f<RHhZ5$%dAkJ{KIW8HscNTZZ
z_oT=>3M9v*C}jq>vYvVKY_>p;i+{qem|`F{(^ByB%AT^)SGit+2)C7-UH5tEwFa8n
z^XQXD5-1s5#!^b6i;OYN)+V{_5i40Pw-R<LsiOPuSD<{@f-u}}F>CpsaqE=0<;(4_
z3Yn~mLm(6p=;F|^E!N=<CLO7W%FxV+`f+*HdF!%UTr6_GuVx0u;xe(j0`nv*xqeXi
z{!~!bzeAe}YWF-v*&f-{u1&wv6+~bsS6e*XZik5>O_+<h$Qj$PbVu?UC~j^~OH5VY
zB4uPK##CbJJze3*v{kgbRJAERX7*j#{sxmZDUTE|o<}c>({7BVY<JX}xHS^fT&5ya
zwg_qNBx|;Iqi`lVkJLuiaS~mwe3Aja81Nex@^^Yg9et3ia&nNRdXg_uNzb+AhE4Xk
zMVH~w>9#)Fl<w2wEwFimPzq}`wlY=453_MuSY^O)lw2zszC^adK*BU1167Cc;R!e;
z#W0I*U}I<Clvg#giI?4QGf_TNtP?wMb?-gqySIJ&MDcVU4!hp8n8Oa>5+VW|3y=97
z3-H4OR_3v$R$mJQC2kVO+HpJpJO63D)6<Fy22ot^q7sXlP1cA>2{18s&L+k+Q&VpD
zTpnUnUSe8eGG8~Wa%NaD=}fLVnpQb{%YMWKL&pALgoL!j_*i@x{<1-!?4DSB0zO+(
z&Yxz;DvzJXCc9QBKyCLWv?p^Do$~P{fdHEN8iwc>D*%x_?$e|BwyqO4Loku1pN5%c
z0b!4=y6K14c*&pWFETqbE*x!>9NZ}XpI1Q2Ok^wiNOlPlZ@M~%6g?2`=lyEkiS>>V
z??(b!0hh=)0F3&K`ztc1#qEDoMVP?VQvmbN8qexFop)&ac32eLkjM+Arm0iEhfI}9
z)Bb-t@Q{JGZGQ=Jd;n7uY0(I#U_2an`sDa;@4|zhATK5gP2`E;GKX~j+(UV%yRyb-
z)WOuAt^&6T)W2?SFW0ERWJ20e4#x-nK*+32S6N?X%kE)9$5`KCcoqwue2oQSY{_b?
z8KVp*rsxmS0vt;Vr~`#h?rlJ4dz+=fbpvZdQ3$`x|7~X(KeQ-@l^jx3#_#+;mS0vB
zVtiiA+uipIDN3%Gj;Sj>lSU&n03D%vj!M;}slH`q>g=-m(DGj+iz18HwG>k87pfOL
zOlAR@Y@FfH*7F<_Gh-sF8nZFg86ypvA)xz+DZ~s4|H-xX;;6mLXqS8}{<?ma*o|El
zS^Kpod`gseCxM!n8TV#h^|QYGO<Xil9Yh<L+(pRqkjykvRuh(@3yE#@&1P@x^H><4
z3Gt7070g(+ilE}~o+HE_&nXUX4E<!$pU~pSGJ%!lOEKK^=(!60kz?FV8OE3hTBPn#
z@wv2E&6*#1nB=yApL4;2hFM2}ELl}sp(9YYagHshc-;DBo)WE&(^ncD?&=|1JUrKn
z)}tv&OG0=tkZgP<eHEqltXlTHO)l8IzCz%jI2cE{5T7k#^C_Yo;vQu<e3J+&*6)@J
zY~L@d@>EM}$=9!wNzy{XC*v)81>?7Wf%~F~2o;;`ZpH5@hS^;)4!abzul(|o^76|Z
zJV*%BtugTdMo7VsN`jLt=qWKIjm-Np2bcjh$X%s2L<~9MfGRB+Z=vxw(T6})38zV*
zV!>=Lrhv)Hwp!1}1+)I9QXaZBpnAznOfSBa4=J=SSj4}kI@n*=1`_=dwLZP9=Mw!b
z6BcZLv)6ZTo$8i7Abv_{Iz>#NEC8l7v@%-0N!>oTa#>l~zN&A^o$P~+c?<IQafpA%
zZOUJexAF4T_q*^^`LZ2JwlJI1h&&si!0Ok;uMuGtsHL*#1AbTrs{;aHizO{kI!^!8
z5GcvmVm{eEUblK6ffm#AJ0Wq0q1R!T`D{AC8gKy+D5N=aC85}zJG{=Cz$#<UrjcqJ
zf?l?Ipb0Td8I?0;ztg6c^NNe`ERhDuPuIyd-ohsysCt9Z!u-2HiI7&Hm{IJ@DH6D)
zvgx!mwws`c<NM*=f?f3?KKs_AN~ksd<aYPpFH)h%IWMO=vK?<cv*SN(I~m^!RX$qH
zpA$)iF8&_rkl`#H;P*8ob~pVlTKKW&!5h|;{LtU#`GQQm_nbUd<T5rFdAbZm^k|p&
z$U*hPO1Igpn6j|XpS6;KOl14Sux7hen!Rh(R3^M|A@nQVYADIs-s<Kxum(Ml3!^w{
zQfjuZHhW8jFWSl9pjKrBSFgFbFKY?c^-$=rP@z61j71c#YhUWKYZhBSj9P79<Fm#+
z?@7IPu*&^Z^(lXO%QAO=_AJ&u{Vet_pQWt_xBeV4_ZrvSOsRHcWM*upQ+fufHZe9<
zfqJeKnxRIIm1cT~*?&gfT8RNNx%l)y*<z1O23DVg^x?VKg(W-xraA=6#;_V{80gmD
zL3+=U`K=2dAFe1BB80R%b+8#Ea+;GkEx%$Bai#iR6d$~Jk#*Qr?DO8=?^}=mQz&*l
zoW;zp-pR#Ncq{M`JFCmj71lCK3t1EeVn2G1kVLqsokNfoyJdvjqr4fl2J7K$&$!8M
zCqHvQo5v&H+?tW^L4IPvmRU^#J*q;Tty>C<$Wf2Cz2YQU1<2wM&&2^nGc5EWhP-T^
z)iT2Ud0I8%aLsJh_W`&>SS+dwt~Wf)IOKgf!w~yN-kFwc{!V<(?zlK{ldyBQZ=ZpJ
zQ*zu4_bPbT4P&jOuo<^qQr#Kry8h32WWjyCT7}uD?S&4rMNeCEWaaLj+y*u_3a89M
zU2)=KH(VIXC-d3Q#>HXvuBCV=ow27r)3rFIa6ep|g(%yc-^>yBXT(gj1|8?4g2gI@
zN~h+uxWc$19hbWwa1X~N%Z3#7-1TFmyZOWk?sH<qj9YtytDWxfHkCBUYo3?hB~Q(8
zsVF8@aI0A`DPhqs0YfbS$9kpR7J8AyDzdINYv^}P)N{MeW^1!pZG4Luqz>QL7xPFG
z_2*S+UNScnPxN(sf7luyb0I=@p75E#wuirprW)OFa=x%@nmI8a?%nCce6E(bXJW>Y
z67?(efu1=hq;Zn|@6yU<p=ZqM-k-B_AY-7vyXnBED%p+;6M9zKJ+6MTCf6&yp~aVY
zXj*bw3)6Qm!XsP5J1GoC=*C709EMCl%K=qyDng_OOb`oTQDoLF*tN=Vd@YPxtm1;*
z!eNBqz3iCIw?p{7!#Srw-rdfa|M5f3Z}j-@YgBI(0Co_f4(k||ON~l-eZ4|yUE2Ys
z4zFCMW9$khh-i$S)RJ0c7FoSxdKffNcJq?MGjWiUx?#RVmbUF5s{WmiPjk5Ezg2;E
zJuZP}uj^~qS#y<<&4|vk27b9KwCik=<pN71ekZ{aJ9!xvYND#l>aETRp96(Ev&g&2
zw_^@H2M`4D8A$fdIK~~?-aFVC5Pfk#<!5Aqh#|g1JIe}$0d&xkHm%bPnzqNrnG^AE
z3KBq=Ny`HtRw3IUP}GYA8*ZQ*-UypeER!f$4Bw95S^q0VERtNd|5>h01nVRs1uZeD
zLK`(R$F&l=#UVf%$elq9UIffuTO?_CO8Hjx*J^^wM=jJgkji$tC?JLH0@>^cNM+`n
zXN-Z}lNGRp-X;>lv3R=X&l`WGWYH>aJx%dPK2L8|2*{ORZ&YN}XX9eiez<-6hpCf|
zYpwhY_b5n@GQ`}0S&daWEH=clch3({CE^jrDA-Mez!)U3uVVpV`NyjTd^oQtLFI!a
z-7n`J2HCAs?8x$N=PH$7B~b*y0eHQ*v2~k;VBO6WCDJgzm#t*H8SvNGj0uMuNnc6V
z;Aa@1UZnZ?G90-hLSnlaw1oCUy#VrNh;HEsLRUo)Uw&jtK}s1^mXbmwKia^SfD?j}
z9Ze372d+R;nNDIzpiWD{{7(7uK~!L&2gF$4CXo!2Zs~rj9t))l(mj+Uo2b8kR#^a%
z^r5Oq)@t3$Xu$uO1vU}aW%F$9>w9(JmCzTvtvdCW&Q*fRlQ9EHd)T+R1tG-StR7fk
zu4(x`(_{tSNLYO5+FEFWD#STA(GWX3$ZA^%21~Q=?0(NcB71mRzwal`l_e{w#EF{V
zVF`wQ*M=JMa$)lZmrK%22lwl8Q}P%6WX$@BP;=EAfr=M-4|#)_C-)6_O)cMRuE1xr
zWT$r~4UTDm{MbHrL?>~!UO&U%TdolL^KE26uT-y|S1wD=N+VBKJPjP*$OwuKQ|Jsa
z0ZcrVM3~^ZwghR1*8j;%sWN25nQ0>@nrOzYmC|LGQ>=&0OBc#a;?bE@*JwUn3PR>D
zSYWqDP60RAKHZ$e-EXq#M$^(JPHxhP;Le@WTW%sPZ4?|`lamZA;7qkF7Lw&CsVA;H
z*bC=nxhbn+SYKK6N7*~H<`CSapBFQ*{J`qSu+ogzkIGGMkkFD`%ZA<6j^`^Bf!Mu@
zvKE>EN)qwrxY-kPf>;famz1f<aFYdpv2ZReqhZ|$>fr;0N4PhaN%~B(i;*|#s5Gwi
z8JA|)18#^ofb*QM_Vw@BJ_(_Fh^go30iqTQ1l+o}ZdH*gpGg5|oK%jB8?NhEm529?
zV3P6hT0LwB50M=Obl|iJb#c0qk|#0Qyi%n=0BSc$0OK0f%s5clS77(y$7y<^D+ojF
z!tFiX3K<I+roc1=T2c&&Q&ObS%U&B+R1-~os)(S)Q$|WtQ>3m@&%$t%xcZ4y&4VsA
zyp~ig=~?(qbLZy-CC>?rh*a#>WqQ(sc|l3_SVHJD&YO~L4x7yMuZhYNcujfXcFsr?
z24!B!JU4?hQ6#}FPz9ljF61fRLjs=D#<3Zur7%p|Xf+5H1)ri*Af8W#uBFgI0ErU-
zl3RWy0S4Say?937v)?WW1t0HcMG(aTr{2Y43<-Uei8yHVj*U2h_~4%N<6kQyJY0-E
z=@I8N-T@JyS(05@=W^|#2AGXIGPT<10|I+JnW6O>)Sgiquv2w&kUn@QXu(a)WK!2@
zbCPCGlFhG!rVzZ!H<x{LV0(Osd6$qI;f<TcWWZ{D<z7V1rQ)%p#U2=s_)+HulAsiz
zCh3POK~6K)Hub&pbTC5t&DFWvDP}x4t5%<CKpgHXSTp+SKT2Q3*6%xvSpIDDx4CnK
za$KI)&jonx*&uIvzPGGT`VT9kwqvqAz5b;$)P#whmDw9k-@A8uLw4oPn`(lT{;!v3
z9Okg@^{+gejn_WrKgP2qAA&o1S54t}yRw_|5w>#~F~mA1Nml-SwxKz}l3@w88ChDY
z1F7OJT?pwqh35Q#b4A%4ktu0NxTuJ#6CU}(kLJ*^B2)c(i%ju5$RSu(m1o5#q5Axt
zziO&)u;(t-U)9+xN`cT3*Z5s3^-lq&)u8hU%DS9f^9$1(`2rsGML*Cjg79TY?xKxR
zcUU8GFMSB#)#i$rc^I!~<sY;lSIT$3u8nE8vK`L;Q%3479c2&*Et<BR$XGGdgfDzv
zFzeV!1Gzvsi#-yf7e+IpuMtdeAJKVDy~E;?m_<p<7;l3GjrdGnIkT;!r!2FL0C2{H
zbezej3MRs8jTARKUDA|Rc*a4z-TDGdpvuY5RUlcN8Bo)9r1$`#RtI9nW3HNQ4Fni{
z^-u<c3rrdOnNs1x!bwXC%SfqiI9^Tbm$@Zg0nfY+c2NTSD~}||MJ5#y&}hf8E#A1!
z`Ip~!f`H8F&^FttHm5)UIv}ZXS6_mKE)e40W}C3JNTxlr&vH|SUn2a+&b)r^O#ap?
zpa}60SO=44ho1@>EeD1i{Q+QJt{QL`oO(B_+^f3M5gpQtISGsxzNnVCJcPmirDLg7
zEMN+L$y{!`(E_1=*2Ra<P8!^M#ka|X?<@PwErICy8LDQlyhFfIpv}z@fJ23|ZPeK^
zNe%L85bx(Jm;3q!2&r#uE!SF{lduc9vhiK_nJHSjpR{lo)!cF^n~hmmW#iWwiZDty
zz15r+-&;F*Oo6h;ZEf5+ppxC<-zxXE>;6dB+uRM%mzK}f?>k)JSB@T-#SC1j>Y?+1
z`JCLia&}9o@7n?dFphadB^aJlZ2;4W(hkr0)w~htjFmrqv`hvV9@=7}&H%&pkrB(l
zz>_CovFy#Ss|HvxV`o@MLV+VY@aEOyWS)4z6*snt=W7d~SrPCa5G{QX9)L2S62f0d
zn~xvx9vB@q9=@f}Z|mr#2mrexT7Kz;o3hX4K9thBjNP)HZu(Nr^#K4pAAb(<L6OsO
zNWo+^R+1K&eom!%*&V$OM<umS1*nAlRCr!8_*8HlD+pX%9o6PrREk{mqOa6p%x%dd
zJWcr;-F<A!0bN^Z4GndVq_Zw83p^!3id$zX)E|CeDI-{)q^UCwu6L0N!r<T50s-<F
zr9G9@vEDLdz}t@yb7@v&&95cOh4A6*rY&y(F$aa4-c{k_>n-yQc0DHRHJ6f{m`XCR
z975WC`sV{Bwz8oGCKQQw!m(>OYiulkI<)tuSfwYv=`{tY&MhURns?3%u;jiEJB3%{
zuSRXSvJndfh7vp09w*Bgd%Ppe)=N&_W8a%%eqgVV`-?ir!m?D$sLs?vhU)0wk<qbs
zqukJC@&j6u4{EhqtL5@wl*(9#UPqwSGb4EJCLGI&&o*+~#<}|Hfd*dS#&ge~oc=~|
zQ}7MY;xELMd(v^h!Mz!`Q$e6mN1Xc-akI2Ow6UHJC+43-Pcw%mWdGHc{TrxYTw~Br
zF~rSI>ApOSp)nN0XckO*4eWrpgmw6R3Kgd=bPwecZduLzf$h*PMBiV3;CCkAL^kRm
z=7DTP{?c#4+{av`t&~~)5T<5YKyO!Ds2GNw$;QV_w7|BIH%S+5M?Z+->t(*DQ`W4!
zaH&?-bObj|LcZO`6C)iWfWZvXsTR#JY4;t3-uq;kFNI&Gs0a52vSEJ8xNB;6xqRW?
z1pWmnJ?qX0?5v9aXI5OJQY}<U{}un^{v8aImW$v?6wXKD91?<3&m%C)JYb0D6j2Xd
zF{DCxoc#@kgI9d^Td3C_7_cO8nfu(J5~7boBLOj(k%+1-SVx**jM)cIm1dlQ?FvQ@
z?jyn|IW}fiKdrHZP~-j(!Kx~IM(2KN)2KTqePp#YX(xV3IbHf8LsqXkL<$FUxcG~J
znH$MZb4g6~Y}Jp1Ob7Ny19~$g5~#LR0zVzkB{!wRjxO=Y_Qj@R<(}D0Sd=Sf6PK5c
zYD5)&I9?t{7qIXntfT$<l>M-IJTB;5<KgZZ?aF-o2xB$@xH};OR+E}norwJ&_Z9AY
ztRjXOAv`d%hNL9j2WnROr0@7cPZDI_88?yL3_zk60G%Q4Lof@WOROmB<#XeIMOkf1
zfB2j+6Z*!lP3g{;8VWhvMq8ZIdGD6dwouik^yg00x<^~us;Zva+D4si`m8qFn$=EF
z+UfXeQXN{RKSLB>T#@5&DmI{7<`V64*dZmDblitI8NUuRr6gz#zCxx*8)%y`GBV&K
zt$&KEM{u{wZW8<WQXPawhF`Kw9qR?`ImfddWFS6BvM3#tuZ(iECp0|7j3qn9WRAWw
z`o&h%d|eI@lq$)GptbXhvM!-r9%VR|NqRlpTlOV@Rtst?+-_M;=n^yoA}Q?zB%hKf
zW<LIc8E*^)H?GTBRUd+}I9PST^vJMb&bbsqvv{A^wqlYtou>73J54cjwKadRb#9EQ
zbM8Br5;uvy8Lu?s;_k_qti>vx=-C9oRjV*ux!j(L>_R&^T!)~lgk#`C`4x-FRUB@-
zDhet}g>BGir}gGVmc5Kaz+R!2H!LWEbGEnWyiPXjZa(S#d9!a+5!9sjSJoaaV3__O
zPJGD0$eowawm-KQr32m_-zz;;Z#w!k-OQkUC5e<Yo9mK&LDl-y^Pw1vb2F>x&PAbz
z7-#ShUc6Jp+MJ28B%cQveJL)OWd8LA&4L@SJ=XNOgznS>tt(Q!bKp5X-IHUReJ+PS
zry|T+;ef#?3WNV=$&bd(a~@BN*s$tDWI`^#H+Xk$MkRqE_`t!!)tuE#H@E$6EGIiG
zl(hK8Vmu5g`Qm<x-tUTy#ptdIcEL0XcobH@K)OJLjY7Dz!&#nlFL}mfVdMx*D=S0^
zG(D#S`h)x5b|3%TghODJE|vg6D^z)y<{TJAW%G0{2)F$=1(N6=?hthN^ePR8s7Oj=
z)TLe7TWq+EWVWqc>NZ<iQ<|+!-DTXByQ{U!&}@xS#8{gRT>zJs)1lwk4~ST<sl2sC
zleS9#$)rVb0cn|&08n&;5Ry*Y7S%8r+-sb8Zxhu(?r+J;AF)YO!A61dNtRprE`wWm
zYdv(hRw{Nb^#j(_Nc{B6pZ}|bAqYe#&;GP~Lja>?$&g&fsaOeynR>5KwOT5Wn}lp;
zHPn0|k$$h)H^3>v<TGV=gn_vWe_1O^#?C8<Zr0yqHjB@(ns$2N@HsckC23dpY$#7o
z*7!ghSY#8K+y5Ju)j69AbfNaw&R=j*JbtsKdpg^_fIp#e%gx#B)s7Te!$5XxOPkYZ
z%sy*cY?;m35*az_Z0qcl;54Ic&g(*2z-V^@u$zrqM*&+($P3^HnEB@c+XMJoipKM%
z34Nb$in`UXY+l|&+G@flhqSa0l$nH3!msoy-{ox$t>fR(9`64uJ{Q5^=?yB2J2x*Q
zU81P;Yui*>m0lWN)Y9s=X?ba7ajP<|Wc@qPVp)ph0SzF4?nTv{YH^k^pfAz8>1tDW
z&e!s2_tPX1m6h4v-2d*}{6lqqaTTv$o2QZ{wg%*FFt&}bBsfGvPD|jnESi%>IF>^Y
z7wBOc8=S{P)_YDGzHZLuk*zACwLA&-Ds{_NukT=s=Cu)@mzhCPl!>RbcbP>%^TAlY
z;{+Y&?2liuvUOLN^3%$fCwYhhL%yE&+~Op<DpInz5z<{{j{xPKO(V3@qhnqkxL90`
zx%ax}C^*w}c(CR2h_V1pxPcq-3+{>s<uT8IvWV4G7gQai4x{QG)~Ffknuj{-aK#7^
zuqa0~x8ZLBj5rs-^a`}t2)@UoMF0AQUZS&0+>yEfKcskyL!o0{!(QRM2Dl;4IoNbN
z-6q>oWC?rb^(>x(A^Uj^>`p&v--I*BL#~($))5SOAC6W&67%5(jYuPgGvY_NnlN6c
zyopz>NPEPDW%fYeffgwcg{lkf;3zau)7PW3?)BC9;9k}?%roRcMJAhxi8=*FuvG#C
zbnT<Kg^uokO-oLV5P!Hvgk?>e3(PdA2zI`((z^vz<P#@73DV@1!hALdEmNtPkd~{8
zRB?rW{z`7@`1(&kpr)*ES7&~l_H_3}WYw1;u$U=N%Br5mOUwM9M)Az(n0QC17_OlY
zes-X~QewQbc&r-k(@)}sCW-juj(a3PyL~E;`%ywN_Vp2R6pd$?2&Qu%b_1yy>U_a9
zJYSbHS(=m<&SXq=Z|4#oeB(6u+8EH_aWPGF&A;lN5z8I%*F-ng;l7zEkc%F5ce)c^
zw|SorR1s}w0s1PXJTJvb475?~EnuxTrWh-UE=7<d$TdF@+rL$1J)9k-ev~l7n0<DU
zUWb7!f2pHpKg?21i2M&MlB*aT1pLf~#YGDB%(-4!@N9TdVtR-N1An2yJ=tPO3ieNr
z@`A&e@XDAKs+o$S3+}flN=p+|2mM{CFBvc(LQW%~`trZk3nP%k-pNN6_$xyR)Mo_B
z^l!g+Sp8e@1h%FVa9qqbJV6|QlDDN-Eqsg@s&K=>#oSv*3a(7e4D$J><{o^WEMNap
zKa3P>US_C5-@_CxLJ#0Kjn#)6$dL?x+Ep1ZX&UA}{YzZ|aw&4J=AZfZX`4#&nF+{K
zi`2A_A0u7KKICj>e#s`<{rO&Ym-wm0FU9o+_=3%rhS4}M5Z)TOOdl>KnMQ1=Y(FcI
z*B-3TXXZUSHJ5V(fp4Wd-$`-^wy}FHu5AJ+=-!x$P-7&s5@5(DFI4+#z7pOH!Zca9
zKVVm0iGN_j1>}X%LA*6E0mMZL6JV-)5sh!=EZcXcmY~C423o4We3@Ip$DWCQgdKJU
zy>6^*P+B>86tUT9vo-%M)0j&@3==oGR0SfL_MQEwDa(EPZ=oOeOEfA#Z>Yzwxj>dQ
z#z%#O+$cpN<^x3ZvB3PEg#7G$&3!g53*|$5WKfhPswDl7_tt#6U(_Pr<ZeQ~R>}Xe
z)X7Sar>9}*Y)mh2O2MlM7IfFNJyOteq`%-e$^>xCE9pWsVtQmFI<RnonzQ@&&(E5j
zt06tWvYwqo-WypMQGEo;rMHR3DS|DPz(1n~ZLoj4T5tF2j8`lSi;rk5_b=C+RG!^m
z<sgQcJQ2h(F`5#M?C)lq&AIuYOr(6nb!)-Bft`L_&u-5;aB=-QFM3lABxh9Zc)(vo
z{Am$tWg^*un?#RHl8fX`%ZE~L%Wi`gqN8Xb(mobF=3{EGEdWZ5bQCDc!>k_EY5;&T
zWr1i9rAch&FMcGTw%eq$W%leg=j5bla&%JklB+aEVk>2bs9a`i0Z-D+gO7r}tzw_C
z>94UsKGAMxGV2MWAw1RknP?%q({6W)LqP2!h2e-_c2;KQg$vaB$e#kam!;QJH*c<R
z(3-UWX!D!_FK}#1NNlkNL%gyELqg<3LYVaIVCD7@%4Brr<Fk8IU0xL!sG27*qJt+q
z(NgB2&a9-GCnXbnYw6>GJ*HSX0alw6LjWjUA=-<hV~ie?ED(4lmN8KH6>cBMOajte
zg01y2M4be@i#<}Uk0C-htCimRB~6K#g|3DMn=NiQyBJf{PM|DQV@`I-diS$GSEGYK
zgb;=#=!p>4h_feq88#22St7`eW_r;1ehWH;tuc?NU|7NTADUQmAKr&y6goC8$NM7t
zOrN{zY@2FvX4Uki=Yf<KaC1ZZxn0DSxXIV6=>#Jg_nO0+az&-35ufKroZQm>JbatC
zs;a+#H@GR?CKBQ9eZg0f*HfYD5wnC<<Ir8?QNgd6`xT~u3jbw0XTVS>Kd<XoJo+D|
z06mn}S{uVA|1GB|5G5O_vBf9#BErwZLOBI`#Or}df~pt!=(8@GqPN&@0Mkef)pFe#
z4k|Hy4(mncGCbEneFF&ex7Bz%KusG=*EJ5+yS`BdJV|4CRSf8>o->E7BR9Gi989zU
z#6#t@MUc}`6gaA0(CqmPO#L+rEg;ES;Uk`0Zm*|xN_io{R9#!rF4y(h<bM&MozY_4
z$PG2c4yV#x8ng9e+C|#1jw@#Bc?56NYh!iwruUZH3nN?6SN^CHwW^T8VbEeqm23}r
z&?0z^z9Q|`lWa=v;+I_TYUZ8KWSK`paAv&1IpXTNHccTb_Fa^SN=UXY*N<r%8I9DF
zDL$n;VaqNgw{}9^2(vPKi9O44e(JyhTZXS<4eb<dO*UuPc$GcYq46^UXLB!13<G|D
z?l*U~Di9?zU`Y|2jEb=JY*GC2MLurSHM7@HJxWs-?x2<joLEKDq@x=K7(nAtN292C
z7_L&MMlmo0Fa-4C5vUxw?Kxs7XFyRDR20E9az3;v)k`6V%jvW^of55>N7n2MVkVZ7
zVqnYjmuo#b;2b$yqIYHRc12;~9Jx^R_jmW>nkJw@eCSjLbVGbeMPD0$gwOwx*TIc&
z<+t=3dH22WzeM#F>w|>X-;MZ0D*Iu;L7E27UzrMq;#0?Z8V?zArV_ll1e>!jJw3JZ
z>SVMUOc)IRw8*R9GgPI)IJTTkliRl^z@3X=dlM(4)G(8k;M#ZB;iYF-?RzbtDNm{-
zUq}xUjb3>!2*DCreD;$QN4aA8G0tldI3^EQ9#P2ucl<A>s5-9wwFD<Gtz0a}ZCv)?
z`!}vz+DFPk;o%>o8)4D`N(JVS&TMk2SQn!0&u6uO?bzl1qT@?~8GvXgP1C+^*G>E*
zYs8z_RZLj6jEWYG!rfO^J`kv^3mOlq^D9KRELu+q<m{M?;5|Q4(@L{Uj$>N34eVGU
zy=s|L>$nZ;m?KQa{Q)0>%&w)Ucd*L#h53dl``gFNLmX>?T%tbLqI%w1F|_!-0CEV7
zqK-F+cyYziuSju4v|B?jwukFwA9sZ@yFKM~wYqVL%zrlh*s48Wh~fDg0#+xyI;uwz
z702s?YWYbHG#;2H6n)DLoG?xVa=$HdGYF=Uj#Wc*bx2yR`RLi@gsy5j0<Dxf-+V`i
zdJ>gX+!C`mI-FB~_xQG)d>jlh+Zo7COotB(J;py4>W0@D@)Q@k7?9lgHQSB@9gk*-
z(U8%$INZeQ>3l?Hg2mvdQ0<UyH7Y1UNou)kKZzk)gyY7|`;_6sDl4_8Gut;aSi}8e
zq#K};MuG?A2%3!G<MQ)}Lx*(1_pj}d4nn<1nZ0?fg>?VHEboTOYoiABh+2Kkaw<E!
z-(VOuPN=d6vIo*j3{`52S6MYtF={ZN11QY%=4J%e4Obmh_Jn(9YednLYtq7~Vu|a>
zB9fZ)H{)oXh@6ucavUUWU)A|Jt|W~tO^d2F(2~sJhKWtY#ycK>*4cD#?;(KxU#>yS
zy!`U&zk8Na^zz8s;#zN`_!v9+(q0|i9n-CTs(7k=>P0<exV9bIcJlQQ$0trVV5nK{
zGbG`>K6GU(pb+pU@a^{LIw#NDw{260r>0yTe>x2`kG`eXB)JwN)u1v^D=fK!35+9e
z#_qZy?}_05f(b+I%PG<ZT4SnL^5otblf|WLNRGk|l`!OoiHd)ak&86{3Bx2SmSm^;
zWrD1<p$BTlI=4qZ{F-5$qhCS4Qt0LDk-}KB<Lc^nDN6t1h_cV2pGyKPX45VPo75Zu
zaa67(TtoKD8Snq|E};ivE&9f$>_+T>k<-q<=Z?OCWVNJiXEo(|L7ya)H&cM1CYm9$
zz{;ixJ+4&pWDrorzRs^hVuhqRYnEm<;I9R+cs#xuuXyVJh(G=o1wyuGETWV?12q{L
z-Z>dF9-{)VKZobzM@^_q#pq_+9Wpz^J3_c9AL_&tPCV9nVWPax-2Zd|A=zowdt!^L
z=k!yzIJRm}U_*9xK(wh6lZg%hew+7^7c^b)iKi?csVd$WLJ|{0o`;aO;QzSe=M8P>
z?fx|W5OsneeGF9iic2}ctsLsKDoRnuM4Po=^FwFbDO<&BkL+vqSud(ts$6tPZ7spp
z_Qm%{0!`$q!h?l4=AWMhZ#k8z$M?E5R`LwIlz0_0>HUv)PtCd<SIMc~u+gKm;CVp<
zaqpf;&npavkltuMz7kLQ26;T?DdkBM6M-BH^wbA+fM7^bu5Qt8t{x-?eE=72e%h5L
z!(5HDUkiJ;t1~(e9dGR-^RdL}Dj^W2KgE_DcO2hmMeP`SGWKsMGI00t81OtH?ST{3
zhTHto^PK$!zD_T7$vMg@(DzEs|A|=nnRhgJYsTdZ1L@6&3mAFFau~m&qRfB%$X$*8
z7&B=<H5V4UmI6h8aC$mxt%3<Tw^i!V*K-v{cS)wQ{0U=Gi}lyOi`LXHL788K+nEHQ
zd0o1ZLV=o&lSJ1S<l}=(N=FnOx$U-bnZI}^bX6Xz5zKY&cjY>^hmJ$z)6pBtqtj;F
z901&4&GooYR2^g+Oe8d<lb1w>+H?~UUTviltP<IwaiIWP$(@ZG-)*%o-W{W@){_gu
zRmlJsAhmd{HIJLsJqrZ;x}U@xl9M5V;#u1;hlb1!YUW-&eTgP|g;)C>3WglL?CdDn
zxFBL2%73RYb&9<P0%C||F|tNhErWU?2Q-36KHk6q?Aab?oQU5&ez;{R|8Wkc(urOX
zZ9Es5nT1&~Q)9XHgR$ZT092(i*C^mEU4e<$HHCM_(sRZk;M84VnnvQ0*@uK>7ve&W
zdz7s8t(PkEtm$#SJFwSu+b~H~SZOpPdf0N$)~>2k!PM!S(}UJps~i~<Jt4-Q-r(=m
znQhtjvK?wZ1to8^L0m2xvo*;W29yEOzTWbe=Y$DgoU`#Qf}A!JB=}`8)j~rMI&bF#
zFQ;pQqEE^dUxo(dyz%i^z*DgdYHK@obRhdLxguLNs!}WDwGsVWY-)&yw_FGI?0+|?
zszGBKMkkVzvkg>(8f0gKVMC>gg3$>LWUIg=nmRhI-K7dKzzdL`nWduN{Iqz_^3I{O
znG{`}b?w0&A*t23q6PNdAC#ZsXO8~&@8oZeZDLF^ENQQ}PRkBcZJ+{hWJX?-18GQ5
zVP0UPR><zqr%x4up)UuK6_bCyJE>Mvv$N6Pt5q2pot+>acBCgnUiq&2n|&ufQsVZ&
zpM9!vWCP7ep#9?JEsCXMCBjEOSn-&jQ{o8xohTr!6R3&5&s{alW3s<FZvzB(B_J6%
z4j^&1N&4|>muxGWUeV+fytntnP^}cIvy9|(F&WI%qeq3H8m30@nq1PlyD9Km?y;@3
z1~bs0%M=XBGL;dI@s$Dz70)>5W(ykwF(MsKM8)K4$auO=3^+m16|C=J{KWbP5idX7
zk63>be~I<gqa*Lhs*&s7+uF#Y`ioIV@(VWq%^P~kie)H~x-RpNT#TwOitObIHq0r!
zYObeAfdCpfD^*|fM9xKImUlaT|CkP>O^!-^lGI$ivDKK=4tOC(8Gd)VSicP-)MFA?
z`n+##hUp||2St`v{@<rd2s|+z0)_#4pJHEKaL_r-I^mCpN#r1*#r<KJ4#njs)ltzs
z1dkXD1DKr^aqC{V?ksF7@<vIaZ5ha4NVQIwagc_&cR+?CX$-enoS5atJpiQX<Py-J
z6}n+<*K1Sira9#sDAJ**&4eZ-DY2w|v>o0iFf_Sx#-?ayjE8D|PC6pjYs$?8xn>AU
zIZ3>+uf>B^alO-Ky!tz!m#p>RCJ@SEtNc3@#0AA|Y~c8?rrzpOw72YndSJkCv~2Hb
z>HP3IF_0n>U8l8AW_0oWJ}#o62Z-fFy}l?>h!`f~8<xmXu~?GuEId5p9LM}MK@_zi
z<_GZjKp#nX^I#3%ouSr?)kfeydhtZp>=%?-tEQ;+ItlVSx-g&~1trmG>jG1;G@Gcz
zz{<+y+o+Gq3_17An;Ai}z0ox{bFROsbM;npiVvvUDwkIV1`;-<egH#2yuW^l>!Q<I
zJ5BzsBX&)wNNIU9HxNM;<>?C`iOJF&1E<{*w|7&uc13>GUTv`0=SRqQZvWi2=s=%s
zFLzfUxtja*dM~8?g7|}GwLLnZV$>kPVfQm#f}Cv+utDg=1<Rb9v5CgW7z`-_SI<z^
zxHtY-Fn5EaE>kzFm~NSM4l!)e`x^I}&lNxAWP!~nW3ZN`5%%<s)B|k<b0Tl#sA#LP
zOImUjsn`WX-#rY3-2Ons)@i=)rD)1CgZNp!-kQaCFD>u0?ET&wTgU(DEF7X#T<n7U
z)ZAK{w)V-jZ>5)Z{%uD3Ox5$p&PzVuK7LZmIkK9@QKimpKadI(LJH$dIqR-}j_@w=
zfSkS}>C!Yu<i-?vpn3&x(osYB9v_4I9G|!^Cn?r}{_$)OpO!l3dSzVZJ#@`=4h(@Z
z%{hgE{pMiE!bKT5`4!K&O71e@2)a?WOvUBi_(J>sFt<917MN79kva3##)35lzNL_v
zVT_G{&4&PwcXqIPGk(6xv`1+RzQG4x>`?8zd1hVM9Ew+jwu8do8TceMutk}Pb^uXP
zf4T{&L-i}rwxE%XjrMHJ-{1b)?$Ha3*@ocvOHo=!AC4z`4m}5>&~}xPoGA{G2dZ9U
z$T4mjPMYY2`O?sJ!1vVbR+z=DOSWR`L-;~{<75!%k@qe|#R~ZaS<!qky2Xo6()|o!
zX>@kMGj?Gb1MbO}x}=;y&0lmsret600+3sjJ3N%&?wncgdfl}?uSi8yJI9I%u34`I
z93!@gT`}2R14gk&c6o{Hc9BTw&{rrNphwFQy!|(J-Y9fJT-dKd!L4lbX;#0zt{iG_
z;-^khrN@6{j4}>?Zl9IXtFeI{G^!^5GK+JS%Gy8?H{6P{iL9bIaWbQZd=X14LrkH%
ziM_T^W{jKTpDD3#UtW18Exys00XGy`Hx@4bJhm`$B`zZ)13)2JI9WlsRw`ysCf#02
z(pb#&<GAIpMK+NbjM>y-##+X3V(yW+xFdf&S8fohQYE-tw7IWd%HeBQqbgPSe;p~&
z#kkPF)&{;9Jq(MlSC-w@wrZ8lsnfSPM_QZ{mDaWva6v$cyWfx#xLj>yprU0CZzvb{
zm^{NT)vv&VVW{}q%z(th<OUOxb|{cTT@v{kV!9{Ffm1o6BZ)`yB$YkP%r#Q!8jlj+
z6YVJ39@Nr<%s(P+554WG{zmWipA>|{<j2XuKK-aJeh7+l$?YC)gd^?Oy5fh=j8bu%
z+7u^!7vff@r`d4LoNW4hlo@N=of?g^{Zd^&TKSxxwLLLWsb(%4_(i&3vLY?JaiKZ)
zE^1F6${@zq#mxQI1JRgZ1${I1DQS_okj{!rPf61k7yqEW#kqAlSRx7KZMRz{)?*Kv
z=5M&iV>vl(m`I)e9*!B|2?)FN&3*#^TFyD_m$#yqy2kC?JHV?YJo4SoOaY$JJtC5>
zup_#&viWa&a0En0BQ$1wwzUTuoUIqLPpV0k8Ue+4<rQO>BnJ;l!Y<d&JsUtj0cDUv
zdg8RjbPNVyc0P;d!#fkf{8~I8m9`;+#%c)KCyD!(l${=95<a4w)PXdpB5MvW!QIxY
zgjpb9{#<#iuMZV2^s1II_79a8V*kTj@p<JrS<D_QSUlLt?J6jAa-I44RIZjNCY49f
z3RI|5O~j^?C}vWRyE)!FIo>-G;6PGli$=SDbUma7RUP8%X3A62BTn5C(R}2gXLxO&
z&7bv;4kpaF$Dz70Cgpn6(a0VG$&18Ex$T1irfCIEG+KEUMpvB0ap#31-+4+!s9fWM
z(J)iiG5=t|#`IhT{&(1?fj+@Z$aPRucGWD-S{>T`;<rOsP+|{2!{<$Vh;@#y<*sh`
z%`aUN*!!O!ucLmHt6<iZ6SJ@^b1w>h1<TfESJjk?3z}H56=NPYfVlcnx&G^25?Gq=
zyPbJVKgZV^vWoFth(JO~fp7=BzE!+BG^;e{cxv2Z*2dX$V{g<~a$g~g`$^V?#7^_<
z@4ffVhPA@Z$D1&F1i!if9&%OOHr+@@vo_F=@QJHR0<}j};69sF4T_~gVCil|NxskD
zBtIR{;{t`C3x6|=<fI^eFHxpd?5spKbC%2rnHy4uZ6?2J%<x@_=0lWIkaDvd1GZ5@
zLThAe06~rEQ#1uNxvs)2969z9zMv^;4OWB8JTSj28n3}_C$Itei;vpEmE|Jle?IKP
zS&q`+yUe?0saUcoMwqI9qCYAW&)Gy)cvP!N6@GH4K?apLA-G8tF=_|Qp^a$uXH2?s
zPEMF&^NCd_ULV4wKXjS!kko~+8EPr6$ak>U7RanENv5TtaR?YtC?pT1<8~<ex(kBQ
zh&23cyHG7!dWsp(JjM95>|q+@fFQm({DoJDDF7Ire4$O5&8(S7UZ+#EFSSZZM=aeX
zrU%&J<uxJWc@bB0(2rS;b^YVO{~7AFKu(=-2Sv^rnLtZ7nWfXOezbC8eG_r_#Zt4Z
zJtEm}=tS(JH391Ny|p2VOEA5QTQC=YorQ=Eq|G8gaygcA3dygzO4`k)GYNs7W(9ar
z6W2s`<fWCL71hS>&N&hrXoJBpq!U_IMkOurKaW$%H`;udiFcJ>NAi#);)$8W_}67+
z&{nvmXxu>v!ONtna9N1~`}XDQ*Lbot^$eD0Wy;?)oEQ*;lL9rxr-5ZqNSl-D*ywWI
za~<Zvr=q9de)~rBMkW~^{M7`mUM)RSVypRQ1He3+LFm%lr)VYZpk_mZWY+KXt^>Sv
z%f&#~PkR<OO$zZfvVJr_`qpzQJ+*1}UIGsgttrg^Nz$}u_u3wj^f;1#8}l@S&p6Fo
zUE`VA`nLLmW~h#FilKdd=H(K~vlh1GPvYNNzw8f2v5!JB!0Y|j42<n@vadH;uwHUQ
zVyVrtUR>Iz@l>IASIOo0CKe8VLE+2}AIf%bY_EWQG+NBp(ZKEToy(qillU)p8%io8
zdv88sVt&U0S3JD=gyyLKNzs)r{>A^%<pH5ulcO?lvN>VgLTPGZT#nC&!lSWAGZpua
z>6jS{NcmB=fcuR9o6E6M4|hnI^E0F<s(03oiIw>9Ye^}Nrk-IY7?_i}t$Q0`r|5Ic
z6;qh3P>6-SXf^rz_y%S{Awsc25vsu`f{t!f_{4wI7ceu5h^)7nKYtPXcCYl0t4gVg
z^Iusm@t2>Ow~M91GnfVXkMRnhjcQV6khd^i$b7;SG9E>+kjy(M+T{a=WjbK?FIT1j
zJG?l2%`s={lLF_lM->k%E;tLGq}lf!h!|43IfWoQojPzK*k*C1xLSg2cLq{Vr(Hfj
zs2qP*CA%?DK*}~lLyxQ*ckP={Ek?>x-kJhYO&q#4f5B|;@KF$BU&+^K=6Z$vhO^*3
z(v%i0Ws^p)&cJ4RMS)MAg}!|o$^d;FID69wRT0n1aN&DBty2Q<>tBQ;FwD(Jb`BBd
zl!|e_9JU8V%1syLoXE+<OKwPVrT$!H#MkacSu}O1B3Or;sfuq-xq9Q_u#HvGNN(e)
zGBAyqH7W$O!`Fn44McnkiSvVP7tTw)d;x)Y{&HF@CB37RUy`i2cgcx)=@_B%PMM?Z
z4%_o!yt7`#(2xUij4#EWF>?yIS-7YkK@T3`m`3ftA}UkXAaw-wXCZDru>@Cqq82i1
zwI6E+cKeqYtm1rF!lxMtGPP+HDTX*Z3iOg$_?mwXbHX^xM>MQ8e2UUl;%9GGZ1|(_
zA6c)$x^JQX?+awhTsZ*)Wl?+e8+(#epb{UTU|%tj4b(8SK|veHf~E=%thyD)Q6vF~
zABn|mh&y!H-v(;2LdBhl#W<`Hi$qsCB_o!mM*vs9dz5yXiTW|`(94F1GDn%i^sWTF
zu{6c>P2!X3x6G=QSC(Aa7OsfWI5(7-uCJRF`l_ua_mwEvCjvabt|f2J&0d(nHE?yl
zcG$ODe)`$!uhoj?6Y>ScPu7G4#*;9-MmlGGkhvyYWZudA81J4?nb94k*$kofVoZkt
z0@$NI2YmEMlB@4@bGoTiVl@a7!1(f+mZF)*Z}Yewv8>i7G|6t()#{<y8V^jlIfsp#
z!YStz7AkQ0A5pfeqbp75>5Cb4vkCyAU2chxOu?)J25F{_+Qi~NIoCQ|9LganM?YoZ
zLna>4u=eOQj`cV=Vu>I_+Ko4jcW!$(7HF5}=MJlU<H{q;E|*2bRV+LcnRS2FjLp8S
zi6}KoWL`Y`Ok|m+<gz`sLghQxMu6x2x9?!Opn&P<z-nYd0Ct+Ku7h!xiX+?oZ8T&8
zuwce3$^hUExrPI&wFn*H7|4a3o0h#0IPk%ovSd@R(flY8^q5}yowA42Ipk#8lOkuB
zLw(p&-Na}L|A&TDR!bqOiS#&&!vYAIHsOTK%<Ac*%8@WOY)I%&Ff=vwd-kiq1_*#}
z9el?#&T3kGZs1sQMOcV$qCAaqRpK?#<8bf)C2;yxB8~EXY+oKXoe>&6?f*-^yQ62q
z%bU#l#amn?U_l!%;MABrSS~GvmxbAQ8R)GznWx5$rQ}JAmYpgG!dF7+Q~=ULXqJ$h
zOwDLEEs|{OH|;-zj^n1xsNj0f8=IE!xwAJ4?F{<7c}r67!Zd+n?2srJBJy&f(O9@A
zo<5C9?&D%bC|wRPDq*uQ@0A%nWBg|B&5sF=2ctZn3-dNZ)-|*Zv^6Li8}ux`cr^gU
z*!V9kHaoC<q&`^w0YKObftx&4pxXb>pFEWg(W!&k_SMu))YU#OC=iq^0nQu@W*BIh
zwOh~3eW3~5_&MS1b|qOBbW~MUcg6uD>u4zPwQFh;U-J_x7)J7=!K%birmhlK^x3jc
zovM(l9ldVnOm$f{WZ$5w`Xlj)-5kEI>w~6hC$TbE=RQ=XvpAeXqplcw>pBUMWigf@
zG<JjHAjL#+H7;0;GUJ8O^}-8^m5sk({|$A|f3d$buFO2DJ5qe+Inz(Srv3U8_>6pi
z+XoLFa~^LyRz1@RQB-I9Wz5{5OB-u~sL2Tfaq`Og-?tn|nU&u%uce@9x{Ele6uJKG
zn`lkzp;Z%IlGb@Yq&f$9{b#0jfda^U%mB`1%+>j5vJT-G_O$|*$iJI-hn2qgHe;;j
z4a;B<uuT~G!Mtf*OZGD1m{ci#*tLIu4&9XVs`L}hl^Ky~F7-~*l<d^!v*1;JaS&vY
z0XKB>Qn>p%!9W!_mgeIu+_6K@*a6aJpy9?S2p6P}vF^etcC8=#)CGfwbX@~tCh=?P
zDYjo-(54G@e(Y2c@oS4-0l#h}?@>y*-B_CNJ-#sB;t#>T8V;vlhynTtmO^}Dj60PC
zG()pJX;`D(&!ws$40~7?Tzm37U$;og&-L4mO;H<MbP_vO?3oQ5!WOyEe3utaCc6w?
z8eYa;Hhj2SAPEnrl<*hv4aV%Gw_w;XoU0oAPB0jZ%WRY_U|1}!pb8jQsEmdL_*!*0
z7(NtNWvWQXE|9;DU&>di_FvIiGpr)c%07-CfOt=kfc9zR2sUkO=d{a9!14HRa<bba
zesc0lxGEXY@!bfI{aX^Lu9}oO7@g6j6P@{0h>Pv6it(w$=d~jt#OZ(0bY0OIgW;s=
zI+DGr<P)9zJv|77Pkbp`B~nT5i7k=07S)q}qf%OWODe_U93AN&7?p?<a`t}{A=yfK
z{IA*<c*V{iHV*?-8serL$vYS`6~({jXlT!1C0tD_rd%p5Myh2|xh|Nijk?aB!rr>T
zTl*!+znpAwM4)NJQu@*}$ym-+i^w8H!%XVj)Fzi@bqe2wFj+*<F)XL}zXAN;ofrx*
z><Vy!ceQvJ9O#fK!U9t$jbEEHKav(H?MR=tEr@|b9H-uGCzx-{3U<J*0K?D~&?2@l
zEPj5Cvrt0XfSmpF*(}EV9&p#y){c%$sE9W2=1o$f?TwMq8#kmR;LVK(PiMh_0|Te2
zv#F;Cmb75(Mr&>DA|Hu}@xWx~oV+OgEm;acZ$0kGwb|p@YSiN-)YXg!?1jETCOW7+
z9^mhtDqn9^vTx}Im3Qf;G(3FbS<AJ2D!w!fuX^IGS_u2ih}-*cCS;t->y@vnJiPv9
z2meT(P@u~5#XWNqytp_bA`<ki`yQo7N8UbM&%F_VcsZVrc_ToGjfVg=!jL)0DGVv9
zzf5F)+1k*C3dBmK69iBTyL<{y3dh|%<C+Co)_Cfa5?ixkt@N5oVSzr(DLt6Uv$wX*
zcGCUSY=Uj(1w7G4nyS$EOO27mL;3{=QsWDFVN#lAu91(aEI=$RoQGfZDAf(ej<32C
zrkrz(U7_fGOp@#UZ+Oms2hZW676b}n$|9%cUpkW&|Lc+POLI0>=N{7=lE|}^;2oW_
z4^>JJ@m)-?<>@Wrh4gy<dsk1mO^>OXr3puJ(pPzF5$b=xU~Ki_;;bzj=cFkRoT5HD
zlB~CftYaHng&f-aVoFnwrj&^B2*W`!6PfdW+uEuWvRu`|KJAJ4AG6p@Qm-U_{wm`C
z<QGfi?EFt<NR4p=UMN=zTeto;KNnDfSu<l+l~n)W(|U2m+7$FBFZoUc$d~%CN0=ha
zsEo=F&TutQkM?gBn^@L~wQt56pGL<mI`H^`PM~A@VW>=OGL)cY*0-?uUKp^>Tqq>P
z9p{D`)!F4Nf6=@bQ}df|t1=^c&|9-M>M)s9B-?qti_muT9V6#QN5^|rlV@?69G_w3
z%%inN*|zl?aBMJjTLrkGwt5nHJk03Gu|Y2clgUpmi1{r7Kst95Wp84R>{+;|LrMiR
z5eJxxV7*|t4EHalb|#WL6wTAU;#$93JSUiadQf`BO`?XlpDK2we-g0Td?8kc3+Qa1
z_fHP=_osDif4_)`vqzFa(Y;uAXX7=v(V#?<A5RGCFZp$nY+snE^NAF!K4w%mqVr)C
z({H<WDwR8Tso7twOv{KVc4=WY2ULJe5u(4_6jAC1{<=d9oBnrlos*NJy3wX4;wUaQ
z7*cH{S-swI()ld%v19%HPA-+}?APg^s91nvSm>Q5zCkI|&G^Dy-&Y!+GA40QYxFER
zjeJ7sQ3-3}%1ynG13-V95+w7!W6_u!t`NjacxJa}OwixHREg6Jx)BRNg5^28+aI)?
zb430*#BOWBHem$*8fQ!@m^A|=iiosq^knba8*Vum+)?JBeOQFG4lin=widJ}Ts-$7
zR;O|6T_;{wp5trCk^B>$H1wEhYGLMp8#!Q*6xCN}3|Q`)I2o7{mza_~v+k^4_&10{
zVzcP422R6YsVh#XjmyiCFOPL&&w`s<>?Wf;@52{$<#GBO#v3fQu|b67f&tC#L#Zg&
zlVYe9_0J<a{h7k2H~=oPY9i!e8UJK*D*Nv(zJ@8e?Ma{SF2KCLm}C;Q8TJ*7%knCU
zv96Fb6#yv0Lc|Yq^#_<}77xP|uJ+O0K1@Iz<nwV`l?ugW@}Z7B)@R;3Mufz_?J;pl
zifM_P6+}eQ>lRYUt6vy=B0;3V#UgJc@6R`sBnw}N$SC1c;Am=~0Ex!DUV=N=%H%tf
z!>pSlYf2G{zPGm&%~}36-vzgJQ{gz4L7xI9sHmHY;2<KK!62bux2nH?V(1XQVezv*
zPvgncEL%0N3;eWHKL0}J6WO!hV<VW^Bxn}OsxB_O?1@iKzL+Tujv%FR5)V1oe-slS
z9F`yvk}TtHJQ;>n3xDNhH8o|CnFO>=EvTc{MB{LRB{+o5W-!F>EShtnfsMA_qQUtn
ziX-qW7X*c&1yUr1&~;RPtscciVn(HCE(}*Oa9-ydDwL40v8tbe9e;^L7`~d=DN3Yj
z!wr&2pNYhx&$MQ3lmt0eYny33W=C51Woz{PlDpoRb0aLt;0C9<ru3b8NbipgqsX5F
z_Oo1O(yIR+j56VXP<P+ZeBkBdfxZ;G_L%QQhtD}w)Ljw%*KoWQM<4&pc6E;?%cJvx
zGAJ6QyKbUk#G72{U$MK)603LDZ%uhnPl|byiuUxG3D2XZ$U>AOJ6-ZTGai3XQ|n#n
z>IB@6x9Z|uOKxwgL<Hj-%is0W<BaIXv_&PZ@pV7E$0g9!uJvBb!YwG1<SY+udTK=z
z8f;Z-_<JgvXnfeD4K>orA)nf~JJm=R$}I|26tDYFf^=UMS$ID!L8cYjq1Vv&x3ui1
zYebb=%9@ftc`Wy1<s*9*<+0Y$*GiSxl)|^s*^QNlNH2r_d?O#5sBCkYh7vWix_Y>g
z+LRIhHL%|o#bk?K(3J^q$b0@gY!2KxAP_-5Z|OM6TQ&YT>$K<fV|<)f$SZaNQ^+yb
z4i<xatP0U8OCqin=2dh82c~7d(n;AD;E;l^*oo6==UME6zJ(^)%otU9;n|&GqbViV
zQ0ts%ON%*m;jojqHLEsvK_X`fBV<dK{@q)7AcV0bk(0YXYu#du+`ojo3__4dTowj#
zv$@13u-(qghMg!0K+8#Tw7mZX@JO&4;HsH>RNaN50J`t7pXa{0R00D;G4}w!J?)Y9
zn3iQtI?xuHvmOAU??j?9!Cl1&s_HBBtl_{f=FsG7BSN<ma^7zJR2Q;7*0S81DfM86
zi0vreZ=HE-a6{0(0QhQ$F=*;dq6nfAC#cW4YL3KE^n>n9-};Z6Tzr0bi}c?+xV|yk
z6cuHP-u8fffEeq%uya*hF`$dFgWE_fQHTFv@?*^@p-MPBv_@nq85XLOy2pi6im6aa
z(oww&WYKDcLck_(IDgRpo$;W+WD<PGK+!z|Z#i%KE*&^<sqg=t|AW1DMJIR9LLDGz
zQk1;KCv~WEAp;uZlMX0--ZhX(c*<!%P9#Bvfx8KXU^8<pQYkQ=uX;Lv7k?TDNG!F|
zgZhh!*Pzx4<j*xyHw(>Js(rkmH<0Pcz6=33tQ%Ft&Z}*4itb$zbL*DmZMJLkqQ2+X
z+ju#*|L>)Bza}8#{x-~M&s#a0+F{i^Nt;B(XS==#Pa@56$Pe!RZ&|^?EF2sK>4Gv*
z_OK*W9xo5KhbN*dl5{Ut;LhR<6*p6aN6=A8S%u?b;?@&Bu+VVObqKwPAX$8uKto^&
za30KDCt_s=T6l+Gm&~I2k5m0Pc^2$5X?B<?1b>XQRl*kYhSmjw-W=Ef%;6dP-|6B@
z=TD!4+mL*_>ww<@XT|*(<^cGE8ZPF`9Ks4wvZ#Nfbcq$o?FI$J0ldMH81-WhavJLS
zEPi+qozP0}q;F%tNc2qY-n=_W2`@rM`jk)-_WWkoX1odgRkFsOaGvXeBD}ka(!@M&
z&^0eDbR`Iw$<X#(##@nmT%BBV?;IV*EJqPY_fygtN+n<R>0q-M{2-Od$<l=SWolA^
zjy*xTdUbPX#e-kl6T<4VA`yRL5B;+$=s9}NuVb>|4d|K2TBAMV&-i?Iu%>8GhJ*AX
z$pg1>ds9;E_6XtdGq-D$s?`2Hd+hd-5^tk%q~FrtUuhli8da+LfzbQc-)8T~ao}3S
zJ=tV#u%-q6_N%I)hjz7R{U~$5`wsy^nkvm4wa}NOT^MCfQ)Mqf-EjW$OXdmG#;3)6
z$Ap{lIhrPOPG2h11)nZapWQ96Xf3NX)b{1jtF+Sjp0R*#_|7@00|T)aTj)dI@x>h$
zG%hPE-F&TUIf1i;u!=g|98J8!oE@u09VDjE2l4XkY=t>K@k$DKh#3Y5+N%=TM7{iq
zYla!>=}@qg!^Ml1Ux^rcSn=<ir~)Z(t*SI+JV~;OJj9=C2$5~V#d8N%pzp^90}p5M
zOH27#89xohstODBmjGKJtyop;P=*+;E%ab!MO_*$DFHcQn*!|ifK4-6F1Qv>{d+Vr
zcs8vXeDTFeP8GT`s$07D&X%_T<v;6rS(%gT%*!Jzb+V7AhKkOb(f@+0tK%?LGI6-`
z9(8phQ8jJnG>2CG5^uAutbF;hQQOH4>d9O2^E&d+?}!bYJN4D|eq2QbH*`1VwFZc?
zSX4Gv!s$PCeSB{I05AP^pPNOuG^J&#y&4<CFe!=NR>`&!V^|}^4@2OokMyNsdw1Qc
zTV8fd(0Pxtm<$3?dV0~HOy{vG03;jjc6xS10!;SrsSck{(yT1g+So&#voS<Sv0VYx
znU7xd_Lpvz-?}K@gexAXPGLQ!X&NAlz9Kp%JqF1xc9iO)8A=aIQR<gZ3M(+Y(_jKu
z59WAl6EA8gd`c8p`12sO_6`bdx@bb`yPcKa{AP{WVXC&Wi@kB%Q2G1Ye_=y!uh*Is
zU=9@x5DX%{95Lab+d35<-hq`X6Vu|CE$<>q{!1_UG;8VoO<CuJocUMEhc;viCj6}_
zn&b$GuMktwF|2;PJZFQ-_iEs^Yt`|yLn8XpRWE|{7wi{Tg%3DJN|QFrCxXlgBE1P=
z;5+zN_CzXNINQF$&L*jeNV*)|dk^zAAzC5Ey8D>@`Dt8B6Rmbp57zCWnA&;{_UY_9
z-hp*DQcUXU`Hr>KKuIl0q3fI3S2A_KSRPkq|CUWANxFPW={>T~YTY+-{Ps<iqo10w
zsmmp7wmQDKSrgBmP3v9;irQ0=`J$(1xanSrZufE)|D`6?YW_cQ)io>4S(=E13Ldtn
zl7fF%{|1Emyw>-$8;WNHy-oBSeNIkk&~uus4!2Rv;i_<{I*l^VN)yZsgPp1B4kVlQ
zxt&$xx41x&k^pQWeaT{GkTT}-h5kbA@5w$ms|Wbw<aP1Qh_l;5B1q(tMOzt0kQTCN
zesfW<epr2AVA@k+uhr}7$s13FTV@ngM9}J^ff}$`ZizyUWhlmpknb~YtQ~x;6YJ_P
zCm`0LhM?kY5kpwqeq!UEmpHl3Terw1r7$+!+4epu44MI=m}}RM@@nGZ2C!;R5l4vX
z<K2=6xRqmBsw^4&M;kpKyF})#pA$%CGiSNiX?K=)iMy72P&}4j3;TH|;fOVvn%=8p
z&+Ensz1~nM)Hhx!Q%U%}=~m&R+S#;jz3n`9*ON~_9lzNj-l%DN<7R^c`~2gRF1C4`
z=}S4Xc0p)GuwjU=pBqu!g|tXWx#g}%wpbAbb2((sOq-F0EZG$1SnMc0h@As&pf}Kc
zWIo}%Q_mrAiK{&<uNConcYS>RtIPjiCLz533fhU~-<SVUPjmeuD3fKK^I3iQTqmeo
z<4ObbBTBXE%S&Q4E?#@y!Qc3)rs6>2?g`g*oP5FUtqF@@MdX8q3Lj1(x_Fj*70LPf
zzfZb+3_1iTtXsLYo=v@5#rIgpQf(fu$PArM0sLhv@34E>S1Oad1Btv`6J_`(mn1uK
zF;{zC&$>mvUN>B7t?xmVU!pfi&ul+R+S<kJW*#VQ3}yxCN>7nF48O})zaT%otY_fo
z*V@YU_!I*#i|M(yJm)_L<NI0`7cZ=yi!U_y$tnJq`Ir4E@;+Ig?5gU8#fvSCTVhtP
zj@k0llZub@=N?pvK<Z4AXpKM+xPXCUZvD}8Co%=@cg`EJ8pC{EMK80Fv2Gj5iO-YF
zgw)gneVKt9y(KUMOf|D6vv1QfKI4DetTrVdK#+8Yv+oi-3=Ys#5c;6AW+pG_d>OqD
zfZ@+dDW(2dOic8sCwpcy%pol-+kh4$Tb&w73?c{Cv5f7w2S%3V@8n|2geGG?%=!jp
zD%>qd0A;h8FYt_aS(snZm&??GdC1`(@Q(<pp*D05n!Gm;^9cV#?>v+(MzJmj@hc|F
zDguVC6#QE}yFFd=E6hkK2O6(E?H1BpM|0a>$wIrh0~0W`<Fe2$=Aww13+ZXdcctYm
z+-weull_8vf0>~amHXXjb<N=N50;tHE&4i!nKc^LA^M9B^L4v+B;rbEDq8SUEkM>T
z0IbaT#c|3-Ojb{4(;F@c@p{ob@@oFThEJ!pv>@d^CTULC+H{m7Q3(Ysv$#vE^=YJ?
z9DFWz$rJ$PTF!bFy<a2v=bL8b>uukQuSpcQS<)NQ*XJ(<t^TZ77*uoawfb<sm%hVb
z$f45<t}R*X`j5si`g2*sPk{ND&WArpzjMLAJosx#>Eg1Ivm0AkY}v?S%HfiAX0r;O
z)WTpJP}-&0bNPBSr>W+jf#8`L$J=JWWpe~apmP-4&8S%bq*7Q*QK66sIN!ti<vZ1(
zttCjwJ>vgbYuc9NK1Q_NHm3_syZ5D;@{Z(BBGXnk2+b5Z6X(~q7B3IlxmliW6xKwG
zftZlWooG0_ZXDmy{VT^gO;=?xM3q*7M1)CNjm|!dXvA$iQrLucU^%QzgFX=pn%=i_
z+Mhk^;&jO*r<nVP!H}IU=tQO?VwxNz$#6r9Cla|^4KU)i?c&|y3AxgJ{=D@ku0|c*
z0jq@;@)s%)row!=@TLg{ek)<_iG{BROA-Ru!Ag~8o~BBs@dy8|Z5bKa(myg#S0j-`
z%fLuBORnlSe03lPiSbtH;1iFzAN!?BPRJ8B_1v@Pf9f%hqcbEjAN4ra*PC>deROA1
zOt%^4q_%sf!KfgkM*?|fdgLEtuj_cZhM2xDYF5EiAG5y}b}u9h^=zLQm^Q@Z^6FlX
z{gECSLY~cURn@>QO1_o!HS9Tyj#}m(kE|!pp{k~Oj;zOW-IsZwZ|`a7lYC1*1hX{*
z9;5V3wfh-bO;PhD`dV*0OBFeV2=0Sq^_YSv`u0plc~$Lni~<$`aW+B>7vH(tPLveA
zzvycG(T@pka{B`;!nCua#cgBWLy2R^_t-K>_Br8WA#VQA;5V)`r;n3^FTmGf!rAMP
zC?W(kNU9q*rGFOf%x2!hh1u!3)x(hiw17x05j9|1W(Gy`vVwd*`<%~g%h-P6mczwn
zp0_pyWwoUvg4vZ2r%?!BNB|Ii3CuW<WVO(5j2i^KL1Y+OZb#jDmpZ7-p2Ru*$Z4%)
z<h17|i3VD{BmzJ%TVVn}$TvNM&+kBa$4ESnr0gF+*(7@wXZU9WO2>63ZHxdWQU{lP
zjAhErU6uW@z0LPb@bcN*f9T}NeT6|$>ahHCJ!ZHj*E?Bh;2oB-+$_;^d?Gskdbj*e
zHVlF4YsG+tf(dSA|LuH#n1Udb!`};ccn*IoaOWMV%uF=%AzYay!c@6fr|XI>?6!mE
zZw>?#@aZt;Mkc8sans|)EH}T&3?U-C?7!akhj|E`ybdt6t-1U>ezz~gM0_J$sg5q>
zhASV)`H=5PG4I0+;a>t`eEd%6+xe`Izqn<R0CepE>WFU7obKqW@G4S(^-7b}RCNFK
z)F{+Mwr03urZq(gu$WCtL-nD&$OCM&VF`JXew>X{vSBxJCkZ>YS9@-9Y;T-c7slOZ
z^+>?*_@mq3LC5!ai?>h+CQ>Q~*+$V&WVmW$4L@xPda9V9aG#nsv2x73Bh7S2=93V|
z^-{4nkHP397cI2fuD8^d?K>W(PZ6<&^#C1?+}KFpBfGA`hzJQynx+84bHbRz7JG!i
zJEDR7l3FbRZ^F+PdIqG*0gro9N`yQ)qlWhc@`x1GV9+{G_5=C=^qJxb$S4*|jnFy6
z9Eje8aP@bQkO%c;&zq%Rg?TLM*~)Qy0@ZDVIfhMq2Y>l9D?32wJ=9MQXt`!EB%+G+
zX;{{d(}jn~Oj0eF%R1t|J@k)(1}@upj)y9r97!ZTH5bN^h*<gK*;%+ADY@WBX+cEm
z&?JX}VR>x^5Neb9fJ!@)b>ipsqde32s9ER$cY&9+#;4!wDyD0hxG-~9ohad67f4(d
zycWvdN3DHo935{3j#Hrxx1uU4=$V=eQ)Z1>l7rus=m8=cnn8Ns@A^I<C0AFuUhW5?
z9*2^i3myA>P(?Cc?zM!uz!@&|OqkjEg|Z*7^xnxu7QEYg<;R-z><=NUQd6_jaeXrt
z%k^Pcb6H9q(_!6!FZyYo4CGa%vi&ZUt58W<P%q86x#{i$XSrKC?o%FYoV(y8bW$>$
z(&OKUK~6(5z~oML#L3J+^LB$CjWU@t9rKeJ_ZyX>+9=Jj58xIH0Y6X~w~GtQPy>j*
zD<HqaTfIf8KVTRAqmBE@*fxB13MG5aME%gx-qKUTgX<a=#nO$Et`e4d%Uu=%Fuulw
z%rVS&@XhbYlzMf#)N6Bx0pUoX>tc5xlLBu05CxEaj1OR9rT@1<{;jC4E@QY$U0v{J
zoe<4u8)nTrJWtu3L?W(%3EiaF_%_ON99K&E=}p<UWm^t<6JinqhG{aUK}c5C*UQrR
z8XLw_j+IDLGTZN;o9PPolV?e?+L{a2h*4`0|Ho;#z|@|VDVZhGV=3da$nn-R@o-U`
zS9LrmUdZ||8WyMdTSMkY{gN0q@&0{5SmG~HaZD^n1|*1|xGYDHBIY3Lsy$Vr{%|;k
zaXHD(6$!;r;YhMjgGAtg@Wd_U7{awFDmYqs0A@K#aY02?1PmFv%p}i%7zUFhOy9w)
zFeISJRsH0(nQ?|W{6$LdgjotzO<bbzSaM%Bnyf#N$ldIMV46rQmJ*#{YIlYLhLhM2
zF2%;wtJBE&+*mmOsDH_Th00?PB#DTcmW^kOFKeR0ftgrFXp9yH0sFiHFSyG>i2I`7
zQ<m(Y5kK7gjzzd`K1{m;SYU=i&~`B&#n4y7AVuK&h!&JY(Wh=KM6krknWZfZ-=emO
zfTQBWvf~8#yUmY@;vJU`*7VVQ)sIojf$vPCYZ#{7Yl)mGxbelmXWZf639Pw&o2q~H
z_~zC>Bi6Cj34Nq<+RyD?6okv5W$I8OAnH4U7%|1<W@>_KAQ$t~4^k+oigIS9x<Q0;
zfX*G>R8)oAZHm}L!?FRtWI<TN|C?T>weHpWpMMSk>q%Uvs6puRhDc;@^p~-AdVTR+
ziFqAMKRdTT_2InMe{X9Pl-R{qh1kdTIoqq+LPbI~a!wlKh$Xsi$B#VETWj*8oA>N_
zbK+Ch-16l8xT8*FJi<tgU<%cu&^B)*ZgOTf@^{x=yjXC~?j<;vdiSn*H)x#HiH|ER
zxZ?1;zsYO-bb9SH)NAftV$6_OCYO{RG|_V_*7^;8nqF0cZ{8C6G*<0Ds-&W1Xtj$B
zOOR%;?p#TE0YwO*I$3SYMPfH|4vtp6&cwwgzIi;^&crbQJw&razh&(cjLTb^(xzOa
z;s}UjC?n%P8WAIWsc-5+uel)sm^xaGT>xjBt--07zLTRnPzPkSH?t@vEZ2C-oG4Ym
zp4Qeq6WNVQUVKFs(Nr&^C5hQMd|dJOUS<-sZ6bM1I$-8E=@An&zJu>R-3q2HGYBwh
zgT=C16afYgIQ#v}eRd1EHG=ghT#GuU2?)iPaq5M(=x*nPKg+XilQ9DzPZ^L{oJfOd
zc7G%hnd(2gmm_NWQ4@F}qCo0*n>KZ3kqcI|W@<WB%i+o7!LGXQn-dp379OYhJxRl&
zye`mAd>a9)WA;n#7ni4jsaoIqQdi&NpO^&SKb>g-LBe6&hTrHBG`(Wpsym8t%DCdr
zs(G%OX-YmX#$AgGO3)?!w1*)3so2+5#K2`(#GU+G==S!z^m+5QOKE&pO3&%}cQB5P
z=$<q4?qCSdZU^i!{TNapkUr?MKX$**AYC<vo6jOxaJLyvzB~VP55+mYJ{+4ulWw1%
z=Ud#=gnoOKZ~MsQWH=)DxD8sAMhk>H6|_{|U)GST(Kl2!i1b|v`&Hq7=|Q2D4hxu-
z+|Y|{UqUgRYEjC{xlU-^{lc-r=idb+wlrm6Aa>y-wKYB!YPF;8A^_H5P}n1s#Er7x
za*_eUdGO4%wa*N9KU3Uo?MP3OuK4@;0%+DO0mQk<sV%?4b06p$inxH1)wp2Rj*~8S
z=DVE4v;&h+$2TM0RNmnbF@pYxH=hS5mFJ=N_}nxI*rrVzhx4k_7Tx2dXPA?4@K<g(
zx|;DnQxJy3A$e1Nj>t<pOzy$vhTltDRGoKh)3PcUSeW<OLl3pj#d_P`B`yd=N5fGF
zs;h%RD3VEmA@IhNFf>~cs#KVj^XQqrawJXwQ%Gmau=&9dz_{Q7JiVzQFW;L_B~%M6
z#~aYBkPH2qvIO<3?zoc0?G)I<0F*AYj7T!G(2*q*k-Omym)C&0JcBUbq=(U~+nUhN
z^HF37Flx2?@RFst64V{S5%aHt_c;rgMY+&=zT1OK6iVV<BQ(_8`<!3(y$-HeJ4Qy<
z8>q;m<2N}^G8&8l%dR8?Js&j63R6Ls&zh`cdZDB_`vZl?&DkBKnOucrZA?|Rg5!<{
zLmbd7&O3e~q`FaLmg<nPqd{CE(3sS$p7$;D$Z_!;`)Ur9R1iuLFA6hCZ{)#uK^su2
zv_TSRPQ}HjgoHR{0b7YQcUKm3W>nG6fSu!jXEL*PNprV-<iIERFKJHQB}!$9A~wuC
z9wiq04T{987M_K6M2W;8woOVf<x?C#;u@D*ai2IS`Np3cuTI-5PLfx7%pRBSl-*?)
zndg#k1}bEUuR}tpK5$(d42QaP@L1|>Yybzj`{<mWAtjeZhl%6FOXAO?k9<5s=7)F+
zHupMu<C#84Ja&BC2Sq;1$sNxlQ1iy)3G;PmFjp^s+Ji|xTIlX`GT1{t8%^XB1W4gM
zwX|*Kc->sqG%;({O#|6%j3x1go<mxiC)#Z>Lp?IG5l9Vc!V+yuY;37l&abQy&1tU{
zLnTWXOPa%=K|^TSumSS2P{Sb99A@KF0?D31<IuDakN%P}iI$tjeh{8K!ry*|S9x^v
zkbH>#bS$D1W*#?WKnucA+DV!wV|I{t2<BX~Zd`0tr@`J-r?)KKXB|%4kvepNlZ=iF
zL#g?-tuK{(mM(4tuF6&u`|w4A5%jHx;uVMgo*38Z@c+-}oOAe<YCN!fsb7&_LrDPH
zAUjLd9%_xn{{k`i_f%qG?eIM^bA)l&RI)UA)s@9pwzaiw6D_OWOkpaS)zjGX3y{<B
z3fvI|8F|y0vp-<sV`8aM{4&8bl2&gM8H0R-kMx_SS0VSE%cn`@hpMj4irRG0A$FwE
z6!d{=u8`)7;+yYXFE*#c%MvI@Rp$qCE;_cjXO3&N>l`qA{EO|pZdLN#$i@?2ZCO$#
z;*MORayB6~^^UKuS}KLI5J)+Ob}fpI^6qmdIQ+F*Doy9E@D{24H8uI5Z`xHc&yA#j
zr*DJ;h9D5%Fqa@}@^4xgg~5>j$lfMSEly=Go)Ed`WQv+-O_{QeXku}WyC^e}mMFwf
zXHSn@*h@>E04{fL;nUv0y~B!4yV2ImmoLl)Gpc8vzQIIf&~scWkYh*+B`p~G*^3E(
zovA?7r_|@_#1w>RQ;EVUjqjROygxid_WACVuwZjp0hg})N4tj3D)HJ>LPgN91h~xW
zoRNZvp}XX_KdstIk3!sKvM-dE4dO3>BZI<lDHoejae8~pKYX~bF1!i(vhVxNg-w6s
zp1-X@wx^zNe2)90>0Qu!U*IcjjCd4nB>!-o?7VkU%)5EqPz&d?TznsU@FskQbtD3H
zqT6Sdx6neoaXB5x(6Z%CO~joMHe+DGFVF7FDK=lVP(JNX3rUoTKVZ5^!P^?Liymd?
zx%@A@IC9pBjbcyy(0TDO^*v=<N@*^R)c)>=B~>K$8YCqAzL)r)#GAc*1$en$0JBde
zVg@F`h{CHp7*yT$W?3vDOb|}3sCP9|-6&tjD1_s+Q#PY^YI6A#x`)~wWc}HfmPU*s
zF2d>y5lI2U+gX&hl0u=6b!dV}Dusn5uc1NSPsRhV5f6rK6?8r#b^kJ(b6;k7R<Qc^
z=FAJeAMZxU&6)E<_qH$~7&S=5?@|Y6-F*e^bJ~{ePxa38y^y&%>1R*9hQ41%*r|;d
z+RgtSisQ=HED#=d=)Y!JtjX1uA@LBzf2=3*2#iINi6+`|3gvMo#f9Ke#&M}F-rc#{
zP!<)bBH7ZTn7`NK{rxv+IZ{_jL4g>ve7Bd27<imZ{cBVL0o6%WL`DOKp*?;~<Ks`>
zJRskn3qw%#eX0wp$>q%bvo=~SUsK7lo<BVMe<XQWRjTp}5E=$zEoBEF_=9Ui4{P)5
zDTzwH=){)6fq~T<XW5o_|KOGri>y(2(y?p~YO;lBubzKLM)UGsJ!PH-u0?kPc}IF)
z(A3hYiS8v61N|dt0)$R}^FLjxl7{{NMgywAwsv$eEtpJD{#Ci1a}y%E3(Soz4EfR1
z5>HrX18{s?C>^JWh9@^9eTK)MnU~j0;>{Iq6od+Wstz+B^5{nBL<n%#dysXfls{v4
zy6lU}t~oO`<$ou4!91Ni`|sKpzl>H#9f-m4>#DBaoc{a1m`uM>7@b7WE@hVo5O}De
zepE}DVD2+d2OIq0VI>RKp%*nVe-5Zn!?Njg#DQwM7BEwCPFAjV)XHi@I}t^~tCe3E
zZ1CINfwc}x-VMYc>h39OVJ1cdhh}PC0>3(nv~ztEH$l^i+9F+YWmpG4q5u=#gRr))
zbgIjqIy3_~Kb@8|BjH3>itsNBV3Xb*-to@t+sv}NRl2Uk<Wq_4G8Tr)c2oZ0?}EUT
zgh)qb_VPBv#shoPlUr#)6d<V_tI?^cEcFBZAB_Vy_U4Oxw8JXvbjAsyPtrzXwwq82
z?3cumfy9B4pRV@xMg7RuoC=zLvF&-XJWqOXB@1+ha^CXOo824VS+Ja292ckRMzfbS
z%1WPe^0H7%54hCvO>Ka6uN<y&ce_7ZK%m0+lWW3~JdK>hHxoQr&c-3Xp=CLc*4#$Z
zvP|`X$=r+&#h9&IF&}ke(fR~|bo(L>neL!Nm_H&TF`OdR*bc!CPHM#t!}Kr)UqQ2k
zPaj>bW`@D8GDTu7Q+W|3r6@^Y#-|N-Jv)Ig=yX61nH@4i<AB$v0OYqWt_5L{v)uW?
zbd+>#&_W8F>Xi21LEW39Kc-bp&Ixh(yelI_cjdgMGGO6?iB8q?6;=z^&rNTReOwU<
zHsMF>^$DeM8#C`POI&G!mfBkz;zc}f_kS=(JV=a5%v-)=dDk}J-cCp0^)I74Ha1Q0
z(+^^^M%sZr-SfNXt3Z$IgVPzF6%}k`-lgL~Tw``v+MA6&#-GleT(Eil$AJB_Qb#n5
zEm0dlCn6eU;8cyJ(^>4hWp^%l)NwxPwypul=pO(bU`oBqX3kvUW8rzlNFG?ld9^7%
zbG6E%8u+eX|1M7uk(JWI`UpYZ8SM5gW*vDXtaDSsR=qfmgM)k1bm1!luuZzx7mcA|
z=}&h9T;8VWni$1I7Gu5VS6{jOU{z>hXuLTQTXws2i;J5*i29n$8WAb7m}G<bFXI&D
znnObqS3S6VWwj(@J2gY)+F2>puD){r%Brx`^FE!-+Mmz(ocXzy+39mWEOiw(%4(^$
zvQy=nLEYXk;F`!g&QM%upu43bFhaYxYw0IM1~74_^^uC>54zR0wpX~iVGij;?eUob
zAzUJP-Vs#`ge#huos`(q_k3A;2}D_D2gfJU2PE)A*Qt+?9@i^S(Nv<EXe6@gmE1U)
z9>sYBOO!pSGSG}u6*PnD-cM)?HN#-pXZOypm@=L_D}!)$XP*4t$rxoU!z!LcMJ=|7
zLT*QpZ8hz!<1Eoyrpt*}+?*{k%`^k&3wg@SmtRHP0<BdZwlrdbePFWi$ba48Y2=Q3
z?@J~f+R%U*U&a}u(@G@LT4KDZ&d&EYh3*r_YsyRGZ$kfN9$@}B!+akYb9y3n;$YoJ
zdan+we~h7k<vvp3U=I<lkrc#0f!?Wl))ovy$f|I~eO-@v{Jq9@f<<nT%c$904_~sP
zB8I>q+cV*IoX)r9ua40KPe&-TF3o!LsxL9%p5Hc%8kce3J&;~ad#{4F#V>Q@pO*Tb
zlzwabc0qz9^9ZuDkEWB7Q`7nfDh3ANM_0Dy<%Iw`JzQ{<D`nSEW`@sfp`4;3mtPAX
zE=7qhDVv53w~cbNdGFYwvxx!=+Et#acxZ4I214k~@~a%&gX7{ukLL^H#t<uqLBNL@
zS8*ZLLr(%|@JQXGeKVwp!Y+TNc^rMpfug+ksNoiz76`8R{<F(JOB+kP4Y|p8{N%|g
zO7}Q)>iz;*A{I@_H;7hvF5g9E13WB}^a%>mp^JWD5@gv_D)W@+6q7>R%TQj4^l~9l
zy1=Yb5g%y5x#VL(LRqcvRHl?nSmQEX;o%joT4Ck@V*d<aKkzr)o-XcazH~~_LaA4U
zp5}srL-YDw*(n-98Kq3R>=f7j`V_W66G@32Yzo`?Cx~`n0z4arli-85bR`}GY=t|=
zz@h!URr&S8{%7R>Zm+ts^U7-P`O;iLM7UCrVUC!Y*+o>*7yVv8m{JO&7YarNtCB4J
z-Ga6Bp_nP1?hjvuw^mLPA(6#<XejuE6E34pN5HKyF)?0Bc)FeZb8XZgYt3t`#%hOk
z@_N9La0JBR_#Fc=(fygP<gyRb72$+Gfhb0-UcD;=^RkaYk4@OAdM4%F&q9yR`hIf3
zjYk%FK_yzR$V5-I@ze&8bEywVYb>~Sa+=P2Ba<%49`cLZGHe&H{2oCM-<~P)|DtEV
zWjGoq(Sv^{-OarGm*U-cRFb+*t^^Kjr-SdMudmm8@pU$s2t-G&OZ7rf*)HaMp4puO
zCs+a*Tf{QNNqah%z>8}~!OO*DG-BE^5Clu0ZGb3-^01tWW!asWO`lZhSJhC``xKn7
z7GN_U0WsU4XnwF7JKPp2NiT%0xet2#pprk{yA#R(NGHNS5l$+c?YYJN6dOlFoP|uG
zSj034)uETA<!lzBaUUi($04k72w`U!&ZhSeLGxz6_@<m*@44Wj=WwIsX0KzZD9b|0
zov^{-YI)zh=%My?J`xq!9C0GIm1H{g#D<aB>e)*(aShb|%@x}tZE4@~&CEO_etnzq
zFYDGGi%maIvZtiDKHYd%Gu@@y0^KQ-itM|HwGB{}3~KF|d`^BWt_}2JiFaRdA>li_
z#VjvL3cNC9{`{~kc*$|PA$NJvy|<B~c}dAj2S1Q8SaOW(7SyP=N^qx2K&Q^K83sVJ
zX&x`A%Qz;m`~rWX3^NWMoFP*BQ|EDLT@Ex}TdV~sq~+!gyUVHH!kw=S`?Akwz}f|h
zDKF9I@f0F({Ikf*lzxXzR-q3orEeeIAAvt-(6KDhOql=xZ(((sLw_fxkVDg15UP|t
zin7XMM!VILoMN*&7TTKIZMNbf=b009gSr+JgD6^pJf7BG)Avyjt}hQgKrpB-2fTG;
zUDu@?@MybuV{^gfW8BS)`753N-w+;|H8y|`qYwK~S?YIb8+3I)Q93p~x6_IT=bFMF
ztl-X_CJf@~SD|f}I@W&*)IMBk{*Bkm`^~)ap*Ha2gH_d~)vF$W+_SU41rZ9<&XdT-
zI!x)B)Z-gD?t?n<%Ec6txrB`;?cHAZ^->21OzZq1+A(G@O#swxCuL5v(d?9++@MJb
z)Q0RLQ12r1i*v8DW3E1kKO^vt%?#AWQmbE?;)TP~XTS8BIAJ+%C4Ik0%p}k2rZv&g
zYfO)IB!}&FpIb>-j)~Lv`lfW4nPyt>Y8zMPkRD@|(Io1`a4+*`0j-R6Oxgi)x4pW#
zrZ70(sq!t#vI*y?Q$<`_t@?s>r+>fw6T!7kE=JPf1b*`KR^-!9BUchVXE`|>^YpAR
zBOEM>K@Z?=CvwFKq*MQ{brZ!-{Zd4II)XtDehMsj+x++t%iS-(!uTv#VY@{l74=Fe
zpmtK1s99I=eIrKP^J!+@G4l^YL37nX!?q1KV#RAvO-uKUX@WvB#M`2V-=)957vHab
zap}c=_KV>c{T$8vkGdWAS6|<D!n<o$=y^1*$OXRgyIv);n57kA&Vd0X$qH6RHZr55
zW9+CHDbe;9Y%6XsleUEXP)T0%c@7-vq~SFSFO#j{Ukn1PBTCXl>G%kB7#iM#k0w-E
zE&v0-Mjp#20x9B}dySpbk|;osVB5BB+qUiQ+qP}nwtd^SZQHhOWAE<7#LUCa#{NKM
zW@Wxr);ZgD+H(pPOXK0j)yDxgyF4@auU<Cfy5<EvcBfw@#dYngQf#)cfN}4>9oJL^
zF`!+)HzK*?&Q{~wTCBi@XrJCHV3rs~;iT8`xD)~rS>4g`hn7OG7gw<%rtcvg(6~I@
zC20!j2N2SD)n+51ZB&Un$Z=}I4I;M=d8^VU0NZe}Z4IWOh2G`t;QQpcJUU|0_N@Is
ze`dmzMO2^u@ZUYXko6u(Di<Wi+j$fPMFx|Q$$Kd7E6vE=R8~ovd(#GYcb`oW>rGz;
z%c$DHZO7eS0!E|!ZLB38a}$sjGYb}-_yMb@A})LPigzl+;TP3eObcfd-R^FfaN>Ep
zgke_wmGn!-MC|9GLQkFGdHl1o9<HkNTGfdcEn0cT_1H%IPaiJk6rGjDmY=$841qM`
zUF;A%=J7@03xzQK%;V;L(~GFdw%?1R+xo$sW{Y>)o2-P52*z~XRLqSU<2$_DJMr8M
z*Z*YqGOuh6_tK5nFV?)W^=B9TlkG|+`6Cn0Z{oRHq6FJ18vC)T^HNy++tz9)Ll15{
z{Yoq0^W5RRsjy`2k1J;zo4RWe7?6DIV>s1my?m1Bms&!H0X*TmfBU)<O{m0Rj7HnO
zb131Rv@Qf?W>Z-_^uXl&lOpBgGlgxTVg#IUV=zuyeQtmVMe-!}2=4CHh><%yV%VJ_
zPSwA^+?jNMH|j#AqK>xpHn$|^=dH{umZC0ct^T2JPUTj<RRb8!krEqct_8-k5GnE;
zE+z4UrXFWM1`Kn&91IU_oYmql)y4pnCz%1_Cy(1rgX1o8ChSASB|D0`51v>Ke39uZ
z2dXhnTn@69S}W6`m>PEGtP4*|ONBiblzD-jjQht@XfbYe&pG1j##wzF;Lo5<NGdu-
z^CXvN5Y4mLrzX?vg+qG?-`+?mz9k-M*TgidGwf*?Zn%(3G^i`-liO)vdkxYUHE6~m
zZm$XcL!>>dXVZ<?y<cre-DEne6FW`OTDCjL+7)m-4cITPrw8hgFaaEXETlB7t8Z9c
z%x)TeyPziWx7-n86D?*T)^V-mdzZ_FN_qTLWenXrcru?sWn^mU<57l<$Mt@?vggj7
zpQ`0}R8}zu$`(&{rT1(~{>QY?cx688-Kk)D2<UwFOJ00I1guKPUzCT&wEkY`iCHTZ
zN@I2}98(kI4>g*t!3Tm~al-c^>%_#xR}o9duodpH_5(Eo&%r8TKAKJ((MOO-%Xyzr
zz^u1-Bi{9?$A-&(+O>h`s^Y;r?iAE^N6C{lo@+^a1k4PXWOIMv5Qvmi0u3qzPI8Yf
z{n4#pKLO*)9F1W@ba97vyeAb*(~}Ir?nx-b&Cquyu%Z}54PH1a`%#lQt$wOP^`mC+
z(6=UGFQs1NO+?a18f-aHvynlPhdxt#h2Ds$!BWD|R*1zHe_q}<oo5k~houipKp|0S
z&jfL1Cnr1!pZ;t;?7Vugd<y-_i~-&R^Bd$UTqOF-c?*u6Wqv37U<Svv_mjiGzL<Lj
z0kR<(0LItuFtQv{1U#FNZXOPf5Wk`sky3YE&F5P*uU{Q;HFww=^UOQ^6?hX;<xPqV
zemAV~zZ4C|Ey!4=nw=_M;f!f>*GZE*MTVt8BIG;G+&SOj1#K^Ju_RyJ%uFs)A|(yG
zMzD2DR00jW)~RTSWz&>|Y`#t#<6oAIA)e~E!i#N;1i;AW#Gl9qd%(=S<B%l70cuAO
z*QM4^v4Js^BqZwXFZ2wB9uy=XCjyk<dZq#GkKdlTWQ>}QB?Wcvm##okTWWLw)^~>S
zCxZfJ?9RMlLIzPmc_0)9G=5qzMZP9u)hK6!j|e|GfzeL#O_Dk$U?l=3Wqft7acRi!
zYnN?#nZuW2JpUaH0Qr!?&?lq9@W6VqeWFA9!wGW3KW)coIY~0OKx>@esi&3LF46X6
zC|XBFI-ICT+pL3ZjZWTL{zrla^+XoQj!LhMJmgztw)4d<M0%w$4*rm*B_>DX!%q0g
z>W7D6oO$&HXoTd35AB2VQ!#W10tum!8kvp0ukarWXj#M~d6O_^6R+2+-sNqj-pu5j
z6yi9VG;9kB_`$9YynC(@_0(_tC=-gzijHwRj2H1eR2ZR4lBd>dcicv+H7DA}v{sU`
z@btk~_w4QPRoeT6wl32P2u0Me?8z0D@H`blmA+`R*^VTOm-iX*m+K#!Bw(^=zQ6%6
z-^Vkz#g<EMp=854r{8Bxl-}Q!hFb6jvE3c5kZ9jFcXiZDx(4sFOgk_&p1)EfGB1|S
z;8Se&r+lnW3Y#x)Di-0Mo!}5nXWA}rQ*G{DIm^}c<Y#Tg2IZ?SS{VlFv(%bSbQL}C
z3hc*&S(!Oad_V!^B+J061=3kkFT<p1GMpnsf{lt8D2w*o0E^{8WJ~e844g=<A}nt>
zl-b}PyU_Qaac8Vw&|`Il1sE+8b3vy->=`}1i%?#WS1YpB<OCu0J2ECyjwRkzjoN>m
z_mf0TB>9M<Sw*x-HK4SaHx;jK7B)vTAkK8<^s*rLPF)IjqAS&p%7`PyJov2sT58iM
zo$3v(hj)=D2X7nMD2}nxe~cc0_;Bx&Piy<KQT5dlX0AulGJjFIMSgKmxIr@`6Q&^d
zAg_+5+Q)AH>Abu8rJ}h8SGuiu+k9b>1H=&69KvRr?-NbePZ_x{tfCTG=EWi!X{CJF
z7i`}(jp`{F*evNxlC*zfl?6MhIXHLgwpoZ_xjc`T&F+Sr%W8dVnI$7r16a3-^h`!U
zaD1|D;BSew41zI!wKvW`G*QG<Mu(YeH_z(T6$?=jaD_DgYOvfBm&U<_z~aF%u{S=8
zDB3FtWtuCzA+wQrd*;>`hNxhY%Uv5aFPA7PE`*c|@`uOk4E6i|b=!C2L;y$Vux#ve
zq2JFW|B>SEASVZ(mDg90oo=q>Vdz34nA3$1xmkbT$1rIgOJsZq^Ls+!d)x5r+z5NA
zZ~Z$i6PASuR_T+Ai{JKu8xL8_7eK=7iwsQGWk1|Kfb07JodF-dOrBrbp4qEf&^JN2
zq8n{JIeI-+I=psN7NmdCC`{5l(zF^L)g^PMs`*xOnGo_wUJVtb8mQD<Fr|1Tk@ZlI
zIjiv4ozp0*jXYbXsRv~s+oQFnS~bx|4G!rcn}j6UT5W2CMkC0lb#`RrCx(VBj#l$t
z68%VUNS&oZ`4wB8g(j_yq88HZ$*>gQNfj2o9fAmJoc<h`lI9x93g&Q`aRin1R9sV;
z8Zec9P%B`w;N*1AK5zEODm~g5yW;(U3$dA4H9b&e+QjiAaIlF+ZmXI5PU)|^Peq>g
zKzrByCJRi=ddxYC6B_}4?Pn9}G=?CdCKzykDQ4P^Bg0$6CR$nj0DJ;gH?(4IF9{3W
z@c6W40v@<4@waEUrY#x%*yjs6sAp)f|FvFB7~t{#RQi~|#E%9|6Dv&JK7QpfA+V~6
zVaB!9!_S?E<m-0?8U1IlTtxEk5fOPAADxa4jW9IXhHQx~yi(NheB#apTSiBCf{0FW
z^4ehQHr1ywqv*yEZRln8K;q#y5EcW5e^!^@Xsj&p93Y%61#LeBQsqf3;mkB`H=MhU
z$bmUd8PW}}b#Xs-)pFD_cErXT`fUjh+L0-i>|aA~BDXXeB{-MFzsCq}olgYk7cwz_
zB1@!N#FEw6oj!E-%6FGXXFtgt>J|3sUh}aWADNW8h(vP>DeqM{3R=!^gDYBbBS1bS
z@J#IuB++Y9)!kcqfP3-{pRsHRuc%j6{_MMO>YEr&D5X`Xrg)=!BZU23S@6Q9N|j1+
zI;{{~8p~c)&S_-ZZ!BXr)_8jv=_>d~F~++Vj1!|W)>jV7<iD9|q+cm55^oR(4hkl1
zn7buDE^3qv>S?S;XE%Q2TF+U~@rL+R+4!+RAt5spT}qMtBhkNysVIPXMzk3W&9ez&
zrH9~O0PYFI0ix=hYHfeD^$-t*xZJ8DqQdnc5mg@3x2c4Id++lHE%y_-!n(Fxi#*uq
zuZ6}f8+SHtBXU0<Sy-2CwnaOu;B#c3KG=xsib{sB$QNV&U&cu@(~}H-#1S&czLoax
zTN4CgEit&#wh>95N#n{AAtosRBD?1Zc2+k>SW6dg_5iS%vBhcOyvNyLetd!lMM1%1
z7h?0B3QRz;O0%<vSif?$mjiOTFT<Xrr*y1is{T}3pp>q8VH>)XM9=NF_-Qqo$(4vN
zF);&}L7HAYM%M?cRnYew!6ZAo4OuXmq;ma`<TXl{X&C{Rd}r2BcJSL|(~nGF2=Z5H
zXd)%ia&4K)zp0vq7(ST$hdKGCYt&FUO6rI`ykoON@4)^vJ3tybl=dAQO{uX*E^(>q
z)imDd@X{8!3`RB_FekP&cYA}7o2PaJXBPEPF@1^`<~T4KAZcat(;6vjIbaqB<N9!7
zufA~YXtm_2k2S8nRcF$dG~?&ShU6jkvF`=j-HV`$WJ%k6vL*tsM5E2e=BSA&O24a(
zDOip{2Nac~`_t<*H!2eDC8lw+i4WP&YkB1Jz1MqYOmWRSM1(c(%Gv3+U+#SgE?Z^f
zqpszjS#xu1U1n+Akn7PUjU)9lgtfi{#nZn<6rBcJzV0pD`Xe>yg6j#MowaJV#so=J
zCR;*#WzLGLaU>Xu4qXHEQKBYZVKXGLsa-odMP1NAwVNSGaYuNNBujmB<b}+e^aTU;
z36N33>J_&&W#KKpsv^oZ)j%CuoV^Z@rjY+kD9A>5-Hrd~_~P5Kr7XzS+27!qo+Rvd
zHd&!A5sP=<q_JpUooBE5np^dcCh8z7a#G2T7DoO~1Q96w=iEdkA*0m=Cr$*`a!_jM
z8e(3&S^6pk4EnC-ifq2#(`B{(E~j!#<@&jVY=M#*-iI4DLh^HqeN$L%tz9J4_(EUd
z!AplbW+JA^M8Xg(8gLas(tn$SxJSd@A_YMG%yGJ&+2p!3qB_1*O#139FP!*a58&J|
z_RZeL99=4KaNZ!wqL@C(pIqT!L@Hlitc+J<{weP<d4U15+L(aF1&)4w=&rYVMO(ki
zxYF7pcYEQ*T73+dUJVKu&3GE`Kp>=z5jRvTCHF*e!`xPOCVSGb@#b+CjmlX~c3<{d
zU9x%Bt#&9(GiDg=?8tH(auN1o2=tX|lB57#u(;v;^;w-xzB8iNja(s~BwMdA1E2$w
zGPNg|nff2RAmHZ*%^(Fi_c#kmA=R5f4<mi*+~Z(C^i5S3nbRn~JG!pI^9Asks=}Yj
zsI8%}0`7{nTni_@rnZ+e8uKVXnX?JG#DEBu5by~vS?ljhAZH1ml$^vfKP~lP)<+3J
z*xbBP0{^Bx80=lT_qFu)aqL1UF_lYv+*?oyIe##MQYMOKpjDYd@67=*9Iq<A(J#fp
zwC@Us9kQSa;?a*J;Q!WfZ5QIb>R@HnQ{1q8{sC{IgbyLwP{R;OY@;zwI$Px$b)kVG
zZ?Wq5%eV}4iKnyO)t8<zUd0R<ssP7;DcSG42Nl+y)VA-^0)|rDUwi{Z)-{8sXr4bt
zqK#1kl|6n+Y+WOQqx<yLpi^1BN~XSopiR%v?9&MKovgDDQGc|%R5n-Qosx7$rRs8W
zwh_MUy`mLnJ}D4=+fS^Wee?c7Vp?7Ejg95dTk*`LD44BR&ms5>KxJXL6hL7^<)izv
z3U|UQj#Zf#Gw#H2mf|%k{yttYSBu+*IJL-MS!W!ef>~0do%2UhyPv@f7Ep+#7}oeL
zUCiIv`jDUhsWl+NCD?yYN%GXjV$~yW%r6AKF}8}Mrn#|Z%J%OXZmIc-omM4Py*I1k
zTBq~4uD)l-Ql9ub9!g^RU4)>FfR+r7`a=@lYwj&?QFxwdFdBmWTid3&A}Pg}Dx4z=
z&bP)-!rk9a1eca>VQRq<0;L2|J$^Wfpmr}r1JA^xv1#Ojby^OvjY@Km85?xdkL;bq
z<QMLR=}AnyXz_7=`R4NQAaAYJ<Q&ntol(B!2mhP$*=|QBxU+Y$$N@vAWUicpUM<NT
z2D{%<|0yYL8H&f|J0wqg+oM|Lz&J!MORy~k1eX)10nFH;YNiM}3oo;xsLhn5n>41}
zDF;+2=94BTOd;pu*!~DYW7H8;ZVNzxgC@$6XT#N<es4kl_rcKSL#uv>JfCbI8<T^e
zYra=rV1qgLB9?56{tHyQVY<A%w$XBJYdcMdf1pO8)uLVTf$~2qjNn>oZV?07<~7vV
z>!vmZW|Lav4kure?S{e5$^C1eKfSNq!vuP9dxgy}F>A*JF@4NcSJ}77xfzQLuA|$a
znR$?@KnI0?T)T8_syJ0A1`9n8K1mcIJL+w5VS9$dnc3t4XQGC=yh9ga)kUUN0PfrZ
z6eBM1J(P*q@bL-s&x(8NQ$uS=VJb~Ww0#VD<Z53vK!Pf5>Sh6FSh~2}D=_YW>yB%p
z&Fq6~e;8w&mT@?Ud`_s$?0Cmq5~PmkJP{j^;l*7H7lP^_RKQ~vk`I(dSK`jvQX8du
z4zI%02SI(2f`*BD8p{`dk*f9RZje&g<%kuXAiad!e<yVY4Lx;Yfh_$HC*_TjA(Vph
z<6Bc=qDKt&zWpM`JRD>?K_+dy9xfk;P;gcN-Ki`M;JpL@%-!PocN5cY2}WTt?^OTj
zPMvj)sD*9mwl%ZHqO0{wlX!2t|D(e3eD`~vR3~L8G1o3bgff<6oJ7L0S{mIzOEuaV
z2x{b+MJ1X)OGT9QI29V~ylC-mmN6F;9wL%ph7vM>227Dfq}Bl|NMQuSAH*jKPcUK+
zn0iLHi~mk!0~Hvmm~lRlktNXE0Kv_3P9)ojZkxcI&vo~M!?>n;dcnNlQStsI9@y3G
zfXX~+_aj5*RuheT!u)F6-VsJX*0W^bt_yS%GiW<4a;tICm>&B+Ymq@wM0d34&fkh<
zRRMRA?P{LpzAb>uVPHWK=$cx&uub9+^gA~Mpal11C1DT+u~lDrITs=L9_~YP<D#pi
za6f-+@#xGuNFgU_G-r06y3ujD0H99Dn7rd-&zoeRpB+^YlDfI9InQg@r_`Uk{Q9eR
zcrz))-Ye9u9hCanGPm5Sv0o$TQX8)Q$YlCudAE4w_O^<UYF@)YZWZO6_vhtnVN`jH
zYa9wtSk~E=@WCIpms>}xOF{BPv>WMJ6NPkR?ecCM#qnXoZF`dn5c=DU&GY`Z{5%fa
z{c?jJwtf3Ji?@Na5bWQsF$0yNmqK0ZP@(#U@VB=q8-~aJ5+qfw4CIbkJXFel%?Aa$
zIG=wikZCDI6A7Qz!{SY&+xuM{Tc*ijxbznWILU!3r<woERDO)L1We$c3<G_Mqu$){
z-&i*WfS|5vFw0MmCa;CpUJivCHdGmnXMi?_SXTdInP`I7r{HSQ8_lLCsdL0ueYbs%
z_q#KG@PkS?{;+J=A@EVlq`Sw<YZzFiOAw1~iKI$#=#4q1W$_fj;n|G$ly^^wrqGi<
zec~iUK~^kL?M_p4R->`1{f{UHejitvv|&!N&jQh{Jh>)*A2d;v01U<NA9ej3v`F6z
zIGzbDkx_C^_dFp{nf4shQXO-c*p{P|1DE9Rnviub_`n(1!OYH>Dpuw;KloD^AX_;l
zksTRl49rXtX{n*y!lMwy%%VZ64@~%JO!l#wUri#33tvrCDg1gqlt3btloiQ*oh0m|
zW22|&6b@y6AQAeO%7DKv84Fv0qVm7fE`d(G6gL>zK)TDyD*jMS3WIIR(9Zhjj*%BZ
zfux+uH93p4WeLi^824Lq2l**$mpf*+%VzDI4OV<ptkj+F<`VUeZ(3Up3MxSj#iEd&
zK$?h(4;PwB)*0E(1IbnjR@g>2a|^3(rqv;gL|vdC_U#WEw4x73zD+T69@yOOE~Uf^
z`7>Bvt{^Zv5i4J-`Grz{_jj4o1%c+xFCwmM5F2Hr^hi5;ouxNSUC~Lq<&!|TYEXR7
zm&V5c6s+oq976*V|K?f^C^`*?Q`ZWJc9ZfeLMc&8JmIPK=};AkT{C&!B0s;>NFQve
z;rUzFqSEH0InEvt3TrVf$MZ!ocR^M7p1+(0VJjk4%WbcaxGiD4+JWYMl7wxElzRdo
zEN5^9jKhWC6nd%L7KvZMks5J|i3P$5vFgwJ?*LO1u@PYcS_+kfI)q@>DeaUhNNt>*
z;lN)YSSo@+)<FnBtEfyPc-X(jn&~X^MV?7KnOB+=7V{K&6f2Su6O$u51;p)u%tdhj
zQ-GE$P218W>MkV*fq7<+71Vs<X%&ND(&Z2rJzNw}(caW=5O+$*OKobl1)|S^Ed~Ak
zC`=fmNRke692ZQC(G+!66=K9IMcNv$KOYrw;^Isv$P1Gh3KA2+3V-21y;duZmLf)F
zHQoV@(Gf`mY|f9(?Nyn+Sy6pc6}FEQC_yV+rkEY93TsExldxwccEj6@fsR`z%Wz)6
zHZ4)3g*hsTAd+fytte}P;E=IZLvh>cHyR2|Le(@@Io@+G$eCy=;;tlyDrcYHV3A6U
z%<gGZoLnr<e;S%MEN50iRdcV(>gdK2^&-kFCkU`a6oz77U`<V~sUanqMPl__RSb3s
zhi+z6w+y7Saj5X`WL`V7b{ne7bf&3?P@RJz21rP%4{xJkj2!j10?u6=G_%}+(DTY6
zu=*oSfg;L`so9k*q6ahiY>U_MZ(WEvC>GJFW{T?EB0tOi7r4tYTs1G53G6%}zSl6y
z1^FB*;(|z+TB3xHRQ<9J3MR(b^^`oMSYZjX0Pk=0)z~z~(L|9L>t=g&VgWeuX=3|U
zd4*_dFqr$r-F83%v{KdGB8|#&a6@Qem4=Kw>7UtdckOD?iV8|eV&aN;(83K{(gXYi
zNb@hNSM#_kk7qF7!c;)_jE*Y<U-|OmIP~2Sd{Kn>2RP*2x+V14F?{LS-c4eELR;|U
zr~?mOUM07@Cbh@Kx`lX3V7%T6Rj|sJ0%8kJ;)*c64NelDUPH>)avL+#H)=*aSZQp<
z=ERfsgUAfuteKhR(_yxXKL^cJDW{o`$)>&urwo5Iud#dkH0iW>Y19`!4*NY6bm9q_
zG>aWI{p)Bhirh%>(iQ`#KFAL#StIyrx`cl+EsdIo*B%8;1KM|D!?sOdBry?cH9h?4
zgd4AcYULi%F>}abc52^Uw+BU5An=u4Vd*n2>JZ4b#v?6gmf9=@Ni$}&kH>)u5eYwc
z6Ddpm>EuYSawcBWleZalNnFlb)AsO*z$+5+Bn~vF-It)5B*{8!CC-6R?vQU%KJ^H~
zM(FV#=`|uwRa;j+SOvh<={Vhlp4n9{{z>G2Tr3xT*=-KJtSknJ?`ku$V3i*+_D?>H
zN-9!y;62ggD+<Ncl(q1V1CBw%D!f{BJ-`cydM@WA>lyBSM&$0edZI;6ht99tMqmo^
zl@quvlBtGv4Rbre!itrvU`0Axk4L|u6%4t*m|YjO9PetEJ*ZO><v}K8;hT&X<cBW9
z@=>qlc2y6(LR~CePu}NM=9t=W&O-UWZVG}Aray|e$334(y-3Czuh*y5^VqeS50M<D
zdC+E>3;IrZJewMjV=8u>2sK_bPFTgL_cW*)gLT!+@?x95SD<bf@ljWq_yfdwb_lEI
z*(z6eNPFIRf^$VvQ{pweCTVBT5zR!pVMkVPk(<zuh8_7kl;J9|mDXP!k)Q{YpsBT;
zH^&@K`@`iU&TbT*cC-x+1KbWyBHE&TKS)1&>^Zk~fhSK`%MZG33xxB!(-O@s&3)x_
z=TKyDk8zZRn9(!AU+4AV^}D{*CO*s@MtzGp9VoZs>^51^=$+6+%{d?|<J{%nyK#Sr
zU#1|?LQBo>w7`-5cEzu{PY@h;pnO0oJau)zP(yrsa*@!?8lB_{jvH;&=$xQKdHlX5
z`2=9_*khmVhMLN*iBhA-jOe-#PC)M@qeMzGxEIBl(nzE#$icaM&Z4byRddK`nf97H
z9#a?1GJdN^i<SlD?0G9$2c8~|on^*%uQzg&igLvF?Sv0@XS#5~i|V9IY&oj;I||r8
zuEpiyt3HpOy#RWwPrsw;=*fatHev`5j8=rQ;ajcax&Ry|OoA7m3Md=FNScZI*yMv8
z8eJc{=bvK<qiL{0apWb^chHS77{NGAwS@xuEAnI4TM7dHO6^-cVf{5zox(fQiE1t3
z$T!t1>d%5o%df-oS0#G@hnUQQ62^s>SUX{2qOpp`3DXP*YNS#eZEqF>e#8x_b@JQe
z2k>Vm_J?5i^6y)nqEq@pe;vGc<~Z33RJ4l+AWEj}3j^D9e0C&9g8yCDLNv(f99)Bk
z^w0o=wS(+UBB~{^Y!eXivK1(AO$wnE3oZN3>I<rc6nT4O!cq)4PHnr)fF(i*WRU0*
z90vZ5tMCX8mJ}K~T#Zo)ea03RgKinEc{VKrotH@2?dLi4-TVO<!80H<bYRhQ=Kjq`
z5Z~$1=iBq!ce3CW^BoAyi5fkgA92CN2>ie#<u>!z5XW3kbrDnU)sg_*qUsohnR5rY
zs6)aAHXq<Uf4naxv;fpblvC0enqcg&-$ch`u-rkQ6to44@W>clf{Ix}Rw<wtDsPav
z99L@bvFk+YAxH1kDJvEhKPp$7O&n{g#Nh{)sWXFphcTQCxPPjJ>Tc=#b&f{|D2WnE
z5Ghfxa0W{nKCw>#Cm0B3qAOY$;hKdXppaXjp`WO*-KfDIvCv(y;h(wm-GK)Q6)^bq
z`PIuHfr{xrxC0@Ikomg+RxqpIu!chyM~@IWgj6n5qfoJgRV`=7kU51`IelZ_v9-m^
z)7|wu^^pSOj}V=YAs3G_U57&-o>*0uX`7yU-Ij|Vte9P-p_{C_-IOEp%^>&KVEgI7
zrB~x8H}eA`0P$0J?SLWo#g85$RmhxP_09f22E%Z&;r1m~v_6LnCZVn<!7ef3t^xmV
zLH{#HzA5Emsp|QQC$PeCYfR2*%SP^Oy4KOjU+lm>1PYi~fr2><8aR1^#4!}An3?~n
zyi~=_i<tka(8n7n`ip=81S*I)o`MA|Y7jY`gz5jJOv4s7c?ca$R4+o6M4e34ELORQ
z9Zl9a{J+Cy>u7H;{iYot3j{-&XiJDLI}bKlk3N49L?4h$KNM75lw5xpWS^L9zZgw5
zU%$nO)EAS2C|PWB(CM{~#_7@fLm*GI#Y<sd^6*0xa!59IQB-zVboyeHdT6wMbJTu%
z@FQRVh4{3XLHtM4g5&P8|EudB-T?|EsS+lRAxgz7<}RK=^TsXeHm+fd$0s-Y=f~HN
zkN|`jf{fV&l$i#cx(K8iimclVw3`mR|F>W{^sAfS|NnK+5=x5w=W+P|QGIcY%YPpR
z9scOWuBuJn?A7lsd<YyeyT5e;pNJADSV6=4kRnJKLdEl#GH6+Y$M>K@3F<^C<ET<8
znuW{fuwqH;hRy4^a%oweVWnxUv*ZB5`XIyhfkoz_$L@m3#{Z97K6LKUwtJNaKqO0c
zAVgJNgk5aFU3D5SAg>S-pmA`V&-8{ac$?-_tm+rCSdm;vf0+N%=P&Y6T~O&y$Vx8g
z>sB1(45au4mQgxGAoUi6cc2{hlm(I-W(F-f;*C5y;uD`l<7-#K_;kT;_6xYhy7I6n
z6S}ZB(}S<N<iC(<32zbM;A~i?Ww7ADod@1rRRW=@D9qqI{i56ha)FVTqD9D7rHJji
z{@EJFq2QX9vZmQD7#Q;^uJU<0rwi@$pnN~t*KU<yr0s@cjeYz`G`P2TvZ+RhJ?<Qm
zg=5s7^K9At)Rk$m<RY(?A9-cvjpL@pjpl}nVF9C}Uo5q-pnLean!J|TLatR;1~hnU
zmt2Rjq-6U0tRPFKOXonvs$T4BN}2Rn&l8Zt(9mi1JHAOHNKZ*_NC%REo<#Kvh!8Q$
z@)$%B;uNUaH#RU@DoKmllaX0-Pt$5=m`qiHO*W4mBu;hIDQ^^cH**$rl*yt{dXxM1
zO0m?UB?{O5Rwh)TcYVT)x3&t*sv~a&cE6q;Y<n#S?8PWhVB7m=yN8N!RE7?@{e6=d
z85||Q$yF_$QrrzCtY`*Sgbe#VQ8!7iPtAwj!ma@EqqA@+lOu4dbtM~k{D~1bSCU7f
zNDfHYRMty2orSWMy;cmT8UJGX!aoEk_6vt<#)$RFOKVxBwNhtMDibVjz!q-oy&J-v
z@7<`@fIKD%CB#@}3Zm8HV)|9%f%huAm52v&c!Al2<-^|I-`Nn^`z}Gy=5D7(BME4c
zjqg}^I9Bzu*RiR4Mn8wuD&P87WVXSVT^{js8r6AqB{{};PwMHZj0NnIN+DB=Jc3QQ
z3s~Y9X6E6^)OKMd{F0S~Dq^-=X(URshlLep9!>^{n%_?>PrHuf+Bhqj*>(^sfP|dv
zk2-U^fXt3+jxYY840@d-9;gtx-IJo@G>;_{sl?0q&^wPhwz{?Zp!j;oX3cu*eStO=
zYYJNAB|=XWEVmXoCa(IYOO+63p>)|igXUL&`fQi$B}u><IZZ=#8GVYUGgF)t?CR83
zWS)EhpOKhss7F5W>daW~hW=WT?8?Fp$z1`fOyUk~_>2eE<SZr=?1fW`op@|QEP%u)
zFoIE6X=*GYF$RD^iqX}-_mWnn&47;p$F<FkyG*8-Jh~OonE0t%24rSQD+SOnVh;yu
zWwYHtt<`>F6`1d=RZWF~Z6soj>RU$0kRA$g!>JgKIR=eK(ByZ%D;-cQU14I?izgpq
zd&1A@727;_yMI%LT-S9GTtjj}s){{l^;Ty?t&+(3xmqg|Pb6<tHk{Qm@Pw#P#^e?D
z<nzV?DcGrT;7+zJv0>4h<df%Rrnh$M(FOkrv!c_82cgrnIF5>mD*;I{ZSW<QOoyd)
zqQXk)?!5TJBF~!Ua;HgdPN;=tZs;xJh&jMXTtIB1@}14z1h9VY$78Mic!?x`)%Uj<
z#h)ndJV|(otK3P9@?)}*dfxq)RL^fGlm8Xt3n%NN6-!}bP{=CTMVKs5nyd9>)Z~YP
z9Oj?YX`7XwUh9@mA~8?o)ClHc%>_1Aj^an`Fd!qdl^=_pg?)bjH)VGr%62P(KmY1p
z(Pq+W5VGKk-f}R0kFt9wFd`SgA=AXO4>m2VQ|yD#K0xPH7h|URi92Wm-kyhXVft>-
zsT2oEoP7V*Ub+kWJY{P$YtD8-k8e?yKz5&eSyyz48s?9RL#m@6T-Zi^@O?q?HqSA5
z@e%uYgAo24aU!z;aw&Y$5@8BNJ+ck_=@p)^d?00PqZs=(Td%BiKrpNC=uENN(M7g9
zQ77yeiUi76A>BXWytw&5#r@#EkxjJ??Yr6~mWK9MhGNq=&!PQeHSd&dY_0{0F;u%;
z>{K=_=V3+H?Zwg!h-R@`B4xsw|K*a6L4=LLOLG0<8L5mCBAg<Xs=a4;d5Y1LZY^j0
z!<qWmudTynsj(syL0Kvkc`S0E>qN;O%z`eZyiYJ5KJ`Ldx!mN0!W{HEMhlV74?33t
zWI{h$H#m7@b?^z>`w|(!2Iz2}qpa!}Rs`@kaSdSc^k{>qpbYF<1|ynK?2b(gsY&Uv
zHSJa9`_IjZ1&Pt9FmriJewRe({NU0N29Xl&PP*XN?#d9Yr_UiP^OOW#-OT%}h;Rr(
zz|{D<(ubbY(P@z4)UkJ~t4e3;UHK9EweW(TUXf_j)GUASHeC0F#x0~-Or-&`+QTPk
zs|_`Z8B<v0Bd9+tGcS(#0Ud3u3HXhLK55;SToYob6DL8_M$_&nLW~k!zqYkxbGRHk
zt#Gfx0HTA;c3<>$A_*%!q31_69W)nMg61nqU>CUnpBF^Oci34iq8w{`hd>Ale4dMf
zaW|;tKvx-do6G)YD1Ve{1uOC8CFXs?nwDF`%-<}7FMxVrMqry<6<o7}J4iH6g_^#1
z6%6`C*#lx{?R3YI-??&0+HP|zE96$ZQC<q%4?V{<FgipsfdUXZ)PFM6C^ji?x+a6e
zJM0z~)YLJLj(s`kC!`lJo<+Q1l>nU=5e<TVu=8@eMLli?p`w{EyI4OJ7W`uZ;`yB(
zKW09xEe+VFlH060D4)F3vT1%g+JY`gtWX;rE_W3#90v+Jh_52z?}De(@VK2*nF`du
z{aNedcI9vw$KO+>KUh|XRuldjP_N|%8?}f~3L5|k2rHgj>t<p4DIa2wn^Rh+7P1M-
z1MOnXL&n=1v^pCmM!B()FO+G<W4J-?7hdVaTM5)cxpsIy6#POFdI*DWTk&A}R*sH+
zlFNfIQ=nFT$dxarAG*7h(vZ<aU-E&k`@4WUx5gyVn4#{!=nt(e){GGb7{$}qC+tTU
ziF#DYkQgx5c<=cgWL<FWE_ko~=*J}KIic6AxSV5A?7T^Da7KMIdpaego<=AK=en|a
zK&5txUZ*9)AW58pT^=GN6NJ>upmUhiZ`HjAJM^i$Cj9pKzE$i*%q(V00LTwfXon8a
z!WPZUG%?_!^94!FpE;D%TiH1v<ujF_eGAn~lq?p>3_BC8UxInZ{xN5p>Ic(dKg;sS
z_jcADSKTl5HOY^Lbfl}HH(%b~%1N8I&VntwVe+L2i7A;irqf)f?^R!5`D58n^*PKs
z?Fi|@NXQnmHZ_0R>iuxANWWF;d%F=}#*J*-Lc9c*nUnZBm`P6qyq@O6mcUTO=%hRs
z1LSfZo2yO&NH?SeLyd-Ce1hvXRb&g)@SRpv4APz<nh$-eNacg!=~pv0#WDx&%4CmZ
zPLwz=-Ow_AJpngq7WFpQ0Ch<#-Jwe3>B5H;iPW0m#M=Wy;N1QqFFm&{bIp&1nnE{f
z&CKl!m{TV&;$_$EeE%{zJm=An-e>pcC}z<SQla#8ygg}EnzC3f(Hr*1YAxM-b|eru
zJ^NYPHq0RW0)mSj;OMA{+MlS|w32{)yJGc|eJjk2D=`NM9APOl>h|q*=V-1D*nY5F
z2ts8v{_P2-YK9fxu12MzEt5bDtyeLMH6Ea+A#cyd%i;TQg*ZZb<Rd%RMf(AlPa1IF
z2=9&p9c{ol*BR}vZ023}{?jD2B=n_k86^lVfR>3Df{Z0{bM&jwAgUzfrl=Vt*Mq<-
z+zwIQ@GDIu?1}Tx9dT<rN*NLv5OauH%i9LUH0?>zE17*?1$c}>%5Y0eenO1_8hOT^
zsCIy|OKcsHq8<~tBT(FvKxNn3#lTJ_FASZo`y=cv)%$?y{E2X8HdF-Yz1dk~qLhYw
zsQ@*I#o`=l<Hg5lWhSyIfmMn02^Vrz=$cl;e7+T>(6a{lPAww5ff+rM?OiU$)b%Xa
zm&gE9fv50&cQ0%wg3S}D-P;KM<v7I0F{p~$b;b>aq$<0q?iS%w)&H|RXj9o&D{ag~
z9FYjfyONF~Z;f%Dpn7y4sDc3+XS<+WaZ<8M#8bjN{!Ku@w=#snH-Nd7=!?oW<q#{&
zD3lDnsV0?M2iYA&LS7502oVj#<l@fN2rj3!0uYpwA6yL+u%Jmp$U}CbE>&*lt#mU%
zT6<ht?IdluEjT05qNGpe#8RLQ&|kFU&Z&vHJda8W1Jhgi<H`K^hX~MuvNm*j-XbS9
zR;%44-XC+dNFBB&QMMfYbDQC~Gu?+M0;KOCvw=L*_qvbCuP%p5NZ?!=m6FZz<hxLR
zJNsg__EH!+Z^bb5iG@Y;w4UY_fTln@p)@z_DaYbj**cJKU>KQ`llEFIYVF%hZ#3b3
zc%+g<e%B4mU+}@HGYEC;lRC3x!W9Zt#00Nf&=oHgbxvxzXDHza3yDRhb>?9yW+0sD
z07CO|ecF=3m!P2=;7l-a)GPb~NfLLrg%{bidm$hfYy8AF0vDs(f($RN)3h&Tu7rXK
zSa`Mc-n(IgF9!-mG1Xsd1<D>?w#OyoP*Tq-wdU3cxs2Ba<ZTbcYBx<fnIHUSrJYJa
z6Fs-qIEmU8(<XPl9k${RxhiF6+N{Zu&1GGYcqE^S$mZ%5*i2gt_19uLu%>bgJY0<8
zB?jX|lRxH?T8NkbA#_d{0y<23*dAE+*ym_9caBN-tzu`=ivb_Jq1J#QMZC%+%OP9*
z8KLAyuqCabaAJSo&xP%XZFS>Mz>*-{-J*AX;?uxa_>_Vg3O6Z_onQ7gAYf6=&NNzr
zCxIh7EH=-R@<{Z)HVQe%>a~OZ1Ut+%gA-#fY&sC7&Hx;ATn9!f#mw*&XxH$dXOoJg
z6mb*no{<x`_M$^P%}qCwxI`LH>QGu|YH%Pm`sU3Fl=+-cFKyONBn9q>4g=Djb{fY{
z2oTO?tsGJv(RR2bSf;8#C0o;kU=2>@nxzF2FmcY%P|n)r&=C`Z7|dlbif2zX0Lqy#
z5NYfSAWf5sy9%Vo@3QmC0DI9RDzrQp_z=>+{j+jIU(QPGX~hIjmZq<e8^uuIHp#RN
zqPoPH(`Wxvz|h>INaM{mp^A7dDvo17z-^cEfm3D=40xHy53Ru}v4?Gm_wTCS`JK5n
z_EAk{+O5p=05ul{;_zzmn(PV8<NJITDs7{2w4Q4L&N;g_Xy1N#8-=g>b%}_A#7rS4
zW_g{ejA!1l^UhV5RpmSTSmAj_Hks)t!fic1)hTf91V^=3u$r|VU`~DhVEh+g6MP^_
zV7Hx40`&fB*vnt}k892wNLKFxlB1$9;2b9W42YSNnb88R3R$jG*9=g<#q!~Ue3dSA
zj<U}t0(xe|wRU~Gt!Ss3pzj*^!+^sAnu*y-wk$CKN+tfa_mC~Udntpy9L7}l#7fP}
z!aFWX!7#<n=D&MiL95|x7rlmWfrmu!QUswYR7<G198j@X#o0KvKu+e}j1`+n`vb!9
z!i{}uD|vp9w|l*QJucSG3}`)8IpF@`TW-3g(+N<-*M34Xt51W4V91h`ZFr*9E;!(l
zw|h?VZ82~`L4bTpmmA39rxnc{trXK6Q$6_{3`(ai-5dssE+%#d7_kv)Sub=AgP1?}
zW{TjhjTy+JXj#eG{K2@8I(J$PXk<2w$^;pclt~6j4TrZ8L`vWBR$sR$P>*yb@F9mC
zC*gx4DCf2pz7^U9<yX1P?4ZaIvm_uFn}Q6LI{gu~)J8x#_7b%`k?2i3RPJ+J^{`l|
z8A$~n2YkaVggO9~WAnvp7PPkx4Y^iwD*9ltNc@qb*h(kpfPc2|um{6-zgrN!Bjm)b
z%rP#TX%rzh2@Q$@RN1<4*jckl<)qUUw582o2(JtMg)3;3vlw-!E@{ufk{HVqyp3?N
zZa^@C%KXx!UTObPQg&Cw28?SiEx3@6)F6rGNtb+y&gIf57PmB|iW9Ew7>9~>1H@r$
zZ*pKvOn1=%{;WrkGjZxED{$6FecJ~h3%l8jn<=^Ro+xd^V>+PY_S+1KND!}TdV{_H
z_4l4N0*H2$6MGe<E_433)t~Hnc4vv3JI7`EMHwNUDju?llxUZbeBe6xms!lijY|X|
zyvCj2^~RPpt(DrbsO7b%mpZK~#<z%@s+XNRl%5CP6-;5v<A4apUnW<xL1e>c6qy`<
za-1zL*ZLhV`=nK_I9RIn1p|DvJ{L(6<!40!B13?JcipK6#C|O>)0=u#a-oAZnL`^p
z0A=67%)TnxfDTb|#JHMEcBF)+5_?U;sNWDXbMqH-9Jsh=$GMe477H^gm?$GLS-d6P
zXRKvW|AKAN`_E8EgULOT>#CYM_;u~Akr4DKD6(3WPp|6ak)ke$Dd${|Y*TWgTe^h-
z^^==2tvAnk6dC02pfNPP!LF&6yF~^ArJ1TS+=l3RUvflwyl&%#CkTa~gc<I~-wbk}
z1OP4XV>yC1AzRo|^2-ValSD)&&-=s+$=*S(D?>)%nO%0p7a6YHTKoLX){y>6A+Ht<
z6t6w*A^`%v!<R5&WS)IrAAwht5L(VZVcG!#N++?wT8>Bw=3Sb7q*89tl1szc<R@2!
zr{jbyphh`>x>M#XS~$;n{(fKveubbI$|$QodfvgdQfXn?YR;GTW=TK*0093BVBfFK

literal 0
HcmV?d00001

diff --git a/lib/velocity/velocity.min.js b/lib/velocity/velocity.min.js
new file mode 100644
index 0000000000..58244c80e3
--- /dev/null
+++ b/lib/velocity/velocity.min.js
@@ -0,0 +1,4 @@
+/*! VelocityJS.org (1.2.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
+/*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license: en.wikipedia.org/wiki/MIT_License. */
+!function(e){function t(e){var t=e.length,r=$.type(e);return"function"===r||$.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===r||0===t||"number"==typeof t&&t>0&&t-1 in e}if(!e.jQuery){var $=function(e,t){return new $.fn.init(e,t)};$.isWindow=function(e){return null!=e&&e==e.window},$.type=function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?a[o.call(e)]||"object":typeof e},$.isArray=Array.isArray||function(e){return"array"===$.type(e)},$.isPlainObject=function(e){var t;if(!e||"object"!==$.type(e)||e.nodeType||$.isWindow(e))return!1;try{if(e.constructor&&!n.call(e,"constructor")&&!n.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}for(t in e);return void 0===t||n.call(e,t)},$.each=function(e,r,a){var n,o=0,i=e.length,s=t(e);if(a){if(s)for(;i>o&&(n=r.apply(e[o],a),n!==!1);o++);else for(o in e)if(n=r.apply(e[o],a),n===!1)break}else if(s)for(;i>o&&(n=r.call(e[o],o,e[o]),n!==!1);o++);else for(o in e)if(n=r.call(e[o],o,e[o]),n===!1)break;return e},$.data=function(e,t,a){if(void 0===a){var n=e[$.expando],o=n&&r[n];if(void 0===t)return o;if(o&&t in o)return o[t]}else if(void 0!==t){var n=e[$.expando]||(e[$.expando]=++$.uuid);return r[n]=r[n]||{},r[n][t]=a,a}},$.removeData=function(e,t){var a=e[$.expando],n=a&&r[a];n&&$.each(t,function(e,t){delete n[t]})},$.extend=function(){var e,t,r,a,n,o,i=arguments[0]||{},s=1,l=arguments.length,u=!1;for("boolean"==typeof i&&(u=i,i=arguments[s]||{},s++),"object"!=typeof i&&"function"!==$.type(i)&&(i={}),s===l&&(i=this,s--);l>s;s++)if(null!=(n=arguments[s]))for(a in n)e=i[a],r=n[a],i!==r&&(u&&r&&($.isPlainObject(r)||(t=$.isArray(r)))?(t?(t=!1,o=e&&$.isArray(e)?e:[]):o=e&&$.isPlainObject(e)?e:{},i[a]=$.extend(u,o,r)):void 0!==r&&(i[a]=r));return i},$.queue=function(e,r,a){function n(e,r){var a=r||[];return null!=e&&(t(Object(e))?!function(e,t){for(var r=+t.length,a=0,n=e.length;r>a;)e[n++]=t[a++];if(r!==r)for(;void 0!==t[a];)e[n++]=t[a++];return e.length=n,e}(a,"string"==typeof e?[e]:e):[].push.call(a,e)),a}if(e){r=(r||"fx")+"queue";var o=$.data(e,r);return a?(!o||$.isArray(a)?o=$.data(e,r,n(a)):o.push(a),o):o||[]}},$.dequeue=function(e,t){$.each(e.nodeType?[e]:e,function(e,r){t=t||"fx";var a=$.queue(r,t),n=a.shift();"inprogress"===n&&(n=a.shift()),n&&("fx"===t&&a.unshift("inprogress"),n.call(r,function(){$.dequeue(r,t)}))})},$.fn=$.prototype={init:function(e){if(e.nodeType)return this[0]=e,this;throw new Error("Not a DOM node.")},offset:function(){var t=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:t.top+(e.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:t.left+(e.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){function e(){for(var e=this.offsetParent||document;e&&"html"===!e.nodeType.toLowerCase&&"static"===e.style.position;)e=e.offsetParent;return e||document}var t=this[0],e=e.apply(t),r=this.offset(),a=/^(?:body|html)$/i.test(e.nodeName)?{top:0,left:0}:$(e).offset();return r.top-=parseFloat(t.style.marginTop)||0,r.left-=parseFloat(t.style.marginLeft)||0,e.style&&(a.top+=parseFloat(e.style.borderTopWidth)||0,a.left+=parseFloat(e.style.borderLeftWidth)||0),{top:r.top-a.top,left:r.left-a.left}}};var r={};$.expando="velocity"+(new Date).getTime(),$.uuid=0;for(var a={},n=a.hasOwnProperty,o=a.toString,i="Boolean Number String Function Array Date RegExp Object Error".split(" "),s=0;s<i.length;s++)a["[object "+i[s]+"]"]=i[s].toLowerCase();$.fn.init.prototype=$.fn,e.Velocity={Utilities:$}}}(window),function(e){"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}(function(){return function(e,t,r,a){function n(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;){var n=e[t];n&&a.push(n)}return a}function o(e){return g.isWrapped(e)?e=[].slice.call(e):g.isNode(e)&&(e=[e]),e}function i(e){var t=$.data(e,"velocity");return null===t?a:t}function s(e){return function(t){return Math.round(t*e)*(1/e)}}function l(e,r,a,n){function o(e,t){return 1-3*t+3*e}function i(e,t){return 3*t-6*e}function s(e){return 3*e}function l(e,t,r){return((o(t,r)*e+i(t,r))*e+s(t))*e}function u(e,t,r){return 3*o(t,r)*e*e+2*i(t,r)*e+s(t)}function c(t,r){for(var n=0;m>n;++n){var o=u(r,e,a);if(0===o)return r;var i=l(r,e,a)-t;r-=i/o}return r}function p(){for(var t=0;b>t;++t)w[t]=l(t*x,e,a)}function f(t,r,n){var o,i,s=0;do i=r+(n-r)/2,o=l(i,e,a)-t,o>0?n=i:r=i;while(Math.abs(o)>h&&++s<v);return i}function d(t){for(var r=0,n=1,o=b-1;n!=o&&w[n]<=t;++n)r+=x;--n;var i=(t-w[n])/(w[n+1]-w[n]),s=r+i*x,l=u(s,e,a);return l>=y?c(t,s):0==l?s:f(t,r,r+x)}function g(){V=!0,(e!=r||a!=n)&&p()}var m=4,y=.001,h=1e-7,v=10,b=11,x=1/(b-1),S="Float32Array"in t;if(4!==arguments.length)return!1;for(var P=0;4>P;++P)if("number"!=typeof arguments[P]||isNaN(arguments[P])||!isFinite(arguments[P]))return!1;e=Math.min(e,1),a=Math.min(a,1),e=Math.max(e,0),a=Math.max(a,0);var w=S?new Float32Array(b):new Array(b),V=!1,C=function(t){return V||g(),e===r&&a===n?t:0===t?0:1===t?1:l(d(t),r,n)};C.getControlPoints=function(){return[{x:e,y:r},{x:a,y:n}]};var T="generateBezier("+[e,r,a,n]+")";return C.toString=function(){return T},C}function u(e,t){var r=e;return g.isString(e)?v.Easings[e]||(r=!1):r=g.isArray(e)&&1===e.length?s.apply(null,e):g.isArray(e)&&2===e.length?b.apply(null,e.concat([t])):g.isArray(e)&&4===e.length?l.apply(null,e):!1,r===!1&&(r=v.Easings[v.defaults.easing]?v.defaults.easing:h),r}function c(e){if(e){var t=(new Date).getTime(),r=v.State.calls.length;r>1e4&&(v.State.calls=n(v.State.calls));for(var o=0;r>o;o++)if(v.State.calls[o]){var s=v.State.calls[o],l=s[0],u=s[2],f=s[3],d=!!f,m=null;f||(f=v.State.calls[o][3]=t-16);for(var y=Math.min((t-f)/u.duration,1),h=0,b=l.length;b>h;h++){var S=l[h],w=S.element;if(i(w)){var V=!1;if(u.display!==a&&null!==u.display&&"none"!==u.display){if("flex"===u.display){var C=["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"];$.each(C,function(e,t){x.setPropertyValue(w,"display",t)})}x.setPropertyValue(w,"display",u.display)}u.visibility!==a&&"hidden"!==u.visibility&&x.setPropertyValue(w,"visibility",u.visibility);for(var T in S)if("element"!==T){var k=S[T],A,F=g.isString(k.easing)?v.Easings[k.easing]:k.easing;if(1===y)A=k.endValue;else{var E=k.endValue-k.startValue;if(A=k.startValue+E*F(y,u,E),!d&&A===k.currentValue)continue}if(k.currentValue=A,"tween"===T)m=A;else{if(x.Hooks.registered[T]){var j=x.Hooks.getRoot(T),H=i(w).rootPropertyValueCache[j];H&&(k.rootPropertyValue=H)}var N=x.setPropertyValue(w,T,k.currentValue+(0===parseFloat(A)?"":k.unitType),k.rootPropertyValue,k.scrollData);x.Hooks.registered[T]&&(i(w).rootPropertyValueCache[j]=x.Normalizations.registered[j]?x.Normalizations.registered[j]("extract",null,N[1]):N[1]),"transform"===N[0]&&(V=!0)}}u.mobileHA&&i(w).transformCache.translate3d===a&&(i(w).transformCache.translate3d="(0px, 0px, 0px)",V=!0),V&&x.flushTransformCache(w)}}u.display!==a&&"none"!==u.display&&(v.State.calls[o][2].display=!1),u.visibility!==a&&"hidden"!==u.visibility&&(v.State.calls[o][2].visibility=!1),u.progress&&u.progress.call(s[1],s[1],y,Math.max(0,f+u.duration-t),f,m),1===y&&p(o)}}v.State.isTicking&&P(c)}function p(e,t){if(!v.State.calls[e])return!1;for(var r=v.State.calls[e][0],n=v.State.calls[e][1],o=v.State.calls[e][2],s=v.State.calls[e][4],l=!1,u=0,c=r.length;c>u;u++){var p=r[u].element;if(t||o.loop||("none"===o.display&&x.setPropertyValue(p,"display",o.display),"hidden"===o.visibility&&x.setPropertyValue(p,"visibility",o.visibility)),o.loop!==!0&&($.queue(p)[1]===a||!/\.velocityQueueEntryFlag/i.test($.queue(p)[1]))&&i(p)){i(p).isAnimating=!1,i(p).rootPropertyValueCache={};var f=!1;$.each(x.Lists.transforms3D,function(e,t){var r=/^scale/.test(t)?1:0,n=i(p).transformCache[t];i(p).transformCache[t]!==a&&new RegExp("^\\("+r+"[^.]").test(n)&&(f=!0,delete i(p).transformCache[t])}),o.mobileHA&&(f=!0,delete i(p).transformCache.translate3d),f&&x.flushTransformCache(p),x.Values.removeClass(p,"velocity-animating")}if(!t&&o.complete&&!o.loop&&u===c-1)try{o.complete.call(n,n)}catch(d){setTimeout(function(){throw d},1)}s&&o.loop!==!0&&s(n),i(p)&&o.loop===!0&&!t&&($.each(i(p).tweensContainer,function(e,t){/^rotate/.test(e)&&360===parseFloat(t.endValue)&&(t.endValue=0,t.startValue=360),/^backgroundPosition/.test(e)&&100===parseFloat(t.endValue)&&"%"===t.unitType&&(t.endValue=0,t.startValue=100)}),v(p,"reverse",{loop:!0,delay:o.delay})),o.queue!==!1&&$.dequeue(p,o.queue)}v.State.calls[e]=!1;for(var g=0,m=v.State.calls.length;m>g;g++)if(v.State.calls[g]!==!1){l=!0;break}l===!1&&(v.State.isTicking=!1,delete v.State.calls,v.State.calls=[])}var f=function(){if(r.documentMode)return r.documentMode;for(var e=7;e>4;e--){var t=r.createElement("div");if(t.innerHTML="<!--[if IE "+e+"]><span></span><![endif]-->",t.getElementsByTagName("span").length)return t=null,e}return a}(),d=function(){var e=0;return t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||function(t){var r=(new Date).getTime(),a;return a=Math.max(0,16-(r-e)),e=r+a,setTimeout(function(){t(r+a)},a)}}(),g={isString:function(e){return"string"==typeof e},isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)},isNode:function(e){return e&&e.nodeType},isNodeList:function(e){return"object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(e))&&e.length!==a&&(0===e.length||"object"==typeof e[0]&&e[0].nodeType>0)},isWrapped:function(e){return e&&(e.jquery||t.Zepto&&t.Zepto.zepto.isZ(e))},isSVG:function(e){return t.SVGElement&&e instanceof t.SVGElement},isEmptyObject:function(e){for(var t in e)return!1;return!0}},$,m=!1;if(e.fn&&e.fn.jquery?($=e,m=!0):$=t.Velocity.Utilities,8>=f&&!m)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(7>=f)return void(jQuery.fn.velocity=jQuery.fn.animate);var y=400,h="swing",v={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),isAndroid:/Android/i.test(navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test(navigator.userAgent),isChrome:t.chrome,isFirefox:/Firefox/i.test(navigator.userAgent),prefixElement:r.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[]},CSS:{},Utilities:$,Redirects:{},Easings:{},Promise:t.Promise,defaults:{queue:"",duration:y,easing:h,begin:a,complete:a,progress:a,display:a,visibility:a,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0},init:function(e){$.data(e,"velocity",{isSVG:g.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:2,patch:2},debug:!1};t.pageYOffset!==a?(v.State.scrollAnchor=t,v.State.scrollPropertyLeft="pageXOffset",v.State.scrollPropertyTop="pageYOffset"):(v.State.scrollAnchor=r.documentElement||r.body.parentNode||r.body,v.State.scrollPropertyLeft="scrollLeft",v.State.scrollPropertyTop="scrollTop");var b=function(){function e(e){return-e.tension*e.x-e.friction*e.v}function t(t,r,a){var n={x:t.x+a.dx*r,v:t.v+a.dv*r,tension:t.tension,friction:t.friction};return{dx:n.v,dv:e(n)}}function r(r,a){var n={dx:r.v,dv:e(r)},o=t(r,.5*a,n),i=t(r,.5*a,o),s=t(r,a,i),l=1/6*(n.dx+2*(o.dx+i.dx)+s.dx),u=1/6*(n.dv+2*(o.dv+i.dv)+s.dv);return r.x=r.x+l*a,r.v=r.v+u*a,r}return function a(e,t,n){var o={x:-1,v:0,tension:null,friction:null},i=[0],s=0,l=1e-4,u=.016,c,p,f;for(e=parseFloat(e)||500,t=parseFloat(t)||20,n=n||null,o.tension=e,o.friction=t,c=null!==n,c?(s=a(e,t),p=s/n*u):p=u;;)if(f=r(f||o,p),i.push(1+f.x),s+=16,!(Math.abs(f.x)>l&&Math.abs(f.v)>l))break;return c?function(e){return i[e*(i.length-1)|0]}:s}}();v.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},$.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){v.Easings[t[0]]=l.apply(null,t[1])});var x=v.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"]},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e=0;e<x.Lists.colors.length;e++){var t="color"===x.Lists.colors[e]?"0 0 0 1":"255 255 255 1";x.Hooks.templates[x.Lists.colors[e]]=["Red Green Blue Alpha",t]}var r,a,n;if(f)for(r in x.Hooks.templates){a=x.Hooks.templates[r],n=a[0].split(" ");var o=a[1].match(x.RegEx.valueSplit);"Color"===n[0]&&(n.push(n.shift()),o.push(o.shift()),x.Hooks.templates[r]=[n.join(" "),o.join(" ")])}for(r in x.Hooks.templates){a=x.Hooks.templates[r],n=a[0].split(" ");for(var e in n){var i=r+n[e],s=e;x.Hooks.registered[i]=[r,s]}}},getRoot:function(e){var t=x.Hooks.registered[e];return t?t[0]:e},cleanRootPropertyValue:function(e,t){return x.RegEx.valueUnwrap.test(t)&&(t=t.match(x.RegEx.valueUnwrap)[1]),x.Values.isCSSNullValue(t)&&(t=x.Hooks.templates[e][1]),t},extractValue:function(e,t){var r=x.Hooks.registered[e];if(r){var a=r[0],n=r[1];return t=x.Hooks.cleanRootPropertyValue(a,t),t.toString().match(x.RegEx.valueSplit)[n]}return t},injectValue:function(e,t,r){var a=x.Hooks.registered[e];if(a){var n=a[0],o=a[1],i,s;return r=x.Hooks.cleanRootPropertyValue(n,r),i=r.toString().match(x.RegEx.valueSplit),i[o]=t,s=i.join(" ")}return r}},Normalizations:{registered:{clip:function(e,t,r){switch(e){case"name":return"clip";case"extract":var a;return x.RegEx.wrappedValueAlreadyExtracted.test(r)?a=r:(a=r.toString().match(x.RegEx.valueUnwrap),a=a?a[1].replace(/,(\s+)?/g," "):r),a;case"inject":return"rect("+r+")"}},blur:function(e,t,r){switch(e){case"name":return v.State.isFirefox?"filter":"-webkit-filter";case"extract":var a=parseFloat(r);if(!a&&0!==a){var n=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i);a=n?n[1]:0}return a;case"inject":return parseFloat(r)?"blur("+r+")":"none"}},opacity:function(e,t,r){if(8>=f)switch(e){case"name":return"filter";case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);return r=a?a[1]/100:1;case"inject":return t.style.zoom=1,parseFloat(r)>=1?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}else switch(e){case"name":return"opacity";case"extract":return r;case"inject":return r}}},register:function(){9>=f||v.State.isGingerbread||(x.Lists.transformsBase=x.Lists.transformsBase.concat(x.Lists.transforms3D));for(var e=0;e<x.Lists.transformsBase.length;e++)!function(){var t=x.Lists.transformsBase[e];x.Normalizations.registered[t]=function(e,r,n){switch(e){case"name":return"transform";case"extract":return i(r)===a||i(r).transformCache[t]===a?/^scale/i.test(t)?1:0:i(r).transformCache[t].replace(/[()]/g,"");case"inject":var o=!1;switch(t.substr(0,t.length-1)){case"translate":o=!/(%|px|em|rem|vw|vh|\d)$/i.test(n);break;case"scal":case"scale":v.State.isAndroid&&i(r).transformCache[t]===a&&1>n&&(n=1),o=!/(\d)$/i.test(n);break;case"skew":o=!/(deg|\d)$/i.test(n);break;case"rotate":o=!/(deg|\d)$/i.test(n)}return o||(i(r).transformCache[t]="("+n+")"),i(r).transformCache[t]}}}();for(var e=0;e<x.Lists.colors.length;e++)!function(){var t=x.Lists.colors[e];x.Normalizations.registered[t]=function(e,r,n){switch(e){case"name":return t;case"extract":var o;if(x.RegEx.wrappedValueAlreadyExtracted.test(n))o=n;else{var i,s={black:"rgb(0, 0, 0)",blue:"rgb(0, 0, 255)",gray:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",red:"rgb(255, 0, 0)",white:"rgb(255, 255, 255)"};/^[A-z]+$/i.test(n)?i=s[n]!==a?s[n]:s.black:x.RegEx.isHex.test(n)?i="rgb("+x.Values.hexToRgb(n).join(" ")+")":/^rgba?\(/i.test(n)||(i=s.black),o=(i||n).toString().match(x.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," ")}return 8>=f||3!==o.split(" ").length||(o+=" 1"),o;case"inject":return 8>=f?4===n.split(" ").length&&(n=n.split(/\s+/).slice(0,3).join(" ")):3===n.split(" ").length&&(n+=" 1"),(8>=f?"rgb":"rgba")+"("+n.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")"}}}()}},Names:{camelCase:function(e){return e.replace(/-(\w)/g,function(e,t){return t.toUpperCase()})},SVGAttribute:function(e){var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(f||v.State.isAndroid&&!v.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)},prefixCheck:function(e){if(v.State.prefixMatches[e])return[v.State.prefixMatches[e],!0];for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;a>r;r++){var n;if(n=0===r?e:t[r]+e.replace(/^\w/,function(e){return e.toUpperCase()}),g.isString(v.State.prefixElement.style[n]))return v.State.prefixMatches[e]=n,[n,!0]}return[e,!1]}},Values:{hexToRgb:function(e){var t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i,r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,a;return e=e.replace(t,function(e,t,r,a){return t+t+r+r+a+a}),a=r.exec(e),a?[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]:[0,0,0]},isCSSNullValue:function(e){return 0==e||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(e)},getUnitType:function(e){return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"},getDisplayType:function(e){var t=e&&e.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(t)?"inline":/^(li)$/i.test(t)?"list-item":/^(tr)$/i.test(t)?"table-row":/^(table)$/i.test(t)?"table":/^(tbody)$/i.test(t)?"table-row-group":"block"},addClass:function(e,t){e.classList?e.classList.add(t):e.className+=(e.className.length?" ":"")+t},removeClass:function(e,t){e.classList?e.classList.remove(t):e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," ")}},getPropertyValue:function(e,r,n,o){function s(e,r){function n(){u&&x.setPropertyValue(e,"display","none")}var l=0;if(8>=f)l=$.css(e,r);else{var u=!1;if(/^(width|height)$/.test(r)&&0===x.getPropertyValue(e,"display")&&(u=!0,x.setPropertyValue(e,"display",x.Values.getDisplayType(e))),!o){if("height"===r&&"border-box"!==x.getPropertyValue(e,"boxSizing").toString().toLowerCase()){var c=e.offsetHeight-(parseFloat(x.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(x.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(x.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(x.getPropertyValue(e,"paddingBottom"))||0);return n(),c}if("width"===r&&"border-box"!==x.getPropertyValue(e,"boxSizing").toString().toLowerCase()){var p=e.offsetWidth-(parseFloat(x.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(x.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(x.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(x.getPropertyValue(e,"paddingRight"))||0);return n(),p}}var d;d=i(e)===a?t.getComputedStyle(e,null):i(e).computedStyle?i(e).computedStyle:i(e).computedStyle=t.getComputedStyle(e,null),"borderColor"===r&&(r="borderTopColor"),l=9===f&&"filter"===r?d.getPropertyValue(r):d[r],(""===l||null===l)&&(l=e.style[r]),n()}if("auto"===l&&/^(top|right|bottom|left)$/i.test(r)){var g=s(e,"position");("fixed"===g||"absolute"===g&&/top|left/i.test(r))&&(l=$(e).position()[r]+"px")}return l}var l;if(x.Hooks.registered[r]){var u=r,c=x.Hooks.getRoot(u);n===a&&(n=x.getPropertyValue(e,x.Names.prefixCheck(c)[0])),x.Normalizations.registered[c]&&(n=x.Normalizations.registered[c]("extract",e,n)),l=x.Hooks.extractValue(u,n)}else if(x.Normalizations.registered[r]){var p,d;p=x.Normalizations.registered[r]("name",e),"transform"!==p&&(d=s(e,x.Names.prefixCheck(p)[0]),x.Values.isCSSNullValue(d)&&x.Hooks.templates[r]&&(d=x.Hooks.templates[r][1])),l=x.Normalizations.registered[r]("extract",e,d)}if(!/^[\d-]/.test(l))if(i(e)&&i(e).isSVG&&x.Names.SVGAttribute(r))if(/^(height|width)$/i.test(r))try{l=e.getBBox()[r]}catch(g){l=0}else l=e.getAttribute(r);else l=s(e,x.Names.prefixCheck(r)[0]);return x.Values.isCSSNullValue(l)&&(l=0),v.debug>=2&&console.log("Get "+r+": "+l),l},setPropertyValue:function(e,r,a,n,o){var s=r;if("scroll"===r)o.container?o.container["scroll"+o.direction]=a:"Left"===o.direction?t.scrollTo(a,o.alternateValue):t.scrollTo(o.alternateValue,a);else if(x.Normalizations.registered[r]&&"transform"===x.Normalizations.registered[r]("name",e))x.Normalizations.registered[r]("inject",e,a),s="transform",a=i(e).transformCache[r];else{if(x.Hooks.registered[r]){var l=r,u=x.Hooks.getRoot(r);n=n||x.getPropertyValue(e,u),a=x.Hooks.injectValue(l,a,n),r=u}if(x.Normalizations.registered[r]&&(a=x.Normalizations.registered[r]("inject",e,a),r=x.Normalizations.registered[r]("name",e)),s=x.Names.prefixCheck(r)[0],8>=f)try{e.style[s]=a}catch(c){v.debug&&console.log("Browser does not support ["+a+"] for ["+s+"]")}else i(e)&&i(e).isSVG&&x.Names.SVGAttribute(r)?e.setAttribute(r,a):e.style[s]=a;v.debug>=2&&console.log("Set "+r+" ("+s+"): "+a)}return[s,a]},flushTransformCache:function(e){function t(t){return parseFloat(x.getPropertyValue(e,t))}var r="";if((f||v.State.isAndroid&&!v.State.isChrome)&&i(e).isSVG){var a={translate:[t("translateX"),t("translateY")],skewX:[t("skewX")],skewY:[t("skewY")],scale:1!==t("scale")?[t("scale"),t("scale")]:[t("scaleX"),t("scaleY")],rotate:[t("rotateZ"),0,0]};$.each(i(e).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),a[e]&&(r+=e+"("+a[e].join(" ")+") ",delete a[e])})}else{var n,o;$.each(i(e).transformCache,function(t){return n=i(e).transformCache[t],"transformPerspective"===t?(o=n,!0):(9===f&&"rotateZ"===t&&(t="rotate"),void(r+=t+n+" "))}),o&&(r="perspective"+o+" "+r)}x.setPropertyValue(e,"transform",r)}};x.Hooks.register(),x.Normalizations.register(),v.hook=function(e,t,r){var n=a;return e=o(e),$.each(e,function(e,o){if(i(o)===a&&v.init(o),r===a)n===a&&(n=v.CSS.getPropertyValue(o,t));else{var s=v.CSS.setPropertyValue(o,t,r);"transform"===s[0]&&v.CSS.flushTransformCache(o),n=s}}),n};var S=function(){function e(){return l?T.promise||null:f}function n(){function e(e){function p(e,t){var r=a,i=a,s=a;return g.isArray(e)?(r=e[0],!g.isArray(e[1])&&/^[\d-]/.test(e[1])||g.isFunction(e[1])||x.RegEx.isHex.test(e[1])?s=e[1]:(g.isString(e[1])&&!x.RegEx.isHex.test(e[1])||g.isArray(e[1]))&&(i=t?e[1]:u(e[1],o.duration),e[2]!==a&&(s=e[2]))):r=e,t||(i=i||o.easing),g.isFunction(r)&&(r=r.call(n,w,P)),g.isFunction(s)&&(s=s.call(n,w,P)),[r||0,i,s]}function f(e,t){var r,a;return a=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){return r=e,""}),r||(r=x.Values.getUnitType(e)),[a,r]}function d(){var e={myParent:n.parentNode||r.body,position:x.getPropertyValue(n,"position"),fontSize:x.getPropertyValue(n,"fontSize")},a=e.position===N.lastPosition&&e.myParent===N.lastParent,o=e.fontSize===N.lastFontSize;N.lastParent=e.myParent,N.lastPosition=e.position,N.lastFontSize=e.fontSize;var s=100,l={};if(o&&a)l.emToPx=N.lastEmToPx,l.percentToPxWidth=N.lastPercentToPxWidth,l.percentToPxHeight=N.lastPercentToPxHeight;else{var u=i(n).isSVG?r.createElementNS("http://www.w3.org/2000/svg","rect"):r.createElement("div");v.init(u),e.myParent.appendChild(u),$.each(["overflow","overflowX","overflowY"],function(e,t){v.CSS.setPropertyValue(u,t,"hidden")}),v.CSS.setPropertyValue(u,"position",e.position),v.CSS.setPropertyValue(u,"fontSize",e.fontSize),v.CSS.setPropertyValue(u,"boxSizing","content-box"),$.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){v.CSS.setPropertyValue(u,t,s+"%")}),v.CSS.setPropertyValue(u,"paddingLeft",s+"em"),l.percentToPxWidth=N.lastPercentToPxWidth=(parseFloat(x.getPropertyValue(u,"width",null,!0))||1)/s,l.percentToPxHeight=N.lastPercentToPxHeight=(parseFloat(x.getPropertyValue(u,"height",null,!0))||1)/s,l.emToPx=N.lastEmToPx=(parseFloat(x.getPropertyValue(u,"paddingLeft"))||1)/s,e.myParent.removeChild(u)}return null===N.remToPx&&(N.remToPx=parseFloat(x.getPropertyValue(r.body,"fontSize"))||16),null===N.vwToPx&&(N.vwToPx=parseFloat(t.innerWidth)/100,N.vhToPx=parseFloat(t.innerHeight)/100),l.remToPx=N.remToPx,l.vwToPx=N.vwToPx,l.vhToPx=N.vhToPx,v.debug>=1&&console.log("Unit ratios: "+JSON.stringify(l),n),l}if(o.begin&&0===w)try{o.begin.call(m,m)}catch(y){setTimeout(function(){throw y},1)}if("scroll"===k){var S=/^x$/i.test(o.axis)?"Left":"Top",V=parseFloat(o.offset)||0,C,A,F;o.container?g.isWrapped(o.container)||g.isNode(o.container)?(o.container=o.container[0]||o.container,C=o.container["scroll"+S],F=C+$(n).position()[S.toLowerCase()]+V):o.container=null:(C=v.State.scrollAnchor[v.State["scrollProperty"+S]],A=v.State.scrollAnchor[v.State["scrollProperty"+("Left"===S?"Top":"Left")]],F=$(n).offset()[S.toLowerCase()]+V),s={scroll:{rootPropertyValue:!1,startValue:C,currentValue:C,endValue:F,unitType:"",easing:o.easing,scrollData:{container:o.container,direction:S,alternateValue:A}},element:n},v.debug&&console.log("tweensContainer (scroll): ",s.scroll,n)}else if("reverse"===k){if(!i(n).tweensContainer)return void $.dequeue(n,o.queue);"none"===i(n).opts.display&&(i(n).opts.display="auto"),"hidden"===i(n).opts.visibility&&(i(n).opts.visibility="visible"),i(n).opts.loop=!1,i(n).opts.begin=null,i(n).opts.complete=null,b.easing||delete o.easing,b.duration||delete o.duration,o=$.extend({},i(n).opts,o);var E=$.extend(!0,{},i(n).tweensContainer);for(var j in E)if("element"!==j){var H=E[j].startValue;E[j].startValue=E[j].currentValue=E[j].endValue,E[j].endValue=H,g.isEmptyObject(b)||(E[j].easing=o.easing),v.debug&&console.log("reverse tweensContainer ("+j+"): "+JSON.stringify(E[j]),n)}s=E}else if("start"===k){var E;i(n).tweensContainer&&i(n).isAnimating===!0&&(E=i(n).tweensContainer),$.each(h,function(e,t){if(RegExp("^"+x.Lists.colors.join("$|^")+"$").test(e)){var r=p(t,!0),n=r[0],o=r[1],i=r[2];if(x.RegEx.isHex.test(n)){for(var s=["Red","Green","Blue"],l=x.Values.hexToRgb(n),u=i?x.Values.hexToRgb(i):a,c=0;c<s.length;c++){var f=[l[c]];o&&f.push(o),u!==a&&f.push(u[c]),h[e+s[c]]=f}delete h[e]}}});for(var R in h){var O=p(h[R]),z=O[0],q=O[1],M=O[2];R=x.Names.camelCase(R);var I=x.Hooks.getRoot(R),B=!1;if(i(n).isSVG||"tween"===I||x.Names.prefixCheck(I)[1]!==!1||x.Normalizations.registered[I]!==a){(o.display!==a&&null!==o.display&&"none"!==o.display||o.visibility!==a&&"hidden"!==o.visibility)&&/opacity|filter/.test(R)&&!M&&0!==z&&(M=0),o._cacheValues&&E&&E[R]?(M===a&&(M=E[R].endValue+E[R].unitType),B=i(n).rootPropertyValueCache[I]):x.Hooks.registered[R]?M===a?(B=x.getPropertyValue(n,I),M=x.getPropertyValue(n,R,B)):B=x.Hooks.templates[I][1]:M===a&&(M=x.getPropertyValue(n,R));var W,G,D,X=!1;if(W=f(R,M),M=W[0],D=W[1],W=f(R,z),z=W[0].replace(/^([+-\/*])=/,function(e,t){return X=t,""}),G=W[1],M=parseFloat(M)||0,z=parseFloat(z)||0,"%"===G&&(/^(fontSize|lineHeight)$/.test(R)?(z/=100,G="em"):/^scale/.test(R)?(z/=100,G=""):/(Red|Green|Blue)$/i.test(R)&&(z=z/100*255,G="")),/[\/*]/.test(X))G=D;else if(D!==G&&0!==M)if(0===z)G=D;else{l=l||d();var Y=/margin|padding|left|right|width|text|word|letter/i.test(R)||/X$/.test(R)||"x"===R?"x":"y";switch(D){case"%":M*="x"===Y?l.percentToPxWidth:l.percentToPxHeight;break;case"px":break;default:M*=l[D+"ToPx"]}switch(G){case"%":M*=1/("x"===Y?l.percentToPxWidth:l.percentToPxHeight);break;case"px":break;default:M*=1/l[G+"ToPx"]}}switch(X){case"+":z=M+z;break;case"-":z=M-z;break;case"*":z=M*z;break;case"/":z=M/z}s[R]={rootPropertyValue:B,startValue:M,currentValue:M,endValue:z,unitType:G,easing:q},v.debug&&console.log("tweensContainer ("+R+"): "+JSON.stringify(s[R]),n)}else v.debug&&console.log("Skipping ["+I+"] due to a lack of browser support.")}s.element=n}s.element&&(x.Values.addClass(n,"velocity-animating"),L.push(s),""===o.queue&&(i(n).tweensContainer=s,i(n).opts=o),i(n).isAnimating=!0,w===P-1?(v.State.calls.push([L,m,o,null,T.resolver]),v.State.isTicking===!1&&(v.State.isTicking=!0,c())):w++)}var n=this,o=$.extend({},v.defaults,b),s={},l;switch(i(n)===a&&v.init(n),parseFloat(o.delay)&&o.queue!==!1&&$.queue(n,o.queue,function(e){v.velocityQueueEntryFlag=!0,i(n).delayTimer={setTimeout:setTimeout(e,parseFloat(o.delay)),next:e}}),o.duration.toString().toLowerCase()){case"fast":o.duration=200;break;case"normal":o.duration=y;break;case"slow":o.duration=600;break;default:o.duration=parseFloat(o.duration)||1}v.mock!==!1&&(v.mock===!0?o.duration=o.delay=1:(o.duration*=parseFloat(v.mock)||1,o.delay*=parseFloat(v.mock)||1)),o.easing=u(o.easing,o.duration),o.begin&&!g.isFunction(o.begin)&&(o.begin=null),o.progress&&!g.isFunction(o.progress)&&(o.progress=null),o.complete&&!g.isFunction(o.complete)&&(o.complete=null),o.display!==a&&null!==o.display&&(o.display=o.display.toString().toLowerCase(),"auto"===o.display&&(o.display=v.CSS.Values.getDisplayType(n))),o.visibility!==a&&null!==o.visibility&&(o.visibility=o.visibility.toString().toLowerCase()),o.mobileHA=o.mobileHA&&v.State.isMobile&&!v.State.isGingerbread,o.queue===!1?o.delay?setTimeout(e,o.delay):e():$.queue(n,o.queue,function(t,r){return r===!0?(T.promise&&T.resolver(m),!0):(v.velocityQueueEntryFlag=!0,void e(t))}),""!==o.queue&&"fx"!==o.queue||"inprogress"===$.queue(n)[0]||$.dequeue(n)}var s=arguments[0]&&(arguments[0].p||$.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||g.isString(arguments[0].properties)),l,f,d,m,h,b;if(g.isWrapped(this)?(l=!1,d=0,m=this,f=this):(l=!0,d=1,m=s?arguments[0].elements||arguments[0].e:arguments[0]),m=o(m)){s?(h=arguments[0].properties||arguments[0].p,b=arguments[0].options||arguments[0].o):(h=arguments[d],b=arguments[d+1]);var P=m.length,w=0;if(!/^(stop|finish)$/i.test(h)&&!$.isPlainObject(b)){var V=d+1;b={};for(var C=V;C<arguments.length;C++)g.isArray(arguments[C])||!/^(fast|normal|slow)$/i.test(arguments[C])&&!/^\d/.test(arguments[C])?g.isString(arguments[C])||g.isArray(arguments[C])?b.easing=arguments[C]:g.isFunction(arguments[C])&&(b.complete=arguments[C]):b.duration=arguments[C]}var T={promise:null,resolver:null,rejecter:null};l&&v.Promise&&(T.promise=new v.Promise(function(e,t){T.resolver=e,T.rejecter=t}));var k;switch(h){case"scroll":k="scroll";break;case"reverse":k="reverse";break;case"finish":case"stop":$.each(m,function(e,t){i(t)&&i(t).delayTimer&&(clearTimeout(i(t).delayTimer.setTimeout),i(t).delayTimer.next&&i(t).delayTimer.next(),delete i(t).delayTimer)});var A=[];return $.each(v.State.calls,function(e,t){t&&$.each(t[1],function(r,n){var o=b===a?"":b;return o===!0||t[2].queue===o||b===a&&t[2].queue===!1?void $.each(m,function(r,a){a===n&&((b===!0||g.isString(b))&&($.each($.queue(a,g.isString(b)?b:""),function(e,t){g.isFunction(t)&&t(null,!0)}),$.queue(a,g.isString(b)?b:"",[])),"stop"===h?(i(a)&&i(a).tweensContainer&&o!==!1&&$.each(i(a).tweensContainer,function(e,t){t.endValue=t.currentValue
+}),A.push(e)):"finish"===h&&(t[2].duration=1))}):!0})}),"stop"===h&&($.each(A,function(e,t){p(t,!0)}),T.promise&&T.resolver(m)),e();default:if(!$.isPlainObject(h)||g.isEmptyObject(h)){if(g.isString(h)&&v.Redirects[h]){var F=$.extend({},b),E=F.duration,j=F.delay||0;return F.backwards===!0&&(m=$.extend(!0,[],m).reverse()),$.each(m,function(e,t){parseFloat(F.stagger)?F.delay=j+parseFloat(F.stagger)*e:g.isFunction(F.stagger)&&(F.delay=j+F.stagger.call(t,e,P)),F.drag&&(F.duration=parseFloat(E)||(/^(callout|transition)/.test(h)?1e3:y),F.duration=Math.max(F.duration*(F.backwards?1-e/P:(e+1)/P),.75*F.duration,200)),v.Redirects[h].call(t,t,F||{},e,P,m,T.promise?T:a)}),e()}var H="Velocity: First argument ("+h+") was not a property map, a known action, or a registered redirect. Aborting.";return T.promise?T.rejecter(new Error(H)):console.log(H),e()}k="start"}var N={lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null},L=[];$.each(m,function(e,t){g.isNode(t)&&n.call(t)});var F=$.extend({},v.defaults,b),R;if(F.loop=parseInt(F.loop),R=2*F.loop-1,F.loop)for(var O=0;R>O;O++){var z={delay:F.delay,progress:F.progress};O===R-1&&(z.display=F.display,z.visibility=F.visibility,z.complete=F.complete),S(m,"reverse",z)}return e()}};v=$.extend(S,v),v.animate=S;var P=t.requestAnimationFrame||d;return v.State.isMobile||r.hidden===a||r.addEventListener("visibilitychange",function(){r.hidden?(P=function(e){return setTimeout(function(){e(!0)},16)},c()):P=t.requestAnimationFrame||d}),e.Velocity=v,e!==t&&(e.fn.velocity=S,e.fn.velocity.defaults=v.defaults),$.each(["Down","Up"],function(e,t){v.Redirects["slide"+t]=function(e,r,n,o,i,s){var l=$.extend({},r),u=l.begin,c=l.complete,p={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""},f={};l.display===a&&(l.display="Down"===t?"inline"===v.CSS.Values.getDisplayType(e)?"inline-block":"block":"none"),l.begin=function(){u&&u.call(i,i);for(var r in p){f[r]=e.style[r];var a=v.CSS.getPropertyValue(e,r);p[r]="Down"===t?[a,0]:[0,a]}f.overflow=e.style.overflow,e.style.overflow="hidden"},l.complete=function(){for(var t in f)e.style[t]=f[t];c&&c.call(i,i),s&&s.resolver(i)},v(e,p,l)}}),$.each(["In","Out"],function(e,t){v.Redirects["fade"+t]=function(e,r,n,o,i,s){var l=$.extend({},r),u={opacity:"In"===t?1:0},c=l.complete;l.complete=n!==o-1?l.begin=null:function(){c&&c.call(i,i),s&&s.resolver(i)},l.display===a&&(l.display="In"===t?"auto":"none"),v(this,u,l)}}),v}(window.jQuery||window.Zepto||window,window,document)});
\ No newline at end of file
diff --git a/lib/velocity/velocity.ui.min.js b/lib/velocity/velocity.ui.min.js
new file mode 100644
index 0000000000..870694530b
--- /dev/null
+++ b/lib/velocity/velocity.ui.min.js
@@ -0,0 +1,2 @@
+/* VelocityJS.org UI Pack (5.0.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
+!function(t){"function"==typeof require&&"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){return function(t,a,e,r){function n(t,a){var e=[];return t&&a?($.each([t,a],function(t,a){var r=[];$.each(a,function(t,a){for(;a.toString().length<5;)a="0"+a;r.push(a)}),e.push(r.join(""))}),parseFloat(e[0])>parseFloat(e[1])):!1}if(!t.Velocity||!t.Velocity.Utilities)return void(a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting."));var i=t.Velocity,$=i.Utilities,s=i.version,o={major:1,minor:1,patch:0};if(n(o,s)){var l="Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";throw alert(l),new Error(l)}i.RegisterEffect=i.RegisterUI=function(t,a){function e(t,a,e,r){var n=0,s;$.each(t.nodeType?[t]:t,function(t,a){r&&(e+=t*r),s=a.parentNode,$.each(["height","paddingTop","paddingBottom","marginTop","marginBottom"],function(t,e){n+=parseFloat(i.CSS.getPropertyValue(a,e))})}),i.animate(s,{height:("In"===a?"+":"-")+"="+n},{queue:!1,easing:"ease-in-out",duration:e*("In"===a?.6:1)})}return i.Redirects[t]=function(n,s,o,l,c,u){function f(){s.display!==r&&"none"!==s.display||!/Out$/.test(t)||$.each(c.nodeType?[c]:c,function(t,a){i.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(c,c),u&&u.resolver(c||n)}var p=o===l-1;a.defaultDuration="function"==typeof a.defaultDuration?a.defaultDuration.call(c,c):parseFloat(a.defaultDuration);for(var d=0;d<a.calls.length;d++){var g=a.calls[d],y=g[0],m=s.duration||a.defaultDuration||1e3,X=g[1],Y=g[2]||{},O={};if(O.duration=m*(X||1),O.queue=s.queue||"",O.easing=Y.easing||"ease",O.delay=parseFloat(Y.delay)||0,O._cacheValues=Y._cacheValues||!0,0===d){if(O.delay+=parseFloat(s.delay)||0,0===o&&(O.begin=function(){s.begin&&s.begin.call(c,c);var a=t.match(/(In|Out)$/);a&&"In"===a[0]&&y.opacity!==r&&$.each(c.nodeType?[c]:c,function(t,a){i.CSS.setPropertyValue(a,"opacity",0)}),s.animateParentHeight&&a&&e(c,a[0],m+O.delay,s.stagger)}),null!==s.display)if(s.display!==r&&"none"!==s.display)O.display=s.display;else if(/In$/.test(t)){var v=i.CSS.Values.getDisplayType(n);O.display="inline"===v?"inline-block":v}s.visibility&&"hidden"!==s.visibility&&(O.visibility=s.visibility)}d===a.calls.length-1&&(O.complete=function(){if(a.reset){for(var t in a.reset){var e=a.reset[t];i.CSS.Hooks.registered[t]!==r||"string"!=typeof e&&"number"!=typeof e||(a.reset[t]=[a.reset[t],a.reset[t]])}var s={duration:0,queue:!1};p&&(s.complete=f),i.animate(n,a.reset,s)}else p&&f()},"hidden"===s.visibility&&(O.visibility=s.visibility)),i.animate(n,y,O)}},i},i.RegisterEffect.packagedEffects={"callout.bounce":{defaultDuration:550,calls:[[{translateY:-30},.25],[{translateY:0},.125],[{translateY:-15},.125],[{translateY:0},.25]]},"callout.shake":{defaultDuration:800,calls:[[{translateX:-11},.125],[{translateX:11},.125],[{translateX:-11},.125],[{translateX:11},.125],[{translateX:-11},.125],[{translateX:11},.125],[{translateX:-11},.125],[{translateX:0},.125]]},"callout.flash":{defaultDuration:1100,calls:[[{opacity:[0,"easeInOutQuad",1]},.25],[{opacity:[1,"easeInOutQuad"]},.25],[{opacity:[0,"easeInOutQuad"]},.25],[{opacity:[1,"easeInOutQuad"]},.25]]},"callout.pulse":{defaultDuration:825,calls:[[{scaleX:1.1,scaleY:1.1},.5,{easing:"easeInExpo"}],[{scaleX:1,scaleY:1},.5]]},"callout.swing":{defaultDuration:950,calls:[[{rotateZ:15},.2],[{rotateZ:-10},.2],[{rotateZ:5},.2],[{rotateZ:-5},.2],[{rotateZ:0},.2]]},"callout.tada":{defaultDuration:1e3,calls:[[{scaleX:.9,scaleY:.9,rotateZ:-3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:-3},.1],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],[{scaleX:1,scaleY:1,rotateZ:0},.2]]},"transition.fadeIn":{defaultDuration:500,calls:[[{opacity:[1,0]}]]},"transition.fadeOut":{defaultDuration:500,calls:[[{opacity:[0,1]}]]},"transition.flipXIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateY:[0,-55]}]],reset:{transformPerspective:0}},"transition.flipXOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateY:55}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipYIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateX:[0,-45]}]],reset:{transformPerspective:0}},"transition.flipYOut":{defaultDuration:800,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateX:25}]],reset:{transformPerspective:0,rotateX:0}},"transition.flipBounceXIn":{defaultDuration:900,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateY:[-10,90]},.5],[{opacity:.8,rotateY:10},.25],[{opacity:1,rotateY:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceXOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateY:-10},.5],[{opacity:0,rotateY:90},.5]],reset:{transformPerspective:0,rotateY:0}},"transition.flipBounceYIn":{defaultDuration:850,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateX:[-10,90]},.5],[{opacity:.8,rotateX:10},.25],[{opacity:1,rotateX:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceYOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateX:-15},.5],[{opacity:0,rotateX:90},.5]],reset:{transformPerspective:0,rotateX:0}},"transition.swoopIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["100%","50%"],transformOriginY:["100%","100%"],scaleX:[1,0],scaleY:[1,0],translateX:[0,-700],translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%"}},"transition.swoopOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformOriginX:["50%","100%"],transformOriginY:["100%","100%"],scaleX:0,scaleY:0,translateX:-700,translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%",scaleX:1,scaleY:1,translateX:0}},"transition.whirlIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,0],scaleY:[1,0],rotateY:[0,160]},1,{easing:"easeInOutSine"}]]},"transition.whirlOut":{defaultDuration:750,calls:[[{opacity:[0,"easeInOutQuint",1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:0,scaleY:0,rotateY:160},1,{easing:"swing"}]],reset:{scaleX:1,scaleY:1,rotateY:0}},"transition.shrinkIn":{defaultDuration:750,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,1.5],scaleY:[1,1.5],translateZ:0}]]},"transition.shrinkOut":{defaultDuration:600,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:1.3,scaleY:1.3,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.expandIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,.625],scaleY:[1,.625],translateZ:0}]]},"transition.expandOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:.5,scaleY:.5,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.bounceIn":{defaultDuration:800,calls:[[{opacity:[1,0],scaleX:[1.05,.3],scaleY:[1.05,.3]},.4],[{scaleX:.9,scaleY:.9,translateZ:0},.2],[{scaleX:1,scaleY:1},.5]]},"transition.bounceOut":{defaultDuration:800,calls:[[{scaleX:.95,scaleY:.95},.35],[{scaleX:1.1,scaleY:1.1,translateZ:0},.35],[{opacity:[0,1],scaleX:.3,scaleY:.3},.3]],reset:{scaleX:1,scaleY:1}},"transition.bounceUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[-30,1e3]},.6,{easing:"easeOutCirc"}],[{translateY:10},.2],[{translateY:0},.2]]},"transition.bounceUpOut":{defaultDuration:1e3,calls:[[{translateY:20},.2],[{opacity:[0,"easeInCirc",1],translateY:-1e3},.8]],reset:{translateY:0}},"transition.bounceDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[30,-1e3]},.6,{easing:"easeOutCirc"}],[{translateY:-10},.2],[{translateY:0},.2]]},"transition.bounceDownOut":{defaultDuration:1e3,calls:[[{translateY:-20},.2],[{opacity:[0,"easeInCirc",1],translateY:1e3},.8]],reset:{translateY:0}},"transition.bounceLeftIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[30,-1250]},.6,{easing:"easeOutCirc"}],[{translateX:-10},.2],[{translateX:0},.2]]},"transition.bounceLeftOut":{defaultDuration:750,calls:[[{translateX:30},.2],[{opacity:[0,"easeInCirc",1],translateX:-1250},.8]],reset:{translateX:0}},"transition.bounceRightIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[-30,1250]},.6,{easing:"easeOutCirc"}],[{translateX:10},.2],[{translateX:0},.2]]},"transition.bounceRightOut":{defaultDuration:750,calls:[[{translateX:-30},.2],[{opacity:[0,"easeInCirc",1],translateX:1250},.8]],reset:{translateX:0}},"transition.slideUpIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,20],translateZ:0}]]},"transition.slideUpOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:-20,translateZ:0}]],reset:{translateY:0}},"transition.slideDownIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,-20],translateZ:0}]]},"transition.slideDownOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:20,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,-20],translateZ:0}]]},"transition.slideLeftOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:-20,translateZ:0}]],reset:{translateX:0}},"transition.slideRightIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,20],translateZ:0}]]},"transition.slideRightOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:20,translateZ:0}]],reset:{translateX:0}},"transition.slideUpBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,75],translateZ:0}]]},"transition.slideUpBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:-75,translateZ:0}]],reset:{translateY:0}},"transition.slideDownBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,-75],translateZ:0}]]},"transition.slideDownBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:75,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,-75],translateZ:0}]]},"transition.slideLeftBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:-75,translateZ:0}]],reset:{translateX:0}},"transition.slideRightBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,75],translateZ:0}]]},"transition.slideRightBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:75,translateZ:0}]],reset:{translateX:0}},"transition.perspectiveUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveUpOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveDownOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveLeftIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveLeftOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}},"transition.perspectiveRightIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveRightOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}}};for(var c in i.RegisterEffect.packagedEffects)i.RegisterEffect(c,i.RegisterEffect.packagedEffects[c]);i.RunSequence=function(t){var a=$.extend(!0,[],t);a.length>1&&($.each(a.reverse(),function(t,e){var r=a[t+1];if(r){var n=e.o||e.options,s=r.o||r.options,o=n&&n.sequenceQueue===!1?"begin":"complete",l=s&&s[o],c={};c[o]=function(){var t=r.e||r.elements,a=t.nodeType?[t]:t;l&&l.call(a,a),i(e)},r.o?r.o=$.extend({},s,c):r.options=$.extend({},s,c)}}),a.reverse()),i(a[0])}}(window.jQuery||window.Zepto||window,window,document)});
\ No newline at end of file
diff --git a/live2dw/assets/moc/wanko.1024/texture_00.png b/live2dw/assets/moc/wanko.1024/texture_00.png
new file mode 100644
index 0000000000000000000000000000000000000000..700840dd3b722ab4b73defbf6a3945ca5a3e9086
GIT binary patch
literal 114061
zcma&Mi9b|-^gn*?oyFM4zQ$NWmMq!Ic9ld_DqA5#l8{s?vdoo=qKJ~T7$p>iLQ)t}
zREm@kGVeknTb8Ud-}!t#zdztNk9pjCAM-l*^*XQDob`Fm1()qxgazaU06^H$!EP4-
zk@rXh3W0ZXXy_>eK!RMHT{k-)I?Cm8-E>uXSKcSv#*}wm`Zd7ia(G`iJ+)7c>wL|0
z-T#-s+j!0YQgPk%{y+Ld4w$FDy6gXry6Mo|byav%{om-y%F65}i~pmau{58tG@IFA
zHr%-L|9*LP$(Z+0dgsRLs*2nlb{{wC#_B1Z4%jo2Y!$Doc>dUd>k;PPs~^uaJ|FDw
z`@i{5YshukuZ`A_OG`?8X|5I>O!qX@Xy2q8uO;8T&GeO}Cbww&J52kihMc>+e2=^B
z1)Wvb^j7uJol8tq$Kp-mj|KM!yWiDU^3zuR867-$HiA>&>}$1dIXC;i<9>%dcP5@b
zv2@olSw%7hk2T__obcZ>-MKebR^*784$H~>t><P38L9Un-g7rL{knwzyP3glsMxo|
zek?O3H$*eXN)LAz`IBbT`(RVzR>O}`hyM)!`WU~V`%~)^|2?y}_GDMgedQg!S;VgG
zyTNeUN>)&vAi_7mk=wCFJ80*p6Fw`Jg=Yd|(rYfw(sHj``zI~;6>%DuIh^jkS2blZ
zf6rI+ynnvg1CSTD9qnvgBftH*-4im>BL7ClFOj68LJis|(lzn0fA8FjZnGRQrv~y-
z-#rv9*EOVWw%eRE@6fGosBc&|Wbp0QlJ%pISuK-~)6t^S8k~6qjmKzI3i1E<?aSH=
zcXi)urz<+zow<jiv)xk<A8X|w=sy3SdA7#u_EJUl27}O^O6Sk6l0F{s6q-wcUWt9C
z=qhFTeUtY0c1HfZqN$Z8iDN!bETslEH3_~vxg&#?`;tZ3jb5cP{gFsOD_Un9ubwI$
zw3^Vl)B2Y0)!zTk5aj3({J?e3W*yhg13Nt!&A~@vQ@xeXE$m#K*?JFoW9v+y+nPM^
zR<%k$qorIC7+}th8rt%^BrxdA{-EqJhx3QK0!w7WO=}H;&%G>l!DyJEL}q{Ir4pU|
zOJz#42Q%y+g~wHrR9YHU=d-JfMm0spPrE$yH*eRnc1Pp3@U?sn-8}aC8x~co!T-JR
zl7KC}EA#HAm};}!hSu>%vDs(&{MLS*Rnxzyb!f})7lk^*;aX1~_s=CcZ%S_$%^1i!
z{p|AV)*OHJ1w#=5Jrj=G3F=pJl@WM({9ZPe4LaZ9C%~i}yqDK^lsL0?z4*HyVx3i+
zo)v!E^|4xUedag09vka-fA3vXi;F(C(({b!GE3sO4b$^TpN__mJ(Z!3685N^(~p_k
zqxDG_cSi&%-mkIcSMU`%T(U1^;!<_V@kB7kblv-mwMiEF*!8xez2}X^je?ze1`O8z
zt)mSn@2WTK*#e5wI~zq`)chBCC!=L_#_0~6tM6XPbQg_&u?gvGJ0_F*Nam4(+ycWj
z$@N3<=f&h=ZqjY##F!Gs*Mk=4wtLFPc!?xE9Q?Ak-7)*{h@Q>2CwHY3Gk$bEI<9m%
zlgd7rHIe8R_wrun@&1D*l-h1ed|~$aFT|6p3qDAuJ&J4?*D34yLAu*LpPp>7bohIF
z(QQKi-QNXW&z>_DCZEfTB<d?4DRDSb)Ul<wqi1xf;n?rK?eXp>{hinJe$e&SIk`{5
zci{2Ea*coJD^`iN*058$+2Z%_b=kDxdef8N19Rdwjilb@#%xgRjSwa$H2fF7;r5*?
z=d;9$sQgNNM^_acel*EA+hLI?N7OkOtJTZrQL12E=f6H1F1PNxeg6LY{;rkWY2Wh&
zyECVso=d|c4VEKgwJOsC%7aba2Tz>M59sHAN*YeJzd3o{#$P#3LR9I7uh}Yo=Z`z{
z)@Ob%aK(!zQ}=Uz8-&+sG{*nB?k`Y&0nzx^9&VJ7uzgd2L@1gUOI<drQpFE`J;K@Y
z`f=I6QI!Sj(`?S>b&T^;3~7eZ^r5KQrZ79>Cx*G*TX%>fuJa+5hTNhz1?RL3yko6(
zrxix^ZloNa@7$b!LiqFtrPQUUyYz;yGWLC&>kfHj|7(i-x8_Ld6^*lR$_iUGW_Gl!
zy%=Tix1{!bo#n$j0_mR!<l*(LF?$Sc%;cJz@V4^-qYqIm<b6+yX>@B(<gGQhb3flP
zMrlL##L)E5xQ5<j&znnwTWaoJQXYt!@Q?i3;@d7KtRlX4xT<u&sYW~B9m)9p8`WxL
zhi9U0-A%tSt7nsV>dV3@O+ulDXQgSk|J=lx4;<M)TnS>6+PnY$S$iyebcOn`xW@4&
zv$K#5+1?pT9qoNNjf>5*WorBTIit%v9?56?t}p!aNI3VY5cNax7p~u|cgDhRZ+2|A
zJ=tLC)KXM<O0hz<j4l2SCEnH~Oit<_`Q%j`h3PqMD{fkGKeVkbdBRC}w*1QHI^#fb
zy!h6CEoapA=D!OyKdJl2Irgx7g-AMIR6Nf7;%S5Ba?^gUHSaO~JAP+AgLJMSrEAMj
z|Ho(Z=j{sM8UdO(jPHNqxWVsL|Hg`s=_HR|`BXwR2yEnhG|y1^DJZa2#rBtMTAcs4
zzlS5`t9Vv}t+xu@_M!P(#FEmD6L+X|i-R9-k|0~P{$z4-U7!6PIA4Ef1aS@H_84*1
zqw|+&WwSbzc{>xv;NPcZO`WO=7mTIfWV}CBGLrBmg{533`aB6)HNrn)zjc@~A8B3n
zh<cuNspn6}^K<rt)@5<?(we9uFi(l6c5!8qw>?*uYkeNATvIsB;Z!W>7;++=6K7o$
zGV(ui$JKuoXikadonh&y`iAXDn{J%UfAQ^n+Sh4?s>AL7Eex(~5HlF53%VS%P6|YN
zrqvU3)<N5P`3pDO7JJMEllGKON194F$t|+`CYr1@uh+@M9&(Rk>3f;=uJ+MN*)J6N
zoYG>YmN#}E4|VLcs>|rvm}|#A5oL1ND>{2KfnMv>%Mkf~{0SfPSPJsTaeBg^m<EMH
z$M1%P+#1TcGSqZG?yW7uJAP_{OrDnck8i@KtnF7QUwM^e+O{{G3H`&4%e!Z0X8uin
z4yhEGKV(pE5tW>L>S~PyBUk-+i#Vw#WUM*3_%2CZ`#ftbHb-}E;$NJ5bZuBd|CH0G
zos&<PSzZF=vwtrOd|*t>MzJgRCKU9yDvO%kitsopO3w-SBRBZs>P|wivmjo<&8*J2
zxXb2J>+-rB{@5GiA0`@8cYix2oW-?VXBQJLNG^N>X2f#Sd?a*YV!Hcq-JLseT&tLa
zAG1oPw1w|xwAZD2MSkK2kkiWIHFrgIu3b%_AxyWaUYR?;KV;iDFCF~pxG7(6T}A7}
z`k_3{fc><@^i__8fSVt=O5c=LF6gpT|I_>|RD20$6kV`$W5YSj$cs7Igl~BW{&Tyw
z+=8>T$=1KEAscSx?P%#=U6QI9GhXMkhN{&<yk&Y=z#zfqz2BBU$|~$un_*q-$w;*+
zfdms(weMeyxQV89)K>do6|{e%HA;FzLD8bE&3UKmYE3z}Kh;(nHU>pDYrcrLynuz6
zk^+W8%daQ&=n2Ph*Lxd9JR%{kbK_%QN4=p-5t5!HoiK%#W5>C@?1>{k+I9>r-I}hD
zt69;&U0NMU5h1w$!H+R63fjo+i^%tpfs;ED3hMg1)R|;rvpSe2|IV&hJLseHbN(rK
zZV{^Lm0B<0{lhxZe?WLr(=a7?#x1Dm*r~;J0`t|f)H(9xYT;MAMORLGpqXvYzx!?=
zoEM#mf0QfN4D_;n`dPZTTBOd525T{tb7HyvGT<KW&D3q0ohv)Hj<y=<?yb0{@yk&0
z^t<b=D<6RV>P}3Gii@X^@e56?^@&x)S5BmP(nf66Z5T1Wvm$@!B0sez@mcKA$$X9Y
zQ~%u#or<1OKHYOvNTM&4`=`BM!t|)E#mAH*AJ)X$1+^;~GQ`IPBn_DLMKwht9ZMEf
zebSfkk*7KWz}<Am$5{-i>~WI)MfpCUJ{cJ6?$4dgJeW1?w9WV1%G0hDx#LE9W!-r-
z{-Un!$}N7_ZVEGy@x3~X>r!yd<EP(!pxQy!<4(u%+WhyYY9hrW>$ZzE>DC|KmeVp|
z6Jc}NGs9jX*vI4D^DRe}()uK>wvd;Pq>ui4J(hS!dBnmt>1AfB4D*ljg0c)Uns-JM
zVI9@R(#W{)z8f;c{oCoP`XR9wR#shnc32ZkOtY?&%_}A-E;_mToGp$l%?`f@k}xC7
zl7pjCseoDbo$<EZ=0KnYYd?0nO=zzW`nTl)SLklcxoG*Pg_>FQP#;{n(y7dSG5%k|
z1`FmZd;C=jqAL#Sl&+(IM+_Vl<L~R(Y&+$y`Y$8we%P|$#@-_Im%C7WfVY+!f8kLh
zhdk4G8?qIOTg)@<69)GJ`-nbtX&BxLWgomHXos?rq4e^RvUfKLTOV*5WK0`%+WG!<
zewM_V7W?;5sKKK|moe_0g`Cy6S|@^U^G4Wf>AMJjF7EiLa*+RJpX%nNCqww-21Wok
z{F%HscacW@@wFAhckU3!au)i{xGxgw1y8uV-T<XZ;&>jpDvT{dVD+D?yKLg4uB>N%
zQatQnTujYU8z;!*%*tpWX1+SBTGOTJB<$vYyg0;lY1r`i-WHVZON4?*ouf~EoYnp%
za@k9JojVmR_+wgRy4a~Dhkv)SIKo#^*_ZRdXz0E`S1SqDt>w>7yi<E$Sl+(A$5j%f
z`C%>5T-x{J_1>+$jhl(9gQ+f@_Ty{Si}X&H-HhD3YPsLpmzs0PRs~DCBm3Z+pqJro
z=AFg<6E^1iGVXbUvjj9gvXlooi^z9UAU(f=!sTQEseJ8rw@I5G<>mgaH`rO6*xb0W
zFk<v#?c#ec-<1gw_iJ@b>GiJ_N`WFbnM?plyIn@O_+!3+D<#Kd5^sd}eV|vD{P)Oq
zgJ9K5fn4`J`f0z3|2nxzP~v8WI>Pb^GRrttuz#poHJ=1k6K=Ml563js-?t=AeIMdC
zxbfP<<5FKv*Y1ZwYty0(-*+bT>|ga=CybbX5S}4;b*eGML{Z!3k}fFQn)?pxEIoP2
zTs)tkvEQclOEzX{;pX<J{~h;n^j`NKN*-eHfe&}HO!J}O(OQ95wlz)*Son4dI(LT)
z7~HT^L(td1f{(!)ZjRNzx>4)sYo_Sf2AJ&Z)QDfhb$YdWIf3hyL2zC!B0dsFv%Z^6
z+gORv9$Z85$v;skiTf{J@6A}bM#f9Fp<YU#xjSCj%-87wg+Hx@v^604aVV<AJvgzv
zugAX9T<Mk6fATl+TvLv%@7&;%`|+0R?O#X{a+%bP0@@MV*37)#p_gmC#P#h-w_kVf
z)AEKbmEyPkdcr=NZV$QL8q+#4{k@y}p(oLFH*&tmLK9Dzy6D(_a1~$@$gc}wY>x$6
z`udZs<>aV?$|e(%YmxKEI9w;?Kir|AXU1w;8{}c+**`5IkPA>{Z+zx_dz||iVNbdb
zXA@jDkG@Qu(@#W7JA-u_qi7p`o&Z)CitEu;nJ4G?x*2?9+{wTo3cj9ry3J|HBlwKW
z7B`Rua7A0?Cm1N!`G+?iQ@jTEa}r_Q<aF`4Jn~44CC%#T8hlaiHQ>mHv$wMU!~bya
zXECP23W=VT$M-x+KV@dMVV4O6->49Uk7M9aS$K_gyzfbl3BpVs@~u@6KqepStRYN3
z_n0dwC-0Xg?a=$%hro~Ewt$2^{KXOwz`ZRE73QqsRebE$xbC`MN!$_iVVDrP>1ck^
zBPo{7`StBxb@RIEjwc-v$&BlA68zzpGl^+m*oil5Z}+E5lx8an!VlNU^C=(i3q$=i
z)-;)$18uf^c%6##7ua816s-ENzLh&C0%jB6<Z6aV5R0Ai4<QTP;rI4hS-2tw8^Smi
zB-U5{(_i=Af#uF^qOCTMzIf1p9zejtS5H<2a*6n3lr}U}XW_Pumg#!!Z++}LFqI_U
z6&9#OFmJ&&fF5(4eS;M&6n>EFd|K)4+85Wre3*L+nh#(NM|0Hhy_&G5&S+NaM;U>(
zaNq%PZsg$0;vVk!f+|FqEVq8hx&K?USC%O$yf{~x11`7l=}%=y8?~+M1L3HHdX*Nw
zL-&9;N`>m5OM*kKv3NTClvc&xzPR(PE}I{ds}2kqINCKDQl#<yJc=#0SS)!U*ih6W
zD`#25!2KH|TazF&f8}9E!?q)>IXW}JpbWYVz-DhYUI29dr}1i1n@U6Hdaf#rKW;sB
z-DEq3u5J$*j3q(*W}?)|Yf>msUs7HW=OecOt0H`??&r7Z=A7$Nws?dn-mS~;i>mY!
zb`d9YlzRS$pJtLgq^(C;?~^BIR_2#muL4e=S1}z|<or}&B|z29+aHc@h#y$Z?vMK?
z2Y-V=NR!ocx*#54=KQshGktG?NyFZ^TQ_p``NK=OFK#dT-gQM<J}#9KwRDBjS}qIV
z$;_j`6+BETyqIEbB@P<`mn)WX_~4i*T@+V2&u1W(Q_@;@WHC-Dd>tYU0VhW<z4>u0
zd?1&-S;HVUMi;@Xv82f(9h^N%T$zU;K*D#S##R%jMDf)^r9pd;u16j%U%e3aBYv6Z
z5NYXvKcpr>_`4$CwH&FtjCn{JB0Pk&R7*wTh7(c<pt&|yexf9s0Q55f#sx?&9cX$~
zPV?NkuQ{qq`s&DTXGnST>ngZ30RLU0YyuL#W}N)}?h#T|V9~%-Svp7(htDqj;?6CM
z>HBc+0}Ejdx_Yj|5b%)&EyNj`myy!4P|_sVzrX+KY-}zZ)5IZMd^A--5r4ImI!I;r
z^$}kqvZ94(vpCtaoPf7<#OHVdtr9I>-k&+at!0D~L5%GHg|S;z=6H)d2Zt+QATNlr
zb@tR&%7X@?yB2Q<W?h(k9n-4og`7uVeu-0C&OliYj5wFZxVx5Z>bRl;Y|V`Y@4^kK
zL|6~PvGK{K`(du;j(_f4iO_Ma$Oj+*E_!s20mgmEDu(v0$g*7_l66T3)EQU0&CC&I
zZ2bP8&fFH2Gn&H0CqQFb%+zQ><Z4zngkLPrF<LIE;z;q)M3LpQrydFyB)lWcPiD64
zi$F_<2t1*BK1RO12PTCGtl3y8q<Jhyo%KnFb9G3?dS!Yt@QW30g*;XzA};4(4T0WF
z#PSnvNaEG2Vgg7k(E)e7Z{eN>T-*vM%W%*}U;B#`;yRS`3+AB8o(k7icJrq_P^1_s
zI1q4Wb$k_M#$(;<m{M#2C2)Apx9xP-+mW6c&gLck6?nAZfzngK90K1zq$F*{Q+#ak
zeAWgy>E6#qQ#KC8J4BrYaE|-CWHUI|ngm;>RtAHUEA}#SJ#CzH&|Z=mYX2gm0Gbhl
z+s}@mTMq99o~S#IqRuR!ICy$<Uj7upRT18c50;AR#3$ft3wKi41LET!3?DOZDS7(o
zn6n5TV#tz|gI><MXt|sNHHBx>@DRU9J)Ry+U$4PW)NQNld)WU*#(l7^5E<WygiBA!
z<Acn)WY(>ZW<vZ-lzxz>0DR_M+&2Qa;Iv(7C?SMoo;=ixunn>NeK8T!&j!I*uFe>+
zaAYeH_d@JH8=4?53eW-v=<4U5BbuKDMJSyCta-QL?s3LWWM&_sJd~S%J(J?n_WT&S
zi@rMCxMT=i_+1(n!1&Pyc(Uxe7OzROc>?sMRa&lruV-5~;R|D%h~}?W>Mjcl;J?q{
z#aDr~mHpPgZDKQh`vVry)&DbZaT`b?#2Z7Tz;^+c;Ck1cP*w<w+we-SxXx|)%0*Tz
zH{6u*;xQeP0^ir_qthwq*~=6ekH?lBL@cm>Wd99H=6YS3@;oGOzAk3vy*ma$5>Wgk
zmcu<Jf&E8ORA+TiwV;YHc|I6dX!X?@R-F?hfr1Ku=@wj_T`_UUxD;pzN{_s659-9?
zC0+De2lsDR>xjkLS0jsc<y=X3e#J`;Fdv9Ekcp!ZK8ZZ>MnY}sA?-jbKXuoq3RhyY
zB&l?~f*f>+T@d(vYxlBpvh3r7sFOZ>5jCa+)#qgEtAo%l!Qzg}aWvGlm#-P2*VNs=
z!R$FL4np|T&HDvtk0+{`7-TOLh1f*?^6e%`juNpe{4dY*<L^rH<Y}F!*#`VHguZ(#
z-p)Ayc9l1nv+<Y_WZHtPn+m=c=#LDMCybc~T>q9-J~VG9Ja`3dX&3$6e72fkZ`8&F
zMbg0tOxJ^v2(GCEDQd_mEQ;)*<DGvA!R;kz!2HTBl(X@XqW$|UVuOqkA6CYHR>a;f
z2=qxk3`9(CMEps%($x9Plcs5c<qNIqU?DJGViBSEkMDzdsU?qJV5l(^ysJ4yz)y}%
zxKS0o21`q}`btDZ{V-wp7z*<zddTqc@l6zl4qxZJx0G`;y7>9ZAO+(mQsCiXmO8wA
zh-`X?G-YqVQ=Xv#b5Z-$)WEdO9dB?N4uSon)m~4yrNI0>*LlbF04UgQ#LM~Bi&ba=
z?2lLx%tw(?_%2YI%71@R9^(_Fp+LkE8d@W|>#jP^i5?;)<*P$)s<|}%nlsA~9wQ<r
zaD^qyk{g>5*4Hyh)_6X-?KM!q?;pc(%Isu3_AX%QAnuNHIR`P6Rx01t|F$;mT_o?X
z-kBbWNYtCMDrm1mnltb$8K5A3oeW(`-*rQGQKBoR9lu2#&NSfPD=M|Y4k<ml3#1{b
zqS0}9x1rcq)Je2<^z#mwe8IW#5Og#3web~Ya6@-IAk(VUnqSB|h~n)?mwCX{xeN5S
zsi!HdeNKPAh%ie~RO(gwg4qYo*I%453UvTwQcJb<?yF)G!PtZWJpt7k>lcOD3-s<c
z`y2=4iAkeAIJ+sQrS8FEUDu+_)5X6w>*W6OQX6`viwqWN!aOBgT2HF#(8AB1P-j0S
zLA~f}?@1&ph-(=4pObO}WBKWt-;Af%6ygqCW+N^N%%4&CS>yz0y~F2V9w9-vewr+i
z;)uKqCb9|GVNR!9bZDUv`<Ng39|TcdT-M+vEt#hm&PLHbg26W8?!8E6{f^BM_n&dQ
zRzF?|Hf(zgg<8xtl(vxs?I4O4A?uSmmL|&f3cdG$P?&$_1+c1oB=5;+iK1VE;V_E9
z>(KyAFvNx=n*27Ian_1`lpn9kL>rsY?S~{w|6R#Ew<8y-4x_AI4*!S%n@<D+t$jfD
zO?$zd@+_x>%;0~FwVaKjZ{Vj@3wy}$f{JhW##mfM2-<^PEI^efZL&33B8Qs421&9C
z{ntTdUi)Zs;%7mYfY$NovbHOIY{F!}<Q*b=J-kEC4<YuYG^Rd$6qcwry1I{PNnw8>
zojqhWmUZM`He-LR0Ct1aI55DpHfy%A=8Fbn0b_Gf0}_Jm6S=bop@|S5^3DWckMz@U
zF{sM_{Pp!1x8U1t&OMa57ODDqWQ>{;UxW7&m{j)B7`z#UQBvG<BVl5?c05n*2Staz
zsY7YWM^EqbtHL`I&%B9ndS-|3l}gJ)=C#Nw#<HDiu)P1jN7%iy-{5jKp9?}uoQy%z
z<d8J1a<lM_tIHMw@UCY{YonF*tE-GuUD|H+Oouj}<$*R<yr`RZh}6XPcr0E@*-)j-
zde4`1mBtir{71y|snlv22M6L_Rd{r|wcu9k2}yLAlj*F*uPcAHN+Zc+J;a^akH@?h
zazoHXBqliC8C;}T%^SpB2r#^l`A~j7541)Hea%3=0WX`})}u^&CPHcg&2xN{JdIen
z{6*r=x>F5X5Km<CeY*h9uQ!ULmaoQ^gH5pB@`JbeZH!dR>A#5-k-3&b;tpL`hR{bt
z|3PyMLeHjT`W2JJB;xb6*%<_;Y(d#&Uv(scu{nPw-%CiBYiUWY%F|}CrcFvUyZAt2
z;sRa44k)&`0TO=oV||6wr0*BQzBHjr;yjBInt}56aX>tc2)bg!hLJyC0WL%Uo#A~n
zL$NL)a6R#H;`pOnO3sI$Qq^O|S-_Gc8u%2HW)Uc<NanG0BI}cQyi6b|JY?1HL$@fE
z-CG}l0SJ`{1ty5!GYg9T6~H_a@I*(Q>g%JA49H@|M+oO%gN!RlHm3HhFsaJm3-YH4
z_1tng8<^#&bL&T!7}!REJNHA1y!$!PFLKGw6&IcJu!bzG%-q17?5U2_rLQL>!1(t{
z63pGG6;y*thZ^jq8ubT~B~)B<XVr8?U6_`Mr6D43hkq_*&1f5wJs;o5v!;ccOsWe|
z(7nJc`FSH7nbgr;@AroiiooHMV~!0c%S)b*+l8}ipO@yV;{yn>36i&C@+3(~BBh9k
zqip}+EdGZ;ClguSQi@QfG1GDSSD1H9=d#-=TS6DYY7qcMf_Ixb6mP|MQow!3Rz1ea
z7ZnK2=n~Nt49=kR%K%|1A&*4A`%lz{WgLCl(3Wd}9rg$hy(6(9;T(u-6GS%nJB1tZ
zQk6K<Vbd~onS1x;px+QNs0Y^D{8OIj*^BDthmBlR@C`a`d9ceg{u~sFQFB+(<L^S)
z3Zz+fzJp5Hn@ER0OGW_x=}*seK&2L@a{yD@%ZE#oZmA-yz3-GS-9*w3Q*R>Y9?(YF
zy7YhK$P>l!tXnl{zs^=jp-dy}Y#ehn8H@~|(tjP#$!O?rLtd7Drx_mWb`@#-CV=R!
zA@XL6SWB!jXqkyXSmAV8{wf0OUB_e-UaFHO+o^3d<m<Q!&fd=avGXn!8(yFqiL)rU
z?$fZjbqKux?(8%rXh-2PWL)MPD8Qf5GYM9>zch3p`|Xh1gOzgdj0azY`t~@a8>}Ut
z58vpI-P#hAx9*RO?+;x1TyIn&zY>x2LzG|k4K<l=z_(aVf3?Wrb}U8wi}*L=H0zwY
ztKrIfjnU!@t~OR~v#uQ>w;vV~pxLkVoqy?Ngt>`QsE>X*fm|BfC&Amm2f~Ar{@or>
z0g-70IvMa|>%*Txn;bDo5_=d(_-^^8=8oZ70wDr*jUMN=@v(fS_Wt8n67#C}{o1}0
zHzdMcUZy>&4)09Q1&gv`l!xodXA^+7p4GSy3GGB)^1?3x1V5%eDFkUpt0%q#{yhrw
z7Eb?8sWbZs<RHS6Fru}*(D&vL9uG-`sXd?xNum>PJ|g&w#;d=`a}PwDQ9OsxD`5pc
zh3H8ypco1FV?JAj(n%IVo?G!S6#wND)VK0JQT)`!GFO;6kQV)rkA4eLly>U%SG?(g
z91;F{<ZW2=_YMMGi@=gUDLYv%r#qG=Rv74njd<L~Z;&0<os9R>u;C9JM>l+hDfO&#
zQp1VyqxNxqFDftEsDC5c2!7@NgMtEon-5IRO)S~L$-NJZjQ4zn=O}N}28)0|xR3pQ
zssgY-0Hoh$Dv)4<kb@rIm@W)-lC9LR6N!dfkX}Ly!W5<E3A?x>34ZGYuqTpLbf6Lt
z+O1Q2kU!T`PWS3cUNXop7faItT_Zd}l)3}$wp14W2I3?aPXd06RDA)5(thE{e3<;S
zHm&0bp;`ACk~zvM<%ciitZzC%hW#Jzvq)Bgl0v8H;>-+tP;I<lcXNRszxs{rB7jT!
zi?E3hih3gKJq-T3YP6IHjk;+rXoMj692YX$4vUVqM)-acIkPifvk3pX$x!ei$cBWG
z4%#Dt7z|euo2w~!gRkLJ@yWOw_Ydp|4^#Ooa$fv@ro@K{mnA=!T{$Mh5{G+Ay%~AG
z1Yrk1wk(ybjho7`b|N%LiN>9kOO?$~c<UZ6(}3p@F);3t*YZG(D9y!u$opU;l=<75
zsR$FJFPGCFv2{*C*A7ySCSrM8-1)|9rXtDUnd4t^B7`f4qX=&E0Vy>>&+H)V-d+ET
z0!Nz8z8A-XXpx5w%-;IpW<UY&AO%DhG1yIJNs7bL1G+B3Gz)FBh<~z`9B%V$Wcu<^
z1+Y_|d~uSsp2+&90(bws<PW!`54^3!Hwm+~z-S+TTkyAac2FKbOhed@l|XF`C^{29
zC)<837jd{G5=n$^j9qi>^K>|!jL^IJUUrzGEmx(mU3|F58qg?(B%NdHEj}myYCU2|
z@-*7V{Ats*<|VS0NI+N;pH3YiLaZF@TZOW#6#n#@K$%7H4S(ND;F&JKR@w?Ps*2>Z
zM^Q0*yjdPjRRCoWXrc+i(c9IrCNbLlo%hU;#pAWs1aoaXdMl!PnhKG2(DgjNHpn7g
z7ok#GQ62-)BI?+;-+i!0yH|w$npO%hDTRMNwugwXh8d4DT?idR>3zCzK0WfcdqZo+
zK6?IM!hkU%U3pprX-k)C6NkpC{)UStXxup~VeLY6vf;j$FyrA!4*&f~CzLjL0A?gq
z;G-yPjukUdjpN>@$6`lBnFY41#WBCsa~^*BWbE7CPrf^$%?Ha8U>%YkMiCeyeboFa
zz|<OfH*W;Rzdti4A=2!+Q(&D{oE&3%-_0;z6PTpZZ}+bXj9(kBCVNY!>L~QS<@psp
zyj*~-hFtadyX1yC|K7OTg#T(i1?b?t&qoy`AD#N?9W>Z8Fm(cwIuPnB0#C(Kz*?Dd
zRS>_bjRd&x*>?M3H1Lj{4?l5YL1!bbNOmFO0Zi`WHiXqG0Gw0%!yh!dq7nB+*oWp1
zK5*oxx1!MqFRQym?y~ggQKo`CMDBl8N0WkQ`36@Jc1O3dfd?9Jdkt~1dU{J4irL#Z
zlXyr3pHQgnWK#(dIVK+@zZYR&Cb8NCV7Cl(mGF&u>oc9!VD4gYZ7mH4^T!01Dvbtj
za@_=2+7RY-wA~1TSK|eT@I=YxfOh-=1PuJ*8lgm}MD!Aoq@%1U77FL|z`aG+<p&WW
zq?i`O$u*q&-xGBAYsT}FO7;0RQh*4OP%e`oxC=i#uLD?&G&6_{<;2Mwu;zqVp&AL(
z;QZEL*&?{7WfKJ=!A^eoz^1A$IYbXik68-0T!$N-Kohp<kchDs$G1Ud$27~}`6`r`
zRPB(4W^P_AO8~O8b#T8DF@Cltvg>5fo)Xc{U0%!$kDc`hT^V!{RS;3A50?g>UFh0~
zcoOKFMG4;<You3WBe5SRcJHJ4dW1JGrzXeKcUk-oyKz+n%zL_Hq6YyT9w>!nAGMjf
zaHLZiZCeruT47WR9GfS}BH`ZrNl?lMWnuwAB-}y@QZ@@P!%r%{+>Vy><E}f<wz|O_
zB7M;2H)^g<z$$!*cmYIy0+tsEwqH(g`iGWZfCYx#obd0j$hv2nH^qaw5?{Y2vJ}Ts
z96qp$#)C`fKa^md9Mpa{Cg8dLwPRlY`YScFOepw)%DhYXQqIQNlT;81hLg~>1jWD}
zHm^EEoa_~|TL`r(Cry%|kI)i25kHOKA@wR!EQ=mhcC`qoxj~BJ8^&{5l@4VxSS%^e
zsGe-oP3+}J7C(z7!gmrc$7K?6y8z-Y1akn|b(B6N4vPHj<4P`l0pkxy_*zIe!DB_k
z#Z=)X84D7@YskX_aQFV{pM5WEf&1o6l@-3}>yBl~?ZA_BS)MI$*$KDozvESce<$Ce
ztc4Ar#?P)>(=3Wkp2qoPSSlPDt8nP`-Y;}Y3ZiZT+Yxd`fkU7jSc|mT{4v615w<ea
zUICZA4^-rb&yiSP^x*V`eM}V?`A0ZlDdTc-7y?{&V-)a&-jPbA9wwgzwxY%c!rpP3
z$7`@nFbr(h`JNqwi8w#8YG8?`_!a%)nnE+rpSMptp?MToMPdb@H@Wd|82osFlaRj-
zSeiYAyO<Pg>IBNK_v1htlZ4ExXjhX>>0JdytHEbgl5HZ;=uWTL0}s&14urM!nEV$j
zINfl-$qf>0bjHe2C<hOiT!qkQ(-Lj%H-(U}H{tzci0VDQ1CO#G()4N$mcU7BRzh92
zCa|~CFwm-T-sDDNS&YjRp|m7kswSfsare>5xXzX@r%b0>-Qb0?%w&R(CNL$M$5kE^
zcvK#4@SR7evEdLz705)sEa{orfzWSU%UOwD&Ayu}amRjFsc6u&_r71%7RcrTtCJ0Q
ziOIj3L?XmJf%)wB(}_dv@Os7L;^!q3?vFh)K(xj`a6jBuKfW4j>5@HNP)oHn3j@fD
zp_e3BSc|M}OBY;8D*7^G?BeISZy1I4ly!oovgYk!O{wW#e+cOMcq!3@B&75kFg4CU
z5V*^;IWaq&67b#2rx3vuUL|Yq1El4)$?@&L`bl@OX3~QN@s1H;0k~Ic2s1yPJ67GG
zv3dj8bts)ux*G&fUFaR4;EFwfnc_753d99Nm_cH2^K85N0PWuApdF=&;P6(S)qDTu
z@%AQdTDXkM2Z|Po<?;l%QZj2VA1_ZJR$!O5nQsG@@2a#Zb^LuQcTDFb%91!=#xs^D
zVzHVoIVe2D4n$ZbB<;#N+-&s3Ite;b>fBp<X6jId&}rmwHBN-UGE>;cgwmxEje_{~
z*~h}}BHr6OJSO<&eJHfLf9FCp4@T_OPmZ=#7(*Wt=y@o9rjS-H2(|j9eUT&Wn^4wl
zlg%Mgqbj(_xRmi@1)$?7mgdoP^C3z*qy#kvzw?A!70_E?aD<+=-=+3iZLS1M7QUE*
zNpN!S%O2{!QH1`&F>8Lrz7x?hBZ?u_0yKVw+}Yo;N!ww1Eqk2_KQ(OM^ENV62;kL1
z?vZ@>hhJOIQw(I_kVLml2$2;<lT~1ans-|}iktD_8!0^Nd4G$6+O3Y7Suvh?WjgL2
zyZJ;k=_d?<)?ug*`qFRn^g_8TwHxRffYqb4FhNiib9uT>7AalQ@wB^Cvwdfj{|~w2
z0Lm_Mo%NCCyomkwDlqk3{y~C9Ra|B`OM^OPlVd#mo%RhPRU}{W*;(HU0DzCVWnzNx
z<ctGK3l@Vj{I=T*_vhk7*4<Asdbh}3ln4?|R}Xw{1d&ZV_`f&^T$V6$jl1#<iq`&B
z$>)eLwC(!gciJ>lG#4p-i=Gve<u{F<2!X$&ak&65#9{r`UQ-yc!z0bwO60kp-}sib
z3#B9@+mw$fQ!|K-)zBq|@j;2R05&F0i9T#&qRMJ7WdxRcmb*N?kaR|T2+jlbbzOil
zbt^JZa$wnmZ8%cFP3l1|HoUm;YM^z`S;oEBHg_p5wZ4;<N!`<~S2!y#$G0=3U{MGJ
zW=qDdQquGVE!TnW-iKY{o1q11xy9=5Ze5uwXY`8vKq0}}7l{-ACo$T^sXxWpiPK*#
zz3jx`I6Rf7Z)YsFTE{L%pezd?D9)k{Db6cVSDlU7b`XllsR<!3-%8WW7-!dUZ;NvC
zYJ!FTBeFV}_N_A7iwy2^PCsY%xik<2Ax*C_(L{x38=YejOy7Cv)l^KN$Mv@zR97x-
z8XG1VMXk*#9OjnBURK!HXaalRgrIou>e6&AU;yo<asXYz+zfQjkJTDAn!`sz)>ROB
zim&`GXytOkE27qxT!vvCgdI=9E~TU%fcfsf8^E#R?Mt=DH^iWVIsIUwzg%0Sq?Q9`
zp~rMt|5+<PY*K@loq(wztVSIk#zAOJ20e2|-g?MHF2&+c$C|jN^IRIxtR*xY5CI?3
zWX1(<h0JHxD}Q$H8}YVJCX74l8RqNZ6CV#UT{LC-l>TG%CvsO$h1^uPEGL6zY5~uh
z`LHVV8*us8*d}tD2^zYx`KZyI8_QS3p8KM!@i5`=XJW<-&P0ddq7yiT5dmdyr$Ew=
zzhJ((L!W$cJ0&pU%B0K=4&P_C#`U<N!a-hzt^6kR)Xg=GzJGsFyXtq-H}Kqp;xBas
z3<a;w9Q^#2TE30+pU}YjGuuya{4%%(*0s6zi~7>PNw4hjFbVca0>0ei`?4CZM76Gh
zf!HdkZVK+v^_j_cFVY|(=7mW5`k;l9gxA>QM}}wZn#Ho()3on9Q?-zpY-nBB7B_Xp
zOZJabFsN+?^<%KSN3rvaj2n1{v>Y0Lvx|O%&s82)ZGxCFef8+5_&H@86`RX0=&%V=
z`)lFnXJ1Po#!gxDvVWITwpsEt6QLkMJTK2td0x%QMAV^U1MU;dUv0n<(y*mwg@CxS
z7Giu8WTH4LYNsq|6!pUxKYTTTEO&63L_mf+nSYmRBudvy*ms@dBg?oe$Ik;)T@J8r
zD$91ro3KWco0^n$*Oi1IRBe>@i}<}N9lfQ2e8n4Z*X0B!xM|4@rarDdzgu7ClEvSZ
z!-<Pa0YanVxHe%Zh;R93&C``_3h!S<o;&;SK26=7<=+)#Gd7N0)h-&3)H)Pqnd=->
zefT!X#CGTEGwjdqJGZ{==k=>qw#H7)R>W?jbp3YiNJ$T*v`*Za?wuB|C%k-gxz12W
z>I;H<eAx1s6mFLAfQ;LJSid#5qBP=GF_pRHgoq)%>*#2I=aI{Dn<Xy6YmH@rf*X$q
ztynjMXU{rj_a4rzA6hR1AuIYD-$h+`z-|=&;h$TqQ03UVe$$$~#|v++yz;{CtZM5a
zEMz=(u|!$Hm``ga@hyS9d$zoxM3^PsD+Dou^xTJXrElfJv)(K{E0ojb2ay%MWWuhi
zHc|SLsSrR(b0fU<MQ_E0=s&MO<{q+RB0zT|;_}~S2u9l2E$j92K3D9s7TJvZF&t7w
ze;->F-*?T%hL|)zt-1;SqwVsIU|Hj*Cvj>IebTO!XGugML^M1%UqLo=&Ha9_ATK25
z!lvJR{xJSU<SuLb`<%b${G%}5vJ3bVCHj(t0z|%eMZAW$^W1Axog}c8Vzh$`tz6op
zB}yJa!nD{~WL_sIMfQqN-j|O(!rXUTzLCkCtH*CC?^zQ^3BN7Om+=&~Z+AylY+qG?
zBVdn7IC$!^_c7-muQCIN6D(S>h$*vtL6$kFpRGP@h*iuDdcP6A#Yr)gETWzjLY}B&
z?P$;`Sy!dv+TVUZK^$T7>fDRsxTlcx3wC*9&(XBMk-5h{PnwKByr~(Rpu@eShK;{J
zyp`kKY3gqid5KPW7lsDt;@cA?pz1T&J-VR^&I1T8jlxy8K={2w=4c-lN2JTL5CfW8
zii<#A8oxvAgL`j=hE^umqIbJZqb^aFpWFmFLFUs9>~g-}ermRBU^#^d=2E@4(sH&&
z5Sqx?iX-3!i6tjQzZ~Z7<$j7Sq_DUtR5QHR%-Mr`^C|=TB0Z*5=*;PT>XR!Do_Zt%
zXQ5OCzctzvC+x3f&@E6tpZefcMUkZ#OrFE<g*QwNibnLW!+@=D?&}essW+c!HU>(h
zSJp+RA|i@AOfCLo2;xZ<%skPgC;wspfu{fpwsI~sxE02t0P`KhJ(T5R&4QV+pRw--
zBj%8B_-cBZB`ueSB5!pgH6;=3$_VapyLCD)-prYKzYS3}Ju7qJ4zq<!c?RZ-zSSP^
zN(dLkuL$A~j6sPANqxfJUo#RjE{qdbJy^OpAva#<XOp57dq|c|ZcH6o9VVIMvY^_p
z5iISn8o41%CByd2fv-TBfJQNvgJoxlG!Z|i3gP$O3a^!K=`8<wPfedZykO4!fyjuk
z6eMTK>jj4REoUlQ%|x@Dxx@4Gj@R`69#%~~w>kq4b@NPlh3`(SeKnP`;7%tRTts-B
zfz-u8`wV`|*Pc|Zukt`}87Kehj~})5>j}4;PMxE^-PG?MxA5Sa{?;DVUx&YJ!zv9d
zPam4>vcS(hmP7F99bC0y1_fLtmD(bR%sjc$3p1Kp#3US9i$;cF9-i{FJtGb0moon<
zR2-XnEp4@2D7^V&PvJ3I&22H-UO$(P)*H!UNZT)jrpX7-&N?{iQ*E-Ht^ITn^44!t
zN6pEni{;vcy-XDAN1uL(EnZ$ueiXg8TJ>kXJ!fX8rW#gE#7d=f0X#X|CDQ=5o{ndE
zfz?q8MrV2l8!!BaGn`o2NS~)4bni*gtF=F*bFD5@&n75Yf|TiynX(SGtCE@tgBkDU
zb~7@lDT9O|B;~RK$fYh%<fyW?R>#+kVPfVkZ}!wreM)meWXOJmhK;gp4&VOKYpsHi
ze<6k$lVFTC6{SEs8P5UNjU$1w65+;wW5EQHyq*)BF4;tweHE27Q4BZ7_Qaq6MV5V1
z^kzZN`tsipuaf0iFO&>{X59hv|1(WdT_7>d7#^SK2AmJS!UwzOCBCR5)Mql3tMWIM
z>$2ADAnk65S9=(d#8@LsL2T^1vO{VdI{&$p1<{!SMJgA+xM3%5h+!XL(s$lHYcU8?
zUQ(Dg*-6)<S+ymMUEoqCmj<jRQLU9+Y-{L7wrHdnu9Ax1DRb*QJtcwHhX-l&ig<*k
z6RSQ_Sa;@}W!NKR+$>`8xB=L&oTGyN=pV~8F+R|G>{%bmKi$`qO5Q14-tm`(*g7`Q
zWaXE?(bkf^k8@wIi%n9+o*opEC`r`aeLcSQHt^Lw;BYM5PK$T_4G>BnbeSTdti?ot
zr5h*0_^&+TE|s0>U^3g9V-AYZt8bfPvXrk6;tfV8{&VK;QCe)P)D#8+FIZM`5Cb2Z
z{mNL);?ziqVTDL|H~Cx9*<bGv82*_IRsEtuC!*xoO1Kxc`X*9u@)HO+4chNym;!&0
zBzu3|Ow5j0R*06{ar$rNJSe+O*C5Z&(wqp(L3I!B9kp=blJu0N;4x=Rk-hIanPp`t
z79oaTPRcZjw7FgPlsY-MAP(s~lqInK>G1`-MNMJW9aS(O7FzE{^QN}x7i}QHMsBVd
zD9Z70CeEe+;2rUZJN~<`uW$V}eCVlk%lqZaS~>R^$8k+fVVf-N?5aKJvQ;voSkdz=
zw!;nQG#mk54OkW2-`w)^zh{ilttM*Itg)%hbD@r$9Z3=N)a`1jIB~b4EV^u=hL<pA
z4!!-y4G@Bl>#hI3IK60)b{%0=CkJgrX>+#1&IhK)uO&b`fALkL--kE*Z>l^jTz#3N
z0_p0Z2S!W{{taDkq0Eo5<mL%Rc!%B>hHV&Eho9FESlY3?d$@WX$S%Nq&c%1J01;+4
zKa2;;BIND^nIy!E%8~fT9b(mfE2n@!eERH>HX>HS=w70+*`H6lp1FxAMr^;ZOYZIZ
zHX&I4FKz{(*b2H94zFdat851RoPDCqx}`G8WZ#$l%Z$Jsdqt&k_piJFm#?hNoy3t6
zZrKE}>eE}G^N(;32xB{m_-mo2#d(Na(3FPHBsoOuHwgtyR7U3MdlR&F$E*<IrOoJz
zD7vW&LTOKI!!|!k7Xxd}@#cUg#Pg)}CC8Qbnf*Iq_@AEujR@YT$!!p%-_4gvlI5EW
zKYGY&`u+0{_?o*^mycKH?fw>QABy+*b{3%)h3n+}>PwYWFh)3)t;C=g=YyKAa1Xns
z7BDnW3W{YoB1sqMYO>%=gEVn)KD^LFWC=0PfR%^-;JWo;-xhT`9&E;kn1TrX4Pdq2
z10MDRPI`ZjM6YzNtj41`_cHFQF(f^>^<r3#G15)Fti*5rw}4;&sxJ8+f)8?|te=U6
zn;#e=9`IuYiZU*Be>1?xS`3j%)yONcmws#;)vr_h^NdqQh%DWZJ5VB{I-KM6vEc=Y
zj<AG?f7QSwxqh!CSbHsULv2}c=9K0Nc{zgVw4{PwpkV2G9@@n8&s=vcocT59UpnwT
ztIh%4p3WI+evn*QGl42Pw|^);QV9@z{%5o-c>X<QT}-1}Gh*mXI}Qjr{Htw^JDPld
zgT<nZ@U8Fp@uIM4!Qj+}k;0eVn^4`Fql}-XV=LYITg$hF_YU&P0YQJER28J6<C7#=
z<=a@TYYDd!h0##5u~T;iww15$+Fi4em-YP`HJwBPc7n*VQ!1PcoDe|WJL5tI-U_c;
z@jAjy3X>(_J2wKaaB25;FI61Yd2rGoRaAp<0xRk+JRs?!$K88x-`lBuM~>4Y7nSEb
z@ipZ~eubzrj&Z*|9c5i+{J3YRfXZa=)O&`(Oam}UKsQvGLo2QVd{}#%%2ELgU-DR~
ze<^*fdhSp3pJ$B|`q#5(r5S^XeT(~LBY=lAyc;rWJH(2UB9;^K*G9{Q5A4@BATfDe
zJ!E_{#38m{_}tOEFS<!BNbSd8`;_pi#Zxwho$ns=r7JE~&K$2lvLT@Qcw6T$E-y&P
ze>IV0Ow(EVtT52S@Lurv5qd^C@_)Qhc8i^X4awzih9*q*sj^;g5TN-(lfZm~<V&N%
zC%;#9zc|*>WVm!=pdS`RFN5n`SZ7iXTn(AvM>6|8KSeXN%74_nB|Jus`nB45w|R*I
z%im~cy8w1MYbh>qDgKWgeVoP;MU_Mg0-Kj4-HbvEf-4`Ld)R-iZW{z4T`-(q*>bM-
zTuhA&p~1rKds%AE#`_(ijm{?%MxZq7HL2zio5E`#V!ltRz16>-5>CTZ*;A8#7hioZ
zE_68(a2bza`|`)yS}kNqvsg7G{1G?~Ar9uqPb<$=&3W9fxxPn&v%dyi6?aaTx)1)q
z%3;-b@ec#Wiv^w^`0;aT`d=2vd~K@M4j&h1e>&~0k1Y>8!LX5G{j+sfo3C-H`9Me`
zu-xH`%VjNIvYhg|>%%1X{DyhKYt`w`j1Cs_>7#7d85v%anMA!7H0E^M>SnLRos8pf
zR*F2V(LdF61tj&9G|XSKeTlKQW*Sk#`vqSgdn;boQWW&<uktr#TP2KFJQun+5?pYE
z>o@OPXm<16`194g>iu2iwc{I;t#?wG{`%DJP$nZXng@BQvWk)gL-{^>6Fpz$>{;ac
zSxKV-uV86)OQ`MTXYOy`*2D}!>(ZVOM)PxG_%85yyPhWCM&E-5PdLu|w!MowL0C-y
zy6C(N0cz(Yj7TnJGD%%Rd1^n$ZrtboJ9zM*EFuHQIuGuAl;u@Bs3bmd0L6k2Tetr`
zcYJWd(w<JlbdNg?YMc5d^qW-o?Np;Lta-g4V=D$^ytJUifxt3DWOkE6Y#kbhKR?TY
zgLBg(rxcJ#yCf?b`{*3OvfU5Q5cyN1i5Ep5cs-%S2^rfj-~zIfNSf1cH;uk`M=TBz
z)5hyY7R>Hau&&R1h{38^7351fN_8ZYSv?h;N594<vXJXC*RMx9bcJ$en>v*}l+bW(
z%&G76nfCa34=oG&JSk^6|AM(NV-t<>%PheenFp=BIaGqetQ`2$IK{Y`*RjQi$O5KN
zhvRS#5j!&>yw5oMpgV<aBP|k2?mE8lmv7xZAD@+~#ffWM;ulnYQpjr1FY@J|o@DcN
zr@dBPlk2u+RIDT_7aw%6ju2qWpxM=D#thOa%~6L~BlN^n#tL`f_Sg>px8iR!)z9h%
zIXI-z&Ze4~8NB_l^2DAfs(<|ha)F|@^Aq)oc}}KtpxoR<olnP+j#v>2pZUce^Az)+
z=31>KIS(H{%xE3Y&Z~v0S)kQQLnN6#vww?C)IEj5J<>$2hF44W_mIV$xznd`$mbkk
z#3~5Y9u-Q8U{(JIjRfvhY1QvvpZ>7;Iq%7EWfbsQsg%*ky~x^IZEFV|#M0ulWA9)r
z>*e<oag!Yae5KVzHiudXp9*k`=eiWHH|0^nxcqgSv&3zc`+9Y3ArPrmAp(I#xFZt&
zHIQY4qs~juXSXlv&i40440C+VcERj%6t|goq3@*(2h4HHzvQwfpUgYTx|D0I9GDA_
z7!<{Oo+05s2>7S9UP#L>*3+;X64*m!C6l6#z;*xmGhhoCU~A`U>Hm+SGjW9C{p0vE
zv$Jb=UF#NNUF8a;a@%p_h@v8j*vc10Mafm#adelXB899Z(m^4VW4fde<qlb0lxyX_
zc7OZ(3ubm^pJzUw&-?v;J=l+s=}SV?EM?a7YII}D?2Z-VkdsF(NbDyz*yR)IlnW9#
zPbcoCAzgRdRU;QaIXR&g?A<Tf>$T5`_?SSAY+tKvAcW_bFMilnZ?akpl=0)CLcZ)z
zxWptw3TFa6f2>rM;P1;hkpW$q+m#vY_keFd&R_kEKO%zm*M6<Cl$zJO;cW6Cb^qvj
zOBaT;xB_(cJ2#~6PaUd?HbtJ|Ni_-`TLC58i1JrAeEJH5ub`|bWRsMjdxd1-Rw0pW
zP|OM-nUL<D*NuHXR?Pb7P(Creb}aMg-2GEVQ)XZf6(uvD!wOPRg_cn7a8FUsprD$m
zjH+Dq>Yd5GsxI9mi1jFI<X{p(ejNc{zrVizzWz}Hx)wwOw<Dbj3P1@8(84B4-gg^r
zq##gIoX@ODv||ML7-PNo>P}c4<3VJ`;w|2>Y6#u87khD(bZ>DE&?P$~^%YeS6Cb20
zC(CfOP86JpE8Ya5FK74y|6B;M8}`wDNW;2WcLfT|oeX)KFA(9Hm^|7=&qEm*8g@$^
zhh`I&Ag$q+-x-6+$m#TuAH@}crAN!ZZUNyQNb7xVEGF|OkN|QA^yytJ^GCZ-sZ*;Q
zMsg&WQGTWtNYjxy75^`;G~luuq6eG>zXfIgEpkvf9Fm)U#e<B>busP`|0#j$nYY)h
zFkA3Td}RDdS7z<$l`2spMtEQ$AAkL)gPQg9@K2Ldw?7#D5;}9#Wr?#mXf8b9`;<R5
z%%4oHncT%-3DM>0qWE|qTpS2}4_pJu!=pxVuZ6^UW3_zuqsdow*MQ;jIEUZ<b;Hy!
z7~o*u9bQ{;$eX?YT-yd1ID(Dd|A~UyC1<2hm0-7<W{pFkT|b_}Z}5<nYlHu_)u$i@
z1r70eLDQD*tQ$!G&~quPx#h7>kAy`%Lk_LvEt)6O`DT58X96Qmy|wgBg9Iua!Hq8q
zj_1ZYT#Ghcf1+WA;ZpEkFb*`FYhc{z3BGunf_*+>2>OzSJ)p&n(Un*AhwVUt^BjNo
z^$Gr6HMiR=)ido32M`CW{_acNwDMvd@-sr};`?1_g3_lz6Dw1vHLIjB>W-6-UwXM%
z94Oj$Crjzg$7kixw~nC=%|jas7cZ2~7~%doDON<RZ$)LWUbfA$FsEkUuob$CPiKi?
zmc|5wfsIkaKklh0*B=tY1bL4^!z5zt&$<cSeHmTznm~RJDADqFkzCxQkV?i2ktAiJ
zD|}n@mC;@P?asO&VK;K+uHL$uRzV&K)ivzZr*n(*PN<1cN_K`1I;gStJoR^xXyM<?
zRnKYhXLl^MdyNuYMsA%}X84_+{lt6dvK%sSjJnXZw_M?G9fgE0@*QLW8$w}jMPTjc
zB}tHw$aRI@1+U4!6fc*5VDe9lMQxpmpD#nkS;bNie_Jr09ld0!=<EkVH)WQ_b^-jc
z9C$FidG_pPrPPDKmVX71!GV=i?$d;LAR=j^??Zt7B3<Le>!O~CN1V}SJz&W|!^<jb
zfN~Z8CfSgVZsxyu582sdH7ccb>8gA`jlDj-Lq|q8t)QTQYKvEM<0AP_Hw`nC?QeeF
z0IoFs;jKz-yu6^Ia;C1P12NQ%tGMJhEVq!L0eZfeS`PxlxwT~jc|bl$MBqkPs~RD7
zSj?rsFYx*Y1|rx^OZSv|{5VsWKg#&b^2h;w7Zf-SrV#g50y;j&U4Pou@@QrOHfh+V
z{sqqJA6aF6)-)7!eoxrIc8hWBU2HiQ7Ihfryo4|#aZr}c_(#AhBuz?JgAI31pxu1$
zbG$8*=o-FgqiY_^8o1SFtfix<so}fBajrF!u4_ViT{kLR-H`M2?sQALU$9{FcR?<F
zWOUE(_{kOP)4xYxt6HBD?;?8l!iAqu^Q9IOL%$L~6*1`SmjAN0XP#%J`e=2R0dAcp
zXy_@3o}OA{*f)ZdrDq+bCgn>|G@LTFZ=-r80@$oH_@^?vU>){Ugu&Uasy3e}kHzK$
ztNilY-oCfKC{={51!HP>k_Smd(aHo9e!>r|U2u-1w<S!RAY)tpP8um7Q600NKS9Em
zzt7Y-@Fznh*VY0&fHP75E-qS6Wl9K>fJPt5fHUdtXFVRXN;SYiaF-7aEKg>~og}xu
z{6_$Tm?6RN5Eh2TF~2Z|N3piZ#n9@3TOMh%ieI*d3DIX+`K%)#pp5L;1sKPL*ktag
zAn&Kd-0TjNv<FPA60LJxc!Gq9pO}I3y(PvqQ>qG3{|;OPBKl(*ebxHELg^5*QN?ma
z=aY*DII=RL#}-*!I5(i^<t)Me9Qv4!R$nw<X+2r6OWrL04)~WS^cofljtK}k`O?6E
zl6$({>aWVg;rekuDOq$R=e)pV0EJr|!7`AjS`)^cB;EksIUTJc%yEaaS7dC`SP$l>
zxo+C}zeC;j91kaP8gE95LbcxJRYXim1zd?RmF~NKSb7Y#pFg$+3jZqpj(2#3#nuA`
z^ymM;;`pW0G<nWH-D`jnz@fga%n~ON96JB4?~!UYE}ZWePtNvmUpWU2f0PDxfCd-p
zFn5p&72_aiDD-9P-}Bo+jC9#=--xoj0O2DLe3hIjr@OzLhAm%yx6?^RyXkz<qVa+<
zkY9HKC^<YG_y&M1;Yn>49<c{y{QtoKaC2#-pUL?Fv1wom8!bJ3J?@E#x`rD-H0~RO
zUcY?N<(!a+(8OvD_J=^os&`be_MzUl3%qRvb`aYLl!-QoKwo#O;HESz1{eud{@$1}
ze8{Ra(=&E=O`(CDH3(%Wee;uZUfM1z`}^|QlRCLd=<>AlJP5s_#1;p`CfF}A<}=%=
zo8>Q{z3Ym3PZcr}fyK<wdV$@OBa5fe=wvtJ=*awUC-Nz+<W>!wXp(^$g=W!aW0bo}
z@!EtX%gSZD18MVvNkx7THo>EkJhDMnE}`|`#IQc|n-J##(k}QiVu$FV@i|{9(6z$@
zq46Tb47vA*W_N|l6YpHgA7B}b5|OAi`}vLH`xSw1rt4oY0E7P9A5`(j6zoV2X=TIq
zv_EyD6$o&r(q;w}=gq)TNa6b$R^DdxgP)4{Yk~{~m-#4S%=`|*<Mq1R<*H*(+PbaW
z>;Kaf;ITlIT2A+ZfHo^QcR2XpysJCd{jiM0{M{y07#K%eY1|3^gFj`1FuMEX{iKLs
zD88BE>s}vo#!e%aQR~0MY_~)qaSO4j){}n5L9vA|Z?|rDO7X+m--o7GLv$s~IDM_E
z;BHS!(#C6xvoxM-H~w+NdL&nFUL?>~p?os-7Kk1{ag~WS@;^S24?j!fC}mK^=C7f*
z5^@;5*JEPudgd6cK&`ukc!vkpr!RYdPkx#5$@W3Q=#H7?ZGTy}W*bEZjwvu^hiua&
zkZoUxh3Z(6CABq!<Wn&c7b^yJej~Pe+>e<2==#^Jqj3w~Zb8Q<*LXJT9R1O9?#=YP
zLNwSB3t(yej*UgF|L(i*|0I4J<`U45O@Iak7_>h3SRKAG>g8@<D(Gs0`f6(b8sW!C
zP>hZ+duC$qZcu}T3u?RZ4tL*sUgwY~zVUa?#7z&2s1wcYk}prGsq(L1wX+@lw|5~b
zIBcPAUJC!Z5WEId&J7t``93(5105i@-gf{eEyWvdLd%f{<?$B=u&+;g@_0LpSWqyO
zV^))UmVg*ma0P3rQvSF^D+zGWOIu={!x2!Tm;o_=DWz_cTWucddqxr1{I2obOZ3ks
zT)2+gC%CayQ#mouU=m~j=tr3!Rl!Z2_{cI_wlQzb`2EF!tymq_sQgu!cg&@iVw{?>
zm6Xw2=Lh4*dW*{~79E7JOqSf&hg;-Qnn0l%YDAb1`VWY}$S0^s&Lcp`;7m5L`}>!{
zsgD7r{tL*pk*%#y^0xS_!niLAmLbEvFxI^laNV)bc9oVNJ)4k8f5>CbzzA%R<(?B*
zr2g4|2d>-kk78RvWpyO8<Jx50Ecuee8b(H8!PP(izG_&nApwDo%z0;zzWxOCPOQ{Z
zwr(@W)+jA`WIiJm7O7#k?jW7(1LJzuV=IL!h4L=d@{xm38PVjWcuW<0;mx@PpS6}x
zkO|W){?KX>jDq=%5a>fr@LgU{v0ogguB<#E9o{qmFa?q2#YHnN1HoySH)fwV7;}tD
zu!@E%4|*HV5Ug+NMx5Fc!SQ{(lVJ?xNiKh$xY9~a|LC&3u^F@yLYotK4<L>NwgJq}
zVAW!HRFrawoL7jhxrwlenvmeN3d0`zd^MCWR@d;~XgWPNF_^#E$<lfI@qwUw(;r{-
zZsKESG+wioV?8~I+(Tx6pZo!d5O+sixS%TWJbJ6qg!6+axdup+<*84;xmkF7?wp!#
z{p^wN;HfMUlzI0ccE~25@Mxv3`gpmc@C?7_W#_jw&out7Ur%CmUd!+PXB%WSw&BfI
z$Dp!K6ZwJ4Ly5LG{4c1-8`&tTafHc_<$3(sSkHckxg#&7%wLAzMdP0;{xq9we^9h*
zD@4=g+ZjVslDJ%#KIkWw2~z!!gya>N%Bu_2zU}@sqaC`dF6{m>Pa9B^R@@)_VxQ~-
ziKdcu8hC%+NwZ|u!nQ5no6|s3fVT*^DGT~u=1@T6mbg6dTX?nq1%a`z58-SoL82+~
ztn_mPqXbd6BcGb6ub<phFh#PN@7{TqNc4p9rXGHB$M>v$YbDP2T4rWNr#1-En!K_<
z$*cKc_b9mPFl4_?Fc-%j2vvJ+5)Bd2r1+lFDk&c53Dl*;4R{<pQ}IeqZizxQ94g;X
z%DU?t+AjO-%S{g~uVdeNUYJ8;{~N_J*H8$5O#=HzL;xt7;_oT4LJ5F697sCwCY&Jy
z+RquvL3o?MWT+8Yl8O@vYU>>D{#<GLZ1(d!?BVEmjn#eVo*OO>eIE|2YrjP!(=i8@
zB)>X!ts?k-kpd=>dWIUX0q)yyp#T}$>cuJ3cvuhmDg2)Y?)_2~+<+Ydb*BlI^CycO
z29ZKTA^Tp@2zn`2p{s@`<V^g{dJ&PpbJ7MS;Q|~W^pynkJXA~Y9iUWZSp1qOI983I
z!9b6QvHC?3R888@&GkDYVw;5T{*6%-@n~NDr?<8p!H;ZsX%35TB6sGjdYY41n=znj
zJ=ij*rAon8&q-PH2c<cx7g&{|Uhcp^gotwpC-SHnQ?#IyL>c8LmqGK_pzNKPZ}W~%
zi)#x5ZvV-7co8rLJcLD$Zicu8pfNe=+#P9<;(@kFpN^HFyATn;9lS)qAN(i$<RQ2O
zcOQnuSlpKyI)`qw`_;C$(qE_DC(imnaGXY@TRp*WB2tJk2JoPJbgccqu{&>L_Qa4O
z0PtkieV*(0Zh;FNQfhE^#N;+~AAy-c;Dd47rrXwvHToy59zCw1R6y6T&*OPQ(G=`<
zOH1d^n7nY|cs(A=GqQ7_UA{yZ*t6m^>*Rrs0+1)WAC@I>2K_?TmQXgGhqTdapjCw9
z9s#oN?xq_FaV-bC4;SU`ce*KIi_%yrO7GK|K|Uu1245*Zm8H>3e?HoVcDx@=7}h17
zTy}#EFIqceZ2oIe6B~phY{3_|``F@x>(8zpOg6$y)4}c%Lf%6Wp@e{gV;XGpv*eP0
zN1u$QJbKg-v)t$!8=Ln=@lLkA2uGC;oQ1$>E2r*Q1WlNP8!~rT03Z`;=DLm$iU@{m
zca{n`>KEX9*I=FN?^2YwKiSIfjb;*V?X#7h^m8?sj?+z&23M}W&JOC+v|G)$9%QVM
zLcscw<sE<O+<}J#7lj4YZMB;{TNd`ZP2WuLdMf#-sa?1T(a61JD>Og5(lvERdHc7v
z$Dm4rbJLu&?%UDy&18@R5zv>`(GGrT7qKfOdY$iEU}ZCH05`|z`=Jb?zzqG4f@_Pg
zN|dw=fV|%AZqbUTC12M&npb~o>)S6IwIj@`esy&st3fz4ZvBU_iJ;=Yx%c^nL~=b}
zNs0fOI{o@e<jUi2#j*p6Zj+w*LM;#a83|v2Ssp7~OvKFA&b0rTRda9T^xRs`n%<f(
z^$=549{241GU)38qrwDGCr?1Vp-WilZe<zne6t4(imj&~x|XjVp7)YZ_+<xv(9#~f
zHW_UB(Ug)Tva>j5W~|n-YeY-l@CnY9%aq=~TuNj<-AH^R(0u9?kZ*M<jo|H&(wY?#
zl##gw`$U4+?ZaJe4?p!ftV&`#O;5$Dl_agg4?cWsG@~<A_46Fd(%v3V+XmxgfPWDO
z0q#3VB{xpJO80XhPOZ`~zV{HLz-}<Ai9VH+R|N^+6G-x83!EXN*yYvA{|%q0e`BCL
zbiw2OhzX6pars@U%9~>X$14Kr8JCX^LRy{iW2<D)hvdqN1B$IDt80WRPYsRs@8aJs
z5gN$3lXEfn_SCl16Cb2GE?nii$6OmTud><?Uj`g?7)vLCHE@Kz7>OAT%Uy2`Unh8B
zp!z$)nF)^md)bu&QK2XUw{Hl3(s1o7DR{NShbgoAJW9^byt)Q=W|sQ$`oatIU7w2q
z6P5yf#Hd$NahA`O?4-bd;)T6&zaLgW`-I@|W?oHc;3w|#?6CH>r2-OYUlhIX=s#9b
z^ey%gz&;_>qC1qXSh6!Oun0i5CFkYbsqiQjJ0}=zdjn*<0EnH7q2Hu7ya;0y&NGNh
zuRJ8_C$KDOY@P!4h??zG9zC;BLW_Pk=O<E3u0`){!?Iw`#fQRP4dB#LtqAkz7_#cd
zb1_I#q&v2L7TK{R78A>wo(`IG8I!udgcRIe)AfKWliVZC`E-y7$_%3Bw1U+iRFOj~
zFV0u2!ZZX^iQ7K6JOD_m`aF~`3q65=SzCyV+bH>dUc@6|+W9&R=)pe`tYP)dBm~c9
zU01S6Fe13gqxDq=p;OC8*~0ScpzYz}-~#IkcqYdgIOR*k6^L1zofRE0>t=JD;CgEO
zpQ;<S67+T4*gU&+9oL*?-X+kyW9E9i_lqA879UVvoxSQ5zBw;F1F-kTC;|LDv=7i%
zP|;o70{~nCtb3P0Nc(O{AcO=-pts|HTG%?pB*dCPT-gZ|nU<|Oj!#rB+vb3c@MMb=
zMi#~_2pO42uoF+EXy@wEAe4b0KllT<9iBc{?vW)Iyzj+)jYN!|XXKe)V&_rmEjNy}
z_UNCa&~6E7Dor%4qj$X|Scn2n?DC1+iqm=T&=Rw-fqTEMK#sO}FaR6Hr{7K851hTz
z^mycI0O-tLg>I*!7H=)?_)CHJsoTG|yUqL-{^NB$Nhh`Mq4GPsBhYnA^e`2DTX%$b
zcOSrJa(X23GyDT(mV(@k-rtkGzp@7Xl*MAQeO{VAG><&@N9s-B%ZWQR<`uE$z9#&x
z$0Q#{f9#ved-dz=y2`~3C@2AH^kGE*W4DF}LVId=0x0k&{K7yeib+CACw2jS&>a}7
zgaV~1!bPXU%ML%%^slYcEh)bwFz@bO_TG*bQ8LB|ucbjC=+%VC<e>1F{=HAQ6X$bQ
zsL=Szbd=2f^~3I)=ll)=Y&&E~7*^EA@ehJNzVIZq?!B}5W=+s~^yQrA0kzg<u-#Ra
zNEQOg8|1PC3k5y>`@Rhz%Zj|;U#7OR0`1a)6x~EYwP=PB|GHGgs*)=aV?5`&flNhP
zLHOi${^Kg0Y-@A8J3(xrZP@S6rtyL1t6=Pvy}70jDDmkQVHexvu*S@`pqCU&q$+ne
zF;Bc8<8RJx{!0K{JBB_1QAbBjZ|049o%|*CRA`e)i`Ol1ukDg!?K5kj){o$?m5&lk
z@q_r%H8>REbh7JOcE~aRHHN>`5MT@@BF~o}kKuMnTGj5_HzQMI?)vYiLffppD@zUx
zZ{XO914B_})OCPy>Te5uf3Ll|J$I6SX(>MYg*MnGl0p_RLj1owfi-ayaK?S~y69aI
zIOW^yM7~UF%+B-}niS+t#bLf(F(J$dt9s6_?_|R8nSsp|K#9-3)7Bekmi>kDHsacR
zg-*vNUv^A!o7gs^!*9+!d=}<bwh5fi5|@+d0o<FPfNW?y+ov6Bbsj@5Y?%%M+?}8h
zK4(nWGG5{zvzOQRs@Fsyv#UV#u)hx_26E~ZYRL`~f%C4F6rAEEB=C>DUeA05d^AxD
zO1r_4!H%F!QquCzgPm;Let2e@EsHFgdN5oSN{qCG5Z22~X7lC}H3AT%H-Ot_2;}zJ
z;(*C#Rux*gnZ$(u*;Jhe*pIDO)bPwKY5Y1!;UIumT@i*-!5w8xuku5K?tz1aG<PTw
z#((5Y5KKb5<Hmy#3@~S*mWlux-BvcF+^qTM-<fL$W!<jLHJ75t4;OgnecC_XT40ga
zTkzb*ds5|dxI6R(VjuPwth>V9^dPFQJON95bA<Z(T>ss<m@UlPR19LuO7kPU>~ksL
z&gf+e1bxR+GHkw?2?~3SUo$R+F6Xe%q8oVY)M;NS97Cad;(fZ|>)tl+^Pp1B_8)uL
zrJ|vCFvIP#0&~@sfRJsY<`CKp=fmh5A>fRF^1D3Sxc#q(FIV(zhk>UcOb4O`DgF&A
zLWMJ%Bf0f;k|2wf)#KtQ2nby1U3>747DfTdr{0K%pW#fxeZ42bq2_f4nDvA3Od6Y+
zwBwLl`se)?c^~#ty{)&s>wOK_<z4NLP^*Y43AhjHiMYKQ8C$x4WKC)Yxl9XRTPh~+
zD@6bNf&xxw@Q=MaBnSlTdH1T@I8}NTg6boKm#x=BY!G@}Z5abF`>bHE0}aoFexCqK
z73zffFjI(g9NG)*w^k`KZ5PMILC%h=r6s*e_haA-!w=L!l;|72lq{5FD}mNC!j>%z
zp$j%&NHYA?I#F#)-mbG}8^UE?n_@|<L*yb=V1Q)(&<1aW-^wF}9%tTmJtkmhg#mKw
z;b9=(ZwRK_sBt!jFV8!Mz7XWJz&GI=RFFF4C3cbJZNa@Sx)p@#V4pS2A+kC!BXG!c
zfm@mNi!5dbhOFGYVdlH|n%>*ca-DAtjf6o0Ru&zgtcR5w4B1NQ>)96hBOhgu9hj@V
z0=<He=!VS@!F)+~WKyFTeeSybt^T-ga9qdUN3!t}7#Ln2T0v7FCWL-H^GX5t=>nJ>
zUbdiK%@cyyFC+kFisujAxN``Y*qZ`bNKd9!9MpC$n^5JuORou;AEBQE!>7NP81ZUE
zoe(McUu!ka$5kQt9!4_jH+h*D9j~Z~8bF*vt~#Nz1C*Q=0Ls1~SP==_Fu78@2-x0z
zv9mR2QJH*65F&$r7C=!bSJnm#gA(4+g?NcwAXF2C1w@8gd~lP^o9zAqF5W?Ym+{@?
z<8#f}2~dy<9if~!B|Yyz3Kck5QU#V90$GqLAAlb}2;4&7vBS){0OYu>0!5fIm7~~9
zIX++dA;IH=`r9jflk#MPvxo0h$iDsR>9QW|gMUUdF7Xqj-hz-3@nG`?ANK3ZnTkl!
zGF`sw6_C{iZd8CZ2E(BHRMa14mH#7%ejTn}Ps0Tai@a!67(8uA_)l2v{9GB3Cr(dR
zsYn#0(ro`9=M#fJb6u@&Xb!6m2tT<AcS8*0V2uCY#Nn8)4bQa3+~luVZZ}F;%}V?f
z(tya8mi6A<Demd}u#rvE^TsZ!ZIUg4{)2e@T`ChlYKx1W?b~7>=J{;+=tXeo(}NQ&
zHFG|{k!l|z(?gdfg(_3A7AQj+|NT{571)Y`8_!XYiqL<cbMYj39fW-y)OT2f6l?}>
zot3^g()N7&L1O>jlyr>{-=uEi^+=bqA8L|D{g-pD8CjRX^o#7Su2)X9tKYgrphPi2
z|J_s$YZ-rK6u<N8`>G>**<ktuqLnl7P6G6hzTG&KAcZ?F7V1S>qoN#<va|?4b?Dx1
z>>}h&VG62u5~gVM(c$J?UnPuh(*sR$c@2Vop_9NRVynOM3JRV#0g2@VTlSq0DC+&9
z`rrX^dJ7dV>TovyRi1MT@_mF$kZ~t#;H?Ao#ksf*=54S%arYsVxZB&$5VE0!hUEq$
zG`Nxz3%0<9%fX_!ARn+H`QLtlFVzRaq^7J(_RuTi0m>Fe*I|HP@CaPkPRx-M!1C(e
z&+wm~A#?L%K*#T-DSlN@#%kiSJdtxcSsl}o^3nuDpYDMTn%Mo@R5d737pOs>^bulc
zu_WdMSCYJ~(xAc@LLaqM_KguqV5`!P%!gYpq#4+ltW%(3tw2O9@v9GH$5ol<*3G{4
zVeW>9b-;gOCKZBTS0>C@<}|cS`J-S+>N?!uPJG>y5I0NIcEU<~jdsF)x=Vl}iOV;q
zQu$jUwjEV{L)CjxuurJ<YBD)cJ>_ZX7RNLE1a10;#e;3mgVQ=#GOLq#Z!V6)iv!p}
zG!>4D6I^DC_5f>6{sflh3UWjcoOp99V10gxy>fWHFU96L1350r=J;I$ZKao0N0B~f
zNzN!NMwmG`a7X**aUub%8fXiNY}qyr>bauFn~}IQS$3$$l^={snu|Pc^=pM6S1E#f
z##xjCnhtjQTk9`-=?QP0x(s{XU~*b;2(9`BL`DOLQrBQf!2ahP`5S3m`dL3IAr@q=
z`UzC*AUjEpe+(RgpK8`h*#YaFXZ^}ceF`pY0+Pa5rEG47eqxLsm8=I#w6xq0v<}&f
zoVKJ%Lc<#|p<i_Y;$Rm1twM8c?#2qIJ${^~iv8ZM`+k@{Xh_xsC#3~qeas#Qps_V1
zd~ITm|I*1fR@nKIB-3Gn%ONv*Bs6|iAJc-a%;&rZH$=hywHL_XDA3yp=*FrH)SU2k
z8~SxFa=%tk;wf#}D119X>C`g<=mf`e;G*Y_FIc(dPir?IZn`I_=FNR}SY@}cGtd;L
zH^IGMXy`OF=<wSKl#u2VmQP=vAKHXo;2Y&i75c;S8rb^V$MgxUWA9{u*9IV~1yX_w
zq=BOkLZ_lQqX9Yafa6z5p=kqGLy*4-<JA4^B?uPZ&%lnVn7PKq&dy6T)Ur`ZQ32Na
zLuTIF1p;99lx^PUx$Q{>x%*W(m&bo~6>LEhS*g&t^=d=uBWO3-OOn5J2|P5nwgZ)i
zsNlxeL+$y(hNI`Hpb!LrR!7<k0&er_UK%r5Y^g{Vo0H7Mtw(ZduRgi+;@IwUAZUJf
z?!M-kmI6Tp*a-?r?+Q1yxqg9oToV-Tw(yina3wRB0zN)_<*#D69iBdz7u|2V2K+}r
zy{KzoP@oM$58qvXM#gauQCb9dgbbIb>_EDRNM78G82jcaqTA7Dy}mz+UHixHv;bWj
z;4&w>_m>ZUIrQnA)J;Hz>>9E3B(P?qlZGek*g#a<gwM`4Uo{k!7Jy2HHMWASAYi$r
zO^{7{()90pG!?Y1wR^f2`B@B$LD!Wr(Mgq~NY1~j9D~nhz?Dc)v{n$t(!o$we%xM{
zmB_6A1n%4Wg6kfDH#*a^8A~5OUZZfXe?~;KyPi!`Q9<xpnJTO+?(F~|-qV-Ovhck)
zW(M_c8VE97KIlCFN!vm@r2z#7RS^O!N0>0!2!-T=&_8I3=!UqTOzu4a{_vPo#zX$6
z`QH8E2P$69wKU88fj38FJ!%<SBY_V8S+x~=<_o3RqqPVaktr@n1FwXit6YV%8U(-?
z+-(F72~1$6;Q5@4b8~Oyz@&rCj??iaI(i5NlQ=NH_WY~=KM_cUD2@dZ-uQzmgr)=5
zHu8##c?;3~#icd+(X)P!F9>@*Dz_f<Zt>dfePkbn#$2#=0PmUyT&T>uT3E#I`20I=
zgpl*|LIQpPLNh>|B-zI{c5;;@KoP_#8nm1wqSXR|22E<}okS`ihoVeDvX1AZ(XHJ_
zlC%VX<!Vg83lcs}RgrfOGFIGq*N4W6MBqn{`H>>j5&K#MoggGDmz@A3Yv7DRWpwuD
zpbk@-<F1l)@$4bogj6ZNRUf}Pq94a<&h)%Ue78~7q840`0b1#1WeeY5%L8NJr9oRo
z`niN9`@Ow|5+JTBQ(PGdd*<D)T~Rr#$g=7q%um#MuY$YhLn}vqYQSH#vCzkBHLz{v
zNR<4f6=yC>^3_J-<(&k&3)l5Nv_&OUD*)Eg$3Ns48}GMm8e7*XkOQT_PMwTQ3s_ng
z&{p+s63iM62x0RC2<_yJl6ketB|Ta+S0r^;T(?ncA0agc+*+OZOhJkFWn_TmTPy-C
z2N#<!k>%Mpa;2CZ<p@W8@zrM<`k6{$uMvd)pgZQ-K60;b|5l(!t-LH8m{8QfTiuZq
z1^hjW4wVe*xgK6tpDI*#p15KFLT^(UxrE`n%02`V71QH=)vpw_f0E$%lqs-W9<+XM
zDC#y2`P(k<E{BG{74x>t^Ou#u$nlVxsk;7xy!DB@1Ju~vU!-vVyPBZU4%{P0ebN=T
zGomts<INVs72N&<lkOR6(9xqdBz!98m*mKC|1-&@dh3-c5G7sky~g$dpsfK~#6(+0
zL=Z?!rE@GyT#z_T3}cze+V!)_g;Jc9qRJ`R21C6euCG~h{q-NcfXeIV?*}z4UV1eS
zW`88pvyk?5K!PuP<6mE<fFw9d;l}JKH#qCFJ@^l-SCkIIuK(HA0D4!>atBUaC1DTm
zN5)r}Bt?J7^IHCKL+D(}Mj@BkGe=x(p_5e3jvavTZ&Afj4o>P&#{V^|JfF55WEJ9d
zFXu*zn&9G<gwu1bo?_F#9{Z5798yfDBwAJE0i<3-E!%yg=|!SZNgK7s=3Z^5e;~HX
zK-XaQyyrD**?Pv#^yqMyZG4lMk;uvgs0)Nk(0BgbwLBt&DTum+F<L1=0E|B*oFcxG
zIXEy@>z8KDF8{7*A0za#r18#GDf*Qe{*Y8JX}c?EQGZ6&SS|GFKXnnMHAAsjL%w)?
z+#h?|N$5ZbrW%CU&DSmLY9<{YQUIZ+CW)9HXtfw>z)sLq2zp5%WjB4jpv+*lHDWG=
z?wt}`vL^OEBA)d9D!m@mnXh_`?MX{F%(CJYo@GT&%zPwckLQ+qWvlV+mY2<d!r~`_
zA1TYiJOD1-iWuI#h_+;BQGkxDxQ%e>ev|`eg~2Je<7|Tn+Y5GGVqFB>yYpSL;Lu*I
zo(eR-`)vj(HxL0w@|A(y2~y}EEBaZ!dX1>sHiB?wobL_TB`|^4P!B)abhfH2X)3z2
zgQ2q77X@A&d-HpWDxC9epi7ecfvvn!+dC08-yXFe@9i0w2erpO3pd5XIz>4S(&!b6
zmxq4B)w_1IIB>j5Of&>P@#w;|l_$W797(2D62U>5#$hSw(X>Sj*YbAQ=ttd_Wj}zy
zzk&Kgim4LI3(_T8;O-pb5j3pF&HF;4D+7j{3#a%f?D@=w6?po;cvi(yz&Z!G<YT#g
zUdK0W)9h*2{RREhDEic&3eTn2k@`__tK86LHn9IH$!ydSRFzk}beKE=y&H1fvsDOQ
z0;yCi7I+~dY1=tt8~rh<O^W2+6B-!VC6@}kWkBW4TG+9k)#4EeXmY^v0I(y`ugPGd
zLeRa<^j&~y%Ju3NTaN9y+?pPLCh+vMe<CZAf3vUE??}7z*-x)sal+NT>3L?w`3l2-
zw$h-+of!5@s8-Zs;fWS@pi=aaC-^BrrmO5gY?^q~n<GBhXGdrnUF)U~YryjM^Euml
z?7>YiHK<bCk}BXuYz0B$lGY2yUNbrs0SZ#O>aOMzu>Dd3?pWgoOnM=7Q$s@Ut7<q@
zLD+h`O<lmK!)ad4t+va43tMGRZJn`Sr>o7~J;^`}4CSjH`>Q{QrZCrFGlyf~2JNa_
zd;_zJH+weU8%GlMv#)zmP%cY29e#j#De+^3TI~hh_9qxCX8kzF{s4woi3;cvC2>Lx
z@o`T2Cc(%B?p)F<#vOxd*!M|U#ErSfCmuxd=BI*xcbs|GwVb~_y=8k%>O0-gshY*H
zmRhHGPA{Jt_TP|!>0Y&M(O`;(s;-5Da4(vt6H!<Ob&Y^r6fh1Wi%8Q15ks#T<C><}
z0|YzW>U?HJaW$nx^~zfrOgRgXMZjB5ixA``iVpC)RE0$Dg}8<3d&z(k+gOX7F6O5y
zi`$xlEu-$vV9Ry>x4DrOuMWX>%V1fWk#q9$iam1}zT-*n53a3J4)RFf@@i42*$?|k
zB!#zmai#X;w<B)Ttl|O#h-yk)6`#*JAtN5U=zIgng{(#CK!sn?*6Y1N^yiP9^=J{|
z_U1s+!)D?(O>o1M3Go7!FYiD?V1Y<=oB$4XBe;zeR~Ti5Dh}`651J2i7y2x5w~$~%
zV_uZu$Qs5mBZO6RL~kK`a{Sk?iejPjM)}G;y{BSsH;ctuksI)^CLgyT<D1Wr&9mh!
z;x#$>3&rnVC$veRZvI~Hn5(09sba$$Is4`nB~fjI%=_A3F&*C7{cI@@Sj3cfY-K>s
zc9UYzs^x=YyJ_16{=92{;;*mcFeY{PcjlZH7W{Q^aBmCNc;c1o0-3wXR2<O-D@!Wp
zp!<KIz2*0PLz0Wda$X#|vvM`WpOyFDhQ;juWCx+ro;Kg2;`c-G33(5lOVza2?GUa0
zYJB<&e@A2u<A{cnbgmat^542klM3FoFAW?6Sr^K_UX8VS<6`kwCIZt-(py_%11HW2
zr@o6`;J36f?mv9_@Kj9wD^**Y-A-j*ViPkDJ&TL@S@J&D8^!zDY-78()ZGBo=>u%o
z9(<25%uxAuN*@LujiR;kS7HnGfeRs&R9TlSgWni}G@vYzh#GFP`0q?x^w|!lF9J*-
zWOFx*_vGT+hRp;K2awcFb}M|t*uZI#L7RYW0DM3O(*_m_jHQ!(0T1Wz*7c6^s$+yx
zp1CnUj~(-#SWYRn{`a82?)g(ZK)t}8|6z9L?fc{l%~+FPel89Bb^n;Xpr~L=p+E+I
zQ~HEpXdd?}wHyZO)=m<J9vZl1Y`vPKpk4Wp%sN3exeQYF`a0C<rl8UU+EHk59eN9p
z%Ox=l0j5-B`v^-1ycLa$C#G}&xo`ZRXZPkEG+nBZsPI}o^-Gz(E#a+2drV|^6M>&d
z+&d&AT<Sg*iYqQ%wzfm7O-izIfU?0ZGE-O+TXmlQf(*jp$!2DexRwmK0S;oU`;Z2K
zmS2$}%CA>$bu$AR2^oxk?-?&Xro3WY1S+cYo(>QXz@Q!2k_8IJnYlYWt=#kc-{liM
zu62KU&kIb)GQl3gi!*8Jx+(Z1QcQey_r$?QYfvfZKDIqb88O+WimAB)d~+336D&nV
zb;i;gf@|sNR5T2tDPn^xJvfdkIJco=C7SD+vJQMV*s`j<n#B4Zt*FZ2&A`}6aJSVB
zIEf0vGBk*@3HN|mN_;jP+5*Y`4Jv(9*O2&l_tKE3t`p0d^5sERg>3(^IlZq#T0*1k
zD<jkYBpbYsiDmoU_p=`85IM)Rl!8KJ4B?DPmC{WTs8gMmmns;Bxw+^;{m`wG;_9!S
zkt=IzG=KY)OdPOUQNw6HUo!PU*?rc(EjG!%{@sLiIKs0$47g%oH!y@iI=GOAm5GOL
zQi@l?TYm~hSOT!g4G9kM{i@`?Ef4v{GD`S?2bauvVN<z1E1k(#3DqOh2TmSi^=<?G
z<89F;w}(Pg@)2ej{VE8UJmJK$vY4=;zpbja9v5=@hwi4JlYGWzIYZu!An*}PGFzF3
z4HsDl#-Z)N)dImf=bU%(9mB~@VCJWY;TQ-af>c=nJMwL@?Ipe!L{<c8;EpOC;r~w0
z319Z(r?aSq7tCqA*@I$YL9xF1l3HUSooCEkjJ9~oI8Wq`r`c~LGwWG@5$;||bcZ_T
zYz>X5VS8W4yz;yZ3skM&5Ro_WeTr{z7Lteho>rl22~5GBQGGrGfWKCw3r6T|MF|0(
zmch>_%KsywK0s?5$_76b=p~|B<4|>73@Z)KaYeM|g%a>5EbiSnz7s2T_4c%is!2bq
zZtu@$n&vF_Z_ggu#5j96aO&op>A8Hy(|ifbjQjT`alIWN*$k=<h$I|BLf=S(Q_6Ru
zRo(u58Z|YGbK%d;JErsqU+LvX&h3ivz+QpK1Ns6`Z^W|HN<|#t7J=$KR+6_JwEQ1b
za@yl<3iy5?#UIFv!QwYLH{+PCM5RGh`umD-YsRSr1J_%*?IGKAejTIm|06ydw&IuG
zfS~)ZMbgm9uZKsYtBuBfYzr3CUKj87MH(v{l7PGG|GkkLNC5OB*=jO47F!R$YU}3Z
z^|PWqTQhdy;fsUgNi9S(vfyt#>tNS4^tKMB&7I%DJt#-7@7^p7;91t$j|%8(BBljw
zEJ^YorgF~kZu`dtNpn}yHcLG6f+kiFJZ|>LLREir0>3%S`TiyOW!=Xo*?vGe7bK@y
zolR)o-Z~p|LT6U*K*ucy{T>UD1)f(^*w3HJQfSo^x%yxibP-9}j4JV}T)(3%?M7(a
zl$R~Ssmxg0-VzC)c~cC7Q`KCC^)83dm7HhD#y`M5*A3*R6XFHp>t*ywhA{muN*CT}
z6N5dG4&7s(v)F9Xa(xxwwD`7m`|R!t70)L~Eqz1HZJnTx&VQsW7XFC5*Sr334#>fM
z+@s3tkZ`#Bz9`^Jvdf+-Q?SIi8y7(;krPIbW0}aC{PsYvux^p${p%SSi$+B37%}Cw
zNRbx3TQW3Cs`3I*BVwUIgXcPE#TiU-!c=`kMYyhvB??wVt&K45S{Ug0uxY{fF!HcB
zc_1E6*&1t9E_R{VzR)7NcFU7J0V8E@dsKk~Mc@%F5zH=^!;T2DmsoBOfwl>ZAv%(r
zr1Pxn7W7ITe{C@S$M5)hOqgFUqlPRux4wi!Wrg0ZGQ$d3t|P!u+_3#1wi9F(E#bxK
z|5#*8P>Rg=H$rYi^q00APuIEZr#7#-en6qTZvTPXm3^+kMEySxzc0j#vkq0JODjpY
z{f;{pu%YABgPh-bgnQyYA=r!e{zs_+V)GrdPMm?ZC_5fPPP=i7A5)S}C6q~}7^3#e
zjWvFk(6u#JWHDo&ZTAWCFP=dOQ7HnHn9_HED;Z#(Dhqwq=ePyLomZ2jJ7aj`<PIgQ
zqB(1bRdBloXeo_W%g^^}(eqVkOIUXBK-cN{UT;rLj3P#CGE)BAwk!4q@U5x0C!0cV
zbB3liNdiYh(a(l7zRXr|cyik-rr|wITa;u(qHV^EP9{?^t+E;9nHPvSVYsnJ%iR+k
z_C}+Hz#+k75OmLJ$v*IF9n228AjwQL1)peixBJ#Bh6cRIXOUo5bcVlguw@w!KA2RI
z{+keC_WoO0&*}4l;*aXpktyQH(0e4*w9y`{CpP86-Fgfo$np0EA5ciZ5cd2{BkP>{
zHN2Z593A*>dwKQm1DNB)>YwGnCf3GUc(vwIUB^1Mmk_Q6?3?)K8}T6Og=0ucVD0f;
zL7bDSCXc|ADNfF8RcR!+R6ogB_{J?D$C`CHkQ9GOtCX}Yd}*@TFf_Y@%)}?;82q;Q
zEVm2W4!kiiyAjSPO<s7TKmqfZapy+*4G`J%eOG6KlS-&If8mH~1d0A2*i^lAi$lyn
zJwfCuzvjyck@5wVTI9la#yChU6e4qr{U~|}Fowzn&OgX)E~JO_*kZn5$L%H}e&*oJ
z@aHK_!W!Oo^r~bK>%aG(BdS7ega1r=4dj3OLQux6K|G=J0l;-VC#Wh|OQRnGf#nfl
z_`S5iD&u|$i<?_eA$-Yg_0$A+yX2_6H~z%RT7=Fc+wNMv?)Z+code`mWq}n@!w8IT
z!<b(+8ukPI;jrg7PhNX|Uxn{?=Y_%0p0bYI!6Nl?Z~uXz$4wds_k)^SU$MLzCsD&)
z`XsjQD-9?l2*H#1zot$;M(E|gwgo+gG7uBfi^eS0a-l}NCh<xSlT+aO!HeArFzD`d
zxzAf^uwx=K3Pb!X>`<OV0z(Rfkh|5uH8EfW*Z!5k-4N(J_b|-}@tVpu&h}>{^!#VC
z=h$2Q_Dxg#7yYq&T&J8U<j&P{)Eg214Do-u(~P`)wBy@7nJV6VsS_wZg3uA{F1XaP
z9sCRVycQ;1lD#m=ayI6(Ty`fEQnBxT2rNwrz1Bp`9~_{8!xw8Mp~O_x)y%h!(mcy@
zK=T%WoiS;kUM?WPV*8+FV{YGatJhi34fj1-jUVus<GnE8?kT&cTKPx*o38uR@3rYl
zm?jdu8=g16HEKj*5@@LHE--B>sI>w`5qc~dVt~4Ch9iz0bDg#;35O0WCl5Xe^?(gY
zj&E2YpReEP&+|JA9Q{upstS_-#%p^+1vX!(*sc}(P+wTX+dBIch>sok+&roY2BK0w
z1Fhg+{G7|<ji+Uwt>t_%Iep{!HC^kD&D!X@fPOl#hgOl9YqnyWqy&oiIk9Dth+~m6
z{U}ak4>4MZpLH;2a2C3|k$cXJ*Fj|pnyvKaH)?=Z^h40l0SW$J5dgFDVR<!Mv{sD0
z6=X*|Irgn4<d^@Uz+bNtHtoc`lz$#K74xz-`taYujY}kgQuhG`R)SZtHR$b?hb)d0
zLuFYgto0}k;Ewo%ej?q!%SXge2FAMh&(xXWaJs7w@2Yamw|kA-z<&Q83q50?Jyxe&
zNupl_J(C7fcqf&aI0`{xOa-&Su&fV__s967By^iLKjBR2(%qc<T!Q%KFPE^>+8^_i
zHXN1E^7<V&C4pz<@B`hT(Z>k@*J``EEpuY$^5uS1rJR_%p7+ZHYe0&&;2$u%2d$bC
zVNXaOodGhknij=7pBpo~R)X#e61!#Tri6QIu@3o^EqsEIVY$WmO#zw&g?AaJ><LUi
zr?;M8`{np=kM?T}yYmLM;E3G^L9<9-Uj;2d46bxa;#b`Towk6JcBO1T?jLiGYY%jw
z`miNG5yFK#m@iV&Xrwl$kW99$eA7V&ewMJ>`CMME5292o_0$A7ynwhu=lH5w1RG&&
zdZ%lT;K<SUXB|u3jbyHG`PG<h@PhHW?MfuY^-OHGe(>=Pc;I<auV*w+t(0<{+nK%#
z%6dR$KUEg=6;Q$KA5#S(iycRW14In}yKJ4Yu=a{T=Hwa~g)fEgZ}|`U*$B}_I&60o
zD)ARj-0(rpRq<0lL+wO7%>@$4euyU|i0G_4`ab%H-<8%tBS38h<h}hWzYghtU8xNo
z2+OWpy>J>kXemxsMaUc|X?EW*QgZdd3kT|o(Hnx76olQ3mw^%+(2}PL{t7=-?#CfQ
zT7v9uuhw23eSA~gj<3gYC4^?*`S85jmt8~wV$%HyWVN%c?w?Ld!y#}b5lV3fd8ae6
zt6@eHM<b5&0ylz>9Wp~=b?QWmniG9dZXu60Z0n~kQ<!&dfq=jZ6t8`Pi#o&hFNj*_
zhomT6=mpsIRGz#Qd%73N>ibqNQeqyePZbr7rR|~Mk@6S3#t~<(c=BmYg56sWmc(Ix
zoF<rGXpw{4j-ce_^ZXAHt1G|Un7a%+E(a<?S|8&#oA`#a9u@Q~4?S%6Wo{>#JeNZE
zsAADJ&{XClD#t|?dwlhzGl<n9>$k`U>4O@PE8qRnc{x94a&6#N&B4Y%<LB^d5!A8e
z2sFQs%Ipy-Tr0Su>(is%tf#<alR8L^XN8UD+)*2<3kByqZI|`gSGFhbB!nl`aC7up
zn!=N$uOX=6p_8oYf`x!y^}ehGh}Y6zK3kURzk|!^?luX@TBW4;J^OT+o!XImGUj2e
z5q)F3x6E6M*h%O{Z<J&=6?pBio9B<j3<!e3Pa^Q*&1^^Y6w>KWmUDewV}U}@4QV3g
z7hXB{aU9Y@&=tmOAo$J=378o8C)<&K7OBXUL{Y=LnUGa%yguh0(MQti!2HCs!_2N1
z1@EgLnQtbACo7><)Wh`*(V3^O06HoH<iPr~EST>j0Qic55!lfezR-@ae-yNI)MoJm
zaMor*=)ucfW#+8@a?i;_M_zo*tm<waC-j*rKoMJu;Q8OVU{<g}y~?o|7%G+NGdt4h
zx%)>U<<-T#!f)s6s{J3Mw*|6qKCW1;vAlS0yOhaBG-!{wQfBg*{H<WdkXg7P;R^q)
z$VL;41kpby3oC3TvKdY{z(pb2)tPyf)a1xp$#sR2^bS(WJfoo#a`zWw4pn$ojCGv$
zm9`846EfESJd2`1O6B0k2pjOW%~%5c<_HSD5PU=+T!R^O*59)j5wWwSheG;-Z%V?=
z#2>2h8%bz7qI@g)%sbv+KgNQtLeio8D)L+vBZ5G6Iyirz0#B30Yd=5&i^EXQOUvL7
z`D}f@ABXW{=c>&xcj3pr6I&(+j#@=5>{Hv#H&7=8T?HTS`TA;N+DUs9=$~DJEu$47
zM+!G~yZ5W|x>K9NbPYFVi{wjUoe+ueSz_5~9pVVj$4|C&CBBrWmyHS;UzvzD1RH)Z
z+!c~m@lw|dPN|}APh@F>rbQJpmdKaWo^Od(oHqX&GQMQqHJ^;LG&57P){1ec=UK~2
zN252H2Ka-=ie9S*;vE#%m}K+q>omxCJ}9J`taRCsf$Rpg_l|<&i%2D_@Ee4Z)q_!I
zQ#61gA@MmqDMS$Mo7+#H`7ZR1)i9}&=`GM3X_<UF?*|=&=@iy(_`<bS=)Hb;bYsAx
z@aKv0v0q0nZIjJDY`?rK$6_wv<Qqox9a*2vSV&>RKh}d&m}sWe()N*PR?gvG%RYoI
zgLh<of;BSM=dafKEMkb+S|6u!cENn6VHA~rV=oGi=FV^p{#A<>=`Xi_uiFCLgbX?V
zRM>u1grE#a))IW4R!`;sa5Y7;#ukGupWfo<{n1M%^P`ea+Am9myDPHFJeR^2Ft^d#
z796k+w_z{EV3U>1=tU=@o1p}r_=evLQ-HEavZXu|#6V0*=4%EMlR8E+ltkt4tp{HW
z66!B~L|^lVmT=MewS$6agXZk6d0WWv?2^Vs0siQM+Cd@aF%kiP4W_jw)}2-ySm|*Z
zIC$(7HBIT0!ktZ?S>UU|W#7#xi4=8Yn4lMuu`YJ+m$tR1lo0NWv?KN~I-3}3_``z=
zWfdNLrAKMi0Ph$T!VX!Wk~AE%c``AHdnaVwcASB7IR<a)TKNG&DIUO)LM!9_oey-t
zT0|(IgTLb$V)!djKrFxGZ%@KCxV`T^i+u<BzkU0rZT@J(50z6ttG+T+D!%ISE&69O
zPfqWXeUc3ChXi=5P~~~^u|I7xpnTez+G;2`7)HRG*|79S1Qfsq`qw3~KJkSOFMf&u
z4NQfQLE(5MRO}sa{zi1T^oDkLaUccI-->{1ASgMBWxF`xD7Z7O?a*3_JC|Y)#txM}
z*D^NeO<nbQ^0a*6_>5p(tb7k7%&$jx9V4t^z4)G<db_SPMp-qk*caiZ?dNCOgHuzQ
zAWFBXk(6QzQh*D@nc8pcH*bOUiExUc6w`+DFJ3#S_WZsqGAty_x3TIZf9D(C0(3p#
zMPhH{t)DV*lmjCC)U7~b3CLhyMOb(Db@eOcsBiwH;%nC3f2M4a0-WIIn@_(GoM8ju
z9&!Ddy<3E#lIK=Ug31eL!k;n$TNL}U3SC9PMg&8WcXqAJd+u<xJm_&h!&$j-EPzDc
zImNewu?)Zz!(>+o5$gU8Hg$VID+KZg^4cWy<nvh9nJ>1348MWi?r$+)_6jXmWVT#7
z^iHhhq)^3&Bk0CRUFoZ_dp!$K*k3@;T?^)3F|ENR62~^~nXDt%wdFhkmiO-fPmjd0
zjS2LWmGcL_0%4%g5DjBLJ>Mz;J>dSQr89xUZ<xSVIb)Vb1tP|>gUUC-p-T;iR=y-~
zScE#`%bDlLW}>pvFwu#Nfo+-_et)tRoT?{@8#_T1_<tOoc|26#|Hsdr#lG)ZGIrT3
zB*ly+ghDB$#n_cyK6d6>LW`wTDq>JkDqEo}GnOJ1N<y{~vSb;%VV2)~e}BziGjs2`
z_i^uepYwh_pXv`SlQY=s@FzfsI=PLbR}+#9SHg@5g(qjFT*Q08x6ELajW0YHj~kR{
zU4&AKS%s-#Nd(I~J-u1x`+)O$`S!9Xgr5hq$2lEOux_BK6N_4MfSbq9Sst*qhsNT*
zU(W3?kSJTC&NT)Z9wfVk&j#5UEo<=LPLT(?*)Z7!4x_c#Xj>VI`5!_`8`cSg>879J
zvG;}tO}GEG0d?nzo*4d*Z*&U)X5|Hi;FnBlXFb}(y2F+VRzzZb0h?fJAjx@e{-D6!
z;MZvoPKBJ4R5J-3Am`=2K6~0XaoA<~+aYLMw+=JWSRw-3%!;D24+)dKqS<sgwIfy5
zB1CQO8A-$ox-SpqZY}>m5ljXoW#1GNuQh~qqkYay*uR%DW10vk=fNp7jx0hDAl#MF
z8}WC6e{Kg$fDn%D8A;RS{w+b{2W$5a{vlES?NG2EIiFg$O;;?;&eFcLwMk4Q`qcFA
zO!m7Ko~}SZh|U+Nkgn&uIVeY}3s|e?z3cS}DX1iLfQ-8&dUC~~jfMV5QiM+8wR=B<
z&UZUXx1Ug5z7Y=l3-KVc<#r)Oi~{gl5cG(^a7~hWsKNWdAezmBs8@^it@~lrE1P)g
z-TrHo!GPDo%+Wlynh+eoy}4J;*qxo7ovUHV$~A?`a;5oyP==<iz2xpxA#ZdEgONb0
z!uneX=Auj#wib$zpK-HZNQ3v0ETY(U4O!PPVPzN_H{h!kN4S~rVcTCFjl&#HjpUd}
ztKHF~I^0GH9Y+eq5{}cy{j+9HK67d#)SP?~6XNLa>_Zp`V2xeYM1*W2AKSh>ylONm
z?%lxCIcvv_#u;JGqis~+HCh2$PwHuylC$nHg!+XfZge)aCod5%Kn^5}p5qBW0Bj%8
zxHGO36qpw8kT$X`E=0(pVBFo&@kC_+697R0?0jM)3|XPYX!RsCo4LN$y?l0lqigKf
zugxC%y^e32G5g7)TUJk+=7(=*`HUvX3qHR>0Q#(6)~uB%HRc5u5K})AuPcKKN8Jut
z8%MJjO79?GyF}zAh>e?m7R0nUg}ZI;$4I-#)p?7JufXDGn!Q&FFEei+?n*W?L=iGs
zRTRJx_YR3u2434~*yX>Z1%q<rc4LzdiW<BB<7#&&*oo+mi$HXio`DkJlXs3aiC$&$
z5&b}%X<Ycew8VNqJj{lW^Pr8SFzZ8fVa13L{0_#u6vxF>kxU3f!Y)AQ3tOd%25s2S
z%#X=gtjyzxkiY7{GG@aqgZ1pmvv$^INgI0>8fl?-C0@h3h17hJ|J)AVJ1+zHjdnal
zT-0Tg6&b3(3h*{SNdv(Vwd$77hoaW0!*A|^QTC*|-T@=lk7b8Nm=?0TK!A90_ZwU5
z6QZ7pXqm;jqv0wt9hDAlvTXif{|u@*%#87qV<iE}a3BMWEW%#&?`}wE(UQa2;3}Jc
zVnymRVQ*w|^2X`{rApDkJ-B^nzRtgbP6GAL^1Zyur3i6;xRoyhytqidMd+A+Cx7{C
zZag;Kn`I92Pq<aj3r;u~gXb%R+tV!6JgY!~Y0blVG#iR4>?x64e5VArS<js~lb}d`
z>k37|jt0JJ@IP-QIKx&g{xHY^bgwcghWG0hZiE#7R~^iKpkA4e?u_EpbAFATo<Fn<
zWI2f2YAd>E+<`6mo6{`%NTgd82w^%*vZU16%>&(%)wBEiPREV79zob#;V2G^>?wKo
zyYc)p{8HijLukhflwrtTBcC&fJEWDuW*87ZfqIv7a~ylwJ<i_xz1j|<(QEEREnhNu
zM7|GDrYeqZeGvgFJ0%affGn#g3FFw3)sH;^I;(nWnp;>on}t&JgA)Yywn#?nufB~o
zLIbUF_Rh-E;t|orQ{PIeUQSp8SYJZ|-Fuz~0q@!d@S9<{F|k<dt_gf<JWWa)=s?+t
zpjFESHg}@s?8TLJ5>7#~)e86^#&!I3BpG2+$3WajkY=gHhc3#Tg1@p#Y`!wC(I<6h
zp6o7wI1F#dT8JDs`MtcDv(rC=TYP1|=+c_F_HYs0m?b#$cllh|xs=$Gfxc}Gmn1sB
zgfB1Kn8@1RW2tzf5|pW_ZrrDGV9_5D!E>9p4xWQCYq_)7)P`o7gpgS4Y}O2u?Z`k0
zkw*xf4_GIr8Bqb!fZRuNX4-A&{$X+cQ+>~FA^v8d3`hKv?5W%BzT9-yr0hXhwLxV}
zrQ7(1c)))L^BqKah<FU(_12fzc>vc5Eb!s<<7gZbNM)qn)VK{dnVPka$g7X5v*RNA
zU)kgx?G^0*gk^I`5DW)R@DTAQ`yJzY*XJxe7gewYtDt)q-0rvuX1_O#d-4z@m`dmA
zeKK&^eU*<at5EGt@Ms?FaV?36FpP-U(wG_=9{qgp)et*6Z0e1(n+R!%*xwi_aeY&n
zcv0t?lH&m~*He%zQ!f$H1?^8LI#3QMS?q?>H-|aXN4w;sn16E8n4XN0LxB)J1KZW&
zkjgr^m#)^hu9nH#WEWGVPgzdv5GO)}(l$J;3toBiXP-cc&#dv@TWP%Z<UTNFhxo$l
z%iuS&1!oZVzFa!b_fsG29vb00`V3w*n1Jg?ygA6nb476H*{^C9$g;aa6WrOA_wPv9
ze!uL<&lF>M^i`y@#Au>B=mAD&wcDQEE8EL=C=UJv{n;(89l{k}aN6Bi9Q^wXmYOhv
zW}vp48Ly2l%R9muBvCJ<uHdg6KlBOFRrbmmX~07ifk!!{Zb*ZEb{w7yeeW~%()ndB
z^9XKY6r&@X7qgnxe`#D1;>zJ9z3=19CvjIXx#?9a4($n9XBp>LNY?ML{}{g1x(W7v
zYdeCt5o5wlq-D`A4x(lLtB^zCFLH(bchwoZ|0we*gI$M}eYJzsQnm2Pt|^=z`}K<8
z7hLJ3Vz@m(17xu4=du2c|JBbA<Wg~y-oIQc^|Z?4hx{h~v;Gt=TNh~1`YEqUUeUW<
zgJ-m2GA*6Ts{1!~;mp=qm*kB7SGMf;a7`$cK!vAg3U&>sfgs(hdR!gkY&Wc{!-?lN
z#j8fJdAl#r@CG9T5F6!ncID1<V7C8txtW_L$@i1{rIkSu&-UWb&`0_G<O5JmV3DTZ
zlJ;4U1nw@6@j7Sot?S_;a*_o7a#O3Hn3X}{eA&i1iOB1O*U&wL<6>l0D`9+iO=hN#
z-uQh$9k!WIPyivnNM9LwP4Z8;mB4-euS<lxtQ3~QUy!EEs_IEIU~a`2uOH%p$63!#
z01aMhX-(FaIKss3;d+I<+aqxE!*1Sn_B5K%7CcT8hYLR`@d=r2ywTzOP<s+{3&97C
z7%4$w^!+@uo^nDT;5QsnM!QWz*;(q60%D`g4=9iu|C#DGS;!4@w-ml0^ey-*66&dQ
zeuk7WEQQp-!HxTmxqj{6rTamQw5_cQIpn!77azlsnaIY2SSbJA#EX_MkgS^H)|i<F
zQCA&~<oai5CWms|7lPfRESDVZ48)M@O&35wYN0qIWEbo48p{kMyj@7+WW}r>QUmME
zXY_&X0Zv20+DEJvZJ2{tK7yI6wgN2LV0_uVB`m&=Ilk2Rsi#*bSfapG36|yog3wnw
z%2A*vJ(t}ifPY<AtGfN013E;aDw6e2<bS4Q)4r%<6cClF@K3Pc7yO!3dIdyx|8-+~
zKDcQhy5F<jQroP+hXu~lEYY)zB};T+%3d#!M!K=94ZXea&k+#2u>!7z<>K3gRT<b)
zf(|EJAC?M8G;ZSgOkd9NqF#dyP`okb2PRNsdfeHn$LAxEW{NN_i-*YW3ZIQlV;!Sa
zyOnUC`&)qnxX{83u>Hxcb|Gz=rCK}f;65s_BV8rw!#XGuvdmg?dbC1{?7e#CE25F*
zw+CP3O6(Vf)p)bFxrtg1(wBvPez<jQbjya_ujQKz_94We`sBo2bx4m(ip;n7E}L8B
z6eNCb;mU5EI5uHR5KU$Wi3BR>ecwr=n+A{V`L=yU&o7q3@%|L7h(DHp{k#O_WmIn5
z&`F8uGhGPh8JF6P<ud`e@_VIdRHd5@7-tXd<FXY;Ju;D~JXnPwOsGJl5q2|1?IUnK
zwtmwys?L*(7`%V)t!RR9-g@-swS=IF!iMDr&&~K-v*UjVmOQv9g4M!SjGGN)v(l5A
zuyXK{JiXlTf#4ZCrb%T}VTA|M^f<WJKQ4idWM9g!hwgP4nocF3Y8q{c|A!iz`j-@}
z4|OJjct;Sm*kP2Sd3IJ1uoA!1st6+_sSQzaUhr=5)`wk=;&tmbx5!;z2>T0>cVAxX
z*Gx$Q8oeI&x9}Eg^3)`WqdZh2m&pp)N+@V%xNl%Ty)NZ~t9O1OD^X+;ljLUS%;{CA
zoCNt?mnMHkpA&&~Flk_C;4?8N8^skuQ<XsaP?y*Iuo4yorO}z5G{z-~VtEwU2eN3^
zVsL^yOt9K<L+#YrLW57;S~eW?doL@|EgqMK36np5JiNeYANe%rcKP5X)vg#RD8LAX
zzZ&p70ioVMYtsUn-z92Es@o=Y3ZM||MF(HRE|>ZB9XNvO<t4P9Y`5VkO@15|H<KGq
z4`<&*OzVI_((B!-0YVxN!K!lknvY?^;jOssk3*aLCVFOAZ>N<%pPH0c`o1Nu1({az
zh3srSS#|&$$GC}?Uv@b)+g0@kb{yl&&O!tQy+vg2hj+T9LZvMDV9Ca-T;`G(yeQ*O
zW<j5|7{-gGG|wJRP|KkHASFKBt{8}~`bt{a1#|9uSxbu*(}c(jYS!TbjR#O+OBQRA
zra1&(6U8-u3Ua0LPix3wMI8P$gigJK!gX*y$m)TkP+5htj1b#RRu5bu#}E7en1WJJ
z#MEWXO8#U186>c$Bx{!m92<Iku@-v}Q%^|lI`n13+Aem5%6~==0o&v4hGj|#mrNl2
z0t}pEj)<bmbiIIFNB6YqltLqVxNG1bB!z6JAYdA{QiM%$utFF%4#=3yE>cz++=6$#
zhE2sFuB|M7#^wUeKo->3Zu>r^gtEN1$2E>HtCARP$HaSBt`8t4&4<B74FB!4175oa
z!~~71lZBydx*Z>Maaam8V#OKk4-x1oxF?8jV+<A-8Ub{C6}_XlaHKW3VWXp#`KMX%
z@Vsw(P)r(_wRpeFdin0`wwl^b(Onc3_jto|leD!g&%(fxcyRd8${WvyrD!2M2lJXH
z`=Gl8&sO+gFxnF;GD0f2h@XoNiQwOY{I*2mPB5W%xkCij-Io7%eLQBcr#Ev)?vWzN
z(G{57=8g$MSMssG>}B~PKtW2O#&0fqK>|PLmSid6!hie7o2@A7y(^Bb3*Vdb3ywbF
z9-Q;SXma60*<<$Rghj8x2}EM&_&U=UMGRt@`XIJr<YhRIrV?tXxemK&*GaEdJ1(<?
zXp^t9isUxk^<fEM@_kcO1HmPKpVjk%^}=Awt?);=F*oHROVM-``(7o4wss1or+sZF
z>fgB~+eQBN*(YCcyWqJp#n>7Q?3EGnfN>?p^~y4OL=5Hb#`fTD0~a&2os${O4O_Du
zH!WT_zv_)t{%V>IVmMgtNBBm$aC|JP*4_LX4d0ro&V=RPD`P)M-Afk7xWU21PEcOR
z7tvT&T9=8cteOZo-6&%xEVO=InCuONakdEd3-Hv&vHkTdq!02X`w#cytRUf1P`x@?
zFGLTZNS@eD`%j+sk6`%e0d{oWB_#Y#md=Kt33d5|yqogj@x%vrM<?6fHzqfg<V<r|
zdt9HHx%ILj@^9S=jamAnS{OHq6@GPL6;aI)-G{Kc7gWQSjiwGzXEn3ODQ!X^40lrm
zLzE&SquCog&O$_cn7jfN7=`s!EYV5=-Qp&LtrvEaLgZcJ^EC(uM<dG)C1gu;twFF7
z>rmbolZ^QehdH>()$`hCQ{<0pzV}sNPXEtwm!tQRMaXr}xQKK)<!|2_CH>TKd!pjM
zfsmdOE}I+Rz=2*K44Q*W<W{tH&k-)deKa3Mz9}EM6FPN!_xfW(I#AX7Q$G2SP*e4K
zN3^CX?0iD=tkTb!s(&Qrf|bs2%=_3MN42C*^hgeAt>_o2R-|=_z*UeqQcE1k-V+6V
zG%mdVfE}2V{+f;b8lAX53qfwT7H||z7XQ&F7Kw1D7iwGrJeV_&aN4`OW_XdfQxJw<
zOpQLNem9hKaM9%r{acIM#?ELL7p``b>>d0KThDlp2pJ_!s#FsU6qM&P{@!tQN@P)f
zJ@|d$d%#b(=Y2wj)%RZ^MEYUNE;c1(@d=uX*q{!@X>S>ULV7@_T3j$O82=OOdC-T6
zb&@5v!v4=_-_gp#IKg9LQOg#qy6N8*n3!I7+@@~p<egh?R*c$F$qq(VRZH-~3X_{z
zJ<u~wxg{T<1iifu*hey*aP1pC;lsDl7>1=>?fa{=X<=o<m;TVhtK?^;)y*{b#PQ*L
z9(?c`dqr(SXx|(<qEyu2YA!i_a1qJ-bpG`pctITjPUG6#oGh$_(_>POwz{Dqp7jvL
zGrVG!$L=@ZX_(IW&G0Z>JgrM#X(@aVTO~xyRRc+}4S`5d0!IF^yoM~tLj4nK+H0f>
zt41TmRpDELe-5n$xYw@vKx_^3UM}(m;)2DIz|%#B*Euy36E@$p9ub1$a1Y`AxMCId
zs>CN`YXUebG^7WQ?;M!&Z5@9=&kJRV`ZFAi=!;L5$=LAWIP>d-ZxD4(kH83ShX3ok
z2!jGvVc)3c%o$bqn$x3=fGf3(zx`t5fD>Gp8FUgCUW|AJTz-pyvB9UdkA%T&36f^R
z$^{Njljgi70-xs7{#?QBMWQY@;mD$kAYGE`yVl&?8$?n_#@6jvm}8r2SL|9Pudz~^
zf5)LAoCJQWs0)R+gC6W$`8Ek1eFjGMv33&>+pf(w@YiAzUpG{F!zfrD)edg*;2@0n
z#Xer{>nOvBA_P}iq$Ib(O~e6!h}e?Ejia&887QbXmX?5R9u*|YDenCDYFw3)3_8br
z<e@bddX&_$e&+jmpCMr4E_kxs9(+*pJI`HN!?=iecs3V|d?25#8!$s5kX~8N!ij$n
z8#hteBAiceilighx&O`kp;ln!;is+k#8pvB;O2L}O|#pC4`Mio@KrY<gV{a!YO}wu
zS&f-6UNANnsKv}y#tkB;%Khavf%u*>ha>Z>=y!xQ@r$&c0};uY!1RnX>m(mFKoTD-
zjIfzef`5skDoIYv)7LD?;Wit!$3@hR;{+K#`A^}f_5|ByZ?c2f?0xQRFIax?@1>;1
zR6@~T$>Kt?pap!y=U3LF&52}^0Q737V;E~G*V`?(ab<uW>$B+Q{`?tD4835O`(5S(
zg)(qe6uu3e-Q#kI;mK?`h6<TggB#u{!Wkw5)diVCDODce=ws+D!X^U&OA<L|`%jPO
zm~cFgt^k{@i)(l{nHwMa3mtnVmgN^l`&<Y%{mtjg<WpT14V%x=eHF>qSxdJ{1GgS;
zbQH7xhQ(P}yeNNy3bBRGx?c8w9_Qee4mJ&c{rMSjO{~{l8qTih#^>+H-EGaoJxUtl
z{eyMFpZFQ6F4D_rklW^MjG2!;DoJ|1Uh}Rw=4aaMX5<^fG2j-^CD<z{3x|+IC>`g>
z*9mo1Jk4V-<#rF_x9V%34&y(#^k|#}f(JMTFPK1`Ci2%&j%%Xix3?`4B}JjpIWE_Y
z1D$Grybj1q0VCXJ=maFj<^V`}RXl*Wm^OSjn%72S-Q4H`n?+-SQkZ0H;O6EeA$^e{
zw&IT_k_pGClCpY%ujxC7WJ98UmR-vneSIiXAa_gp#OIahkKDMQh}U7qN(g-eb>;}_
zGRHeN())K+I;9U9o<DEnZqaqhdWyspX58TZ(f$L3Cf^0fI6SRD?$4vj-_2eWYg4oF
zV=R<U{K#0V$MUeS%;wzE2H$Xz&ib>kal;9=aA2ZeKaKV2=I5B@%82lvM@@qa{dZ$^
zcf%K%^ae#({MUevEjWRN-sYPi{6lLWzi;1odnhqzctLso8z1xT?ME0JQ7eQL(odjQ
z8js87yo{r=3Y)IQ2g=w@R$5=kkn!wz<?C|!()@zHf?Z#=%*}(+-=DX-i3R*_VXGj#
zZEsvsM+Hb&Y_i;*>>jh0{PN)RlZDXd@AZ>?D+xWZhnKzg^=x=_ktEtls=UnXol-*Y
z4eZ^O!as^6?*ABvY1Z~ks${W|T*j8`i6e_jB9N5lHwfbmjUoa5H44`9vu5ljNa!`M
zJ%-mm{&!TNnvG(!l-=I`I~nsnuEt)DqNVpp_l97Iw(Z{GIH#R~yX!@p10&b5*`}%B
z1>J6jMNQ9&bY=;gYH?Ff-k~{&O+{Szb|n1%G-dfQ5?<zdWx(w?1%-3Pt@ygocE6+|
zaM7W1Ry78MzuRl8lX?G{Ly5><BsiSx4<}A#`44`KeWH?39Q}RHI+Znfv2n#>rx1ro
zA0oI;^ICvnLIC3q^ARtxn%V68?s3#?!+%uUNDw!6Vb1wH2nf?QhRBX{P~}-r5o-0(
zK#c2Q7!YE+Y7th6mhT7b8a1iXI@}g0VsUAg+g<zd|9;Q8*}Y3R_!mJ=DE#a^w028|
z4&U%yP5aTY7tkM>GvylYtOmb(L0fst$-e6!+QN5r;*apd_xA$FPmqxa83=L1Qm{OR
zqyFSqY?t(pjCg9=fZfY@jp)Opbp@vvD^5=`?(8^qjN9)c{G8A{PxylbsCFLOp}yU;
z%I8-uY+Z~5jbkob&R0M{7k~pr*zf$HZkxHVEw<(P*1l?H-+w!eEhxZ~nrU)?%7yaF
z&I+$7tlse}lz+K;sa!G+js<$_YTU@F-|~021?zvxS22}Ay7TH*+S&3KY1(mwBR}K-
zYeO&x?Tn=O^8g<npy{m=q6GCG2oy)OM%}d$jbUqQ9=fmeIoM?@Y;zrjvib0*)J)<=
z91<%qhv_(Gjn+mRQC@$Sj3$X5XNra`b9Til|I2E2l4iAA{4+Sq)XrIo;@;qd!v&3w
zYJsx{fIR|E{DJf{2IRaiyaz{s7$SgpL{HQL3Sl?h^7m(8?<`$f6<yt~SGAH4T;=%E
zc%>=Wm5~i>m}1byAzd>Zri1wqVM|ME<M<+v{~e{_4PM0JdXB1t2d@N(PtfrFYLUUf
zrQI)K_v5uf^&fpR#NE#uO8o$7S?Kxl_&(-5$yUwStmOC=Is#k56D7jYRnAy&F%A1-
z_e=-#(LAST!-Wjfctg^X<RV1<m)kai^oasta`279!VJ_`0QXHro*OtjP}y-q2~LKH
z4l8#<QvY$Zb7mhFVoL8zFexpZ>HOEzYkFxZkz0?3<YESeS##`EM_{KIc2xwieIJ+8
z3PuAB=<8QFTxV_&r|7lgHv&I`b7fGk2q1GHR+^B4p`t!X4^|HxY&bt@WFz)IRaR&O
zY)<FDBnUJY*y*tH&oQ+Yua!3$A(ZFS_K+IjirtxfmU-X!*J>;ps22oV?;t4*cR*n$
zPI-afX;2xBnXu)CKaswFXw$37HMm{kcT?lqi={;Nm<W3O8)zT3c0*Vz^es6&T0JP8
zFgB{PBe*o{MS>%lY}BDq1A5%>f-!(wX}6d=xjfKSUg#${ck4Kg1N`D&Ae<SM-jP1{
zc;tnlyLqC~V|!tw&rc-zRN;QN!rz4a`NElV@jmM>rVCeO;zj2;vq5BKtxFeu#zwv=
zmGM9#?LHJ2g#g?1hv3{Z0FPUYFw;2Cs8j~e;jeIf^n8uC1QlqiJmBi=?OEY`3fS(4
zK6c^97}-d82t^XBXLLSTcr&Np3T97-Z}ehw6BCkvQ2<xv@qTt)NbV8xYSeqHXUI5^
zv*;HjBn)HlwFQ04tF3W=mU~VGn!cLKDqI&VVIJ|IP0C<(6cVU62enU&g36C?9U#DB
zV!__!0Ct6(Nz}y2Zx`b~F~#^9_G8m8^yvY;hZ^WgHKtwMq`B*R-Ut6G1+ZY&9)#AE
z5K#*l$JFPYt<U%*;wg*H+1E#Rm7TEe$7(v88q!}FVD(lC3+KKVnPdPw_L(vzw=D{^
zi2(2)IVwNLn3E_E=!=3j0;*%=@UHRcp6B^<E-#*R#oKPt?4R|U62}C8Gb+0X_n!#^
zKV9;oC?GGIfnFUX$bsMn4*E-3PW-(0RgF+!j9RXijUOXBTsJ7V@+IpYscC57Cz3b-
z2>m1hoCbRDPeJ$`H|QPXb%pkWSsMxWn|kF)YQa&q0$hR4zEmT9q`XR7W^3}Nop#5q
zD$;JKJ^}<D<K3u0-Fuvv{~={s1F95;fIVs7XnUC^WN`fO5R-Y*hJlFM{v*faU9VHv
zTx)AGX?o2*RI+sQuf5>Zk&wVUvR@+89x)gg6b3lfBC%Tfv*<q#Jr!Fi3ky#FPVhqZ
zefpY@%Wsu(z?T`dCvE<v9R&r~fYi&!X;MH|8>&<brUSK!<AVS^^z*3q9BxV&cts70
zuP_1aH*g!Thb!-aZRu5222B_ZBo72QD<rE5l&XxbPtL`RA4Z433QXV4i0a;rsa36E
zxp2M^W4U0z3(xl8_q-LtZRu04*Grc*x4-<*poRvk(k~h~SuakjgxqpVoZqF#WUyZ>
zXqzyFyGN4Bn-nkMi{(20yHr}YOush1(th}rT+iZ$-G11LSXc7hCYYlU>#ULMv(fr)
zUK$hqcXQ1UiPI%T5-a3@hd#d01GB?CnkY3QogUc2)cNB2t$8u##tqe_(z*d3^Jyj}
zbLO5oe2fzT5VN=8ae*A<lx8BT&~z#;h5`u%_a0cag)-g*0WQx*50{JYat$IUL$z6Z
z0p6T7QdU(kc&g4-<>6dzoy){WKa?<4e;%ICfA@{H{!$AsD28~<2VRM!lQ_;D_qUW5
z1gVEVTv2-$cqqop1#|Y6e8EdFyZK{&JUFN${9vgBpIv~U$`!I87x=A+(?XUV%o#43
zNcidtN#-v@?GB$1H3b2CrSejj&>G#h+4fUR@}|<2$)I)hD~U%JZ-K!#N6MGI!p#L=
zJ(dGUtLwADQ=#cCx9)dVaOK{{U)S?qZ5UjBuDfZ@mN=ZAPnmPY#qiJ0Az%SXw}Xgm
zN1QqCJFXzv*6k)#d$oI3Ami0@k4U%WmV!HL1Q!p_J+v*|?w<cL5trqC49f67Xj+&%
z`uZ3luz1gqj=stn6*V~fD^>$wC_=Ca(9xEvnv;D?T+W_INaU;(2VozGTfc7K<pm{{
zA2kIOn)3^lP_uJLYA)E=9K7}}{-Olc|Eu>#`#<~x13t;}G)v}}6R&gu9rNdz!~LG-
zTMx4^4znYY+(BXQ<SqZ$!d-iD-O5ixg7*WN#qzI6F>J;$)nrmD=uMEuHNE_E_kb2h
z6y`Wt0D;SMXba&Il+63)QRFtmJ+LYyj4gZ$y^n)!619TkBn3vq9y0KSd*LU6`57jv
zP~&J!F4b#?%9h)7a`t{l3&lYGI&a*02U^irRxatJ#F`xJI7$7?Q^Nev7cs2w&>Q_I
zUo_?`>hvPR#d^DudSmdo2F4>f8fo|hn}a-r`|hp8m>MWocjF)%GKSuSrneOPd_qVB
zEZ%gpkS!ZwCX3*fPr@HW{Z;dl<$}&)o)XRl(gVPh{WrN^k6s7l*=&?j^PgNQxRfLq
z)lKOU60#(C3xduBl$MDjhHwY1cRD2JXlJ5Za&U?EA9~|Vj`fE{Hqd2s(r&oU#4~Nl
zTefhIE(Wr4eU5nlh~i#w#$;zD>gZm#ONm)4{oC7V@`cL}9^5!o-hZ`*>zLqb*`;~a
zy3=met(HI3l343=tJvH^vKl?~c=r%HYW?|*kWDnWC;;!8CLNDHxoh^ejk}9s3m7-(
zgx73#*2xW7;?Uv+lLp`Oj0E>y_XzEd(^!|%+k!Xzp-)&*gx@93hYTK5J1;_^F*i>^
zAT3C;@4zi1@4l=|%cNM&KobXhY(KL!DcOm=lP!wkXuimWnW7K=him^8+Sk<RG+Ns0
zRL@-wh=&|yd`eDNy4=>3Gc<nE(!1}rt65V~5@hv$D3{8RWd8fu^Odu=j!&KKjo5lL
zbCo`MRtKj_<6pP61vX>*y4X~wtVP0&cGe4eqLh)Hl;a-g@&`%Shgp2@kmHuqH0}Cp
z+|V=fFe<z20Bp&46FA-Y_W6^uVMgi!@_NEZ^Zotjx>Jef-&!1WjpT8fs79STkkt50
zLEs3yr1$lq?Zn-$d0shz72O{D&6tji>Q>VIB3#(Xaz*&s&23HWVQHaYsLlrIHG7_U
zpIB_+w8HcGuIIHf=E#HizV4TDS`mM9DvM_L4%c}){z^+RgZKaCBIfc^-y6Ns>BZu3
zv~V0j=x=F)_nt>D!UWpNCpd`lVH&qsGES^R{npZm(!Xy&x}TCz?ygcl+=vvKN|`om
z{`-;CbwA!w)zfi9;E@`9r;IQw#<ws#GctF-OD5?%h8t!4xrV>?oST4KVI6@s7c4D;
zU;j5-tA~t=bBlY^)d5{CG<|!}&7kkNxoPq!B;95l1RT0`>JHNP@j0u&09Gfuu;!fc
z${nnhvqR08nTD>p*7`8v;{zw#AEvAn9152k){q|XoPOh|5x)<0ApI<%yx5!CK30fE
z+<yC=Z3FN8AQm0rHh=pIX^97s@;-QP`61bu_V|POu5?zP-MdPXxCd-O{-WWqxHGQ|
z7Ww}^NwU%6P#5xZR6$o>G7?&Lv?@p!E~^?}mgt$==URNu^ODp<JNHI$F5<Dhm^&=L
zaHsA0jO8tRP%{%q*yvl{kRABP$B}x;j=4Og^~~2iDVVk&Y<-))a$g@-0_>i++g=-M
z-sW+N7<ILOJU5c?GQhbXA8Us_{>0)<l^&n|v%>`AUz$Ads{9jzdf51H7ZoUkaPjeO
zQ|3Kxt(>0@9*J+fhYk8QJU~DW&8`%o<4}I|o%T1>qzMbd^;FpGt10h;4~-G06Ujj?
zyqvDQ_&vwOGYsC`@KbXy-%7rW+Ln)XVfKBBxW3X%;UA`qCW;NM`ahL4F}sm`%A&lU
z|G127%3Yp)A~!_D6cXT<bVk!mLBqG(xm6|y3-)j2tt468{z#4A3fPkEVx64P&8@ju
zR(6TWGPWN&152$iIp*HZY8<hi%e@c?d-S+vdb4_>4<zmOJP?ChY(B8&Pm)9TLBpS7
z2!Bp<-o06pc*qlyK4|y2Pv=3ET5*QQ(KqV2UKRK|sn3&vD@}0>t3^{>I!!Y?AGtPt
zFMDdn(b_!tOEfmqiCp+#gHhU~PyT|Y1<&&8#Diy&@DDab;dN5c_q`!ydLd(xGSNTn
zp4b1bQhqUY^5|Z{=`M6J7$q<B0w$6XJ38*0>L|FtOKyoH{fslssp$7NAO!rgYkw7u
z+nvA?S!?J(M+-M<QR{zSCLPbPpV{PyrJnZ>CwfbQ?#j#!At+ZhZ#ir1$tXs=jd+hh
zok9K%pe--f>i9kn79bp6Mn<{!>7L{AdxNSz&+(R3I>XyQjQ+2u=7l6tT+u{*i(Bx%
zM$viwC5Nwko4Nc@{cpS0R8Ze=-=swhU+#!N&!THBY%cVY8eABjwPD?CMA-y#TdY#h
zui1l=`${P42AA_IKPvR~34l6M)0#g!IBK94DyHM}{xjV)0WJ-n#a#l}5i}bSbb7%3
zXeYeTD43vceQ0=nwdnAX2$@F~AWWvkI_V}D=iRQz&57=*C($Et2AalF7EDj>TZl4o
z=%6;t?7gB(cKkB;*Zaj+2~c<GGpZg6wc!v$$nbb|6ViGK6|NfAtvQ-hqr0Swyol{{
zD33-tGLy-)<K1*u(tFk{$^iDlL2m$g(=#r~=!_Wdh49{&!Y%tgnlWDJFY5+^djF)J
zf+E?7_*2e`DkHGQH6-FMXW1{pi%M}?+euoxtQp+-$rzGGe2lUn`u6bgC+52|x3Np#
zvxVjMqG%IFre_-AqQ|_I)udqm>&v?L4W**%5WYXk`Jr@2iqs(t=D)<7Yl6QBhb3=f
zYracI7hrJVo+fufwiXYnaz^Tz^JhO`U18lj4&FafO$~9tmvJB#esb#WK}cnA?9I4e
z=Z#1)*>mF62Z%!nV^fa(ffc!FofFZz`MIt1FBFw&?|IQ}$@CCCksfk@U$39rvoAaJ
z0{T+GUVNbG<A^+X<9;eQgT^Tl@p_2gEktZ6vt>s&Sb?$lIzXY}Jo)MK)nch(HMAux
z;)YNr5@G^g@p*{o=?6*8>&h?W>G6eJoSAsOJ2#T5)Bwpj0zJezCr3R+D6pRvoVX^q
zUiXF2z(b^w@`Z&8^ovRe0ghmgoO1~rUxLP0xStzOyg$Ank#SQ}=&}jxn-vZtMxLj)
ztzxbFPsY_shDiNTzASL${`x)POY!|2j-p9nSINCXJmK|!g6F>`hL7fjy*VDp>@#qv
za7Oe&S_-qV+)~T*(!V?b-%f!Otm!+s+JZiV2v2eNKYoK>sKY-kLv|YPgsUv~FRMS0
z>zg_<+8G=FTGbly+f;y|*-f}Q_Fm$1vc(BP9jjhO^ux0~Ye)>z8KI?OW_y_2TO?3i
zGV#jEB02o~X~f?Q?F3%~;muYqM+R^^4$tput~)%J*yEpbTh_Q&)Y<bY26KU1ehA16
z-}-3&Qig)3%crIdZmUn65fa)l|0%=or(9e8TKPtbK4MnDj3tg{H}IU@w#a8cv-j_m
zDB%r|0)pnon=`ZHoA-_z{(YC5u_68W@@Rb9Ct~xZ-OHvdPV#14i&@PBLbZ!V%T)wM
z4sO8_o}t7i<=HwU<_qtau6K(%TNM6KDD3{fsmQj@*OFO(+i~`^nx1$m!RPjz?OR2a
zG>e(JR}F7OFg(ckznpJX82i^;y01%IV;Y<l7I<jf_v2T+!z3z8_|hyb0H>yUqf~Qf
zFo$%K+dC5XIa|=LVr1>mE9QaqiaC<c1ibHT3!Z+BQ|R)Esc#(#xb{OLy%M#g=d3<%
z&ZwInCKbAw_dtR0(;~S4ELz<k`;MWoS}`X-8-jcNXj7cV`Ee(+S!<F3-?zmLlM|j2
zc$HYUe3|-mJm-Rx)$iBYyAvMIo)0AKicpHwdjGm(tF}dl<yV=;>ven0TKJw^sWV;`
zT^gu~mfOht!+B1bT!IH~+tWWB2D56h_ZWUV6*=0D{!u}EU-JiF@3%s{EY=}^dy60b
z$`tU#{$>gnYz?ftsd-{Zr^{U)&*`1`-QcsNv@u7%%s5gv$7y2?4j{B$<@|c#TA8md
z^$wjqgFOL+6D)&YkWiA<v-9?)ZQXm&$<XcY)GJLxa)B$lvb<c=wOvOw2Q3ncIVk%C
zcK0$hnFRaUaK2Q+tt$CI_LobEs49C^!E2{yR`|6ZAbXonRrFu=`j~a)kFGDeH$p*J
z1JaW26_xG{;#I*J^Lmg@6?Wwg)?Mgzl1R8nbD#5FD80oVV9{GbQ#C@0Hfj94#^=9t
zzwbMiq)I%MsIC7lAcFIbZ>Qg{Ba(bJVGgiAEC!w7kU*$0qgG{xD&|-yenfAgF<dFj
zU7(OY=RF$hKz<3Cw2T_=6+NFBxxOG}qx(qk=kikV5c`B5By=S-ZTtIexAIY>fg;Ws
zcoPTC^O<~#3*Wx8+dgCc|G!yLR26m*cNN@(9TRob4rKqvg+^GrakScXBNvBW3L26q
zrk7~@XfLKKhAN6CBoDI9*T>*<2zzuo8_OxAGFvRxc?3BeyUo9TA#pQhD`h){hF?3l
zq&elgFt9$*OMS$lCro^fE3)*0XMr$615M-ziI`YedJK)D-}<(zeYKvyw&cI+?^o~B
zfh-lVYv%L=lF&<pGY5_f$F1&q*7*Wm-cDu8M8VX(**yMp{D}m9{*F6{7^eiMq!nvu
z_rTq|inucv^Z#Hjvpw(NBFjwk<IzR82Y-9CyS&gf%~vI*rpka1wr{xi+w8Ng+|Txj
zi4&J)%oQ-UV6Ym&O03@N*Yi*pn@N}2vAyC~PXX-~3fH40R=<5FS(?9uv!UlGQQ<@M
z0NxFQEd%|F2Z18jMdJ50flv+G9K4P+k2vu__HB)H8R6;tLrnb>@%;P_**ESz$`kk)
z7oMhFhHJ;)ww4TO6J>X<bDcVl?7U!`+cq1itiLg^l%=Jc-6AS{4b>%hGy1kcy<rCO
zcF*#Ev2i3hzJYz7`X_fdidPeKd~Vt((kc#AXWLfG%pyFSq+@>GKCjtc{mn->Q?Y5k
zeqO-v$(p1r@%j_Tkel1&Z>SF{a1ejlpta{GQlCR#fa~R#6yHz7Cn+kJ3$M<G9&)=7
zST{cR{VZFTqh=d&nzw(v{5bjziu-h}yXTPo)6`(va)O0?QVUN^x<Rt30p>waZOBGl
zz_6MkklQ+Uc(3Ls@8RX#8;8TH)kI{*w6}g&pOcHA4{Zz=eTJamy%*)_&2@E0Qkkm!
z>Q#s*vWDaKv`2QHxAwe^tUACVRW;MqczU_Qb*tjGXAgNWBA>sVo5M{mK6usr?fL_`
z#u=ThWAiP}-!V$JALooogSnFbtc-hAag%=3;iuDX#eH*&VZLxWPFaAl#b{X7jPCFX
zw=ZBTAxcmBjQ)7a`#4VEV!+0n_B@n{5JFOBdun4g_v9xYkb=0!zhk}egri-&{If;(
zq-U!=987=;!l-^^Y^<5YGS94-vTCkxY?RfLrMU<VhOY|C?bq?;t1-gE@i5PORaVVt
zO^z|L3`#f+n)wwzYi8V2v^cHcadBO^Uz&1*6XOfJjgg|_*pLAm>L1OPT-{*|Cz11%
z@L3O~+nF3n+@>-0gt(X;0i68FthAdbvE+Y97z&|{M@#<~88gc#gicpwv=ydQGvGy&
z?CFfd)BBc8$zG`vkVCe(0=eZ@N7}8tyy4;DTf8xZYi0!|7t6wMs6@(MoXW&w+<lbV
z3`@YMzhYnNRK4m&H6v4wR;6jk#l^)}j6N|s=a>rBBsLjRo&@#`f0Tcc7^b`=qXb8)
zv<9Jsn<vwk&9wG_2BA4Eg`x8{IY0A+$cE<``{okqb%H7Mx~P$20loe8Ql(t>qK?8i
zQRgFOgFH1qA$7vHkeCzP2@w&I5s{IR36Up5ecHwI*U6mEAs64}v5X{nRC;3QruUsh
zxhG?92x7Q!mC3-*mNJO3hh<+}dA_Kko`q!^NUcWO9^6)dZ|VcCx?rv#^a@Sx=-5MO
zoX-QZPMPQ^xrcI2+1>T$u72Pk0+dbN>2efgOWvVirVg$-3aOi5<a>aeb?|s}jmG-N
zJeMSC)L^0m>%W#FlhGd!91xHt2(f}9RK59aTnBSrX&T?#w3JbN$=M&K)828@@9~FO
zpPNGDjkfC)LtpIO!se6?ucK1$z{+;pQ?6v;cbrx!D<g)O5w%7Zby3EB=R)R*nCAFc
zbCQTi2(#rWm~rv#3QaghdLD*30ed)FbDy4EsJNB6IDeM+PQBo#P$a9Lh8j${?KIvC
zSN1s#XV%(Yh^vPUA$IsNT?3Bw0V5+nEZ(f&-7M^UL0K!U+NRH~`NmjNlk>3&ah8X-
znT%cD#3Md(Bjcm-!<P901&yYMqfZ1;xdx9Oo}kxB0dm5pZOxA|M!sX@es!uDcw9)^
zDo)-tj_o%O+6V%Zgp`L&y*CfvDHxn4S*zWr=x~|_;j^|Ob?7%Lr03hK>(4+O;_hi~
zoSq%4)qb}pVntXWb!!=WH+iBEHBKTR1A>?t6YqGQL-&~B41&b~;SDsCvg3PH6;^;X
zi=e13J-qfqGnlVQpLISe+_%ov9DVLT03NVjo4<H>q<|J~|6Q}~q+0WwurF^%&f~H-
z+&GI=5Mnl?h`AL1iO_xJs7g)8B;$WFr2@mdD$;2!S$sm5k7KyL#I-1%YxvP``{}Ry
z(M~Rzw|GY#nLP?vuW4INQzHo)qprNL-^Aool%9_ezf=gUC*A$xbm_~6SxpvItU{EB
zP<xa+fsbVY5mE?mSUo~JW~_mGQ0E?^LMNLD<^Nq79y(=&7)-g;b~-1ckXr))mZr>3
z^km*u$08L%;vUO@;e(Fw8pqG7^Prl)Y<)MsBk(iw>TwR7unE_8De~71h$YI)6nw;%
z?~IFq1@SO&GvOnG-wNT~&m(q16b@Zuhq~GO<(7E}wI`sx^zYw+4R^~pqdANqG8~tB
z5z-^)aqAhDoOcDUGs%@FI+05iX~<~I*ao^DYewA)N8@j?xy6o3ARKTKl1Znt-lc{?
zCGX|%G5fWkrwZKX(oZ}DHi$~SLZ?X^`7_;L&5wn+&ueo^<$ZOQz;S{jd@ny&f2Jwq
zMz)4l6qC{>2vRA86Kuyq_5edCTtr9&^GAnbefD6}o+qG8u>L4JlXe1yi@WN+FK6!t
zPwjya{@}yp`r_MHk@HV@^a_h5MH{IvUz63Bzw2)3O=*{x`LeVicKl9@wITuX*>YP-
zHLJKtJE|Ig1${I7!NqTBs<8eEgzAmGdO+fVVXaj&qPAn-CP)ANJ>RPN)eDc9$jR1a
zh|}-$tt?z<ulpV+ufm8}N79owuzz4_JJw+|N*x~ct3#|@5LHBDAbpFw@U|s4Mu5ih
zNw*v9@-cki_DMTB{%p!sq{h3z1M!0@!n*QPJ$g=A-+T7qB7q9?41;Cw2iQok*B~Qx
zA7b@R5c<#3S2HOD(Uf8-4vSv6{5eGdeCP<B`-YOrLBmIJ=y<U<ha{p*5Y3bHgH;B~
z=mZOhY7E;Wbm-e^U-Tf6@5LcY-E`5LfXtb%4#A)^;F-l|sk>-<+mFh<!<s*#GXB}D
z%&)^L$U#TVkXwrNxBps9j%i9Kj%xuw1}PuGhjwfzn>&pARtmf{9rxXQjidjH<3SfZ
z`Id1*1c#7?7k+i0wBd+~5Cz6%G#@Y1hXyN|k!MJ%h;yeUaMn_BKkE7p<67mKD3OSs
zn<~9^RP#a#_xeYUooGaeIv+q2bdYaVG@)8C;`j6j&E7sCa`&$;%P+7pa*!*B?ewm>
z7jv0<>)@S@9=Ae4_%|FDF}&=R&7&?Md>bt&rG+82uEnPvLzHpgGe9<ioB?|I&$Sui
zOI{p@lY$WTYKq4JBbzex&`&c&E1Ux;8z%C>@=mV=tY?gI`Hz?yT)1~oQ_q~Z>3wwm
zLus6;n6O;bF`4xf&D4cTYXn&f%3o9x?0pF;xd&5Rjv*RiG<)seUWMpmam#7PdMsII
zJ?&C}`Q?^wxALB7eythFhb|rWztGhG$QL_+E`;CoMZ%qNYsl;U<CoS$jelokc*r%x
zabA7UE`k3GE%=`SZbxvhCD<`(Xv)P5`f6`|2Q0OTkS!||nW#ND!b;o1wLkKcrg!wP
zIX#U@d^kCd)s9QU2dNb|p$D$8&EG0fcwY<WD!D$`0Q}sGvq!|}>Q$hslg%oDUzno0
z<ou@y*b>D}d@FYaVe`hT+WjEBcq(D>kvU0jInLwpVYL%sIOX^F7$1ofsJYR1m+ZDB
zsfTRH8#5@0=w)<oq6^<kputI0bod|C=Kx$G-5G#;3LY;6))6C6Go-KGmS4HVw58p-
zF-L~Joa;)h1<iMcx9qFj^6oxF^p*}%oHtdkVD6_!NdT&wrEgeEmF&xgfq<C}4nOED
zGp8B0M{7NIs}wSF<{^faQM1m#>yW;1ucIt^A5H@#u{@7rytF;UFhM<aj`K7MrRTHZ
zkDlw@AVQ#XG;hzr_3?ePrBiuQcQjO=J(p5>TB$4anaYM^76y+_|CWny%Q_>3`T?h9
zZcz8G?;`ww8e8E>j(@FylLQ9y$S!I8X%z&D_1~hjWXUn;56AVZ=n*9>zB(}bWE3yu
z$nlg<0SIbwAqE&|nj~`J;@)^8ovxEYkNP&{D)IF~62#IibrI@RvK87j2ERyKi7O!E
zSghWggqO&0p5E8Mm8UTq0Vfr<GZF2CWT0pT6<f+Y7l?AGtTCF<ygbew3{9;~s<M+_
zD!-$9xA=ASIrFS|S%5HZ)O(6IbMaN*){~PRI;f)`IgOF|gC^$vYm+7qQDSF!G3<$m
zIq4&xb1Cw&x?uKx-228aA%uVyf+=gSI!1BJ&hW};nn(`~s}?86>&}gLxEK2A!gh{n
zq5K;2e!3R=+(eHQ(PhRuyw25LFg(d{r$CCM=sqf>u=1UZx+B0KC@0BxdiZ}jaG@c`
zRAPlHVu-4%juDBpUHUo3J6SMoCu+*CGM8cx{b1eB1=-7mw%b*O_XMSwNh)uvaVZmS
z7088^6aiag<a@&jsGLto5!1Uz>(3{%;1D(%fwe2eCa~`Q{e`>Ay8q?+WXx!zvayZU
z2QlgyuPaK2kmGF*55qaA|7nY60!+r9a)jd>f^E+hP3ts_jeS}uGY6`XB{GcIkgJ69
zpuC@LSBRr`+{ZU48A;>UmEvD(w-xv<NU2N2s}atN!DJGYkdG!VCZZT;co;F{_FkKE
z_<Xdal@@9f`#n%dw8x7n`hm;nq^Quw_FSi=pKtOP6>jAmQ#;%`+R|WWD{S=NTF_SH
z8-09$;7@KdfqJ#K{A3l%)(B7j{Nl?`AnLcMwz*#&Npge{ycf~6;#Ngr-EPuj3oZyp
z@xO$QLp<Mnt{q~Z+<9hg$rJ9ork&V$4(fK}mOs<3UX~IZ)As3fm*XGobul=7>$5T^
zsrJ-yC8cx@B&vmUe|OZR)EaV&y!JZLbJsPA<984ze)+><iIVZp<Wq=7(E!JG24v+A
zkMs0SvYeiIWHI>|nBDU0iG!SHk4Ri<@jk-Y7{{|+_PjRJ3(3T5XP1!km`)|Wr^4!W
zF9*aeTVSslxb0{<3un(i6zrS4$(nr}y6(V3Ke7r{C0apFm59>hVk|dvT{$F1!l($?
zu;mB01ecYM;%-m^3WdPO<}WMDAFlRt9zxu#Hz3ROBD|Er?kg1T3(%h*H~U$t#PJWw
zncmh(9Ze13Rh137$U}s4FN)?rIP%WQSTe*RFiDDo<LLMq^|WZk@G?RBjoTd_*LcHT
z&Crk1a3@z1@T<K6`$!K3E}-IMvrGy=<@St+yt`Y=xS1B_IHu?tPSKdEyOFS#Lu!bV
zCQlpKZ^xx`_$8c}i8<qcQ6zoap&!<?gb97HwxCcf&@AIV_mc%^fNuWJed^$>WW<+Z
zdGZHsbz?Ei)>XkOg)&ln@JAL!!1zY2!H3w)Z;O}Vq1Kape`#c8tQ4i;Sw(<hP4fYg
zp7=Em2l-vP=}61-1@li7FXfPBc>%iZ>Jc%<)OROya;OnnPlDQzct@CJ$v`g6QJaHu
zg~<KSq#&z;<ivuev;T^s$1VzU9mmv@uW}S$g?)z*T9ME-%J^viOT|A}s=wnb?^MYp
zh+Q!YuOoh5(H4wAZU);G*2Z@a;VH^LzXt8EJ1wx7veNiy;g^qbRDkv4lS`d%bhS?_
z2z5dS<*mNC4}S2rHg1xUM@pT+iY=OP9bPay4s|%0!;)N1vD91T9NUi*ROrXINn%vB
zTl~novfvs_mO|~P3h`6_LXIdC<1v}g#D6bkp|iqcH}yDweypGQ#sabAcz3FPXhtHS
z^<O>F&1I&Y7)1zy<sK5=i&fs#$qD9~9VZN*<V^XDB+%t4Pg=-(4_D@*q5^$-s8*hj
zL&+EQID2WTC6NcmYDkHt!9Kk&S=CdymRH@#<DpSL_nZST+E6!J$KFzyLO`)}p76!I
zkiyxcjj`A7G?Nh)WTz`hXT>kSZ2B$dol?VyX!xOO6zr1u+d7Pd%~%s#=?{B<=J~jh
z*b<H4tS(9^XG<KR$6*&Rk;trn-;3e%>ql0VDIHrsw(^>roHKE?YFjvtHmu=0zDeVu
zw{JT57gnwTKE=$Bi(*ujpA&zvshwWz@b0rb0vA*3*OAOW(27C?I$OT;9EOLgduMk1
zSu@FXzyoYQlR^zHcD-*dP5D2H&cq+8w+-XZnSE?C_B}&nUs9G-W~8LeQi`Zdl0-!-
zvdpoSqNpT_Oi5I>9||dsog_*k!bqX)OAKb_yz~ACXFhY5=f3Xi`d;|nGwh|nv9E!<
z6`#0gA94CUtvI2E4URrRS}-<p@dy+bCv|TG)*6~#GA7Z|WqqXvHzvR9pZua@KiE87
zO#Fmv6Y7p0Pm%&|&w3nwd~>s$2v^C+acv1`;y@QLPF(pn)oY(tyPscqDa*i-pCwb+
zlTu;dXWApV-5hj$e<pS}I-737aP3nYd(#&bwDor1&YCw8?_=T1i?_pF^tLK3<$p7J
zLX8Uhs?bbkBoMpL07FsVjlz#$@8qhwZDsZPF*!ArB!P!&v=;?+2s?NBg#Wy5Q6V|<
z)^bHTOJVs;-2Qd`*iWO?)**|DTCm)Ts*A{tc_mU7Tpk_AcqO)Cg*j%z8)x#5KIAq<
z!-WerNH2-eJJEUVt;+U!)3T9G>GO`2yKfq}Q)h2nVwUf$j7elRVVt$|%<Nl08y*p3
zxG*lggUu%8-`!E1)t26y>6A1%m_iT%Qi7Zj3j#OvxLt6baZ^}l^C|0usu#||X(f(p
z&^Cdm1LQW<w7ixIPC&OX$+EOcY>i{EVot0imql{m^M{1V=Fc<jii|$Rk8k<3Xku1%
zvGLtt>cab%w3xuX$i-{h?i(Q+>-eAVRBYws_P<|Qo<^HjmPWhGjzb~a%SW&p7+R*q
zqm*#$-{zzTe=++B_S4T4zp|bgzBe^6E3e*>Lpxl8_SEjaA~rMH8TR0LnAi+ndp+f0
zgoQ=lb1Zj3j<IbCz4w%;(J~&f@mJH~84J0PZM$Qh-N8Tm<!oatCD0OKNu$*fNBNrZ
z!=AsuNAT+&QUN%s=-1llIqQp4`tQcuFZX{Cq<xsowxn*w7Ui~U^R4;uJ+AlDb_Eh(
ziy(qasl-s$Cs`YmwTzMDc2%A5z+RT@*r*GXVzL;J+O5BnHko~)c2XS=F2<}{#Dx#C
z-n5`SVLp3jPHot7Xk;(JO?=8%K)>vY-m@!-JzBHlWkFnScjCjP_w?WcCKWCG9phca
z_o;hV?eb$@?R#WrgC)-r)mN4VH*GlO^J(H!aXfxVRqwUSK6=>W`Sj7Sy<?QQFk9U1
zy}+)DYS6*UdAagsEGTv^NVWSs=P>VA;C_=|kS;k%lPP4=$cv*7M3s43g1&XUT^L3!
zT^`690T~GQDay0q>f=1%B9r>0uj$B&dNFzV$;63Q2d(6qiP+zDsgk*+y-EUmO#h;7
zr>4+phT|PS+cTQ@S;l1RdmH6Q`q8Yf0V*-~;8QQCH~kl~%FeC~9_AMXSvHoe4)Je3
zdi@(5Un=(G9sBXxS8yT=V{*+IN$`unNl?4C9Q;#PKX|@DnU<*<Jc41oYt&^PYXNCE
z=B7ZO3(?TU);lu+vyVOfxdFmbB0A>-f_75{4Lo7zi9Vc_TPct_i%F?uT=sxH51x&D
zh;;%wvK@IBxk23MK;+=~7X$LZhaHi3B`nEdxBbMJGDTYqWr|c*3b*WxWjRD1sQqt9
zdEU6#w+WpZ3T_|B)Q7~`!5<Cq6Kfu{-g<fxCf|$wX>-P+Zh9B6n%D2;dw((J7|$lk
zaIEaf68jle`IS-IZNYchjT>$}=jd>w=Yt}-+Sx1&D-H7HvsB~Ir`e-%!(TMvU$3fd
zJ1o>ltY1K!l?{ZR@4r_pIhB)F<P*R?=-<e1d1({@wGv6EkkpQi&WKNHi=ms<o3}<O
zMQN8sQ6&q3;?2RFkz3RJ?Be@S`Q`H`f}{D$lkzEFPyKG{!X&9r(s2R@r6FTq+V5xk
zbD^1*`$m!e!I5_B15H1()?x&n#$L7bHc()^#wcn<t&i&vE@6Lr$nUo%1K1*iOo$w=
zi*`NIl63lxbQ`hXmr*jBSB<y+Bwl*^e&<U_2A`|R(8N65fb52pJGVi7&c}3BDVAm7
zuvWmQXYc7t5>2ed3z3=(M>Cb{=HW4$Y<T?}1v|G2vq@n4(%`{2nF*^Br$G0<Y>uj{
z55|`?7k2!yH>5a;eYcfokw0ThH&cA9CBzg=J1>-7=2Zs=JH4{05R4K$W!;0*KrWL&
zBO@$Xp4Qw!38dOI>}&?s?I7de3ZO7Re@^Imzrn}HuHM92olPSuSR;ncAWHVBbfoSR
zxFSP`z&&_%sxHKcUrGiZn54_Dbd{=x<+?|Se@}0jCXx^xinTt5##K8n*`Xr1kF84O
zi*h#y(`HJ>+F2N-Kov(FIN6p&Q=K5DZr|JixY(3BE{i?n*$v9=eAE1G{+kJ^mxgc3
zfCvrDOjZFP?E(8huLxTM?v0%I{1aEiDx?g<SIVL_IO;CqN$ea=pfWR<C@E94NnEBV
zHPI;5T*?2|HU5&%gFFl;vEM=+ro>)aw+*B6BY7{zL{EwPW&Zdb4y%4oo9W-@l&7fr
z?Gp<RtUQr{!_e29ElqpKa`xn740W0&e3;Z+#ZO^Kpv7muQz*ZqJ5eT{6SefM^wO#t
zC)1JpUv42DlmRaiva=FN<=4qF)UmL|l1r|nf;ZSNp6enPEHbmdGH3K$wb2f662#-m
z5B`qq^B5LUzg75$4gco(ztugHfAO$I+0r^L{fEcpk1EU?VHZ;pS7j#cBxuL{l0TjJ
zm@p_0M!1xwY8`&o)Y5+H%7Ha`TW7XVF}fTK8{=9#_&LL7{*t*{5~BQ*E+R<82!uVM
zwbe5y6*atx;+>bW$cQB7&0k7A{Uo3x&~_Y*W9*6C4JQfN2Y@~BXFbNmk~5WU_!8R;
zJioqvQf4E9bTjZ_x1Yn+LeZsoWbe1-ralr}_p=&{W6Etje?gJV33U@1p+08Gg14w~
z^s8#$>FP&Ul6gzW%8B+UY|p*%V(rBOdx`Qx_N@Y>^qAbUoajL@!RBe7v#k-A7Dnf)
zbGqo_s0)7&uTGDtgi50C=8PpX5bQHGhwSQrTviLX>r^X7y$fwQTu#9F4)zlrCSPc8
zXLL7$#yi~WCydD-9k6(VDY1C;)+T>S(fq)ds~eg>v5e&Q6pnEWQvw8O8UHO|n2t`K
z7A9Y;kP@vd#b_+^7y5-K-@rP)8sfDJGYred&^PP$Jg7YihD1d25xU1G;#2XYkQ3Yo
zXIri97c4qa#_V7oTC)%kZwyI{v;G1$KF~A{Y(F&Z@veF;y<Ad^+@J~m5|m8gdq}s$
zTi9&b_9|q2v<9^8`L19;CH_wQ6!i1tW_<GC<lc15$eW$8koRN<DzhD10u;wsQ2}|4
z9o<qg-|4-q5u*G?<%XlXK<Q&=J?$4h33^yi|J)4A{GO@Lq6{cti-Hv9wjR0vYgRs6
z+x`P|j;RA1?+Fu?0$jE2b*Os{`nN_7y*1We$-)Ud+P<Z|LA`l762Ki`$&BrOnIBN6
zxx$bd8aRqCU5>0Jnd}3*A+s8g@m580zk{%OQA{MxPb?K9(i67yXvH%ayvnxQv>ahn
zagehbcms<)A95wssDNE@D6EQngvC2^#q{=RG4PN6lGU}+PDXasq{v)5*FGFa<j8O5
zUeBx{f&(4HZ`f4uV^jTOcHU>HEfLbpkX8w_iMi0df~v#ln`78#v+cKaP<`I3I3v99
zO0}_D7@1PA`ch)po?Rw+;HCDyA`OR06{j829A%oPm)hW~_m?_IE|r*40%?sF#J&Gh
z_~7GZOl)=rhOE`)om#uK<V^48>vm5wZ$$DQuHIPAIZUD*=}49p6a0=JY;QmN`=g{b
zu)&)+zC~$JV9gxyUuINTHIjLJk49*#EZ2BT5q`gfLiFP^q8qPaO9JlWx7VP$3jA?B
z!BQOGvwI{{38c(;`W|0WYp7NSn#YKeAhYMiO3ei(Lr9Y(NiqKYn$7M$nG=5bxgqqB
zbmY<{ZHBm-sVLQ&Q5o{$0iH*?gi+)=G9c+HFMr)M`P4+ay*>l{`(Z6J1-BdP_Rig0
z$%q9{MIYXBq$gHWUici_1er+tf<{$Ox7DDErP0}6tQ{(ah!&WzHOfOMjbcgiux;Gh
zZMV;eN(`~`WQwX@Z`ce3Rx8-rUA$_MTF+M2ZPq6s`csK^7^N4JV80`hz&ib5jLTy5
z=*}%*UR0wO?VWz{R9I)=4%vmWKR^q%pOK>;_Tb&Nj(1yo^e_uwoqp}W+{=b5+JZ%N
z0x0`GrcF3paAt)ig=y=ao^E30<?p@QaxK{Ek@96;`-fHZ7f;PM=sUlulQqQ+#qeXd
z6(nIH<Udc&e)zL3bm-~4mHIC+2c@0SI@p8?bxVSvTSg#-Ztdqw#|boe`pfOJ#>3U0
zX2l`+F&~IBNZ`>n_$l3(@=%0RPXof*^5M=GnJrJjN%(CZ7S~aD4_>+91x#tdp~`oN
z%}<_?L{dvdQu`8K5GU%%BWJg|rCUOrhw5pBu}sRCt=Hh|I#Z<b^Ht*%IdBJ*KLx-h
zqmM=XrO181?e<Q=k#pJbbg{f5IXHc-w<_XX66vkUOpk{~6nGS=y1_W~A9KNCX7G$3
z2C1li`EY&%4)_4!jT<*6>q4rjs$TnfF<_(U)11I4T;SZ-tdgoIC@de#9l8w8VZTjH
z`!@~?3iL%FZ-3fhF>gBkrwamQ!7XnH`2nL@i}}exKj%;WZWt6B=;#uHI<D-R(l&UJ
zryd}$VQY#^D2RcJXyQAm$UVz0BBJ4I692(h!}M~OVkDS~n2jRqYwiC$fkO^p67~TT
z?&#W)@Ut_8-Jzx{qP+1owM(dR4T@<%w{3S8QV?eJeF#h)u>3k~zk&&gy%Lwbr2$NC
zP?1S)uxW;3aKTbD+GE#8*Px{-1Ikww>p-zS(7wJ_hej8+^{r5bbJGoMKI_{lWpB4P
zUzBW!K{IFDLhIHeaovE5X};Tr7O1R@l7SEf#=p2JlB>eg`E_U$nWRr6iU<iHFV*e8
zgFlR&GtY(w&)M>(?{Ga`^XXPACsqoFs}*>K3TMNvfh057UKAFAou(;T(ud_bJS9I3
zM|dR9g&Ozt^}WdaD|h^`Byt0(be|kZ0tm?-{M|MiOrY&W4s(W+_k+B!-rnZcslx9;
z%eU%T&oUSrZeP}aaQUr?-Np$y<z0SDb){yv!^G{^mE&D>g3<-M$i$?bto9Q##E;my
zS@VsvE}Uz$EI^EbQ)TQVO$t|_rV&UCuC}AcR@c*Sp+ggyF{t0gp@ok}cu)MVu5|yW
z$S^Yim*x|V$D?;c&324*eD0Q~@u<tImN$<-bww3J*;KdkzxD+1@xX?eUC)4Fg_S~~
zwD#t0UhRo}f3iUjuk>A2{il^V6a9n~Oq-=Scjt&g(`N_94WqR!lt2x6i-^kf<vuyk
z4>)=dGAdBO${@q~KyWcw{^!eQaF@z|7`8IdCj4eHeb@Px=7YK#&+_p11K9lx2HM%>
zsmbr2WwAlrT2SpJ0!n5*zY@c;=<Jsy4oOAWJ^psp%yPf@k<_iVfesbcW2OWKcMosy
zJTy~%<v<}NM{H)TBzEs6{JX!QzS<oL(s9Gt^EUcNyYrH3tjD{l-}=8zXwI>|LrE=n
zE9v*~Iul#kk5{}e=EVw#UkeNL$Vd;23Ph$w=l0)TBbMI%n(+{ukbslBhoB!|dJ}5v
zI5eoTdf*Z2t|`cT*_Nr!leTOPR6Y5BN`I1CZX|6hI4WnUF2X4ce==F!g~O7>JHFYm
zCn$^U+%d<TDvIz^%5l(%`*h!(R`3Njt}{UxB5u6RrpQ}z^<2)+4UPZ$BmM*%N<8py
zND>*7XNh-LmOQ43Hz$@4cnx5EUBD5s;fWiutbzHp#x`<8tb<$0J7I02lf;qp+ihv)
zlEg;L&Puh7>z2xD)rMJ#d4hc9Xu1^YF31uPh46nKLl|KO0uBx-D+HR=FWzE>K&ShQ
zrT4X*O;X!@Hpr#!^Q*dI(AM;=eDeookJ~r4`Vl?ITQy3(khy!0c{OWVs##O{FGGcE
z0mVlrF_OlNoVqWn^_yO2Se+E=`bd%5D;%TNeOKt_3Y`l-uvsbIu;rS)SD#}$6r6`?
z75V?I#oUBajb<Wv@!f;0mj;|>`JcRhqh<6e{&M$&wEgqO=+LSS8oo5yD)y-P6J`GW
zF2qK#X*QsVRSZB4`V^_&Zb69H#(x~9BTnTK*Cdr78amhHPU|z%{y?`j^+?B}6N}D0
ze@fCt(0Yz%3tD-M7tr^c_5S57eGewd9YS!lgPP#G^}EiCSSLk995-WAXhR{d{=DM-
z8_c8!WmBBeFKPd++Zmos^Lynn{1AFrr~IArUeUbnE-exIy6-<u>Wc5G?0)2oF4skZ
zyPD`Zcw@9XfW-<)y%Mm>>_xW^{Rx2jt|NyDj5TaFdcSk)#KQPP7LlFUe)}aM(8TG-
z4h&-x^5H}A2`cx}QHCUcG=^nrFLeW5pNKx5&WS}I>Y%a${mxloV{YjVpaU>uA@H<&
zz{3!n64B`as;q-}+8UX~KN`r@Pn!c(wmUJZw<zs8WnyOa?$;?Cr<J08^sVNX3e{t6
zHP8#08Icm0UmMWA^zmhXzhgFhD{C}2|050*!ef#&ceL503g56*lS{fph|m{x!m)qD
z@r^n?_c2=rlr7DcgN6oQa{_*%ZVfCtPn0*P!|OH^)GXh-9#DyGc88taA(Lzy#vv~|
zVX6d57UTE;L-<<A2i+ZT*abtzKUao%39;&9S6XxukCJ*o<F4_#eV0V5ETB|7sPI2(
zvl<%6Yc-$+R~F1{nejAP$M!dXOor4((4L{eC$s47XqE<KCY4l&{FHMi3K!#)csD;z
zEK29iDmwAhmJIoc6};auEHgnCj%~gN<K&nDVnhM<vJ&Q@4D2rCg8i!Qzx!cuiwjOO
zUuVIk@93yqTrRnH(_8&#n-FU)Dea7*t{|4JC7Z<kqr+q!O1$&2rA9@zE<LMqV&uH~
zi9(Mv*6n3q`XEhtlVSjo_JjvWYQoRw2K)4DMESS%A~Uuwucr~IJE9999lV?QK6vLK
zIeDi2qd3bRi17@0eM6qZp0`n19(m>kH}SbE5Yo-=ulbrrcZ(H={&FaOl8CC@VtIdO
z+YVhBlOi43RQiS`>ZCeOyw2^YWE_z{a?lEUL@|WpBGUYBn@IDgpC(Dr+L*~S@f+sm
zYBSOi!C`^>bz~eQZc{SHE5{On8&niEvgQI>SgsWm@nWgkHr4q4?ghUKz)%G9h}MBC
zR9MehIWURMM$j_d*R0xMv?mX}l9P<SR=&+T3@o9+4AS0x;OSMve*KTTL7o_c)n;!F
zeR?m(esYKxBEnRadHKf53Tf(3dA~_4jUi#Fap%3{?=|TO*T<x&?$Ux!S8zA5*0HKF
zo@?>H5;rWdQTw*}Q>AM+1y@{jR!03OPX6$5j8n1_tl_Y#GxA`gph5XDrkSXTtu)yT
zi!cvokOR#zYQ4B%9B=5<yXm1p>(!iA)=N}Z;Hn>iWNJel+{7=+;3byHt7+@TxwsyG
z(?nu;Lz<I+o(WT+(CFmt<jt3KR)aon*DWlk;$urCc5M5TV(W9<H35?xQp77C@xBza
zRN{nO(ZhSEd;D3t)3DVJXN(b~5Ri}H_$xI<AVebP^4DS*GY|I4IX%?`<}q&=lsFBH
zDWS&W__((OSAjQ5aeS_cp7s29isLw&*@hAZW~#fs{9#S5Ynq+D%~Ro(;Ap%3!Pjl7
zh)y=$_cibf*20mQXHJ5z#Jv+XjD~U2p;wz)E$frukNQ8K<@|_VPmUv&?Tgr|X%D@X
z?MUBiRB%9t^J}I{H#&;$Z92PDZon#Ce;;dp`<N*|#2>N4;<OMA1z7ezu&*0r1xq>M
zY)t-v7S)Lsb4>KkDxc`;`vCWo)mKN4t}gkvlUwMDAv40iVGwsraG_>x%GS6)kQae*
z&ht5*b^tEO#s~T$Cony7#i{HMWX`AD*p+?PQ2jy@=l1cs+47+9jBSuI@ezH+gophC
z*I}I_<<0BwNfurx)XDtv-)8&Y@aXA&x)x9V+dsoVZ&-E*i04elS9vz5-b6Pa5*|oh
zF9W~Gdg7j~CYsO}S@<k=%LO&x&0kkg6TQJV;a!D9mJEoQVJZ5eU4Qd<h2^S@T9yt(
zau0td3+|lNRI12|><u-?%dk3ZUQrG~V@3?^e2}}nAgla@cDizhp}MK~pF3W(KP(^Z
zdd$F3qXC18jICJR$A~obeRtIn|KKyf%zG2|d`k8=B~f$@(c9s6qPge7U`SU5{^JhD
zUjq1t9v8T}>|^0q56teVqT<;!c3dWG6uD>5FHx^05U4h$uG-7+8bQ<)XbOVp*+CIB
zkMFvHt35~wnjEaDzUF5F<>ttNf*bHzYU2ly`tyB<Fn4PyGgi6J7lBS&U}F4^A2vE^
zoWCYZl*Fb^1(^T&V8v!5PtTkK@ZL<%-#3vnTkf<4tjS=!q0Pnawee!D{zh4a52cVi
z$VQ?l?f{&vMg8ZDXJ2LEB5t6aop+xD4wxf?i)_O`qQ%~e(1a8RY6Yv2qJu`fK7IsU
zK_H2qFh?B|QL|Tk*Vy@iLm2j_f3YGk6XW#AM@H@&W!Vrc_ugzXW%tgl-NgL)3evCm
z8}cgrhTznL{P`m?ct^2gO3KIeupi3zXcm%=9(Kj`a~;hX6@7+-5bwAD+AxnTnMb)H
znO%7wWfvRf-31R{C4g@gIN!80a0~XxF5n&3J%lE2-3}$;nhy)>1U-DkpA}wPU4<`7
zF|0YOBeiOYVYh5&f(W30f$Lc^$7)^Pusa^Lav@5CY;Zwxsvdp&K$u`a8o&nPyOMgw
z0L|&OKzeH*@s{W6JE?MGm+M9xcGEko^4eqyBCCE<mNO{PQT<4aaBuSmP*50pZ(v8W
z`I*q6$q@A?ncIPAiY!vB2sMk+zx<Max?FG&JuqV|$(>buDH-QS+qCINtTMD`(G&z=
zK3Wh+F{r4#K-CVs;9g%M*3w<k749inhRf1Vx-obvBh5};N)xYr7-Y1u*aJ{ICyi)T
zOligyXxxX(dSSQnMy#mw<y#rrBk*6a>*0!PHPK>JZHs;H*KxOU6t<m?q`~VY;b0@e
zuCgDZn$YU2fU(fS;(&~r`QRlqn0}!7qMGjlRveaUKs&$a?g5{Y#Ci-s5GLq%HZ33T
zvI>t=(lNMNbcbVI_1TQ&J4;*1|IW`Hl!SZHJK`{vM@EZREch&#?hmoe+Y`~xr8ve;
zZZZKpCr(F`8EtDYaid?RFs6o1VW)NB@CAKCr^>%wkP9~HbgCD)yd$^8BDQXE=q@nY
z2yG<HNnekUn-S5DqU-YHi^M!%+W~h1Nef>1*VC&Z8+d0QkezF<e^hcH1(T}6jvI|m
zFzhIv7Pofgwm+*Kv|6yiG1#adSy<)itHZnglO>d<f<MJ?T<Dxp%N7Gd+5GF88SBn-
zP-+Ro39DlZ4ib|m*E3!{x)vd|^5)f{Jx<-A*Mg(~FD9(~jq4~C#Yjuehsr^5j$+N&
z4Rr1`q;J?8h@KG-OnU%INn&QO&P31?EVy$l8kO<fr^YZQ3SsQ=hoZXdIMIr<Y1IfW
zn^QRBm_>KuCRP&op8Ft%1bdjdIQVlmvju$@dd%!+WUiDSh}jMkQ0Hdsvo#6moda&U
za_}LH<$l^e5T$$J!3}J%Ghh3V9ZeU$Mf_}M>9FpD6-k%<Ik8LEc{DY*9f|@3Ke52@
zr9vYrWB%{G>a|Y6doafsJXbRE_vLR)QL)`IxTvjCKcc3MlFZ%4cl?Zs9jkw|!3$Fd
zIta;`u{pJ0&4pl;g2MHx$X=Nw@fg-+;SxZ|44j6O)T;NK;k7>aBqMy<t9QTlk^%>p
zSBC~`SzBS0agKez>V;_iH$9WrAPL(GX#r#CrK<mbj=!w$T?pBz_h9v%E;Yy_0W)(K
zd;`y=d&X?mNd`4<;ms!-unnsIyc7-Y_mzkP1rM$9ahkMMLT%2(Z@L@)ms{kl2lzsy
zUI)L>C*IX07F-n^;d~mdr5_YFq0mktJD%f?)F~np(TwU9`60R(TBAS)H(4pDwuvAM
z%ZwbU4*qnI*FBH!?%MPF{PNC$-<NN4m;T`4shL@S&K+yCO&OlL%sc=wMcGnm;WRVS
zvr}iD!JDF4kf0?u=cBEW^&*Z~A7+^J2e%%tW6`6#ev_Ccaj1RC6mg=$FQKU_%JD<z
zMU{qL4H^$vL4R~&gjtA8ik!#%2rBwm){@it3-!1}-1{(mvV~i{QyebYpojj;>ILo+
zq`x*55<+aA0{U4ctZE%|z@z*xzLqY+3hYRfg%bqp1ODHLp&;-WEz{#YT4rVcyZ}CZ
z%+j$OrtAR=o7Y>!r4Cw9W*_6qz1o0ZjIg*u25WkN7C9NY20LOTTYv9-MbL3q5qY(p
z_s&TbV0(+5;KC0E_2{POGMvFBXGD8frL-oTIM|wd2%!ky3d#Xu!19Q8-H+=|j6>G`
zzXmGJwefi?IUtt^OTjy2Aj2mF`*XqtD&r6OB7y%?cEDG}Nf`=W=Uo=JirjTvpu($B
zpJdRZndXQ1p~Wl>7}`c3S+1@Eaw2H{yh@E{1G*as4oHMQlLK$-n(`xV{bo_o5v#xq
zX%OXEwaHP(ZS!tqyZMqw%yjUU3mt`>@Oi1-m<#(&O_;hsMMiggvsY%D&8!b|O-E{6
z0GEB8jO46O*0rri4_+K=!<z045G$f_s*7<~EAI2#>avET)0Cfmw=EKZ55}@4Za7tz
zo2ubwWI!cowZkVI5Weg0$iuTD_PeT*i&j~?ztgFR@pkCcUU9Gw?(fgu;X^7e{#b}@
zvj^YT_9gJ63k1gb`qg9q;<>0=Xm{_UZ})ecoHt3XkL;aFx-PvcszYuGOK43P_NONH
zWKkIf8~%EKRal#pL}$oEpg-O(ZCahU_zCZsTK=W^V#f2c`#mepb@%#Le|x-1h=WVh
z1&dE>t98Ib9(^4zc5k9Rz?1=+EW_!j6#D7{1^xkljFw^tSVi`$*D4y=_=U>~MxAGx
zcJ4=lFBK@Vp-@D6E0Ym~EAZHN7uZ&5EVg_DE2nFF7~DV8Ngz3>Vos!7@uSbh2av<#
zXH(%^$LD494g9*Fo|&_TS;2$%zk24idS}lG9FDI|I~)lWiKo8KW8Cu+)3ND>Mckks
zLnMa22-bJIa)=9RDjkm3U1VHljGr1(P2paG)IB8aAR%%;#Uks0U}EiH<GAMokU?e-
zb<|bEtjhdO^wm`(Q@&>udR2_)(G*eNLisM7TqwFAj|>&@)Dlna^8g8(ukP>Bmkicp
zehROhJ$cI~LD_Xf3Rp*E3u?=Q&P<Uayd-H_j8~$Ww=Xl^x=Q)U6id8QyoTbR=lf4r
z?f6?Y%sLTN%`0|UiTLktm+@(474guo><7f<?H97QZ@U`#SA~}U4F>#jGQ$V1EG6!p
zXI;l#(F9lHL@yaS=>tnj)SO*Eu{HPs<aG&3kH0|`tetW68NAxf8aWH*$ehO(t94}X
z22BQWg(&t0y7H6jNtwVhu3RlbGz{DU$McE_x#Qg6zTYA}g!7EtV=8Ec9HPO_IfWr)
zIW=^yUw_^n*D9Lz)>3PwWsT?;F{d=9>=UWKqE>qrA?=uRK0~Z1-A}TXmtjv~=cn{$
zqVdq<j<WZuO?3)#rUq3{Hwd#05o^<qz7~T|EO$KIqhySDOC8<9e4<vi@^wv-66B)F
z=m2_){!$zjW=?tZ^=<#mfg2_}qZQ0Pgg?EnFO$6`9I)pL5|uC=GY`0#|1^Y5`sYKQ
zJJCeHi3QIERAU`TCmCHwPhL~|3<C9m_$utn{r#_FG$<IW!G0AUSvTk_op;L9qcwBg
zFX1Wh+w*-jKd4o=F20iJ@som%%*xtacH({PqpZkA7P?Xzvy}BDB<jANxhk%VF~ah~
zGA*zG{Vmlm9s2%ZXwiKz@yA0mJ9?W{r3UY;1tYJslQv_n1hM7EjMhNWa_~c*>sZ+u
zdvfid&PywHF}~i0Hc9%m9Mz-)-1*gQWdYYlHP9fTZ2>YVo@JdL_Pmd7BM6%~gaHM!
z2m<W`OY%g7hQQ*7G<=YVw#JKIcBZ=oIEw{_T<kp)F{TJH6p`{TZ~y%<r~67GVuASI
z_aq0UY=uYG#@$frb|e|opaZ;w@r{=BQS8?gstLRgYM%;F57aNYWBg!2_KB<hGO_g?
zHzpvB&Pp3>uKx(V`K4hp4GryMnqqefi^NRqz>fEVI;^nHQMeHQ6lk4@VXR`txz#_7
z7#|*@%kCl4KVR3qp*wJMj?t%<*RN<h$*VlX(KL8Mrs2^)P-glDp1c~`6hEuhrQCsq
z1tM(8)ji#!ug-eG1Dp{xtb1=ojAzv|eRa<OZP*FNb05ME*8_2H*u>MKtp4pwikoX$
zJw0tddr(BI#z6)UTLg{$HJ_6Y;kFWb!mb9ig724x*xpld;R(~U^x}k8^z^yADK~HI
zozP&^D>34n!YK+ws7nc4f&Rm>_2AXFE80VpYVd>c7`R|!oSE-Mk{rg(*)zCz`4DXu
zU2NON^Ek)a4RnNxsi)mZbmrGzJ;>L^f3}i!ez=+rDa7&F4LfnsT6OqjJm=|jZug%j
z*%r+5msdf_xmU9Bn6LS>GbR4b;9rPZ)jgjNMXyw^FW=0~!<Ea-gk~2yNVe&DS;wWs
z6#Ti~29{pS0t_d+T${(c_+vhkvgSjdmi*6a=l=w5R`h_}&LO2_wgb0D!Q>K<8Y3R-
z=tizANKw}V>ys_uB>}kyhY0&Mt_efQp%P;$#^02{%8CzwCx6@&&WK8atTo43)=XaI
z7-iOR$tuwqxJ=Uo#3~3@Lk%J7kK$wYLR)cZO|>>dV%9VNb4F3fE7^O{^Sbq}n4$5v
z+XxDOvuP*AHcok}3%YdA8)84b)8r(Ud<c~DIeMS+P6J$S7&rEm^My0l40>R6Qu1tT
zLuWTK;?Ot|+MQ+_b#v&<4JGzrd~=byuLksHKzPCX;HL#(yFHBUCBxg)sh|y7w{ViJ
zISLMk(85kXoi91T&BqHZw1-!_4UzBm+UQsL?K}!iu=+Vuft_+devSd^GX?91|NmFS
zR8*@`4P-#P=C)MArIj&%8NsFR&pp%X4WU4F#s)-d1JIm&2K6Y-yo)f<gzd3HU+VC}
zf(x(h%(i?RLx33Ou2vsU<L5{rce+H6e5LK$ba7TKa}P$RNehHO_V@-aLnaB|oGP&V
zOeUTAp1ju|Caw~=CzByJDzeBtpBY|*P-FOTxkzeT{RVvL?Sgcw;4t7m&kR=wc3F4o
zh1TjLcGuA>`QMzlg`?l@p>rus8oZ0Y+f7OLPk{^@b{`(RfXyQgeERnwpTtyp0Je!E
zVja$}Z!8<|zNusPp8A<w#00j$Ti&ikaJ@55dYjsci88V$>KT-m#y*uOa0FjPEGsgg
z^opMM({uQC&#A^q?717eI0-YDry9Uzs!j|LLPRRPi3SOvT;RI+7Yx~+in`JjVv+<-
z{}%aJ3DO~h6L9k7XXkfw>1DI+qt^Q{Ceb~Gb@U<Dnp&30B~JSgT?SZTee(>_evR<1
zMwZik%_8A_)TI^Rwi~)z()*PX=Lm$MR;KkP*Y7P%!jDZ|qtJrx(6GITlM?65nuz&P
z3pws1H;f4mu|j;{(8DA#GIQrQu!Rt(bnoh~f`<227f7^oYEIW#trF>tAU8l>kPr`F
z1059KOjq!3)af;p1kL>tdDvlwl$PS+yYRujvY?<>bcXJ%);m!d@RZ)b0>Wmt2?G-P
z1T??EfSB3dx7@@W^wpk!!ZXQ_pC)><0qErN2OPKzYJjEe7KNyjHwRQDhFP|Q)GITr
z=VXqU(aoBJLkFV6UqTLB@YLNvpUnN^xEu3^JKR)#sO@#Z%-=Is(^AOianU~e{$l5d
zg<olvvP*@d{!*|6T0|^rz`?H&<reXn>H+*SC5{9IV`U3#;y&o{)b6fNox@*y1x%b%
z->B4>u7ljx0nM(<`jc;v>Mo!uL93)w0YTs`QO`|m7HSdeu%vHfRIhPoWpw$p81EnO
z-yFD1vPs`5iFAL{bG-O+k!UyiVe=OGn_xh9!dF_;2Fe3*&?g^hD<dn#3;zmt+_JF+
z-P>?IyBL3`o=jWQXWr{_BkB2bBWEs@O$dKP8EaKOF4H<>jypS?BYDc6&f4rQ90vg>
z9(*@2lwD`>bsy)}**r)OkC-v)tEE?4^Ux<^B<}T1@X>doKlR~+jrf6^8^(i8RZ9;;
zCIUrXDVF_Cpu(dNqL+av5Ur(4B44ij@VX~)yh~OUZ3FBZQ_lZou-a#-R@TQP(Q!#e
z*<nS#Pq8qL@_PPGl~mXOQ+cB^F-eKDRPsblbhu^W;~R418=5}&1R0QvmRmDn0X1uZ
z>dpdqleFBRmrIRbA&-{Hx-WN{fZB;;%EAm_&}{Frw+^OY8~C0VF01hEU+tN#HWwMp
zzaCEa;Jsjn8U7OWGw}zVkx3mUZBJo7!P(nMU>XZR3>oMHW5FveWXQ=IcrRamvA}A^
zWZcdaboa)fD$0viQC23b=H(-Y`KNNMH~rL}ovvR*Iu|1ktT|F-8(fB?`U$tkuN7VL
zk2-w46uF6}@B(5QG68CE8`#q4gs%ZPDPSO^-jp8#=GY%cWdZ8wsJ^{U+y5exxK?(#
zUh_em9xaO7wZnj$`K~W?GJMKrViWjJH2w2!<nV7YLEffI&m;&sEz^?<RTwhfQ%H(n
zfPf(bC5_{IYu@kTXnBrfKVv5Rc&iwsmYx>5^v{+{8K!FrEv(OZiBhyC5!#0$kJnRj
z2T?^dGJN>aS>A+Pbv&9Y#iSL)<tLzKWVW&?5+jZ&%@3qh#zUTxc@~;j5;-uo@<!Hj
zQZU<iPvrc1Y2@`m!q^qpKGtEny>e<*k|p0*he3=$TN)q8r^RUqgY(tX{SIK-VSu${
zUE=b??YI<GvRON_cx4?`4AML=0mLIk@i_!W7Q>5In1F+CL6>z561AgjF>GC07k+PL
zC8M=!AH{qU2Nc;Sbm6L4*6VT6Z2ipw%3j{IlhAcU*9XbqA-M2#jl88GLv+^jmK)~<
zF|u!nvW2h4{l_}L<IG8(K1Lz`C7_9>7VSxTyT+yNMD1L9QJ1KR7;M{;CE_i$2J6ze
z4f2&jG}*crU}8`#i-5*|jhE*V1*fy!R8@K6FLJw|bKlSAYCS6TiPXZsyUJ3A!Xo~)
z$x~i^6&CgBY=F<~mxnsTWZyBe5d3+$REek#O~zM~qB$&b5Z<yEBcJ=2W{jOvak}!y
zoRcMl-Uj->cHytS2mFX=nG>C7<pQzm8F9Q!eW8QL>2?0Knf6VmHg63LFl_(6#vsm=
z_>&tjR(A`H9G7e!sT*%V|B=BVk;~r$z9?_RpqJvjffCt;n>j2Oc=BF>$XaarcM&$r
za24iCO2K!)qr@pap7KoV_5a=yu=d=#c(axK?#7VWL+hLq)`3)!tE^%LfxMb0E1sMF
zC4zSlDB(&ckOc*kMNnqpR244+6C)RoT7Z+J7`w<F?gTM<HoR0*c3h0sHsq;<F*L);
znjwD<_6c!^7@A_oG`S@44pQv^2v?TTADrs^1Mmqw49*Vv^<yI=mgUcN9HzS+LQ5hl
ztAx?9ZWWgUUaCBQ%-EZ6Ob{-;MFxs~b&citqYz6Y{(wR1$61|`f0qbiCTSU7WcCX`
zko8S|`pzaK!v#{zStE!Qak~$B&#)x_c|9>Y7kbb<!<bHYw};T7N%zpsx5c@tMUfSH
zdJXq|HGe4NxtwnfYfCUocp=#+kwUUj^?!EWY(zbYsy5-r<zHMHPY?g}9(mt0RWq&m
z_59m!hgV-OexLsDJ8Xd_?4Wa@XK92_o6a#qZa|CQB`s||YHp@uUFv`viQ~myk4;iS
zc2(Tm2a<5Y4uA-|Hq0K7<Vb}k!cQ#+yx0xGC&5RzpdW&SAz>O_9b*4vX@LYx`B(o?
zV{syGG-6@8P2kJx6CJ1?>R%ijE3~@+7BnY)=3f5VBMCMNZtQIKvfBU1-s&bsg}@-s
zknJR|sq<J|b#J&@3Y(X=ixfe3P@|p(ve+YGOMcw4jy(R6SFwdgE<*(azlCmj+3Aon
zQ-=A0qxz7E3^#Z&bC7jlKj&u?tI&q^_BitcbV1(9$d&oX=(W6zQt-{--32(4`;2qM
zjfL9N-dm|ggr_P@LLIpj`=K(N;qg3j0-0yZY~K%VVykpZC^aZ`5i7-O`la^m#HeQ<
z1n&TSM0giWy%5=tlW~)Zs}O`(*y~%{l%LzmEZt1|LZJ2S{B{)eXuO}f1N7JIu7#KH
z`GBWzk2}&`c)}DDIxpXIYimffm6!D}4fNwiN^0JFke*%Ri1z(k^y8jle@o9Y9+y#~
z$!qKR&HcFMkx(A|7)NEIvrVY=;|%`r#KdqD{Tn(pOgZfnxs;yG{ECMK_1AsL4^O(z
zc(piS_iM8!aMHF;p{wzRCV7;n*6jVC7on>W43AcrezZph37#m0*7Jsrhlcz1uylSQ
zWY7#2j^e352gw+t!fffJ<H{y;?;-13tP<sCm)9tBn%sE}4#e%mNb_N|nDY1<fBY=Y
z<i{OQYl6JR-Fjq%Pa-&p+Xz*S1I<8S--@%v1b3z?k~^}g9M5=SKdD)Utrsb8yj3c-
zZ?n@9%kZkg%Nwv?eCGwe^2}=c%UrF<HzX~_Z~ox1Un<ikB6(yme38L=%!4VPWs6)c
zD8R1KhlFM`0)Iv?1u2)yZH|XZgy42XCKk$-LAbq>SQ&AXUpwF}<MVClo5h6L=!G*7
zQdb=ZHj5&sgL;VyMFhmcT~PK&1XUJ$XMTlPrm+Z~?+L^TLbsfuS62Sm2KqDF>polp
z`RBGuQV)of^RJ5P!Z{WuBcXJglk^?rK->2q73;QzD*`HL*^(o-S3Elo7j}&g`6pwf
zOp!=!J+F|4lPPB%k63QG8pPAU%?SFPtu~vKIB(w@c~&Z^F*5!cxLGRi(f|%l5NeNs
zO69R<?u4BkyJdZ&#B6HB<HQ<Ewurhlubaf~f1YDb?3pLQGxRqYgbMExma+bS7T(3!
z2W=6fT?6U`*!WNf(wp@0%-QKWdKZ7tDse=hd86o<V9Dp=pEBh|b19^A3di1#cnJ|R
z8fnNISCR7A^Yqv9VPB4Zd4B#6u2h8S^*J%obuEZ`x$X2(wb+AIFN5s$+&a4bZyx$`
zI==h{yB~)bpOylllH{Zf`EbwcoQKe!H&mux<d}%lP^sD+{15wPGjy|o|MWF>bHXBY
zjywCy0Q!-t0*;P!cKPY4&@u!kqS4JWJSIP2ip2z7_@2sd6^Or?M01-(YX7*x=kafX
zhk}3Y<8RG}2R&6s2$TZBbY2bm`q*DHk2=6VCC$*mJQv-CH|jccp;L;p8y-n`kHliv
zjX7^&eNhMQQGWoOTg%h04xe4Awgs0_x7>9pz+ur5gTB4$SBJTVk+O%+{I`O!0h*vV
zHhHPq44*B+5OQTZD&uiUx)-Dvzajkz5siO{UP$BxLE;8*@-L<+3mg_Rb|Fy(*DY>4
z=wgBarsx>xY+QS$;)qQsnv5jYRmlm0!q>rfWWgZ}_qgy#z!-^)!KQa!lJG>IHzjso
z&aa`@J?~H0OAHl(w{JhSm3Lf`l-wgP`sT;PSsMJOgv8$LRv|`XNqS;vPy!5;+=o2P
zkdm+~Su!9ks?Ze#c#=^Go@3qhMn5G?Qi_K5tZQNDm#0(q@!mGb+jDFeZlPSKa@4#D
zQ{4#H9H*b!DUrZ2I$&5->j45mk^3f_L%Ga!h6AwNi#rXDZ2WaKYUE8t)GCfCi<Hj7
zqmm))nr)sx1T%Z_g8fk7Ou%JfgtTBiNx^KNUdNArch>$6k?3t>!yDd>er-RxJk1$&
z1^L|f(e3~#I?4@NC)yD#4&zKbFK324(``<~gpoVEF~OxvEBx>!LUosx82&)?(9=jX
zMY>;{+lymPv7l-dN35m+&T_fh{apc7lD$W)FB-<(hx5tEm*dv`UW_U1(@2I2f#%2@
z5WlSlu0p}IB5yD76`cGEK4Q~((Gu*J!4QP?W*+@sbq8>N8WE157lTNQ{Xi3Hyw!NZ
z9z@4O(l++k&drxs)&Yf!P|;wgOyF5HbNRT_@CZpwMXYB@FxlR1T}2Nn2>wEFUu_zu
zKkrN}>T>twHFaflzN%p|ey=PW6etK=c<*hFI_pagRN(w*#pdo8vSr^2^vE+Y`8KZD
z!-oNmje{>?-$_6{IC#g4hU(AI3r!#jXAVCV39CI|QBC_3tI3DkPr}0#?VYQ-v+X!q
z2IHF~uF#J$scr%saA^v#TujO>3+lkKwv5D#U!VdO7DJpRQ=%f3lT-;;b^{L;h%)dt
zi*XZT3>Csyf_yMcq^)zi@n<l33Y9Dq3ero}`j|_)aJ!BjNbRE+>8`@MjN#0D$bB6l
zaAwfTbKYsjvknSM60l@)tWRJk-rnjs#@>iCSs(CjJJ^7HJOx-A-AIT~H!|7>j^9r#
z!#S=yCd-i(G7<pQE+g9awKKyM)BIiN&=uTq`+M_HoSUC+lxPoSE`2-gC;cdZF~~)n
zfsD6>jw5!W^D4Ddl(`P$1SKzjDV*a`JR+Z}TV{hNaflD?@PAm_Jss~#G3Unchj4-G
zrMM+pmcgNWbHp1U`Dn-=BCT8o$Q<1oS5yJ&z@+(Zz=8X&$e<Z=|47#oX})+vUlozT
zO-t3E1@8h&R25Zk7sJa}pP3;Eq|!jixSq@RT(y;!uU@VX*er%^ya*qM8;j4*1683~
zEQ|2@Yc-+AMfYTnHpnMhb3L6Q6)uMJm5w_UkK%BFoRhMKg7Jdl+>kFCl3153r{E>E
zmoH`u4fcz?Q`Tv}wc>^aUwr~KKtiOcqQ5AR-;yRcsCROflo!YXhB!+NjAd;GW7X1q
zECKWTmU1(JFhc?zeug%m`?c$Xn;{0~BPP>X%*ltjQE65TzJs1qN(#kfv>>!+u;eL7
zN7h7RJyQgYyckEoIHDWoPJCgVjpg-Robn;Ovv^=zQsLUMiKy(@?G*D36I{ZOULAOs
zoA^x*8wZWlHJ;sUF3u3^P{BZfHxt|OGMH18ClSgf(B3I@Bc8n$81sVW!3!C<6+|$P
zpWZ=)$f9DgXU@A4EF;h-`=j1-P7ei$M&g@fO)`bZdUlU!k>gtEts3b-q!?;y1?HM$
z&<8EzGFqS%@(z^I(Uj8_2JOdoRF!?U+98RI-f5_I1}dZ1Rf<YA5eM=!LW+0?u(LXI
z6MQ^Ebpk%vea=p=`KDu7IbfI!Y+BcI17;r>9Qw+i&L(6iVjlShgychZqBLmlzUzZ)
zz5k5FKaOxHkweTeZ+iyA(47%j3b8FSrA)Qe!$A&w05iADRCt3y*BKzOD3o;A`@ac?
zFf!*1DP;93*OkWqMSyOcf4Kp?Haj2N3Uu!RHxZH|hws2evybdeWR=OneLy4%-Ex-j
z#FB=s0;vR@HM`6>ai&6eJc;Kb7zJR0abDj|VOz67;Nu{SrV8N;uBcR3Xu;n4XjIwJ
zRewLm02fCfq_5eoTVze7ePh%@>W!P(*xt1s_z4rPaUJpfopCjL_6d2O=?ZqfsFFV>
z2x`SDanp^r1mqte4lO^IWyqV){<KzGN<8Z2Ytofk)-!sP)pssJ=xsPCw(u6}Ez+A9
ze_(7;v=X0ycB!H<xInx=<a9Tz;;-E`Xv#BFxCY?dvxVedkd6HGK@o5(>>AGA(eG%a
zd1ig{bun7#wgU*N@S9atw3_(g9HDj_$S2|@NU^KxnAF{ou;9y`e4>|G(k|FKMnM0F
z9sr2H&1dnC8!;zC#&pVFi?AO=8E)k*t$rD+loGPTUOur$%GceIBZbgvG2L5F8R#U{
zFj6HNZU3E<<HIYh7q4E=>@{I`$!&ldtL4BCBcgG}p}C7|TGn!6L(2k5Oq1+zcq;SV
z^YqG#?;V4?3z1_34(Z1Ae!!f3I4?yC=~%*YJR>TW|4l#PuDp9_D5q~h?7(ASD-J8b
z{_YPQjEOt*u9vFMiV_&6uMy-#kdpTFxcSN=r#0|Nd95Z7TpvZD$>W}(QL!EEvdPAl
zZPRM|txRmYko}VVHh*I8MsCN*`bi)QnIv!q^MS(;AkjX_hJ~+1Y8*dM5DL_|BCu$n
zYeo`nF+QoJ4KY+HDkZ^!1co5-SwJ5(zKOGZ5RAA7;cWKMUHm$pqgFgW>+e@DDSN4r
zIJ;xVEH9Upn^(&YcxjtF2kS8BuVdHUlrVRN#%8>V4r6r<m}A&Q+p!ZVEYlDLqf7cG
z>93wp5h<-*+;B&8EyyzoEPi_q=znyOgP?EfPxO(!1ZJpMQrIV;z*)UV(beIk7PFQ!
zj<zLXy|-GP96i06x{O)#<r+9giqVSH1iOoLWb~t+am9J3*XrDYo~n&m-@>R~bC2TL
zHHa}xfpXQq^mRay@T+2tIQke-TeDv+1~oGdQ%c%hvp<+|5Ge2yF5ZFcq)1$|4OBet
zO#kQ8_{ihnQdbHWJv1}8erDQI&7)P7uOC5~JIhrF#WA|)!xZ8?<+mKn{2Sm<+aA6h
zkBmHK+#^sq!-?Iz@t7y*s0kr>Wn#O~!z~rqa*ffEy79(&T!<E)lMPOE1l$8Hcj5ms
z8gg>RFUIR$1eQwa{l@nPwVuJlRDt&3sVmijv+6}jorf92qK%(uJH~JfJY$lfMFYiT
za~Xy_ioU3PBZNn-^E(xG>#(s;%h?j;E9$*Ecb60+V-fa$|Ji6X?&eX|CliQ@EpxU!
zWEy=w{^e-@h7-zO$;M~Ja2W5;kN+MxnB#Ev+-{yN!Kqz-%LOc=#I95ci<EK8!;?$Z
z<NUBk#*7A2Cj@QSF`Kx{HU?r6+jldy2pjSw63+Tl@8CHZ#%g9Omhbm0p^C>)Co0DR
z0U!C(s}dcvs*zXtyH^8DxyEhV2LAIaYnh7(6z9C1X?u{NquQ}>%ya%u#!_oi(cdHB
z4d!_pTo{(L;5+kjx!RH#n9SIakAHkmjCL55SA^W{qJ1|*Sj)d_#E?JG#7Q&xyO`*%
zQ@2h?9h-aO`HDJoPLYc)bA=cZL9E|$sHxUgii=z$^I&=2e~P4U>}9KO5Yw4Gx00;@
z-$2$mv&#AF0Yi|eg@lnWBPl|q0Fy85WK31N4x%H7=mc-qBqV{6A>946TW`J45q>=E
z<7Lki1p(*6C9$cHlR8WwZObrB4-BA1Y?3a4E@gNBbp88+c#HeN;`yUrNUPzM@tAwM
zqLHP?x}N|+i`k*U-x-C+_J3gM-^VUhuDXy^2x8&kteqdy4~6HxNV(y@Pgn}`x*TUh
zKDXbYG)#6RC>OqRKmk6G@9~<TlLH5J);A3H;W;EHose6D0^ZDQW*%+E;V55C5b^$d
zGfST5OcIVq2MY)s)uA!5`YKR9QVEGiPFg+5d=&La4g$tb_DYDjQ1R9}CU)j5{;&+@
z*g5hZS^-o~)QsTTb3CU7kyCUh$P0u0K$JQ!L{~OOIz8Z}F8OogMc{SVs&aw9hOh<E
zq!*}73m#%ag*nVJL4Cj3l1jr1^9M`R@{BuAfVJ5AZ!S|?DHE>-o?vywXuD&r`8RXL
z0@W%Etp7HiJ~+zmdh|jAUf`X!A#+l;L}u$2y;lF|4Lpo9pAk5wFzX+GS`Jcsj_GO3
zg?b>)aiNyS80Z@a<I58wgQ&!T*&6|ZL>7O!@5)iFuCCXH=Ii}9e%Z7)xF`j-i>u$U
z*Z-sFJRG6^|2Y2n+_as&-PtlSBHJAjp^%Xxt_WWgAt~cNHW8Xiijs`VXqmaQLM1Xn
z8E0i=oV{-R{Qif}`}29dKd<NW@t9OS&WadKKzY%ho!-Yyv+r879<#jp90qu8k)?=o
z!$M#fqz*jf0=QT^SI~<oL0bkFsS+F^mlE;E)mmk6>KqQ|FdNSDkIpYx6XQXd{3j4i
z`crcZchv5rExo<EF)Js$>-vwhe0{OGGgcqL<+t&%{%62bbSKfSB|}<H5@qI0W6TT2
zl)(>aZvLH>5Bu-!cQl@yLVQ~pvq1Gsb5YA5QyRN~Ph*YIx44LUsxBlJ^MWDnEd2Wq
zuvLeWa36AID}m7#{@h}V&L{+)?Tlt&O<SqsL6Jq91^I!1!85iJ=L`c)9@@hmG38j!
zX3sI9xh4g2S4n##luVLhhf)#{3r5a@?$2Qd3$C9+(LV#SrJRt)zd(qJT{uCOrw=n*
zGJp&Pp&mP2OW1Ctre+mY+wKeOJU6YcHSU&3iO4S$-&`R5E*HqN_kIFPs^^@8ABT0A
zl)&sXYW|yVCs|$s(q4NpYoGL^mXzY`A2-4lX4y{z67;uY#oy$<x=bz}a|BRFMdL>f
zc~hCw>6(ZzYl6HDAW^H74n*1Bx~7VNLJg7D@?e@)%cQqQ`)dMX(soPtY;fGr(I1Wf
zq&*k|x{Mc*g{2d~2g$_WaSmv;NPR)XTPV2~`Qk@4SnkEfI9bPfZckVoZ+VLAcUA+c
zl_^=cjWZ&wfTNy|j}jgwv#Q`xAgK$;0D973XPqg&NEN{i-#l!hB7dtDdy@HhTw@kZ
zFCEpp5`*5*@ghA;i+#v{Tj_e=1&pO3BHYNkA6Dt#MD9Ho=Ra{7tKRha<Z#s}K@h46
zPI}{R0lp~V*1i;isO$a?sG(?!F01pR1lJa(mUh8?N9g{(7Y3S?)4lnKi;6o1f3>hq
zedDg4GbpNJDT5&%5|2}u1}UITjjG_8q{y+Or`Q%`Wd5@JaYH3jqC_blpbY8X0F;I5
z(k9ygi3&TRN_H-)WR*QgHJ6L^X~C|O3Ryxb#JfCU`51EwAt}x*LNq%Al8ZB(AH-XN
zhk4Wxtj9O<n!>d9Tqt5=haQ<BaN*r0T&YMX7hl(Rwz+xF^KTNi$o1df{%`*zH}-OF
zmYhI9A^J~w$k!(Ff3+M$$v_@*jTqz%6GhPircML^^CFvL2}+>wBd|wLuMd(0Z)N!$
z$gLc*V{-?tz3@_w+la@A|7z-t5nP!W{w3kGM?bog*j_RDTKY1KCX~t&cf&#k1YSLu
z868*sysQv*?jYm3x>cJE>)i}yqqMnvF<Zv}Wy_X?LE7eFU*0zNqs+u5C<MwK;1)8+
zP?GYw!W-~IH)8j8KCJRQ+Md}zO2_|nO32@5mn*7Wl4WY4Hi$dH&0s+UxBiE0a(C9T
zQ0!{$*$4-WK6@v}Jk0@d@F+}8golnA&xJFe{45F0AB7s_%g||#&}^Uw&p8ht6mguD
z3%prC$$tfYb1i<3y~GV$G7eqIzQ@HTz!>>$UmN5LdwuD>3<6F-ZW3-tazWp)K4!O#
zaZk(Q2>TMz`+6Y{2+v$Iyf;*yV^h7^Jbpb*<x;1G1&R{w=Ja++HXI>MEu`6n3XfDr
zoDrsEB?VOYqJ@laT77ppqf9#OIp7^<cscUZ#M6kZQ{;*l2@xW8Ju%8d8j1Kq*7r~H
zVorR(J>cLr#cRy%cz=AQt5~3@HZ79zP+w1MaQ|Il<57wVrNsB4f`K4)EkggXN7laA
zJ_qZ%8yLhF*0ED73(!41G~gjil$Y4-+EVrs)nQN}hij4jb(NI_jL{<}28nS{ZUCPZ
z-VmmmN;sYQ2$rx7cHBttx+)FR%1?O4g}mP#nKqgndGP1=yR22Vp8IJI{a3Gr`&j8o
zgLu#NDK!q_W7zBHXD~Ce)qP@R@6D~I#=R%)G~-|J&LDe&QbA>bc{7*8NwbOXiHRS+
z=4&b%8y<1Jq=FVj^$hyiH7%Tc`t<s2-){PokCI}(ZoK-XCp4U#4?Aw`35G$PK9QW9
z@he1Cg2*LGGbhCnmUfu(WKz81qmB_ld-(==_Wr_|gSvz0$Lnz~4Pnc-mI$ozot$fc
z0l#ypv!xNl%Y!}yBlsS)l=u-Ha@$rMR9%2x7SZ90D{942LfvU=8t%=4b}jk4tT~%o
zq(vB@4HQa;a>l2928s=NJVJ47uHU#HYNDd+WMuU9+0I>c=&5a03KM0~Q261M*WW&m
zrrC$!ZwE(~eyOc;4PIX9E?)QNrr7hK<nC*<KGQi;6rRXwZtm7~d?)yj1yS-$?)4+F
z_lJ0xwg%N>Y!2b~Hn)FCOpVsQQ>Yw62UNg&&7cYLe#uh{d>+F2noI$uh{EwNj`9=k
z79&*_cViAUU8TWx-86zJA$>)#RSYtA&j=K%d<cr}__5+WnRmE=yR59!9FWKe40ulX
zg{c&SL7xeyVO)F9c4j3n$op43lrqLC>yM|km=}ljD3(EygZOi$!Q5#it#JA4dSSKE
z`}&XSy>E=CL>YJ2b)&+*gD;a-JJaUil)F8&2-Cb)tpFZXu&y5-^vaVZ4BwfWIk%$Y
zCud!!R3ihtro8mGYZ}F5e-fSkS>H}_V=EE2#OcC0g-#<AY;n@OgD91Iz_mfAulB(v
zq2Lb-Q~?M2<)JT!adwgy)Zc#<q9D&v4<gGUxU!YBJywSY>lG+^1QJ&Q5AjirtE77j
zQ<Qf$9}9f<9fyQ)vV$1zOl}D_%nlUY1yKFWB~wYu1*+54+xO<_Zj^bX9gBaiuv<g1
zTyOAVzeek4A-E=5^jSc$b~=ojNq8`)^Q3E-OApSn@;YMe0{%Wv@fx%Z?8|{I72S-_
zIWx|2`r{z%RU-6MY8a#+qIvxoz65c+j{hi|dUMxp$f*pfyU5ZSNV!AOVL463<Am21
zdi2yTyn!~zkSS0HulyQH96(vK16P=MoBKdTcxnD2ip!Vdz!+ELLI{w{rr$41wBgMb
zF7e0YKRXOZB@ioV2-mJksgQ%&4(Thto@1_0X$JDp4wQwD?r0VCobo_S-%|J0yQAE>
zwlJuKv)qttgG&^c1!ljr?l?FAJ^+Jx=31nBNY;jhBL^6g95;St`dK2(`qi=;?MBII
z^j3UY8?|$ZXvELNBU#lFpsQZCpqbEHHmK<NjRuxXo7H>FC8q7x1Q8(6v5^PI;WIDf
z0$eIYc!~mc64W70sHzg#*#q1`>DwuSKg@B5ftQ-V4D-UPgzt|q(tFjCN#SQI!VmjJ
z#Mo!iB^{ga7UGewo?OP&I+g81fqOqqY~uWuT<b>zx|UazT7vJSUt0vq;@Dh1P1k%F
zm(tH#j!$~g4f_tBz6CTA0T{~;cw>O;Vl92db(6+B-kQJ!ov!@H2LG}43_b8I6)_ap
zetr7KYCb3Hlt#h#ZSoz2t3Dsa6^Q?>s%yN)nNaFw&2ZdX`N@@?@}=1aed~hd%t4Z>
zR)JhFDe)7nL&pm+&OBskJml<?qEyoDEA1`t$-pJpbY((c-v{3QV;&9_1uQR4M)rre
z#v*>rP_Q<b%NG^>RuN(K;>i2J)@a7ZT(qdQ7e)UFy3{Q4sPuXJl#?=m1A!$;g?s6o
zPs3LSKPNwtf(gPYlF%(6rT2Aey{HPz8r5UY*K_$k56Koq^OdV+N*2`It8EFJ)p~E(
zmUnS;UWQ`E>b}dGjkK^nRhO{lqp7h@aRz=?2*-rxjKkZ>hFUNhZ?fm}c5&dNZ^jz}
z$G|O5jt|j-nAp)5+?oPA?N;LS8(gVkkOjE-_5h!ygJh)?Kel>|dRiR&>TiaCd%5{m
z4UUWJY^<4SB)g6Joe?W#C7yxU9+@u0^&W}n$W!_C;yg-<0Pq9Pi(zO?q7m_NH;4R^
za2PbCC<6A1LY83Tt)c=i#qr)?(u8v5*x`Z<!19Kb(n7cquj@iD>yx6uK{Jb!iMM42
z+an&uK`h7X*Gw+UpA|Gb8qtS)X$`^d9RJ;Z-gE0v(0_cV+`l~4Ki7`4c=`D3$tTA?
z`OL%}YgrjDugiBCz5SHS_oRezMiVtV&uRAAevu!-2uYqXOb|x|JrX)i9eF^n`3<zA
zG%BxP%2IB<Uiz9Nb-T4pD5MlqP}B>ofUL)QqLqd)(NMM!BS(JR`V2`omAhr!`3~XL
zvNrE_6CJn4zoE&8jGYs4o~>uT`MmqbI!?9*+xZC*TkG(z-q&JHJ^4)Eyx_z5&l7J7
zlNiic9=&hKT6-|2;q`6!$gX`F<v$gpE~97cIDRT`JD|xGzGayOo0b?URU@uf!T-1-
zjajI3jFey7zaDh!4J4hwH$LlLC7a!A@;`~ON1OBbXG?S>Gy@aL=uabmu_5$I>$$dv
z-^6qz{V2)~p)5GEQW-U5WSql2!NJnyCsNhHhD~{bt1g0`A_xs3bxiH-j_Fq=!5ZAa
zNQ(TIu})*Nk@7RrN<dh$5EGBF#pU>%Ss&h*ZdPA`c`ql&em@z<dL8u^kld4EE?vTl
z!qL-H4#*vCLKL)o1<?kre^+}5WP$|XJNcHvYCVdzVgu%pP5n)`@PQ}(oKe{%yOpHK
zWAs$Z{gAAMbHFXIzn9n$LgD2Ahj6HaUJh5~$4>r&$l@y5%ZFfzM+sLDu{+x@dx79|
z%HA(5x3O{)sYC=C+2hBJpgf8Iu4Bw(tGHa9N_K75ZArjw{*SGVOk9R=lcIUTdxYU<
z3{#%V@F{I$MH|FbalKlX?InxOY-7OhSLTl7tluyL<j@n2sia7>kmir2;upr^DOJE#
z!dZ~08{!%aE5T6*@ndE}nwjh%&8Xj2dh)g+^lRz}B|(tZcU+29ubu?&@*TOEOyhkL
zPv?u%y0T%;4Fo298hNQf1b<^IYY#0@t{s*Ihl<<Y@j^(7>`v6Zrb`w(gyaP7Bo34U
z68hNEA>JhGKp`Q~6maCdoayUnGK4S8D%~u0mjx71TrMInafm$TnZ9EgYT_Zp7kXcj
zhUMA8_`Dx~`}XhcYt(%5PQ@R3&uIt&*`Vg$_&8bh%GTxlF39+uUC)_SAPtKB$gNpd
zW&@|*&3>N^S_65}%=1ai{Lfnmmjfgy0w-n6+q!_y8gQlN>w$Z`-8F9Gq6Bk^IgaD1
zIBT{~MOLDEY=0t1*B6XPR3sO#ne0&fG*~Ta-d=T!A;J&61Ve{-Rm6#u5^M-<r2-_+
ze0Z+J`bS-fVElxh9h<`UT_vZcaM_dQ`mVhP7X(noPM8honZn<Y{O0q;gDy#|4%PGD
zCB9aFKYae<Qgr6OsQIjmgDKtQQB^bs30XGQ*Z0X1Jwl+OgB?P=ChmnOg<ED2L0#c!
zyNgUAalwf9=c+kX_O~VO!C?AhQPHrH>VLUe=Su$k_E*0YfJd`q_C=<!ZwV#rLzAqa
zD-%7WdS=To;Gk1uIc)C0b7dk`PS8&qV|$o+xznTP&N<!^PPz$<mI7fw9~Y1?KeBy1
z?AqM`mOUpxAsaE2Qv1UvW&{Z;OU<p^{yZE0Q-|ZQN?EpCgbGw<Y)ufNfSsC%BwVeT
z6=kgCFOp!=J-!917vC9YTg9PDvVmAOj4=Ei8j=A%floJv8BwV~rYixkDMH6SwHbIj
ztrO!rLDs{$Js)=h`@g{pVWpJniC3uSv*h8Sk&#LCCXQIiN(J@Nm9*-Q+r58y%an;7
zh7jJ_g<v5B*GDNo$M@yt+g=HI<I9i3dyDjFNXf5`w+$0EE3aRlQx^0y>EidfM|pt_
z0v8!ACap9?w6nl>f+#VfO`{_d{v@Ve07(qw<*YGc1RtWFdI9Bqg)g45+!C&Wm6W4s
zwxA{K0OC>v1%dQE<lW@pf2T-Uz^5|@GJ*1|a#$iO$M>G$<}Z<QqprWK1O2K`!9xx3
z;%{N-8pyVWTI7B4fvR{|FuuD^q2=~L&*>j)Q>W*W=ipf2XRJ<w;Q^pnl*@Q@g_}v4
zl!^8|3-&NIa+k)hz1Fq6#0R+o?`%W|NULMEy_d=pBU@IvhHff8cbMb~uJlV>Pc`|#
zxtT8JQTM8TIOyh$Cp(DjC}BVavcH~BU=I<*eKg}?S}Fr#O&lUUfoy*bfk{BpdykJD
zkcBGTkR!aOSaV^5!$w9K$2MV&=kCB9st5vV`(FC?<S&o+5(=lL3P(Txy;llVin<xX
zN}#OEgj|tdU!*70)wukLR5JT8zUJZ^`JgBhimemnN0lBw;^0l2wsoO)C54T6`Ug|V
zbSsLB)%w!qEJf`kd={9%PY`3pb|m<D)Q(h+10Pz?o;gA4u&T-LA3#u6nbf~)Ykyzu
zI7R4!9s*!CGP@9TYsjZqd9rCL^32UL&_Wb8j{ORazS97Ona=@ctB<+FW2smSC4hBJ
zFQz*7t?ISh`ikm8y+40a>W%ELG5=K&?y~tioiA_$jfYx(p?+>*+?ZgP#W69R9^-;T
zKtHmws%j(Hvj|-7wR0rsvL`07co?4wHGcNt{g?dCc$pl>|Ahs91=85~H#bfMcTVBk
z<O_Yc1S}O_G8`rJ-GP2ER@PC7UB3nJB$zi)*{CXLAnOA{IXjC32#9xp7x4NcDQ@+U
z&>->(n}m3<Vzv#Si4@!+Ww}s97U<PG?cd_Zzro6PK3H&L0yip-FuR{$qtE;tb7BXU
z*<H^!=}TLSLdl4Z9)~ylSJ*a2uUrV_68{in?S-cRhTPd528~>3x1YTH1%ZKUN<E|L
z#mr+C<V2?7T>6cIR#J7n14H5gI{XT${fO8NGMg21tNAX%7QC-**U+D&0H&HMragiN
z2Wt%d6Zt8*fGF~yrS%?IyrfPL1U{an{6t=1f3_!0v=<hQ>F0++p%_!f=8Qaa8u*F7
zemz&!blO9R{C1>Dj|k~1K%Xt7C97f@w&h_2&h<y_TkDB98DJGIp<^U@l>K5S?>4jP
z3~?7<#LD>x`=xQR4qQ8t>nn|RxaP%Bw^gIBc8%3aOh%Xo3p0{?f_qaC(5C~qqx+jZ
z%d^BE`G0Ot*R#`$RM-vg-X!u+d3#-~O&o#y$eO>S7hV9Nt)>!C+ih8>N(0!_<)BV3
zFP!5>{G_D>SQddCs7PL6YIXG@%hD8i%oBl;!oGO~jDUmFe+>6YSJaQbEsq>II$xv$
zws;VYS`Ug(t7OYYVtv=;7OfJ*UDlE&)63L7l*&iQE%MX|R;LZGIaO9PcxYbP81~{N
zWiqePDsek{xiCp)>CZ>Ra`F>fym&^{b1|(G2F7y_ym&bHZm=KKqei6Mc2>$RM<n;*
zyNfWufzvKwjZ9&^kq4S*im-9u8^lgzk}z?ej>pex5|)t0=M2E1Q>M;f32X2H7{N17
zuYN!MqVVa!bI)OtL?c`@lu*Ak4+QYVzahHU04bzw6tI|%+Hst`d_tV4GeOhibR&$-
z@HGV49)7klwz?7>^?`nS19*(S2-)lmVp+#^g@0aOq3j;U_xWo%&S9hyAC<8Y#Q1j3
zDSEPnS|F%-#zZL3JT{r^103H~?$(0iP}Gt{R)xdB)B|wK=c>V7U;&DUDfZ}X2(cIF
zFM%80=`5`PK-wv`kr5DF{Bh6eR1@j802EarMc<aofO)>{mA;hVQ|N)ll>*@~Z+k>Y
zCi(e(a(WB?%7+^$eH37fAP&nCFSMju#Ve!V{N*rWs=)<u>_|#te5_m_UT3c>ls4FO
zoh^Fm5YR9jxA&D>dD#%8CyD6;nrgt;kDYU%%72=9wP9!MfMw*v7VKM+{%(3j_6~WE
zUhR}hqvwylY+B9YqD|Pf!H{qwf>vSLJpPpq+wpFAe+GXuSDsL-=HJD+#gn%p#Mt^H
zdY|%bbbw*lKqcP-YK~Oi=Pt+~1m&>x47k3-{S~~pI`R+;sxd?ge#bT5d|NYoI!ArK
z_~PfZPy2jy#hN1CgM9T)g#&Bs-bsoI`!g2*$aQCS*fZuDSKYsG)vwUp=KX^;X!Wms
z>uz|+QT*>1WqNuTnYRm=x?{wYgGesy#MQLwp70>s%--Hr4FS$bUq?QahdCldX44d4
zXx)X5fUU5|&-LpFM9<5XE8b6EZ@xtmkraF*D+c?@2D|)rk#5D2x*L?~J<8R3jo=~D
zA!Sahd;wG1^*)W%0qvSu`pn0t*gr~6pPy8vBIOIdUaRfrRS7&9ITz&+LqSeYvFsj`
z6#a2Wf7=Oi6Qz#$>3+3e_TPD(|Hgn4ZViOr`#o6rNB9lr&JqmzGbj$V!-mn4>KpBh
zk<rEfJm91#Cb>TUV%LO=>s5N6+7Yn}I}=lAf5~Jv0Fg%}d8`31S`wZry@_&P2{>;T
zL)weI#TC*hD_8k3E<NtTJjQk5WB;8BU-%8(IA^grIjK3yS=Q~NS%3nETLg#0A%(i7
zTId0{VbA!Pfrah}gQX3fx_>#0qf<{mbN1sOER;|i<IUsU;~smq&uM6%PHJ87Y9(LA
zzC8Xl!RX_`hn=D?5^}U_X5%ol<Zx;@Hjq;g#9ts~s5!W^<R-}K2IZ}!96ymYjME2T
zY|{YH7ukU$hvMc`R}hhzXV!<>m@G!@%{|8WtiHx&UHPHAS~zFMpMX`n%17U>*NA5~
z5GtHRU!}AM{7remeS+EUqeCYWHcq49gZF1%)_tz<sPr0L%a>g~*~U`l%&N%zIv~_e
zQsSHL`!6_=hdwlZoCU4v3<%fpFu^sp=o^j!0fe&;H=M;_CiAawkik*-#(8J_-S=a$
z)1oqUsXLB({|bFYON^L)O}i^i<bM&!Ekjdq<f0sLTmabOMna7J?^XdgsuMf(cTa$F
zXPvdpGBz<`tmFORl5cFlRIR}^3+7Qhc<DW|dMM7-viY*;j!4+Ailutis@L4Z`#O}}
z^QXmoO9R7>kgqCnKVi}n4CwZv@VVaeON^)2#BLvVg4nfICa^Z#88oh`d};fbqwy*H
zdE5@s=ZigFc9^u4{pjEddO~Ao2hdBY_EGx()CK5Sp95JZ3T<1oNB9&J4kg+)E@~`)
z`W2+HeE31|uviLk`bqbT=c6ZckGgToC%^1}Lt;H!fA%NpZ(f{PcKHdbW0tjF*BiQ{
ziYZvL{E7{xIv-{EXPhPrt2C?hYPWa+c^i4p6i5d>uNT2EJF_rol8g`iX<X?ABeVfH
z_}nt<xEPf)5&X4+csZaGvbg0}6)?EQIxE!Q&J6>{37JgaF4jiQ{2NyW*_ka{$<hGK
zI9zSvvX?ei;eE2hcJ=Llq)QR%AQ+)=Wy~k5+%I>B#!Ja~#k#X=l~dRfeCuE7^SG1h
z&)JGI%P@aIcxZew(cs7<B#hGO_i1e6c`Shc2^RMJ9XG3vil!)LPVC^nklfYS+c|&(
zC9lko)Or72iVR@I0hy8Ur`_W?I=v`^#|~Q0>~Q*4d=V_PX!8Yri1p1c?$r@ZVUJfU
zn7y{&R4x_nAHF>^Yr*ep60<FZd*>Hp6bPr?dER}NQa_6=+mAUPP*~CR>S3K#uIKKA
zIuA+iit-i9n1#PyzezRN7P=hA>8u_!{m6l$gmWWm<Je7yM6u!7+C{YURp^-{qw^kv
zZihRdoQTD<+MgVeVqNAT=?M2Y0NI&7Fp3a6;W?`mIM@n@GIIdRV~ty+!I(Odttj=#
zoP6=cYkqfC3rK;s4;e*p3ree9h|9MWB$*0)u)NR9|FACZwjh5gz8`FeW(WnKL#^(E
zI!;nT42~Dtlvf7=hx%b1h@*v*uE+f+EBIKUn7&p><ZlI0mgz<LlgJV~iEsRxJlVBh
ze65b5UDy(y<&WC=XjKwE2~#DAmx&ttO69C3U2y~1W>N?J$WEXDXeUz8E=1_QV+m{^
zWX{V2(v?F?TDE|Q4uvEmKz;PBkF&_;<IQ~P2}4a5x-rDV58l*p?4d5q4>nRDv}>!_
zvG6PZf|rJFO^VgahY1)M^z7Ly=EHWEhDH<K;HquKNtiM9o3b&SWIO#YJpJuxL+PXt
zGhqUMUPyEn#^RbfxmYu|X_jj%umK|Wc8h~H#WuokQReUq*pa8>1!)#$>*E2PDcJi5
zUZqG(NRNOC{v9xcMD_$`+y^2%&Q-UIAxrAs0MsL02zrx^LV||lbJy#mdGEv9L(Uy#
zm3<xm5c20in#iWHFBXX4dw14lK`A%oV<Z0a-mIx1?+RNnKlSeH8uz`|XFVltwy#;|
zmXjl79>N>7S#LkZlOyV5`^qOR1+%uK0v%TTcLx81Gcp#*tt5dqPU9w9Pa1n(Un$W_
z*ahp11ZliCD`TUN2jP#CGng{F!3m^#?^mFeHK?Dd0xs(2-QfVsW0WX`cn)LQCVCU}
zG`^<(+G(bhesR;3t6-Dywcpd#j!EUpwk~-|&RZ<p-Fw&Dy}|f6gH`?RX;}~YFZkQk
zPZ}%0!xz(28!v3f^!4OY+IVXE7s`HgL26&Izwazo{lrVxNu=)wdx{nR{w+GGpF#Ny
zU%JqjaG2+XI~?`71Ko<QD`bKozIMxsn_1i_#j2E%+y(TxJ2>JLKZw-~)+{`Zfq3?c
z>t>oYzN4Q49SDLfbt`}Krn>c=(9=9iB5G<U0c}Q3(~@b)R6gkb1DGsgoRwVo)*&q;
z1Yp$h$CrcCm}Kf5GgH8U67==v&L@+^-@cmVco9#ToIOKi>Q9CZBQTdNX0G^Emu7f5
zjpPM0Vk3<=$aH6tyn1=Ect2fUr1p)*4Hhor#Mh$EFRWv`d6r`{g2QP7s~Qs;()YAk
z{zp>p0x!g<dHaAd=a9gw{J+w9lvf*G(ooy#+u4x`zjGY4t=)U44?R-2Bh?aeteY=@
z$3S~XdoCYy+2o=STRzaNxbNeVo~6R`a6I4w=`ir_&F1w7Tj@d1-;ljM6c0SQmz$Cg
zw=ppIKU5IEbLM8_pMd1s?mcQ%DXZgLZR8n3($@EOy=6O5Z)vb6%c)L>T2P+~vTewW
zUGL8ya~!}@OrNT)%^y?s2>5to!=4AxlLME55zT-{=w<=%7}|pmRuh2Wl?^8GK}|rB
z&1Tm)Yi)M6oAu#|?q#LdnO7?w^1k?5i?3NmTj1jqV^Y_hVS%6|x5L}`RG@XvUXbq9
zgzj-oRN;uUcfV>RY%4xrnT8sDYZYHz^n_K(_Tu@Z5$c!Rgje?mch-Fg?@pdLC9CUb
z<|FB@A_x>^7JC0(lc2KnYisq5w6M;Eu+&k)vxg`;ZKCD=ZQfc@GX+c{Y~C(Ad1lBC
zLGXgzwPTKlozi|fe5>tQtAMLWoGw@68{S=8Q8AW3O(b;E(Kh&2FzkyFz%SN6nU4u$
zBK9_GyeJHjDZDEV3UAB}d?ZNY(Jz>~(REGQ^heW2N8ukl+XgTDv?`acIj?qq-3hKf
z_uLM~*<4=C7;jOAE|Q}*_OG(2r+9ZRY&<bdJIs0jW2*zgRWSE}09m$l6psg-Rh!Zc
z3YQIhJ#|P!4EI<~kRwZB-5>dbCv|di+>`Ftp<4Rlxz{G6ur~i<xL17EdS|5u`|5il
zyb}@Hn{Ok9Vkfk)%9aM_qq~R)l`O`5)UVXZx12k#*sNA|F9{|i>h*H?7wbTg-)Do}
z7g*U(Ui`5*1h?B~6qcvOz@l&3r45q2bs71m?4wl=iCv$cmxxyY8=~43C|wz6;O@6s
zzR6=kw@&@&oLQLR2sHdbF8%d&px3+H<Y4w*AramKmKKScfIag+PAJkt<8^fGryqJU
zNB2{Oa2>oIJ}<FEv7ORSq|%>Q)hsWZc)?Jm126;4|JEnQ2{a0_yRD9&J;khUULEHV
zpTfcOJTuxw26LR6L2E>Kefu;rVT$@^vo?;|=@S%>ZDYZ%i)Dap$OCZ&K03h;C#c|g
ze)Fcx&NyZ0PxNg+Y-rof+W|AD-+E4uoBloh9JRsu(--_&Xyo`I@fbO1U+6N!gW)$s
zv>#fL^NUUgDWw@ZhYDvA2@l91nkeP+Z1-v1Cd1+yrT)-0)UR8tPw!aUFN7tSpWAk}
zvv>3TSbxHn$QL2|@xvPKeauzIoVGnkb^go7`}M0BMn6qpcqPR|BB}#iLJM<1OK3Ul
ztTB(i!)5Xp$8idE|EX+S?2n?4)@^I2o;!Ct8kP)7UtPO{2DhKv0iK<qi6Yv!*#X^M
z-^6-*oU{PVFJG&Xp0E#=CjRD@MS~qT3y26};O&;2yGb@xd|yDh7l;Nlg%sGg6Kq8x
zS=rkDxB%42v#A+=w;+#f%}30<U*|kBY;~ULG@id5RDh8U$+7{%9b|~<-N=~hl;rr4
z+iICCMO2(Z+F18&^<CXbup#zFB-;b4Q@fizGft^0S%d5aN8pjqdzMV241b1}-b5C#
zu{assZ%n;dC&?2MWF&9MVZs#f@v)f-=c54&AkZemIsL+l{3N$s^<WljD|Zz?=#+*a
zC4EWCTHJ`Ah}NzZ^UC%%PIkE{d_Y9ov%sFIzpQRR<sjI@0Qx>-YN}rA@<}G&ntfRM
zK(9se<od2psmGf$9gput?Jn%UZxPd^^jx!gKb##JmyPXg&q?+P3nltemU2q2Qgm{e
zMW=W42ioOL)%JbT8!u{oT22UqQu$LMqWJ)?iU#g;GK^X|;y=pna<6dv&!50{QrO9z
z;K{p$e-B<v;a~Vo=HFIdjj^pEnR!^elr$9Hueb)IaW`R=cmCrD)zmMjvNi%S`}+m7
z;ybZ(a@TGhW8h;xZeLq5@`jR)4CRA>lUp>*+OD}NYp4}k15*X4$MeK}zB4ESjZURO
zvR}68O|QnCjfDkN@p0Uc5C)EuqNIc0QIIaLmwYC{AP?qI!sGT+grd9iuZ3KVa}a}A
z3tQN)pyIuxIsDmh)%E2&M<8>2i|LYqufvm3#?Dng8K9U>b%I=$hdOHu{k+I9IH5Oa
zi}7#lhz-he5;1KnRF|?o+b{bzr1(3!AgpC<jF~<FS1jCN#ls@cYG5b3+ejG|JDJ57
zuLi9Dr;n5Ni^4w$#D&GP=kYjP07`*lFydQ_N1R3v^9s(&_0;*rQS6(@eq6)n3ceJY
z=>8TK<Y0F0&=*^?UZ$99^W*~lpYyk}tYEvT_x!lRZ~hJTgO}nraH1dv1q{_wP$_bc
zEYFqn-!f?Ld|>;;7mziMP<dce8jeRNK7et1^<11_v>_;cSN&J8(zBetCdZ5LA9t_9
zLMixY0)`Ns1F2I&jUvsrxaH&9po<9VuRW{E+3RIt#^3{4<K+Y#E!LFz@ec9V5cw5z
zc7i<WDXVGr8A{{c7r8^pQf|*A>3=d>+IBJw)NdWc^1y$S>(U-n>&`vD7D@h&VWa*V
z8#@Av`hvR8IkNXeoTO?n(`5)wpR{|VG;4mNIYu8k`BnT~?FEYxwC5s_x`7R*PPrNv
zaYg4nH?gcG=HN`F|0rY<0z_VbR76M)5C}}OmpB5$=utAkIBrswC%emnF_+oY-9&QN
zVOIYw+b>$RPl4w>6~IR~XFbtMV$P>wYhN9rA7*FD)N2;?T%WyLwfELZ{x?bP5?N5%
z-mCG(y%q#Phw`RrhO*sqp@s1;@GGC@bIP#KS%BNVY&*C-7JI@uPJ+sa=k~jb(X81{
zc(DD>5Gy=6Wr~k8F>&l~zkYpc8W(%8EigV#@lIeL&`~P}7aS=mxlN};?>8i0ky|sP
z$F~_n3nW(xIWD5&2zEe{vHmow;=K-icLURST<lZfcvg3OPK$N&xA~wCt$2#U9BF5*
z-lx$4H<|mTBd_I5RD~xuI}7uDMGLjV4AP<EG3?aL<U~mx86E1cqjT^@g8VlZZ0+w}
zZoY88hx^Dq<oMWfPGFJpCCH66wSYeWzd7c$RB?{4oZiQh))E&W{r$_5eh8<A!&K79
z`Tv5&&k7d}eI<Il0us(n{>*T8ZOc5Nw87<gfBE98froWMw-vG3ca?7?3C;){Ps*dS
zYX3xSawJ@S2rI^lO4v<{hW#+Pp2IWw*pVvn19q4SO=`>cShWL@#5?Yq)~!sZayri@
z>yO6qCydd|=HMrXZ$xJUsh;UE$xLQj+qLUgZ<3^U(hoYCMWoVUF#Qz%HEd1Pg7r*~
z<6yFB2+@9=X`&8hOEhDo5(?g%U<=0PUNgqy&cW-#UChhJVws>{a+AT^ze`bp&=9-B
zI!Tu0^&gP2eO4^7p+z1jNqL<v35@}<-zL8oM8MaEA14xI#1Z8uaArj*l08khQ)IFv
zH{?b8b~#VnV&|wo>yUdantuCXOVd-!cyh29vn<lAMH<Q~{&W7zT5%~C=>PyLxRZcA
zga8QnJSlQlLF!nf_61l$Bq6^<<`_&_`byv>%-ed45mM8z|1EYETYF1o#?)+I-@U$j
z_lgJT77NgAMS>hd=`(&BC@4jXhXDJT-nBe2NZx~+i=>O7&woh5v4VEwCGSnb>SZ9U
z;gdn;D*!E+GX<Q4C%bDNNen|q)pi^oPh*XTKf6rZtD=&;GEA7xW}lmxp%q7PRlWZO
zD=g-G?Ye)9r$tpB=-KP5QUtouFt*2>ico{JNdi0N@Y3Z=fhFJRi`!Xa*w4JlUaj17
zYEtOR^;5Nru7QvDX~9>3TgPu$S~7)4i3rW9>_00o&VI?kOFWgdmiYD#UMk|k7!B!s
zzULV~_`VHdCzo}A@`$}}`Gh{o?;Vk-U5e7bwt^t~%0Irn7+YHY$E}41U=D5D_-QDn
zZ-{?y;)BCwQNDJZV9&k@z8?W_5Sw}8^rVqad&yZ^(1m~0f=0jK3zmG<YelMlv$J}$
zepu6Qob_MlNcGvjZH1(LnNAVWdm^g9z~((AfA0?7kQL0<ssJfYZ|9LvE$q0YgD7E8
z=&?5LDo4kOILyPaaFzKD6?uY8^G_^^xw7=fD3_*}M)FRTPET%%@wuZ<7h2oaU>-@2
z4yk(BW_tXW<BlHhC)W%2R6~~>gH_s?W-s>{Jx4qaYA(<4zL$Xi7Y_>D{`>HxYkE*{
zeQUfRG9sRb-r2SNzWe^`Ir&FeJ~Yk~EJ@$f{FKuqiG#3Gz+hKRxMbtCRKX4bN(~^y
zenOsb2C1wB2`8_+0^V4ftMTiW1mCEnRDuT&eLo9-=C$JVZayy~rS9fY)1jc%Fmys|
z9JYE_1GC%qz|$_M@nD>1{Skh>_-_OMRQr1|SQFX!1)taBBn=!`VgAK8zg8Bf<QDav
zYOqvpXK&CMpivEWnSU9Y=O42Y^wwdwI5FNpA-!AHt+2nlVB-4l+F*cgO`OJr89i~w
z>S(3BxH30P+eAM9LFvWce3}eMT`Z1YCC=qD=)~jUMQ+=js@Tq92h_ZaE<IYNUI>t3
z-|5!d1@;fik}e4gRbcH%|JCm^4}zT1Tjhd18X8K^+LNVkn>qng*yW$sodYOXu}imZ
zw<_HqP@Uc&)!ZmLM5WJ2+Lt<44Dv2)UfUP+;f4$V>tWU#LGY~T`ZouD%GIWAt7!p{
z3i3ei^yF`5W;bP%xQbMuBWX8Gj(x~}a0_Q5DgVI3jAG1B8KH=qQ>MYQmZ2IV@~?Vl
zds~TPn{g#)YO<ctbuR?pWW4odRDNLe?%7nO@<6lf$VC773Z1{~8-ie}C_y{H^d@)9
z&v2VIgU&4FmeK<cRm=NS(37D`GI}>K7f!Hw?)~l)R_Gt7EV|{z4?J#|aiC}E;KiA_
zY*4QID-FpMYtRGnt*wA~Tm*Uc%N!+W8n)OL3YNYt1un$Zad4G)!JGX1k<thCWuJ}5
zGjKs5VS1wCxoN^~6MsjR(Juc8=dWX?qOqCVgWC~(9_}^?i*T5xT74FRa*E|+SI}-G
z&n7RVd<Tg1S%@05$2(piD$Sp>{2h_<2Y(V35<I{$$Db2k_uiNBQVZ>d252_(Bs<3Q
zd8HWaS!SqM`6X(c_UKe_ffXc9aY-_(({Z?lveu+@pnLAq`hN)$JUEEX(A`AU)~df4
zv+c8qd8s`57lb8PwFdO=7ao_VMdy+|#=2$lgNxQY1N+-!q5<Y_4feJ@>viuBr2R6y
zr&xN4;lh94GP!_=F+WC@CN||hT;AqUqKYYDnsTveJ?cR$`Lz8W%jR>#Rh0f!KNs`w
zA#Z0MwZeekAXN}r*hA{nhhqK?yn6w(k{uun{515$(FM*2mYAC9s;4?b=lJfvyT10L
zLyPl+thk#O-$sItrrGwzt;KbPSX3(Ev!!3AC$@FD-STt%r?~KC%1=H-njGe2!ENj@
z7%BGX%Gqio8+6mn4qnk6L`<vcqnI~j^`-DPC;;URINbvpdZrr4XhW<w6N+Hn3a7MY
zE#glAooKrRbqv5$$2-YI>(Aw5zoT}~@cBTBQkemD%Z?3aD-&%4hRkPKnBmP0JikSj
zxx9d#i9$~E5+$MBq-=v4Tc{;XP5nFjg-?s<>dR49zd$$Kak%BjSD_~{*)*g|<m%+b
zrpMpd)4K`x4JCp@wKo_bt%HcwNDOPR-Ox_ocF!i)EMI|bT%_&)#~t%&@1)(v%;Lxo
z^io*ZZTT%Z4qEsOb_Vvv8BYCo4#<yBm~ay?=ViyOju$2VDfeepXj0~{Zn?hAuH8$>
zE&2Dl1z(f`3CZ#jRG`lLPCNNeW8X4g4+PZSk|#J5`v1>$?hf}@6eWmLo6Lsal<^)H
z))Y_RXg1Z(Ci(?q_~CZ&+o#&7ap9yRN^j?=Z5NNbQ7|DlP7cNNOcXEJaxJEAE&G44
zd&=zXXkU;Pq>C<mlR6!h_1T*~d%Ebw&VN^7HMiJ+@Aa}k8JcJJdC$~P!O8@CI{`SE
z@p(!k2M7Pq+W<uFOwj*M56lY$zH&_^J?+jXF*f~6ic8-7MTtfM7oV86(F^IbFkJDg
z#e);55_A8x?lh!w2$son`Y8~})gk5~;4{AkJXR|+g1-=x+4?a8x$6)Dpc$wMzN0wa
zA>$tSrnxm{sLiqJb$2RHX4j3B3rWkH@6(04b)RfIzQO7ZsV#r}tu(DCx+^ZFFji3&
zxSs#I+HnfuyU9BUM%@|VJv5RML_Ne#y{bU4eh#{_t&9m7QGz!D6?fdF%3`63pT#88
z(yqTi<cJk*e!pvb#V<Isu|(`^t;;IO7PMx^DXo{##%0#K-(gKNzs*dkJPkdoU*K9^
zM!-GfaLdyRu}1ntdZcP;s^#+g{&SotZNJ)jh$#K&CwzY6)gvOi*Tsisy{&vGKTKed
zY(TX*t?h5&&n&UyPo!9*&G_p*ii~{eOp4nU*Dh9-@gM}>2`Yfb=cSIVf?Q}%&&DYs
z*zJfToquOqjz)pB)rLmDZcc%%gzf&Ns4(V@+v))kA2{qTZ@b7r9aoDROx;NQ+mqXJ
zlkEHLxnP+~&Is5GY&dfu_4^eI>JWvAfE8GT9~uia=?OIkZUV*4U2O5{eH8NuwoiNO
zA9}Mu@`+oK&*Wnfs#~F7#%ciDn=wZj-vQ6L*S%igj=VE6&ap^Sfg@E~F^BfEXz{A}
z^%VI|;Oz?zg^!`tuaP%OCP~3H&a`_CybqVoe)0<dIDd)*k2emT1P<f=Oi-}#pVg@N
zSLtkECcDEWs1?-i)$F)JP)xYnoG0#)%8Rx((T1gtwM~n#@hK|~g=bLj<m)dZcO=KW
zGS)_?SOq25`a<;cP8Aoj>w&#$Ko&cIl`X88Aqb-GYsO*k!U@hj|2FG{bifD4uBY73
zz0b+^w|x6>r>x{5kp_dQP3(Njz!Ld1aFau`n_;D3za<F=Q1q<bn{TdBR<-tF<%w|Z
z5e<Yqaa9fM1p_`8hzrUeU_Q<XUBRE??}-P5Ky7djbquK}Lf19RD#>qSm{78~zGvFI
zb6}z*zjHFAZ|;VhCSzMFF6^9)2Y?&N`c^Fc<&`99KV(e7EllTR=$iV=5MWbKp}t1H
zJt1zd?Z!PIaX8*S;4kkCQYFQf19EQQR1Sdu<sqo9IB)<?(Dan*3`x?+25x;E>P;Lu
zlFH&gsG5)@v3664_uBH54A@-`Ym)$a`(w&W*nMONDpCcdK!22~R4F$y@E>N`{p(mx
zY=N$rI;v+~^DEPdh)2-+KoqS#7cd5mb^-55@n5LKJaNJg;(1JRi6ms3jQep<owK}J
zH73v6c;)1f4@$K00yk~r5}X<S_7dx8M37*C0owW`=tOJ3>-B??HebAc0P3oklLCbL
zv)MYhscQrglLINZuo7IoT+3Cpb^C>wS=KPG+oF`F2+<3b?<;V&DO_0EK;)5DG+_95
z`N@LFf44rfo)fWyo%3I8HJ<HyQ%Oa(JDU>v+oo|67c%{M3(J5^W@jQMl&jL8ZMT&(
zsxY?hX^0nP0;Hc<;M7iP2Aoww*0zJT3I;s1Q2sltB$LamtEdnZI>xPJrjwa7ymv-y
zKP0Y2&0*%xyG*2Y5>AV78wQ>}?e7?OXPN7?Zj(48Vj%@@u%up63C_p27jgWxT+@un
zae9+H+m47;a~<0mesY2ll|eGZ8hoBDJwc!Vrc>@7u?qq^fv6t3cLYuznY|MNjWqjA
zU2s<c$4Bz=jJtqH*OM^e?=HBgDn24`Hpl!1vD;w(jL>^lBE=q2U;@gb%Xrjs&fftA
z*-EOE;@F$Geh7A3$t83tQ@lWW*jEnu=R=wCD3;&Kxto2~?@PGvr<;qeqa^&FSSytE
zaaPCcJWHDSouO^?((^t-E^+3h#<|qPf@`ee<$qCv@<+6@TZK%kM^{x(v290hKZ{zf
z9p~lfwHv$byus7Cah`)@{KK6mwn6@%1EClMWN?R=Kasf1d7Cqxr0>4~f3&$1kbIV{
zB$+{y;RMoK7sjt8?YN|{9F<t2)1S}KQOlXq1$H162E1HeHwIb}fF~<qWBw?=rnRX7
z5C?d$xLvstu8Kyb3}~|BTtdu-krJx#(V!R5Kk*G2ut~3oSNGnT;+kq0RyH4dbudhx
zJ|4a3#6H?>a{nfI1qS3YK?JR|@yuHioy`}}x&$VB5${UjqOzlpxILR~Tt{6^0=7k#
zRr7O`h1`B#Jjh(i!vMe76F`6VG~U2s6IBMG?!<K<s3c=GLUVy)U1Gt1xXZ%v`3}xe
z2^qfBKLw!Is)JExla#0SNrD^nU8dQr^R(n}@v$H}kL8b+OpU)zex|&I&p7C|xb-WC
zI;2dVraZt20jFH0HzF!Fvj2?-%K^t|Hf?xwSZPc&AFIIjQLr7z7KI5u`be}PaUyVF
z8+{CtJ}<TTda#{5`<nwei;7nOuCJ|XSJ>=W{2iC#k=eVKBg42wAZGipCzO{UwU|#%
ze&Pks6QwU9XJ;3W-g<47i0mIEMc@FY&8Y=q@q>WHqX}U1!N|QSu(MHG)zd_q>HBvm
zbc{N${>3v!!LlLb=H;3d&dARKbEiv+S>dN1I*1s~^A_#tpQ?g>!#j2mMS#kvU;2Te
z{@EeABW6P@BXfm&gM<Ud*eb*v!uw>YFAiknl@YU&3}z%VtA<p!EwiDuw=3eo?jY^(
zcEL=>Sm+&hk<i5(8{%3IQvwjQksuJ-QGdL$Al`0b6z1If)Mx6<$f@jD^S$V$Fn2HX
z>JQLsjBmKytXkHlcKoI@IfL|IODiSu>CsB4=$C#a2AUd=M?ORxYV01Ar2sR)G<V_`
zP?UuYtKHii;Dvxqd2n&*4mk7&$~Z~r0HAENE+O)@#m4mmx`xEU5sD5Z4nKyBIIH&N
z9zYX_%Zz7>zddtMsC>39#}QAKag)~&eXX1|RQKfR2HK>t{oAQwdP$1cR>J!FhpHs`
z&34X0RoWm|*xSt^Q5aXpR$uj55Q_v=B~+drOt+`gF$>8G)o4>D-$TQknH2^hry}a<
z8FdX2p~}EAi1Q-izy~2eQ~Go;z$J**!r-mOkM3RXoY*<zfzw4g3Jn#>7T9>olqe*6
z0+=`*A?NAigqvPN!^8HRpkJx842X!{?e%WXV~>F5Si#h$Fv8fyr+Zbm{!7UTvix^{
z^*W}w*$W_w4Yf6MAe#vXUW@~co;g)6^7=R(I6?XM#??oR?J`^|21<m#{I8MY1XR^#
zzlcB2RH2K(lATc)D+f#S>;Uj8Pumqhjk~7jp9KgSf7JSJ(ni{{-+k5i+QpG<YJ(f~
z?6Xh*<sAp;GS(XsL^Zzy1L)l;Ev=N-MR`JMgm2e=&s6X7P8=wTM8Te-=%(|8q1}7k
zQyAjCJ(4KPf&j3wjOY&<c$5Wta)CQ&y|S*{MLvQH&EOlzS&X3i8QGm%GAxoy4e(fb
z*iRv%IYO~lnO3kK`!MLWdQfT`AJ<)!IE-zGfEfc2_YaTDUM*9g{N^4xq7R$~CwlP#
zbAd2SJa&cD3P7L@szyfBVS(5I)Va7KC-r595Cw|*6?_E+CxB42F-V9AW{sUe@}}er
z)Ob#en#d78cwX#B=XH1sXl`}+U{6O$0NLAe2EbfWksA(?I<;!Jopko89zjn`g}64W
zeGKqHp6i?n!e84u1QuklPGL_WOH>@5LQT*;sC*}>z}>A#F?Pa++eZOh?mh|gWq9N;
zb9_s~uK5GBE90B3++2@IZtU;)w@G=h0)mw<jv!MxDn-$Y8<yKJJD$o$MXP@Y#}wON
zz9krdgiF#I8?8v{3BGLSr9}{?W%3e1{gDV6m7}aNl#?(EsSI^98Q2h3zFRfnv?cWK
zh7!=R@ZYw&>b(-(q`q5fw)aLhpXbkduHL!<Wp|J|H!s1h?V5?GM1>-D_pdUA7KD3E
ziEOK)Wze3)8yJ@op$$~gAclgS-aG&ofqR7fi68pOHg2O3(vHDR5}eUT{RwR0t(uY@
z27oS{TLCHu8o%9w`V5%0TJKnun>tbVk3<DL7VW|77yrF~qnwGHGT}MRRymAlIv$f9
z8bz|AR~+NUycY$~@GsQXpX8hOR#$5OYG<1_<-wC(2(xcM*p$6F)X&H#P&y9&RPDrZ
z-%p!Bu_qAqOE@Mf<eO%FVN{`|G)Ms9bDMsooaL`Y`p_LDE|zZ^Z65RI%dZxz)UD|)
zPjNO%M&l5p<PBv=k{Z@qDUXHpvsbJ>h8UyBLxp`niJ&U>`}v;(e;^-uFQ6c#DS?m;
z6bL8>LIp6*1yUyC&S7}63Q}}3uK)%FA#`5%vkUSR5DW-aZarUs087fDi`wptYQ-$0
zAJJv+p~~xX*p<<-ehb(EsP_wp=f@4#$l3PeJj7H~$i-|SSSxG3!rKedrR7*HAq{Ir
zq}6i%plx)6geqm=tsAWPcHnAug?Tb7nso%0ks(fq1Fj=VC3>X%t8tQClqH#y0A!Q&
zH$$Ul*54IW64p#F-cF+Bi>`E?69@Ou%-yyphBfhhQp@e6c4O`a87xtjNyoW~%b7QR
z;u!1)N|KaWUgp{p-^#O7MrO2H$b<F=^Z~t&0VDL!ldq=ob2dw33L+T^AMp_@60g`I
z{pA5UHSoJ6^-4(@AdI~0CHfI86B?2BD5ceD-9rcp(-6R8qe~B%R`$O>vUJY7tt`k>
zD@6k8^S{l!5OIZ@i`!qpk%A)+jJeU@R}NXF)*c{3J`*0{UN;xGU<m3muO@y@blR>@
zz&CoSZVMhc+dQO2I6rGv{5WpzS7!o+iZ~Vpm9nR*110NSwD!U<;1`@bB~^H*H(Q?Y
zDn7Ra)tGHs@Cd&4j`l`8f!;quR%SKNj~r$e9|eqm=m_+vU=5ic1+z_>m@m}}z7eC8
zfiO@TwQ30~IAAuJ7U&|_06nV=RyH@)Vhk1;1EH<{0q0!-qSh%VL!I|$EW|W3!P6j4
z1$P{H3V->S^8A7zP6u}l=E(D?UCiQt6rG79RPPtY-+O1Zk0tvumaJj2ix_K4mPm*g
zAylMIvdy&%MN(wRSfdneDB{vaDvECuGDXN1+1L5aZ~lR~Gk5O1=RD^*pC=F}%zcXT
zQgtpH<2SjTvznpUag*iu-&T)%DrfFV)j3*IgxIf^r+NW#*E>g6GcM)hlr^Xd;FknR
z@Ddq^ya(4_!@q7(pKZnRGhSX=oJwTKVU&p&>Ivp3_Hb2|6^#Z_nCt+d?aicG>Xo<#
zF#~iL`EqcrT#6oE=d)b4Nb)(3Og8>lhgxyXqv393bSl58?yG2@wpQ*Z@mAr1*wB!3
ze9xUuomyQnZ4!8$fO|6Q8iVYD=3LgP+01kDDHLn<?(26R&BU~C#I{Wgr-S57>5$8@
zLgC!NZ@qz!qzpcQevX0&#F~&POY=*G-38m_<Ex35x{f#ZzB={nyt~XNC-PaGmNmOm
zVRA!gveoPVSg${=jceZ*v`Ju&b`!x4n~(>$qC`oxPZL<pxsZu=&)uUiH+ZX6T&@E#
zyhK|R&VGBo=acr==Zb5Vy?F{5A~`mZC0FyMF<Ny{x49z&v~#8Vfif7$wXX0E*}8rJ
zN*AZu^1k-Kxbda$r1EHiX}#LrxjS)tj<LinkmYD0yAvI^w{;6Y$XqJAO^a8A4-m|d
zPS10fu0@}hRknKkY^(F`siIrh<I%LvMA!v3K7|F@ZZ+P>)6LK+so(A%vp=(#f!k|6
zcfCzs7FqkOcIUlZSl&>2<c~_9!DvualDTP4B_pXViZ7rW+@Xwj$ORlleCW0@Ss*sa
z6nUhF<!6}xpzXp}Tx<>F3H=40gf;#9{X2OB3xw%=cb*wvShEM25wwTvvE`V|WA=Or
z$%>!HC3;L9N1j+I4=ul6>srBBXg*ymDnCS%L(eS{w#-bMjD*1jiu^s6^%UKt#o<8t
zN|8ijblWgnwd`PVIl)w(%qGPpdUFz&+5M+nj7LM5!7&iLH&a)DdKFRC;I>T#k0ed&
zD<DsYzZ`qt*j0Q1<EpX9n;yToD)jW{)U2L7jl<Ry??5}M?X#w3Yp_yx<1lzIulL`$
zEtg}$OSRir%Tz};8(#~T$0=9i*ui(}zKFP=MrqQPjTl(H)^vBtlmo9YUew|>y~1#t
zq6QL47Nk?>vLF>TiXzl#A&q;hhy2>c;-=?hNZ`T)1t1YyhEFg-K6CE+XH)x|CuWcP
zE94vu2^y!hi*uGdN0cmt%FZD#&XYiYBG3_T>h0S+*U@8=$$$FrF~*)m1CAyRJrh|F
z%>`3=>##C^3~eQ;{Z2&W6uJz9J~zTxo*csEMT|Q>#3_FHYx`inVpMV-E?b(Zu{-lU
zdxQ57%mEJHU(IiO-^!^@M8&D+5hW?=Exs~n|7QIcqfZ{0go6hUI7WB;$U{9GWs{yO
z|K?H!v`<*#&J+bkjYr&pfBVd-kGbv^mgN8L<XVltq|xbp`Tdu$-21L#ms&|yDQdu!
zRRS0u{er?hS~Q2l$OW38h{nk#);HdQ3y1*ggi>f(8dCfedc@Co3sv&i$eVQ^Wo&^4
zd2XXvD+fMop#V~S7y4YsLp3Ng{j|#tF-M}u;S_7WS2L2RIG6Q9_RcZdk0&-#-4>E>
zn#Bp^y9MtUrm7<n=Ih=<;|5H6s;$gq%_Gw{QVciz!I%*RW{!8)iX1eg9gKf}_O37-
zsLAB~iz(3n9FY$=sT_a}8$SpoU`V`~Wz>)2)%f=Ff=D*i>vJ_^ADcBKucqF!AD#YO
zf!_g7t38sJh@(`&G4<~@qmTVk>RV3|L~<>WESRyVf6L!2{IBLxI4NB?<kl1gdkP(L
z7+|N=Hs<}%dA#c+=X<tVeata&Eib`Fx>T&{?1#XnN8$Ni^8SYe+=S)z+%1o=7Z_S9
zX8Sgj8Sx`0uUv30ye6Pze|+T9kC)?jBJGu)UTiwE@;AvrbU#$`j(&HGWx9RYqh{0s
z^20#2<aY<V<<7HNi<uIXZ14hP+L5IRM?GR+6|2DgimQ1ZfDEWSp1bNor6vmMpij0~
zGo_u(VHlh|<{5lQjM#rvpf?dN&+k2H8WbbZYyJpp;YuCBR*FP>dG{3n%hxgum{1O&
zzgG-9XmbH9;D(n@{`4EEiZ=UscA#^QO!LkD(~HJd!ANQaYyIzx%g>ifE!`lCcvOy`
zigQ6Lu}R`!6SW~&hM|Fk#m|p19edy?$?qDi7CulFp6pEOg+)G#i;7ZT@}K62eXr!*
z-2#b`UJu1&8=Ro-w-(tfIBg|qo=UA>{;G9!nwrU(qIYBQ=Rq>_A9L=8tYgHep%zia
zWR?*A%Yj(?){+fTFRn-X7WEzELh<RBj<Jm17wYFHGp?)dfcV%ZhM}TpbL8<&e5lz8
z>Ub0Jf*123RRGQt2T#B*3y{2}UEeZ_=Prmw6+?Ca_U;hPKq31kveO6H??pA2bxxY9
z^gRzuAAcz2_PD=Zd=xh8pM8CXZBw+$zxO=FWj)H>hsigCMZLOhKJEP$o9?D?@Hz0r
zqBRR^N@>hK*MyA5#^EofKc<4W@|VLINxJVXPfBw7^VDklSj|Q9+?Y818I|giIMzIh
z53~Q*BrwiSeo@WL245u|Wi|)W^%)%;zcNAewq_N9>`j%#np-lw2o1HjV(oFL=DF+d
zUUn~>H0AjA`^%QWfod=6&JYQT^Tv?H{WIUvRxs_d_rBlpQ{CI%Fw9B_YUv+Xuq55X
ztQz_yGdx$VJP2kGy29c~BkTjf*XF_y=fq+pozz$T<<i8;p5&dSxM$6GiSWPBgK9;=
zN^vgXJYe!)NqDU1SuW%jijm?R&5QdnS;YGwk+z>#Pl$XSs2?Qw>?8+cTpGBPi@42V
z9yAsSm^9hTukPnRxU;$CZ<*-vj~FSen|NS<BF^V8YL2eN;}7u}@XsB7d{hOC3>RYo
zH$@PtTwa1nmlNq-+}xLg$XhPudZnL-hQ?J#cLx}oZ9XgwOVLv2dlI)bE88j;Bd>m(
zxfywe%Yi7~`bn5N5UUNPbW)!Z99126g&*UCy1&W%{Z||g^OXN-*)nLl7>N{9pbJ}k
z`0O1vpU|8peoyQp=zB)0=0xH=c4NvqfmMF3Md#~}Rg>_p!>a1tx>!GcYF+$)|1Q@R
z{H4ZPXukpQuaKIdyFy{La$Z;af3x=M#g`8x=h4cn%r$R61BJ@hz#QYqjSlP{gz_Og
zu6MNbUQ&-3ks)#oexJwvnh>40XNJN(tYbAd5=PgzW)s&RwyS~xsO_8PafRFjSP<9k
zm*&vW`)0F~hamcxNFz&<3s@B@klzks7(^vH_70#AH7E9StlCP_dxq|vm2CR^yUo5$
zoM2yX)oRIS>~IO8vM9D8?KJyN&`$dsgLkr9j_;qi(Zy1eW+{DHt6eC1z!5fW@wJw?
zn#p)_nG?(!E)Q^LzKpzo|4LZ4)+FU<_nFtv^!qb5%m(kP*38IJzm0(h(P-8k_zQQf
z*RIFBR2!<1SYR5*YT!N`uY!^1U-*d%`8}9a55>LihMc7Q7h3JdSrbL*qgCk^BXa%V
z#Nz!p(AD$%T%=IuME!?b-z+W!R@1&|Zd|n<OmSXxvKC43M<@I-3#e`p-C2N^g;;~b
zko$qS{cOHrlxuJ!i*w%W2)p>z2$Q337YF_(Z)L+nRc+IQpDADuKSO~?Jq8kC8$mRN
zY&W`qFTrb#pg+4;V<!!nG<MZ#zSXsdoC%fjsbh>jF|)WrC&9JNKMBioAz?C2tlyj`
zgUyh&4|+V^mW&yNf5um{xUrI-Vsko~q}oR=X6^WYmUBVT3ysI%bRwVEZk>sXFTEOx
zwTH0a&svw~$ajuIOGSkb_Pwd59w&BFR@|VLDV3Neui6_Jh9{ajgHL#Bd}Mr`O+|lG
z`fXI4)?P;rZ!e$H2ehJXStnrE13#_gAlouw4XLc1p+RcWi&*e(aMR-*eSOs+WYw_A
z(`+B#)VOUvG57uMb6b|q+@aQ|xAYtQE;c1kPK<rJiTmP2S%Zc}O_A#w9AEtuH=o8l
zc1<hB5(j2tS{mtiU>>mHZT~LjdG4R%)=U4wcGS4sjL{17kC1Y^z|NuL2B$f^EM>`t
zFgrse0=yhIt>vUkaVf616yE{71~Me`wi*o;=}ZnJE)1u%!|}~m=njb)SVPy8|It|r
zfajkCqpr>o{bt1*)oIjJC`@d~=xKV=m~m5MX9C8ewB=h<;D0PvA|FFdhM#F|bmjXa
zGyPKH>*%vhzKUWJd9NYOWux4lcbTI<=byMtypHzYJ3A4oCcJ5G-umegmjOYWR0U28
zGmlcJ=54w=0{^fY0P076!inXk35v0u_e~{!6i?IYZVkpNT%?T3w`_0lxu^Y&G%d>M
ztUS?s`mP-1dl>(1_p@?*$w&S10E`Gh+X3=u#AEjddN-a0i?1J$H{VpWHmi|u#5O$7
zpLSW9+|7sx#qxHY-+1*ig4}od(YcR?toOnyx5O|S@4wlx>2Rexh^|10v-h|Fq6Z)1
z209=e^Kj`(4wWPg$i_BWm1i+=yo@{MAcCj&nLODaV<?4kfNQMvzP`l<snNxAK^x3;
zh0tO@;RfwP?UAQyl@}>q^mJY1IZNrj<%9H#OrCuNM`-S*HvC1Vso$hTU;k1I)HU3n
zrUQGWsb97jwUqn)4ZHfx@wvmtAW+~!UdCkarg9uzhzkW5k3+9TviHSSU`0i_sh_+#
zk=Sa8XHl9|i)8A0VX?{~cjFsDs5w%qz^ZRy1bmLq85k<ZU<VgUmZ&G|1`c)~h6ppf
zJtoJO7Dhwtf`QJK=)e1lr{al!eCQ?OpqBbBZYno4+_f9T8QgtTQ+cTIyZDR6@rS<*
zpRb%ZWqrP|-*m#y0MX_FJ7)0IUF7QvqFmG206=Ag(@wvV5fnK@qd7r@e?|}Uv$&Ja
zna_!0Z7Butog$HHEB2Y^V1bTAACER!I>zn&-Vnd0yEu6;3Ey2+a@|+HPD=IbGM^#Y
z;Otym*Nu*e5NsE=i}mVN`xw?y_QMOZg-{ebNi|Nbbv1<lc!!rJ==thq2c9777Nd$Z
z>74T>tj_UwVq2B2KU$%=*!zcH3uP*!a=3UW4u%pGzMbE<E=GadZwGKXo&g4*k?;*~
zudKQTH_IxsVg+%wgHrYG2CGs=d!uhfJL=Doh0z*ac)A!W6SEm}CSVWdQCR?s43STZ
z-SZJ$el=XOqcg3y{SFuP9C~tTl6(70J<Yr;XYue(X{E4dD{5J4QeI}1o#^rB7a(N6
zneOuWwxB(W98syl9eSW)7vl)#6}_Q2Ii4yDweQGG1^@6nRe@B?LE#3MwFNvSM$?3<
z{vQ9ZezJGFM>6vgbUXR!UzQ+N^6Xm8SeVNFJ<pqu<QZnfJQW_jm-KOr2@y%XG<9kX
z&YeDSV&((xt9-fM?N-*wsh8{Y%wCt}_}r*yo|B(ic7qg-@9Fu7L6OLTPo~ko=7Ive
z6yEW@K8uBcvN@ll<;zbue-N8`*T~=GkS4m0F70=0kj0#E5aML1@^sPwGR_G^5A3vs
z3a+u(+F24K|J!K6$?<BRsrF&*AwjVdHGG=&Cr*XRuo`Sam~79l%H6`4lq>8HDWUW7
zuean&G$L{1_16>Ljmz=kl}9e7d`txB@#d&HuG}b-oLzt^_VJu67Xr{J;Gc>Uv?U)I
z|N2d!GGs08nWSncYGD#Rd2y|a6FJfI7?#(jUc+l<aW+s7l}+H2h7BYZr^_$~Czeek
z!Y2QnoQ*ZmGFlL>-TS1!2Rn@*YZAFAc@{lK-ZdZbpKA5*ufL8S9jUzPE0wzP@~9E0
z-9P;J`@xcgA1jEz3GC3*yGs|?2*D0;ljLg<lQCiXYyTa27^!|B4gm?+h9asOt44$y
z9&#m-8-xar2T-(moAe%&vj}O{HmR8B+t-blZZt&T0t}Lh%aTDL{x~P{r01t;+cG_E
zYh<sKF7G+|GfQ*t!jBav)B}t35vzxPd|ET^#+vN<df`Q_c&}a8b~0Z~1UIwvsa%5P
z_)6_rp?DQwT&;L%W#vy}+lF-a*{8>LlQPuhFd)?NkhW)}e(@K8C-Yx@o30FM!ounr
z2~59CuKjqmOf?Yp=P9Y(n2jWO2)PN+t{FXv`Nh&DLCl>qY>$4Z)sfPRCs|w(JQHmO
zaYcv0yVcc-ts?*M`m%gefOX2>*R$yErx~v4``FhfYg?V5+oOVi&HPUa+nnJYUfY~s
zx5*2b&j%xVPW~%$D01p2@}5)iGwasU#vlBWVV~n{iP=mK2&}`*eOZu+&bRe96Qb4<
zz<YngZBO>-n&IvpyNHZ(DbACtIbM8iqkUg(X%4$W*VwL!)g3+Pm<fK-__^Puy$0Fo
z#P(&_ppZ2Z%*qiv?)7oRR946%h5D@EQ?<679kmg2YD<_m_n~DtGKZ%1Cht4{Nrs8J
zX#V=E#Ebi9v_NLMX|&DMSBn-WBaJD|{|@?z6`L+NA$`%_Jctxkr?6{=9hOxwdIIxh
zhv$p#bJV87wD5I)=&82Nl#?rzGwaxWInNR}uF<QUTMyw5TUvz9;Mg81Nv<d-Nb;v(
z{<o&R^r9Qj3t0i1H;<|7-I)!9oAA@icXvb?eHY-hCJ4s<fBqTP`?fAH{5x41*GiIh
z)lKa!eW<3@Ugpn=4Y+l><8g0K-Vm#3@QL@h54WVVO9EuCc3{t8GqL488;_Qcj@wUu
zsN-8r1I&6C5i&^6sPW<AS8&4bHn<t)@UP0L|KP}<WHqE(RTKmgML*_$qEADadgL0+
z;u|TF>yl%=AUgtq%2mgKGyi)@b&f7dT;*e}8FjK4vIach5XXhY81md!=r`n`jXzH}
zJ7HlNix7fYRpNEkAAg&?s@QgtpzeUW@iwQ#w#_a*$#Ca^F4TlZIxnU_YVPwjJqe}r
zLor{nNDz8%;NCy?MqdDd<e9Q(ae6m0ULI3rre#6o3M^w;0|&#U*VVb&&x0_6yd7}C
zf9O^y2x_e)rM`;3Bv;uLqp-cbI)D5HYf_DoN+$og*v>~PM{9ov*1)FjRKCIO^Gkbn
zZ#Qmqh`e+ce89tSLOe&?cD{I^I85D>^d=}Tbi^Tl(_tLAK^Ly;r96}~^@#?6*{!iq
zl>uSF^v&d7&Q5>~`P~e2FA+u`Zfne&bk~0lEaPaE)rZ?<YqiTHK~h*5-;2qQm0ajY
z;6A?=;?sKR;r9G$0Jq~^(`A-06Cbz5l8&PPFn$`{8h=*^9XS?JJ~Z^Ee5pWF6;Oh{
zT2aMaFCR?{$&YHNkwspAw!0Ho`SZGE%l7(}hd<l-Ob(vC$k<q^VYOW}MioE5@ORV0
zAWwEyziC^RX}CZ2=nlwQcMKM+Jc4%{LyCj2T6TnrB~FOKMJu8%uUK)fnrXL+I4`i6
zf51Ge(gztg)d2x&6Hr?!RL_#_A{JUPsM+8SX)bhzwOQ1YxIBAed#N3B15thW7kk?N
zyijzWwTuc(aVM}-6hJy_{({y}#ufVJN{#m!s>o#B;9%))gyRwfTz}gzPF>cP4Xyog
zaW~YBTxmoXDkl1(k?VQ{vL3}K0Vt8;W%?1?Zwpa!8JPzt?68cJ-6NB^JbdzP#@~y9
z1jhrwU?bTW&fJSIt8jC)oUc#sy)k{)&*mdeS|JcP_RB$n#JC`H-kBe@FJYBLlfr<0
zeCyN&&G^h&(cG=hI@8O++zf4?RFkTG+;C_Y$>3Y;NZx)nLB63tM~3xKADQ9jetwyt
z4tFRX_5nwrK@O~cQI5!uxhMC)t!<?>(?FIiAl)VjgFSos;hBLnRNe<NR*#jQ`ZCh8
zE^Tt=$Le@1xnrpE_J|9%f8^X}f(Nhtlf=s9+<{cEe&Sn8EjgPp>`H2~uP<@yp9$-F
z$coH>zF7ahA-7Q&t$@p&K7^xaE)Kny7)1`sAXfl%4KlAI3I#j%PEwB{Ke=5oKG*jh
z!HAU2?vpYZB4!p3b7|upxA`Vo?n{5B2UKDY1Y2ui{tO&t3_{`NXuRjt{B8B9AC2=L
z<6XR77$Tyqf3>G9E{yz>znsy7zdd*CmBm5?Kjn7UICUu~-ncqE*Ux5kpTspXHK4eB
zRWRgh{gCak@<0&kq~`L-S%MLnre}lB7rCFx`iuk2o9Oi+B2sLe1KR(adR091_xcT`
zN8w)Nl7QD-USj9wxPEVaSU*H}LnqE8Vl0(q4Yuy;k`urmL$?E9_>MYCcv105#pRa$
zz3=8}k<Bs^0%!7PZ)?D+MmW+%#>1^D>ClHx|5f08zxT~t<I69s$!8+m4g#t4+a0k_
zy2I#h_f9=I<q%WicMk&7;*1YBQqu0T|D(^RvJ^@=$yarGD*4&lizLxw6aj*CqQ!NB
zzX@1RU~2l|81_u=oXG3UG(*;b9PDtS*1<{dIk!;A43}x2Y?BlnhULr8M(%()(Y_<L
z-<n<>x$N>aXJJeERQ$}B-*XxDJu_i@ik^mZTt9(n4OKf+vR<2xjH>=;sBczumuIZ;
zk=J6rkw5oozVPPNG+%%L`+ve9{#0Zv^$I-*LMO_aav{+mCOVDHXs_s8{Im1qAvtUg
zW{=v%k{UM!TH+}A-ip6>pp`J9X0YL^3>c_yD<@!Jj{iY!<C$#r?GAB{m?Oq&iLXvC
z?Y5GgxVX(OyDWV<A_l7XPF{MxqJrlY7Gp3RE(Tq@6wvTy+Q-nb^n68uM8=aHc`*c?
zjcT6)cCOW^Vjizb!j#v6_m_4)62VfLI>+^>^}#u3<>vWzkzcqxKM3iMM}lGN)1<Py
zv1Q$FuD+0cvz_U1CU<0sd@sn>4Ql1m;Nbt3krUIs9zOx6iK!t}JR8D_HtVpH2Hk@3
ztLdzL4VLdUuAIA=^?Ln=N5!P){!OFP9-G-pL&`PxI86txEWc`uY5%y?P~ePkDw|!6
zre5by@oYohS52LW>b!s3mcr@X_ip6u`W4ke4_oV@PoP?ndK&|T^vl65E+Ph;#?*>;
z-&Q2!CBDt2R~Is30u2-S>=xzKY<4d6V%$iEB=hLj#x`@oqx=-=ty-s+rO<SAgx=2D
z{gU`#+k4dyGU+dW$LfeIHrKG1`*_4TJhSLdOMra%bS6<{SI5|oG^<+Q;)f~D2y7Vp
zF+QfAKlhZ&^~WjaMQ{(VYGNEaB6++`&$k<vZ<#(UBZ3zX=lCZQ{3b(sTI>dXay24;
z;^6%$K>m(uag#I1S7L&NQhc}`P|tB$96>lweJAxAnMaNGd@<dmzs6l$e>GwxB@Sir
z6Tb?lYyTpoUTj~Oqc^O&em-ozX<N)WU*x*YfztK`G)vQ6BsYn$^q&4NgYhQhIO5lO
zD~ybz>8+{hFS>#%J;n={_<ud>zkBWQ3%}AMJNf`}^Xm80Snk(2WhZ`3zxW1KXI1Fa
z_iKjV8OH?#1dKA8+RoCH#K6`0>k>K^#BPtc-hWEtXZ*N)@<6J2!{)x5SSK#ZdJv&j
z(-w{Wfr)v0XQ7T4PanM|YTKAwF?ke2!2`0cL=i@nBxW`=`F2xpt<b-kets$aSqDgz
zwjRCu-t_!k9<pk&;v4(n2SKlA&v7C}on1{;*<3pfuOR$@c|qaH0l=OZaf#N8>ZWoA
z3f&N(&|B!D;8T~-u0sg59ukAvOa{Un#i%^S?Q8=Kx#@)3QDKGoS{xUBm*bj6v{}(W
zN;PC|i$vdt0y}`QEQ;kjT)Z#ye#3&@=UGVs*1C4yy}67kYpKYxcV-PzJ?=#}H4>G5
z_cgs*a<<R9K6sSt>$}LSQ}3MP2M_Uu9tlyqf%l9GIaj%L7%(m}?mY&;f4`u%R}~RV
z@YXXh?2A17T7w6H$dN`Ct><3HVs2m-_bGglEeD!}?!+ck`X0_acj1j)>kbx<#XrD$
z`GYN77cWDT0}|9y=Ijz{q%?ic#`wG3hxPR%Q6@#)vrB_X+d1bp^MATjzwb;nDU_~%
zenw%Q%M~@PYL_1<?Y?P3J8=s0XZLUghkAprN;K8=n88<4=;w@;9@DD@N8aE{PMWd5
zAHWF%`_QHV<O@i5>SlFt^EdeItyM75<I?{!sNNk9<~g}9+tzFH+g=6sP?CiJXWk>!
z!GTOmG@v$6N|T^EzCB|T0rHMf?A%60NoGwF0%5<5J{y+VtB3zk-&o)O;z#c@@8NOX
zQ^&Rs{u);JTyEmlD2<!MDk2>IAn2-<<jqRtx9|9KeLpa@D`#Zr<Bi*UUWd!SY!lBo
zG(fyMeksb~*)Cd81Uv86QIqGdkeO?rK8^`fqg8aas_hW16QI3w<o15XPTrF%kYi=W
zqFMXP8*9LrUo`B*t{rgX_UbU~5Y>i#&nx^|rq|cfhqdC*dY1(?Wsurw5pJ_CN4LU^
z+YI^~KFwep^xYjY3f|U7$Wd-|s7gThrj7GQ&THDS%E@u(dWSF-@Wqjf8ifrhCuc&I
zhWI&*Igd5+1v(*zugzC@8Of}FQTs3%Q}RuQ3UW9sHGg8kVYFgQQGLrx`aV!nU2-@}
zq`4Y<N@Sl2*g%HiKBdDkeC2%91(50+ENMB&luk6ti#|mH)CumhG$IFhah2EI-;x9_
zqJEnJhd_%kMEmILdD~(~)>KVA(y^#s_jvUR-IkBLA#<aorfJD@;?=zO$>EIE3w#v!
z$Zer4XyQe7yr$}(+=cy6!(-Ps4+`OeZ)-#Sx8N^o)gGz0f^T9><)7^72k6!8vlx(F
z#i$P8L<K?M_PZ-wpqj|p(fS;#mHB{iJqVkS$Hy3P`Aaw?OtB1*Vd6DUOf1^EA=N&c
zY9U)o%3Cs88<+a^r&_dFjrYYUO@t7d%YXCtP2j05txJzrw@!>#G5FlsLx3!gzJY;b
zdD{;28T%?d%te~DQRs7!V8G@Bu7v^!y~|U%hS+m5_Ql4(m1A5u0^fTYcr>8-toNL}
z9lKM{ychYOBD?<C`8H^yo&yM_$i%1d@D;;zyTBIwEXV-&m*fE{i*S4F4Q(j(%;h|H
zZ*~9Q7EBvGjW?gQ*d2Jfzy2DlTLr8Ju{Fy|Zk5L1^1Zp9KjU9*6dn%Y-dH#7a?nC1
z{I+IJjhJf9-w@*2HufmWFYNADlLbtFxv}R#U~VnF#!iN^_aam^bnC(1%^nlT-m_px
zWitX~hD?Y78-Bp~G56nE=)-r%F$bVCTZ|9bx8lsBY|a+ux=VNaTX2U%OC9NLn`rXx
zKAl;Y=;upRf9sQ<>A_N5>)T>=dw~~RZ~<00ySQG3V!!Nq#Qc!YkC=xa78*{$d@wTe
z@>kJi`h}RU*~nvO*#10RTfXJ`xb@&aImLb6(r4KhsQPN<gpgZ7Iy|L0M*G|ESC{Dc
zEdlfxK}aKC6a+W{`%yN=LxT`{CcV-0D#+X+@}vvZ<?_EwE)_^wKpZELYas-=H_0Nn
z0HL*2&B}G9d`rd6KbtatrcHG|({pw(1VQ@%4E`Lg9v4ixndW^3IQ|Dv=cySTO#7yX
zc@c^A_tyH62eHDDMrVRk#)L;k_g={~N0PG-|5gXo<+vds#>r)9<hjr2BIlpZ1@@-W
z+e;@g6v5hBwPHb_%-~4*&B+JXNy`XNf(fJsLw$P?nVLT{gG-dxCUI{hN$#pL7EDNP
zn=^X=j&ppd{B7ztq*=$}npyDfr{Ci1jy`}y&}JGR09vidIq$zb&Hs)QBuYB|jIxSe
z-X98<+!uGJK=51aRR~s2l4`L)wr-dvE#lXe5G>XN8D>GB6dLn~%62(lEAJTm0oNPJ
zJil$ppY|X7<^Q$qUJRbbcPKh{ZS%gu(=2<t3hcz4y86xRw-H2LDG#e0+O1(8Yq<GS
z0bKA<fgU|K=B=}%-C^IxRUEux;<adLv9)jurtZA(KA&xP*uEkJVC32cV$4N}r%G%B
zTqTl8O7ce#AhTn!Gaf0LKfg>Kkfgps2GmInroU`nvjV&@SpW@C1fCk(AAi$}oNmc9
zW%&Y%fAh7XTdKjcb00C2^f$Av9^4l?uFck`n|{(1tfh=8BLp^xnK8ozCuZk3AE45l
zwNt;j9&~d?9?91o?%<6k0!a?=G)Y&w_fh*IhP~DCR-f&w`lNGOlOY0ku9(4@PceOO
zQmqnel$$%nF1L*#6b){xSQ+y64y`xrv3f2`Y3t0G6*-6_lK{H@Hjd0LENH8~CvZf|
zU>YRYBLd1<5y}MJ)35$X5SgggT5{`^l?iogr8|I5dzUiN`;`aJH6HCgK;kcOLUON9
zZyb$%SKlWJ^%htmbX2EuM7rx8Kg9UQ>m$M0f0i?}hmTu;L2zY{54gh4nUMeD0+WlL
z)U<7RhK_O`tueq;z4|)^P9!w7jGID)CV%uIcW4=j*HjGodIbude*)2-+~1;363tnm
zc#1k`a%Oe?Wg__R<G%^BS1;@|R)n@bH9zi51t{-t@rb3F>{(GjdqA~@@?tmv{j%EA
zw)&4_BzbE7%Y&N`AWL$1*&1TO+!DLxnds3r4E{2X$wdq?jtw?%3b)?(fmiE-fck}x
zxB=HnAyXJxjT9E<NO3urppXbVsK*_yRRU>Zcagt4pu*(RbpJIU`|V4+!5-GmCZq1;
zI*~A2Uo<rQe8jlKI4lf8CkMYJeu>-#n)=ExVO80~wh*HLKVI{n<EHxHTeUq?D`H;F
z7~h@k@h}K1pZj^ZP3z*w+NMby2kGdpI}lTD$GdF_8J>qB`HrbHE)8aq*G?i6w^wV~
zEU^7w;_u`pYzpH&)R=lIkEOY)IQJ_6gGz+lYnA~qIv6U89{q6h{>X5bQm|&n7k}Hz
z1)SLXK=nQ}$J_Z@vRY1{jnsb+IIolIVLs>By+TX_Dl~Ve{vch3hj{<nG?m1m2+`<e
zN&fNN2msQ(j7w#JBQr0J44>o$F@`p4UFYAfWjMh>dLSNdmrf}*>-26Gb!*19baVM#
zsjh`cH@BJF-j0O1j4Oydp#EsD|GSW^g<OG<Pc3`?XdJFwX6RgdcEqc7;q;yW-u9aQ
z^Y>m>eS!gVh;9E24ymm|XHV$UyE<at7@K}h(x~RE=!3TEVvn9Se6Z5UbemwWi5u$a
zDr4FtDJGs+;DbG_qXVCz51aFl&CLzC+<q;S7nhiJT{<nDt(Sb{h@$D{)rNQ>tN8#O
z;QJOrmO|Tq7R&=m9yG_Q$rA#h+cFz;$H~5$!stVqf2)(Eo2#A-oRHC2eWwk6#|Q;4
zQ+y$C7oNF=G^k&9LR?P-{t`kj5x+NFpVM2beO7?`7m}jH2d)-8&HAbGN{gHh9aiE6
zL;I_7L1giU_hL%rH2drP=z6T0-=b|2%noE5179|4*F}END|QLx0-aNw$^bDe`fnP{
z@!%Ps##JEZ+UkyvA9IQmLS}rb$nR8J;Lw+=-|76;R|*ZN1OEjAng<->47xX7B*5YO
z%y#@iZshMOaVG<0=F@`4ZZ$ikdng?TL}=fZFn|L3`6{-btHZkj0~i5+(y?etcf?L*
z5RSQJF!fi|)H3EJc3DP-Wdr4k0F7~0l-_v=Ji5B<g%34k-GEUI6P99nuikQ9FJ=FT
zQM|j|lV9?$FXunOBAgXGFTxZyl4gJOebYJiSaI}0J&nSFoBKyKhrEgc!dIG4!hl3I
zE%}c;`&n)O8GQ3R8OrOS038xn_KI$nVLff;#Z$GEe=&d^T<d+jETwzfRT9YI80;%K
zaU59l4>UAlYl}kmN`a`?5+@Ot#v-+iVf%uc)tu<t;oiCKUU#=SrdK0CD>YE_hS&>K
z<os|JNO*SZ(hy6TO|%6t=x?}*K^}MBgkExx%O2?PgKYNvPQt(f>lW@DQ;idzdMd!S
zC+%vsMX{~yqWxdaeqc2}t^;&EI2b~Yt~Tm|WY?bENOaWp&*RG%{W~=~^;%#Q`ymw|
zKb)eI&QcAq@<&5Q@sEXoEMw{}@ZiVml)=4E8e-QWCP_?ib2Qt;{{=K$WQk+etP25}
zs@w1MV?uG5UB`7prIOZi7=&(iL_3eV>(gaH-xgQ3v+E-Zrk6y}L3y~D^GtIG7DR^s
zr>~3bw`I>D6LRc#Th#vUD_0nB-wOg81};kDAx0KAweT$lcnI}g#6oi%``WP=%sRq;
zLMnXuXO#nPb1n0UU(R%}j*4~w)R>TZKQuTO1EUi-Pz`N&Y@g;bk#P&<MT}8f*w#~t
zo4uOE`>&TTeOn~~kDf%<_QbB#LB8x?L)IE#e7MvItnI$y6?`6C&*3G(ugamD!&>xZ
z&9HASWl%!>i`dDi3moVm^$r}4Z7_!txNS=5UCMk<ALY=FbIxg4L!qQelD}|X=381l
z8FurEv`TxK4L0qDF~AWcnHmL%CuxUX9{|$}aq`#5wMRQ)+4o!g>WC#SSA{gXBnxQ!
zFIV9Ie`|^+FeskwFmnSshrK1-cl}*}m`;KE6PO7I?7ahZw}qAgUYI;%>IB8~4Mw;=
zYAy0T9Ntv|pMC<Ui3ZmCk`!Yt9y<{6_{UNap!NmoHpnmLiMBs5>lfbT=GUHgHwpFO
zQ)9)gDs9jQap(w|)`ACzO~7WT5_8|<I}bNgZ!Af;Lw<<@#-&qM&Uf51hc;~=%);Ot
zMiy5~3N7ak6?%D9PiM1!P@ZJd^;8J;knfTcQBj8uBi`d3z42kRT1fX-(_PTrU!ERf
zY7<jpDSOP!=d!3a;o-b@Q%`cpu;ZpPfl`GLkfoiJo)ZP3_XeBn(JLpQy0aLP=6k(@
zwWG`6-@zxN5q}DZWC$&CZLANO-p&W^ONNffwZlkoM$?rd`VJE|!*r-xh{ksrU(v_|
zu3Zc=8YbwXJNVInSnTCzGXxMVTQXb!_NDoqf_D_uBkqlO+Gg!&P7Lk=YcGqzh1`X@
z1UZ&PLG7^w77kA}G&(k#UOs)&OD*HkOemPMN3r1j2B5{4lz%R?=I(wOMx}AxECb8F
zO?SIr*XoyxfYg#F>@oTe0if)z;Omk|TK?!L;<%tlW)qx=S0#Rb$R$eF;&!Ff`0{89
zzIGK-;f+Gna8su!U>B&16Yj}@GQI$fn_G+A=)q6m8oMJJHhncKzmrG*^1F)`b@fRA
zwF%m=2OzjBFMXzifOTYFgF6Npxx0P!ANBSq=k#4XvVKnBTiNiy8GzV#o<Y>6jy<E~
z7QDzI{OEOMOBcmHURco^s;)FyvJ$pmy4Zz6c<^dVbNA2p9m(`ZVd(Ls6KFi3-El`c
z#L%Bpwq76IxCd?&tGlY-fR_6<9WD5P_yaTpMrg!3Au8V?;Etg^VV3U07sSW`!|R8P
z-8mps`CIj>>ThEzYeiazD!&uy7iP9v4j;lSE@3~*@A@A1lSXi&w%nwm_mZ(6M!8nm
zyFVj3ptt96_Ue?*#M`T^`swU!-xBS(sd8I3Z|Ky4Xc<5XxoIatV(5!dzsFwQ?rLVK
z)!Z!w?N{<rmEvT<s<8|nTpZ2o_s#)rzuxNM0ewbIs{3cCH$LW2s3;<UD73m5e0_6r
z=+gX3A2@Y~dylQj>hK$ot>vtR__Bww995fZu5W+bf8a<scb>xn4(Tfcj_bosf*?+I
z_1xxl9Mh5caNIUMRWvg9xEi`Bgq(<d5d$0r0F0ybxu6f)VU&|S%&qv*$QSyeRLmP=
z<BG=h!G~YgSY4w<eXnvM#ZwcA9Jt&{@zwjH)H#xU8{iGHR@?zJSg!&**SkvggukE8
zel#kz6$nr}AMcs+3t!uz_st0H%*Gk{#1WhB%!d+1>2Uiq@?7;LwtX9b-M8nilcZM%
zmDFl?A)U_3J3;2ZaeDEZH4poU=BmJVFMV8(RO2A<i`%r3Jk6%uIb&N=p->QRi~$iJ
z_8s!b!XAscJB$f=JHS?d8*<!S4+w;Go%~BcNPH82>B*4Y@HOPpbIIHeB)Jk#UDg)+
z|A9jU64S7#AYcgVQqMo*0hiI3frhGDm<B?VyjR0`NCnVt;@m35P`{mTuQ;LaG-Yl*
zsvCAkSz_n~P;0w9CZ2^A|2@un&J#E|y?yJ!uRj8KW=`Ut-H(`i=`YH`(NooM=sv&-
zSx+)8JinQ1;lR`VUynU@5P&&?AqZdpHQySO5$-L4WWYx*3<-h>0FIHc&5g&!J(f!Z
zNZgFf{pL+}q;%-QD#Y9Ny0uJ*j0Y~;9%87T3SgLr6mmRk%@N8-*%tqdeQmluUG`uK
zP-2A1CE&djo5b%j{II3a^7;9OvEdSNM4_z;pz3hOl`X}8P&gpTMBG&Jkq#yFMcV=-
z<r+Y~Vgm4+VcRNe@eLL!`{U-99DFhCTqO782+uabS<W;-EgX>f2zvdFfd+9y0$YmK
zktlYFllC+6N0-M`2Q>8Hi!o!*{`9`|Uuk5p_4B&DA$K0=?9uTFBv(O;PgM~~TmvT%
z&bj0DM*Qcgq@Xzn^Y92a$TYIS&&`M<OW0gfnrz%__kxK7__UfgDb&>~feH`Zow^qR
z?M7Y9IT7^WIL1Ih3iMlh+zAwPd{xtaZcsoy@X7PNU@x0$BO<xX{bSyG7RF8Jbc6rS
z$LT-j59jPee@unX7f(tlhwlRDvmY0w0q+(F9n}R%$wMdMBODk57xoR=J$6VJd5Ygv
zX6L4db=&$ohPSxKkQDZ`+8g^u$BJEFpZdd=^=Rfw<fGtT0<iSBBq#VWMiLzUUgZ!Y
zPGV^d>EP?GO%;3;iT4K1kj}&PNZYhTtxv4)H0?+GRnV{q&=AFLS)*ogNJiciZtQ(&
zMl^cy1E3JFr;sr-UGNzgY8RXqI%-vKnn4oF6Fo78?z4@Bfv4NMzLqZ>4QT;LH_w?8
zZxw$*O8phj>2KHn-pkrLDDhkCnmX9bX}UjPCm&SOX=;s+^G^pY7G;B>z8{;+hOhR@
zUtNd7S%lS!#(OXB)5&*=TbD&@^ya@GY1&_@eb>Hl&wq#SHt);0)XYhX$>v}y1Mtib
zKDB?o{g^qGpM_TFau-t^ND3R9|M?;r`Ue+R`gVLbnBqpfIU|sC&C=WPFgs4sH=(HC
zjQ<1A<%oZ7XupwIwhecaJSKBU3_16speRZN`06IL@3ZpVi^#M(Iz}w6_DuI<5WZFj
z^%Nz8{^bIU7N=vM?h;VZ?*1-=b-Mm{n(=GIObEpQ?)`GW00(O6KWjsMq=>rI9VRo*
z0P!x@x&l<RNFiLG{uCMdV`&c><KfNY{eq_AdLyow$4-a`MExFBGz-Z0&tQPjcEgzj
zp$oN7h(sj%vdfVD#2Ros4@lg=#BX>vu+^#@@_5g^_{(%+HwaxlXoUOq|2Id(&9m$~
zbuexb9KR@pbn%_NAdSY)o|n!=$0|(UIsbK={__^1PLKFH(&c;U$cIh=D?d~cIwv-)
zLh0=T3S~1f(!lLbcmQx5pKJ^SHb7Wei(_Y=)@hD8EOll-=!^l#vYwebTfSg(-*RTR
zrw@TzOu1t0K9*URB)zecP<f-nd}R)zHad9$Wb4{}<oNZ|*%bc46A)-|u*B{uK+IZ?
z7v2VzXCZATR$FiPqf2&Jr}({w<g@z9YVfKvD35pA1CXpOh+5b+oCGxywwlp}+nx}1
z&#}us;zhTBIhd;ec0U0%JNg|6-nzw)3%u9=NrW5z<{Trl1Xjv`nKI>EQO9ngpQotj
z>eZjJ%rZ{}=T-`L*|Hv8gv~J~#v7=3j;XW!!pQ5}o(8MAL)>}V<l4emCBml$ZHhd0
za11-j-@=DS3b;Y?MA}4$2-op}7y;A;bO+^_fW?uruJRgqLVw3Q*m$FgToyJdO%q)L
zOMgOyn8CRRaC{I|4uH)(6;+t(hjrVq0F_ILIsESxG1hoXU|>IM4hFfqO}2yCjZ`{>
zuNav_L@_V{GB#L^1n4)b%`iN;++2lg?*L&+H7_s8qlyU$=LQ^L8yE<Rio?i@>AiSb
zUz`}M;D^#k?GeZdae3AT+H|CGfn;))6kzgg&KI4%u3weC>P+ng-c9L_crX?p$Q{u!
zgh}8;)30u)Ok`B8|GYMleT`_RE|1E?Uj-?V|Ku!M2$;~Zf)K#&8UL0*jF^~0K<#kK
z>HZIwi3fEN^>1AFe)rsXN$%s|%*=%NpdQl!aZ^h#a-<1u%?dD*0N4Q|k1euOZZhpi
zF(OTpvur~e>%>gH&Ra%-JrYi28Y4~HLvJX`TTls*+VQsQ=y|G~x`GE^=!jOPQ*<<l
z226W#ba&qBJ1odyb(R!inNF=N80@u=XTxtcJkA30aWRt7ojudgS8U=hS$47jI3o*s
z$L=rF>)3;~)AQABS`pD^XZVsOiZS7aN7*OM?2CVvNCk4J)x?{RGQy1<<6*pFT5cEj
z+C4kPwmWiCqYxRv`~{xaX(8rR9dt8$s{mmdx3fj993rs5HaR$d;d*i(OM{RH4VTr?
zTVOoNkc<o75F+1#ibPtq9#27Dzoe;yr%0p%9F<^M3F#04xc#1j+y~@*b2@(*co%;a
z+;9p9;APx<6XH`<AT(WYhqZj9yZ_dUW?2(Nk4CwJKZ^F+<F4R7-1(OVOf>{E@fmA?
z85#>}pMg`iYa$MSaABr`*;{Lnx$N)d0YH6g^RV}vpM*0wx<+qQhUcWocQAuj;j+JR
zmY|ji9D5ZzMhd16v=f!fsyjyO#{t9mJn%dr_{|DL9xUjkbK_;Y#K1xIH5n>_!eAYr
zLFjhfQ=r+FYi{)*dOieDxi)J#vd=u^_--FQbtr*%cw5Y?PyKR`C}`gUg9UVE#?Hu%
zlYE+wbOtLG$NO#x1g6YIAiwN|7!p7^q})VlhbW93HJu9juMb9(9ZdjAuKlC|zgA=@
z{abypECWy)qOq||7$R~n4!F^=4r$uHbA=bsqPO617;y7)!`NSa_2>Q`TObsxcJnxJ
zw7H2#oV^dcV3)%wRJ@<VT<wQH%VsYK4I(%IGG&3J69}CHObag@V*Lz&NRz))@e-K4
zva^g$3nSu(7G6>~V!T23_}u+#Dl0j;S!Eq+PG-RpxfpI{8)=xdZ5jlno`FCkRiN~p
zkv24-@r@3Jx!-t0^mHMzebH|KNbHWZSgN-pJS93>o(CUH9IptNDn@{_leePJVL(%L
z4>xo5Zc3N9*Gb4^QrI82yi6D-phFOq`&<pCp;Y!XrvE6Q{(2R0$tuGDDFiPq4lpia
zKCB(@HvIt3r6S5uNR0saeosDkVi(lUecAzgp-)p1pm)92VYIpA0(BoWXYpa?v2Bs5
zgvm$(Lx_(7I=^(Tv88}Y2eu}5h7Aa{2IK-$5_jCUKBy^QwgDJd+?27{c$c)whcAtd
zJ~b@$=e>*=2TBDixcNiK46Fqs>*DzC0B)P9<mZ4UGX^MdH<qAN89X};Gm~TcuSc$^
zvNyJ<KWNy%mW*^2U={fi*YfA_m2nWR(ES&3#I+xUNTA8bf*Z)>u=PHEaQc{x96;~T
zMg1@VLeTVol&`FwPcrvdFPirSe|F%2txG?rwnEDU=cm~2^7-Z9TLV0S0NEG3bt)&8
zLAi~cAR>-(WUyoWwSSJ>v%Am@z)ly#xep%421bGskZ1+6ASoQtHSU{sOwI)4cG@uv
zI2OUk(3vwL&RbFdtF=J_Y&2+v*`V0>041O|n}5^v>L&N^Giouq;z6Xqso_w7g?Vtk
z;=~U_I^DDQCk*C65PF0);m^1@vF3}VcAw2t1<19t$ZkxaImqM%2X`*g_crt6`q_1+
zAI@z<4oUk&+Y63zoGgM1_T0a-1(;g`fOgz%J_t_*wJSNX#>tc@k=suQjI@{|m{1I2
z$VSXet`3-c|0$8FK2rMM0TEW9)eMUA61Viokq75qLDW49%u6(oJm;=_tX#h>a?Plq
zKa4Kz6%3t}Eu2TALi#<j^K9%PY&}dlY{t(BDv>5%;J8c*|G)t@oY^!7esIzOqdc77
zl7>7v%tdiuzYM<0P8>#??19eYQ9fjWC0DHfvPENtzc*@NIYaNhT_^siB*IsHTAs4x
z59-Bij7P>H>fM>x4Q(U`nb(^qqU<Rbdwe$j+Z%_#slqi$qF|z>D9oV9oRbzGt7tOo
za@7jta6L^s=2##*ibv+Y?>mZ(3Obyuf)K!qf$<iJRzTHTBgDSYTH6Wo7j+A>SY3x3
zV#aE8M)VU~;_9!*&}qLx0B4*myacrMISTv%(&G!EF`Cb|{sp6z7{{|*2L*C>a+V}3
zgzW%A1VC&vUDkN^tQ?q=u%|7=NN={k%OUsYY<B!6hld*gR0I9m={QM-?P*qyo{rF|
zKA}-DtdnuWG0dGCT%!7Po9!a;ik3JwTmNE<*j2s!tBSb%&ooQHxT>=lyLSsze0!LQ
zq!<#BO`LdiwZ;L*YXnYz8cFPzz45WQ)9Zrj=lgQBj}V{)_7z><u6wxCnZ*urkc|I%
z_aqS#&)-fi;*0=?g|&WgEUd`SxFaM$-ah3~Yx<~SmJFL8Ahv{&?jeSRSRWF*QV*OF
z*%yU*_3xuEy;qpN@%Kc}5&A~Y`|Osl_<g6v(c^K(Qj~X2WPpymMSiPulUwj}(#CTx
zV)NdPIFae8y1f;@RPc`fnRHb4-yU4q2DM6@j)t6$NfKs4PaTM4PrkXVJj`eY!K$;U
z3tYS5h@pbaT_R1H`<0lxH~>kg;bjGUg8huT18-2q!+_Re4y|}U%ZNU<eE+5jed|Yi
z)amkM=srJZY^^ZmZZ3MaKn-GtUhn2$PU#{OL9TBcOmjOmbI(^y%BCD60L_pOi$K3g
zvZ#C?#0@*DA~VpnBiO*F!PYiGHAE?AFS4S*Ae-!`(XQ|m#(={+Bs^>`2a5$x)dRsN
zd>>?wT?XXCJa%R`2?GWY%>zAwr&x`hsfey<)7==(t#?g;hS=epl(-oNbORa-Q8(xl
zC2N9g(+`ANzCGYjk|A)L-N)V+*N=U{-fmP%IkUS$^0^q1#2`i@F9jhTys}F5w}8TF
z$TCEXB(qe+mUI0sK^idiCObyh2t&G$n9C@TYRQXAMI4AXD6KXvg^o}0?UE4(0O@mG
z{k-Xy2W{<0qNEoJtoq5)Zgq0bm4-o&Pl4iJJet+o^r3hN*QS<gqGZOdXWfseq`$tH
zw)^)-&u}YKiX1guF|(TL$a+@&txWS9rh9y4h0VVHFQD}pzycA@K{qxb#Px@&Fo!ju
zsz4WSXkkP`Z?-nEjFOvuTw^%^3c!Y`Z!IfV7WvHDH#eQUPXCY9^l*`0AB=p(n{gCe
zi+=!$;14kxAj%Mf+A)JOH{R{^z0zoCv2rhaD3~e>QXDb0)s5G`q&Fqkr+jJItDR|v
zP{h(dC15b5xQ?hBLn=Qw>cZMrJ^-=_d|oD0@Q`oVfxS<)MVrP-9iq0SfDMLGM%|hB
zwv&@x-wv!NS5U{Cp)DzLMCq8!(WugG!L7dXVPRIy$FUr<guai&y->VL1z{qQ`b20|
zs2#9Kn06j8MPA!yT@QM{MRokU{cYr)$;Vm(c%~W+9QCRiaX`DSg#+Ab7PD!oqKHiw
zR#Wjnhf7(-U^Mi=61X@f&93}xwTP*=^7J*JegR~xbZgk<k1*|}|0Rg6Fuie9;cC3{
z8yEle0PNA<{QDmLA2hHNoPxSV85d2(LA5AuwR|^Y>+BMz9a2mT<S6*^A99(*yLwCq
zEHS3guhx}*Y+yBkW6ebe62Sv6T8P)bnn?qGZ+0)H#lhBt5G@eeRNSqYrHm*5lFJ;p
zbcCD@4OYsmORdlRxKE(PAF}J(k$4S&iSn8@0<g%uu%&;&Qekt)?UxyKkP<7F(=Eiq
zve;Ok0LG4-w@_v7`d?L78V}X`x4&n04931QvL!-x*~XGxX;l(Kk|LDK8izK7REiR&
zNd07MLuDByDSJ|gj4jHVJ=;9<fBC#Rug;5mK69V@y07oGU}0_aA^J-i@|DN1I9fBJ
z&sLc3IWJ`UkRy;pPV>-7$O&_=yzl{~lkC`j_3oP^{4BOP{cUTJrvBaJK6~Hu8Qn)t
zDSxI|y5{WN|Cmn@joiMGPwX<8)*}VXUp)}%f_EJw339_Ce!zvLy9c2V;biI31q(d&
zFv+ZJA4^P__EdaSAFtxXYu}etdF(njgBw8|_~UUM(;byL0*wD~e{2QaSubT3Uy!JJ
z8{VrP{J}|laIENhzK{Huc=UJk1!&XUbtO+pTQWIkWBKZf1x=yTY$tz6+{BZ9k@Lrg
znGngRFmn;jHe?F{+Qk-mcH!4r(7cuB`Y-d<tXd2M^I#XF5T4@dzaicL#l+<}ZkDna
zly8R81*4iDGQ6pir^7$$GL(r7Hw5};Ud1gfJxW*Kstz6KUG7U!9{dll3(2DnSRMLX
zJ}u8W0$kAbms;3mB%g0k5~e5Kae2q2NyilzOJD_V=%4(fc4YC`?`LR=ubs068N_vU
zIYBy`XB%hO4ZzrVeEse3m4&JxV6NrVW7d(2<a`IPYO@CVH#)NFO*4Tf<~0}q*4F$J
zK|rl~x_GOm(MGWCd}5E`O>6^q0PzA)-+Ce$Tf~x}YWtUMyYMPr{K1RuC8Z*$9(M3c
zF{ge}n-i?x8gYjR46g^#AqZ79mfDW)7d_#B^2_}3mJJV$abCOoV}<EKTMt_~ew6xp
zn7|}(XkjZrW$D%mOsn~Ih1K#{of6HBX5Ys#lcB%*TcrZ{Z6-*04^S6^cwGtn;RBbb
zV|bSa$)TT6I{%*8Qx9WJPMV80PTOw`oPtyw$1S55z?+e?vL2u+`}GUDuQq6XLnT(}
z;j*3hCeie7;ppM7H)x|G9LoJyr7Q`4YA=sJ<*}8PSS)ezE#u1ZyQr)LTAH~9lkxn4
z<Pb~be$_y>Z${y&D-1|O(~Ohf8@ZixBtSpJjIA!*FfgRIY_tetjVX9Ck(yg8)Gexb
zwDxoaN;ev_EywbJuuKvyYYVDzc*jpuh49r`^T<(CX*<orw;|{xxZuIXRWwmHV(O_v
zmgd$tS(+VqBaW(w-{3bIZUM^6%Wg1FNkgz-`<A_T3$2BK+Ol!x)vkTtxs``YtFYou
z{F|_T))uFx^E?xBUy!w^$k@>?;o)^3^f$eYjJ=Sj6|9X&331GrY`cy2M<v@}qZ>s1
zTn<h?ILz_`N37WnC1h=ZRbCAAwJLTMhN{6H5~0<a4ZcaCVppW;joY={zLqoO!$-pK
zcLadu20bG8bR73Dea1if_>Ygbp>>U_PW=w*xZ+2|nd5O!=ZEa=*v?}A6*v{FTpWM%
zE%_5aM*FMUIhCBg-$3Yy;l6{M6kT$@i>kfflNmD@K-@h=+$q5E>4_1hb|RMKHor?|
zo;TS`ZHw4-;u1SW3&N0GAwJuE;AE&Etp{m{?+paDjB9M6tqVw$-U(++FCa<lq=|<T
z37)|>ztygwF7Mbg@_u*_*#~&l&ObdtlFU=VlBP@}I^yVvb+}bysDI~?;T)X4#9S!*
zmuLv+J$5EQg9s%sxCARs&bB6O?*4iF=jT0`t~-r~DVv=wG)05An4&LuXKvhrFg_Fm
z!HdUt@tdu!fqv>5DC^h#!su3^+l(Now>tW{z>_;WH!`zOo*Zmb2``_PSV-cBD{rpx
zYe^H8IW97AX)&P(We&L)!X@NC&)OlR^0v!ij_mggbJvMX8N&h!2~zbrvN=FU<)m&2
z9~LoWlWI?Cw$ASljNpY$*i?x&FXTCmzzUeD{>XI%WQh&-)a!nTc<~i0Wym?Sd{Jjw
zp1Ct0W1~Rlm*2^`3;W1YwP84C5~q%X>Tt;!mPE{d8_iNuwa&EZFB`iJ_}Z|b5f<{F
zeL{@SQ|?p5KmT$~%a*_rb3ehoT%B=K(yI@1)jKxh`p|xOt&+qEPckZMs)+tMX0POh
zw7F5YDoq$X-LGL`K8*L4r^P(TyNzGlcFhlq8fra5<}g%0%-Bi{0fBq$BQ7v;KHmab
z8OM-tS*TwAnv73$L!$H{K7-vSg61S2@stXc^$1JfcHv}SxM&v<-DCcbf#F=b8SNuo
zbN9DS-lP^HC(S>_Ur1G=(N5UIx{T({apQLMY8SW|@!XIG=$AuipGG}L2JT>&j;LOJ
zGdRf@iWR|>j(*|w&stSP6B*c@Rrb`c6aSWX`SCD)bn9?b38Ys6LB(eV^%1FM^*hMv
zO%09sgq@gZ8TeXbC5zUObWRBN-<dXdB+{f=SAWpm_zHq;WoCKpMaftt9CRfGMLtJ+
zv5FS_Gm@O7I}yx`v3}v`^_N>EQ@`cgauJM4km1mepx35%A5gse<(~?7=>_+Q$-1cE
zmC>H9NSi|5>cvcdLJAhJ_SmB;GftenwxJ`>ovH(i)(BzLGZc*Hv2GHmXyOk7ZLszz
zhPM0b2eFs%A!r+KSiqsB-(Nf)P3m1A6l>W2Gxlg^tpCp#S5HEo7vsLD0ArK+bYofM
zcJ!t!YYb~WkOl@Dcf`y`lP{|l_{eL0wx-^^z_GV>)bPMpjbmpw{sX_5YsH#;khYUQ
zIAUg>xfm4q0R<PAz}w&xOIEp0@VP|OMW)*^R8!`)f9sZb^xs0#4@;X2vW>B&?{n2C
z(LOG}hP7QpFm9V`7C{YonjBwp!Iu3UmNFGrH7Bm+2KVqG|IP~>sGpnI!NOMDySx8m
zY;XA&Gdq5o2%MMw^3GFQkWuKUS}xZzw9wk9=Pu`aU@HHwGUhdgCiV~y0e1?`Yl(2~
zts`<T^}*|qr{xQ9>Gd&XQvjMhl#cNN_Btk`o2F&9o;!Lw4>idYK$DfgGmq3Ieo>3F
z7`{cr`!jYkLX)KXJuazXFcUh01oW-7)_HCm_iYa-G0NIo!VL8xN;YY{FBX2q(M&ki
zJTAn3+r4<&*c812O6OUxT;+#dz-Py=R2W}aS&%Qq_|!j2{rE$;S`@;b7DRG}qIdDo
z0mJj;!!-krJ!Ar*hW4JkPt_9W$DUB1tYQuygc)@zSFFNU#Pt9{Ylu_#(O+r!Q7*wE
z7dxdY>=XB+PGt~#zs2k#cKNMftRL3q*EyJvCWgK_0;D*vS>MU$GAHQ;VK;L2MB`n$
zDK($(zWrTP{zI1LCFT-#fbl35R_?1_#bs!I=c#1$MFobqivI0o_F^iss_(|ylqp_)
zUbmK?p^qOm&&4oIw_2oxj}TBR`B(RezSIJK5YQ%|=g2@hOB(}2GGw7@d`S1iX>R(E
zD-7emKxwEA;^)Zdf{iFx{>e?Bl#DqUvy^TmxNk!9ke1T~^`w|m?_5<c7QJ*d_{(Pb
zwX08Wk@KyItP;m(^aAU+=2E~vi+Y3e3yXbT5y(0K;)j7nEOu5jzZGGN)ipz}ew9ah
zljVk9G-A3QF;J2_B3y;g+gOmTDA*<*t6V`yBE&8YuRKy_eJB8wn@+$<F|G3vYi#^0
z#Wj9sTp}HBR$(=L24ht(_4A}kcIHsjBwwh`A>=mC|2WrSS(xucy2rz+yod}tVukJ@
zS{a7w7;IW1c5QEkLDlm>mbfEk8pHJG;Q(c?^%TNb@0_zBeWvwq?Hr~;i6+7ey@wcg
z--?83KYL2EF(H#Tp$K}!57&h{lakR&d24T^YJ?hd3=fFnX@DY)=j^wn9kejj6cZ!Q
z^N!flXPNI1v`6D97cf2_b;9CI(J|0&Z&jx&S;B>w^!MJCKg*i2bs<<|pc~pDkam2o
zPy~K<KoK{yF2xE%&b}i?gE>LhKrSeIU<YlAh@T1t1LCVPf{<d~yIA|LAAyWh^12lD
z1FVk{QnAsFeAM+sZm7ES3>asO!FFL&75}~Ft@qlS6SH2<88-c{b%+T?80QaQ-B(Kr
zO1Fb_j55MkEflva=0p}qg6QZ|u^;2kPSQgNyt|GCmGp%Ykx3lJSm+#t_UG`t`Nd=K
z@1jTj$BrEia8`n2F=xysAW-qt|5q`dl|{Q=DHsrcfFW`iktfti;kA}(xJX}eynwz#
zk(v&I+}p1S@~jaLz=y4yV0dGtHP}(h{TxLalVWs}VEl=`eC1=J)jvN4j(~B$v`p!L
z*k#9s2DNx~Dj$CL&<l6<`o^+#=+?U<br2XY0fKo#NWX>--R)eys1Gh`Q!vHu`dA{%
z@tL#eZwz+}8%B`(H|r?sDO+jtZuRbEN3DcQ2V0sl{TeJ;4Zg9Gs=*i2t3%jQDl?zE
zK#LZ&Y#60z8*5CSNk0Q)uIk<xn)2&g$J!8Pf9Xr-6YUqQvK=wKMD)uurMz{XQ@@dT
z9OFP{j$pFYAr;CqbgskO#KY5#5Vz$M--bI-zqD4=`yK8mYS?#U<DvHU_Ph1^HS>!b
zDc?)@qgbj(GK%2#5A}HjMT!aM57JIx#+LbQ^#y|YhiG3BrXB0bnOM4Xu=(s!3ndY)
zLG?Ddg9sI#WNc+lMpTuRa1jk;aaR>*%$naC4`kq;<c+wT-~XZWmxs|&gY~WDj!&_M
zJJD;$FVoa0USQd=cFr_^>jf`;KS6)z8BGrJ9DVr{=V9>Z=VNG&pdo0%>!na9VT<H%
z7Y(wxzBtpQIa#I97$Z%j^HKK1+9+`U6E}6-#GJd5OVbkPpmAM7tGMhFo~yQth(5w<
zRYvAC%s^5(-VVc!=S<+okGw<PKwA;E>;QuRc^gyL4i3?3P0)YGu9%)eVuS@zM~K=o
zH)oL!MW!^FMqVdiFup$i@)-j}PVCd>z<p3Tw|CTuS^#5-qami*4;@k+h0ioEG7PuU
z4EZ*1Vs>0AL^HU|>bU72-b3Vh>|SHq3nmLI{lyzjBc-?*b1jTWxUFE@FlJ#1iC-uw
zeX1hq^F5>P<ySl!k`o%$4e(~8;r6ZDfAf*$_{R^i!m<hB&ks<qz{GO|L{AyNvm;IB
z@Tx=V?VATMM)CA}J5`(a_4#$4*du0*RNqQBF%=%fX&;OJbrV*u=RDzRE5S+fo=`W`
z^uC1Iqu7w7k9E0JLdNlZ;?mW<U8Re(Vdz^}HN!{R0|y%fmFQa5i11VfDekPf{2q^4
z?dNP}&>cyxf7oR<f5lYs-p<Y|_R?=uK8^Vvcx&8!*O}1!c-Q`{?N>h|2JDzi+-*Ii
z7Dbr=S#|9C+$Y+v-l)eEyEIfqp5?IcFhgVi=OQ`#K11BzJq&<CGH3Qxlst~juqIR*
zPxB0KaA)#l2&SdUPf<`{op_u5>$^X??<bQC+g~?e(JqOQ(VDTJXHMo;-@2Pta=3eT
zN!rs?St6M$Ksv)eywu8YJvU)8VEF=F9j7s&&s5**2H9A%Sz;Y+v4_q7`XVP&poJy$
z8%mWJdl06mVY3EpT<0x&L!X+oZk9fIS{}c%oQK7Q%7tg8UE8>`a7OTX<c|=HBf2N0
zoQN8<TBOt;^L{0_@9o8!v4j6G=gfN;uYsaV5)j);KZeksRk&gEW(j-<Gt8%x%ouJz
z=K3UEE*{(;voAkFzmDZ*UNBe?j_rZ6#Iqz;G9svm9X?2On=j}1hZVW$olGCz#fEC?
z*_jw4N7n5ZT%}a6A9$fcfrnTYChnpH{iYzxsW{sc12%^u4f@~k#-C#yT{v%qqwSv}
zoHpKdi<1x|c2cd;+!WBg!Q+Af4%-wG)(q!g(wy7s(5)G!Y-<d~?d-w8$NvUT@}@fQ
zu9?AEgJ_pmU3z;~eEab`d@cs(OmothsOy+}c>O-BF?E*|1d|77v=}NDrzDm7uvR4=
zc`VHEY#_w#Usi}j?1=PVyvS&*3~dV-W@=(!8!i!t`lQgR!KI-5z#~?vepSj%q(MxV
z3{3_*CE-m;hZ{V3Dx6JSmt@p!UsskE(!aT>Mf^KLTM9VR%vCJ(U+jZxewsjM|3Vn6
zvDa#HQ;xdri&!F6Kd)?k^$&rS@My*(G)~(l;B&ks>Ss$iw-M4qDtnowO0(%^=+C<r
z#wy8V<i!SJ8y;cKsng&2)6%V&FS}7sKA_BB(8Pw#)OLtj!Or%KS(!iEN6zi;Q^&R)
z1%RBVH-VnC%Waf*#8!NjaJ@<uUEht{E<1%0#0RUD*TMN8#khm+jU+Xp%a`Ji`;D?d
zi|f^b;F|@nV?6Qk2De2vw1nE+Xi-O+FgyGUpIdr9{0Iv1$SWmg)YL?juWqYCkjr60
zs=<sVH|gvn_UF5oiu`~jj*gJ;KF4{)%h?SIvh=}k{~U`$@Ek-JBPHOi@5=Ru{l6nx
zEN-cJ!w%uq+uLaTkb;BD#XLKkZ5O5<yU9dT{Nl!?>YuO%Y*)p++=(EAp~^8{6JVDr
z!br<k5pHM#2Lf8K>_-s)2DW&pZEV;9E7^SCy5)6cVb+D8w2gKDInpK7^f}U=&stT!
zZuu@xmk26yD3&SUemt(};;Okkw&Fh`YqIJJ7Tsnq9V-aTH@lFvi0n5bvh|hPu5#C&
zNK_;t?*v&(2|&*!3Ox307&05qEvE<vV%y|)4qjAm*qvPJx$6{fn*n|%Sfq%MUwHYK
zQzSPY=!r^oDM;5)kN~WT9o)Mz)*kifMelmh`hCqPiPt0wH|xEn=gmUwNz+nYL?`cJ
zuu9tk5+JW7zZxWkw_%q>+)u@|6(Pqe*rOJkX%F4C@KElIByD8HcyeW&=Vo^1o47mN
zo%<Du9{zc^Xy`1>gfLdk?fmblmY7cfM%41eYt^zTALiIgbjoaD(@=81h}LJ5UI%3E
zKV2lQLh-=XfLnl`SkI18dYxB1&W{6VGk(5GI{(cNBR(38iIy`{q2TnD6i{7E<Ed;C
zVuDcgsCeA*8A48<v#d(!Q(Jv5kD};p(DjR*7#6n`87qIz?U(IBm_TR(|1@!E&>}8v
z6GL_7DUA$^=ME-%WN&>Hn1#0Iztt1n92Y5aiRE%a&SS_wwSu3I%Ou^k3<(n+^jUf|
z1o%93?_n&<jPE46Jy}v5+P;M12{Y7V65HTP#K!XSr~9+N^G%2JDOlnT2!ZlrN$<R*
z*bz$@%iB6Er?uD<n!$P&`&bH2mc9L-@NLcPud*Ps5xvD_3nBO^rQv?f9Yj$B2@neC
z(9JJgu|i)sFuOX|e+xg|-+OD<5$3NhBCPy&q=;uYkf=o|?~eR;0lFN;W(t3tKFR}q
z3Rf)X6v`Q=Azm_U7J+?@O0LIJ5C(1rg3VdHAEg;1dP5uHOf#ndzQOG|uTFGROT(N2
z)Cr$MJh<qpV0_8Zx}omTrLGU??OW?k95MCaFSgDe{?;fe$LAPwinLMnmvsYX*2#3;
zh~4LD&ixNYsd{I3WT)+SXJ=-DD?(rUGS+(Mgj4K1HB}#DCC}V*<<hT0-SEziGGlfJ
z-p-LC80Ij<+XS>Kvxpt%uNr&+8e+oflf!zX=q=2X|E&J;Cb#WIM+gRHn$oct-PL_$
zniyhwl!`%)&kwA}9uO*6J2km0fpL-x-D6S2{iK|jb{{!=zk0dG8%k<CzprjkXnVAC
zMleNV#ql@@#7N`8?gbyrWX0aPG@>-~)3W46<bt2fW^tdwV~5*bx}`-P+}Y>+qFS4{
zoaIBQkX{Yp<D?JG-W$8326)(IMJ4LN+-l=C+S0b;SDAtkT(3y|dGT0UqYcY)m<jL)
z=R31}&zXkly}avU?Og?S7re=Qu+kcF4gItoy#S?p>&Fph8e1D1cI4?HFkt;lR4A?)
zDC(4)|94)(!~jY8Q(T^%Ha|a|yrMB<8n7oX_*5PtHTvz#8F@lr(Gp+XQYyyGP}JDe
zor}v!Q1CO*-kV{}&q|9+M1a=JhcG_3DA#)Evn5PxsTkTQD<=@-ZX&dnJ&?j>>r!F-
zEvkN6`fm>9U(Ng9ISE3+`HH9qHm!j?CJ0T(b8GiCe60Bd6PE=7F%`f6X1d|u9G9mz
zU!j-FIdsK!Ix~U9KNY%Fig5p{icsappCZ<2wCw7j2!VHcJO~LyTV3Pc-MVxsP*Vba
zUd8m)%0iS0!oXIPoaGHJ;xU|!tqq(X5Ov~02+=o?{j^r8G*wgx+pL|)^SBdUV*3Wl
zvyu7!_>I=!bxjRh^u%VA09Ni}<I=JBrl*mH%@htMyfq0Z$<l&w?%AfUQzRfU>kfHV
z+mZ7{{u7I~GMharp^MyS)MJ^k-!G2?Oc_J)^}kb-4!kZ(U8H$u=1mD`sgaLmz9zyh
ztmf!3B|VyJ+3oLd(9af?BP`u8Y_Ddn=ieydM8uEGvWm0&p)=$KL_+VeW$WpU*5}zc
z`i)Xd1;AWTSDeaG_;H$w%insMfMyAQ`l_k_tXb0o^#TU;N*0*QV$bHhL>}fu{OLbs
z+N<X8Vu#3CMlcY@ZqWMNp3d)&ZmP9mtjg_uQS%MjTmttDDJcFn7B5V6cin@nFi$c5
zHr_~-t0^2YFSox4|2C6JyZvKBnlQhcTE#J8qoaIW4|TeMDLP}aR}jsUL3tpaL_Aef
zhO>JQTE7NUwYIYZ+FcXm8CY~hoEPHX3j&oJt?pfUC6F8NiQlOmKb*{b*9oT@ywAsQ
z1OpKjnG-cj7JlBPYOfLq;04JlfZLty0>ES?jA4(*c0|8lP^K-lxN;*;$QBA(#nW+>
zX8lCYRK$oUE}rNU+O3Xa)_l%CzHUAj(}O**6tg18tUuLTN&b2-<{5EjcxmR1G2e-^
zgYB<}uzQreAp={M+){_~e)p}KuL#x+=CXgr%RIJoXiabPiR0l$#9?JxEb8*IvEp*r
z_9F)`+ML3zsG^tAdLeLQKW&i*a!kqNi29FWt5es(MXxffi4<(7PCBr`p}=-}^-o>u
zKmDn-%KW=>gU?#Jg<~mcmSz)k5vdEn@;zHx4p)LBF-yOkpR;%VT)tLU92t01Cj8je
zcf33;OwP}t_bs+}w8^Mj9}Yx!NxtN&a~h}1*a5>E|86j$N>CT0D31H1%$S}J<s3<L
zanANxdYHXG=DPptH4pA|C_Bu&cJ<W5-RMu!=g2dlNAWp=W-j4-<>oB!ZR}MHGsH@d
zn3JJrjt(=8v~nHrSL5Wym31-CrF%D@eu;tNMqW+N51?QEJzfj{E>4XT3>D<xfJ<66
zI~g|cNE}<L_vG(GV~GJT)gHUJU>SY6{K!S&?ORA%f4yl_$k#_2h&sYyxii-fZF#v@
zp?ZaLU`%!eAyRD=K3=(x<sOG9_eTddqs>T~qxi#%uO|(14<UaqzUD-$wHgVArKN%*
z2Fiuo$R0%f8)SM{x>S#}f8S7V+d_#1`W>mw{Z@CNI)GOLSW(LW`~jCO1Y~+P8#q52
zIuLidmOIh;gK)e($~9{+r}Q0$#f9I*nOI|JImp@a)8oqRe;(-O;L&3wXx{Huf-tlz
zzkSX{FC@mN?ye!xEg1KsJr**z5l}HZvP%V?EQPkWsv&;p@*$|Wi&SWe@q!D8+xn>~
zESX~=eAMhgZ1k|{-3)(z2ddktAO{@XYGIXnJ|ly!@`HeO=yOf`hvu%#uFw23H59>C
z5UX0hdv7_vk3tFJ<tDTda;v8v%Wzy|XLJDV6Pw!AQP#Xap?}c>K_?Aw=H0eM-Y)-k
zd_thxQw`BM?yS}>73$u4^FH$j>*p5C8__jB+8Y551P|U*;N{HRas_$$r!i}9IOfZg
z=ee|@Rsp8eIWsp;8Cxz^@Z|oPcWn>E`|NEGan9sh%}6(9y=bAB-gwQ3&P9T%bPbkH
zB)3c~h+<pXy_q8i$1h0kR^wQjRw8{2y0ZJR=oPV8DUOB?(QkZWb;nZ|^I!7Sx$8{E
z>nB($Z$q6i)C3kM#%Ll=xrh@9cGBATh^T%GKRTn#abrs4_!S&k#!%f?jNP?RabPtZ
zu{+X`?ob?&b9=zF;Z_r3q|#e)-c{f%vJ}mCu;3VK@blUs27#s>_oDs38&qKh!oKaC
z&%%_w^;|9ya$J7z%JCsnv#QJyG!%Pg*RjJ|o2=74EMeXQc0)a)HlG>Ny(<Zt`p07~
zh(7rSY!d>#=ZqF)G^o-z5O!@9w`!V8f-IBN;bd=c)`ijm5n%PMFl$Y*98#F6jE7($
z#@}pe`YM_xM}C0DoSI9DnY&?n)?u$~?gtdX(t#>j42&uSY@`LaZRTX*r7ZI1&-)zq
z77nrL>Khx<Pi~6y<@Bl)zlk|XJopdTF9jKA)etL$S@#D5_)C+eu^JzrUqAW;lR9@D
z8{Wn{KN~Y~q&;z{LQwC4=@gD=#pFxiT@sS~^+8i?oPXBWh2GX-GQyc(pL$xb?`G%k
zh6B%y=flLxLOYD7cDma>F4&oMPn;P6b~|mt52hHNf3TW0e{~yzW}7DY^4RTwZFhQg
zKR(_<@4UD0BS5lYGydl@{<helu~$+z(>uoz6Ft~QM3u<&<=kf^EzG@n2jm*o+B7_F
zanHSFv5$6<nE%Lh7iK(0OMo6{et!9dDY{6aIdRX-Hq#75EQpM6Q-n({Zy8S>tu2h7
zJPuTuPXaKg1<xxt0V}0~A@qltt&>ebZQ}M{okREGFQp6j%)IA5{T|9XW8cKz+ScRe
z9=+c`1mv)OjypmSe_+@q%XKdJ8ahCm{lHt!Y<rHVcgsSND=g;yL#p`I>Vd8rF7{H<
z5Rz)G3^Cu%v;4AAt&yKzj*;`L!6az7z;G@;s*M3*n@IPRySET@-S5E1qS*(-l%poe
zHgQS|oe7nXiOM*we6QsQ-_NM&%9Znp+)9lh90pz~T*~D%xHJOe&$AkHUh`fA{e9!+
z`d&bfA)>@!7Z&dzTPDlA|7Y@SYZm*O2WHt7VQ^+^{=NtuL;Lc)G5cXo_C(Kix!i4V
zG~)XmF{QinfqWov8S+VON8Cj`kCyOfy_IDMbDC|xHy(Vn*>#bFV}?_O-5h9|Sd!|M
zI8_QMDlb%=^NEj>ki%Gq{m`l2d`T5kroQpovTZ{%RjWdR);q`MKMFVUm=v}WZ&^ai
zeYWA>y&M&a125Gy^FJ~77<))v1!^J%{TFw;2+PrDDB4%@!u!4VFNQF11g%NRp2_W7
zDV<=`UgQ0q_J)Ug0B9+WF~(Jg8Vtywir!&22~ZP-9P5b}k5Fhgcd@&+*RlJ&*@{St
z6ubWhf`Z+TX%D+$Um-O2w){0eGFARZ<AD~0<yS=sqGoI*y<1*t!uF6E-v6mfUbHwJ
zSF`)tC?bxnIOl7zUBkbFe`GnK{~f}jUB2*TvEp#eLGHHZKalAwhdr<Jm{R(x@7<v+
zId06f{zB*;RI!J|D)$A}xe{Wp%945eHrRZsBl6zugs*t|ei{b0ES`8&T8c0dFmMpZ
zpy`Z6>hL#6psJZcS3edj&#}~EX|Ds7yS~B|VcHq++e(08DhVWC{?o7Bn#Gp8gJrzL
zDa7ckRT*a|>bhMrQhQ(I25Ka9PwMCB>8_Q==NXZ-Y%&b;)4}%F=|@#Dh6p-zeYkpu
z)Lo8Vff_hLfG0`ESvyMV(33vG^0Yla98<gOj(Xi8Y7=PJ5?-9LtX36lM8#fgIV7xx
zFy~kP<>yNPjz!hr5_9U;l=&Fcfv1yM6>=q8u8VDmvlIFRnwtK$IBwW1emnp{<*hvI
zpe{V?ZQwk$xT1-KBHHmOen+5TPPIjIh}1&{`nB}<??h|Q(z0{WwFAXbvZ>;LMU&j{
zRr%n;gZsO)3d0eqT1-V!LI7^hoYsT991-N>ao6P|SZ^PMtAyphi~ohbb<VQ;^vCMK
z<1rH(Y`H_&cou1&&Nbsw_MJjtNMo2l6~x;4XJfhm<*Cz*Fxj8jX|<%j`Mfl=%uO)r
zwlFwZUE8D2dA~|k3lOX>nkBqC$6@jp7g7)~Z236|=!@l!0)!<VeA{I7425p|_NR`=
z-{Y@hZn4d;LR7gV)YmMsD_?Ul&*=}_KyWe+Hh=E8pt1FU%7^}hf1$ZTHc1QgjtikV
zb>>CHj!VOXcyx`Kw3~uGV2=bSQORq0t1G1)$He~gqj7}5E+ob<uRpX5?&`p&awF6|
zWeX>iS+@u+t?P$o{1@5#;NTmnnNBj=ovMjJU$F4Z;#X>@m`O($vqS@Pk`SDXfv<#A
z`qhs>-{n}DB(gJYl6F)&hfiw$`{IL#OnvAUV(O$nn#kN<4;oKJFGr@KLy@VXDiat~
zHNy>HGp<d)oFi~I$7h@!*+oQ?IQ22uC_6NP{q5$4PwPtUw^PLEZCF-rog*hX*;5nR
z{`R)2p}ouIWt8~+h*Ch!UYp;9D?oQqSj{+v%D=RUt1`OJ6BG_T&_{-w!g9j1ydX&Z
zeh?c0w7oOjoSgk?k*YEZ)ZgHkz_!e3qbFXf_joYgPBQC!<`3sm$~xl6Y|i-ML_1p(
z!#sOO6G4B>N-{qs#`LzIYGFH?%LRYR#llJCa@|Ne8T8XIT7=Y(E2YG^BavwzZlAzr
zXfQbf)%ufSrrW>@sWTFViLKDa&s8b<@akvtywfYMKN$l<0^VSxv+F@S3)i*4Y?2je
z^P1M($lkveiqNXX;p<U8j2XB%O2GEsaRMkpAtrtt)H`;$WpQXCbU$q<Xcz+v`JdzW
z(9UPH4jwyNu5<*naw<;qcT$26a~!_@@aVU*6TrypSD;mpq+7#IL(W=rg599{4)a?D
zVY~dU3-1+M2&@u>zJr&UH-Z4e^nynwhQ&?c^vgn8A%F}#78Cx?Pqk0l;_8;4-YgA)
ze-Y+&ZsJolFJNvI=YB$pY1rUr5wC<{EOe{$du*XwRwvyHz<zz-AQr~Vjso`*CNV$k
z%-Zogt`r@<1?e?uOg1m5y@8H^Xf0^?0Ce@sSOm@--2Dzi`z;DuNU%Da^X@i*!{gZ<
zs@EPrj1u6?BblniwoPma&HydjiQJ|ciVyBeIW7O?GR1}T-)%A)5v4<DYg30FG$HKM
zw<ChAi@?6E*c~Gc$}vCb(1xSib2FbfaNrd;Lr@e#%Wz|sGPLrCom$<2((t4bg6|`c
z4<8?6nK!Ou&k;bozjf;&Zg6|F<Eda2Xzh57aQe<$yr50zZflh={S8kZWOj7)pCGd@
z<;-?Zc-~B}+Zcs5lS-L`Kks0fKAXN>d4;6^fnZ{3Hmr=?;3V|<-}sULnlpQRO+sj#
zOK{~w4+7MSa(v+Rq9zO5#2k4mI11=aFyuZ1F57@n>4{U6VHG=ggdAgH1yxq`wu7~z
zW&-;*nT8Kv>rq9&Y--(00`&u!hcL$dx1<*bR}PP6_p8qx3F0Z1Yt4Ukv)2gx9_DT;
zM`})9XGLfMDld6vTw?9C-)qU4cTs!N(TDHBN!CXP@Xe{Ic-4H~Fd|6KAbYtlAfBnn
z+EVd3pk7orJ0#%Zc-?w4_Fw_d#OQAczs5JD?&LRj?srZh3J9#-;Aq(=#7t^m+UjAL
z#bJw9%nKH8uN|=Bh1A~<#FH|e8aFeGSp_GUXI%e>U%2@o(HL`?^iT#;&A`sThYNP1
znxA1~4%!HhU{A3NCWSvt0KoAvvTeMYw&u@8Gtxn3YTFYCUbzU9%Xy_}<vR{|F-&KU
zGa$RgNv(`3?EaoZ@eAhPw2#%=>ZWCLbQ^q%c%br@z?hf3eL);%gz2A&?n?CM{jX)I
zJ7&dT-s*d$9e1yJ^w~l$&b{Rl@AnKSm8S*3azVF~GO@o*5~z0<fyObeND^kwLc@c<
z`ENm~SI=1w0&XA&-Kd4w-aCO@FM)MlM;Ry7PK||=mlCyrMW!uqOxUM?KRAV%-O7a?
zEkCl;*k86g*^me#l`>(^7fUeFEtiLwwkjL19#?VXpKpeBv-{s_6?Z=qr;T7y)sL5j
z>AjJ<C-<%Hl05UQBuxUFdz|HU9q1=rSCgOO-^5*=!5Ecd!B?E24_Zo=nJkAVa?o48
ztz3Y0_yADg^Yb*y`lRo76AC9zqU*9m9P``gCg~>_1nkx(*&Hf%y$RRQ-xT)&z5vrp
z4<<O*o)3Cj01>WA80Np<DnjciG7`e!2sNnChIRRq!ut^Lz`7W`Aj>SNV6ZMDzLLT_
zA7Yt?vL6O(9ICg%%c>EPkT4&;KZ1b1soiIk!Thx})DWlxB3kyiArqw!F{6qgcw~0%
zI*eoQ_<z6HiqNL_)h#NVMQm~^+qbCY%Qsko7KaT^GR%j&jrWRd7~ilO%}A6g5aFw3
zlKElQ--)k~zolj^BPQU)<^Bp|u}=mB^gMTcf5&gnoW<*go5F!Lv;RNBs;A|c6kmCy
zcxYBL?Y-;!Pcy0K{5j04uOKHow)IbwZ3kiV_o??oswe=|PFug-GW$tNeoEP6FNXFy
z*T;c1FlzteEB_In!zS{~FJ|Z@X;>R}KRgm7<pehk;{7FcXACjO<8Joa^750T5wPLq
z>JilAZ0_M5A|A(X5A}``)=#>rX0-d&Te+{x?Hk`7nA@;}-~Jgeh{jys!#813dxk!+
zdvaM2yd>cYWZ=+=&Eu;Q*2jT<>Ujm{Y7o1|x76Cl^;&!I43kLP)0;sF#-ablTw2;v
zKck#TH2P|2=X9JFnUQ`bET8qBE6s8Z6=o8kB$e7c$F4f{VtCc#-^P51b?x;W3oXMe
z{6kG!<J-@|y2|<6ItMF$JW&0xttm`mOB*(vGAvadP7hP)=j>`O2xKWC%+Wofl6R7M
z!B8|o@KT}?W*hi<0MrXL1Q3@H2qjplw(Z%Pnv10pQU^-YDD%6CDOOZqNf~uQ!L;;9
zXo-6BwSq103SE-lz8b?T3wW9phVK@BywasRG$hiH$!{kUJ%09>ZqUYxPG^M|H_BX&
z9MR>tIIiJdC-Fk5c&0d$nO$~V3O4=V#EgMO2koUyZ#t$a57ddI<|Gb;(ZNBKuIMjs
zv3iZ?a;cbxl;4n8b0d1%l;`rt8)Qqxjc*_S4g{N+3x7LwFMmMQ)vdERWvW~MdLPdg
zG!NnuYtBf)lG`cX_Md0^G^AJCHDAwKhKw!U)BLcfL=sQSQ19MMd%L8Ko@zb=T7=i?
znOw!{(Dp4y2!xX->DB)&c}<5c{=%YbL20&C1q0Hy?D}fW&exykRLl!boDR$%3Nu-=
zswi5<|K%r|?T4?Axmkw<7)l9EzLSUECDn9!bC&fpCCb6Bs({C@>|*i}8h-OA9`y-I
zNA4bukQ(E$mf`m$o9PL4tk?c=$cnqp6M#Jf%XaMgfZ;)lZIqP@eRg`Hl;~<4y`yqF
zr+NMGL7vnPHP1MakHlZyJiQ~~H%<e~XKPJf(ZSLAqQAgY4VQ<rx;$xQU_H1Tlw3rp
zyjNgB7hvTq7N38$dviSD_YtYTn@EytsF~%1m^HC}W=!1W55$I5b7p<y@hRJTFLzH%
zN{y}^Jb19Is9CzT>Hgi_*;iYF*REZLB)K@Z&hUD<-?IsDr%<l4Dp`Ztw3-+&L5!@x
zD9)SzWCUu+KtJ(N(hvlapf%>84XvGkW|V#zOw@GbOi0gOgy2nMeq@}J8ir;o9~*wg
z9$Y4QIwpd@rCYfB?v>T2(0CdP;^Er?+Cithunc5vzXHvMz)(Z`8`Guv!z<)D<=PRt
z>0SxZIaU05L7G9!YX-v+3Z!A9_PbEL;Sv7y-X=pzo0A(Kd3{5a;NbPoV6U5IVt)0(
zwNj!K>MpOwg`R{TRw;*3>otQvimi`;6{;jyq=2DKM()NuiJR|<U)zLZ*vei{UY?5U
z<HeUo+B>OnaIUk=)BUW+rdd6=BKQKG_+u0iMce;0aLByCE2NxorKe96^cG=iO55tt
zn@}rQ{Ni{)Y-u|Z<{0+1!yy^#fN8)X?q0xN==;gdkhyvEDH<_rFN9{^s5CF-THDN?
zPKkma)`_9;2wYB${IZ0#&3pr;zT@@8)cu~{2RQFfyr;dob#o}*-9ByclDSG6H_Kml
zW%c?2M|gtW`4r<Vz__J~zEvPar@70c{F~4sr0HT+JiF%4{=?VSJZmDRmwVkV{CD>~
zt-@nf8*3<p4#a&I3lZB^%KBVa9e(wbEL;6<Nhha{^ZD~e^s}+<Z0(b0H9x~B8fT#X
zu;E&_KV~ce%I+ai8=a!`Cy4B-_4-2g>B#Z2#ik2D&mY&ghYso&=U<Wif&IJb!&7oj
zviNVw=i%nkZYFOtji3T)R(o*t^`D+&AeOu9LGNPcy9zxDXSq_%ASl7s9+KNIl<7?U
z)K?<iasNQmN^#WBKa!jXJ-!#EmmT;BhwiJ}0a-7lw4dL;<<Q29nV#=I=Wvc!Dg@~d
z#oDGKly5&B7@eW-#4vZ#HgQPR^Fgx5)*74jyjLv_OZ|=MzpAet=-(P?yUo2wb*+RN
z6$@uB!cG=WBmKAMP@m$6>Fl}`t~3(M)i%C``BES4<DcB(TCH+NO(8h946~%mQ>w?>
z1e=it3F{xe(J`Mt9XSRQeO=+<H!p%7dE@v`SIoiB%y)X&c;B_)Vuw8N^tj)oj@7TP
zz4WZszi`7(7%_Z;dES(P^FyJ5^zyYJ8g(Kkk5jG2wDS7Mj!)8=EBL%)H(%MqhGf@L
zvKSZBF!3BF@JZsMG&TOVC^fmy!39$%+m?5G%aGc*sX5l$D}?gS?8na=3DR<RT@*<}
z0?71%tFmYza^@D;OehF$dcE&j<S%IPSNz5F<jFKo(x(%<EwZ*QF)^)As|3Z~{d>C}
z9h3E*N*qhW*yZoH-E@xh-|j0UV)fOkBFIyv=Eir4SF~f7(=>qJ`f=K9RAH;`NYuvT
zj_QqLX;7f8n}2Dg+Vi9WL)0kTW2`-M;9%!D482lMIWAucVUW<)cM?eDFE@lvpy5i5
zh7WMDHcNG$yl#Krv_Xn*Tw{C3q?-9ZqZjqKw;%K|_nw{d|2>XFf5g5Lp%3n%ZjM*B
zMCMys7?r{_NUkOy2uX}j9$;jmIi;jA(2$<?8i+alPvhC28`UGY3DF;<WoP{hYQcxI
zuuU#-UVw3~lNc3lAWT!>;`r3NB$+{2ZWhkyq-5RSfztyub0P0Z0bM{8tBl!!r1>j?
z`F<gbGvf3u$dgA@%L3PwL|GbCJrhVJ(IZiJDPbB0$4u0X7^ZJlYm%g&nyBJ_7H}h@
zK117G0jaF~UVo<Tw?Uj$2$q||T;sKSKt**vp05yGb^_HMb;|zmiLznHZJ2R#`RM4o
zzZESX6dCa`jsi=Q+$5IhqFih@arwRj^l&kf;M}%!hzkGrR_Od^KFt^k62Pn7UHo>}
z18`GB=bv4ngh<dz93Xb0Dt43TD1VYaqE;vO+EzRW=d1+RW*M8dA4W=Friq{fV-7s&
zH4Z(*=XxyXnW??qK)5CqStwsOf$`>I)K`VFl8dTDU5m_Dd?u64m{TGFRxEs6Q0Q9P
zCD!{M9WH9-Dv$TzOz4+$?_WvLQf~+Z`;$&rE1d`yeiF78inqcicwFSPH2&6}epj$I
zcI#C+i5XLScvC(`+_OgKKB%}p<{;1NRnvXIEeKLgNa?7jO7LH8Ph@MYWA$DM8ojWp
z%00o;%p_zX$W|gypyLG$9d#8$B3uOcZk~GpPB^0vY*B&#+H)dKyY@LV9jkW=er=v`
zG@&1xNiBA*7<9wRBY!@H+<Z==oHZ4-K0?Nh+`-N8-5-p}Jw)@e|Fd5>uDZ8s!1di9
zZM}o?r8%l8314r8KC*Ba4i9_y0dN1_5)uq~RN4K3k}ia!wrqAN%YFD?S?Bd*&&29#
zB~ITcUJc2t&%iQ^FLOD=ZNdFQt>{mmLtkMp-!)1$De3P+>79b#|2kCCy>@5*joF>;
zyL-EO-L8&K&%)!+>$MLeDIKBVTC!bp-GR{)S|j(5AFAKGhmF&BS8Q>evrOh*xXb@-
z;~v|r(?*SEKIHeuKXA)KZExN3UCVNo^c}IHv+o)91&p=6&i{m!P?HIxXP;K?5pBA4
zyz{!ac3szMo;7id2|wrX4H?gK^v!Y<zxgtZrs^Z93ULa{{u}DgRKhwfS}k=Cjgot>
z-oV`+=epFdh=fh}9oimCTfVR<amU!p&A&&SsU~vBM9iM)yME6JFVE%B!rm>%tUpT;
z%$`Ftu1u0HJyt|>6pXio{OJ=Q?K*_%nvPksmH!lj8L*e2y&4J1$ILIPP_pl0NVs>u
vxX^f%*5xh2fnKpRDusl@{J+OL?iv0W0vz>QkU7G^<6ysIr**L<J?{SiWjbPJ

literal 0
HcmV?d00001

diff --git a/live2dw/assets/moc/wanko.moc b/live2dw/assets/moc/wanko.moc
new file mode 100644
index 0000000000000000000000000000000000000000..ae9551a36982fec3c98f4dfc8fc66dd3d31756dc
GIT binary patch
literal 86014
zcmd4330O^C-^br56^%+7Xi}-rsHFC8uN8`vAwwC8l0?Z=W)&4FA|aKKS!K#hI_sCr
zM8?b_Q|3$||Fss+{oe2W-0%Bd|M&kq|Lg6#&i%>RpR>=}-?P4Z@3YV8j+qp$n$$8$
zRkK}^qU^1loJ4Qz$Fp^RX`s|ER0`<r-!pXBf44CBzgrlRq{vn$CjPp4YW-Sm&)}Y+
z{-J^Wdj|a1%Lo2tIa|*^9^Wr;aFB0kufT!*{_=R8U+e$1oUK2U4v#&Ojez}ls{Jy8
zdJgPK2X0C?ncmos=kLd&K%d}0ZMW%vYtZeJ{rARSpTE_w=SKs3N<qHA9*unE<k-zq
z<M*<_q5h%%em;L0`R|t`cyRBYp$?A!-9o3oEd2ePJ$v=)iGz|9PbB^+5A|Qq*;5)A
z>i=Ia8u*t*zt`w11^E2a!~VSNuaEovY=egS1@!*QDt}K6#5Vr#mjB-TUK0Mb`TuFU
z{v%as&_B=CKQ9Z`G)+>jNNS-xFmP~hUrjkpxg=%pq!w)5L4#<jp*V10Pt6uS&Z;Ps
zO@uBEj?OK81_gy8x@M#)k3IjqwqbH|a*9U0IP^DO9!<rbI8RQ_C+0sUJzLb%r`_M(
z8J_r0ro^6_je<S(AHTZLbttnNAH$zhq<7LGu$PqmuxYNTXygmcp=&A!oRfp>9a9)d
z(Y3aWSaJSE&f@897=6@ptQg_P=;lh}7NwBgF|g7&)SDDdXsR?Wn~xP;6Do}tso~<G
zJt~dkUvb|!Wj1_IbA<C}`@@R;W8tDv8&YJx3N8f=#0oDv!NvTSxY(mDTpY87`EYUL
zLGJgOc^p<8cmjUyKa(P>F3>lt3M)L_4}El3Q~v_^l}zV;AKP>`9!WP;9kQ+Ocz=yv
zM~Wsld0+C2$BNG7-t~`L(DA(YejV$>eD9}2_pt57!$P9j_A;{VWn|mSNw=4g`HcUI
zgjk{`O1*ialsr*No+u+rl#)FI_oxrmvrU-K$b3fTb5fs?Z!z<j-|zNN?o)D~lKYIz
zr{q2*^S!se>&tvb<})&%llqLzXZ-(=P)?&dn<Hdb-dsL+)H;mg+@<o6k#8}ZL;px9
zN9|;#$--G=#~rWA_P%4V$^xOXecu9H^39;qWbuCP)1>$ovn^j~mIas3*N`p70Z>zQ
z7c13YhMI#taB<@{xLjewxA^~HLXvYU6gnsnNp!#QyR2;I)WyM>7V&pk74UyPk_OX7
zf7xUF#rV5@iYlG1XY0CG7QrNl9JrK`3|g^}5i6Y-$+_MfbN;Bm#t0{m&aF&{?EztT
z;uuMw_a;gY?lUr<k@=KRIrn3w_24xydO^!dYtIle{9r|;b?0YTKI3zxwf#C==&`lZ
zx`!F}nRhy*7nII?4wEjvhZ3j$WR>SmC|2=6ckJ&#vC;y(R{J@WbREQe>OF%~58Y&s
zGh0DS_j*~))m3DvzqbtT+(wW49+tsZjPpFN$gZmBFrRvgQ2C|}UjD2Q!UDE3lE6n=
zjBNazbo`vuXZ-&&q2%{8sa!JrP(Dix%V(N!7J3wLvPA!yQ0dGUG@(+K7)|ItBTeWT
z=RYU(kS3r<6B<dWMH4zpsX-H}rd0nwoDjUzsI;~l1fy3zp$V9iQTMGXtz#@{Lai#T
z<DSzww6W59oaY~Ni2AVe>S&0Wy#Pwy?<Q-f42E5G<uswYu-jxIPiWVWfIsFC*}hhG
zCfo)lg!;-Jot4OHhgq_3r@Eqh4so((%NKZU*htyCFRT7YsJ!VlUe=HeVO`B}R<sY9
zVLkw7U4Mx_q-?`k%>pjy+8-~EKF9pubLiTIdAvQ7gAX#2kReLERsU7Xn9th7d`j-K
zRxzLPuPtLfn;VmZFVdDpkdVP4v}G@;??PLaNBscWGTlECqCRgAT|bmKex>V|qb=)5
z{o%A_1=RPUErUN2qCTA?igf+QWi=PZ(Dm2K;I=LG2g%^u5bF1oUDZ7NM?%zRTh7MM
z$i~me#?SfBEn{22_AmebgbuQ#c%rOjEKx?5DC0j`_UDA?eunuhG3IkppYtCr`;UYU
zvZR>L$b3%fb5frX{x2satF(?BOJCzdv|Z|S3;I&NqzU=bmi7AEgmwijqFby0yNzVj
zA3<9-na`nJLlpjI4jq=gIT%UT|4!C4><#sUWlcDd`LZ`lgnz>vlK*bN+qSxWF=vC?
zSU%U-ocp_$$#ovXTef0u45cTobN;~y*Y@<Uw9agVSc5l})}cxS>))=l7E*AFkUo{x
z+5*mQ-@DSflLvmVOP<c9wQ%+27T7EA3&CeG?9$Vhxj(Lho%fGm`zgh+WAtQPD5nU;
zgS+C#O9s-p^a8GFeI%+kR>R2JIkJY8HnP>yW?4lmf-Tb;WTpL*asH=|vNJA)_=!Px
zI)_yL%Q+<XT%ETpyPy{*^%?20jBWAXwd`M((C__FtX@^6wa-0*=0B$U9b1|ZrH4cl
za;~(-wSOc;$HQ6#A%YE*tUD}otgnUQ8*gYr2cY<RDosd^-aqj_68gO#8r5^N?AFko
zvX%EX$}W~~#g>Z<WEX2&(S$z8Zsp(o*C&L2YFw@?Iz0?8Gn!plR5u&nu~n$tr0|X>
z`Zse3eJgRQOo&Rv>9>k26Z&9$Rm-9>!QlX%LxGjnRRbV);QC7I9j!^v@$r?`Ift>L
z&xcBDzk7Jem1a7Z3h|ZFwv|@bSMxcvf6+Dwo-qsdxdqAGorb{fp{=l8-*_l_HW24I
z`9n$ZEqv!-8I;VfqjP8%F`H!x!$;T>tt*zY$a6B;rz5+t^@ty`n-v1i3wlLqj_<!-
zNvZe$b`JgNZKM->8~IOXrgEC{M!vXk(s`^s`94OYtr*dglM#$0WReymI2(F!u09{k
z$b8g!-FoITGM|z8jLhexJ|pu<bb3qXGcuo%`Halxq&_3_!L+!T`HakGWIiMFIjPUc
z{RP8gxKGJ_O72r~pON{L+&>Vuko%O}r{q2*_ZgW_$*%+adNc0)zqk%Cc(6~uzg`D0
z_`5s9ul<wxr>A!L)71$6{{NpYmHc{F@t-dO^gLm^V<%D>{Eb}`V7H3rxodyj+4eu~
zq>q&QC)2w=GE%c;FDEUZ(1AUBb?G1UkGDDh`5h0^qz{&Fl;{6p&+z+4iBh3mi{JmE
zi{%u4|IVmLCtgdTaC?B*dF^n~R6Y6+_KRIE6uR#g`?)I_we;}G+v1_9GpR?Kox(rJ
ze;*r$7}*;Cd4x{?x)B~ebWU_QW+Ymf*Zsi|7kA<Cr`aMU9bwT8HIK@?Ej@mGIPed8
zs^e8`<cxnmLg#<o2saPjA=(wZ7j-+Gr92?&9R4g0)o~Hn{X-ph{T?A5B_9<XDWj+E
zv}0`Ko^3Px|NRJE{&gb^wH+_oSKktKwSq+ZHzk}Qe!;@XN46p*9U&bRAC2aSPX8bu
z?e9_l{RmzEbt630&?I&?StvTbzV-)4=8P5C{gi*okj_OuLdySngx&siBRu@-qG;>n
zC#q&I_=A!0y@kU|0!2zXLJK+%>8;0fvg{x1F_+Fs)*i~gW*9ga`_fAme;wh!<WdFO
z6{xcR{7*O4f9#e1JF=0}pZ{rpqDuEC`~9;-q4!at@!J7PE1~hoeKD{oOxVAsgBZ9m
zks1e!<HYVZH-*oAZU11O<PE|h-Ekr%H4Y6LAiB;wBYb{UK^Z7~e(fOkx@jpKI^s*Y
zf*Kc8r-)vgMX`m_9LfmJK&1xZLd;7sQ0ew>gFXvi@(;3SVaBg#Ve9B-dX*d9OrLP}
zo>j_?-m?nmI$nCs6uq|Si+UCol<A^g;1@BlrKZrJ_=K_rHC`mu(rqXc+f+JGe&_6y
zd{TJP5JI2j7&V?>87;bA>?gLFu$(fVa)sF2W~}g{hdJel-}8C_oguqTPkQ`jkK&e&
z9@*25F|y!$Iko=d2*9q(|EJ>+UH-q@_rnOY*W^{210H>F3ui<_IU2NjC5&_~L_UcN
ze(x3Nn0U{A(^G{W2iQK0l8udDw`U*O{Ks|sP`{v_{WMi1XN_N1(D}dr?N{c=>;6+<
z`64CaYkdorJI|3aTV8~$7a6Ev;R?vAw!#{5zL1sXh6COhK$cS}xpzMt#wGP6ZZ<Dr
zoYhxp)r<KM`Jfi9n=3%%m1NxdRsuwx@W%Z#R3I{aFu8Qj1ndJ5u_{*w`yS7w!iHgB
z@9KdHz4O2x%j4E<=YaiuAKa&T8Q8DUAeBo@Nc{#(j8<<T^@{?eBJEOA|Kt){_i{gZ
zD(8yTb;psXHX69s8A6`s$CHBr{mC4BjA&?;k{LTzNm~a+lXz<tRB&nsiTA0*Dzlx*
z%*?h}+&_=ZJ!?U>eKV1HskqC2YL>}Nf|RA=K{I9YO%qW5jO&b8aa%RLUkSVW#4yju
zmsET+fi?4*Nn6=eMrl)hF(X<Rq{fI<54v&s_{1=Be`d2I_bItg$$d)hGcuo&`>1&=
z_bItg$$d)hGcuo&`|8chxKGJ_O72r~pON{L%qQD_Ok_SI^BI}X$b3%fGcsTH=F?N=
zGcuo%`Halxq&_1}=nzdPb>UpnHct!EMqQH@-?{~hjNH&lpO%nzPaggFss|~TBC!*l
zLknV5$&ou<V6wd@(cAwJrg+s!s|)wQ)In>|n(V$Xx!4LTI_kj0%R_MYgL*JdW=xK~
z+zf+mb|7u0DpKZ3MT`Al(4EgHe^3bYe;0>UI-i2Rb?>ov_qovPZGTe!`X<<nE+Bem
z)`GRsUTL##Ep(LpQ9<XQU~b@yRn0qtNrWH9Z})(~jShr_sFR1~h#1DWlZOcdrNWAA
z@?e4^%KyBX+<Dj)tBvbGuFcZLy-JnIMI#+j)qe^Zy}gliICYCet{5)mMqMD$7l)(#
zJ)tC8%?_)d=tf4bu)}`2gbbApr3o$2Z4JwE_aBRy@CBCj?2HmkuE5goUg$&DKv??l
z26ioRf~9Mo;VIcmVX03j8Hc|?MA!}Qv_u<-Xpw=ESGhuX#YEI-{T{;iw!yCYp%A{V
z2FLB43*qCR5kI3i==8FMq&#6Obh=TB7G5ufPSwq*@#O&Mbgv4#1cigGQA-?Kqztys
zHN+`z5~&;DAUP>dBX#bsC}q6?smnQn8dr@bb-T^6Q~v>^?#5>v9qUdW`$rH1v+HEW
z%2863X?HU1n;}ZwJ()~N*oZz%8Aqn%jK*CKbt2R6ZpPukjbxVLN!h1Q_hcTeZc59|
z2g(eCx1hAQb1RzV^wE2Zm5kW-$q{=0W<2~^9rI{HcC#nJs;pg-G|Gz+rRw$J{Lp-g
z5j!-RagKXd$H@KoyOrFh<US+wDY?(cd`j+nueIeqCHEPbPsx2o=2LQCZAc3DDY?(c
zd`j*!GM|$9WLwAM%x7diC-oVb&q;ko=F48sJji@T=5tb?k@=j|XQT-k(S#PR>LN*>
zPeV#vDw?;+7E<k>qvx-yAmz<oY}I`_EO=;uhtN5cH17!M;I$lL)h|kZOLoH~lNl%(
zN+Hg<GkPsdfY>F6ux-ps7{B{19yxpoM653*79$d2z|_Z5z^ZpJU|J|jDenXWX2{UH
z<}?V%bi!Stv%znEIS#-30emv_i1nCyusWPA`FZ6+$Ell9s%air<hrBxw~WCwt}}KB
zRRE)7J@B|3YiQe5pLFT&Pwv-eOWjIWllz5vXyLiX<X(0HdcQG;+*VD-j++!n&BhQM
zJ#aQTkHbkfD?<|Ya)e~&Q$)tr09xRBg+yx-^nQdf8Q*sWcKU8g!fLW{jNnd&Dx5I#
zmCd}F3d!_S98=%zFzeVrbfOErHoRsv)>b(WQBkXKH~nG=TfY(qN4<sM@Us=`Yx}^k
zP0lD_x*QCc?u~AAHiSM}&#>W>P(VwAv6qf2c*Yyxk+C<R+r<X&vb0>VgE}<(aR68=
z%|ox9H-Oo70b5RX0OM9k*eA3M+Rih>W1^x!*H=jz)$1d9m70MTH#L!GbH<@h+Q-SG
zhRe89>uPe_-2nHAsw0;xvvJh%9pr3fv~<*ZJ4tlAiL#`XWcGz1^e&~A%<w43*0<fs
z^gi2h-=qu@yJR|!)*nM+-jpDfH3MXA{kovlZL4MNbH1U56=5=`H!HDKpPRCgV@_fJ
zcH3pi3e#}(({Zx(UtbyddOzIM7Zx?Up#HlwVd3^-bka&662p#T?MZ2nP}K`Nj?9C&
zEOQ)C-V?@ukCxi++7A=V&Y+l!OCh445~|&F8%B0b!iH5}VDPa+*!`J11eOKkpiR%9
z4=RxQuP6sJvlB{*asaRMMd;1cw&1>LH@0~H6r3(*VDFDxp>s3A!*{wur{WrER@Fz)
zoa~I2+}{DMzS^Nr$v&Vaua0ewZh;oYHP}zNC&>4+z>)5Q$+wO=(#mP^q*yl+Es0Db
zJC`S*w;#;NPSs1;#(X;2o-_ydJG7Z>niGv<HxD2iwH&2g4jW~6+de|+-{|)oRzE^7
z4t6F=?le*N$wcE?Iv!}FMYOjT<M^lJNV{(NM!u566)T8Ui9~~D9)zf|)~Mp<2^cf!
z999p^gb*`xZ0+k0{g>upMCTB`nJ5L8Ho+MGAQa=I1|d1==xY2G7*Nv!>xHI(@6IRK
z@qG-4U+DRei!!)o`$?0B^ngK5yU_yO5zyyk5_)R893=lwxc!F};8yqrd-mB2T~%k|
zp)XCrDte2QvN99wu1aWeZ47jb1N63WIJED42X`DW5A*|<<DNebK<n1yaD?g(P!6=0
zmVP-->aKdCMdL;Cz->5ckO}0DqABipZvwe){1EqR7f#N$YK`NxRY^tdH7WPDKN;pR
z1*LwjCXtVBp{F+vkOcM3*lL_HNt|MagB&!;Y#{>A@jOOmd{6xA=_$WF_v;#y6Fsl}
zSATFU_Q}5^YQ5Sly3g1rYE~W-JJ!~T8kNgMt%aJR#-c{yebpmTLj<8xHBW5);*IEg
zu1IJ;Z6&&WxFUS_DiW>Y9fhwy^hNDpcj0Slq0rbcRQM{+5UNgJ7QWQyh`sKf6K+@R
z5Zwk27jCuI7p)p=gzKC2MV+==gzL`xh0iKc!gc#6!kIi{;kuz9;#vdYh_kxrx<^?!
zSUO#_TG3tDzj(W-<2_6$t1}Y5e25jw>Zb@7#*7on-r9@ahX)Jm1`H9MOOcRQ&_e9E
z>VuH079(n(Y$L3`Iz(t19x1H;JXg4!vQ}7Qc|-I%{6$!hrXV^V%@Gol>O{+>k}zxE
zE>YX@l#pPkE_~b2EF=_96t3kQ6lM(3H}VyGmP{9ozswa~zv*&zoN33Yb#^18@G0~O
z=Q-Onet*xNoy1mh?Zj>!*Kk@{>v3wQeqj_o+YaGmKJ$ED+6$jFW5sR(r#P)(4yTUY
zI7Z>~%~DS4^ZR{j>x8TAw~O8Sj^?yF<;tmJyNyx!eBF(c`OIVf-p-Fj*Txb~D~l{n
z?Udt;!e=WBPUbU@`B`43qHESg&W=%!IO+B>vhC$$KK(aMNDMU+P5WOL>FK9vIl)Qn
z=%pjt+)x*_lWRn~{B+^_F>TSVi%huTQ7hW+N*28z&J^`_TohdtwMB!^>0-xMokZh=
z*`oHd7_t2=HKD0o6x)}-5U!|>5!+|lh$yN+R8vb5U3Ij?Rwb=OtDMWC=Ct#oj^HM0
zrzHqqE=&})x2Ovj+IoxHyR1bVeMERyJ(O<22jTOLWYLP86`IRUMV*cdM0wL|!smG}
zM0w3;!r26OQC=xu#7*ynD{qg9uF0E(n-d0!R+crwJ^TBjc3h?KV8C7BlkyVbf!kK$
z^oxPQ1FJ;QXXQR&f0>KuI!Qq|qGTj?oDwS>ubeMxZQ3Z5N0teVlRk5v8uXBnCgjzB
zx2W;*y4Z1Xg{UE$C~9b0i5mGe!kbbp-ZI(58s4%MyE1sodQ|=tnhfuWmQ^Og*E>VS
z)}Pu7U)MDYZ|?V}En6#)Q;TTJB7~e+!dvE{Yav`uk{2yr&JeDL6^pH}$qCnc%oX11
z#?Y4S6)IgqY0GX4You1ZWp2mhh5aENMe_sag#9fd#MbL}3uRB&3U4DDXv>U+DvKes
zWeGxlOWHcxGFPWqVeQSKqFIc$kn2mt)-i#?nwFCA_DCviS+H=r$7<TL#lm{KCA?)$
zg@Hm+inC~H*+ZDCJ5g-iBUVUw^+R~4n#fyrw)b1!vQ0g<|8AN4t8KhJ76ZR>wm#H{
zx9V*VSI(2l*Ew^mXYl3BXYFA=BlB6in9s<3M&`5S)aUJ?J}32gtEkUOeNO80<;-X8
zVLl`CS-Y6e$b3fTv*pZZ?O{G6^I5x?&&Yg6=CkF@XDwqsBlB6in9s<3M&?t}In-_X
zN3qkeFQR$3*P?CGL$UQ~N6{|1mGExo8s4&VV-$GHHa|GWTjm!2PBh*XA)2orDVkL7
z5L+M56Wi}OCcJI#LtEBDIGx{yw(OR$e%C<WGI!r_Q8RX~XrWvtYEAwowk}H&wF5f{
zZ%0j~Et@W!Z1SKjQxfuyJMxyfzr7(eTLg#}Lmr88$`i!aM~{kfpXeNNc*t8;S(?OK
zmTO|eTh@JKfN(G1t7wrqOStd;No-9@g$Hz>^;TP-w+x;b@s_R5LcC?&D?Ee~+SETT
z3gyQw>Goy|<x@WhZ{E1_c7fh=&YZ7Tez(k^Uq{|Dxzui~Wx|!Vl(c1AosC7!F2{uh
z)ssZc&B_9XW1?n5xu`Fj##$ycXPlrd>myWa<<pjZ6E@GU6TTU56Bb;XDExSjh2Hgv
zqFnD1QBQLXYnkxvTL5j@7U7~(Yud8e!Y0)f!cDao!a`#Y;m!gr!9Uboc<{_f)H#&E
zS|)s5wv)EZUbs-1LtC~)*wimUIIyUfkZSczIO-WK1a&_wRG=hLt4keg8Qo{8(3bfK
z7k|v9Ewd1|%v&nts_z#TzaJnJ+*%`q2L2R^I@4DuuadP)_#};HEfcCIRq>W>d%I1T
zv9(IbeA8A)>Ty<x-kUF^-VdR3NcTm1-lFg8?s8rpKaX>pS8vWmy(e-8xwU2FK5Nmp
zt*X3DmvZ)UZt*+JnYv>K=YW%ejLhdPYC8Lb^TO9*oSW8Yai;YA#2L6fl9BtYMNOwJ
z^EO@hJd1NvPBv#s-)EeGXMVMit)I2%+lJGemsS*VZVBAanR>r~b6{>QBVRvj5#3(i
zCc3?x+xlg3F50t)bMPGxMw*cJlxWs6p(*ktYngC)u|IFw_RlTFPJ60_Wx*3gYg-o~
zcCjQ{{yZe=ghjHJ2~9|sw(O&DY5h9dvWvo2pWUMI6?Y;1t-RPSS5+82>wu_#dzPr{
zbAz=^XmW@UwWbUbF1$NKTjnHedLJ!nPTeM?UXw)i&jW<PX4A!%^t?*<l|O5l&~zz-
zwrr<xp}8Av*$!dT2|@Vj>>;EC+X!FJHwuA~k-|rva<NS?u$Bqm^-F~N-P;S7w)UYd
z+bwMI?Iheg@<mAb;4j=h)+hvQN)&E6wiMeO+r?TY{FoZWS|(gh*XAwTCZEOIl`12g
z0bO1({`K_K`ENfx{+E1Mpvk`181CZ>J7Ubhz&suHq?eHu?egHTUJf!$6X3*}TiEc{
za3BfeaH_iooV0!m(J>EUvCdWKKpsQ-4-c{-wGc8MuaX{~iG$_KXW=#udtjCS8=R_k
z7}oBvg~_da!9OPqtkz^e?^BD(t}~T@RU4)3iOayRLl|y7Yy$+zf50goKVXzk4oqx2
z8{}I}1Ir#6<a68;vRkj3ye|}_nVO@?SM7YPn!N=S&0FFHs^OrPa{|J)OdxrC<iW&b
zHCg<11lc}q5}7sOv$X7@JxSPk3%49MfGik%3@18hkW5t<82tL9tm%L$=nn{#EsHx!
zHohEMaeBJ8RCMLUiA~*taEpt3PMpsAif5jTs~E21MiUBt{Q)*zJqS8F_n~CvRI;S2
z3mjP573nG)!?AZ`uzt*XIN^5&FUSlB+5B)Aof!;ie&4__><eVh@*w&3WsrT+Rl54(
z0<2ka0&87;0Beur;03S0Lw>;_7(Y1}1~jUHdBiFRK9NdFEYe`~z5~*d5pocP7Gw1l
zRxqKr8eXXO9b!&+LG;lI&?r3x7D*-0#sWy`k9%Nb8zs#hxfI%09l&aGYoLR%5neEC
z6?Bj~L&V?^vctPKv{zRo+jGv7&3D$3of%Qm`ilN!N0)h6Ju01S`hsz?%WYD4-xWsE
zgx=nK2?m4HWe1M7BKhhwWeZoGk*fTIWiF;wxK+)(ijC7MaN?swqGqNKO{hCfD3flv
zT*(s19gE0<GY??%i4M}IIC{m#Dhw;BxI$^SY&_1e3W{wt!MCIorp9@I`lQ3K5blu`
zW(2Zkcau)P{tT<9r(@-_M`4vo5}x8L57`cOFl_w<@H5*4`bPjpcArfO>mp%F#TaQr
z@j#fn{XTB#Y6uBir{cMX1(>uq3Bo_^2DR`&Fj;dB4AX4L<^e~cOJIVu@m4vwMt#Pu
z@eHtQ9*7qPN?`u%8ALS4ke&Ctfyv}&q;$m-vf<rka>(k1w7*X<IsA1F)?PN8l&;Oi
zX_3>&=4Gxh_H`pMm^c+owA5wA8$HPSfL;~#u}C^CUvlEo?li2o%I3uKD<wGHy>&&4
zQ(b97$^Mr>*7iKK4RZmRi8--L$^)6%aWvyx5>$K}gRN=HD$MWWMUM`{3F|kItTP_g
z3~32%m(@Z}#8=YAzay;ZHWS6C_k-o{mSbz3kC1&Y6E7Nc7IId5K+>dq7-f6|+B)BZ
zK?MrL!RadazI8#<ddvskm`dF7i7xbajlyYB8ZdOvR+zJ18Ct(-fHrDBK<Q~u(q;Az
z(lpl>O|}dqO|4w8rQQHg^tZ<;&u)X->UEHi6GHMkUjUuqnk3WMjyO-*LlQ&gqVY#n
zN#e*rY?esdrFR-Hbe2fo-B~cz$4{0Lb`G?A%FArFttZ`U$}6_1r=qa$D=JEBN8|Rh
zCd!0+FLAQFhAeMPZ<^3-A3r!ce+=jj8plXFr&}<hDcwUEvE}^koNPbDJm#-XKh1qg
z?o)D~lKYIzr{w-P`vC4!a-Wj>l-y@zJ|*`%V0G?Oa-Wj>l-y@zJ|*)>>AqRaXJkGj
z^BI}XNqt7<%Mw)Vna{|4M&>gzpOgBGG@;>ii#OS7fWr8TuzijL>2Tm3loq~3kt4EU
zSBrsI_j7mHu`3);j5CHU)En3D5oBb&0F|ONSpFf57;6N<>b7gpRE4#)Wt!M<Od_mk
z=!WA@eubq5TVU#=-4F@M(0ZsoOwPSS43)}Z_L-+>ewWuUXJRfk8*~z;Dt^XEty3ZD
zoEOX+vJ1@Gdx5S>FxVblOFGP%53a)-QL>RWxIWo}tziP#n-}1;E{DPVMHM8jeNPU&
z(gnSJ>f~^EAJS>!1yVk1Gn&)Wjg-$<!nV8Q$e|%lc**!}q%3?EByF^m9bK>-3|i>O
z!VR2=%bS@MRSjlnY8%yx!-rnu&QhJsUBwJ9%M6!g-K?hxrGB0TXIRS|+~BmGj_hG;
z6(9#6qCH>y;mCpM*mScgl-bnch`4r8a%C-~{1^u7dKZCeers6U|6)b$w1bfCmW{4N
zM8nc{&bV{kEy&2Uz%eW7vF>{fEDXB{5z;2|IkGJbeNV5BwiyC`(qQz?WF+)-ZG}Db
zvY=1yXgvMd69~M$5awSg0kyq@$<rGZprF}HDwu3QJ|35$FY3|cvtu~+j2aFK?NxC6
zBM(shu^*<oUm^<!YmsNJH^_{iN>ZBvzGTv2PgJ*P6q(;;H+I^*k!0O`jAKgYk<C73
zbU*aoJI8uHdG0vVJG!M+h5kk}v4311I&ZMN;^dM<Y&|VimL7Q&hZ}<I?ZJZI`yrt1
z(fS?%l{z7^b46p|#M#|wcb)+pEbEF*8kWKC8!vFEA;1pX){vB`3k7o`K*@3k6!_h!
zSW`X^a^F5em(}WE<?DXfF0VIa)o#J#M^1!{w__kNdnm*VFeb0RTf&5AT2fqM8jSm~
z8NEqKhlrsgu=|EhF#4)Fp1SA>gbuNXc?-IMahGgTAGRNiSO1g>3kjGgrK8V#o1wjG
z81_6g4%&D7fD;m8p#6mf5dXXlSyfj;UT9;o&T5EcZ}N_85$sU?do5Dhei?RMIf(2{
z9D*kwG$4n}3m}FjbS!@mc@@y}#Ja~iqT9U|GQFlyRP#JhmTcmHJIC6{wyfNSC(wkd
zZ#K|`B68Q!W0VHSncRWBdWU8Ea_Dzce>9*iF(YAz_5`e+as<{%E3iltT5<I-OtM%B
zD^lN)x1YAb>SMVllt*-g+@<R1V$Wre{lW>G#&v=806!dbtPzr|ufa^npnrq0k~}&_
zKjqn(B5laJ19Lvp&&3RiV8+DZ*wtt?M6Vl*qw6}s$U!$?zG@pVPW2*>mTQ5vR*6*p
zW)V2u9*LUE)xi0s4HiDG16#*6cxKPfV6HqFX1!G;`Im>02Ip$Bwa-1tyZRv6U)c@4
zD2X7)mGiMjH$8GxV-BAAbuT%t6AjZ}zoW+}C-P}uUXSdfgHB`}Jz8$q|0}vW^hrf^
zu^D!8*&|E+zLA~}#mMTrc=A8GVW0DdI&}NDf3y#J!{-Bb_9Kt>(T_8B_9Cm74F{C&
zCA(Gr9()E3l<uEe3_WkZMq7IuLT?F!*2{U&sYfevf9XfC)_q8FXRHUyqitjjL59$A
z=vJw+@hez$u|Vst^aHEC^FjS>U(g7OBe!$vK;36BSzBWODpwE7n$;JB%KUZGwrT__
z17lH6#y)6KaS4=%&nHi3&mh+fJV@P#6tdP~A$hQ;mMGpkP41uHDJ>7tAoonSpbW!(
z<aUD{X+H3S9CG_YF5O5X2ZD^q+FNO)EL(-NoEcBbv@S{shBwLH4<FD1m3p#gsy%ss
zpqVTh?@!KNuHwu)WX;+7f-YGk?UQ;Bjwfl6^=Qgc7m_;OpH5dgBIsFghg`|{3cgC1
z<mkzuPxN-#{r(x?e;i3iC!0gS0fcgBLj4QwfYP14;Dk&`P3Kf_{$x*9_wfPOCAVa6
z9?gJm&)uXwN}a&%Mm6`{&%XktNqwRH`g5eF;sta#Vn%XN7?>8dll|0|ftk@^Y3r={
zVAkmo_ss_W1f|}4LA7EVxoXlH)HWU?Yb{bheX1T&D1Ha(YfeiWx0Qi<_Gz@Tx*w>g
zNT68jPhKomC0FOglb5sANM8O4(l9)gwD8O&4O3=IYjqEh2GtO>LVQYICS3<b`U=Rd
zN06(}t2hgMtU1-j-Y2rsvr<-@!K9+587=E=NKRajpdUKcw;BYVTL+Ruj;o-z;VH6s
z@h0f+WGZ`Dz66FIRg!S<eF*mLh59UYfslkp<aNCxbZMSO%EwC3!)YzaNE!vb=GDsH
z>$^ce>9I6S>j(6WJ%L8IRRBN5r{r_0CYY&))31FjfG!_$$+Cie;5o53k-HHHXyOrR
zGWiHzco~|x>ms-fUO|3-K%nu(h@8DCfr+*|$sT45c3rm+rLb^tD7+wLetZI*?p{Xe
zG%52937~Meo-{chB$qZGf|l!ckySNH&}MWVX%V&=+AT<w@_vkhHW#;{Y_BBHtUd_J
zEo{k6rMsl2QI|aTT0qtgzCym4Cz6&gdx65FZPGUPHy}5>8RgN0zP+oWb4V#F9=vJG
z^4m@Y>4>hZa`6Jd>R!_6=}okKFH!E+QGg%~%e%S*qAinGiU*4+TgaNi0<g6CDkIKq
zz;fdasp|F;u&hZ&tF%u+#|UH8^uY@{ZmTEXQd2-BzKG=X{{kwBn`9M+`#@!csZ?2d
z2~;w2(egWwpylGT=>4KNP&FS<-d8t}2kjn^tQTR7vg4EcGfFbgE#v|6Mwu=>$U_|`
z^gPpxJk0+>>Z@OpGAWy+U#no09ln2wQ7XSZmXt-vqs8$<$bMx-^vFS#?2ip2wRHWg
zWeXp8Gs+IoFW^v0$Mn83qLhS@oVC$$jC2mYu5N(7v}H@bcr(h5&Fjx7k;h?-C~J8o
z=iBHwM(%g(^@{tH+^6I|CHEPbPsx4LH$S;g$$d)hQ*xh?`IOvO&(+{QCHE=0Psx2o
z=2J4CG%WODJ|puPna{|4PU<sqpS6tnl-#G}J|*`VnNLX*x=Iu3Pg|C(Q~^QQL$+^i
ze;E36ltd<0L9p6LG+k*U4DIHOD(Hv?)0Wk?YydPkf-GFu4SZ9N$PPHCK)^vmsr>X_
z2#kM#=IPf%Uo};9Zubr7H8-Bzr*p{p;xv*r)C@eWUdj$-w*()9G19T!6TxRz7+To(
zFnGOPhHkblf^M&q$Yaw&FsrsBi-T*SQ**rRkWU;q_P-!i*xv+4zdmS5lr7j=EkO0?
z2AJ>nAuk{If>uR)NoL4K&@Hl*9l1CQ+TEEgfukB2YB-?fnx8>WY>nPUse{&lm!y#<
z`g+$Qvb=d8X=<4-EBAU1@{LMTRd_ZiBnO~X>vn?NU2XK8CiH`~j4Y%H(PNp+tmRn1
zUd6~|-W0&SiqJuiy?}?OV7b+PfKR^0mb7I)5+-xBZ-C_|vEo|RPOyA99U+Zausps1
z9Y3Q39W`fS`4!v1>Saf4-ftb)Y?)6cwN?j}y=oO9R|kSh)?yT>>q=Yp5mg%6fJ$u-
ztPnXA)RJY`G^h|-HC-Yj$^>$M_ADX4vnhFCua1VRA0iJ9k3?r~B$9{ov$4YVRPtox
z3~W-UOrF!0iP@9LZnv-Ao7>pZQ>>S0>{B3R2^Y|XnMq{-%xWy3G=&`YZjamPts}>2
z%gi?1B#E?D9q!4Ig`xXUoXbs;cD5c>XZ0nEn&)G=R=Y^X<R`d|t2@c!EgQVyCIl4R
zsR--g4E@aFk^90{(DxQbd%qg6V;XvOZ#g^0VI7(fJLWOp?QGhKhOLg!?PoXS^P&v8
zjm|_z-fDttnmPJ3-WHtSTVVYK?);d?d^5YT<+B@qfa%W*sDIsfFnwE%$kDD~T9A*L
zUr&J!hn=wDqe6bn3n~*p-S4(oG$S3<H(H|M3w1#K*#&e)?;5C|iopsab3pCJQ*1Kg
z3aDw`CV|<L$+KBS-aX$1k{6JLBGz^%4M*b9g(OGv%4`}|{Afg8<*4HJZtKYF6-C64
zCUp3Eg!ej61#<lSITT}ji^$x5pvz!D$h5OqdBr1g^8OFpfhKf@w~S^AgSHOzcGAv=
zpytKMQ>hgUZkU5g2G4{39Sc!y_j%C!W+j$S&j4@pOkz*x5We}t+kc-W_&WKb-ero=
zx6vH!ADjxkx^zZQP8Wb@+B2-GE(7N^X2gxoAs5wJ@35~UphurCXyErKkPb(p<2@3f
z#|vxpF3uAi)pN1dx)A#Hkx@jPs}5%Ks=SlJdVp=qO=u)NsypWGMO7-Z=vO7%p`RTV
zgX!i(-0oE|=ufdFe&w4%ZQVBSnPtkLQ`LaRZhQ{yn(EMnt~Wt{Vtd>|u@`7024M?5
zdj55E0(*r?{jNpcBg_iOCpkqlF}W4UZ=Zm!cIyjrcI|O18#nUx(*kUFzm7EKPyW-%
zsms6r<a9`52&|W@0quNuDEf4btW>XrZB}uTLYf!sJlq+PR-2%>gBk8&^8<>FIz!-&
zIgsYI7}P(GgLL|Ry$sK_kol}c>d?ahvV=HPo`xZ7Y%lCOYBgldQUPDhXc(UT30inB
zh0rk@$inOEA-u^&a%*)A#=i7HM|OrlB(lX_5Bz}0@3kNf4F;R>jvybb44u4gljIi9
zq0`$#l5_KN`VQeJD)YJmc7_|V&BwD~S2+`0Oj5}A>c!-9X?N1RTaF}tpznGt!laH~
zs-*eDceFF38);hg6q_!KARloM*!b-tJIF%Ppjl6f@2Qgcx!XzUu0@i*dmz~vaR+TY
zxt|o?>W2+%evs@Q2K2<j({C4KsV9+dQ`<of2_REe#Y0|6fV9}55!O46L$U>du%VYB
zcAyDuR8In7w?51+w<bSNIzjT<?_}2VLy#62BaJJ11?l2LblfBamZ;svU5Z!3lC=*&
z(w_rE<M)F6i`Fpe!v>OM7Xo7+=}Xd&V-U5%6&>~oh4CW^?i>*g;~UxmGS>%(4O2j2
zt0{CV+C-9F)_`YAGs*p;F?ilJL5IdAg6GM3xHBD(XNCw;Z$D6-cn%aM41m^W?~vpx
z*Fd}UwB%B+1KP*eqC;+`ptaVI`<la>!J8&@a(g@|SXPj;1@UCTf*#~zUA*MrYD_L*
zEp(8c_MMK$%qOrto+i|$PzmN=$RL+;dqB$UGh{^K9as{VD1|+I4q5SmDAytYRs{9N
zE$N6>Dj9=GTmg(rwIa9Evteq|L^8hr3YafjBT1Q#u<+a>lxNccQg<xJtzM<TBCk}i
zO1ljG^o_~Wv%?{z^FR_GEQ4{bnv&&)5fIm~3>Ex{f@xtzSjTZIB(&WN4moaMT_Tc3
zdw*~Zo<tI-+5*mzN$r$#z<-P$+Vp7`1VpUBhTEn=;JQQL{z)H{_9~O+$U@L~(v2*v
zdj{>cMM>I+LZCyE7TW!uK>MkWuyx}hFs@nz-i;yT<k>Z#WR^)TKiokUSNfBC?-M08
z^KayF&n4)1MHsm)nBi_Tq08y1G@$`>4(%9XLtfFhY&-3<WbXzXf}Ky6BY)Fbu(LJ_
zw{Wk89d$==2u*1F$s6E{=D^b1$I0W9-(lI}iL!<ceIaYQ1L{MsZe`6IgOv>QVA+95
zcyR3xSf;TDge#9=tcO3j?KK+4u5ggmdyaz0{nf~Ctt~`W9>DUC+Crpn79KErHAIfd
z0oU$+&}HHWaycy<?3-g`5B!_JuBZa_PA><$TzmAxek$1K?!kR%%R0}w2zJwVgF^TD
z<kaeeAb;?Ttk!!K$h$s8KDFmT?!z|JxT72Sd3g**v}NDFHiH?RLnSd?$nns2q;!d)
ztY%#b*_Ct-A&)ksbb147uzW_g9<;?CG@-&LgeKITCR9jUc5Tf*M%kko9T<`C;ogi`
zZs%6cK$;N!H}@AWe87E5?o)D~lKYIzr{w;)@AJ7&$$d)hQ*xh?`IOxEd?Rw7lKYh0
zr{q2(^C`Kn{jiz)l-#G}J|*`VnNP`la$$Qs^BI}X$b3fTb5fs?CZtOfO0TaXySx%1
zBX5=LY~xE<+CLHrS02LB4+`j^S~6som*cMV88U(=L%R*WFmHV$**{|qB&BD`E-IG5
zf-*}azSe++_Acnj*%gp{wjFk9dlr(=bTG}C17k<hZ+Xu?0MR?EWmf{`!lbnykQAN<
zarQdsrCU10pc>pgF&v@|MnWh3Yv3Jnj8vW$z^8GH?Ao4m@Ea0`e7abGUw#vM|2YGC
zHBG{j{%Y`X{0`37lEL7PJ-PU16BuqBA-ldK3yi1!M14McgYmSs=%=Lx7@j?h{oTT$
zoo)h%G@-f<ugI;P_2faoQQ3_N1IgV7iD+P5DY@Hc7;fRBLGH|Yjfc^MZu6E|(1eN;
zYe-gJJ18C)E3JG!2X@NT5UfgvZ5aY?cYZW%e6pIp2J|zlw{$dg&$ujIo+RF$4$JcT
zNr%VU!m`T_=uBlDELA#>O@hlHeYFuDc)cs6wItA*?s+3x#F8=N_Ct7$ymY%c7b0eF
zLYL+&h43+z*fe7;jMlcoL+rz0)P;kf@IoK#-Aak?`4?bYkRiQ$^$lzqN1`h($zZeY
z74FdZ1#HH2$Af&ngY}cQ<n_ZU`nknz(q)Jh`PNAuDGZxMzMalSSLwICzxBF=O@^%_
zpQDtp|4Ik)eyb+Ao;`}b-MvM09_NycolYY4gO+4#WIVdAG=ywzJsBI`4<d!5x8Ytk
z-^r@17&?d4X+j&9B#}7s6E>ulNkyOs>pcUIY+(@;w06O5JTzd<7(?ts6Utta1gZgZ
zV9BCcBs_Q@q&Fx@puHH<UF*^5UM*qKuvNI-lev&mwhjARc7^1ty+LKoBN#u`pA2n(
z52BtaO7|<)LDa-!=;BIW7}r$`cL=C~v6G_kpj&4kT*n_;G|d68h|Q$`o892m-Cufh
zygzupScR^HHiGB+x!7E37xWnY4iBBt6+9GMfwE5>Xa=t#eS*G#)_6PV`*d^A_Gm`e
zQXhb}n*p}i{vEW2*5csKXFxOD5ftehlF^poq320eK|E6GGnAaIi$^!t7m;&GcX7u_
zTgln2T6j23=nQKaA=#rKTYEAwnSUNuD7BXk*XTjkS~+yY%?XxlP{S>@eTCG<dDwE^
z07&jqMK0H0gOuiSVyQhDQj#xA)jh_;!rCZQ(PlOzu3ms!^&0~52D`C?YkQa=Y$1>I
z%OI|k7qOc=8sZ#gN%dt<A<nKPsuHYWyx9+|W9kDVUM|L-rX65_+bHsWWdQiabtW#y
zjKEKJRcdk^0e;_)qKhGYz$al3HayV*+;eZ>K4c(tp7<T)E#1KILm?4=RD#jEzDRLN
zBpBO1N7oI?p`CVbY<{C7Xnk9WhxW+<Rrg3xr3u}jE$chancPB0k!tmEa@#Nw-Az&>
zwSh~pZQnEGs(vIMQ?r$vzkmBrC#P=z{*zPlc2V>)wKBOoL<`pabSLAyT0vpaK<_r$
zN1^aw2Q=^504PkHh?-36p-@r=)Ap{A_NIo^p0<Rv@x4jJN+U?Udd}O;SPoKaN2A1#
z^C4}06#8!54i-&Tf%Z{(5FVyXZssLGnCeq9CgBT=xEAC+*fbYLT((8Y;#&yQut7gA
z?}PBPLNE@C0=Eg@$o0rfaE|IpM&qZ@_45MnQJ)kjN228AL&14+ENZ6Xam&tub}lZU
z)(}jtoH_<A%Jj&nGa;a;+tYi7LMSL&+Mwj`LqNs;GxybBSAc%IC~_>jo?H^N$iD4~
zWJJeSWak%u?{vSrq_}q?S}@Iq>@V%dd{U9kJ}hdR9040tqDl2?Z+a4XnT$+}gAH>R
zdTW3E0vpnzQ9^Pl=ll2f7{Nf^5i*2Wa@k}sWP}Bhk>xs&F>5vVGv>GCJ|puf!60@u
z#NL`hE@w`H*r#8}$hw&j+whh9v9Cn#GcunN^v^_qPuW%a=Vlt<Q@xIiv{C|}+I!sh
zxf9EMM&?t3Zh<4TJJX$<U!@O*{hp8!9#&v@Xe{>)&#mV^Bl9UiD>;JPonA)Hq)sLG
z<DQb?BUQ;mt0d-=httcL&q;kow#&2a538L^NTp^O<XX}{($~_2ys!*$hld9gXjh|g
z@imaY<uQ7U4nV%`7ig6^0@4)B$w>!eSUi0(2|m6Lmb{%TmX)-COaqLf9cDqs%1HFI
zO&~0xr|24O<X~d#W>Ph8CQJ#cB*7U*kZ`P2B=qYaGrlFFm_7lJaHb7<VMjmsiSdWl
z`$M3oy8?Yr90Glv`;uYx7odOca`93`77XZj5lt$e1O4^KpoT0H2q^vpt)w2%LHjVN
zoPG!_@}HAoOE!Y_0d4W-*mGdx5RN8Ktp=;c67;&qIp~-=7St`1$@|lG1mgFRFPj81
zEbS!ualF6yr1K%t+;KgcI>(WG+hl~^+RY<hjxD1J8PJx|_K*V$cCa?d-uKwU+9fru
zNZ>6yJk5sPj}5h^@|GE_abfKt2bRx<v@Hd)H<~JtdUvzbT$jjOcH~#fu#rY9-m-Se
zv}I|9<Ume)2-8iGHF)=>E!&Rd2deRw9sAWXZ1n6FZ&^D!9@-vqAZ`pePpy)@I5_~i
ze));y--Pj&9sAWXY)r?)TSk4_9&(^XET}jxlRe$i6BMl`BgI53-m+uATE>0WGP-`&
z9<o3EE^CwQvHoM;E@eMY&f~vY#{Azc(`7A7izd5jXv@-~Wsg$tGfGXO$cXmKhB9LP
znUffS`LsRUr{q2*_bItg$$d)h)An$mlKYh0r{q2*_bItg+rxcI?o)D~lKYh0r{q3u
z5BDj#Psx2s?o)D~lKHGX%x7diBl8)V&&Yg6I)_@)maW}aLW=gzfV}5(WH;VfLVn{J
z>3z{A-m;RT(X3@y(`-0znW{z>q{|kOP3iAp$;ZpGn=bK?@$-xHp-(k$*)9Vw)-tS>
zZo^xqW_<ysh1?{YH@$@Tif6K$wO%lz#$0MNJ;htLd$Tob8P?IG6Q8zBJtPzSW!=b@
z+Tjq`ZkO!V@(>tc^+;;`<i}gK=f1#NhIM^4f3<A0Cs?Ybl5Jfdft8aetEF#0Y;=;P
zkEtVh%l00A##)BknAG!@Y0#E^qAlBgRFO1oT`s#_^nv_nZje3=yu(|zuiSvO4D0Eg
z_|-CU)~TAe%t((OyAmf#N1q$>c5U7>0Sa>`VukEdSXW+%9q6nskSUXM4&xzhZw+bJ
zk6u3T{vlO$35V1RK4{x}S4ge8kCm>^fHc!j*jZJCv`IDOym~hX17*^7`!^U>xL>-|
z+Z#sY>7tz^7DgOBj$53%521<ouxsuX7(<VF=Z-0Yi}7iqUtj@_=e?xMukJzDL#I)3
z?s({WM+>WTG6ko`INXhnr`y&s<cwWDC_l|4x|S)R<T6XT_HGF%?CFC_#ta5Ujayh{
z)FNo{OrHDdlNw2tQ#C22Ez|4}M2gq!lWL0t$&R{qsI>P>QryKEtK`zRCOb2k|Epz0
zrgWOMhqNxMXOzwrykbO~^9x|Z_=8yPNKaUQvH;uDmaV79Jm%B(5cMlXjM9}OLmAQ5
zbGIR5!eXq@<0LHkxfyqvwh@-hy~=&s9-?Nok{zq0o6Tm7X#2KIh^1c_P)s`rv0=lp
zgRLjToZQTP+8&}>KA#<{q}tJDjA;AI8t^&&6e}Lv2|i&9umc?re(S+~+8*vxa-Wj=
zRbW`LpZdl0i(HSmZ|GmceAXW3Gcuo%`qhlg=cMarq$j64g4VN^$zIf#vX)8Lowu=;
zp`zo@ATJ-I&r<_o&A3c#L0gt%`-K#nbYLx$y+|8MTlP-6+j22v%E_TES{orlqc{3?
zeIhJ+_yJp`42P6Ci%DtVTGlez%Qe~%FLRe3ZO*1Gb3xnMe}sgiGttivk6`lnrMOeo
zQi$%kkL=!W#9AhMlh;67woj@XG=R3O4sA<Oh5plZu-x@a(5H7tY&U5;;I&y~U!Mfl
zGFjuhG}<yrdK5E-wrl~~MuNclpa+)UKMO2Q<>Jn!{?K9Nd2+x{iM34j%~+kaOnT_k
znzamVcXT7o_M@;uc_wYy4czrt%l>q7+Wp^ua;h~v35rC4l<f9`O%DXwEinnUIK4ym
zYgfV+KTGsds}{D*zlpu4N5Pg80<;<M3>N!Uk-b+R!D2Ii+2it1SadQHSt}L5qPidG
zdHZvaUUUkJpYk9hJq+3&H-b^yHj{(xhrn>7akAH49>dV(70BE@28O;_iJr!oz$mQ=
zSX}H15yz%L+s9?}FZ$n;gGpn+>fR37+YhB+zAYG;t~m)7<_A#yDFx`1Q-#HTm%!2V
z1n30?fZX^kWdBhc@@9S)*~hqN^aIIkWYYO8d1yWzJ<%RPURT}5!c+y)yr+zQYmWY{
z-=#-n-;%i`Te(QqwB#w7_3R{S=iWqSJhDf1dRs~Qm)+QFdKAgK^oSl5SV9Fm14xO<
z4cK67B)i`4DQsGu^eZ7(mtP4@c={`$odG<dv|D;)?;LuibcDI=(dT!NvE>@FR$B#`
zo93YB#x;<6!hk1~`GB7M(uBeT29bmEUm-I8k?d949vD9;9+|raK(tLgdK#+*(OndI
zLeV`Mz@SwCIES?*2Um22ZsuKOZyoBuy&x8uE^>wLS_P>7;aljgo{L5Lin;%23;ILK
zK#_ikeqf^>D8C*k`{=F@D%-~)lSq2n{<ad;tG@!3W1YFLGGiLFp$ToTyh`>jRwFwr
zRAf!ZpOTX48&JC&VWgzM13fXEMv6%+^U2Q2tF+Ls4=O-bVlByC?+7a^>8Vt1BIF`d
z)GBr*<l_o-q<I=WY;MK+bVLPmwID}dvqY3bHuzOT%8uKzms=wsy(S9ju9*Ot9hah0
zoAyD5c?dRFR)F-{@6eLYiBK#07tuNNJINj%vS${rA>qz?WVoJwm(b7;T^rCD;_a8=
zF7cNjZmcJ?9%lqDKNgY_^$viR^^!GYbcH}K0ht_H0|Vw&qX*Yaps&dQ-2G-0_y_|)
z<9!*Z7M~%zeKvzm(No#iu{L1TUIiIyDS&b89rSeaG%yHSjiqn&FLA#)uo*$hNe8ko
z`7t@UPlqTOWs-Bpm66_^CUU;-K=iu%R&wUZOWcPhR7E<_IiyGD&=%UV{4+NgD_)(g
zW<>K$n;3D6c~?36v6hJf_cLhA^3S({^req0UZvE)qQ}K(o<VO|bl(lPNK}XPh4V1;
zsmJ{Y+OqsJaxkh*P{k|y250D}`DmWS4;cFTJzf7a7^QB=ed>XpsS#@r$){gK>6CM;
z;`Q8pU||u1<~gpWEvvyTCO?EuYlCn<)-sn2(7o}DwTI;OZA)ICO|N+IZWeiH`3}u}
z)|WhVevMlwv?Oo5S7LwKvY%y!yk)dKB$sSrZK|jrrO4YgH+dzQN&nB{%5!4Kl5hIB
zFHNX`w~Qxb7w{_~yMSK_*#-Pc$S&YlLX<oqy8yn$nT5N!Psx2s?o)D~k@=L|kG3)8
zJ|*`lxlhS`M&?s;zq{6B?o)D~lKYh0XJkGl_x~UE-UBL%ZcErE=bUo}5fBg)2KJ__
zG3T5W!)wj~b3)8HXT_|TFlXqlY84|2VgLi?91v7Y`0agOy>su(yz_nknz^&)Uu#&a
zeX6UTbNckQcXd_uIj2m&Y!^OJ_(b6oh0kQ4$iBRXvWz|vO!k@VGuam;pGjHvfwF8B
zWm)o+o66c6@tQ}ovz7HrilxNY6_oW3#nRm<m9j2;xH^ztVeRC6MgNAsGBYbco;~rC
zGS@vx^JHI?GXG$t)X(G(Wqzj^>6Mj*GIx4wb=1^sW%lasig}qz8PqIKUTlI&Qlg&b
zQNtn1_@sx@@NW*v_y9xcYrqmEY57uhtsVx-kmiFG>$F2keDN!JnQs<d(`l`_m-ka?
z-h8Vxu2E~H`J~Ef!%_W}hJn87x}0S#d=%TnCW?KfXnDnn&x)&WoaVdlX~nDF18J<%
zTJainRc#u5PH|h@O5K#Q%xQcN#hxN0Q<kkhIaEG(#8+!OdX0SXyRS4hWT|{<*ekWA
z%|Q9W=@#mC6rn86GWj`0h`ys_e`TMtH5nw!$Zg7&AsNyYj|s}A#-R4dx~{A*xy7G4
zWes^xPiFIXl<a*)PnjL!D%pmplo_R?q-&;e%Jd_v)V_ylCX%tw)U7(KQKq*)D?c%*
z%HL74N7q!P^ZjJWVJ>y7*s)8xZn;%yb7QGGX!&=gqvpA~b7UVSF$d&F=ld$rr!!@D
ztL{qqQOzVrJsTy^H$lqlxLXM*wor!@G*?1D>8ra@mPN1pAm7`uR{pZ}pzNqn*N;}0
zB*%vuxllJ>%8Ps<KX^A$9Wvmh{ISqcojBY;F?qLLzID_<UPM`Dz3rhq?RC23Y<^oF
z)h0s9^Y1B7m>HoCesEb{>-JsUl_GSSv+U0Z(RZ1M(4Z!NMyS&j>Ed!%Wn+DPwcE?<
z%9=Nx>iQI+<>YaM=sSucG)b9P^*u$XRGE8lqLe);SDAgUvD#<)LuJO+t?HJx21?4X
zeIi2i9VL5oKdJOBZX-D?YN7PaZ!F~wD5vyUGEf~9^n!jTjZ=5pK_}CPj?0hZt17X3
z9?R~1B_+0atmNpvP^oThB;^GyRbpR_SBJbAro_gcP<LBrpj6w}Kz^`~I{ppcF1zS*
z6qC%QlH;5;is|_+QeHh9#mqfKU9R&T#q5!*y8EariiM#{zDE(-Oj+i5xW2sO*mcRt
zD_-7Rc3sMwvR~eNV34}pqZ;zT+#2d06rtlH%TCZ|Xv5@u?WdG*W&Oz!lHn|CW!-lA
z4%=I(taz+a8&*wJ7S6e@_Mr&PqHNSrgyvjcCL0(WQ07(KBbl{mMOWQ7NZPH#m07DA
ztF8XnpiGUY8AP^bD`UHKk+bPDG}xz>Z07b!NvbhQvPrd9#-#^J7bY)IM)o+YcG<r{
z={I?gI>9enNpv49U%$6jiC_3iws6T;>Tj(iIena|G;iW2<tWqz&bm<T|HlnQ`dm)k
zwqmwY!|AA;cf7A+vnQH<@J>^lpS+Rmk6J2T?&eZ%%yY$~zmvM0+j7NuXM(ziX|`ft
z5G~)J2pyv=vt2n}meYJC>(9gGi&cH4T$+LBa^f_a)ihVWdhwWg5Jl*^?8`Tam^{UV
zXI=brvZ+7&pH}?y_7VTimYBcXQt2<ZRQ}5?RsM2I)xX?Q?Ju{){^geHf3>Az^j~iI
z%NSJr%NSJr%NSJr%NSJr%NSJr6$8x_6WhQ2|NMEQ6Kb?^ofyl6u75s_jE???`O6Id
zHu3(ScU0lY7Ysbb++sW@-M`w(^P&C2)?fDl`LphS+^DB#m}18N{6`NG{{6q-6XN~a
zYDu(m5Bl|tC)4DTzbDnCx%R~5ntYENUS{%idA!Wz*(5A}ktgKjWu_@TxE?0|@iMPx
zvh({jxE@|+^7`NPTG*O-x+seR9Cb72tX9m9&eToMeWjhLSE!p{ovhuzC0^Gu&q?0m
zw@_CnEkNm3>AkLI)u+no#Cp00?$eb!YwGCwom{GnP7TrZUEWXrP}xt{b8r`>$@f@Y
z3-3g#d169{&fc}Me15Q<&U*U|)ry~f%2!V#Ri~qqmF;Pva;(Zvnb#^oiL3Np8BnlN
z*_BvNSz5_Txv-{=k~b<;X_XqH<VIYV(<=KZS@%vUVc%nwEj2V$b0ey`CDq*Eo}aGi
z_8ZcypIJJzPL?KBDAYOUImM5AtEV%gHd|87UkB1JNz`U5YV&?-a|E?HfZ7~RZMNzY
zuL~L6MJ_5GqH_{$UPsZ0ajmTQQ8XgA-;jg!hUk2(ljYbPKjj6r`MTdix<yKYGKOkC
zMm3+OHs7E&Kc|{4spgr@9Ca4U`ziJwb~<B<MlWjfQ_<%Cjq`s?oU!B9M_B1d9qgx>
zidAp|Cd~-PTD#3K$;cg>dZgkIzcbkCM+tVfYJeTQc4Ld8G;BHI6gIka858bCVb_dN
zSUXX|0rgK{-MvoO<E8~Ry<d~^M(-bXMB>Iiziuxi+5Z1zN5rXb?(WHNhW>a5#5<4Q
zJ0f1@eJAgLc!%+ON5sp&cSO9*JEY$`ASVBD+27^a;bq~{PR2o5wd19(huT0fcWbBX
z+TTIWJ5f(3C7)7iT0hqXUQbgN<%jCLm&(emp6R;iU<ajOgpaQ2VM$py&rsL!Y8@rz
zTr*we4bfE7j2$nPv(t^_3(@IH#*H9(-idn3G~>~VtMzlmw#5!*(jn@Vyv<HI+cRB>
zUs_K&Kf*`Z&@V-q;9;VyNS&+vF+WvlF<wJ8b!&cI=dT#Zow_CJyk9wJ&%W@}=^LDq
zb3Csqx}B|*=7*Xo$I7QD`>3Y74T6*d)FzuMlG4<}L}$^gj#7<kdJ2hD(>SWhSZyG0
zicZ(*)4OXpVxe-L+GI#=nnN}9r<x|VG*eDdO<Sm@Ols33YExfoQvtQ9In}gB)bzh`
z`hSWO_Bm7??YcL?aRJxRk&=BpC3v|3b1*6E5LTr}zqp}TMP48hJZjwmZ0|Ayy@zbU
zeiOf<FD3ZEruQ+T{t5bw{$o;$f%5-jllosBRdDP1?|<;oh4kpsRh>hp7<KB*LY>*Z
zGWBJelQRFOmHMFL9c4q0$LdNxS;~yIdQ$S5LS@FCLt07$<?#I-vb#^TQhMpR+D*Mf
zDa=e)r}P@4TsZ$+y1m#=*&kNo=_1{vn*Hv?sMk@=u2E&`3sm!GsyUr%K1DTGpqjT(
z%>%1xlr2>AU8*^UYOd%Lt+RMKLhV2`|Dc+uP|eS%=F3#`6;X5crK^heSWoqunT5*U
zuHV&JRP*36H}zh}J95#2h3fJ?S@NPzdQ#_V8hOdEtJ)t_b8u!eSw(GLMs2pCn#WB_
zR8PEAs5D)2RXRg8d$oS<>7w?0+DBK5+I*PWT#4HJ@a-*~>(A-xENXKJwYf93`3|-D
z21Vn}okOZk+EhA<xE?>qTTd54ZI;wKbRPF_saN$HqO*NmqINlNrZaRNOVRk>IRCfA
z89UKY0UuoqH3`PpVd*%Qjv#8&j%LKEe%PvmH+H}J1Ut~qr!DP__~@d^u@>0mwktNa
zX@ih-9uw*4BZ0jBJv(6i6J4<5*&QgRaQ|03qJO+y!2h(Pi@(?ri4zTXw?Fqv;;4d;
z0Dd1`@bdqcqYL(bA7$_|A5rk186Q!oYh2XnYGmzIpV~E37d6LBef5Z)&i0Lidi|sn
z<yBFvx=z%1<!<vnl5|p|e8?Z6Nqsn3XFs-=G}-2uE^J8)b^GzRbj~}0Y67aMalO6j
z45~@8G*jnLO#uTP)TxtFbY`R1svAU&*Xf5Il3JY9=q%sV$ecP`PZ#*Lmo$@VigRqC
z?o2g>mgk!Ms3u2h(>|)njM}6eu~V+)2dNiPo7PdABB)IZn)gv19yM9nl0QOQ8k?$I
zFS#VSc@NPUQk!u6E#+>D@l;bQs%bFQbe?MJNj2T2HYL!z+eK{(D_yHjq&5ZaI3z9W
zT&Rm2SVOh_T%xWHy}Luyrmj@eaB5Qn@$UXNPXAAF!oGBbU`O}Z7$5oxou`<HBZ~6h
zp5aKJV;Ebp9QLJTty+5%c2qCNX!2S=YK1}7+hHd<ZE$_J9tTjlfC@JJ0sV*5gew1i
z*DL%eOAP(~qX(zazxm^2=D**hMUigq&SLd{e44;X`TI11mw%ro@bbTVnn1~GCl4JS
zuk)_9P#rPtl+JY09d%^hQf2oeJxT46s3bR!mUE(aD8qZVQ`A1`%I2=o%Ghru%1;+F
z*}2hG<#yIWs-YXzP=jiSrW%5%h8U{hDb>)DYB)tTT%Z~b9^9=U)o_<;NcvWy^O|EM
z8#lVDGk;u<YIuA+RX3#CLg|g=XkCX%cch|Sp}O)zCu_D>(9=1E((E^Gt#r1xZzyAY
z(se=mRw^qeeATs}8jfu1qeD@HJ++}dwIPAppr$s|$y=&(7&=*6G%s5DN^RIgZ78BP
zgi{UHR6}=aL(Mrx+SZlgb)lk$|BZu)gE(ie81h0KzQ@{i$1#+Qd_LZvz8%|I#9@aG
z8Q7sq6>Lg}@+}6f#Kv^^j^p2AqG}eOtMlhn+!6R+ZUJ1cX}zYl2I2-vy!fj-!as3_
zR#4A_pV#y-wr?N7m<0)f5r_Q*L-M~1`s>{mWdD5^Mfgnind~#!XR^;^zwq^R;WOE1
zvd?6n$v%_)Yh&vPpUFOxeJ1-%_L=O<W|qQdvd?6n$v%^PCi@4LWecClK9hYW`%LzU
zG-n%?K<f=DTtbja2vP|_Dj`TE1lc!!+DrIM_L=N6*=MrP<Q9GJuu!y!$t_}Xi<sOZ
zCbx*m{_E#0h0kQ4$v%^PCi_hG?<TnjpUFOxeJ1-%_L=NoG0Yb}lYJ)pO!k@V6DdNm
zZVk~V+!kZ*FGrutcd){?2k1Lw2Zj!cKtIP37+7UA`W=Z!@9$^Ozr7_^?-+)zGc{P*
zXbHNxbi&BA7wEQ0!t%|2qI+Z{27bvw_mj8KXMJV#sQnsitT#uyr$ewx$ZfRm?1NFe
zX(qiKFAS^n93ARC#-QVE(cv_`CT>B;n2T7m@EKYp_+r(1FVSN2Q;be`MoYt!81B>?
zExYAl@VKRDsojpg4;<0THx1(g&!XYRY^*l01sc8{jurPyXjEwxhJT)lM&na31PsyW
z%mDODPDW#^*$BP1!k4n27&~_|eC_@jV-9qJuV>$3#I0EP7WNcF%ADZa{Cnsh_yN9s
z$fF2VN`HoWFN!d{fwN%1BekH%_@ROh&Km^H_g)qxAKrZ!&AuS{g5(R5FG#*1`}gc^
zh0kQ4$v%^PCi_hGFGXz=K9hYW`%Lzk>@(Rv(IigzO!k@VGudad&t!kcfa}6%vd?6n
z$v%^P;;#tVq<-WQ$fOd2R6>wS2vP|_dIdC2R|%iVK9hYW`%Lzk+@dd&+(e6*+#)8o
zh{-Kta*LSkKU<eBd?x!$_L=N6*=Mq!cdD-Nnd~#!XR^;^pUJ+Ge^2;K_L=N6*=Mp(
zqzF}*wiSINCS$NhLf`Dh=>7FR`VDhOmnsv`-{}e34Dmq!qv>dpb_@eLjK|2V6m)H|
z8bh9Vp=)7H^eM|lw*kKB>edb2N{!LB@+x$nwi`_wl|v8PvlwmJ9c^iz?oiWaX#1`&
z`sszEUC$oq`mGh(6$GJeNhI1g^G4G*D`@^}Tddebg{JE-WBKwu(X?z8`Wt>hvn~VB
ztsoc8PEA0&BmL0as~MUtFhTRN?J#B$eWT2}jA4!MqMq%13^0yHy*3BXJ%e&%!)ml2
zeHQheC!=|E66!~7!b-V6;oS{G3?Enl-dF#IfhHZ{{kmfG*f0x<^k1Pv>`^HC;~|<~
zdjdu0c|YWGt0Edq(xA0>oS<R%223b!vPba#t#g8xx)+M=<im%QMeGZb&tzYad_nTX
zcJ>R+HwmA~K2i8g_L=PScJ?pNKPY@A`$XY0*=MrP+u1+qNWTbCdzkDKh0kQ4$v$sq
zf5*x^;WODM3ZKb7lYQc^2-#H?uYgP{!Q>KxR6>wSi0$+WX!4~ozk(q9^j!E%_L=On
z$1VCcie`wWcfjNp5k-rb+#)8oh_|!<{QGI)GubB!pUFOxecsOgjVV`z&t#t{d?x!$
z_IW$|I+OdtXR=QeK9hYW`$US6-R^hjCpSUUCH>L=4^Q}Bd<6qcpTSGbISfcU2)E{C
zVqoJ*aJIuy41C`Z?cZHNw>8_)>{tzSFJB+ZzNMl2;Rtv=eKmTh>>=Of8hTtg3g^}>
zN6&US^!-GU9`OUs^ZTLQt3#+aDIDz+_rlvo)6o9rKqy#lj1G-@K~~{NbkMd(r;&5f
ztVt`h_&x#6_WGlK@)tC>E{6BkQ_*~Y5#03{hvpaa;6h+av?zZcosacHy>c{fuHSdm
z8`c61QYxX|@gyk9-HQ4KUEtmZnlHIwZMfJg2K5*BLYHs#;k|(oTF1AB_kVmx!)e{&
z{rM6oUV0CTD!hh5pU+UV=n-7nX%9soX&@Kf&-2eC(|`881Dpf9qW*}fXz`*<P%nKQ
z6JEa^EqH6(VL_eQ2eF-e_+aMAz99Kb_65loBwuW2|3SGZ;WODM3ZKb7lYQRK{?$5a
z;WODM3ZKb7lYQRKe&!$Th0kQ4D10XSO!j#@`+HLc3!lk8QTR;und}qkvq~k<Hhcz`
z5Tp`JE+I%I1gV7B&c4Y>d*L(LCkmg*K9hak&Mo@BELOCL$t@y^7BRU+Ol}cxXaCiq
zCc<a3PZU0reJ1<7o&EgW9>Qm`PZU0reJ1<7o&ED4#t5IuK2i8g_L=Mxd4FdVjs7{y
z(As_u`p@cuMn2EbKfWA%YL|k3pWegc;Wf~2&vD3^_a6OvCZlte#pqGDI$Aj|L=Tf!
zXi#(%-OqJ|;x&8Gea1z2&~XmB*PQ^_R)3(o*)DYIRg4ZN3((T}96C&^g8G`1=+Lwg
zyuWuB9o)9Ty~;YYe|Q=$&dx{s-FfJ^vNc*pPecpnQaU1?gnCP+p~a0!@YZ88TBHFK
zIIl*F2?$x{P0^xR89JOlf`(iD(cJwF8cwl<vNNV=*kvfZ>U;tXYr4bDPh-*0RSUWq
z3L1PYhxXsxptRB)G;?VLrF!Mzdk=m1d?^c_uj&h*SM`GH**WmJmoaEfs>A1)&7Sq(
zW9b=@MNi&D3+6poEqLaJvEbngg9W!{<O`B7vWR>^@&(BkBwvtxLH0R|*k`iOWS_}C
zlYJ)poJH(2*=MrPWS_}ClYP!2_L=N6*=MrPWS_}CXA%2M_L=N6*=Mp({1qY2Dk>qe
ziAo4k2|+3$NF@a66+{-X&)LL2lYJ)pO!k@FBF-Xi5tCcQ<Q6fxMNDoHlYP!2_L=N6
z*=MrPWS_}CXA%2M_L=N6*=MrPWS_H$eJ1-%_L=N6*(XwjKA-5#Sq3j_HQ+3RI~kE8
z%d+F`MV4u`B_hiXsc&+Y!6)x9&N6tO(227Q@_XcpEW0$dn#i(@v|1v|(&a{+Wl%Ed
z4QClVO}NZi2DkL@P?j}@^JjZfmTiTTQ-_Hx+Y_(lEQ1dZ(>crFaqTG1GRWILgtBZh
zoHH;LS$3>vJ&|QQGpllzK~e4DoMrH^v9rjs+}iy`mg#D%MV1||9U-!8Tih<rGI+P6
zDrXrK*1jmR?CPULk!9M+pG1}&@R=jBY||;fUs<+yz#s5)`6bwLZ2|mr*bQr{9*45|
z^I*}MM^I)l2xjVA!;k4rVEm<l@WX&UnQq}w<l7Lo)cXkU50=2{5nthbgEUx}dL7<9
z=mOKPRfTs+hA`$s61=my0(+Dqc)0xnY(AL>58F0?ReQDY(Ch{**m@lv9BT^GR%XD1
zzIR}h+eCQaIRN$yJ_6UH>%->A#gO}TJ*<3v8*+6;Fn?PL<SuFfDLpSjZpW=K0%kyN
zs3q+291mxXorg_Z7r_~7^U4r<KGh56?b;4!`qYN0(cj=q<H0br=K?rWISqE7li;YT
zK5TN_CAcEdQE=|=ae`Ay9|;bcy@E-fA&L<7gzCo;qGOQ`93iwSYrqjgt5Y>NLTEKM
zj3b0rv7Q_uG^w+bBZMY)WgH<izSEu~gvQ$sa)i)$m<dM+jiJAYP?>X%h|rHSEkuNV
zB;6Ac`VrDjMCkj?Cn7@MXC;XUy<6W>MCe_g9U?;SV!nz9z5UrqMCk4LeIi0{mph9H
zJqXDa5qe<$MntHvsGNvU;f-b@LWL*ChzJ#KIwT^Lv#+Iy5R)Us<Onf2LQIYjks@@c
z!CmwYkzr5VWb|4y4z@)HqL*D|*bs0QJyYJoO6NZ4@nt(KGP6LBLEYd$dpf$i>IrEX
z#^}<a3T$@TjLuI!!<v4r(0S-?SaRtsI(^#?bKO(WX;w2x@BI$##terY73mznV-sw6
zy%}v!kAxKmB(&`^0u~JPL|grOFeB^-+H8q~y-B0dBH$uy-I9go1xB#;Y7M$ia5-4=
zb~BncHiJ1H-e_(d4#~BW&@3|?c2Cns!%Km%IWQCrSEa(L?F-PbUn(rDCZS>V8!-Lc
zNi;OKgRyJwqd~qqq%D~ZUtfNK)LB08_2>#%K5;*MO{ofVN2uXzv+I!D_Xd3R9u7k?
za^TBLds~A#G3E)sj!i{x%U>5z#ht<pLg?o_`sbheV*&qoAo>;2UB>O;ZigWdmbM)e
zwq?W6`Yo_^>(=P#*9JY8pTlOadO@1WAX?Xk9J>EY+&LK7Qw#lj(LO$827Hb%^|YhA
zC-lR>&)MirmyLtzw;i7^1z3T8kae%t2xI7SvO@(MjG-THt&5Lf#GC}QrOV90)CJ6i
ze(wo4u;R<he-{(c@$1*2`+r|d{?^Y*#AJJu9nhvpI+owDm)`e2jtRVVoQ0M9<YPi~
zTX=MCBdu!%oli~?&%@Hv;Dcs3e5v~czRsCUF$tyKGeK__Vf2!b7-UuvD^rZZ8s}og
zRjV<2^Gyt=-??I_i(K%53gUUt*asL!y=SP`42E5O!Z8t--0lC?VYiM-UAt>^bVXYu
zadN{?|LLOu<!7^}$#Xm=%BQFM$dg)Jl@|>?F85tCOAb+c%6-kP;x~NgB~J>uBDHsN
zmgkJ#CFhP@E8_yKyk~Jw*{9D%d0M8sw)A^@*)`~__Wi!|@hvttmz}zOlw!M$kfU#Z
zkTZ7Q(VkCgAg^;t)edTYMIL_OiDuS^6|(8hff}FM#&~>MH*MgS!;&kFKV2}+Lrxn%
zB7V@csq%tG`&F%HypwyjY^6H>#zNMQD^q3FO3vI_bYC^^OCQzyJ(E;HQ|HR-zD29P
z&MJ{-E{>Eu{Ex|rF;P;rOBu33jh9kQ&os@dwx*JA-65*ut7=FFolE4!v!_XYn%$L?
zM}$aYzFEkf93M#2mR6AsevXx<HQA&!TzW<tdhoU?IW$aab7>!qoVZO9+7)|MK0N%G
zoVFlCp5L`4-QV_s96ZKTPIIe^&-WF{yJ{IoaTKB5^MmEfS-s=|P4wlofJbt#BxgCr
z>bjh094WgLw30h%zu?zyF>)8HHd4g>Jh^LDD9!IOLe_JdDX$+vQzW+;FAvKt)ZS<o
zC!0>JpgrHrAl~}2m-fQ8O_KMLdD=_Q#>mHmtur?m&XQNe#^e0ND7n}7>G31{W^2FA
zULBuyQWYO{s!RMP%YKr}tGV$jY3`w8Ry`zxTc_j|`pqSiH^p+V^?H(JuATOi@fpcR
zUK1bOakXR<9w#|;S|?f0n<*cq2u*kYDz9)}E=}`FlzY{ADW#~EYTuQ#mr~rn#=G|U
z#FVU^oS77%Jc>~1e0TZapjYzeC#LdzJ3skz%P_f|v8Vib;KIzxsXlV)qDE4AiqMxw
zgXEmfKjkyV!{xn=l4Lojw>;x*lB|iCCHu7QCuf}M1Owgb$eGt0N+B7svNr0ReC6{I
zdBKx#dB@>7^4vk4<SE{=JTurwc8b{}Pixo<SJ#h{rzcI80{e!@Gu~g8FLpX42iy*j
zw}jl6y(=z}M{TSsJD-~_Tl7%NcEje!+Xh^e9r|^X{0%g+)BWZ0xrI)e(^WdksrSlj
z4pn?44@nuP+2lT7*7w|~nV+r~-!jQavn)G9@||O(*-+k1R%VY?y~5S<y1>t>N41jV
zJ^@~;J1s71-;C9$3LK`y&u!w&l)Rk;DMBmnUlLgs<2GEL+;Xk9S;I7WKuDZwR>}~$
ze*+(>j@d_fl3!nG%WMmIc3>NM;XDI5x@(*qnlV#$cCMvOxUf%K+@_0awq}R6Xuu2!
z_T7>l2UnBUHprJFqw2~t9#zsVyx&>&^`EZ|c3q*ZKBk$*o2K8LV{fIgTOA=)tsklN
z?vW!c>AY1tJ6I==9@JA6yf036FiBL+Gbz!AB`sB*-B_SXS=C;Zwf(VF-o#Y3a9nw5
z25wPBb~Kc`t*a=RH+(J|6+1}*jT>t{54M+TJRGMQYwR!8tg%+|ylNu(7O#;;r8r53
z=`M1^%#~8lW_Ptk2_Dj@l22OeE_bDAy-%t7?Y+lYCfSts<}8!CIXV5xve^_N&NBaR
z+nL(fdv}?tIc|fQQuSt`g3BpF?6Ke3d%W<8!Y2x!D10XSME14k76-A<WS_}ClYK$*
zne4~!?r?*BCi_hGnd}Ra&tzY+xxb5jCi_hGnd}Ra&lEmokMN1YCkme^d?x!u`V38{
zcg$Jl{lS{4t@?+WshX)bm?=fYmJ^&y@0h(gxff;4Eekm?_=ueOs-L#TxSevQSwGe6
z<9c#NQF*Cqm&I~sw>r|2F}38({Gswf_lxq(;dkY7$$jPN`!8tYS|63C*%hnio;@U|
zJby3Mnwcz5J60yG8gWyezGjrXXl;z_n&2ykzJ4V;7BAPvT_~09&dyfNJ@r(!Yd1~;
zn$*EQYLc{O*%sNM?{Rt2uo%s{p&RAUBW0T98&+uJ2CdO7h-<5wSGBihewFtUmSt!b
z_A`;z`NwINt~8ey-oK=J<S<1JwXjy*_wvxzTBcSNq(4*5TWl_}OVy*J;QHAXOwW3n
z=Ziz+g@bb?>w;?XRHHr8%AwKnfG<O&>*IdP{VTmx8(1HgCwc!=ySvxsEX&N;>LFLr
zc9R@Vc9LDUYNf?5L$xKgZ=?$+QnbZ`D@z~E2Ffm$pVYQ?-{p$SGvjA0pQl|sO((e&
z{m_OO&6MUoJfZPEn<;6MwrQd~|B#++zO0R^wMuPN8n0beyh#;e6rl<Yy&-vKhO6ea
znJrE4KU#J6*bnJQ_fsm}Xj|#l@M6`>Vf&;nuBTNlbDdSm_peLVt&^p|iyfpOoG(pv
zIxE$zY%8UI?kiQ-jFGbMqU4e5AiW+xN>#F{iE4jEkOnlnD}}G9FO4f(AWg0wCrvx@
zPTEyEQcB6IEuBj-k@|f<FWvvrNvc1pgJ->rSpi+;^!dS(cd3!Q=fwkQO_vMuu1$TV
z>u0u!?D}!afvI+&2oZ7jjzqcpq*Td0sgm4vkDau%OC7oM_?ps%J!j=E5#^;19dF28
zSM^j|MK6^TQ%d5aR(;c+kDVhq*_mjw405EoFHn1KrM{$TZ?C<$wY&5zBvN~IP`KJ;
z{%~z>qJF&eV_f|HCgzgmnd$L+ZVr`FHu%Kvp0`{&T9_ZdwtPRSa9M2p9A$*ssG>vs
zm@)6-TivQ5IlM@aOft?(b~jr}6Yn08Y$LSNq4vim>+T<<dy7U&<~xt64L8-2j3=Lr
z?>nnVnn_t?5SK1Z_c<qxTs%%n>03eC4~wO#%f3o?cD|M-pW3Q6_`X*fdv60>sJnZ#
zkNo4&ASpn9o%{{Mq&0hf$fchTO1VF`iR>y(w`Z!YDMCc-+PuE3%<`1n+IY#@m`&2s
zXqxiA+IH!}`tfq+nA6hxm!`5N)kAHuqk^oR9|6Xx73G<CY4qQsck=YhXQjDaC&<$r
zx=EVLDtTIwyYxIuEzkI1sx~vcEzg?&He<`!`LfH_<C0Nc1KIJ+S}DcgxooFdB^|35
zEIV{LFFgwUAv?!ERGS>RC%bhX5f@NUS2MQ$E=kXzi)Q-smePci6Et)4K1+x0>olu9
zr$`T;X*DMtO4TNB@-+7sOvaFMI#sd56jf=LC8}ppO{5W99;oiTIVA1BQ>wacFhwdn
zI8AkVU4+`?`(Bl%_szdMG8LEI|2#;oL<h6nS;<(k)mPWDq$65Y<E|~+)^AdmRvLO5
zW=<y3AD{Ht8q%ovzFy6h$#PE`$(gH6$t;syhWXQ6vlpd~M^H)LyF%@LcBGQ5s;Hjm
z6QWEZuZQ(3C9c<X#W3rTf_65tvqOv$f7xH^U^!Az`Fg8eI&D={25r@&972@%1J{*K
zkw@i{(H|APmiOgP$r{;FuYvr<{It}T?rQvHH>e#Z*vVhJ`KSlC3z5I>>ZG)4)?QA$
z;~{_9xJT}?KSFkN*eG|gh>}{3)X1HuELYn^#?e&W4b;8e+smC_ol|PttXDO++91EO
zDpHLt%aQH-I;iF?iIJLYHBilOxKM4rJX$rmWhHf&2klku#~)TIdNr4}oX?kUlnj^l
z?!PTtO`ahgjk_(?E!oCY8?C&<>(y<1LfE4SwWSCp%RS|9t%eKQ70zHvt)AUts%>`L
z2=<`}(R1Oe0<H_6$v#o|MBy{pC$cYpnIf|<NIsK&Ci{ZqGlk!6+&SSh*(VC0D10XS
zME2=W^d<X(<TKf4vM)$JlYJ?bB1FC*`Aqhi><g05qzJY2p?N_ybfnpsA`ovS+in?5
zpPhbE^Xzg;@;)=Q`T93Xa)OPzi|2D?N|v3{X5u1+=IEBc%6^LEyj!-r?5(I8kC0jx
zw^CF=lG?h`7)2GHqW+_K8%5<`S!qwx<LH}@mdmW>%VqH^Wc&Of^4ElQQX98D@|O$N
zYP<Zd^0yX4)B~oEl)v9jR61Kb$|KxADS8*I<^G2n%8orf<sQL9q_#)u%iTSDsU4fH
zkpIv<Ru66YLGCyIhSGJzdzHC!2gM-#u*z>$p6oPdo~ovcr_^rDT2;;YCTgb{pH%)X
z<<!GZ)m7;o-mi4^Y9yr|J)-Czye6e;4#<uje5KT^;Zl1zEp51WSnaH-Ev>#dL7f!z
zQd;^VHR11WS@<uDl|_bfH!sRiRg=1nYIp5GiAg!Cea{)Hr>7#?8rD92+3%5N!J<u^
zvi#5nUAp{lR<i$ZR;mIkRr<RZ|GSRZG2+D?{(NyBB=V~T?Wr1Wfgh3nRDPlb@c#H(
z^vb;Ry9K<dHoQN22u;H~{;QSy7sAhWBmaKoud6VB?w`a}m_HY(4gV##ZKPhECDdJ8
zzvTb+F#p}E|A_qF=r5ceDtDSJ_|HG?_-#**-yOgmY58}bP)}Os?&3Ti)$SL091AZq
z`H#!;#TS0g%S?XG4%7PAGLxS>{aVMJaM@w<Huqo4wnSdf<Za%6_dI}>xjnp{m$^QE
zO^09P_rS}%p2_cp$?JKU*E6{dOapoZ(Su)~*SY*6Z{zjcx0d_O{$9_|d6~)n@3Op(
zJJd7Tcm4I?ezw2Y^EzJU*JASfWwP`8y)!xHOkVHt>%spYzt{6RUgp>^y?&7|J@GQH
zXL8(_yq=dio=o3g<n=zk9(*Y;?ALl;#}4~UzhC6_?C^R&dT{)i?3AYm*WphOc9`5d
zIg}p!|HW?LFZvNf=)v209WVdh#>*U2{(lLk2gjM8^D=MqqenS<a9Mu-dzs0v#q|5N
z%+Gn5+s5tT=f9Vk+)gI9KaB2=+6LOb8i!TRjD-M)Li9-Yg(~W!@V0C`onm}~bq!15
zl;sO(p6-DDS&`7MVFRrCITrQ}KZx}TlcCHd0^^Ph!>DQZ&~9oEteaQ}pS|y3qvpL~
zVV)YRw^{<JkAu*`uoWCx(FjiGTt|cRYv7VgXLO0*gO(5c;6j8Qy7yfPQ+fqs__kg!
zeC|Ya>$xAg*Ec}J`Kd5%H2tVNuoOBi`~k<?y@5HlSKxFPPgtxO05cz`VDrUturu2g
z^5@QimCxIuQPKdY_iPgSc*H`gxf4cMUxl+T)3K^y2t4$9hpKtLknQjaV`sEO*PA!6
z(x8DDK2aZ~PAAY$zb?A$xr7x=pJMPa55xiUpa<RF_ICAIP;c!`$l4Qz;YCZaYGPB2
z&0T;M){MfMOYAVXMmWZ8>4;t~EfLpsMr$_{ifprtrWo=#3o5`Wv>)3U>Mnf`SFCbi
zio;@<m$M(_nR}qlp<C3E>lk!vS_xx54u{mSRj^*;FYv*$D@ArBMxSX+k?r{xkq!L6
zMAlwJHrWJdVBroJKZbt9Y<Cid7{7p`kn@mo=oMTVUIBW3iiPw}*I|icTS$L26E<$@
z4@p<zU|-xzSkt;2-2JA&!dKa7(&ZtjU+hBvcB>$DW&wsBeGJEk%)yF-=tkz7E@AxF
z<)B+J2CJ@rgvR%`V~kre2B|_ZA;}aS>ts`8FN?^A$8W-#gX%+{gLU9CoQBr!3TS$q
z$H<NkF#3f74Qa5)u$*M9<&}mWWk)gYT0OM7nS)T@3-y|NQDhsZU&4^5+ac_8bNb<^
zKQ!!N1X`DxFr$12n0ad>Xtf!jy4Dmul7pZ{(Fu$SnhC2W#ADsi$M9^!YmD1(hvn&q
z$^Z0cRyBw^q+X-Q4x-4OfB~gL;9=EWkkTa+GRy`*|C=jd#~-g@p+PZh9&8Mo^nbv>
zr<Y;-S_fF%dM4bPZ2-xi9njEZG~mOZ=yE&{W}I4z<riOtv{7~#v*ab53*C-*Efz91
zWMWn0r>Nh<0%NwFM(^bPBC?hjZ2$I|{T<o<mz^NfC=|LlZid6>FJR=_VOZgIBa9uI
zhk<*_uvX`m=y+>1#?82mCKu0R-0)uTS$_pZHhHQ&R_nYH>a{tJuGQ{9qHZ1Btd|YT
z<0rtJC28<F`2sXLPzyue=|S&CYf!zw2@Vf+#-^QXqve^o8279$R+H;v!1Z;gen_?c
z+8Z1mbr9pPHHCB5?I`NsA<t(AoXkCdo>iVemYX|<Z=g;w-LlYl+8uQ5HyT!N?t&Go
zS->K{ap*px4a_X7O}BzS0_$(xhD#qxVB(BLu+O_I>@n#FySH|w$-l}&zuaMPV{Rm@
zZhaMvAN7IN<u0Lhc0ROuK;67%jf4%esDq_}6(|ELV~t*G;kDaJtk-`9yfm$daeJfC
zaaB52vzdeu6P97UQ5VriGQ*IT5#lpjq5PkFgBfxq$Z<XmgOa*~?y?D1-0p={ueZb+
z+a!$X-4x^JjliH2Lr~qIBDx3l!rJZnpj{OMitK2sl^F4`Jk-f9L7Q(wp!a46xYn>Q
ztPFhzQ(Zg2%h=5z9a$<O+ojo5#Cgpi?c)|~a^VyjXN90NZaG#mYWts#?5c_M1ODlA
zu%zEcv^};M7Th@wuR}k=rkx6${Wu?HUU7vj0l{!=OgL-|>kPV1J)zsp4sdV55m?fW
zJ});n!=mtm=;V18TGAbo{oAdDRdXI<1f;=<AzoM|rxDy+KN9QSwubw2GO^an%V_4a
z7h}(Qp}(xc`U8y7J;n8Jk&W5^=iXpW_r-9@tu2f#ZVacUZo?`gA~EXhcZ|E&o_^F>
zhpPN3=&kOB>i)gZKCCY$q*X#w&-lNKY{In5Xny(_44N_n&NNGf4HwSA6t`G-d+EK1
ztp67SNNl<lYo6)_n@jg%<E=YTZ}vcpS4uIecIkh4WEY1#fV)wnU`LN~kUpsu%%3q9
z)`Zx=(ZlCq*}is=^*$Xs-u?(T_e(INiw&C8c86)vFVOZy7&Lu60)1_gV9ufv40m4+
zyOK82H*X?b3u^xFM%KshfrzYwY1@Aj*#)Kh;Ka?vFy+$<*#Ckf8-<aMMOf?ePAumT
zCnD=QwvC9ab?sxA5FUm`dHX4{sXGp1<bwt<OSVFX<2kUb^b_1YQwC?EmvCg!#Uu_I
z#yr6IYECd`%|mSYM}1IUUcgR~YtgpbENt9N4`WV$#)_>T@!kL}Y%7angPhSQ_6Cow
zAB(-g2j9wKZ&3b7xY!%i@I5T{22LgcVsDU<+y$enQMZ(Cq3GILf<39b(6q4uT<%>1
z<WW;#`%!P$>H7_CDtBRX`AP8J#smIneGQGAEMa-ux#)Kx9oC1?x5|c<Frb|i#`XLN
zyNnv3y4G?y+wUnh!x8YJ{W)wusV;ocbjB8IGtt?67dB{Gh~bIx*rpZ@UYU9bE9cUF
zl#UJ5>PW0QHWChu*a2DNGhxlzQaE>}CDxf#4J)+_#rm(GW5wQ$u}L@T9-mtuTiHKH
zpR0|q&CyNhn0$#MyKYSw1_#fC*?}2oR%QiD?WVw$OOxQ7yD<!{b`_na0#H?}L6LQY
z8QwRrRr_Sf9H7At!Io%J?g!TY+7zR=Ec#DJ_H^g^=$BCyj(<!->s1rs&?H|d-8=_!
zlN-X}3A7h@gs`~$CwP3iC#>4D0ZQVJLaWX(XnM#8=65utF70KotUTq<S=ys@K*Wg&
zu+umcr7@M@^q?!)a91!C+~0z&+6{*L4GXYE{n=>R)d1@c8iaunVc6EK6S|G6|F_7-
z+f~O{-=T1-cnlnyx(_zGSwhD6?wHW*E`5vL#QI0`Ff1+|n+>Hs&w`HFQhAInP3vRp
zwSH*2?B?GhJA=M4($G-T3RX-y3G%h0aHG=^=n?l2UA~Tn>L<owya~XR#Fp56&u%z6
zq&jwp_CvkR$<(q>SV5KZUl7>_6xk{i*-;|0N6y!U7irdTyXHRFVDb_&)^3DZ74F0H
z`Hf*_l`2r0X9P{UUO}UTCos8?1`C))!>p(ZSm9G2XjeEJ<33M@wH6n#cCZB;99|w9
zS9}H6ddB=Mvd!96fuhZuuwGp+^og#5tzY#)m#r=T7FpPqi<QcrgLc+(*e<<*txLbd
z!H3;ZZJdN*Zile$r*T+r&?an>?}Q#N?_*18C0dUCfUUf@pq^D@&o*dH-4cx4mZ0fg
zCn%xerIzaDkWZuE94l1<%~S^r_BjTJX;zyW59-13f<Uaj@giK#`GAe;pMbYc<FL+)
zF=!HW7pv0<I!hWoSB{3J+N_v|?)0<1g=Q*Gf&m|?yx&v@$fa3tXp#)LIj<Skdb5a*
zS6}eY`|yS8b)1ladWqra5M~M`N4KGUk5=$#WjS=7*adDzG(y{3*>G{raO#@92`<c2
z&?~<poETb&0gE5QnfJ>v;%+>gsX8BHc1(t2-u*Fl$U?|6n22$eydbB{09D=c;l9H`
ztgmVX_q)BpgmIPO-Igenb`_&uw_RAjs3m-p!m!4=>Sz=kiSb5ZXjWo}c6}}2)+6dj
z-*ph=?i+`y*i1CGEy9E+i_x&R4(n|8g&*=otlOe0eB7Igb?**?x1Zk8nb@CQIQ~tq
zgo=NEQKxa!)~)JwZQ87MldkQl#NW*oMo-$&xuZclv4E5R&2U*0cfK6JfBN(=`9(h6
z<Wp=WpT6^{H$Q%_WBzuTru5LWHK1NEGtRrh(hgIgz`Gbyhrd8i%_Z3U{4K_nFAwXl
z1Ymf`Nq9YF0vdZ>fgcy@!T#aXpt%1)QSM?|g<mxs>ufA)&?OBNHJp1jOw=G>r7=q(
zC(%sO=Nf2K*dJU2S{^ACHN4xspK7>wtOXS6>A}m1U*W+8EqtcKrH74k;b+DucxXi<
z5}pl&H#Tkfg9Go@9e~Gcw(*BhlzU#0PnrMhBl0hk?$vJpXBQD;RV6d2D?R(?56rCA
zzXXlyrDDwFJ@i&bVukT{(fG|g47q&*O<pZVAH88{dd~)(UYMbowhXIoJq|yHj>8z!
z04O`M4J%ZhjCy(+3>o&4I!bRt?}B91ZyAZs?rTy1#XYQY={|g@&=M=AtcGIqSd4h%
z4#jV;Vu-^`DB0Z*y|ts^WBdkmZdCvuFNI^}f?@C^XDUXQB*N3dUKnv~1w2E041WEV
z&YN=3`=Sv%J5`9zE5qU0wV_zq*$WD49LMP1BcVWb2qSt`hk|hrG5F$FDA-<t-j7;C
z!364Z{UMaLU&Bg`jp175(HNE28?KIyqI2^BkbSQw25;R5*=M!%ep^6xon6$GZ3J97
zP?df&igx(}?fYh7#M*1<(A^6|Uo=6-zDF=n?-n|3eTtqxzoT>7UUatdN0-giMaXI&
zTJ_Lkg`MeW?O7GezmG%f+uj&>vMbu`>5E>2o}g{_7w8<a6YVT1GNp9QGj=UT9-ND&
z`{|sv%pc9dv=}sgCYmiDgkJY%pxIkQ=eYT34nr_zGoXHzDHt_)IqEMPhT&P%rTUu@
z21gA>gD`XS2I@XqV>>#l4xm9pL#)&)6F#l#hEX3YP=~LX7!i{IpU;$H@aA?<YWfhp
z$LB*Sbp$6LN=<rUWg824`KcX7k2?*oniylm$^>||B@RREC%~&S)J^PID7@NOP57^p
zE>VQSsw_dzwdPnZ$sWCD48fq($>=)?&~MBa^dHy=JsaG|zyL>d(hbF+!?YJYsz%q1
zMp*uQCc5{mfFYR)=!s*{|7Qexn@H$c9Ed)H=`-Qp7JZLZz^F>K(Q#iQMucxc=cp4H
z`ZEn(E-M(gGXUKZH=$R0Lv$ZcpSeCi&|}P7tf&n~oBhKua(z#<eU*dZou;6D{f`(t
zhxXX3t<ig9K03~Mi_Yn1(5Y{Ktn9Bwvu}qmdTjxkf9Z%7j4jd9-UdT*lhMlT8T!<t
zbNqZ7cyJ;Rt#{CMoc>v8*s~ADOkavdW)bu{chKn284R`jfyRxiq0e0!6!>u`)xRB0
z_I=>b(CC_I8owFKowF764euc6l73Ur>V3MP!RvW~QA1|XaGHu3a=b3;Wu~H!>jKm}
zKN6ky<`dVW)gUuk{|F5YRthh&8+BhE@d<->EP|40&(Yi17)mxYLZ|&7pk)12v@Erx
z^|jG3q(pcXDtv@z!(L#}fjaPP^+fclql0JJ^U=v^3_L49wA73O`l$#Fd-;ki3;*B=
z`K28(FsCgPRPKeIN8O<y$r>FuKZJsbmC<r<7!>q)fQA}Rk!4{=RGd8+@J<6)if*8%
z&s4|`J%Nsqg9R;9_lfmJp}l`)S;Rs!bPgDeLF1YTdi7c&=+wMG&??SfkV*)$Z<D`W
z_)PYh>@(SCvd?7SZ1D}@Gudad&t#v;K9haU9&QhleJ1-%_L=N6$rsr}z99L6<O`B7
zNWLKZls#O(Ap88BeJ1-%_KEZv3M$@&{`p_gXW(KC7)(Q(X`-$`L%M<#?}~wwhoO1R
zQyBQ#91Ri&U{HG#44K;yy_CV|d$&J&ci)EY7Ded&%^2+$1fx%@0ccU%3Vl+u(a_=z
z`n+h2q2;=w>lzx|*<l8{slK7d;63Pe`ye`e-h}Q}m(a4kAG$}ML&L*^(7ovzEdOIB
z+8<hsfp(ebFvS+VteT@^!#3zNrY|~<_C~7#3ObH`gGLS3qvKQ$4DS+)R^h=I)L|-G
zmAa$1bONn4LFl~k6k30&i`I4Cpp8ob8eN!#Hno0Y#Ih!IroRw_XT3qwdFJ%KY4}^^
zNOU<Hf@Vo!XyY4$W(VoYM1!uBz3vnt8$Zrt`qB@eukLRXpmbzg!KcsG2<BW_E|^h4
zJf~}<3s8TL2c4sRME!$1;8SBA>Yv^Xj~}fk-hgZ8>59+6*O1Zvfbgu$4?;<HH8eB=
zC@CBZC86n1^0hrYe31<$U*^HpyA7e_eja3O>LWahydUrsr=o%N2YA~1CVbdk9-gjy
z4iEO;g{M2O!PP;5@N|29$n?vEryFRP^6DVCRsA07M;gJcQC3hi_XgZLUIc}gX+WTi
zaJBv%xV61MWL`fCw^EMKFxUogq3=f2Yd8olq>X_09n;{#!ya(|;RV5~k;}w-&DN&u
zQG_gF?a}qMC+gq$#)J>AE($&@zgh5F?=gZ@f+>7^J#*m`h0kQ4$v%^PqVO#oDVkJ2
zQTR;und~#!Cko%N+<oB_h0kQ4$v%^PBKuG}Y8CrT_65loBwvtxrtn{G7%zOH@R{s0
z*=Mp(qzD-fs)-@NrBK@29D`}l;)_#382s`Q<m>Ijkf8Z+v8Nk#`dtO5ojYK#Up^Wg
z+l7Ap!r^O4F#1g!2CvoM(eFSq+}Wr@znh=o@<><o>){O<{W_xW#S9umAfd;)CGcZs
zZS?r~5Z)Q|M$Z;TaDVtY^z5vH><x+NaoY$oGilID%qTRy?Te1Z<xp=1?R#cEgAbU1
z&i?h_Aq``84%!6Q&K^gn*&RXi;xszGpuK?KHna}tkNV0Fw7&WRN_HGVn+dhx@r3{y
z(0%}N$Ie8XK3dSen20u2zMw^18#L+v91WhVMpOT8@afBYG|ie0&m5|wnME?>g;TE7
za{~DV(hzI9{qyew(|`83O!xga(9}K=?G}_rlcI%ax-bDvZumf%>I#}%3xU@OMuNA?
zb}`Yt_g2&kEk?TuG{(|kFP$Pbgr6sFLD|x9IwIc>ukSZSJ)6&vUtACMY8*j#8oTyk
z@*A}4(;7ZRH$>CRsZdmC3uQ&Gq3GRyc(bGgKFmG_cP#fovDaC2%e8?gc5l(H%`<p>
zs~Va<JqM3B7s1aq8hE_7KD^yp2v58m;O^tG@MKMMbX%|pZq@yWc1X!wo`U-^1#Vdn
zg`c}_!Ywa4oy#eLTeE&Zp~ZE$Z5~Iv+;(trVNbLR>?>$yJXTQ8$PzAYQA3ewI9zhD
zf`_r~;L@T-^iib}=vpO?O9)a4Cj88H5q!5KR`7n?j$%9ecB>u<pUFN^_)PYh?DKZ^
z&CAH4`kCw#h0kQ4$v$sq->`?1@R{rrh0kQ4$v$r<AHFQ;&AuS{O!fuI7bIV7Xa9A(
z6~bq-PZU0reJ1-vj!+sMwq|ZX`@$L+@{=y;JzI?Bs_CI&8x@A+bb+tczF~;TYIxhZ
z2?k>&bXzzV{ppgCee7uT-?AOevreM_{<&yiSAzcC)$r-F9r|0+8J{$VMw+S6ZEQF6
zGV?~e#ShS{rY)MKJw>nbA*iP-M9()@p?G-+dX~h)lP@*V^A)07qXXztX(ifzZig<D
z>EiL;!|1Z&Ec|r8h%SATY3$V^bV;}i4>a^O7wCwtd0A-JJR5D>E=Id~H0Q#z*J!tQ
z4g3h8|DmaM;7#u#XcvQU_st}<EzCvNHhO3=4AAEA0kl|5mvhU}E`QHt_!dLsKU2oR
z%W=oi!X^&#^<^|)G@N&L7O&BCx($>Bv_;ci01uOTqiKW7aP7rRG_9Qnnz-eHdmFei
z(SSyt>OJcY#bw=5PwNd24-7}WH3g7U^C{}B%L2`<$EbI?7wn_UFnV8t(O_^lC|T4L
zim&gZ3wOKWVUZsczaI)YtF}Xlo&#v-&4Q9O?vUQr3qDo|MT3Yycy=fkiuYfKXX8EL
zQQ$y$R`&*76d4Q8T2uge!w7hm`3Vk0J%i_174@HQgMvw&pg7qY3cBgTqxfe~kZ=of
zTP}ivmTN${lmZ3Xo^Ys*3hvMWxc=&aklnEf6gRjb_$V<~Fn8Zo$R1n)&gf-8_MJ~~
zWGamh?Zl^lR05rMcykFsDj}GgM3+cuy)yTr;K5B<OyS$MNfADieJ1-%_L=Mxg>P<j
zNBB(knd~#!XR=QezQMs*;WOE1vd?6n$v%;NC{?1_7bIVhd_nRB$!7}xweMr$Gudad
z&t#v;KJizCf`_NUr}p$Sv{MauVgC+;w2vXbc@PFAw1+E^bf7wV8PM(VFkpWq>QC-~
zei7f`quEpREj$8Gua89E$vffZ*<I-CqX!q>&}E0SCn00@1N5O&I{m%{^p#i+icdF0
zk1hS+@yb;6h}#5tkt5N)xCxw_O9!`KPQeM)Vsw9h3iT7hXoU4x_%JsOox|V5!}a#)
z^f3r>GDe`&F%9Tc^n9rY95JI2X~UY+=QI;-8yte7alZ5u>J)h3)&OmrR)nkP^wHL<
zHfTG)Lz{~L2dd<u&6ph2+cO)@Tb0540WHvc1kDDqu`QY}jE5^XL(sf;O~@El8O`38
z0q2a_h{~Sz;Oz1*^j)Tdqi^q`X*mt-oY4bKYaE5Ob0jqN?FEbcozWy~4ov$RKwrkC
zpnKAvzVP$lNDG>?WZM(i{_P26)p%IbejjCBS6Fz6o@YA2^p5UCn#m=s4rP@DhfZeD
zL1_qVn;H!zNtUoWp)ZsSx&R9YeTR~t{bBkGy4bSoC1^X)#T2jpaBw=!HsjP6w%!VW
zr=M5Cs@&J`v`7sLdt8KPWy4`c{m<|s`~YMQOoROVC^(R~0}3pT!q#r)P!RkbR;{Pg
z!1_yJp|&#I88;SYHj0G1SJ%Pm5k29`x;L;t@&ROfSAZ=yszUbcPq1o81<20r1B;ra
z!!?V2Fl$>Y$Qi<8dzHg<5v5Wt96L4_oh_nZ&)E0q^pv_**qEZzMmJdN8$_o@8(`V$
zSLkHD6y%jx(dN@<IP&}k+Pql}yX?oK&AV@qnlKq{PIiG+uD)n9z#JC$2|=5P%b=ay
z1<ek%fy2}xz)Uk8c5G^eX1CO^Zg^)jJKzb+&FLg!$Q@Wv$qLQl=YXbKG8*(Yf`bj|
zqRN1dur2W|8jM&6tKZORUt&jCQquqp+Khy`-XUl}m##AC=kZb>L)d?bPX9vA!j?-L
zXzcD(Sk*WbN+aIEqPmZvwBH?=b#673o?0j(^s4(*Nbgb~n46n#6I^l84qlC)1`9?t
zh1XWponXatczu9Q|LCqW{V_1^BAg5=pbI6t;h?iK%^;EsJKt49U;WFl`5ImN@h*e)
zO$VT7^I@P}?2bN`x8T?xZPDxYIN1CB6?$%Rg{@K4$)<fST_x2+x2H>Bl_j0_jdcJ`
zqn+q>&Jqr9(?{3Ury=c@AG&mF2C3B+qVu%Fuqw#_ohDp>B~2cqWAAE^ajZW&mfH^p
zG$!Z}Yz*5D2B5veb6DeOjdn?0VabH4Xq&PH=FZrGHnTg!Dau~!s<U9<lTftU(h4?P
z7oe5p7g%At1}!&th54nG(c-NM%$Spi7FFxOi7YELt$ZBzIM+c_rw6cMQXb9yQUR8f
ze}yLJ^I-O->S)rlB_v;5g~s2)|K-3`Oj7+%oXXB%ZZCM}L=)6JauBqvo*`(vu)m<=
zGj~C^xU+)nf7%cud?x!$_L=N6*=Mp}7UnK|Ci_hGnd~#!XOd3?StqkENWLKXg5(R5
zFUY>hhGO9}*=MrPWS_}ClYNUns0`K5WS_}ClYJ)pMEXMD5~fnAD8b|sOfJFX5=<_^
zWZ%-PpYWONGudad&t#v;z70(P$1P&A&t#v;K9hYW`wmO!Y6AI8_L=PeANJk@DvE7e
z)Fvo7DI!P`kRU3eAS$8fq`M55vtq)WbKK^fbHIR@69x>Zm@v?_6tjpTDuNls95BZ>
z=W?^R``&%-x#$1?^S?XZc#eTzRrgobwPx3<?q0RlTuk<v>@(Rf8J#M9Ci_hGnd~#!
zXR`0?F5h8E_IaIsCi_hGiN8n4DS?KR(-ARw3np*D<Sm%I1(RRFwO<eEGudad&t#v;
zK9hZqpc~R>vd?6n$v%^PCi`VR){{PyeJ1-%_L=N6+4nnoRQgQznd~#!XR^;^zx?Dt
z=`-19vd?6n$v%-Tch{D5ftSZA`GJmV7cu`8)hgoaRYN2{*S*L@!!h*3f*xo8L*2pB
zXR^;^pUFN^`n=Bm_p8y;XR^;^pUFN^`n*m)8doaKz9jjQ<V%vzWM8hcZ}M)D^qK54
z*=Mp(ls>PsZ;?_&`b_qj>@(RXN}u>MLR5P`$Ss(>1(Ua6@)kt71+VifSeo^cK9hYW
z`%LzU(&u&dZ7$rDK9hYW`%LzU(&u&di!W{<eJ1-%_L=MxrO)f^myA9xeJ1-%_L=Mx
zrO)f^JG)bAG<pY^>@(SCvQLyg@%IRo-0c7J6^QZ`i1HPP@)b7w|9k~nm#@$#{^u(Y
z<tq^7D-h)?^ojrZ3bf9?du1!>Gudad&t#t{eO_nZ^ZhvKGudad&t#t{eO_nZCxzPo
zsKiY6nd~#!CrY2!+4rB=Mfyzknd~#!CrY145sIz(0$%r_FQNrelAG3UklfjT(v{HT
z`@gi2JiaAalKqeG*GQkqK9hYW`%Lzk<fB2P%DyD|lH^O0FG;>6`$bGbq|aoZ$v%^P
zCi_hGP0wwXK9hYW`%Lzk>@(T7Tu5Ih>3EpzGudad&t#uS5sFt*Wo_E<+F3G@`jv5Q
zO0IWF^5~}ul4+Z#OR~?khkYjdO!k@VGudad&$WkrCi_hGnd~#!XR^<=hkYjdO!k@V
zGudad&$WkrCi_hGnd~#!XR^<=iG3#fO!k@VGubCngqAjMh4u|D!WzRQ$%I{2lDpf{
z=Mp`B$eiv25cLP#CE0hhkCZ->eJ1-%_L=N6*>}FaNBT_mnd~#!XR^;^-+i^W^qK54
z*=MrPWS_~tSC^&IXR^;^pUFOxeJ1<9{$|o=vd?6n$v%^P;-6nktNht^O1J*GZ^O?K
zb-$0-;l39gDpjV3|7J{`X36+i&B4SAFhV~|@=B*oOmwKMm5fZ<E!j87oyk6oyIz5P
zN%EQOOOh{1K2!Ra61Pd8$v#o~O!k@V6WK?*_e<E9B%jH?B>9r$Go>H8G*kLa_KDJG
zvd?6nDE-dW45iOxpD2AM`%LzUE>XM%mz=kdq%CAb{%?c|Bed3`D~$V49!7MZ1h9Jw
zWNa9%`ErnYE;udLtbUt9{m~w22Inut-nYAIDpo$ES>56*oHri`Bg;^K$4hVFa+d}$
z-!Ty#)Kbvn)&`8s6cF{gFZP*U9s;g@)vUbo1+7+Fz(`77_4Q$IxZ>RcZf9g*$^OqE
z^-4Ty7g<7L*?ZX6@hPmR*<bqAq8Guae%V;A^kzx{)f`>URKk*z1JEjVB5D^*LW8QQ
z@|=6}pn#6&8@8lgtD~HbVgsL-aQSXN>IUyYhnst`+Q^NlEj<eZN{^A}M439pHB??4
zJgPE`d=!QKT0Dfy3zlJzS{d>j>SVfKo<nVnpG&_<LB^joHRO+)%GL2-tf|XhebyXt
ziGeZB_a(F3H!;!C@wuepF;#MazcW)qK1`eTfPG2wne0oFFG)UA`nOD8OP|R;QTj~w
znd}qUM`tmaeM$0}>`Rg_Nj_8hwI(l-K9hZ-^qK54*(XYWu(D11O!kS=XR^;^pGY<J
z|3>JaMQBiTXHE0vp)j=SbImyQ5L}&{tBFgff{rz7Xl`|wh1zKk!S`e(>=QW=I=;!%
zO!_ep>SdLI5uKhxr^B1z+R=S5vNHW1e0~NN&N_m+oer?`fgbzhCBu1>49)CEA7Rf6
zUl?O~4@B%mxRI0unUhDO^KU9Vx0{U0(I;4xdOG(V3e;QpnPy%yM=V;+4aVHJLfhLD
z;KnLzbg?{#&dsi%Z+H$WS%^VpXJX%kEYwV$qFHpREmjRlfbm~iAztVXH!JMGI`vG@
zIWis_rIp7T)^XVK)obimH3r+~=gM=ar}<%+_<SP{NPh>pG1fSoQZG5jwZsu6yI_qT
z7jTrvNbGlW5sn$V!q&J}kQq&S${pk?{ZUs#WM4(@O-G|&xhq{$*;kQj@Lzi>`f^W2
z8pUShYlIX2(o@lbT#HgX;Ew-sPemT^#^fG~=D(ABD)Mq+k40WC?6t^#VXsAAF6_0)
z%d+<(k(c?ea62Zi8&c2460qER0$grA1zyEng3a#bF(6|jtcj|QVOSFiW^6*2!0~A3
zdKU7wH$s;>MiAexCOT~$3zPb0psD3<c+&PG+@7XIx5*XZ+>>!~kK-ZH`Ut#nTMNUB
zoyUrc=fKRPu^28K(8xPa?$LXg6+G}8k0Gl(VS_;{ET7)>zu2R=W&xi@T!nMWQh5J(
zBxE`*h7Z&wH>>7)_)a|>FXeSagUs)6mZo?zJRAcjD0`M+wfdk^ugLGq=EB)E$KY$(
z_mEM0Cw%eBpt4i<)515j@*i*L&*99!yrK2~|9?aI%_)3CdHEl`q5OE^n=0Q-S~r((
z=%PGI*EjtGyy>?GwwM;jvg2n$_L<Qb@i>ESCqz<zzRl>-ZUXh6=#Hhoc88PcE6~C6
zAWWuS0#6cbAa~9Xcv_(dJ@yby4Rh%YUDGxY=G!-bk6Svz^eTI?++s%%v!2R57H{wh
z%Xg@Zp$USLOxD1#4}0N2tzB4l1$_^E_6WXd&&WN#^0t?Iv>4z=d;D0LlGV~1`J<gb
zyq{j4dbhRVHyDfL2Ez9cL}Tg;ZAf!^8E9vsVae(6nci3f+U6bgul`DXqQ3>Yz!#cX
z)Nt!p_%?7OmHn4DH0X~vH2Bx?>HqNiF4s(|TR*F)T;XcU{|ZTqT;YsLan$)=VHGXx
zNX&UC%&?hj8%p!mno_`RM4MvWAb0mDT0S7t;ho#_gN)85bFqT*4Wc$%VXz&2clX@_
zZCXFXdLA2L(yQiVw99jYJ=Isi@)1q3W8?(bmt_X$`ai{h+1E8GK8MLL$m<Bps2{m0
zb@AOuebbGo?|A}M2CfKe!n^X}$y9I-bYc2Aw>Dp!blUp$WjZ(-*DIg?GgF+dX`@zu
zd5Xu>|J?Ft4{XjNXQU0b&~=dO|Nc(Gnomd3AZamH&EAU!`_iZrZwoZIK@FR)o}t0g
znec5<JQ@_F!}X?H(Qwab4BIdi@~5uEpjUn9F76sEJ2xNlUK(NXy=~!vcUAaN>p0|@
znLuuXlaQA~`%NnY7n8%VVrp?X|G7JQ+nd0d69ci>luSsw`Uwq|%!gAiTEM*tG-Syq
z0V`$Qg}oaZqW|pDkaVgSmVP^!GIegmVlJm(+Xw3YYWoAWKbZ&le*GYE)K;uey&bG~
z2t%KZjbYV$>ZIKHIK-6-!(wws!;)FPXuS6dEFDbu(>r&7INt>H%h?Ny$_1mBfeN$7
zspw){6Q+i>z~aS2VWRseEZTBBOmfYEH!DxW^bq<=gCQ@dd(C4@3_O*9wv#KNugFK+
zoJHvHU@zKkqzvP69qA5zB-}1_lX`?K!H|ug(8&KaRy^_^jk-~{#~cGRs#65*S9L`r
z-{EMmo$fEyn=E~!zG)Z|+8UnBGR1(nckpCX5_;VWfyaYrP;afC@Yts|{OC~%9@o9X
zK0FS7hrz=uLHh6tSpEccZ!S+=alc)G3)wWV>-rkF5bg%wr*5X9OZ%jMVP03PRL35Y
zOT9<`E(m+mEV1<T7}%r9MBCljkkrBpez;~q(y+bKPs+c772ZCC6>nV7w;&ak&zyzs
z#aqDAW0W6!p(!jGlmS1EmV+fz=1PC55=s#YUUL(jcI?K0gcNkO--kXGw_)j~O=zA7
z8rak?6^o>qqnGh(cs$jL`d-9i6+?HlO<scm!|bqFdJuZs)<XN2ZLq|EwOHaw7G<2L
zJB7uD!-LEYSmF{5-|0tl1K1a(4(W7H)mA|-eLL#EpNGY^Zb7rEwa`F0j;8NR!kx*k
z)Tzo6Lu?wutNAoI`vk(9fyb!dM-sfHJ`=WECc)cLf$;5eHoUc_`Av#9g}1#Tu*y5i
zRr}){R;bhzt|n1F@B7E#+OGF#Te>Y=_qqz-Ec(Lr>J8v#&PTXmbr-AbI0Xk@^~CaX
zU%;VuchMte7NnG^i#F>IL&{tFfmF9K92wUfZmhP4qet8*LV?|9pb_;ZDgE&!8qPF8
z+qo^!FghAu&JIMws?*_uo-)uk^MS;GPqLO(*fbL!<vd2W-#);@rzO#P<O0g3><+JI
zFM+(|C6E!^1s?XK_pSd*czClo`qR7uXCKc-=L^AbHu4QxQtdl^ekK%b`T?gCdqd{A
zGjQfc0qoDM0B3$2M4!`bVP~5;==i=7?6`Xf%{$b9MAydfZv6mA?0x~RcQb$;PwCFy
z6fNv*ei*$1&qLfRx?A|t6P5>NP`9xgu%uT$eCTZsOEz?dn=t{f?EYNPPp$?le0<S;
z>o}N}TovuV1;ONHBdLE$FpM8PA3i}%$y-h6JIKv+NE_kwdo3$Bi{^`<+T+~3kEDg$
zdnOd58%kd3>?pbC9nC319{XH-*k`g&ls=PvCj0z6`LgzqFG)U=eM#~q$(PTw&$Wkr
zCi_I`Gudad&(E{ZwTFEs`$Xw8*=MrP&$CapNBT_miPC4X&t#uS=a6rIbM$QZ37w)E
zpjQzeG<!4@y*5pT4|jbfZ>031My%R!v}0RY%lv*g(;x;Kr0@O)OMH8e<|FLTVe&qB
z-^T+TrgVjC_SexN=oB2>wNutI|J9?>^m1P;^(GWeZ=Of<&s57A4}!N>UD2$GCuB~1
zil$F?z&@Ixg=<;4k1wF0x<5K^q4`nr7NbRrP4Lb{g@RUQ@HT%A<s9w^Z-c3)!1Hyo
zmX(iR3t2BU=;D<I*LK^X#g<&kw{HM%hE{~@Io6QTC<m@@?*zLJ)|R!bLM3BJu{B4R
zg)xva&lfG;wt|#f_2KoBTX5uAHl)7<II5xZbY$n>Ynj9RU^L!W7Y)|GLL--_aQVsv
zH1ydDn~qqcL2Loc^{R*lqffxF1nTM0_B9rdngWl*kHeR;(eP;eW4QFu2=dMphpk?d
zA@8&UEQ+ETdg!PoMPH%Xcp7a)D4e-?3Em!i24@|2L%Oj&oX$6(A>v2jtRdw&o?#9b
z>VAQlPjqlGB^%AR^@1%A&clmsTVZ?dOt_%cK%#a6>?-IFJD!Y!mCNY-DV+`rN>zt_
z$*-_TRu(K)U&52`XCbzKIGp<!3$eYr(^VQ^X}^WAW@Q1axHKCUF9KLios|v3#=(SL
zXW`Mpn=q#5KsdYk28=q?9rkqS1><MUg7uNLVM@<wuvC<XnfH#-Ib^qYHWquThtIbi
z>5jfFoTs5bb`4&`W>bH(H97^ckBZT7!W5Xkfd<?^Y=L$G*=X!q89q{K0Hf18;ldQ^
zBH!5`w)UhO(Z<(d>9zrs)4wy!$ni&m!xhnXLpR7T6%OxgG9mxjak%iQ7(6av2Z=lU
z;qjwAu)IbxJc&F=5pstooi3xz;ofla?jR^=R0_@>p8*%Pje`p#cEXOVdvI|q!1DV>
zklv>R%&K=4E}8a5>;4|F&4~Q=uCQZ{KU^pp3cK4F!H$lGko0H=#MPS$`yxlc?AB*s
z|J#LV<#GoWXwE~y07{c^`y-t1`2`kzxdn;$cf*pZ<R@=~xWHtXvuFpbt~-<>WVLi3
zdVTSM*S!{EnIX5~w0}|b8lga9`X2PydKFet4=DHK?y%r8<v6N46s?}pRk46>Ubdfu
zC6DZcGc=P^$$@uahg)APky0Jv$AqE1Z!*jkrLowmS!mtG2+jJ@t(U1Y(0p1aI9H}B
zn!n0}9m+a1+js=xE<Qrjj=f;kjSFZp$pWn((9iaaTzIoD0t&iY!})f_;r%xcNKBw!
zb(d9G?q>uAmxjTNZGP~k**vrfS__v<eCc!U17uEef(s#U;aX;ENVG@DDi{Sz&!2>>
z-`2sjp%)-)W^c4v91Htq(ochy-C)1@DY)p|6At=Mg6(s&;D9;=mJD!%g9S%nN(jy0
zb*RU$UrmF4{hCT&h5yCIw0d5PG%?EtL*L{_l2@9<GSSJ~MY7hKK9a+nk1#dl!$`w)
z=zDMj4E!<(uJo=4J(IK0X-X2b4{MFJtIvgIYg3SXsQq}6^m8gyqW#-K=KgtbWirhg
z^uZmSvMz#JTaUHR^?*alMd|MxT$_D#rty7!_q{_$!?tjRX5+ATGeM_oi_rRHG}b<A
zkLI=ZvyaAiCrQ6X=wdpa-lz+F2Uq%h!N}6f(P`>T)I=V{+Eou>SXK$?S1Xtz{eHpG
zTwY{Sd6`^ZNh+@-@1Gv0#<c$@5$avLHNOHd=@pp#3X=2+k{ls=oc9kGhxU;^lYOG}
znd~#!C(07o-&-O}z~mATWeJ#E0w$M$DE&z48^$GOvQLyglYJ)pMCt!)5n5zYJ|at@
zM%MQ68pr%8aN|Q|jo<KaEdKSWWO$wrJw6G0YdzT0tXnz;l(L2}J!m|%Y7xplbg(yL
zUow2cT4<fr3wt(lfO<QgYm#&9;J`?4m@ydOr0r4ZpY=xRGsE(<aH{HS?3UIAj$dh}
zxu{D-3vCyeWxN*cDz9N5i+32yzGPUbH(0E{A$I;=25lbP*5p6T#PB9HVfN_@2&11#
z9}{WrHu9OFt7{?p1YsxdDX6)a3dZ+yu<vJpxo=}7dH=L7eP;FVAlGAlEM#(HnnjJm
zpOTe+sjq*@==L85{}yrKU*HD7^N<pM{xUawOAr1vX<89}=GQ;oivDpMiRr&-4&5R&
zI5)SNFYKy#2_2s-fI~AYVps}wIuDzM?!FzcddIu)qD>i$xLy)=wWY4zi)>*|Ml2df
zc80g~Q-Mam{hzW2Y&7PDY^|YrV!6pp&J}A!3H@8uqbb!MkHjW4s@;@YFX~b2O%ZCQ
zt9zI3)K4ysO}2hT^7yU#_4KIx|LXMk&Zo!sU;qBm>A?xwJW6$>{|lRTIK^9G^A4wg
zD{Ot`api>#bex{9uz`-#rE!ZZpJ-eRCO6=58aO7m_3|>aFm+yGYCTR@$AA2fUzZ(T
zXP^IgnNy_ka^b$2yw1nQ%Z0Dc<aJJM$H&I&e4K@;_6m=m*EyvgS1Tqz&g92=ng4iO
z-Vc|Z*Lj)$c>jel;dNf-STPGz=JB!dGC$7baxu9qyv%WCa=JVw|8ul0;!+7Zwz>}&
z7aK#ORT!i%pacU+)N8jab;TQ;2j>sxV3`NOaPF!L*4?oML|`SXdHgz-+v127T(4o{
zdQoUX14BC<-wW#b8`z=fSeQOSi<;vjpqcR|_~LsH#vVU~MUoo8#k84d>P|CRS$bnp
z8j@SyMM2|PX&AZd8a#YC2t#JJgf!pjSnfe{$X|kJH^mk5ZmfZK4<Eu~%geB5!!39-
zYADP}t_ZJ(wSk#&=G6DRKb4^O)pc;iYCI&JtO!>ETSE3RnjLrmeN&uc3Adt)qi^aC
z$hnh?QC)UGdiUA??GiLEOWj%a4u@$ykD~dI$#Ahg-LiN{Go?SALc_w}VTInGuz2Gg
z2;Fkv<D3l`a<~FqnQ$H}G+ls(&#4`w2la7n<Oc7;zoGHN4sgKa2b!FC1F_b@@ZPWp
zEJ#R)%N+u#1f%HN{0;RW9Bva2*H=eDZbl-!yU_{ll1@^u{Rimx+Xcu66Rh!eAKX2(
z_`h9(7I#Wx(Jtd);r=3MN4MoKEQv<XF*J|cxX$Qxx&u})@IzP2Eg1IxKAMlIMk(z2
z!lM~g=sjqPW&vBVM9tA?w>Tf(hOfoqCF{V^c$yQ*VH&I{77kx8PlkBSN4UPFF_mCe
z_XhCbO@BDO<tyAxoC^2e&>-3q)MBK}LYp#E(eYz-$TnYunq~vw{!NSjb_t@7#G!TY
z9N0L=8(qh=h4Wo~G5n?n9fcpYTVF-rYOk<dyafhM`HD8f46tmV8{Dct2}=*A8GZ(?
z#A2;e(Yww>c(uh0{XaUu>BW=Kx#SE;>KBDY9J3(t-Xpm073@+8!ze+B$2)<MG~d0)
ziIu1nAAn`{*TP!VU|xnA$m`I2DIQIpVIvxt>p^!wn$Wr*B@d}jm(}t#ze+7iJW{bp
zDa4&6Fo5O_2^;qr{m<&Ly2nZMriNpUJGHq`f|E$vcUjs`t>I_TpBmlk(Z2oYa@~Lu
zlX%l5yuQ^o^jP=|>rf(+GS@7y7R}e<bH6z%Q%g(o_TKTE5$N*n^_u1#7LU;*dnQ-t
zUoYjqel!1<Kk1Fk=sIOY*VI4%{;Ny5XQ?jy^7M}{Gkl3DysYzb;bomKJB62ZzSQxh
zkT30gnJT=*^ChkD63@$pmw3MH6<*@`vRQbE=jFmnJYOaYFZG3&aeC;F%Q`Rf@f2Rx
z+2w6`osW(8!|QxWW)@z`nY_-<ua|Z93oq-xUdnm7@bX=FS?4lx8F-z`#ZF<FxQvCD
zb$*VW!kF+nFLSJzd@LM8CLa&~@$qxH3S(VTUe-ORas6fP6R@#<1}pB+<Xt;Lpvip)
zxHI88)Hs)nUT5z@wSCPfJI@3d*#8c;_W43NyzXPu#_8}b-U-7^`(p_jmf@ttp!2m?
zP%tM1ErMxkyHV}YeXuk19+HH`=Y+t5GFFfqZ3QQrG>1EHs=<fX)O#&^6@2ku1h*P>
zLC1MJ(7-qbT}pj|^s(nCGe;44Yof>SJ?-Usg`G{PaUuee*1Uq%-7CSs4oR@HN;+Lq
zeCT5T=G!Z<PrD7Pv#0#i5=3`SfMYY;W1~5#@ZIARR-0gnj!1)rK6OFY9&cm`tVY&^
zL(b)~^r6l$%&Qib*s%i^X3vD&wWlC0!S}Bvm>mIkmV{!-NzO70!yhHsND~YW?*0!;
zFr=RW>{>gNN>Jg+1NgAxBe=G!Pg9az`KKjlrP&H6>|?QB_ib2oXdVVtd5<nHgRuCl
zKIl%v;`lwVy;qb<d54<!8p5Pl8bo;e9>n%L0k^EFp(5elUrO-REd}m>`-CN40veuq
z{^xtp<`sNceCr>UV1xlRT<V`u2|^nez>jezbYE=;>=dp3X$e}iXayG<)xsKMrqXR}
zK>yC;vCMHqtBeuomGDiLz+pi=oQms;-dU4i{tKFdI(Qx|KS+sl#2z^JeZXHz@U7Sb
zc$_$&ChDV11`EdgQG$wha^MS1PWz9}qVem)A-Rz`UDjO_&Co5-g$8m~MyJ8M(Sz=B
zmT2RKW$7|+PnYe=bP2X!G7+mLyg~=M1c%aP*I6?NtJ3AQv@>PSp>NZkJ%?Zb?ZdP7
zPV}eeOVdYyFJ0<AXI4W``iAX6Q$~3{or*3rZIo|!%Ae7-4doCUgpL<)V7c9%=<=u^
zR-}&yw{>*>)5n8zOb7;hWuPlfK@~z%ZSi^#ef&6DXyiwQ<CqunHJmc(+w^~$YN}zQ
zW<T=?8OntIy!!9IM;KU93!lvDq2CRAnn&v?-O`=~pT?!r=Xw@=nsFR$9>qu&J#ter
zutWenOQP|(*EYek*JaUTkR3cPOQVAAdcpIcqG<EhN|JqEulQ{z+-Y-zd`GymqA#WB
zIs|tz+E6>eN4Rsd0or_jBgsCmS3FFuKbcq2FS!n6dLKoPahD*Is*IEO9mt$Am;7^*
z?DKlX2xmAoV;lPQ?h2=_Zb6TZ_u;e$wd~mG;B>%sv?(|v$v&?K991Eu<#zNdT?$f`
z)<cg-3rM+8NtQR|8jU`q@-o>c^8KBPTAG3FHb)4p+wbBC(LEba-U6-1QRn(cF_N@}
zBt-~Ki%;eVp=nS<ju53BJi!q{)22r`LXzzBIz@=a=K67j=w?05G&}ha8hZ8Q2%({0
zCytOL`@GH(dKXn!M(Ex0U>Tuz`5e(ZG&`q}j1ZGcz~l(!fAy3RdR)gtM(FY4u`)uB
z*ENz6VzSTV2<1=%2uCQ_oYEmsgmNRd$_VAwT`nWUWS>Y83OMiyT^~@I9GCj&-hgKH
zgrQja`et;pK98PthM;Y~edw9n2u;#D(p`+FSh2GqI(43feiLc7I*pbREkvNRyD>VI
z3`G~$EVM00%r!%ka+A=NE+`eh4M6+di_!1qR2oG{-=e0C!4mDdqf_bfSmMP!8bO$Y
z4p$Sf=teUvsb7qN&FQY%khwHh{T;NvZA;&}hNDgWGw9^{h{jkup-tK`v|VO^MeB#r
zY}>&YSdZQjb9#qAxS;8>#pp4r3nd=yh>qW9qFE<8Cr0%|vrBui$oU8~uQnM2E71M)
zQ*;hpuZxB~+tV3Ai5m)N{9O(WLNe`)HUU-WcS36{QtvAorkAG(Ir+Aewa1n|9JyAR
zLI);%i&Z6`C8kN<JaJY&&py{4_L=MxrO#xa$v!{NKGz=hnd}p#&t#v;K0nVs*B<tn
z>=UKWWS_}CKhHkb9`>2+6Q$2&pUFNy&py{8_L=MxrO#xa$v*LCgk<fZEhK3RCT}50
zTS(Ft@_Bj%S$o*$TEsq4`b_qj?DO;NbM0ZD$v#o~O!k@V^YdH+u031=CYOLHOTgq3
zFu4T$Jo{XG*k`g&ls=PvCj0z6`&^6IXR=R}K9hYW`^4WP<niEzECG{CK$In5atWAR
z0)C!L?0jgE^qK4vrO#xa$v!{Neu;Tiq|aoZD19dTO!oPC_H8<6NT10*QTj~wne6lP
z?3+~^CVeLRMCmixXR^=Fvu|YOBz-3PMCmixXR=SEAq~%lw}8*)L2!NAb@(*10K^V}
zPp;))cd;|@F`*4?=+g{7tmzBOYWIfs(<qVCFiPcIC56&dQ@p2SgL(?!*{!{>dt3{6
zwzVv5xIYh`3S(H7(*&NJ846F9({Iq&1jzE}4!73~0sT`Nh_*Hsb{BZUoeh4lapZWo
zeSbVGU+)FCt!~2;?_!XVlLJ?uhQk%;4{DY1klD5eBwecxnWMJBrmiYn$?FesD;?lU
ztKN{`xdEKmG7YXS><el0=Yg;{q<%A|u;=q}IK4m*n->j-(+4NOimT({bO9yWYu_9W
zG_!`QR+QjAy)KAb6RD2^-EVYx1V;`|hJ+il;b`h0SgE0;;y12Rgq~ysqb=@)YnYBU
zBWi<a))%c4CqdG=&uBH>6E=I%K-Y+Eu;TMax<^cRD~qf_vlc@j%itcG-p&F2530+9
z+#$(|W~<gG!=~U4SoGxp>OXK9i<U`*$IWRd-PB%?nLPsyTeX2yHHnhmO@iIc4bkBJ
zYuKm=G+5gTmS3Z6FHx3||04|EJKu%O*r)K`?*ybK?u7T|?y$SVN@_`202@u(!n<pi
zV0j&y*;=JuNhkMF;xkvsywnr&FN^@S+&XxCpf>EW2!JQ{&0te_KX@{q?k#@q3Qv7M
z%LrXhqli+3Zt8@LP;QST*!z@PkV2lq<`swG_RwPxmu5-nn)E-<AuRJ~Biwkr3%w>*
zgtS`<dRC|i$*Z(jI(s{8yA^@%p82r$$QyL+m<vyHDQ(-Ae7OErkFHssG!M3((yUd4
zeP=V!dGS8jTAk8x1$BVcHC1#x6ADk;bVDc80dVaHpkv9haN;n1X1O$iy|>3vVxUKm
zu!6qU`(K6l*A>v-do(;PJ{5}{ss+~uQZ5nd^>L#3bhJI50ec6wLR;e~*!&66rZ=_N
z*sn$FE0^Gj*+aBgng`b^K0@>CdT?UtT{L&-4*RtA(M(N&gb^pv?BH#Pj|f1s!%rdq
zsu>zL2!*VCM57Cz;bhPm8Yxc$hkU!C(S$tMVnM0HJnbRAPXHQU*kNlZ=ZyXN-Bixt
z^844+|6Oy&>Z4s?f-(qQT6x27KQ3X!1WMMmq9FzZRl<rtHp5rrAgnbc0Txpai?S=K
zz&OkA)HjHRvCUf!1zqpc4TIa%)c%zc#XhB8v0oF-;5B{WH=J1wUfiJ0)0CJtkG{y8
z&`^nNYGS9RcDSDT9Sx}mY#z1U7(Si)#~1lu@_}lb%8r0WKZho0oBrEpj1_ICD#Evt
zqk!OQBIwNn;eNP+h+OtSeYzw_G@3I`UFg$Ew4ZINzfxc!`ef@xo2A1=(Le{GS=db2
z9`F<HqZSDluZC)VK^@^&$v~YSmm`9E9MIn=eN9l#9ML);S54dbRYXjURkJQl7jF46
zYW{B()rTgP)X(P8>b#XEqG--o{rw{wh4uBzqQxvl?d!Z&RF65NPUyKvl!~!Y=eX@r
zZ*8zumswv_=S&J!*C!s(zp1}L-Qk)h8o%zYKVtPl1chJMpM7U3isc>E=MG9zuM~fw
zf9IxAr>2!wt+E#BA6HCM-BQko`hhRB9y_{=@-KF2HAk8Yi%}NZmKTSsr#ep8wkT_>
zj-BbR4f<%OzqKk^YZ+}vGgC!UgsM=4d<VG;G(RUSs(u!Aw~kZO8om_KRg=^n9_vKc
zw*LBwQ60s=seMJ%m~FzL(+&~f|3bJ`MPZxlA$*=Dsuy;)6P1okQHR83i11>I^eaA3
z5jFP4i$<^P)Ta&Rir{56)wi3Rg+uLp^~c>A>eZ>wgz4Uf>V#Kih0XbU`a>^3lz4Jk
zG&{LXU2E`IRE=+<ZoKU%9MyPr`w~Yr`=!6SPhVY~?mtUCe7L1PtM3Liwe@1ra+rZy
zF7uYC=37Ut=sQW29221iA6ls1G@7AmCd^W2wke_3-r}c!P->vs<X$DwI`Bp6u}vYO
z+UkC(tDhJP2Zz3?lN+Y1**BM`&WuS{XYZ+)dSdM>eL;bRzDU9=icrPu<-&WZohTX9
zTvVmmd*A+;BBFw;savuqh&JVoRGo30=yt4%zUhKgF|d)32rDsL*j{@tJWlr#u2XJ{
zB3rHr|FOC1p*>GT^$xSu_GTMIjW*Nuu^!Jv!_3a2X3!V)P0c}~e4UcQphJqV`P4_4
z)tjlFJyJo~XX?}uJ8KB{TjlinLxV-xMr%YvCq>;}v8o928L95+)J&8J*{`N_u~n}Y
zIij9j@25_!a#g*No2kE3!&QAWFi5oU{h@~M&JZCx8>!l*fuh9jJ!+lhhU&E^<JH#d
zKdUpE#;g54uG2s6^jV$I=80$*_(E@1@|Xzq@JoF)svdQ#Uz~c?BS}Um`;j9@NN-tU
zm5fk8-x3s|A#@HY*{Z02<gKW6{GIS=3Zl+pRec{dL)5D@UtJj+D;ij=Q;i#Di$-*=
z^;@1JT>6a?wLT9KZttpy(pg)DN2`nKvqp`DXKYI~_S8#JW^60{8>jZdXJNGH(PFro
zx7<=hUd>S-KT8*-UNlypUwot9UA#<vIU-e^vwfjjU{GA2s~@PoKd?!3Ow3UijIAI-
zk9AaISJ;W-6aCfYADgO~e!bKcZI7#yzwc33McC@ouUM#SD}NGgr*GANzgt06sc=a(
zI(ko7%~w^Eok!Hu3HwyD^6k~(EqzoggL?WyW*t@A+%BT!R3-BLZVyp0tEkp&ZZ~1_
zv7^@h&0+QE^kA(+;B>WXnX6j6wQ>5@f7G%r6rpAmp|HvKC5ug(#8fkkYDkX#Van9+
zrRxxT?3eehEqx~YMCmixCrY26XWyvbW$827CrY2mK2iGoJoz*OavJ-R<TKfqB%jH?
ze4hOp#%H9@WS=N~Ci_I`^Yi3$?O|V%d?x#n<TKf4(mB+GYFUlQ6j83l8WA<PkuX|0
zNYvjNttK~XA)0L4p+@IC6fNtbelbO;&BoE9h1(0^vwW7Q*eg?%t&k^7`)NhFn^V-|
zRf~$ih@ooF{_dhmiG%vB4uPV&*eRmZ>B@dBPy}s%B}@+P7FIzOgz16G>gm<N!g91;
z9iF^H*j;L-Pig#Elr(N6+F#32kF6{&s*aCUkJVi-Z0>$ikN#Moo=;0rPlRk!M`u=2
z(_gjIA3Zxs&7Rs#bgrhT&2JwSp}Mtd^BD_-o#vR@yxLCnV)`Mq&E9hAm}?K!9&=yn
z4~567gRk`$-6=v;dqjlk7|CKs^O-V2OpXvyMu<oeYQH;Nw3s?ZRG52Pw7nOlei%7e
zblQ7YonK<L=sM6rKVg8k=vK3h&NaqGbj!{VtsUMA-w!n?q86fj!aDUsXGH|2Y1PHY
zmy61`>gwYHW{WDWcXhTWV@1f;3!>Tk`s%CYe!_2F9rgYFmg@U*%hj)59_q5071i&e
zwLZzPgD|`}P-j%rN*H$u5e*vbrMaJH39sNVb@7Fc>htS^)uryy>Z0Y2>QYfjzdOlZ
zUD0T+_SNJ)>dKQnMC~F%f9=gC;qrE>KD+A_^=|Ly`s`<m)#=6K^w$k{>(^MW)ZY=E
zw0GwB*FWl4Pekqx*Uq;4BpjA{YZq?cpk~H5)-H=_s18p$tz9=}pMGA0qT0=iU9=aA
z&DL(|-jE{HfFjh5BIMlsqUia}K~2B$MfCZ6S8cX(zv$;2b$s1U2hrDIw65mffuc8g
zjf~ohsymAbx7^X9`n95Jc8akGTXaDk<Xl#SkGImBxxE$<k(s&*xfUX#T?^6Jx0En_
zen)tQj}~T+Bh|d-e!_g&Fm<|nCt(pWK|iMW31RuNw$6U^U}0_9lYMpXcyHk~W2(9@
zv9J21%rP}tZK=-9&Q+5Srs!9GtFG>!V68KnXr&(La)FOWtu$wv@O<N_R!+B9AHN1Q
z=<`T*Uf@2p()yD69cdnF;I%v2yF1&ffoHP0yqIJ=OL*2WVycgK#Y)b*@-EVQ`boWN
z+&i+v@V(lDN2*3njH^x&iYU53w0Js9SbCQcZR7f>$;UQ{PEOlY-%T3Pt?%;4>6Y(B
zk239bT8dE5Mj-+`%|!6Z7Q(Lk4^b`bqk2-UA;P{Ts12<e3;4Drb;dCvv{!HF{G(5b
z8uh(I<dyou_N_*gwA(I<X=bZg+KQrh`UZ8lldmY*W4FFhmzTnM*=L>Yp~k{}Se~eP
zbFX^p;XvU6JJhuAt<*catkkr!&D3eS*Xp_W()xvi9;sJ1tk!-hw@$q^s;{UQ)?TgG
zc%*QD*-fn*ZLH>bEm!Ld>aWhKoTJu1Gg+UorH0zlFHM`%EmMtIHBL0%9e#XCv8BT6
zR6J9C;@e4*A{3FbVhl$J2Q8n+5yDg@_0KP+e?MXD|0lCC(j;+F`ph*pqW9|>+7BC6
zh+Y|rZllF}(W}K+rD)x6qNjyc(O81${v$vc-rh)buN9}?Gx?CHzNx6r+PS3&jlHDX
zeI`<bJC9H-(rSomAAA)k?IwaxeN_e?TOleBQuT2LU4+TdNS%wtLSb$Rx+CydSiZQc
z*rqKPCU1lS7i@*WnHoy(?0EG{oA3H{ZHKD6dk)r>*w|Lx<6TRaQt_g?$LE7$x3ajp
z`SSopljx|foRX>Zz@F-Ia~J)@q-U!8<pH{qtLCYtCw0*sv<+9?zEoB02G&w-Ha$?n
zzkXMX^z>J{1>I4N-k9iv^G|6#8#mCoYzx<V1P#>f4@}XzxB0BtEi}<qf9;}#1^3sM
ztrnwn-qT8JvS}klXx|!J(fxG|ouyqB(fwksZp%J@(Ieo#Vmz{==sxX&67u7L=xJ)G
z^lEP?dQ*fp9#|$qBl_v=@9h-fwoP?=W~~#N+QSv|((WQ+&}k*K#4Zt0K3M7HFiU6*
zRsD)$hlS<D6FTR*m4wZUvAUFqm!f$848<mDh$z<Wq!ONLDeNi)Dm~XE3OikW{rUsT
z)zqV?E3w5uJ$Z1XE@fUn^^ALhVmINMnr2H8nrxzqa`ly7yKAXx+kE|Om*#3)$1t74
z$+<MO>UG_rm}6?s98aZK`=x59whI(k{y>e6{H*kGx~(?dw_D#D-1H51?bSKGoUiYj
zGhTOKdy0PYeJiE7=RSSUrA`WVyRWBFr%GSbM7{g2Jrtqa7cE7HkEgXwLOO|<Yh84j
z*H1<J*Bx|wqGpSByKEJMi4mer$~nc?-%&)boT}ent36d#Gi`F?k3xIgPd8!4b)n7N
ztGhAgg1~xXmEtj(BI3mYrE1w>B0SVdzi7T9JQozzep;|zcy9O6t)ZU=o;`}_zK3=e
zZgF`^nM3))wdy#fR?9)c<<d6&qM*|1i@3cyn^70kr|a+Q_MW?`KCJLTvC6rw=5BtV
z1bwNY-g2m}wCYL~eOa7-N<edU{-^+*^S(*y?1zE6qZNLr)4kg&_N)4<6N?U0G;2nw
zlYg^Sx=$TKUs9*(JEpYNA1GL>E1Pvfzr9YF?v&+P{o0*Z6z5J)^^1EwP@)Vq`h?p3
zlwp3|^e3a<xkPCn4qq->woKJ6YQ0aiXzi<ezU{qeKCX@8SB<`YJ<L|37imP3#toFI
zt;dOmEmO50<Iaf+lWcTL<JXJwtEcH+Ek#l8$r8oS;It^aJzi<K!e4kFeXLB{SyXt=
z)as0Xt1pZ$dFxgvi-h6Z+q!}p0m868D88ox)z3HADa~UStFPWYQ^r4kqCS~>PiOqL
zl)6vN)U7Z-pe8MK(!H^AS9eCVQG8l-Q8!1=R+?;WtghaCTN$l$Q&&7*r!#$BUJb2k
zt6R~lnOgbgN8Rh9W7KjqLAQ4kty;#+L23Btp6Z$Eqx^RMtLl>)sIywI?)btLhPwEc
z8Vor6Qupe*f28e!no5}?_3^!lfl|N8q2pO4_9#Q!Z%#dwLM>l9<M8^TDMcvm<0Hv8
z&Hb5*PpkcsO{PXmj@|P`KF@wYDXsLG>=UKWWS_}CKhM7D&12GMvQLyglYJ)p{5<*U
z$%y{!OOnrIUy^)D^5ygF51W)NeJ1-v=`-19vd_<xuh*Aa%f2M}O!g(omn5G_=g`gC
z@uF!=4PB?UZABxoL6_LKsAy2Xw(i5`C{cHkx8k|3lZd*uQmHk*n5dnYsC_rSfPN;%
z=*F9#5mkmX(w(r+6+xYfD&`NDh`_}!m5M$yMa2m<l_pKPiGZ8oIupMfQA)F4H}}jN
z;n*o!cXRFl;SkYUaVp~~inq^K!fRd@#T}xQ_Q6+0ap%)Iv$5mVhm&{emOi?y-m7w4
z_so5Qnq&A{@fy)ky@m&s+BeUrH>S)}`r;5Z$2LW0aV%4vlh8%C>cTm7_69@Uhmcz8
z%>Gpszb_}%>8W>>#;5D6v(N2UM!J<%7xc`~S-1VF*C+STZTyg~zp#9TVpz7m{#tew
zC1CUpeeTsBO6%3J`nPL~DU%+zQB9}D&^a_CaENG-m8v@u8zySzmD9cbXe_|0nc`-4
zL{#1XQVDx-K?KG;SE6-2L|Mb$x{Z#5g<oQV?#4b3;gw!fF|VKs_g3kOfAV(Wc%!va
z%ek8<=5M2PjL#F61D5NKZ5Sd9?}6^UdnxrtbQ{I-;9T`<v1&@yUQN_jV-1wXFYc-j
zQsR}Kf!)=d%&EHbcZR6@=Y%N+mv5*^>SV>`=0Y{`WH%*r>w9&BLu;j3-aB>0^k+)%
zo!iu<`!aQxT7Ol;whYsKD;T9#s`ptb`Ej7?>yV;U$q80nuf0$jWe!taO~RC(qk~mX
z{S)2gY<F49K9{(U+mk;i#d}|g>~Qa!QfW@l$l66qEA?hHI-WRIqjX!AlA2!3pCYt?
zB2<SWbRxW>(A_K0eafFK!XFM%T#7dpApvca;HyJKrS1+&JzaNEfg+SJZ<8piWb1NG
zFAMM5*A)xr^}=JuMaA!Jj&N;!U(puH5~Ze<Q=;E&6OINHp{YZJ$@A;FcNb@fq6=Fo
zj&*!Rk=Qt;%7Y|fbZVs1Alq9Qp535yd-FmVn(1`sr&z0}ie@SXXXvx6>n+9AdA=%c
z>{UWHmsC~zZ%VV>>8if+MWtWqC#t^0R^5dk*6Q$gk-Bg5qtqb}UMP;qd(}bKpOuhD
zUDN?h0+pscma7A<&rtez(x`)`_tsqu9Ky9n_wiU~eM*LtVjrc`AJF+LK_1Wa2ezw9
z<CH-Cu}S_)|L1o4wElFZ)*YcdLprmUy6d5RMTGStT|r=)s9GmYF`t+%0=K+YoEFy+
z{-b6ozVpV2GS^z_(kjt)r>?s$uYR;B8~a)@wtpbXoSvYR{MuKzR~n=EWIKscjVCI>
zJ?4rMZyM>+zigt~HCy+#uA{I|v{!5zgbLdYd5UlIo5HfZR;e=nrZ6*#QM4i9g4*zP
zH#*KypZJVc3<uR!?>9_RoF;x#v-c`WaQCxnX1#+-4L^7Fipw&k*=aNN@{r-W+#0>q
zc`=ogB8E}w>}KB-=a;S2=~zsudgzuqW!nm+;j9np^mt39TdYQ%J#>!l4xZy$rkD)4
zu0P$lxZ*azUVqW(s1jB;L7(Y(QHj24sek?BmGYa_8P%ea8P5>T83nk_^k<3)*?KAm
zpj-Z)B7$01n^LRme@M4Pebb&$4=Teag@49>(|w)0dlf4c%x$*xk2|w*=d;32ZQQ4}
zuu~g%zAEh0#><5r*|>vRVMjLJmOFXzKVIg?nd}tqm-kt?&K=8mKfKPJ)OejecDN%L
zuk$jK*V$p0*Lj&A<LCK!n0&0(G-TctcE;tyvYQ{!{O)pC_^cZSozp`jQ^3|WpF#8u
zBdl`S7|lb!p=I~l)CY7U>@7wq?p#X2pv4v8gWoE+yKXhSJX8+e%&(2+eaEAXYhyH+
zPzTFwpv06rg3#HRa%`I>VsOf0*jHy6z2ck^PvFw6qgaGSaczrOj{z6TLl@tcf4ri`
z`zw4+h(o)sG;Q00t#H)lBUYO85_&(O^d=5f;Z}n%G+S2z3Pw-{`j9(l+oTj0=`;%c
z!)d(nE^BlyIvUOd8)B7*$06y(D|*HFp_II!d1Ex0TLlhm-t!M%(b0M%hHIX}OM^?O
zZ88nk_oT^?yZr_)3MyhT<KNJ5`V@2@HWEvOgra%F6*RF@TP#I)2V86yK*pj^zr5lz
zv&wLUy7Cy!Z%292$MRHju=UF$v>$o|wos2!>&tK8Bz67abPKtZO5q(%J9i^)1w86I
z8`5u6Pukw&;mqL}G-#Fv>CdWRkxd`rwE0ss&*}=7T)Uyk*#t=GQ3<Uo^oRYY{OR5N
zJ^jMZI|e*u126sT<@w9mU!TPPeD;6mv;U7?`hR!!^EqT$%9CG*{_$DQXIJ6b&&!2p
zKc8`hXMf?@$Y(Au7uEz`F02W>T-c?P_rqs3|KnwToXJk%Ygo`(TT*lWTV*gmUjWA%
zUW8#+Evff-BRH5di{@~vi>8r>FyPiS431lm)(0wM9gmlAWIzl?Tzv?$yZnZ>r;kCU
zah+h>=|QmbZf#Hx^nfSvgVCY&wEtqyA(fZG>k3a0ocz)ICB5$rOQ81LIhs!QB!&-r
z2@6a@X_}4G|7p*kuR39|&<%gHXS4H{VNJpV^j=~EI}f!-Wx{@%V9gOLzKWtb3xeQ9
z!XvD3ZaXY?>qh++y#M2#(fAA9Z*#VGDT$GkkYYPcZdivhuk56IPfeaqg~ODvqa7vc
zI6)oTs4p4aHNJ~2DO<}e>N{L7Z42a3C%77PPwIS~!w595-2v*i9A(!TQmA8EV=awJ
zZFHNW{xeer=d1gfjzZU{Mr+$5vXdDv(is+PuIun~k*|&X4*$$?$0;nd4dhcDv<++5
zui1g73gmN7??I%0S`X^8YE0wVrrd6;Sr~L0I;f9{XW;m`_e``r_enB*eUfC~Qklfl
z?8C?<^`O03ZONn65{Y%uV(e$hu$RXCIFiql{?({BXtP4VRk~k)_|;t|nzuP38P<G_
zB>UvCk0tL%LF@BdiFGK;yd@LOO<qcd`OxIov`#)z9zQBxH6i*3^~m<B1&7ABW}?}q
z)smsFog~>OPwsy}r$~q{mWBg5Y2o0y7fi}o@J=#xe@{vF$@?WjgH2a)1mIHoStgcf
za8EKa_?9GX!Tcja<Z}ermk}Xfl6*<>nSVrxeU23SMBcw7`@GKnuMr}jBfvhBeM#~q
zxdgvPh<%O}`$Xw8*=Mp({3Al_bEMcON}tI-lYQbZ5t{7UkRosf?yvS>qFb`HWX(u7
zN!o(=XN0EzmckK$r&p^IX_D$o{UmD-dC!l_68{>Z+09cZ0(Ae^E{cgh-Qy(dv{58!
z|HMDfp*isL9D2L%Ek&XZ`d0lQStp~eB$wdV2(i!S(A#zInB;$ytdmhslKo#JGzYd&
z1hnKAFy;Q4yniP96ro=#tW1{vv%-c@E&Q{>TK!&Oo7U7ekD_OONufnqjiNLmdki&N
zy9Lm5hp}YF`@>9hJU33VR{T22VSTcg>_eXk6WEs|pUJ)?`I6)_rGF)+qx6~V6Q$2&
zpUFOveRLWZ%DyD|O!g(omn5Gl{n`zhOP|R;QTj~wnd}p#KiqYU^qK4vrO#xa$v)8~
zDq{OSS#oH%q_HNb)DOropQ`bx>_D9vJ8Qgq?Zv1%%QOK+KH-StCp1;R?~XXvW)GJf
zVz%^vp5rJvmZl1H>p}hNi`Ii~4e~I`-4lA;8H*$ObcEjF81Zn+DK0s5>`qAx#x918
zPOl(?UfuEgXUG`325Wzu50|L}?g+01aHZzZh<9U3bIGBT19gcaX4J8e5pgovC0YCK
z8p+@8Br-K6t;%r8q3ep_k{Pi*Wkeib)RU}TKSOf((ca8|HA26fgjM)c<7dYH%6~Zt
z|MRCt8+!ilJ~fuKYpHqcY7WZw(V9nrG!MkFDw@3ML*e;;D@|V5YV_(ECE0LCHKu0Q
z!|5<LLkltK-C^$VU9hjwG??qQ84d1Tfw@JyW4R;~m~%S~o8KM{b57pZoC|e?yQa=C
zYCsCyp?M=tmp=-3)>A5Z>VAG_?l26tje<Mv60mK#b8tuFuE`!+150HGz?7utl9$s?
zGtsVJhGaDw1IOzzlXf$uuPiw)eJ1-v=`-19vQLzLzb4(K&t#t{eJ1-%_K8$s>4>=G
zyoDrfAtORZBuQIH(iTkix#a9ilF#H<kR)G{e5UlN<kDxdPn15BeJ1-vS%UwW5t>^$
zRP)Gp8{|FftjVX$LvBw3HJ@JgLCvF7uvk3>+bwGYj-yWg5usUgFT>o>S#bOE4w!q8
za-%4{V8Ns=7`|&2ENS}`+xLirxSg~Ah|u(&v2bTj292W(fjb3futc%qaL@N5hDOYR
z2Lr4yCU7h~Z0PboEkeIk*pNTJ=2iJ86}I)?SJ;RP6ZD$TlRH4$#-W;b=S|?^h)~Vz
z!)?%UqpPOi<!g+xaswlm#yDbVDX^SnNWOq+&U$Fu^gYZN+668SI|_5Ax}xKT>M-Zl
zKJpL2tX2oecZ8YAJ;_%g!!{J!w%7%kH)v?);1tN-)e;>yM?m)UMHprA3^M7f-H4%1
zkg;+N9}kv%e~^wRMDpT@>P$W!$tbJRl5{*w>DQ(d9PBgMCrY2mK9hZ-^nW{RDt#vV
zMCmixXR=SE&ks7Hhy#^4LLrj01(Uasq%9<A3nu#zJtv2KN%EQOOOh{1K2!P^O5K${
zlYOG}nd~#!C(081kBX3{#RU6^jXt%YSDhXa({BXP6hloTVs14<N1M2aPL~E@jfm+H
z3x~zwz(-~rAx$}dTWF?aLYM5RP^ZQPNOx=s;l1fIzpe(th5^=0Sq(K}Ug3~uI;da2
zZ^YM{`{8V-c!;TM4kxa;!o^MJ;mApvA#;iu9O-%yYwO;Eetkb2{(20YtS0`aMTiqS
znAiCI=a}qb`TLJF*$DQZKU@Fi7a9GiU%;&a3kv`Kt~H<xRq-mNCb|;%A2$PV^H^bX
z0FOH41}FY*>G3=H=e{TX75?n^qUFM${XDvnfA;fFd>-{!_>-TP`KLcOKJchVCO2O3
za$#c@kAUPxE&j*L{Ev@?mkW=HkB66egrwW=<aK_$aI_|mnk*c#>HhmNA1faxlb_?`
zXY%o~&*b&OvhX@D7nX;QpO=~J7nX;QpO=~Zcwu??n0cAWj~AAKm-#rEeEdv4{=%|w
zIXHa+)9CkQE-OFg{5$#aQosLk^GxC6{1`8@&*b-%$&L&C@#``<CWY(l@G?84>5qM0
z=f`<JOg=UyZ_mqoKJY%+XY#to@5{U`KhCk_=RAI2W^&A#d@gxXb3rXwU85Lmd)yCh
zrk90PhFj44Tr#XT%f=dqzQCQBci8YnGqj$OiY+GYMep2C7`ClD)(+c@-s1|e<>3Zs
zGNCI*xBUS7n(}&Ui1mAk%KReGa_LwMD%t{k&VND+i#gCV`vcs}C<V9sO@>>_c=Y_Z
z8nWB=#(*+rXyx@0tJHghA-mt9Y0L-In02B_>=IEkFazSw(G2S$Ik3LtOq%AA=7=#V
zhb5DCp&5O#JaT#kmcbZEeN=!|d^{o5zz_qIV<0Ex1%}pn17Aj}=vS_QW^M0=_Vql_
z;8qvJNm{hZ8;Nx$kA*M!5vc3@0X+uKN3G#{42)cd<+IbUcB|<WnYC4}!p>4Y@YE??
zMy7m`s*td<9oDY767p{aWBsv3Xw>UKY`W+xR$h7aUye-3+!AQMaS8PJ93><3cB_qy
zj1M(r-JNy{{boKzhda3#)YJHHBa;wC^Ny$I!A^}ad>w4@M`Ubf4TIG2h-J&_;8a^<
ztRB}I(mub%VAH+upx=6|cJCw>*&L0&@svW-d^kEZq$%1`uVDDv23V?}9o9Km0!;%O
zV<aVlEZevp!hy9k!+Sd{_lbU|$jGdp9QBvT_{5Ha&6%~Z=Brnbw{r|O9KVakoW@{7
z)8Axdsvi7^walnHzGo|JF{39Mcy*NL%$Dv?|8maMPQ8i2t15%ntY&C-JptN}sR`Mk
zG*|TRktrKC7Vb4o#^81|4?~HUSmE0?45|AaZOVPZ@T@U^oHOw)SIcu|gK;i=H_t<x
zXBW{SPmi|eheB%p9rSs;3r?KK!s??!Kpj&KLz2fpUYQ^a_biD;BeO7|r;3Jm?a(zW
z42_l~qjnSx5xC`yb+c(c`cHwV{jvf5n}%b!n<rL@>WpOur(vxrD_v@#^}?PJ+)drb
z{a^$&PGgPu%@O-Tqp<~!)o@bh=qAr(#-Fy2`oTmR7u$duu2)h@0!ldmyH@SNK<BlP
zM44kse0wX`EvJ@-Wpf+D_fI!rB6Wp-hhxEwQXd#u)z$2#v<H4KS8MjyT#wqB)ilQ_
z-GPo8$Rm1>$EbJoZI8yo22xJl`R)ACWz&6_e>)tD`921EO|%aV2F^zuVAB$SwhPW$
zrD<iaMcuPynvs(iVg2|{n%~w1W1VK_G$$z?N&UcFDCX~mI^*hK5qAo!U0wlJ-F>iO
z7XdY!?!%V5`-0=N(b&Y{HT2%Q6&r_~hADv>tg)m4tZYz)t~S)5{>Nu&<v+jvQj<D$
zar(WnBud+`#^2phQX>AFAGSs>=)=zF#XtKq#|eMUsq}a2e9ZJueoB_|{<&gcNaW8}
zCVvJLHly>ko0pk<E#}WzCSPZHnaQ7fyj=L1&HMSgn^x=;z6S5J@UxsBFMJIP>e5vb
zx(*lvp8|KoqGTG7IHEo5zH<zVcv->fykK;U?FhsBOh@<GqoC%Sa_CIMmb^T>qV4Ee
zP;KEIEE-iGx>X85^CQNvsLgt`J827Ds>Gm!vBkf2&r=T{h1|W7uzJsS$h$KZgk?)K
zwCE124wOJE%z^%+rlRfr6`<77p!uzlQ2ujs_+nTC>K&N_`31{i<dqumYGypdew>L#
z#_xbW{*;om=`1?t5v3jB$L9u=YLI5VsN4pQDxc6iW;G-muB3^KZD4g)CG^5WFmXR6
zpS?^C(n<BOq;V%`^|l;ZbV-1jALG$_@DbQ__8=CYeGeAcEI_AQx_|4QM`oOc*Bh2V
ze9BySHPjPM<h!F`k7jVNhXGnO@rCu_l>E)DI81d}jm37Yg^pt!DdFWv=yJ^#zK@K8
zx$S?TAvKb2t>lU(L7!pKig+|niKAoQ9KH>WM%;qb@-%q);$_IEVYcQae!#OLG}~9e
zYB*c&5tgYI1$$nGVi`L(Sa$FsmVE31u@NKDx_MpLe{BZZj%fgw+td7kbYmms=@xWO
zn)7en^U})e&>-<EBroxYx3*2;*4t!wTQ3$~bTUHob^GATlW=sL-X4yQZ;XzI-ave%
zIcR_M2rRmE8LbV&VDFTEXnJM@Wc;=gP2&Z93XVbBwh!o*j-?SzOG>#3I1hmt&5Php
zIoWMm7D1Q))!vmxRdHnDCyVUxSX6dFaS398jEczXy6^RqML<CXg}4kshtUvCbW|9Z
zh>AfI6ZL3B(Zgs27tqllIx0q_3r9nUfN{YkVitoNZiri4=H7<N5R)JC%Q<t-^f~?R
z?Rxd9Z&iQq_U)?buW*>B3$k|+FM(I{KCmS&1Ei3_*NmVu`qhrO+v5<A1M(DT(SLVA
z8W|U)njzg)n~ML)_I|D1=*@5a+V6}N{x|)a8u7dJq8i}#vR@;gL;j8Y8R^2Wk^d2X
zjdbD5$Tzk3W#U;x_%h)iU-o6fKT<x@)q&Bra>>WJvS!_Ruvmhx4ku=S$rrdv%gGgB
z<`@ZGw}gZJxMHNjeh!}XQQ$b`BKUR6We?_OfTzVQcH5&E98dQJixOOC$?Y9*iku8?
zPIJM`E(F}Kjs%nKme8#(;+34?g~cuQup<uUYky+RB|E_P<{tL5lRx-<9RpSqFM-!T
zZiCBOH_)0P>gvnbBYOac$}OzLeL0c<mxGPx73g^7894Xtii`7xf%)EOu$!FDUhM1)
zE??$&xPo1eNVS#R4>qW+^xDFCYAXeM-BnwuZ_Wj^mAaQdr&huj@7GW(fsM;9wUs;&
z^VCXy3lFKS)Md4k+De@Rn_FAy6`a9(T_{p<tpcnAyPh@-0vdl{P4!pdjoJb*F{=cs
zgTqjya9WoHPAy()9qi{8fn^I48btL2s)NZV8*w;!GT8VYz&oH5(nRDyCyvDDQCqQ<
zyj}CatbYsyWNcxN^nD<tW(Ipypo76veZjOa6NZdg1TGmHK_9UUyyA{P&meqV{lW<F
z+~f$h`;8FX@&nk+`4*sNF*xB;;z2%MxcvO*5O`@Hc;_X&k~6r^a0XLj0(6fV%Wi$u
z4<}y?V2$^7g48RLHAOFjA@|3CCOs7*BqV=c+yZ?~w}Er2HMoEOJy@^)5`waW!E`we
zw!7lGisv3ezc=#1M*9o~Hm?Eg{^wYS&~<rWhg>WMl-9`25<T=A)qf5<UJ8!5rbR6J
zNcZJqA)<}HWf1D_w$U&!6<2~q7DNM5ayemIB*vYt$N>Y$<>Hp41$Of=c*oIGDGr0{
z7j$et3_d#6p~K+TsBm=bueerP*D$dc!{4K0{}?-DFcyLQnH4@Lag%*;kHUv#vv7ld
zQ8E8hVqX!^9XXSh7OsCOk$w}-$0a6Kj!29ZITan|<jqCJm47|`@5CxBRrCUpVQMc>
z>qrY4Mg>hI*Ez8R71Op+A4MlzSG;wjuc=2xM2ytaAUrGS!n0Cg!n2YtB1Y1Mm!+qF
z;aN!+-jv#uyfJxE(n*phC0+FLh^b1Lq}oI2lty`kePj>mBq?3kM>dd7lFln^B3;-a
z^3$=SLkAB({%7+UJa>Bt_ZgSXi#J&)=`GH@q}oEBzrvoRF>paCr5iH>tNEJE4#o*(
z);yx2+}L;KWUdLRm5Zu6D?2hyR6HqjREpB)DL=b~D|HEv`H+#(+~;W;pZGX{r{xE8
z^DmC^to#Rx)z%39fxc4a;}-BNkE?Q7Knm~a;iJee5_vD*As&9ZglG39eCm?6-p<!m
zuHV8!le9V{fMa={J5*VBW3if!(}$$R_`)$wJL-*3QuyS?-lf$^aC*_Q>aQ7=!#<8{
zkeXIbVv9aqAO&E)VduK&X5zFXtB_a;ry$YJaN>yc&#iY@v5BqJ5H^vfDlwW=V*GRg
ziz*GpmJ-p!Z$XdWnH)mU;72=bQ6HA88)9AE2vc-j1h(k92yD^y5ZEF_3T%-sutmDS
z7UdV%B3)oh^s*6NNEdjb>nwT=>AV6rWQ)KPrBfb~lwa6KI+a6`$|Om4(|JiJN$Di1
z4rC|k!d}wJK4BY4>ggj%{{t7qpFbaUZW`a5e~kNn9LPT@=%rW(RPoH``Et$rt$bci
zt?@0tA-tf%*|@MrJ<rNWF^<Ws<Xtk~H~Q~Aplr1NO1^&by7Kyiee(Hx+YGMPtdzP^
zOMOt#QRQ13J0-l}Fc168U#V9#{B55+KDN+;zjtd2|47m+FSM_5-H#tAp2G{c#afWd
z%kX{8nU9RR^Y~6`qt-AyX}#iEcTt}@xmJHJ@gom^-Hiq>mXzBf6|NY{7DVK-;Z@z)
zs&rhE#c?%T+4C&BeyEm>8kx+V#%HtTe@SJHjdrZ^_4irL;v7{kZAfEJY_781jibOi
z*__$TL2}8$70kQ_*K8ipQ%bGg&CVT^b=_l1*rv5oSn@%cW$(<AuH_-&MCLp;RDY9I
zd*`zvw`^9u>nN+wZDHFU4q#b(r>W=6xbzgPwvkt9kJq+nSB0+HBmN&bX}qG@h(*)v
z_WQ4>59u^*n+Hliw|Cl(2wDUW0e6CdfIGqa_aIJ?5D+I_K%8^|ae|I;pVS#F+$VMT
z3b<3pu7Eq~0`8;>*C;xEF-f&kz+QBWlig&qfH?h`MIFd?(n%7`X{Wy_*-1J{0dcaM
zbYVByOnK;7lu5^=(@yD>hjfx;kEo~U=%!<#lcc(c`coZACrRm|&ZJXWqTW=#T34h;
z9H2C9f6Ajftyd;2_Te$5o8$@IYI!VsEH`D=@}ZZkjV6n<yia6>F}idhH$9bX%nD0U
z_PjaPI4d+>vPwB@^xmN{+{^50xLAEe_HV9Ja*QkF5XX4lKSnXs=OpvFvy>xuEt^nQ
zDyQ!h^XTd-ZWVTtoB!Q~_nJRkiL=&opUf)RF+|V1-kL67OVKMw4;qc3Cr&Bp^Crpo
zn6KET1eI4Q8fC|&0L8iRa>d;<&y|Wz$Ca(K%D7wMWu^D*I6kJNw=!i*1$UZ#S*cyx
z<Nr1LpS@;bCH^WJrLZ?uG)jlxR?!HNMJgJ-7g-Y;ks4vOipI~<5(tg@>7Qp28s!c@
zC8=l(*6df&sGH-eqVYy(kc!46`z#fW-2XnIQF*$^Ohu!6(}yY=UBdHJG&(CEs%YGE
z;*^TUcx@D+vEoK!yo$yRh8Zdvk6G2KXw2<asiIN4YLbe^5uQs_G#<9?=P`g;^f3YJ
z@%>r2_kOVYxsk0$YDB9G-Pu8$rfP+23?4x`Mn_y$?nj)t>S1EbUW6erBnB|F1l=HM
z8asjAAQ+-kU<2}QUp5GThs?avN~C0Dk1q_uKnVs;->phy<&}uA-tFLc=?+pdVwlgO
zk%rMFGzo81*NFC!9l%h(TkREg0cXAj;EdUA*zFRGGic{xw{#B-kdiy+z#p96WkeZ?
zRF2Z|(ohI8ER`^Df`Hx+q_arT=({uoeM#$Mf-{ExZL?(!#+b+vaf!nQJ7|dh#sSA>
ze@SYK&09xkgVor)!+rF)_|YzYA~$d4Mz<B($RX1WLEKQtv5FfC=^}n2UEEwq7x5GQ
zmToSzkuJ&-dFa>@V-Y7Fx!qqMI8~#pcyUqb^Hz$yH};X@8o1GzT(ixPUac|OSzeWQ
zP7NwI-=L9e%;ULscD!8n&3nrDx?01oIa%`Bh4BVur{2R!hrRi938jA6<WI);m;Q#A
z?#Xvi(ivpS#MK2QnjUY4>k&`GQ3SJR_jMSfg4yivBpew4&E~VxI((|rRBj-X)u%9r
XUz&GhOn8DZ3Y!+cGTTl265Rd;Zg+yf

literal 0
HcmV?d00001

diff --git a/live2dw/assets/mtn/idle_01.mtn b/live2dw/assets/mtn/idle_01.mtn
new file mode 100644
index 0000000000..6b7535cec0
--- /dev/null
+++ b/live2dw/assets/mtn/idle_01.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=-1,-0.991,-0.97,-0.93,-0.88,-0.82,-0.76,-0.69,-0.62,-0.55,-0.47,-0.4,-0.33,-0.26,-0.2,-0.14,-0.09,-0.06,-0.03,-0.007,0,-0.007,-0.025,-0.06,-0.09,-0.14,-0.2,-0.26,-0.32,-0.39,-0.46,-0.53,-0.59,-0.66,-0.72,-0.78,-0.83,-0.88,-0.92,-0.96,-0.98,-0.995,-1,-0.991,-0.97,-0.93,-0.88,-0.82,-0.76,-0.69,-0.62,-0.55,-0.47,-0.4,-0.33,-0.26,-0.2,-0.14,-0.09,-0.06,-0.03,-0.007,0,-0.006,-0.025,-0.05,-0.09,-0.14,-0.19,-0.24,-0.3,-0.36,-0.43,-0.49,-0.56,-0.62,-0.68,-0.74,-0.79,-0.84,-0.89,-0.93,-0.96,-0.98,-0.995,-1,-0.993,-0.974,-0.94,-0.91,-0.86,-0.8,-0.74,-0.68,-0.61,-0.54,-0.46,-0.39,-0.32,-0.26,-0.2,-0.14,-0.09,-0.06,-0.03,-0.007,0,-0.004,-0.016,-0.034,-0.06,-0.09,-0.13,-0.17,-0.21,-0.26,-0.31,-0.36,-0.41,-0.47,-0.52,-0.57,-0.63,-0.68,-0.73,-0.77,-0.82,-0.86,-0.89,-0.92,-0.95,-0.97,-0.987,-0.997,-1,-0.987,-0.95,-0.9,-0.84,-0.76,-0.68,-0.6,-0.51,-0.42,-0.34,-0.26,-0.19,-0.13,-0.07,-0.03,-0.01,0,-0.004,-0.016,-0.034,-0.06,-0.09,-0.13,-0.17,-0.21,-0.26,-0.31,-0.36,-0.42,-0.47,-0.53,-0.58,-0.64,-0.69,-0.74,-0.79,-0.83,-0.87,-0.91,-0.94,-0.97,-0.984,-0.996,-1

+PARAM_ANGLE_Y=14,13.81,13.27,12.45,11.39,10.14,8.73,7.22,5.65,4.03,2.39,0.79,-0.77,-2.25,-3.6,-4.85,-5.91,-6.79,-7.43,-7.85,-8,-7.85,-7.45,-6.79,-5.91,-4.87,-3.68,-2.33,-0.95,0.54,2.05,3.58,5.05,6.52,7.9,9.2,10.37,11.41,12.31,13.03,13.56,13.89,14,13.77,13.1,12.1,10.8,9.27,7.53,5.68,3.75,1.76,-0.25,-2.21,-4.12,-5.94,-7.6,-9.13,-10.44,-11.51,-12.31,-12.82,-13,-12.83,-12.33,-11.55,-10.56,-9.33,-7.97,-6.46,-4.86,-3.18,-1.47,0.28,2.02,3.72,5.38,6.94,8.41,9.75,10.96,11.99,12.84,13.47,13.86,14,13.85,13.43,12.79,11.91,10.85,9.63,8.31,6.86,5.34,3.77,2.23,0.66,-0.86,-2.31,-3.63,-4.85,-5.91,-6.79,-7.43,-7.85,-8,-7.91,-7.65,-7.24,-6.7,-6.02,-5.24,-4.34,-3.37,-2.33,-1.25,-0.09,1.08,2.26,3.45,4.62,5.78,6.92,7.99,9.01,9.96,10.85,11.62,12.32,12.91,13.37,13.71,13.93,14,13.66,12.75,11.36,9.63,7.64,5.46,3.13,0.82,-1.55,-3.78,-5.91,-7.86,-9.58,-10.99,-12.07,-12.76,-13,-12.89,-12.58,-12.07,-11.39,-10.56,-9.59,-8.5,-7.29,-6.01,-4.64,-3.21,-1.75,-0.25,1.25,2.75,4.21,5.64,7.01,8.29,9.5,10.59,11.56,12.39,13.07,13.58,13.89,14

+PARAM_ANGLE_Z=-10,-9.96,-9.85,-9.67,-9.41,-9.1,-8.72,-8.3,-7.82,-7.28,-6.7,-6.1,-5.44,-4.75,-4.03,-3.3,-2.53,-1.75,-0.94,-0.15,0.68,1.5,2.32,3.15,3.94,4.75,5.53,6.3,7.03,7.75,8.44,9.1,9.7,10.28,10.82,11.3,11.72,12.1,12.41,12.67,12.85,12.96,13,12.96,12.85,12.67,12.41,12.1,11.73,11.3,10.82,10.29,9.72,9.1,8.46,7.78,7.06,6.33,5.56,4.79,4.01,3.21,2.41,1.6,0.79,-0.01,-0.79,-1.58,-2.36,-3.1,-3.82,-4.53,-5.21,-5.85,-6.46,-7.02,-7.55,-8.04,-8.47,-8.87,-9.2,-9.48,-9.71,-9.87,-9.97,-10,-9.97,-9.88,-9.74,-9.55,-9.31,-9.01,-8.68,-8.3,-7.88,-7.43,-6.93,-6.42,-5.86,-5.29,-4.68,-4.06,-3.42,-2.75,-2.08,-1.4,-0.7,0,0.71,1.42,2.12,2.83,3.52,4.21,4.89,5.56,6.22,6.85,7.47,8.07,8.63,9.19,9.7,10.19,10.65,11.07,11.46,11.8,12.11,12.37,12.6,12.77,12.9,12.97,13,12.96,12.85,12.67,12.42,12.11,11.75,11.33,10.87,10.35,9.8,9.21,8.58,7.92,7.24,6.53,5.82,5.07,4.3,3.55,2.76,1.99,1.21,0.42,-0.35,-1.11,-1.86,-2.6,-3.32,-4.02,-4.69,-5.33,-5.95,-6.54,-7.09,-7.6,-8.08,-8.5,-8.88,-9.21,-9.49,-9.71,-9.87,-9.97,-10

+PARAM_EYE_L_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.82,0.54,0.27,0.08,0,0.03,0.13,0.26,0.42,0.58,0.74,0.87,0.97,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_EYE_R_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.82,0.54,0.27,0.08,0,0.03,0.13,0.26,0.42,0.58,0.74,0.87,0.97,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_MOUTH_OPEN_Y=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.82,0.54,0.27,0.08,0,0.03,0.13,0.26,0.42,0.58,0.74,0.87,0.97,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.987,0.95,0.9,0.84,0.76,0.68,0.6,0.51,0.42,0.34,0.26,0.19,0.13,0.07,0.03,0.01,0,0.004,0.016,0.034,0.06,0.09,0.13,0.17,0.21,0.26,0.31,0.36,0.42,0.47,0.53,0.58,0.64,0.69,0.74,0.79,0.83,0.87,0.91,0.94,0.97,0.984,0.996,1

+PARAM_BODY_ANGLE_X=-2,-1.993,-1.973,-1.94,-1.9,-1.84,-1.78,-1.7,-1.62,-1.53,-1.43,-1.32,-1.21,-1.09,-0.96,-0.83,-0.7,-0.56,-0.42,-0.29,-0.14,0,0.14,0.29,0.42,0.56,0.7,0.83,0.96,1.09,1.21,1.32,1.43,1.53,1.62,1.7,1.78,1.84,1.9,1.94,1.97,1.993,2,1.993,1.973,1.94,1.9,1.84,1.78,1.7,1.62,1.53,1.43,1.32,1.21,1.09,0.97,0.84,0.71,0.57,0.44,0.3,0.16,0.02,-0.12,-0.26,-0.4,-0.54,-0.67,-0.8,-0.93,-1.05,-1.17,-1.28,-1.38,-1.48,-1.57,-1.66,-1.73,-1.8,-1.86,-1.91,-1.95,-1.98,-1.994,-2,-1.992,-1.97,-1.93,-1.88,-1.82,-1.74,-1.65,-1.56,-1.45,-1.33,-1.2,-1.07,-0.92,-0.77,-0.61,-0.45,-0.28,-0.11,0.06,0.24,0.43,0.61,0.79,0.98,1.16,1.35,1.53,1.71,1.88,2.06,2.23,2.4,2.56,2.71,2.86,3.01,3.14,3.27,3.39,3.5,3.6,3.69,3.77,3.84,3.89,3.94,3.97,3.99,4,3.99,3.96,3.91,3.85,3.77,3.67,3.56,3.44,3.31,3.17,3.01,2.85,2.68,2.5,2.31,2.13,1.93,1.73,1.53,1.33,1.13,0.93,0.72,0.52,0.32,0.12,-0.07,-0.26,-0.44,-0.61,-0.78,-0.94,-1.1,-1.24,-1.37,-1.5,-1.61,-1.71,-1.79,-1.87,-1.92,-1.97,-1.99,-2

+PARAM_BODY_ANGLE_Z=-5,-4.981,-4.93,-4.84,-4.72,-4.57,-4.39,-4.19,-3.96,-3.7,-3.42,-3.13,-2.82,-2.49,-2.15,-1.8,-1.43,-1.05,-0.67,-0.29,0.11,0.5,0.89,1.29,1.67,2.05,2.43,2.8,3.15,3.49,3.82,4.13,4.42,4.7,4.96,5.19,5.39,5.57,5.72,5.84,5.93,5.98,6,5.981,5.93,5.84,5.72,5.57,5.39,5.19,4.96,4.71,4.43,4.14,3.83,3.5,3.16,2.81,2.44,2.08,1.7,1.32,0.93,0.55,0.16,-0.22,-0.6,-0.97,-1.34,-1.7,-2.04,-2.39,-2.71,-3.01,-3.31,-3.58,-3.83,-4.06,-4.27,-4.46,-4.62,-4.75,-4.86,-4.94,-4.98,-5,-4.986,-4.94,-4.88,-4.78,-4.67,-4.53,-4.37,-4.19,-3.98,-3.77,-3.53,-3.29,-3.02,-2.75,-2.46,-2.16,-1.85,-1.53,-1.21,-0.89,-0.55,-0.22,0.12,0.46,0.8,1.14,1.47,1.79,2.12,2.44,2.76,3.06,3.35,3.64,3.91,4.18,4.42,4.66,4.87,5.08,5.26,5.43,5.57,5.7,5.81,5.89,5.95,5.99,6,5.981,5.93,5.84,5.72,5.58,5.4,5.2,4.98,4.73,4.47,4.19,3.89,3.57,3.25,2.91,2.56,2.21,1.84,1.48,1.1,0.73,0.36,-0.01,-0.38,-0.75,-1.11,-1.46,-1.8,-2.14,-2.46,-2.77,-3.07,-3.35,-3.61,-3.85,-4.08,-4.28,-4.47,-4.62,-4.75,-4.86,-4.94,-4.98,-5

+PARAM_BODY_ANGLE_Y=0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.06,0.21,0.41,0.61,0.76,0.82,0.54,0.1,-0.31,-0.6,-0.72,-0.55,-0.28,-0.02,0.16,0.23,0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.15,0.38,0.6,0.76,0.82,0.54,0.1,-0.31,-0.6,-0.72,-0.55,-0.28,-0.02,0.16,0.23,0.17,0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/idle_02.mtn b/live2dw/assets/mtn/idle_02.mtn
new file mode 100644
index 0000000000..328d7a5680
--- /dev/null
+++ b/live2dw/assets/mtn/idle_02.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.01,-0.04,-0.09,-0.15,-0.22,-0.31,-0.41,-0.52,-0.63,-0.75,-0.87,-1,-1.13,-1.25,-1.37,-1.48,-1.59,-1.69,-1.78,-1.85,-1.91,-1.96,-1.99,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-1.995,-1.979,-1.95,-1.92,-1.88,-1.83,-1.77,-1.7,-1.64,-1.56,-1.48,-1.4,-1.31,-1.23,-1.14,-1.05,-0.95,-0.86,-0.77,-0.69,-0.6,-0.52,-0.44,-0.36,-0.3,-0.23,-0.17,-0.12,-0.08,-0.05,-0.02,-0.005,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.08,0.29,0.64,1.12,1.68,2.34,3.09,3.88,4.75,5.65,6.56,7.5,8.44,9.35,10.25,11.12,11.91,12.66,13.32,13.88,14.36,14.71,14.92,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,14.96,14.84,14.65,14.39,14.07,13.7,13.26,12.79,12.27,11.71,11.11,10.49,9.85,9.19,8.52,7.84,7.16,6.48,5.81,5.15,4.51,3.89,3.29,2.73,2.21,1.74,1.3,0.93,0.61,0.35,0.16,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.66,7.03,10.02,11,10.19,8.22,5.82,3.48,1.6,0.4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.12,0.45,0.99,1.71,2.57,3.59,4.74,5.95,7.28,8.66,10.05,11.5,12.95,14.34,15.72,17.05,18.26,19.41,20.43,21.29,22.01,22.55,22.88,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,22.92,22.68,22.3,21.79,21.15,20.39,19.53,18.57,17.53,16.42,15.22,13.98,12.7,11.38,10.04,8.68,7.32,5.96,4.62,3.3,2.02,0.78,-0.42,-1.53,-2.57,-3.53,-4.39,-5.15,-5.79,-6.3,-6.68,-6.92,-7,-6.94,-6.76,-6.48,-6.11,-5.68,-5.19,-4.65,-4.08,-3.5,-2.92,-2.35,-1.81,-1.32,-0.89,-0.52,-0.24,-0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EYE_L_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_EYE_R_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_MOUTH_OPEN_Y=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.98,0.93,0.85,0.75,0.63,0.51,0.4,0.29,0.19,0.11,0.05,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.07,0.25,0.47,0.68,0.85,0.96,1,0.98,0.93,0.84,0.74,0.62,0.5,0.38,0.26,0.16,0.07,0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.013,0.05,0.1,0.18,0.26,0.35,0.45,0.55,0.65,0.74,0.82,0.9,0.95,0.99,1

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.05,0.2,0.43,0.74,1.12,1.56,2.06,2.59,3.16,3.77,4.37,5,5.63,6.23,6.84,7.41,7.94,8.44,8.88,9.26,9.57,9.8,9.95,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,9.989,9.96,9.9,9.82,9.73,9.62,9.49,9.34,9.18,9,8.8,8.6,8.38,8.15,7.92,7.66,7.41,7.14,6.87,6.59,6.31,6.02,5.73,5.44,5.15,4.85,4.56,4.27,3.98,3.69,3.41,3.13,2.86,2.59,2.34,2.08,1.85,1.62,1.4,1.2,1,0.82,0.66,0.51,0.38,0.27,0.18,0.1,0.04,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Y=0,0.07,0.25,0.51,0.81,1.12,1.41,1.65,1.84,1.96,2,1.97,1.91,1.8,1.68,1.53,1.37,1.2,1.02,0.85,0.68,0.53,0.38,0.25,0.15,0.07,0.02,0,0.28,1,2.04,3.23,4.47,5.62,6.61,7.36,7.83,8,7.85,7.45,6.87,6.15,5.36,4.53,3.68,2.87,2.1,1.41,0.84,0.39,0.1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.03,0.1,0.21,0.36,0.53,0.72,0.92,1.14,1.36,1.58,1.8,2.01,2.22,2.4,2.57,2.72,2.83,2.92,2.98,3,2.94,2.78,2.54,2.24,1.9,1.54,1.19,0.87,0.58,0.34,0.15,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.013,0.05,0.11,0.19,0.29,0.4,0.52,0.65,0.79,0.93,1.07,1.21,1.35,1.48,1.6,1.71,1.81,1.89,1.95,1.99,2,1.94,1.77,1.56,1.3,1.04,0.77,0.53,0.32,0.15,0.04,0,1.94,5.11,7.29,8,7.26,5.48,3.29,1.16,-0.55,-1.63,-2,-1.46,-0.61,0.2,0.77,1,0.74,0.26,0,0,0,0,0,0,0,0,0,0,0,0,0.1,0.34,0.67,1.05,1.45,1.84,2.21,2.52,2.78,2.94,3,2.96,2.86,2.69,2.47,2.22,1.94,1.65,1.35,1.06,0.78,0.53,0.31,0.14,0.04,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.14,-0.36,-0.52,-0.57,-0.49,-0.28,-0.01,0.26,0.47,0.55,0.49,0.35,0.16,-0.04,-0.18,-0.24,-0.2,-0.13,-0.06,-0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.12,0.32,0.46,0.5,0.41,0.21,-0.07,-0.35,-0.55,-0.64,-0.58,-0.43,-0.23,-0.03,0.12,0.18,0.15,0.1,0.05,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/idle_03.mtn b/live2dw/assets/mtn/idle_03.mtn
new file mode 100644
index 0000000000..33a2daf9fb
--- /dev/null
+++ b/live2dw/assets/mtn/idle_03.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0,-0.04,-0.15,-0.33,-0.57,-0.87,-1.22,-1.62,-2.07,-2.54,-3.06,-3.61,-4.18,-4.77,-5.37,-5.99,-6.61,-7.24,-7.85,-8.47,-9.06,-9.65,-10.21,-10.74,-11.26,-11.74,-12.18,-12.58,-12.94,-13.25,-13.51,-13.72,-13.87,-13.97,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-14,-13.95,-13.82,-13.61,-13.32,-12.96,-12.55,-12.08,-11.55,-11,-10.39,-9.76,-9.11,-8.45,-7.77,-7.08,-6.41,-5.73,-5.07,-4.43,-3.81,-3.22,-2.67,-2.15,-1.67,-1.25,-0.89,-0.58,-0.33,-0.15,-0.04,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Y=0,0.04,0.17,0.37,0.65,0.99,1.39,1.85,2.36,2.91,3.5,4.12,4.78,5.45,6.14,6.84,7.55,8.27,8.97,9.68,10.36,11.03,11.67,12.28,12.87,13.41,13.92,14.38,14.78,15.14,15.44,15.68,15.86,15.96,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,15.95,15.8,15.55,15.22,14.82,14.34,13.8,13.2,12.57,11.88,11.16,10.42,9.65,8.88,8.09,7.32,6.55,5.8,5.06,4.35,3.68,3.05,2.46,1.91,1.43,1.01,0.66,0.38,0.17,0.04,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0

+PARAM_EYE_L_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.97,0.88,0.75,0.6,0.44,0.3,0.17,0.08,0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.03,0.12,0.25,0.4,0.56,0.7,0.83,0.92,0.98,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_EYE_R_OPEN=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.97,0.88,0.75,0.6,0.44,0.3,0.17,0.08,0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.03,0.12,0.25,0.4,0.56,0.7,0.83,0.92,0.98,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.74,0.26,0,0.08,0.26,0.5,0.74,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_MOUTH_OPEN_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.021,0.07,0.15,0.24,0.34,0.42,0.5,0.55,0.59,0.6,0.588,0.56,0.51,0.44,0.37,0.3,0.23,0.16,0.09,0.04,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_X=0,-0.02,-0.09,-0.21,-0.36,-0.56,-0.78,-1.04,-1.33,-1.64,-1.97,-2.32,-2.69,-3.07,-3.45,-3.85,-4.25,-4.65,-5.05,-5.44,-5.83,-6.2,-6.56,-6.91,-7.24,-7.54,-7.83,-8.09,-8.32,-8.52,-8.68,-8.82,-8.92,-8.98,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-9,-8.97,-8.89,-8.75,-8.56,-8.33,-8.07,-7.76,-7.43,-7.07,-6.68,-6.28,-5.86,-5.43,-4.99,-4.55,-4.12,-3.69,-3.26,-2.85,-2.45,-2.07,-1.71,-1.38,-1.08,-0.81,-0.57,-0.37,-0.21,-0.1,-0.02,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,-0.013,-0.05,-0.11,-0.18,-0.27,-0.37,-0.48,-0.6,-0.73,-0.85,-0.98,-1.11,-1.24,-1.36,-1.48,-1.59,-1.69,-1.77,-1.85,-1.91,-1.96,-1.99,-2,-2,-1.999,-1.997,-1.994,-1.991,-1.987,-1.982,-1.977,-1.971,-1.964,-1.957,-1.949,-1.941,-1.931,-1.922,-1.911,-1.901,-1.889,-1.877,-1.865,-1.852,-1.838,-1.824,-1.81,-1.795,-1.78,-1.764,-1.748,-1.731,-1.714,-1.696,-1.679,-1.66,-1.642,-1.623,-1.604,-1.584,-1.564,-1.54,-1.523,-1.5,-1.48,-1.46,-1.44,-1.42,-1.39,-1.37,-1.35,-1.33,-1.31,-1.28,-1.26,-1.24,-1.21,-1.19,-1.17,-1.14,-1.12,-1.1,-1.07,-1.05,-1.02,-1,-0.98,-0.95,-0.93,-0.9,-0.88,-0.86,-0.83,-0.81,-0.79,-0.76,-0.74,-0.72,-0.69,-0.67,-0.65,-0.63,-0.61,-0.58,-0.56,-0.54,-0.52,-0.5,-0.48,-0.456,-0.44,-0.416,-0.396,-0.377,-0.358,-0.34,-0.321,-0.304,-0.286,-0.269,-0.252,-0.236,-0.22,-0.205,-0.19,-0.176,-0.162,-0.148,-0.135,-0.123,-0.111,-0.099,-0.089,-0.078,-0.069,-0.059,-0.051,-0.043,-0.036,-0.029,-0.023,-0.018,-0.013,-0.009,-0.006,-0.003,-0.001,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Y=0,0.13,0.45,0.89,1.4,1.93,2.45,2.95,3.37,3.7,3.92,4,3.9,3.63,3.23,2.73,2.17,1.57,0.99,0.45,-0.04,-0.44,-0.75,-0.93,-1,-0.64,-0.07,0.46,0.85,1,0.93,0.75,0.53,0.32,0.15,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.53,1.47,2,1.52,0.72,0.18,0,0.24,0.64,0.91,1,0.76,0.36,0.09,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.02,-0.07,-0.16,-0.26,-0.38,-0.5,-0.62,-0.74,-0.84,-0.93,-0.98,-1,-0.94,-0.78,-0.54,-0.24,0.1,0.46,0.81,1.13,1.42,1.66,1.85,1.96,2,1.999,1.993,1.983,1.965,1.94,1.9,1.85,1.79,1.72,1.63,1.52,1.4,1.25,1.09,0.91,0.72,0.5,0.26,0,-0.38,-0.81,-1.28,-1.77,-2.26,-2.73,-3.19,-3.61,-4,-4.34,-4.61,-4.82,-4.95,-5,-4.94,-4.77,-4.51,-4.19,-3.82,-3.42,-2.99,-2.56,-2.12,-1.71,-1.31,-0.95,-0.63,-0.37,-0.17,-0.04,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0

+PARAM_EAR_R=0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/idle_04.mtn b/live2dw/assets/mtn/idle_04.mtn
new file mode 100644
index 0000000000..dadfdf120b
--- /dev/null
+++ b/live2dw/assets/mtn/idle_04.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0,0,0,0,0,-0.001,-0.002,0,-0.004,-0.005,-0.006,-0.007,-0.008,-0.009,-0.011,-0.012,-0.014,-0.016,-0.018,-0.02,-0.022,-0.024,-0.026,-0.028,-0.031,-0.033,-0.036,-0.039,-0.042,-0.044,-0.047,-0.05,-0.054,-0.057,-0.06,-0.063,-0.067,-0.07,-0.074,-0.078,-0.082,-0.085,-0.089,-0.093,-0.097,-0.102,-0.106,-0.11,-0.114,-0.119,-0.123,-0.128,-0.132,-0.137,-0.142,-0.146,-0.151,-0.156,-0.161,-0.166,-0.171,-0.176,-0.182,-0.187,-0.192,-0.197,-0.203,-0.208,-0.214,-0.219,-0.225,-0.231,-0.236,-0.242,-0.248,-0.253,-0.259,-0.265,-0.271,-0.277,-0.283,-0.289,-0.295,-0.301,-0.307,-0.313,-0.319,-0.326,-0.332,-0.338,-0.344,-0.351,-0.357,-0.363,-0.37,-0.376,-0.383,-0.389,-0.395,-0.402,-0.408,-0.415,-0.421,-0.428,-0.434,-0.441,-0.447,-0.454,-0.461,-0.467,-0.474,-0.48,-0.487,-0.493,-0.5,-0.507,-0.513,-0.52,-0.526,-0.533,-0.539,-0.546,-0.553,-0.559,-0.566,-0.572,-0.579,-0.585,-0.592,-0.598,-0.605,-0.611,-0.617,-0.624,-0.63,-0.637,-0.643,-0.649,-0.656,-0.662,-0.668,-0.674,-0.681,-0.687,-0.693,-0.699,-0.705,-0.711,-0.717,-0.723,-0.729,-0.735,-0.741,-0.747,-0.752,-0.758,-0.764,-0.769,-0.775,-0.781,-0.786,-0.792,-0.797,-0.803,-0.808,-0.813,-0.818,-0.824,-0.829,-0.834,-0.839,-0.844,-0.849,-0.854,-0.858,-0.863,-0.868,-0.872,-0.877,-0.881,-0.886,-0.89,-0.894,-0.898,-0.903,-0.907,-0.911,-0.915,-0.918,-0.922,-0.926,-0.93,-0.933,-0.937,-0.94,-0.943,-0.946,-0.95,-0.953,-0.956,-0.958,-0.961,-0.964,-0.967,-0.969,-0.972,-0.974,-0.976,-0.978,-0.98,-0.982,-0.984,-0.986,-0.988,-0.989,-0.991,-0.992,-0.993,-0.994,-0.995,-0.996,-0.997,-1,-0.999,-0.999,-1,-1,-1,-1,-1,-0.998,-0.996,-0.993,-0.989,-0.984,-0.979,-0.973,-0.966,-0.958,-0.95,-0.941,-0.931,-0.921,-0.91,-0.898,-0.887,-0.874,-0.861,-0.847,-0.833,-0.819,-0.804,-0.789,-0.773,-0.758,-0.741,-0.725,-0.708,-0.691,-0.674,-0.656,-0.639,-0.621,-0.603,-0.585,-0.566,-0.548,-0.53,-0.511,-0.493,-0.475,-0.456,-0.438,-0.42,-0.402,-0.384,-0.366,-0.349,-0.331,-0.314,-0.297,-0.281,-0.264,-0.248,-0.232,-0.217,-0.201,-0.187,-0.172,-0.159,-0.145,-0.132,-0.12,-0.108,-0.096,-0.085,-0.075,-0.065,-0.056,-0.047,-0.04,-0.032,-0.026,-0.02,-0.015,-0.01,-0.007,-0.004,-0.002,0,0

+PARAM_ANGLE_Y=0,0.04,0.15,0.34,0.58,0.89,1.25,1.66,2.1,2.59,3.11,3.66,4.22,4.81,5.4,6,6.6,7.19,7.78,8.34,8.89,9.41,9.9,10.34,10.75,11.11,11.42,11.66,11.85,11.96,12,11.986,11.95,11.88,11.79,11.67,11.53,11.37,11.19,11,10.78,10.54,10.29,10.02,9.73,9.44,9.13,8.81,8.47,8.14,7.79,7.43,7.07,6.71,6.34,5.96,5.58,5.21,4.83,4.45,4.08,3.7,3.34,2.98,2.62,2.27,1.94,1.61,1.28,0.97,0.68,0.39,0.13,-0.13,-0.37,-0.58,-0.78,-0.96,-1.12,-1.26,-1.38,-1.47,-1.53,-1.58,-1.589,-1.55,-1.45,-1.27,-1.04,-0.75,-0.41,-0.02,0.42,0.88,1.38,1.91,2.47,3.04,3.63,4.22,4.83,5.43,6.03,6.63,7.21,7.77,8.32,8.84,9.34,9.8,10.23,10.62,10.97,11.27,11.52,11.73,11.88,11.97,12,11.99,11.96,11.91,11.84,11.76,11.66,11.54,11.41,11.25,11.09,10.92,10.73,10.53,10.31,10.09,9.86,9.62,9.36,9.1,8.84,8.56,8.28,7.99,7.7,7.4,7.1,6.79,6.49,6.18,5.87,5.56,5.25,4.93,4.62,4.31,4,3.69,3.39,3.1,2.8,2.51,2.22,1.95,1.67,1.41,1.15,0.9,0.65,0.42,0.2,-0.01,-0.21,-0.4,-0.58,-0.75,-0.9,-1.04,-1.16,-1.27,-1.37,-1.45,-1.51,-1.55,-1.58,-1.589,-1.55,-1.43,-1.24,-0.98,-0.67,-0.29,0.13,0.59,1.09,1.64,2.2,2.8,3.41,4.04,4.68,5.32,5.98,6.63,7.28,7.9,8.53,9.14,9.72,10.29,10.81,11.31,11.77,12.19,12.57,12.9,13.18,13.41,13.57,13.68,13.71,12.45,9.14,4.35,-1.12,-6.79,-12.09,-16.61,-20.06,-22.23,-23,-21.87,-19.13,-15.79,-12.53,-9.91,-8.25,-7.68,-7.79,-8.08,-8.5,-9,-9.52,-10.02,-10.44,-10.73,-10.84,-10.83,-10.81,-10.77,-10.72,-10.66,-10.59,-10.5,-10.4,-10.29,-10.17,-10.03,-9.89,-9.74,-9.58,-9.41,-9.24,-9.05,-8.86,-8.66,-8.46,-8.24,-8.03,-7.8,-7.58,-7.35,-7.12,-6.88,-6.64,-6.4,-6.15,-5.91,-5.66,-5.42,-5.17,-4.93,-4.68,-4.44,-4.2,-3.96,-3.72,-3.49,-3.26,-3.03,-2.81,-2.59,-2.38,-2.18,-1.98,-1.79,-1.6,-1.43,-1.26,-1.1,-0.95,-0.8,-0.67,-0.55,-0.44,-0.34,-0.25,-0.18,-0.11,-0.07,-0.03,-0.01,0

+PARAM_ANGLE_Z=-8,-7.95,-7.79,-7.52,-7.17,-6.74,-6.23,-5.65,-5.02,-4.33,-3.6,-2.82,-2.02,-1.18,-0.35,0.5,1.35,2.18,3.02,3.82,4.6,5.33,6.02,6.65,7.23,7.74,8.17,8.52,8.79,8.95,9,8.98,8.92,8.82,8.69,8.52,8.31,8.08,7.81,7.52,7.2,6.85,6.48,6.08,5.66,5.23,4.77,4.3,3.81,3.32,2.8,2.28,1.75,1.21,0.66,0.11,-0.44,-1,-1.56,-2.11,-2.66,-3.21,-3.75,-4.28,-4.8,-5.32,-5.81,-6.3,-6.77,-7.23,-7.66,-8.08,-8.48,-8.85,-9.2,-9.52,-9.81,-10.08,-10.31,-10.52,-10.69,-10.82,-10.92,-10.98,-11,-10.95,-10.79,-10.54,-10.19,-9.76,-9.26,-8.69,-8.05,-7.37,-6.62,-5.85,-5.03,-4.19,-3.32,-2.45,-1.56,-0.66,0.21,1.1,1.95,2.78,3.59,4.35,5.08,5.76,6.4,6.97,7.48,7.92,8.3,8.6,8.82,8.95,9,8.985,8.94,8.87,8.77,8.64,8.5,8.32,8.12,7.9,7.66,7.41,7.13,6.83,6.52,6.19,5.85,5.49,5.12,4.73,4.34,3.94,3.52,3.1,2.67,2.23,1.79,1.34,0.89,0.43,-0.02,-0.48,-0.94,-1.4,-1.86,-2.31,-2.77,-3.22,-3.67,-4.1,-4.54,-4.97,-5.39,-5.8,-6.2,-6.59,-6.97,-7.34,-7.7,-8.04,-8.36,-8.68,-8.98,-9.26,-9.52,-9.76,-9.98,-10.19,-10.37,-10.54,-10.67,-10.79,-10.88,-10.95,-10.99,-11,-10.96,-10.83,-10.63,-10.36,-10.04,-9.64,-9.2,-8.72,-8.19,-7.63,-7.03,-6.42,-5.77,-5.11,-4.45,-3.77,-3.08,-2.4,-1.73,-1.07,-0.42,0.22,0.83,1.42,1.97,2.49,2.97,3.41,3.81,4.16,4.45,4.68,4.86,4.96,5,4.52,3.26,1.43,-0.65,-2.82,-4.84,-6.56,-7.88,-8.71,-9,-8.41,-6.98,-5.23,-3.53,-2.16,-1.29,-1,-1.21,-1.76,-2.56,-3.51,-4.49,-5.44,-6.24,-6.79,-7,-6.97,-6.89,-6.75,-6.56,-6.33,-6.07,-5.76,-5.43,-5.07,-4.68,-4.28,-3.86,-3.43,-2.99,-2.55,-2.12,-1.69,-1.26,-0.85,-0.45,-0.07,0.29,0.62,0.92,1.19,1.43,1.63,1.79,1.9,1.98,2,1.97,1.89,1.77,1.6,1.4,1.15,0.88,0.57,0.25,-0.11,-0.48,-0.87,-1.27,-1.68,-2.1,-2.52,-2.95,-3.37,-3.8,-4.21,-4.61,-5.01,-5.39,-5.76,-6.11,-6.43,-6.73,-7.01,-7.26,-7.47,-7.66,-7.8,-7.91,-7.98,-8

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=0,0.001,0.005,0.012,0.02,0.031,0.044,0.058,0.074,0.091,0.109,0.128,0.148,0.17,0.19,0.21,0.231,0.25,0.27,0.292,0.311,0.329,0.346,0.362,0.376,0.389,0.4,0.408,0.415,0.419,0.42,0.42,0.418,0.416,0.413,0.41,0.406,0.401,0.395,0.389,0.382,0.375,0.367,0.359,0.35,0.341,0.331,0.321,0.311,0.301,0.29,0.279,0.268,0.256,0.245,0.233,0.222,0.21,0.198,0.187,0.175,0.164,0.152,0.141,0.13,0.119,0.109,0.099,0.089,0.079,0.07,0.061,0.053,0.045,0.038,0.031,0.025,0.019,0.014,0.01,0.007,0.004,0.002,0,0,0.001,0.004,0.01,0.017,0.026,0.037,0.049,0.062,0.076,0.092,0.108,0.125,0.143,0.161,0.18,0.198,0.217,0.235,0.254,0.272,0.289,0.306,0.322,0.338,0.352,0.365,0.377,0.388,0.397,0.405,0.412,0.416,0.419,0.42,0.42,0.419,0.417,0.415,0.413,0.409,0.406,0.402,0.397,0.392,0.387,0.381,0.374,0.368,0.361,0.354,0.346,0.339,0.33,0.322,0.314,0.305,0.296,0.287,0.278,0.269,0.259,0.25,0.24,0.231,0.221,0.211,0.202,0.192,0.182,0.173,0.163,0.154,0.145,0.136,0.127,0.118,0.109,0.101,0.093,0.085,0.077,0.069,0.062,0.055,0.049,0.042,0.037,0.031,0.026,0.021,0.017,0.013,0.01,0.007,0.004,0.003,0.001,0,0,0,0.004,0.008,0.014,0.021,0.03,0.039,0.05,0.061,0.074,0.087,0.1,0.114,0.129,0.143,0.158,0.173,0.188,0.203,0.217,0.232,0.245,0.259,0.272,0.284,0.295,0.306,0.315,0.324,0.332,0.338,0.343,0.347,0.349,0.35,0.349,0.346,0.34,0.333,0.324,0.314,0.302,0.289,0.274,0.259,0.243,0.227,0.21,0.192,0.175,0.158,0.14,0.123,0.107,0.091,0.076,0.061,0.048,0.036,0.026,0.017,0.01,0.004,0.001,0,0.001,0.005,0.012,0.02,0.031,0.043,0.057,0.072,0.088,0.105,0.123,0.142,0.161,0.179,0.198,0.217,0.235,0.252,0.268,0.283,0.297,0.309,0.32,0.328,0.335,0.339,0.34,0.34,0.336,0.332,0.326,0.319,0.311,0.302,0.291,0.28,0.268,0.256,0.243,0.229,0.215,0.201,0.186,0.172,0.157,0.143,0.129,0.115,0.102,0.089,0.076,0.064,0.053,0.043,0.034,0.025,0.018,0.012,0.007,0.003,0.001,0

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.21,-0.75,-1.53,-2.42,-3.35,-4.22,-4.95,-5.52,-5.87,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-5.996,-5.984,-5.964,-5.94,-5.9,-5.86,-5.81,-5.76,-5.7,-5.63,-5.56,-5.48,-5.39,-5.3,-5.21,-5.11,-5.01,-4.9,-4.79,-4.68,-4.56,-4.45,-4.32,-4.2,-4.07,-3.94,-3.81,-3.68,-3.54,-3.41,-3.27,-3.14,-3,-2.86,-2.73,-2.59,-2.46,-2.32,-2.19,-2.06,-1.93,-1.8,-1.68,-1.55,-1.44,-1.32,-1.21,-1.1,-0.99,-0.89,-0.79,-0.7,-0.61,-0.52,-0.44,-0.37,-0.3,-0.24,-0.19,-0.14,-0.1,-0.06,-0.04,-0.016,-0.004,0

+PARAM_BODY_ANGLE_Y=0

+PARAM_BREATH=0,0.002,0.008,0.018,0.031,0.048,0.067,0.09,0.11,0.14,0.17,0.2,0.23,0.26,0.29,0.32,0.35,0.38,0.41,0.44,0.47,0.5,0.53,0.55,0.57,0.592,0.609,0.622,0.632,0.638,0.64,0.639,0.637,0.634,0.63,0.624,0.618,0.611,0.602,0.593,0.582,0.571,0.559,0.547,0.533,0.519,0.505,0.49,0.474,0.458,0.442,0.425,0.408,0.391,0.373,0.356,0.338,0.32,0.302,0.284,0.267,0.249,0.232,0.215,0.198,0.182,0.166,0.15,0.135,0.121,0.107,0.093,0.081,0.069,0.058,0.047,0.038,0.029,0.022,0.016,0.01,0.006,0.003,0.001,0,0.002,0.008,0.017,0.03,0.045,0.064,0.08,0.11,0.13,0.16,0.19,0.22,0.25,0.28,0.31,0.34,0.38,0.41,0.44,0.47,0.5,0.53,0.56,0.59,0.61,0.63,0.66,0.675,0.691,0.704,0.715,0.723,0.728,0.73,0.729,0.728,0.725,0.722,0.717,0.712,0.705,0.698,0.69,0.681,0.672,0.662,0.651,0.639,0.628,0.615,0.602,0.588,0.574,0.56,0.545,0.53,0.515,0.499,0.483,0.467,0.45,0.434,0.417,0.401,0.384,0.367,0.35,0.333,0.317,0.3,0.284,0.268,0.252,0.236,0.22,0.205,0.19,0.175,0.161,0.147,0.133,0.121,0.108,0.096,0.085,0.074,0.064,0.054,0.045,0.037,0.03,0.023,0.017,0.012,0.008,0.004,0.002,0,0,0.002,0.008,0.017,0.029,0.044,0.062,0.082,0.1,0.13,0.15,0.18,0.21,0.24,0.27,0.3,0.33,0.36,0.39,0.42,0.45,0.48,0.51,0.54,0.57,0.59,0.62,0.64,0.658,0.676,0.692,0.705,0.716,0.723,0.728,0.73,0.726,0.716,0.7,0.68,0.65,0.62,0.59,0.55,0.51,0.47,0.43,0.39,0.35,0.31,0.27,0.23,0.19,0.16,0.12,0.09,0.07,0.04,0.025,0.011,0.003,0,0.001,0.005,0.011,0.019,0.029,0.04,0.054,0.068,0.084,0.1,0.118,0.136,0.155,0.174,0.193,0.212,0.23,0.249,0.267,0.284,0.3,0.316,0.33,0.343,0.355,0.365,0.374,0.381,0.386,0.389,0.39,0.389,0.386,0.381,0.374,0.366,0.357,0.346,0.334,0.322,0.308,0.293,0.278,0.263,0.246,0.23,0.214,0.197,0.18,0.164,0.148,0.132,0.116,0.102,0.087,0.074,0.061,0.049,0.039,0.029,0.021,0.013,0.008,0.003,0.001,0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0

+PARAM_EAR_R=0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/shake_01.mtn b/live2dw/assets/mtn/shake_01.mtn
new file mode 100644
index 0000000000..04b89e6add
--- /dev/null
+++ b/live2dw/assets/mtn/shake_01.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=-9,-8.38,-6.44,-3.52,0,5.39,10.1,14.18,17.31,19.28,20,18.78,15.71,11.57,6.71,1.67,-3.31,-8.02,-11.98,-15.17,-17.24,-18,-16.91,-14.17,-10.45,-6.11,-1.6,2.85,7.07,10.61,13.47,15.32,16,15.17,13.01,9.88,6.31,2.6,-0.86,-3.82,-6.08,-7.5,-8,-7.48,-6.34,-4.93,-3.46,-2.12,-1.01,-0.28,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Y=14,17.87,24.22,28.58,30,30,30,30,30,30,30,29.77,29.14,28.21,26.98,25.54,23.89,22.01,20.02,17.82,15.5,13,9.93,7.41,5.38,3.68,2.32,1.24,0.38,-0.24,-0.67,-0.92,-1,-0.86,-0.5,0.02,0.62,1.23,1.81,2.3,2.68,2.92,3,2.8,2.38,1.85,1.3,0.8,0.38,0.1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0,0.6,2.21,4.69,7.8,11.26,15,18.74,22.2,25.31,27.79,29.4,30,28.23,23.8,17.79,10.76,3.47,-3.74,-10.55,-16.29,-20.91,-23.9,-25,-23.36,-19.25,-13.68,-7.16,-0.4,6.28,12.6,17.92,22.21,24.98,26,23.64,18.54,12.18,5.58,-0.45,-5.44,-8.76,-10,-9.8,-9.26,-8.46,-7.45,-6.33,-5.15,-3.98,-2.89,-1.93,-1.12,-0.51,-0.13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EYE_L_OPEN=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.013,0.05,0.1,0.17,0.26,0.35,0.44,0.54,0.63,0.72,0.8,0.87,0.92,0.96,0.99,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_EYE_R_OPEN=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.013,0.05,0.1,0.17,0.26,0.35,0.44,0.54,0.63,0.72,0.8,0.87,0.92,0.96,0.99,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_MOUTH_OPEN_Y=1

+PARAM_BODY_ANGLE_X=0,0.14,0.5,1.02,1.62,2.23,2.81,3.3,3.68,3.92,4,3.74,3.1,2.22,1.2,0.14,-0.91,-1.9,-2.73,-3.41,-3.84,-4,-3.78,-3.21,-2.45,-1.55,-0.62,0.29,1.16,1.89,2.48,2.86,3,2.86,2.5,1.98,1.38,0.77,0.19,-0.3,-0.68,-0.92,-1,-0.93,-0.79,-0.62,-0.43,-0.27,-0.13,-0.03,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Z=0,0.2,0.74,1.56,2.6,3.75,5,6.25,7.4,8.44,9.26,9.8,10,9.36,7.74,5.56,3,0.35,-2.27,-4.75,-6.83,-8.51,-9.6,-10,-9.52,-8.31,-6.67,-4.75,-2.76,-0.8,1.06,2.62,3.88,4.7,5,4.48,3.34,1.93,0.46,-0.88,-1.99,-2.72,-3,-2.86,-2.5,-1.98,-1.38,-0.77,-0.19,0.3,0.68,0.92,1,0.993,0.975,0.94,0.91,0.86,0.8,0.74,0.68,0.61,0.54,0.47,0.41,0.34,0.28,0.22,0.17,0.12,0.08,0.04,0.02,0.005,0

+PARAM_BODY_ANGLE_Y=0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,-0.24,-0.64,-0.91,-1,-0.87,-0.59,-0.23,0.13,0.47,0.75,0.93,1,0.93,0.75,0.49,0.19,-0.12,-0.41,-0.65,-0.84,-0.96,-1,-0.85,-0.5,-0.06,0.37,0.71,0.93,1,0.93,0.75,0.48,0.16,-0.16,-0.48,-0.75,-0.93,-1,-0.93,-0.75,-0.48,-0.16,0.16,0.48,0.75,0.93,1,0.95,0.83,0.65,0.44,0.21,0,-0.18,-0.3,-0.35,-0.27,-0.15,-0.04,0.05,0.08,0.068,0.04,0,-0.04,-0.07,-0.08,-0.074,-0.06,-0.042,-0.025,-0.012,-0.003,0

+PARAM_EAR_R=0,-0.23,-0.61,-0.87,-0.96,-0.83,-0.55,-0.21,0.15,0.48,0.75,0.93,1,0.93,0.75,0.49,0.19,-0.12,-0.41,-0.65,-0.84,-0.96,-1,-0.85,-0.5,-0.06,0.37,0.71,0.93,1,0.93,0.75,0.48,0.16,-0.16,-0.48,-0.75,-0.93,-1,-0.93,-0.75,-0.48,-0.16,0.16,0.48,0.75,0.93,1,0.95,0.83,0.66,0.45,0.23,0.02,-0.15,-0.27,-0.32,-0.25,-0.14,-0.03,0.04,0.07,0.059,0.03,-0.01,-0.04,-0.07,-0.08,-0.074,-0.06,-0.042,-0.025,-0.012,-0.003,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/shake_02.mtn b/live2dw/assets/mtn/shake_02.mtn
new file mode 100644
index 0000000000..92732b1c7a
--- /dev/null
+++ b/live2dw/assets/mtn/shake_02.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0

+PARAM_ANGLE_Y=30

+PARAM_ANGLE_Z=0,-7.88,-22.12,-30,-27.93,-22.52,-14.7,-5.77,3.51,12.16,19.55,25.19,28.75,30,26.99,19.65,10.7,1.97,-5.04,-9.49,-11,-8.31,-2.5,4.73,12.26,19.12,24.81,28.59,30,26.76,18.9,9.29,-0.08,-7.6,-12.38,-14,-12.49,-9.23,-5.17,-0.95,2.9,6.09,8.21,9,8.15,6.31,4.01,1.63,-0.55,-2.35,-3.55,-4,-3.86,-3.49,-2.96,-2.33,-1.67,-1.04,-0.51,-0.14,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EYE_L_OPEN=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.18,0.46,0.73,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_EYE_R_OPEN=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.18,0.46,0.73,0.92,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

+PARAM_MOUTH_OPEN_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.26,0.74,1,0.76,0.36,0.09,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=-10,-9.31,-7.51,-4.9,-1.92,1.17,4.05,6.52,8.4,9.58,10,8.53,4.95,0.59,-3.67,-7.09,-9.26,-10,-8.69,-5.86,-2.32,1.34,4.69,7.47,9.31,10,9.58,8.53,7.11,5.45,3.73,2.03,0.42,-0.94,-2.03,-2.74,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-2.9,-2.66,-2.33,-1.95,-1.55,-1.16,-0.79,-0.48,-0.22,-0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Y=10,9.1,6.91,4,1.09,-1.1,-2,-1.97,-1.66,-0.98,0,2.06,4.22,6.19,7.84,9.05,9.77,10,7.85,4.42,1.22,-1.1,-2,-1.92,-1.41,0,2.43,4.4,6.08,7.47,8.55,9.35,9.83,10,9.1,6.91,4,1.09,-1.1,-2,-0.95,0.95,2,1.52,0.72,0.18,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0.16,0.42,0.59,0.65,0.55,0.29,-0.01,-0.31,-0.55,-0.71,-0.76,-0.7,-0.54,-0.3,-0.02,0.26,0.54,0.78,0.94,1,0.93,0.75,0.49,0.19,-0.12,-0.41,-0.65,-0.84,-0.96,-1,-0.87,-0.59,-0.23,0.13,0.47,0.75,0.93,1,0.92,0.74,0.5,0.26,0.08,0,0.18,0.46,0.73,0.92,1,0.86,0.51,0.08,-0.34,-0.67,-0.89,-0.96,-0.76,-0.43,-0.13,0.09,0.17,0.157,0.13,0.08,0.04,0.01,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0.2,0.52,0.74,0.81,0.68,0.35,-0.04,-0.43,-0.74,-0.93,-1,-0.93,-0.75,-0.48,-0.16,0.16,0.48,0.75,0.93,1,0.93,0.75,0.49,0.19,-0.12,-0.41,-0.65,-0.84,-0.96,-1,-0.87,-0.59,-0.23,0.13,0.47,0.75,0.93,1,0.98,0.9,0.77,0.58,0.33,0,-0.44,-0.7,-0.87,-0.97,-1,-0.85,-0.5,-0.06,0.37,0.71,0.93,1,0.79,0.46,0.15,-0.07,-0.16,-0.148,-0.12,-0.08,-0.04,-0.01,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.24,0.64,0.91,1,0.74,0.26,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_R=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.24,0.64,0.91,1,0.74,0.26,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_01.mtn b/live2dw/assets/mtn/touch_01.mtn
new file mode 100644
index 0000000000..1baf260d98
--- /dev/null
+++ b/live2dw/assets/mtn/touch_01.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0

+PARAM_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,5.36,13.95,21.96,27.75,30,28.97,26.2,22.2,17.45,12.55,7.8,3.8,1.03,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,0.57,2.06,4.23,6.92,9.91,13.03,16.19,19.25,22.12,24.71,26.85,28.53,29.62,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30

+PARAM_EYE_L_OPEN=1

+PARAM_EYE_R_OPEN=1

+PARAM_MOUTH_OPEN_Y=1

+PARAM_BODY_ANGLE_X=0,0,0,0,0,0,0,0,0,0,0,0,0.04,0.14,0.28,0.46,0.66,0.87,1.08,1.28,1.47,1.65,1.79,1.9,1.97,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2

+PARAM_BODY_ANGLE_Z=0

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,1.07,2.79,4.39,5.55,6,5.79,5.24,4.44,3.49,2.51,1.56,0.76,0.21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0,0.07,0.25,0.47,0.68,0.85,0.96,1,0.85,0.48,0,-0.48,-0.85,-1,-0.77,-0.39,-0.04,0.21,0.31,0.22,0.07,-0.06,-0.16,-0.2,-0.185,-0.15,-0.1,-0.05,-0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,0,-0.07,-0.25,-0.47,-0.68,-0.85,-0.96,-1,-0.85,-0.48,0,0.48,0.85,1,0.76,0.38,0.02,-0.24,-0.34,-0.25,-0.11,0.03,0.12,0.16,0.148,0.12,0.08,0.04,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_02.mtn b/live2dw/assets/mtn/touch_02.mtn
new file mode 100644
index 0000000000..156fb69bc4
--- /dev/null
+++ b/live2dw/assets/mtn/touch_02.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0

+PARAM_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,4.47,11.62,18.3,23.12,25,23.36,19.82,15.41,10.82,6.63,3.17,0.86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,1.25,3.25,5.12,6.47,7,6.54,5.55,4.31,3.03,1.86,0.89,0.24,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=0

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,1.25,3.25,5.12,6.47,7,6.34,4.93,3.16,1.33,-0.35,-1.73,-2.66,-3,-2.7,-1.97,-1,-0.03,0.7,1,0.52,-0.28,-0.82,-1,-0.93,-0.75,-0.53,-0.32,-0.15,-0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,1.43,3.72,5.86,7.4,8,7.28,5.72,3.78,1.76,-0.08,-1.61,-2.62,-3,-2.7,-1.97,-1,-0.03,0.7,1,0.52,-0.28,-0.82,-1,-0.93,-0.75,-0.53,-0.32,-0.15,-0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0.07,0.21,0.38,0.57,0.73,0.87,0.97,1,0.85,0.5,0.06,-0.37,-0.71,-0.93,-1,-0.88,-0.58,-0.21,0.14,0.43,0.61,0.67,0.46,0.14,-0.17,-0.39,-0.48,-0.44,-0.36,-0.24,-0.12,-0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,-0.07,-0.21,-0.38,-0.57,-0.73,-0.87,-0.97,-1,-0.85,-0.5,-0.06,0.37,0.71,0.93,1,0.89,0.61,0.28,-0.05,-0.31,-0.47,-0.53,-0.35,-0.07,0.2,0.39,0.47,0.43,0.35,0.24,0.12,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_03.mtn b/live2dw/assets/mtn/touch_03.mtn
new file mode 100644
index 0000000000..4ab09858fb
--- /dev/null
+++ b/live2dw/assets/mtn/touch_03.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-1.5,2.15,7,11.85,15.5,17,10.03,-1.13,-11.55,-19.07,-22,-19.67,-14.02,-6.5,1.02,6.67,9,8.32,6.68,4.5,2.32,0.68,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Y=15,15,15,15,15,15,15,15,15,15,15,15,15,15.15,15.52,16,16.48,16.85,17,16.79,16.21,15.34,14.25,12.99,11.62,10.16,8.7,7.21,5.8,4.47,3.24,2.15,1.26,0.59,0.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=1

+PARAM_BODY_ANGLE_X=0,0,0,0,0,0,0,0,0,0,0,0,0,-0.23,-0.77,-1.5,-2.23,-2.77,-3,-2.11,-0.68,0.66,1.62,2,1.77,1.23,0.5,-0.23,-0.77,-1,-0.92,-0.74,-0.5,-0.26,-0.08,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,0,0,0.53,1.8,3.5,5.2,6.47,7,5.39,2.82,0.41,-1.32,-2,-1.77,-1.23,-0.5,0.23,0.77,1,0.92,0.74,0.5,0.26,0.08,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,-0.019,-0.07,-0.16,-0.27,-0.41,-0.56,-0.73,-0.9,-1.09,-1.28,-1.48,-1.67,-1.86,-2.04,-2.22,-2.38,-2.53,-2.66,-2.78,-2.87,-2.94,-2.98,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3,-3

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.24,0.64,0.91,1,0.85,0.5,0.03,-0.44,-0.79,-0.94,-0.68,-0.28,0.11,0.38,0.49,0.42,0.27,0.07,-0.12,-0.27,-0.37,-0.4,-0.37,-0.3,-0.2,-0.1,-0.03,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.24,-0.64,-0.91,-1,-0.85,-0.48,0,0.48,0.85,1,0.74,0.34,-0.05,-0.32,-0.43,-0.37,-0.24,-0.07,0.1,0.23,0.31,0.34,0.31,0.25,0.17,0.09,0.03,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_04.mtn b/live2dw/assets/mtn/touch_04.mtn
new file mode 100644
index 0000000000..1e3c293704
--- /dev/null
+++ b/live2dw/assets/mtn/touch_04.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0

+PARAM_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.83,-2.83,-5.5,-8.17,-10.17,-11,-10.28,-8.34,-5.54,-2.22,1.22,4.54,7.34,9.28,10,9.66,8.75,7.45,5.96,4.42,2.97,1.74,0.8,0.21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=0

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=0

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.45,-1.55,-3,-4.45,-5.55,-6,-5.66,-4.73,-3.4,-1.82,-0.18,1.4,2.73,3.66,4,3.86,3.5,2.98,2.38,1.77,1.19,0.7,0.32,0.08,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,0,0.07,0.25,0.47,0.68,0.85,0.96,1,0.85,0.5,0.06,-0.37,-0.71,-0.93,-1,-0.87,-0.55,-0.15,0.23,0.54,0.73,0.8,0.63,0.37,0.12,-0.06,-0.13,-0.11,-0.07,-0.03,-0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,0,-0.07,-0.25,-0.47,-0.68,-0.85,-0.96,-1,-0.85,-0.5,-0.06,0.37,0.71,0.93,1,0.87,0.54,0.15,-0.24,-0.55,-0.74,-0.81,-0.65,-0.38,-0.14,0.04,0.11,0.09,0.06,0.03,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_05.mtn b/live2dw/assets/mtn/touch_05.mtn
new file mode 100644
index 0000000000..4847895a2b
--- /dev/null
+++ b/live2dw/assets/mtn/touch_05.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0

+PARAM_ANGLE_Y=-11,-11,-11,-11,-11,-11,-11,-10.28,-8.34,-5.54,-2.22,1.22,4.54,7.34,9.28,10,9.66,8.73,7.4,5.82,4.18,2.6,1.27,0.34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_ANGLE_Z=0

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=0

+PARAM_BODY_ANGLE_X=0

+PARAM_BODY_ANGLE_Z=0

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0.14,0.51,1.04,1.67,2.33,2.96,3.49,3.86,4,3.86,3.49,2.96,2.33,1.67,1.04,0.51,0.14,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0

+PARAM_EAR_R=0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/mtn/touch_06.mtn b/live2dw/assets/mtn/touch_06.mtn
new file mode 100644
index 0000000000..001765f4d4
--- /dev/null
+++ b/live2dw/assets/mtn/touch_06.mtn
@@ -0,0 +1,24 @@
+# Live2D Animator Motion Data
+$fps=30
+PARAM_ANGLE_X=0,0,0,0,0,0,0,0,0,0,0,0.1,0.34,0.67,1.05,1.45,1.84,2.21,2.52,2.78,2.94,3,2.63,1.74,0.65,-0.42,-1.27,-1.82,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2

+PARAM_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,4.36,11.5,16.4,18,14.47,5.89,-4.59,-14.81,-23.02,-28.23,-30,-28.75,-25.71,-22,-18.38,-15.47,-13.63,-13,-14.25,-17.29,-21,-24.62,-27.53,-29.37,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30

+PARAM_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,-0.26,-0.95,-1.98,-3.29,-4.8,-6.51,-8.41,-10.38,-12.51,-14.7,-17,-19.56,-21.39,-22.59,-23.34,-23.76,-23.95,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24,-24

+PARAM_EYE_L_OPEN=0

+PARAM_EYE_R_OPEN=0

+PARAM_MOUTH_OPEN_Y=0

+PARAM_BODY_ANGLE_X=0,0,0,0,0,0,0,0,0,0,0,-0.03,-0.12,-0.26,-0.44,-0.67,-0.93,-1.23,-1.55,-1.88,-2.23,-2.59,-2.96,-3.32,-3.67,-4.02,-4.35,-4.66,-4.95,-5.21,-5.44,-5.63,-5.79,-5.9,-5.98,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6

+PARAM_BODY_ANGLE_Z=0,0,0,0,0,0,0,0,0,0,0,-0.06,-0.23,-0.44,-0.7,-0.96,-1.23,-1.47,-1.68,-1.85,-1.96,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2

+PARAM_BODY_ANGLE_Y=0,0,0,0,0,0,0,0,0,0,0,0.73,1.92,2.73,3,2.34,0.73,-1.24,-3.15,-4.69,-5.67,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6,-6

+PARAM_BREATH=0

+PARAM_BOWL_LID=50

+PARAM_YUGE_01=0

+PARAM_YUGE_02=0

+PARAM_EFFECT=0

+PARAM_EAR_L=0,0,0,0,0,0,0,0,0,0,0,-0.18,-0.46,-0.73,-0.92,-1,-0.64,-0.07,0.46,0.85,1,0.85,0.5,0.03,-0.45,-0.8,-0.95,-0.7,-0.3,0.07,0.34,0.45,0.34,0.16,0,-0.12,-0.17,-0.157,-0.13,-0.08,-0.04,-0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_EAR_R=0,0,0,0,0,0,0,0,0,0,0,0.18,0.46,0.73,0.92,1,0.64,0.07,-0.46,-0.85,-1,-0.85,-0.48,0,0.48,0.85,1,0.75,0.35,-0.02,-0.29,-0.39,-0.3,-0.15,-0.01,0.09,0.13,0.12,0.1,0.07,0.03,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0

+PARAM_HAND_L=0

+PARAM_HAND_R=0

+PARAM_SWING=0

+PARAM_BOWL_SWING=0

+PARAM_FACE_01=0

+PARAM_BASE_X=0
\ No newline at end of file
diff --git a/live2dw/assets/wanko.model.json b/live2dw/assets/wanko.model.json
new file mode 100644
index 0000000000..9be37d0100
--- /dev/null
+++ b/live2dw/assets/wanko.model.json
@@ -0,0 +1 @@
+{"type":"Live2D Model Setting","name":"wanko","model":"moc/wanko.moc","textures":["moc/wanko.1024/texture_00.png"],"hit_areas":[{"name":"body","id":"D_REF.PT_SOBA_01"}],"layout":{"center_x":0,"y":1.8,"width":2.9},"motions":{"idle":[{"file":"mtn/idle_01.mtn","fade_in":500,"fade_out":200},{"file":"mtn/idle_02.mtn","fade_in":500,"fade_out":200},{"file":"mtn/idle_03.mtn","fade_in":500,"fade_out":200},{"file":"mtn/idle_04.mtn","fade_in":500,"fade_out":200}],"shake":[{"file":"mtn/shake_01.mtn","fade_in":500,"fade_out":0},{"file":"mtn/shake_02.mtn","fade_in":500,"fade_out":0}],"tap_body":[{"file":"mtn/touch_01.mtn","fade_in":500,"fade_out":0},{"file":"mtn/touch_02.mtn","fade_in":500,"fade_out":0},{"file":"mtn/touch_03.mtn","fade_in":500,"fade_out":0}]}}
\ No newline at end of file
diff --git a/live2dw/lib/L2Dwidget.0.min.js b/live2dw/lib/L2Dwidget.0.min.js
new file mode 100644
index 0000000000..30411d3e22
--- /dev/null
+++ b/live2dw/lib/L2Dwidget.0.min.js
@@ -0,0 +1,3 @@
+/*! https://github.com/xiazeyu/live2d-widget.js built@2019-4-6 09:38:17 */
+webpackJsonpL2Dwidget([0],{76:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.captureFrame=e.theRealInit=void 0;var r,o=i(38),n=i(80),s=i(77),a=i(78),_=i(84),h=i(81),l=i(79),$=i(39),u=(r=$,r&&r.__esModule?r:{default:r}),p=i(37);var c=null,f=void 0,g=!1,d=null,y=null,m=null,T=null,P=!1,S=.5;function v(t,e,i){if(e.x<i.left+i.width&&e.y<i.top+i.height&&e.x>i.left&&e.y>i.top)return e;var r=t.x-e.x,o=t.y-e.y;function n(t,e){return 180*Math.acos((i={x:0,y:1},r=function(t,e){var i=Math.sqrt(t*t+e*e);return{x:t/i,y:e/i}}(t,e),i.x*r.x+i.y*r.y))/Math.PI;var i,r}var s=n(r,o);e.x<t.x&&(s=360-s);var a=360-n(i.left-t.x,-1*(i.top-t.y)),_=360-n(i.left-t.x,-1*(i.top+i.height-t.y)),h=n(i.left+i.width-t.x,-1*(i.top-t.y)),l=n(i.left+i.width-t.x,-1*(i.top+i.height-t.y)),$=o/r,u={};if(s<h){var p=i.top-t.y,c=p/$;u={y:t.y+p,x:t.x+c}}else if(s<l){var f=i.left+i.width-t.x,g=f*$;u={y:t.y+g,x:t.x+f}}else if(s<_){var d=i.top+i.height-t.y,y=d/$;u={y:t.y+d,x:t.x+y}}else if(s<a){var m=t.x-i.left,T=m*$;u={y:t.y-T,x:t.x-m}}else{var P=i.top-t.y,S=P/$;u={y:t.y+P,x:t.x+S}}return u}function L(t){P=!0;var e=n.currCanvas.getBoundingClientRect(),i=w(t.clientX-e.left),r=D(t.clientY-e.top),o=v({x:e.left+e.width/2,y:e.top+e.height*S},{x:t.clientX,y:t.clientY},e),s=A(o.x-e.left),a=I(o.y-e.top);l.cDefine.DEBUG_MOUSE_LOG&&console.log("modelTapEvent onMouseDown device( x:"+t.clientX+" y:"+t.clientY+" ) view( x:"+s+" y:"+a+")"),i,r,p.L2Dwidget.emit("tap",t),c.tapEvent(s,a)}function M(){P&&(P=!1),d.setPoint(0,0)}function E(t){if("mousedown"==t.type)L(t);else if("mousemove"==t.type)!function(t){P=!0;var e=n.currCanvas.getBoundingClientRect(),i=w(t.clientX-e.left),r=D(t.clientY-e.top),o=v({x:e.left+e.width/2,y:e.top+e.height*S},{x:t.clientX,y:t.clientY},e),s=A(o.x-e.left),a=I(o.y-e.top);l.cDefine.DEBUG_MOUSE_LOG&&console.log("modelTurnHead onMouseMove device( x:"+t.clientX+" y:"+t.clientY+" ) view( x:"+s+" y:"+a+")"),i,r,d.setPoint(s,a)}(t);else if("mouseup"==t.type){if("button"in t&&0!=t.button)return}else"mouseleave"==t.type&&M()}function x(t){var e=t.touches[0];"touchstart"==t.type?1==t.touches.length&&L(e):"touchmove"==t.type?function(t){var e=n.currCanvas.getBoundingClientRect(),i=w(t.clientX-e.left),r=D(t.clientY-e.top),o=v({x:e.left+e.width/2,y:e.top+e.height*S},{x:t.clientX,y:t.clientY},e),s=A(o.x-e.left),a=I(o.y-e.top);l.cDefine.DEBUG_MOUSE_LOG&&console.log("followPointer onMouseMove device( x:"+t.clientX+" y:"+t.clientY+" ) view( x:"+s+" y:"+a+")"),P&&(i,r,d.setPoint(s,a))}(e):"touchend"==t.type&&M()}function A(t){var e=T.transformX(t);return y.invertTransformX(e)}function I(t){var e=T.transformY(t);return y.invertTransformY(e)}function w(t){return T.transformX(t)}function D(t){return T.transformY(t)}e.theRealInit=function(){(0,n.createElement)(),n.currCanvas.addEventListener&&(window.addEventListener("click",E),window.addEventListener("mousedown",E),window.addEventListener("mousemove",E),window.addEventListener("mouseup",E),document.addEventListener("mouseleave",E),window.addEventListener("touchstart",x),window.addEventListener("touchend",x),window.addEventListener("touchmove",x)),c=new _.cManager(p.L2Dwidget),d=new a.L2DTargetPoint;var t=n.currCanvas.getBoundingClientRect(),e=t.height/t.width,i=l.cDefine.VIEW_LOGICAL_LEFT,r=l.cDefine.VIEW_LOGICAL_RIGHT,$=-e,P=e;(y=new a.L2DViewMatrix).setScreenRect(i,r,$,P),y.setMaxScreenRect(l.cDefine.VIEW_LOGICAL_MAX_LEFT,l.cDefine.VIEW_LOGICAL_MAX_RIGHT,l.cDefine.VIEW_LOGICAL_MAX_BOTTOM,l.cDefine.VIEW_LOGICAL_MAX_TOP),S=u.default.mobile()&&o.config.mobile.scale||o.config.model.scale,y.adjustScale(0,0,S);var S;(m=new a.L2DMatrix44).multScale(1,t.width/t.height),(T=new a.L2DMatrix44).multTranslate(-t.width/2,-t.height/2),T.multScale(2/t.width,-2/t.height),s.Live2D.setGL(n.currWebGL),n.currWebGL.clearColor(0,0,0,0),v=o.config.model.jsonPath,c.reloadFlg=!0,c.count++,c.changeModel(n.currWebGL,v);var v;g||(g=!0,function t(){!function(){h.MatrixStack.reset(),h.MatrixStack.loadIdentity(),d.update(),c.setDrag(d.getX(),d.getY()),n.currWebGL.clear(n.currWebGL.COLOR_BUFFER_BIT),h.MatrixStack.multMatrix(m.getArray()),h.MatrixStack.multMatrix(y.getArray()),h.MatrixStack.push();for(var t=0;t<c.numModels();t++){var e=c.getModel(t);if(null==e)return;e.initialized&&!e.updating&&(e.update(),e.draw(n.currWebGL))}h.MatrixStack.pop()}();var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;e(t,n.currCanvas),void 0!==f&&(f(n.currCanvas.toDataURL()),f=void 0)}())},e.captureFrame=function(t){f=t}},77:function(t,e,i){"use strict";(function(t){Object.defineProperty(e,"__esModule",{value:!0});var i=!0;function r(){i||(this._$MT=null,this._$5S=null,this._$NP=0,r._$42++,this._$5S=new U(this))}r._$0s=1,r._$4s=2,r._$42=0,r._$62=function(t,e){try{if(e instanceof ArrayBuffer&&(e=new DataView(e)),!(e instanceof DataView))throw new ht("_$SS#loadModel(b) / b _$x be DataView or ArrayBuffer");var i,o=new Pt(e),n=o._$ST(),s=o._$ST(),_=o._$ST();if(109!=n||111!=s||99!=_)throw new ht("_$gi _$C _$li , _$Q0 _$P0.");if(i=o._$ST(),o._$gr(i),i>G._$T7){t._$NP|=r._$4s;throw new ht("_$gi _$C _$li , _$n0 _$_ version _$li ( SDK : "+G._$T7+" < _$f0 : "+i+" )@_$SS#loadModel()\n")}var h=o._$nP();if(i>=G._$s7){var l=o._$9T(),$=o._$9T();if(-30584!=l||-30584!=$)throw t._$NP|=r._$0s,new ht("_$gi _$C _$li , _$0 _$6 _$Ui.")}t._$KS(h);var u=t.getModelContext();u.setDrawParam(t.getDrawParam()),u.init()}catch(t){a._$Rb(t)}},r.prototype._$KS=function(t){this._$MT=t},r.prototype.getModelImpl=function(){return null==this._$MT&&(this._$MT=new $,this._$MT._$zP()),this._$MT},r.prototype.getCanvasWidth=function(){return null==this._$MT?0:this._$MT.getCanvasWidth()},r.prototype.getCanvasHeight=function(){return null==this._$MT?0:this._$MT.getCanvasHeight()},r.prototype.getParamFloat=function(t){return"number"!=typeof t&&(t=this._$5S.getParamIndex(l.getID(t))),this._$5S.getParamFloat(t)},r.prototype.setParamFloat=function(t,e,i){"number"!=typeof t&&(t=this._$5S.getParamIndex(l.getID(t))),arguments.length<3&&(i=1),this._$5S.setParamFloat(t,this._$5S.getParamFloat(t)*(1-i)+e*i)},r.prototype.addToParamFloat=function(t,e,i){"number"!=typeof t&&(t=this._$5S.getParamIndex(l.getID(t))),arguments.length<3&&(i=1),this._$5S.setParamFloat(t,this._$5S.getParamFloat(t)+e*i)},r.prototype.multParamFloat=function(t,e,i){"number"!=typeof t&&(t=this._$5S.getParamIndex(l.getID(t))),arguments.length<3&&(i=1),this._$5S.setParamFloat(t,this._$5S.getParamFloat(t)*(1+(e-1)*i))},r.prototype.getParamIndex=function(t){return this._$5S.getParamIndex(l.getID(t))},r.prototype.loadParam=function(){this._$5S.loadParam()},r.prototype.saveParam=function(){this._$5S.saveParam()},r.prototype.init=function(){this._$5S.init()},r.prototype.update=function(){this._$5S.update()},r.prototype._$Rs=function(){return a._$li("_$60 _$PT _$Rs()"),-1},r.prototype._$Ds=function(t){a._$li("_$60 _$PT _$SS#_$Ds() \n")},r.prototype._$K2=function(){},r.prototype.draw=function(){},r.prototype.getModelContext=function(){return this._$5S},r.prototype._$s2=function(){return this._$NP},r.prototype._$P7=function(t,e,i,r){var o=-1,n=0;if(0!=i)if(1==t.length){u=t[0];var s=0!=this.getParamFloat(u),a=(p=e[0],this.getPartsOpacity(p)),_=i/r;s?(a+=_)>1&&(a=1):(a-=_)<0&&(a=0),this.setPartsOpacity(p,a)}else{for($=0;$<t.length;$++){u=t[$];if(c=0!=this.getParamFloat(u)){if(o>=0)break;o=$;p=e[$];n=this.getPartsOpacity(p),(n+=i/r)>1&&(n=1)}}o<0&&(console.log("No _$wi _$q0/ _$U default[%s]",t[0]),o=0,n=1,this.loadParam(),this.setParamFloat(t[o],n),this.saveParam());for($=0;$<t.length;$++){p=e[$];if(o==$)this.setPartsOpacity(p,n);else{var h,l=this.getPartsOpacity(p);(1-(h=n<.5?-.5*n/.5+1:.5*(1-n)/.5))*(1-n)>.15&&(h=1-.15/(1-n)),l>h&&(l=h),this.setPartsOpacity(p,l)}}}else for(var $=0;$<t.length;$++){var u=t[$],p=e[$],c=0!=this.getParamFloat(u);this.setPartsOpacity(p,c?1:0)}},r.prototype.setPartsOpacity=function(t,e){"number"!=typeof t&&(t=this._$5S.getPartsDataIndex(h.getID(t))),this._$5S.setPartsOpacity(t,e)},r.prototype.getPartsDataIndex=function(t){return t instanceof h||(t=h.getID(t)),this._$5S.getPartsDataIndex(t)},r.prototype.getPartsOpacity=function(t){return"number"!=typeof t&&(t=this._$5S.getPartsDataIndex(h.getID(t))),t<0?0:this._$5S.getPartsOpacity(t)},r.prototype.getDrawParam=function(){},r.prototype.getDrawDataIndex=function(t){return this._$5S.getDrawDataIndex(b.getID(t))},r.prototype.getDrawData=function(t){return this._$5S.getDrawData(t)},r.prototype.getTransformedPoints=function(t){var e=this._$5S._$C2(t);return e instanceof $t?e.getTransformedPoints():null},r.prototype.getIndexArray=function(t){if(t<0||t>=this._$5S._$aS.length)return null;var e=this._$5S._$aS[t];return null!=e&&e.getType()==W._$wb&&e instanceof lt?e.getIndexArray():null};function o(t){if(!i){this.clipContextList=new Array,this.glcontext=t.gl,this.dp_webgl=t,this.curFrameNo=0,this.firstError_clipInNotUpdate=!0,this.colorBuffer=0,this.isInitGLFBFunc=!1,this.tmpBoundsOnModel=new P,at.glContext.length>at.frameBuffers.length&&(this.curFrameNo=this.getMaskRenderTexture()),this.tmpModelToViewMatrix=new O,this.tmpMatrix2=new O,this.tmpMatrixForMask=new O,this.tmpMatrixForDraw=new O,this.CHANNEL_COLORS=new Array;var e=new E;(e=new E).r=0,e.g=0,e.b=0,e.a=1,this.CHANNEL_COLORS.push(e),(e=new E).r=1,e.g=0,e.b=0,e.a=0,this.CHANNEL_COLORS.push(e),(e=new E).r=0,e.g=1,e.b=0,e.a=0,this.CHANNEL_COLORS.push(e),(e=new E).r=0,e.g=0,e.b=1,e.a=0,this.CHANNEL_COLORS.push(e);for(var r=0;r<this.CHANNEL_COLORS.length;r++)this.dp_webgl.setChannelFlagAsColor(r,this.CHANNEL_COLORS[r])}}o.CHANNEL_COUNT=4,o.RENDER_TEXTURE_USE_MIPMAP=!1,o.NOT_USED_FRAME=-100,o.prototype._$L7=function(){if(this.tmpModelToViewMatrix&&(this.tmpModelToViewMatrix=null),this.tmpMatrix2&&(this.tmpMatrix2=null),this.tmpMatrixForMask&&(this.tmpMatrixForMask=null),this.tmpMatrixForDraw&&(this.tmpMatrixForDraw=null),this.tmpBoundsOnModel&&(this.tmpBoundsOnModel=null),this.CHANNEL_COLORS){for(var t=this.CHANNEL_COLORS.length-1;t>=0;--t)this.CHANNEL_COLORS.splice(t,1);this.CHANNEL_COLORS=[]}this.releaseShader()},o.prototype.releaseShader=function(){for(var t=at.frameBuffers.length,e=0;e<t;e++)this.gl.deleteFramebuffer(at.frameBuffers[e].framebuffer);at.frameBuffers=[],at.glContext=[]},o.prototype.init=function(t,e,i){for(var r=0;r<e.length;r++){var o=e[r].getClipIDList();if(null!=o){var s=this.findSameClip(o);null==s&&(s=new n(this,t,o),this.clipContextList.push(s));var a=e[r].getDrawDataID(),_=t.getDrawDataIndex(a);s.addClippedDrawData(a,_);i[r].clipBufPre_clipContext=s}}},o.prototype.getMaskRenderTexture=function(){var t=null;return t=this.dp_webgl.createFramebuffer(),at.frameBuffers[this.dp_webgl.glno]=t,this.dp_webgl.glno},o.prototype.setupClip=function(t,e){for(var i=0,r=0;r<this.clipContextList.length;r++){var o=this.clipContextList[r];this.calcClippedDrawTotalBounds(t,o),o.isUsing&&i++}if(i>0){var n=e.gl.getParameter(e.gl.FRAMEBUFFER_BINDING),s=new Array(4);s[0]=0,s[1]=0,s[2]=e.gl.canvas.width,s[3]=e.gl.canvas.height,e.gl.viewport(0,0,at.clippingMaskBufferSize,at.clippingMaskBufferSize),this.setupLayoutBounds(i),e.gl.bindFramebuffer(e.gl.FRAMEBUFFER,at.frameBuffers[this.curFrameNo].framebuffer),e.gl.clearColor(0,0,0,0),e.gl.clear(e.gl.COLOR_BUFFER_BIT);for(r=0;r<this.clipContextList.length;r++){var a=(o=this.clipContextList[r]).allClippedDrawRect,_=(o.layoutChannelNo,o.layoutBounds);this.tmpBoundsOnModel._$jL(a),this.tmpBoundsOnModel.expand(.05*a.width,.05*a.height);var h=_.width/this.tmpBoundsOnModel.width,l=_.height/this.tmpBoundsOnModel.height;this.tmpMatrix2.identity(),this.tmpMatrix2.translate(-1,-1,0),this.tmpMatrix2.scale(2,2,1),this.tmpMatrix2.translate(_.x,_.y,0),this.tmpMatrix2.scale(h,l,1),this.tmpMatrix2.translate(-this.tmpBoundsOnModel.x,-this.tmpBoundsOnModel.y,0),this.tmpMatrixForMask.setMatrix(this.tmpMatrix2.m),this.tmpMatrix2.identity(),this.tmpMatrix2.translate(_.x,_.y,0),this.tmpMatrix2.scale(h,l,1),this.tmpMatrix2.translate(-this.tmpBoundsOnModel.x,-this.tmpBoundsOnModel.y,0),this.tmpMatrixForDraw.setMatrix(this.tmpMatrix2.m);for(var $=this.tmpMatrixForMask.getArray(),u=0;u<16;u++)o.matrixForMask[u]=$[u];var p=this.tmpMatrixForDraw.getArray();for(u=0;u<16;u++)o.matrixForDraw[u]=p[u];for(var c=o.clippingMaskDrawIndexList.length,f=0;f<c;f++){var g=o.clippingMaskDrawIndexList[f],d=t.getDrawData(g),y=t._$C2(g);e.setClipBufPre_clipContextForMask(o),d.draw(e,t,y)}}e.gl.bindFramebuffer(e.gl.FRAMEBUFFER,n),e.setClipBufPre_clipContextForMask(null),e.gl.viewport(s[0],s[1],s[2],s[3])}},o.prototype.getColorBuffer=function(){return this.colorBuffer},o.prototype.findSameClip=function(t){for(var e=0;e<this.clipContextList.length;e++){var i=this.clipContextList[e],r=i.clipIDList.length;if(r==t.length){for(var o=0,n=0;n<r;n++)for(var s=i.clipIDList[n],a=0;a<r;a++)if(t[a]==s){o++;break}if(o==r)return i}}return null},o.prototype.calcClippedDrawTotalBounds=function(t,e){for(var i=t._$Ri.getModelImpl().getCanvasWidth(),r=t._$Ri.getModelImpl().getCanvasHeight(),o=i>r?i:r,n=o,s=o,a=0,_=0,h=e.clippedDrawContextList.length,l=0;l<h;l++){var $=e.clippedDrawContextList[l].drawDataIndex,u=t._$C2($);if(u._$yo()){for(var p=u.getTransformedPoints(),c=p.length,f=[],g=[],d=0,y=B._$i2;y<c;y+=B._$No)f[d]=p[y],g[d]=p[y+1],d++;var m=Math.min.apply(null,f),T=Math.min.apply(null,g),P=Math.max.apply(null,f),S=Math.max.apply(null,g);m<n&&(n=m),T<s&&(s=T),P>a&&(a=P),S>_&&(_=S)}}if(n==o)e.allClippedDrawRect.x=0,e.allClippedDrawRect.y=0,e.allClippedDrawRect.width=0,e.allClippedDrawRect.height=0,e.isUsing=!1;else{var v=a-n,L=_-s;e.allClippedDrawRect.x=n,e.allClippedDrawRect.y=s,e.allClippedDrawRect.width=v,e.allClippedDrawRect.height=L,e.isUsing=!0}},o.prototype.setupLayoutBounds=function(t){var e=t/o.CHANNEL_COUNT,i=t%o.CHANNEL_COUNT;e=~~e,i=~~i;for(var r=0,n=0;n<o.CHANNEL_COUNT;n++){var s=e+(n<i?1:0);if(0==s);else if(1==s){($=this.clipContextList[r++]).layoutChannelNo=n,$.layoutBounds.x=0,$.layoutBounds.y=0,$.layoutBounds.width=1,$.layoutBounds.height=1}else if(2==s)for(var _=0;_<s;_++){var h=0;l=~~(l=_%2);($=this.clipContextList[r++]).layoutChannelNo=n,$.layoutBounds.x=.5*l,$.layoutBounds.y=0,$.layoutBounds.width=.5,$.layoutBounds.height=1}else if(s<=4)for(_=0;_<s;_++){l=~~(l=_%2),h=~~(h=_/2);($=this.clipContextList[r++]).layoutChannelNo=n,$.layoutBounds.x=.5*l,$.layoutBounds.y=.5*h,$.layoutBounds.width=.5,$.layoutBounds.height=.5}else if(s<=9)for(_=0;_<s;_++){var l;l=~~(l=_%3),h=~~(h=_/3);var $;($=this.clipContextList[r++]).layoutChannelNo=n,$.layoutBounds.x=l/3,$.layoutBounds.y=h/3,$.layoutBounds.width=1/3,$.layoutBounds.height=1/3}else a._$li("_$6 _$0P mask count : %d",s)}};function n(t,e,i){this.clipIDList=new Array,this.clipIDList=i,this.clippingMaskDrawIndexList=new Array;for(var r=0;r<i.length;r++)this.clippingMaskDrawIndexList.push(e.getDrawDataIndex(i[r]));this.clippedDrawContextList=new Array,this.isUsing=!0,this.layoutChannelNo=0,this.layoutBounds=new P,this.allClippedDrawRect=new P,this.matrixForMask=new Float32Array(16),this.matrixForDraw=new Float32Array(16),this.owner=t}n.prototype.addClippedDrawData=function(t,e){var i=new function(t,e){this._$gP=t,this.drawDataIndex=e}(t,e);this.clippedDrawContextList.push(i)};function s(){i||(this._$dP=null,this._$eo=null,this._$V0=null,this._$dP=1e3,this._$eo=1e3,this._$V0=1,this._$a0())}s._$JT=function(t,e,i){var r=t/e,o=i/e,n=1-(1-o)*(1-o),s=1-(1-o)*(1-o),a=1/3*(1-o)*n+(o*(2/3)+1/3*(1-o))*(1-n),_=(o+2/3*(1-o))*s+(o*(1/3)+2/3*(1-o))*(1-s),h=1-3*_+3*a-0,l=3*_-6*a+0,$=3*a-0;if(r<=0)return 0;if(r>=1)return 1;var u=r*r;return h*(r*u)+l*u+$*r+0},s.prototype._$a0=function(){},s.prototype.setFadeIn=function(t){this._$dP=t},s.prototype.setFadeOut=function(t){this._$eo=t},s.prototype._$pT=function(t){this._$V0=t},s.prototype.getFadeOut=function(){return this._$eo},s.prototype._$4T=function(){return this._$eo},s.prototype._$mT=function(){return this._$V0},s.prototype.getDurationMSec=function(){return-1},s.prototype.getLoopDurationMSec=function(){return-1},s.prototype.updateParam=function(t,e){if(e._$AT&&!e._$9L){var i=A.getUserTimeMSec();if(e._$z2<0){e._$z2=i,e._$bs=i;var r=this.getDurationMSec();e._$Do<0&&(e._$Do=r<=0?-1:e._$z2+r)}var o=this._$V0;0<=(o=o*(0==this._$dP?1:_t._$r2((i-e._$bs)/this._$dP))*(0==this._$eo||e._$Do<0?1:_t._$r2((e._$Do-i)/this._$eo)))&&o<=1||console.log("### assert!! ### "),this.updateParamExe(t,i,o,e),e._$Do>0&&e._$Do<i&&(e._$9L=!0)}},s.prototype.updateParamExe=function(t,e,i,r){};function a(){}a._$8s=0,a._$fT=new Object,a.start=function(t){var e=a._$fT[t];null==e&&((e=new function(){this._$r=null,this._$0S=null})._$r=t,a._$fT[t]=e),e._$0S=A.getSystemTimeMSec()},a.dump=function(t){var e=a._$fT[t];if(null!=e){var i=A.getSystemTimeMSec()-e._$0S;return console.log(t+" : "+i+"ms"),i}return-1},a.end=function(t){var e=a._$fT[t];if(null!=e){return A.getSystemTimeMSec()-e._$0S}return-1},a._$li=function(t,e){console.log("_$li : "+t+"\n",e)},a._$Ji=function(t,e){console.log(t,e)},a._$dL=function(t,e){console.log(t,e),console.log("\n")},a._$KL=function(t,e){for(var i=0;i<e;i++)i%16==0&&i>0?console.log("\n"):i%8==0&&i>0&&console.log("  "),console.log("%02X ",255&t[i]);console.log("\n")},a._$nr=function(t,e,i){console.log("%s\n",t);for(var r=e.length,o=0;o<r;++o)console.log("%5d",e[o]),console.log("%s\n",i),console.log(",");console.log("\n")},a._$Rb=function(t){console.log("dump exception : "+t),console.log("stack :: "+t.stack)};function _(){i||(this.x=null,this.y=null,this.width=null,this.height=null)}_.prototype._$8P=function(){return.5*(this.x+this.x+this.width)},_.prototype._$6P=function(){return.5*(this.y+this.y+this.height)},_.prototype._$EL=function(){return this.x+this.width},_.prototype._$5T=function(){return this.y+this.height},_.prototype._$jL=function(t,e,i,r){this.x=t,this.y=e,this.width=i,this.height=r},_.prototype._$jL=function(t){this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height};function h(t){i||it.prototype.constructor.call(this,t)}h.prototype=new it,h._$tP=new Object,h._$27=function(){h._$tP.clear()},h.getID=function(t){var e=h._$tP[t];return null==e&&(e=new h(t),h._$tP[t]=e),e},h.prototype._$3s=function(){return new h};function l(t){i||it.prototype.constructor.call(this,t)}l.prototype=new it,l._$tP=new Object,l._$27=function(){l._$tP.clear()},l.getID=function(t){var e=l._$tP[t];return null==e&&(e=new l(t),l._$tP[t]=e),e},l.prototype._$3s=function(){return new l};function $(){i||(this._$vo=null,this._$F2=null,this._$ao=400,this._$1S=400,$._$42++)}$._$42=0,$.prototype._$zP=function(){null==this._$vo&&(this._$vo=new rt),null==this._$F2&&(this._$F2=new Array)},$.prototype.getCanvasWidth=function(){return this._$ao},$.prototype.getCanvasHeight=function(){return this._$1S},$.prototype._$F0=function(t){this._$vo=t._$nP(),this._$F2=t._$nP(),this._$ao=t._$6L(),this._$1S=t._$6L()},$.prototype._$6S=function(t){this._$F2.push(t)},$.prototype._$Xr=function(){return this._$F2},$.prototype._$E2=function(){return this._$vo};function u(){i||(this.p1=new p,this.p2=new p,this._$Fo=0,this._$Db=0,this._$L2=0,this._$M2=0,this._$ks=0,this._$9b=0,this._$iP=0,this._$iT=0,this._$lL=new Array,this._$qP=new Array,this.setup(.3,.5,.1))}u.prototype.setup=function(t,e,i){this._$ks=this._$Yb(),this.p2._$xT(),3==arguments.length&&(this._$Fo=t,this._$L2=e,this.p1._$p=i,this.p2._$p=i,this.p2.y=t,this.setup())},u.prototype.getPhysicsPoint1=function(){return this.p1},u.prototype.getPhysicsPoint2=function(){return this.p2},u.prototype._$qr=function(){return this._$Db},u.prototype._$pr=function(t){this._$Db=t},u.prototype._$5r=function(){return this._$M2},u.prototype._$Cs=function(){return this._$9b},u.prototype._$Yb=function(){return-180*Math.atan2(this.p1.x-this.p2.x,-(this.p1.y-this.p2.y))/Math.PI},u.prototype.addSrcParam=function(t,e,i,r){var o=new f(t,e,i,r);this._$lL.push(o)},u.prototype.addTargetParam=function(t,e,i,r){var o=new d(t,e,i,r);this._$qP.push(o)},u.prototype.update=function(t,e){if(0==this._$iP)return this._$iP=this._$iT=e,void(this._$Fo=Math.sqrt((this.p1.x-this.p2.x)*(this.p1.x-this.p2.x)+(this.p1.y-this.p2.y)*(this.p1.y-this.p2.y)));var i=(e-this._$iT)/1e3;if(0!=i){for(var r=this._$lL.length-1;r>=0;--r){this._$lL[r]._$oP(t,this)}this._$oo(t,i),this._$M2=this._$Yb(),this._$9b=(this._$M2-this._$ks)/i,this._$ks=this._$M2}for(r=this._$qP.length-1;r>=0;--r){this._$qP[r]._$YS(t,this)}this._$iT=e},u.prototype._$oo=function(t,e){e<.033&&(e=.033);var i=1/e;this.p1.vx=(this.p1.x-this.p1._$s0)*i,this.p1.vy=(this.p1.y-this.p1._$70)*i,this.p1.ax=(this.p1.vx-this.p1._$7L)*i,this.p1.ay=(this.p1.vy-this.p1._$HL)*i,this.p1.fx=this.p1.ax*this.p1._$p,this.p1.fy=this.p1.ay*this.p1._$p,this.p1._$xT();var r,o,n=-Math.atan2(this.p1.y-this.p2.y,this.p1.x-this.p2.x),s=Math.cos(n),a=Math.sin(n),_=9.8*this.p2._$p,h=this._$Db*vt._$bS,l=_*Math.cos(n-h);r=l*a,o=l*s;var $=-this.p1.fx*a*a,u=-this.p1.fy*a*s,p=-this.p2.vx*this._$L2,c=-this.p2.vy*this._$L2;this.p2.fx=r+$+p,this.p2.fy=o+u+c,this.p2.ax=this.p2.fx/this.p2._$p,this.p2.ay=this.p2.fy/this.p2._$p,this.p2.vx+=this.p2.ax*e,this.p2.vy+=this.p2.ay*e,this.p2.x+=this.p2.vx*e,this.p2.y+=this.p2.vy*e;var f=Math.sqrt((this.p1.x-this.p2.x)*(this.p1.x-this.p2.x)+(this.p1.y-this.p2.y)*(this.p1.y-this.p2.y));this.p2.x=this.p1.x+this._$Fo*(this.p2.x-this.p1.x)/f,this.p2.y=this.p1.y+this._$Fo*(this.p2.y-this.p1.y)/f,this.p2.vx=(this.p2.x-this.p2._$s0)*i,this.p2.vy=(this.p2.y-this.p2._$70)*i,this.p2._$xT()};function p(){this._$p=1,this.x=0,this.y=0,this.vx=0,this.vy=0,this.ax=0,this.ay=0,this.fx=0,this.fy=0,this._$s0=0,this._$70=0,this._$7L=0,this._$HL=0}p.prototype._$xT=function(){this._$s0=this.x,this._$70=this.y,this._$7L=this.vx,this._$HL=this.vy};function c(t,e,i){this._$wL=null,this.scale=null,this._$V0=null,this._$wL=t,this.scale=e,this._$V0=i}c.prototype._$oP=function(t,e){};function f(t,e,i,r){c.prototype.constructor.call(this,e,i,r),this._$tL=null,this._$tL=t}f.prototype=new c,f.prototype._$oP=function(t,e){var i=this.scale*t.getParamFloat(this._$wL),r=e.getPhysicsPoint1();switch(this._$tL){default:case u.Src.SRC_TO_X:r.x=r.x+(i-r.x)*this._$V0;break;case u.Src.SRC_TO_Y:r.y=r.y+(i-r.y)*this._$V0;break;case u.Src.SRC_TO_G_ANGLE:var o=e._$qr();o+=(i-o)*this._$V0,e._$pr(o)}};function g(t,e,i){this._$wL=null,this.scale=null,this._$V0=null,this._$wL=t,this.scale=e,this._$V0=i}g.prototype._$YS=function(t,e){};function d(t,e,i,r){g.prototype.constructor.call(this,e,i,r),this._$YP=null,this._$YP=t}d.prototype=new g,d.prototype._$YS=function(t,e){switch(this._$YP){default:case u.Target.TARGET_FROM_ANGLE:t.setParamFloat(this._$wL,this.scale*e._$5r(),this._$V0);break;case u.Target.TARGET_FROM_ANGLE_V:t.setParamFloat(this._$wL,this.scale*e._$Cs(),this._$V0)}},u.Src=function(){},u.Src.SRC_TO_X="SRC_TO_X",u.Src.SRC_TO_Y="SRC_TO_Y",u.Src.SRC_TO_G_ANGLE="SRC_TO_G_ANGLE",u.Target=function(){},u.Target.TARGET_FROM_ANGLE="TARGET_FROM_ANGLE",u.Target.TARGET_FROM_ANGLE_V="TARGET_FROM_ANGLE_V";function y(){i||(this._$fL=0,this._$gL=0,this._$B0=1,this._$z0=1,this._$qT=0,this.reflectX=!1,this.reflectY=!1)}y.prototype.init=function(t){this._$fL=t._$fL,this._$gL=t._$gL,this._$B0=t._$B0,this._$z0=t._$z0,this._$qT=t._$qT,this.reflectX=t.reflectX,this.reflectY=t.reflectY},y.prototype._$F0=function(t){this._$fL=t._$_T(),this._$gL=t._$_T(),this._$B0=t._$_T(),this._$z0=t._$_T(),this._$qT=t._$_T(),t.getFormatVersion()>=G.LIVE2D_FORMAT_VERSION_V2_10_SDK2&&(this.reflectX=t._$po(),this.reflectY=t._$po())},y.prototype._$e=function(){};var T=function(){};T._$ni=function(t,e,i,r,o,n,s,a,_){var h=s*n-a*o;if(0==h)return null;var l,$=((t-i)*n-(e-r)*o)/h;return l=0!=o?(t-i-$*s)/o:(e-r-$*a)/n,isNaN(l)&&(l=(t-i-$*s)/o,isNaN(l)&&(l=(e-r-$*a)/n),isNaN(l)&&(console.log("a is NaN @UtVector#_$ni() "),console.log("v1x : "+o),console.log("v1x != 0 ? "+(0!=o)))),null==_?new Array(l,$):(_[0]=l,_[1]=$,_)};function P(){i||(this.x=null,this.y=null,this.width=null,this.height=null)}P.prototype._$8P=function(){return this.x+.5*this.width},P.prototype._$6P=function(){return this.y+.5*this.height},P.prototype._$EL=function(){return this.x+this.width},P.prototype._$5T=function(){return this.y+this.height},P.prototype._$jL=function(t,e,i,r){this.x=t,this.y=e,this.width=i,this.height=r},P.prototype._$jL=function(t){this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height},P.prototype.contains=function(t,e){return this.x<=this.x&&this.y<=this.y&&this.x<=this.x+this.width&&this.y<=this.y+this.height},P.prototype.expand=function(t,e){this.x-=t,this.y-=e,this.width+=2*t,this.height+=2*e};function S(){}S._$Z2=function(t,e,i,r){var o=e._$Q2(t,i),n=t._$vs(),s=t._$Tr();if(e._$zr(n,s,o),o<=0)return r[n[0]];if(1==o){return(a=r[n[0]])+((_=r[n[1]])-a)*($=s[0])|0}if(2==o){var a=r[n[0]],_=r[n[1]],h=r[n[2]],l=r[n[3]],$=s[0],u=s[1];return(S=a+(_-a)*$|0)+((h+(l-h)*$|0)-S)*u|0}if(3==o){var p=r[n[0]],c=r[n[1]],f=r[n[2]],g=r[n[3]],d=r[n[4]],y=r[n[5]],m=r[n[6]],T=r[n[7]],P=($=s[0],u=s[1],s[2]);return(S=(a=p+(c-p)*$|0)+((_=f+(g-f)*$|0)-a)*u|0)+(((h=d+(y-d)*$|0)+((l=m+(T-m)*$|0)-h)*u|0)-S)*P|0}if(4==o){var S,v=r[n[0]],L=r[n[1]],M=r[n[2]],E=r[n[3]],x=r[n[4]],A=r[n[5]],I=r[n[6]],w=r[n[7]],D=r[n[8]],O=r[n[9]],b=r[n[10]],R=r[n[11]],F=r[n[12]],C=r[n[13]],N=r[n[14]],B=r[n[15]],G=($=s[0],u=s[1],P=s[2],s[3]);return(S=(a=(p=v+(L-v)*$|0)+((c=M+(E-M)*$|0)-p)*u|0)+((_=(f=x+(A-x)*$|0)+((g=I+(w-I)*$|0)-f)*u|0)-a)*P|0)+(((h=(d=D+(O-D)*$|0)+((y=b+(R-b)*$|0)-d)*u|0)+((l=(m=F+(C-F)*$|0)+((T=N+(B-N)*$|0)-m)*u|0)-h)*P|0)-S)*G|0}for(var U=1<<o,Y=new Float32Array(U),k=0;k<U;k++){for(var V=k,X=1,z=0;z<o;z++)X*=V%2==0?1-s[z]:s[z],V/=2;Y[k]=X}for(var H=new Float32Array(U),W=0;W<U;W++)H[W]=r[n[W]];var j=0;for(W=0;W<U;W++)j+=Y[W]*H[W];return j+.5|0},S._$br=function(t,e,i,r){var o=e._$Q2(t,i),n=t._$vs(),s=t._$Tr();if(e._$zr(n,s,o),o<=0)return r[n[0]];if(1==o){return(a=r[n[0]])+((_=r[n[1]])-a)*($=s[0])}if(2==o){var a=r[n[0]],_=r[n[1]],h=r[n[2]],l=r[n[3]],$=s[0];return(1-(T=s[1]))*(a+(_-a)*$)+T*(h+(l-h)*$)}if(3==o){var u=r[n[0]],p=r[n[1]],c=r[n[2]],f=r[n[3]],g=r[n[4]],d=r[n[5]],y=r[n[6]],m=r[n[7]],T=($=s[0],s[1]);return(1-(N=s[2]))*((1-T)*(u+(p-u)*$)+T*(c+(f-c)*$))+N*((1-T)*(g+(d-g)*$)+T*(y+(m-y)*$))}if(4==o){var P=r[n[0]],S=r[n[1]],v=r[n[2]],L=r[n[3]],M=r[n[4]],E=r[n[5]],x=r[n[6]],A=r[n[7]],I=r[n[8]],w=r[n[9]],D=r[n[10]],O=r[n[11]],b=r[n[12]],R=r[n[13]],F=r[n[14]],C=r[n[15]],N=($=s[0],T=s[1],s[2]),B=s[3];return(1-B)*((1-N)*((1-T)*(P+(S-P)*$)+T*(v+(L-v)*$))+N*((1-T)*(M+(E-M)*$)+T*(x+(A-x)*$)))+B*((1-N)*((1-T)*(I+(w-I)*$)+T*(D+(O-D)*$))+N*((1-T)*(b+(R-b)*$)+T*(F+(C-F)*$)))}for(var G=1<<o,U=new Float32Array(G),Y=0;Y<G;Y++){for(var k=Y,V=1,X=0;X<o;X++)V*=k%2==0?1-s[X]:s[X],k/=2;U[Y]=V}for(var z=new Float32Array(G),H=0;H<G;H++)z[H]=r[n[H]];var W=0;for(H=0;H<G;H++)W+=U[H]*z[H];return W},S._$Vr=function(t,e,i,r,o,n,s,a){var _=e._$Q2(t,i),h=t._$vs(),l=t._$Tr();e._$zr(h,l,_);var $=2*r,u=s;if(_<=0){var p=o[h[0]];if(2==a&&0==s)A._$jT(p,0,n,0,$);else for(var c=0;c<$;)n[u]=p[c++],n[u+1]=p[c++],u+=a}else if(1==_){p=o[h[0]];var f=o[h[1]],g=1-(m=l[0]);for(c=0;c<$;)n[u]=p[c]*g+f[c]*m,++c,n[u+1]=p[c]*g+f[c]*m,++c,u+=a}else if(2==_){p=o[h[0]],f=o[h[1]];var d=o[h[2]],y=o[h[3]],m=l[0],T=(k=1-(b=l[1]))*(g=1-m),P=k*m,S=b*g,v=b*m;for(c=0;c<$;)n[u]=T*p[c]+P*f[c]+S*d[c]+v*y[c],++c,n[u+1]=T*p[c]+P*f[c]+S*d[c]+v*y[c],++c,u+=a}else if(3==_){var L=o[h[0]],M=o[h[1]],E=o[h[2]],x=o[h[3]],I=o[h[4]],w=o[h[5]],D=o[h[6]],O=o[h[7]],b=(m=l[0],l[1]),R=(V=1-(st=l[2]))*(k=1-b)*(g=1-m),F=V*k*m,C=V*b*g,N=V*b*m,B=st*k*g,G=st*k*m,U=st*b*g,Y=st*b*m;for(c=0;c<$;)n[u]=R*L[c]+F*M[c]+C*E[c]+N*x[c]+B*I[c]+G*w[c]+U*D[c]+Y*O[c],++c,n[u+1]=R*L[c]+F*M[c]+C*E[c]+N*x[c]+B*I[c]+G*w[c]+U*D[c]+Y*O[c],++c,u+=a}else if(4==_){var k,V,X=o[h[0]],z=o[h[1]],H=o[h[2]],W=o[h[3]],j=o[h[4]],q=o[h[5]],J=o[h[6]],Q=o[h[7]],Z=o[h[8]],K=o[h[9]],tt=o[h[10]],et=o[h[11]],it=o[h[12]],rt=o[h[13]],ot=o[h[14]],nt=o[h[15]],st=(m=l[0],b=l[1],l[2]),at=l[3],_t=1-at,ht=_t*(V=1-st)*(k=1-b)*(g=1-m),lt=_t*V*k*m,$t=_t*V*b*g,ut=_t*V*b*m,pt=_t*st*k*g,ct=_t*st*k*m,ft=_t*st*b*g,gt=_t*st*b*m,dt=at*V*k*g,yt=at*V*k*m,mt=at*V*b*g,Tt=at*V*b*m,Pt=at*st*k*g,St=at*st*k*m,vt=at*st*b*g,Lt=at*st*b*m;for(c=0;c<$;)n[u]=ht*X[c]+lt*z[c]+$t*H[c]+ut*W[c]+pt*j[c]+ct*q[c]+ft*J[c]+gt*Q[c]+dt*Z[c]+yt*K[c]+mt*tt[c]+Tt*et[c]+Pt*it[c]+St*rt[c]+vt*ot[c]+Lt*nt[c],++c,n[u+1]=ht*X[c]+lt*z[c]+$t*H[c]+ut*W[c]+pt*j[c]+ct*q[c]+ft*J[c]+gt*Q[c]+dt*Z[c]+yt*K[c]+mt*tt[c]+Tt*et[c]+Pt*it[c]+St*rt[c]+vt*ot[c]+Lt*nt[c],++c,u+=a}else{for(var Mt=1<<_,Et=new Float32Array(Mt),xt=0;xt<Mt;xt++){for(var At=xt,It=1,wt=0;wt<_;wt++)It*=At%2==0?1-l[wt]:l[wt],At/=2;Et[xt]=It}for(var Dt=new Float32Array(Mt),Ot=0;Ot<Mt;Ot++)Dt[Ot]=o[h[Ot]];for(c=0;c<$;){var bt=0,Rt=0,Ft=c+1;for(Ot=0;Ot<Mt;Ot++)bt+=Et[Ot]*Dt[Ot][c],Rt+=Et[Ot]*Dt[Ot][Ft];c+=2,n[u]=bt,n[u+1]=Rt,u+=a}}};function v(){i||(this.x=null,this.y=null)}v.prototype._$HT=function(t,e){this.x=t,this.y=e},v.prototype._$HT=function(t){this.x=t.x,this.y=t.y};function L(){i||(this._$gP=null,this._$dr=null,this._$GS=null,this._$qb=null,this._$Lb=null,this._$mS=null,this.clipID=null,this.clipIDList=new Array)}L._$ur=-2,L._$ES=500,L._$wb=2,L._$8S=3,L._$52=L._$ES,L._$R2=L._$ES,L._$or=function(){return L._$52},L._$Pr=function(){return L._$R2},L.prototype.convertClipIDForV2_11=function(t){var e=[];return null==t?null:0==t.length?null:/,/.test(t)?e=t.id.split(","):(e.push(t.id),e)},L.prototype._$F0=function(t){this._$gP=t._$nP(),this._$dr=t._$nP(),this._$GS=t._$nP(),this._$qb=t._$6L(),this._$Lb=t._$cS(),this._$mS=t._$Tb(),t.getFormatVersion()>=G._$T7?(this.clipID=t._$nP(),this.clipIDList=this.convertClipIDForV2_11(this.clipID)):this.clipIDList=[],this._$MS(this._$Lb)},L.prototype.getClipIDList=function(){return this.clipIDList},L.prototype.init=function(t){},L.prototype._$Nr=function(t,e){if(e._$IS[0]=!1,e._$Us=S._$Z2(t,this._$GS,e._$IS,this._$Lb),at._$Zs);else if(e._$IS[0])return;e._$7s=S._$br(t,this._$GS,e._$IS,this._$mS)},L.prototype._$2b=function(t,e){},L.prototype.getDrawDataID=function(){return this._$gP},L.prototype._$j2=function(t){this._$gP=t},L.prototype.getOpacity=function(t,e){return e._$7s},L.prototype._$zS=function(t,e){return e._$Us},L.prototype._$MS=function(t){for(var e=t.length-1;e>=0;--e){var i=t[e];i<L._$52?L._$52=i:i>L._$R2&&(L._$R2=i)}},L.prototype.getTargetBaseDataID=function(){return this._$dr},L.prototype._$gs=function(t){this._$dr=t},L.prototype._$32=function(){return null!=this._$dr&&this._$dr!=dt._$2o()},L.prototype.preDraw=function(t,e,i){},L.prototype.draw=function(t,e,i){},L.prototype.getType=function(){},L.prototype._$B2=function(t,e,i){};function M(){i||(this._$Eb=M._$ps,this._$lT=1,this._$C0=1,this._$tT=1,this._$WL=1,this.culling=!1,this.matrix4x4=new Float32Array(16),this.premultipliedAlpha=!1,this.anisotropy=0,this.clippingProcess=M.CLIPPING_PROCESS_NONE,this.clipBufPre_clipContextMask=null,this.clipBufPre_clipContextDraw=null,this.CHANNEL_COLORS=new Array)}M._$ps=32,M.CLIPPING_PROCESS_NONE=0,M.CLIPPING_PROCESS_OVERWRITE_ALPHA=1,M.CLIPPING_PROCESS_MULTIPLY_ALPHA=2,M.CLIPPING_PROCESS_DRAW=3,M.CLIPPING_PROCESS_CLEAR_ALPHA=4,M.prototype.setChannelFlagAsColor=function(t,e){this.CHANNEL_COLORS[t]=e},M.prototype.getChannelFlagAsColor=function(t){return this.CHANNEL_COLORS[t]},M.prototype._$ZT=function(){},M.prototype._$Uo=function(t,e,i,r,o,n,s){},M.prototype._$Rs=function(){return-1},M.prototype._$Ds=function(t){},M.prototype.setBaseColor=function(t,e,i,r){t<0?t=0:t>1&&(t=1),e<0?e=0:e>1&&(e=1),i<0?i=0:i>1&&(i=1),r<0?r=0:r>1&&(r=1),this._$lT=t,this._$C0=e,this._$tT=i,this._$WL=r},M.prototype._$WP=function(t){this.culling=t},M.prototype.setMatrix=function(t){for(var e=0;e<16;e++)this.matrix4x4[e]=t[e]},M.prototype._$IT=function(){return this.matrix4x4},M.prototype.setPremultipliedAlpha=function(t){this.premultipliedAlpha=t},M.prototype.isPremultipliedAlpha=function(){return this.premultipliedAlpha},M.prototype.setAnisotropy=function(t){this.anisotropy=t},M.prototype.getAnisotropy=function(){return this.anisotropy},M.prototype.getClippingProcess=function(){return this.clippingProcess},M.prototype.setClippingProcess=function(t){this.clippingProcess=t},M.prototype.setClipBufPre_clipContextForMask=function(t){this.clipBufPre_clipContextMask=t},M.prototype.getClipBufPre_clipContextMask=function(){return this.clipBufPre_clipContextMask},M.prototype.setClipBufPre_clipContextForDraw=function(t){this.clipBufPre_clipContextDraw=t},M.prototype.getClipBufPre_clipContextDraw=function(){return this.clipBufPre_clipContextDraw};function E(){i||(this.a=1,this.r=1,this.g=1,this.b=1,this.scale=1,this._$ho=1,this.blendMode=at.L2D_COLOR_BLEND_MODE_MULT)}function x(){i||(this._$kP=null,this._$dr=null,this._$Ai=!0,this._$mS=null)}x._$ur=-2,x._$c2=1,x._$_b=2,x.prototype._$F0=function(t){this._$kP=t._$nP(),this._$dr=t._$nP()},x.prototype.readV2_opacity=function(t){t.getFormatVersion()>=G.LIVE2D_FORMAT_VERSION_V2_10_SDK2&&(this._$mS=t._$Tb())},x.prototype.init=function(t){},x.prototype._$Nr=function(t,e){},x.prototype.interpolateOpacity=function(t,e,i,r){null==this._$mS?i.setInterpolatedOpacity(1):i.setInterpolatedOpacity(S._$br(t,e,r,this._$mS))},x.prototype._$2b=function(t,e){},x.prototype._$nb=function(t,e,i,r,o,n,s){},x.prototype.getType=function(){},x.prototype._$gs=function(t){this._$dr=t},x.prototype._$a2=function(t){this._$kP=t},x.prototype.getTargetBaseDataID=function(){return this._$dr},x.prototype.getBaseDataID=function(){return this._$kP},x.prototype._$32=function(){return null!=this._$dr&&this._$dr!=dt._$2o()};function A(){}A._$W2=0,A._$CS=A._$W2,A._$Mo=function(){return!0},A._$XP=function(t){try{for(var e=getTimeMSec();getTimeMSec()-e<t;);}catch(t){t._$Rb()}},A.getUserTimeMSec=function(){return A._$CS==A._$W2?A.getSystemTimeMSec():A._$CS},A.setUserTimeMSec=function(t){A._$CS=t},A.updateUserTimeMSec=function(){return A._$CS=A.getSystemTimeMSec()},A.getTimeMSec=function(){return(new Date).getTime()},A.getSystemTimeMSec=function(){return(new Date).getTime()},A._$Q=function(t){},A._$jT=function(t,e,i,r,o){for(var n=0;n<o;n++)i[r+n]=t[e+n]};function I(){i||(this._$VP=0,this._$wL=null,this._$GP=null,this._$8o=I._$ds,this._$2r=-1,this._$O2=0,this._$ri=0)}I._$ds=-2,I.prototype._$F0=function(t){this._$wL=t._$nP(),this._$VP=t._$6L(),this._$GP=t._$nP()},I.prototype.getParamIndex=function(t){return this._$2r!=t&&(this._$8o=I._$ds),this._$8o},I.prototype._$Pb=function(t,e){this._$8o=t,this._$2r=e},I.prototype.getParamID=function(){return this._$wL},I.prototype._$yP=function(t){this._$wL=t},I.prototype._$N2=function(){return this._$VP},I.prototype._$d2=function(){return this._$GP},I.prototype._$t2=function(t,e){this._$VP=t,this._$GP=e},I.prototype._$Lr=function(){return this._$O2},I.prototype._$wr=function(t){this._$O2=t},I.prototype._$SL=function(){return this._$ri},I.prototype._$AL=function(t){this._$ri=t};function w(){}w.startsWith=function(t,e,i){var r=e+i.length;if(r>=t.length)return!1;for(var o=e;o<r;o++)if(w.getChar(t,o)!=i.charAt(o-e))return!1;return!0},w.getChar=function(t,e){return String.fromCharCode(t.getUint8(e))},w.createString=function(t,e,i){for(var r=new ArrayBuffer(2*i),o=new Uint16Array(r),n=0;n<i;n++)o[n]=t.getUint8(e+n);return String.fromCharCode.apply(null,o)},w._$LS=function(t,e,i,r){t instanceof ArrayBuffer&&(t=new DataView(t));var o=i,n=!1,s=!1,a=0,_=w.getChar(t,o);"-"==_&&(n=!0,o++);for(var h=!1;o<e;o++){switch(_=w.getChar(t,o)){case"0":a*=10;break;case"1":a=10*a+1;break;case"2":a=10*a+2;break;case"3":a=10*a+3;break;case"4":a=10*a+4;break;case"5":a=10*a+5;break;case"6":a=10*a+6;break;case"7":a=10*a+7;break;case"8":a=10*a+8;break;case"9":a=10*a+9;break;case".":s=!0,o++,h=!0;break;default:h=!0}if(h)break}if(s)for(var l=.1,$=!1;o<e;o++){switch(_=w.getChar(t,o)){case"0":break;case"1":a+=1*l;break;case"2":a+=2*l;break;case"3":a+=3*l;break;case"4":a+=4*l;break;case"5":a+=5*l;break;case"6":a+=6*l;break;case"7":a+=7*l;break;case"8":a+=8*l;break;case"9":a+=9*l;break;default:$=!0}if(l*=.1,$)break}return n&&(a=-a),r[0]=o,a};function D(){i||(this._$Ob=null)}D.prototype._$zP=function(){this._$Ob=new Array},D.prototype._$F0=function(t){this._$Ob=t._$nP()},D.prototype._$Ur=function(t){if(t._$WS())return!0;for(var e=t._$v2(),i=this._$Ob.length-1;i>=0;--i){var r=this._$Ob[i].getParamIndex(e);if(r==I._$ds&&(r=t.getParamIndex(this._$Ob[i].getParamID())),t._$Xb(r))return!0}return!1},D.prototype._$Q2=function(t,e){for(var i,r,o=this._$Ob.length,n=t._$v2(),s=0,a=0;a<o;a++){var _=this._$Ob[a];if((i=_.getParamIndex(n))==I._$ds&&(i=t.getParamIndex(_.getParamID()),_._$Pb(i,n)),i<0)throw new Exception("err 23242 : "+_.getParamID());var h=i<0?0:t.getParamFloat(i);r=_._$N2();var l,$,u=_._$d2(),p=-1,c=0;if(r<1);else if(1==r)(l=u[0])-B._$J<h&&h<l+B._$J?(p=0,c=0):(p=0,e[0]=!0);else if(h<(l=u[0])-B._$J)p=0,e[0]=!0;else if(h<l+B._$J)p=0;else{for(var f=!1,g=1;g<r;++g){if(h<($=u[g])+B._$J){$-B._$J<h?p=g:(p=g-1,c=(h-l)/($-l),s++),f=!0;break}l=$}f||(p=r-1,c=0,e[0]=!0)}_._$wr(p),_._$AL(c)}return s},D.prototype._$zr=function(t,e,i){var r=1<<i;r+1>B._$Qb&&console.log("err 23245\n");for(var o=this._$Ob.length,n=1,s=1,a=0,_=0;_<r;++_)t[_]=0;for(var h=0;h<o;++h){var l=this._$Ob[h];if(0==l._$SL()){if(($=l._$Lr()*n)<0&&at._$3T)throw new Exception("err 23246");for(_=0;_<r;++_)t[_]+=$}else{var $=n*l._$Lr(),u=n*(l._$Lr()+1);for(_=0;_<r;++_)t[_]+=(_/s|0)%2==0?$:u;e[a++]=l._$SL(),s*=2}n*=l._$N2()}t[r]=65535,e[a]=-1},D.prototype._$h2=function(t,e,i){for(var r=new Float32Array(e),o=0;o<e;++o)r[o]=i[o];var n=new I;n._$yP(t),n._$t2(e,r),this._$Ob.push(n)},D.prototype._$J2=function(t){for(var e=t,i=this._$Ob.length,r=0;r<i;++r){var o=this._$Ob[r],n=o._$N2(),s=e%o._$N2(),a=o._$d2()[s];console.log("%s[%d]=%7.2f / ",o.getParamID(),s,a),e/=n}console.log("\n")},D.prototype.getParamCount=function(){return this._$Ob.length},D.prototype._$zs=function(){return this._$Ob};function O(){this.m=new Float32Array(16),this.identity()}O.prototype.identity=function(){for(var t=0;t<16;t++)this.m[t]=t%5==0?1:0},O.prototype.getArray=function(){return this.m},O.prototype.getCopyMatrix=function(){return new Float32Array(this.m)},O.prototype.setMatrix=function(t){if(null!=t&&16==t.length)for(var e=0;e<16;e++)this.m[e]=t[e]},O.prototype.mult=function(t,e,i){return null==e?null:(this==e?this.mult_safe(this.m,t.m,e.m,i):this.mult_fast(this.m,t.m,e.m,i),e)},O.prototype.mult_safe=function(t,e,i,r){if(t==i){var o=new Array(16);this.mult_fast(t,e,o,r);for(var n=15;n>=0;--n)i[n]=o[n]}else this.mult_fast(t,e,i,r)},O.prototype.mult_fast=function(t,e,i,r){r?(i[0]=t[0]*e[0]+t[4]*e[1]+t[8]*e[2],i[4]=t[0]*e[4]+t[4]*e[5]+t[8]*e[6],i[8]=t[0]*e[8]+t[4]*e[9]+t[8]*e[10],i[12]=t[0]*e[12]+t[4]*e[13]+t[8]*e[14]+t[12],i[1]=t[1]*e[0]+t[5]*e[1]+t[9]*e[2],i[5]=t[1]*e[4]+t[5]*e[5]+t[9]*e[6],i[9]=t[1]*e[8]+t[5]*e[9]+t[9]*e[10],i[13]=t[1]*e[12]+t[5]*e[13]+t[9]*e[14]+t[13],i[2]=t[2]*e[0]+t[6]*e[1]+t[10]*e[2],i[6]=t[2]*e[4]+t[6]*e[5]+t[10]*e[6],i[10]=t[2]*e[8]+t[6]*e[9]+t[10]*e[10],i[14]=t[2]*e[12]+t[6]*e[13]+t[10]*e[14]+t[14],i[3]=i[7]=i[11]=0,i[15]=1):(i[0]=t[0]*e[0]+t[4]*e[1]+t[8]*e[2]+t[12]*e[3],i[4]=t[0]*e[4]+t[4]*e[5]+t[8]*e[6]+t[12]*e[7],i[8]=t[0]*e[8]+t[4]*e[9]+t[8]*e[10]+t[12]*e[11],i[12]=t[0]*e[12]+t[4]*e[13]+t[8]*e[14]+t[12]*e[15],i[1]=t[1]*e[0]+t[5]*e[1]+t[9]*e[2]+t[13]*e[3],i[5]=t[1]*e[4]+t[5]*e[5]+t[9]*e[6]+t[13]*e[7],i[9]=t[1]*e[8]+t[5]*e[9]+t[9]*e[10]+t[13]*e[11],i[13]=t[1]*e[12]+t[5]*e[13]+t[9]*e[14]+t[13]*e[15],i[2]=t[2]*e[0]+t[6]*e[1]+t[10]*e[2]+t[14]*e[3],i[6]=t[2]*e[4]+t[6]*e[5]+t[10]*e[6]+t[14]*e[7],i[10]=t[2]*e[8]+t[6]*e[9]+t[10]*e[10]+t[14]*e[11],i[14]=t[2]*e[12]+t[6]*e[13]+t[10]*e[14]+t[14]*e[15],i[3]=t[3]*e[0]+t[7]*e[1]+t[11]*e[2]+t[15]*e[3],i[7]=t[3]*e[4]+t[7]*e[5]+t[11]*e[6]+t[15]*e[7],i[11]=t[3]*e[8]+t[7]*e[9]+t[11]*e[10]+t[15]*e[11],i[15]=t[3]*e[12]+t[7]*e[13]+t[11]*e[14]+t[15]*e[15])},O.prototype.translate=function(t,e,i){this.m[12]=this.m[0]*t+this.m[4]*e+this.m[8]*i+this.m[12],this.m[13]=this.m[1]*t+this.m[5]*e+this.m[9]*i+this.m[13],this.m[14]=this.m[2]*t+this.m[6]*e+this.m[10]*i+this.m[14],this.m[15]=this.m[3]*t+this.m[7]*e+this.m[11]*i+this.m[15]},O.prototype.scale=function(t,e,i){this.m[0]*=t,this.m[4]*=e,this.m[8]*=i,this.m[1]*=t,this.m[5]*=e,this.m[9]*=i,this.m[2]*=t,this.m[6]*=e,this.m[10]*=i,this.m[3]*=t,this.m[7]*=e,this.m[11]*=i},O.prototype.rotateX=function(t){var e=vt.fcos(t),i=vt._$9(t),r=this.m[4];this.m[4]=r*e+this.m[8]*i,this.m[8]=r*-i+this.m[8]*e,r=this.m[5],this.m[5]=r*e+this.m[9]*i,this.m[9]=r*-i+this.m[9]*e,r=this.m[6],this.m[6]=r*e+this.m[10]*i,this.m[10]=r*-i+this.m[10]*e,r=this.m[7],this.m[7]=r*e+this.m[11]*i,this.m[11]=r*-i+this.m[11]*e},O.prototype.rotateY=function(t){var e=vt.fcos(t),i=vt._$9(t),r=this.m[0];this.m[0]=r*e+this.m[8]*-i,this.m[8]=r*i+this.m[8]*e,r=this.m[1],this.m[1]=r*e+this.m[9]*-i,this.m[9]=r*i+this.m[9]*e,r=m[2],this.m[2]=r*e+this.m[10]*-i,this.m[10]=r*i+this.m[10]*e,r=m[3],this.m[3]=r*e+this.m[11]*-i,this.m[11]=r*i+this.m[11]*e},O.prototype.rotateZ=function(t){var e=vt.fcos(t),i=vt._$9(t),r=this.m[0];this.m[0]=r*e+this.m[4]*i,this.m[4]=r*-i+this.m[4]*e,r=this.m[1],this.m[1]=r*e+this.m[5]*i,this.m[5]=r*-i+this.m[5]*e,r=this.m[2],this.m[2]=r*e+this.m[6]*i,this.m[6]=r*-i+this.m[6]*e,r=this.m[3],this.m[3]=r*e+this.m[7]*i,this.m[7]=r*-i+this.m[7]*e};function b(t){i||it.prototype.constructor.call(this,t)}b.prototype=new it,b._$tP=new Object,b._$27=function(){b._$tP.clear()},b.getID=function(t){var e=b._$tP[t];return null==e&&(e=new b(t),b._$tP[t]=e),e},b.prototype._$3s=function(){return new b};function R(){i||(this._$7=1,this._$f=0,this._$H=0,this._$g=1,this._$k=0,this._$w=0,this._$hi=STATE_IDENTITY,this._$Z=_$pS)}R._$kS=-1,R._$pS=0,R._$hb=1,R.STATE_IDENTITY=0,R._$gb=1,R._$fo=2,R._$go=4,R.prototype.transform=function(t,e,i){var r,o,n,s,a,_,h=0,l=0;switch(this._$hi){default:return;case R._$go|R._$fo|R._$gb:for(r=this._$7,o=this._$H,n=this._$k,s=this._$f,a=this._$g,_=this._$w;--i>=0;){var $=t[h++],u=t[h++];e[l++]=r*$+o*u+n,e[l++]=s*$+a*u+_}return;case R._$go|R._$fo:for(r=this._$7,o=this._$H,s=this._$f,a=this._$g;--i>=0;){$=t[h++],u=t[h++];e[l++]=r*$+o*u,e[l++]=s*$+a*u}return;case R._$go|R._$gb:for(o=this._$H,n=this._$k,s=this._$f,_=this._$w;--i>=0;){$=t[h++];e[l++]=o*t[h++]+n,e[l++]=s*$+_}return;case R._$go:for(o=this._$H,s=this._$f;--i>=0;){$=t[h++];e[l++]=o*t[h++],e[l++]=s*$}return;case R._$fo|R._$gb:for(r=this._$7,n=this._$k,a=this._$g,_=this._$w;--i>=0;)e[l++]=r*t[h++]+n,e[l++]=a*t[h++]+_;return;case R._$fo:for(r=this._$7,a=this._$g;--i>=0;)e[l++]=r*t[h++],e[l++]=a*t[h++];return;case R._$gb:for(n=this._$k,_=this._$w;--i>=0;)e[l++]=t[h++]+n,e[l++]=t[h++]+_;return;case R.STATE_IDENTITY:return void(t==e&&h==l||A._$jT(t,h,e,l,2*i))}},R.prototype.update=function(){0==this._$H&&0==this._$f?1==this._$7&&1==this._$g?0==this._$k&&0==this._$w?(this._$hi=R.STATE_IDENTITY,this._$Z=R._$pS):(this._$hi=R._$gb,this._$Z=R._$hb):0==this._$k&&0==this._$w?(this._$hi=R._$fo,this._$Z=R._$kS):(this._$hi=R._$fo|R._$gb,this._$Z=R._$kS):0==this._$7&&0==this._$g?0==this._$k&&0==this._$w?(this._$hi=R._$go,this._$Z=R._$kS):(this._$hi=R._$go|R._$gb,this._$Z=R._$kS):0==this._$k&&0==this._$w?(this._$hi=R._$go|R._$fo,this._$Z=R._$kS):(this._$hi=R._$go|R._$fo|R._$gb,this._$Z=R._$kS)},R.prototype._$RT=function(t){this._$IT(t);var e=t[0],i=t[2],r=t[1],o=t[3],n=Math.sqrt(e*e+r*r),s=e*o-i*r;0==n?at._$so&&console.log("affine._$RT() / rt==0"):(t[0]=n,t[1]=s/n,t[2]=(r*o+e*i)/s,t[3]=Math.atan2(r,e))},R.prototype._$ho=function(t,e,i,r){var o=new Float32Array(6),n=new Float32Array(6);t._$RT(o),e._$RT(n);var s=new Float32Array(6);s[0]=o[0]+(n[0]-o[0])*i,s[1]=o[1]+(n[1]-o[1])*i,s[2]=o[2]+(n[2]-o[2])*i,s[3]=o[3]+(n[3]-o[3])*i,s[4]=o[4]+(n[4]-o[4])*i,s[5]=o[5]+(n[5]-o[5])*i,r._$CT(s)},R.prototype._$CT=function(t){var e=Math.cos(t[3]),i=Math.sin(t[3]);this._$7=t[0]*e,this._$f=t[0]*i,this._$H=t[1]*(t[2]*e-i),this._$g=t[1]*(t[2]*i+e),this._$k=t[4],this._$w=t[5],this.update()},R.prototype._$IT=function(t){t[0]=this._$7,t[1]=this._$f,t[2]=this._$H,t[3]=this._$g,t[4]=this._$k,t[5]=this._$w};function F(){i||(s.prototype.constructor.call(this),this.motions=new Array,this._$7r=null,this._$7r=F._$Co++,this._$D0=30,this._$yT=0,this._$E=!0,this.loopFadeIn=!0,this._$AS=-1,_$a0())}F.prototype=new s,F._$cs="VISIBLE:",F._$ar="LAYOUT:",F._$Co=0,F._$D2=[],F._$1T=1,F.loadMotion=function(t){var e=new F,i=[0],r=t.length;e._$yT=0;for(var o=0;o<r;++o){var n=255&t[o];if("\n"!=n&&"\r"!=n)if("#"!=n)if("$"!=n){if("a"<=n&&n<="z"||"A"<=n&&n<="Z"||"_"==n){for(h=o,l=-1;o<r&&("\r"!=(n=255&t[o])&&"\n"!=n);++o)if("="==n){l=o;break}if(l>=0){var s=new N;w.startsWith(t,h,F._$cs)?(s._$RP=N._$hs,s._$4P=new String(t,h,l-h)):w.startsWith(t,h,F._$ar)?(s._$4P=new String(t,h+7,l-h-7),w.startsWith(t,h+7,"ANCHOR_X")?s._$RP=N._$xs:w.startsWith(t,h+7,"ANCHOR_Y")?s._$RP=N._$us:w.startsWith(t,h+7,"SCALE_X")?s._$RP=N._$qs:w.startsWith(t,h+7,"SCALE_Y")?s._$RP=N._$Ys:w.startsWith(t,h+7,"X")?s._$RP=N._$ws:w.startsWith(t,h+7,"Y")&&(s._$RP=N._$Ns)):(s._$RP=N._$Fr,s._$4P=new String(t,h,l-h)),e.motions.push(s);var a=0;for(F._$D2.clear(),o=l+1;o<r&&("\r"!=(n=255&t[o])&&"\n"!=n);++o)if(","!=n&&" "!=n&&"\t"!=n){u=w._$LS(t,r,o,i);if(i[0]>0){F._$D2.push(u),a++;var _=i[0];if(_<o){console.log("_$n0 _$hi . @Live2DMotion loadMotion()\n");break}o=_}}s._$I0=F._$D2._$BL(),a>e._$yT&&(e._$yT=a)}}}else{for(var h=o,l=-1;o<r&&("\r"!=(n=255&t[o])&&"\n"!=n);++o)if("="==n){l=o;break}var $=!1;if(l>=0)for(l==h+4&&"f"==t[h+1]&&"p"==t[h+2]&&"s"==t[h+3]&&($=!0),o=l+1;o<r&&("\r"!=(n=255&t[o])&&"\n"!=n);++o)if(","!=n&&" "!=n&&"\t"!=n){var u=w._$LS(t,r,o,i);i[0]>0&&$&&5<u&&u<121&&(e._$D0=u),o=i[0]}for(;o<r&&("\n"!=t[o]&&"\r"!=t[o]);++o);}else for(;o<r&&("\n"!=t[o]&&"\r"!=t[o]);++o);}return e._$AS=1e3*e._$yT/e._$D0|0,e},F.prototype.getDurationMSec=function(){return this._$AS},F.prototype.dump=function(){for(var t=0;t<this.motions.length;t++){var e=this.motions[t];console.log("_$wL[%s] [%d]. ",e._$4P,e._$I0.length);for(var i=0;i<e._$I0.length&&i<10;i++)console.log("%5.2f ,",e._$I0[i]);console.log("\n")}},F.prototype.updateParamExe=function(t,e,i,r){for(var o=(e-r._$z2)*this._$D0/1e3,n=0|o,s=o-n,a=0;a<this.motions.length;a++){var _=this.motions[a],h=_._$I0.length,l=_._$4P;if(_._$RP==N._$hs){var $=_._$I0[n>=h?h-1:n];t.setParamFloat(l,$)}else if(N._$ws<=_._$RP&&_._$RP<=N._$Ys);else{var u=t.getParamFloat(l),p=_._$I0[n>=h?h-1:n],c=u+(p+(_._$I0[n+1>=h?h-1:n+1]-p)*s-u)*i;t.setParamFloat(l,c)}}n>=this._$yT&&(this._$E?(r._$z2=e,this.loopFadeIn&&(r._$bs=e)):r._$9L=!0)},F.prototype._$r0=function(){return this._$E},F.prototype._$aL=function(t){this._$E=t},F.prototype.isLoopFadeIn=function(){return this.loopFadeIn},F.prototype.setLoopFadeIn=function(t){this.loopFadeIn=t};function C(){this._$P=new Float32Array(100),this.size=0}C.prototype.clear=function(){this.size=0},C.prototype.add=function(t){if(this._$P.length<=this.size){var e=new Float32Array(2*this.size);A._$jT(this._$P,0,e,0,this.size),this._$P=e}this._$P[this.size++]=t},C.prototype._$BL=function(){var t=new Float32Array(this.size);return A._$jT(this._$P,0,t,0,this.size),t};function N(){this._$4P=null,this._$I0=null,this._$RP=null}N._$Fr=0,N._$hs=1,N._$ws=100,N._$Ns=101,N._$xs=102,N._$us=103,N._$qs=104,N._$Ys=105;function B(){}B._$Ms=1,B._$Qs=2,B._$i2=0,B._$No=2,B._$do=B._$Ms,B._$Ls=!0,B._$1r=5,B._$Qb=65,B._$J=1e-4,B._$FT=.001,B._$Ss=3;function G(){}G._$o7=6,G._$S7=7,G._$s7=8,G._$77=9,G.LIVE2D_FORMAT_VERSION_V2_10_SDK2=10,G.LIVE2D_FORMAT_VERSION_V2_11_SDK2_1=11,G._$T7=G.LIVE2D_FORMAT_VERSION_V2_11_SDK2_1,G._$Is=-2004318072,G._$h0=0,G._$4L=23,G._$7P=33,G._$uT=function(t){console.log("_$bo :: _$6 _$mo _$E0 : %d\n",t)},G._$9o=function(t){if(t<40)return G._$uT(t),null;if(t<50)return G._$uT(t),null;if(t<60)return G._$uT(t),null;if(t<100)switch(t){case 65:return new Z;case 66:return new D;case 67:return new I;case 68:return new z;case 69:return new y;case 70:return new lt;default:return G._$uT(t),null}else if(t<150)switch(t){case 131:return new nt;case 133:return new tt;case 136:return new $;case 137:return new rt;case 142:return new j}return G._$uT(t),null};function U(t){i||(this._$QT=!0,this._$co=-1,this._$qo=0,this._$pb=new Array(U._$is),this._$_2=new Float32Array(U._$is),this._$vr=new Float32Array(U._$is),this._$Rr=new Float32Array(U._$is),this._$Or=new Float32Array(U._$is),this._$fs=new Float32Array(U._$is),this._$Js=new Array(U._$is),this._$3S=new Array,this._$aS=new Array,this._$Bo=null,this._$F2=new Array,this._$db=new Array,this._$8b=new Array,this._$Hr=new Array,this._$Ws=null,this._$Vs=null,this._$Er=null,this._$Es=new Int16Array(B._$Qb),this._$ZP=new Float32Array(2*B._$1r),this._$Ri=t,this._$b0=U._$HP++,this.clipManager=null,this.dp_webgl=null)}U._$HP=0,U._$_0=!0,U._$V2=-1,U._$W0=-1,U._$jr=!1,U._$ZS=!0,U._$tr=-1e6,U._$lr=1e6,U._$is=32,U._$e=!1,U.prototype.getDrawDataIndex=function(t){for(var e=this._$aS.length-1;e>=0;--e)if(null!=this._$aS[e]&&this._$aS[e].getDrawDataID()==t)return e;return-1},U.prototype.getDrawData=function(t){if(t instanceof b){if(null==this._$Bo){this._$Bo=new Object;for(var e=this._$aS.length,i=0;i<e;i++){var r=this._$aS[i],o=r.getDrawDataID();null!=o&&(this._$Bo[o]=r)}}return this._$Bo[id]}return t<this._$aS.length?this._$aS[t]:null},U.prototype.release=function(){this._$3S.clear(),this._$aS.clear(),this._$F2.clear(),null!=this._$Bo&&this._$Bo.clear(),this._$db.clear(),this._$8b.clear(),this._$Hr.clear()},U.prototype.init=function(){this._$co++,this._$F2.length>0&&this.release();for(var t=this._$Ri.getModelImpl(),e=t._$Xr(),i=e.length,r=new Array,n=new Array,s=0;s<i;++s){var a=e[s];this._$F2.push(a),this._$Hr.push(a.init(this));for(var _=a.getBaseData(),h=_.length,l=0;l<h;++l)r.push(_[l]);for(l=0;l<h;++l){var $=_[l].init(this);$._$l2(s),n.push($)}var u=a.getDrawData(),p=u.length;for(l=0;l<p;++l){var c=u[l],f=c.init(this);f._$IP=s,this._$aS.push(c),this._$8b.push(f)}}for(var g=r.length,d=dt._$2o();;){var y=!1;for(s=0;s<g;++s){var m=r[s];if(null!=m){var T=m.getTargetBaseDataID();(null==T||T==d||this.getBaseDataIndex(T)>=0)&&(this._$3S.push(m),this._$db.push(n[s]),r[s]=null,y=!0)}}if(!y)break}var P=t._$E2();if(null!=P){var S=P._$1s();if(null!=S){var v=S.length;for(s=0;s<v;++s){var L=S[s];null!=L&&this._$02(L.getParamID(),L.getDefaultValue(),L.getMinValue(),L.getMaxValue())}}}this.clipManager=new o(this.dp_webgl),this.clipManager.init(this,this._$aS,this._$8b),this._$QT=!0},U.prototype.update=function(){U._$e&&a.start("_$zL");for(var t=this._$_2.length,e=0;e<t;e++)this._$_2[e]!=this._$vr[e]&&(this._$Js[e]=U._$ZS,this._$vr[e]=this._$_2[e]);var i=this._$3S.length,r=this._$aS.length,o=W._$or(),n=W._$Pr()-o+1;(null==this._$Ws||this._$Ws.length<n)&&(this._$Ws=new Int16Array(n),this._$Vs=new Int16Array(n));for(e=0;e<n;e++)this._$Ws[e]=U._$V2,this._$Vs[e]=U._$V2;(null==this._$Er||this._$Er.length<r)&&(this._$Er=new Int16Array(r));for(e=0;e<r;e++)this._$Er[e]=U._$W0;U._$e&&a.dump("_$zL"),U._$e&&a.start("_$UL");for(var s=null,_=0;_<i;++_){var h=this._$3S[_],l=this._$db[_];try{h._$Nr(this,l),h._$2b(this,l)}catch(t){null==s&&(s=t)}}null!=s&&U._$_0&&a._$Rb(s),U._$e&&a.dump("_$UL"),U._$e&&a.start("_$DL");for(var $=null,u=0;u<r;++u){var p=this._$aS[u],c=this._$8b[u];try{if(p._$Nr(this,c),c._$u2())continue;p._$2b(this,c);var f,g=Math.floor(p._$zS(this,c)-o);try{f=this._$Vs[g]}catch(t){console.log("_$li :: %s / %s        @@_$fS\n",t.toString(),p.getDrawDataID().toString()),g=Math.floor(p._$zS(this,c)-o);continue}f==U._$V2?this._$Ws[g]=u:this._$Er[f]=u,this._$Vs[g]=u}catch(t){null==$&&($=t,at._$sT(at._$H7))}}null!=$&&U._$_0&&a._$Rb($),U._$e&&a.dump("_$DL"),U._$e&&a.start("_$eL");for(e=this._$Js.length-1;e>=0;e--)this._$Js[e]=U._$jr;return this._$QT=!1,U._$e&&a.dump("_$eL"),!1},U.prototype.preDraw=function(t){null!=this.clipManager&&(t._$ZT(),this.clipManager.setupClip(this,t))},U.prototype.draw=function(t){if(null!=this._$Ws){var e=this._$Ws.length;t._$ZT();for(var i=0;i<e;++i){var r=this._$Ws[i];if(r!=U._$V2)for(;;){var o=this._$aS[r],n=this._$8b[r];if(n._$yo()){var s=n._$IP,_=this._$Hr[s];n._$VS=_.getPartsOpacity(),o.draw(t,this,n)}var h=this._$Er[r];if(h<=r||h==U._$W0)break;r=h}}}else a._$li("call _$Ri.update() before _$Ri.draw() ")},U.prototype.getParamIndex=function(t){for(var e=this._$pb.length-1;e>=0;--e)if(this._$pb[e]==t)return e;return this._$02(t,0,U._$tr,U._$lr)},U.prototype._$BS=function(t){return this.getBaseDataIndex(t)},U.prototype.getBaseDataIndex=function(t){for(var e=this._$3S.length-1;e>=0;--e)if(null!=this._$3S[e]&&this._$3S[e].getBaseDataID()==t)return e;return-1},U.prototype._$UT=function(t,e){var i=new Float32Array(e);return A._$jT(t,0,i,0,t.length),i},U.prototype._$02=function(t,e,i,r){if(this._$qo>=this._$pb.length){var o=this._$pb.length,n=new Array(2*o);A._$jT(this._$pb,0,n,0,o),this._$pb=n,this._$_2=this._$UT(this._$_2,2*o),this._$vr=this._$UT(this._$vr,2*o),this._$Rr=this._$UT(this._$Rr,2*o),this._$Or=this._$UT(this._$Or,2*o);var s=new Array;A._$jT(this._$Js,0,s,0,o),this._$Js=s}return this._$pb[this._$qo]=t,this._$_2[this._$qo]=e,this._$vr[this._$qo]=e,this._$Rr[this._$qo]=i,this._$Or[this._$qo]=r,this._$Js[this._$qo]=U._$ZS,this._$qo++},U.prototype._$Zo=function(t,e){this._$3S[t]=e},U.prototype.setParamFloat=function(t,e){e<this._$Rr[t]&&(e=this._$Rr[t]),e>this._$Or[t]&&(e=this._$Or[t]),this._$_2[t]=e},U.prototype.loadParam=function(){var t=this._$_2.length;t>this._$fs.length&&(t=this._$fs.length),A._$jT(this._$fs,0,this._$_2,0,t)},U.prototype.saveParam=function(){var t=this._$_2.length;t>this._$fs.length&&(this._$fs=new Float32Array(t)),A._$jT(this._$_2,0,this._$fs,0,t)},U.prototype._$v2=function(){return this._$co},U.prototype._$WS=function(){return this._$QT},U.prototype._$Xb=function(t){return this._$Js[t]==U._$ZS},U.prototype._$vs=function(){return this._$Es},U.prototype._$Tr=function(){return this._$ZP},U.prototype.getBaseData=function(t){return this._$3S[t]},U.prototype.getParamFloat=function(t){return this._$_2[t]},U.prototype.getParamMax=function(t){return this._$Or[t]},U.prototype.getParamMin=function(t){return this._$Rr[t]},U.prototype.setPartsOpacity=function(t,e){this._$Hr[t].setPartsOpacity(e)},U.prototype.getPartsOpacity=function(t){return this._$Hr[t].getPartsOpacity()},U.prototype.getPartsDataIndex=function(t){for(var e=this._$F2.length-1;e>=0;--e)if(null!=this._$F2[e]&&this._$F2[e]._$p2()==t)return e;return-1},U.prototype._$q2=function(t){return this._$db[t]},U.prototype._$C2=function(t){return this._$8b[t]},U.prototype._$Bb=function(t){return this._$Hr[t]},U.prototype._$5s=function(t,e){for(var i=this._$Ws.length,r=t,o=0;o<i;++o){var n=this._$Ws[o];if(n!=U._$V2)for(;;){var s=this._$8b[n];s._$yo()&&(s._$GT()._$B2(this,s,r),r+=e);var a=this._$Er[n];if(a<=n||a==U._$W0)break;n=a}}},U.prototype.setDrawParam=function(t){this.dp_webgl=t},U.prototype.getDrawParam=function(){return this.dp_webgl};function Y(){}Y._$0T=function(t){return Y._$0T(new _$5(t))},Y._$0T=function(t){if(!t.exists())throw new _$ls(t._$3b());for(var e,i=t.length(),r=new Int8Array(i),o=new _$Xs(new _$kb(t),8192),n=0;(e=o.read(r,n,i-n))>0;)n+=e;return r},Y._$C=function(t){var e=null,i=null;try{e=t instanceof Array?t:new _$Xs(t,8192),i=new _$js;for(var r,o=new Int8Array(1e3);(r=e.read(o))>0;)i.write(o,0,r);return i._$TS()}finally{null!=t&&t.close(),null!=i&&(i.flush(),i.close())}};function k(){i||(this._$12=null,this._$bb=null,this._$_L=null,this._$jo=null,this._$iL=null,this._$0L=null,this._$Br=null,this._$Dr=null,this._$Cb=null,this._$mr=null,this._$_L=V.STATE_FIRST,this._$Br=4e3,this._$Dr=100,this._$Cb=50,this._$mr=150,this._$jo=!0,this._$iL="PARAM_EYE_L_OPEN",this._$0L="PARAM_EYE_R_OPEN")}k.prototype._$T2=function(){return A.getUserTimeMSec()+Math._$10()*(2*this._$Br-1)},k.prototype._$uo=function(t){this._$Br=t},k.prototype._$QS=function(t,e,i){this._$Dr=t,this._$Cb=e,this._$mr=i},k.prototype._$7T=function(t){var e,i=A.getUserTimeMSec(),r=0;switch(this._$_L){case STATE_CLOSING:(r=(i-this._$bb)/this._$Dr)>=1&&(r=1,this._$_L=V.STATE_CLOSED,this._$bb=i),e=1-r;break;case STATE_CLOSED:(r=(i-this._$bb)/this._$Cb)>=1&&(this._$_L=V.STATE_OPENING,this._$bb=i),e=0;break;case STATE_OPENING:(r=(i-this._$bb)/this._$mr)>=1&&(r=1,this._$_L=V.STATE_INTERVAL,this._$12=this._$T2()),e=r;break;case STATE_INTERVAL:this._$12<i&&(this._$_L=V.STATE_CLOSING,this._$bb=i),e=1;break;case STATE_FIRST:default:this._$_L=V.STATE_INTERVAL,this._$12=this._$T2(),e=1}this._$jo||(e=-e),t.setParamFloat(this._$iL,e),t.setParamFloat(this._$0L,e)};var V=function(){};V.STATE_FIRST="STATE_FIRST",V.STATE_INTERVAL="STATE_INTERVAL",V.STATE_CLOSING="STATE_CLOSING",V.STATE_CLOSED="STATE_CLOSED",V.STATE_OPENING="STATE_OPENING";function X(){i||(M.prototype.constructor.call(this),this._$sb=new Int32Array(X._$As),this._$U2=new Array,this.transform=null,this.gl=null,null==X._$NT&&(X._$NT=X._$9r(256),X._$vS=X._$9r(256),X._$no=X._$vb(256)))}X.prototype=new M,X._$As=32,X._$Gr=!1,X._$NT=null,X._$vS=null,X._$no=null,X._$9r=function(t){return new Float32Array(t)},X._$vb=function(t){return new Int16Array(t)},X._$cr=function(t,e){return null==t||t._$yL()<e.length?((t=X._$9r(2*e.length)).put(e),t._$oT(0)):(t.clear(),t.put(e),t._$oT(0)),t},X._$mb=function(t,e){return null==t||t._$yL()<e.length?((t=X._$vb(2*e.length)).put(e),t._$oT(0)):(t.clear(),t.put(e),t._$oT(0)),t},X._$Hs=function(){return X._$Gr},X._$as=function(t){X._$Gr=t},X.prototype.setGL=function(t){this.gl=t},X.prototype.setTransform=function(t){this.transform=t},X.prototype._$ZT=function(){},X.prototype._$Uo=function(t,e,i,r,o,n,s,a){if(!(n<.01)){var _=this._$U2[t],h=n>.9?at.EXPAND_W:0;this.gl.drawElements(_,i,r,o,n,h,this.transform,a)}},X.prototype._$Rs=function(){throw new Error("_$Rs")},X.prototype._$Ds=function(t){throw new Error("_$Ds")},X.prototype._$K2=function(){for(var t=0;t<this._$sb.length;t++){0!=this._$sb[t]&&(this.gl._$Sr(1,this._$sb,t),this._$sb[t]=0)}},X.prototype.setTexture=function(t,e){this._$sb.length<t+1&&this._$nS(t),this._$sb[t]=e},X.prototype.setTexture=function(t,e){this._$sb.length<t+1&&this._$nS(t),this._$U2[t]=e},X.prototype._$nS=function(t){var e=Math.max(2*this._$sb.length,t+1+10),i=new Int32Array(e);A._$jT(this._$sb,0,i,0,this._$sb.length),this._$sb=i;var r=new Array;A._$jT(this._$U2,0,r,0,this._$U2.length),this._$U2=r};function z(){i||(x.prototype.constructor.call(this),this._$GS=null,this._$Y0=null)}z.prototype=new x,z._$Xo=new Float32Array(2),z._$io=new Float32Array(2),z._$0o=new Float32Array(2),z._$Lo=new Float32Array(2),z._$To=new Float32Array(2),z._$Po=new Float32Array(2),z._$gT=new Array,z.prototype._$zP=function(){this._$GS=new D,this._$GS._$zP(),this._$Y0=new Array},z.prototype.getType=function(){return x._$c2},z.prototype._$F0=function(t){x.prototype._$F0.call(this,t),this._$GS=t._$nP(),this._$Y0=t._$nP(),x.prototype.readV2_opacity.call(this,t)},z.prototype.init=function(t){var e=new H(this);return e._$Yr=new y,this._$32()&&(e._$Wr=new y),e},z.prototype._$Nr=function(t,e){this!=e._$GT()&&console.log("### assert!! ### ");var i=e;if(this._$GS._$Ur(t)){var r=z._$gT;r[0]=!1;var o=this._$GS._$Q2(t,r);e._$Ib(r[0]),this.interpolateOpacity(t,this._$GS,e,r);var n=t._$vs(),s=t._$Tr();if(this._$GS._$zr(n,s,o),o<=0){var a=this._$Y0[n[0]];i._$Yr.init(a)}else if(1==o){a=this._$Y0[n[0]];var _=this._$Y0[n[1]],h=s[0];i._$Yr._$fL=a._$fL+(_._$fL-a._$fL)*h,i._$Yr._$gL=a._$gL+(_._$gL-a._$gL)*h,i._$Yr._$B0=a._$B0+(_._$B0-a._$B0)*h,i._$Yr._$z0=a._$z0+(_._$z0-a._$z0)*h,i._$Yr._$qT=a._$qT+(_._$qT-a._$qT)*h}else if(2==o){a=this._$Y0[n[0]],_=this._$Y0[n[1]];var l=this._$Y0[n[2]],$=this._$Y0[n[3]],u=(h=s[0],s[1]),p=a._$fL+(_._$fL-a._$fL)*h,c=l._$fL+($._$fL-l._$fL)*h;i._$Yr._$fL=p+(c-p)*u,p=a._$gL+(_._$gL-a._$gL)*h,c=l._$gL+($._$gL-l._$gL)*h,i._$Yr._$gL=p+(c-p)*u,p=a._$B0+(_._$B0-a._$B0)*h,c=l._$B0+($._$B0-l._$B0)*h,i._$Yr._$B0=p+(c-p)*u,p=a._$z0+(_._$z0-a._$z0)*h,c=l._$z0+($._$z0-l._$z0)*h,i._$Yr._$z0=p+(c-p)*u,p=a._$qT+(_._$qT-a._$qT)*h,c=l._$qT+($._$qT-l._$qT)*h,i._$Yr._$qT=p+(c-p)*u}else if(3==o){var f=this._$Y0[n[0]],g=this._$Y0[n[1]],d=this._$Y0[n[2]],y=this._$Y0[n[3]],m=this._$Y0[n[4]],T=this._$Y0[n[5]],P=this._$Y0[n[6]],S=this._$Y0[n[7]],v=(h=s[0],u=s[1],s[2]),L=(p=f._$fL+(g._$fL-f._$fL)*h,c=d._$fL+(y._$fL-d._$fL)*h,m._$fL+(T._$fL-m._$fL)*h),M=P._$fL+(S._$fL-P._$fL)*h;i._$Yr._$fL=(1-v)*(p+(c-p)*u)+v*(L+(M-L)*u),p=f._$gL+(g._$gL-f._$gL)*h,c=d._$gL+(y._$gL-d._$gL)*h,L=m._$gL+(T._$gL-m._$gL)*h,M=P._$gL+(S._$gL-P._$gL)*h,i._$Yr._$gL=(1-v)*(p+(c-p)*u)+v*(L+(M-L)*u),p=f._$B0+(g._$B0-f._$B0)*h,c=d._$B0+(y._$B0-d._$B0)*h,L=m._$B0+(T._$B0-m._$B0)*h,M=P._$B0+(S._$B0-P._$B0)*h,i._$Yr._$B0=(1-v)*(p+(c-p)*u)+v*(L+(M-L)*u),p=f._$z0+(g._$z0-f._$z0)*h,c=d._$z0+(y._$z0-d._$z0)*h,L=m._$z0+(T._$z0-m._$z0)*h,M=P._$z0+(S._$z0-P._$z0)*h,i._$Yr._$z0=(1-v)*(p+(c-p)*u)+v*(L+(M-L)*u),p=f._$qT+(g._$qT-f._$qT)*h,c=d._$qT+(y._$qT-d._$qT)*h,L=m._$qT+(T._$qT-m._$qT)*h,M=P._$qT+(S._$qT-P._$qT)*h,i._$Yr._$qT=(1-v)*(p+(c-p)*u)+v*(L+(M-L)*u)}else if(4==o){var E=this._$Y0[n[0]],x=this._$Y0[n[1]],A=this._$Y0[n[2]],I=this._$Y0[n[3]],w=this._$Y0[n[4]],D=this._$Y0[n[5]],O=this._$Y0[n[6]],b=this._$Y0[n[7]],R=this._$Y0[n[8]],F=this._$Y0[n[9]],C=this._$Y0[n[10]],N=this._$Y0[n[11]],B=this._$Y0[n[12]],G=this._$Y0[n[13]],U=this._$Y0[n[14]],Y=this._$Y0[n[15]],k=(h=s[0],u=s[1],v=s[2],s[3]),V=(p=E._$fL+(x._$fL-E._$fL)*h,c=A._$fL+(I._$fL-A._$fL)*h,L=w._$fL+(D._$fL-w._$fL)*h,M=O._$fL+(b._$fL-O._$fL)*h,R._$fL+(F._$fL-R._$fL)*h),X=C._$fL+(N._$fL-C._$fL)*h,H=B._$fL+(G._$fL-B._$fL)*h,W=U._$fL+(Y._$fL-U._$fL)*h;i._$Yr._$fL=(1-k)*((1-v)*(p+(c-p)*u)+v*(L+(M-L)*u))+k*((1-v)*(V+(X-V)*u)+v*(H+(W-H)*u)),p=E._$gL+(x._$gL-E._$gL)*h,c=A._$gL+(I._$gL-A._$gL)*h,L=w._$gL+(D._$gL-w._$gL)*h,M=O._$gL+(b._$gL-O._$gL)*h,V=R._$gL+(F._$gL-R._$gL)*h,X=C._$gL+(N._$gL-C._$gL)*h,H=B._$gL+(G._$gL-B._$gL)*h,W=U._$gL+(Y._$gL-U._$gL)*h,i._$Yr._$gL=(1-k)*((1-v)*(p+(c-p)*u)+v*(L+(M-L)*u))+k*((1-v)*(V+(X-V)*u)+v*(H+(W-H)*u)),p=E._$B0+(x._$B0-E._$B0)*h,c=A._$B0+(I._$B0-A._$B0)*h,L=w._$B0+(D._$B0-w._$B0)*h,M=O._$B0+(b._$B0-O._$B0)*h,V=R._$B0+(F._$B0-R._$B0)*h,X=C._$B0+(N._$B0-C._$B0)*h,H=B._$B0+(G._$B0-B._$B0)*h,W=U._$B0+(Y._$B0-U._$B0)*h,i._$Yr._$B0=(1-k)*((1-v)*(p+(c-p)*u)+v*(L+(M-L)*u))+k*((1-v)*(V+(X-V)*u)+v*(H+(W-H)*u)),p=E._$z0+(x._$z0-E._$z0)*h,c=A._$z0+(I._$z0-A._$z0)*h,L=w._$z0+(D._$z0-w._$z0)*h,M=O._$z0+(b._$z0-O._$z0)*h,V=R._$z0+(F._$z0-R._$z0)*h,X=C._$z0+(N._$z0-C._$z0)*h,H=B._$z0+(G._$z0-B._$z0)*h,W=U._$z0+(Y._$z0-U._$z0)*h,i._$Yr._$z0=(1-k)*((1-v)*(p+(c-p)*u)+v*(L+(M-L)*u))+k*((1-v)*(V+(X-V)*u)+v*(H+(W-H)*u)),p=E._$qT+(x._$qT-E._$qT)*h,c=A._$qT+(I._$qT-A._$qT)*h,L=w._$qT+(D._$qT-w._$qT)*h,M=O._$qT+(b._$qT-O._$qT)*h,V=R._$qT+(F._$qT-R._$qT)*h,X=C._$qT+(N._$qT-C._$qT)*h,H=B._$qT+(G._$qT-B._$qT)*h,W=U._$qT+(Y._$qT-U._$qT)*h,i._$Yr._$qT=(1-k)*((1-v)*(p+(c-p)*u)+v*(L+(M-L)*u))+k*((1-v)*(V+(X-V)*u)+v*(H+(W-H)*u))}else{for(var j=0|Math.pow(2,o),q=new Float32Array(j),J=0;J<j;J++){for(var Q=J,Z=1,K=0;K<o;K++)Z*=Q%2==0?1-s[K]:s[K],Q/=2;q[J]=Z}for(var tt=new Array,et=0;et<j;et++)tt[et]=this._$Y0[n[et]];var it=0,rt=0,ot=0,nt=0,st=0;for(et=0;et<j;et++)it+=q[et]*tt[et]._$fL,rt+=q[et]*tt[et]._$gL,ot+=q[et]*tt[et]._$B0,nt+=q[et]*tt[et]._$z0,st+=q[et]*tt[et]._$qT;i._$Yr._$fL=it,i._$Yr._$gL=rt,i._$Yr._$B0=ot,i._$Yr._$z0=nt,i._$Yr._$qT=st}a=this._$Y0[n[0]];i._$Yr.reflectX=a.reflectX,i._$Yr.reflectY=a.reflectY}},z.prototype._$2b=function(t,e){this!=e._$GT()&&console.log("### assert!! ### ");var i=e;if(i._$hS(!0),this._$32()){var r=this.getTargetBaseDataID();if(i._$8r==x._$ur&&(i._$8r=t.getBaseDataIndex(r)),i._$8r<0)at._$so&&a._$li("_$L _$0P _$G :: %s",r),i._$hS(!1);else{var o=t.getBaseData(i._$8r);if(null!=o){var n=t._$q2(i._$8r),s=z._$Xo;s[0]=i._$Yr._$fL,s[1]=i._$Yr._$gL;var _=z._$io;_[0]=0,_[1]=-.1;n._$GT().getType()==x._$c2?_[1]=-10:_[1]=-.1;var h=z._$0o;this._$Jr(t,o,n,s,_,h);var l=vt._$92(_,h);o._$nb(t,n,s,s,1,0,2),i._$Wr._$fL=s[0],i._$Wr._$gL=s[1],i._$Wr._$B0=i._$Yr._$B0,i._$Wr._$z0=i._$Yr._$z0,i._$Wr._$qT=i._$Yr._$qT-l*vt._$NS;var $=n.getTotalScale();i.setTotalScale_notForClient($*i._$Wr._$B0);var u=n.getTotalOpacity();i.setTotalOpacity(u*i.getInterpolatedOpacity()),i._$Wr.reflectX=i._$Yr.reflectX,i._$Wr.reflectY=i._$Yr.reflectY,i._$hS(n._$yo())}else i._$hS(!1)}}else i.setTotalScale_notForClient(i._$Yr._$B0),i.setTotalOpacity(i.getInterpolatedOpacity())},z.prototype._$nb=function(t,e,i,r,o,n,s){this!=e._$GT()&&console.log("### assert!! ### ");for(var a,_,h=e,l=null!=h._$Wr?h._$Wr:h._$Yr,$=Math.sin(vt._$bS*l._$qT),u=Math.cos(vt._$bS*l._$qT),p=h.getTotalScale(),c=l.reflectX?-1:1,f=l.reflectY?-1:1,g=u*p*c,d=-$*p*f,y=$*p*c,m=u*p*f,T=l._$fL,P=l._$gL,S=o*s,v=n;v<S;v+=s)a=i[v],_=i[v+1],r[v]=g*a+d*_+T,r[v+1]=y*a+m*_+P},z.prototype._$Jr=function(t,e,i,r,o,n){e!=i._$GT()&&console.log("### assert!! ### ");var s=z._$Lo;z._$Lo[0]=r[0],z._$Lo[1]=r[1],e._$nb(t,i,s,s,1,0,2);for(var a=z._$To,_=z._$Po,h=1,l=0;l<10;l++){if(_[0]=r[0]+h*o[0],_[1]=r[1]+h*o[1],e._$nb(t,i,_,a,1,0,2),a[0]-=s[0],a[1]-=s[1],0!=a[0]||0!=a[1])return n[0]=a[0],void(n[1]=a[1]);if(_[0]=r[0]-h*o[0],_[1]=r[1]-h*o[1],e._$nb(t,i,_,a,1,0,2),a[0]-=s[0],a[1]-=s[1],0!=a[0]||0!=a[1])return a[0]=-a[0],a[0]=-a[0],n[0]=a[0],void(n[1]=a[1]);h*=.1}at._$so&&console.log("_$L0 to transform _$SP\n")};function H(t){st.prototype.constructor.call(this,t),this._$8r=x._$ur,this._$Yr=null,this._$Wr=null}H.prototype=new st;function W(){i||(L.prototype.constructor.call(this),this._$gP=null,this._$dr=null,this._$GS=null,this._$qb=null,this._$Lb=null,this._$mS=null)}W.prototype=new L,W._$ur=-2,W._$ES=500,W._$wb=2,W._$8S=3,W._$os=4,W._$52=W._$ES,W._$R2=W._$ES,W._$Sb=function(t){for(var e=t.length-1;e>=0;--e){var i=t[e];i<W._$52?W._$52=i:i>W._$R2&&(W._$R2=i)}},W._$or=function(){return W._$52},W._$Pr=function(){return W._$R2},W.prototype._$F0=function(t){this._$gP=t._$nP(),this._$dr=t._$nP(),this._$GS=t._$nP(),this._$qb=t._$6L(),this._$Lb=t._$cS(),this._$mS=t._$Tb(),t.getFormatVersion()>=G._$T7?(this.clipID=t._$nP(),this.clipIDList=this.convertClipIDForV2_11(this.clipID)):this.clipIDList=null,W._$Sb(this._$Lb)},W.prototype.getClipIDList=function(){return this.clipIDList},W.prototype._$Nr=function(t,e){if(e._$IS[0]=!1,e._$Us=S._$Z2(t,this._$GS,e._$IS,this._$Lb),at._$Zs);else if(e._$IS[0])return;e._$7s=S._$br(t,this._$GS,e._$IS,this._$mS)},W.prototype._$2b=function(t){},W.prototype.getDrawDataID=function(){return this._$gP},W.prototype._$j2=function(t){this._$gP=t},W.prototype.getOpacity=function(t,e){return e._$7s},W.prototype._$zS=function(t,e){return e._$Us},W.prototype.getTargetBaseDataID=function(){return this._$dr},W.prototype._$gs=function(t){this._$dr=t},W.prototype._$32=function(){return null!=this._$dr&&this._$dr!=dt._$2o()},W.prototype.getType=function(){};function j(){i||(this._$NL=null,this._$3S=null,this._$aS=null,j._$42++)}j._$42=0,j.prototype._$1b=function(){return this._$3S},j.prototype.getDrawDataList=function(){return this._$aS},j.prototype._$F0=function(t){this._$NL=t._$nP(),this._$aS=t._$nP(),this._$3S=t._$nP()},j.prototype._$kr=function(t){t._$Zo(this._$3S),t._$xo(this._$aS),this._$3S=null,this._$aS=null};function q(){i||(r.prototype.constructor.call(this),this._$zo=new X)}q.prototype=new r,q.loadModel=function(t){var e=new q;return r._$62(e,t),e},q.loadModel=function(t){var e=new q;return r._$62(e,t),e},q._$to=function(){return new q},q._$er=function(t){var e=new _$5("../_$_r/_$t0/_$Ri/_$_P._$d");if(0==e.exists())throw new _$ls("_$t0 _$_ _$6 _$Ui :: "+e._$PL());for(var i=["../_$_r/_$t0/_$Ri/_$_P.512/_$CP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$vP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$EP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$pP._$1"],r=q.loadModel(e._$3b()),o=0;o<i.length;o++){var n=new _$5(i[o]);if(0==n.exists())throw new _$ls("_$t0 _$_ _$6 _$Ui :: "+n._$PL());r.setTexture(o,_$nL._$_o(t,n._$3b()))}return r},q.prototype.setGL=function(t){this._$zo.setGL(t)},q.prototype.setTransform=function(t){this._$zo.setTransform(t)},q.prototype.draw=function(){this._$5S.draw(this._$zo)},q.prototype._$K2=function(){this._$zo._$K2()},q.prototype.setTexture=function(t,e){null==this._$zo&&a._$li("_$Yi for QT _$ki / _$XS() is _$6 _$ui!!"),this._$zo.setTexture(t,e)},q.prototype.setTexture=function(t,e){null==this._$zo&&a._$li("_$Yi for QT _$ki / _$XS() is _$6 _$ui!!"),this._$zo.setTexture(t,e)},q.prototype._$Rs=function(){return this._$zo._$Rs()},q.prototype._$Ds=function(t){this._$zo._$Ds(t)},q.prototype.getDrawParam=function(){return this._$zo};function J(){i||(s.prototype.constructor.call(this),this.motions=new Array,this._$o2=null,this._$7r=J._$Co++,this._$D0=30,this._$yT=0,this._$E=!1,this.loopFadeIn=!0,this._$rr=-1,this._$eP=0)}J.prototype=new s,J._$cs="VISIBLE:",J._$ar="LAYOUT:",J.MTN_PREFIX_FADEIN="FADEIN:",J.MTN_PREFIX_FADEOUT="FADEOUT:",J._$Co=0,J._$1T=1,J.loadMotion=function(t){var e=Y._$C(t);return J.loadMotion(e)};function Q(t,e){return String.fromCharCode(t.getUint8(e))}J.loadMotion=function(t){t instanceof ArrayBuffer&&(t=new DataView(t));var e=new J,i=[0],r=t.byteLength;e._$yT=0;for(var o=0;o<r;++o){var n=Q(t,o),s=n.charCodeAt(0);if("\n"!=n&&"\r"!=n)if("#"!=n)if("$"!=n){if(97<=s&&s<=122||65<=s&&s<=90||"_"==n){for($=o,u=-1;o<r&&("\r"!=(n=Q(t,o))&&"\n"!=n);++o)if("="==n){u=o;break}if(u>=0){var a=new N;w.startsWith(t,$,J._$cs)?(a._$RP=N._$hs,a._$4P=w.createString(t,$,u-$)):w.startsWith(t,$,J._$ar)?(a._$4P=w.createString(t,$+7,u-$-7),w.startsWith(t,$+7,"ANCHOR_X")?a._$RP=N._$xs:w.startsWith(t,$+7,"ANCHOR_Y")?a._$RP=N._$us:w.startsWith(t,$+7,"SCALE_X")?a._$RP=N._$qs:w.startsWith(t,$+7,"SCALE_Y")?a._$RP=N._$Ys:w.startsWith(t,$+7,"X")?a._$RP=N._$ws:w.startsWith(t,$+7,"Y")&&(a._$RP=N._$Ns)):(a._$RP=N._$Fr,a._$4P=w.createString(t,$,u-$)),e.motions.push(a);var _=0,h=[];for(o=u+1;o<r&&("\r"!=(n=Q(t,o))&&"\n"!=n);++o)if(","!=n&&" "!=n&&"\t"!=n){c=w._$LS(t,r,o,i);if(i[0]>0){h.push(c),_++;var l=i[0];if(l<o){console.log("_$n0 _$hi . @Live2DMotion loadMotion()\n");break}o=l-1}}a._$I0=new Float32Array(h),_>e._$yT&&(e._$yT=_)}}}else{for(var $=o,u=-1;o<r&&("\r"!=(n=Q(t,o))&&"\n"!=n);++o)if("="==n){u=o;break}var p=!1;if(u>=0)for(u==$+4&&"f"==Q(t,$+1)&&"p"==Q(t,$+2)&&"s"==Q(t,$+3)&&(p=!0),o=u+1;o<r&&("\r"!=(n=Q(t,o))&&"\n"!=n);++o)if(","!=n&&" "!=n&&"\t"!=n){var c=w._$LS(t,r,o,i);i[0]>0&&p&&5<c&&c<121&&(e._$D0=c),o=i[0]}for(;o<r&&("\n"!=Q(t,o)&&"\r"!=Q(t,o));++o);}else for(;o<r&&("\n"!=Q(t,o)&&"\r"!=Q(t,o));++o);}return e._$rr=1e3*e._$yT/e._$D0|0,e},J.prototype.getDurationMSec=function(){return this._$E?-1:this._$rr},J.prototype.getLoopDurationMSec=function(){return this._$rr},J.prototype.dump=function(){for(var t=0;t<this.motions.length;t++){var e=this.motions[t];console.log("_$wL[%s] [%d]. ",e._$4P,e._$I0.length);for(var i=0;i<e._$I0.length&&i<10;i++)console.log("%5.2f ,",e._$I0[i]);console.log("\n")}},J.prototype.updateParamExe=function(t,e,i,r){for(var o=(e-r._$z2)*this._$D0/1e3,n=0|o,s=o-n,a=0;a<this.motions.length;a++){var _=this.motions[a],h=_._$I0.length,l=_._$4P;if(_._$RP==N._$hs){var $=_._$I0[n>=h?h-1:n];t.setParamFloat(l,$)}else if(N._$ws<=_._$RP&&_._$RP<=N._$Ys);else{var u=t.getParamIndex(l),p=t.getModelContext(),c=.4*(p.getParamMax(u)-p.getParamMin(u)),f=p.getParamFloat(u),g=_._$I0[n>=h?h-1:n],d=_._$I0[n+1>=h?h-1:n+1],y=f+((g<d&&d-g>c||g>d&&g-d>c?g:g+(d-g)*s)-f)*i;t.setParamFloat(l,y)}}n>=this._$yT&&(this._$E?(r._$z2=e,this.loopFadeIn&&(r._$bs=e)):r._$9L=!0),this._$eP=i},J.prototype._$r0=function(){return this._$E},J.prototype._$aL=function(t){this._$E=t},J.prototype._$S0=function(){return this._$D0},J.prototype._$U0=function(t){this._$D0=t},J.prototype.isLoopFadeIn=function(){return this.loopFadeIn},J.prototype.setLoopFadeIn=function(t){this.loopFadeIn=t};function C(){this._$P=new Float32Array(100),this.size=0}C.prototype.clear=function(){this.size=0},C.prototype.add=function(t){if(this._$P.length<=this.size){var e=new Float32Array(2*this.size);A._$jT(this._$P,0,e,0,this.size),this._$P=e}this._$P[this.size++]=t},C.prototype._$BL=function(){var t=new Float32Array(this.size);return A._$jT(this._$P,0,t,0,this.size),t};function N(){this._$4P=null,this._$I0=null,this._$RP=null}N._$Fr=0,N._$hs=1,N._$ws=100,N._$Ns=101,N._$xs=102,N._$us=103,N._$qs=104,N._$Ys=105;function Z(){i||(x.prototype.constructor.call(this),this._$o=0,this._$A=0,this._$GS=null,this._$Eo=null)}Z.prototype=new x,Z._$gT=new Array,Z.prototype._$zP=function(){this._$GS=new D,this._$GS._$zP()},Z.prototype._$F0=function(t){x.prototype._$F0.call(this,t),this._$A=t._$6L(),this._$o=t._$6L(),this._$GS=t._$nP(),this._$Eo=t._$nP(),x.prototype.readV2_opacity.call(this,t)},Z.prototype.init=function(t){var e=new K(this),i=(this._$o+1)*(this._$A+1);return null!=e._$Cr&&(e._$Cr=null),e._$Cr=new Float32Array(2*i),null!=e._$hr&&(e._$hr=null),this._$32()?e._$hr=new Float32Array(2*i):e._$hr=null,e},Z.prototype._$Nr=function(t,e){var i=e;if(this._$GS._$Ur(t)){var r=this._$VT(),o=Z._$gT;o[0]=!1,S._$Vr(t,this._$GS,o,r,this._$Eo,i._$Cr,0,2),e._$Ib(o[0]),this.interpolateOpacity(t,this._$GS,e,o)}},Z.prototype._$2b=function(t,e){var i=e;if(i._$hS(!0),this._$32()){var r=this.getTargetBaseDataID();if(i._$8r==x._$ur&&(i._$8r=t.getBaseDataIndex(r)),i._$8r<0)at._$so&&a._$li("_$L _$0P _$G :: %s",r),i._$hS(!1);else{var o=t.getBaseData(i._$8r),n=t._$q2(i._$8r);if(null!=o&&n._$yo()){var s=n.getTotalScale();i.setTotalScale_notForClient(s);var _=n.getTotalOpacity();i.setTotalOpacity(_*i.getInterpolatedOpacity()),o._$nb(t,n,i._$Cr,i._$hr,this._$VT(),0,2),i._$hS(!0)}else i._$hS(!1)}}else i.setTotalOpacity(i.getInterpolatedOpacity())},Z.prototype._$nb=function(t,e,i,r,o,n,s){var a=e,_=null!=a._$hr?a._$hr:a._$Cr;Z.transformPoints_sdk2(i,r,o,n,s,_,this._$o,this._$A)},Z.transformPoints_sdk2=function(e,i,r,o,n,s,a,_){for(var h,l,$,u=r*n,p=0,c=0,f=0,g=0,d=0,y=0,m=!1,T=o;T<u;T+=n){var P,S,v,L;if(v=e[T],S=(L=e[T+1])*_,(P=v*a)<0||S<0||a<=P||_<=S){var M=a+1;if(!m){m=!0,p=.25*(s[2*(0+0*M)]+s[2*(a+0*M)]+s[2*(0+_*M)]+s[2*(a+_*M)]),c=.25*(s[2*(0+0*M)+1]+s[2*(a+0*M)+1]+s[2*(0+_*M)+1]+s[2*(a+_*M)+1]);var E=s[2*(a+_*M)]-s[2*(0+0*M)],x=s[2*(a+_*M)+1]-s[2*(0+0*M)+1],A=s[2*(a+0*M)]-s[2*(0+_*M)],I=s[2*(a+0*M)+1]-s[2*(0+_*M)+1];p-=.5*((f=.5*(E+A))+(d=.5*(E-A))),c-=.5*((g=.5*(x+I))+(y=.5*(x-I)))}if(-2<v&&v<3&&-2<L&&L<3)if(v<=0)if(L<=0){var w=s[2*(0+0*M)],D=s[2*(0+0*M)+1],O=p-2*f,b=c-2*g,R=p-2*d,F=c-2*y,C=p-2*f-2*d,N=c-2*g-2*y;(B=.5*(v- -2))+(G=.5*(L- -2))<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else if(L>=1){R=s[2*(0+_*M)],F=s[2*(0+_*M)+1],C=p-2*f+1*d,N=c-2*g+1*y,w=p+3*d,D=c+3*y,O=p-2*f+3*d,b=c-2*g+3*y;(B=.5*(v- -2))+(G=.5*(L-1))<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else{(k=0|S)==_&&(k=_-1);var B=.5*(v- -2),G=S-k,U=k/_,Y=(k+1)/_;R=s[2*(0+k*M)],F=s[2*(0+k*M)+1],w=s[2*(0+(k+1)*M)],D=s[2*(0+(k+1)*M)+1],C=p-2*f+U*d,N=c-2*g+U*y,O=p-2*f+Y*d,b=c-2*g+Y*y;B+G<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else if(1<=v)if(L<=0){O=s[2*(a+0*M)],b=s[2*(a+0*M)+1],w=p+3*f,D=c+3*g,C=p+1*f-2*d,N=c+1*g-2*y,R=p+3*f-2*d,F=c+3*g-2*y;(B=.5*(v-1))+(G=.5*(L- -2))<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else if(L>=1){C=s[2*(a+_*M)],N=s[2*(a+_*M)+1],R=p+3*f+1*d,F=c+3*g+1*y,O=p+1*f+3*d,b=c+1*g+3*y,w=p+3*f+3*d,D=c+3*g+3*y;(B=.5*(v-1))+(G=.5*(L-1))<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else{var k;(k=0|S)==_&&(k=_-1);B=.5*(v-1),G=S-k,U=k/_,Y=(k+1)/_,C=s[2*(a+k*M)],N=s[2*(a+k*M)+1],O=s[2*(a+(k+1)*M)],b=s[2*(a+(k+1)*M)+1],R=p+3*f+U*d,F=c+3*g+U*y,w=p+3*f+Y*d,D=c+3*g+Y*y;B+G<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else if(L<=0){(z=0|P)==a&&(z=a-1);B=P-z,G=.5*(L- -2);var V=z/a,X=(z+1)/a;O=s[2*(z+0*M)],b=s[2*(z+0*M)+1],w=s[2*(z+1+0*M)],D=s[2*(z+1+0*M)+1],C=p+V*f-2*d,N=c+V*g-2*y,R=p+X*f-2*d,F=c+X*g-2*y;B+G<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else if(L>=1){var z;(z=0|P)==a&&(z=a-1);B=P-z,G=.5*(L-1),V=z/a,X=(z+1)/a,C=s[2*(z+_*M)],N=s[2*(z+_*M)+1],R=s[2*(z+1+_*M)],F=s[2*(z+1+_*M)+1],O=p+V*f+3*d,b=c+V*g+3*y,w=p+X*f+3*d,D=c+X*g+3*y;B+G<=1?(i[T]=C+(R-C)*B+(O-C)*G,i[T+1]=N+(F-N)*B+(b-N)*G):(i[T]=w+(O-w)*(1-B)+(R-w)*(1-G),i[T+1]=D+(b-D)*(1-B)+(F-D)*(1-G))}else t.err.printf("_$li calc : %.4f , %.4f          @@BDBoxGrid\n",v,L);else i[T]=p+v*f+L*d,i[T+1]=c+v*g+L*y}else h=2*((0|P)+(0|S)*(a+1)),(l=P-(0|P))+($=S-(0|S))<1?(i[T]=s[h]*(1-l-$)+s[h+2]*l+s[h+2*(a+1)]*$,i[T+1]=s[h+1]*(1-l-$)+s[h+3]*l+s[h+2*(a+1)+1]*$):(i[T]=s[h+2*(a+1)+2]*(l-1+$)+s[h+2*(a+1)]*(1-l)+s[h+2]*(1-$),i[T+1]=s[h+2*(a+1)+3]*(l-1+$)+s[h+2*(a+1)+1]*(1-l)+s[h+3]*(1-$))}},Z.prototype.transformPoints_sdk1=function(t,e,i,r,o,n,s){for(var a,_,h,l,$,u,p,c=e,f=this._$o,g=this._$A,d=o*s,y=null!=c._$hr?c._$hr:c._$Cr,m=n;m<d;m+=s)at._$ts?(a=i[m],_=i[m+1],a<0?a=0:a>1&&(a=1),_<0?_=0:_>1&&(_=1),l=0|(_*=g),(h=0|(a*=f))>f-1&&(h=f-1),l>g-1&&(l=g-1),u=a-h,p=_-l,$=2*(h+l*(f+1))):(u=(a=i[m]*f)-(0|a),p=(_=i[m+1]*g)-(0|_),$=2*((0|a)+(0|_)*(f+1))),u+p<1?(r[m]=y[$]*(1-u-p)+y[$+2]*u+y[$+2*(f+1)]*p,r[m+1]=y[$+1]*(1-u-p)+y[$+3]*u+y[$+2*(f+1)+1]*p):(r[m]=y[$+2*(f+1)+2]*(u-1+p)+y[$+2*(f+1)]*(1-u)+y[$+2]*(1-p),r[m+1]=y[$+2*(f+1)+3]*(u-1+p)+y[$+2*(f+1)+1]*(1-u)+y[$+3]*(1-p))},Z.prototype._$VT=function(){return(this._$o+1)*(this._$A+1)},Z.prototype.getType=function(){return x._$_b};function K(t){st.prototype.constructor.call(this,t),this._$8r=x._$ur,this._$Cr=null,this._$hr=null}K.prototype=new st;function tt(){i||(this.visible=!0,this._$g0=!1,this._$NL=null,this._$3S=null,this._$aS=null,tt._$42++)}tt._$42=0,tt.prototype._$zP=function(){this._$3S=new Array,this._$aS=new Array},tt.prototype._$F0=function(t){this._$g0=t._$8L(),this.visible=t._$8L(),this._$NL=t._$nP(),this._$3S=t._$nP(),this._$aS=t._$nP()},tt.prototype.init=function(t){var e=new et(this);return e.setPartsOpacity(this.isVisible()?1:0),e},tt.prototype._$6o=function(t){if(null==this._$3S)throw new Error("_$3S _$6 _$Wo@_$6o");this._$3S.push(t)},tt.prototype._$3o=function(t){if(null==this._$aS)throw new Error("_$aS _$6 _$Wo@_$3o");this._$aS.push(t)},tt.prototype._$Zo=function(t){this._$3S=t},tt.prototype._$xo=function(t){this._$aS=t},tt.prototype.isVisible=function(){return this.visible},tt.prototype._$uL=function(){return this._$g0},tt.prototype._$KP=function(t){this.visible=t},tt.prototype._$ET=function(t){this._$g0=t},tt.prototype.getBaseData=function(){return this._$3S},tt.prototype.getDrawData=function(){return this._$aS},tt.prototype._$p2=function(){return this._$NL},tt.prototype._$ob=function(t){this._$NL=t},tt.prototype.getPartsID=function(){return this._$NL},tt.prototype._$MP=function(t){this._$NL=t};function et(t){this._$VS=null,this._$e0=null,this._$e0=t}et.prototype=new function(){},et.prototype.getPartsOpacity=function(){return this._$VS},et.prototype.setPartsOpacity=function(t){this._$VS=t};function it(t){i||(this.id=t)}it._$L7=function(){l._$27(),dt._$27(),b._$27(),h._$27()},it.prototype.toString=function(){return this.id};function rt(){i||(this._$4S=null)}rt.prototype._$1s=function(){return this._$4S},rt.prototype._$zP=function(){this._$4S=new Array},rt.prototype._$F0=function(t){this._$4S=t._$nP()},rt.prototype._$Ks=function(t){this._$4S.push(t)};function ot(t,e){this.canvas=t,this.context=e,this.viewport=new Array(0,0,t.width,t.height),this._$6r=1,this._$xP=0,this._$3r=1,this._$uP=0,this._$Qo=-1,this.cacheImages={}}ot.tr=new gt,ot._$50=new gt,ot._$Ti=new Array(0,0),ot._$Pi=new Array(0,0),ot._$B=new Array(0,0),ot.prototype._$lP=function(t,e,i,r){this.viewport=new Array(t,e,i,r)},ot.prototype._$bL=function(){this.context.save();var t=this.viewport;null!=t&&(this.context.beginPath(),this.context._$Li(t[0],t[1],t[2],t[3]),this.context.clip())},ot.prototype._$ei=function(){this.context.restore()},ot.prototype.drawElements=function(t,e,i,r,o,n,s,_){try{o!=this._$Qo&&(this._$Qo=o,this.context.globalAlpha=o);for(var h=e.length,l=t.width,$=t.height,u=this.context,p=this._$xP,c=this._$uP,f=this._$6r,g=this._$3r,d=ot.tr,y=ot._$Ti,m=ot._$Pi,P=ot._$B,S=0;S<h;S+=3){u.save();var v=e[S],L=e[S+1],M=e[S+2],E=p+f*i[2*v],x=c+g*i[2*v+1],A=p+f*i[2*L],I=c+g*i[2*L+1],w=p+f*i[2*M],D=c+g*i[2*M+1];s&&(s._$PS(E,x,P),E=P[0],x=P[1],s._$PS(A,I,P),A=P[0],I=P[1],s._$PS(w,D,P),w=P[0],D=P[1]);var O=l*r[2*v],b=$-$*r[2*v+1],R=l*r[2*L],F=$-$*r[2*L+1],C=l*r[2*M],N=$-$*r[2*M+1],B=Math.atan2(F-b,R-O),G=Math.atan2(I-x,A-E),U=A-E,Y=I-x,k=Math.sqrt(U*U+Y*Y),V=R-O,X=F-b,z=k/Math.sqrt(V*V+X*X);T._$ni(C,N,O,b,R-O,F-b,-(F-b),R-O,y),T._$ni(w,D,E,x,A-E,I-x,-(I-x),A-E,m);var H=(m[0]-y[0])/y[1],W=Math.min(O,R,C),j=Math.max(O,R,C),q=Math.min(b,F,N),J=Math.max(b,F,N),Q=Math.floor(W),Z=Math.floor(q),K=Math.ceil(j),tt=Math.ceil(J);d.identity(),d.translate(E,x),d.rotate(G),d.scale(1,m[1]/y[1]),d.shear(H,0),d.scale(z,z),d.rotate(-B),d.translate(-O,-b),d.setContext(u);if(n||(n=1.2),at.IGNORE_EXPAND&&(n=0),at.USE_CACHED_POLYGON_IMAGE){var et=_._$e0;if(et.gl_cacheImage=et.gl_cacheImage||{},!et.gl_cacheImage[S]){var it=ot.createCanvas(K-Q,tt-Z);at.DEBUG_DATA.LDGL_CANVAS_MB=at.DEBUG_DATA.LDGL_CANVAS_MB||0,at.DEBUG_DATA.LDGL_CANVAS_MB+=(K-Q)*(tt-Z)*4;var rt=it.getContext("2d");rt.translate(-Q,-Z),ot.clip(rt,d,n,k,O,b,R,F,C,N,E,x,A,I,w,D),rt.drawImage(t,0,0),et.gl_cacheImage[S]={cacheCanvas:it,cacheContext:rt}}u.drawImage(et.gl_cacheImage[S].cacheCanvas,Q,Z)}else at.IGNORE_CLIP||ot.clip(u,d,n,k,O,b,R,F,C,N,E,x,A,I,w,D),at.USE_ADJUST_TRANSLATION&&(W=0,j=l,q=0,J=$),u.drawImage(t,W,q,j-W,J-q,W,q,j-W,J-q);u.restore()}}catch(t){a._$Rb(t)}},ot.clip=function(t,e,i,r,o,n,s,a,_,h,l,$,u,p,c,f){i>.02?ot.expandClip(t,e,i,r,l,$,u,p,c,f):ot.clipWithTransform(t,null,o,n,s,a,_,h)},ot.expandClip=function(t,e,i,r,o,n,s,a,_,h){var l=s-o,$=a-n,u=_-o,p=h-n,c=l*p-$*u>0?i:-i,f=-$,g=l,d=_-s,y=h-a,m=-y,T=d,P=Math.sqrt(d*d+y*y),S=-p,v=u,L=Math.sqrt(u*u+p*p),M=o-c*f/r,E=n-c*g/r,x=s-c*f/r,A=a-c*g/r,I=s-c*m/P,w=a-c*T/P,D=_-c*m/P,O=h-c*T/P,b=o+c*S/L,R=n+c*v/L,F=_+c*S/L,C=h+c*v/L,N=ot._$50;return null!=e._$P2(N)&&(ot.clipWithTransform(t,N,M,E,x,A,I,w,D,O,F,C,b,R),!0)},ot.clipWithTransform=function(t,e,i,r,o,n,s,_){if(arguments.length<7)a._$li("err : @LDGL.clip()");else if(arguments[1]instanceof gt){var h=ot._$B,l=e,$=arguments;if(t.beginPath(),l){l._$PS($[2],$[3],h),t.moveTo(h[0],h[1]);for(var u=4;u<$.length;u+=2)l._$PS($[u],$[u+1],h),t.lineTo(h[0],h[1])}else{t.moveTo($[2],$[3]);for(u=4;u<$.length;u+=2)t.lineTo($[u],$[u+1])}t.clip()}else a._$li("err : a[0] is _$6 LDTransform @LDGL.clip()")},ot.createCanvas=function(t,e){var i=document.createElement("canvas");return i.setAttribute("width",t),i.setAttribute("height",e),i||a._$li("err : "+i),i},ot.dumpValues=function(){for(var t="",e=0;e<arguments.length;e++)t+="["+e+"]= "+arguments[e].toFixed(3)+" , ";console.log(t)};function nt(){i||(this._$TT=null,this._$LT=null,this._$FS=null,this._$wL=null)}nt.prototype._$F0=function(t){this._$TT=t._$_T(),this._$LT=t._$_T(),this._$FS=t._$_T(),this._$wL=t._$nP()},nt.prototype.getMinValue=function(){return this._$TT},nt.prototype.getMaxValue=function(){return this._$LT},nt.prototype.getDefaultValue=function(){return this._$FS},nt.prototype.getParamID=function(){return this._$wL};function st(t){i||(this._$e0=null,this._$IP=null,this._$JS=!1,this._$AT=!0,this._$e0=t,this.totalScale=1,this._$7s=1,this.totalOpacity=1)}st.prototype._$yo=function(){return this._$AT&&!this._$JS},st.prototype._$hS=function(t){this._$AT=t},st.prototype._$GT=function(){return this._$e0},st.prototype._$l2=function(t){this._$IP=t},st.prototype.getPartsIndex=function(){return this._$IP},st.prototype._$x2=function(){return this._$JS},st.prototype._$Ib=function(t){this._$JS=t},st.prototype.getTotalScale=function(){return this.totalScale},st.prototype.setTotalScale_notForClient=function(t){this.totalScale=t},st.prototype.getInterpolatedOpacity=function(){return this._$7s},st.prototype.setInterpolatedOpacity=function(t){this._$7s=t},st.prototype.getTotalOpacity=function(t){return this.totalOpacity},st.prototype.setTotalOpacity=function(t){this.totalOpacity=t};function at(){}at._$2s="2.1.00_1",at._$Kr=201001e3,at._$sP=!0,at._$so=!0,at._$cb=!1,at._$3T=!0,at._$Ts=!0,at._$fb=!0,at._$ts=!0,at.L2D_DEFORMER_EXTEND=!0,at._$Wb=!1,at._$yr=!1,at._$Zs=!1,at.L2D_NO_ERROR=0,at._$i7=1e3,at._$9s=1001,at._$es=1100,at._$r7=2e3,at._$07=2001,at._$b7=2002,at._$H7=4e3,at.L2D_COLOR_BLEND_MODE_MULT=0,at.L2D_COLOR_BLEND_MODE_ADD=1,at.L2D_COLOR_BLEND_MODE_INTERPOLATE=2,at._$6b=!0,at._$cT=0,at.clippingMaskBufferSize=256,at.glContext=new Array,at.frameBuffers=new Array,at.fTexture=new Array,at.IGNORE_CLIP=!1,at.IGNORE_EXPAND=!1,at.EXPAND_W=2,at.USE_ADJUST_TRANSLATION=!0,at.USE_CANVAS_TRANSFORM=!0,at.USE_CACHED_POLYGON_IMAGE=!1,at.DEBUG_DATA={},at.PROFILE_IOS_SPEED={PROFILE_NAME:"iOS Speed",USE_ADJUST_TRANSLATION:!0,USE_CACHED_POLYGON_IMAGE:!0,EXPAND_W:4},at.PROFILE_IOS_QUALITY={PROFILE_NAME:"iOS HiQ",USE_ADJUST_TRANSLATION:!0,USE_CACHED_POLYGON_IMAGE:!1,EXPAND_W:2},at.PROFILE_IOS_DEFAULT=at.PROFILE_IOS_QUALITY,at.PROFILE_ANDROID={PROFILE_NAME:"Android",USE_ADJUST_TRANSLATION:!1,USE_CACHED_POLYGON_IMAGE:!1,EXPAND_W:2},at.PROFILE_DESKTOP={PROFILE_NAME:"Desktop",USE_ADJUST_TRANSLATION:!1,USE_CACHED_POLYGON_IMAGE:!1,EXPAND_W:2},at.initProfile=function(){Mt.isIOS()?at.setupProfile(at.PROFILE_IOS_DEFAULT):Mt.isAndroid()?at.setupProfile(at.PROFILE_ANDROID):at.setupProfile(at.PROFILE_DESKTOP)},at.setupProfile=function(t,e){if("number"==typeof t)switch(t){case 9901:t=at.PROFILE_IOS_SPEED;break;case 9902:t=at.PROFILE_IOS_QUALITY;break;case 9903:t=at.PROFILE_IOS_DEFAULT;break;case 9904:t=at.PROFILE_ANDROID;break;case 9905:t=at.PROFILE_DESKTOP;break;default:alert("profile _$6 _$Ui : "+t)}arguments.length<2&&(e=!0),e&&console.log("profile : "+t.PROFILE_NAME);for(var i in t)at[i]=t[i],e&&console.log("  ["+i+"] = "+t[i])},at.init=function(){if(at._$6b){console.log("Live2D %s",at._$2s),at._$6b=!1;!0,at.initProfile()}},at.getVersionStr=function(){return at._$2s},at.getVersionNo=function(){return at._$Kr},at._$sT=function(t){at._$cT=t},at.getError=function(){var t=at._$cT;return at._$cT=0,t},at.dispose=function(){at.glContext=[],at.frameBuffers=[],at.fTexture=[]},at.setGL=function(t,e){var i=e||0;at.glContext[i]=t},at.getGL=function(t){return at.glContext[t]},at.setClippingMaskBufferSize=function(t){at.clippingMaskBufferSize=t},at.getClippingMaskBufferSize=function(){return at.clippingMaskBufferSize},at.deleteBuffer=function(t){at.getGL(t).deleteFramebuffer(at.frameBuffers[t].framebuffer),delete at.frameBuffers[t],delete at.glContext[t]};function _t(){}_t._$r2=function(t){return t<0?0:t>1?1:.5-.5*Math.cos(t*vt.PI_F)};function ht(t){i||(this._$ib=t)}ht._$fr=-1,ht.prototype.toString=function(){return this._$ib};function lt(){i||(W.prototype.constructor.call(this),this._$LP=-1,this._$d0=0,this._$Yo=0,this._$JP=null,this._$5P=null,this._$BP=null,this._$Eo=null,this._$Qi=null,this._$6s=lt._$ms,this.culling=!0,this.gl_cacheImage=null,this.instanceNo=lt._$42++)}lt.prototype=new W,lt._$42=0,lt._$Os=30,lt._$ms=0,lt._$ns=1,lt._$_s=2,lt._$gT=new Array,lt.prototype._$_S=function(t){this._$LP=t},lt.prototype.getTextureNo=function(){return this._$LP},lt.prototype._$ZL=function(){return this._$Qi},lt.prototype._$H2=function(){return this._$JP},lt.prototype.getNumPoints=function(){return this._$d0},lt.prototype.getType=function(){return W._$wb},lt.prototype._$B2=function(t,e,i){var r=e,o=null!=r._$hr?r._$hr:r._$Cr;switch(B._$do){default:case B._$Ms:throw new Error("_$L _$ro ");case B._$Qs:for(var n=this._$d0-1;n>=0;--n){o[n*B._$No+4]=i}}},lt.prototype._$zP=function(){this._$GS=new D,this._$GS._$zP()},lt.prototype._$F0=function(t){W.prototype._$F0.call(this,t),this._$LP=t._$6L(),this._$d0=t._$6L(),this._$Yo=t._$6L();var e=t._$nP();this._$BP=new Int16Array(3*this._$Yo);for(var i=3*this._$Yo-1;i>=0;--i)this._$BP[i]=e[i];if(this._$Eo=t._$nP(),this._$Qi=t._$nP(),t.getFormatVersion()>=G._$s7){if(this._$JP=t._$6L(),0!=this._$JP){if(0!=(1&this._$JP)){var r=t._$6L();null==this._$5P&&(this._$5P=new Object),this._$5P._$Hb=parseInt(r)}0!=(this._$JP&lt._$Os)?this._$6s=(this._$JP&lt._$Os)>>1:this._$6s=lt._$ms,0!=(32&this._$JP)&&(this.culling=!1)}}else this._$JP=0},lt.prototype.init=function(t){var e=new $t(this),i=this._$d0*B._$No,r=this._$32();null!=e._$Cr&&(e._$Cr=null),e._$Cr=new Float32Array(i),null!=e._$hr&&(e._$hr=null),e._$hr=r?new Float32Array(i):null;switch(B._$do){default:case B._$Ms:if(B._$Ls)for(var o=this._$d0-1;o>=0;--o){var n=o<<1;this._$Qi[n+1]=1-this._$Qi[n+1]}break;case B._$Qs:for(o=this._$d0-1;o>=0;--o){n=o<<1;var s=o*B._$No,a=this._$Qi[n],_=this._$Qi[n+1];e._$Cr[s]=a,e._$Cr[s+1]=_,e._$Cr[s+4]=0,r&&(e._$hr[s]=a,e._$hr[s+1]=_,e._$hr[s+4]=0)}}return e},lt.prototype._$Nr=function(t,e){var i=e;if(this!=i._$GT()&&console.log("### assert!! ### "),this._$GS._$Ur(t)&&(W.prototype._$Nr.call(this,t,i),!i._$IS[0])){var r=lt._$gT;r[0]=!1,S._$Vr(t,this._$GS,r,this._$d0,this._$Eo,i._$Cr,B._$i2,B._$No)}},lt.prototype._$2b=function(t,e){try{this!=e._$GT()&&console.log("### assert!! ### ");var i=!1;e._$IS[0]&&(i=!0);var r=e;if(!i&&(W.prototype._$2b.call(this,t),this._$32())){var o=this.getTargetBaseDataID();if(r._$8r==W._$ur&&(r._$8r=t.getBaseDataIndex(o)),r._$8r<0)at._$so&&a._$li("_$L _$0P _$G :: %s",o);else{var n=t.getBaseData(r._$8r),s=t._$q2(r._$8r);null==n||s._$x2()?r._$AT=!1:(n._$nb(t,s,r._$Cr,r._$hr,this._$d0,B._$i2,B._$No),r._$AT=!0),r.baseOpacity=s.getTotalOpacity()}}}catch(t){throw t}},lt.prototype.draw=function(t,e,i){if(this!=i._$GT()&&console.log("### assert!! ### "),!i._$IS[0]){var r=i,o=this._$LP;o<0&&(o=1);var n=this.getOpacity(e,r)*i._$VS*i.baseOpacity,s=null!=r._$hr?r._$hr:r._$Cr;t.setClipBufPre_clipContextForDraw(i.clipBufPre_clipContext),t._$WP(this.culling),t._$Uo(o,3*this._$Yo,this._$BP,s,this._$Qi,n,this._$6s,r)}},lt.prototype.dump=function(){console.log("  _$yi( %d ) , _$d0( %d ) , _$Yo( %d ) \n",this._$LP,this._$d0,this._$Yo),console.log("  _$Oi _$di = { ");for(var t=0;t<this._$BP.length;t++)console.log("%5d ,",this._$BP[t]);console.log("\n  _$5i _$30");for(t=0;t<this._$Eo.length;t++){console.log("\n    _$30[%d] = ",t);for(var e=this._$Eo[t],i=0;i<e.length;i++)console.log("%6.2f, ",e[i])}console.log("\n")},lt.prototype._$72=function(t){return null==this._$5P?null:this._$5P[t]},lt.prototype.getIndexArray=function(){return this._$BP};function $t(t){Lt.prototype.constructor.call(this,t),this._$8r=W._$ur,this._$Cr=null,this._$hr=null}$t.prototype=new Lt,$t.prototype.getTransformedPoints=function(){return null!=this._$hr?this._$hr:this._$Cr};function ut(){i||(this.x=null,this.y=null)}ut.prototype._$HT=function(t){this.x=t.x,this.y=t.y},ut.prototype._$HT=function(t,e){this.x=t,this.y=e};function pt(t){i||(r.prototype.constructor.call(this),this.drawParamWebGL=new yt(t),this.drawParamWebGL.setGL(at.getGL(t)))}pt.prototype=new r,pt.loadModel=function(t){var e=new pt;return r._$62(e,t),e},pt.loadModel=function(t,e){var i=new pt(e||0);return r._$62(i,t),i},pt._$to=function(){return new pt},pt._$er=function(t){var e=new _$5("../_$_r/_$t0/_$Ri/_$_P._$d");if(0==e.exists())throw new _$ls("_$t0 _$_ _$6 _$Ui :: "+e._$PL());for(var i=["../_$_r/_$t0/_$Ri/_$_P.512/_$CP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$vP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$EP._$1","../_$_r/_$t0/_$Ri/_$_P.512/_$pP._$1"],r=pt.loadModel(e._$3b()),o=0;o<i.length;o++){var n=new _$5(i[o]);if(0==n.exists())throw new _$ls("_$t0 _$_ _$6 _$Ui :: "+n._$PL());r.setTexture(o,_$nL._$_o(t,n._$3b()))}return r},pt.prototype.setGL=function(t){at.setGL(t)},pt.prototype.setTransform=function(t){this.drawParamWebGL.setTransform(t)},pt.prototype.update=function(){this._$5S.update(),this._$5S.preDraw(this.drawParamWebGL)},pt.prototype.draw=function(){this._$5S.draw(this.drawParamWebGL)},pt.prototype._$K2=function(){this.drawParamWebGL._$K2()},pt.prototype.setTexture=function(t,e){null==this.drawParamWebGL&&a._$li("_$Yi for QT _$ki / _$XS() is _$6 _$ui!!"),this.drawParamWebGL.setTexture(t,e)},pt.prototype.setTexture=function(t,e){null==this.drawParamWebGL&&a._$li("_$Yi for QT _$ki / _$XS() is _$6 _$ui!!"),this.drawParamWebGL.setTexture(t,e)},pt.prototype._$Rs=function(){return this.drawParamWebGL._$Rs()},pt.prototype._$Ds=function(t){this.drawParamWebGL._$Ds(t)},pt.prototype.getDrawParam=function(){return this.drawParamWebGL},pt.prototype.setMatrix=function(t){this.drawParamWebGL.setMatrix(t)},pt.prototype.setPremultipliedAlpha=function(t){this.drawParamWebGL.setPremultipliedAlpha(t)},pt.prototype.isPremultipliedAlpha=function(){return this.drawParamWebGL.isPremultipliedAlpha()},pt.prototype.setAnisotropy=function(t){this.drawParamWebGL.setAnisotropy(t)},pt.prototype.getAnisotropy=function(){return this.drawParamWebGL.getAnisotropy()};function ct(){i||(this.motions=null,this._$eb=!1,this.motions=new Array)}ct.prototype._$tb=function(){return this.motions},ct.prototype.startMotion=function(t,e){for(var i=null,r=this.motions.length,o=0;o<r;++o)null!=(i=this.motions[o])&&(i._$qS(i._$w0.getFadeOut()),this._$eb&&a._$Ji("MotionQueueManager[size:%2d]->startMotion() / start _$K _$3 (m%d)\n",r,i._$sr));if(null==t)return-1;(i=new ft)._$w0=t,this.motions.push(i);var n=i._$sr;return this._$eb&&a._$Ji("MotionQueueManager[size:%2d]->startMotion() / new _$w0 (m%d)\n",r,n),n},ct.prototype.updateParam=function(t){try{for(var e=!1,i=0;i<this.motions.length;i++){var r=this.motions[i];if(null!=r){var o=r._$w0;null!=o?(o.updateParam(t,r),e=!0,r.isFinished()&&(this._$eb&&a._$Ji("MotionQueueManager[size:%2d]->updateParam() / _$T0 _$w0 (m%d)\n",this.motions.length-1,r._$sr),this.motions.splice(i,1),i--)):(this.motions=this.motions.splice(i,1),i--)}else this.motions.splice(i,1),i--}return e}catch(t){return a._$li(t),!0}},ct.prototype.isFinished=function(t){if(arguments.length>=1){for(var e=0;e<this.motions.length;e++){if(null!=(i=this.motions[e])&&(i._$sr==t&&!i.isFinished()))return!1}return!0}for(e=0;e<this.motions.length;e++){var i;if(null!=(i=this.motions[e])){if(null!=i._$w0){if(!i.isFinished())return!1}else this.motions.splice(e,1),e--}else this.motions.splice(e,1),e--}return!0},ct.prototype.stopAllMotions=function(){for(var t=0;t<this.motions.length;t++){var e=this.motions[t];if(null!=e){e._$w0;this.motions.splice(t,1),t--}else this.motions.splice(t,1),t--}},ct.prototype._$Zr=function(t){this._$eb=t},ct.prototype._$e=function(){console.log("-- _$R --\n");for(var t=0;t<this.motions.length;t++){var e=this.motions[t]._$w0;console.log("MotionQueueEnt[%d] :: %s\n",this.motions.length,e.toString())}};function ft(){this._$w0=null,this._$AT=!0,this._$9L=!1,this._$z2=-1,this._$bs=-1,this._$Do=-1,this._$sr=null,this._$sr=ft._$Gs++}ft._$Gs=0,ft.prototype.isFinished=function(){return this._$9L},ft.prototype._$qS=function(t){var e=A.getUserTimeMSec()+t;(this._$Do<0||e<this._$Do)&&(this._$Do=e)},ft.prototype._$Bs=function(){return this._$sr};function gt(){this.m=new Array(1,0,0,0,1,0,0,0,1)}gt.prototype.setContext=function(t){var e=this.m;t.transform(e[0],e[1],e[3],e[4],e[6],e[7])},gt.prototype.toString=function(){for(var t="LDTransform { ",e=0;e<9;e++)t+=this.m[e].toFixed(2)+" ,";return t+=" }"},gt.prototype.identity=function(){var t=this.m;t[0]=t[4]=t[8]=1,t[1]=t[2]=t[3]=t[5]=t[6]=t[7]=0},gt.prototype._$PS=function(t,e,i){null==i&&(i=new Array(0,0));var r=this.m;return i[0]=r[0]*t+r[3]*e+r[6],i[1]=r[1]*t+r[4]*e+r[7],i},gt.prototype._$P2=function(t){t||(t=new gt);var e=this.m,i=e[0],r=e[1],o=e[2],n=e[3],s=e[4],a=e[5],_=e[6],h=e[7],l=e[8],$=i*s*l+r*a*_+o*n*h-i*a*h-o*s*_-r*n*l;if(0==$)return null;var u=1/$;return t.m[0]=u*(s*l-h*a),t.m[1]=u*(h*o-r*l),t.m[2]=u*(r*a-s*o),t.m[3]=u*(_*a-n*l),t.m[4]=u*(i*l-_*o),t.m[5]=u*(n*o-i*a),t.m[6]=u*(n*h-_*s),t.m[7]=u*(_*r-i*h),t.m[8]=u*(i*s-n*r),t},gt.prototype.transform=function(t,e,i){null==i&&(i=new Array(0,0));var r=this.m;return i[0]=r[0]*t+r[3]*e+r[6],i[1]=r[1]*t+r[4]*e+r[7],i},gt.prototype.translate=function(t,e){var i=this.m;i[6]=i[0]*t+i[3]*e+i[6],i[7]=i[1]*t+i[4]*e+i[7],i[8]=i[2]*t+i[5]*e+i[8]},gt.prototype.scale=function(t,e){var i=this.m;i[0]*=t,i[1]*=t,i[2]*=t,i[3]*=e,i[4]*=e,i[5]*=e},gt.prototype.shear=function(t,e){var i=this.m,r=i[0]+i[3]*e,o=i[1]+i[4]*e,n=i[2]+i[5]*e;i[3]=i[0]*t+i[3],i[4]=i[1]*t+i[4],i[5]=i[2]*t+i[5],i[0]=r,i[1]=o,i[2]=n},gt.prototype.rotate=function(t){var e=this.m,i=Math.cos(t),r=Math.sin(t),o=e[0]*i+e[3]*r,n=e[1]*i+e[4]*r,s=e[2]*i+e[5]*r;e[3]=-e[0]*r+e[3]*i,e[4]=-e[1]*r+e[4]*i,e[5]=-e[2]*r+e[5]*i,e[0]=o,e[1]=n,e[2]=s},gt.prototype.concatenate=function(t){var e=this.m,i=t.m,r=e[0]*i[0]+e[3]*i[1]+e[6]*i[2],o=e[1]*i[0]+e[4]*i[1]+e[7]*i[2],n=e[2]*i[0]+e[5]*i[1]+e[8]*i[2],s=e[0]*i[3]+e[3]*i[4]+e[6]*i[5],a=e[1]*i[3]+e[4]*i[4]+e[7]*i[5],_=e[2]*i[3]+e[5]*i[4]+e[8]*i[5],h=e[0]*i[6]+e[3]*i[7]+e[6]*i[8],l=e[1]*i[6]+e[4]*i[7]+e[7]*i[8],$=e[2]*i[6]+e[5]*i[7]+e[8]*i[8];m[0]=r,m[1]=o,m[2]=n,m[3]=s,m[4]=a,m[5]=_,m[6]=h,m[7]=l,m[8]=$};function dt(t){i||it.prototype.constructor.call(this,t)}dt.prototype=new it,dt._$eT=null,dt._$tP=new Object,dt._$2o=function(){return null==dt._$eT&&(dt._$eT=dt.getID("DST_BASE")),dt._$eT},dt._$27=function(){dt._$tP.clear(),dt._$eT=null},dt.getID=function(t){var e=dt._$tP[t];return null==e&&(e=new dt(t),dt._$tP[t]=e),e},dt.prototype._$3s=function(){return new dt};function yt(t){i||(M.prototype.constructor.call(this),this.textures=new Array,this.transform=null,this.gl=null,this.glno=t,this.firstDraw=!0,this.anisotropyExt=null,this.maxAnisotropy=0,this._$As=32,this._$Gr=!1,this._$NT=null,this._$vS=null,this._$no=null,this.vertShader=null,this.fragShader=null,this.vertShaderOff=null,this.fragShaderOff=null)}yt.prototype=new M,yt._$9r=function(t){return new Float32Array(t)},yt._$vb=function(t){return new Int16Array(t)},yt._$cr=function(t,e){return null==t||t._$yL()<e.length?((t=yt._$9r(2*e.length)).put(e),t._$oT(0)):(t.clear(),t.put(e),t._$oT(0)),t},yt._$mb=function(t,e){return null==t||t._$yL()<e.length?((t=yt._$vb(2*e.length)).put(e),t._$oT(0)):(t.clear(),t.put(e),t._$oT(0)),t},yt._$Hs=function(){return this._$Gr},yt._$as=function(t){this._$Gr=t},yt.prototype.getGL=function(){return this.gl},yt.prototype.setGL=function(t){this.gl=t},yt.prototype.setTransform=function(t){this.transform=t},yt.prototype._$ZT=function(){var t=this.gl;this.firstDraw&&(this.initShader(),this.firstDraw=!1,this.anisotropyExt=t.getExtension("EXT_texture_filter_anisotropic")||t.getExtension("WEBKIT_EXT_texture_filter_anisotropic")||t.getExtension("MOZ_EXT_texture_filter_anisotropic"),this.anisotropyExt&&(this.maxAnisotropy=t.getParameter(this.anisotropyExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT))),t.disable(t.SCISSOR_TEST),t.disable(t.STENCIL_TEST),t.disable(t.DEPTH_TEST),t.frontFace(t.CW),t.enable(t.BLEND),t.colorMask(1,1,1,1),t.bindBuffer(t.ARRAY_BUFFER,null),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,null)},yt.prototype._$Uo=function(t,e,i,r,o,n,s,a){if(!(n<.01&&null==this.clipBufPre_clipContextMask)){n>.9&&at.EXPAND_W;var _=this.gl;if(null==this.gl)throw new Error("gl is null");var h=1*this._$C0*n,l=1*this._$tT*n,$=1*this._$WL*n,u=this._$lT*n;if(null!=this.clipBufPre_clipContextMask){_.frontFace(_.CCW),_.useProgram(this.shaderProgram),this._$vS=mt(_,this._$vS,r),this._$no=Tt(_,this._$no,i),_.enableVertexAttribArray(this.a_position_Loc),_.vertexAttribPointer(this.a_position_Loc,2,_.FLOAT,!1,0,0),this._$NT=mt(_,this._$NT,o),_.activeTexture(_.TEXTURE1),_.bindTexture(_.TEXTURE_2D,this.textures[t]),_.uniform1i(this.s_texture0_Loc,1),_.enableVertexAttribArray(this.a_texCoord_Loc),_.vertexAttribPointer(this.a_texCoord_Loc,2,_.FLOAT,!1,0,0),_.uniformMatrix4fv(this.u_matrix_Loc,!1,this.getClipBufPre_clipContextMask().matrixForMask);var p=this.getClipBufPre_clipContextMask().layoutChannelNo,c=this.getChannelFlagAsColor(p);_.uniform4f(this.u_channelFlag,c.r,c.g,c.b,c.a);var f=this.getClipBufPre_clipContextMask().layoutBounds;_.uniform4f(this.u_baseColor_Loc,2*f.x-1,2*f.y-1,2*f._$EL()-1,2*f._$5T()-1),_.uniform1i(this.u_maskFlag_Loc,!0)}else if(null!=this.getClipBufPre_clipContextDraw()){_.useProgram(this.shaderProgramOff),this._$vS=mt(_,this._$vS,r),this._$no=Tt(_,this._$no,i),_.enableVertexAttribArray(this.a_position_Loc_Off),_.vertexAttribPointer(this.a_position_Loc_Off,2,_.FLOAT,!1,0,0),this._$NT=mt(_,this._$NT,o),_.activeTexture(_.TEXTURE1),_.bindTexture(_.TEXTURE_2D,this.textures[t]),_.uniform1i(this.s_texture0_Loc_Off,1),_.enableVertexAttribArray(this.a_texCoord_Loc_Off),_.vertexAttribPointer(this.a_texCoord_Loc_Off,2,_.FLOAT,!1,0,0),_.uniformMatrix4fv(this.u_clipMatrix_Loc_Off,!1,this.getClipBufPre_clipContextDraw().matrixForDraw),_.uniformMatrix4fv(this.u_matrix_Loc_Off,!1,this.matrix4x4),_.activeTexture(_.TEXTURE2),_.bindTexture(_.TEXTURE_2D,at.fTexture[this.glno]),_.uniform1i(this.s_texture1_Loc_Off,2);p=this.getClipBufPre_clipContextDraw().layoutChannelNo,c=this.getChannelFlagAsColor(p);_.uniform4f(this.u_channelFlag_Loc_Off,c.r,c.g,c.b,c.a),_.uniform4f(this.u_baseColor_Loc_Off,h,l,$,u)}else _.useProgram(this.shaderProgram),this._$vS=mt(_,this._$vS,r),this._$no=Tt(_,this._$no,i),_.enableVertexAttribArray(this.a_position_Loc),_.vertexAttribPointer(this.a_position_Loc,2,_.FLOAT,!1,0,0),this._$NT=mt(_,this._$NT,o),_.activeTexture(_.TEXTURE1),_.bindTexture(_.TEXTURE_2D,this.textures[t]),_.uniform1i(this.s_texture0_Loc,1),_.enableVertexAttribArray(this.a_texCoord_Loc),_.vertexAttribPointer(this.a_texCoord_Loc,2,_.FLOAT,!1,0,0),_.uniformMatrix4fv(this.u_matrix_Loc,!1,this.matrix4x4),_.uniform4f(this.u_baseColor_Loc,h,l,$,u),_.uniform1i(this.u_maskFlag_Loc,!1);this.culling?this.gl.enable(_.CULL_FACE):this.gl.disable(_.CULL_FACE),this.gl.enable(_.BLEND);var g,d,y,m;if(null!=this.clipBufPre_clipContextMask)g=_.ONE,d=_.ONE_MINUS_SRC_ALPHA,y=_.ONE,m=_.ONE_MINUS_SRC_ALPHA;else switch(s){case lt._$ms:g=_.ONE,d=_.ONE_MINUS_SRC_ALPHA,y=_.ONE,m=_.ONE_MINUS_SRC_ALPHA;break;case lt._$ns:g=_.ONE,d=_.ONE,y=_.ZERO,m=_.ONE;break;case lt._$_s:g=_.DST_COLOR,d=_.ONE_MINUS_SRC_ALPHA,y=_.ZERO,m=_.ONE}_.blendEquationSeparate(_.FUNC_ADD,_.FUNC_ADD),_.blendFuncSeparate(g,d,y,m),this.anisotropyExt&&_.texParameteri(_.TEXTURE_2D,this.anisotropyExt.TEXTURE_MAX_ANISOTROPY_EXT,this.maxAnisotropy);var T=i.length;_.drawElements(_.TRIANGLES,T,_.UNSIGNED_SHORT,0),_.bindTexture(_.TEXTURE_2D,null)}};function mt(t,e,i){return null==e&&(e=t.createBuffer()),t.bindBuffer(t.ARRAY_BUFFER,e),t.bufferData(t.ARRAY_BUFFER,i,t.DYNAMIC_DRAW),e}function Tt(t,e,i){return null==e&&(e=t.createBuffer()),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,e),t.bufferData(t.ELEMENT_ARRAY_BUFFER,i,t.DYNAMIC_DRAW),e}yt.prototype._$Rs=function(){throw new Error("_$Rs")},yt.prototype._$Ds=function(t){throw new Error("_$Ds")},yt.prototype._$K2=function(){for(var t=0;t<this.textures.length;t++){0!=this.textures[t]&&(this.gl._$K2(1,this.textures,t),this.textures[t]=null)}},yt.prototype.setTexture=function(t,e){this.textures[t]=e},yt.prototype.initShader=function(){var t=this.gl;this.loadShaders2(),this.a_position_Loc=t.getAttribLocation(this.shaderProgram,"a_position"),this.a_texCoord_Loc=t.getAttribLocation(this.shaderProgram,"a_texCoord"),this.u_matrix_Loc=t.getUniformLocation(this.shaderProgram,"u_mvpMatrix"),this.s_texture0_Loc=t.getUniformLocation(this.shaderProgram,"s_texture0"),this.u_channelFlag=t.getUniformLocation(this.shaderProgram,"u_channelFlag"),this.u_baseColor_Loc=t.getUniformLocation(this.shaderProgram,"u_baseColor"),this.u_maskFlag_Loc=t.getUniformLocation(this.shaderProgram,"u_maskFlag"),this.a_position_Loc_Off=t.getAttribLocation(this.shaderProgramOff,"a_position"),this.a_texCoord_Loc_Off=t.getAttribLocation(this.shaderProgramOff,"a_texCoord"),this.u_matrix_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"u_mvpMatrix"),this.u_clipMatrix_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"u_ClipMatrix"),this.s_texture0_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"s_texture0"),this.s_texture1_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"s_texture1"),this.u_channelFlag_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"u_channelFlag"),this.u_baseColor_Loc_Off=t.getUniformLocation(this.shaderProgramOff,"u_baseColor")},yt.prototype.disposeShader=function(){var t=this.gl;this.shaderProgram&&(t.deleteProgram(this.shaderProgram),this.shaderProgram=null),this.shaderProgramOff&&(t.deleteProgram(this.shaderProgramOff),this.shaderProgramOff=null)},yt.prototype.compileShader=function(t,e){var i=this.gl,r=e,o=i.createShader(t);if(null==o)return a._$Ji("_$L0 to create shader"),null;i.shaderSource(o,r),i.compileShader(o);if(!i.getShaderParameter(o,i.COMPILE_STATUS)){var n=i.getShaderInfoLog(o);return a._$Ji("_$L0 to compile shader : "+n),i.deleteShader(o),null}return o},yt.prototype.loadShaders2=function(){var t=this.gl;if(this.shaderProgram=t.createProgram(),!this.shaderProgram)return!1;if(this.shaderProgramOff=t.createProgram(),!this.shaderProgramOff)return!1;if(this.vertShader=this.compileShader(t.VERTEX_SHADER,"attribute vec4     a_position;attribute vec2     a_texCoord;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform mat4       u_mvpMatrix;void main(){    gl_Position = u_mvpMatrix * a_position;    v_ClipPos = u_mvpMatrix * a_position;    v_texCoord = a_texCoord;}"),!this.vertShader)return a._$Ji("Vertex shader compile _$li!"),!1;if(this.vertShaderOff=this.compileShader(t.VERTEX_SHADER,"attribute vec4     a_position;attribute vec2     a_texCoord;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform mat4       u_mvpMatrix;uniform mat4       u_ClipMatrix;void main(){    gl_Position = u_mvpMatrix * a_position;    v_ClipPos = u_ClipMatrix * a_position;    v_texCoord = a_texCoord ;}"),!this.vertShaderOff)return a._$Ji("OffVertex shader compile _$li!"),!1;if(this.fragShader=this.compileShader(t.FRAGMENT_SHADER,"precision mediump float;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform sampler2D  s_texture0;uniform vec4       u_channelFlag;uniform vec4       u_baseColor;uniform bool       u_maskFlag;void main(){    vec4 smpColor;     if(u_maskFlag){        float isInside =             step(u_baseColor.x, v_ClipPos.x/v_ClipPos.w)          * step(u_baseColor.y, v_ClipPos.y/v_ClipPos.w)          * step(v_ClipPos.x/v_ClipPos.w, u_baseColor.z)          * step(v_ClipPos.y/v_ClipPos.w, u_baseColor.w);        smpColor = u_channelFlag * texture2D(s_texture0 , v_texCoord).a * isInside;    }else{        smpColor = texture2D(s_texture0 , v_texCoord) * u_baseColor;    }    gl_FragColor = smpColor;}"),!this.fragShader)return a._$Ji("Fragment shader compile _$li!"),!1;if(this.fragShaderOff=this.compileShader(t.FRAGMENT_SHADER,"precision mediump float ;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform sampler2D  s_texture0;uniform sampler2D  s_texture1;uniform vec4       u_channelFlag;uniform vec4       u_baseColor ;void main(){    vec4 col_formask = texture2D(s_texture0, v_texCoord) * u_baseColor;    vec4 clipMask = texture2D(s_texture1, v_ClipPos.xy / v_ClipPos.w) * u_channelFlag;    float maskVal = clipMask.r + clipMask.g + clipMask.b + clipMask.a;    col_formask = col_formask * maskVal;    gl_FragColor = col_formask;}"),!this.fragShaderOff)return a._$Ji("OffFragment shader compile _$li!"),!1;t.attachShader(this.shaderProgram,this.vertShader),t.attachShader(this.shaderProgram,this.fragShader),t.attachShader(this.shaderProgramOff,this.vertShaderOff),t.attachShader(this.shaderProgramOff,this.fragShaderOff),t.linkProgram(this.shaderProgram),t.linkProgram(this.shaderProgramOff);if(!t.getProgramParameter(this.shaderProgram,t.LINK_STATUS)){var e=t.getProgramInfoLog(this.shaderProgram);return a._$Ji("_$L0 to link program: "+e),this.vertShader&&(t.deleteShader(this.vertShader),this.vertShader=0),this.fragShader&&(t.deleteShader(this.fragShader),this.fragShader=0),this.shaderProgram&&(t.deleteProgram(this.shaderProgram),this.shaderProgram=0),this.vertShaderOff&&(t.deleteShader(this.vertShaderOff),this.vertShaderOff=0),this.fragShaderOff&&(t.deleteShader(this.fragShaderOff),this.fragShaderOff=0),this.shaderProgramOff&&(t.deleteProgram(this.shaderProgramOff),this.shaderProgramOff=0),!1}return!0},yt.prototype.createFramebuffer=function(){var t=this.gl,e=at.clippingMaskBufferSize,i=t.createFramebuffer();t.bindFramebuffer(t.FRAMEBUFFER,i);var r=t.createRenderbuffer();t.bindRenderbuffer(t.RENDERBUFFER,r),t.renderbufferStorage(t.RENDERBUFFER,t.RGBA4,e,e),t.framebufferRenderbuffer(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.RENDERBUFFER,r);var o=t.createTexture();return t.bindTexture(t.TEXTURE_2D,o),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,e,e,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,o,0),t.bindTexture(t.TEXTURE_2D,null),t.bindRenderbuffer(t.RENDERBUFFER,null),t.bindFramebuffer(t.FRAMEBUFFER,null),at.fTexture[this.glno]=o,{framebuffer:i,renderbuffer:r,texture:at.fTexture[this.glno]}};function Pt(t){i||(this._$P=new Int8Array(8),this._$R0=new DataView(this._$P.buffer),this._$3i=new Int8Array(1e3),this._$hL=0,this._$v0=0,this._$S2=0,this._$Ko=new Array,this._$T=t,this._$F=0)}Pt.prototype._$fP=function(){var t,e,i,r=this._$ST();if(0==(128&r))return 255&r;if(0==(128&(t=this._$ST())))return(127&r)<<7|127&t;if(0==(128&(e=this._$ST())))return(127&r)<<14|(127&t)<<7|255&e;if(0==(128&(i=this._$ST())))return(127&r)<<21|(127&t)<<14|(127&e)<<7|255&i;throw new ht("_$L _$0P  _")},Pt.prototype.getFormatVersion=function(){return this._$S2},Pt.prototype._$gr=function(t){this._$S2=t},Pt.prototype._$3L=function(){return this._$fP()},Pt.prototype._$mP=function(){return this._$zT(),this._$F+=8,this._$T.getFloat64(this._$F-8)},Pt.prototype._$_T=function(){return this._$zT(),this._$F+=4,this._$T.getFloat32(this._$F-4)},Pt.prototype._$6L=function(){return this._$zT(),this._$F+=4,this._$T.getInt32(this._$F-4)},Pt.prototype._$ST=function(){return this._$zT(),this._$T.getInt8(this._$F++)},Pt.prototype._$9T=function(){return this._$zT(),this._$F+=2,this._$T.getInt16(this._$F-2)},Pt.prototype._$2T=function(){throw this._$zT(),this._$F+=8,new ht("_$L _$q read long")},Pt.prototype._$po=function(){return this._$zT(),0!=this._$T.getInt8(this._$F++)};var St=!0;Pt.prototype._$bT=function(){this._$zT();var t=this._$3L(),e=null;if(St)try{var i=new ArrayBuffer(2*t);e=new Uint16Array(i);for(var r=0;r<t;++r)e[r]=this._$T.getUint8(this._$F++);return String.fromCharCode.apply(null,e)}catch(t){St=!1}try{var o=new Array;if(null==e)for(r=0;r<t;++r)o[r]=this._$T.getUint8(this._$F++);else for(r=0;r<t;++r)o[r]=e[r];return String.fromCharCode.apply(null,o)}catch(t){console.log("read utf8 / _$rT _$L0 !! : "+t)}},Pt.prototype._$cS=function(){this._$zT();for(var t=this._$3L(),e=new Int32Array(t),i=0;i<t;i++)e[i]=this._$T.getInt32(this._$F),this._$F+=4;return e},Pt.prototype._$Tb=function(){this._$zT();for(var t=this._$3L(),e=new Float32Array(t),i=0;i<t;i++)e[i]=this._$T.getFloat32(this._$F),this._$F+=4;return e},Pt.prototype._$5b=function(){this._$zT();for(var t=this._$3L(),e=new Float64Array(t),i=0;i<t;i++)e[i]=this._$T.getFloat64(this._$F),this._$F+=8;return e},Pt.prototype._$nP=function(){return this._$Jb(-1)},Pt.prototype._$Jb=function(t){if(this._$zT(),t<0&&(t=this._$3L()),t==G._$7P){var e=this._$6L();if(0<=e&&e<this._$Ko.length)return this._$Ko[e];throw new ht("_$sL _$4i @_$m0")}var i=this._$4b(t);return this._$Ko.push(i),i},Pt.prototype._$4b=function(t){if(0==t)return null;if(50==t){var e=this._$bT();return n=b.getID(e)}if(51==t){e=this._$bT();return n=dt.getID(e)}if(134==t){e=this._$bT();return n=h.getID(e)}if(60==t){e=this._$bT();return n=l.getID(e)}if(t>=48){var r=G._$9o(t);return null!=r?(r._$F0(this),r):null}switch(t){case 1:return this._$bT();case 10:return new function(){i||(this.color=null)}(this._$6L(),!0);case 11:return new P(this._$mP(),this._$mP(),this._$mP(),this._$mP());case 12:return new P(this._$_T(),this._$_T(),this._$_T(),this._$_T());case 13:return new v(this._$mP(),this._$mP());case 14:return new v(this._$_T(),this._$_T());case 15:for(var o=this._$3L(),n=new Array(o),s=0;s<o;s++)n[s]=this._$nP();return n;case 17:return n=new R(this._$mP(),this._$mP(),this._$mP(),this._$mP(),this._$mP(),this._$mP());case 21:return new _(this._$6L(),this._$6L(),this._$6L(),this._$6L());case 22:return new ut(this._$6L(),this._$6L());case 23:throw new Error("_$L _$ro ");case 16:case 25:return this._$cS();case 26:return this._$5b();case 27:return this._$Tb();case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 18:case 19:case 20:case 24:case 28:throw new ht("_$6 _$q : _$nP() of 2-9 ,18,19,20,24,28 : "+t);default:throw new ht("_$6 _$q : _$nP() NO _$i : "+t)}},Pt.prototype._$8L=function(){return 0==this._$hL?this._$v0=this._$ST():8==this._$hL&&(this._$v0=this._$ST(),this._$hL=0),1==(this._$v0>>7-this._$hL++&1)},Pt.prototype._$zT=function(){0!=this._$hL&&(this._$hL=0)};function vt(){}vt._$2S=Math.PI/180,vt._$bS=Math.PI/180,vt._$wS=180/Math.PI,vt._$NS=180/Math.PI,vt.PI_F=Math.PI,vt._$kT=[0,.012368,.024734,.037097,.049454,.061803,.074143,.086471,.098786,.111087,.12337,.135634,.147877,.160098,.172295,.184465,.196606,.208718,.220798,.232844,.244854,.256827,.268761,.280654,.292503,.304308,.316066,.327776,.339436,.351044,.362598,.374097,.385538,.396921,.408243,.419502,.430697,.441826,.452888,.463881,.474802,.485651,.496425,.507124,.517745,.528287,.538748,.549126,.559421,.56963,.579752,.589785,.599728,.609579,.619337,.629,.638567,.648036,.657406,.666676,.675843,.684908,.693867,.70272,.711466,.720103,.72863,.737045,.745348,.753536,.76161,.769566,.777405,.785125,.792725,.800204,.807561,.814793,.821901,.828884,.835739,.842467,.849066,.855535,.861873,.868079,.874153,.880093,.885898,.891567,.897101,.902497,.907754,.912873,.917853,.922692,.92739,.931946,.936359,.940629,.944755,.948737,.952574,.956265,.959809,.963207,.966457,.96956,.972514,.97532,.977976,.980482,.982839,.985045,.987101,.989006,.990759,.992361,.993811,.995109,.996254,.997248,.998088,.998776,.999312,.999694,.999924,1],vt._$92=function(t,e){var i=Math.atan2(t[1],t[0]),r=Math.atan2(e[1],e[0]);return vt._$tS(i,r)},vt._$tS=function(t,e){for(var i=t-e;i<-Math.PI;)i+=2*Math.PI;for(;i>Math.PI;)i-=2*Math.PI;return i},vt._$9=function(t){return Math.sin(t)},vt.fcos=function(t){return Math.cos(t)};function Lt(t){i||(this._$e0=null,this._$IP=null,this._$Us=null,this._$7s=null,this._$IS=[!1],this._$VS=null,this._$AT=!0,this.baseOpacity=1,this.clipBufPre_clipContext=null,this._$e0=t)}Lt.prototype._$u2=function(){return this._$IS[0]},Lt.prototype._$yo=function(){return this._$AT&&!this._$IS[0]},Lt.prototype._$GT=function(){return this._$e0};function Mt(){}Mt._$W2=0,Mt.SYSTEM_INFO=null,Mt.USER_AGENT=navigator.userAgent,Mt.isIPhone=function(){return Mt.SYSTEM_INFO||Mt.setup(),Mt.SYSTEM_INFO._isIPhone},Mt.isIOS=function(){return Mt.SYSTEM_INFO||Mt.setup(),Mt.SYSTEM_INFO._isIPhone||Mt.SYSTEM_INFO._isIPad},Mt.isAndroid=function(){return Mt.SYSTEM_INFO||Mt.setup(),Mt.SYSTEM_INFO._isAndroid},Mt.getOSVersion=function(){return Mt.SYSTEM_INFO||Mt.setup(),Mt.SYSTEM_INFO.version},Mt.getOS=function(){return Mt.SYSTEM_INFO||Mt.setup(),Mt.SYSTEM_INFO._isIPhone||Mt.SYSTEM_INFO._isIPad?"iOS":Mt.SYSTEM_INFO._isAndroid?"Android":"_$Q0 OS"},Mt.setup=function(){var t=Mt.USER_AGENT;function e(t,e){for(var i=t.substring(e).split(/[ _,;\.]/),r=0,o=0;o<=2&&!isNaN(i[o]);o++){var n=parseInt(i[o]);if(n<0||n>999){a._$li("err : "+n+" @UtHtml5.setup()"),r=0;break}r+=n*Math.pow(1e3,2-o)}return r}var i,r=Mt.SYSTEM_INFO={userAgent:t};if((i=t.indexOf("iPhone OS "))>=0)r.os="iPhone",r._isIPhone=!0,r.version=e(t,i+"iPhone OS ".length);else if((i=t.indexOf("iPad"))>=0){if((i=t.indexOf("CPU OS"))<0)return void a._$li(" err : "+t+" @UtHtml5.setup()");r.os="iPad",r._isIPad=!0,r.version=e(t,i+"CPU OS ".length)}else(i=t.indexOf("Android"))>=0?(r.os="Android",r._isAndroid=!0,r.version=e(t,i+"Android ".length)):(r.os="-",r.version=-1)},at.init();i=!1;e.UtSystem=A,e.UtDebug=a,e.LDTransform=gt,e.LDGL=ot,e.Live2D=at,e.Live2DModelWebGL=pt,e.Live2DModelJS=q,e.Live2DMotion=J,e.MotionQueueManager=ct,e.PhysicsHair=u,e.AMotion=s,e.PartsDataID=h,e.DrawDataID=b,e.BaseDataID=dt,e.ParamID=l}).call(e,i(83))},78:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.L2DBaseModel=e.L2DExpressionMotion=e.L2DExpressionParam=e.L2DEyeBlink=e.EYE_STATE=e.L2DMatrix44=e.L2DModelMatrix=e.L2DMotionManager=e.L2DPhysics=e.L2DPartsParam=e.L2DPose=e.L2DViewMatrix=e.Live2DFramework=e.L2DTargetPoint=void 0;var r=i(77);function o(){this.live2DModel=null,this.modelMatrix=null,this.eyeBlink=null,this.physics=null,this.pose=null,this.debugMode=!1,this.initialized=!1,this.updating=!1,this.alpha=1,this.accAlpha=0,this.lipSync=!1,this.lipSyncValue=0,this.accelX=0,this.accelY=0,this.accelZ=0,this.dragX=0,this.dragY=0,this.startTimeMSec=null,this.mainMotionManager=new u,this.expressionManager=new u,this.motions={},this.expressions={},this.isTexLoaded=!1}var n=0;o.prototype.getModelMatrix=function(){return this.modelMatrix},o.prototype.setAlpha=function(t){t>.999&&(t=1),t<.001&&(t=0),this.alpha=t},o.prototype.getAlpha=function(){return this.alpha},o.prototype.isInitialized=function(){return this.initialized},o.prototype.setInitialized=function(t){this.initialized=t},o.prototype.isUpdating=function(){return this.updating},o.prototype.setUpdating=function(t){this.updating=t},o.prototype.getLive2DModel=function(){return this.live2DModel},o.prototype.setLipSync=function(t){this.lipSync=t},o.prototype.setLipSyncValue=function(t){this.lipSyncValue=t},o.prototype.setAccel=function(t,e,i){this.accelX=t,this.accelY=e,this.accelZ=i},o.prototype.setDrag=function(t,e){this.dragX=t,this.dragY=e},o.prototype.getMainMotionManager=function(){return this.mainMotionManager},o.prototype.getExpressionManager=function(){return this.expressionManager},o.prototype.loadModelData=function(t,e){var i=y.getPlatformManager();this.debugMode&&i.log("Load model : "+t);var o=this;i.loadLive2DModel(t,function(t){o.live2DModel=t,o.live2DModel.saveParam();0==r.Live2D.getError()?(o.modelMatrix=new $(o.live2DModel.getCanvasWidth(),o.live2DModel.getCanvasHeight()),o.modelMatrix.setWidth(2),o.modelMatrix.setCenterPosition(0,0),e(o.live2DModel)):console.error("Error : Failed to loadModelData().")})},o.prototype.loadTexture=function(t,e,i){n++;var r=y.getPlatformManager();this.debugMode&&r.log("Load Texture : "+e);var o=this;r.loadTexture(this.live2DModel,t,e,function(){0==--n&&(o.isTexLoaded=!0),"function"==typeof i&&i()})},o.prototype.loadMotion=function(t,e,i){var o=y.getPlatformManager();this.debugMode&&o.log("Load Motion : "+e);var n=null,s=this;o.loadBytes(e,function(e){n=r.Live2DMotion.loadMotion(e),null!=t&&(s.motions[t]=n),i(n)})},o.prototype.loadExpression=function(t,e,i){var r=y.getPlatformManager();this.debugMode&&r.log("Load Expression : "+e);var o=this;r.loadBytes(e,function(e){null!=t&&(o.expressions[t]=s.loadJson(e)),"function"==typeof i&&i()})},o.prototype.loadPose=function(t,e){var i=y.getPlatformManager();this.debugMode&&i.log("Load Pose : "+t);var r=this;try{i.loadBytes(t,function(t){r.pose=c.load(t),"function"==typeof e&&e()})}catch(t){console.warn(t)}},o.prototype.loadPhysics=function(t){var e=y.getPlatformManager();this.debugMode&&e.log("Load Physics : "+t);var i=this;try{e.loadBytes(t,function(t){i.physics=p.load(t)})}catch(t){console.warn(t)}},o.prototype.hitTestSimple=function(t,e,i){if(null===this.live2DModel)return!1;var r=this.live2DModel.getDrawDataIndex(t);if(r<0)return!1;for(var o=this.live2DModel.getTransformedPoints(r),n=this.live2DModel.getCanvasWidth(),s=0,a=this.live2DModel.getCanvasHeight(),_=0,h=0;h<o.length;h+=2){var l=o[h],$=o[h+1];l<n&&(n=l),l>s&&(s=l),$<a&&(a=$),$>_&&(_=$)}var u=this.modelMatrix.invertTransformX(e),p=this.modelMatrix.invertTransformY(i);return n<=u&&u<=s&&a<=p&&p<=_};function s(){r.AMotion.prototype.constructor.call(this),this.paramList=new Array}s.prototype=new r.AMotion,s.EXPRESSION_DEFAULT="DEFAULT",s.TYPE_SET=0,s.TYPE_ADD=1,s.TYPE_MULT=2,s.loadJson=function(t){var e=new s,i=y.getPlatformManager().jsonParseFromBytes(t);if(e.setFadeIn(parseInt(i.fade_in)>0?parseInt(i.fade_in):1e3),e.setFadeOut(parseInt(i.fade_out)>0?parseInt(i.fade_out):1e3),null==i.params)return e;var r=i.params,o=r.length;e.paramList=[];for(var n=0;n<o;n++){var _=r[n],h=_.id.toString(),l=parseFloat(_.val),$=s.TYPE_ADD,u=null!=_.calc?_.calc.toString():"add";if(($="add"===u?s.TYPE_ADD:"mult"===u?s.TYPE_MULT:"set"===u?s.TYPE_SET:s.TYPE_ADD)==s.TYPE_ADD){l-=p=null==_.def?0:parseFloat(_.def)}else if($==s.TYPE_MULT){var p;0==(p=null==_.def?1:parseFloat(_.def))&&(p=1),l/=p}var c=new a;c.id=h,c.type=$,c.value=l,e.paramList.push(c)}return e},s.prototype.updateParamExe=function(t,e,i,r){for(var o=this.paramList.length-1;o>=0;--o){var n=this.paramList[o];n.type==s.TYPE_ADD?t.addToParamFloat(n.id,n.value,i):n.type==s.TYPE_MULT?t.multParamFloat(n.id,n.value,i):n.type==s.TYPE_SET&&t.setParamFloat(n.id,n.value,i)}};function a(){this.id="",this.type=-1,this.value=null}function _(){this.nextBlinkTime=null,this.stateStartTime=null,this.blinkIntervalMsec=null,this.eyeState=h.STATE_FIRST,this.blinkIntervalMsec=4e3,this.closingMotionMsec=100,this.closedMotionMsec=50,this.openingMotionMsec=150,this.closeIfZero=!0,this.eyeID_L="PARAM_EYE_L_OPEN",this.eyeID_R="PARAM_EYE_R_OPEN"}_.prototype.calcNextBlink=function(){return r.UtSystem.getUserTimeMSec()+Math.random()*(2*this.blinkIntervalMsec-1)},_.prototype.setInterval=function(t){this.blinkIntervalMsec=t},_.prototype.setEyeMotion=function(t,e,i){this.closingMotionMsec=t,this.closedMotionMsec=e,this.openingMotionMsec=i},_.prototype.updateParam=function(t){var e,i=r.UtSystem.getUserTimeMSec(),o=0;switch(this.eyeState){case h.STATE_CLOSING:(o=(i-this.stateStartTime)/this.closingMotionMsec)>=1&&(o=1,this.eyeState=h.STATE_CLOSED,this.stateStartTime=i),e=1-o;break;case h.STATE_CLOSED:(o=(i-this.stateStartTime)/this.closedMotionMsec)>=1&&(this.eyeState=h.STATE_OPENING,this.stateStartTime=i),e=0;break;case h.STATE_OPENING:(o=(i-this.stateStartTime)/this.openingMotionMsec)>=1&&(o=1,this.eyeState=h.STATE_INTERVAL,this.nextBlinkTime=this.calcNextBlink()),e=o;break;case h.STATE_INTERVAL:this.nextBlinkTime<i&&(this.eyeState=h.STATE_CLOSING,this.stateStartTime=i),e=1;break;case h.STATE_FIRST:default:this.eyeState=h.STATE_INTERVAL,this.nextBlinkTime=this.calcNextBlink(),e=1}this.closeIfZero||(e=-e),t.setParamFloat(this.eyeID_L,e),t.setParamFloat(this.eyeID_R,e)};var h=function(){};h.STATE_FIRST="STATE_FIRST",h.STATE_INTERVAL="STATE_INTERVAL",h.STATE_CLOSING="STATE_CLOSING",h.STATE_CLOSED="STATE_CLOSED",h.STATE_OPENING="STATE_OPENING";function l(){this.tr=new Float32Array(16),this.identity()}l.mul=function(t,e,i){var r,o,n,s=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(r=0;r<4;r++)for(o=0;o<4;o++)for(n=0;n<4;n++)s[r+4*o]+=t[r+4*n]*e[n+4*o];for(r=0;r<16;r++)i[r]=s[r]},l.prototype.identity=function(){for(var t=0;t<16;t++)this.tr[t]=t%5==0?1:0},l.prototype.getArray=function(){return this.tr},l.prototype.getCopyMatrix=function(){return new Float32Array(this.tr)},l.prototype.setMatrix=function(t){if(null!=this.tr&&this.tr.length==this.tr.length)for(var e=0;e<16;e++)this.tr[e]=t[e]},l.prototype.getScaleX=function(){return this.tr[0]},l.prototype.getScaleY=function(){return this.tr[5]},l.prototype.transformX=function(t){return this.tr[0]*t+this.tr[12]},l.prototype.transformY=function(t){return this.tr[5]*t+this.tr[13]},l.prototype.invertTransformX=function(t){return(t-this.tr[12])/this.tr[0]},l.prototype.invertTransformY=function(t){return(t-this.tr[13])/this.tr[5]},l.prototype.multTranslate=function(t,e){var i=[1,0,0,0,0,1,0,0,0,0,1,0,t,e,0,1];l.mul(i,this.tr,this.tr)},l.prototype.translate=function(t,e){this.tr[12]=t,this.tr[13]=e},l.prototype.translateX=function(t){this.tr[12]=t},l.prototype.translateY=function(t){this.tr[13]=t},l.prototype.multScale=function(t,e){var i=[t,0,0,0,0,e,0,0,0,0,1,0,0,0,0,1];l.mul(i,this.tr,this.tr)},l.prototype.scale=function(t,e){this.tr[0]=t,this.tr[5]=e};function $(t,e){l.prototype.constructor.call(this),this.width=t,this.height=e}$.prototype=new l,$.prototype.setPosition=function(t,e){this.translate(t,e)},$.prototype.setCenterPosition=function(t,e){var i=this.width*this.getScaleX(),r=this.height*this.getScaleY();this.translate(t-i/2,e-r/2)},$.prototype.top=function(t){this.setY(t)},$.prototype.bottom=function(t){var e=this.height*this.getScaleY();this.translateY(t-e)},$.prototype.left=function(t){this.setX(t)},$.prototype.right=function(t){var e=this.width*this.getScaleX();this.translateX(t-e)},$.prototype.centerX=function(t){var e=this.width*this.getScaleX();this.translateX(t-e/2)},$.prototype.centerY=function(t){var e=this.height*this.getScaleY();this.translateY(t-e/2)},$.prototype.setX=function(t){this.translateX(t)},$.prototype.setY=function(t){this.translateY(t)},$.prototype.setHeight=function(t){var e=t/this.height,i=-e;this.scale(e,i)},$.prototype.setWidth=function(t){var e=t/this.width,i=-e;this.scale(e,i)};function u(){r.MotionQueueManager.prototype.constructor.call(this),this.currentPriority=null,this.reservePriority=null,this.super=r.MotionQueueManager.prototype}u.prototype=new r.MotionQueueManager,u.prototype.getCurrentPriority=function(){return this.currentPriority},u.prototype.getReservePriority=function(){return this.reservePriority},u.prototype.reserveMotion=function(t){return!(this.reservePriority>=t)&&(!(this.currentPriority>=t)&&(this.reservePriority=t,!0))},u.prototype.setReservePriority=function(t){this.reservePriority=t},u.prototype.updateParam=function(t){var e=r.MotionQueueManager.prototype.updateParam.call(this,t);return this.isFinished()&&(this.currentPriority=0),e},u.prototype.startMotionPrio=function(t,e){return e==this.reservePriority&&(this.reservePriority=0),this.currentPriority=e,this.startMotion(t,!1)};function p(){this.physicsList=new Array,this.startTimeMSec=r.UtSystem.getUserTimeMSec()}p.load=function(t){for(var e=new p,i=y.getPlatformManager().jsonParseFromBytes(t).physics_hair,o=i.length,n=0;n<o;n++){var s=i[n],a=new r.PhysicsHair,_=s.setup,h=parseFloat(_.length),l=parseFloat(_.regist),$=parseFloat(_.mass);a.setup(h,l,$);for(var u=s.src,c=u.length,f=0;f<c;f++){var g=u[f],d=g.id,m=r.PhysicsHair.Src.SRC_TO_X;"x"===(L=g.ptype)?m=r.PhysicsHair.Src.SRC_TO_X:"y"===L?m=r.PhysicsHair.Src.SRC_TO_Y:"angle"===L?m=r.PhysicsHair.Src.SRC_TO_G_ANGLE:r.UtDebug.error("live2d","Invalid parameter:PhysicsHair.Src");var T=parseFloat(g.scale),P=parseFloat(g.weight);a.addSrcParam(m,d,T,P)}var S=s.targets,v=S.length;for(f=0;f<v;f++){var L,M=S[f];d=M.id,m=r.PhysicsHair.Target.TARGET_FROM_ANGLE;"angle"===(L=M.ptype)?m=r.PhysicsHair.Target.TARGET_FROM_ANGLE:"angle_v"===L?m=r.PhysicsHair.Target.TARGET_FROM_ANGLE_V:r.UtDebug.error("live2d","Invalid parameter:PhysicsHair.Target");T=parseFloat(M.scale),P=parseFloat(M.weight);a.addTargetParam(m,d,T,P)}e.physicsList.push(a)}return e},p.prototype.updateParam=function(t){for(var e=r.UtSystem.getUserTimeMSec()-this.startTimeMSec,i=0;i<this.physicsList.length;i++)this.physicsList[i].update(t,e)};function c(){this.lastTime=0,this.lastModel=null,this.partsGroups=new Array}c.load=function(t){for(var e=new c,i=y.getPlatformManager().jsonParseFromBytes(t).parts_visible,r=i.length,o=0;o<r;o++){for(var n=i[o].group,s=n.length,a=new Array,_=0;_<s;_++){var h=n[_],l=new f(h.id);if(a[_]=l,null!=h.link){var $=h.link,u=$.length;l.link=new Array;for(var p=0;p<u;p++){var g=new f($[p]);l.link.push(g)}}}e.partsGroups.push(a)}return e},c.prototype.updateParam=function(t){if(null!=t){t!=this.lastModel&&this.initParam(t),this.lastModel=t;var e=r.UtSystem.getUserTimeMSec(),i=0==this.lastTime?0:(e-this.lastTime)/1e3;this.lastTime=e,i<0&&(i=0);for(var o=0;o<this.partsGroups.length;o++)this.normalizePartsOpacityGroup(t,this.partsGroups[o],i),this.copyOpacityOtherParts(t,this.partsGroups[o])}},c.prototype.initParam=function(t){if(null!=t)for(var e=0;e<this.partsGroups.length;e++)for(var i=this.partsGroups[e],r=0;r<i.length;r++){i[r].initIndex(t);var o=i[r].partsIndex,n=i[r].paramIndex;if(!(o<0)){var s=0!=t.getParamFloat(n);if(t.setPartsOpacity(o,s?1:0),t.setParamFloat(n,s?1:0),null!=i[r].link)for(var a=0;a<i[r].link.length;a++)i[r].link[a].initIndex(t)}}},c.prototype.normalizePartsOpacityGroup=function(t,e,i){for(var r=-1,o=1,n=0;n<e.length;n++){var s=e[n].partsIndex,a=e[n].paramIndex;if(!(s<0)&&0!=t.getParamFloat(a)){if(r>=0)break;r=n,o=t.getPartsOpacity(s),(o+=i/.5)>1&&(o=1)}}r<0&&(r=0,o=1);for(n=0;n<e.length;n++){if(!((s=e[n].partsIndex)<0))if(r==n)t.setPartsOpacity(s,o);else{var _,h=t.getPartsOpacity(s);(1-(_=o<.5?-.5*o/.5+1:.5*(1-o)/.5))*(1-o)>.15&&(_=1-.15/(1-o)),h>_&&(h=_),t.setPartsOpacity(s,h)}}},c.prototype.copyOpacityOtherParts=function(t,e){for(var i=0;i<e.length;i++){var r=e[i];if(null!=r.link&&!(r.partsIndex<0))for(var o=t.getPartsOpacity(r.partsIndex),n=0;n<r.link.length;n++){var s=r.link[n];s.partsIndex<0||t.setPartsOpacity(s.partsIndex,o)}}};function f(t){this.paramIndex=-1,this.partsIndex=-1,this.link=null,this.id=t}f.prototype.initIndex=function(t){this.paramIndex=t.getParamIndex("VISIBLE:"+this.id),this.partsIndex=t.getPartsDataIndex(r.PartsDataID.getID(this.id)),t.setParamFloat(this.paramIndex,1)};function g(){this.EPSILON=.01,this.faceTargetX=0,this.faceTargetY=0,this.faceX=0,this.faceY=0,this.faceVX=0,this.faceVY=0,this.lastTimeSec=0}g.FRAME_RATE=60,g.prototype.setPoint=function(t,e){this.faceTargetX=t,this.faceTargetY=e},g.prototype.getX=function(){return this.faceX},g.prototype.getY=function(){return this.faceY},g.prototype.update=function(){var t=40/7.5/g.FRAME_RATE;if(0!=this.lastTimeSec){var e=r.UtSystem.getUserTimeMSec(),i=(e-this.lastTimeSec)*g.FRAME_RATE/1e3;this.lastTimeSec=e;var o=i*t/(.15*g.FRAME_RATE),n=this.faceTargetX-this.faceX,s=this.faceTargetY-this.faceY;if(!(Math.abs(n)<=this.EPSILON&&Math.abs(s)<=this.EPSILON)){var a=Math.sqrt(n*n+s*s),_=t*s/a,h=t*n/a-this.faceVX,l=_-this.faceVY,$=Math.sqrt(h*h+l*l);($<-o||$>o)&&(h*=o/$,l*=o/$,$=o),this.faceVX+=h,this.faceVY+=l;var u=.5*(Math.sqrt(o*o+16*o*a-8*o*a)-o),p=Math.sqrt(this.faceVX*this.faceVX+this.faceVY*this.faceVY);p>u&&(this.faceVX*=u/p,this.faceVY*=u/p),this.faceX+=this.faceVX,this.faceY+=this.faceVY}}else this.lastTimeSec=r.UtSystem.getUserTimeMSec()};function d(){l.prototype.constructor.call(this),this.screenLeft=null,this.screenRight=null,this.screenTop=null,this.screenBottom=null,this.maxLeft=null,this.maxRight=null,this.maxTop=null,this.maxBottom=null}d.prototype=new l,d.prototype.adjustTranslate=function(t,e){this.tr[0]*this.maxLeft+(this.tr[12]+t)>this.screenLeft&&(t=this.screenLeft-this.tr[0]*this.maxLeft-this.tr[12]),this.tr[0]*this.maxRight+(this.tr[12]+t)<this.screenRight&&(t=this.screenRight-this.tr[0]*this.maxRight-this.tr[12]),this.tr[5]*this.maxTop+(this.tr[13]+e)<this.screenTop&&(e=this.screenTop-this.tr[5]*this.maxTop-this.tr[13]),this.tr[5]*this.maxBottom+(this.tr[13]+e)>this.screenBottom&&(e=this.screenBottom-this.tr[5]*this.maxBottom-this.tr[13]);var i=[1,0,0,0,0,1,0,0,0,0,1,0,t,e,0,1];l.mul(i,this.tr,this.tr)},d.prototype.adjustScale=function(t,e,i){this.tr[0];var r=[1,0,0,0,0,1,0,0,0,0,1,0,t,e,0,1],o=[i,0,0,0,0,i,0,0,0,0,1,0,0,0,0,1],n=[1,0,0,0,0,1,0,0,0,0,1,0,-t,-e,0,1];l.mul(n,this.tr,this.tr),l.mul(o,this.tr,this.tr),l.mul(r,this.tr,this.tr)},d.prototype.setScreenRect=function(t,e,i,r){this.screenLeft=t,this.screenRight=e,this.screenTop=r,this.screenBottom=i},d.prototype.setMaxScreenRect=function(t,e,i,r){this.maxLeft=t,this.maxRight=e,this.maxTop=r,this.maxBottom=i},d.prototype.getScreenLeft=function(){return this.screenLeft},d.prototype.getScreenRight=function(){return this.screenRight},d.prototype.getScreenBottom=function(){return this.screenBottom},d.prototype.getScreenTop=function(){return this.screenTop},d.prototype.getMaxLeft=function(){return this.maxLeft},d.prototype.getMaxRight=function(){return this.maxRight},d.prototype.getMaxBottom=function(){return this.maxBottom},d.prototype.getMaxTop=function(){return this.maxTop};function y(){}y.platformManager=null,y.getPlatformManager=function(){return y.platformManager},y.setPlatformManager=function(t){y.platformManager=t},e.L2DTargetPoint=g,e.Live2DFramework=y,e.L2DViewMatrix=d,e.L2DPose=c,e.L2DPartsParam=f,e.L2DPhysics=p,e.L2DMotionManager=u,e.L2DModelMatrix=$,e.L2DMatrix44=l,e.EYE_STATE=h,e.L2DEyeBlink=_,e.L2DExpressionParam=a,e.L2DExpressionMotion=s,e.L2DBaseModel=o},79:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.cDefine={VIEW_LOGICAL_LEFT:-1,VIEW_LOGICAL_RIGHT:1,VIEW_LOGICAL_MAX_LEFT:-2,VIEW_LOGICAL_MAX_RIGHT:2,VIEW_LOGICAL_MAX_BOTTOM:-2,VIEW_LOGICAL_MAX_TOP:2,PRIORITY_NONE:0,PRIORITY_IDLE:1,PRIORITY_NORMAL:2,PRIORITY_FORCE:3,MOTION_GROUP_IDLE:"idle",MOTION_GROUP_TAP_BODY:"tap_body",MOTION_GROUP_FLICK_HEAD:"flick_head",MOTION_GROUP_PINCH_IN:"pinch_in",MOTION_GROUP_PINCH_OUT:"pinch_out",MOTION_GROUP_SHAKE:"shake",HIT_AREA_HEAD:"head",HIT_AREA_BODY:"body"}},80:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.currCanvas=e.currWebGL=e.createElement=void 0;var r=i(38),o=i(37),n=i(82),s=void 0,a=void 0;e.createElement=function(){var t=document.getElementById(r.config.name.div);null!==t&&document.body.removeChild(t);var i=document.createElement("div");i.id=r.config.name.div,i.className="live2d-widget-container",i.style.setProperty("position","fixed"),i.style.setProperty(r.config.display.position,r.config.display.hOffset+"px"),i.style.setProperty("bottom",r.config.display.vOffset+"px"),i.style.setProperty("width",r.config.display.width+"px"),i.style.setProperty("height",r.config.display.height+"px"),i.style.setProperty("z-index",99999),i.style.setProperty("opacity",r.config.react.opacity),i.style.setProperty("pointer-events","none"),document.body.appendChild(i),o.L2Dwidget.emit("create-container",i),r.config.dialog.enable&&(0,n.createDialogElement)(i);var _=document.createElement("canvas");_.setAttribute("id",r.config.name.canvas),_.setAttribute("width",r.config.display.width*r.config.display.superSample),_.setAttribute("height",r.config.display.height*r.config.display.superSample),_.style.setProperty("position","absolute"),_.style.setProperty("left","0px"),_.style.setProperty("top","0px"),_.style.setProperty("width",r.config.display.width+"px"),_.style.setProperty("height",r.config.display.height+"px"),r.config.dev.border&&_.style.setProperty("border","dashed 1px #CCC"),i.appendChild(_),e.currCanvas=a=document.getElementById(r.config.name.canvas),o.L2Dwidget.emit("create-canvas",_),function(){for(var t=["webgl2","webgl","experimental-webgl2","experimental-webgl","webkit-3d","moz-webgl"],i=0;i<t.length;i++)try{var r=a.getContext(t[i],{alpha:!0,antialias:!0,premultipliedAlpha:!0,failIfMajorPerformanceCaveat:!1});r&&(e.currWebGL=s=r)}catch(t){}s||(console.error("Live2D widgets: Failed to create WebGL context."),window.WebGLRenderingContext||console.error("Your browser may not support WebGL, check https://get.webgl.org/ for futher information."))}()},e.currWebGL=s,e.currCanvas=a},81:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MatrixStack=r;function r(){}r.matrixStack=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],r.depth=0,r.currentMatrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],r.tmp=new Array(16),r.reset=function(){this.depth=0},r.loadIdentity=function(){for(var t=0;t<16;t++)this.currentMatrix[t]=t%5==0?1:0},r.push=function(){var t=16*(this.depth+1);this.matrixStack.length<t+16&&(this.matrixStack.length=t+16);for(var e=0;e<16;e++)this.matrixStack[t+e]=this.currentMatrix[e];this.depth++},r.pop=function(){this.depth--,this.depth<0&&(myError("Invalid matrix stack."),this.depth=0);for(var t=16*this.depth,e=0;e<16;e++)this.currentMatrix[e]=this.matrixStack[t+e]},r.getMatrix=function(){return this.currentMatrix},r.multMatrix=function(t){var e,i,r;for(e=0;e<16;e++)this.tmp[e]=0;for(e=0;e<4;e++)for(i=0;i<4;i++)for(r=0;r<4;r++)this.tmp[e+4*i]+=this.currentMatrix[e+4*r]*t[r+4*i];for(e=0;e<16;e++)this.currentMatrix[e]=this.tmp[e]}},82:function(t,e,i){"use strict";var r=i(38),o=i(37);document.head.innerHTML+="\n<style>\n  .live2d-widget-dialog-container {\n    width: 300px;\n    height: 120px;\n    position: absolute;\n    bottom: 65%;\n    right: 0px;\n    transform-origin: right;\n    padding: 12px;\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n  }\n  .live2d-widget-dialog {\n    width: 100%;\n    height: 100%;\n    color: #917159;\n    font-size: 16px;\n    padding: 12px;\n    border: 2px solid rgb(236, 203, 180);\n    background: rgb(252, 248, 244);\n    box-sizing: border-box;\n    border-radius: 10px;\n    transform: rotate(-2deg);\n    opacity: 0;\n    transition: 200ms opacity;\n    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;\n    animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;\n  }\n  @keyframes live2d-widget-dialog-tingle {\n    0% { transform: translate(-1px, 1.5px) rotate(-2deg); }\n    100% { transform: translate(1px, -1.5px) rotate(2deg); }\n  }\n</style>\n";var n=void 0,s=void 0,a=void 0;function _(){s.style.opacity=1}function h(){s.style.opacity=0}function l(t){_(),s.innerText=t,clearTimeout(a),a=setTimeout(function(){h()},5e3)}function $(){var t=new XMLHttpRequest;t.open("get","https://v1.hitokoto.cn"),t.setRequestHeader("Cache-Control","no-cache"),t.onreadystatechange=function(){if(4===t.readyState){l(JSON.parse(t.responseText).hitokoto),setTimeout($,1e4)}},t.send()}t.exports={createDialogElement:function(t){(n=document.createElement("div")).className="live2d-widget-dialog-container",n.style.transform="scale("+r.config.display.width/250+")",(s=document.createElement("div")).className="live2d-widget-dialog",n.appendChild(s),t.appendChild(n),o.L2Dwidget.emit("create-dialog",n),r.config.dialog.hitokoto&&$()},displayDialog:_,hiddenDialog:h,alertText:l,showHitokotoLoop:$}},83:function(t,e){t.exports={import:function(){throw new Error("System.import cannot be used indirectly")}}},84:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.cManager=void 0;var r=i(78),o=i(85),n=i(86),s=i(79);function a(t){this.eventemitter=t,this.models=[],this.count=-1,this.reloadFlg=!1,r.Live2DFramework.setPlatformManager(new o.PlatformManager)}a.prototype.createModel=function(){var t=new n.cModel;return this.models.push(t),t},a.prototype.changeModel=function(t,e){this.reloadFlg&&(this.reloadFlg=!1,this.releaseModel(0,t),this.createModel(),this.models[0].load(t,e))},a.prototype.getModel=function(t){return t>=this.models.length?null:this.models[t]},a.prototype.releaseModel=function(t,e){this.models.length<=t||(this.models[t].release(e),delete this.models[t],this.models.splice(t,1))},a.prototype.numModels=function(){return this.models.length},a.prototype.setDrag=function(t,e){for(var i=0;i<this.models.length;i++)this.models[i].setDrag(t,e)},a.prototype.tapEvent=function(t,e){s.cDefine.DEBUG_LOG&&console.log("tapEvent view x:"+t+" y:"+e);for(var i=0;i<this.models.length;i++)this.models[i].hitTest(s.cDefine.HIT_AREA_HEAD,t,e)?(this.eventemitter.emit("tapface"),s.cDefine.DEBUG_LOG&&console.log("Tap face."),this.models[i].setRandomExpression()):this.models[i].hitTest(s.cDefine.HIT_AREA_BODY,t,e)&&(this.eventemitter.emit("tapbody"),s.cDefine.DEBUG_LOG&&console.log("Tap body. models["+i+"]"),this.models[i].startRandomMotion(s.cDefine.MOTION_GROUP_TAP_BODY,s.cDefine.PRIORITY_NORMAL));return!0},e.cManager=a},85:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.PlatformManager=n;var r=i(80),o=i(77);function n(){}n.prototype.loadBytes=function(t,e){var i=new XMLHttpRequest;i.open("GET",t,!0),i.responseType="arraybuffer",i.onload=function(){switch(i.status){case 200:e(i.response);break;default:console.error("Failed to load ("+i.status+") : "+t)}},i.send(null)},n.prototype.loadString=function(t){this.loadBytes(t,function(t){return t})},n.prototype.loadLive2DModel=function(t,e){var i=null;this.loadBytes(t,function(t){i=o.Live2DModelWebGL.loadModel(t),e(i)})},n.prototype.loadTexture=function(t,e,i,o){var n=new Image;n.crossOrigin="Anonymous",n.src=i,n.onload=onload,n.onerror=onerror,n.onload=function(){var i=r.currWebGL,s=i.createTexture();if(!s)return console.error("Failed to generate gl texture name."),-1;t.isPremultipliedAlpha()||i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL,1),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,1),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,s),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,n),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.LINEAR),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR_MIPMAP_NEAREST),i.generateMipmap(i.TEXTURE_2D),t.setTexture(e,s),s=null,"function"==typeof o&&o()},n.onerror=function(){console.error("Failed to load image : "+i)}},n.prototype.jsonParseFromBytes=function(t){var e,i=new Uint8Array(t,0,3);e=239==i[0]&&187==i[1]&&191==i[2]?String.fromCharCode.apply(null,new Uint8Array(t,3)):String.fromCharCode.apply(null,new Uint8Array(t));return JSON.parse(e)},n.prototype.log=function(t){console.log(t)}},86:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.cModel=_;var r=i(78),o=i(87),n=i(81),s=i(79),a=i(77);function _(){r.L2DBaseModel.prototype.constructor.call(this),this.modelHomeDir="",this.modelSetting=null,this.tmpMatrix=[]}_.prototype=new r.L2DBaseModel,_.prototype.load=function(t,e,i){this.setUpdating(!0),this.setInitialized(!1),this.modelHomeDir=e.substring(0,e.lastIndexOf("/")+1),this.modelSetting=new o.ModelSettingJson;var n=this;this.modelSetting.loadModelSetting(e,function(){var t=n.modelHomeDir+n.modelSetting.getModelFile();n.loadModelData(t,function(t){for(var e=0;e<n.modelSetting.getTextureNum();e++){if(/^https?:\/\/|^\/\//i.test(n.modelSetting.getTextureFile(e)))var o=n.modelSetting.getTextureFile(e);else o=n.modelHomeDir+n.modelSetting.getTextureFile(e);n.loadTexture(e,o,function(){if(n.isTexLoaded){if(n.modelSetting.getExpressionNum()>0){n.expressions={};for(var t=0;t<n.modelSetting.getExpressionNum();t++){var e=n.modelSetting.getExpressionName(t),o=n.modelHomeDir+n.modelSetting.getExpressionFile(t);n.loadExpression(e,o)}}else n.expressionManager=null,n.expressions={};if(null==n.eyeBlink&&(n.eyeBlink=new r.L2DEyeBlink),null!=n.modelSetting.getPhysicsFile()?n.loadPhysics(n.modelHomeDir+n.modelSetting.getPhysicsFile()):n.physics=null,null!=n.modelSetting.getPoseFile()?n.loadPose(n.modelHomeDir+n.modelSetting.getPoseFile(),function(){n.pose.updateParam(n.live2DModel)}):n.pose=null,null!=n.modelSetting.getLayout()){var a=n.modelSetting.getLayout();null!=a.width&&n.modelMatrix.setWidth(a.width),null!=a.height&&n.modelMatrix.setHeight(a.height),null!=a.x&&n.modelMatrix.setX(a.x),null!=a.y&&n.modelMatrix.setY(a.y),null!=a.center_x&&n.modelMatrix.centerX(a.center_x),null!=a.center_y&&n.modelMatrix.centerY(a.center_y),null!=a.top&&n.modelMatrix.top(a.top),null!=a.bottom&&n.modelMatrix.bottom(a.bottom),null!=a.left&&n.modelMatrix.left(a.left),null!=a.right&&n.modelMatrix.right(a.right)}for(t=0;t<n.modelSetting.getInitParamNum();t++)n.live2DModel.setParamFloat(n.modelSetting.getInitParamID(t),n.modelSetting.getInitParamValue(t));for(t=0;t<n.modelSetting.getInitPartsVisibleNum();t++)n.live2DModel.setPartsOpacity(n.modelSetting.getInitPartsVisibleID(t),n.modelSetting.getInitPartsVisibleValue(t));n.live2DModel.saveParam(),n.preloadMotionGroup(s.cDefine.MOTION_GROUP_IDLE),n.mainMotionManager.stopAllMotions(),n.setUpdating(!1),n.setInitialized(!0),"function"==typeof i&&i()}})}})})},_.prototype.release=function(t){var e=r.Live2DFramework.getPlatformManager();t.deleteTexture(e.texture)},_.prototype.preloadMotionGroup=function(t){for(var e=this,i=0;i<this.modelSetting.getMotionNum(t);i++){var r=this.modelSetting.getMotionFile(t,i);this.loadMotion(r,this.modelHomeDir+r,function(r){r.setFadeIn(e.modelSetting.getMotionFadeIn(t,i)),r.setFadeOut(e.modelSetting.getMotionFadeOut(t,i))})}},_.prototype.update=function(){if(null!=this.live2DModel){var t=2*((a.UtSystem.getUserTimeMSec()-this.startTimeMSec)/1e3)*Math.PI;this.mainMotionManager.isFinished()&&this.startRandomMotion(s.cDefine.MOTION_GROUP_IDLE,s.cDefine.PRIORITY_IDLE),this.live2DModel.loadParam();this.mainMotionManager.updateParam(this.live2DModel)||null!=this.eyeBlink&&this.eyeBlink.updateParam(this.live2DModel),this.live2DModel.saveParam(),null==this.expressionManager||null==this.expressions||this.expressionManager.isFinished()||this.expressionManager.updateParam(this.live2DModel),this.live2DModel.addToParamFloat("PARAM_ANGLE_X",30*this.dragX,1),this.live2DModel.addToParamFloat("PARAM_ANGLE_Y",30*this.dragY,1),this.live2DModel.addToParamFloat("PARAM_ANGLE_Z",this.dragX*this.dragY*-30,1),this.live2DModel.addToParamFloat("PARAM_BODY_ANGLE_X",10*this.dragX,1),this.live2DModel.addToParamFloat("PARAM_EYE_BALL_X",this.dragX,1),this.live2DModel.addToParamFloat("PARAM_EYE_BALL_Y",this.dragY,1),this.live2DModel.addToParamFloat("PARAM_ANGLE_X",Number(15*Math.sin(t/6.5345)),.5),this.live2DModel.addToParamFloat("PARAM_ANGLE_Y",Number(8*Math.sin(t/3.5345)),.5),this.live2DModel.addToParamFloat("PARAM_ANGLE_Z",Number(10*Math.sin(t/5.5345)),.5),this.live2DModel.addToParamFloat("PARAM_BODY_ANGLE_X",Number(4*Math.sin(t/15.5345)),.5),this.live2DModel.setParamFloat("PARAM_BREATH",Number(.5+.5*Math.sin(t/3.2345)),1),null!=this.physics&&this.physics.updateParam(this.live2DModel),null==this.lipSync&&this.live2DModel.setParamFloat("PARAM_MOUTH_OPEN_Y",this.lipSyncValue),null!=this.pose&&this.pose.updateParam(this.live2DModel),this.live2DModel.update()}else s.cDefine.DEBUG_LOG&&console.error("Failed to update.")},_.prototype.setRandomExpression=function(){var t=[];for(var e in this.expressions)t.push(e);var i=parseInt(Math.random()*t.length);this.setExpression(t[i])},_.prototype.startRandomMotion=function(t,e){var i=this.modelSetting.getMotionNum(t),r=parseInt(Math.random()*i);this.startMotion(t,r,e)},_.prototype.startMotion=function(t,e,i){var r=this.modelSetting.getMotionFile(t,e);if(null!=r&&""!=r){if(i==s.cDefine.PRIORITY_FORCE)this.mainMotionManager.setReservePriority(i);else if(!this.mainMotionManager.reserveMotion(i))return void(s.cDefine.DEBUG_LOG&&console.log("Motion is running."));var o,n=this;null==this.motions[t]?this.loadMotion(t,this.modelHomeDir+r,function(r){o=r,n.setFadeInFadeOut(t,e,i,o)}):(o=this.motions[t],n.setFadeInFadeOut(t,e,i,o))}else s.cDefine.DEBUG_LOG&&console.error("Failed to motion.")},_.prototype.setFadeInFadeOut=function(t,e,i,r){var o=this.modelSetting.getMotionFile(t,e);if(r.setFadeIn(this.modelSetting.getMotionFadeIn(t,e)),r.setFadeOut(this.modelSetting.getMotionFadeOut(t,e)),s.cDefine.DEBUG_LOG&&console.log("Start motion : "+o),null==this.modelSetting.getMotionSound(t,e))this.mainMotionManager.startMotionPrio(r,i);else{var n=this.modelSetting.getMotionSound(t,e),a=document.createElement("audio");a.src=this.modelHomeDir+n,s.cDefine.DEBUG_LOG&&console.log("Start sound : "+n),a.play(),this.mainMotionManager.startMotionPrio(r,i)}},_.prototype.setExpression=function(t){var e=this.expressions[t];s.cDefine.DEBUG_LOG&&console.log("Expression : "+t),this.expressionManager.startMotion(e,!1)},_.prototype.draw=function(t){n.MatrixStack.push(),n.MatrixStack.multMatrix(this.modelMatrix.getArray()),this.tmpMatrix=n.MatrixStack.getMatrix(),this.live2DModel.setMatrix(this.tmpMatrix),this.live2DModel.draw(),n.MatrixStack.pop()},_.prototype.hitTest=function(t,e,i){for(var r=this.modelSetting.getHitAreaNum(),o=0;o<r;o++)if(t==this.modelSetting.getHitAreaName(o)){var n=this.modelSetting.getHitAreaID(o);return this.hitTestSimple(n,e,i)}return!1}},87:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ModelSettingJson=o;var r=i(78);function o(){this.NAME="name",this.ID="id",this.MODEL="model",this.TEXTURES="textures",this.HIT_AREAS="hit_areas",this.PHYSICS="physics",this.POSE="pose",this.EXPRESSIONS="expressions",this.MOTION_GROUPS="motions",this.SOUND="sound",this.FADE_IN="fade_in",this.FADE_OUT="fade_out",this.LAYOUT="layout",this.INIT_PARAM="init_param",this.INIT_PARTS_VISIBLE="init_parts_visible",this.VALUE="val",this.FILE="file",this.json={}}o.prototype.loadModelSetting=function(t,e){var i=this;r.Live2DFramework.getPlatformManager().loadBytes(t,function(t){var r=String.fromCharCode.apply(null,new Uint8Array(t));i.json=JSON.parse(r),e()})},o.prototype.getTextureFile=function(t){return null==this.json[this.TEXTURES]||null==this.json[this.TEXTURES][t]?null:this.json[this.TEXTURES][t]},o.prototype.getModelFile=function(){return this.json[this.MODEL]},o.prototype.getTextureNum=function(){return null==this.json[this.TEXTURES]?0:this.json[this.TEXTURES].length},o.prototype.getHitAreaNum=function(){return null==this.json[this.HIT_AREAS]?0:this.json[this.HIT_AREAS].length},o.prototype.getHitAreaID=function(t){return null==this.json[this.HIT_AREAS]||null==this.json[this.HIT_AREAS][t]?null:this.json[this.HIT_AREAS][t][this.ID]},o.prototype.getHitAreaName=function(t){return null==this.json[this.HIT_AREAS]||null==this.json[this.HIT_AREAS][t]?null:this.json[this.HIT_AREAS][t][this.NAME]},o.prototype.getPhysicsFile=function(){return this.json[this.PHYSICS]},o.prototype.getPoseFile=function(){return this.json[this.POSE]},o.prototype.getExpressionNum=function(){return null==this.json[this.EXPRESSIONS]?0:this.json[this.EXPRESSIONS].length},o.prototype.getExpressionFile=function(t){return null==this.json[this.EXPRESSIONS]?null:this.json[this.EXPRESSIONS][t][this.FILE]},o.prototype.getExpressionName=function(t){return null==this.json[this.EXPRESSIONS]?null:this.json[this.EXPRESSIONS][t][this.NAME]},o.prototype.getLayout=function(){return this.json[this.LAYOUT]},o.prototype.getInitParamNum=function(){return null==this.json[this.INIT_PARAM]?0:this.json[this.INIT_PARAM].length},o.prototype.getMotionNum=function(t){return null==this.json[this.MOTION_GROUPS]||null==this.json[this.MOTION_GROUPS][t]?0:this.json[this.MOTION_GROUPS][t].length},o.prototype.getMotionFile=function(t,e){return null==this.json[this.MOTION_GROUPS]||null==this.json[this.MOTION_GROUPS][t]||null==this.json[this.MOTION_GROUPS][t][e]?null:this.json[this.MOTION_GROUPS][t][e][this.FILE]},o.prototype.getMotionSound=function(t,e){return null==this.json[this.MOTION_GROUPS]||null==this.json[this.MOTION_GROUPS][t]||null==this.json[this.MOTION_GROUPS][t][e]||null==this.json[this.MOTION_GROUPS][t][e][this.SOUND]?null:this.json[this.MOTION_GROUPS][t][e][this.SOUND]},o.prototype.getMotionFadeIn=function(t,e){return null==this.json[this.MOTION_GROUPS]||null==this.json[this.MOTION_GROUPS][t]||null==this.json[this.MOTION_GROUPS][t][e]||null==this.json[this.MOTION_GROUPS][t][e][this.FADE_IN]?1e3:this.json[this.MOTION_GROUPS][t][e][this.FADE_IN]},o.prototype.getMotionFadeOut=function(t,e){return null==this.json[this.MOTION_GROUPS]||null==this.json[this.MOTION_GROUPS][t]||null==this.json[this.MOTION_GROUPS][t][e]||null==this.json[this.MOTION_GROUPS][t][e][this.FADE_OUT]?1e3:this.json[this.MOTION_GROUPS][t][e][this.FADE_OUT]},o.prototype.getInitParamID=function(t){return null==this.json[this.INIT_PARAM]||null==this.json[this.INIT_PARAM][t]?null:this.json[this.INIT_PARAM][t][this.ID]},o.prototype.getInitParamValue=function(t){return null==this.json[this.INIT_PARAM]||null==this.json[this.INIT_PARAM][t]?NaN:this.json[this.INIT_PARAM][t][this.VALUE]},o.prototype.getInitPartsVisibleNum=function(){return null==this.json[this.INIT_PARTS_VISIBLE]?0:this.json[this.INIT_PARTS_VISIBLE].length},o.prototype.getInitPartsVisibleID=function(t){return null==this.json[this.INIT_PARTS_VISIBLE]||null==this.json[this.INIT_PARTS_VISIBLE][t]?null:this.json[this.INIT_PARTS_VISIBLE][t][this.ID]},o.prototype.getInitPartsVisibleValue=function(t){return null==this.json[this.INIT_PARTS_VISIBLE]||null==this.json[this.INIT_PARTS_VISIBLE][t]?NaN:this.json[this.INIT_PARTS_VISIBLE][t][this.VALUE]}}});
+//# sourceMappingURL=L2Dwidget.0.min.js.map
\ No newline at end of file
diff --git a/live2dw/lib/L2Dwidget.0.min.js.map b/live2dw/lib/L2Dwidget.0.min.js.map
new file mode 100644
index 0000000000..9ab5e98098
--- /dev/null
+++ b/live2dw/lib/L2Dwidget.0.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./src/cLive2DApp.js","webpack:///./src/lib/live2d.core.js","webpack:///./src/lib/Live2DFramework.js","webpack:///./src/cDefine.js","webpack:///./src/elementMgr.js","webpack:///./src/utils/MatrixStack.js","webpack:///./src/dialog/index.js","webpack:///(webpack)/buildin/system.js","webpack:///./src/cManager.js","webpack:///./src/PlatformManager.js","webpack:///./src/cModel.js","webpack:///./src/utils/ModelSettingJson.js"],"names":["_configMgr","__webpack_require__","_elementMgr","_live2d","_Live2DFramework","_cManager","_MatrixStack","_cDefine","_currentDevice","_index","live2DMgr","captureFrameCB","undefined","isDrawStart","dragMgr","viewMatrix","projMatrix","deviceToScreen","drag","headPos","transformRect","center","transform","rect","x","left","width","y","top","height","Len_X","Len_Y","angle","Math","acos","A","B","length","sqrt","normalize","PI","angleTarget","angleLeftTop","angleLeftBottom","angleRightTop","angleRightBottom","scale","res","y3","x3","modelTapEvent","event","currCanvas","getBoundingClientRect","sx","transformScreenX","clientX","sy","transformScreenY","clientY","target","vx","transformViewX","vy","transformViewY","cDefine","DEBUG_MOUSE_LOG","console","log","L2Dwidget","emit","tapEvent","lookFront","setPoint","mouseEvent","e","type","modelTurnHead","button","touchEvent","touch","touches","followPointer","deviceX","screenX","transformX","invertTransformX","deviceY","screenY","transformY","invertTransformY","theRealInit","createElement","addEventListener","window","document","cManager","L2DTargetPoint","ratio","VIEW_LOGICAL_LEFT","right","VIEW_LOGICAL_RIGHT","bottom","L2DViewMatrix","setScreenRect","setMaxScreenRect","VIEW_LOGICAL_MAX_LEFT","VIEW_LOGICAL_MAX_RIGHT","VIEW_LOGICAL_MAX_BOTTOM","VIEW_LOGICAL_MAX_TOP","_currentDevice2","default","mobile","config","model","adjustScale","L2DMatrix44","multScale","multTranslate","Live2D","setGL","currWebGL","clearColor","modelurl","jsonPath","reloadFlg","count","changeModel","tick","MatrixStack","reset","loadIdentity","update","setDrag","getX","getY","clear","COLOR_BUFFER_BIT","multMatrix","getArray","push","i","numModels","getModel","initialized","updating","draw","pop","requestAnimationFrame","mozRequestAnimationFrame","webkitRequestAnimationFrame","msRequestAnimationFrame","toDataURL","captureFrame","callback","j","aa","this","_$MT","_$5S","_$NP","_$42","_$0s","_$4s","_$62","aQ","aU","ArrayBuffer","DataView","J","aN","aS","K","aM","_$ST","aK","aJ","_$gr","ay","_$T7","aL","_$nP","_$s7","aH","_$9T","aT","_$KS","aP","getModelContext","setDrawParam","getDrawParam","init","aO","q","_$Rb","prototype","getModelImpl","w","_$zP","getCanvasWidth","getCanvasHeight","getParamFloat","getParamIndex","z","getID","setParamFloat","aI","arguments","addToParamFloat","multParamFloat","loadParam","saveParam","_$Rs","_$li","_$Ds","_$K2","_$s2","_$P7","aR","a0","aY","getPartsOpacity","aW","setPartsOpacity","aV","aZ","getPartsDataIndex","getDrawDataIndex","Z","getDrawData","getTransformedPoints","_$C2","ag","getIndexArray","_$aS","getType","a","_$wb","b","W","clipContextList","Array","glcontext","gl","dp_webgl","curFrameNo","firstError_clipInNotUpdate","colorBuffer","isInitGLFBFunc","tmpBoundsOnModel","av","Q","glContext","frameBuffers","getMaskRenderTexture","tmpModelToViewMatrix","ac","tmpMatrix2","tmpMatrixForMask","tmpMatrixForDraw","CHANNEL_COLORS","o","r","g","setChannelFlagAsColor","CHANNEL_COUNT","RENDER_TEXTURE_USE_MIPMAP","NOT_USED_FRAME","_$L7","splice","releaseShader","deleteFramebuffer","framebuffer","getClipIDList","findSameClip","U","getDrawDataID","addClippedDrawData","clipBufPre_clipContext","createFramebuffer","glno","setupClip","a1","calcClippedDrawTotalBounds","isUsing","getParameter","FRAMEBUFFER_BINDING","canvas","viewport","clippingMaskBufferSize","setupLayoutBounds","bindFramebuffer","FRAMEBUFFER","allClippedDrawRect","layoutChannelNo","layoutBounds","_$jL","expand","identity","translate","setMatrix","m","aX","matrixForMask","matrixForDraw","clippingMaskDrawIndexList","setClipBufPre_clipContextForMask","getColorBuffer","clipIDList","a6","_$Ri","a5","clippedDrawContextList","drawDataIndex","_$yo","a4","a3","aw","_$i2","_$No","a2","min","apply","max","Float32Array","owner","_$gP","ah","_$dP","_$eo","_$V0","_$a0","_$JT","setFadeIn","setFadeOut","_$pT","getFadeOut","_$4T","_$mT","getDurationMSec","getLoopDurationMSec","updateParam","_$AT","_$9L","P","getUserTimeMSec","_$z2","_$bs","_$Do","_$r2","updateParamExe","_$8s","_$fT","Object","start","_$r","_$0S","getSystemTimeMSec","dump","end","_$Ji","_$dL","_$KL","_$nr","stack","F","_$8P","_$6P","_$EL","_$5T","ak","constructor","call","_$tP","_$27","_$3s","_$vo","_$F2","_$ao","_$1S","an","_$F0","_$6L","_$6S","_$Xr","_$E2","u","p1","N","p2","_$Fo","_$Db","_$L2","_$M2","_$ks","_$9b","_$iP","_$iT","_$lL","_$qP","setup","_$Yb","_$xT","_$p","getPhysicsPoint1","getPhysicsPoint2","_$qr","_$pr","_$5r","_$Cs","atan2","addSrcParam","h","addTargetParam","aF","_$oP","_$oo","_$YS","_$s0","_$70","ax","_$7L","_$HL","fx","fy","cos","sin","aC","_$bS","at","_$wL","_$tL","Src","SRC_TO_X","SRC_TO_Y","SRC_TO_G_ANGLE","d","_$YP","Target","TARGET_FROM_ANGLE","TARGET_FROM_ANGLE_V","X","_$fL","_$gL","_$B0","_$z0","_$qT","reflectX","reflectY","_$_T","getFormatVersion","LIVE2D_FORMAT_VERSION_V2_10_SDK2","_$po","_$e","ad","_$ni","isNaN","contains","aG","_$Z2","bb","bo","bp","_$Q2","_$vs","ba","_$Tr","_$zr","bj","bi","a9","a8","br","bn","bm","bg","bf","bu","bt","bl","bk","be","bc","a7","bh","bs","bd","_$br","bq","_$Vr","bV","bW","bC","bX","bH","bw","_$jT","bT","b3","b2","bP","b1","b0","bM","bL","b8","bN","bZ","b7","bU","bS","b6","b5","bQ","bO","bD","bB","by","bx","bG","bE","bv","bA","bz","bY","bK","b4","bJ","bF","bR","_$HT","ae","_$dr","_$GS","_$qb","_$Lb","_$mS","clipID","_$ur","_$ES","_$8S","_$52","_$R2","_$or","_$Pr","convertClipIDForV2_11","test","id","split","_$cS","_$Tb","_$MS","_$Nr","_$IS","_$Us","_$Zs","_$7s","_$2b","_$j2","getOpacity","_$zS","getTargetBaseDataID","_$gs","_$32","n","_$2o","preDraw","_$B2","_$Eb","_$ps","_$lT","_$C0","_$tT","_$WL","culling","matrix4x4","premultipliedAlpha","anisotropy","clippingProcess","CLIPPING_PROCESS_NONE","clipBufPre_clipContextMask","clipBufPre_clipContextDraw","CLIPPING_PROCESS_OVERWRITE_ALPHA","CLIPPING_PROCESS_MULTIPLY_ALPHA","CLIPPING_PROCESS_DRAW","CLIPPING_PROCESS_CLEAR_ALPHA","getChannelFlagAsColor","_$ZT","_$Uo","setBaseColor","_$WP","_$IT","setPremultipliedAlpha","isPremultipliedAlpha","setAnisotropy","getAnisotropy","getClippingProcess","setClippingProcess","getClipBufPre_clipContextMask","setClipBufPre_clipContextForDraw","getClipBufPre_clipContextDraw","_$ho","blendMode","L2D_COLOR_BLEND_MODE_MULT","c","_$kP","_$Ai","_$c2","_$_b","readV2_opacity","interpolateOpacity","setInterpolatedOpacity","_$nb","_$a2","getBaseDataID","_$W2","_$CS","_$Mo","_$XP","getTimeMSec","setUserTimeMSec","updateUserTimeMSec","Date","getTime","_$Q","aA","_$VP","_$GP","_$8o","_$ds","_$2r","_$O2","_$ri","_$Pb","getParamID","_$yP","_$N2","_$d2","_$t2","_$Lr","_$wr","_$SL","_$AL","G","startsWith","getChar","charAt","String","fromCharCode","getUint8","createString","Uint16Array","_$LS","_$Ob","_$Ur","_$WS","_$v2","_$Xb","Exception","_$J","_$Qb","_$3T","_$h2","_$J2","getParamCount","_$zs","getCopyMatrix","mult","mult_safe","mult_fast","rotateX","fcos","_$9","rotateY","rotateZ","aD","_$7","_$f","_$H","_$g","_$k","_$w","_$hi","STATE_IDENTITY","_$Z","_$pS","_$kS","_$hb","_$gb","_$fo","_$go","_$RT","_$so","_$CT","Y","motions","_$7r","_$Co","_$D0","_$yT","_$E","loopFadeIn","_$AS","_$cs","_$ar","_$D2","_$1T","loadMotion","t","_$RP","_$hs","_$4P","_$xs","_$us","_$qs","_$Ys","_$ws","_$Ns","_$Fr","_$I0","_$BL","_$r0","_$aL","isLoopFadeIn","setLoopFadeIn","aE","_$P","size","add","_$Ms","_$Qs","_$do","_$Ls","_$1r","_$FT","_$Ss","_$o7","_$S7","_$77","LIVE2D_FORMAT_VERSION_V2_11_SDK2_1","_$Is","_$h0","_$4L","_$7P","_$uT","_$9o","E","ab","f","s","aq","_$QT","_$co","_$qo","_$pb","_$is","_$_2","_$vr","_$Rr","_$Or","_$fs","_$Js","_$3S","_$Bo","_$db","_$8b","_$Hr","_$Ws","_$Vs","_$Er","_$Es","Int16Array","_$ZP","_$b0","_$HP","clipManager","_$_0","_$V2","_$W0","_$jr","_$ZS","_$tr","_$lr","release","getBaseData","_$l2","_$IP","getBaseDataIndex","_$1s","_$02","getDefaultValue","getMinValue","getMaxValue","_$u2","floor","toString","_$sT","_$H7","_$VS","_$BS","_$UT","_$Zo","getParamMax","getParamMin","_$p2","_$q2","_$Bb","_$5s","_$GT","ap","_$0T","_$5","exists","_$ls","_$3b","Int8Array","_$Xs","_$kb","read","_$C","_$js","write","_$TS","close","flush","ar","_$12","_$bb","_$_L","_$jo","_$iL","_$0L","_$Br","_$Dr","_$Cb","_$mr","az","STATE_FIRST","_$T2","_$10","_$uo","_$QS","_$7T","STATE_CLOSING","STATE_CLOSED","STATE_OPENING","STATE_INTERVAL","_$sb","Int32Array","_$As","_$U2","_$NT","_$9r","_$vS","_$no","_$vb","_$Gr","_$cr","_$yL","put","_$oT","_$mb","_$Hs","_$as","setTransform","EXPAND_W","drawElements","Error","_$Sr","setTexture","_$nS","_$Y0","_$Xo","_$io","_$0o","_$Lo","_$To","_$Po","_$gT","al","_$Yr","_$Wr","_$Ib","pow","_$hS","_$8r","_$Jr","_$92","_$NS","getTotalScale","setTotalScale_notForClient","getTotalOpacity","setTotalOpacity","getInterpolatedOpacity","_$os","_$Sb","_$NL","_$1b","getDrawDataList","_$kr","_$xo","v","_$zo","loadModel","_$to","_$er","_$PL","_$nL","_$_o","ao","_$o2","_$rr","_$eP","MTN_PREFIX_FADEIN","MTN_PREFIX_FADEOUT","p","byteLength","charCodeAt","_$S0","_$U0","_$o","_$A","_$Eo","H","_$Cr","_$hr","_$VT","transformPoints_sdk2","System","err","printf","transformPoints_sdk1","_$ts","visible","_$g0","_$8L","aj","isVisible","_$6o","_$3o","_$uL","_$KP","_$ET","_$ob","getPartsID","_$MP","_$e0","_$4S","_$Ks","au","context","_$6r","_$xP","_$3r","_$uP","_$Qo","cacheImages","tr","am","_$50","_$Ti","_$Pi","_$B","_$lP","_$bL","save","beginPath","_$Li","clip","_$ei","restore","globalAlpha","_$PS","ceil","rotate","shear","setContext","IGNORE_EXPAND","USE_CACHED_POLYGON_IMAGE","gl_cacheImage","createCanvas","DEBUG_DATA","LDGL_CANVAS_MB","getContext","drawImage","cacheCanvas","cacheContext","IGNORE_CLIP","USE_ADJUST_TRANSLATION","expandClip","clipWithTransform","_$P2","moveTo","lineTo","setAttribute","dumpValues","toFixed","_$TT","_$LT","_$FS","_$JS","totalScale","totalOpacity","getPartsIndex","_$x2","_$2s","_$Kr","_$sP","_$cb","_$Ts","_$fb","L2D_DEFORMER_EXTEND","_$Wb","_$yr","L2D_NO_ERROR","_$i7","_$9s","_$es","_$r7","_$07","_$b7","L2D_COLOR_BLEND_MODE_ADD","L2D_COLOR_BLEND_MODE_INTERPOLATE","_$6b","_$cT","fTexture","USE_CANVAS_TRANSFORM","PROFILE_IOS_SPEED","PROFILE_NAME","PROFILE_IOS_QUALITY","PROFILE_IOS_DEFAULT","PROFILE_ANDROID","PROFILE_DESKTOP","initProfile","isIOS","setupProfile","isAndroid","alert","getVersionStr","getVersionNo","getError","dispose","getGL","setClippingMaskBufferSize","getClippingMaskBufferSize","deleteBuffer","PI_F","_$ib","_$fr","_$LP","_$d0","_$Yo","_$JP","_$5P","_$BP","_$Qi","_$6s","_$ms","instanceNo","_$Os","_$ns","_$_s","_$_S","getTextureNo","_$ZL","_$H2","getNumPoints","_$Hb","parseInt","baseOpacity","_$72","aB","k","l","drawParamWebGL","C","V","_$eb","_$tb","startMotion","_$qS","_$w0","_$sr","M","isFinished","stopAllMotions","_$Zr","_$Gs","_$Bs","concatenate","_$eT","textures","firstDraw","anisotropyExt","maxAnisotropy","vertShader","fragShader","vertShaderOff","fragShaderOff","initShader","getExtension","MAX_TEXTURE_MAX_ANISOTROPY_EXT","disable","SCISSOR_TEST","STENCIL_TEST","DEPTH_TEST","frontFace","CW","enable","BLEND","colorMask","bindBuffer","ARRAY_BUFFER","ELEMENT_ARRAY_BUFFER","CCW","useProgram","shaderProgram","T","L","enableVertexAttribArray","a_position_Loc","vertexAttribPointer","FLOAT","activeTexture","TEXTURE1","bindTexture","TEXTURE_2D","uniform1i","s_texture0_Loc","a_texCoord_Loc","uniformMatrix4fv","u_matrix_Loc","uniform4f","u_channelFlag","u_baseColor_Loc","u_maskFlag_Loc","shaderProgramOff","a_position_Loc_Off","s_texture0_Loc_Off","a_texCoord_Loc_Off","u_clipMatrix_Loc_Off","u_matrix_Loc_Off","TEXTURE2","s_texture1_Loc_Off","u_channelFlag_Loc_Off","u_baseColor_Loc_Off","CULL_FACE","ONE","ONE_MINUS_SRC_ALPHA","ZERO","DST_COLOR","blendEquationSeparate","FUNC_ADD","blendFuncSeparate","texParameteri","TEXTURE_MAX_ANISOTROPY_EXT","TRIANGLES","UNSIGNED_SHORT","createBuffer","bufferData","DYNAMIC_DRAW","loadShaders2","getAttribLocation","getUniformLocation","disposeShader","deleteProgram","compileShader","createShader","shaderSource","getShaderParameter","COMPILE_STATUS","getShaderInfoLog","deleteShader","createProgram","VERTEX_SHADER","FRAGMENT_SHADER","attachShader","linkProgram","getProgramParameter","LINK_STATUS","getProgramInfoLog","createRenderbuffer","bindRenderbuffer","RENDERBUFFER","renderbufferStorage","RGBA4","framebufferRenderbuffer","COLOR_ATTACHMENT0","createTexture","texImage2D","RGBA","UNSIGNED_BYTE","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_MAG_FILTER","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","framebufferTexture2D","renderbuffer","texture","_$R0","buffer","_$3i","_$hL","_$v0","_$S2","_$Ko","_$T","_$F","_$fP","_$3L","_$mP","_$zT","getFloat64","getFloat32","getInt32","getInt8","getInt16","_$2T","O","_$bT","_$5b","Float64Array","_$Jb","_$4b","color","_$2S","_$wS","_$kT","_$tS","SYSTEM_INFO","USER_AGENT","navigator","userAgent","isIPhone","_isIPhone","_isIPad","_isAndroid","getOSVersion","version","getOS","substring","indexOf","os","UtSystem","UtDebug","LDTransform","LDGL","Live2DModelWebGL","Live2DModelJS","Live2DMotion","MotionQueueManager","PhysicsHair","AMotion","PartsDataID","DrawDataID","BaseDataID","ParamID","L2DBaseModel","live2DModel","modelMatrix","eyeBlink","physics","pose","debugMode","alpha","accAlpha","lipSync","lipSyncValue","accelX","accelY","accelZ","dragX","dragY","startTimeMSec","mainMotionManager","L2DMotionManager","expressionManager","expressions","isTexLoaded","texCounter","getModelMatrix","setAlpha","getAlpha","isInitialized","setInitialized","isUpdating","setUpdating","getLive2DModel","setLipSync","setLipSyncValue","setAccel","getMainMotionManager","getExpressionManager","loadModelData","path","pm","Live2DFramework","getPlatformManager","thisRef","loadLive2DModel","l2dModel","L2DModelMatrix","setWidth","setCenterPosition","error","loadTexture","no","name","motion","loadBytes","buf","loadExpression","L2DExpressionMotion","loadJson","loadPose","L2DPose","load","warn","loadPhysics","L2DPhysics","hitTestSimple","drawID","testX","testY","drawIndex","points","tx","ty","paramList","EXPRESSION_DEFAULT","TYPE_SET","TYPE_ADD","TYPE_MULT","ret","json","jsonParseFromBytes","fade_in","fade_out","params","paramNum","param","paramID","value","parseFloat","val","calcTypeInt","calc","defaultValue","def","item","L2DExpressionParam","timeMSec","weight","motionQueueEnt","L2DEyeBlink","nextBlinkTime","stateStartTime","blinkIntervalMsec","eyeState","EYE_STATE","closingMotionMsec","closedMotionMsec","openingMotionMsec","closeIfZero","eyeID_L","eyeID_R","calcNextBlink","random","setInterval","setEyeMotion","eyeParamValue","time","mul","dst","getScaleX","getScaleY","src","shiftX","shiftY","tr1","translateX","translateY","scaleX","scaleY","setPosition","setY","setX","centerX","centerY","setHeight","currentPriority","reservePriority","super","getCurrentPriority","getReservePriority","reserveMotion","priority","setReservePriority","updated","startMotionPrio","physicsList","physics_hair","resist","regist","mass","srcList","srcNum","typeStr","ptype","targetList","targets","targetNum","lastTime","lastModel","partsGroups","poseListInfo","parts_visible","poseNum","i_pose","idListInfo","group","idNum","partsGroup","i_group","partsInfo","parts","L2DPartsParam","link","linkListInfo","linkNum","i_link","linkParts","initParam","curTime","deltaTimeSec","normalizePartsOpacityGroup","copyOpacityOtherParts","initIndex","partsIndex","paramIndex","visibleParts","visibleOpacity","opacity","partsParam","EPSILON","faceTargetX","faceTargetY","faceX","faceY","faceVX","faceVY","lastTimeSec","FRAME_RATE","MAX_V","curTimeSec","deltaTimeWeight","MAX_A","dx","dy","abs","max_v","cur_v","screenLeft","screenRight","screenTop","screenBottom","maxLeft","maxRight","maxTop","maxBottom","adjustTranslate","cx","cy","tr2","tr3","getScreenLeft","getScreenRight","getScreenBottom","getScreenTop","getMaxLeft","getMaxRight","getMaxBottom","getMaxTop","platformManager","setPlatformManager","PRIORITY_NONE","PRIORITY_IDLE","PRIORITY_NORMAL","PRIORITY_FORCE","MOTION_GROUP_IDLE","MOTION_GROUP_TAP_BODY","MOTION_GROUP_FLICK_HEAD","MOTION_GROUP_PINCH_IN","MOTION_GROUP_PINCH_OUT","MOTION_GROUP_SHAKE","HIT_AREA_HEAD","HIT_AREA_BODY","_dialog","getElementById","div","body","removeChild","newElem","className","style","setProperty","display","position","hOffset","vOffset","react","appendChild","dialog","createDialogElement","newCanvasElem","superSample","dev","border","exports","NAMES","ctx","antialias","failIfMajorPerformanceCaveat","WebGLRenderingContext","initWebGL","matrixStack","depth","currentMatrix","tmp","nextOffset","myError","offset","getMatrix","matNew","head","innerHTML","containerElement","dialogElement","closeTimer","displayDialog","hiddenDialog","alertText","text","innerText","clearTimeout","setTimeout","showHitokotoLoop","xhr","XMLHttpRequest","open","setRequestHeader","onreadystatechange","readyState","JSON","parse","responseText","hitokoto","send","module","root","import","_PlatformManager","_cModel","eventemitter","models","PlatformManager","createModel","cModel","releaseModel","DEBUG_LOG","hitTest","setRandomExpression","startRandomMotion","request","responseType","onload","status","response","loadString","loadedImage","Image","crossOrigin","onerror","pixelStorei","UNPACK_PREMULTIPLY_ALPHA_WEBGL","UNPACK_FLIP_Y_WEBGL","TEXTURE0","LINEAR_MIPMAP_NEAREST","generateMipmap","jsonStr","bomCode","Uint8Array","txt","_ModelSettingJson","modelHomeDir","modelSetting","tmpMatrix","modelSettingPath","lastIndexOf","ModelSettingJson","loadModelSetting","getModelFile","getTextureNum","getTextureFile","texPaths","getExpressionNum","expName","getExpressionName","expFilePath","getExpressionFile","getPhysicsFile","getPoseFile","getLayout","layout","getInitParamNum","getInitParamID","getInitParamValue","getInitPartsVisibleNum","getInitPartsVisibleID","getInitPartsVisibleValue","preloadMotionGroup","deleteTexture","getMotionNum","file","getMotionFile","getMotionFadeIn","getMotionFadeOut","Number","setExpression","motionName","mtn","setFadeInFadeOut","getMotionSound","soundName","snd","play","len","getHitAreaNum","getHitAreaName","getHitAreaID","NAME","ID","MODEL","TEXTURES","HIT_AREAS","PHYSICS","POSE","EXPRESSIONS","MOTION_GROUPS","SOUND","FADE_IN","FADE_OUT","LAYOUT","INIT_PARAM","INIT_PARTS_VISIBLE","VALUE","FILE","str","NaN"],"mappings":";gJAKA,MAAAA,EAAAC,EAAA,IACAC,EAAAD,EAAA,IACAE,EAAAF,EAAA,IAeAG,EAAAH,EAAA,IACAI,EAAAJ,EAAA,IACAK,EAAAL,EAAA,IACAM,EAAAN,EAAA,IACAO,EAAAP,EAAA,0CACAQ,EAAAR,EAAA,IAEA,IAAIS,EAAY,KACZC,OAAiBC,EACjBC,GAAc,EACdC,EAAU,KACVC,EAAa,KACbC,EAAa,KACbC,EAAiB,KACjBC,GAAO,EAGPC,EAAU,GAmLd,SAASC,EAAcC,EAAQC,EAAWC,GAEtC,GAAID,EAAUE,EAAID,EAAKE,KAAOF,EAAKG,OAASJ,EAAUK,EAAIJ,EAAKK,IAAML,EAAKM,QACtEP,EAAUE,EAAID,EAAKE,MAAQH,EAAUK,EAAIJ,EAAKK,IAAK,OAAON,EAC9D,IAAIQ,EAAQT,EAAOG,EAAIF,EAAUE,EAC7BO,EAAQV,EAAOM,EAAIL,EAAUK,EAEjC,SAASK,EAAMF,EAAOC,GAElB,OAG+B,IAHxBE,KAAKC,MAvBPC,GAwBDX,EAAG,EACHG,EAAG,GAzBAS,EAKf,SAAmBZ,EAAEG,GAEjB,IAAIU,EAASJ,KAAKK,KAAKd,EAAIA,EAAIG,EAAIA,GACnC,OACIH,EAAGA,EAAIa,EACPV,EAAGA,EAAIU,GAgBJE,CAAUT,EAAOC,GAxBjBI,EAAEX,EAAIY,EAAEZ,EAAIW,EAAER,EAAIS,EAAET,IAwBcM,KAAKO,GA1BlD,IAAaL,EAAEC,EA6BX,IAAIK,EAAcT,EAAMF,EAAOC,GAC3BT,EAAUE,EAAIH,EAAOG,IAAGiB,EAAc,IAAMA,GAChD,IAAIC,EAAe,IAAMV,EAAMT,EAAKE,KAAOJ,EAAOG,GAA4B,GAAxBD,EAAKK,IAAMP,EAAOM,IACpEgB,EAAkB,IAAMX,EAAMT,EAAKE,KAAOJ,EAAOG,GAA0C,GAAtCD,EAAKK,IAAML,EAAKM,OAASR,EAAOM,IACrFiB,EAAgBZ,EAAMT,EAAKE,KAAOF,EAAKG,MAAQL,EAAOG,GAA4B,GAAxBD,EAAKK,IAAMP,EAAOM,IAC5EkB,EAAmBb,EAAMT,EAAKE,KAAOF,EAAKG,MAAQL,EAAOG,GAA0C,GAAtCD,EAAKK,IAAML,EAAKM,OAASR,EAAOM,IAC7FmB,EAAQf,EAAQD,EAChBiB,KAEJ,GAAIN,EAAcG,EAAe,CAC7B,IAAII,EAAKzB,EAAKK,IAAMP,EAAOM,EACvBsB,EAAKD,EAAKF,EACdC,GACIpB,EAAGN,EAAOM,EAAIqB,EACdxB,EAAGH,EAAOG,EAAIyB,QAEf,GAAGR,EAAcI,EAAkB,CACtC,IAAII,EAAK1B,EAAKE,KAAOF,EAAKG,MAAQL,EAAOG,EACrCwB,EAAKC,EAAKH,EACdC,GACIpB,EAAGN,EAAOM,EAAIqB,EACdxB,EAAGH,EAAOG,EAAIyB,QAEf,GAAIR,EAAcE,EAAiB,CACtC,IAAIK,EAAKzB,EAAKK,IAAML,EAAKM,OAASR,EAAOM,EACrCsB,EAAKD,EAAKF,EACdC,GACIpB,EAAGN,EAAOM,EAAIqB,EACdxB,EAAGH,EAAOG,EAAIyB,QAEf,GAAIR,EAAcC,EAAc,CACnC,IAAIO,EAAK5B,EAAOG,EAAID,EAAKE,KACrBuB,EAAKC,EAAKH,EACdC,GACIpB,EAAGN,EAAOM,EAAIqB,EACdxB,EAAGH,EAAOG,EAAIyB,OAEf,CACH,IAAID,EAAKzB,EAAKK,IAAMP,EAAOM,EACvBsB,EAAKD,EAAKF,EACdC,GACIpB,EAAGN,EAAOM,EAAIqB,EACdxB,EAAGH,EAAOG,EAAIyB,GAItB,OAAOF,EA8BX,SAASG,EAAcC,GAEnBjC,GAAO,EAEP,IAAIK,EAAOrB,EAAAkD,WAAWC,wBAElBC,EAAKC,EAAiBJ,EAAMK,QAAUjC,EAAKE,MAC3CgC,EAAKC,EAAiBP,EAAMQ,QAAUpC,EAAKK,KAC3CgC,EAASxC,GACTI,EAAGD,EAAKE,KAAOF,EAAKG,MAAQ,EAC5BC,EAAGJ,EAAKK,IAAML,EAAKM,OAASV,IAE5BK,EAAG2B,EAAMK,QACT7B,EAAGwB,EAAMQ,SACVpC,GACCsC,EAAKC,EAAeF,EAAOpC,EAAID,EAAKE,MACpCsC,EAAKC,EAAeJ,EAAOjC,EAAIJ,EAAKK,KAEpCrB,EAAA0D,QAAQC,iBACRC,QAAQC,IAAI,uCAAyCjB,EAAMK,QAAU,MAAQL,EAAMQ,QAAU,cAAgBE,EAAK,MAAQE,EAAK,KAEtHT,EACAG,EAEbhD,EAAA4D,UAAUC,KAAK,MAAOnB,GAEtBzC,EAAU6D,SAASV,EAAIE,GAkC3B,SAASS,IAEDtD,IACAA,GAAO,GAEXJ,EAAQ2D,SAAS,EAAG,GAGxB,SAASC,EAAWC,GAGhB,GAAc,aAAVA,EAAEC,KACF1B,EAAcyB,QACX,GAAc,aAAVA,EAAEC,MApGjB,SAAuBzB,GAEnBjC,GAAO,EAEP,IAAIK,EAAOrB,EAAAkD,WAAWC,wBAElBC,EAAKC,EAAiBJ,EAAMK,QAAUjC,EAAKE,MAC3CgC,EAAKC,EAAiBP,EAAMQ,QAAUpC,EAAKK,KAC3CgC,EAASxC,GACTI,EAAGD,EAAKE,KAAOF,EAAKG,MAAQ,EAC5BC,EAAGJ,EAAKK,IAAML,EAAKM,OAASV,IAE5BK,EAAG2B,EAAMK,QACT7B,EAAGwB,EAAMQ,SACVpC,GACCsC,EAAKC,EAAeF,EAAOpC,EAAID,EAAKE,MACpCsC,EAAKC,EAAeJ,EAAOjC,EAAIJ,EAAKK,KAEpCrB,EAAA0D,QAAQC,iBACRC,QAAQC,IAAI,uCAAyCjB,EAAMK,QAAU,MAAQL,EAAMQ,QAAU,cAAgBE,EAAK,MAAQE,EAAK,KAEtHT,EACAG,EAEb3C,EAAQ2D,SAASZ,EAAIE,GA6EjBc,CAAcF,QACX,GAAc,WAAVA,EAAEC,MACT,GAAG,WAAYD,GAAiB,GAAZA,EAAEG,OAAa,WAElB,cAAVH,EAAEC,MACTJ,IAIR,SAASO,EAAWJ,GAEhB,IAAIK,EAAQL,EAAEM,QAAQ,GACR,cAAVN,EAAEC,KACsB,GAApBD,EAAEM,QAAQ5C,QAAaa,EAAc8B,GAExB,aAAVL,EAAEC,KA5DjB,SAAuBzB,GAEnB,IAAI5B,EAAOrB,EAAAkD,WAAWC,wBAElBC,EAAKC,EAAiBJ,EAAMK,QAAUjC,EAAKE,MAC3CgC,EAAKC,EAAiBP,EAAMQ,QAAUpC,EAAKK,KAK3CgC,EAASxC,GACTI,EAAGD,EAAKE,KAAOF,EAAKG,MAAQ,EAC5BC,EAAGJ,EAAKK,IAAML,EAAKM,OAASV,IAE5BK,EAAG2B,EAAMK,QACT7B,EAAGwB,EAAMQ,SACVpC,GACCsC,EAAKC,EAAeF,EAAOpC,EAAID,EAAKE,MACpCsC,EAAKC,EAAeJ,EAAOjC,EAAIJ,EAAKK,KAEpCrB,EAAA0D,QAAQC,iBACRC,QAAQC,IAAI,uCAAyCjB,EAAMK,QAAU,MAAQL,EAAMQ,QAAU,cAAgBE,EAAK,MAAQE,EAAK,KAE/H7C,IAEaoC,EACAG,EACb3C,EAAQ2D,SAASZ,EAAIE,IAkCrBmB,CAAcF,GACG,YAAVL,EAAEC,MACTJ,IAIR,SAASV,EAAeqB,GAEpB,IAAIC,EAAUnE,EAAeoE,WAAWF,GACxC,OAAOpE,EAAWuE,iBAAiBF,GAIvC,SAASpB,EAAeuB,GAEpB,IAAIC,EAAUvE,EAAewE,WAAWF,GACxC,OAAOxE,EAAW2E,iBAAiBF,GAIvC,SAASjC,EAAiB4B,GAEtB,OAAOlE,EAAeoE,WAAWF,GAIrC,SAASzB,EAAiB6B,GAEtB,OAAOtE,EAAewE,WAAWF,KAInCI,YA/XF,YAEE,EAAAzF,EAAA0F,iBAiEI1F,EAAAkD,WAAWyC,mBACbC,OAAOD,iBAAiB,QAASnB,GACjCoB,OAAOD,iBAAiB,YAAanB,GACrCoB,OAAOD,iBAAiB,YAAanB,GACrCoB,OAAOD,iBAAiB,UAAWnB,GACnCqB,SAASF,iBAAiB,aAAcnB,GACxCoB,OAAOD,iBAAiB,aAAcd,GACtCe,OAAOD,iBAAiB,WAAYd,GACpCe,OAAOD,iBAAiB,YAAad,IAtEvCrE,EAAY,IAAAL,EAAA2F,SAAAvF,EAAA4D,WACZvD,EAAU,IAAAV,EAAA6F,eACV,IAAI1E,EAAOrB,EAAAkD,WAAWC,wBAClB6C,EAAQ3E,EAAKM,OAASN,EAAKG,MAC3BD,EAAOlB,EAAA0D,QAAQkC,kBACfC,EAAQ7F,EAAA0D,QAAQoC,mBAChBC,GAAUJ,EACVtE,EAAMsE,GAEVnF,EAAa,IAAAX,EAAAmG,eAEFC,cAAc/E,EAAM2E,EAAOE,EAAQ1E,GAE9Cb,EAAW0F,iBAAiBlG,EAAA0D,QAAQyC,sBAClCnG,EAAA0D,QAAQ0C,uBACRpG,EAAA0D,QAAQ2C,wBACRrG,EAAA0D,QAAQ4C,sBAiHU/D,EA/GPgE,EAAAC,QAAOC,UAAYhH,EAAAiH,OAAOD,OAAOlE,OAAS9C,EAAAiH,OAAOC,MAAMpE,MAgHpE/B,EAAWoG,YAAY,EAAG,EAAGrE,GAD/B,IAAsBA,GA7GpB9B,EAAa,IAAAZ,EAAAgH,aACFC,UAAU,EAAI9F,EAAKG,MAAQH,EAAKM,SAE3CZ,EAAiB,IAAAb,EAAAgH,aACFE,eAAe/F,EAAKG,MAAQ,GAAMH,EAAKM,OAAS,GAC/DZ,EAAeoG,UAAU,EAAI9F,EAAKG,OAAQ,EAAIH,EAAKM,QAGnD1B,EAAAoH,OAAOC,MAAPtH,EAAAuH,WACAvH,EAAAuH,UAAUC,WAAW,EAAK,EAAK,EAAK,GA6FjBC,EA5FP3H,EAAAiH,OAAOC,MAAMU,SA8FvBlH,EAAUmH,WAAY,EACtBnH,EAAUoH,QACVpH,EAAUqH,YAAV7H,EAAAuH,UAAiCE,GAJrC,IAAqBA,EA/Cd9G,IACHA,GAAc,EACd,SAAUmH,KAiBd,WAEI1H,EAAA2H,YAAYC,QACZ5H,EAAA2H,YAAYE,eACZrH,EAAQsH,SACR1H,EAAU2H,QAAQvH,EAAQwH,OAAQxH,EAAQyH,QAE1CrI,EAAAuH,UAAUe,MAAMtI,EAAAuH,UAAUgB,kBAE1BnI,EAAA2H,YAAYS,WAAW1H,EAAW2H,YAClCrI,EAAA2H,YAAYS,WAAW3H,EAAW4H,YAClCrI,EAAA2H,YAAYW,OAEZ,IAAK,IAAIC,EAAI,EAAGA,EAAInI,EAAUoI,YAAaD,IAC3C,CACI,IAAI3B,EAAQxG,EAAUqI,SAASF,GAE/B,GAAY,MAAT3B,EAAe,OAEdA,EAAM8B,cAAgB9B,EAAM+B,WAE5B/B,EAAMkB,SACNlB,EAAMgC,KAANhJ,EAAAuH,YAGRnH,EAAA2H,YAAYkB,MAzCVD,GACA,IAAIE,EACFtD,OAAOsD,uBACPtD,OAAOuD,0BACPvD,OAAOwD,6BACPxD,OAAOyD,wBAETH,EAAsBpB,EAAtB9H,EAAAkD,iBACsBxC,IAAnBD,IACDA,EAAeT,EAAAkD,WAAWoG,aAC1B7I,OAAiBC,GAXrB,OA8SF6I,aAlUF,SAAsBC,GACpB/I,EAAiB+I,kGC1EnB,IAAIC,GAAI,EACR,SAASC,IACDD,IAGJE,KAAKC,KAAO,KACZD,KAAKE,KAAO,KACZF,KAAKG,KAAO,EACZJ,EAAGK,OACHJ,KAAKE,KAAO,IAAIpI,EAAEkI,OAEtBD,EAAGM,KAAO,EACVN,EAAGO,KAAO,EACVP,EAAGK,KAAO,EACVL,EAAGQ,KAAO,SAASC,EAAIC,GACnB,IAII,GAHIA,aAAcC,cACdD,EAAK,IAAIE,SAASF,MAEhBA,aAAcE,UAChB,MAAM,IAAIC,GAAE,wDAEhB,IAIIC,EAJAC,EAAK,IAAIC,GAAEN,GACXO,EAAKF,EAAGG,OACRC,EAAKJ,EAAGG,OACRE,EAAKL,EAAGG,OAEZ,GAAU,KAAND,GAAmB,KAANE,GAAmB,IAANC,EAG1B,MAAM,IAAIP,GAAE,8BAGhB,GALIC,EAAKC,EAAGG,OAIZH,EAAGM,KAAKP,GACJA,EAAKQ,EAAGC,KAAM,CACdd,EAAGL,MAAQJ,EAAGO,KAGd,MAAM,IAAIM,GADD,iDADAS,EAAGC,KACqD,aAAeT,EAAK,yBAGzF,IAAIU,EAAKT,EAAGU,OACZ,GAAIX,GAAMQ,EAAGI,KAAM,CACf,IAAIC,EAAKZ,EAAGa,OACRC,EAAKd,EAAGa,OACZ,IAAW,OAAPD,IAAuB,OAAPE,EAEhB,MADApB,EAAGL,MAAQJ,EAAGM,KACR,IAAIO,GAAE,iCAGpBJ,EAAGqB,KAAKN,GACR,IAAIO,EAAKtB,EAAGuB,kBACZD,EAAGE,aAAaxB,EAAGyB,gBACnBH,EAAGI,OACL,MAAOC,GACLC,EAAEC,KAAKF,KAIfpC,EAAGuC,UAAUT,KAAO,SAASH,GACzB1B,KAAKC,KAAOyB,GAGhB3B,EAAGuC,UAAUC,aAAe,WAKxB,OAJiB,MAAbvC,KAAKC,OACLD,KAAKC,KAAO,IAAIuC,EAChBxC,KAAKC,KAAKwC,QAEPzC,KAAKC,MAGhBF,EAAGuC,UAAUI,eAAiB,WAC1B,OAAiB,MAAb1C,KAAKC,KACE,EAEJD,KAAKC,KAAKyC,kBAGrB3C,EAAGuC,UAAUK,gBAAkB,WAC3B,OAAiB,MAAb3C,KAAKC,KACE,EAEJD,KAAKC,KAAK0C,mBAGrB5C,EAAGuC,UAAUM,cAAgB,SAASlB,GAIlC,MAHiB,iBAANA,IACPA,EAAK1B,KAAKE,KAAK2C,cAAcC,EAAEC,MAAMrB,KAElC1B,KAAKE,KAAK0C,cAAclB,IAGnC3B,EAAGuC,UAAUU,cAAgB,SAAStB,EAAIP,EAAI8B,GACzB,iBAANvB,IACPA,EAAK1B,KAAKE,KAAK2C,cAAcC,EAAEC,MAAMrB,KAErCwB,UAAU1K,OAAS,IACnByK,EAAK,GAETjD,KAAKE,KAAK8C,cAActB,EAAI1B,KAAKE,KAAK0C,cAAclB,IAAO,EAAIuB,GAAM9B,EAAK8B,IAG9ElD,EAAGuC,UAAUa,gBAAkB,SAASzB,EAAIP,EAAI8B,GAC3B,iBAANvB,IACPA,EAAK1B,KAAKE,KAAK2C,cAAcC,EAAEC,MAAMrB,KAErCwB,UAAU1K,OAAS,IACnByK,EAAK,GAETjD,KAAKE,KAAK8C,cAActB,EAAI1B,KAAKE,KAAK0C,cAAclB,GAAMP,EAAK8B,IAGnElD,EAAGuC,UAAUc,eAAiB,SAAS1B,EAAIP,EAAI8B,GAC1B,iBAANvB,IACPA,EAAK1B,KAAKE,KAAK2C,cAAcC,EAAEC,MAAMrB,KAErCwB,UAAU1K,OAAS,IACnByK,EAAK,GAETjD,KAAKE,KAAK8C,cAActB,EAAI1B,KAAKE,KAAK0C,cAAclB,IAAO,GAAKP,EAAK,GAAK8B,KAG9ElD,EAAGuC,UAAUO,cAAgB,SAASnB,GAClC,OAAO1B,KAAKE,KAAK2C,cAAcC,EAAEC,MAAMrB,KAG3C3B,EAAGuC,UAAUe,UAAY,WACrBrD,KAAKE,KAAKmD,aAGdtD,EAAGuC,UAAUgB,UAAY,WACrBtD,KAAKE,KAAKoD,aAGdvD,EAAGuC,UAAUJ,KAAO,WAChBlC,KAAKE,KAAKgC,QAGdnC,EAAGuC,UAAU/D,OAAS,WAClByB,KAAKE,KAAK3B,UAGdwB,EAAGuC,UAAUiB,KAAO,WAEhB,OADAnB,EAAEoB,KAAK,qBACC,GAGZzD,EAAGuC,UAAUmB,KAAO,SAAS/B,GACzBU,EAAEoB,KAAK,6BAGXzD,EAAGuC,UAAUoB,KAAO,aAEpB3D,EAAGuC,UAAUjD,KAAO,aAEpBU,EAAGuC,UAAUP,gBAAkB,WAC3B,OAAO/B,KAAKE,MAGhBH,EAAGuC,UAAUqB,KAAO,WAChB,OAAO3D,KAAKG,MAGhBJ,EAAGuC,UAAUsB,KAAO,SAAS1C,EAAI2C,EAAInC,EAAIoC,GACrC,IAAIrD,GAAM,EACNsD,EAAK,EAKT,GAAU,GAANrC,EASA,GAAiB,GAAbR,EAAG1I,OAAa,CACZsJ,EAAKZ,EAAG,GAAZ,IACIU,EAA8B,GAfjC5B,KAeY4C,cAAcd,GAEvBtB,GADA2B,EAAK0B,EAAG,GAhBX7D,KAiBWgE,gBAAgB7B,IACxB8B,EAAKvC,EAAKoC,EACVlC,GACApB,GAAMyD,GACG,IACLzD,EAAK,IAGTA,GAAMyD,GACG,IACLzD,EAAK,GA3BZR,KA8BEkE,gBAAgB/B,EAAI3B,OACpB,CACH,IAAS2D,EAAK,EAAGA,EAAKjD,EAAG1I,OAAQ2L,IAAM,CAC/BrC,EAAKZ,EAAGiD,GAEZ,GADIrD,EAA8B,GAlCrCd,KAkCgB4C,cAAcd,GACnB,CACJ,GAAIrB,GAAM,EACN,MAEJA,EAAK0D,EACDhC,EAAK0B,EAAGM,GACZJ,EAzCP/D,KAyCegE,gBAAgB7B,IACxB4B,GAAMrC,EAAKoC,GACF,IACLC,EAAK,IAIbtD,EAAK,IACLnG,QAAQC,IAAI,gCAAiC2G,EAAG,IAChDT,EAAK,EACLsD,EAAK,EAnDR/D,KAoDMqD,YApDNrD,KAqDMgD,cAAc9B,EAAGT,GAAKsD,GArD5B/D,KAsDMsD,aAEP,IAASa,EAAK,EAAGA,EAAKjD,EAAG1I,OAAQ2L,IAAM,CAC/BhC,EAAK0B,EAAGM,GACZ,GAAI1D,GAAM0D,EA1DbnE,KA2DUkE,gBAAgB/B,EAAI4B,OACpB,CACH,IACIK,EADA7C,EA7DXvB,KA6DmBgE,gBAAgB7B,IAQd,GALViC,EADAL,EA9DX,IA+DgBA,KA/DhB,GA+DqC,EA/DrC,IAiEiB,EAAIA,GAAL,MAGgB,EAAIA,GAnEpC,MAqEeK,EAAK,EArEpB,KAqE8B,EAAIL,IAGvBxC,EAAK6C,IACL7C,EAAK6C,GA3EhBpE,KA6EUkE,gBAAgB/B,EAAIZ,UAxEnC,IAAK,IAAI4C,EAAK,EAAGA,EAAKjD,EAAG1I,OAAQ2L,IAAM,CACnC,IAAIrC,EAAKZ,EAAGiD,GACRhC,EAAK0B,EAAGM,GACRrD,EAA8B,GARjCd,KAQY4C,cAAcd,GAR1B9B,KASEkE,gBAAgB/B,EAAKrB,EAAK,EAAI,KA2E7Cf,EAAGuC,UAAU4B,gBAAkB,SAASjB,EAAIvB,GACvB,iBAANuB,IACPA,EAAKjD,KAAKE,KAAKmE,kBAAkBrF,EAAE+D,MAAME,KAE7CjD,KAAKE,KAAKgE,gBAAgBjB,EAAIvB,IAGlC3B,EAAGuC,UAAU+B,kBAAoB,SAAS3C,GAItC,OAHMA,aAAc1C,IAChB0C,EAAK1C,EAAE+D,MAAMrB,IAEV1B,KAAKE,KAAKmE,kBAAkB3C,IAGvC3B,EAAGuC,UAAU0B,gBAAkB,SAAStC,GAIpC,MAHiB,iBAANA,IACPA,EAAK1B,KAAKE,KAAKmE,kBAAkBrF,EAAE+D,MAAMrB,KAEzCA,EAAK,EACE,EAEJ1B,KAAKE,KAAK8D,gBAAgBtC,IAGrC3B,EAAGuC,UAAUL,aAAe,aAE5BlC,EAAGuC,UAAUgC,iBAAmB,SAAS5C,GACrC,OAAO1B,KAAKE,KAAKoE,iBAAiBC,EAAExB,MAAMrB,KAG9C3B,EAAGuC,UAAUkC,YAAc,SAAS9C,GAChC,OAAO1B,KAAKE,KAAKsE,YAAY9C,IAGjC3B,EAAGuC,UAAUmC,qBAAuB,SAAS/C,GACzC,IAAIuB,EAAKjD,KAAKE,KAAKwE,KAAKhD,GACxB,OAAIuB,aAAc0B,GACN1B,EAAIwB,uBAET,MAGX1E,EAAGuC,UAAUsC,cAAgB,SAAS3B,GAClC,GAAIA,EAAK,GAAKA,GAAMjD,KAAKE,KAAK2E,KAAKrM,OAC/B,OAAO,KAEX,IAAIkJ,EAAK1B,KAAKE,KAAK2E,KAAK5B,GACxB,OAAU,MAANvB,GAAcA,EAAGoD,WAAaC,EAAEC,MAC5BtD,aAAcuD,GACPvD,EAAGkD,gBAGX,MAGX,SAASM,EAAE/D,GACP,IAAIrB,EAAJ,CAGAE,KAAKmF,gBAAkB,IAAIC,MAC3BpF,KAAKqF,UAAYlE,EAAGmE,GACpBtF,KAAKuF,SAAWpE,EAChBnB,KAAKwF,WAAa,EAClBxF,KAAKyF,4BAA6B,EAClCzF,KAAK0F,YAAc,EACnB1F,KAAK2F,gBAAiB,EACtB3F,KAAK4F,iBAAmB,IAAIC,EACxBC,GAAEC,UAAUvN,OAASsN,GAAEE,aAAaxN,SACpCwH,KAAKwF,WAAaxF,KAAKiG,wBAE3BjG,KAAKkG,qBAAuB,IAAIC,EAChCnG,KAAKoG,WAAa,IAAID,EACtBnG,KAAKqG,iBAAmB,IAAIF,EAC5BnG,KAAKsG,iBAAmB,IAAIH,EAC5BnG,KAAKuG,eAAiB,IAAInB,MAC1B,IAAInC,EAAK,IAAIuD,GACbvD,EAAK,IAAIuD,GACNC,EAAI,EACPxD,EAAGyD,EAAI,EACPzD,EAAGgC,EAAI,EACPhC,EAAG8B,EAAI,EACP/E,KAAKuG,eAAexH,KAAKkE,IACzBA,EAAK,IAAIuD,GACNC,EAAI,EACPxD,EAAGyD,EAAI,EACPzD,EAAGgC,EAAI,EACPhC,EAAG8B,EAAI,EACP/E,KAAKuG,eAAexH,KAAKkE,IACzBA,EAAK,IAAIuD,GACNC,EAAI,EACPxD,EAAGyD,EAAI,EACPzD,EAAGgC,EAAI,EACPhC,EAAG8B,EAAI,EACP/E,KAAKuG,eAAexH,KAAKkE,IACzBA,EAAK,IAAIuD,GACNC,EAAI,EACPxD,EAAGyD,EAAI,EACPzD,EAAGgC,EAAI,EACPhC,EAAG8B,EAAI,EACP/E,KAAKuG,eAAexH,KAAKkE,GACzB,IAAK,IAAIvB,EAAK,EAAGA,EAAK1B,KAAKuG,eAAe/N,OAAQkJ,IAC9C1B,KAAKuF,SAASoB,sBAAsBjF,EAAI1B,KAAKuG,eAAe7E,KAGpEwD,EAAE0B,cAAgB,EAClB1B,EAAE2B,2BAA4B,EAC9B3B,EAAE4B,gBAAkB,IACpB5B,EAAE5C,UAAUyE,KAAO,WAgBf,GAfI/G,KAAKkG,uBACLlG,KAAKkG,qBAAuB,MAE5BlG,KAAKoG,aACLpG,KAAKoG,WAAa,MAElBpG,KAAKqG,mBACLrG,KAAKqG,iBAAmB,MAExBrG,KAAKsG,mBACLtG,KAAKsG,iBAAmB,MAExBtG,KAAK4F,mBACL5F,KAAK4F,iBAAmB,MAExB5F,KAAKuG,eAAgB,CACrB,IAAK,IAAI7E,EAAK1B,KAAKuG,eAAe/N,OAAS,EAAGkJ,GAAM,IAAKA,EACrD1B,KAAKuG,eAAeS,OAAOtF,EAAI,GAEnC1B,KAAKuG,kBAETvG,KAAKiH,iBAGT/B,EAAE5C,UAAU2E,cAAgB,WAExB,IAAK,IADDhE,EAAK6C,GAAEE,aAAaxN,OACfkJ,EAAK,EAAGA,EAAKuB,EAAIvB,IACtB1B,KAAKsF,GAAG4B,kBAAkBpB,GAAEE,aAAatE,GAAIyF,aAEjDrB,GAAEE,gBACFF,GAAEC,cAGNb,EAAE5C,UAAUJ,KAAO,SAASC,EAAItB,EAAIU,GAChC,IAAK,IAAIP,EAAK,EAAGA,EAAKH,EAAGrI,OAAQwI,IAAM,CACnC,IAAIU,EAAKb,EAAGG,GAAIoG,gBAChB,GAAU,MAAN1F,EAAJ,CAGA,IAAIP,EAAKnB,KAAKqH,aAAa3F,GACjB,MAANP,IACAA,EAAK,IAAImG,EAAEtH,KAAKmC,EAAGT,GACnB1B,KAAKmF,gBAAgBpG,KAAKoC,IAE9B,IAAI8B,EAAKpC,EAAGG,GAAIuG,gBACZrG,EAAKiB,EAAGmC,iBAAiBrB,GAC7B9B,EAAGqG,mBAAmBvE,EAAI/B,GACjBK,EAAGP,GACTyG,uBAAyBtG,KAIpC+D,EAAE5C,UAAU2D,qBAAuB,WAC/B,IAAIvE,EAAK,KAGT,OAFAA,EAAK1B,KAAKuF,SAASmC,oBACnB5B,GAAEE,aAAahG,KAAKuF,SAASoC,MAAQjG,EAC9B1B,KAAKuF,SAASoC,MAGzBzC,EAAE5C,UAAUsF,UAAY,SAASC,EAAIrH,GAEjC,IAAK,IADDU,EAAK,EACAiB,EAAK,EAAGA,EAAKnC,KAAKmF,gBAAgB3M,OAAQ2J,IAAM,CACrD,IAAIL,EAAK9B,KAAKmF,gBAAgBhD,GAC9BnC,KAAK8H,2BAA2BD,EAAI/F,GAChCA,EAAGiG,SACH7G,IAGR,GAAIA,EAAK,EAAG,CACR,IAAIF,EAAKR,EAAG8E,GAAG0C,aAAaxH,EAAG8E,GAAG2C,qBAC9BhE,EAAK,IAAImB,MAAM,GACnBnB,EAAG,GAAK,EACRA,EAAG,GAAK,EACRA,EAAG,GAAKzD,EAAG8E,GAAG4C,OAAOrQ,MACrBoM,EAAG,GAAKzD,EAAG8E,GAAG4C,OAAOlQ,OACrBwI,EAAG8E,GAAG6C,SAAS,EAAG,EAAGrC,GAAEsC,uBAAwBtC,GAAEsC,wBACjDpI,KAAKqI,kBAAkBnH,GACvBV,EAAG8E,GAAGgD,gBAAgB9H,EAAG8E,GAAGiD,YAAazC,GAAEE,aAAahG,KAAKwF,YAAY2B,aACzE3G,EAAG8E,GAAGzH,WAAW,EAAG,EAAG,EAAG,GAC1B2C,EAAG8E,GAAG3G,MAAM6B,EAAG8E,GAAG1G,kBAClB,IAASuD,EAAK,EAAGA,EAAKnC,KAAKmF,gBAAgB3M,OAAQ2J,IAAM,CACrD,IACIP,GADAE,EAAK9B,KAAKmF,gBAAgBhD,IAClBqG,mBAERrE,GADKrC,EAAG2G,gBACH3G,EAAG4G,cAEZ1I,KAAK4F,iBAAiB+C,KAAK/G,GAC3B5B,KAAK4F,iBAAiBgD,OAFb,IAEoBhH,EAAG/J,MAFvB,IAEmC+J,EAAG5J,QAC/C,IAAIoM,EAAKD,EAAGtM,MAAQmI,KAAK4F,iBAAiB/N,MACtCkM,EAAKI,EAAGnM,OAASgI,KAAK4F,iBAAiB5N,OAC3CgI,KAAKoG,WAAWyC,WAChB7I,KAAKoG,WAAW0C,WAAW,GAAI,EAAG,GAClC9I,KAAKoG,WAAWnN,MAAM,EAAG,EAAG,GAC5B+G,KAAKoG,WAAW0C,UAAU3E,EAAGxM,EAAGwM,EAAGrM,EAAG,GACtCkI,KAAKoG,WAAWnN,MAAMmL,EAAIL,EAAI,GAC9B/D,KAAKoG,WAAW0C,WAAW9I,KAAK4F,iBAAiBjO,GAAIqI,KAAK4F,iBAAiB9N,EAAG,GAC9EkI,KAAKqG,iBAAiB0C,UAAU/I,KAAKoG,WAAW4C,GAChDhJ,KAAKoG,WAAWyC,WAChB7I,KAAKoG,WAAW0C,UAAU3E,EAAGxM,EAAGwM,EAAGrM,EAAG,GACtCkI,KAAKoG,WAAWnN,MAAMmL,EAAIL,EAAI,GAC9B/D,KAAKoG,WAAW0C,WAAW9I,KAAK4F,iBAAiBjO,GAAIqI,KAAK4F,iBAAiB9N,EAAG,GAC9EkI,KAAKsG,iBAAiByC,UAAU/I,KAAKoG,WAAW4C,GAEhD,IAAK,IADDtH,EAAK1B,KAAKqG,iBAAiBvH,WACtBmK,EAAK,EAAGA,EAAK,GAAIA,IACtBnH,EAAGoH,cAAcD,GAAMvH,EAAGuH,GAGzB,IADDnF,EAAK9D,KAAKsG,iBAAiBxH,WAC/B,IAASmK,EAAK,EAAGA,EAAK,GAAIA,IACtBnH,EAAGqH,cAAcF,GAAMnF,EAAGmF,GAG9B,IAAK,IADDnI,EAAKgB,EAAGsH,0BAA0B5Q,OAC7BiI,EAAK,EAAGA,EAAKK,EAAIL,IAAM,CAC5B,IAAIoD,EAAK/B,EAAGsH,0BAA0B3I,GAClCwC,EAAK4E,EAAGrD,YAAYX,GACpBtC,EAAKsG,EAAGnD,KAAKb,GACjBrD,EAAG6I,iCAAiCvH,GACpCmB,EAAG5D,KAAKmB,EAAIqH,EAAItG,IAGxBf,EAAG8E,GAAGgD,gBAAgB9H,EAAG8E,GAAGiD,YAAavH,GACzCR,EAAG6I,iCAAiC,MACpC7I,EAAG8E,GAAG6C,SAASlE,EAAG,GAAIA,EAAG,GAAIA,EAAG,GAAIA,EAAG,MAI/CiB,EAAE5C,UAAUgH,eAAiB,WACzB,OAAOtJ,KAAK0F,aAGhBR,EAAE5C,UAAU+E,aAAe,SAASnG,GAChC,IAAK,IAAIL,EAAK,EAAGA,EAAKb,KAAKmF,gBAAgB3M,OAAQqI,IAAM,CACrD,IAAIsB,EAAKnC,KAAKmF,gBAAgBtE,GAC1Ba,EAAKS,EAAGoH,WAAW/Q,OACvB,GAAIkJ,GAAMR,EAAG1I,OAAb,CAIA,IAAK,IADDyK,EAAK,EACAjC,EAAK,EAAGA,EAAKU,EAAIV,IAEtB,IAAK,IADDO,EAAKY,EAAGoH,WAAWvI,GACdG,EAAK,EAAGA,EAAKO,EAAIP,IACtB,GAAID,EAAGC,IAAOI,EAAI,CACd0B,IACA,MAIZ,GAAIA,GAAMvB,EACN,OAAOS,GAGf,OAAO,MAGX+C,EAAE5C,UAAUwF,2BAA6B,SAAS0B,EAAIrF,GASlD,IAAK,IARD1D,EAAK+I,EAAGC,KAAKlH,eAAeG,iBAC5BgH,EAAKF,EAAGC,KAAKlH,eAAeI,kBAC5BxB,EAAKV,EAAKiJ,EAAKjJ,EAAKiJ,EACpB9H,EAAKT,EACL0C,EAAK1C,EACLL,EAAK,EACLgB,EAAK,EACLP,EAAK4C,EAAGwF,uBAAuBnR,OAC1BwI,EAAK,EAAGA,EAAKO,EAAIP,IAAM,CAC5B,IACIH,EADKsD,EAAGwF,uBAAuB3I,GACvB4I,cACR1I,EAAKsI,EAAG9E,KAAK7D,GACjB,GAAIK,EAAG2I,OAAQ,CAMX,IAAK,IALDZ,EAAK/H,EAAGuD,uBACRqF,EAAKb,EAAGzQ,OACRyK,KACAvB,KACAS,EAAK,EACA4H,EAAKC,EAAGC,KAAMF,EAAKD,EAAIC,GAAMC,EAAGE,KACrCjH,EAAGd,GAAM8G,EAAGc,GACZrI,EAAGS,GAAM8G,EAAGc,EAAK,GACjB5H,IAEJ,IAAIgI,EAAK/R,KAAKgS,IAAIC,MAAM,KAAMpH,GAC1B4E,EAAKzP,KAAKgS,IAAIC,MAAM,KAAM3I,GAC1BoC,EAAK1L,KAAKkS,IAAID,MAAM,KAAMpH,GAC1BmB,EAAKhM,KAAKkS,IAAID,MAAM,KAAM3I,GAC1ByI,EAAKvI,IACLA,EAAKuI,GAELtC,EAAKhE,IACLA,EAAKgE,GAEL/D,EAAKhD,IACLA,EAAKgD,GAELM,EAAKtC,IACLA,EAAKsC,IAIjB,GAAIxC,GAAMT,EACNgD,EAAGqE,mBAAmB7Q,EAAI,EAC1BwM,EAAGqE,mBAAmB1Q,EAAI,EAC1BqM,EAAGqE,mBAAmB3Q,MAAQ,EAC9BsM,EAAGqE,mBAAmBxQ,OAAS,EAC/BmM,EAAG4D,SAAU,MACV,CACH,IAAIvH,EAAKM,EAAKc,EACVmC,EAAKjC,EAAK+B,EACdM,EAAGqE,mBAAmB7Q,EAAIiK,EAC1BuC,EAAGqE,mBAAmB1Q,EAAI+L,EAC1BM,EAAGqE,mBAAmB3Q,MAAQ2I,EAC9B2D,EAAGqE,mBAAmBxQ,OAAS+L,EAC/BI,EAAG4D,SAAU,IAIrB7C,EAAE5C,UAAU+F,kBAAoB,SAAS7H,GACrC,IAAIyC,EAAKzC,EAAK0E,EAAE0B,cACZ9E,EAAKtB,EAAK0E,EAAE0B,cAChB3D,IAAOA,EACPnB,IAAOA,EAEP,IAAK,IADDJ,EAAK,EACAP,EAAK,EAAGA,EAAK+D,EAAE0B,cAAezF,IAAM,CACzC,IAAIH,EAAKiC,GAAM9B,EAAKW,EAAK,EAAI,GAC7B,GAAU,GAANd,QACA,GAAU,GAANA,EAAS,EACLO,EAAKvB,KAAKmF,gBAAgBzD,MAC3B+G,gBAAkBtH,EACrBI,EAAGmH,aAAa/Q,EAAI,EACpB4J,EAAGmH,aAAa5Q,EAAI,EACpByJ,EAAGmH,aAAa7Q,MAAQ,EACxB0J,EAAGmH,aAAa1Q,OAAS,OAEzB,GAAU,GAANgJ,EACA,IAAK,IAAImB,EAAK,EAAGA,EAAKnB,EAAImB,IAAM,CAC5B,IACIjB,EAAK,EACTL,KAFIA,EAAKsB,EAAK,IAGVZ,EAAKvB,KAAKmF,gBAAgBzD,MAC3B+G,gBAAkBtH,EACrBI,EAAGmH,aAAa/Q,EAAS,GAALkJ,EACpBU,EAAGmH,aAAa5Q,EAAI,EACpByJ,EAAGmH,aAAa7Q,MAAQ,GACxB0J,EAAGmH,aAAa1Q,OAAS,OAG7B,GAAIgJ,GAAM,EACN,IAASmB,EAAK,EAAGA,EAAKnB,EAAImB,IAAM,CAG5BtB,KAFIA,EAAKsB,EAAK,GAGdjB,KAFIA,EAAKiB,EAAK,IAGVZ,EAAKvB,KAAKmF,gBAAgBzD,MAC3B+G,gBAAkBtH,EACrBI,EAAGmH,aAAa/Q,EAAS,GAALkJ,EACpBU,EAAGmH,aAAa5Q,EAAS,GAALoJ,EACpBK,EAAGmH,aAAa7Q,MAAQ,GACxB0J,EAAGmH,aAAa1Q,OAAS,QAG7B,GAAIgJ,GAAM,EACN,IAASmB,EAAK,EAAGA,EAAKnB,EAAImB,IAAM,CAC5B,IAAItB,EAEJA,KAFIA,EAAKsB,EAAK,GAGdjB,KAFIA,EAAKiB,EAAK,GAGd,IAAIZ,KAAKvB,KAAKmF,gBAAgBzD,MAC3B+G,gBAAkBtH,EACrBI,EAAGmH,aAAa/Q,EAAIkJ,EAAK,EACzBU,EAAGmH,aAAa5Q,EAAIoJ,EAAK,EACzBK,EAAGmH,aAAa7Q,MAAQ,EAAI,EAC5B0J,EAAGmH,aAAa1Q,OAAS,EAAI,OAGjCoK,EAAEoB,KAAK,2BAA4BxC,KAS/D,SAASsG,EAAE5F,EAAIR,EAAI+B,GACfjD,KAAKuJ,WAAa,IAAInE,MACtBpF,KAAKuJ,WAAatG,EAClBjD,KAAKoJ,0BAA4B,IAAIhE,MACrC,IAAK,IAAIjE,EAAK,EAAGA,EAAK8B,EAAGzK,OAAQ2I,IAC7BnB,KAAKoJ,0BAA0BrK,KAAKmC,EAAGoD,iBAAiBrB,EAAG9B,KAE/DnB,KAAK2J,uBAAyB,IAAIvE,MAClCpF,KAAK+H,SAAU,EACf/H,KAAKyI,gBAAkB,EACvBzI,KAAK0I,aAAe,IAAI7C,EACxB7F,KAAKwI,mBAAqB,IAAI3C,EAC9B7F,KAAKkJ,cAAgB,IAAIqB,aAAa,IACtCvK,KAAKmJ,cAAgB,IAAIoB,aAAa,IACtCvK,KAAKwK,MAAQ9I,EAEjB4F,EAAEhF,UAAUkF,mBAAqB,SAASrG,EAAI8B,GAC1C,IAAIvB,EAAK,IAIb,SAAWuB,EAAIvB,GACX1B,KAAKyK,KAAOxH,EACZjD,KAAK4J,cAAgBlI,EANZ,CAAMP,EAAG8B,GAClBjD,KAAK2J,uBAAuB5K,KAAK2C,IAarC,SAASgJ,IACD5K,IAGJE,KAAK2K,KAAO,KACZ3K,KAAK4K,KAAO,KACZ5K,KAAK6K,KAAO,KACZ7K,KAAK2K,KAAO,IACZ3K,KAAK4K,KAAO,IACZ5K,KAAK6K,KAAO,EACZ7K,KAAK8K,QAETJ,EAAGK,KAAO,SAASjJ,EAAIjB,EAAIsB,GACvB,IAAI3B,EAAKsB,EAAKjB,EACVgH,EAAK1F,EAAKtB,EAIViD,EAAK,GAAK,EAAI+D,IAAO,EAAIA,GACzBsC,EAAK,GAAK,EAJLtC,IAIgB,EAJhBA,GAMLtG,EALK,EAAI,GAKF,EAAIsG,GAAY/D,GANlB+D,GAEA,EAAI,GADJ,EAAI,GAK+B,EANnCA,KAMoD,EAAI/D,GAC7D5C,GAPK2G,EAEA,EAAI,GAKG,EAPPA,IAOuBsC,GAAMtC,GAN7B,EAAI,GACJ,EAAI,GAKoC,EAAIA,KAAa,EAAIsC,GAElEpG,EADK,EACK,EAAI7C,EAAK,EAAIK,EAJlB,EAKL0H,EAAK,EAAI/H,EAAK,EAAIK,EAAK,EACvB0C,EAAK,EAAI1C,EAAK,EAElB,GAAIf,GAAM,EACN,OAAO,EAEP,GAAIA,GAAM,EACN,OAAO,EAGf,IACIyC,EADKzC,IAIT,OADSuD,GAHAvD,EAEKyC,GACKgG,EAAKhG,EAAKgB,EAHpBzD,EAfA,GAsBbkK,EAAGpI,UAAUwI,KAAO,aAEpBJ,EAAGpI,UAAU0I,UAAY,SAAStJ,GAC9B1B,KAAK2K,KAAOjJ,GAGhBgJ,EAAGpI,UAAU2I,WAAa,SAASvJ,GAC/B1B,KAAK4K,KAAOlJ,GAGhBgJ,EAAGpI,UAAU4I,KAAO,SAASxJ,GACzB1B,KAAK6K,KAAOnJ,GAGhBgJ,EAAGpI,UAAU6I,WAAa,WACtB,OAAOnL,KAAK4K,MAGhBF,EAAGpI,UAAU8I,KAAO,WAChB,OAAOpL,KAAK4K,MAGhBF,EAAGpI,UAAU+I,KAAO,WAChB,OAAOrL,KAAK6K,MAGhBH,EAAGpI,UAAUgJ,gBAAkB,WAC3B,OAAQ,GAGZZ,EAAGpI,UAAUiJ,oBAAsB,WAC/B,OAAQ,GAGZb,EAAGpI,UAAUkJ,YAAc,SAASrK,EAAIN,GACpC,GAAKA,EAAG4K,OAAQ5K,EAAG6K,KAAnB,CAGA,IAAInK,EAAKoK,EAAEC,kBACX,GAAI/K,EAAGgL,KAAO,EAAG,CACbhL,EAAGgL,KAAOtK,EACVV,EAAGiL,KAAOvK,EACV,IAAIP,EAAKhB,KAAKsL,kBACVzK,EAAGkL,KAAO,IACVlL,EAAGkL,KAAQ/K,GAAM,GAAM,EAAIH,EAAGgL,KAAO7K,GAG7C,IAAIiC,EAAKjD,KAAK6K,KAIP,IADP5H,EAAKA,GAFkB,GAAbjD,KAAK2K,KAAa,EAAIrS,GAAE0T,MAAOzK,EAAKV,EAAGiL,MAAS9L,KAAK2K,QACxC,GAAb3K,KAAK4K,MAAa/J,EAAGkL,KAAO,EAAK,EAAIzT,GAAE0T,MAAOnL,EAAGkL,KAAOxK,GAAOvB,KAAK4K,SAE5D3H,GAAM,GACpB3I,QAAQC,IAAI,qBAEhByF,KAAKiM,eAAe9K,EAAII,EAAI0B,EAAIpC,GAC5BA,EAAGkL,KAAO,GAAKlL,EAAGkL,KAAOxK,IACzBV,EAAG6K,MAAO,KAIlBhB,EAAGpI,UAAU2J,eAAiB,SAASvK,EAAIuB,EAAI9B,EAAID,KAEnD,SAASkB,KACTA,EAAE8J,KAAO,EACT9J,EAAE+J,KAAO,IAAIC,OACbhK,EAAEiK,MAAQ,SAASpJ,GACf,IAAIvB,EAAKU,EAAE+J,KAAKlJ,GACN,MAANvB,KACAA,EAAK,IAwEb,WACI1B,KAAKsM,IAAM,KACXtM,KAAKuM,KAAO,OAzELD,IAAMrJ,EACTb,EAAE+J,KAAKlJ,GAAMvB,GAEjBA,EAAG6K,KAAOZ,EAAEa,qBAGhBpK,EAAEqK,KAAO,SAAStL,GACd,IAAIO,EAAKU,EAAE+J,KAAKhL,GAChB,GAAU,MAANO,EAAY,CACZ,IACIR,EADKyK,EAAEa,oBACG9K,EAAG6K,KAEjB,OADAjS,QAAQC,IAAI4G,EAAK,MAAQD,EAAK,MACvBA,EAEP,OAAQ,GAIhBkB,EAAEsK,IAAM,SAASvL,GACb,IAAIO,EAAKU,EAAE+J,KAAKhL,GAChB,GAAU,MAANO,EAAY,CAEZ,OADSiK,EAAEa,oBACC9K,EAAG6K,KAEf,OAAQ,GAIhBnK,EAAEoB,KAAO,SAASP,EAAIvB,GAClBpH,QAAQC,IAAI,UAAY0I,EAAK,KAAMvB,IAGvCU,EAAEuK,KAAO,SAAS1J,EAAIvB,GAClBpH,QAAQC,IAAI0I,EAAIvB,IAGpBU,EAAEwK,KAAO,SAAS3J,EAAIvB,GAClBpH,QAAQC,IAAI0I,EAAIvB,GAChBpH,QAAQC,IAAI,OAGhB6H,EAAEyK,KAAO,SAAS1L,EAAI8B,GAClB,IAAK,IAAIvB,EAAK,EAAGA,EAAKuB,EAAIvB,IAClBA,EAAK,IAAM,GAAKA,EAAK,EACrBpH,QAAQC,IAAI,MAERmH,EAAK,GAAK,GAAKA,EAAK,GACpBpH,QAAQC,IAAI,MAGpBD,QAAQC,IAAI,QAAmB,IAAT4G,EAAGO,IAE7BpH,QAAQC,IAAI,OAGhB6H,EAAE0K,KAAO,SAASvL,EAAI0B,EAAI/B,GACtB5G,QAAQC,IAAI,OAAQgH,GAEpB,IAAK,IADDG,EAAKuB,EAAGzK,OACH2I,EAAK,EAAGA,EAAKO,IAAMP,EACxB7G,QAAQC,IAAI,MAAO0I,EAAG9B,IACtB7G,QAAQC,IAAI,OAAQ2G,GACpB5G,QAAQC,IAAI,KAEhBD,QAAQC,IAAI,OAGhB6H,EAAEC,KAAO,SAASX,GACdpH,QAAQC,IAAI,oBAAsBmH,GAClCpH,QAAQC,IAAI,YAAcmH,EAAGqL,QAOjC,SAASC,IACDlN,IAGJE,KAAKrI,EAAI,KACTqI,KAAKlI,EAAI,KACTkI,KAAKnI,MAAQ,KACbmI,KAAKhI,OAAS,MAElBgV,EAAE1K,UAAU2K,KAAO,WACf,MAAO,IAAOjN,KAAKrI,EAAIqI,KAAKrI,EAAIqI,KAAKnI,QAGzCmV,EAAE1K,UAAU4K,KAAO,WACf,MAAO,IAAOlN,KAAKlI,EAAIkI,KAAKlI,EAAIkI,KAAKhI,SAGzCgV,EAAE1K,UAAU6K,KAAO,WACf,OAAOnN,KAAKrI,EAAIqI,KAAKnI,OAGzBmV,EAAE1K,UAAU8K,KAAO,WACf,OAAOpN,KAAKlI,EAAIkI,KAAKhI,QAGzBgV,EAAE1K,UAAUqG,KAAO,SAAS1F,EAAI/B,EAAIC,EAAIO,GACpC1B,KAAKrI,EAAIsL,EACTjD,KAAKlI,EAAIoJ,EACTlB,KAAKnI,MAAQsJ,EACbnB,KAAKhI,OAAS0J,GAGlBsL,EAAE1K,UAAUqG,KAAO,SAASjH,GACxB1B,KAAKrI,EAAI+J,EAAG/J,EACZqI,KAAKlI,EAAI4J,EAAG5J,EACZkI,KAAKnI,MAAQ6J,EAAG7J,MAChBmI,KAAKhI,OAAS0J,EAAG1J,QAGrB,SAASgH,EAAE0C,GACH5B,GAGJuN,GAAG/K,UAAUgL,YAAYC,KAAKvN,KAAM0B,GAExC1C,EAAEsD,UAAY,IAAI+K,GAClBrO,EAAEwO,KAAO,IAAIpB,OACbpN,EAAEyO,KAAO,WACLzO,EAAEwO,KAAK7O,SAGXK,EAAE+D,MAAQ,SAASrB,GACf,IAAIuB,EAAKjE,EAAEwO,KAAK9L,GAKhB,OAJU,MAANuB,IACAA,EAAK,IAAIjE,EAAE0C,GACX1C,EAAEwO,KAAK9L,GAAMuB,GAEVA,GAGXjE,EAAEsD,UAAUoL,KAAO,WACf,OAAO,IAAI1O,GAIf,SAAS8D,EAAEpB,GACH5B,GAGJuN,GAAG/K,UAAUgL,YAAYC,KAAKvN,KAAM0B,GAExCoB,EAAER,UAAY,IAAI+K,GAClBvK,EAAE0K,KAAO,IAAIpB,OACbtJ,EAAE2K,KAAO,WACL3K,EAAE0K,KAAK7O,SAGXmE,EAAEC,MAAQ,SAASrB,GACf,IAAIuB,EAAKH,EAAE0K,KAAK9L,GAKhB,OAJU,MAANuB,IACAA,EAAK,IAAIH,EAAEpB,GACXoB,EAAE0K,KAAK9L,GAAMuB,GAEVA,GAGXH,EAAER,UAAUoL,KAAO,WACf,OAAO,IAAI5K,GAGf,SAASN,IACD1C,IAGJE,KAAK2N,KAAO,KACZ3N,KAAK4N,KAAO,KACZ5N,KAAK6N,KAAO,IACZ7N,KAAK8N,KAAO,IACZtL,EAAEpC,QAENoC,EAAEpC,KAAO,EACToC,EAAEF,UAAUG,KAAO,WACE,MAAbzC,KAAK2N,OACL3N,KAAK2N,KAAO,IAAII,IAEH,MAAb/N,KAAK4N,OACL5N,KAAK4N,KAAO,IAAIxI,QAIxB5C,EAAEF,UAAUI,eAAiB,WACzB,OAAO1C,KAAK6N,MAGhBrL,EAAEF,UAAUK,gBAAkB,WAC1B,OAAO3C,KAAK8N,MAGhBtL,EAAEF,UAAU0L,KAAO,SAAStM,GACxB1B,KAAK2N,KAAOjM,EAAGF,OACfxB,KAAK4N,KAAOlM,EAAGF,OACfxB,KAAK6N,KAAOnM,EAAGuM,OACfjO,KAAK8N,KAAOpM,EAAGuM,QAGnBzL,EAAEF,UAAU4L,KAAO,SAASxM,GACxB1B,KAAK4N,KAAK7O,KAAK2C,IAGnBc,EAAEF,UAAU6L,KAAO,WACf,OAAOnO,KAAK4N,MAGhBpL,EAAEF,UAAU8L,KAAO,WACf,OAAOpO,KAAK2N,MAGhB,SAASU,IACDvO,IAGJE,KAAKsO,GAAK,IAAIC,EACdvO,KAAKwO,GAAK,IAAID,EACdvO,KAAKyO,KAAO,EACZzO,KAAK0O,KAAO,EACZ1O,KAAK2O,KAAO,EACZ3O,KAAK4O,KAAO,EACZ5O,KAAK6O,KAAO,EACZ7O,KAAK8O,KAAO,EACZ9O,KAAK+O,KAAO,EACZ/O,KAAKgP,KAAO,EACZhP,KAAKiP,KAAO,IAAI7J,MAChBpF,KAAKkP,KAAO,IAAI9J,MAChBpF,KAAKmP,MAAM,GAAK,GAAK,KAEzBd,EAAE/L,UAAU6M,MAAQ,SAAShO,EAAI8B,EAAIvB,GACjC1B,KAAK6O,KAAO7O,KAAKoP,OACjBpP,KAAKwO,GAAGa,OACgB,GAApBnM,UAAU1K,SACVwH,KAAKyO,KAAOtN,EACZnB,KAAK2O,KAAO1L,EACZjD,KAAKsO,GAAGgB,IAAM5N,EACd1B,KAAKwO,GAAGc,IAAM5N,EACd1B,KAAKwO,GAAG1W,EAAIqJ,EACZnB,KAAKmP,UAIbd,EAAE/L,UAAUiN,iBAAmB,WAC3B,OAAOvP,KAAKsO,IAGhBD,EAAE/L,UAAUkN,iBAAmB,WAC3B,OAAOxP,KAAKwO,IAGhBH,EAAE/L,UAAUmN,KAAO,WACf,OAAOzP,KAAK0O,MAGhBL,EAAE/L,UAAUoN,KAAO,SAAShO,GACxB1B,KAAK0O,KAAOhN,GAGhB2M,EAAE/L,UAAUqN,KAAO,WACf,OAAO3P,KAAK4O,MAGhBP,EAAE/L,UAAUsN,KAAO,WACf,OAAO5P,KAAK8O,MAGhBT,EAAE/L,UAAU8M,KAAO,WACf,OAAS,IAAOhX,KAAKyX,MAAM7P,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,IAAKqI,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,IAAOM,KAAKO,IAGxF0V,EAAE/L,UAAUwN,YAAc,SAAS3O,EAAIO,EAAIH,EAAI0B,GAC3C,IAAI/B,EAAK,IAAI6O,EAAE5O,EAAGO,EAAGH,EAAG0B,GACxBjD,KAAKiP,KAAKlQ,KAAKmC,IAGnBmN,EAAE/L,UAAU0N,eAAiB,SAAS7O,EAAIO,EAAIR,EAAI+B,GAC9C,IAAI1B,EAAK,IAAI0O,EAAG9O,EAAGO,EAAGR,EAAG+B,GACzBjD,KAAKkP,KAAKnQ,KAAKwC,IAGnB8M,EAAE/L,UAAU/D,OAAS,SAAS0E,EAAI1B,GAC9B,GAAiB,GAAbvB,KAAK+O,KAGL,OAFA/O,KAAK+O,KAAO/O,KAAKgP,KAAOzN,OACxBvB,KAAKyO,KAAQrW,KAAKK,MAAMuH,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,IAAMqI,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,IAAMqI,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,IAAMkI,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,KAG9H,IAAIoJ,GAAMK,EAAKvB,KAAKgP,MAAQ,IAC5B,GAAU,GAAN9N,EAAS,CACT,IAAK,IAAIC,EAAKnB,KAAKiP,KAAKzW,OAAS,EAAG2I,GAAM,IAAKA,EAAI,CACtCnB,KAAKiP,KAAK9N,GAChB+O,KAAKjN,EAAIjD,MAEhBA,KAAKmQ,KAAKlN,EAAI/B,GACdlB,KAAK4O,KAAO5O,KAAKoP,OACjBpP,KAAK8O,MAAQ9O,KAAK4O,KAAO5O,KAAK6O,MAAQ3N,EACtClB,KAAK6O,KAAO7O,KAAK4O,KAErB,IAASzN,EAAKnB,KAAKkP,KAAK1W,OAAS,EAAG2I,GAAM,IAAKA,EAAI,CACtCnB,KAAKkP,KAAK/N,GAChBiP,KAAKnN,EAAIjD,MAEhBA,KAAKgP,KAAOzN,GAGhB8M,EAAE/L,UAAU6N,KAAO,SAAStP,EAAIoC,GACxBA,EAAK,OACLA,EAAK,MAET,IAAIxC,EAAK,EAAIwC,EACbjD,KAAKsO,GAAGtU,IAAMgG,KAAKsO,GAAG3W,EAAIqI,KAAKsO,GAAG+B,MAAQ5P,EAC1CT,KAAKsO,GAAGpU,IAAM8F,KAAKsO,GAAGxW,EAAIkI,KAAKsO,GAAGgC,MAAQ7P,EAC1CT,KAAKsO,GAAGiC,IAAMvQ,KAAKsO,GAAGtU,GAAKgG,KAAKsO,GAAGkC,MAAQ/P,EAC3CT,KAAKsO,GAAGjN,IAAMrB,KAAKsO,GAAGpU,GAAK8F,KAAKsO,GAAGmC,MAAQhQ,EAC3CT,KAAKsO,GAAGoC,GAAK1Q,KAAKsO,GAAGiC,GAAKvQ,KAAKsO,GAAGgB,IAClCtP,KAAKsO,GAAGqC,GAAK3Q,KAAKsO,GAAGjN,GAAKrB,KAAKsO,GAAGgB,IAClCtP,KAAKsO,GAAGe,OACR,IACI9N,EACA4C,EAFAnD,GAAO5I,KAAKyX,MAAO7P,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,EAAIkI,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,GAG/DkM,EAAKzL,KAAKwY,IAAI5P,GACdU,EAAKtJ,KAAKyY,IAAI7P,GACdiD,EAAK,IAAMjE,KAAKwO,GAAGc,IACnB9O,EAAMR,KAAK0O,KAAOoC,GAAGC,KACrBjP,EAAMmC,EAAK7L,KAAKwY,IAAI5P,EAAKR,GAC7Be,EAAMO,EAAKJ,EACXyC,EAAMrC,EAAK+B,EACX,IAAI3C,GAAOlB,KAAKsO,GAAGoC,GAAKhP,EAAKA,EACzBE,GAAO5B,KAAKsO,GAAGqC,GAAKjP,EAAKmC,EACzB1C,GAAQnB,KAAKwO,GAAGxU,GAAKgG,KAAK2O,KAC1B7N,GAAQd,KAAKwO,GAAGtU,GAAK8F,KAAK2O,KAC9B3O,KAAKwO,GAAGkC,GAAOnP,EAAKL,EAAKC,EACzBnB,KAAKwO,GAAGmC,GAAOxM,EAAKvC,EAAKd,EACzBd,KAAKwO,GAAG+B,GAAKvQ,KAAKwO,GAAGkC,GAAK1Q,KAAKwO,GAAGc,IAClCtP,KAAKwO,GAAGnN,GAAKrB,KAAKwO,GAAGmC,GAAK3Q,KAAKwO,GAAGc,IAClCtP,KAAKwO,GAAGxU,IAAMgG,KAAKwO,GAAG+B,GAAKtN,EAC3BjD,KAAKwO,GAAGtU,IAAM8F,KAAKwO,GAAGnN,GAAK4B,EAC3BjD,KAAKwO,GAAG7W,GAAKqI,KAAKwO,GAAGxU,GAAKiJ,EAC1BjD,KAAKwO,GAAG1W,GAAKkI,KAAKwO,GAAGtU,GAAK+I,EAC1B,IAAId,EAAM/J,KAAKK,MAAMuH,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,IAAMqI,KAAKsO,GAAG3W,EAAIqI,KAAKwO,GAAG7W,IAAMqI,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,IAAMkI,KAAKsO,GAAGxW,EAAIkI,KAAKwO,GAAG1W,IACvHkI,KAAKwO,GAAG7W,EAAIqI,KAAKsO,GAAG3W,EAAIqI,KAAKyO,MAAQzO,KAAKwO,GAAG7W,EAAIqI,KAAKsO,GAAG3W,GAAKwK,EAC9DnC,KAAKwO,GAAG1W,EAAIkI,KAAKsO,GAAGxW,EAAIkI,KAAKyO,MAAQzO,KAAKwO,GAAG1W,EAAIkI,KAAKsO,GAAGxW,GAAKqK,EAC9DnC,KAAKwO,GAAGxU,IAAMgG,KAAKwO,GAAG7W,EAAIqI,KAAKwO,GAAG6B,MAAQ5P,EAC1CT,KAAKwO,GAAGtU,IAAM8F,KAAKwO,GAAG1W,EAAIkI,KAAKwO,GAAG8B,MAAQ7P,EAC1CT,KAAKwO,GAAGa,QAGZ,SAASd,IACLvO,KAAKsP,IAAM,EACXtP,KAAKrI,EAAI,EACTqI,KAAKlI,EAAI,EACTkI,KAAKhG,GAAK,EACVgG,KAAK9F,GAAK,EACV8F,KAAKuQ,GAAK,EACVvQ,KAAKqB,GAAK,EACVrB,KAAK0Q,GAAK,EACV1Q,KAAK2Q,GAAK,EACV3Q,KAAKqQ,KAAO,EACZrQ,KAAKsQ,KAAO,EACZtQ,KAAKwQ,KAAO,EACZxQ,KAAKyQ,KAAO,EAEhBlC,EAAEjM,UAAU+M,KAAO,WACfrP,KAAKqQ,KAAOrQ,KAAKrI,EACjBqI,KAAKsQ,KAAOtQ,KAAKlI,EACjBkI,KAAKwQ,KAAOxQ,KAAKhG,GACjBgG,KAAKyQ,KAAOzQ,KAAK9F,IAGrB,SAAS8W,EAAG7P,EAAI8B,EAAIvB,GAChB1B,KAAKiR,KAAO,KACZjR,KAAK/G,MAAQ,KACb+G,KAAK6K,KAAO,KACZ7K,KAAKiR,KAAO9P,EACZnB,KAAK/G,MAAQgK,EACbjD,KAAK6K,KAAOnJ,EAEhBsP,EAAG1O,UAAU4N,KAAO,SAASjN,EAAIvB,KAEjC,SAASqO,EAAE5O,EAAID,EAAI+B,EAAIvB,GACnBsP,EAAG1O,UAAUgL,YAAYC,KAAKvN,KAAMkB,EAAI+B,EAAIvB,GAC5C1B,KAAKkR,KAAO,KACZlR,KAAKkR,KAAO/P,EAEhB4O,EAAEzN,UAAY,IAAI0O,EAClBjB,EAAEzN,UAAU4N,KAAO,SAAS/O,EAAIO,GAC5B,IAAIR,EAAKlB,KAAK/G,MAAQkI,EAAGyB,cAAc5C,KAAKiR,MACxC1P,EAAKG,EAAG6N,mBACZ,OAAQvP,KAAKkR,MACb,QACA,KAAK7C,EAAE8C,IAAIC,SACP7P,EAAG5J,EAAI4J,EAAG5J,GAAKuJ,EAAKK,EAAG5J,GAAKqI,KAAK6K,KACjC,MACJ,KAAKwD,EAAE8C,IAAIE,SACP9P,EAAGzJ,EAAIyJ,EAAGzJ,GAAKoJ,EAAKK,EAAGzJ,GAAKkI,KAAK6K,KACjC,MACJ,KAAKwD,EAAE8C,IAAIG,eACP,IAAIrO,EAAKvB,EAAG+N,OACZxM,IAAW/B,EAAK+B,GAAMjD,KAAK6K,KAC3BnJ,EAAGgO,KAAKzM,KAKhB,SAASsO,EAAEpQ,EAAI8B,EAAIvB,GACf1B,KAAKiR,KAAO,KACZjR,KAAK/G,MAAQ,KACb+G,KAAK6K,KAAO,KACZ7K,KAAKiR,KAAO9P,EACZnB,KAAK/G,MAAQgK,EACbjD,KAAK6K,KAAOnJ,EAEhB6P,EAAEjP,UAAU8N,KAAO,SAASnN,EAAIvB,KAEhC,SAASuO,EAAGhN,EAAI/B,EAAIC,EAAIO,GACpB6P,EAAEjP,UAAUgL,YAAYC,KAAKvN,KAAMkB,EAAIC,EAAIO,GAC3C1B,KAAKwR,KAAO,KACZxR,KAAKwR,KAAOvO,EAEhBgN,EAAG3N,UAAY,IAAIiP,EACnBtB,EAAG3N,UAAU8N,KAAO,SAASnN,EAAIvB,GAC7B,OAAQ1B,KAAKwR,MACb,QACA,KAAKnD,EAAEoD,OAAOC,kBACVzO,EAAGD,cAAchD,KAAKiR,KAAMjR,KAAK/G,MAAQyI,EAAGiO,OAAQ3P,KAAK6K,MACzD,MACJ,KAAKwD,EAAEoD,OAAOE,oBACV1O,EAAGD,cAAchD,KAAKiR,KAAMjR,KAAK/G,MAAQyI,EAAGkO,OAAQ5P,KAAK6K,QAKjEwD,EAAE8C,IAAM,aAER9C,EAAE8C,IAAIC,SAAW,WACjB/C,EAAE8C,IAAIE,SAAW,WACjBhD,EAAE8C,IAAIG,eAAiB,iBACvBjD,EAAEoD,OAAS,aAEXpD,EAAEoD,OAAOC,kBAAoB,oBAC7BrD,EAAEoD,OAAOE,oBAAsB,sBAC/B,SAASC,IACD9R,IAGJE,KAAK6R,KAAO,EACZ7R,KAAK8R,KAAO,EACZ9R,KAAK+R,KAAO,EACZ/R,KAAKgS,KAAO,EACZhS,KAAKiS,KAAO,EACZjS,KAAKkS,UAAW,EAChBlS,KAAKmS,UAAW,GAEpBP,EAAEtP,UAAUJ,KAAO,SAASR,GACxB1B,KAAK6R,KAAOnQ,EAAGmQ,KACf7R,KAAK8R,KAAOpQ,EAAGoQ,KACf9R,KAAK+R,KAAOrQ,EAAGqQ,KACf/R,KAAKgS,KAAOtQ,EAAGsQ,KACfhS,KAAKiS,KAAOvQ,EAAGuQ,KACfjS,KAAKkS,SAAWxQ,EAAGwQ,SACnBlS,KAAKmS,SAAWzQ,EAAGyQ,UAGvBP,EAAEtP,UAAU0L,KAAO,SAAStM,GACxB1B,KAAK6R,KAAOnQ,EAAG0Q,OACfpS,KAAK8R,KAAOpQ,EAAG0Q,OACfpS,KAAK+R,KAAOrQ,EAAG0Q,OACfpS,KAAKgS,KAAOtQ,EAAG0Q,OACfpS,KAAKiS,KAAOvQ,EAAG0Q,OACX1Q,EAAG2Q,oBAAsBhR,EAAGiR,mCAC5BtS,KAAKkS,SAAWxQ,EAAG6Q,OACnBvS,KAAKmS,SAAWzQ,EAAG6Q,SAI3BX,EAAEtP,UAAUkQ,IAAM,aAElB,IAAIC,EAAK,aACTA,EAAGC,KAAO,SAASnR,EAAIJ,EAAI0C,EAAIrD,EAAIU,EAAI+B,EAAIvB,EAAIZ,EAAID,GAC/C,IAAIG,EAAMU,EAAKuB,EAAKnC,EAAKI,EACzB,GAAU,GAANF,EACA,OAAO,KAEP,IACIc,EADAK,IAAOZ,EAAKsC,GAAMZ,GAAM9B,EAAKX,GAAMU,GAAMF,EAkB7C,OAfIc,EADM,GAANZ,GACMK,EAAKsC,EAAK1B,EAAKT,GAAMR,GAErBC,EAAKX,EAAK2B,EAAKrB,GAAMmC,EAE3B0P,MAAM7Q,KACNA,GAAMP,EAAKsC,EAAK1B,EAAKT,GAAMR,EACvByR,MAAM7Q,KACNA,GAAMX,EAAKX,EAAK2B,EAAKrB,GAAMmC,GAE3B0P,MAAM7Q,KACNxH,QAAQC,IAAI,8BACZD,QAAQC,IAAI,SAAW2G,GACvB5G,QAAQC,IAAI,eAAuB,GAAN2G,MAG3B,MAANL,EACO,IAAIuE,MAAMtD,EAAGK,IAEpBtB,EAAG,GAAKiB,EACRjB,EAAG,GAAKsB,EACDtB,IAKnB,SAASgF,IACD/F,IAGJE,KAAKrI,EAAI,KACTqI,KAAKlI,EAAI,KACTkI,KAAKnI,MAAQ,KACbmI,KAAKhI,OAAS,MAElB6N,EAAGvD,UAAU2K,KAAO,WAChB,OAAOjN,KAAKrI,EAAI,GAAMqI,KAAKnI,OAG/BgO,EAAGvD,UAAU4K,KAAO,WAChB,OAAOlN,KAAKlI,EAAI,GAAMkI,KAAKhI,QAG/B6N,EAAGvD,UAAU6K,KAAO,WAChB,OAAOnN,KAAKrI,EAAIqI,KAAKnI,OAGzBgO,EAAGvD,UAAU8K,KAAO,WAChB,OAAOpN,KAAKlI,EAAIkI,KAAKhI,QAGzB6N,EAAGvD,UAAUqG,KAAO,SAAS1F,EAAI/B,EAAIC,EAAIO,GACrC1B,KAAKrI,EAAIsL,EACTjD,KAAKlI,EAAIoJ,EACTlB,KAAKnI,MAAQsJ,EACbnB,KAAKhI,OAAS0J,GAGlBmE,EAAGvD,UAAUqG,KAAO,SAASjH,GACzB1B,KAAKrI,EAAI+J,EAAG/J,EACZqI,KAAKlI,EAAI4J,EAAG5J,EACZkI,KAAKnI,MAAQ6J,EAAG7J,MAChBmI,KAAKhI,OAAS0J,EAAG1J,QAGrB6N,EAAGvD,UAAUsQ,SAAW,SAASlR,EAAIuB,GACjC,OAAOjD,KAAKrI,GAAKqI,KAAKrI,GAAKqI,KAAKlI,GAAKkI,KAAKlI,GAAMkI,KAAKrI,GAAKqI,KAAKrI,EAAIqI,KAAKnI,OAAWmI,KAAKlI,GAAKkI,KAAKlI,EAAIkI,KAAKhI,QAG/G6N,EAAGvD,UAAUsG,OAAS,SAASlH,EAAIuB,GAC/BjD,KAAKrI,GAAK+J,EACV1B,KAAKlI,GAAKmL,EACVjD,KAAKnI,OAAc,EAAL6J,EACd1B,KAAKhI,QAAe,EAALiL,GAGnB,SAAS4P,KACTA,EAAGC,KAAO,SAASC,EAAIC,EAAIC,EAAI9I,GAC3B,IAAItC,EAAKmL,EAAGE,KAAKH,EAAIE,GACjBlJ,EAAKgJ,EAAGI,OACRC,EAAKL,EAAGM,OAEZ,GADAL,EAAGM,KAAKvJ,EAAIqJ,EAAIvL,GACZA,GAAM,EACN,OAAOsC,EAAGJ,EAAG,IAEb,GAAU,GAANlC,EAAS,CAIT,OAHI0L,EAAKpJ,EAAGJ,EAAG,OACXyJ,EAAKrJ,EAAGJ,EAAG,KAEIwJ,IADfE,EAAKL,EAAG,IACmB,EAE/B,GAAU,GAANvL,EAAS,CACT,IAAI0L,EAAKpJ,EAAGJ,EAAG,IACXyJ,EAAKrJ,EAAGJ,EAAG,IACXjG,EAAKqG,EAAGJ,EAAG,IACX3F,EAAK+F,EAAGJ,EAAG,IACX0J,EAAKL,EAAG,GACRM,EAAKN,EAAG,GAGZ,OAFIO,EAAMJ,GAAMC,EAAKD,GAAME,EAAM,KACvB3P,GAAMM,EAAKN,GAAM2P,EAAM,GACdE,GAAMD,EAAM,EAE/B,GAAU,GAAN7L,EAAS,CACT,IAAI/F,EAAKqI,EAAGJ,EAAG,IACX5H,EAAKgI,EAAGJ,EAAG,IACX6J,EAAKzJ,EAAGJ,EAAG,IACX8J,EAAK1J,EAAGJ,EAAG,IACX7I,EAAKiJ,EAAGJ,EAAG,IACX5I,EAAKgJ,EAAGJ,EAAG,IACX+J,EAAK3J,EAAGJ,EAAG,IACXgK,EAAK5J,EAAGJ,EAAG,IAGXP,GAFAiK,EAAKL,EAAG,GACRM,EAAKN,EAAG,GACHA,EAAG,IAOZ,OAFIO,GAJAJ,EAAMzR,GAAMK,EAAKL,GAAM2R,EAAM,KAC7BD,EAAMI,GAAMC,EAAKD,GAAMH,EAAM,GAGZF,GAAMG,EAAM,MAF7B5P,EAAM5C,GAAMC,EAAKD,GAAMuS,EAAM,KAC7BrP,EAAM0P,GAAMC,EAAKD,GAAML,EAAM,GAEZ3P,GAAM4P,EAAM,GACdC,GAAMnK,EAAM,EAE/B,GAAU,GAAN3B,EAAS,CACT,IAgCI8L,EAhCA/R,EAAKuI,EAAGJ,EAAG,IACXjJ,EAAKqJ,EAAGJ,EAAG,IACXiK,EAAK7J,EAAGJ,EAAG,IACXkK,EAAK9J,EAAGJ,EAAG,IACXlJ,EAAKsJ,EAAGJ,EAAG,IACX/I,EAAKmJ,EAAGJ,EAAG,IACXmK,EAAK/J,EAAGJ,EAAG,IACXoK,EAAKhK,EAAGJ,EAAG,IACXqK,EAAKjK,EAAGJ,EAAG,IACXsK,EAAKlK,EAAGJ,EAAG,IACXd,EAAKkB,EAAGJ,EAAG,KACX9F,EAAKkG,EAAGJ,EAAG,KACXuK,EAAKnK,EAAGJ,EAAG,KACXL,EAAKS,EAAGJ,EAAG,KACXlG,EAAKsG,EAAGJ,EAAG,KACXvJ,EAAK2J,EAAGJ,EAAG,KAIXD,GAHA2J,EAAKL,EAAG,GACRM,EAAKN,EAAG,GACR5J,EAAK4J,EAAG,GACHA,EAAG,IAeZ,OAFIO,GAJAJ,GARAzR,EAAMF,GAAMd,EAAKc,GAAM6R,EAAM,KAC7BtR,EAAM6R,GAAMC,EAAKD,GAAMP,EAAM,GAOZ3R,GAAM4R,EAAM,KAC7BF,GAPAI,EAAM/S,GAAMG,EAAKH,GAAM4S,EAAM,KAC7BI,EAAMK,GAAMC,EAAKD,GAAMT,EAAM,GAMZG,GAAMF,EAAM,GAGZH,GAAM/J,EAAM,MAF7B1F,GANA5C,EAAMkT,GAAMC,EAAKD,GAAMX,EAAM,KAC7BtS,EAAM8H,GAAMhF,EAAKgF,GAAMwK,EAAM,GAKZvS,GAAMwS,EAAM,KAC7BtP,GALA0P,EAAMQ,GAAM5K,EAAK4K,GAAMb,EAAM,KAC7BM,EAAMlQ,GAAMrD,EAAKqD,GAAM4P,EAAM,GAIZK,GAAMJ,EAAM,GAEZ5P,GAAM0F,EAAM,GACdmK,GAAM7J,EAAM,EAI/B,IAAK,IAFD3F,EAAK,GAAK0D,EACV9D,EAAK,IAAIwG,aAAapG,GACjBoQ,EAAK,EAAGA,EAAKpQ,EAAIoQ,IAAM,CAG5B,IAAK,IAFDtR,EAAKsR,EACL7S,EAAK,EACAH,EAAK,EAAGA,EAAKsG,EAAItG,IACtBG,GAAOuB,EAAK,GAAK,EAAM,EAAImQ,EAAG7R,GAAO6R,EAAG7R,GACxC0B,GAAM,EAEVc,EAAGwQ,GAAM7S,EAGb,IAAK,IADD8S,EAAK,IAAIjK,aAAapG,GACjB1D,EAAK,EAAGA,EAAK0D,EAAI1D,IACtB+T,EAAG/T,GAAM0J,EAAGJ,EAAGtJ,IAGd,IADDgU,EAAK,EACT,IAAShU,EAAK,EAAGA,EAAK0D,EAAI1D,IACtBgU,GAAM1Q,EAAGtD,GAAM+T,EAAG/T,GAEtB,OAAQgU,EAAK,GAAO,GAQ5C5B,EAAG6B,KAAO,SAAStB,EAAIJ,EAAIC,EAAIa,GAC3B,IAAIjM,EAAKmL,EAAGE,KAAKE,EAAIH,GACjB9I,EAAKiJ,EAAGD,OACRM,EAAKL,EAAGC,OAEZ,GADAL,EAAGM,KAAKnJ,EAAIsJ,EAAI5L,GACZA,GAAM,EACN,OAAOiM,EAAG3J,EAAG,IAEb,GAAU,GAANtC,EAAS,CAIT,OAHI0L,EAAKO,EAAG3J,EAAG,OACXqJ,EAAKM,EAAG3J,EAAG,KAEGoJ,IADdG,EAAKD,EAAG,IAGZ,GAAU,GAAN5L,EAAS,CACT,IAAI0L,EAAKO,EAAG3J,EAAG,IACXqJ,EAAKM,EAAG3J,EAAG,IACXrG,EAAKgQ,EAAG3J,EAAG,IACX/F,EAAK0P,EAAG3J,EAAG,IACXuJ,EAAKD,EAAG,GAEZ,OAAQ,GADJa,EAAKb,EAAG,MACOF,GAAMC,EAAKD,GAAMG,GAAMY,GAAMxQ,GAAMM,EAAKN,GAAM4P,GAEjE,GAAU,GAAN7L,EAAS,CACT,IAAI/F,EAAKgS,EAAG3J,EAAG,IACXhI,EAAK2R,EAAG3J,EAAG,IACXyJ,EAAKE,EAAG3J,EAAG,IACX0J,EAAKC,EAAG3J,EAAG,IACXjJ,EAAK4S,EAAG3J,EAAG,IACXhJ,EAAK2S,EAAG3J,EAAG,IACX4J,EAAKD,EAAG3J,EAAG,IACXiK,EAAKN,EAAG3J,EAAG,IAEXmK,GADAZ,EAAKD,EAAG,GACHA,EAAG,IAEZ,OAAQ,GADJ/J,EAAK+J,EAAG,OACQ,EAAIa,IAAOxS,GAAMK,EAAKL,GAAM4R,GAAMY,GAAMV,GAAMC,EAAKD,GAAMF,IAAOhK,IAAO,EAAI4K,IAAOpT,GAAMC,EAAKD,GAAMwS,GAAMY,GAAMP,GAAMK,EAAKL,GAAML,IAEpJ,GAAU,GAAN7L,EAAS,CACT,IAAIjG,EAAKkS,EAAG3J,EAAG,IACXrJ,EAAKgT,EAAG3J,EAAG,IACXqK,EAAKV,EAAG3J,EAAG,IACXwJ,EAAKG,EAAG3J,EAAG,IACXtJ,EAAKiT,EAAG3J,EAAG,IACXnJ,EAAK8S,EAAG3J,EAAG,IACX+J,EAAKJ,EAAG3J,EAAG,IACXgK,EAAKL,EAAG3J,EAAG,IACXsK,EAAKX,EAAG3J,EAAG,IACX4I,EAAKe,EAAG3J,EAAG,IACXlB,EAAK6K,EAAG3J,EAAG,KACXlG,EAAK6P,EAAG3J,EAAG,KACXX,EAAKsK,EAAG3J,EAAG,KACXL,EAAKgK,EAAG3J,EAAG,KACXtG,EAAKiQ,EAAG3J,EAAG,KACX3J,EAAKsT,EAAG3J,EAAG,KAGXT,GAFAgK,EAAKD,EAAG,GACRa,EAAKb,EAAG,GACHA,EAAG,IACR1J,EAAK0J,EAAG,GACZ,OAAQ,EAAI1J,KAAQ,EAAIL,KAAQ,EAAI4K,IAAO1S,GAAMd,EAAKc,GAAM8R,GAAMY,GAAME,GAAMb,EAAKa,GAAMd,IAAOhK,IAAO,EAAI4K,IAAOzT,GAAMG,EAAKH,GAAM6S,GAAMY,GAAMJ,GAAMC,EAAKD,GAAMR,KAAQ3J,IAAO,EAAIL,KAAQ,EAAI4K,IAAOG,GAAM1B,EAAK0B,GAAMf,GAAMY,GAAMrL,GAAMhF,EAAKgF,GAAMyK,IAAOhK,IAAO,EAAI4K,IAAO9K,GAAMM,EAAKN,GAAMkK,GAAMY,GAAMzQ,GAAMrD,EAAKqD,GAAM6P,KAI3T,IAAK,IAFDvP,EAAK,GAAK0D,EACV9D,EAAK,IAAIwG,aAAapG,GACjBoQ,EAAK,EAAGA,EAAKpQ,EAAIoQ,IAAM,CAG5B,IAAK,IAFDtR,EAAKsR,EACL7S,EAAK,EACAH,EAAK,EAAGA,EAAKsG,EAAItG,IACtBG,GAAOuB,EAAK,GAAK,EAAM,EAAIwQ,EAAGlS,GAAOkS,EAAGlS,GACxC0B,GAAM,EAEVc,EAAGwQ,GAAM7S,EAGb,IAAK,IADDiT,EAAK,IAAIpK,aAAapG,GACjB1D,EAAK,EAAGA,EAAK0D,EAAI1D,IACtBkU,EAAGlU,GAAMqT,EAAG3J,EAAG1J,IAGd,IADD4T,EAAK,EACT,IAAS5T,EAAK,EAAGA,EAAK0D,EAAI1D,IACtB4T,GAAMtQ,EAAGtD,GAAMkU,EAAGlU,GAEtB,OAAO4T,GAQ/BxB,EAAG+B,KAAO,SAASC,EAAIC,EAAIpL,EAAIzG,EAAI8R,EAAIhL,EAAIiL,EAAIC,GAC3C,IAAIpU,EAAKiU,EAAG5B,KAAK2B,EAAInL,GACjBwL,EAAKL,EAAG1B,OACRhJ,EAAK0K,EAAGxB,OACZyB,EAAGxB,KAAK4B,EAAI/K,EAAItJ,GAChB,IAAIM,EAAU,EAAL8B,EACLzC,EAAKwU,EACT,GAAInU,GAAM,EAAG,CACT,IACI8T,EAAKI,EADAG,EAAG,IAEZ,GAAU,GAAND,GAAiB,GAAND,EACXrJ,EAAEwJ,KAAKR,EAAI,EAAG5K,EAAI,EAAG5I,QAErB,IAAK,IAAI8S,EAAK,EAAGA,EAAK9S,GAClB4I,EAAGvJ,GAAMmU,EAAGV,KACZlK,EAAGvJ,EAAK,GAAKmU,EAAGV,KAChBzT,GAAMyU,OAId,GAAU,GAANpU,EAKK,CAJD8T,EAAKI,EAAGG,EAAG,IAIV,IAHDjC,EAAK8B,EAAGG,EAAG,IAEXE,EAAK,GADLC,EAAKlL,EAAG,IAEZ,IAAS8J,EAAK,EAAGA,EAAK9S,GAClB4I,EAAGvJ,GAAMmU,EAAGV,GAAMmB,EAAKnC,EAAGgB,GAAMoB,IAC9BpB,EACFlK,EAAGvJ,EAAK,GAAKmU,EAAGV,GAAMmB,EAAKnC,EAAGgB,GAAMoB,IAClCpB,EACFzT,GAAMyU,OAGV,GAAU,GAANpU,EAaK,CAZD8T,EAAKI,EAAGG,EAAG,IACXjC,EAAK8B,EAAGG,EAAG,IAWV,IAVD9Q,EAAK2Q,EAAGG,EAAG,IACXnR,EAAKgR,EAAGG,EAAG,IACXG,EAAKlL,EAAG,GAIRmL,GADAC,EAAK,GAFLC,EAAKrL,EAAG,MACRiL,EAAK,EAAIC,GAGTI,EAAKF,EAAKF,EACVK,EAAKF,EAAKJ,EACVO,EAAKH,EAAKH,EACd,IAASpB,EAAK,EAAGA,EAAK9S,GAClB4I,EAAGvJ,GAAM8U,EAAKX,EAAGV,GAAMwB,EAAKxC,EAAGgB,GAAMyB,EAAKtR,EAAG6P,GAAM0B,EAAK5R,EAAGkQ,KACzDA,EACFlK,EAAGvJ,EAAK,GAAK8U,EAAKX,EAAGV,GAAMwB,EAAKxC,EAAGgB,GAAMyB,EAAKtR,EAAG6P,GAAM0B,EAAK5R,EAAGkQ,KAC7DA,EACFzT,GAAMyU,OAGV,GAAU,GAANpU,EAuBK,KAtBDuS,EAAK2B,EAAGG,EAAG,IACXzB,EAAKsB,EAAGG,EAAG,IACXpT,EAAKiT,EAAGG,EAAG,IACX/S,EAAK4S,EAAGG,EAAG,IACX1L,EAAKuL,EAAGG,EAAG,IACXpL,EAAKiL,EAAGG,EAAG,IACX3T,EAAKwT,EAAGG,EAAG,IACXhU,EAAK6T,EAAGG,EAAG,IAEXM,GADAH,EAAKlL,EAAG,GACHA,EAAG,IAKRyL,GADAC,EAAK,GAHLC,GAAK3L,EAAG,MAERoL,EAAK,EAAIC,IADTJ,EAAK,EAAIC,GAITU,EAAKF,EAAKN,EAAKF,EACfW,EAAKH,EAAKL,EAAKJ,EACfa,EAAKJ,EAAKL,EAAKH,EACfa,EAAKJ,GAAKP,EAAKH,EACfe,EAAKL,GAAKP,EAAKF,EACfe,EAAKN,GAAKN,EAAKJ,EACfiB,EAAKP,GAAKN,EAAKH,EACnB,IAASpB,EAAK,EAAGA,EAAK9S,GAClB4I,EAAGvJ,GAAMoV,EAAKxC,EAAGa,GAAM8B,EAAKtC,EAAGQ,GAAM+B,EAAKlU,EAAGmS,GAAMgC,EAAK9T,EAAG8R,GAAMiC,EAAK1M,EAAGyK,GAAMkC,EAAKrM,EAAGmK,GAAMmC,EAAK7U,EAAG0S,GAAMoC,EAAKnV,EAAG+S,KACjHA,EACFlK,EAAGvJ,EAAK,GAAKoV,EAAKxC,EAAGa,GAAM8B,EAAKtC,EAAGQ,GAAM+B,EAAKlU,EAAGmS,GAAMgC,EAAK9T,EAAG8R,GAAMiC,EAAK1M,EAAGyK,GAAMkC,EAAKrM,EAAGmK,GAAMmC,EAAK7U,EAAG0S,GAAMoC,EAAKnV,EAAG+S,KACrHA,EACFzT,GAAMyU,OAGV,GAAU,GAANpU,EAyCK,KAnBD0U,EACAM,EAtBAS,EAAKvB,EAAGG,EAAG,IACXqB,EAAKxB,EAAGG,EAAG,IACXlC,EAAK+B,EAAGG,EAAG,IACXrB,EAAKkB,EAAGG,EAAG,IACXsB,EAAKzB,EAAGG,EAAG,IACXuB,EAAK1B,EAAGG,EAAG,IACXd,EAAKW,EAAGG,EAAG,IACXT,EAAKM,EAAGG,EAAG,IACXwB,EAAK3B,EAAGG,EAAG,IACXyB,EAAK5B,EAAGG,EAAG,IACX0B,GAAK7B,EAAGG,EAAG,KACXlB,GAAKe,EAAGG,EAAG,KACX2B,GAAK9B,EAAGG,EAAG,KACX4B,GAAK/B,EAAGG,EAAG,KACXtB,GAAKmB,EAAGG,EAAG,KACXhB,GAAKa,EAAGG,EAAG,KAGXY,IAFAT,EAAKlL,EAAG,GACRqL,EAAKrL,EAAG,GACHA,EAAG,IACR4M,GAAK5M,EAAG,GAIR6M,GAAK,EAAID,GACT5C,GAAK6C,IAFLnB,EAAK,EAAIC,KADTP,EAAK,EAAIC,IADTJ,EAAK,EAAIC,GAKT7B,GAAKwD,GAAKnB,EAAKN,EAAKF,EACpBpR,GAAK+S,GAAKnB,EAAKL,EAAKJ,EACpBjR,GAAK6S,GAAKnB,EAAKL,EAAKH,EACpBhB,GAAK2C,GAAKlB,GAAKP,EAAKH,EACpBrC,GAAKiE,GAAKlB,GAAKP,EAAKF,EACpBvU,GAAKkW,GAAKlB,GAAKN,EAAKJ,EACpBvR,GAAKmT,GAAKlB,GAAKN,EAAKH,EACpBb,GAAKuC,GAAKlB,EAAKN,EAAKH,EACpBzB,GAAKoD,GAAKlB,EAAKN,EAAKF,EACpBxN,GAAKkP,GAAKlB,EAAKL,EAAKJ,EACpBtR,GAAKiT,GAAKlB,EAAKL,EAAKH,EACpBd,GAAKwC,GAAKjB,GAAKP,EAAKH,EACpBrB,GAAKgD,GAAKjB,GAAKP,EAAKF,EACpB5U,GAAKsW,GAAKjB,GAAKN,EAAKJ,EACpBxT,GAAKmV,GAAKjB,GAAKN,EAAKH,EACxB,IAASpB,EAAK,EAAGA,EAAK9S,GAClB4I,EAAGvJ,GAAM2T,GAAKmC,EAAGrC,GAAMT,GAAK+C,EAAGtC,GAAMhQ,GAAK+O,EAAGiB,GAAM9P,GAAK0P,EAAGI,GAAMI,GAAKmC,EAAGvC,GAAMlB,GAAK0D,EAAGxC,GAAMnT,GAAKsT,EAAGH,GAAMpQ,GAAK4Q,EAAGR,GAAMO,GAAKkC,EAAGzC,GAAMN,GAAKgD,EAAG1C,GAAMpM,GAAK+O,GAAG3C,GAAMnQ,GAAKkQ,GAAGC,GAAMM,GAAKsC,GAAG5C,GAAMF,GAAK+C,GAAG7C,GAAMxT,GAAKmT,GAAGK,GAAMrS,GAAKsS,GAAGD,KACjOA,EACFlK,EAAGvJ,EAAK,GAAK2T,GAAKmC,EAAGrC,GAAMT,GAAK+C,EAAGtC,GAAMhQ,GAAK+O,EAAGiB,GAAM9P,GAAK0P,EAAGI,GAAMI,GAAKmC,EAAGvC,GAAMlB,GAAK0D,EAAGxC,GAAMnT,GAAKsT,EAAGH,GAAMpQ,GAAK4Q,EAAGR,GAAMO,GAAKkC,EAAGzC,GAAMN,GAAKgD,EAAG1C,GAAMpM,GAAK+O,GAAG3C,GAAMnQ,GAAKkQ,GAAGC,GAAMM,GAAKsC,GAAG5C,GAAMF,GAAK+C,GAAG7C,GAAMxT,GAAKmT,GAAGK,GAAMrS,GAAKsS,GAAGD,KACrOA,EACFzT,GAAMyU,MAEP,CAGH,IAAK,IAFDgC,GAAK,GAAKpW,EACVqW,GAAK,IAAI3M,aAAa0M,IACjB1D,GAAK,EAAGA,GAAK0D,GAAI1D,KAAM,CAG5B,IAAK,IAFD7R,GAAK6R,GACLvS,GAAK,EACAmW,GAAK,EAAGA,GAAKtW,EAAIsW,KACtBnW,IAAOU,GAAK,GAAK,EAAM,EAAIyI,EAAGgN,IAAOhN,EAAGgN,IACxCzV,IAAM,EAEVwV,GAAG3D,IAAMvS,GAGb,IAAK,IADD8S,GAAK,IAAIvJ,aAAa0M,IACjBhO,GAAK,EAAGA,GAAKgO,GAAIhO,KACtB6K,GAAG7K,IAAM8L,EAAGG,EAAGjM,KAEnB,IAASgL,EAAK,EAAGA,EAAK9S,GAAM,CAInB,IAHDuS,GAAK,EACLY,GAAK,EACL8C,GAAKnD,EAAK,EACd,IAAShL,GAAK,EAAGA,GAAKgO,GAAIhO,KACtByK,IAAMwD,GAAGjO,IAAM6K,GAAG7K,IAAIgL,GACtBK,IAAM4C,GAAGjO,IAAM6K,GAAG7K,IAAImO,IAE1BnD,GAAM,EACNlK,EAAGvJ,GAAMkT,GACT3J,EAAGvJ,EAAK,GAAK8T,GACb9T,GAAMyU,KASlC,SAASna,IACDgF,IAGJE,KAAKrI,EAAI,KACTqI,KAAKlI,EAAI,MAEbgD,EAAEwH,UAAU+U,KAAO,SAAS3V,EAAIuB,GAC5BjD,KAAKrI,EAAI+J,EACT1B,KAAKlI,EAAImL,GAGbnI,EAAEwH,UAAU+U,KAAO,SAAS3V,GACxB1B,KAAKrI,EAAI+J,EAAG/J,EACZqI,KAAKlI,EAAI4J,EAAG5J,GAGhB,SAASwf,IACDxX,IAGJE,KAAKyK,KAAO,KACZzK,KAAKuX,KAAO,KACZvX,KAAKwX,KAAO,KACZxX,KAAKyX,KAAO,KACZzX,KAAK0X,KAAO,KACZ1X,KAAK2X,KAAO,KACZ3X,KAAK4X,OAAS,KACd5X,KAAKuJ,WAAa,IAAInE,OAE1BkS,EAAGO,MAAQ,EACXP,EAAGQ,KAAO,IACVR,EAAGtS,KAAO,EACVsS,EAAGS,KAAO,EACVT,EAAGU,KAAOV,EAAGQ,KACbR,EAAGW,KAAOX,EAAGQ,KACbR,EAAGY,KAAO,WACN,OAAOZ,EAAGU,MAGdV,EAAGa,KAAO,WACN,OAAOb,EAAGW,MAGdX,EAAGhV,UAAU8V,sBAAwB,SAASnV,GAC1C,IAAIvB,KACJ,OAAU,MAANuB,EACO,KAEM,GAAbA,EAAGzK,OACI,KAEN,IAAI6f,KAAKpV,GAIdvB,EAAKuB,EAAGqV,GAAGC,MAAM,MAHb7W,EAAG3C,KAAKkE,EAAGqV,IACJ5W,IAMf4V,EAAGhV,UAAU0L,KAAO,SAAStM,GACzB1B,KAAKyK,KAAO/I,EAAGF,OACfxB,KAAKuX,KAAO7V,EAAGF,OACfxB,KAAKwX,KAAO9V,EAAGF,OACfxB,KAAKyX,KAAO/V,EAAGuM,OACfjO,KAAK0X,KAAOhW,EAAG8W,OACfxY,KAAK2X,KAAOjW,EAAG+W,OACX/W,EAAG2Q,oBAAsBhR,EAAGC,MAC5BtB,KAAK4X,OAASlW,EAAGF,OACjBxB,KAAKuJ,WAAavJ,KAAKoY,sBAAsBpY,KAAK4X,SAElD5X,KAAKuJ,cAETvJ,KAAK0Y,KAAK1Y,KAAK0X,OAGnBJ,EAAGhV,UAAU8E,cAAgB,WACzB,OAAOpH,KAAKuJ,YAGhB+N,EAAGhV,UAAUJ,KAAO,SAASR,KAE7B4V,EAAGhV,UAAUqW,KAAO,SAASjX,EAAIuB,GAG7B,GAFAA,EAAG2V,KAAK,IAAK,EACb3V,EAAG4V,KAAOhG,EAAGC,KAAKpR,EAAI1B,KAAKwX,KAAMvU,EAAG2V,KAAM5Y,KAAK0X,MAC3C5R,GAAEgT,WACF,GAAI7V,EAAG2V,KAAK,GACR,OAGR3V,EAAG8V,KAAOlG,EAAG6B,KAAKhT,EAAI1B,KAAKwX,KAAMvU,EAAG2V,KAAM5Y,KAAK2X,OAGnDL,EAAGhV,UAAU0W,KAAO,SAAStX,EAAIuB,KAEjCqU,EAAGhV,UAAUiF,cAAgB,WACzB,OAAOvH,KAAKyK,MAGhB6M,EAAGhV,UAAU2W,KAAO,SAASvX,GACzB1B,KAAKyK,KAAO/I,GAGhB4V,EAAGhV,UAAU4W,WAAa,SAASxX,EAAIuB,GACnC,OAAOA,EAAG8V,MAGdzB,EAAGhV,UAAU6W,KAAO,SAASzX,EAAIuB,GAC7B,OAAOA,EAAG4V,MAGdvB,EAAGhV,UAAUoW,KAAO,SAASvX,GACzB,IAAK,IAAI8B,EAAK9B,EAAG3I,OAAS,EAAGyK,GAAM,IAAKA,EAAI,CACxC,IAAIvB,EAAKP,EAAG8B,GACRvB,EAAK4V,EAAGU,KACRV,EAAGU,KAAOtW,EAENA,EAAK4V,EAAGW,OACRX,EAAGW,KAAOvW,KAM1B4V,EAAGhV,UAAU8W,oBAAsB,WAC/B,OAAOpZ,KAAKuX,MAGhBD,EAAGhV,UAAU+W,KAAO,SAAS3X,GACzB1B,KAAKuX,KAAO7V,GAGhB4V,EAAGhV,UAAUgX,KAAO,WAChB,OAAqB,MAAbtZ,KAAKuX,MAAiBvX,KAAKuX,MAAQgC,GAAEC,QAGjDlC,EAAGhV,UAAUmX,QAAU,SAAStY,EAAIO,EAAIuB,KAExCqU,EAAGhV,UAAUjD,KAAO,SAAS8B,EAAIO,EAAIuB,KAErCqU,EAAGhV,UAAUwC,QAAU,aAEvBwS,EAAGhV,UAAUoX,KAAO,SAASzW,EAAIvB,EAAIP,KAErC,SAASoP,IACDzQ,IAGJE,KAAK2Z,KAAOpJ,EAAGqJ,KACf5Z,KAAK6Z,KAAO,EACZ7Z,KAAK8Z,KAAO,EACZ9Z,KAAK+Z,KAAO,EACZ/Z,KAAKga,KAAO,EACZha,KAAKia,SAAU,EACfja,KAAKka,UAAY,IAAI3P,aAAa,IAClCvK,KAAKma,oBAAqB,EAC1Bna,KAAKoa,WAAa,EAClBpa,KAAKqa,gBAAkB9J,EAAG+J,sBAC1Bta,KAAKua,2BAA6B,KAClCva,KAAKwa,2BAA6B,KAClCxa,KAAKuG,eAAiB,IAAInB,OAE9BmL,EAAGqJ,KAAO,GACVrJ,EAAG+J,sBAAwB,EAC3B/J,EAAGkK,iCAAmC,EACtClK,EAAGmK,gCAAkC,EACrCnK,EAAGoK,sBAAwB,EAC3BpK,EAAGqK,6BAA+B,EAClCrK,EAAGjO,UAAUqE,sBAAwB,SAASjF,EAAIuB,GAC9CjD,KAAKuG,eAAe7E,GAAMuB,GAG9BsN,EAAGjO,UAAUuY,sBAAwB,SAASnZ,GAC1C,OAAO1B,KAAKuG,eAAe7E,IAG/B6O,EAAGjO,UAAUwY,KAAO,aAEpBvK,EAAGjO,UAAUyY,KAAO,SAAS/Z,EAAIE,EAAIC,EAAII,EAAIV,EAAIoC,EAAIvB,KAErD6O,EAAGjO,UAAUiB,KAAO,WAChB,OAAQ,GAGZgN,EAAGjO,UAAUmB,KAAO,SAAS/B,KAE7B6O,EAAGjO,UAAU0Y,aAAe,SAAS9Z,EAAIC,EAAI8B,EAAIvB,GACzCR,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAGTC,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAGT8B,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAGTvB,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAGb1B,KAAK6Z,KAAO3Y,EACZlB,KAAK8Z,KAAO3Y,EACZnB,KAAK+Z,KAAO9W,EACZjD,KAAKga,KAAOtY,GAGhB6O,EAAGjO,UAAU2Y,KAAO,SAASvZ,GACzB1B,KAAKia,QAAUvY,GAGnB6O,EAAGjO,UAAUyG,UAAY,SAASrH,GAC9B,IAAK,IAAIuB,EAAK,EAAGA,EAAK,GAAIA,IACtBjD,KAAKka,UAAUjX,GAAMvB,EAAGuB,IAIhCsN,EAAGjO,UAAU4Y,KAAO,WAChB,OAAOlb,KAAKka,WAGhB3J,EAAGjO,UAAU6Y,sBAAwB,SAASzZ,GAC1C1B,KAAKma,mBAAqBzY,GAG9B6O,EAAGjO,UAAU8Y,qBAAuB,WAChC,OAAOpb,KAAKma,oBAGhB5J,EAAGjO,UAAU+Y,cAAgB,SAAS3Z,GAClC1B,KAAKoa,WAAa1Y,GAGtB6O,EAAGjO,UAAUgZ,cAAgB,WACzB,OAAOtb,KAAKoa,YAGhB7J,EAAGjO,UAAUiZ,mBAAqB,WAC9B,OAAOvb,KAAKqa,iBAGhB9J,EAAGjO,UAAUkZ,mBAAqB,SAAS9Z,GACvC1B,KAAKqa,gBAAkB3Y,GAG3B6O,EAAGjO,UAAU+G,iCAAmC,SAAS3H,GACrD1B,KAAKua,2BAA6B7Y,GAGtC6O,EAAGjO,UAAUmZ,8BAAgC,WACzC,OAAOzb,KAAKua,4BAGhBhK,EAAGjO,UAAUoZ,iCAAmC,SAASha,GACrD1B,KAAKwa,2BAA6B9Y,GAGtC6O,EAAGjO,UAAUqZ,8BAAgC,WACzC,OAAO3b,KAAKwa,4BAGhB,SAAShU,IACD1G,IAGJE,KAAK+E,EAAI,EACT/E,KAAKyG,EAAI,EACTzG,KAAK0G,EAAI,EACT1G,KAAKiF,EAAI,EACTjF,KAAK/G,MAAQ,EACb+G,KAAK4b,KAAO,EACZ5b,KAAK6b,UAAY/V,GAAEgW,2BAEvB,SAASC,IACDjc,IAGJE,KAAKgc,KAAO,KACZhc,KAAKuX,KAAO,KACZvX,KAAKic,MAAO,EACZjc,KAAK2X,KAAO,MAEhBoE,EAAElE,MAAQ,EACVkE,EAAEG,KAAO,EACTH,EAAEI,KAAO,EACTJ,EAAEzZ,UAAU0L,KAAO,SAAStM,GACxB1B,KAAKgc,KAAOta,EAAGF,OACfxB,KAAKuX,KAAO7V,EAAGF,QAGnBua,EAAEzZ,UAAU8Z,eAAiB,SAAS1a,GAC9BA,EAAG2Q,oBAAsBhR,EAAGiR,mCAC5BtS,KAAK2X,KAAOjW,EAAG+W,SAIvBsD,EAAEzZ,UAAUJ,KAAO,SAASR,KAE5Bqa,EAAEzZ,UAAUqW,KAAO,SAAS1V,EAAIvB,KAEhCqa,EAAEzZ,UAAU+Z,mBAAqB,SAASlb,EAAID,EAAI+B,EAAIvB,GACjC,MAAb1B,KAAK2X,KACL1U,EAAGqZ,uBAAuB,GAE1BrZ,EAAGqZ,uBAAuBzJ,EAAG6B,KAAKvT,EAAID,EAAIQ,EAAI1B,KAAK2X,QAI3DoE,EAAEzZ,UAAU0W,KAAO,SAAS/V,EAAIvB,KAEhCqa,EAAEzZ,UAAUia,KAAO,SAAShb,EAAIL,EAAIF,EAAIU,EAAIuB,EAAI9B,EAAIN,KAEpDkb,EAAEzZ,UAAUwC,QAAU,aAEtBiX,EAAEzZ,UAAU+W,KAAO,SAAS3X,GACxB1B,KAAKuX,KAAO7V,GAGhBqa,EAAEzZ,UAAUka,KAAO,SAAS9a,GACxB1B,KAAKgc,KAAOta,GAGhBqa,EAAEzZ,UAAU8W,oBAAsB,WAC9B,OAAOpZ,KAAKuX,MAGhBwE,EAAEzZ,UAAUma,cAAgB,WACxB,OAAOzc,KAAKgc,MAGhBD,EAAEzZ,UAAUgX,KAAO,WACf,OAAqB,MAAbtZ,KAAKuX,MAAiBvX,KAAKuX,MAAQgC,GAAEC,QAGjD,SAAS7N,KACTA,EAAE+Q,KAAO,EACT/Q,EAAEgR,KAAOhR,EAAE+Q,KACX/Q,EAAEiR,KAAO,WACL,OAAO,GAGXjR,EAAEkR,KAAO,SAAS5Z,GACd,IAEI,IADA,IAAI9B,EAAK2b,cACFA,cAAgB3b,EAAK8B,KAC9B,MAAOvB,GACLA,EAAGW,SAIXsJ,EAAEC,gBAAkB,WAChB,OAAQD,EAAEgR,MAAQhR,EAAE+Q,KAAQ/Q,EAAEa,oBAAsBb,EAAEgR,MAG1DhR,EAAEoR,gBAAkB,SAASrb,GACzBiK,EAAEgR,KAAOjb,GAGbiK,EAAEqR,mBAAqB,WACnB,OAAQrR,EAAEgR,KAAOhR,EAAEa,qBAGvBb,EAAEmR,YAAc,WACZ,OAAO,IAAIG,MAAOC,WAGtBvR,EAAEa,kBAAoB,WAClB,OAAO,IAAIyQ,MAAOC,WAGtBvR,EAAEwR,IAAM,SAASzb,KAEjBiK,EAAEwJ,KAAO,SAASnU,EAAIG,EAAI8B,EAAI1B,EAAIG,GAC9B,IAAK,IAAIR,EAAK,EAAGA,EAAKQ,EAAIR,IACtB+B,EAAG1B,EAAKL,GAAMF,EAAGG,EAAKD,IAI9B,SAASkc,IACDtd,IAGJE,KAAKqd,KAAO,EACZrd,KAAKiR,KAAO,KACZjR,KAAKsd,KAAO,KACZtd,KAAKud,KAAOH,EAAGI,KACfxd,KAAKyd,MAAQ,EACbzd,KAAK0d,KAAO,EACZ1d,KAAK2d,KAAO,GAEhBP,EAAGI,MAAQ,EACXJ,EAAG9a,UAAU0L,KAAO,SAAStM,GACzB1B,KAAKiR,KAAOvP,EAAGF,OACfxB,KAAKqd,KAAO3b,EAAGuM,OACfjO,KAAKsd,KAAO5b,EAAGF,QAGnB4b,EAAG9a,UAAUO,cAAgB,SAASnB,GAIlC,OAHI1B,KAAKyd,MAAQ/b,IACb1B,KAAKud,KAAOH,EAAGI,MAEZxd,KAAKud,MAGhBH,EAAG9a,UAAUsb,KAAO,SAAS3a,EAAIvB,GAC7B1B,KAAKud,KAAOta,EACZjD,KAAKyd,KAAO/b,GAGhB0b,EAAG9a,UAAUub,WAAa,WACtB,OAAO7d,KAAKiR,MAGhBmM,EAAG9a,UAAUwb,KAAO,SAASpc,GACzB1B,KAAKiR,KAAOvP,GAGhB0b,EAAG9a,UAAUyb,KAAO,WAChB,OAAO/d,KAAKqd,MAGhBD,EAAG9a,UAAU0b,KAAO,WAChB,OAAOhe,KAAKsd,MAGhBF,EAAG9a,UAAU2b,KAAO,SAAShb,EAAIvB,GAC7B1B,KAAKqd,KAAOpa,EACZjD,KAAKsd,KAAO5b,GAGhB0b,EAAG9a,UAAU4b,KAAO,WAChB,OAAOle,KAAK0d,MAGhBN,EAAG9a,UAAU6b,KAAO,SAASzc,GACzB1B,KAAK0d,KAAOhc,GAGhB0b,EAAG9a,UAAU8b,KAAO,WAChB,OAAOpe,KAAK2d,MAGhBP,EAAG9a,UAAU+b,KAAO,SAAS3c,GACzB1B,KAAK2d,KAAOjc,GAGhB,SAAS4c,KACTA,EAAEC,WAAa,SAASpd,EAAII,EAAIL,GAC5B,IAAIQ,EAAKH,EAAKL,EAAG1I,OACjB,GAAIkJ,GAAMP,EAAG3I,OACT,OAAO,EAEX,IAAK,IAAIyK,EAAK1B,EAAI0B,EAAKvB,EAAIuB,IACvB,GAAIqb,EAAEE,QAAQrd,EAAI8B,IAAO/B,EAAGud,OAAOxb,EAAK1B,GACpC,OAAO,EAGf,OAAO,GAGX+c,EAAEE,QAAU,SAASvb,EAAIvB,GACrB,OAAOgd,OAAOC,aAAa1b,EAAG2b,SAASld,KAG3C4c,EAAEO,aAAe,SAAS7d,EAAIO,EAAIJ,GAG9B,IAAK,IAFDO,EAAK,IAAIhB,YAAiB,EAALS,GACrBD,EAAK,IAAI4d,YAAYpd,GAChBuB,EAAK,EAAGA,EAAK9B,EAAI8B,IACtB/B,EAAG+B,GAAMjC,EAAG4d,SAASrd,EAAK0B,GAE9B,OAAOyb,OAAOC,aAAatU,MAAM,KAAMnJ,IAG3Cod,EAAES,KAAO,SAASjd,EAAId,EAAI6C,EAAI3C,GACtBY,aAAcpB,cACdoB,EAAK,IAAInB,SAASmB,IAEtB,IAAIP,EAAKsC,EACL1C,GAAK,EACLX,GAAK,EACLM,EAAK,EACLqB,EAAKmc,EAAEE,QAAQ1c,EAAIP,GACb,KAANY,IACAhB,GAAK,EACLI,KAGJ,IADA,IAAIV,GAAK,EACFU,EAAKP,EAAIO,IAAM,CAElB,OADAY,EAAKmc,EAAEE,QAAQ1c,EAAIP,IAEnB,IAAK,IACDT,GAAU,GACV,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDA,EAAU,GAALA,EAAU,EACf,MACJ,IAAK,IACDN,GAAK,EACLe,IACAV,GAAK,EACL,MACJ,QACIA,GAAK,EAGT,GAAIA,EACA,MAGR,GAAIL,EAGA,IAFA,IAAIyC,EAAK,GACLvB,GAAK,EACFH,EAAKP,EAAIO,IAAM,CAElB,OADAY,EAAKmc,EAAEE,QAAQ1c,EAAIP,IAEnB,IAAK,IACD,MACJ,IAAK,IACDT,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,IAAK,IACDnC,GAAW,EAALmC,EACN,MACJ,QACIvB,GAAK,EAIT,GADAuB,GAAM,GACFvB,EACA,MAQZ,OAJIP,IACAL,GAAMA,GAEVI,EAAG,GAAKK,EACDT,GAGX,SAAS4F,IACD5G,IAGJE,KAAKgf,KAAO,MAEhBtY,EAAEpE,UAAUG,KAAO,WACfzC,KAAKgf,KAAO,IAAI5Z,OAGpBsB,EAAEpE,UAAU0L,KAAO,SAAStM,GACxB1B,KAAKgf,KAAOtd,EAAGF,QAGnBkF,EAAEpE,UAAU2c,KAAO,SAAS/d,GACxB,GAAIA,EAAGge,OACH,OAAO,EAGX,IAAK,IADDxd,EAAKR,EAAGie,OACHhe,EAAKnB,KAAKgf,KAAKxmB,OAAS,EAAG2I,GAAM,IAAKA,EAAI,CAC/C,IAAI8B,EAAKjD,KAAKgf,KAAK7d,GAAI0B,cAAcnB,GAIrC,GAHIuB,GAAMma,EAAGI,OACTva,EAAK/B,EAAG2B,cAAc7C,KAAKgf,KAAK7d,GAAI0c,eAEpC3c,EAAGke,KAAKnc,GACR,OAAO,EAGf,OAAO,GAGXyD,EAAEpE,UAAU4Q,KAAO,SAAS3R,EAAI4C,GAM5B,IAAK,IAFDlB,EACAzC,EAJAyI,EAAKjJ,KAAKgf,KAAKxmB,OACf2I,EAAKI,EAAG4d,OACRte,EAAK,EAGAK,EAAK,EAAGA,EAAK+H,EAAI/H,IAAM,CAC5B,IAAIQ,EAAK1B,KAAKgf,KAAK9d,GAMnB,IALA+B,EAAKvB,EAAGmB,cAAc1B,KACZic,EAAGI,OACTva,EAAK1B,EAAGsB,cAAcnB,EAAGmc,cACzBnc,EAAGkc,KAAK3a,EAAI9B,IAEZ8B,EAAK,EACL,MAAM,IAAIoc,UAAU,eAAiB3d,EAAGmc,cAE5C,IAAIpd,EAAKwC,EAAK,EAAI,EAAI1B,EAAGqB,cAAcK,GACvCzC,EAAKkB,EAAGqc,OACR,IAGIjd,EACA+C,EAJA7C,EAAKU,EAAGsc,OACRlc,GAAM,EACNF,EAAK,EAGT,GAAIpB,EAAK,QACL,GAAU,GAANA,GACAM,EAAKE,EAAG,IACCgJ,EAAGsV,IAAM7e,GAAMA,EAAKK,EAAKkJ,EAAGsV,KACjCxd,EAAK,EACLF,EAAK,IAELE,EAAK,EACLqC,EAAG,IAAK,QAIZ,GAAI1D,GADJK,EAAKE,EAAG,IACMgJ,EAAGsV,IACbxd,EAAK,EACLqC,EAAG,IAAK,OAER,GAAI1D,EAAKK,EAAKkJ,EAAGsV,IACbxd,EAAK,MACF,CAEH,IAAK,IADDmC,GAAK,EACA9B,EAAK,EAAGA,EAAK3B,IAAM2B,EAAI,CAE5B,GAAI1B,GADJoD,EAAK7C,EAAGmB,IACM6H,EAAGsV,IAAK,CACdzb,EAAKmG,EAAGsV,IAAM7e,EACdqB,EAAKK,GAELL,EAAKK,EAAK,EACVP,GAAMnB,EAAKK,IAAO+C,EAAK/C,GACvBD,KAEJoD,GAAK,EACL,MAEJnD,EAAK+C,EAEJI,IACDnC,EAAKtB,EAAK,EACVoB,EAAK,EACLuC,EAAG,IAAK,GAM5BzC,EAAGyc,KAAKrc,GACRJ,EAAG2c,KAAKzc,GAEZ,OAAOf,GAGX6F,EAAEpE,UAAUgR,KAAO,SAASzS,EAAIe,EAAIE,GAChC,IAAI+B,EAAK,GAAK/B,EACV+B,EAAK,EAAImG,EAAGuV,MACZjlB,QAAQC,IAAI,eAMhB,IAAK,IAJDuG,EAAKd,KAAKgf,KAAKxmB,OACf0I,EAAK,EACLQ,EAAK,EACLP,EAAK,EACAX,EAAK,EAAGA,EAAKqD,IAAMrD,EACxBK,EAAGL,GAAM,EAEb,IAAK,IAAIe,EAAK,EAAGA,EAAKT,IAAMS,EAAI,CAC5B,IAAI0B,EAAKjD,KAAKgf,KAAKzd,GACnB,GAAiB,GAAb0B,EAAGmb,OAAa,CAEhB,IADIjc,EAAKc,EAAGib,OAAShd,GACZ,GAAK4E,GAAE0Z,KACZ,MAAM,IAAIH,UAAU,aAExB,IAAS7e,EAAK,EAAGA,EAAKqD,IAAMrD,EACxBK,EAAGL,IAAO2B,MAEX,CAGE,IAFDA,EAAKjB,EAAK+B,EAAGib,OACbld,EAAKE,GAAM+B,EAAGib,OAAS,GAC3B,IAAS1d,EAAK,EAAGA,EAAKqD,IAAMrD,EACxBK,EAAGL,KAASA,EAAKkB,EAAK,GAAK,GAAK,EAAKS,EAAKnB,EAE9CY,EAAGT,KAAQ8B,EAAGmb,OACd1c,GAAM,EAEVR,GAAM+B,EAAG8a,OAEbld,EAAGgD,GAAM,MACTjC,EAAGT,IAAO,GAGduF,EAAEpE,UAAUmd,KAAO,SAASte,EAAIO,EAAIR,GAEhC,IAAK,IADDF,EAAK,IAAIuJ,aAAa7I,GACjBH,EAAK,EAAGA,EAAKG,IAAMH,EACxBP,EAAGO,GAAML,EAAGK,GAEhB,IAAI0B,EAAK,IAAIma,EACbna,EAAG6a,KAAK3c,GACR8B,EAAGgb,KAAKvc,EAAIV,GACZhB,KAAKgf,KAAKjgB,KAAKkE,IAGnByD,EAAEpE,UAAUod,KAAO,SAASvd,GAGxB,IAAK,IAFDtB,EAAKsB,EACLnB,EAAKhB,KAAKgf,KAAKxmB,OACV0I,EAAK,EAAGA,EAAKF,IAAME,EAAI,CAC5B,IAAI+B,EAAKjD,KAAKgf,KAAK9d,GACfQ,EAAKuB,EAAG8a,OACR5c,EAAKN,EAAKoC,EAAG8a,OACbxc,EAAK0B,EAAG+a,OAAO7c,GACnB7G,QAAQC,IAAI,kBAAmB0I,EAAG4a,aAAc1c,EAAII,GACpDV,GAAMa,EAEVpH,QAAQC,IAAI,OAGhBmM,EAAEpE,UAAUqd,cAAgB,WACxB,OAAO3f,KAAKgf,KAAKxmB,QAGrBkO,EAAEpE,UAAUsd,KAAO,WACf,OAAO5f,KAAKgf,MAGhB,SAAS7Y,IACLnG,KAAKgJ,EAAI,IAAIuB,aAAa,IAC1BvK,KAAK6I,WAET1C,EAAG7D,UAAUuG,SAAW,WACpB,IAAK,IAAInH,EAAK,EAAGA,EAAK,GAAIA,IACtB1B,KAAKgJ,EAAEtH,GAAQA,EAAK,GAAM,EAAK,EAAI,GAI3CyE,EAAG7D,UAAUxD,SAAW,WACpB,OAAOkB,KAAKgJ,GAGhB7C,EAAG7D,UAAUud,cAAgB,WACzB,OAAO,IAAItV,aAAavK,KAAKgJ,IAGjC7C,EAAG7D,UAAUyG,UAAY,SAAS9F,GAC9B,GAAU,MAANA,GAA2B,IAAbA,EAAGzK,OAGrB,IAAK,IAAIkJ,EAAK,EAAGA,EAAK,GAAIA,IACtB1B,KAAKgJ,EAAEtH,GAAMuB,EAAGvB,IAIxByE,EAAG7D,UAAUwd,KAAO,SAASpe,EAAIP,EAAI8B,GACjC,OAAU,MAAN9B,EACO,MAEPnB,MAAQmB,EACRnB,KAAK+f,UAAU/f,KAAKgJ,EAAGtH,EAAGsH,EAAG7H,EAAG6H,EAAG/F,GAEnCjD,KAAKggB,UAAUhgB,KAAKgJ,EAAGtH,EAAGsH,EAAG7H,EAAG6H,EAAG/F,GAEhC9B,IAGXgF,EAAG7D,UAAUyd,UAAY,SAAS9c,EAAIvB,EAAIV,EAAIG,GAC1C,GAAI8B,GAAMjC,EAAI,CACV,IAAIO,EAAK,IAAI6D,MAAM,IACnBpF,KAAKggB,UAAU/c,EAAIvB,EAAIH,EAAIJ,GAC3B,IAAK,IAAID,EAAK,GAAIA,GAAM,IAAKA,EACzBF,EAAGE,GAAMK,EAAGL,QAGhBlB,KAAKggB,UAAU/c,EAAIvB,EAAIV,EAAIG,IAInCgF,EAAG7D,UAAU0d,UAAY,SAAS/c,EAAIvB,EAAIR,EAAIC,GACtCA,GACAD,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GACnDR,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GACnDR,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,IACnDR,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAC/D/B,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GACnDR,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GACnDR,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,IACnDR,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAC/D/B,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpDR,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpDR,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,IACrDR,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IAAMuB,EAAG,IAChE/B,EAAG,GAAKA,EAAG,GAAKA,EAAG,IAAM,EACzBA,EAAG,IAAM,IAETA,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACrER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACxER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACpER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACrER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACxER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACrER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACrER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACvER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACzER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACrER,EAAG,GAAK+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,GACrER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,GAAKvB,EAAG,GAAKuB,EAAG,IAAMvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IACvER,EAAG,IAAM+B,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,GAAKvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,IAAMuB,EAAG,IAAMvB,EAAG,MAIjFyE,EAAG7D,UAAUwG,UAAY,SAASpH,EAAIP,EAAI8B,GACtCjD,KAAKgJ,EAAE,IAAMhJ,KAAKgJ,EAAE,GAAKtH,EAAK1B,KAAKgJ,EAAE,GAAK7H,EAAKnB,KAAKgJ,EAAE,GAAK/F,EAAKjD,KAAKgJ,EAAE,IACvEhJ,KAAKgJ,EAAE,IAAMhJ,KAAKgJ,EAAE,GAAKtH,EAAK1B,KAAKgJ,EAAE,GAAK7H,EAAKnB,KAAKgJ,EAAE,GAAK/F,EAAKjD,KAAKgJ,EAAE,IACvEhJ,KAAKgJ,EAAE,IAAMhJ,KAAKgJ,EAAE,GAAKtH,EAAK1B,KAAKgJ,EAAE,GAAK7H,EAAKnB,KAAKgJ,EAAE,IAAM/F,EAAKjD,KAAKgJ,EAAE,IACxEhJ,KAAKgJ,EAAE,IAAMhJ,KAAKgJ,EAAE,GAAKtH,EAAK1B,KAAKgJ,EAAE,GAAK7H,EAAKnB,KAAKgJ,EAAE,IAAM/F,EAAKjD,KAAKgJ,EAAE,KAG5E7C,EAAG7D,UAAUrJ,MAAQ,SAASkI,EAAI8B,EAAIvB,GAClC1B,KAAKgJ,EAAE,IAAM7H,EACbnB,KAAKgJ,EAAE,IAAM/F,EACbjD,KAAKgJ,EAAE,IAAMtH,EACb1B,KAAKgJ,EAAE,IAAM7H,EACbnB,KAAKgJ,EAAE,IAAM/F,EACbjD,KAAKgJ,EAAE,IAAMtH,EACb1B,KAAKgJ,EAAE,IAAM7H,EACbnB,KAAKgJ,EAAE,IAAM/F,EACbjD,KAAKgJ,EAAE,KAAOtH,EACd1B,KAAKgJ,EAAE,IAAM7H,EACbnB,KAAKgJ,EAAE,IAAM/F,EACbjD,KAAKgJ,EAAE,KAAOtH,GAGlByE,EAAG7D,UAAU2d,QAAU,SAASve,GAC5B,IAAIR,EAAK4P,GAAGoP,KAAKxe,GACbP,EAAK2P,GAAGqP,IAAIze,GACZuB,EAAKjD,KAAKgJ,EAAE,GAChBhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EACnC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EACnC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,IAAM7H,EACnCnB,KAAKgJ,EAAE,IAAM/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,IAAM9H,EACrC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,IAAM7H,EACnCnB,KAAKgJ,EAAE,IAAM/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,IAAM9H,GAGzCiF,EAAG7D,UAAU8d,QAAU,SAAS1e,GAC5B,IAAIR,EAAK4P,GAAGoP,KAAKxe,GACbP,EAAK2P,GAAGqP,IAAIze,GACZuB,EAAKjD,KAAKgJ,EAAE,GAChBhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,IAAM7H,EACnCnB,KAAKgJ,EAAE,GAAK/F,EAAK9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EAClC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,IAAM7H,EACnCnB,KAAKgJ,EAAE,GAAK/F,EAAK9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EAClC+B,EAAK+F,EAAE,GACPhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,KAAO7H,EACpCnB,KAAKgJ,EAAE,IAAM/F,EAAK9B,EAAKnB,KAAKgJ,EAAE,IAAM9H,EACpC+B,EAAK+F,EAAE,GACPhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,KAAO7H,EACpCnB,KAAKgJ,EAAE,IAAM/F,EAAK9B,EAAKnB,KAAKgJ,EAAE,IAAM9H,GAGxCiF,EAAG7D,UAAU+d,QAAU,SAAS3e,GAC5B,IAAIR,EAAK4P,GAAGoP,KAAKxe,GACbP,EAAK2P,GAAGqP,IAAIze,GACZuB,EAAKjD,KAAKgJ,EAAE,GAChBhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EACnC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EACnC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,EACnC+B,EAAKjD,KAAKgJ,EAAE,GACZhJ,KAAKgJ,EAAE,GAAK/F,EAAK/B,EAAKlB,KAAKgJ,EAAE,GAAK7H,EAClCnB,KAAKgJ,EAAE,GAAK/F,GAAM9B,EAAKnB,KAAKgJ,EAAE,GAAK9H,GAGvC,SAASqD,EAAE7C,GACH5B,GAGJuN,GAAG/K,UAAUgL,YAAYC,KAAKvN,KAAM0B,GAExC6C,EAAEjC,UAAY,IAAI+K,GAClB9I,EAAEiJ,KAAO,IAAIpB,OACb7H,EAAEkJ,KAAO,WACLlJ,EAAEiJ,KAAK7O,SAGX4F,EAAExB,MAAQ,SAASrB,GACf,IAAIuB,EAAKsB,EAAEiJ,KAAK9L,GAKhB,OAJU,MAANuB,IACAA,EAAK,IAAIsB,EAAE7C,GACX6C,EAAEiJ,KAAK9L,GAAMuB,GAEVA,GAGXsB,EAAEjC,UAAUoL,KAAO,WACf,OAAO,IAAInJ,GAGf,SAAS+b,IACDxgB,IAGJE,KAAKugB,IAAM,EACXvgB,KAAKwgB,IAAM,EACXxgB,KAAKygB,IAAM,EACXzgB,KAAK0gB,IAAM,EACX1gB,KAAK2gB,IAAM,EACX3gB,KAAK4gB,IAAM,EACX5gB,KAAK6gB,KAAOC,eACZ9gB,KAAK+gB,IAAMC,MAEfV,EAAGW,MAAQ,EACXX,EAAGU,KAAO,EACVV,EAAGY,KAAO,EACVZ,EAAGQ,eAAiB,EACpBR,EAAGa,KAAO,EACVb,EAAGc,KAAO,EACVd,EAAGe,KAAO,EACVf,EAAGhe,UAAU7K,UAAY,SAASyJ,EAAI+B,EAAIvB,GACtC,IAAIE,EAAId,EAAI+C,EAAI7C,EAAIO,EAAIJ,EACpBX,EAAK,EACLK,EAAK,EACT,OAAQb,KAAK6gB,MACb,QACI,OACJ,KAAMP,EAAGe,KAAOf,EAAGc,KAAOd,EAAGa,KAOzB,IANAvf,EAAK5B,KAAKugB,IACVzf,EAAKd,KAAKygB,IACV5c,EAAK7D,KAAK2gB,IACV3f,EAAKhB,KAAKwgB,IACVjf,EAAKvB,KAAK0gB,IACVvf,EAAKnB,KAAK4gB,MACDlf,GAAM,GAAG,CACd,IAAII,EAAKZ,EAAGV,KACR2B,EAAKjB,EAAGV,KACZyC,EAAGpC,KAASe,EAAKE,EAAKhB,EAAKqB,EAAK0B,EAChCZ,EAAGpC,KAASG,EAAKc,EAAKP,EAAKY,EAAKhB,EAEpC,OACJ,KAAMmf,EAAGe,KAAOf,EAAGc,KAKf,IAJAxf,EAAK5B,KAAKugB,IACVzf,EAAKd,KAAKygB,IACVzf,EAAKhB,KAAKwgB,IACVjf,EAAKvB,KAAK0gB,MACDhf,GAAM,GAAG,CACVI,EAAKZ,EAAGV,KACR2B,EAAKjB,EAAGV,KACZyC,EAAGpC,KAASe,EAAKE,EAAKhB,EAAKqB,EAC3Bc,EAAGpC,KAASG,EAAKc,EAAKP,EAAKY,EAE/B,OACJ,KAAMme,EAAGe,KAAOf,EAAGa,KAKf,IAJArgB,EAAKd,KAAKygB,IACV5c,EAAK7D,KAAK2gB,IACV3f,EAAKhB,KAAKwgB,IACVrf,EAAKnB,KAAK4gB,MACDlf,GAAM,GAAG,CACVI,EAAKZ,EAAGV,KACZyC,EAAGpC,KAASC,EAAKI,EAAGV,KAAQqD,EAC5BZ,EAAGpC,KAASG,EAAKc,EAAKX,EAE1B,OACJ,KAAMmf,EAAGe,KAGL,IAFAvgB,EAAKd,KAAKygB,IACVzf,EAAKhB,KAAKwgB,MACD9e,GAAM,GAAG,CACVI,EAAKZ,EAAGV,KACZyC,EAAGpC,KAASC,EAAKI,EAAGV,KACpByC,EAAGpC,KAASG,EAAKc,EAErB,OACJ,KAAMwe,EAAGc,KAAOd,EAAGa,KAKf,IAJAvf,EAAK5B,KAAKugB,IACV1c,EAAK7D,KAAK2gB,IACVpf,EAAKvB,KAAK0gB,IACVvf,EAAKnB,KAAK4gB,MACDlf,GAAM,GACXuB,EAAGpC,KAASe,EAAKV,EAAGV,KAAQqD,EAC5BZ,EAAGpC,KAASU,EAAKL,EAAGV,KAAQW,EAEhC,OACJ,KAAMmf,EAAGc,KAGL,IAFAxf,EAAK5B,KAAKugB,IACVhf,EAAKvB,KAAK0gB,MACDhf,GAAM,GACXuB,EAAGpC,KAASe,EAAKV,EAAGV,KACpByC,EAAGpC,KAASU,EAAKL,EAAGV,KAExB,OACJ,KAAM8f,EAAGa,KAGL,IAFAtd,EAAK7D,KAAK2gB,IACVxf,EAAKnB,KAAK4gB,MACDlf,GAAM,GACXuB,EAAGpC,KAASK,EAAGV,KAAQqD,EACvBZ,EAAGpC,KAASK,EAAGV,KAAQW,EAE3B,OACJ,KAAMmf,EAAGQ,eAIL,YAHI5f,GAAM+B,GAAMzC,GAAMK,GAClB8K,EAAEwJ,KAAKjU,EAAIV,EAAIyC,EAAIpC,EAAS,EAALa,MAMnC4e,EAAGhe,UAAU/D,OAAS,WACF,GAAZyB,KAAKygB,KAAwB,GAAZzgB,KAAKwgB,IACN,GAAZxgB,KAAKugB,KAAwB,GAAZvgB,KAAK0gB,IACN,GAAZ1gB,KAAK2gB,KAAwB,GAAZ3gB,KAAK4gB,KACtB5gB,KAAK6gB,KAAOP,EAAGQ,eACf9gB,KAAK+gB,IAAMT,EAAGU,OAEdhhB,KAAK6gB,KAAOP,EAAGa,KACfnhB,KAAK+gB,IAAMT,EAAGY,MAGF,GAAZlhB,KAAK2gB,KAAwB,GAAZ3gB,KAAK4gB,KACtB5gB,KAAK6gB,KAAOP,EAAGc,KACfphB,KAAK+gB,IAAMT,EAAGW,OAEdjhB,KAAK6gB,KAAQP,EAAGc,KAAOd,EAAGa,KAC1BnhB,KAAK+gB,IAAMT,EAAGW,MAIN,GAAZjhB,KAAKugB,KAAwB,GAAZvgB,KAAK0gB,IACN,GAAZ1gB,KAAK2gB,KAAwB,GAAZ3gB,KAAK4gB,KACtB5gB,KAAK6gB,KAAOP,EAAGe,KACfrhB,KAAK+gB,IAAMT,EAAGW,OAEdjhB,KAAK6gB,KAAQP,EAAGe,KAAOf,EAAGa,KAC1BnhB,KAAK+gB,IAAMT,EAAGW,MAGF,GAAZjhB,KAAK2gB,KAAwB,GAAZ3gB,KAAK4gB,KACtB5gB,KAAK6gB,KAAQP,EAAGe,KAAOf,EAAGc,KAC1BphB,KAAK+gB,IAAMT,EAAGW,OAEdjhB,KAAK6gB,KAAQP,EAAGe,KAAOf,EAAGc,KAAOd,EAAGa,KACpCnhB,KAAK+gB,IAAMT,EAAGW,OAM9BX,EAAGhe,UAAUgf,KAAO,SAASpgB,GACzBlB,KAAKkb,KAAKha,GACV,IAAIC,EAAKD,EAAG,GACRQ,EAAKR,EAAG,GACRL,EAAKK,EAAG,GACRF,EAAKE,EAAG,GACR+B,EAAK7K,KAAKK,KAAK0I,EAAKA,EAAKN,EAAKA,GAC9BU,EAAKJ,EAAKH,EAAKU,EAAKb,EACd,GAANoC,EACI6C,GAAEyb,MACFjnB,QAAQC,IAAI,0BAGhB2G,EAAG,GAAK+B,EACR/B,EAAG,GAAKK,EAAK0B,EACb/B,EAAG,IAAML,EAAKG,EAAKG,EAAKO,GAAMH,EAC9BL,EAAG,GAAK9I,KAAKyX,MAAMhP,EAAIM,KAI/Bmf,EAAGhe,UAAUsZ,KAAO,SAAS/a,EAAIG,EAAIiC,EAAIvB,GACrC,IAAIH,EAAK,IAAIgJ,aAAa,GACtBrJ,EAAK,IAAIqJ,aAAa,GAC1B1J,EAAGygB,KAAK/f,GACRP,EAAGsgB,KAAKpgB,GACR,IAAIC,EAAK,IAAIoJ,aAAa,GAC1BpJ,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClC9B,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClC9B,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClC9B,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClC9B,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClC9B,EAAG,GAAKI,EAAG,IAAML,EAAG,GAAKK,EAAG,IAAM0B,EAClCvB,EAAG8f,KAAKrgB,IAGZmf,EAAGhe,UAAUkf,KAAO,SAASrgB,GACzB,IAAI8B,EAAK7K,KAAKwY,IAAIzP,EAAG,IACjBO,EAAKtJ,KAAKyY,IAAI1P,EAAG,IACrBnB,KAAKugB,IAAMpf,EAAG,GAAK8B,EACnBjD,KAAKwgB,IAAMrf,EAAG,GAAKO,EACnB1B,KAAKygB,IAAMtf,EAAG,IAAMA,EAAG,GAAK8B,EAAKvB,GACjC1B,KAAK0gB,IAAMvf,EAAG,IAAMA,EAAG,GAAKO,EAAKuB,GACjCjD,KAAK2gB,IAAMxf,EAAG,GACdnB,KAAK4gB,IAAMzf,EAAG,GACdnB,KAAKzB,UAGT+hB,EAAGhe,UAAU4Y,KAAO,SAASxZ,GACzBA,EAAG,GAAK1B,KAAKugB,IACb7e,EAAG,GAAK1B,KAAKwgB,IACb9e,EAAG,GAAK1B,KAAKygB,IACb/e,EAAG,GAAK1B,KAAK0gB,IACbhf,EAAG,GAAK1B,KAAK2gB,IACbjf,EAAG,GAAK1B,KAAK4gB,KAGjB,SAASa,IACD3hB,IAGJ4K,EAAGpI,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAK0hB,QAAU,IAAItc,MACnBpF,KAAK2hB,KAAO,KACZ3hB,KAAK2hB,KAAOF,EAAEG,OACd5hB,KAAK6hB,KAAO,GACZ7hB,KAAK8hB,KAAO,EACZ9hB,KAAK+hB,KAAM,EACX/hB,KAAKgiB,YAAa,EAClBhiB,KAAKiiB,MAAQ,EACbnX,QAEJ2W,EAAEnf,UAAY,IAAIoI,EAClB+W,EAAES,KAAO,WACTT,EAAEU,KAAO,UACTV,EAAEG,KAAO,EACTH,EAAEW,QACFX,EAAEY,KAAO,EACTZ,EAAEa,WAAa,SAASze,GACpB,IAAI7C,EAAK,IAAIygB,EACTxe,GAAM,GACNnB,EAAK+B,EAAGrL,OACZwI,EAAG8gB,KAAO,EACV,IAAK,IAAI3gB,EAAK,EAAGA,EAAKW,IAAMX,EAAI,CAC5B,IAAIX,EAAe,IAATqD,EAAG1C,GACb,GAAU,MAANX,GAAoB,MAANA,EAGlB,GAAU,KAANA,EAQJ,GAAU,KAANA,GA0CJ,GAAK,KAAOA,GAAMA,GAAM,KAAS,KAAOA,GAAMA,GAAM,KAAc,KAANA,EAAW,CAGnE,IAFIoB,EAAKT,EACLD,GAAM,EACHC,EAAKW,IAEE,OADVtB,EAAe,IAATqD,EAAG1C,KACe,MAANX,KAFJW,EAKd,GAAU,KAANX,EAAW,CACXU,EAAKC,EACL,MAGR,GAAID,GAAM,EAAG,CACT,IAAIL,EAAK,IAAI0hB,EACTjE,EAAEC,WAAW1a,EAAIjC,EAAI6f,EAAES,OACvBrhB,EAAG2hB,KAAOD,EAAEE,KACZ5hB,EAAG6hB,KAAO,IAAIhE,OAAO7a,EAAGjC,EAAGV,EAAKU,IAE5B0c,EAAEC,WAAW1a,EAAIjC,EAAI6f,EAAEU,OACvBthB,EAAG6hB,KAAO,IAAIhE,OAAO7a,EAAGjC,EAAK,EAAEV,EAAKU,EAAK,GACrC0c,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,YACzBf,EAAG2hB,KAAOD,EAAEI,KAERrE,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,YACzBf,EAAG2hB,KAAOD,EAAEK,KAERtE,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,WACzBf,EAAG2hB,KAAOD,EAAEM,KAERvE,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,WACzBf,EAAG2hB,KAAOD,EAAEO,KAERxE,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,KACzBf,EAAG2hB,KAAOD,EAAEQ,KAERzE,EAAEC,WAAW1a,EAAIjC,EAAK,EAAG,OACzBf,EAAG2hB,KAAOD,EAAES,QAQpCniB,EAAG2hB,KAAOD,EAAEU,KACZpiB,EAAG6hB,KAAO,IAAIhE,OAAO7a,EAAGjC,EAAGV,EAAKU,IAGxCZ,EAAG0gB,QAAQ3iB,KAAK8B,GAChB,IAAIC,EAAK,EAET,IADA2gB,EAAEW,KAAKzjB,QACFwC,EAAKD,EAAK,EAAGC,EAAKW,IAET,OADVtB,EAAe,IAATqD,EAAG1C,KACe,MAANX,KAFOW,EAKzB,GAAU,KAANX,GAAmB,KAANA,GAAmB,MAANA,EAA9B,CAGIe,EAAK+c,EAAES,KAAKlb,EAAI/B,EAAIX,EAAI8B,GAC5B,GAAIA,EAAG,GAAK,EAAG,CACXwe,EAAEW,KAAKrjB,KAAKwC,GACZT,IACA,IAAIY,EAAKuB,EAAG,GACZ,GAAIvB,EAAKP,EAAI,CACT7G,QAAQC,IAAI,4CACZ,MAEJ4G,EAAKO,GAGbb,EAAGqiB,KAAOzB,EAAEW,KAAKe,OACbriB,EAAKE,EAAG8gB,OACR9gB,EAAG8gB,KAAOhhB,SApHtB,CAGI,IAFA,IAAIc,EAAKT,EACLD,GAAM,EACHC,EAAKW,IAEE,OADVtB,EAAe,IAATqD,EAAG1C,KACe,MAANX,KAFJW,EAKd,GAAU,KAANX,EAAW,CACXU,EAAKC,EACL,MAGR,IAAIgB,GAAK,EACT,GAAIjB,GAAM,EAIN,IAHIA,GAAMU,EAAK,GAAmB,KAAdiC,EAAGjC,EAAK,IAA2B,KAAdiC,EAAGjC,EAAK,IAA2B,KAAdiC,EAAGjC,EAAK,KAClEO,GAAK,GAEJhB,EAAKD,EAAK,EAAGC,EAAKW,IAET,OADVtB,EAAe,IAATqD,EAAG1C,KACe,MAANX,KAFOW,EAKzB,GAAU,KAANX,GAAmB,KAANA,GAAmB,MAANA,EAA9B,CAGA,IAAIe,EAAK+c,EAAES,KAAKlb,EAAI/B,EAAIX,EAAI8B,GACxBA,EAAG,GAAK,GACJd,GAAM,EAAIZ,GAAMA,EAAK,MACrBP,EAAG6gB,KAAOtgB,GAGlBJ,EAAK8B,EAAG,GAGhB,KAAO9B,EAAKW,IACM,MAAV+B,EAAG1C,IAAyB,MAAV0C,EAAG1C,MADXA,SA1ClB,KAAOA,EAAKW,IACM,MAAV+B,EAAG1C,IAAyB,MAAV0C,EAAG1C,MADXA,IAiI1B,OADAH,EAAGihB,KAAS,IAAOjhB,EAAG8gB,KAAQ9gB,EAAG6gB,KAAQ,EAClC7gB,GAGXygB,EAAEnf,UAAUgJ,gBAAkB,WAC1B,OAAOtL,KAAKiiB,MAGhBR,EAAEnf,UAAUmK,KAAO,WACf,IAAK,IAAItL,EAAK,EAAGA,EAAKnB,KAAK0hB,QAAQlpB,OAAQ2I,IAAM,CAC7C,IAAIO,EAAK1B,KAAK0hB,QAAQvgB,GACtB7G,QAAQC,IAAI,kBAAmBmH,EAAGghB,KAAMhhB,EAAGwhB,KAAK1qB,QAChD,IAAK,IAAIyK,EAAK,EAAGA,EAAKvB,EAAGwhB,KAAK1qB,QAAUyK,EAAK,GAAIA,IAC7C3I,QAAQC,IAAI,UAAWmH,EAAGwhB,KAAKjgB,IAEnC3I,QAAQC,IAAI,QAIpBknB,EAAEnf,UAAU2J,eAAiB,SAASvK,EAAIH,EAAIY,EAAI8G,GAK9C,IAAK,IAHD9E,GADK5C,EAAK0H,EAAG4C,MACH7L,KAAK6hB,KAAO,IACtB1gB,EAAU,EAALgD,EACLrC,EAAKqC,EAAKhD,EACLV,EAAK,EAAGA,EAAKT,KAAK0hB,QAAQlpB,OAAQiI,IAAM,CAC7C,IAAIK,EAAKd,KAAK0hB,QAAQjhB,GAClBS,EAAKJ,EAAGoiB,KAAK1qB,OACbgI,EAAKM,EAAG4hB,KACZ,GAAI5hB,EAAG0hB,MAAQD,EAAEE,KAAM,CACnB,IAAI7gB,EAAKd,EAAGoiB,KAAM/hB,GAAMD,EAAKA,EAAK,EAAIC,GACtCO,EAAGsB,cAAcxC,EAAIoB,QAErB,GAAI2gB,EAAEQ,MAAQjiB,EAAG0hB,MAAQ1hB,EAAG0hB,MAAQD,EAAEO,UAAc,CAChD,IAAIjf,EAAKnC,EAAGkB,cAAcpC,GACtBuD,EAAKjD,EAAGoiB,KAAM/hB,GAAMD,EAAKA,EAAK,EAAIC,GAGlCN,EAAKgD,GADAE,GADAjD,EAAGoiB,KAAM/hB,EAAK,GAAKD,EAAKA,EAAK,EAAIC,EAAK,GAC3B4C,GAAMjC,EACN+B,GAAM1B,EAC1BT,EAAGsB,cAAcxC,EAAIK,IAI7BM,GAAMnB,KAAK8hB,OACP9hB,KAAK+hB,KACL9Y,EAAG4C,KAAOtK,EACNvB,KAAKgiB,aACL/Y,EAAG6C,KAAOvK,IAGd0H,EAAGyC,MAAO,IAKtB+V,EAAEnf,UAAU8gB,KAAO,WACf,OAAOpjB,KAAK+hB,KAGhBN,EAAEnf,UAAU+gB,KAAO,SAAS3hB,GACxB1B,KAAK+hB,IAAMrgB,GAGf+f,EAAEnf,UAAUghB,aAAe,WACvB,OAAOtjB,KAAKgiB,YAGhBP,EAAEnf,UAAUihB,cAAgB,SAAS7hB,GACjC1B,KAAKgiB,WAAatgB,GAGtB,SAAS8hB,IACLxjB,KAAKyjB,IAAM,IAAIlZ,aAAa,KAC5BvK,KAAK0jB,KAAO,EAEhBF,EAAGlhB,UAAU3D,MAAQ,WACjBqB,KAAK0jB,KAAO,GAGhBF,EAAGlhB,UAAUqhB,IAAM,SAAS1gB,GACxB,GAAIjD,KAAKyjB,IAAIjrB,QAAUwH,KAAK0jB,KAAM,CAC9B,IAAIhiB,EAAK,IAAI6I,aAAyB,EAAZvK,KAAK0jB,MAC/B/X,EAAEwJ,KAAKnV,KAAKyjB,IAAK,EAAG/hB,EAAI,EAAG1B,KAAK0jB,MAChC1jB,KAAKyjB,IAAM/hB,EAEf1B,KAAKyjB,IAAIzjB,KAAK0jB,QAAUzgB,GAG5BugB,EAAGlhB,UAAU6gB,KAAO,WAChB,IAAIzhB,EAAK,IAAI6I,aAAavK,KAAK0jB,MAE/B,OADA/X,EAAEwJ,KAAKnV,KAAKyjB,IAAK,EAAG/hB,EAAI,EAAG1B,KAAK0jB,MACzBhiB,GAGX,SAAS6gB,IACLviB,KAAK0iB,KAAO,KACZ1iB,KAAKkjB,KAAO,KACZljB,KAAKwiB,KAAO,KAEhBD,EAAEU,KAAO,EACTV,EAAEE,KAAO,EACTF,EAAEQ,KAAO,IACTR,EAAES,KAAO,IACTT,EAAEI,KAAO,IACTJ,EAAEK,KAAO,IACTL,EAAEM,KAAO,IACTN,EAAEO,KAAO,IACT,SAAS9Y,KACTA,EAAG4Z,KAAO,EACV5Z,EAAG6Z,KAAO,EACV7Z,EAAGC,KAAO,EACVD,EAAGE,KAAO,EACVF,EAAG8Z,KAAO9Z,EAAG4Z,KACb5Z,EAAG+Z,MAAO,EACV/Z,EAAGga,KAAO,EACVha,EAAGuV,KAAO,GACVvV,EAAGsV,IAAM,KACTtV,EAAGia,KAAO,KACVja,EAAGka,KAAO,EACV,SAAS7iB,KACTA,EAAG8iB,KAAO,EACV9iB,EAAG+iB,KAAO,EACV/iB,EAAGI,KAAO,EACVJ,EAAGgjB,KAAO,EACVhjB,EAAGiR,iCAAmC,GACtCjR,EAAGijB,mCAAqC,GACxCjjB,EAAGC,KAAOD,EAAGijB,mCACbjjB,EAAGkjB,MAAQ,WACXljB,EAAGmjB,KAAO,EACVnjB,EAAGojB,KAAO,GACVpjB,EAAGqjB,KAAO,GACVrjB,EAAGsjB,KAAO,SAASjjB,GACfpH,QAAQC,IAAI,+BAAgCmH,IAGhDL,EAAGujB,KAAO,SAASljB,GACf,GAAIA,EAAK,GAEL,OADAL,EAAGsjB,KAAKjjB,GACD,KAEP,GAAIA,EAAK,GAEL,OADAL,EAAGsjB,KAAKjjB,GACD,KAEP,GAAIA,EAAK,GAEL,OADAL,EAAGsjB,KAAKjjB,GACD,KAEP,GAAIA,EAAK,IACL,OAAQA,GACR,KAAK,GACD,OAAO,IAAImjB,EACf,KAAK,GACD,OAAO,IAAIne,EACf,KAAK,GACD,OAAO,IAAI0W,EACf,KAAK,GACD,OAAO,IAAI0H,EACf,KAAK,GACD,OAAO,IAAIlT,EACf,KAAK,GACD,OAAO,IAAI3M,GACf,QAEI,OADA5D,EAAGsjB,KAAKjjB,GACD,UAGX,GAAIA,EAAK,IACL,OAAQA,GACR,KAAK,IACD,OAAO,IAAIqjB,GACf,KAAK,IACD,OAAO,IAAIC,GACf,KAAK,IACD,OAAO,IAAIxiB,EACf,KAAK,IACD,OAAO,IAAIuL,GACf,KAAK,IACD,OAAO,IAAIkX,EAQnC,OADA5jB,EAAGsjB,KAAKjjB,GACD,MAGX,SAAS5J,EAAE4J,GACH5B,IAGJE,KAAKklB,MAAO,EACZllB,KAAKmlB,MAAQ,EACbnlB,KAAKolB,KAAO,EACZplB,KAAKqlB,KAAO,IAAIjgB,MAAMtN,EAAEwtB,MACxBtlB,KAAKulB,KAAO,IAAIhb,aAAazS,EAAEwtB,MAC/BtlB,KAAKwlB,KAAO,IAAIjb,aAAazS,EAAEwtB,MAC/BtlB,KAAKylB,KAAO,IAAIlb,aAAazS,EAAEwtB,MAC/BtlB,KAAK0lB,KAAO,IAAInb,aAAazS,EAAEwtB,MAC/BtlB,KAAK2lB,KAAO,IAAIpb,aAAazS,EAAEwtB,MAC/BtlB,KAAK4lB,KAAO,IAAIxgB,MAAMtN,EAAEwtB,MACxBtlB,KAAK6lB,KAAO,IAAIzgB,MAChBpF,KAAK6E,KAAO,IAAIO,MAChBpF,KAAK8lB,KAAO,KACZ9lB,KAAK4N,KAAO,IAAIxI,MAChBpF,KAAK+lB,KAAO,IAAI3gB,MAChBpF,KAAKgmB,KAAO,IAAI5gB,MAChBpF,KAAKimB,KAAO,IAAI7gB,MAChBpF,KAAKkmB,KAAO,KACZlmB,KAAKmmB,KAAO,KACZnmB,KAAKomB,KAAO,KACZpmB,KAAKqmB,KAAO,IAAIC,WAAWtc,EAAGuV,MAC9Bvf,KAAKumB,KAAO,IAAIhc,aAAuB,EAAVP,EAAGga,MAChChkB,KAAKyJ,KAAO/H,EACZ1B,KAAKwmB,KAAO1uB,EAAE2uB,OACdzmB,KAAK0mB,YAAc,KACnB1mB,KAAKuF,SAAW,MAEpBzN,EAAE2uB,KAAO,EACT3uB,EAAE6uB,MAAO,EACT7uB,EAAE8uB,MAAQ,EACV9uB,EAAE+uB,MAAQ,EACV/uB,EAAEgvB,MAAO,EACThvB,EAAEivB,MAAO,EACTjvB,EAAEkvB,MAAS,IACXlvB,EAAEmvB,KAAQ,IACVnvB,EAAEwtB,KAAO,GACTxtB,EAAE0a,KAAM,EACR1a,EAAEwK,UAAUgC,iBAAmB,SAASrB,GACpC,IAAK,IAAIvB,EAAK1B,KAAK6E,KAAKrM,OAAS,EAAGkJ,GAAM,IAAKA,EAC3C,GAAqB,MAAjB1B,KAAK6E,KAAKnD,IAAe1B,KAAK6E,KAAKnD,GAAI6F,iBAAmBtE,EAC1D,OAAOvB,EAGf,OAAQ,GAGZ5J,EAAEwK,UAAUkC,YAAc,SAAS9C,GAC/B,GAAIA,aAAc6C,EAAG,CACjB,GAAiB,MAAbvE,KAAK8lB,KAAc,CACnB9lB,KAAK8lB,KAAO,IAAI1Z,OAEhB,IAAK,IADDjL,EAAKnB,KAAK6E,KAAKrM,OACVyK,EAAK,EAAGA,EAAK9B,EAAI8B,IAAM,CAC5B,IAAI1B,EAAKvB,KAAK6E,KAAK5B,GACf/B,EAAKK,EAAGgG,gBACF,MAANrG,IAGJlB,KAAK8lB,KAAK5kB,GAAMK,IAGxB,OAAOvB,KAAK8lB,KAAKxN,IAEjB,OAAI5W,EAAK1B,KAAK6E,KAAKrM,OACRwH,KAAK6E,KAAKnD,GAEV,MAKnB5J,EAAEwK,UAAU4kB,QAAU,WAClBlnB,KAAK6lB,KAAKlnB,QACVqB,KAAK6E,KAAKlG,QACVqB,KAAK4N,KAAKjP,QACO,MAAbqB,KAAK8lB,MACL9lB,KAAK8lB,KAAKnnB,QAEdqB,KAAK+lB,KAAKpnB,QACVqB,KAAKgmB,KAAKrnB,QACVqB,KAAKimB,KAAKtnB,SAGd7G,EAAEwK,UAAUJ,KAAO,WACflC,KAAKmlB,OACDnlB,KAAK4N,KAAKpV,OAAS,GACnBwH,KAAKknB,UAOT,IAAK,IALD/kB,EAAKnC,KAAKyJ,KAAKlH,eACfX,EAAKO,EAAGgM,OACRrN,EAAKc,EAAGpJ,OACRkJ,EAAK,IAAI0D,MACT2E,EAAK,IAAI3E,MACJjB,EAAK,EAAGA,EAAKrD,IAAMqD,EAAI,CAC5B,IAAI2F,EAAKlI,EAAGuC,GACZnE,KAAK4N,KAAK7O,KAAK+K,GACf9J,KAAKimB,KAAKlnB,KAAK+K,EAAG5H,KAAKlC,OAGvB,IAAK,IAFDkB,EAAK4I,EAAGqd,cACRtjB,EAAK3C,EAAG1I,OACHiI,EAAK,EAAGA,EAAKoD,IAAMpD,EACxBiB,EAAG3C,KAAKmC,EAAGT,IAEf,IAASA,EAAK,EAAGA,EAAKoD,IAAMpD,EAAI,CAC5B,IAAIO,EAAKE,EAAGT,GAAIyB,KAAKlC,MACrBgB,EAAGomB,KAAKjjB,GACR4F,EAAGhL,KAAKiC,GAIP,IAFD6G,EAAKiC,EAAGtF,cACR1C,EAAK+F,EAAGrP,OACZ,IAASiI,EAAK,EAAGA,EAAKqB,IAAMrB,EAAI,CAC5B,IAAI2D,EAAKyD,EAAGpH,GACRqD,EAAKM,EAAGlC,KAAKlC,MACjB8D,EAAGujB,KAAOljB,EACVnE,KAAK6E,KAAK9F,KAAKqF,GACfpE,KAAKgmB,KAAKjnB,KAAK+E,IAKvB,IAFA,IAAIC,EAAKrC,EAAGlJ,OACRqI,EAAK0Y,GAAEC,SACE,CAEJ,IADDvQ,GAAK,EACT,IAAS9E,EAAK,EAAGA,EAAKJ,IAAMI,EAAI,CAC5B,IAAI5C,EAAKG,EAAGyC,GACZ,GAAU,MAAN5C,EAAJ,CAGA,IAAI4I,EAAK5I,EAAG6X,uBACF,MAANjP,GAAcA,GAAMtJ,GAAMb,KAAKsnB,iBAAiBnd,IAAO,KACvDnK,KAAK6lB,KAAK9mB,KAAKwC,GACfvB,KAAK+lB,KAAKhnB,KAAKgL,EAAG5F,IAClBzC,EAAGyC,GAAM,KACT8E,GAAK,IAGb,IAAKA,EACD,MAGR,IAAIhG,EAAKd,EAAGiM,OACZ,GAAU,MAANnL,EAAY,CACZ,IAAI9B,EAAK8B,EAAGskB,OACZ,GAAU,MAANpmB,EAEK,KADD8C,EAAK9C,EAAG3I,OACZ,IAAS2L,EAAK,EAAGA,EAAKF,IAAME,EAAI,CAC5B,IAAI3D,EAAKW,EAAGgD,GACF,MAAN3D,GAGJR,KAAKwnB,KAAKhnB,EAAGqd,aAAcrd,EAAGinB,kBAAmBjnB,EAAGknB,cAAelnB,EAAGmnB,iBAIlF3nB,KAAK0mB,YAAc,IAAIxhB,EAAElF,KAAKuF,UAC9BvF,KAAK0mB,YAAYxkB,KAAKlC,KAAMA,KAAK6E,KAAM7E,KAAKgmB,MAC5ChmB,KAAKklB,MAAO,GAGhBptB,EAAEwK,UAAU/D,OAAS,WACbzG,EAAE0a,KACFpQ,EAAEiK,MAAM,QAGZ,IAAK,IADDnL,EAAKlB,KAAKulB,KAAK/sB,OACVyL,EAAK,EAAGA,EAAK/C,EAAI+C,IAClBjE,KAAKulB,KAAKthB,IAAOjE,KAAKwlB,KAAKvhB,KAC3BjE,KAAK4lB,KAAK3hB,GAAMnM,EAAEivB,KAClB/mB,KAAKwlB,KAAKvhB,GAAMjE,KAAKulB,KAAKthB,IAGlC,IACIzD,EAAKR,KAAK6lB,KAAKrtB,OACfqI,EAAKb,KAAK6E,KAAKrM,OACfsI,EAAKiE,EAAEmT,OAEPzX,EADKsE,EAAEoT,OACGrX,EAAK,GACF,MAAbd,KAAKkmB,MAAgBlmB,KAAKkmB,KAAK1tB,OAASiI,KACxCT,KAAKkmB,KAAO,IAAII,WAAW7lB,GAC3BT,KAAKmmB,KAAO,IAAIG,WAAW7lB,IAE/B,IAASwD,EAAK,EAAGA,EAAKxD,EAAIwD,IACtBjE,KAAKkmB,KAAKjiB,GAAMnM,EAAE8uB,KAClB5mB,KAAKmmB,KAAKliB,GAAMnM,EAAE8uB,MAEL,MAAb5mB,KAAKomB,MAAgBpmB,KAAKomB,KAAK5tB,OAASqI,KACxCb,KAAKomB,KAAO,IAAIE,WAAWzlB,IAE/B,IAASoD,EAAK,EAAGA,EAAKpD,EAAIoD,IACtBjE,KAAKomB,KAAKniB,GAAMnM,EAAE+uB,KAElB/uB,EAAE0a,KACFpQ,EAAEqK,KAAK,QAEP3U,EAAE0a,KACFpQ,EAAEiK,MAAM,QAGZ,IAAK,IADD9K,EAAK,KACA4C,EAAK,EAAGA,EAAK3D,IAAM2D,EAAI,CAC5B,IAAIhD,EAAKnB,KAAK6lB,KAAK1hB,GACfzC,EAAK1B,KAAK+lB,KAAK5hB,GACnB,IACIhD,EAAGwX,KAAK3Y,KAAM0B,GACdP,EAAG6X,KAAKhZ,KAAM0B,GAChB,MAAOqC,GACK,MAANxC,IACAA,EAAKwC,IAIP,MAANxC,GACIzJ,EAAE6uB,MACFvkB,EAAEC,KAAKd,GAGXzJ,EAAE0a,KACFpQ,EAAEqK,KAAK,QAEP3U,EAAE0a,KACFpQ,EAAEiK,MAAM,QAGZ,IAAK,IADDxI,EAAK,KACA1B,EAAK,EAAGA,EAAKtB,IAAMsB,EAAI,CAC5B,IAAInB,EAAKhB,KAAK6E,KAAK1C,GACfc,EAAKjD,KAAKgmB,KAAK7jB,GACnB,IAEI,GADAnB,EAAG2X,KAAK3Y,KAAMiD,GACVA,EAAG2kB,OACH,SAEJ5mB,EAAGgY,KAAKhZ,KAAMiD,GACd,IACInB,EADAF,EAAKxJ,KAAKyvB,MAAM7mB,EAAGmY,KAAKnZ,KAAMiD,GAAMnC,GAExC,IACIgB,EAAK9B,KAAKmmB,KAAKvkB,GACjB,MAAOmC,GACLzJ,QAAQC,IAAI,kCAAmCwJ,EAAG+jB,WAAY9mB,EAAGuG,gBAAgBugB,YACjFlmB,EAAKxJ,KAAKyvB,MAAM7mB,EAAGmY,KAAKnZ,KAAMiD,GAAMnC,GACpC,SAEAgB,GAAMhK,EAAE8uB,KACR5mB,KAAKkmB,KAAKtkB,GAAMO,EAEhBnC,KAAKomB,KAAKtkB,GAAMK,EAEpBnC,KAAKmmB,KAAKvkB,GAAMO,EAClB,MAAO4B,GACK,MAANF,IACAA,EAAKE,EACL+B,GAAEiiB,KAAKjiB,GAAEkiB,QAIX,MAANnkB,GACI/L,EAAE6uB,MACFvkB,EAAEC,KAAKwB,GAGX/L,EAAE0a,KACFpQ,EAAEqK,KAAK,QAEP3U,EAAE0a,KACFpQ,EAAEiK,MAAM,QAEZ,IAASpI,EAAKjE,KAAK4lB,KAAKptB,OAAS,EAAGyL,GAAM,EAAGA,IACzCjE,KAAK4lB,KAAK3hB,GAAMnM,EAAEgvB,KAMtB,OAJA9mB,KAAKklB,MAAO,EACRptB,EAAE0a,KACFpQ,EAAEqK,KAAK,SAlGF,GAuGb3U,EAAEwK,UAAUmX,QAAU,SAAS/X,GACH,MAApB1B,KAAK0mB,cACLhlB,EAAGoZ,OACH9a,KAAK0mB,YAAY9e,UAAU5H,KAAM0B,KAIzC5J,EAAEwK,UAAUjD,KAAO,SAAS2B,GACxB,GAAiB,MAAbhB,KAAKkmB,KAAT,CAIA,IAAIpkB,EAAK9B,KAAKkmB,KAAK1tB,OACnBwI,EAAG8Z,OACH,IAAK,IAAI5Z,EAAK,EAAGA,EAAKY,IAAMZ,EAAI,CAC5B,IAAIL,EAAKb,KAAKkmB,KAAKhlB,GACnB,GAAIL,GAAM/I,EAAE8uB,KAGZ,OAAG,CACC,IAAIllB,EAAK1B,KAAK6E,KAAKhE,GACfoC,EAAKjD,KAAKgmB,KAAKnlB,GACnB,GAAIoC,EAAG4G,OAAQ,CACX,IAAI1I,EAAK8B,EAAGokB,KACR9lB,EAAKvB,KAAKimB,KAAK9kB,GACnB8B,EAAGglB,KAAO1mB,EAAGyC,kBACbtC,EAAGrC,KAAK2B,EAAIhB,KAAMiD,GAEtB,IAAId,EAAKnC,KAAKomB,KAAKvlB,GACnB,GAAIsB,GAAMtB,GAAMsB,GAAMrK,EAAE+uB,KACpB,MAEJhmB,EAAKsB,SAvBTC,EAAEoB,KAAK,2CA4Bf1L,EAAEwK,UAAUO,cAAgB,SAASnB,GACjC,IAAK,IAAIuB,EAAKjD,KAAKqlB,KAAK7sB,OAAS,EAAGyK,GAAM,IAAKA,EAC3C,GAAIjD,KAAKqlB,KAAKpiB,IAAOvB,EACjB,OAAOuB,EAGf,OAAOjD,KAAKwnB,KAAK9lB,EAAI,EAAG5J,EAAEkvB,KAAMlvB,EAAEmvB,OAGtCnvB,EAAEwK,UAAU4lB,KAAO,SAASxmB,GACxB,OAAO1B,KAAKsnB,iBAAiB5lB,IAGjC5J,EAAEwK,UAAUglB,iBAAmB,SAAS5lB,GACpC,IAAK,IAAIuB,EAAKjD,KAAK6lB,KAAKrtB,OAAS,EAAGyK,GAAM,IAAKA,EAC3C,GAAqB,MAAjBjD,KAAK6lB,KAAK5iB,IAAejD,KAAK6lB,KAAK5iB,GAAIwZ,iBAAmB/a,EAC1D,OAAOuB,EAGf,OAAQ,GAGZnL,EAAEwK,UAAU6lB,KAAO,SAAShnB,EAAIO,GAC5B,IAAIuB,EAAK,IAAIsH,aAAa7I,GAE1B,OADAiK,EAAEwJ,KAAKhU,EAAI,EAAG8B,EAAI,EAAG9B,EAAG3I,QACjByK,GAGXnL,EAAEwK,UAAUklB,KAAO,SAAS3mB,EAAIG,EAAIO,EAAIG,GACpC,GAAI1B,KAAKolB,MAAQplB,KAAKqlB,KAAK7sB,OAAQ,CAC/B,IAAI0I,EAAKlB,KAAKqlB,KAAK7sB,OACf2I,EAAK,IAAIiE,MAAW,EAALlE,GACnByK,EAAEwJ,KAAKnV,KAAKqlB,KAAM,EAAGlkB,EAAI,EAAGD,GAC5BlB,KAAKqlB,KAAOlkB,EACZnB,KAAKulB,KAAOvlB,KAAKmoB,KAAKnoB,KAAKulB,KAAW,EAALrkB,GACjClB,KAAKwlB,KAAOxlB,KAAKmoB,KAAKnoB,KAAKwlB,KAAW,EAALtkB,GACjClB,KAAKylB,KAAOzlB,KAAKmoB,KAAKnoB,KAAKylB,KAAW,EAALvkB,GACjClB,KAAK0lB,KAAO1lB,KAAKmoB,KAAKnoB,KAAK0lB,KAAW,EAALxkB,GACjC,IAAI+B,EAAK,IAAImC,MACbuG,EAAEwJ,KAAKnV,KAAK4lB,KAAM,EAAG3iB,EAAI,EAAG/B,GAC5BlB,KAAK4lB,KAAO3iB,EAQhB,OANAjD,KAAKqlB,KAAKrlB,KAAKolB,MAAQvkB,EACvBb,KAAKulB,KAAKvlB,KAAKolB,MAAQpkB,EACvBhB,KAAKwlB,KAAKxlB,KAAKolB,MAAQpkB,EACvBhB,KAAKylB,KAAKzlB,KAAKolB,MAAQ7jB,EACvBvB,KAAK0lB,KAAK1lB,KAAKolB,MAAQ1jB,EACvB1B,KAAK4lB,KAAK5lB,KAAKolB,MAAQttB,EAAEivB,KAClB/mB,KAAKolB,QAGhBttB,EAAEwK,UAAU8lB,KAAO,SAASnlB,EAAIvB,GAC5B1B,KAAK6lB,KAAK5iB,GAAMvB,GAGpB5J,EAAEwK,UAAUU,cAAgB,SAAStB,EAAIuB,GACjCA,EAAKjD,KAAKylB,KAAK/jB,KACfuB,EAAKjD,KAAKylB,KAAK/jB,IAEfuB,EAAKjD,KAAK0lB,KAAKhkB,KACfuB,EAAKjD,KAAK0lB,KAAKhkB,IAEnB1B,KAAKulB,KAAK7jB,GAAMuB,GAGpBnL,EAAEwK,UAAUe,UAAY,WACpB,IAAI3B,EAAK1B,KAAKulB,KAAK/sB,OACfkJ,EAAK1B,KAAK2lB,KAAKntB,SACfkJ,EAAK1B,KAAK2lB,KAAKntB,QAEnBmT,EAAEwJ,KAAKnV,KAAK2lB,KAAM,EAAG3lB,KAAKulB,KAAM,EAAG7jB,IAGvC5J,EAAEwK,UAAUgB,UAAY,WACpB,IAAI5B,EAAK1B,KAAKulB,KAAK/sB,OACfkJ,EAAK1B,KAAK2lB,KAAKntB,SACfwH,KAAK2lB,KAAO,IAAIpb,aAAa7I,IAEjCiK,EAAEwJ,KAAKnV,KAAKulB,KAAM,EAAGvlB,KAAK2lB,KAAM,EAAGjkB,IAGvC5J,EAAEwK,UAAU6c,KAAO,WACf,OAAOnf,KAAKmlB,MAGhBrtB,EAAEwK,UAAU4c,KAAO,WACf,OAAOlf,KAAKklB,MAGhBptB,EAAEwK,UAAU8c,KAAO,SAAS1d,GACxB,OAAO1B,KAAK4lB,KAAKlkB,IAAO5J,EAAEivB,MAG9BjvB,EAAEwK,UAAU6Q,KAAO,WACf,OAAOnT,KAAKqmB,MAGhBvuB,EAAEwK,UAAU+Q,KAAO,WACf,OAAOrT,KAAKumB,MAGhBzuB,EAAEwK,UAAU6kB,YAAc,SAASzlB,GAC/B,OAAO1B,KAAK6lB,KAAKnkB,IAGrB5J,EAAEwK,UAAUM,cAAgB,SAASlB,GACjC,OAAO1B,KAAKulB,KAAK7jB,IAGrB5J,EAAEwK,UAAU+lB,YAAc,SAAS3mB,GAC/B,OAAO1B,KAAK0lB,KAAKhkB,IAGrB5J,EAAEwK,UAAUgmB,YAAc,SAAS5mB,GAC/B,OAAO1B,KAAKylB,KAAK/jB,IAGrB5J,EAAEwK,UAAU4B,gBAAkB,SAAS/C,EAAIO,GAC9B1B,KAAKimB,KAAK9kB,GAChB+C,gBAAgBxC,IAGvB5J,EAAEwK,UAAU0B,gBAAkB,SAASf,GAEnC,OADSjD,KAAKimB,KAAKhjB,GACTe,mBAGdlM,EAAEwK,UAAU+B,kBAAoB,SAASpB,GACrC,IAAK,IAAIvB,EAAK1B,KAAK4N,KAAKpV,OAAS,EAAGkJ,GAAM,IAAKA,EAC3C,GAAqB,MAAjB1B,KAAK4N,KAAKlM,IAAe1B,KAAK4N,KAAKlM,GAAI6mB,QAAUtlB,EACjD,OAAOvB,EAGf,OAAQ,GAGZ5J,EAAEwK,UAAUkmB,KAAO,SAAS9mB,GACxB,OAAO1B,KAAK+lB,KAAKrkB,IAGrB5J,EAAEwK,UAAUoC,KAAO,SAAShD,GACxB,OAAO1B,KAAKgmB,KAAKtkB,IAGrB5J,EAAEwK,UAAUmmB,KAAO,SAAS/mB,GACxB,OAAO1B,KAAKimB,KAAKvkB,IAGrB5J,EAAEwK,UAAUomB,KAAO,SAASvmB,EAAIjB,GAG5B,IAAK,IAFDC,EAAKnB,KAAKkmB,KAAK1tB,OACfqI,EAAKsB,EACAZ,EAAK,EAAGA,EAAKJ,IAAMI,EAAI,CAC5B,IAAI0B,EAAKjD,KAAKkmB,KAAK3kB,GACnB,GAAI0B,GAAMnL,EAAE8uB,KAGZ,OAAG,CACC,IAAI5lB,EAAKhB,KAAKgmB,KAAK/iB,GACfjC,EAAG6I,SACH7I,EAAG2nB,OAAOjP,KAAK1Z,KAAMgB,EAAIH,GACzBA,GAAMK,GAEV,IAAIQ,EAAK1B,KAAKomB,KAAKnjB,GACnB,GAAIvB,GAAMuB,GAAMvB,GAAM5J,EAAE+uB,KACpB,MAEJ5jB,EAAKvB,KAKjB5J,EAAEwK,UAAUN,aAAe,SAASN,GAChC1B,KAAKuF,SAAW7D,GAGpB5J,EAAEwK,UAAUL,aAAe,WACvB,OAAOjC,KAAKuF,UAGhB,SAASqjB,KACTA,EAAGC,KAAO,SAASnnB,GACf,OAAOknB,EAAGC,KAAK,IAAIC,IAAIpnB,KAG3BknB,EAAGC,KAAO,SAAS1nB,GACf,IAAKA,EAAG4nB,SACJ,MAAM,IAAIC,KAAK7nB,EAAG8nB,QAOtB,IALA,IAGI/nB,EAHAQ,EAAKP,EAAG3I,SACRyK,EAAK,IAAIimB,UAAUxnB,GACnBV,EAAK,IAAImoB,KAAK,IAAIC,KAAKjoB,GAAI,MAE3BI,EAAK,GACDL,EAAKF,EAAGqoB,KAAKpmB,EAAI1B,EAAIG,EAAKH,IAAO,GACrCA,GAAML,EAEV,OAAO+B,GAGX2lB,EAAGU,IAAM,SAASnoB,GACd,IAAI8B,EAAK,KACL1B,EAAK,KACT,IACI0B,EAAM9B,aAAciE,MAASjE,EAAK,IAAIgoB,KAAKhoB,EAAG,MAC9CI,EAAK,IAAIgoB,KAIT,IAHA,IACIroB,EACAQ,EAAK,IAAIwnB,UAFJ,MAGDhoB,EAAK+B,EAAGomB,KAAK3nB,IAAO,GACxBH,EAAGioB,MAAM9nB,EAAI,EAAGR,GAEpB,OAAOK,EAAGkoB,OATd,QAWc,MAANtoB,GACAA,EAAGuoB,QAEG,MAANnoB,IACAA,EAAGooB,QACHpoB,EAAGmoB,WAKf,SAASE,IACD9pB,IAGJE,KAAK6pB,KAAO,KACZ7pB,KAAK8pB,KAAO,KACZ9pB,KAAK+pB,KAAO,KACZ/pB,KAAKgqB,KAAO,KACZhqB,KAAKiqB,KAAO,KACZjqB,KAAKkqB,KAAO,KACZlqB,KAAKmqB,KAAO,KACZnqB,KAAKoqB,KAAO,KACZpqB,KAAKqqB,KAAO,KACZrqB,KAAKsqB,KAAO,KACZtqB,KAAK+pB,KAAOQ,EAAGC,YACfxqB,KAAKmqB,KAAO,IACZnqB,KAAKoqB,KAAO,IACZpqB,KAAKqqB,KAAO,GACZrqB,KAAKsqB,KAAO,IACZtqB,KAAKgqB,MAAO,EACZhqB,KAAKiqB,KAAO,mBACZjqB,KAAKkqB,KAAO,oBAEhBN,EAAGtnB,UAAUmoB,KAAO,WAGhB,OAFS9e,EAAEC,kBACFxT,KAAKsyB,QACK,EAAI1qB,KAAKmqB,KAAO,IAGvCP,EAAGtnB,UAAUqoB,KAAO,SAASjpB,GACzB1B,KAAKmqB,KAAOzoB,GAGhBkoB,EAAGtnB,UAAUsoB,KAAO,SAAS3nB,EAAIvB,EAAIP,GACjCnB,KAAKoqB,KAAOnnB,EACZjD,KAAKqqB,KAAO3oB,EACZ1B,KAAKsqB,KAAOnpB,GAGhByoB,EAAGtnB,UAAUuoB,KAAO,SAAS5nB,GACzB,IACIvB,EADAR,EAAKyK,EAAEC,kBAEPzK,EAAK,EACT,OAAQnB,KAAK+pB,MACb,KAAKe,eACD3pB,GAAMD,EAAKlB,KAAK8pB,MAAQ9pB,KAAKoqB,OACnB,IACNjpB,EAAK,EACLnB,KAAK+pB,KAAOQ,EAAGQ,aACf/qB,KAAK8pB,KAAO5oB,GAEhBQ,EAAK,EAAIP,EACT,MACJ,KAAK4pB,cACD5pB,GAAMD,EAAKlB,KAAK8pB,MAAQ9pB,KAAKqqB,OACnB,IACNrqB,KAAK+pB,KAAOQ,EAAGS,cACfhrB,KAAK8pB,KAAO5oB,GAEhBQ,EAAK,EACL,MACJ,KAAKspB,eACD7pB,GAAMD,EAAKlB,KAAK8pB,MAAQ9pB,KAAKsqB,OACnB,IACNnpB,EAAK,EACLnB,KAAK+pB,KAAOQ,EAAGU,eACfjrB,KAAK6pB,KAAO7pB,KAAKyqB,QAErB/oB,EAAKP,EACL,MACJ,KAAK8pB,eACGjrB,KAAK6pB,KAAO3oB,IACZlB,KAAK+pB,KAAOQ,EAAGO,cACf9qB,KAAK8pB,KAAO5oB,GAEhBQ,EAAK,EACL,MACJ,KAAK8oB,YACL,QACIxqB,KAAK+pB,KAAOQ,EAAGU,eACfjrB,KAAK6pB,KAAO7pB,KAAKyqB,OACjB/oB,EAAK,EAGJ1B,KAAKgqB,OACNtoB,GAAMA,GAEVuB,EAAGD,cAAchD,KAAKiqB,KAAMvoB,GAC5BuB,EAAGD,cAAchD,KAAKkqB,KAAMxoB,IAGhC,IAAI6oB,EAAK,aACTA,EAAGC,YAAc,cACjBD,EAAGU,eAAiB,iBACpBV,EAAGO,cAAgB,gBACnBP,EAAGQ,aAAe,eAClBR,EAAGS,cAAgB,gBACnB,SAASrzB,IACDmI,IAGJyQ,EAAGjO,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAKkrB,KAAO,IAAIC,WAAWxzB,EAAEyzB,MAC7BprB,KAAKqrB,KAAO,IAAIjmB,MAChBpF,KAAKvI,UAAY,KACjBuI,KAAKsF,GAAK,KACI,MAAV3N,EAAE2zB,OACF3zB,EAAE2zB,KAAO3zB,EAAE4zB,KAAK,KAChB5zB,EAAE6zB,KAAO7zB,EAAE4zB,KAAK,KAChB5zB,EAAE8zB,KAAO9zB,EAAE+zB,KAAK,OAGxB/zB,EAAE2K,UAAY,IAAIiO,EAClB5Y,EAAEyzB,KAAO,GACTzzB,EAAEg0B,MAAO,EACTh0B,EAAE2zB,KAAO,KACT3zB,EAAE6zB,KAAO,KACT7zB,EAAE8zB,KAAO,KACT9zB,EAAE4zB,KAAO,SAAS7pB,GAEd,OADS,IAAI6I,aAAa7I,IAI9B/J,EAAE+zB,KAAO,SAAShqB,GAEd,OADS,IAAI4kB,WAAW5kB,IAI5B/J,EAAEi0B,KAAO,SAAS3oB,EAAIvB,GAUlB,OATU,MAANuB,GAAcA,EAAG4oB,OAASnqB,EAAGlJ,SAC7ByK,EAAKtL,EAAE4zB,KAAiB,EAAZ7pB,EAAGlJ,SACZszB,IAAIpqB,GACPuB,EAAG8oB,KAAK,KAER9oB,EAAGtE,QACHsE,EAAG6oB,IAAIpqB,GACPuB,EAAG8oB,KAAK,IAEL9oB,GAGXtL,EAAEq0B,KAAO,SAAS/oB,EAAIvB,GAUlB,OATU,MAANuB,GAAcA,EAAG4oB,OAASnqB,EAAGlJ,SAC7ByK,EAAKtL,EAAE+zB,KAAiB,EAAZhqB,EAAGlJ,SACZszB,IAAIpqB,GACPuB,EAAG8oB,KAAK,KAER9oB,EAAGtE,QACHsE,EAAG6oB,IAAIpqB,GACPuB,EAAG8oB,KAAK,IAEL9oB,GAGXtL,EAAEs0B,KAAO,WACL,OAAOt0B,EAAEg0B,MAGbh0B,EAAEu0B,KAAO,SAASxqB,GACd/J,EAAEg0B,KAAOjqB,GAGb/J,EAAE2K,UAAU3E,MAAQ,SAAS+D,GACzB1B,KAAKsF,GAAK5D,GAGd/J,EAAE2K,UAAU6pB,aAAe,SAASzqB,GAChC1B,KAAKvI,UAAYiK,GAGrB/J,EAAE2K,UAAUwY,KAAO,aAEnBnjB,EAAE2K,UAAUyY,KAAO,SAAS5Y,EAAIT,EAAII,EAAImB,EAAIzC,EAAIQ,EAAIE,EAAIC,GACpD,KAAIH,EAAK,KAAT,CAGA,IAAIO,EAAKvB,KAAKqrB,KAAKlpB,GACftB,EAAKG,EAAK,GAAM8E,GAAEsmB,SAAW,EACjCpsB,KAAKsF,GAAG+mB,aAAa9qB,EAAIO,EAAImB,EAAIzC,EAAIQ,EAAIH,EAAIb,KAAKvI,UAAW0J,KAGjExJ,EAAE2K,UAAUiB,KAAO,WACf,MAAM,IAAI+oB,MAAM,SAGpB30B,EAAE2K,UAAUmB,KAAO,SAAS/B,GACxB,MAAM,IAAI4qB,MAAM,SAGpB30B,EAAE2K,UAAUoB,KAAO,WACf,IAAK,IAAIhC,EAAK,EAAGA,EAAK1B,KAAKkrB,KAAK1yB,OAAQkJ,IAAM,CAEhC,GADD1B,KAAKkrB,KAAKxpB,KAEf1B,KAAKsF,GAAGinB,KAAK,EAAGvsB,KAAKkrB,KAAMxpB,GAC3B1B,KAAKkrB,KAAKxpB,GAAM,KAK5B/J,EAAE2K,UAAUkqB,WAAa,SAASvpB,EAAIvB,GAC9B1B,KAAKkrB,KAAK1yB,OAASyK,EAAK,GACxBjD,KAAKysB,KAAKxpB,GAEdjD,KAAKkrB,KAAKjoB,GAAMvB,GAGpB/J,EAAE2K,UAAUkqB,WAAa,SAAS9qB,EAAIuB,GAC9BjD,KAAKkrB,KAAK1yB,OAASkJ,EAAK,GACxB1B,KAAKysB,KAAK/qB,GAEd1B,KAAKqrB,KAAK3pB,GAAMuB,GAGpBtL,EAAE2K,UAAUmqB,KAAO,SAAS/qB,GACxB,IAAIR,EAAK9I,KAAKkS,IAAuB,EAAnBtK,KAAKkrB,KAAK1yB,OAAYkJ,EAAK,EAAI,IAC7CuB,EAAK,IAAIkoB,WAAWjqB,GACxByK,EAAEwJ,KAAKnV,KAAKkrB,KAAM,EAAGjoB,EAAI,EAAGjD,KAAKkrB,KAAK1yB,QACtCwH,KAAKkrB,KAAOjoB,EACZ,IAAI9B,EAAK,IAAIiE,MACbuG,EAAEwJ,KAAKnV,KAAKqrB,KAAM,EAAGlqB,EAAI,EAAGnB,KAAKqrB,KAAK7yB,QACtCwH,KAAKqrB,KAAOlqB,GAGhB,SAAS2jB,IACDhlB,IAGJic,EAAEzZ,UAAUgL,YAAYC,KAAKvN,MAC7BA,KAAKwX,KAAO,KACZxX,KAAK0sB,KAAO,MAEhB5H,EAAGxiB,UAAY,IAAIyZ,EACnB+I,EAAG6H,KAAO,IAAIpiB,aAAa,GAC3Bua,EAAG8H,KAAO,IAAIriB,aAAa,GAC3Bua,EAAG+H,KAAO,IAAItiB,aAAa,GAC3Bua,EAAGgI,KAAO,IAAIviB,aAAa,GAC3Bua,EAAGiI,KAAO,IAAIxiB,aAAa,GAC3Bua,EAAGkI,KAAO,IAAIziB,aAAa,GAC3Bua,EAAGmI,KAAO,IAAI7nB,MACd0f,EAAGxiB,UAAUG,KAAO,WAChBzC,KAAKwX,KAAO,IAAI9Q,EAChB1G,KAAKwX,KAAK/U,OACVzC,KAAK0sB,KAAO,IAAItnB,OAGpB0f,EAAGxiB,UAAUwC,QAAU,WACnB,OAAOiX,EAAEG,MAGb4I,EAAGxiB,UAAU0L,KAAO,SAAStM,GACzBqa,EAAEzZ,UAAU0L,KAAKT,KAAKvN,KAAM0B,GAC5B1B,KAAKwX,KAAO9V,EAAGF,OACfxB,KAAK0sB,KAAOhrB,EAAGF,OACfua,EAAEzZ,UAAU8Z,eAAe7O,KAAKvN,KAAM0B,IAG1CojB,EAAGxiB,UAAUJ,KAAO,SAASR,GACzB,IAAIuB,EAAK,IAAIiqB,EAAGltB,MAKhB,OAJAiD,EAAGkqB,KAAO,IAAIvb,EACV5R,KAAKsZ,SACLrW,EAAGmqB,KAAO,IAAIxb,GAEX3O,GAGX6hB,EAAGxiB,UAAUqW,KAAO,SAAS5E,EAAI0C,GACtBzW,MAAQyW,EAAGkS,QACdruB,QAAQC,IAAI,qBAEhB,IAAIsZ,EAAK4C,EACT,GAAKzW,KAAKwX,KAAKyH,KAAKlL,GAApB,CAGA,IAAImB,EAAK4P,EAAGmI,KACZ/X,EAAG,IAAK,EACR,IAAI/K,EAAKnK,KAAKwX,KAAKtE,KAAKa,EAAImB,GAC5BuB,EAAG4W,KAAKnY,EAAG,IACXlV,KAAKqc,mBAAmBtI,EAAI/T,KAAKwX,KAAMf,EAAIvB,GAC3C,IAAInL,EAAKgK,EAAGZ,OACRC,EAAKW,EAAGV,OAEZ,GADArT,KAAKwX,KAAKlE,KAAKvJ,EAAIqJ,EAAIjJ,GACnBA,GAAM,EAAG,CACT,IAAIyJ,EAAK5T,KAAK0sB,KAAK3iB,EAAG,IACtB8J,EAAGsZ,KAAKjrB,KAAK0R,QAEb,GAAU,GAANzJ,EAAS,CACLyJ,EAAK5T,KAAK0sB,KAAK3iB,EAAG,IAAtB,IACImK,EAAKlU,KAAK0sB,KAAK3iB,EAAG,IAClB0J,EAAKL,EAAG,GACZS,EAAGsZ,KAAKtb,KAAO+B,EAAG/B,MAAQqC,EAAGrC,KAAO+B,EAAG/B,MAAQ4B,EAC/CI,EAAGsZ,KAAKrb,KAAO8B,EAAG9B,MAAQoC,EAAGpC,KAAO8B,EAAG9B,MAAQ2B,EAC/CI,EAAGsZ,KAAKpb,KAAO6B,EAAG7B,MAAQmC,EAAGnC,KAAO6B,EAAG7B,MAAQ0B,EAC/CI,EAAGsZ,KAAKnb,KAAO4B,EAAG5B,MAAQkC,EAAGlC,KAAO4B,EAAG5B,MAAQyB,EAC/CI,EAAGsZ,KAAKlb,KAAO2B,EAAG3B,MAAQiC,EAAGjC,KAAO2B,EAAG3B,MAAQwB,OAE/C,GAAU,GAANtJ,EAAS,CACLyJ,EAAK5T,KAAK0sB,KAAK3iB,EAAG,IAClBmK,EAAKlU,KAAK0sB,KAAK3iB,EAAG,IADtB,IAEIlC,EAAK7H,KAAK0sB,KAAK3iB,EAAG,IAClBjG,EAAK9D,KAAK0sB,KAAK3iB,EAAG,IAElB2J,GADAD,EAAKL,EAAG,GACHA,EAAG,IACR2B,EAAKnB,EAAG/B,MAAQqC,EAAGrC,KAAO+B,EAAG/B,MAAQ4B,EACrC8C,EAAK1O,EAAGgK,MAAQ/N,EAAG+N,KAAOhK,EAAGgK,MAAQ4B,EACzCI,EAAGsZ,KAAKtb,KAAOkD,GAAMwB,EAAKxB,GAAMrB,EAChCqB,EAAKnB,EAAG9B,MAAQoC,EAAGpC,KAAO8B,EAAG9B,MAAQ2B,EACrC8C,EAAK1O,EAAGiK,MAAQhO,EAAGgO,KAAOjK,EAAGiK,MAAQ2B,EACrCI,EAAGsZ,KAAKrb,KAAOiD,GAAMwB,EAAKxB,GAAMrB,EAChCqB,EAAKnB,EAAG7B,MAAQmC,EAAGnC,KAAO6B,EAAG7B,MAAQ0B,EACrC8C,EAAK1O,EAAGkK,MAAQjO,EAAGiO,KAAOlK,EAAGkK,MAAQ0B,EACrCI,EAAGsZ,KAAKpb,KAAOgD,GAAMwB,EAAKxB,GAAMrB,EAChCqB,EAAKnB,EAAG5B,MAAQkC,EAAGlC,KAAO4B,EAAG5B,MAAQyB,EACrC8C,EAAK1O,EAAGmK,MAAQlO,EAAGkO,KAAOnK,EAAGmK,MAAQyB,EACrCI,EAAGsZ,KAAKnb,KAAO+C,GAAMwB,EAAKxB,GAAMrB,EAChCqB,EAAKnB,EAAG3B,MAAQiC,EAAGjC,KAAO2B,EAAG3B,MAAQwB,EACrC8C,EAAK1O,EAAGoK,MAAQnO,EAAGmO,KAAOpK,EAAGoK,MAAQwB,EACrCI,EAAGsZ,KAAKlb,KAAO8C,GAAMwB,EAAKxB,GAAMrB,OAEhC,GAAU,GAANvJ,EAAS,CACT,IAAIrI,EAAK9B,KAAK0sB,KAAK3iB,EAAG,IAClB5H,EAAKnC,KAAK0sB,KAAK3iB,EAAG,IAClBiK,EAAKhU,KAAK0sB,KAAK3iB,EAAG,IAClByK,EAAKxU,KAAK0sB,KAAK3iB,EAAG,IAClB7I,EAAKlB,KAAK0sB,KAAK3iB,EAAG,IAClB5I,EAAKnB,KAAK0sB,KAAK3iB,EAAG,IAClBwJ,EAAKvT,KAAK0sB,KAAK3iB,EAAG,IAClByJ,EAAKxT,KAAK0sB,KAAK3iB,EAAG,IAGlBP,GAFAiK,EAAKL,EAAG,GACRM,EAAKN,EAAG,GACHA,EAAG,IAGR0D,GAFA/B,EAAKjT,EAAG+P,MAAQ1P,EAAG0P,KAAO/P,EAAG+P,MAAQ4B,EACrC8C,EAAKvC,EAAGnC,MAAQ2C,EAAG3C,KAAOmC,EAAGnC,MAAQ4B,EAChCvS,EAAG2Q,MAAQ1Q,EAAG0Q,KAAO3Q,EAAG2Q,MAAQ4B,GACrC+C,EAAKjD,EAAG1B,MAAQ2B,EAAG3B,KAAO0B,EAAG1B,MAAQ4B,EACzCI,EAAGsZ,KAAKtb,MAAQ,EAAIrI,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,GACzEqB,EAAKjT,EAAGgQ,MAAQ3P,EAAG2P,KAAOhQ,EAAGgQ,MAAQ2B,EACrC8C,EAAKvC,EAAGlC,MAAQ0C,EAAG1C,KAAOkC,EAAGlC,MAAQ2B,EACrCqD,EAAK5V,EAAG4Q,MAAQ3Q,EAAG2Q,KAAO5Q,EAAG4Q,MAAQ2B,EACrC+C,EAAKjD,EAAGzB,MAAQ0B,EAAG1B,KAAOyB,EAAGzB,MAAQ2B,EACrCI,EAAGsZ,KAAKrb,MAAQ,EAAItI,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,GACzEqB,EAAKjT,EAAGiQ,MAAQ5P,EAAG4P,KAAOjQ,EAAGiQ,MAAQ0B,EACrC8C,EAAKvC,EAAGjC,MAAQyC,EAAGzC,KAAOiC,EAAGjC,MAAQ0B,EACrCqD,EAAK5V,EAAG6Q,MAAQ5Q,EAAG4Q,KAAO7Q,EAAG6Q,MAAQ0B,EACrC+C,EAAKjD,EAAGxB,MAAQyB,EAAGzB,KAAOwB,EAAGxB,MAAQ0B,EACrCI,EAAGsZ,KAAKpb,MAAQ,EAAIvI,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,GACzEqB,EAAKjT,EAAGkQ,MAAQ7P,EAAG6P,KAAOlQ,EAAGkQ,MAAQyB,EACrC8C,EAAKvC,EAAGhC,MAAQwC,EAAGxC,KAAOgC,EAAGhC,MAAQyB,EACrCqD,EAAK5V,EAAG8Q,MAAQ7Q,EAAG6Q,KAAO9Q,EAAG8Q,MAAQyB,EACrC+C,EAAKjD,EAAGvB,MAAQwB,EAAGxB,KAAOuB,EAAGvB,MAAQyB,EACrCI,EAAGsZ,KAAKnb,MAAQ,EAAIxI,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,GACzEqB,EAAKjT,EAAGmQ,MAAQ9P,EAAG8P,KAAOnQ,EAAGmQ,MAAQwB,EACrC8C,EAAKvC,EAAG/B,MAAQuC,EAAGvC,KAAO+B,EAAG/B,MAAQwB,EACrCqD,EAAK5V,EAAG+Q,MAAQ9Q,EAAG8Q,KAAO/Q,EAAG+Q,MAAQwB,EACrC+C,EAAKjD,EAAGtB,MAAQuB,EAAGvB,KAAOsB,EAAGtB,MAAQwB,EACrCI,EAAGsZ,KAAKlb,MAAQ,EAAIzI,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,QAEzE,GAAU,GAANvJ,EAAS,CACT,IAAIvI,EAAK5B,KAAK0sB,KAAK3iB,EAAG,IAClBjJ,EAAKd,KAAK0sB,KAAK3iB,EAAG,IAClB4M,EAAK3W,KAAK0sB,KAAK3iB,EAAG,IAClBuM,EAAKtW,KAAK0sB,KAAK3iB,EAAG,IAClBlJ,EAAKb,KAAK0sB,KAAK3iB,EAAG,IAClB/I,EAAKhB,KAAK0sB,KAAK3iB,EAAG,IAClBkJ,EAAKjT,KAAK0sB,KAAK3iB,EAAG,IAClBiJ,EAAKhT,KAAK0sB,KAAK3iB,EAAG,IAClBwK,EAAKvU,KAAK0sB,KAAK3iB,EAAG,IAClB+J,EAAK9T,KAAK0sB,KAAK3iB,EAAG,IAClBhG,EAAK/D,KAAK0sB,KAAK3iB,EAAG,KAClB9F,EAAKjE,KAAK0sB,KAAK3iB,EAAG,KAClBuK,EAAKtU,KAAK0sB,KAAK3iB,EAAG,KAClBL,EAAK1J,KAAK0sB,KAAK3iB,EAAG,KAClBlG,EAAK7D,KAAK0sB,KAAK3iB,EAAG,KAClBvJ,EAAKR,KAAK0sB,KAAK3iB,EAAG,KAIlBD,GAHA2J,EAAKL,EAAG,GACRM,EAAKN,EAAG,GACR5J,EAAK4J,EAAG,GACHA,EAAG,IAKRwD,GAJA7B,EAAKnT,EAAGiQ,MAAQ/Q,EAAG+Q,KAAOjQ,EAAGiQ,MAAQ4B,EACrC8C,EAAKI,EAAG9E,MAAQyE,EAAGzE,KAAO8E,EAAG9E,MAAQ4B,EACrCqD,EAAKjW,EAAGgR,MAAQ7Q,EAAG6Q,KAAOhR,EAAGgR,MAAQ4B,EACrC+C,EAAKvD,EAAGpB,MAAQmB,EAAGnB,KAAOoB,EAAGpB,MAAQ4B,EAChCc,EAAG1C,MAAQiC,EAAGjC,KAAO0C,EAAG1C,MAAQ4B,GACrCQ,EAAKlQ,EAAG8N,MAAQ5N,EAAG4N,KAAO9N,EAAG8N,MAAQ4B,EACrCE,EAAKW,EAAGzC,MAAQnI,EAAGmI,KAAOyC,EAAGzC,MAAQ4B,EACrCkB,EAAK9Q,EAAGgO,MAAQrR,EAAGqR,KAAOhO,EAAGgO,MAAQ4B,EACzCI,EAAGsZ,KAAKtb,MAAQ,EAAI/H,KAAQ,EAAIN,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,IAAO5J,IAAO,EAAIN,IAAOoN,GAAM3C,EAAK2C,GAAMlD,GAAMlK,GAAMmK,GAAMgB,EAAKhB,GAAMD,IAC5JqB,EAAKnT,EAAGkQ,MAAQhR,EAAGgR,KAAOlQ,EAAGkQ,MAAQ2B,EACrC8C,EAAKI,EAAG7E,MAAQwE,EAAGxE,KAAO6E,EAAG7E,MAAQ2B,EACrCqD,EAAKjW,EAAGiR,MAAQ9Q,EAAG8Q,KAAOjR,EAAGiR,MAAQ2B,EACrC+C,EAAKvD,EAAGnB,MAAQkB,EAAGlB,KAAOmB,EAAGnB,MAAQ2B,EACrCmD,EAAKrC,EAAGzC,MAAQgC,EAAGhC,KAAOyC,EAAGzC,MAAQ2B,EACrCQ,EAAKlQ,EAAG+N,MAAQ7N,EAAG6N,KAAO/N,EAAG+N,MAAQ2B,EACrCE,EAAKW,EAAGxC,MAAQpI,EAAGoI,KAAOwC,EAAGxC,MAAQ2B,EACrCkB,EAAK9Q,EAAGiO,MAAQtR,EAAGsR,KAAOjO,EAAGiO,MAAQ2B,EACrCI,EAAGsZ,KAAKrb,MAAQ,EAAIhI,KAAQ,EAAIN,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,IAAO5J,IAAO,EAAIN,IAAOoN,GAAM3C,EAAK2C,GAAMlD,GAAMlK,GAAMmK,GAAMgB,EAAKhB,GAAMD,IAC5JqB,EAAKnT,EAAGmQ,MAAQjR,EAAGiR,KAAOnQ,EAAGmQ,MAAQ0B,EACrC8C,EAAKI,EAAG5E,MAAQuE,EAAGvE,KAAO4E,EAAG5E,MAAQ0B,EACrCqD,EAAKjW,EAAGkR,MAAQ/Q,EAAG+Q,KAAOlR,EAAGkR,MAAQ0B,EACrC+C,EAAKvD,EAAGlB,MAAQiB,EAAGjB,KAAOkB,EAAGlB,MAAQ0B,EACrCmD,EAAKrC,EAAGxC,MAAQ+B,EAAG/B,KAAOwC,EAAGxC,MAAQ0B,EACrCQ,EAAKlQ,EAAGgO,MAAQ9N,EAAG8N,KAAOhO,EAAGgO,MAAQ0B,EACrCE,EAAKW,EAAGvC,MAAQrI,EAAGqI,KAAOuC,EAAGvC,MAAQ0B,EACrCkB,EAAK9Q,EAAGkO,MAAQvR,EAAGuR,KAAOlO,EAAGkO,MAAQ0B,EACrCI,EAAGsZ,KAAKpb,MAAQ,EAAIjI,KAAQ,EAAIN,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,IAAO5J,IAAO,EAAIN,IAAOoN,GAAM3C,EAAK2C,GAAMlD,GAAMlK,GAAMmK,GAAMgB,EAAKhB,GAAMD,IAC5JqB,EAAKnT,EAAGoQ,MAAQlR,EAAGkR,KAAOpQ,EAAGoQ,MAAQyB,EACrC8C,EAAKI,EAAG3E,MAAQsE,EAAGtE,KAAO2E,EAAG3E,MAAQyB,EACrCqD,EAAKjW,EAAGmR,MAAQhR,EAAGgR,KAAOnR,EAAGmR,MAAQyB,EACrC+C,EAAKvD,EAAGjB,MAAQgB,EAAGhB,KAAOiB,EAAGjB,MAAQyB,EACrCmD,EAAKrC,EAAGvC,MAAQ8B,EAAG9B,KAAOuC,EAAGvC,MAAQyB,EACrCQ,EAAKlQ,EAAGiO,MAAQ/N,EAAG+N,KAAOjO,EAAGiO,MAAQyB,EACrCE,EAAKW,EAAGtC,MAAQtI,EAAGsI,KAAOsC,EAAGtC,MAAQyB,EACrCkB,EAAK9Q,EAAGmO,MAAQxR,EAAGwR,KAAOnO,EAAGmO,MAAQyB,EACrCI,EAAGsZ,KAAKnb,MAAQ,EAAIlI,KAAQ,EAAIN,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,IAAO5J,IAAO,EAAIN,IAAOoN,GAAM3C,EAAK2C,GAAMlD,GAAMlK,GAAMmK,GAAMgB,EAAKhB,GAAMD,IAC5JqB,EAAKnT,EAAGqQ,MAAQnR,EAAGmR,KAAOrQ,EAAGqQ,MAAQwB,EACrC8C,EAAKI,EAAG1E,MAAQqE,EAAGrE,KAAO0E,EAAG1E,MAAQwB,EACrCqD,EAAKjW,EAAGoR,MAAQjR,EAAGiR,KAAOpR,EAAGoR,MAAQwB,EACrC+C,EAAKvD,EAAGhB,MAAQe,EAAGf,KAAOgB,EAAGhB,MAAQwB,EACrCmD,EAAKrC,EAAGtC,MAAQ6B,EAAG7B,KAAOsC,EAAGtC,MAAQwB,EACrCQ,EAAKlQ,EAAGkO,MAAQhO,EAAGgO,KAAOlO,EAAGkO,MAAQwB,EACrCE,EAAKW,EAAGrC,MAAQvI,EAAGuI,KAAOqC,EAAGrC,MAAQwB,EACrCkB,EAAK9Q,EAAGoO,MAAQzR,EAAGyR,KAAOpO,EAAGoO,MAAQwB,EACrCI,EAAGsZ,KAAKlb,MAAQ,EAAInI,KAAQ,EAAIN,IAAOuL,GAAMwB,EAAKxB,GAAMrB,GAAMlK,GAAMsN,GAAMN,EAAKM,GAAMpD,IAAO5J,IAAO,EAAIN,IAAOoN,GAAM3C,EAAK2C,GAAMlD,GAAMlK,GAAMmK,GAAMgB,EAAKhB,GAAMD,QACzJ,CAGH,IAAK,IAFDvP,EAAuB,EAAlB/L,KAAKk1B,IAAI,EAAGnjB,GACjB/F,EAAK,IAAImG,aAAapG,GACjBgQ,EAAK,EAAGA,EAAKhQ,EAAIgQ,IAAM,CAG5B,IAAK,IAFDlR,EAAKkR,EACLzS,EAAK,EACAH,EAAK,EAAGA,EAAK4I,EAAI5I,IACtBG,GAAOuB,EAAK,GAAK,EAAM,EAAImQ,EAAG7R,GAAO6R,EAAG7R,GACxC0B,GAAM,EAEVmB,EAAG+P,GAAMzS,EAGb,IAAK,IADDmV,GAAK,IAAIzR,MACJ3E,GAAK,EAAGA,GAAK0D,EAAI1D,KACtBoW,GAAGpW,IAAMT,KAAK0sB,KAAK3iB,EAAGtJ,KAOrB,IALD2T,GAAK,EACLC,GAAK,EACLI,GAAK,EACL1B,GAAK,EACL9J,GAAK,EACT,IAASxI,GAAK,EAAGA,GAAK0D,EAAI1D,KACtB2T,IAAMhQ,EAAG3D,IAAMoW,GAAGpW,IAAIoR,KACtBwC,IAAMjQ,EAAG3D,IAAMoW,GAAGpW,IAAIqR,KACtB2C,IAAMrQ,EAAG3D,IAAMoW,GAAGpW,IAAIsR,KACtBgB,IAAM3O,EAAG3D,IAAMoW,GAAGpW,IAAIuR,KACtB/I,IAAM7E,EAAG3D,IAAMoW,GAAGpW,IAAIwR,KAE1B4B,EAAGsZ,KAAKtb,KAAOuC,GACfP,EAAGsZ,KAAKrb,KAAOuC,GACfR,EAAGsZ,KAAKpb,KAAO0C,GACfZ,EAAGsZ,KAAKnb,KAAOe,GACfc,EAAGsZ,KAAKlb,KAAOhJ,GAM/B2K,EAAK5T,KAAK0sB,KAAK3iB,EAAG,IACtB8J,EAAGsZ,KAAKjb,SAAW0B,EAAG1B,SACtB2B,EAAGsZ,KAAKhb,SAAWyB,EAAGzB,WAG1B2S,EAAGxiB,UAAU0W,KAAO,SAAShY,EAAIU,GACtB1B,MAAQ0B,EAAGinB,QACdruB,QAAQC,IAAI,qBAEhB,IAAIsJ,EAAKnC,EAET,GADAmC,EAAG0pB,MAAK,GACHvtB,KAAKsZ,OAGH,CACH,IAAI1X,EAAK5B,KAAKoZ,sBAId,GAHIvV,EAAG2pB,MAAQzR,EAAElE,OACbhU,EAAG2pB,KAAOxsB,EAAGsmB,iBAAiB1lB,IAE9BiC,EAAG2pB,KAAO,EACN1nB,GAAEyb,MACFnf,EAAEoB,KAAK,qBAAsB5B,GAEjCiC,EAAG0pB,MAAK,OACL,CACH,IAAItqB,EAAKjC,EAAGmmB,YAAYtjB,EAAG2pB,MAC3B,GAAU,MAANvqB,EAAY,CACZ,IAAI1B,EAAKP,EAAGwnB,KAAK3kB,EAAG2pB,MAChB1sB,EAAKgkB,EAAG6H,KACZ7rB,EAAG,GAAK+C,EAAGspB,KAAKtb,KAChB/Q,EAAG,GAAK+C,EAAGspB,KAAKrb,KAChB,IAAI3Q,EAAK2jB,EAAG8H,KACZzrB,EAAG,GAAK,EACRA,EAAG,IAAM,GACAI,EAAGonB,OAAO7jB,WACTiX,EAAEG,KACR/a,EAAG,IAAM,GAETA,EAAG,IAAM,GAEb,IAAIX,EAAKskB,EAAG+H,KACZ7sB,KAAKytB,KAAKzsB,EAAIiC,EAAI1B,EAAIT,EAAIK,EAAIX,GAC9B,IAAIsB,EAAKgP,GAAG4c,KAAKvsB,EAAIX,GACrByC,EAAGsZ,KAAKvb,EAAIO,EAAIT,EAAIA,EAAI,EAAG,EAAG,GAC9B+C,EAAGupB,KAAKvb,KAAO/Q,EAAG,GAClB+C,EAAGupB,KAAKtb,KAAOhR,EAAG,GAClB+C,EAAGupB,KAAKrb,KAAOlO,EAAGspB,KAAKpb,KACvBlO,EAAGupB,KAAKpb,KAAOnO,EAAGspB,KAAKnb,KACvBnO,EAAGupB,KAAKnb,KAAOpO,EAAGspB,KAAKlb,KAAOnQ,EAAKgP,GAAG6c,KACtC,IAAIzsB,EAAKK,EAAGqsB,gBACZ/pB,EAAGgqB,2BAA2B3sB,EAAK2C,EAAGupB,KAAKrb,MAC3C,IAAIlR,EAAKU,EAAGusB,kBACZjqB,EAAGkqB,gBAAgBltB,EAAKgD,EAAGmqB,0BAC3BnqB,EAAGupB,KAAKlb,SAAWrO,EAAGspB,KAAKjb,SAC3BrO,EAAGupB,KAAKjb,SAAWtO,EAAGspB,KAAKhb,SAC3BtO,EAAG0pB,KAAKhsB,EAAGsI,aAEXhG,EAAG0pB,MAAK,SA7ChB1pB,EAAGgqB,2BAA2BhqB,EAAGspB,KAAKpb,MACtClO,EAAGkqB,gBAAgBlqB,EAAGmqB,2BAkD9BlJ,EAAGxiB,UAAUia,KAAO,SAASpb,EAAI0C,EAAItC,EAAIuI,EAAIlI,EAAIO,EAAIgI,GAC1CnK,MAAQ6D,EAAG8kB,QACdruB,QAAQC,IAAI,qBAiBhB,IAAK,IAFDsG,EAAIG,EAbJU,EAAKmC,EACLpD,EAAgB,MAAXiB,EAAG0rB,KAAe1rB,EAAG0rB,KAAO1rB,EAAGyrB,KACpCrpB,EAAK1L,KAAKyY,IAAIC,GAAGC,KAAOtQ,EAAGwR,MAC3BnQ,EAAK1J,KAAKwY,IAAIE,GAAGC,KAAOtQ,EAAGwR,MAC3BlI,EAAKrI,EAAGksB,gBACR3pB,EAAKxD,EAAGyR,UAAY,EAAI,EACxB/N,EAAK1D,EAAG0R,UAAY,EAAI,EACxBrR,EAAKgB,EAAKiI,EAAK9F,EACfzD,GAAMsD,EAAKiG,EAAK5F,EAChB0D,EAAK/D,EAAKiG,EAAK9F,EACfG,EAAKtC,EAAKiI,EAAK5F,EACfJ,EAAKtD,EAAGoR,KACR5I,EAAKxI,EAAGqR,KAER7O,EAAKrB,EAAKuI,EACLjJ,EAAKiB,EAAIjB,EAAK+B,EAAI/B,GAAMiJ,EAC7BtJ,EAAKU,EAAGL,GACRF,EAAKO,EAAGL,EAAK,GACb4I,EAAG5I,GAAMJ,EAAKD,EAAKL,EAAKQ,EAAK+C,EAC7B+F,EAAG5I,EAAK,GAAK2G,EAAKhH,EAAKuD,EAAKpD,EAAKiI,GAIzC6b,EAAGxiB,UAAUmrB,KAAO,SAAS3rB,EAAIZ,EAAI+B,EAAIY,EAAIrD,EAAIkB,GACtCR,GAAM+B,EAAG0lB,QACZruB,QAAQC,IAAI,qBAEhB,IAAI4H,EAAK2iB,EAAGgI,KACZhI,EAAGgI,KAAK,GAAKjpB,EAAG,GAChBihB,EAAGgI,KAAK,GAAKjpB,EAAG,GAChB3C,EAAGqb,KAAKza,EAAImB,EAAId,EAAIA,EAAI,EAAG,EAAG,GAK9B,IAAK,IAJDZ,EAAKujB,EAAGiI,KACRjsB,EAAKgkB,EAAGkI,KAER7rB,EAAK,EACAH,EAAK,EAAGA,EAFR,GAEiBA,IAAM,CAM5B,GALAF,EAAG,GAAK+C,EAAG,GAAK1C,EAAKX,EAAG,GACxBM,EAAG,GAAK+C,EAAG,GAAK1C,EAAKX,EAAG,GACxBU,EAAGqb,KAAKza,EAAImB,EAAInC,EAAIS,EAAI,EAAG,EAAG,GAC9BA,EAAG,IAAMY,EAAG,GACZZ,EAAG,IAAMY,EAAG,GACC,GAATZ,EAAG,IAAoB,GAATA,EAAG,GAGjB,OAFAG,EAAG,GAAKH,EAAG,QACXG,EAAG,GAAKH,EAAG,IAQf,GALAT,EAAG,GAAK+C,EAAG,GAAK1C,EAAKX,EAAG,GACxBM,EAAG,GAAK+C,EAAG,GAAK1C,EAAKX,EAAG,GACxBU,EAAGqb,KAAKza,EAAImB,EAAInC,EAAIS,EAAI,EAAG,EAAG,GAC9BA,EAAG,IAAMY,EAAG,GACZZ,EAAG,IAAMY,EAAG,GACC,GAATZ,EAAG,IAAoB,GAATA,EAAG,GAKjB,OAJAA,EAAG,IAAMA,EAAG,GACZA,EAAG,IAAMA,EAAG,GACZG,EAAG,GAAKH,EAAG,QACXG,EAAG,GAAKH,EAAG,IAGfJ,GAAM,GAEN2E,GAAEyb,MACFjnB,QAAQC,IAAI,6BAIpB,SAAS2yB,EAAGxrB,GACRnJ,GAAE+J,UAAUgL,YAAYC,KAAKvN,KAAM0B,GACnC1B,KAAKwtB,KAAOzR,EAAElE,KACd7X,KAAKmtB,KAAO,KACZntB,KAAKotB,KAAO,KAEhBF,EAAG5qB,UAAY,IAAI/J,GACnB,SAASwM,IACDjF,IAGJwX,EAAGhV,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAKyK,KAAO,KACZzK,KAAKuX,KAAO,KACZvX,KAAKwX,KAAO,KACZxX,KAAKyX,KAAO,KACZzX,KAAK0X,KAAO,KACZ1X,KAAK2X,KAAO,MAEhB5S,EAAEzC,UAAY,IAAIgV,EAClBvS,EAAE8S,MAAQ,EACV9S,EAAE+S,KAAO,IACT/S,EAAEC,KAAO,EACTD,EAAEgT,KAAO,EACThT,EAAEkpB,KAAO,EACTlpB,EAAEiT,KAAOjT,EAAE+S,KACX/S,EAAEkT,KAAOlT,EAAE+S,KACX/S,EAAEmpB,KAAO,SAAS/sB,GACd,IAAK,IAAI8B,EAAK9B,EAAG3I,OAAS,EAAGyK,GAAM,IAAKA,EAAI,CACxC,IAAIvB,EAAKP,EAAG8B,GACRvB,EAAKqD,EAAEiT,KACPjT,EAAEiT,KAAOtW,EAELA,EAAKqD,EAAEkT,OACPlT,EAAEkT,KAAOvW,KAMzBqD,EAAEmT,KAAO,WACL,OAAOnT,EAAEiT,MAGbjT,EAAEoT,KAAO,WACL,OAAOpT,EAAEkT,MAGblT,EAAEzC,UAAU0L,KAAO,SAAStM,GACxB1B,KAAKyK,KAAO/I,EAAGF,OACfxB,KAAKuX,KAAO7V,EAAGF,OACfxB,KAAKwX,KAAO9V,EAAGF,OACfxB,KAAKyX,KAAO/V,EAAGuM,OACfjO,KAAK0X,KAAOhW,EAAG8W,OACfxY,KAAK2X,KAAOjW,EAAG+W,OACX/W,EAAG2Q,oBAAsBhR,EAAGC,MAC5BtB,KAAK4X,OAASlW,EAAGF,OACjBxB,KAAKuJ,WAAavJ,KAAKoY,sBAAsBpY,KAAK4X,SAElD5X,KAAKuJ,WAAa,KAEtBxE,EAAEmpB,KAAKluB,KAAK0X,OAGhB3S,EAAEzC,UAAU8E,cAAgB,WACxB,OAAOpH,KAAKuJ,YAGhBxE,EAAEzC,UAAUqW,KAAO,SAAS1V,EAAIvB,GAG5B,GAFAA,EAAGkX,KAAK,IAAK,EACblX,EAAGmX,KAAOhG,EAAGC,KAAK7P,EAAIjD,KAAKwX,KAAM9V,EAAGkX,KAAM5Y,KAAK0X,MAC3C5R,GAAEgT,WACF,GAAIpX,EAAGkX,KAAK,GACR,OAGRlX,EAAGqX,KAAOlG,EAAG6B,KAAKzR,EAAIjD,KAAKwX,KAAM9V,EAAGkX,KAAM5Y,KAAK2X,OAGnD5S,EAAEzC,UAAU0W,KAAO,SAAStX,KAE5BqD,EAAEzC,UAAUiF,cAAgB,WACxB,OAAOvH,KAAKyK,MAGhB1F,EAAEzC,UAAU2W,KAAO,SAASvX,GACxB1B,KAAKyK,KAAO/I,GAGhBqD,EAAEzC,UAAU4W,WAAa,SAASxX,EAAIuB,GAClC,OAAOA,EAAG8V,MAGdhU,EAAEzC,UAAU6W,KAAO,SAASzX,EAAIuB,GAC5B,OAAOA,EAAG4V,MAGd9T,EAAEzC,UAAU8W,oBAAsB,WAC9B,OAAOpZ,KAAKuX,MAGhBxS,EAAEzC,UAAU+W,KAAO,SAAS3X,GACxB1B,KAAKuX,KAAO7V,GAGhBqD,EAAEzC,UAAUgX,KAAO,WACf,OAAqB,MAAbtZ,KAAKuX,MAAiBvX,KAAKuX,MAAQgC,GAAEC,QAGjDzU,EAAEzC,UAAUwC,QAAU,aAEtB,SAASmgB,IACDnlB,IAGJE,KAAKmuB,KAAO,KACZnuB,KAAK6lB,KAAO,KACZ7lB,KAAK6E,KAAO,KACZogB,EAAG7kB,QAEP6kB,EAAG7kB,KAAO,EACV6kB,EAAG3iB,UAAU8rB,KAAO,WAChB,OAAOpuB,KAAK6lB,MAGhBZ,EAAG3iB,UAAU+rB,gBAAkB,WAC3B,OAAOruB,KAAK6E,MAGhBogB,EAAG3iB,UAAU0L,KAAO,SAAStM,GACzB1B,KAAKmuB,KAAOzsB,EAAGF,OACfxB,KAAK6E,KAAOnD,EAAGF,OACfxB,KAAK6lB,KAAOnkB,EAAGF,QAGnByjB,EAAG3iB,UAAUgsB,KAAO,SAAS5sB,GACzBA,EAAG0mB,KAAKpoB,KAAK6lB,MACbnkB,EAAG6sB,KAAKvuB,KAAK6E,MACb7E,KAAK6lB,KAAO,KACZ7lB,KAAK6E,KAAO,MAGhB,SAAS2pB,IACD1uB,IAGJC,EAAGuC,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAKyuB,KAAO,IAAI92B,GAEpB62B,EAAElsB,UAAY,IAAIvC,EAClByuB,EAAEE,UAAY,SAASzrB,GACnB,IAAIvB,EAAK,IAAI8sB,EAEb,OADAzuB,EAAGQ,KAAKmB,EAAIuB,GACLvB,GAGX8sB,EAAEE,UAAY,SAASzrB,GACnB,IAAIvB,EAAK,IAAI8sB,EAEb,OADAzuB,EAAGQ,KAAKmB,EAAIuB,GACLvB,GAGX8sB,EAAEG,KAAO,WAEL,OADS,IAAIH,GAIjBA,EAAEI,KAAO,SAAS5tB,GACd,IAAIG,EAAK,IAAI2nB,IAAI,8BACjB,GAAmB,GAAf3nB,EAAG4nB,SACH,MAAM,IAAIC,KAAK,wBAA0B7nB,EAAG0tB,QAIhD,IAAK,IAFDntB,GAAM,sCAAuC,sCAAuC,sCAAuC,uCAC3HR,EAAKstB,EAAEE,UAAUvtB,EAAG8nB,QACfhmB,EAAK,EAAGA,EAAKvB,EAAGlJ,OAAQyK,IAAM,CACnC,IAAI1B,EAAK,IAAIunB,IAAIpnB,EAAGuB,IACpB,GAAmB,GAAf1B,EAAGwnB,SACH,MAAM,IAAIC,KAAK,wBAA0BznB,EAAGstB,QAEhD3tB,EAAGsrB,WAAWvpB,EAAI6rB,KAAKC,KAAK/tB,EAAIO,EAAG0nB,SAEvC,OAAO/nB,GAGXstB,EAAElsB,UAAU3E,MAAQ,SAAS+D,GACzB1B,KAAKyuB,KAAK9wB,MAAM+D,IAGpB8sB,EAAElsB,UAAU6pB,aAAe,SAASzqB,GAChC1B,KAAKyuB,KAAKtC,aAAazqB,IAG3B8sB,EAAElsB,UAAUjD,KAAO,WACfW,KAAKE,KAAKb,KAAKW,KAAKyuB,OAGxBD,EAAElsB,UAAUoB,KAAO,WACf1D,KAAKyuB,KAAK/qB,QAGd8qB,EAAElsB,UAAUkqB,WAAa,SAASvpB,EAAIvB,GACjB,MAAb1B,KAAKyuB,MACLrsB,EAAEoB,KAAK,2CAEXxD,KAAKyuB,KAAKjC,WAAWvpB,EAAIvB,IAG7B8sB,EAAElsB,UAAUkqB,WAAa,SAASvpB,EAAIvB,GACjB,MAAb1B,KAAKyuB,MACLrsB,EAAEoB,KAAK,2CAEXxD,KAAKyuB,KAAKjC,WAAWvpB,EAAIvB,IAG7B8sB,EAAElsB,UAAUiB,KAAO,WACf,OAAOvD,KAAKyuB,KAAKlrB,QAGrBirB,EAAElsB,UAAUmB,KAAO,SAAS/B,GACxB1B,KAAKyuB,KAAKhrB,KAAK/B,IAGnB8sB,EAAElsB,UAAUL,aAAe,WACvB,OAAOjC,KAAKyuB,MAGhB,SAASO,IACDlvB,IAGJ4K,EAAGpI,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAK0hB,QAAU,IAAItc,MACnBpF,KAAKivB,KAAO,KACZjvB,KAAK2hB,KAAOqN,EAAGpN,OACf5hB,KAAK6hB,KAAO,GACZ7hB,KAAK8hB,KAAO,EACZ9hB,KAAK+hB,KAAM,EACX/hB,KAAKgiB,YAAa,EAClBhiB,KAAKkvB,MAAQ,EACblvB,KAAKmvB,KAAO,GAEhBH,EAAG1sB,UAAY,IAAIoI,EACnBskB,EAAG9M,KAAO,WACV8M,EAAG7M,KAAO,UACV6M,EAAGI,kBAAoB,UACvBJ,EAAGK,mBAAqB,WACxBL,EAAGpN,KAAO,EACVoN,EAAG3M,KAAO,EACV2M,EAAG1M,WAAa,SAASnhB,GACrB,IAAI8B,EAAK2lB,EAAGU,IAAInoB,GAEhB,OADS6tB,EAAG1M,WAAWrf,IAI3B,SAASqsB,EAAErsB,EAAIvB,GACX,OAAOgd,OAAOC,aAAa1b,EAAG2b,SAASld,IAE3CstB,EAAG1M,WAAa,SAAS1gB,GACjBA,aAAclB,cACdkB,EAAK,IAAIjB,SAASiB,IAEtB,IAAIf,EAAK,IAAImuB,EACT/rB,GAAM,GACNzC,EAAKoB,EAAG2tB,WACZ1uB,EAAGihB,KAAO,EACV,IAAK,IAAI3gB,EAAK,EAAGA,EAAKX,IAAMW,EAAI,CAC5B,IAAIL,EAAKwuB,EAAE1tB,EAAIT,GACXI,EAAKT,EAAG0uB,WAAW,GACvB,GAAU,MAAN1uB,GAAoB,MAANA,EAGlB,GAAU,KAANA,EAQJ,GAAU,KAANA,GA0CJ,GAAK,IAAMS,GAAMA,GAAM,KAAS,IAAMA,GAAMA,GAAM,IAAa,KAANT,EAAW,CAGhE,IAFIqD,EAAKhD,EACLD,GAAM,EACHC,EAAKX,IAEE,OADVM,EAAKwuB,EAAE1tB,EAAIT,KACa,MAANL,KAFJK,EAKd,GAAU,KAANL,EAAW,CACXI,EAAKC,EACL,MAGR,GAAID,GAAM,EAAG,CACT,IAAIiB,EAAK,IAAIogB,EACTjE,EAAEC,WAAW3c,EAAIuC,EAAI6qB,EAAG9M,OACxB/f,EAAGqgB,KAAOD,EAAEE,KACZtgB,EAAGugB,KAAOpE,EAAEO,aAAajd,EAAIuC,EAAIjD,EAAKiD,IAElCma,EAAEC,WAAW3c,EAAIuC,EAAI6qB,EAAG7M,OACxBhgB,EAAGugB,KAAOpE,EAAEO,aAAajd,EAAIuC,EAAK,EAAGjD,EAAKiD,EAAK,GAC3Cma,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,YACzBhC,EAAGqgB,KAAOD,EAAEI,KAERrE,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,YACzBhC,EAAGqgB,KAAOD,EAAEK,KAERtE,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,WACzBhC,EAAGqgB,KAAOD,EAAEM,KAERvE,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,WACzBhC,EAAGqgB,KAAOD,EAAEO,KAERxE,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,KACzBhC,EAAGqgB,KAAOD,EAAEQ,KAERzE,EAAEC,WAAW3c,EAAIuC,EAAK,EAAG,OACzBhC,EAAGqgB,KAAOD,EAAES,QAQpC7gB,EAAGqgB,KAAOD,EAAEU,KACZ9gB,EAAGugB,KAAOpE,EAAEO,aAAajd,EAAIuC,EAAIjD,EAAKiD,IAG9CtD,EAAG6gB,QAAQ3iB,KAAKoD,GAChB,IAAI1B,EAAK,EACLoD,KACJ,IAAK1C,EAAKD,EAAK,EAAGC,EAAKX,IAET,OADVM,EAAKwuB,EAAE1tB,EAAIT,KACa,MAANL,KAFOK,EAKzB,GAAU,KAANL,GAAmB,KAANA,GAAmB,MAANA,EAA9B,CAGIE,EAAKsd,EAAES,KAAKnd,EAAIpB,EAAIW,EAAI8B,GAC5B,GAAIA,EAAG,GAAK,EAAG,CACXY,EAAG9E,KAAKiC,GACRP,IACA,IAAIiB,EAAKuB,EAAG,GACZ,GAAIvB,EAAKP,EAAI,CACT7G,QAAQC,IAAI,4CACZ,MAEJ4G,EAAKO,EAAK,GAGlBS,EAAG+gB,KAAO,IAAI3Y,aAAa1G,GACvBpD,EAAKI,EAAGihB,OACRjhB,EAAGihB,KAAOrhB,SApHtB,CAGI,IAFA,IAAI0D,EAAKhD,EACLD,GAAM,EACHC,EAAKX,IAEE,OADVM,EAAKwuB,EAAE1tB,EAAIT,KACa,MAANL,KAFJK,EAKd,GAAU,KAANL,EAAW,CACXI,EAAKC,EACL,MAGR,IAAIW,GAAK,EACT,GAAIZ,GAAM,EAIN,IAHIA,GAAMiD,EAAK,GAAsB,KAAjBmrB,EAAE1tB,EAAIuC,EAAK,IAA8B,KAAjBmrB,EAAE1tB,EAAIuC,EAAK,IAA8B,KAAjBmrB,EAAE1tB,EAAIuC,EAAK,KAC3ErC,GAAK,GAEJX,EAAKD,EAAK,EAAGC,EAAKX,IAET,OADVM,EAAKwuB,EAAE1tB,EAAIT,KACa,MAANL,KAFOK,EAKzB,GAAU,KAANL,GAAmB,KAANA,GAAmB,MAANA,EAA9B,CAGA,IAAIE,EAAKsd,EAAES,KAAKnd,EAAIpB,EAAIW,EAAI8B,GACxBA,EAAG,GAAK,GACJnB,GAAM,EAAId,GAAMA,EAAK,MACrBH,EAAGghB,KAAO7gB,GAGlBG,EAAK8B,EAAG,GAGhB,KAAO9B,EAAKX,IACS,MAAb8uB,EAAE1tB,EAAIT,IAA4B,MAAbmuB,EAAE1tB,EAAIT,MADjBA,SA1ClB,KAAOA,EAAKX,IACS,MAAb8uB,EAAE1tB,EAAIT,IAA4B,MAAbmuB,EAAE1tB,EAAIT,MADjBA,IAiI1B,OADAN,EAAGquB,KAAS,IAAOruB,EAAGihB,KAAQjhB,EAAGghB,KAAQ,EAClChhB,GAGXmuB,EAAG1sB,UAAUgJ,gBAAkB,WAC3B,OAAOtL,KAAK+hB,KAAO,EAAI/hB,KAAKkvB,MAGhCF,EAAG1sB,UAAUiJ,oBAAsB,WAC/B,OAAOvL,KAAKkvB,MAGhBF,EAAG1sB,UAAUmK,KAAO,WAChB,IAAK,IAAItL,EAAK,EAAGA,EAAKnB,KAAK0hB,QAAQlpB,OAAQ2I,IAAM,CAC7C,IAAIO,EAAK1B,KAAK0hB,QAAQvgB,GACtB7G,QAAQC,IAAI,kBAAmBmH,EAAGghB,KAAMhhB,EAAGwhB,KAAK1qB,QAChD,IAAK,IAAIyK,EAAK,EAAGA,EAAKvB,EAAGwhB,KAAK1qB,QAAUyK,EAAK,GAAIA,IAC7C3I,QAAQC,IAAI,UAAWmH,EAAGwhB,KAAKjgB,IAEnC3I,QAAQC,IAAI,QAIpBy0B,EAAG1sB,UAAU2J,eAAiB,SAAS9K,EAAIN,EAAIL,EAAIuJ,GAK/C,IAAK,IAHDjG,GADKjD,EAAKkJ,EAAG8B,MACH7L,KAAK6hB,KAAO,IACtB3gB,EAAU,EAAL4C,EACLD,EAAKC,EAAK5C,EACLkD,EAAK,EAAGA,EAAKpE,KAAK0hB,QAAQlpB,OAAQ4L,IAAM,CAC7C,IAAID,EAAKnE,KAAK0hB,QAAQtd,GAClB7C,EAAK4C,EAAG+e,KAAK1qB,OACboJ,EAAKuC,EAAGue,KACZ,GAAIve,EAAGqe,MAAQD,EAAEE,KAAM,CACnB,IAAIxZ,EAAK9E,EAAG+e,KAAMhiB,GAAMK,EAAKA,EAAK,EAAIL,GACtCC,EAAG6B,cAAcpB,EAAIqH,QAErB,GAAIsZ,EAAEQ,MAAQ5e,EAAGqe,MAAQre,EAAGqe,MAAQD,EAAEO,UAAc,CAChD,IAAIphB,EAAKP,EAAG0B,cAAcjB,GACtBkI,EAAK3I,EAAGY,kBAIRjB,EADK,IAFAgJ,EAAGue,YAAY3mB,GACfoI,EAAGwe,YAAY5mB,IAGpBjB,EAAKqJ,EAAGlH,cAAclB,GACtByI,EAAKhG,EAAG+e,KAAMhiB,GAAMK,EAAKA,EAAK,EAAIL,GAClC2G,EAAK1D,EAAG+e,KAAMhiB,EAAK,GAAKK,EAAKA,EAAK,EAAIL,EAAK,GAO3CY,EAAKrB,IALJ0J,EAAKtC,GAAMA,EAAKsC,EAAKrJ,GAAQqJ,EAAKtC,GAAMsC,EAAKtC,EAAK/G,EAC9CqJ,EAEAA,GAAMtC,EAAKsC,GAAMtG,GAENpD,GAAMD,EAC1BW,EAAG6B,cAAcpB,EAAIE,IAI7BZ,GAAMlB,KAAK8hB,OACP9hB,KAAK+hB,KACLhY,EAAG8B,KAAOhL,EACNb,KAAKgiB,aACLjY,EAAG+B,KAAOjL,IAGdkJ,EAAG2B,MAAO,GAGlB1L,KAAKmvB,KAAO3uB,GAGhBwuB,EAAG1sB,UAAU8gB,KAAO,WAChB,OAAOpjB,KAAK+hB,KAGhBiN,EAAG1sB,UAAU+gB,KAAO,SAAS3hB,GACzB1B,KAAK+hB,IAAMrgB,GAGfstB,EAAG1sB,UAAUmtB,KAAO,WAChB,OAAOzvB,KAAK6hB,MAGhBmN,EAAG1sB,UAAUotB,KAAO,SAAShuB,GACzB1B,KAAK6hB,KAAOngB,GAGhBstB,EAAG1sB,UAAUghB,aAAe,WACxB,OAAOtjB,KAAKgiB,YAGhBgN,EAAG1sB,UAAUihB,cAAgB,SAAS7hB,GAClC1B,KAAKgiB,WAAatgB,GAGtB,SAAS8hB,IACLxjB,KAAKyjB,IAAM,IAAIlZ,aAAa,KAC5BvK,KAAK0jB,KAAO,EAEhBF,EAAGlhB,UAAU3D,MAAQ,WACjBqB,KAAK0jB,KAAO,GAGhBF,EAAGlhB,UAAUqhB,IAAM,SAAS1gB,GACxB,GAAIjD,KAAKyjB,IAAIjrB,QAAUwH,KAAK0jB,KAAM,CAC9B,IAAIhiB,EAAK,IAAI6I,aAAyB,EAAZvK,KAAK0jB,MAC/B/X,EAAEwJ,KAAKnV,KAAKyjB,IAAK,EAAG/hB,EAAI,EAAG1B,KAAK0jB,MAChC1jB,KAAKyjB,IAAM/hB,EAEf1B,KAAKyjB,IAAIzjB,KAAK0jB,QAAUzgB,GAG5BugB,EAAGlhB,UAAU6gB,KAAO,WAChB,IAAIzhB,EAAK,IAAI6I,aAAavK,KAAK0jB,MAE/B,OADA/X,EAAEwJ,KAAKnV,KAAKyjB,IAAK,EAAG/hB,EAAI,EAAG1B,KAAK0jB,MACzBhiB,GAGX,SAAS6gB,IACLviB,KAAK0iB,KAAO,KACZ1iB,KAAKkjB,KAAO,KACZljB,KAAKwiB,KAAO,KAEhBD,EAAEU,KAAO,EACTV,EAAEE,KAAO,EACTF,EAAEQ,KAAO,IACTR,EAAES,KAAO,IACTT,EAAEI,KAAO,IACTJ,EAAEK,KAAO,IACTL,EAAEM,KAAO,IACTN,EAAEO,KAAO,IACT,SAAS+B,IACD/kB,IAGJic,EAAEzZ,UAAUgL,YAAYC,KAAKvN,MAC7BA,KAAK2vB,IAAM,EACX3vB,KAAK4vB,IAAM,EACX5vB,KAAKwX,KAAO,KACZxX,KAAK6vB,KAAO,MAEhBhL,EAAEviB,UAAY,IAAIyZ,EAClB8I,EAAEoI,KAAO,IAAI7nB,MACbyf,EAAEviB,UAAUG,KAAO,WACfzC,KAAKwX,KAAO,IAAI9Q,EAChB1G,KAAKwX,KAAK/U,QAGdoiB,EAAEviB,UAAU0L,KAAO,SAAStM,GACxBqa,EAAEzZ,UAAU0L,KAAKT,KAAKvN,KAAM0B,GAC5B1B,KAAK4vB,IAAMluB,EAAGuM,OACdjO,KAAK2vB,IAAMjuB,EAAGuM,OACdjO,KAAKwX,KAAO9V,EAAGF,OACfxB,KAAK6vB,KAAOnuB,EAAGF,OACfua,EAAEzZ,UAAU8Z,eAAe7O,KAAKvN,KAAM0B,IAG1CmjB,EAAEviB,UAAUJ,KAAO,SAASR,GACxB,IAAIuB,EAAK,IAAI6sB,EAAE9vB,MACXmB,GAAMnB,KAAK2vB,IAAM,IAAM3vB,KAAK4vB,IAAM,GAatC,OAZe,MAAX3sB,EAAG8sB,OACH9sB,EAAG8sB,KAAO,MAEd9sB,EAAG8sB,KAAO,IAAIxlB,aAAkB,EAALpJ,GACZ,MAAX8B,EAAG+sB,OACH/sB,EAAG+sB,KAAO,MAEVhwB,KAAKsZ,OACLrW,EAAG+sB,KAAO,IAAIzlB,aAAkB,EAALpJ,GAE3B8B,EAAG+sB,KAAO,KAEP/sB,GAGX4hB,EAAEviB,UAAUqW,KAAO,SAASxX,EAAI8B,GAC5B,IAAI/B,EAAK+B,EACT,GAAKjD,KAAKwX,KAAKyH,KAAK9d,GAApB,CAGA,IAAII,EAAKvB,KAAKiwB,OACVvuB,EAAKmjB,EAAEoI,KACXvrB,EAAG,IAAK,EACRmR,EAAG+B,KAAKzT,EAAInB,KAAKwX,KAAM9V,EAAIH,EAAIvB,KAAK6vB,KAAM3uB,EAAG6uB,KAAM,EAAG,GACtD9sB,EAAGoqB,KAAK3rB,EAAG,IACX1B,KAAKqc,mBAAmBlb,EAAInB,KAAKwX,KAAMvU,EAAIvB,KAG/CmjB,EAAEviB,UAAU0W,KAAO,SAAS9X,EAAIC,GAC5B,IAAII,EAAKJ,EAET,GADAI,EAAGgsB,MAAK,GACHvtB,KAAKsZ,OAEH,CACH,IAAI5X,EAAK1B,KAAKoZ,sBAId,GAHI7X,EAAGisB,MAAQzR,EAAElE,OACbtW,EAAGisB,KAAOtsB,EAAGomB,iBAAiB5lB,IAE9BH,EAAGisB,KAAO,EACN1nB,GAAEyb,MACFnf,EAAEoB,KAAK,qBAAsB9B,GAEjCH,EAAGgsB,MAAK,OACL,CACH,IAAI1sB,EAAKK,EAAGimB,YAAY5lB,EAAGisB,MACvBvqB,EAAK/B,EAAGsnB,KAAKjnB,EAAGisB,MACpB,GAAU,MAAN3sB,GAAcoC,EAAG4G,OAAQ,CACzB,IAAI7I,EAAKiC,EAAG2qB,gBACZrsB,EAAGssB,2BAA2B7sB,GAC9B,IAAImB,EAAKc,EAAG6qB,kBACZvsB,EAAGwsB,gBAAgB5rB,EAAKZ,EAAGysB,0BAC3BntB,EAAG0b,KAAKrb,EAAI+B,EAAI1B,EAAGwuB,KAAMxuB,EAAGyuB,KAAMhwB,KAAKiwB,OAAQ,EAAG,GAClD1uB,EAAGgsB,MAAK,QAERhsB,EAAGgsB,MAAK,SAtBhBhsB,EAAGwsB,gBAAgBxsB,EAAGysB,2BA4B9BnJ,EAAEviB,UAAUia,KAAO,SAAShb,EAAI0B,EAAIvB,EAAIV,EAAImB,EAAIjB,EAAIC,GAE5C,IAAIN,EAAKoC,EACLnB,EAAiB,MAAXjB,EAAGmvB,KAAgBnvB,EAAGmvB,KAAOnvB,EAAGkvB,KAC1ClL,EAAEqL,qBAAqBxuB,EAAIV,EAAImB,EAAIjB,EAAIC,EAAIW,EAAI9B,KAAK2vB,IAAK3vB,KAAK4vB,MAMtE/K,EAAEqL,qBAAuB,SAASpsB,EAAIuQ,EAAI3K,EAAI5H,EAAImB,EAAIY,EAAIrD,EAAIC,GAW1D,IAAK,IATD0D,EACAyP,EAAIC,EAFJ5P,EAAKyF,EAAKzG,EAGVrB,EAAK,EACLd,EAAK,EACLoT,EAAK,EACLC,EAAK,EACLJ,EAAK,EACLK,EAAK,EACLhQ,GAAK,EACAgP,EAAKtR,EAAIsR,EAAKnP,EAAImP,GAAMnQ,EAAI,CACjC,IAAIwR,EAAIH,EAAIxK,EAAIb,EAKhB,GAJAa,EAAKhG,EAAGsP,GAGRkB,GAFArL,EAAKnF,EAAGsP,EAAK,IAEH3S,GADVgU,EAAK3K,EAAKtJ,GAED,GAAK8T,EAAK,GAAK9T,GAAMiU,GAAMhU,GAAM6T,EAAI,CAC1C,IAAIzM,EAAKrH,EAAK,EACd,IAAK4D,EAAI,CACLA,GAAK,EACLxC,EAAK,KAAQiC,EAAsB,GAAjB,EAAM,EAAKgE,IAAWhE,EAAuB,GAAlBrD,EAAO,EAAKqH,IAAWhE,EAAuB,GAAlB,EAAMpD,EAAMoH,IAAWhE,EAAwB,GAAnBrD,EAAOC,EAAMoH,KAClH/G,EAAK,KAAQ+C,EAAsB,GAAjB,EAAM,EAAKgE,GAAU,GAAKhE,EAAuB,GAAlBrD,EAAO,EAAKqH,GAAU,GAAKhE,EAAuB,GAAlB,EAAMpD,EAAMoH,GAAU,GAAKhE,EAAwB,GAAnBrD,EAAOC,EAAMoH,GAAU,IACxI,IAAI7G,EAAK6C,EAAwB,GAAnBrD,EAAOC,EAAMoH,IAAWhE,EAAsB,GAAjB,EAAM,EAAKgE,IAClDtG,EAAKsC,EAAwB,GAAnBrD,EAAOC,EAAMoH,GAAU,GAAKhE,EAAsB,GAAjB,EAAM,EAAKgE,GAAU,GAChE0M,EAAK1Q,EAAuB,GAAlBrD,EAAO,EAAKqH,IAAWhE,EAAuB,GAAlB,EAAMpD,EAAMoH,IAClDiM,EAAKjQ,EAAuB,GAAlBrD,EAAO,EAAKqH,GAAU,GAAKhE,EAAuB,GAAlB,EAAMpD,EAAMoH,GAAU,GAOpEjG,GAAM,KANNsS,EAAiB,IAAXlT,EAAKuT,KAEXR,EAAiB,IAAX/S,EAAKuT,KAKXzT,GAAM,KANNqT,EAAiB,IAAX5S,EAAKuS,KAEXM,EAAiB,IAAX7S,EAAKuS,KAMf,IAAM,EAAIhK,GAAMA,EAAK,IAAQ,EAAIb,GAAMA,EAAK,EACxC,GAAIa,GAAM,EACN,GAAIb,GAAM,EAAG,CACT,IAAIc,EAAKlG,EAAsB,GAAjB,EAAM,EAAKgE,IACrBsC,EAAKtG,EAAsB,GAAjB,EAAM,EAAKgE,GAAU,GAC/B6L,EAAK9R,EAAK,EAAIsS,EACd1K,EAAK1I,EAAK,EAAIqT,EACdjT,EAAKU,EAAK,EAAImS,EACd5S,EAAKL,EAAK,EAAIsT,EACdjS,EAAKP,EAAK,EAAIsS,EAAK,EAAIH,EACvBlT,EAAKC,EAAK,EAAIqT,EAAK,EAAIC,GACvBb,EAAK,IAAOzJ,IAAO,KACnB0J,EAAK,IAAOvK,IAAO,KACR,GACXoL,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAG9D,GAAIvK,GAAM,EAAG,CACL/H,EAAK2C,EAAuB,GAAlB,EAAMpD,EAAMoH,IACtB1G,EAAK0C,EAAuB,GAAlB,EAAMpD,EAAMoH,GAAU,GAChC1F,EAAKP,EAAK,EAAIsS,EAAK,EAAIH,EACvBlT,EAAKC,EAAK,EAAIqT,EAAK,EAAIC,EACvBrK,EAAKnI,EAAK,EAAImS,EACd5J,EAAKrJ,EAAK,EAAIsT,EACdV,EAAK9R,EAAK,EAAIsS,EAAK,EAAIH,EACvBvK,EAAK1I,EAAK,EAAIqT,EAAK,EAAIC,GACvBb,EAAK,IAAOzJ,IAAO,KACnB0J,EAAK,IAAOvK,EAAM,KACP,GACXoL,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,QAE3D,EACC9R,EAAW,EAAL4S,IACA7T,IACNiB,EAAKjB,EAAK,GAEd,IAAI8S,EAAK,IAAOzJ,IAAO,GACnB0J,EAAKc,EAAK5S,EACVqR,EAAKrR,EAAKjB,EACVgT,GAAM/R,EAAK,GAAKjB,EAChBS,EAAK2C,EAAuB,GAAlB,EAAMnC,EAAMmG,IACtB1G,EAAK0C,EAAuB,GAAlB,EAAMnC,EAAMmG,GAAU,GAChCkC,EAAKlG,EAA2B,GAAtB,GAAMnC,EAAK,GAAKmG,IAC1BsC,EAAKtG,EAA2B,GAAtB,GAAMnC,EAAK,GAAKmG,GAAU,GACpC1F,EAAKP,EAAK,EAAIsS,EAAKnB,EAAKgB,EACxBlT,EAAKC,EAAK,EAAIqT,EAAKpB,EAAKqB,EACxBV,EAAK9R,EAAK,EAAIsS,EAAKT,EAAKM,EACxBvK,EAAK1I,EAAK,EAAIqT,EAAKV,EAAKW,EACxBb,EAAKC,GAAM,GACXa,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAKtE,GAAI,GAAK1J,EACL,GAAIb,GAAM,EAAG,CACLyK,EAAK7P,EAAuB,GAAlBrD,EAAO,EAAKqH,IACtB2B,EAAK3F,EAAuB,GAAlBrD,EAAO,EAAKqH,GAAU,GAChCkC,EAAKnI,EAAK,EAAIsS,EACd/J,EAAKrJ,EAAK,EAAIqT,EACdhS,EAAKP,EAAK,EAAIsS,EAAK,EAAIH,EACvBlT,EAAKC,EAAK,EAAIqT,EAAK,EAAIC,EACvBlT,EAAKU,EAAK,EAAIsS,EAAK,EAAIH,EACvB5S,EAAKL,EAAK,EAAIqT,EAAK,EAAIC,GACvBb,EAAK,IAAOzJ,EAAM,KAClB0J,EAAK,IAAOvK,IAAO,KACR,GACXoL,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAG9D,GAAIvK,GAAM,EAAG,CACL9G,EAAK0B,EAAwB,GAAnBrD,EAAOC,EAAMoH,IACvBhH,EAAKgD,EAAwB,GAAnBrD,EAAOC,EAAMoH,GAAU,GACjC3G,EAAKU,EAAK,EAAIsS,EAAK,EAAIH,EACvB5S,EAAKL,EAAK,EAAIqT,EAAK,EAAIC,EACvBV,EAAK9R,EAAK,EAAIsS,EAAK,EAAIH,EACvBvK,EAAK1I,EAAK,EAAIqT,EAAK,EAAIC,EACvBrK,EAAKnI,EAAK,EAAIsS,EAAK,EAAIH,EACvB5J,EAAKrJ,EAAK,EAAIqT,EAAK,EAAIC,GACvBb,EAAK,IAAOzJ,EAAM,KAClB0J,EAAK,IAAOvK,EAAM,KACP,GACXoL,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,QAE3D,CACH,IAAI9R,KAAW,EAAL4S,IACA7T,IACNiB,EAAKjB,EAAK,GAEV8S,EAAK,IAAOzJ,EAAM,GAClB0J,EAAKc,EAAK5S,EACVqR,EAAKrR,EAAKjB,EACVgT,GAAM/R,EAAK,GAAKjB,EAChB0B,EAAK0B,EAAwB,GAAnBrD,EAAOkB,EAAMmG,IACvBhH,EAAKgD,EAAwB,GAAnBrD,EAAOkB,EAAMmG,GAAU,GACjC6L,EAAK7P,EAA4B,GAAvBrD,GAAOkB,EAAK,GAAKmG,IAC3B2B,EAAK3F,EAA4B,GAAvBrD,GAAOkB,EAAK,GAAKmG,GAAU,GACrC3G,EAAKU,EAAK,EAAIsS,EAAKnB,EAAKgB,EACxB5S,EAAKL,EAAK,EAAIqT,EAAKpB,EAAKqB,EACxBrK,EAAKnI,EAAK,EAAIsS,EAAKT,EAAKM,EACxB5J,EAAKrJ,EAAK,EAAIqT,EAAKV,EAAKW,EACxBb,EAAKC,GAAM,GACXa,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAKtE,GAAIvK,GAAM,EAAG,EACLlF,EAAW,EAAL0Q,IACAjU,IACNuD,EAAKvD,EAAK,GAEV+S,EAAKkB,EAAK1Q,EACVyP,EAAK,IAAOvK,IAAO,GADvB,IAEIgK,EAAKlP,EAAKvD,EACVwS,GAAMjP,EAAK,GAAKvD,EAChBkT,EAAK7P,EAAuB,GAAlBE,EAAO,EAAK8D,IACtB2B,EAAK3F,EAAuB,GAAlBE,EAAO,EAAK8D,GAAU,GAChCkC,EAAKlG,EAA2B,GAAtBE,EAAK,EAAM,EAAK8D,IAC1BsC,EAAKtG,EAA2B,GAAtBE,EAAK,EAAM,EAAK8D,GAAU,GACpC1F,EAAKP,EAAKqR,EAAKiB,EAAK,EAAIH,EACxBlT,EAAKC,EAAKmS,EAAKkB,EAAK,EAAIC,EACxBlT,EAAKU,EAAKoR,EAAKkB,EAAK,EAAIH,EACxB5S,EAAKL,EAAKkS,EAAKmB,EAAK,EAAIC,EACxBb,EAAKC,GAAM,GACXa,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAG9D,GAAIvK,GAAM,EAAG,CACT,IAAIlF,KAAW,EAAL0Q,IACAjU,IACNuD,EAAKvD,EAAK,GAEV+S,EAAKkB,EAAK1Q,EACVyP,EAAK,IAAOvK,EAAM,GAClBgK,EAAKlP,EAAKvD,EACVwS,GAAMjP,EAAK,GAAKvD,EAChB2B,EAAK0B,EAAwB,GAAnBE,EAAOtD,EAAMoH,IACvBhH,EAAKgD,EAAwB,GAAnBE,EAAOtD,EAAMoH,GAAU,GACjC3G,EAAK2C,EAA4B,GAAvBE,EAAK,EAAMtD,EAAMoH,IAC3B1G,EAAK0C,EAA4B,GAAvBE,EAAK,EAAMtD,EAAMoH,GAAU,GACrC6L,EAAK9R,EAAKqR,EAAKiB,EAAK,EAAIH,EACxBvK,EAAK1I,EAAKmS,EAAKkB,EAAK,EAAIC,EACxBrK,EAAKnI,EAAKoR,EAAKkB,EAAK,EAAIH,EACxB5J,EAAKrJ,EAAKkS,EAAKmB,EAAK,EAAIC,EACxBb,EAAKC,GAAM,GACXa,EAAGjB,GAAMjR,GAAMjB,EAAKiB,GAAMoR,GAAMG,EAAKvR,GAAMqR,EAC3Ca,EAAGjB,EAAK,GAAKvS,GAAMM,EAAKN,GAAM0S,GAAM/J,EAAK3I,GAAM2S,IAE/Ca,EAAGjB,GAAMrJ,GAAM2J,EAAK3J,IAAO,EAAIwJ,IAAOrS,EAAK6I,IAAO,EAAIyJ,GACtDa,EAAGjB,EAAK,GAAKjJ,GAAMX,EAAKW,IAAO,EAAIoJ,IAAOpS,EAAKgJ,IAAO,EAAIqJ,SAG9D2c,EAAOC,IAAIC,OAAO,iDAAkDvmB,EAAIb,QAMxFoL,EAAGjB,GAAMxR,EAAKkI,EAAKoK,EAAKjL,EAAK8K,EAC7BM,EAAGjB,EAAK,GAAKtS,EAAKgJ,EAAKqK,EAAKlL,EAAKmL,OAKrCjQ,EAAK,IAAW,EAALsQ,IAAiB,EAALH,IAAY9T,EAAK,KAFxCoT,EAAKa,GAAW,EAALA,KACXZ,EAAKS,GAAW,EAALA,IAEG,GACVD,EAAGjB,GAAMvP,EAAGM,IAAO,EAAIyP,EAAKC,GAAMhQ,EAAGM,EAAK,GAAKyP,EAAK/P,EAAGM,EAAK,GAAK3D,EAAK,IAAMqT,EAC5EQ,EAAGjB,EAAK,GAAKvP,EAAGM,EAAK,IAAM,EAAIyP,EAAKC,GAAMhQ,EAAGM,EAAK,GAAKyP,EAAK/P,EAAGM,EAAK,GAAK3D,EAAK,GAAK,GAAKqT,IAExFQ,EAAGjB,GAAMvP,EAAGM,EAAK,GAAK3D,EAAK,GAAK,IAAMoT,EAAK,EAAIC,GAAMhQ,EAAGM,EAAK,GAAK3D,EAAK,KAAO,EAAIoT,GAAM/P,EAAGM,EAAK,IAAM,EAAI0P,GAC1GQ,EAAGjB,EAAK,GAAKvP,EAAGM,EAAK,GAAK3D,EAAK,GAAK,IAAMoT,EAAK,EAAIC,GAAMhQ,EAAGM,EAAK,GAAK3D,EAAK,GAAK,IAAM,EAAIoT,GAAM/P,EAAGM,EAAK,IAAM,EAAI0P,MAMlIgR,EAAEviB,UAAUguB,qBAAuB,SAASnvB,EAAI0C,EAAItC,EAAIuC,EAAIrD,EAAIqB,EAAIsC,GAUhE,IAAK,IARDjC,EAAItB,EAIJC,EAAIiD,EACJI,EACA8E,EAAIhF,EAPJvC,EAAKmC,EAEL7C,EAAKhB,KAAK2vB,IACVnvB,EAAKR,KAAK4vB,IACV3sB,EAAKxC,EAAK2D,EAIVxC,EAAiB,MAAXF,EAAGsuB,KAAgBtuB,EAAGsuB,KAAOtuB,EAAGquB,KACjC7uB,EAAKY,EAAIZ,EAAK+B,EAAI/B,GAAMkD,EACzB0B,GAAEyqB,MACFpuB,EAAKZ,EAAGL,GACRL,EAAKU,EAAGL,EAAK,GACTiB,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAGTtB,EAAK,EACLA,EAAK,EAEDA,EAAK,IACLA,EAAK,GAMbkD,EAAW,GAFXlD,GAAML,IACNM,EAAW,GAFXqB,GAAMnB,IAIGA,EAAK,IACVF,EAAKE,EAAK,GAEV+C,EAAKvD,EAAK,IACVuD,EAAKvD,EAAK,GAEdyI,EAAK9G,EAAKrB,EACVmD,EAAKpD,EAAKkD,EACVI,EAAK,GAAKrD,EAAKiD,GAAM/C,EAAK,MAI1BiI,GAFA9G,EAAKZ,EAAGL,GAAMF,IAEE,EAALmB,GACX8B,GAFApD,EAAKU,EAAGL,EAAK,GAAKV,IAEF,EAALK,GACXsD,EAAK,IAAW,EAALhC,IAAgB,EAALtB,IAAWG,EAAK,KAEtCiI,EAAKhF,EAAK,GACVH,EAAG5C,GAAMU,EAAGuC,IAAO,EAAI8E,EAAKhF,GAAMrC,EAAGuC,EAAK,GAAK8E,EAAKrH,EAAGuC,EAAK,GAAKnD,EAAK,IAAMiD,EAC5EH,EAAG5C,EAAK,GAAKU,EAAGuC,EAAK,IAAM,EAAI8E,EAAKhF,GAAMrC,EAAGuC,EAAK,GAAK8E,EAAKrH,EAAGuC,EAAK,GAAKnD,EAAK,GAAK,GAAKiD,IAExFH,EAAG5C,GAAMU,EAAGuC,EAAK,GAAKnD,EAAK,GAAK,IAAMiI,EAAK,EAAIhF,GAAMrC,EAAGuC,EAAK,GAAKnD,EAAK,KAAO,EAAIiI,GAAMrH,EAAGuC,EAAK,IAAM,EAAIF,GAC1GH,EAAG5C,EAAK,GAAKU,EAAGuC,EAAK,GAAKnD,EAAK,GAAK,IAAMiI,EAAK,EAAIhF,GAAMrC,EAAGuC,EAAK,GAAKnD,EAAK,GAAK,IAAM,EAAIiI,GAAMrH,EAAGuC,EAAK,IAAM,EAAIF,KAK9H4gB,EAAEviB,UAAU2tB,KAAO,WACf,OAAQjwB,KAAK2vB,IAAM,IAAM3vB,KAAK4vB,IAAM,IAGxC/K,EAAEviB,UAAUwC,QAAU,WAClB,OAAOiX,EAAEI,MAGb,SAAS2T,EAAEpuB,GACPnJ,GAAE+J,UAAUgL,YAAYC,KAAKvN,KAAM0B,GACnC1B,KAAKwtB,KAAOzR,EAAElE,KACd7X,KAAK+vB,KAAO,KACZ/vB,KAAKgwB,KAAO,KAEhBF,EAAExtB,UAAY,IAAI/J,GAClB,SAASysB,KACDllB,IAGJE,KAAKwwB,SAAU,EACfxwB,KAAKywB,MAAO,EACZzwB,KAAKmuB,KAAO,KACZnuB,KAAK6lB,KAAO,KACZ7lB,KAAK6E,KAAO,KACZmgB,GAAE5kB,QAEN4kB,GAAE5kB,KAAO,EACT4kB,GAAE1iB,UAAUG,KAAO,WACfzC,KAAK6lB,KAAO,IAAIzgB,MAChBpF,KAAK6E,KAAO,IAAIO,OAGpB4f,GAAE1iB,UAAU0L,KAAO,SAAStM,GACxB1B,KAAKywB,KAAO/uB,EAAGgvB,OACf1wB,KAAKwwB,QAAU9uB,EAAGgvB,OAClB1wB,KAAKmuB,KAAOzsB,EAAGF,OACfxB,KAAK6lB,KAAOnkB,EAAGF,OACfxB,KAAK6E,KAAOnD,EAAGF,QAGnBwjB,GAAE1iB,UAAUJ,KAAO,SAASe,GACxB,IAAIvB,EAAK,IAAIivB,GAAG3wB,MAEhB,OADA0B,EAAGwC,gBAAgBlE,KAAK4wB,YAAc,EAAI,GACnClvB,GAGXsjB,GAAE1iB,UAAUuuB,KAAO,SAASnvB,GACxB,GAAiB,MAAb1B,KAAK6lB,KACL,MAAM,IAAIyG,MAAM,sBAEpBtsB,KAAK6lB,KAAK9mB,KAAK2C,IAGnBsjB,GAAE1iB,UAAUwuB,KAAO,SAASpvB,GACxB,GAAiB,MAAb1B,KAAK6E,KACL,MAAM,IAAIynB,MAAM,sBAEpBtsB,KAAK6E,KAAK9F,KAAK2C,IAGnBsjB,GAAE1iB,UAAU8lB,KAAO,SAAS1mB,GACxB1B,KAAK6lB,KAAOnkB,GAGhBsjB,GAAE1iB,UAAUisB,KAAO,SAAS7sB,GACxB1B,KAAK6E,KAAOnD,GAGhBsjB,GAAE1iB,UAAUsuB,UAAY,WACpB,OAAO5wB,KAAKwwB,SAGhBxL,GAAE1iB,UAAUyuB,KAAO,WACf,OAAO/wB,KAAKywB,MAGhBzL,GAAE1iB,UAAU0uB,KAAO,SAAStvB,GACxB1B,KAAKwwB,QAAU9uB,GAGnBsjB,GAAE1iB,UAAU2uB,KAAO,SAASvvB,GACxB1B,KAAKywB,KAAO/uB,GAGhBsjB,GAAE1iB,UAAU6kB,YAAc,WACtB,OAAOnnB,KAAK6lB,MAGhBb,GAAE1iB,UAAUkC,YAAc,WACtB,OAAOxE,KAAK6E,MAGhBmgB,GAAE1iB,UAAUimB,KAAO,WACf,OAAOvoB,KAAKmuB,MAGhBnJ,GAAE1iB,UAAU4uB,KAAO,SAASxvB,GACxB1B,KAAKmuB,KAAOzsB,GAGhBsjB,GAAE1iB,UAAU6uB,WAAa,WACrB,OAAOnxB,KAAKmuB,MAGhBnJ,GAAE1iB,UAAU8uB,KAAO,SAAS1vB,GACxB1B,KAAKmuB,KAAOzsB,GAGhB,SAASivB,GAAGjvB,GACR1B,KAAKioB,KAAO,KACZjoB,KAAKqxB,KAAO,KACZrxB,KAAKqxB,KAAO3vB,EAEhBivB,GAAGruB,UAAY,IAh3If,aAi3IAquB,GAAGruB,UAAU0B,gBAAkB,WAC3B,OAAOhE,KAAKioB,MAGhB0I,GAAGruB,UAAU4B,gBAAkB,SAASxC,GACpC1B,KAAKioB,KAAOvmB,GAGhB,SAAS2L,GAAG3L,GACJ5B,IAGJE,KAAKsY,GAAK5W,GAEd2L,GAAGtG,KAAO,WACNjE,EAAE2K,OACF8L,GAAE9L,OACFlJ,EAAEkJ,OACFzO,EAAEyO,QAGNJ,GAAG/K,UAAUwlB,SAAW,WACpB,OAAO9nB,KAAKsY,IAMhB,SAASvK,KACDjO,IAGJE,KAAKsxB,KAAO,MAEhBvjB,GAAGzL,UAAUilB,KAAO,WAChB,OAAOvnB,KAAKsxB,MAGhBvjB,GAAGzL,UAAUG,KAAO,WAChBzC,KAAKsxB,KAAO,IAAIlsB,OAGpB2I,GAAGzL,UAAU0L,KAAO,SAAStM,GACzB1B,KAAKsxB,KAAO5vB,EAAGF,QAGnBuM,GAAGzL,UAAUivB,KAAO,SAAS7vB,GACzB1B,KAAKsxB,KAAKvyB,KAAK2C,IAGnB,SAAS8vB,GAAG9vB,EAAIuB,GACZjD,KAAKkI,OAASxG,EACd1B,KAAKyxB,QAAUxuB,EACfjD,KAAKmI,SAAW,IAAI/C,MAAM,EAAE,EAAE1D,EAAG7J,MAAM6J,EAAG1J,QAC1CgI,KAAK0xB,KAAO,EACZ1xB,KAAK2xB,KAAO,EACZ3xB,KAAK4xB,KAAO,EACZ5xB,KAAK6xB,KAAO,EACZ7xB,KAAK8xB,MAAQ,EACb9xB,KAAK+xB,eAETP,GAAGQ,GAAK,IAAIC,GACZT,GAAGU,KAAO,IAAID,GACdT,GAAGW,KAAO,IAAI/sB,MAAM,EAAE,GACtBosB,GAAGY,KAAO,IAAIhtB,MAAM,EAAE,GACtBosB,GAAGa,IAAM,IAAIjtB,MAAM,EAAE,GACrBosB,GAAGlvB,UAAUgwB,KAAO,SAASrvB,EAAI/B,EAAIC,EAAIO,GACrC1B,KAAKmI,SAAW,IAAI/C,MAAMnC,EAAG/B,EAAGC,EAAGO,IAGvC8vB,GAAGlvB,UAAUiwB,KAAO,WAChBvyB,KAAKyxB,QAAQe,OACb,IAAI9wB,EAAK1B,KAAKmI,SACJ,MAANzG,IACA1B,KAAKyxB,QAAQgB,YACbzyB,KAAKyxB,QAAQiB,KAAKhxB,EAAG,GAAIA,EAAG,GAAIA,EAAG,GAAIA,EAAG,IAC1C1B,KAAKyxB,QAAQkB,SAIrBnB,GAAGlvB,UAAUswB,KAAO,WAChB5yB,KAAKyxB,QAAQoB,WAGjBrB,GAAGlvB,UAAU+pB,aAAe,SAAShY,EAAIR,EAAI5K,EAAI9H,EAAI0V,EAAI7V,EAAIkT,EAAI4C,GAC7D,IACQD,GAAM7W,KAAK8xB,OACX9xB,KAAK8xB,KAAOjb,EACZ7W,KAAKyxB,QAAQqB,YAAcjc,GAc/B,IAAK,IAZD1M,EAAK0J,EAAGrb,OACRsJ,EAAKuS,EAAGxc,MACR6R,EAAK2K,EAAGrc,OACR2e,EAAK3W,KAAKyxB,QACVnd,EAAKtU,KAAK2xB,KACVnoB,EAAKxJ,KAAK6xB,KACVhqB,EAAK7H,KAAK0xB,KACVttB,EAAKpE,KAAK4xB,KACVtb,EAAKkb,GAAGQ,GACR/uB,EAAKuuB,GAAGW,KACRzwB,EAAK8vB,GAAGY,KACRpe,EAAKwd,GAAGa,IACH7b,EAAK,EAAGA,EAAKrM,EAAIqM,GAAM,EAAG,CAC/BG,EAAG6b,OACH,IAAIvuB,EAAK4P,EAAG2C,GACRrS,EAAK0P,EAAG2C,EAAK,GACb5U,EAAKiS,EAAG2C,EAAK,GACbjV,EAAK+S,EAAKzM,EAAKoB,EAAQ,EAALhF,GAClB/C,EAAKsI,EAAKpF,EAAK6E,EAAQ,EAALhF,EAAS,GAC3B0P,EAAKW,EAAKzM,EAAKoB,EAAQ,EAAL9E,GAClB8O,EAAKzJ,EAAKpF,EAAK6E,EAAQ,EAAL9E,EAAS,GAC3BoQ,EAAKD,EAAKzM,EAAKoB,EAAQ,EAALrH,GAClBmS,EAAKvK,EAAKpF,EAAK6E,EAAQ,EAALrH,EAAS,GAC3BsS,IACAA,EAAG6e,KAAKxxB,EAAIL,EAAI8S,GAChBzS,EAAKyS,EAAG,GACR9S,EAAK8S,EAAG,GACRE,EAAG6e,KAAKpf,EAAIV,EAAIe,GAChBL,EAAKK,EAAG,GACRf,EAAKe,EAAG,GACRE,EAAG6e,KAAKxe,EAAIR,EAAIC,GAChBO,EAAKP,EAAG,GACRD,EAAKC,EAAG,IAEZ,IAAIlT,EAAKgB,EAAKX,EAAQ,EAAL8C,GACbzD,EAAKkJ,EAAKA,EAAKvI,EAAQ,EAAL8C,EAAS,GAC3BwS,EAAK3U,EAAKX,EAAQ,EAALgD,GACb+Q,EAAKxL,EAAKA,EAAKvI,EAAQ,EAALgD,EAAS,GAC3BgQ,EAAKrS,EAAKX,EAAQ,EAALS,GACb2R,EAAK7J,EAAKA,EAAKvI,EAAQ,EAALS,EAAS,GAC3BmI,EAAK3R,KAAKyX,MAAMqF,EAAK1U,EAAIiW,EAAK3V,GAC9BgD,EAAK1L,KAAKyX,MAAMoD,EAAK/R,EAAIyS,EAAKpS,GAC9BY,EAAKwR,EAAKpS,EACVV,EAAKoS,EAAK/R,EACVsS,EAAKpb,KAAKK,KAAK0J,EAAKA,EAAKtB,EAAKA,GAC9BJ,EAAKgW,EAAK3V,EACV+C,EAAKqR,EAAK1U,EAEVoW,EAAKpD,EADApb,KAAKK,KAAKgI,EAAKA,EAAKoD,EAAKA,GAElC4O,EAAGC,KAAKyB,EAAIZ,EAAIzS,EAAIN,EAAKiW,EAAK3V,EAAMoU,EAAK1U,IAAO0U,EAAK1U,GAAMiW,EAAK3V,EAAKmC,GACrEwP,EAAGC,KAAK6B,EAAIR,EAAIxS,EAAIL,EAAKyS,EAAKpS,EAAM0R,EAAK/R,IAAO+R,EAAK/R,GAAMyS,EAAKpS,EAAKG,GACrE,IAAIqC,GAAMrC,EAAG,GAAKuB,EAAG,IAAMA,EAAG,GAC1BuR,EAAKpc,KAAKgS,IAAItJ,EAAI2V,EAAItC,GACtBL,EAAK1b,KAAKkS,IAAIxJ,EAAI2V,EAAItC,GACtBQ,EAAKvc,KAAKgS,IAAI5J,EAAI0U,EAAI3B,GACtBa,EAAKhc,KAAKkS,IAAI9J,EAAI0U,EAAI3B,GACtBP,EAAK5a,KAAKyvB,MAAMrT,GAChBzB,EAAK3a,KAAKyvB,MAAMlT,GAChB7K,EAAK1R,KAAK46B,KAAKlf,GACfiB,GAAK3c,KAAK46B,KAAK5e,GACnBkC,EAAGzN,WACHyN,EAAGxN,UAAUvH,EAAIL,GACjBoV,EAAG2c,OAAOnvB,GACVwS,EAAGrd,MAAM,EAAGyI,EAAG,GAAKuB,EAAG,IACvBqT,EAAG4c,MAAMnvB,EAAI,GACbuS,EAAGrd,MAAM2d,EAAIA,GACbN,EAAG2c,QAAQlpB,GACXuM,EAAGxN,WAAWhI,GAAKN,GACnB8V,EAAG6c,WAAWxc,GASd,GANK3V,IACDA,EAFK,KAIL8E,GAAEstB,gBACFpyB,EAAK,GAEL8E,GAAEutB,yBAA0B,CAC5B,IAAI5e,GAAKqC,EAAGua,KAEZ,GADA5c,GAAG6e,cAAgB7e,GAAG6e,mBACjB7e,GAAG6e,cAAc9c,GAAK,CACvB,IAAI5C,GAAK4d,GAAG+B,aAAazpB,EAAKkJ,EAAI+B,GAAKhC,GACvCjN,GAAE0tB,WAAWC,eAAiB3tB,GAAE0tB,WAAWC,gBAAkB,EAC7D3tB,GAAE0tB,WAAWC,iBAAmB3pB,EAAKkJ,IAAO+B,GAAKhC,GAAM,EACvD,IAAIK,GAAKQ,GAAG8f,WAAW,MACvBtgB,GAAGtK,WAAWkK,GAAKD,GACnBye,GAAGmB,KAAKvf,GAAIkD,EAAItV,EAAIwS,EAAI1S,EAAIN,EAAIiW,EAAIvB,EAAIf,EAAIZ,EAAIhS,EAAIL,EAAIyS,EAAIV,EAAIsB,EAAIR,GACpEX,GAAGugB,UAAUtf,EAAI,EAAG,GACpBI,GAAG6e,cAAc9c,IACbod,YAAahgB,GACbigB,aAAczgB,IAGtBuD,EAAGgd,UAAUlf,GAAG6e,cAAc9c,GAAjB,YAAqCxD,EAAID,QAEjDjN,GAAEguB,aACHtC,GAAGmB,KAAKhc,EAAIL,EAAItV,EAAIwS,EAAI1S,EAAIN,EAAIiW,EAAIvB,EAAIf,EAAIZ,EAAIhS,EAAIL,EAAIyS,EAAIV,EAAIsB,EAAIR,GAEpEjO,GAAEiuB,yBACFvf,EAAK,EACLV,EAAKhS,EACL6S,EAAK,EACLP,EAAK1K,GAETiN,EAAGgd,UAAUtf,EAAIG,EAAIG,EAAIb,EAAKU,EAAIJ,EAAKO,EAAIH,EAAIG,EAAIb,EAAKU,EAAIJ,EAAKO,GAErEgC,EAAGkc,WAET,MAAOtc,GACLnU,EAAEC,KAAKkU,KAIfib,GAAGmB,KAAO,SAASzxB,EAAIC,EAAIgD,EAAIlB,EAAIjC,EAAIO,EAAId,EAAImB,EAAIpB,EAAIsB,EAAIK,EAAItB,EAAIa,EAAIuC,EAAInD,EAAI+C,GACvEM,EAAK,IACLqtB,GAAGwC,WAAW9yB,EAAIC,EAAIgD,EAAIlB,EAAId,EAAItB,EAAIa,EAAIuC,EAAInD,EAAI+C,GAElD2tB,GAAGyC,kBAAkB/yB,EAAI,KAAMF,EAAIO,EAAId,EAAImB,EAAIpB,EAAIsB,IAI3D0vB,GAAGwC,WAAa,SAAS7vB,EAAI2P,EAAI5S,EAAI6I,EAAI5I,EAAI8B,EAAImR,EAAIhB,EAAIhP,EAAI6E,GACzD,IAAInH,EAAKsS,EAAKjT,EACVgB,EAAKiR,EAAKnQ,EACVuQ,EAAKpP,EAAKjD,EACVoT,EAAKtL,EAAKhG,EACVsQ,EAAKzR,EAAKyS,EAAKpS,EAAKqR,EAAK,EAAItS,GAAMA,EACnCK,GAAMY,EACNT,EAAKI,EACLuS,EAAKjQ,EAAKgQ,EACVV,EAAKzK,EAAKmK,EACVkB,GAAMZ,EACNlK,EAAK6K,EACL7T,EAAKpI,KAAKK,KAAK4b,EAAKA,EAAKX,EAAKA,GAC9BK,GAAMQ,EACNxB,EAAKS,EACLrJ,EAAK/R,KAAKK,KAAK+a,EAAKA,EAAKe,EAAKA,GAC9BE,EAAKtT,EAAKoS,EAAKhS,EAAKwI,EACpB0J,EAAKxQ,EAAKsQ,EAAK7R,EAAKqI,EACpBhG,EAAKqQ,EAAKb,EAAKhS,EAAKwI,EACpB9F,EAAKmP,EAAKG,EAAK7R,EAAKqI,EACpBL,EAAK0K,EAAKb,EAAKe,EAAK9T,EACpBsJ,EAAKsJ,EAAKG,EAAK/J,EAAKhJ,EACpBM,EAAKsD,EAAKmP,EAAKe,EAAK9T,EACpBqD,EAAKoF,EAAKsK,EAAK/J,EAAKhJ,EACpBK,EAAKM,EAAKoS,EAAKQ,EAAK5J,EACpBnJ,EAAKiC,EAAKsQ,EAAKR,EAAK5I,EACpBtC,EAAKzD,EAAKmP,EAAKQ,EAAK5J,EACpBrG,EAAKmF,EAAKsK,EAAKR,EAAK5I,EACpB1J,EAAK+wB,GAAGU,KAEZ,OAAU,MADDpe,EAAGogB,KAAKzzB,KAIjB+wB,GAAGyC,kBAAkB9vB,EAAI1D,EAAIgU,EAAIhB,EAAI1P,EAAIE,EAAIyF,EAAII,EAAIhJ,EAAI+C,EAAIgE,EAAI/D,EAAIjD,EAAIG,IAClE,IAGXwwB,GAAGyC,kBAAoB,SAASvyB,EAAIuB,EAAInC,EAAID,EAAIL,EAAIU,EAAIY,EAAIX,GACxD,GAAI+B,UAAU1K,OAAU,EACpB4J,EAAEoB,KAAK,2BAGX,GAAMN,UAAU,aAAa+uB,GAA7B,CAIA,IAAIjxB,EAAKwwB,GAAGa,IACRlwB,EAAKc,EACLY,EAAKX,UAET,GADAxB,EAAG+wB,YACCtwB,EAAI,CACJA,EAAG4wB,KAAKlvB,EAAG,GAAIA,EAAG,GAAI7C,GACtBU,EAAGyyB,OAAOnzB,EAAG,GAAIA,EAAG,IACpB,IAAK,IAAIO,EAAK,EAAGA,EAAKsC,EAAGrL,OAAQ+I,GAAM,EACnCY,EAAG4wB,KAAKlvB,EAAGtC,GAAKsC,EAAGtC,EAAK,GAAIP,GAC5BU,EAAG0yB,OAAOpzB,EAAG,GAAIA,EAAG,QAErB,CACHU,EAAGyyB,OAAOtwB,EAAG,GAAIA,EAAG,IACpB,IAAStC,EAAK,EAAGA,EAAKsC,EAAGrL,OAAQ+I,GAAM,EACnCG,EAAG0yB,OAAOvwB,EAAGtC,GAAKsC,EAAGtC,EAAK,IAGlCG,EAAGixB,YApBCvwB,EAAEoB,KAAK,+CAuBfguB,GAAG+B,aAAe,SAAS7xB,EAAIP,GAC3B,IAAI8B,EAAK/G,SAASH,cAAc,UAMhC,OALAkH,EAAGoxB,aAAa,QAAS3yB,GACzBuB,EAAGoxB,aAAa,SAAUlzB,GACrB8B,GACDb,EAAEoB,KAAK,SAAWP,GAEfA,GAGXuuB,GAAG8C,WAAa,WAEZ,IAAK,IADDrxB,EAAK,GACAvB,EAAK,EAAGA,EAAKwB,UAAU1K,OAAQkJ,IACpCuB,GAAM,IAAMvB,EAAK,MAAQwB,UAAUxB,GAAI6yB,QAAQ,GAAK,MAExDj6B,QAAQC,IAAI0I,IAGhB,SAAS8hB,KACDjlB,IAGJE,KAAKw0B,KAAO,KACZx0B,KAAKy0B,KAAO,KACZz0B,KAAK00B,KAAO,KACZ10B,KAAKiR,KAAO,MAEhB8T,GAAEziB,UAAU0L,KAAO,SAAStM,GACxB1B,KAAKw0B,KAAO9yB,EAAG0Q,OACfpS,KAAKy0B,KAAO/yB,EAAG0Q,OACfpS,KAAK00B,KAAOhzB,EAAG0Q,OACfpS,KAAKiR,KAAOvP,EAAGF,QAGnBujB,GAAEziB,UAAUolB,YAAc,WACtB,OAAO1nB,KAAKw0B,MAGhBzP,GAAEziB,UAAUqlB,YAAc,WACtB,OAAO3nB,KAAKy0B,MAGhB1P,GAAEziB,UAAUmlB,gBAAkB,WAC1B,OAAOznB,KAAK00B,MAGhB3P,GAAEziB,UAAUub,WAAa,WACrB,OAAO7d,KAAKiR,MAGhB,SAAS1Y,GAAEmJ,GACH5B,IAGJE,KAAKqxB,KAAO,KACZrxB,KAAKqnB,KAAO,KACZrnB,KAAK20B,MAAO,EACZ30B,KAAKyL,MAAO,EACZzL,KAAKqxB,KAAO3vB,EACZ1B,KAAK40B,WAAa,EAClB50B,KAAK+Y,KAAO,EACZ/Y,KAAK60B,aAAe,GAExBt8B,GAAE+J,UAAUuH,KAAO,WACf,OAAO7J,KAAKyL,OAASzL,KAAK20B,MAG9Bp8B,GAAE+J,UAAUirB,KAAO,SAAS7rB,GACxB1B,KAAKyL,KAAO/J,GAGhBnJ,GAAE+J,UAAUqmB,KAAO,WACf,OAAO3oB,KAAKqxB,MAGhB94B,GAAE+J,UAAU8kB,KAAO,SAAS1lB,GACxB1B,KAAKqnB,KAAO3lB,GAGhBnJ,GAAE+J,UAAUwyB,cAAgB,WACxB,OAAO90B,KAAKqnB,MAGhB9uB,GAAE+J,UAAUyyB,KAAO,WACf,OAAO/0B,KAAK20B,MAGhBp8B,GAAE+J,UAAU+qB,KAAO,SAAS3rB,GACxB1B,KAAK20B,KAAOjzB,GAGhBnJ,GAAE+J,UAAUsrB,cAAgB,WACxB,OAAO5tB,KAAK40B,YAGhBr8B,GAAE+J,UAAUurB,2BAA6B,SAASnsB,GAC9C1B,KAAK40B,WAAalzB,GAGtBnJ,GAAE+J,UAAU0rB,uBAAyB,WACjC,OAAOhuB,KAAK+Y,MAGhBxgB,GAAE+J,UAAUga,uBAAyB,SAAS5a,GAC1C1B,KAAK+Y,KAAOrX,GAGhBnJ,GAAE+J,UAAUwrB,gBAAkB,SAASpsB,GACnC,OAAO1B,KAAK60B,cAGhBt8B,GAAE+J,UAAUyrB,gBAAkB,SAASrsB,GACnC1B,KAAK60B,aAAenzB,GAGxB,SAASoE,MACTA,GAAEkvB,KAAO,WACTlvB,GAAEmvB,KAAO,SACTnvB,GAAEovB,MAAO,EACTpvB,GAAEyb,MAAO,EACTzb,GAAEqvB,MAAO,EACTrvB,GAAE0Z,MAAO,EACT1Z,GAAEsvB,MAAO,EACTtvB,GAAEuvB,MAAO,EACTvvB,GAAEyqB,MAAO,EACTzqB,GAAEwvB,qBAAsB,EACxBxvB,GAAEyvB,MAAO,EACTzvB,GAAE0vB,MAAO,EACT1vB,GAAEgT,MAAO,EACThT,GAAE2vB,aAAe,EACjB3vB,GAAE4vB,KAAO,IACT5vB,GAAE6vB,KAAO,KACT7vB,GAAE8vB,KAAO,KACT9vB,GAAE+vB,KAAO,IACT/vB,GAAEgwB,KAAO,KACThwB,GAAEiwB,KAAO,KACTjwB,GAAEkiB,KAAO,IACTliB,GAAEgW,0BAA4B,EAC9BhW,GAAEkwB,yBAA2B,EAC7BlwB,GAAEmwB,iCAAmC,EACrCnwB,GAAEowB,MAAO,EACTpwB,GAAEqwB,KAAO,EACTrwB,GAAEsC,uBAAyB,IAC3BtC,GAAEC,UAAY,IAAIX,MAClBU,GAAEE,aAAe,IAAIZ,MACrBU,GAAEswB,SAAW,IAAIhxB,MACjBU,GAAEguB,aAAc,EAChBhuB,GAAEstB,eAAgB,EAClBttB,GAAEsmB,SAAW,EACbtmB,GAAEiuB,wBAAyB,EAC3BjuB,GAAEuwB,sBAAuB,EACzBvwB,GAAEutB,0BAA2B,EAC7BvtB,GAAE0tB,cACF1tB,GAAEwwB,mBACEC,aAAc,YACdxC,wBAAwB,EACxBV,0BAA0B,EAC1BjH,SAAU,GAEdtmB,GAAE0wB,qBACED,aAAc,UACdxC,wBAAwB,EACxBV,0BAA0B,EAC1BjH,SAAU,GAEdtmB,GAAE2wB,oBAAsB3wB,GAAE0wB,oBAC1B1wB,GAAE4wB,iBACEH,aAAc,UACdxC,wBAAwB,EACxBV,0BAA0B,EAC1BjH,SAAU,GAEdtmB,GAAE6wB,iBACEJ,aAAc,UACdxC,wBAAwB,EACxBV,0BAA0B,EAC1BjH,SAAU,GAEdtmB,GAAE8wB,YAAc,WACRnwB,GAAEowB,QACF/wB,GAAEgxB,aAAahxB,GAAE2wB,qBAEbhwB,GAAEswB,YACFjxB,GAAEgxB,aAAahxB,GAAE4wB,iBAEjB5wB,GAAEgxB,aAAahxB,GAAE6wB,kBAK7B7wB,GAAEgxB,aAAe,SAAS7zB,EAAI9B,GAC1B,GAAiB,iBAAN8B,EACP,OAAQA,GACR,KAAK,KACDA,EAAK6C,GAAEwwB,kBACP,MACJ,KAAK,KACDrzB,EAAK6C,GAAE0wB,oBACP,MACJ,KAAK,KACDvzB,EAAK6C,GAAE2wB,oBACP,MACJ,KAAK,KACDxzB,EAAK6C,GAAE4wB,gBACP,MACJ,KAAK,KACDzzB,EAAK6C,GAAE6wB,gBACP,MACJ,QACIK,MAAM,sBAAwB/zB,GAIlCC,UAAU1K,OAAS,IACnB2I,GAAK,GAELA,GACA7G,QAAQC,IAAI,aAAe0I,EAAGszB,cAElC,IAAK,IAAI70B,KAAMuB,EACX6C,GAAEpE,GAAMuB,EAAGvB,GACPP,GACA7G,QAAQC,IAAI,MAAQmH,EAAK,OAASuB,EAAGvB,KAKjDoE,GAAE5D,KAAO,WACL,GAAI4D,GAAEowB,KAAM,CACR57B,QAAQC,IAAI,YAAauL,GAAEkvB,MAC3BlvB,GAAEowB,MAAO,GAEJ,EACLpwB,GAAE8wB,gBAIV9wB,GAAEmxB,cAAgB,WACd,OAAOnxB,GAAEkvB,MAGblvB,GAAEoxB,aAAe,WACb,OAAOpxB,GAAEmvB,MAGbnvB,GAAEiiB,KAAO,SAASrmB,GACdoE,GAAEqwB,KAAOz0B,GAGboE,GAAEqxB,SAAW,WACT,IAAIz1B,EAAKoE,GAAEqwB,KAEX,OADArwB,GAAEqwB,KAAO,EACFz0B,GAGXoE,GAAEsxB,QAAU,WACRtxB,GAAEC,aACFD,GAAEE,gBACFF,GAAEswB,aAGNtwB,GAAEnI,MAAQ,SAASwD,EAAI8B,GACnB,IAAIvB,EAAKuB,GAAM,EACf6C,GAAEC,UAAUrE,GAAMP,GAGtB2E,GAAEuxB,MAAQ,SAAS31B,GACf,OAAOoE,GAAEC,UAAUrE,IAGvBoE,GAAEwxB,0BAA4B,SAAS51B,GACnCoE,GAAEsC,uBAAyB1G,GAG/BoE,GAAEyxB,0BAA4B,WAC1B,OAAOzxB,GAAEsC,wBAGbtC,GAAE0xB,aAAe,SAASv0B,GACb6C,GAAEuxB,MAAMp0B,GACdiE,kBAAkBpB,GAAEE,aAAa/C,GAAIkE,oBACjCrB,GAAEE,aAAa/C,UACf6C,GAAEC,UAAU9C,IAGvB,SAAS3K,MACTA,GAAE0T,KAAO,SAAStK,GACd,OAAIA,EAAK,EACE,EAEHA,EAAK,EACE,EAGP,GAAM,GAAMtJ,KAAKwY,IAAIlP,EAAKoP,GAAG2mB,OAGzC,SAAS72B,GAAEc,GACH5B,IAGJE,KAAK03B,KAAOh2B,GAEhBd,GAAE+2B,MAAQ,EACV/2B,GAAE0B,UAAUwlB,SAAW,WACnB,OAAO9nB,KAAK03B,MAGhB,SAASzyB,KACDnF,IAGJiF,EAAEzC,UAAUgL,YAAYC,KAAKvN,MAC7BA,KAAK43B,MAAQ,EACb53B,KAAK63B,KAAO,EACZ73B,KAAK83B,KAAO,EACZ93B,KAAK+3B,KAAO,KACZ/3B,KAAKg4B,KAAO,KACZh4B,KAAKi4B,KAAO,KACZj4B,KAAK6vB,KAAO,KACZ7vB,KAAKk4B,KAAO,KACZl4B,KAAKm4B,KAAOlzB,GAAEmzB,KACdp4B,KAAKia,SAAU,EACfja,KAAKszB,cAAgB,KACrBtzB,KAAKq4B,WAAapzB,GAAE7E,QAExB6E,GAAE3C,UAAY,IAAIyC,EAClBE,GAAE7E,KAAO,EACT6E,GAAEqzB,KAAO,GACTrzB,GAAEmzB,KAAO,EACTnzB,GAAEszB,KAAO,EACTtzB,GAAEuzB,KAAO,EACTvzB,GAAEgoB,KAAO,IAAI7nB,MACbH,GAAE3C,UAAUm2B,KAAO,SAAS/2B,GACxB1B,KAAK43B,KAAOl2B,GAGhBuD,GAAE3C,UAAUo2B,aAAe,WACvB,OAAO14B,KAAK43B,MAGhB3yB,GAAE3C,UAAUq2B,KAAO,WACf,OAAO34B,KAAKk4B,MAGhBjzB,GAAE3C,UAAUs2B,KAAO,WACf,OAAO54B,KAAK+3B,MAGhB9yB,GAAE3C,UAAUu2B,aAAe,WACvB,OAAO74B,KAAK63B,MAGhB5yB,GAAE3C,UAAUwC,QAAU,WAClB,OAAOC,EAAEC,MAGbC,GAAE3C,UAAUoX,KAAO,SAASnY,EAAIG,EAAIS,GAChC,IAAInB,EAAKU,EACLb,EAAiB,MAAXG,EAAGgvB,KAAgBhvB,EAAGgvB,KAAOhvB,EAAG+uB,KAE1C,OADS/lB,EAAG8Z,MAEZ,QACA,KAAK9Z,EAAG4Z,KACJ,MAAM,IAAI0I,MAAM,aACpB,KAAKtiB,EAAG6Z,KACJ,IAAK,IAAI1iB,EAAKnB,KAAK63B,KAAO,EAAG12B,GAAM,IAAKA,EAAI,CAExCN,EADSM,EAAK6I,EAAGE,KACT,GAAK/H,KAMzB8C,GAAE3C,UAAUG,KAAO,WACfzC,KAAKwX,KAAO,IAAI9Q,EAChB1G,KAAKwX,KAAK/U,QAGdwC,GAAE3C,UAAU0L,KAAO,SAAS9M,GACxB6D,EAAEzC,UAAU0L,KAAKT,KAAKvN,KAAMkB,GAC5BlB,KAAK43B,KAAO12B,EAAG+M,OACfjO,KAAK63B,KAAO32B,EAAG+M,OACfjO,KAAK83B,KAAO52B,EAAG+M,OACf,IAAIvM,EAAKR,EAAGM,OACZxB,KAAKi4B,KAAO,IAAI3R,WAAuB,EAAZtmB,KAAK83B,MAChC,IAAK,IAAI32B,EAAiB,EAAZnB,KAAK83B,KAAW,EAAG32B,GAAM,IAAKA,EACxCnB,KAAKi4B,KAAK92B,GAAMO,EAAGP,GAIvB,GAFAnB,KAAK6vB,KAAO3uB,EAAGM,OACfxB,KAAKk4B,KAAOh3B,EAAGM,OACXN,EAAGmR,oBAAsBhR,EAAGI,MAE5B,GADAzB,KAAK+3B,KAAO72B,EAAG+M,OACE,GAAbjO,KAAK+3B,KAAW,CAChB,GAAuB,IAAN,EAAZ/3B,KAAK+3B,MAAgB,CACtB,IAAI90B,EAAK/B,EAAG+M,OACK,MAAbjO,KAAKg4B,OACLh4B,KAAKg4B,KAAO,IAAI5rB,QAEpBpM,KAAKg4B,KAAKc,KAAOC,SAAS91B,GAEF,IAAvBjD,KAAK+3B,KAAO9yB,GAAEqzB,MACft4B,KAAKm4B,MAAQn4B,KAAK+3B,KAAO9yB,GAAEqzB,OAAS,EAEpCt4B,KAAKm4B,KAAOlzB,GAAEmzB,KAEM,IAAP,GAAZp4B,KAAK+3B,QACN/3B,KAAKia,SAAU,SAIvBja,KAAK+3B,KAAO,GAIpB9yB,GAAE3C,UAAUJ,KAAO,SAASX,GACxB,IAAIV,EAAK,IAAI8D,GAAG3E,MACZiD,EAAKjD,KAAK63B,KAAO7tB,EAAGE,KACpBxI,EAAK1B,KAAKsZ,OACC,MAAXzY,EAAGkvB,OACHlvB,EAAGkvB,KAAO,MAEdlvB,EAAGkvB,KAAO,IAAIxlB,aAAatH,GACZ,MAAXpC,EAAGmvB,OACHnvB,EAAGmvB,KAAO,MAEdnvB,EAAGmvB,KAAOtuB,EAAK,IAAI6I,aAAatH,GAAM,KAEtC,OADS+G,EAAG8Z,MAEZ,QACA,KAAK9Z,EAAG4Z,KACJ,GAAI5Z,EAAG+Z,KACH,IAAK,IAAI5iB,EAAKnB,KAAK63B,KAAO,EAAG12B,GAAM,IAAKA,EAAI,CACxC,IAAIgB,EAAKhB,GAAM,EACfnB,KAAKk4B,KAAK/1B,EAAK,GAAK,EAAInC,KAAKk4B,KAAK/1B,EAAK,GAG/C,MACJ,KAAK6H,EAAG6Z,KACJ,IAAS1iB,EAAKnB,KAAK63B,KAAO,EAAG12B,GAAM,IAAKA,EAAI,CACpCgB,EAAKhB,GAAM,EAAf,IACID,EAAKC,EAAK6I,EAAGE,KACb1J,EAAKR,KAAKk4B,KAAK/1B,GACfL,EAAK9B,KAAKk4B,KAAK/1B,EAAK,GACxBtB,EAAGkvB,KAAK7uB,GAAMV,EACdK,EAAGkvB,KAAK7uB,EAAK,GAAKY,EAClBjB,EAAGkvB,KAAK7uB,EAAK,GAAK,EACdQ,IACAb,EAAGmvB,KAAK9uB,GAAMV,EACdK,EAAGmvB,KAAK9uB,EAAK,GAAKY,EAClBjB,EAAGmvB,KAAK9uB,EAAK,GAAK,IAK9B,OAAOL,GAGXoE,GAAE3C,UAAUqW,KAAO,SAASxX,EAAIO,GAC5B,IAAIR,EAAKQ,EAIT,GAHO1B,MAAQkB,EAAGynB,QACdruB,QAAQC,IAAI,qBAEXyF,KAAKwX,KAAKyH,KAAK9d,KAGpB4D,EAAEzC,UAAUqW,KAAKpL,KAAKvN,KAAMmB,EAAID,IAC5BA,EAAG0X,KAAK,IAAZ,CAGA,IAAI3V,EAAKgC,GAAEgoB,KACXhqB,EAAG,IAAK,EACR4P,EAAG+B,KAAKzT,EAAInB,KAAKwX,KAAMvU,EAAIjD,KAAK63B,KAAM73B,KAAK6vB,KAAM3uB,EAAG6uB,KAAM/lB,EAAGC,KAAMD,EAAGE,QAG1EjF,GAAE3C,UAAU0W,KAAO,SAAS9X,EAAI+B,GAC5B,IACWjD,MAAQiD,EAAG0lB,QACdruB,QAAQC,IAAI,qBAEhB,IAAIgH,GAAK,EACL0B,EAAG2V,KAAK,KACRrX,GAAK,GAET,IAAIP,EAAKiC,EACT,IAAK1B,IACDwD,EAAEzC,UAAU0W,KAAKzL,KAAKvN,KAAMkB,GACxBlB,KAAKsZ,QAAQ,CACb,IAAI5X,EAAK1B,KAAKoZ,sBAId,GAHIpY,EAAGwsB,MAAQzoB,EAAE8S,OACb7W,EAAGwsB,KAAOtsB,EAAGomB,iBAAiB5lB,IAE9BV,EAAGwsB,KAAO,EACN1nB,GAAEyb,MACFnf,EAAEoB,KAAK,qBAAsB9B,OAE9B,CACH,IAAIS,EAAKjB,EAAGimB,YAAYnmB,EAAGwsB,MACvBrsB,EAAKD,EAAGsnB,KAAKxnB,EAAGwsB,MACV,MAANrrB,GAAehB,EAAG4zB,OAIlB/zB,EAAGyK,MAAO,GAHVtJ,EAAGoa,KAAKrb,EAAIC,EAAIH,EAAG+uB,KAAM/uB,EAAGgvB,KAAMhwB,KAAK63B,KAAM7tB,EAAGC,KAAMD,EAAGE,MACzDlJ,EAAGyK,MAAO,GAIdzK,EAAGg4B,YAAc73B,EAAG2sB,oBAIlC,MAAOjtB,GACL,MAAMA,IAIdoE,GAAE3C,UAAUjD,KAAO,SAASwB,EAAIK,EAAI+B,GAIhC,GAHOjD,MAAQiD,EAAG0lB,QACdruB,QAAQC,IAAI,sBAEZ0I,EAAG2V,KAAK,GAAZ,CAGA,IAAIrX,EAAK0B,EACL9B,EAAKnB,KAAK43B,KACVz2B,EAAK,IACLA,EAAK,GAET,IAAIO,EAAK1B,KAAKkZ,WAAWhY,EAAIK,GAAM0B,EAAGglB,KAAOhlB,EAAG+1B,YAC5Ch4B,EAAiB,MAAXO,EAAGyuB,KAAgBzuB,EAAGyuB,KAAOzuB,EAAGwuB,KAC1ClvB,EAAG6a,iCAAiCzY,EAAGwE,wBACvC5G,EAAGoa,KAAKjb,KAAKia,SACbpZ,EAAGka,KAAK5Z,EAAI,EAAInB,KAAK83B,KAAM93B,KAAKi4B,KAAMj3B,EAAIhB,KAAKk4B,KAAMx2B,EAAI1B,KAAKm4B,KAAM52B,KAGxE0D,GAAE3C,UAAUmK,KAAO,WACfnS,QAAQC,IAAI,4CAA6CyF,KAAK43B,KAAM53B,KAAK63B,KAAM73B,KAAK83B,MACpFx9B,QAAQC,IAAI,oBACZ,IAAK,IAAI4G,EAAK,EAAGA,EAAKnB,KAAKi4B,KAAKz/B,OAAQ2I,IACpC7G,QAAQC,IAAI,QAASyF,KAAKi4B,KAAK92B,IAEnC7G,QAAQC,IAAI,iBACZ,IAAS4G,EAAK,EAAGA,EAAKnB,KAAK6vB,KAAKr3B,OAAQ2I,IAAM,CAC1C7G,QAAQC,IAAI,oBAAqB4G,GAEjC,IAAK,IADDO,EAAK1B,KAAK6vB,KAAK1uB,GACV8B,EAAK,EAAGA,EAAKvB,EAAGlJ,OAAQyK,IAC7B3I,QAAQC,IAAI,UAAWmH,EAAGuB,IAGlC3I,QAAQC,IAAI,OAGhB0K,GAAE3C,UAAU22B,KAAO,SAASv3B,GACxB,OAAiB,MAAb1B,KAAKg4B,KACE,KAEJh4B,KAAKg4B,KAAKt2B,IAGrBuD,GAAE3C,UAAUsC,cAAgB,WACxB,OAAO5E,KAAKi4B,MAGhB,SAAStzB,GAAGjD,GACRw3B,GAAG52B,UAAUgL,YAAYC,KAAKvN,KAAM0B,GACpC1B,KAAKwtB,KAAOzoB,EAAE8S,KACd7X,KAAK+vB,KAAO,KACZ/vB,KAAKgwB,KAAO,KAEhBrrB,GAAGrC,UAAY,IAAI42B,GACnBv0B,GAAGrC,UAAUmC,qBAAuB,WAChC,OAAqB,MAAbzE,KAAKgwB,KAAgBhwB,KAAKgwB,KAAOhwB,KAAK+vB,MAGlD,SAASoJ,KACDr5B,IAGJE,KAAKrI,EAAI,KACTqI,KAAKlI,EAAI,MAEbqhC,GAAE72B,UAAU+U,KAAO,SAAS3V,GACxB1B,KAAKrI,EAAI+J,EAAG/J,EACZqI,KAAKlI,EAAI4J,EAAG5J,GAGhBqhC,GAAE72B,UAAU+U,KAAO,SAAS3V,EAAIuB,GAC5BjD,KAAKrI,EAAI+J,EACT1B,KAAKlI,EAAImL,GAGb,SAASm2B,GAAE13B,GACH5B,IAGJC,EAAGuC,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAKq5B,eAAiB,IAAIC,GAAE53B,GAC5B1B,KAAKq5B,eAAe17B,MAAMmI,GAAEuxB,MAAM31B,KAEtC03B,GAAE92B,UAAY,IAAIvC,EAClBq5B,GAAE1K,UAAY,SAASzrB,GACnB,IAAIvB,EAAK,IAAI03B,GAEb,OADAr5B,EAAGQ,KAAKmB,EAAIuB,GACLvB,GAGX03B,GAAE1K,UAAY,SAASzrB,EAAI/B,GACvB,IACIQ,EAAK,IAAI03B,GADJl4B,GAAM,GAGf,OADAnB,EAAGQ,KAAKmB,EAAIuB,GACLvB,GAGX03B,GAAEzK,KAAO,WAEL,OADS,IAAIyK,IAIjBA,GAAExK,KAAO,SAAS5tB,GACd,IAAIG,EAAK,IAAI2nB,IAAI,8BACjB,GAAmB,GAAf3nB,EAAG4nB,SACH,MAAM,IAAIC,KAAK,wBAA0B7nB,EAAG0tB,QAIhD,IAAK,IAFDntB,GAAM,sCAAuC,sCAAuC,sCAAuC,uCAC3HR,EAAKk4B,GAAE1K,UAAUvtB,EAAG8nB,QACfhmB,EAAK,EAAGA,EAAKvB,EAAGlJ,OAAQyK,IAAM,CACnC,IAAI1B,EAAK,IAAIunB,IAAIpnB,EAAGuB,IACpB,GAAmB,GAAf1B,EAAGwnB,SACH,MAAM,IAAIC,KAAK,wBAA0BznB,EAAGstB,QAEhD3tB,EAAGsrB,WAAWvpB,EAAI6rB,KAAKC,KAAK/tB,EAAIO,EAAG0nB,SAEvC,OAAO/nB,GAGXk4B,GAAE92B,UAAU3E,MAAQ,SAAS+D,GACzBoE,GAAEnI,MAAM+D,IAGZ03B,GAAE92B,UAAU6pB,aAAe,SAASzqB,GAChC1B,KAAKq5B,eAAelN,aAAazqB,IAGrC03B,GAAE92B,UAAU/D,OAAS,WACjByB,KAAKE,KAAK3B,SACVyB,KAAKE,KAAKuZ,QAAQzZ,KAAKq5B,iBAG3BD,GAAE92B,UAAUjD,KAAO,WACfW,KAAKE,KAAKb,KAAKW,KAAKq5B,iBAGxBD,GAAE92B,UAAUoB,KAAO,WACf1D,KAAKq5B,eAAe31B,QAGxB01B,GAAE92B,UAAUkqB,WAAa,SAASvpB,EAAIvB,GACP,MAAvB1B,KAAKq5B,gBACLj3B,EAAEoB,KAAK,2CAEXxD,KAAKq5B,eAAe7M,WAAWvpB,EAAIvB,IAGvC03B,GAAE92B,UAAUkqB,WAAa,SAASvpB,EAAIvB,GACP,MAAvB1B,KAAKq5B,gBACLj3B,EAAEoB,KAAK,2CAEXxD,KAAKq5B,eAAe7M,WAAWvpB,EAAIvB,IAGvC03B,GAAE92B,UAAUiB,KAAO,WACf,OAAOvD,KAAKq5B,eAAe91B,QAG/B61B,GAAE92B,UAAUmB,KAAO,SAAS/B,GACxB1B,KAAKq5B,eAAe51B,KAAK/B,IAG7B03B,GAAE92B,UAAUL,aAAe,WACvB,OAAOjC,KAAKq5B,gBAGhBD,GAAE92B,UAAUyG,UAAY,SAASrH,GAC7B1B,KAAKq5B,eAAetwB,UAAUrH,IAGlC03B,GAAE92B,UAAU6Y,sBAAwB,SAASzZ,GACzC1B,KAAKq5B,eAAele,sBAAsBzZ,IAG9C03B,GAAE92B,UAAU8Y,qBAAuB,WAC/B,OAAOpb,KAAKq5B,eAAeje,wBAG/Bge,GAAE92B,UAAU+Y,cAAgB,SAAS3Z,GACjC1B,KAAKq5B,eAAehe,cAAc3Z,IAGtC03B,GAAE92B,UAAUgZ,cAAgB,WACxB,OAAOtb,KAAKq5B,eAAe/d,iBAG/B,SAASie,KACDz5B,IAGJE,KAAK0hB,QAAU,KACf1hB,KAAKw5B,MAAO,EACZx5B,KAAK0hB,QAAU,IAAItc,OAEvBm0B,GAAEj3B,UAAUm3B,KAAO,WACf,OAAOz5B,KAAK0hB,SAGhB6X,GAAEj3B,UAAUo3B,YAAc,SAASv4B,EAAI8B,GAInC,IAAK,IAFD1B,EAAK,KACLG,EAAK1B,KAAK0hB,QAAQlpB,OACb0I,EAAK,EAAGA,EAAKQ,IAAMR,EAEd,OADVK,EAAKvB,KAAK0hB,QAAQxgB,MAIlBK,EAAGo4B,KAAKp4B,EAAGq4B,KAAKzuB,cACZnL,KAAKw5B,MACLp3B,EAAEuK,KAAK,sEAAuEjL,EAAIH,EAAGs4B,OAG7F,GAAU,MAAN14B,EACA,OAAQ,GAEZI,EAAK,IAAIu4B,IACNF,KAAOz4B,EACVnB,KAAK0hB,QAAQ3iB,KAAKwC,GAClB,IAAIV,EAAKU,EAAGs4B,KAIZ,OAHI75B,KAAKw5B,MACLp3B,EAAEuK,KAAK,iEAAkEjL,EAAIb,GAE1EA,GAGX04B,GAAEj3B,UAAUkJ,YAAc,SAASrK,GAC/B,IAEI,IAAK,IADD8B,GAAK,EACA/B,EAAK,EAAGA,EAAKlB,KAAK0hB,QAAQlpB,OAAQ0I,IAAM,CAC7C,IAAIK,EAAKvB,KAAK0hB,QAAQxgB,GACtB,GAAU,MAANK,EAAJ,CAKA,IAAIG,EAAKH,EAAGq4B,KACF,MAANl4B,GAKJA,EAAG8J,YAAYrK,EAAII,GACnB0B,GAAK,EACD1B,EAAGw4B,eACC/5B,KAAKw5B,MACLp3B,EAAEuK,KAAK,kEAAmE3M,KAAK0hB,QAAQlpB,OAAS,EAAG+I,EAAGs4B,MAE1G75B,KAAK0hB,QAAQ1a,OAAO9F,EAAI,GACxBA,OAXAlB,KAAK0hB,QAAU1hB,KAAK0hB,QAAQ1a,OAAO9F,EAAI,GACvCA,UAPAlB,KAAK0hB,QAAQ1a,OAAO9F,EAAI,GACxBA,IAmBR,OAAO+B,EACT,MAAOjC,GAEL,OADAoB,EAAEoB,KAAKxC,IACA,IAIfu4B,GAAEj3B,UAAUy3B,WAAa,SAAS74B,GAC9B,GAAIgC,UAAU1K,QAAU,EAAG,CACvB,IAAK,IAAIyK,EAAK,EAAGA,EAAKjD,KAAK0hB,QAAQlpB,OAAQyK,IAAM,CAE7C,GAAU,OADN9B,EAAKnB,KAAK0hB,QAAQze,MAIlB9B,EAAG04B,MAAQ34B,IAAOC,EAAG44B,cACrB,OAAO,EAGf,OAAO,EAEP,IAAS92B,EAAK,EAAGA,EAAKjD,KAAK0hB,QAAQlpB,OAAQyK,IAAM,CAC7C,IAAI9B,EACJ,GAAU,OADNA,EAAKnB,KAAK0hB,QAAQze,IACtB,CAMA,GAAU,MADD9B,EAAGy4B,MAMZ,IAAKz4B,EAAG44B,aACJ,OAAO,OALP/5B,KAAK0hB,QAAQ1a,OAAO/D,EAAI,GACxBA,SAPAjD,KAAK0hB,QAAQ1a,OAAO/D,EAAI,GACxBA,IAaR,OAAO,GAIfs2B,GAAEj3B,UAAU03B,eAAiB,WACzB,IAAK,IAAI/2B,EAAK,EAAGA,EAAKjD,KAAK0hB,QAAQlpB,OAAQyK,IAAM,CAC7C,IAAI9B,EAAKnB,KAAK0hB,QAAQze,GACtB,GAAU,MAAN9B,EAAJ,CAKSA,EAAGy4B,KAOR55B,KAAK0hB,QAAQ1a,OAAO/D,EAAI,GACxBA,SAZAjD,KAAK0hB,QAAQ1a,OAAO/D,EAAI,GACxBA,MAgBZs2B,GAAEj3B,UAAU23B,KAAO,SAASv4B,GACxB1B,KAAKw5B,KAAO93B,GAGhB63B,GAAEj3B,UAAUkQ,IAAM,WACdlY,QAAQC,IAAI,eACZ,IAAK,IAAImH,EAAK,EAAGA,EAAK1B,KAAK0hB,QAAQlpB,OAAQkJ,IAAM,CAC7C,IACIP,EADKnB,KAAK0hB,QAAQhgB,GACVk4B,KACZt/B,QAAQC,IAAI,6BAA8ByF,KAAK0hB,QAAQlpB,OAAQ2I,EAAG2mB,cAI1E,SAASgS,KACL95B,KAAK45B,KAAO,KACZ55B,KAAKyL,MAAO,EACZzL,KAAK0L,MAAO,EACZ1L,KAAK6L,MAAQ,EACb7L,KAAK8L,MAAQ,EACb9L,KAAK+L,MAAQ,EACb/L,KAAK65B,KAAO,KACZ75B,KAAK65B,KAAOC,GAAEI,OAElBJ,GAAEI,KAAO,EACTJ,GAAEx3B,UAAUy3B,WAAa,WACrB,OAAO/5B,KAAK0L,MAGhBouB,GAAEx3B,UAAUq3B,KAAO,SAASx4B,GACxB,IACIO,EADKiK,EAAEC,kBACGzK,GACVnB,KAAK+L,KAAO,GAAKrK,EAAK1B,KAAK+L,QAC3B/L,KAAK+L,KAAOrK,IAIpBo4B,GAAEx3B,UAAU63B,KAAO,WACf,OAAOn6B,KAAK65B,MAGhB,SAAS5H,KACLjyB,KAAKgJ,EAAI,IAAI5D,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAEvC6sB,GAAG3vB,UAAU6wB,WAAa,SAASlwB,GAC/B,IAAIvB,EAAK1B,KAAKgJ,EACd/F,EAAGxL,UAAUiK,EAAG,GAAIA,EAAG,GAAIA,EAAG,GAAIA,EAAG,GAAIA,EAAG,GAAIA,EAAG,KAGvDuwB,GAAG3vB,UAAUwlB,SAAW,WAEpB,IAAK,IADD7kB,EAAK,iBACAvB,EAAK,EAAGA,EAAK,EAAGA,IACrBuB,GAAMjD,KAAKgJ,EAAEtH,GAAI6yB,QAAQ,GAAK,KAGlC,OADAtxB,GAAM,MAIVgvB,GAAG3vB,UAAUuG,SAAW,WACpB,IAAInH,EAAK1B,KAAKgJ,EACdtH,EAAG,GAAKA,EAAG,GAAKA,EAAG,GAAK,EACxBA,EAAG,GAAKA,EAAG,GAAKA,EAAG,GAAKA,EAAG,GAAKA,EAAG,GAAKA,EAAG,GAAK,GAGpDuwB,GAAG3vB,UAAUywB,KAAO,SAAS9vB,EAAI/B,EAAIC,GACvB,MAANA,IACAA,EAAK,IAAIiE,MAAM,EAAE,IAErB,IAAI1D,EAAK1B,KAAKgJ,EAGd,OAFA7H,EAAG,GAAKO,EAAG,GAAKuB,EAAKvB,EAAG,GAAKR,EAAKQ,EAAG,GACrCP,EAAG,GAAKO,EAAG,GAAKuB,EAAKvB,EAAG,GAAKR,EAAKQ,EAAG,GAC9BP,GAGX8wB,GAAG3vB,UAAU4xB,KAAO,SAAShzB,GACpBA,IACDA,EAAK,IAAI+wB,IAEb,IAAIhvB,EAAKjD,KAAKgJ,EACVpH,EAAKqB,EAAG,GACRnC,EAAKmC,EAAG,GACRY,EAAKZ,EAAG,GACRzC,EAAKyC,EAAG,GACRnB,EAAKmB,EAAG,GACRd,EAAKc,EAAG,GACRpC,EAAKoC,EAAG,GACRjC,EAAKiC,EAAG,GACR1B,EAAK0B,EAAG,GACR9B,EAAKS,EAAKE,EAAKP,EAAKT,EAAKqB,EAAKtB,EAAKgD,EAAKrD,EAAKQ,EAAKY,EAAKO,EAAKnB,EAAK6C,EAAK/B,EAAKjB,EAAKC,EAAKN,EAAKe,EAC9F,GAAU,GAANJ,EACA,OAAO,KAEP,IAAIO,EAAK,EAAIP,EAUb,OATAD,EAAG8H,EAAE,GAAKtH,GAAMI,EAAKP,EAAKP,EAAKmB,GAC/BjB,EAAG8H,EAAE,GAAKtH,GAAMV,EAAK6C,EAAK/C,EAAKS,GAC/BL,EAAG8H,EAAE,GAAKtH,GAAMZ,EAAKqB,EAAKL,EAAK+B,GAC/B3C,EAAG8H,EAAE,GAAKtH,GAAMb,EAAKsB,EAAK3B,EAAKe,GAC/BL,EAAG8H,EAAE,GAAKtH,GAAME,EAAKL,EAAKV,EAAKgD,GAC/B3C,EAAG8H,EAAE,GAAKtH,GAAMlB,EAAKqD,EAAKjC,EAAKO,GAC/BjB,EAAG8H,EAAE,GAAKtH,GAAMlB,EAAKQ,EAAKH,EAAKiB,GAC/BZ,EAAG8H,EAAE,GAAKtH,GAAMb,EAAKC,EAAKc,EAAKZ,GAC/BE,EAAG8H,EAAE,GAAKtH,GAAME,EAAKE,EAAKtB,EAAKM,GACxBI,GAIf+wB,GAAG3vB,UAAU7K,UAAY,SAASwL,EAAI/B,EAAIC,GAC5B,MAANA,IACAA,EAAK,IAAIiE,MAAM,EAAE,IAErB,IAAI1D,EAAK1B,KAAKgJ,EAGd,OAFA7H,EAAG,GAAKO,EAAG,GAAKuB,EAAKvB,EAAG,GAAKR,EAAKQ,EAAG,GACrCP,EAAG,GAAKO,EAAG,GAAKuB,EAAKvB,EAAG,GAAKR,EAAKQ,EAAG,GAC9BP,GAGX8wB,GAAG3vB,UAAUwG,UAAY,SAAS7F,EAAI9B,GAClC,IAAIO,EAAK1B,KAAKgJ,EACdtH,EAAG,GAAKA,EAAG,GAAKuB,EAAKvB,EAAG,GAAKP,EAAKO,EAAG,GACrCA,EAAG,GAAKA,EAAG,GAAKuB,EAAKvB,EAAG,GAAKP,EAAKO,EAAG,GACrCA,EAAG,GAAKA,EAAG,GAAKuB,EAAKvB,EAAG,GAAKP,EAAKO,EAAG,IAGzCuwB,GAAG3vB,UAAUrJ,MAAQ,SAASkI,EAAI8B,GAC9B,IAAIvB,EAAK1B,KAAKgJ,EACdtH,EAAG,IAAMP,EACTO,EAAG,IAAMP,EACTO,EAAG,IAAMP,EACTO,EAAG,IAAMuB,EACTvB,EAAG,IAAMuB,EACTvB,EAAG,IAAMuB,GAGbgvB,GAAG3vB,UAAU4wB,MAAQ,SAASlyB,EAAIO,GAC9B,IAAIG,EAAK1B,KAAKgJ,EACV9H,EAAKQ,EAAG,GAAKA,EAAG,GAAKH,EACrBJ,EAAKO,EAAG,GAAKA,EAAG,GAAKH,EACrB0B,EAAKvB,EAAG,GAAKA,EAAG,GAAKH,EACzBG,EAAG,GAAKA,EAAG,GAAKV,EAAKU,EAAG,GACxBA,EAAG,GAAKA,EAAG,GAAKV,EAAKU,EAAG,GACxBA,EAAG,GAAKA,EAAG,GAAKV,EAAKU,EAAG,GACxBA,EAAG,GAAKR,EACRQ,EAAG,GAAKP,EACRO,EAAG,GAAKuB,GAGZgvB,GAAG3vB,UAAU2wB,OAAS,SAASjyB,GAC3B,IAAIU,EAAK1B,KAAKgJ,EACVnI,EAAKzI,KAAKwY,IAAI5P,GACdO,EAAKnJ,KAAKyY,IAAI7P,GACdE,EAAKQ,EAAG,GAAKb,EAAKa,EAAG,GAAKH,EAC1BJ,EAAKO,EAAG,GAAKb,EAAKa,EAAG,GAAKH,EAC1B0B,EAAKvB,EAAG,GAAKb,EAAKa,EAAG,GAAKH,EAC9BG,EAAG,IAAMA,EAAG,GAAKH,EAAKG,EAAG,GAAKb,EAC9Ba,EAAG,IAAMA,EAAG,GAAKH,EAAKG,EAAG,GAAKb,EAC9Ba,EAAG,IAAMA,EAAG,GAAKH,EAAKG,EAAG,GAAKb,EAC9Ba,EAAG,GAAKR,EACRQ,EAAG,GAAKP,EACRO,EAAG,GAAKuB,GAGZgvB,GAAG3vB,UAAU83B,YAAc,SAAS74B,GAChC,IAAIY,EAAKnC,KAAKgJ,EACVhI,EAAKO,EAAGyH,EACRlI,EAAKqB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChD6C,EAAK1B,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDR,EAAK2B,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDc,EAAKK,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDH,EAAKsB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDE,EAAKiB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDG,EAAKgB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDiC,EAAKd,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAChDU,EAAKS,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GAAKmB,EAAG,GAAKnB,EAAG,GACpDgI,EAAE,GAAKlI,EACPkI,EAAE,GAAKnF,EACPmF,EAAE,GAAKxI,EACPwI,EAAE,GAAKlH,EACPkH,EAAE,GAAKnI,EACPmI,EAAE,GAAK9H,EACP8H,EAAE,GAAK7H,EACP6H,EAAE,GAAK/F,EACP+F,EAAE,GAAKtH,GAGX,SAAS6X,GAAE7X,GACH5B,GAGJuN,GAAG/K,UAAUgL,YAAYC,KAAKvN,KAAM0B,GAExC6X,GAAEjX,UAAY,IAAI+K,GAClBkM,GAAE8gB,KAAO,KACT9gB,GAAE/L,KAAO,IAAIpB,OACbmN,GAAEC,KAAO,WAIL,OAHc,MAAVD,GAAE8gB,OACF9gB,GAAE8gB,KAAO9gB,GAAExW,MAAM,aAEdwW,GAAE8gB,MAGb9gB,GAAE9L,KAAO,WACL8L,GAAE/L,KAAK7O,QACP4a,GAAE8gB,KAAO,MAGb9gB,GAAExW,MAAQ,SAASrB,GACf,IAAIuB,EAAKsW,GAAE/L,KAAK9L,GAKhB,OAJU,MAANuB,IACAA,EAAK,IAAIsW,GAAE7X,GACX6X,GAAE/L,KAAK9L,GAAMuB,GAEVA,GAGXsW,GAAEjX,UAAUoL,KAAO,WACf,OAAO,IAAI6L,IAGf,SAAS+f,GAAE53B,GACH5B,IAGJyQ,EAAGjO,UAAUgL,YAAYC,KAAKvN,MAC9BA,KAAKs6B,SAAW,IAAIl1B,MACpBpF,KAAKvI,UAAY,KACjBuI,KAAKsF,GAAK,KACVtF,KAAK2H,KAAOjG,EACZ1B,KAAKu6B,WAAY,EACjBv6B,KAAKw6B,cAAgB,KACrBx6B,KAAKy6B,cAAgB,EACrBz6B,KAAKorB,KAAO,GACZprB,KAAK2rB,MAAO,EACZ3rB,KAAKsrB,KAAO,KACZtrB,KAAKwrB,KAAO,KACZxrB,KAAKyrB,KAAO,KACZzrB,KAAK06B,WAAa,KAClB16B,KAAK26B,WAAa,KAClB36B,KAAK46B,cAAgB,KACrB56B,KAAK66B,cAAgB,MAEzBvB,GAAEh3B,UAAY,IAAIiO,EAClB+oB,GAAE/N,KAAO,SAAS7pB,GAEd,OADS,IAAI6I,aAAa7I,IAI9B43B,GAAE5N,KAAO,SAAShqB,GAEd,OADS,IAAI4kB,WAAW5kB,IAI5B43B,GAAE1N,KAAO,SAAS3oB,EAAIvB,GAUlB,OATU,MAANuB,GAAcA,EAAG4oB,OAASnqB,EAAGlJ,SAC7ByK,EAAKq2B,GAAE/N,KAAiB,EAAZ7pB,EAAGlJ,SACZszB,IAAIpqB,GACPuB,EAAG8oB,KAAK,KAER9oB,EAAGtE,QACHsE,EAAG6oB,IAAIpqB,GACPuB,EAAG8oB,KAAK,IAEL9oB,GAGXq2B,GAAEtN,KAAO,SAAS/oB,EAAIvB,GAUlB,OATU,MAANuB,GAAcA,EAAG4oB,OAASnqB,EAAGlJ,SAC7ByK,EAAKq2B,GAAE5N,KAAiB,EAAZhqB,EAAGlJ,SACZszB,IAAIpqB,GACPuB,EAAG8oB,KAAK,KAER9oB,EAAGtE,QACHsE,EAAG6oB,IAAIpqB,GACPuB,EAAG8oB,KAAK,IAEL9oB,GAGXq2B,GAAErN,KAAO,WACL,OAAOjsB,KAAK2rB,MAGhB2N,GAAEpN,KAAO,SAASxqB,GACd1B,KAAK2rB,KAAOjqB,GAGhB43B,GAAEh3B,UAAU+0B,MAAQ,WAChB,OAAOr3B,KAAKsF,IAGhBg0B,GAAEh3B,UAAU3E,MAAQ,SAAS+D,GACzB1B,KAAKsF,GAAK5D,GAGd43B,GAAEh3B,UAAU6pB,aAAe,SAASzqB,GAChC1B,KAAKvI,UAAYiK,GAGrB43B,GAAEh3B,UAAUwY,KAAO,WACf,IAAIpZ,EAAK1B,KAAKsF,GACVtF,KAAKu6B,YACLv6B,KAAK86B,aACL96B,KAAKu6B,WAAY,EACjBv6B,KAAKw6B,cAAgB94B,EAAGq5B,aAAa,mCAAqCr5B,EAAGq5B,aAAa,0CAA4Cr5B,EAAGq5B,aAAa,sCAClJ/6B,KAAKw6B,gBACLx6B,KAAKy6B,cAAgB/4B,EAAGsG,aAAahI,KAAKw6B,cAAcQ,kCAGhEt5B,EAAGu5B,QAAQv5B,EAAGw5B,cACdx5B,EAAGu5B,QAAQv5B,EAAGy5B,cACdz5B,EAAGu5B,QAAQv5B,EAAG05B,YACd15B,EAAG25B,UAAU35B,EAAG45B,IAChB55B,EAAG65B,OAAO75B,EAAG85B,OACb95B,EAAG+5B,UAAU,EAAG,EAAG,EAAG,GACtB/5B,EAAGg6B,WAAWh6B,EAAGi6B,aAAc,MAC/Bj6B,EAAGg6B,WAAWh6B,EAAGk6B,qBAAsB,OAG3CtC,GAAEh3B,UAAUyY,KAAO,SAASja,EAAIc,EAAIL,EAAId,EAAI0D,EAAItD,EAAIG,EAAImB,GACpD,KAAItB,EAAK,KAA2C,MAAnCb,KAAKua,4BAAtB,CAGS1Z,EAAK,IAAMiF,GAAEsmB,SAAtB,IACItoB,EAAK9D,KAAKsF,GACd,GAAe,MAAXtF,KAAKsF,GACL,MAAM,IAAIgnB,MAAM,cAEpB,IAKIroB,EAHK,EAGAjE,KAAK8Z,KAAYjZ,EACtBsJ,EAHK,EAGAnK,KAAK+Z,KAAYlZ,EACtB6I,EAHK,EAGA1J,KAAKga,KAAYnZ,EACtByT,EAAKtU,KAAK6Z,KAAOhZ,EACrB,GAAuC,MAAnCb,KAAKua,2BAAoC,CACzCzW,EAAGu3B,UAAUv3B,EAAG+3B,KAChB/3B,EAAGg4B,WAAW97B,KAAK+7B,eACnB/7B,KAAKwrB,KAAOwQ,GAAEl4B,EAAI9D,KAAKwrB,KAAM/qB,GAC7BT,KAAKyrB,KAAOwQ,GAAEn4B,EAAI9D,KAAKyrB,KAAMlqB,GAC7BuC,EAAGo4B,wBAAwBl8B,KAAKm8B,gBAChCr4B,EAAGs4B,oBAAoBp8B,KAAKm8B,eAAgB,EAAGr4B,EAAGu4B,OAAO,EAAO,EAAG,GACnEr8B,KAAKsrB,KAAO0Q,GAAEl4B,EAAI9D,KAAKsrB,KAAMnnB,GAC7BL,EAAGw4B,cAAcx4B,EAAGy4B,UACpBz4B,EAAG04B,YAAY14B,EAAG24B,WAAYz8B,KAAKs6B,SAASx5B,IAC5CgD,EAAG44B,UAAU18B,KAAK28B,eAAgB,GAClC74B,EAAGo4B,wBAAwBl8B,KAAK48B,gBAChC94B,EAAGs4B,oBAAoBp8B,KAAK48B,eAAgB,EAAG94B,EAAGu4B,OAAO,EAAO,EAAG,GACnEv4B,EAAG+4B,iBAAiB78B,KAAK88B,cAAc,EAAO98B,KAAKyb,gCAAgCvS,eACnF,IAAInF,EAAK/D,KAAKyb,gCAAgChT,gBAC1CqB,EAAK9J,KAAK6a,sBAAsB9W,GACpCD,EAAGi5B,UAAU/8B,KAAKg9B,cAAelzB,EAAGrD,EAAGqD,EAAGpD,EAAGoD,EAAG7E,EAAG6E,EAAG/E,GACtD,IAAI9B,EAAKjD,KAAKyb,gCAAgC/S,aAC9C5E,EAAGi5B,UAAU/8B,KAAKi9B,gBAAwB,EAAPh6B,EAAGtL,EAAQ,EAAU,EAAPsL,EAAGnL,EAAQ,EAAe,EAAZmL,EAAGkK,OAAa,EAAe,EAAZlK,EAAGmK,OAAa,GAClGtJ,EAAG44B,UAAU18B,KAAKk9B,gBAAgB,QAGlC,GAD6C,MAAxCl9B,KAAK2b,gCACF,CACJ7X,EAAGg4B,WAAW97B,KAAKm9B,kBACnBn9B,KAAKwrB,KAAOwQ,GAAEl4B,EAAI9D,KAAKwrB,KAAM/qB,GAC7BT,KAAKyrB,KAAOwQ,GAAEn4B,EAAI9D,KAAKyrB,KAAMlqB,GAC7BuC,EAAGo4B,wBAAwBl8B,KAAKo9B,oBAChCt5B,EAAGs4B,oBAAoBp8B,KAAKo9B,mBAAoB,EAAGt5B,EAAGu4B,OAAO,EAAO,EAAG,GACvEr8B,KAAKsrB,KAAO0Q,GAAEl4B,EAAI9D,KAAKsrB,KAAMnnB,GAC7BL,EAAGw4B,cAAcx4B,EAAGy4B,UACpBz4B,EAAG04B,YAAY14B,EAAG24B,WAAYz8B,KAAKs6B,SAASx5B,IAC5CgD,EAAG44B,UAAU18B,KAAKq9B,mBAAoB,GACtCv5B,EAAGo4B,wBAAwBl8B,KAAKs9B,oBAChCx5B,EAAGs4B,oBAAoBp8B,KAAKs9B,mBAAoB,EAAGx5B,EAAGu4B,OAAO,EAAO,EAAG,GACvEv4B,EAAG+4B,iBAAiB78B,KAAKu9B,sBAAsB,EAAOv9B,KAAK2b,gCAAgCxS,eAC3FrF,EAAG+4B,iBAAiB78B,KAAKw9B,kBAAkB,EAAOx9B,KAAKka,WACvDpW,EAAGw4B,cAAcx4B,EAAG25B,UACpB35B,EAAG04B,YAAY14B,EAAG24B,WAAY32B,GAAEswB,SAASp2B,KAAK2H,OAC9C7D,EAAG44B,UAAU18B,KAAK09B,mBAAoB,GAClC35B,EAAK/D,KAAK2b,gCAAgClT,gBAC1CqB,EAAK9J,KAAK6a,sBAAsB9W,GACpCD,EAAGi5B,UAAU/8B,KAAK29B,sBAAuB7zB,EAAGrD,EAAGqD,EAAGpD,EAAGoD,EAAG7E,EAAG6E,EAAG/E,GAC9DjB,EAAGi5B,UAAU/8B,KAAK49B,oBAAqB35B,EAAIkG,EAAIT,EAAI4K,QAEnDxQ,EAAGg4B,WAAW97B,KAAK+7B,eACnB/7B,KAAKwrB,KAAOwQ,GAAEl4B,EAAI9D,KAAKwrB,KAAM/qB,GAC7BT,KAAKyrB,KAAOwQ,GAAEn4B,EAAI9D,KAAKyrB,KAAMlqB,GAC7BuC,EAAGo4B,wBAAwBl8B,KAAKm8B,gBAChCr4B,EAAGs4B,oBAAoBp8B,KAAKm8B,eAAgB,EAAGr4B,EAAGu4B,OAAO,EAAO,EAAG,GACnEr8B,KAAKsrB,KAAO0Q,GAAEl4B,EAAI9D,KAAKsrB,KAAMnnB,GAC7BL,EAAGw4B,cAAcx4B,EAAGy4B,UACpBz4B,EAAG04B,YAAY14B,EAAG24B,WAAYz8B,KAAKs6B,SAASx5B,IAC5CgD,EAAG44B,UAAU18B,KAAK28B,eAAgB,GAClC74B,EAAGo4B,wBAAwBl8B,KAAK48B,gBAChC94B,EAAGs4B,oBAAoBp8B,KAAK48B,eAAgB,EAAG94B,EAAGu4B,OAAO,EAAO,EAAG,GACnEv4B,EAAG+4B,iBAAiB78B,KAAK88B,cAAc,EAAO98B,KAAKka,WACnDpW,EAAGi5B,UAAU/8B,KAAKi9B,gBAAiBh5B,EAAIkG,EAAIT,EAAI4K,GAC/CxQ,EAAG44B,UAAU18B,KAAKk9B,gBAAgB,GAGtCl9B,KAAKia,QACLja,KAAKsF,GAAGi2B,OAAOz3B,EAAG+5B,WAElB79B,KAAKsF,GAAG21B,QAAQn3B,EAAG+5B,WAEvB79B,KAAKsF,GAAGi2B,OAAOz3B,EAAG03B,OAClB,IAAIhyB,EACAP,EACApF,EACA3C,EACJ,GAAuC,MAAnClB,KAAKua,2BACL/Q,EAAK1F,EAAGg6B,IACR70B,EAAKnF,EAAGi6B,oBACRl6B,EAAKC,EAAGg6B,IACR58B,EAAK4C,EAAGi6B,yBAER,OAAQ/8B,GACR,KAAKiE,GAAEmzB,KACH5uB,EAAK1F,EAAGg6B,IACR70B,EAAKnF,EAAGi6B,oBACRl6B,EAAKC,EAAGg6B,IACR58B,EAAK4C,EAAGi6B,oBACR,MACJ,KAAK94B,GAAEszB,KACH/uB,EAAK1F,EAAGg6B,IACR70B,EAAKnF,EAAGg6B,IACRj6B,EAAKC,EAAGk6B,KACR98B,EAAK4C,EAAGg6B,IACR,MACJ,KAAK74B,GAAEuzB,KACHhvB,EAAK1F,EAAGm6B,UACRh1B,EAAKnF,EAAGi6B,oBACRl6B,EAAKC,EAAGk6B,KACR98B,EAAK4C,EAAGg6B,IAIhBh6B,EAAGo6B,sBAAsBp6B,EAAGq6B,SAAUr6B,EAAGq6B,UACzCr6B,EAAGs6B,kBAAkB50B,EAAIP,EAAIpF,EAAI3C,GAC7BlB,KAAKw6B,eACL12B,EAAGu6B,cAAcv6B,EAAG24B,WAAYz8B,KAAKw6B,cAAc8D,2BAA4Bt+B,KAAKy6B,eAExF,IAAIt5B,EAAKI,EAAG/I,OACZsL,EAAGuoB,aAAavoB,EAAGy6B,UAAWp9B,EAAI2C,EAAG06B,eAAgB,GACrD16B,EAAG04B,YAAY14B,EAAG24B,WAAY,QAGlC,SAAST,GAAE76B,EAAIO,EAAIuB,GAMf,OALU,MAANvB,IACAA,EAAKP,EAAGs9B,gBAEZt9B,EAAGu6B,WAAWv6B,EAAGw6B,aAAcj6B,GAC/BP,EAAGu9B,WAAWv9B,EAAGw6B,aAAc14B,EAAI9B,EAAGw9B,cAC/Bj9B,EAEX,SAASu6B,GAAE96B,EAAIO,EAAIuB,GAMf,OALU,MAANvB,IACAA,EAAKP,EAAGs9B,gBAEZt9B,EAAGu6B,WAAWv6B,EAAGy6B,qBAAsBl6B,GACvCP,EAAGu9B,WAAWv9B,EAAGy6B,qBAAsB34B,EAAI9B,EAAGw9B,cACvCj9B,EAEX43B,GAAEh3B,UAAUiB,KAAO,WACf,MAAM,IAAI+oB,MAAM,SAGpBgN,GAAEh3B,UAAUmB,KAAO,SAAS/B,GACxB,MAAM,IAAI4qB,MAAM,SAGpBgN,GAAEh3B,UAAUoB,KAAO,WACf,IAAK,IAAIhC,EAAK,EAAGA,EAAK1B,KAAKs6B,SAAS9hC,OAAQkJ,IAAM,CAEpC,GADD1B,KAAKs6B,SAAS54B,KAEnB1B,KAAKsF,GAAG5B,KAAK,EAAG1D,KAAKs6B,SAAU54B,GAC/B1B,KAAKs6B,SAAS54B,GAAM,QAKhC43B,GAAEh3B,UAAUkqB,WAAa,SAAS9qB,EAAIuB,GAClCjD,KAAKs6B,SAAS54B,GAAMuB,GAGxBq2B,GAAEh3B,UAAUw4B,WAAa,WACrB,IAAIp5B,EAAK1B,KAAKsF,GACdtF,KAAK4+B,eACL5+B,KAAKm8B,eAAiBz6B,EAAGm9B,kBAAkB7+B,KAAK+7B,cAAe,cAC/D/7B,KAAK48B,eAAiBl7B,EAAGm9B,kBAAkB7+B,KAAK+7B,cAAe,cAC/D/7B,KAAK88B,aAAep7B,EAAGo9B,mBAAmB9+B,KAAK+7B,cAAe,eAC9D/7B,KAAK28B,eAAiBj7B,EAAGo9B,mBAAmB9+B,KAAK+7B,cAAe,cAChE/7B,KAAKg9B,cAAgBt7B,EAAGo9B,mBAAmB9+B,KAAK+7B,cAAe,iBAC/D/7B,KAAKi9B,gBAAkBv7B,EAAGo9B,mBAAmB9+B,KAAK+7B,cAAe,eACjE/7B,KAAKk9B,eAAiBx7B,EAAGo9B,mBAAmB9+B,KAAK+7B,cAAe,cAChE/7B,KAAKo9B,mBAAqB17B,EAAGm9B,kBAAkB7+B,KAAKm9B,iBAAkB,cACtEn9B,KAAKs9B,mBAAqB57B,EAAGm9B,kBAAkB7+B,KAAKm9B,iBAAkB,cACtEn9B,KAAKw9B,iBAAmB97B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,eACrEn9B,KAAKu9B,qBAAuB77B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,gBACzEn9B,KAAKq9B,mBAAqB37B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,cACvEn9B,KAAK09B,mBAAqBh8B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,cACvEn9B,KAAK29B,sBAAwBj8B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,iBAC1En9B,KAAK49B,oBAAsBl8B,EAAGo9B,mBAAmB9+B,KAAKm9B,iBAAkB,gBAG5E7D,GAAEh3B,UAAUy8B,cAAgB,WACxB,IAAIr9B,EAAK1B,KAAKsF,GACVtF,KAAK+7B,gBACLr6B,EAAGs9B,cAAch/B,KAAK+7B,eACtB/7B,KAAK+7B,cAAgB,MAErB/7B,KAAKm9B,mBACLz7B,EAAGs9B,cAAch/B,KAAKm9B,kBACtBn9B,KAAKm9B,iBAAmB,OAIhC7D,GAAEh3B,UAAU28B,cAAgB,SAAS99B,EAAIN,GACrC,IAAIG,EAAKhB,KAAKsF,GAEV/D,EAAKV,EACLK,EAAKF,EAAGk+B,aAAa/9B,GACzB,GAAU,MAAND,EAEA,OADAkB,EAAEuK,KAAK,yBACA,KAEX3L,EAAGm+B,aAAaj+B,EAAIK,GACpBP,EAAGi+B,cAAc/9B,GAEjB,IADSF,EAAGo+B,mBAAmBl+B,EAAIF,EAAGq+B,gBAC7B,CACL,IAAIp8B,EAAKjC,EAAGs+B,iBAAiBp+B,GAG7B,OAFAkB,EAAEuK,KAAK,4BAA8B1J,GACrCjC,EAAGu+B,aAAar+B,GACT,KAEX,OAAOA,GAGXo4B,GAAEh3B,UAAUs8B,aAAe,WACvB,IAAI/9B,EAAKb,KAAKsF,GAEd,GADAtF,KAAK+7B,cAAgBl7B,EAAG2+B,iBACnBx/B,KAAK+7B,cACN,OAAO,EAGX,GADA/7B,KAAKm9B,iBAAmBt8B,EAAG2+B,iBACtBx/B,KAAKm9B,iBACN,OAAO,EAOX,GADAn9B,KAAK06B,WAAa16B,KAAKi/B,cAAcp+B,EAAG4+B,cAJ/B,wRAKJz/B,KAAK06B,WAEN,OADAt4B,EAAEuK,KAAK,gCACA,EAGX,GADA3M,KAAK46B,cAAgB56B,KAAKi/B,cAAcp+B,EAAG4+B,cAPlC,0TAQJz/B,KAAK46B,cAEN,OADAx4B,EAAEuK,KAAK,mCACA,EAGX,GADA3M,KAAK26B,WAAa36B,KAAKi/B,cAAcp+B,EAAG6+B,gBAb/B,msBAcJ1/B,KAAK26B,WAEN,OADAv4B,EAAEuK,KAAK,kCACA,EAGX,GADA3M,KAAK66B,cAAgB76B,KAAKi/B,cAAcp+B,EAAG6+B,gBAhBlC,6gBAiBJ1/B,KAAK66B,cAEN,OADAz4B,EAAEuK,KAAK,qCACA,EAEX9L,EAAG8+B,aAAa3/B,KAAK+7B,cAAe/7B,KAAK06B,YACzC75B,EAAG8+B,aAAa3/B,KAAK+7B,cAAe/7B,KAAK26B,YACzC95B,EAAG8+B,aAAa3/B,KAAKm9B,iBAAkBn9B,KAAK46B,eAC5C/5B,EAAG8+B,aAAa3/B,KAAKm9B,iBAAkBn9B,KAAK66B,eAC5Ch6B,EAAG++B,YAAY5/B,KAAK+7B,eACpBl7B,EAAG++B,YAAY5/B,KAAKm9B,kBAEpB,IADSt8B,EAAGg/B,oBAAoB7/B,KAAK+7B,cAAel7B,EAAGi/B,aAC9C,CACL,IAAI78B,EAAKpC,EAAGk/B,kBAAkB//B,KAAK+7B,eA0BnC,OAzBA35B,EAAEuK,KAAK,yBAA2B1J,GAC9BjD,KAAK06B,aACL75B,EAAG0+B,aAAav/B,KAAK06B,YACrB16B,KAAK06B,WAAa,GAElB16B,KAAK26B,aACL95B,EAAG0+B,aAAav/B,KAAK26B,YACrB36B,KAAK26B,WAAa,GAElB36B,KAAK+7B,gBACLl7B,EAAGm+B,cAAch/B,KAAK+7B,eACtB/7B,KAAK+7B,cAAgB,GAErB/7B,KAAK46B,gBACL/5B,EAAG0+B,aAAav/B,KAAK46B,eACrB56B,KAAK46B,cAAgB,GAErB56B,KAAK66B,gBACLh6B,EAAG0+B,aAAav/B,KAAK66B,eACrB76B,KAAK66B,cAAgB,GAErB76B,KAAKm9B,mBACLt8B,EAAGm+B,cAAch/B,KAAKm9B,kBACtBn9B,KAAKm9B,iBAAmB,IAErB,EAEX,OAAO,GAGX7D,GAAEh3B,UAAUoF,kBAAoB,WAC5B,IAAInG,EAAKvB,KAAKsF,GACVpE,EAAK4E,GAAEsC,uBACPjH,EAAKI,EAAGmG,oBACZnG,EAAG+G,gBAAgB/G,EAAGgH,YAAapH,GACnC,IAAIO,EAAKH,EAAGy+B,qBACZz+B,EAAG0+B,iBAAiB1+B,EAAG2+B,aAAcx+B,GACrCH,EAAG4+B,oBAAoB5+B,EAAG2+B,aAAc3+B,EAAG6+B,MAAOl/B,EAAIA,GACtDK,EAAG8+B,wBAAwB9+B,EAAGgH,YAAahH,EAAG++B,kBAAmB/+B,EAAG2+B,aAAcx+B,GAClF,IAAIuB,EAAK1B,EAAGg/B,gBAYZ,OAXAh/B,EAAGi7B,YAAYj7B,EAAGk7B,WAAYx5B,GAC9B1B,EAAGi/B,WAAWj/B,EAAGk7B,WAAY,EAAGl7B,EAAGk/B,KAAMv/B,EAAIA,EAAI,EAAGK,EAAGk/B,KAAMl/B,EAAGm/B,cAAe,MAC/En/B,EAAG88B,cAAc98B,EAAGk7B,WAAYl7B,EAAGo/B,mBAAoBp/B,EAAGq/B,QAC1Dr/B,EAAG88B,cAAc98B,EAAGk7B,WAAYl7B,EAAGs/B,mBAAoBt/B,EAAGq/B,QAC1Dr/B,EAAG88B,cAAc98B,EAAGk7B,WAAYl7B,EAAGu/B,eAAgBv/B,EAAGw/B,eACtDx/B,EAAG88B,cAAc98B,EAAGk7B,WAAYl7B,EAAGy/B,eAAgBz/B,EAAGw/B,eACtDx/B,EAAG0/B,qBAAqB1/B,EAAGgH,YAAahH,EAAG++B,kBAAmB/+B,EAAGk7B,WAAYx5B,EAAI,GACjF1B,EAAGi7B,YAAYj7B,EAAGk7B,WAAY,MAC9Bl7B,EAAG0+B,iBAAiB1+B,EAAG2+B,aAAc,MACrC3+B,EAAG+G,gBAAgB/G,EAAGgH,YAAa,MACnCzC,GAAEswB,SAASp2B,KAAK2H,MAAQ1E,GAEpBkE,YAAahG,EACb+/B,aAAcx/B,EACdy/B,QAASr7B,GAAEswB,SAASp2B,KAAK2H,QAIjC,SAAS5G,GAAEW,GACH5B,IAGJE,KAAKyjB,IAAM,IAAIyF,UAAU,GACzBlpB,KAAKohC,KAAO,IAAIzgC,SAASX,KAAKyjB,IAAI4d,QAClCrhC,KAAKshC,KAAO,IAAIpY,UAAU,KAC1BlpB,KAAKuhC,KAAO,EACZvhC,KAAKwhC,KAAO,EACZxhC,KAAKyhC,KAAO,EACZzhC,KAAK0hC,KAAO,IAAIt8B,MAChBpF,KAAK2hC,IAAMjgC,EACX1B,KAAK4hC,IAAM,GAEf7gC,GAAEuB,UAAUu/B,KAAO,WACf,IACI1gC,EAAI8B,EAAIvB,EADRR,EAAKlB,KAAKiB,OAEd,GAAkB,IAAR,IAALC,GACD,OAAY,IAALA,EAEP,GAAkC,IAAR,KAApBC,EAAKnB,KAAKiB,SACZ,OAAc,IAALC,IAAa,EAAW,IAALC,EAE5B,GAAkC,IAAR,KAApB8B,EAAKjD,KAAKiB,SACZ,OAAc,IAALC,IAAa,IAAa,IAALC,IAAa,EAAW,IAAL8B,EAEjD,GAAkC,IAAR,KAApBvB,EAAK1B,KAAKiB,SACZ,OAAc,IAALC,IAAa,IAAa,IAALC,IAAa,IAAa,IAAL8B,IAAa,EAAW,IAALvB,EAEtE,MAAM,IAAId,GAAE,gBAOhCG,GAAEuB,UAAU+P,iBAAmB,WAC3B,OAAOrS,KAAKyhC,MAGhB1gC,GAAEuB,UAAUlB,KAAO,SAASM,GACxB1B,KAAKyhC,KAAO//B,GAGhBX,GAAEuB,UAAUw/B,KAAO,WACf,OAAO9hC,KAAK6hC,QAGhB9gC,GAAEuB,UAAUy/B,KAAO,WAGf,OAFA/hC,KAAKgiC,OACLhiC,KAAK4hC,KAAO,EACL5hC,KAAK2hC,IAAIM,WAAWjiC,KAAK4hC,IAAM,IAG1C7gC,GAAEuB,UAAU8P,KAAO,WAGf,OAFApS,KAAKgiC,OACLhiC,KAAK4hC,KAAO,EACL5hC,KAAK2hC,IAAIO,WAAWliC,KAAK4hC,IAAM,IAG1C7gC,GAAEuB,UAAU2L,KAAO,WAGf,OAFAjO,KAAKgiC,OACLhiC,KAAK4hC,KAAO,EACL5hC,KAAK2hC,IAAIQ,SAASniC,KAAK4hC,IAAM,IAGxC7gC,GAAEuB,UAAUrB,KAAO,WAEf,OADAjB,KAAKgiC,OACEhiC,KAAK2hC,IAAIS,QAAQpiC,KAAK4hC,QAGjC7gC,GAAEuB,UAAUX,KAAO,WAGf,OAFA3B,KAAKgiC,OACLhiC,KAAK4hC,KAAO,EACL5hC,KAAK2hC,IAAIU,SAASriC,KAAK4hC,IAAM,IAGxC7gC,GAAEuB,UAAUggC,KAAO,WAGf,MAFAtiC,KAAKgiC,OACLhiC,KAAK4hC,KAAO,EACN,IAAIhhC,GAAE,sBAGhBG,GAAEuB,UAAUiQ,KAAO,WAEf,OADAvS,KAAKgiC,OACkC,GAAhChiC,KAAK2hC,IAAIS,QAAQpiC,KAAK4hC,QAGjC,IAAIW,IAAI,EACRxhC,GAAEuB,UAAUkgC,KAAO,WACfxiC,KAAKgiC,OACL,IAAItgC,EAAK1B,KAAK8hC,OACV5gC,EAAK,KACT,GAAIqhC,GACA,IACI,IAAIvhC,EAAK,IAAIN,YAAiB,EAALgB,GACzBR,EAAK,IAAI4d,YAAY9d,GACrB,IAAK,IAAIG,EAAK,EAAGA,EAAKO,IAAMP,EACxBD,EAAGC,GAAMnB,KAAK2hC,IAAI/iB,SAAS5e,KAAK4hC,OAEpC,OAAOljB,OAAOC,aAAatU,MAAM,KAAMnJ,GACzC,MAAOK,GACLghC,IAAI,EAGZ,IACI,IAAIt/B,EAAK,IAAImC,MACb,GAAU,MAANlE,EACA,IAASC,EAAK,EAAGA,EAAKO,IAAMP,EACxB8B,EAAG9B,GAAMnB,KAAK2hC,IAAI/iB,SAAS5e,KAAK4hC,YAGpC,IAASzgC,EAAK,EAAGA,EAAKO,IAAMP,EACxB8B,EAAG9B,GAAMD,EAAGC,GAGpB,OAAOud,OAAOC,aAAatU,MAAM,KAAMpH,GACzC,MAAO1B,GACLjH,QAAQC,IAAI,8BAAgCgH,KAIpDR,GAAEuB,UAAUkW,KAAO,WACfxY,KAAKgiC,OAGL,IAAK,IAFD/+B,EAAKjD,KAAK8hC,OACVpgC,EAAK,IAAIypB,WAAWloB,GACf9B,EAAK,EAAGA,EAAK8B,EAAI9B,IACtBO,EAAGP,GAAMnB,KAAK2hC,IAAIQ,SAASniC,KAAK4hC,KAChC5hC,KAAK4hC,KAAO,EAEhB,OAAOlgC,GAGXX,GAAEuB,UAAUmW,KAAO,WACfzY,KAAKgiC,OAGL,IAAK,IAFD/+B,EAAKjD,KAAK8hC,OACVpgC,EAAK,IAAI6I,aAAatH,GACjB9B,EAAK,EAAGA,EAAK8B,EAAI9B,IACtBO,EAAGP,GAAMnB,KAAK2hC,IAAIO,WAAWliC,KAAK4hC,KAClC5hC,KAAK4hC,KAAO,EAEhB,OAAOlgC,GAGXX,GAAEuB,UAAUmgC,KAAO,WACfziC,KAAKgiC,OAGL,IAAK,IAFD/+B,EAAKjD,KAAK8hC,OACVpgC,EAAK,IAAIghC,aAAaz/B,GACjB9B,EAAK,EAAGA,EAAK8B,EAAI9B,IACtBO,EAAGP,GAAMnB,KAAK2hC,IAAIM,WAAWjiC,KAAK4hC,KAClC5hC,KAAK4hC,KAAO,EAEhB,OAAOlgC,GAGXX,GAAEuB,UAAUd,KAAO,WACf,OAAOxB,KAAK2iC,MAAM,IAGtB5hC,GAAEuB,UAAUqgC,KAAO,SAASxhC,GAKxB,GAJAnB,KAAKgiC,OACD7gC,EAAK,IACLA,EAAKnB,KAAK8hC,QAEV3gC,GAAME,EAAGqjB,KAAM,CACf,IAAIhjB,EAAK1B,KAAKiO,OACd,GAAI,GAAKvM,GAAMA,EAAK1B,KAAK0hC,KAAKlpC,OAC1B,OAAOwH,KAAK0hC,KAAKhgC,GAEjB,MAAM,IAAId,GAAE,mBAGhB,IAAIqC,EAAKjD,KAAK4iC,KAAKzhC,GAEnB,OADAnB,KAAK0hC,KAAK3iC,KAAKkE,GACRA,GAIflC,GAAEuB,UAAUsgC,KAAO,SAAS/hC,GACxB,GAAU,GAANA,EACA,OAAO,KAEX,GAAU,IAANA,EAAU,CACV,IAAIK,EAAKlB,KAAKwiC,OAEd,OADIv/B,EAAKsB,EAAExB,MAAM7B,GAGjB,GAAU,IAANL,EAAU,CACNK,EAAKlB,KAAKwiC,OAEd,OADIv/B,EAAKsW,GAAExW,MAAM7B,GAGjB,GAAU,KAANL,EAAW,CACPK,EAAKlB,KAAKwiC,OAEd,OADIv/B,EAAKjE,EAAE+D,MAAM7B,GAGjB,GAAU,IAANL,EAAU,CACNK,EAAKlB,KAAKwiC,OAEd,OADIv/B,EAAKH,EAAEC,MAAM7B,GAMjC,GAAIL,GAAM,GAAI,CACV,IAAIU,EAAKF,EAAGujB,KAAK/jB,GACjB,OAAU,MAANU,GACAA,EAAGyM,KAAKhO,MACDuB,GAEA,KAGf,OAAQV,GACR,KAAK,EACD,OAAOb,KAAKwiC,OAChB,KAAK,GAED,OAAO,IArhNf,WACQ1iC,IAGJE,KAAK6iC,MAAQ,MAihNF,CADE7iC,KAAKiO,QACE,GACpB,KAAK,GACD,OAAO,IAAIpI,EAAG7F,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,QAC3D,KAAK,GACD,OAAO,IAAIl8B,EAAG7F,KAAKoS,OAAOpS,KAAKoS,OAAOpS,KAAKoS,OAAOpS,KAAKoS,QAC3D,KAAK,GACD,OAAO,IAAItX,EAAEkF,KAAK+hC,OAAO/hC,KAAK+hC,QAClC,KAAK,GACD,OAAO,IAAIjnC,EAAEkF,KAAKoS,OAAOpS,KAAKoS,QAClC,KAAK,GAGD,IAAK,IAFD1Q,EAAK1B,KAAK8hC,OACV7+B,EAAK,IAAImC,MAAM1D,GACVP,EAAK,EAAGA,EAAKO,EAAIP,IACtB8B,EAAG9B,GAAMnB,KAAKwB,OAElB,OAAOyB,EACX,KAAK,GAED,OADIA,EAAK,IAAIqd,EAAGtgB,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,OAAO/hC,KAAK+hC,QAErF,KAAK,GACD,OAAO,IAAI/0B,EAAEhN,KAAKiO,OAAOjO,KAAKiO,OAAOjO,KAAKiO,OAAOjO,KAAKiO,QAC1D,KAAK,GACD,OAAO,IAAIkrB,GAAEn5B,KAAKiO,OAAOjO,KAAKiO,QAClC,KAAK,GACD,MAAM,IAAIqe,MAAM,aACpB,KAAK,GACL,KAAK,GACD,OAAOtsB,KAAKwY,OAChB,KAAK,GACD,OAAOxY,KAAKyiC,OAChB,KAAK,GACD,OAAOziC,KAAKyY,OAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACD,MAAM,IAAI7X,GAAE,6CAA+CC,GAC/D,QACI,MAAM,IAAID,GAAE,6BAA+BC,KAInDE,GAAEuB,UAAUouB,KAAO,WASf,OARiB,GAAb1wB,KAAKuhC,KACLvhC,KAAKwhC,KAAOxhC,KAAKiB,OAEA,GAAbjB,KAAKuhC,OACLvhC,KAAKwhC,KAAOxhC,KAAKiB,OACjBjB,KAAKuhC,KAAO,GAG6B,IAAxCvhC,KAAKwhC,MAAS,EAAIxhC,KAAKuhC,OAAW,IAG/CxgC,GAAEuB,UAAU0/B,KAAO,WACE,GAAbhiC,KAAKuhC,OACLvhC,KAAKuhC,KAAO,IAgBpB,SAASzwB,MACTA,GAAGgyB,KAAO1qC,KAAKO,GAAK,IACpBmY,GAAGC,KAAQ3Y,KAAKO,GAAK,IACrBmY,GAAGiyB,KAAO,IAAM3qC,KAAKO,GACrBmY,GAAG6c,KAAQ,IAAMv1B,KAAKO,GACtBmY,GAAG2mB,KAAOr/B,KAAKO,GACfmY,GAAGkyB,MAAQ,EAAG,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,OAAS,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,OAAS,QAAU,QAAU,QAAU,QAAU,QAAU,KAAO,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,OAAS,QAAU,QAAU,OAAS,QAAU,QAAU,QAAU,OAAS,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,OAAS,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,OAAS,QAAU,OAAS,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,QAAU,GAC/uClyB,GAAG4c,KAAO,SAASxsB,EAAI+B,GACnB,IAAIvB,EAAKtJ,KAAKyX,MAAM3O,EAAG,GAAIA,EAAG,IAC1BC,EAAK/I,KAAKyX,MAAM5M,EAAG,GAAIA,EAAG,IAC9B,OAAO6N,GAAGmyB,KAAKvhC,EAAIP,IAGvB2P,GAAGmyB,KAAO,SAAShgC,EAAIvB,GAEnB,IADA,IAAIP,EAAK8B,EAAKvB,EACPP,GAAM/I,KAAKO,IACdwI,GAAM,EAAI/I,KAAKO,GAEnB,KAAOwI,EAAK/I,KAAKO,IACbwI,GAAM,EAAI/I,KAAKO,GAEnB,OAAOwI,GAGX2P,GAAGqP,IAAM,SAASze,GACd,OAAOtJ,KAAKyY,IAAInP,IAGpBoP,GAAGoP,KAAO,SAASxe,GACf,OAAOtJ,KAAKwY,IAAIlP,IAGpB,SAASw3B,GAAGx3B,GACJ5B,IAGJE,KAAKqxB,KAAO,KACZrxB,KAAKqnB,KAAO,KACZrnB,KAAK6Y,KAAO,KACZ7Y,KAAK+Y,KAAO,KACZ/Y,KAAK4Y,OAAQ,GACb5Y,KAAKioB,KAAO,KACZjoB,KAAKyL,MAAO,EACZzL,KAAKg5B,YAAc,EACnBh5B,KAAKyH,uBAAyB,KAC9BzH,KAAKqxB,KAAO3vB,GAEhBw3B,GAAG52B,UAAUslB,KAAO,WAChB,OAAO5nB,KAAK4Y,KAAK,IAGrBsgB,GAAG52B,UAAUuH,KAAO,WAChB,OAAO7J,KAAKyL,OAASzL,KAAK4Y,KAAK,IAGnCsgB,GAAG52B,UAAUqmB,KAAO,WAChB,OAAO3oB,KAAKqxB,MAGhB,SAAS5qB,MACTA,GAAEiW,KAAO,EACTjW,GAAEy8B,YAAc,KAChBz8B,GAAE08B,WAAaC,UAAUC,UACzB58B,GAAE68B,SAAW,WAIT,OAHK78B,GAAEy8B,aACHz8B,GAAE0I,QAEC1I,GAAEy8B,YAAYK,WAGzB98B,GAAEowB,MAAQ,WAIN,OAHKpwB,GAAEy8B,aACHz8B,GAAE0I,QAEC1I,GAAEy8B,YAAYK,WAAa98B,GAAEy8B,YAAYM,SAGpD/8B,GAAEswB,UAAY,WAIV,OAHKtwB,GAAEy8B,aACHz8B,GAAE0I,QAEC1I,GAAEy8B,YAAYO,YAGzBh9B,GAAEi9B,aAAe,WAIb,OAHKj9B,GAAEy8B,aACHz8B,GAAE0I,QAEC1I,GAAEy8B,YAAYS,SAGzBl9B,GAAEm9B,MAAQ,WAIN,OAHKn9B,GAAEy8B,aACHz8B,GAAE0I,QAEF1I,GAAEy8B,YAAYK,WAAa98B,GAAEy8B,YAAYM,QAClC,MAEP/8B,GAAEy8B,YAAYO,WACP,UAEA,WAIfh9B,GAAE0I,MAAQ,WACN,IAAIjO,EAAKuF,GAAE08B,WACX,SAASlgC,EAAGd,EAAI0B,GAGZ,IAAK,IAFDhD,EAAKsB,EAAG0hC,UAAUhgC,GAAI0U,MAAM,YAC5B/X,EAAK,EACAQ,EAAK,EAAGA,GAAM,IACf2R,MAAM9R,EAAGG,IADSA,IAAM,CAI5B,IAAIc,EAAKi3B,SAASl4B,EAAGG,IACrB,GAAIc,EAAK,GAAKA,EAAK,IAAK,CACpBM,EAAEoB,KAAK,SAAW1B,EAAK,qBACvBtB,EAAK,EACL,MAEJA,GAAMsB,EAAK1J,KAAKk1B,IAAI,IAAO,EAAItsB,GAEnC,OAAOR,EAEX,IAAIe,EAEAJ,EAAKsF,GAAEy8B,aACPG,UAAWniC,GAEf,IAAKK,EAAKL,EAAG4iC,QAAQ,gBAAkB,EACnC3iC,EAAG4iC,GAAK,SACR5iC,EAAGoiC,WAAY,EACfpiC,EAAGwiC,QAAU1gC,EAAG/B,EAAIK,EAAK,aAAa/I,aAEtC,IAAK+I,EAAKL,EAAG4iC,QAAQ,UAAY,EAAG,CAEhC,IADAviC,EAAKL,EAAG4iC,QAAQ,WACP,EAEL,YADA1hC,EAAEoB,KAAK,UAAYtC,EAAK,qBAG5BC,EAAG4iC,GAAK,OACR5iC,EAAGqiC,SAAU,EACbriC,EAAGwiC,QAAU1gC,EAAG/B,EAAIK,EAAK,UAAU/I,aAE9B+I,EAAKL,EAAG4iC,QAAQ,aAAe,GAChC3iC,EAAG4iC,GAAK,UACR5iC,EAAGsiC,YAAa,EAChBtiC,EAAGwiC,QAAU1gC,EAAG/B,EAAIK,EAAK,WAAW/I,UAEpC2I,EAAG4iC,GAAK,IACR5iC,EAAGwiC,SAAW,IAM9B79B,GAAE5D,OACEpC,GAAI,IAGDkkC,SAALr4B,IACKs4B,QAAL7hC,IACM8hC,YAANjS,KACMkS,KAAN3S,KACK9zB,OAALoI,KACKs+B,iBAALhL,KACKiL,cAAL7V,IACM8V,aAANtV,IACKuV,mBAALhL,KACKiL,YAALn2B,IACMo2B,QAAN/5B,IACKg6B,YAAL1lC,IACK2lC,WAALpgC,IACKqgC,WAALrrB,KACKsrB,QAAL/hC,2UCz7OF,IAAAxM,EAAAF,EAAA,IAqBA,SAAS0uC,IACL9kC,KAAK+kC,YAAc,KACnB/kC,KAAKglC,YAAc,KACnBhlC,KAAKilC,SAAW,KAChBjlC,KAAKklC,QAAU,KACfllC,KAAKmlC,KAAO,KACZnlC,KAAKolC,WAAY,EACjBplC,KAAKb,aAAc,EACnBa,KAAKZ,UAAW,EAChBY,KAAKqlC,MAAQ,EACbrlC,KAAKslC,SAAW,EAChBtlC,KAAKulC,SAAU,EACfvlC,KAAKwlC,aAAe,EACpBxlC,KAAKylC,OAAS,EACdzlC,KAAK0lC,OAAS,EACd1lC,KAAK2lC,OAAS,EACd3lC,KAAK4lC,MAAQ,EACb5lC,KAAK6lC,MAAQ,EACb7lC,KAAK8lC,cAAgB,KACrB9lC,KAAK+lC,kBAAoB,IAAIC,EAC7BhmC,KAAKimC,kBAAoB,IAAID,EAC7BhmC,KAAK0hB,WACL1hB,KAAKkmC,eACLlmC,KAAKmmC,aAAc,EAGvB,IAAIC,EAAa,EAKjBtB,EAAaxiC,UAAU+jC,eAAiB,WACpC,OAAOrmC,KAAKglC,aAMhBF,EAAaxiC,UAAUgkC,SAAW,SAAUvhC,GACpCA,EAAI,OAAOA,EAAI,GACfA,EAAI,OAAOA,EAAI,GACnB/E,KAAKqlC,MAAQtgC,GAMjB+/B,EAAaxiC,UAAUikC,SAAW,WAC9B,OAAOvmC,KAAKqlC,OAMhBP,EAAaxiC,UAAUkkC,cAAgB,WACnC,OAAOxmC,KAAKb,aAMhB2lC,EAAaxiC,UAAUmkC,eAAiB,SAAUjY,GAC9CxuB,KAAKb,YAAcqvB,GAMvBsW,EAAaxiC,UAAUokC,WAAa,WAChC,OAAO1mC,KAAKZ,UAMhB0lC,EAAaxiC,UAAUqkC,YAAc,SAAUnY,GAC3CxuB,KAAKZ,SAAWovB,GAMpBsW,EAAaxiC,UAAUskC,eAAiB,WACpC,OAAO5mC,KAAK+kC,aAMhBD,EAAaxiC,UAAUukC,WAAa,SAAUrY,GAC1CxuB,KAAKulC,QAAU/W,GAMnBsW,EAAaxiC,UAAUwkC,gBAAkB,SAAUtY,GAC/CxuB,KAAKwlC,aAAehX,GAMxBsW,EAAaxiC,UAAUykC,SAAW,SAAUpvC,EAAYG,EAAYgL,GAChE9C,KAAKylC,OAAS9tC,EACdqI,KAAK0lC,OAAS5tC,EACdkI,KAAK2lC,OAAS7iC,GAMlBgiC,EAAaxiC,UAAU9D,QAAU,SAAU7G,EAAYG,GACnDkI,KAAK4lC,MAAQjuC,EACbqI,KAAK6lC,MAAQ/tC,GAMjBgtC,EAAaxiC,UAAU0kC,qBAAuB,WAC1C,OAAOhnC,KAAK+lC,mBAMhBjB,EAAaxiC,UAAU2kC,qBAAuB,WAC1C,OAAOjnC,KAAKimC,mBAMhBnB,EAAaxiC,UAAU4kC,cAAgB,SAAUC,EAAgBtnC,GAM7D,IAAIunC,EAAKC,EAAgBC,qBACrBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,gBAAkB4sC,GAE7C,IAAII,EAAUvnC,KACdonC,EAAGI,gBAAgBL,EAAM,SAAUM,GAC/BF,EAAQxC,YAAc0C,EACtBF,EAAQxC,YAAYzhC,YAIR,GAFDhN,EAAAoH,OAAOy5B,YAOlBoQ,EAAQvC,YAAc,IAAI0C,EACtBH,EAAQxC,YAAYriC,iBACpB6kC,EAAQxC,YAAYpiC,mBACxB4kC,EAAQvC,YAAY2C,SAAS,GAC7BJ,EAAQvC,YAAY4C,kBAAkB,EAAG,GAEzC/nC,EAAS0nC,EAAQxC,cAVbzqC,QAAQutC,MAAM,yCAkB1B/C,EAAaxiC,UAAUwlC,YAAc,SAAUC,EAAWZ,EAAgBtnC,GACtEumC,IAEA,IAAIgB,EAAKC,EAAgBC,qBAErBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,kBAAoB4sC,GAE/C,IAAII,EAAUvnC,KACdonC,EAAGU,YAAY9nC,KAAK+kC,YAAagD,EAAIZ,EAAM,WAErB,KADlBf,IACqBmB,EAAQpB,aAAc,GACpB,mBAAZtmC,GAAwBA,OAQ3CilC,EAAaxiC,UAAUggB,WAAa,SAAU0lB,EAAgBb,EAAiBtnC,GAC3E,IAAIunC,EAAKC,EAAgBC,qBAErBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,iBAAmB4sC,GAE9C,IAAIc,EAAS,KAETV,EAAUvnC,KACdonC,EAAGc,UAAUf,EAAM,SAAUgB,GACzBF,EAAS3xC,EAAAguC,aAAahiB,WAAW6lB,GACrB,MAARH,IACAT,EAAQ7lB,QAAQsmB,GAAQC,GAE5BpoC,EAASooC,MAQjBnD,EAAaxiC,UAAU8lC,eAAiB,SAAUJ,EAAgBb,EAAiBtnC,GAC/E,IAAIunC,EAAKC,EAAgBC,qBAErBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,qBAAuB4sC,GAElD,IAAII,EAAUvnC,KACdonC,EAAGc,UAAUf,EAAM,SAAUgB,GACb,MAARH,IACAT,EAAQrB,YAAY8B,GAAQK,EAAoBC,SAASH,IAEtC,mBAAZtoC,GAAwBA,OAO3CilC,EAAaxiC,UAAUimC,SAAW,SAAUpB,EAAiBtnC,GACzD,IAAIunC,EAAKC,EAAgBC,qBACrBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,eAAiB4sC,GAC5C,IAAII,EAAUvnC,KACd,IACIonC,EAAGc,UAAUf,EAAM,SAAUgB,GACzBZ,EAAQpC,KAAOqD,EAAQC,KAAKN,GACL,mBAAZtoC,GAAwBA,MAG3C,MAAO/E,GACHR,QAAQouC,KAAK5tC,KAOrBgqC,EAAaxiC,UAAUqmC,YAAc,SAAUxB,GAC3C,IAAIC,EAAKC,EAAgBC,qBACrBtnC,KAAKolC,WAAWgC,EAAG7sC,IAAI,kBAAoB4sC,GAC/C,IAAII,EAAUvnC,KACd,IACIonC,EAAGc,UAAUf,EAAM,SAAUgB,GACzBZ,EAAQrC,QAAU0D,EAAWH,KAAKN,KAG1C,MAAOrtC,GACHR,QAAQouC,KAAK5tC,KAOrBgqC,EAAaxiC,UAAUumC,cAAgB,SAAUC,EAAQC,EAAOC,GAE/D,GAAwB,OAArBhpC,KAAK+kC,YAAsB,OAAO,EAElC,IAAIkE,EAAYjpC,KAAK+kC,YAAYzgC,iBAAiBwkC,GAElD,GAAIG,EAAY,EAAG,OAAO,EAQ1B,IAAK,IANDC,EAASlpC,KAAK+kC,YAAYtgC,qBAAqBwkC,GAC/CrxC,EAAOoI,KAAK+kC,YAAYriC,iBACxBnG,EAAQ,EACRxE,EAAMiI,KAAK+kC,YAAYpiC,kBACvBlG,EAAS,EAEJqD,EAAI,EAAGA,EAAIopC,EAAO1wC,OAAQsH,GAAQ,EAAG,CAC1C,IAAInI,EAAIuxC,EAAOppC,GACXhI,EAAIoxC,EAAOppC,EAAI,GAEfnI,EAAIC,IAAMA,EAAOD,GACjBA,EAAI4E,IAAOA,EAAQ5E,GACnBG,EAAIC,IAAKA,EAAMD,GACfA,EAAI2E,IAAQA,EAAS3E,GAE7B,IAAIqxC,EAAKnpC,KAAKglC,YAAYvpC,iBAAiBstC,GACvCK,EAAKppC,KAAKglC,YAAYnpC,iBAAiBmtC,GAE3C,OAAQpxC,GAAQuxC,GAAMA,GAAM5sC,GAASxE,GAAOqxC,GAAMA,GAAM3sC,GAQ5D,SAAS4rC,IACL/xC,EAAAmuC,QAAQniC,UAAUgL,YAAYC,KAAKvN,MACnCA,KAAKqpC,UAAY,IAAIjkC,MAGzBijC,EAAoB/lC,UAAY,IAAAhM,EAAAmuC,QAGhC4D,EAAoBiB,mBAAqB,UACzCjB,EAAoBkB,SAAW,EAC/BlB,EAAoBmB,SAAW,EAC/BnB,EAAoBoB,UAAY,EAKhCpB,EAAoBC,SAAW,SAAUH,GACrC,IAAIuB,EAAM,IAAIrB,EAGVsB,EADKtC,EAAgBC,qBACXsC,mBAAmBzB,GAKjC,GAHAuB,EAAI1+B,UAAU+tB,SAAS4Q,EAAKE,SAAW,EAAI9Q,SAAS4Q,EAAKE,SAAW,KACpEH,EAAIz+B,WAAW8tB,SAAS4Q,EAAKG,UAAY,EAAI/Q,SAAS4Q,EAAKG,UAAY,KAEpD,MAAfH,EAAKI,OACL,OAAOL,EAGX,IAAIK,EAASJ,EAAKI,OACdC,EAAWD,EAAOvxC,OACtBkxC,EAAIL,aACJ,IAAK,IAAIrqC,EAAI,EAAGA,EAAIgrC,EAAUhrC,IAAK,CAC/B,IAAIirC,EAAQF,EAAO/qC,GACfkrC,EAAUD,EAAM3xB,GAAGwP,WACnBqiB,EAAQC,WAAWH,EAAMI,KACzBC,EAAcjC,EAAoBmB,SAClCe,EAAqB,MAAdN,EAAMM,KAAeN,EAAMM,KAAKziB,WAAa,MAaxD,IAXIwiB,EADS,QAATC,EACclC,EAAoBmB,SAEpB,SAATe,EACSlC,EAAoBoB,UAEpB,QAATc,EACSlC,EAAoBkB,SAGpBlB,EAAoBmB,WAEnBnB,EAAoBmB,SAAU,CAE7CW,GADIK,EAA4B,MAAbP,EAAMQ,IAAc,EAAIL,WAAWH,EAAMQ,UAG3D,GAAIH,GAAejC,EAAoBoB,UAAW,CACnD,IAAIe,EACgB,IADhBA,EAA4B,MAAbP,EAAMQ,IAAc,EAAIL,WAAWH,EAAMQ,QACrCD,EAAe,GACtCL,GAAgBK,EAGpB,IAAIE,EAAO,IAAIC,EACfD,EAAKpyB,GAAK4xB,EACVQ,EAAK3vC,KAAOuvC,EACZI,EAAKP,MAAQA,EAEbT,EAAIL,UAAUtqC,KAAK2rC,GAGvB,OAAOhB,GAOXrB,EAAoB/lC,UAAU2J,eAAiB,SAAU5O,EAAwButC,EAAkBC,EAAkBC,GACjH,IAAK,IAAI9rC,EAAIgB,KAAKqpC,UAAU7wC,OAAS,EAAGwG,GAAK,IAAKA,EAAG,CACjD,IAAIirC,EAAQjqC,KAAKqpC,UAAUrqC,GAEvBirC,EAAMlvC,MAAQstC,EAAoBmB,SAClCnsC,EAAM8F,gBAAgB8mC,EAAM3xB,GAAI2xB,EAAME,MAAOU,GAExCZ,EAAMlvC,MAAQstC,EAAoBoB,UACvCpsC,EAAM+F,eAAe6mC,EAAM3xB,GAAI2xB,EAAME,MAAOU,GAEvCZ,EAAMlvC,MAAQstC,EAAoBkB,UACvClsC,EAAM2F,cAAcinC,EAAM3xB,GAAI2xB,EAAME,MAAOU,KAUvD,SAASF,IACL3qC,KAAKsY,GAAK,GACVtY,KAAKjF,MAAQ,EACbiF,KAAKmqC,MAAQ,KAQjB,SAASY,IACL/qC,KAAKgrC,cAAgB,KACrBhrC,KAAKirC,eAAiB,KACtBjrC,KAAKkrC,kBAAoB,KACzBlrC,KAAKmrC,SAAWC,EAAU5gB,YAC1BxqB,KAAKkrC,kBAAoB,IACzBlrC,KAAKqrC,kBAAoB,IACzBrrC,KAAKsrC,iBAAmB,GACxBtrC,KAAKurC,kBAAoB,IACzBvrC,KAAKwrC,aAAc,EACnBxrC,KAAKyrC,QAAU,mBACfzrC,KAAK0rC,QAAU,mBAMnBX,EAAYzoC,UAAUqpC,cAAgB,WAGlC,OAFoBr1C,EAAA0tC,SAASp4B,kBACVxT,KAAKwzC,UACQ,EAAI5rC,KAAKkrC,kBAAoB,IAMjEH,EAAYzoC,UAAUupC,YAAc,SAAUX,GAC1ClrC,KAAKkrC,kBAAoBA,GAM7BH,EAAYzoC,UAAUwpC,aAAe,SAAUT,EAA0BC,EAAyBC,GAC9FvrC,KAAKqrC,kBAAoBA,EACzBrrC,KAAKsrC,iBAAmBA,EACxBtrC,KAAKurC,kBAAoBA,GAM7BR,EAAYzoC,UAAUkJ,YAAc,SAAUnO,GAC1C,IACI0uC,EADAC,EAAiB11C,EAAA0tC,SAASp4B,kBAE1B2W,EAAgB,EACpB,OAAQviB,KAAKmrC,UACT,KAAKC,EAAUtgB,eACXvI,GAAKypB,EAAOhsC,KAAKirC,gBAAkBjrC,KAAKqrC,oBAC/B,IACL9oB,EAAI,EACJviB,KAAKmrC,SAAWC,EAAUrgB,aAC1B/qB,KAAKirC,eAAiBe,GAE1BD,EAAgB,EAAIxpB,EACpB,MACJ,KAAK6oB,EAAUrgB,cACXxI,GAAKypB,EAAOhsC,KAAKirC,gBAAkBjrC,KAAKsrC,mBAC/B,IACLtrC,KAAKmrC,SAAWC,EAAUpgB,cAC1BhrB,KAAKirC,eAAiBe,GAE1BD,EAAgB,EAChB,MACJ,KAAKX,EAAUpgB,eACXzI,GAAKypB,EAAOhsC,KAAKirC,gBAAkBjrC,KAAKurC,oBAC/B,IACLhpB,EAAI,EACJviB,KAAKmrC,SAAWC,EAAUngB,eAC1BjrB,KAAKgrC,cAAgBhrC,KAAK2rC,iBAE9BI,EAAgBxpB,EAChB,MACJ,KAAK6oB,EAAUngB,eACPjrB,KAAKgrC,cAAgBgB,IACrBhsC,KAAKmrC,SAAWC,EAAUtgB,cAC1B9qB,KAAKirC,eAAiBe,GAE1BD,EAAgB,EAChB,MACJ,KAAKX,EAAU5gB,YACf,QACIxqB,KAAKmrC,SAAWC,EAAUngB,eAC1BjrB,KAAKgrC,cAAgBhrC,KAAK2rC,gBAC1BI,EAAgB,EAGnB/rC,KAAKwrC,cAAaO,GAAiBA,GACxC1uC,EAAM2F,cAAchD,KAAKyrC,QAASM,GAClC1uC,EAAM2F,cAAchD,KAAK0rC,QAASK,IAItC,IAAIX,EAAY,aAEhBA,EAAU5gB,YAAc,cACxB4gB,EAAUngB,eAAiB,iBAC3BmgB,EAAUtgB,cAAgB,gBAC1BsgB,EAAUrgB,aAAe,eACzBqgB,EAAUpgB,cAAgB,gBAO1B,SAASztB,IACLyC,KAAKgyB,GAAK,IAAIznB,aAAa,IAC3BvK,KAAK6I,WAOTtL,EAAY0uC,IAAM,SAAUlnC,EAAcE,EAAcinC,GACpD,IAEIltC,EAAGc,EAAGq5B,EAFNpd,GAAK,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAGtD,IAAK/c,EAAI,EAAGA,EAFJ,EAEWA,IACf,IAAKc,EAAI,EAAGA,EAHR,EAGeA,IACf,IAAKq5B,EAAI,EAAGA,EAJZ,EAImBA,IACfpd,EAAE/c,EAAQ,EAAJc,IAAUiF,EAAE/F,EAAQ,EAAJm6B,GAASl0B,EAAEk0B,EAAQ,EAAJr5B,GAIjD,IAAKd,EAAI,EAAGA,EAAI,GAAIA,IAChBktC,EAAIltC,GAAK+c,EAAE/c,IAOnBzB,EAAY+E,UAAUuG,SAAW,WAC7B,IAAK,IAAI7J,EAAY,EAAGA,EAAI,GAAIA,IAC5BgB,KAAKgyB,GAAGhzB,GAAOA,EAAI,GAAM,EAAK,EAAI,GAM1CzB,EAAY+E,UAAUxD,SAAW,WAC7B,OAAOkB,KAAKgyB,IAMhBz0B,EAAY+E,UAAUud,cAAgB,WAClC,OAAO,IAAItV,aAAavK,KAAKgyB,KAMjCz0B,EAAY+E,UAAUyG,UAAY,SAAUipB,GACxC,GAAe,MAAXhyB,KAAKgyB,IAAchyB,KAAKgyB,GAAGx5B,QAAUwH,KAAKgyB,GAAGx5B,OACjD,IAAK,IAAIwG,EAAY,EAAGA,EAAI,GAAIA,IAAKgB,KAAKgyB,GAAGhzB,GAAKgzB,EAAGhzB,IAMzDzB,EAAY+E,UAAU6pC,UAAY,WAC9B,OAAOnsC,KAAKgyB,GAAG,IAMnBz0B,EAAY+E,UAAU8pC,UAAY,WAC9B,OAAOpsC,KAAKgyB,GAAG,IAMnBz0B,EAAY+E,UAAU9G,WAAa,SAAU6wC,GACzC,OAAOrsC,KAAKgyB,GAAG,GAAKqa,EAAMrsC,KAAKgyB,GAAG,KAMtCz0B,EAAY+E,UAAU1G,WAAa,SAAUywC,GACzC,OAAOrsC,KAAKgyB,GAAG,GAAKqa,EAAMrsC,KAAKgyB,GAAG,KAMtCz0B,EAAY+E,UAAU7G,iBAAmB,SAAU4wC,GAC/C,OAAQA,EAAMrsC,KAAKgyB,GAAG,KAAOhyB,KAAKgyB,GAAG,IAMzCz0B,EAAY+E,UAAUzG,iBAAmB,SAAUwwC,GAC/C,OAAQA,EAAMrsC,KAAKgyB,GAAG,KAAOhyB,KAAKgyB,GAAG,IAMzCz0B,EAAY+E,UAAU7E,cAAgB,SAAU6uC,EAAiBC,GAC7D,IAAIC,GAAO,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAGF,EAAQC,EAAQ,EAAG,GAClEhvC,EAAY0uC,IAAIO,EAAKxsC,KAAKgyB,GAAIhyB,KAAKgyB,KAMvCz0B,EAAY+E,UAAUwG,UAAY,SAAUnR,EAAYG,GACpDkI,KAAKgyB,GAAG,IAAMr6B,EACdqI,KAAKgyB,GAAG,IAAMl6B,GAMlByF,EAAY+E,UAAUmqC,WAAa,SAAU90C,GACzCqI,KAAKgyB,GAAG,IAAMr6B,GAMlB4F,EAAY+E,UAAUoqC,WAAa,SAAU50C,GACzCkI,KAAKgyB,GAAG,IAAMl6B,GAMlByF,EAAY+E,UAAU9E,UAAY,SAAUmvC,EAAiBC,GACzD,IAAIJ,GAAOG,EAAQ,EAAG,EAAG,EAAG,EAAGC,EAAQ,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAClErvC,EAAY0uC,IAAIO,EAAKxsC,KAAKgyB,GAAIhyB,KAAKgyB,KAMvCz0B,EAAY+E,UAAUrJ,MAAQ,SAAU0zC,EAAiBC,GACrD5sC,KAAKgyB,GAAG,GAAK2a,EACb3sC,KAAKgyB,GAAG,GAAK4a,GAQjB,SAASlF,EAAellC,EAAYuN,GAChCxS,EAAY+E,UAAUgL,YAAYC,KAAKvN,MACvCA,KAAKnI,MAAQ2K,EACbxC,KAAKhI,OAAS+X,EAIlB23B,EAAeplC,UAAY,IAAI/E,EAK/BmqC,EAAeplC,UAAUuqC,YAAc,SAAUl1C,EAAYG,GACzDkI,KAAK8I,UAAUnR,EAAGG,IAMtB4vC,EAAeplC,UAAUslC,kBAAoB,SAAUjwC,EAAYG,GAC/D,IAAI0K,EAAIxC,KAAKnI,MAAQmI,KAAKmsC,YACtBp8B,EAAI/P,KAAKhI,OAASgI,KAAKosC,YAC3BpsC,KAAK8I,UAAUnR,EAAI6K,EAAI,EAAG1K,EAAIiY,EAAI,IAMtC23B,EAAeplC,UAAUvK,IAAM,SAAUD,GACrCkI,KAAK8sC,KAAKh1C,IAMd4vC,EAAeplC,UAAU7F,OAAS,SAAU3E,GACxC,IAAIiY,EAAI/P,KAAKhI,OAASgI,KAAKosC,YAC3BpsC,KAAK0sC,WAAW50C,EAAIiY,IAMxB23B,EAAeplC,UAAU1K,KAAO,SAAUD,GACtCqI,KAAK+sC,KAAKp1C,IAMd+vC,EAAeplC,UAAU/F,MAAQ,SAAU5E,GACvC,IAAI6K,EAAIxC,KAAKnI,MAAQmI,KAAKmsC,YAC1BnsC,KAAKysC,WAAW90C,EAAI6K,IAMxBklC,EAAeplC,UAAU0qC,QAAU,SAAUr1C,GACzC,IAAI6K,EAAIxC,KAAKnI,MAAQmI,KAAKmsC,YAC1BnsC,KAAKysC,WAAW90C,EAAI6K,EAAI,IAM5BklC,EAAeplC,UAAU2qC,QAAU,SAAUn1C,GACzC,IAAIiY,EAAI/P,KAAKhI,OAASgI,KAAKosC,YAC3BpsC,KAAK0sC,WAAW50C,EAAIiY,EAAI,IAM5B23B,EAAeplC,UAAUyqC,KAAO,SAAUp1C,GACtCqI,KAAKysC,WAAW90C,IAMpB+vC,EAAeplC,UAAUwqC,KAAO,SAAUh1C,GACtCkI,KAAK0sC,WAAW50C,IAMpB4vC,EAAeplC,UAAU4qC,UAAY,SAAUn9B,GAC3C,IAAI48B,EAAS58B,EAAI/P,KAAKhI,OAClB40C,GAAUD,EACd3sC,KAAK/G,MAAM0zC,EAAQC,IAMvBlF,EAAeplC,UAAUqlC,SAAW,SAAUnlC,GAC1C,IAAImqC,EAASnqC,EAAIxC,KAAKnI,MAClB+0C,GAAUD,EACd3sC,KAAK/G,MAAM0zC,EAAQC,IAQvB,SAAS5G,IACL1vC,EAAAiuC,mBAAmBjiC,UAAUgL,YAAYC,KAAKvN,MAC9CA,KAAKmtC,gBAAkB,KACvBntC,KAAKotC,gBAAkB,KAEvBptC,KAAKqtC,MAAQ/2C,EAAAiuC,mBAAmBjiC,UAIpC0jC,EAAiB1jC,UAAY,IAAAhM,EAAAiuC,mBAK7ByB,EAAiB1jC,UAAUgrC,mBAAqB,WAC5C,OAAOttC,KAAKmtC,iBAMhBnH,EAAiB1jC,UAAUirC,mBAAqB,WAC5C,OAAOvtC,KAAKotC,iBAMhBpH,EAAiB1jC,UAAUkrC,cAAgB,SAAUC,GACjD,QAAIztC,KAAKotC,iBAAmBK,OAGxBztC,KAAKmtC,iBAAmBM,KAI5BztC,KAAKotC,gBAAkBK,GAEhB,KAMXzH,EAAiB1jC,UAAUorC,mBAAqB,SAAUrD,GACtDrqC,KAAKotC,gBAAkB/C,GAM3BrE,EAAiB1jC,UAAUkJ,YAAc,SAAUnO,GAC/C,IAAIswC,EAAUr3C,EAAAiuC,mBAAmBjiC,UAAUkJ,YAAY+B,KAAKvN,KAAM3C,GAMlE,OAJI2C,KAAK+5B,eACL/5B,KAAKmtC,gBAAkB,GAGpBQ,GAMX3H,EAAiB1jC,UAAUsrC,gBAAkB,SAAU3F,EAAmBwF,GAKtE,OAJIA,GAAYztC,KAAKotC,kBACjBptC,KAAKotC,gBAAkB,GAE3BptC,KAAKmtC,gBAAkBM,EAChBztC,KAAK05B,YAAYuO,GAAQ,IAQpC,SAASW,IACL5oC,KAAK6tC,YAAc,IAAIzoC,MACvBpF,KAAK8lC,cAAgBxvC,EAAA0tC,SAASp4B,kBAMlCg9B,EAAWH,KAAO,SAAUN,GAMxB,IAAK,IALDuB,EAAM,IAAId,EAGVmB,EAFK1C,EAAgBC,qBACXsC,mBAAmBzB,GACf2F,aACd9D,EAAWD,EAAOvxC,OACbwG,EAAI,EAAGA,EAAIgrC,EAAUhrC,IAAK,CAC/B,IAAIirC,EAAQF,EAAO/qC,GACfkmC,EAAU,IAAA5uC,EAAAkuC,YACVr1B,EAAQ86B,EAAM96B,MACd3W,EAAS4xC,WAAWj7B,EAAM3W,QAC1Bu1C,EAAS3D,WAAWj7B,EAAM6+B,QAC1BC,EAAO7D,WAAWj7B,EAAM8+B,MAC5B/I,EAAQ/1B,MAAM3W,EAAQu1C,EAAQE,GAG9B,IAAK,IAFDC,EAAUjE,EAAMoC,IAChB8B,EAASD,EAAQ11C,OACZsH,EAAI,EAAGA,EAAIquC,EAAQruC,IAAK,CAC7B,IAAIusC,EAAM6B,EAAQpuC,GACdwY,EAAK+zB,EAAI/zB,GACTvd,EAAOzE,EAAAkuC,YAAYrzB,IAAIC,SAEX,OADZg9B,EAAU/B,EAAIgC,OAEdtzC,EAAOzE,EAAAkuC,YAAYrzB,IAAIC,SAEN,MAAZg9B,EACLrzC,EAAOzE,EAAAkuC,YAAYrzB,IAAIE,SAEN,UAAZ+8B,EACLrzC,EAAOzE,EAAAkuC,YAAYrzB,IAAIG,eAGvBhb,EAAA2tC,QAAQ4D,MAAM,SAAU,qCAE5B,IAAI5uC,EAAQmxC,WAAWiC,EAAIpzC,OACvB4xC,EAAST,WAAWiC,EAAIxB,QAC5B3F,EAAQp1B,YAAY/U,EAAMud,EAAIrf,EAAO4xC,GAIpC,IAFDyD,EAAarE,EAAMsE,QACnBC,EAAYF,EAAW91C,OAC3B,IAASsH,EAAI,EAAGA,EAAI0uC,EAAW1uC,IAAK,CAChC,IAGIsuC,EAHAr0C,EAASu0C,EAAWxuC,GACpBwY,EAAKve,EAAOue,GACZvd,EAAOzE,EAAAkuC,YAAY/yB,OAAOC,kBAEd,WADZ08B,EAAUr0C,EAAOs0C,OAEjBtzC,EAAOzE,EAAAkuC,YAAY/yB,OAAOC,kBAET,YAAZ08B,EACLrzC,EAAOzE,EAAAkuC,YAAY/yB,OAAOE,oBAG1Brb,EAAA2tC,QAAQ4D,MAAM,SAAU,wCAExB5uC,EAAQmxC,WAAWrwC,EAAOd,OAC1B4xC,EAAST,WAAWrwC,EAAO8wC,QAC/B3F,EAAQl1B,eAAejV,EAAMud,EAAIrf,EAAO4xC,GAE5CnB,EAAImE,YAAY9uC,KAAKmmC,GAEzB,OAAOwE,GAMXd,EAAWtmC,UAAUkJ,YAAc,SAAUnO,GAEzC,IAAK,IADDutC,EAAWt0C,EAAA0tC,SAASp4B,kBAAoB5L,KAAK8lC,cACxC9mC,EAAI,EAAGA,EAAIgB,KAAK6tC,YAAYr1C,OAAQwG,IACzCgB,KAAK6tC,YAAY7uC,GAAGT,OAAOlB,EAAOutC,IAS1C,SAASpC,IACLxoC,KAAKyuC,SAAW,EAChBzuC,KAAK0uC,UAAY,KACjB1uC,KAAK2uC,YAAc,IAAIvpC,MAO3BojC,EAAQC,KAAO,SAAUN,GAMrB,IAAK,IALDuB,EAAM,IAAIlB,EAGVoG,EAFKvH,EAAgBC,qBACXsC,mBAAmBzB,GACT0G,cACpBC,EAAUF,EAAap2C,OAClBu2C,EAAS,EAAGA,EAASD,EAASC,IAAU,CAK7C,IAAK,IAHDC,EADWJ,EAAaG,GACFE,MACtBC,EAAQF,EAAWx2C,OACnB22C,EAA8B,IAAI/pC,MAC7BgqC,EAAU,EAAGA,EAAUF,EAAOE,IAAW,CAC9C,IAAIC,EAAYL,EAAWI,GACvBE,EAAQ,IAAIC,EAAcF,EAAU/2B,IAExC,GADA62B,EAAWC,GAAWE,EACA,MAAlBD,EAAUG,KAAd,CACA,IAAIC,EAAeJ,EAAUG,KACzBE,EAAUD,EAAaj3C,OAC3B82C,EAAME,KAAO,IAAIpqC,MACjB,IAAK,IAAIuqC,EAAS,EAAGA,EAASD,EAASC,IAAU,CAC7C,IAAIC,EAAY,IAAIL,EAAcE,EAAaE,IAC/CL,EAAME,KAAKzwC,KAAK6wC,KAGxBlG,EAAIiF,YAAY5vC,KAAKowC,GAGzB,OAAOzF,GAMXlB,EAAQlmC,UAAUkJ,YAAc,SAAUnO,GACtC,GAAa,MAATA,EAAJ,CAEMA,GAAS2C,KAAK0uC,WAChB1uC,KAAK6vC,UAAUxyC,GAEnB2C,KAAK0uC,UAAYrxC,EAEjB,IAAIyyC,EAAUx5C,EAAA0tC,SAASp4B,kBACnBmkC,EAAkC,GAAjB/vC,KAAKyuC,SAAiB,GAAKqB,EAAU9vC,KAAKyuC,UAAY,IAC3EzuC,KAAKyuC,SAAWqB,EACZC,EAAe,IAAGA,EAAe,GACrC,IAAK,IAAI/wC,EAAI,EAAGA,EAAIgB,KAAK2uC,YAAYn2C,OAAQwG,IACzCgB,KAAKgwC,2BAA2B3yC,EAAO2C,KAAK2uC,YAAY3vC,GAAI+wC,GAC5D/vC,KAAKiwC,sBAAsB5yC,EAAO2C,KAAK2uC,YAAY3vC,MAO3DwpC,EAAQlmC,UAAUutC,UAAY,SAAUxyC,GACpC,GAAa,MAATA,EACJ,IAAK,IAAI2B,EAAI,EAAGA,EAAIgB,KAAK2uC,YAAYn2C,OAAQwG,IAEzC,IAAK,IADDmwC,EAAanvC,KAAK2uC,YAAY3vC,GACzBc,EAAI,EAAGA,EAAIqvC,EAAW32C,OAAQsH,IAAK,CACxCqvC,EAAWrvC,GAAGowC,UAAU7yC,GACxB,IAAI8yC,EAAahB,EAAWrvC,GAAGqwC,WAC3BC,EAAajB,EAAWrvC,GAAGswC,WAC/B,KAAID,EAAa,GAAjB,CACA,IAAI3hB,EAAoD,GAAnCnxB,EAAMuF,cAAcwtC,GAGzC,GAFA/yC,EAAM6G,gBAAgBisC,EAAa3hB,EAAI,EAAM,GAC7CnxB,EAAM2F,cAAcotC,EAAa5hB,EAAI,EAAM,GACjB,MAAtB2gB,EAAWrvC,GAAG0vC,KAClB,IAAK,IAAIrW,EAAI,EAAGA,EAAIgW,EAAWrvC,GAAG0vC,KAAKh3C,OAAQ2gC,IAC3CgW,EAAWrvC,GAAG0vC,KAAKrW,GAAG+W,UAAU7yC,MAShDmrC,EAAQlmC,UAAU0tC,2BAA6B,SAAU3yC,EAAuB8xC,EAA+BY,GAM3G,IAAK,IALDM,GAAgB,EAChBC,EAAiB,EAIZtxC,EAAI,EAAGA,EAAImwC,EAAW32C,OAAQwG,IAAK,CACxC,IAAImxC,EAAahB,EAAWnwC,GAAGmxC,WAC3BC,EAAajB,EAAWnwC,GAAGoxC,WAC/B,KAAID,EAAa,IAAoD,GAAnC9yC,EAAMuF,cAAcwtC,GAAkB,CACpE,GAAIC,GAAgB,EAChB,MAEJA,EAAerxC,EACfsxC,EAAiBjzC,EAAM2G,gBAAgBmsC,IACvCG,GAAkBP,EAZL,IAaQ,IACjBO,EAAiB,IAIzBD,EAAe,IACfA,EAAe,EACfC,EAAiB,GAErB,IAAStxC,EAAI,EAAGA,EAAImwC,EAAW32C,OAAQwG,IAAK,CAExC,MADImxC,EAAahB,EAAWnwC,GAAGmxC,YACd,GAAa,GAAIE,GAAgBrxC,EAC9C3B,EAAM6G,gBAAgBisC,EAAYG,OAEjC,CACD,IACIzoC,EADA0oC,EAAUlzC,EAAM2G,gBAAgBmsC,IAQtB,GALVtoC,EADAyoC,EA7BF,IA8BOA,KA9BP,GA8B0C,EA9B1C,IAiCQ,EAAIA,GAAL,MAEgB,EAAIA,GAlChB,MAoCTzoC,EAAK,EApCI,KAoCkB,EAAIyoC,IAE/BC,EAAU1oC,IACV0oC,EAAU1oC,GAEdxK,EAAM6G,gBAAgBisC,EAAYI,MAQ9C/H,EAAQlmC,UAAU2tC,sBAAwB,SAAU5yC,EAAuB8xC,GACvE,IAAK,IAAIC,EAAU,EAAGA,EAAUD,EAAW32C,OAAQ42C,IAAW,CAC1D,IAAIoB,EAAarB,EAAWC,GAC5B,GAAuB,MAAnBoB,EAAWhB,QACXgB,EAAWL,WAAa,GAE5B,IAAK,IADDI,EAAUlzC,EAAM2G,gBAAgBwsC,EAAWL,YACtCR,EAAS,EAAGA,EAASa,EAAWhB,KAAKh3C,OAAQm3C,IAAU,CAC5D,IAAIC,EAAYY,EAAWhB,KAAKG,GAC5BC,EAAUO,WAAa,GAC3B9yC,EAAM6G,gBAAgB0rC,EAAUO,WAAYI,MAUxD,SAAShB,EAAcj3B,GACnBtY,KAAKowC,YAAc,EACnBpwC,KAAKmwC,YAAc,EACnBnwC,KAAKwvC,KAAO,KACZxvC,KAAKsY,GAAKA,EAMdi3B,EAAcjtC,UAAU4tC,UAAY,SAAU7yC,GAC1C2C,KAAKowC,WAAa/yC,EAAMwF,cAAc,WAAa7C,KAAKsY,IACxDtY,KAAKmwC,WAAa9yC,EAAMgH,kBAAkB/N,EAAAouC,YAAY3hC,MAAM/C,KAAKsY,KACjEjb,EAAM2F,cAAchD,KAAKowC,WAAY,IAQzC,SAASh0C,IACL4D,KAAKywC,QAAU,IACfzwC,KAAK0wC,YAAc,EACnB1wC,KAAK2wC,YAAc,EACnB3wC,KAAK4wC,MAAQ,EACb5wC,KAAK6wC,MAAQ,EACb7wC,KAAK8wC,OAAS,EACd9wC,KAAK+wC,OAAS,EACd/wC,KAAKgxC,YAAc,EAIvB50C,EAAe60C,WAAa,GAK5B70C,EAAekG,UAAU1H,SAAW,SAAUjD,EAAYG,GACtDkI,KAAK0wC,YAAc/4C,EACnBqI,KAAK2wC,YAAc74C,GAMvBsE,EAAekG,UAAU7D,KAAO,WAC5B,OAAOuB,KAAK4wC,OAMhBx0C,EAAekG,UAAU5D,KAAO,WAC5B,OAAOsB,KAAK6wC,OAMhBz0C,EAAekG,UAAU/D,OAAS,WAC9B,IAEI2yC,EADmB,GAAO,IACC90C,EAAe60C,WAC9C,GAAwB,GAApBjxC,KAAKgxC,YAAT,CAIA,IAAIG,EAAa76C,EAAA0tC,SAASp4B,kBACtBwlC,GAAmBD,EAAanxC,KAAKgxC,aAAe50C,EAAe60C,WAAa,IACpFjxC,KAAKgxC,YAAcG,EACnB,IACIE,EAAQD,EAAkBF,GAXN,IAUqB90C,EAAe60C,YAExDK,EAAMtxC,KAAK0wC,YAAc1wC,KAAK4wC,MAC9BW,EAAMvxC,KAAK2wC,YAAc3wC,KAAK6wC,MAElC,KAAIz4C,KAAKo5C,IAAIF,IAAOtxC,KAAKywC,SAAWr4C,KAAKo5C,IAAID,IAAOvxC,KAAKywC,SAAzD,CACA,IAAIl/B,EAAInZ,KAAKK,KAAK64C,EAAKA,EAAKC,EAAKA,GAE7Br3C,EAAKg3C,EAAQK,EAAKhgC,EAClBhB,EAFK2gC,EAAQI,EAAK//B,EAERvR,KAAK8wC,OACfzvC,EAAKnH,EAAK8F,KAAK+wC,OACfhsC,EAAI3M,KAAKK,KAAK8X,EAAKA,EAAKlP,EAAKA,IAC7B0D,GAAKssC,GAAStsC,EAAIssC,KAClB9gC,GAAM8gC,EAAQtsC,EACd1D,GAAMgwC,EAAQtsC,EACdA,EAAIssC,GAERrxC,KAAK8wC,QAAUvgC,EACfvQ,KAAK+wC,QAAU1vC,EAEX,IAAIowC,EAAQ,IAAOr5C,KAAKK,KAAK44C,EAAQA,EAAQ,GAAKA,EAAQ9/B,EAAI,EAAI8/B,EAAQ9/B,GAAK8/B,GAC3EK,EAAQt5C,KAAKK,KAAKuH,KAAK8wC,OAAS9wC,KAAK8wC,OAAS9wC,KAAK+wC,OAAS/wC,KAAK+wC,QACjEW,EAAQD,IACRzxC,KAAK8wC,QAAUW,EAAQC,EACvB1xC,KAAK+wC,QAAUU,EAAQC,GAG/B1xC,KAAK4wC,OAAS5wC,KAAK8wC,OACnB9wC,KAAK6wC,OAAS7wC,KAAK+wC,aAlCf/wC,KAAKgxC,YAAc16C,EAAA0tC,SAASp4B,mBA0CpC,SAASlP,IACPa,EAAY+E,UAAUgL,YAAYC,KAAKvN,MACvCA,KAAK2xC,WAAa,KAClB3xC,KAAK4xC,YAAc,KACnB5xC,KAAK6xC,UAAY,KACjB7xC,KAAK8xC,aAAe,KACpB9xC,KAAK+xC,QAAU,KACf/xC,KAAKgyC,SAAW,KAChBhyC,KAAKiyC,OAAS,KACdjyC,KAAKkyC,UAAY,KAGnBx1C,EAAc4F,UAAY,IAAI/E,EAK9Bb,EAAc4F,UAAU6vC,gBAAkB,SAAU7F,EAAiBC,GAC7DvsC,KAAKgyB,GAAG,GAAKhyB,KAAK+xC,SAAW/xC,KAAKgyB,GAAG,IAAMsa,GAAUtsC,KAAK2xC,aAC1DrF,EAAStsC,KAAK2xC,WAAa3xC,KAAKgyB,GAAG,GAAKhyB,KAAK+xC,QAAU/xC,KAAKgyB,GAAG,KAC/DhyB,KAAKgyB,GAAG,GAAKhyB,KAAKgyC,UAAYhyC,KAAKgyB,GAAG,IAAMsa,GAAUtsC,KAAK4xC,cAC3DtF,EAAStsC,KAAK4xC,YAAc5xC,KAAKgyB,GAAG,GAAKhyB,KAAKgyC,SAAWhyC,KAAKgyB,GAAG,KACjEhyB,KAAKgyB,GAAG,GAAKhyB,KAAKiyC,QAAUjyC,KAAKgyB,GAAG,IAAMua,GAAUvsC,KAAK6xC,YACzDtF,EAASvsC,KAAK6xC,UAAY7xC,KAAKgyB,GAAG,GAAKhyB,KAAKiyC,OAASjyC,KAAKgyB,GAAG,KAC7DhyB,KAAKgyB,GAAG,GAAKhyB,KAAKkyC,WAAalyC,KAAKgyB,GAAG,IAAMua,GAAUvsC,KAAK8xC,eAC5DvF,EAASvsC,KAAK8xC,aAAe9xC,KAAKgyB,GAAG,GAAKhyB,KAAKkyC,UAAYlyC,KAAKgyB,GAAG,KAEvE,IAAIwa,GAAO,EAAG,EAAG,EAAG,EAChB,EAAG,EAAG,EAAG,EACT,EAAG,EAAG,EAAG,EACTF,EAAQC,EAAQ,EAAG,GACvBhvC,EAAY0uC,IAAIO,EAAKxsC,KAAKgyB,GAAIhyB,KAAKgyB,KAMvCt1B,EAAc4F,UAAUhF,YAAc,SAAU80C,EAAaC,EAAap5C,GAC5C+G,KAAKgyB,GAAG,GAAlC,IACIwa,GAAO,EAAG,EAAG,EAAG,EAChB,EAAG,EAAG,EAAG,EACT,EAAG,EAAG,EAAG,EACT4F,EAAIC,EAAI,EAAG,GACXC,GAAOr5C,EAAO,EAAG,EAAG,EACpB,EAAGA,EAAO,EAAG,EACb,EAAG,EAAG,EAAG,EACT,EAAG,EAAG,EAAG,GACTs5C,GAAO,EAAG,EAAG,EAAG,EAChB,EAAG,EAAG,EAAG,EACT,EAAG,EAAG,EAAG,GACRH,GAAKC,EAAI,EAAG,GACjB90C,EAAY0uC,IAAIsG,EAAKvyC,KAAKgyB,GAAIhyB,KAAKgyB,IACnCz0B,EAAY0uC,IAAIqG,EAAKtyC,KAAKgyB,GAAIhyB,KAAKgyB,IACnCz0B,EAAY0uC,IAAIO,EAAKxsC,KAAKgyB,GAAIhyB,KAAKgyB,KAMvCt1B,EAAc4F,UAAU3F,cAAgB,SAAU/E,EAAe2E,EAAgBE,EAAiB1E,GAC9FiI,KAAK2xC,WAAa/5C,EAClBoI,KAAK4xC,YAAcr1C,EACnByD,KAAK6xC,UAAY95C,EACjBiI,KAAK8xC,aAAer1C,GAMxBC,EAAc4F,UAAU1F,iBAAmB,SAAUhF,EAAe2E,EAAgBE,EAAiB1E,GACjGiI,KAAK+xC,QAAUn6C,EACfoI,KAAKgyC,SAAWz1C,EAChByD,KAAKiyC,OAASl6C,EACdiI,KAAKkyC,UAAYz1C,GAMrBC,EAAc4F,UAAUkwC,cAAgB,WACpC,OAAOxyC,KAAK2xC,YAMhBj1C,EAAc4F,UAAUmwC,eAAiB,WACrC,OAAOzyC,KAAK4xC,aAMhBl1C,EAAc4F,UAAUowC,gBAAkB,WACtC,OAAO1yC,KAAK8xC,cAMhBp1C,EAAc4F,UAAUqwC,aAAe,WACnC,OAAO3yC,KAAK6xC,WAMhBn1C,EAAc4F,UAAUswC,WAAa,WACjC,OAAO5yC,KAAK+xC,SAMhBr1C,EAAc4F,UAAUuwC,YAAc,WAClC,OAAO7yC,KAAKgyC,UAMhBt1C,EAAc4F,UAAUwwC,aAAe,WACnC,OAAO9yC,KAAKkyC,WAMhBx1C,EAAc4F,UAAUywC,UAAY,WAChC,OAAO/yC,KAAKiyC,QAQhB,SAAS5K,KAITA,EAAgB2L,gBAAkB,KAKlC3L,EAAgBC,mBAAqB,WACjC,OAAOD,EAAgB2L,iBAM3B3L,EAAgB4L,mBAAqB,SAAUD,GAC3C3L,EAAgB2L,gBAAkBA,KAIpC52C,mBACAirC,oBACA3qC,kBACA8rC,YACA+G,kBACA3G,eACA5C,qBACA0B,mBACAnqC,gBACA6tC,cACAL,gBACAJ,uBACAtC,wBACAvD,iGCv3CW1qC,WAEXkC,mBAAqB,EACrBE,mBAAqB,EACrBK,uBAAyB,EACzBC,uBAAyB,EACzBC,yBAA2B,EAC3BC,qBAAuB,EAGvBk2C,cAAgB,EAChBC,cAAgB,EAChBC,gBAAkB,EAClBC,eAAiB,EAIjBC,kBAAoB,OACpBC,sBAAwB,WACxBC,wBAA0B,aAC1BC,sBAAwB,WACxBC,uBAAyB,YACzBC,mBAAqB,QAIrBC,cAAgB,OAChBC,cAAgB,0IC5BlB,IAAA19C,EAAAC,EAAA,IACAQ,EAAAR,EAAA,IACA09C,EAAA19C,EAAA,IAOIwH,OAAY7G,EAOZwC,WAiFFwC,cAzEF,WAEE,IAAIjB,EAAIoB,SAAS63C,eAAe59C,EAAAiH,OAAO4qC,KAAKgM,KAClC,OAANl5C,GACFoB,SAAS+3C,KAAKC,YAAYp5C,GAG5B,IAAIq5C,EAAUj4C,SAASH,cAAc,OACrCo4C,EAAQ77B,GAAKniB,EAAAiH,OAAO4qC,KAAKgM,IACzBG,EAAQC,UAAY,0BACpBD,EAAQE,MAAMC,YAAY,WAAY,SACtCH,EAAQE,MAAMC,YAAYn+C,EAAAiH,OAAOm3C,QAAQC,SAAUr+C,EAAAiH,OAAOm3C,QAAQE,QAAU,MAC5EN,EAAQE,MAAMC,YAAY,SAAUn+C,EAAAiH,OAAOm3C,QAAQG,QAAU,MAC7DP,EAAQE,MAAMC,YAAY,QAASn+C,EAAAiH,OAAOm3C,QAAQ18C,MAAQ,MAC1Ds8C,EAAQE,MAAMC,YAAY,SAAUn+C,EAAAiH,OAAOm3C,QAAQv8C,OAAS,MAC5Dm8C,EAAQE,MAAMC,YAAY,UAAW,OACrCH,EAAQE,MAAMC,YAAY,UAAWn+C,EAAAiH,OAAOu3C,MAAMpE,SAClD4D,EAAQE,MAAMC,YAAY,iBAAkB,QAC5Cp4C,SAAS+3C,KAAKW,YAAYT,GAC1Bv9C,EAAA4D,UAAUC,KAAK,mBAAoB05C,GAE/Bh+C,EAAAiH,OAAOy3C,OAAOtZ,SAChB,EAAAuY,EAAAgB,qBAAoBX,GAEtB,IAAIY,EAAgB74C,SAASH,cAAc,UAC3Cg5C,EAAc1gB,aAAa,KAAMl+B,EAAAiH,OAAO4qC,KAAK9/B,QAC7C6sC,EAAc1gB,aAAa,QAASl+B,EAAAiH,OAAOm3C,QAAQ18C,MAAQ1B,EAAAiH,OAAOm3C,QAAQS,aAC1ED,EAAc1gB,aAAa,SAAUl+B,EAAAiH,OAAOm3C,QAAQv8C,OAAS7B,EAAAiH,OAAOm3C,QAAQS,aAC5ED,EAAcV,MAAMC,YAAY,WAAY,YAC5CS,EAAcV,MAAMC,YAAY,OAAQ,OACxCS,EAAcV,MAAMC,YAAY,MAAO,OACvCS,EAAcV,MAAMC,YAAY,QAASn+C,EAAAiH,OAAOm3C,QAAQ18C,MAAQ,MAChEk9C,EAAcV,MAAMC,YAAY,SAAUn+C,EAAAiH,OAAOm3C,QAAQv8C,OAAS,MAC9D7B,EAAAiH,OAAO63C,IAAIC,QAAQH,EAAcV,MAAMC,YAAY,SAAU,mBACjEH,EAAQS,YAAYG,GAEpBI,EAuCA57C,WAvCAA,EAAa2C,SAAS63C,eAAe59C,EAAAiH,OAAO4qC,KAAK9/B,QACjDtR,EAAA4D,UAAUC,KAAK,gBAAiBs6C,GAWlC,WAGE,IAAK,IADDK,GAAS,SAAU,QAAS,sBAAuB,qBAAsB,YAAa,aACjFp2C,EAAI,EAAGA,EAAIo2C,EAAM58C,OAAQwG,IAChC,IACE,IAAIq2C,EAAM97C,EAAWm6B,WAAW0hB,EAAMp2C,IACpCqmC,OAAO,EACPiQ,WAAW,EACXn7B,oBAAoB,EACpBo7B,8BAA8B,IAE5BF,IAAKF,EAebv3C,UAfaA,EAAYy3C,GACrB,MAAOv6C,IAEN8C,IACHtD,QAAQutC,MAAM,mDACT5rC,OAAOu5C,uBACVl7C,QAAQutC,MAAM,6FA1BlB4N,MAmCA73C,cACArE,iGCpFc6E,cAAT,SAASA,KAEhBA,EAAYs3C,aAAe,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GACxEt3C,EAAYu3C,MAAQ,EACpBv3C,EAAYw3C,eAAiB,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAC1Ex3C,EAAYy3C,IAAM,IAAIzwC,MAAM,IAS5BhH,EAAYC,MAAQ,WAClB2B,KAAK21C,MAAQ,GAUfv3C,EAAYE,aAAe,WAEzB,IAAK,IAAIU,EAAI,EAAGA,EAAI,GAAIA,IADVgB,KAEJ41C,cAAc52C,GAAMA,EAAI,GAAK,EAAK,EAAI,GAWlDZ,EAAYW,KAAO,WACjB,IAEI+2C,EAAmC,IAFzB91C,KAEY21C,MAAQ,GAFpB31C,KAIF01C,YAAYl9C,OAASs9C,EAAa,KAJhC91C,KAKJ01C,YAAYl9C,OAASs9C,EAAa,IAG5C,IAAK,IAAI92C,EAAI,EAAGA,EAAI,GAAIA,IARVgB,KASJ01C,YAAYI,EAAa92C,GATrBgB,KASkC41C,cAAc52C,GAThDgB,KAYN21C,SAUVv3C,EAAYkB,IAAM,WACFU,KACN21C,QADM31C,KAEF21C,MAAQ,IAClBI,QAAQ,yBAHI/1C,KAIJ21C,MAAQ,GAIlB,IAAK,IADDK,EAAyB,GAPfh2C,KAOO21C,MACZ32C,EAAI,EAAGA,EAAI,GAAIA,IARVgB,KASJ41C,cAAc52C,GATVgB,KASuB01C,YAAYM,EAASh3C,IAW5DZ,EAAY63C,UAAY,WACtB,OAAOj2C,KAAK41C,eAUdx3C,EAAYS,WAAa,SAASq3C,GAEhC,IACIl3C,EAAGc,EAAGq5B,EAEV,IAAKn6B,EAAI,EAAGA,EAAI,GAAIA,IAHNgB,KAIJ61C,IAAI72C,GAAK,EAGnB,IAAKA,EAAI,EAAGA,EAAI,EAAGA,IACjB,IAAKc,EAAI,EAAGA,EAAI,EAAGA,IACjB,IAAKq5B,EAAI,EAAGA,EAAI,EAAGA,IATTn5B,KAUA61C,IAAI72C,EAAQ,EAAJc,IAVRE,KAU0B41C,cAAc52C,EAAQ,EAAJm6B,GAAS+c,EAAO/c,EAAQ,EAAJr5B,GAI9E,IAAKd,EAAI,EAAGA,EAAI,GAAIA,IAdNgB,KAeJ41C,cAAc52C,GAfVgB,KAeuB61C,IAAI72C,qCCnI3C,IAAA7I,EAAAC,EAAA,IACAQ,EAAAR,EAAA,IAEA8F,SAASi6C,KAAKC,WAAd,08BAoCA,IAAIC,SAAiBC,SAAcC,SAqBnC,SAASC,IACPF,EAAcjC,MAAM9D,QAAU,EAGhC,SAASkG,IACPH,EAAcjC,MAAM9D,QAAU,EAGhC,SAASmG,EAAUC,GACjBH,IACAF,EAAcM,UAAYD,EAC1BE,aAAaN,GACbA,EAAaO,WAAW,WACtBL,KACC,KAGL,SAASM,IACP,IAAIC,EAAM,IAAIC,eACdD,EAAIE,KAAK,MAAO,0BAChBF,EAAIG,iBAAiB,gBAAiB,YACtCH,EAAII,mBAAqB,WACvB,GAAuB,IAAnBJ,EAAIK,WAAkB,CAExBX,EADWY,KAAKC,MAAMP,EAAIQ,cACXC,UACfX,WAAWC,EAAkB,OAGjCC,EAAIU,OAINC,EAAOxC,SACLL,oBAhDF,SAA6B8C,IAC3BvB,EAAmBn6C,SAASH,cAAc,QACzBq4C,UAAY,iCAC7BiC,EAAiBhC,MAAM58C,UAAvB,SAA4CtB,EAAAiH,OAAOm3C,QAAQ18C,MAAQ,IAAnE,KACAy+C,EAAgBp6C,SAASH,cAAc,QACzBq4C,UAAY,uBAC1BiC,EAAiBzB,YAAY0B,GAC7BsB,EAAKhD,YAAYyB,GAEjBz/C,EAAA4D,UAAUC,KAAK,gBAAiB47C,GAE5BlgD,EAAAiH,OAAOy3C,OAAO4C,UAChBV,KAoCmBP,gBAAeC,eAAcC,YAAWK,sCC5F/DY,EAAAxC,SAEA0C,OAAA,WACA,UAAAvrB,MAAA,iJCJA,IAAA/1B,EAAAH,EAAA,IACA0hD,EAAA1hD,EAAA,IACA2hD,EAAA3hD,EAAA,IACAM,EAAAN,EAAA,IAEA,SAAS+F,EAAS67C,GAGhBh4C,KAAKg4C,aAAeA,EAEpBh4C,KAAKi4C,UACLj4C,KAAK/B,OAAS,EACd+B,KAAKhC,WAAY,EAEjBzH,EAAA8wC,gBAAgB4L,mBAAmB,IAAA6E,EAAAI,iBAIrC/7C,EAASmG,UAAU61C,YAAc,WAE/B,IAAI96C,EAAQ,IAAA06C,EAAAK,OAGZ,OAFAp4C,KAAKi4C,OAAOl5C,KAAK1B,GAEVA,GAKTlB,EAASmG,UAAUpE,YAAc,SAAUoH,EAAIxH,GAGzCkC,KAAKhC,YACPgC,KAAKhC,WAAY,EACjBgC,KAAKq4C,aAAa,EAAG/yC,GACrBtF,KAAKm4C,cACLn4C,KAAKi4C,OAAO,GAAGxP,KAAKnjC,EAAIxH,KAM5B3B,EAASmG,UAAUpD,SAAW,SAAU6oC,GAGtC,OAAIA,GAAM/nC,KAAKi4C,OAAOz/C,OAAe,KAE9BwH,KAAKi4C,OAAOlQ,IAKrB5rC,EAASmG,UAAU+1C,aAAe,SAAUtQ,EAAIziC,GAG1CtF,KAAKi4C,OAAOz/C,QAAUuvC,IAE1B/nC,KAAKi4C,OAAOlQ,GAAI7gB,QAAQ5hB,UAEjBtF,KAAKi4C,OAAOlQ,GACnB/nC,KAAKi4C,OAAOjxC,OAAO+gC,EAAI,KAKzB5rC,EAASmG,UAAUrD,UAAY,WAC7B,OAAOe,KAAKi4C,OAAOz/C,QAKrB2D,EAASmG,UAAU9D,QAAU,SAAU7G,EAAGG,GACxC,IAAK,IAAIkH,EAAI,EAAGA,EAAIgB,KAAKi4C,OAAOz/C,OAAQwG,IACtCgB,KAAKi4C,OAAOj5C,GAAGR,QAAQ7G,EAAGG,IAI9BqE,EAASmG,UAAU5H,SAAW,SAAU/C,EAAGG,GACrCpB,EAAA0D,QAAQk+C,WACVh+C,QAAQC,IAAI,mBAAqB5C,EAAI,MAAQG,GAE/C,IAAK,IAAIkH,EAAI,EAAGA,EAAIgB,KAAKi4C,OAAOz/C,OAAQwG,IAElCgB,KAAKi4C,OAAOj5C,GAAGu5C,QAAQ7hD,EAAA0D,QAAQw5C,cAAej8C,EAAGG,IACnDkI,KAAKg4C,aAAav9C,KAAK,WAEnB/D,EAAA0D,QAAQk+C,WACVh+C,QAAQC,IAAI,aAEdyF,KAAKi4C,OAAOj5C,GAAGw5C,uBAERx4C,KAAKi4C,OAAOj5C,GAAGu5C,QAAQ7hD,EAAA0D,QAAQy5C,cAAel8C,EAAGG,KACxDkI,KAAKg4C,aAAav9C,KAAK,WACnB/D,EAAA0D,QAAQk+C,WACVh+C,QAAQC,IAAI,oBAA2ByE,EAAI,KAE7CgB,KAAKi4C,OAAOj5C,GAAGy5C,kBAAkB/hD,EAAA0D,QAAQm5C,sBACvC78C,EAAA0D,QAAQg5C,kBAId,OAAO,KAIPj3C,+FCzEc+7C,kBAhBhB,IAAA7hD,EAAAD,EAAA,IACAE,EAAAF,EAAA,IAeO,SAAS8hD,KAkBhBA,EAAgB51C,UAAU4lC,UAAkB,SAASf,EAAgBtnC,GAEjE,IAAI64C,EAAU,IAAIzB,eAClByB,EAAQxB,KAAK,MAAO/P,GAAM,GAC1BuR,EAAQC,aAAe,cACvBD,EAAQE,OAAS,WACb,OAAOF,EAAQG,QACf,KAAK,IACDh5C,EAAS64C,EAAQI,UACjB,MACJ,QACIx+C,QAAQutC,MAAM,mBAAqB6Q,EAAQG,OAAS,OAAS1R,KAIrEuR,EAAQhB,KAAK,OAgBjBQ,EAAgB51C,UAAUy2C,WAAkB,SAAS5R,GAGjDnnC,KAAKkoC,UAAUf,EAAM,SAASgB,GAC1B,OAAOA,KAiBf+P,EAAgB51C,UAAUklC,gBAAkB,SAASL,EAAgBtnC,GAEjE,IAAIxC,EAAQ,KAGZ2C,KAAKkoC,UAAUf,EAAM,SAASgB,GAC1B9qC,EAAQ/G,EAAA8tC,iBAAiB1V,UAAUyZ,GACnCtoC,EAASxC,MAiBjB66C,EAAgB51C,UAAUwlC,YAAkB,SAASzqC,EAAuB0qC,EAAWZ,EAAgBtnC,GAGnG,IAAIm5C,EAAc,IAAIC,MAKtBD,EAAYE,YAAc,YAC1BF,EAAY3M,IAAMlF,EAClB6R,EAAYJ,OAASA,OACrBI,EAAYG,QAAUA,QAGtBH,EAAYJ,OAAS,WAEjB,IAAItzC,cACA67B,EAAU77B,EAAGi7B,gBACjB,IAAKY,EAAgE,OAAtD7mC,QAAQutC,MAAM,wCAAgD,EAEzExqC,EAAM+d,wBAGN9V,EAAG8zC,YAAY9zC,EAAG+zC,+BAAgC,GAEtD/zC,EAAG8zC,YAAY9zC,EAAGg0C,oBAAqB,GACvCh0C,EAAGg3B,cAAch3B,EAAGi0C,UACpBj0C,EAAGk3B,YAAYl3B,EAAGm3B,WAAY0E,GAC9B77B,EAAGk7B,WAAWl7B,EAAGm3B,WAAY,EAAGn3B,EAAGm7B,KAAMn7B,EAAGm7B,KAC9Bn7B,EAAGo7B,cAAesY,GAChC1zC,EAAG+4B,cAAc/4B,EAAGm3B,WAAYn3B,EAAGu7B,mBAAoBv7B,EAAGs7B,QAC1Dt7B,EAAG+4B,cAAc/4B,EAAGm3B,WAAYn3B,EAAGq7B,mBAAoBr7B,EAAGk0C,uBAC1Dl0C,EAAGm0C,eAAen0C,EAAGm3B,YAIrBp/B,EAAMmvB,WAAWub,EAAI5G,GAIrBA,EAAU,KAEa,mBAAZthC,GAAwBA,KAGvCm5C,EAAYG,QAAU,WAClB7+C,QAAQutC,MAAM,0BAA4BV,KAiBlD+Q,EAAgB51C,UAAUsnC,mBAAqB,SAASzB,GAEpD,IAAIuR,EACAC,EAAU,IAAIC,WAAWzR,EAAK,EAAG,GAEjCuR,EADc,KAAdC,EAAQ,IAA2B,KAAdA,EAAQ,IAA2B,KAAdA,EAAQ,GACxCj7B,OAAOC,aAAatU,MAAM,KAAM,IAAIuvC,WAAWzR,EAAK,IAEpDzpB,OAAOC,aAAatU,MAAM,KAAM,IAAIuvC,WAAWzR,IAK7D,OAFcmP,KAAKC,MAAMmC,IAkB7BxB,EAAgB51C,UAAU/H,IAAkB,SAASs/C,GAEjDv/C,QAAQC,IAAIs/C,wFClMAzB,SAxBhB,IAAA7hD,EAAAH,EAAA,IACA0jD,EAAA1jD,EAAA,IACAK,EAAAL,EAAA,IACAM,EAAAN,EAAA,IACAE,EAAAF,EAAA,IAoBO,SAASgiD,IAGZ7hD,EAAAuuC,aAAaxiC,UAAUgL,YAAYC,KAAKvN,MAExCA,KAAK+5C,aAAe,GACpB/5C,KAAKg6C,aAAe,KACpBh6C,KAAKi6C,aAGT7B,EAAO91C,UAAY,IAAA/L,EAAAuuC,aAGnBsT,EAAO91C,UAAUmmC,KAAO,SAASnjC,EAAI40C,EAAkBr6C,GAEnDG,KAAK2mC,aAAY,GACjB3mC,KAAKymC,gBAAe,GAEpBzmC,KAAK+5C,aAAeG,EAAiBrW,UAAU,EAAGqW,EAAiBC,YAAY,KAAO,GAEtFn6C,KAAKg6C,aAAe,IAAAF,EAAAM,iBAEpB,IAAI7S,EAAUvnC,KAEdA,KAAKg6C,aAAaK,iBAAiBH,EAAkB,WAEjD,IAAI/S,EAAOI,EAAQwS,aAAexS,EAAQyS,aAAaM,eACvD/S,EAAQL,cAAcC,EAAM,SAAS9pC,GAEjC,IAAK,IAAI2B,EAAI,EAAGA,EAAIuoC,EAAQyS,aAAaO,gBAAiBv7C,IAC1D,CACI,GAAI,sBAAsBqZ,KAAKkvB,EAAQyS,aAAaQ,eAAex7C,IAE/D,IAAIy7C,EAAWlT,EAAQyS,aAAaQ,eAAex7C,QAGnDy7C,EAAWlT,EAAQwS,aAAexS,EAAQyS,aAAaQ,eAAex7C,GAE1EuoC,EAAQO,YAAY9oC,EAAGy7C,EAAU,WAE7B,GAAIlT,EAAQpB,YAAc,CAEtB,GAAIoB,EAAQyS,aAAaU,mBAAqB,EAC9C,CAEInT,EAAQrB,eAER,IAAK,IAAIpmC,EAAI,EAAGA,EAAIynC,EAAQyS,aAAaU,mBAAoB56C,IAC7D,CACI,IAAI66C,EAAUpT,EAAQyS,aAAaY,kBAAkB96C,GACjD+6C,EAActT,EAAQwS,aACtBxS,EAAQyS,aAAac,kBAAkBh7C,GAE3CynC,EAAQa,eAAeuS,EAASE,SAKpCtT,EAAQtB,kBAAoB,KAC5BsB,EAAQrB,eAwCZ,GAnCwB,MAApBqB,EAAQtC,WAERsC,EAAQtC,SAAW,IAAA1uC,EAAAw0C,aAIsB,MAAzCxD,EAAQyS,aAAae,iBAErBxT,EAAQoB,YAAYpB,EAAQwS,aACRxS,EAAQyS,aAAae,kBAIzCxT,EAAQrC,QAAU,KAKoB,MAAtCqC,EAAQyS,aAAagB,cAErBzT,EAAQgB,SACJhB,EAAQwS,aACRxS,EAAQyS,aAAagB,cACrB,WACIzT,EAAQpC,KAAK35B,YAAY+7B,EAAQxC,eAMzCwC,EAAQpC,KAAO,KAKqB,MAApCoC,EAAQyS,aAAaiB,YACzB,CACI,IAAIC,EAAS3T,EAAQyS,aAAaiB,YACX,MAAnBC,EAAA,OACA3T,EAAQvC,YAAY2C,SAASuT,EAAA,OACT,MAApBA,EAAA,QACA3T,EAAQvC,YAAYkI,UAAUgO,EAAA,QAEf,MAAfA,EAAA,GACA3T,EAAQvC,YAAY+H,KAAKmO,EAAA,GACV,MAAfA,EAAA,GACA3T,EAAQvC,YAAY8H,KAAKoO,EAAA,GACH,MAAtBA,EAAA,UACA3T,EAAQvC,YAAYgI,QAAQkO,EAAA,UACN,MAAtBA,EAAA,UACA3T,EAAQvC,YAAYiI,QAAQiO,EAAA,UACX,MAAjBA,EAAA,KACA3T,EAAQvC,YAAYjtC,IAAImjD,EAAA,KACJ,MAApBA,EAAA,QACA3T,EAAQvC,YAAYvoC,OAAOy+C,EAAA,QACT,MAAlBA,EAAA,MACA3T,EAAQvC,YAAYptC,KAAKsjD,EAAA,MACN,MAAnBA,EAAA,OACA3T,EAAQvC,YAAYzoC,MAAM2+C,EAAA,OAGlC,IAASp7C,EAAI,EAAGA,EAAIynC,EAAQyS,aAAamB,kBAAmBr7C,IAGxDynC,EAAQxC,YAAY/hC,cAChBukC,EAAQyS,aAAaoB,eAAet7C,GACpCynC,EAAQyS,aAAaqB,kBAAkBv7C,IAI/C,IAASA,EAAI,EAAGA,EAAIynC,EAAQyS,aAAasB,yBAA0Bx7C,IAG/DynC,EAAQxC,YAAY7gC,gBAChBqjC,EAAQyS,aAAauB,sBAAsBz7C,GAC3CynC,EAAQyS,aAAawB,yBAAyB17C,IAMtDynC,EAAQxC,YAAYzhC,YAIpBikC,EAAQkU,mBAAmB/kD,EAAA0D,QAAQk5C,mBACnC/L,EAAQxB,kBAAkB/L,iBAE1BuN,EAAQZ,aAAY,GACpBY,EAAQd,gBAAe,GAEA,mBAAZ5mC,GAAwBA,aAW3Du4C,EAAO91C,UAAU4kB,QAAU,SAAS5hB,GAGhC,IAAI8hC,EAAK7wC,EAAA8wC,gBAAgBC,qBAEzBhiC,EAAGo2C,cAActU,EAAGjG,UAKxBiX,EAAO91C,UAAUm5C,mBAAqB,SAASzT,GAI3C,IAAK,IAFDT,EAAUvnC,KAELhB,EAAI,EAAGA,EAAIgB,KAAKg6C,aAAa2B,aAAa3T,GAAOhpC,IAC1D,CACI,IAAI48C,EAAO57C,KAAKg6C,aAAa6B,cAAc7T,EAAMhpC,GACjDgB,KAAKsiB,WAAWs5B,EAAM57C,KAAK+5C,aAAe6B,EAAM,SAAS3T,GACrDA,EAAOj9B,UAAUu8B,EAAQyS,aAAa8B,gBAAgB9T,EAAMhpC,IAC5DipC,EAAOh9B,WAAWs8B,EAAQyS,aAAa+B,iBAAiB/T,EAAMhpC,QAO1Eo5C,EAAO91C,UAAU/D,OAAS,WAItB,GAAuB,MAApByB,KAAK+kC,YAAR,CAOA,IAEIxiB,EAAc,IAFHjsB,EAAA0tC,SAASp4B,kBAAoB5L,KAAK8lC,eACxB,KACH1tC,KAAKO,GAGvBqH,KAAK+lC,kBAAkBhM,cAGvB/5B,KAAKy4C,kBAAkB/hD,EAAA0D,QAAQk5C,kBAAmB58C,EAAA0D,QAAQ+4C,eAM9DnzC,KAAK+kC,YAAY1hC,YAIJrD,KAAK+lC,kBAAkBv6B,YAAYxL,KAAK+kC,cAG7B,MAAjB/kC,KAAKilC,UACJjlC,KAAKilC,SAASz5B,YAAYxL,KAAK+kC,aAKvC/kC,KAAK+kC,YAAYzhC,YAKa,MAA1BtD,KAAKimC,mBACe,MAApBjmC,KAAKkmC,aACJlmC,KAAKimC,kBAAkBlM,cAExB/5B,KAAKimC,kBAAkBz6B,YAAYxL,KAAK+kC,aAK5C/kC,KAAK+kC,YAAY5hC,gBAAgB,gBAA8B,GAAbnD,KAAK4lC,MAAY,GACnE5lC,KAAK+kC,YAAY5hC,gBAAgB,gBAA8B,GAAbnD,KAAK6lC,MAAY,GACnE7lC,KAAK+kC,YAAY5hC,gBAAgB,gBAAkBnD,KAAK4lC,MAAQ5lC,KAAK6lC,OAAU,GAAI,GAInF7lC,KAAK+kC,YAAY5hC,gBAAgB,qBAAiC,GAAXnD,KAAK4lC,MAAU,GAItE5lC,KAAK+kC,YAAY5hC,gBAAgB,mBAAoBnD,KAAK4lC,MAAO,GACjE5lC,KAAK+kC,YAAY5hC,gBAAgB,mBAAoBnD,KAAK6lC,MAAO,GAIjE7lC,KAAK+kC,YAAY5hC,gBAAgB,gBACA64C,OAAQ,GAAK5jD,KAAKyY,IAAI0R,EAAI,SAAW,IACtEviB,KAAK+kC,YAAY5hC,gBAAgB,gBACA64C,OAAQ,EAAI5jD,KAAKyY,IAAI0R,EAAI,SAAW,IACrEviB,KAAK+kC,YAAY5hC,gBAAgB,gBACA64C,OAAQ,GAAK5jD,KAAKyY,IAAI0R,EAAI,SAAW,IACtEviB,KAAK+kC,YAAY5hC,gBAAgB,qBACA64C,OAAQ,EAAI5jD,KAAKyY,IAAI0R,EAAI,UAAY,IACtEviB,KAAK+kC,YAAY/hC,cAAc,eACAg5C,OAAQ,GAAM,GAAM5jD,KAAKyY,IAAI0R,EAAI,SAAW,GAGvD,MAAhBviB,KAAKklC,SAELllC,KAAKklC,QAAQ15B,YAAYxL,KAAK+kC,aAId,MAAhB/kC,KAAKulC,SAELvlC,KAAK+kC,YAAY/hC,cAAc,qBACAhD,KAAKwlC,cAIvB,MAAbxlC,KAAKmlC,MACLnlC,KAAKmlC,KAAK35B,YAAYxL,KAAK+kC,aAG/B/kC,KAAK+kC,YAAYxmC,cA1FT7H,EAAA0D,QAAQk+C,WAAWh+C,QAAQutC,MAAM,sBA+F7CuQ,EAAO91C,UAAUk2C,oBAAsB,WAEnC,IAAI3C,KACJ,IAAK,IAAI7N,KAAQhoC,KAAKkmC,YAElB2P,EAAI92C,KAAKipC,GAGb,IAAID,EAAKhP,SAAS3gC,KAAKwzC,SAAWiK,EAAIr9C,QAEtCwH,KAAKi8C,cAAcpG,EAAI9N,KAK3BqQ,EAAO91C,UAAUm2C,kBAAoB,SAASzQ,EAAMyF,GAEhD,IAAInjC,EAAMtK,KAAKg6C,aAAa2B,aAAa3T,GACrCD,EAAKhP,SAAS3gC,KAAKwzC,SAAWthC,GAClCtK,KAAK05B,YAAYsO,EAAMD,EAAI0F,IAK/B2K,EAAO91C,UAAUo3B,YAAc,SAASsO,EAAMD,EAAI0F,GAI9C,IAAIyO,EAAal8C,KAAKg6C,aAAa6B,cAAc7T,EAAMD,GAEvD,GAAkB,MAAdmU,GAAoC,IAAdA,EAA1B,CAOA,GAAIzO,GAAY/2C,EAAA0D,QAAQi5C,eAEpBrzC,KAAK+lC,kBAAkB2H,mBAAmBD,QAEzC,IAAKztC,KAAK+lC,kBAAkByH,cAAcC,GAI3C,YAFI/2C,EAAA0D,QAAQk+C,WACRh+C,QAAQC,IAAI,uBAIpB,IACI0tC,EADAV,EAAUvnC,KAGY,MAAtBA,KAAK0hB,QAAQsmB,GAEbhoC,KAAKsiB,WAAW0lB,EAAMhoC,KAAK+5C,aAAemC,EAAY,SAASC,GAC3DlU,EAASkU,EAGT5U,EAAQ6U,iBAAiBpU,EAAMD,EAAI0F,EAAUxF,MAMjDA,EAASjoC,KAAK0hB,QAAQsmB,GAGtBT,EAAQ6U,iBAAiBpU,EAAMD,EAAI0F,EAAUxF,SAlCzCvxC,EAAA0D,QAAQk+C,WACRh+C,QAAQutC,MAAM,sBAsC1BuQ,EAAO91C,UAAU85C,iBAAmB,SAASpU,EAAMD,EAAI0F,EAAUxF,GAE7D,IAAIiU,EAAal8C,KAAKg6C,aAAa6B,cAAc7T,EAAMD,GASvD,GAPAE,EAAOj9B,UAAUhL,KAAKg6C,aAAa8B,gBAAgB9T,EAAMD,IACzDE,EAAOh9B,WAAWjL,KAAKg6C,aAAa+B,iBAAiB/T,EAAMD,IAGvDrxC,EAAA0D,QAAQk+C,WACJh+C,QAAQC,IAAI,kBAAoB2hD,GAEU,MAA9Cl8C,KAAKg6C,aAAaqC,eAAerU,EAAMD,GAEvC/nC,KAAK+lC,kBAAkB6H,gBAAgB3F,EAAQwF,OAGnD,CACI,IAAI6O,EAAYt8C,KAAKg6C,aAAaqC,eAAerU,EAAMD,GAGnDwU,EAAMrgD,SAASH,cAAc,SACjCwgD,EAAIlQ,IAAMrsC,KAAK+5C,aAAeuC,EAE1B5lD,EAAA0D,QAAQk+C,WACRh+C,QAAQC,IAAI,iBAAmB+hD,GAEnCC,EAAIC,OACJx8C,KAAK+lC,kBAAkB6H,gBAAgB3F,EAAQwF,KAMvD2K,EAAO91C,UAAU25C,cAAgB,SAASjU,GAEtC,IAAIC,EAASjoC,KAAKkmC,YAAY8B,GAE1BtxC,EAAA0D,QAAQk+C,WACRh+C,QAAQC,IAAI,gBAAkBytC,GAElChoC,KAAKimC,kBAAkBvM,YAAYuO,GAAQ,IAK/CmQ,EAAO91C,UAAUjD,KAAO,SAASiG,GAO7B7O,EAAA2H,YAAYW,OAEZtI,EAAA2H,YAAYS,WAAWmB,KAAKglC,YAAYlmC,YAExCkB,KAAKi6C,UAAYxjD,EAAA2H,YAAY63C,YAC7Bj2C,KAAK+kC,YAAYh8B,UAAU/I,KAAKi6C,WAChCj6C,KAAK+kC,YAAY1lC,OAEjB5I,EAAA2H,YAAYkB,OAMhB84C,EAAO91C,UAAUi2C,QAAU,SAASjgC,EAAIywB,EAAOC,GAG3C,IAAK,IADDyT,EAAMz8C,KAAKg6C,aAAa0C,gBACnB19C,EAAI,EAAGA,EAAIy9C,EAAKz9C,IAErB,GAAIsZ,GAAMtY,KAAKg6C,aAAa2C,eAAe39C,GAC3C,CACI,IAAI8pC,EAAS9oC,KAAKg6C,aAAa4C,aAAa59C,GAE5C,OAAOgB,KAAK6oC,cAAcC,EAAQC,EAAOC,GAIjD,OAAO,uFCrcKoR,mBARhB,IAAA7jD,EAAAH,EAAA,IAQO,SAASgkD,IAEZp6C,KAAK68C,KAAO,OACZ78C,KAAK88C,GAAK,KACV98C,KAAK+8C,MAAQ,QACb/8C,KAAKg9C,SAAW,WAChBh9C,KAAKi9C,UAAY,YACjBj9C,KAAKk9C,QAAU,UACfl9C,KAAKm9C,KAAO,OACZn9C,KAAKo9C,YAAc,cACnBp9C,KAAKq9C,cAAgB,UACrBr9C,KAAKs9C,MAAQ,QACbt9C,KAAKu9C,QAAU,UACfv9C,KAAKw9C,SAAW,WAChBx9C,KAAKy9C,OAAS,SACdz9C,KAAK09C,WAAa,aAClB19C,KAAK29C,mBAAqB,qBAC1B39C,KAAK49C,MAAQ,MACb59C,KAAK69C,KAAO,OACZ79C,KAAK2pC,QAUTyQ,EAAiB93C,UAAU+3C,iBAAmB,SAASlT,EAAMtnC,GAEzD,IAAI0nC,EAAUvnC,KACLzJ,EAAA8wC,gBAAgBC,qBACtBY,UAAUf,EAAM,SAASgB,GACxB,IAAI2V,EAAMp/B,OAAOC,aAAatU,MAAM,KAAK,IAAIuvC,WAAWzR,IACxDZ,EAAQoC,KAAO2N,KAAKC,MAAMuG,GAC1Bj+C,OAWRu6C,EAAiB93C,UAAUk4C,eAAiB,SAASjhC,GAEjD,OAAgC,MAA5BvZ,KAAK2pC,KAAK3pC,KAAKg9C,WAAoD,MAA/Bh9C,KAAK2pC,KAAK3pC,KAAKg9C,UAAUzjC,GACtD,KAEJvZ,KAAK2pC,KAAK3pC,KAAKg9C,UAAUzjC,IAUpC6gC,EAAiB93C,UAAUg4C,aAAe,WAEtC,OAAOt6C,KAAK2pC,KAAK3pC,KAAK+8C,QAU1B3C,EAAiB93C,UAAUi4C,cAAgB,WAEvC,OAAgC,MAA5Bv6C,KAAK2pC,KAAK3pC,KAAKg9C,UAA0B,EAEtCh9C,KAAK2pC,KAAK3pC,KAAKg9C,UAAUxkD,QAUpC4hD,EAAiB93C,UAAUo6C,cAAgB,WAEvC,OAAiC,MAA7B18C,KAAK2pC,KAAK3pC,KAAKi9C,WACR,EAEJj9C,KAAK2pC,KAAK3pC,KAAKi9C,WAAWzkD,QAUrC4hD,EAAiB93C,UAAUs6C,aAAe,SAASrjC,GAE/C,OAAiC,MAA7BvZ,KAAK2pC,KAAK3pC,KAAKi9C,YACiB,MAAhCj9C,KAAK2pC,KAAK3pC,KAAKi9C,WAAW1jC,GACnB,KAEJvZ,KAAK2pC,KAAK3pC,KAAKi9C,WAAW1jC,GAAGvZ,KAAK88C,KAU7C1C,EAAiB93C,UAAUq6C,eAAiB,SAASpjC,GAEjD,OAAiC,MAA7BvZ,KAAK2pC,KAAK3pC,KAAKi9C,YACiB,MAAhCj9C,KAAK2pC,KAAK3pC,KAAKi9C,WAAW1jC,GACnB,KAEJvZ,KAAK2pC,KAAK3pC,KAAKi9C,WAAW1jC,GAAGvZ,KAAK68C,OAU7CzC,EAAiB93C,UAAUy4C,eAAiB,WAExC,OAAO/6C,KAAK2pC,KAAK3pC,KAAKk9C,UAU1B9C,EAAiB93C,UAAU04C,YAAc,WAErC,OAAOh7C,KAAK2pC,KAAK3pC,KAAKm9C,OAU1B/C,EAAiB93C,UAAUo4C,iBAAmB,WAE1C,OAAuC,MAA/B16C,KAAK2pC,KAAK3pC,KAAKo9C,aAAwB,EAAIp9C,KAAK2pC,KAAK3pC,KAAKo9C,aAAa5kD,QAUnF4hD,EAAiB93C,UAAUw4C,kBAAoB,SAASvhC,GAEpD,OAAmC,MAA/BvZ,KAAK2pC,KAAK3pC,KAAKo9C,aACR,KACJp9C,KAAK2pC,KAAK3pC,KAAKo9C,aAAa7jC,GAAGvZ,KAAK69C,OAU/CzD,EAAiB93C,UAAUs4C,kBAAoB,SAASrhC,GAEpD,OAAmC,MAA/BvZ,KAAK2pC,KAAK3pC,KAAKo9C,aACR,KACJp9C,KAAK2pC,KAAK3pC,KAAKo9C,aAAa7jC,GAAGvZ,KAAK68C,OAU/CzC,EAAiB93C,UAAU24C,UAAY,WAEnC,OAAOj7C,KAAK2pC,KAAK3pC,KAAKy9C,SAU1BrD,EAAiB93C,UAAU64C,gBAAkB,WAEzC,OAAsC,MAA9Bn7C,KAAK2pC,KAAK3pC,KAAK09C,YAAuB,EAAI19C,KAAK2pC,KAAK3pC,KAAK09C,YAAYllD,QAUjF4hD,EAAiB93C,UAAUq5C,aAAe,SAAS3T,GAE/C,OAAqC,MAAjChoC,KAAK2pC,KAAK3pC,KAAKq9C,gBACwB,MAAvCr9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GACvB,EAEJhoC,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMxvC,QAU/C4hD,EAAiB93C,UAAUu5C,cAAgB,SAAS7T,EAAMzuB,GAEtD,OAAqC,MAAjCvZ,KAAK2pC,KAAK3pC,KAAKq9C,gBACwB,MAAvCr9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,IACY,MAA1ChoC,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAC7B,KAEJvZ,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAK69C,OAUvDzD,EAAiB93C,UAAU+5C,eAAiB,SAASrU,EAAMzuB,GAEvD,OAAqC,MAAjCvZ,KAAK2pC,KAAK3pC,KAAKq9C,gBACwB,MAAvCr9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,IACY,MAA1ChoC,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,IACkB,MAAtDvZ,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKs9C,OACrC,KAEJt9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKs9C,QAUvDlD,EAAiB93C,UAAUw5C,gBAAkB,SAAS9T,EAAMzuB,GAExD,OAAqC,MAAjCvZ,KAAK2pC,KAAK3pC,KAAKq9C,gBACwB,MAAvCr9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,IACY,MAA1ChoC,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,IACoB,MAAxDvZ,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKu9C,SACrC,IAEJv9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKu9C,UAUvDnD,EAAiB93C,UAAUy5C,iBAAmB,SAAS/T,EAAMzuB,GAEzD,OAAqC,MAAjCvZ,KAAK2pC,KAAK3pC,KAAKq9C,gBACwB,MAAvCr9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,IACY,MAA1ChoC,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,IACqB,MAAzDvZ,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKw9C,UACrC,IAEJx9C,KAAK2pC,KAAK3pC,KAAKq9C,eAAerV,GAAMzuB,GAAGvZ,KAAKw9C,WAUvDpD,EAAiB93C,UAAU84C,eAAiB,SAAS7hC,GAEjD,OAAkC,MAA9BvZ,KAAK2pC,KAAK3pC,KAAK09C,aACkB,MAAjC19C,KAAK2pC,KAAK3pC,KAAK09C,YAAYnkC,GACpB,KAEJvZ,KAAK2pC,KAAK3pC,KAAK09C,YAAYnkC,GAAGvZ,KAAK88C,KAU9C1C,EAAiB93C,UAAU+4C,kBAAoB,SAAS9hC,GAEpD,OAAkC,MAA9BvZ,KAAK2pC,KAAK3pC,KAAK09C,aAAwD,MAAjC19C,KAAK2pC,KAAK3pC,KAAK09C,YAAYnkC,GAC1DwkC,IAEJ/9C,KAAK2pC,KAAK3pC,KAAK09C,YAAYnkC,GAAGvZ,KAAK49C,QAU9CxD,EAAiB93C,UAAUg5C,uBAAyB,WAEhD,OAA8C,MAAtCt7C,KAAK2pC,KAAK3pC,KAAK29C,oBAA+B,EAAI39C,KAAK2pC,KAAK3pC,KAAK29C,oBAAoBnlD,QAUjG4hD,EAAiB93C,UAAUi5C,sBAAwB,SAAShiC,GAExD,OAA0C,MAAtCvZ,KAAK2pC,KAAK3pC,KAAK29C,qBAAwE,MAAzC39C,KAAK2pC,KAAK3pC,KAAK29C,oBAAoBpkC,GAC1E,KACJvZ,KAAK2pC,KAAK3pC,KAAK29C,oBAAoBpkC,GAAGvZ,KAAK88C,KAUtD1C,EAAiB93C,UAAUk5C,yBAA2B,SAASjiC,GAE3D,OAA0C,MAAtCvZ,KAAK2pC,KAAK3pC,KAAK29C,qBAAwE,MAAzC39C,KAAK2pC,KAAK3pC,KAAK29C,oBAAoBpkC,GAC1EwkC,IAEJ/9C,KAAK2pC,KAAK3pC,KAAK29C,oBAAoBpkC,GAAGvZ,KAAK49C","file":"L2Dwidget.0.min.js","sourcesContent":["/**\n * @description The main part of live2d-widget\n */\n\n\nimport { config } from './config/configMgr';\nimport { createElement, currWebGL, currCanvas } from './elementMgr';\nimport { UtSystem,\n         UtDebug,\n         LDTransform,\n         LDGL,\n         Live2D,\n         Live2DModelWebGL,\n         Live2DModelJS,\n         Live2DMotion,\n         MotionQueueManager,\n         PhysicsHair,\n         AMotion,\n         PartsDataID,\n         DrawDataID,\n         BaseDataID,\n         ParamID } from './lib/live2d.core';\nimport { L2DTargetPoint, L2DViewMatrix, L2DMatrix44 } from \"./lib/Live2DFramework\";\nimport { cManager } from \"./cManager\";\nimport { MatrixStack } from \"./utils/MatrixStack\";\nimport { cDefine } from \"./cDefine\";\nimport device from 'current-device';\nimport { L2Dwidget } from './index';\n\nlet live2DMgr = null;\nlet captureFrameCB = undefined;\nlet isDrawStart = false;\nlet dragMgr = null;\nlet viewMatrix = null;\nlet projMatrix = null;\nlet deviceToScreen = null;\nlet drag = false;\nlet lastMouseX = 0;\nlet lastMouseY = 0;\nlet headPos = 0.5;\nlet opacityDefault = 0.7;\nlet opacityHover = 1;\n\n/**\n * Main function of live2d-widget\n * @return {null}\n */\n\nfunction theRealInit (){\n\n  createElement();\n  initEvent();\n\n  live2DMgr = new cManager(L2Dwidget)\n  dragMgr = new L2DTargetPoint();\n  let rect = currCanvas.getBoundingClientRect();\n  let ratio = rect.height / rect.width;\n  let left = cDefine.VIEW_LOGICAL_LEFT;\n  let right = cDefine.VIEW_LOGICAL_RIGHT;\n  let bottom = -ratio;\n  let top = ratio;\n\n  viewMatrix = new L2DViewMatrix();\n\n  viewMatrix.setScreenRect(left, right, bottom, top);\n\n  viewMatrix.setMaxScreenRect(cDefine.VIEW_LOGICAL_MAX_LEFT,\n    cDefine.VIEW_LOGICAL_MAX_RIGHT,\n    cDefine.VIEW_LOGICAL_MAX_BOTTOM,\n    cDefine.VIEW_LOGICAL_MAX_TOP);\n\n  modelScaling(device.mobile() && config.mobile.scale || config.model.scale)\n\n  projMatrix = new L2DMatrix44();\n  projMatrix.multScale(1, (rect.width / rect.height));\n\n  deviceToScreen = new L2DMatrix44();\n  deviceToScreen.multTranslate(-rect.width / 2.0, -rect.height / 2.0);  // #32\n  deviceToScreen.multScale(2 / rect.width, -2 / rect.height);  // #32\n\n\n  Live2D.setGL(currWebGL);\n  currWebGL.clearColor(0.0, 0.0, 0.0, 0.0);\n  changeModel(config.model.jsonPath);\n  startDraw();\n\n\n}\n\n/**\n * Capture current frame to png file\n * @param  {Function} callback The callback function which will receive the current frame\n * @return {null}\n * @example\n * You can use codes below to let the user download the current frame\n *\n * L2Dwidget.captureFrame(\n *   function(e){\n *     let link = document.createElement('a');\n *     document.body.appendChild(link);\n *     link.setAttribute('type', 'hidden');\n *     link.href = e;\n *     link.download = 'live2d.png';\n *     link.click();\n *   }\n * );\n *\n * @description Thanks to @journey-ad https://github.com/journey-ad/live2d_src/commit/97356a19f93d2abd83966f032a53b5ca1109fbc3\n */\n\nfunction captureFrame(callback){\n  captureFrameCB = callback;\n}\n\nfunction initEvent(){\n  if (currCanvas.addEventListener) {\n    window.addEventListener(\"click\", mouseEvent);\n    window.addEventListener(\"mousedown\", mouseEvent);\n    window.addEventListener(\"mousemove\", mouseEvent);\n    window.addEventListener(\"mouseup\", mouseEvent);\n    document.addEventListener(\"mouseleave\", mouseEvent);\n    window.addEventListener(\"touchstart\", touchEvent);\n    window.addEventListener(\"touchend\", touchEvent);\n    window.addEventListener(\"touchmove\", touchEvent);\n  }\n}\n\nfunction startDraw() {\n  if (!isDrawStart) {\n    isDrawStart = true;\n    (function tick() {\n      draw();\n      let requestAnimationFrame =\n        window.requestAnimationFrame ||\n        window.mozRequestAnimationFrame ||\n        window.webkitRequestAnimationFrame ||\n        window.msRequestAnimationFrame;\n\n      requestAnimationFrame(tick, currCanvas);\n      if(captureFrameCB !== undefined){\n        captureFrameCB(currCanvas.toDataURL());\n        captureFrameCB = undefined;\n      }\n    })();\n  }\n}\n\nfunction draw()\n{\n    MatrixStack.reset();\n    MatrixStack.loadIdentity();\n    dragMgr.update();\n    live2DMgr.setDrag(dragMgr.getX(), dragMgr.getY());\n\n    currWebGL.clear(currWebGL.COLOR_BUFFER_BIT);\n\n    MatrixStack.multMatrix(projMatrix.getArray());\n    MatrixStack.multMatrix(viewMatrix.getArray());\n    MatrixStack.push();\n\n    for (let i = 0; i < live2DMgr.numModels(); i++)\n    {\n        let model = live2DMgr.getModel(i);\n\n        if(model == null) return;\n\n        if (model.initialized && !model.updating)\n        {\n            model.update();\n            model.draw(currWebGL);\n        }\n    }\n    MatrixStack.pop();\n}\n\nfunction changeModel(modelurl) // 更换模型\n{\n    live2DMgr.reloadFlg = true;\n    live2DMgr.count++; // 现在仍有多模型支持，稍后可以精简\n    live2DMgr.changeModel(currWebGL, modelurl);\n}\n\nfunction modelScaling(scale) {\n  viewMatrix.adjustScale(0, 0, scale);\n}\n/*\nfunction transformRange(center, transform, range)\n{\n    let a = {\n        x: transform.x - center.x,\n        y: transform.y - center.y\n    }\n    let r = Math.sqrt(Math.pow(a.x,2) + Math.pow(a.y,2));\n    if (r > range) {\n        a = {\n            x: a.x / r * range + center.x,\n            y: a.y / r * range + center.y\n        };\n        return a;\n    } else {\n        return transform;\n    }\n}\n*/\nfunction dot(A,B)\n{\n    return A.x * B.x + A.y * B.y;\n}\n\nfunction normalize(x,y)\n{\n    let length = Math.sqrt(x * x + y * y)\n    return {\n        x: x / length,\n        y: y / length\n    }\n}\n\nfunction transformRect(center, transform, rect)\n{\n    if (transform.x < rect.left + rect.width && transform.y < rect.top + rect.height &&\n        transform.x > rect.left && transform.y > rect.top) return transform;\n    let Len_X = center.x - transform.x;\n    let Len_Y = center.y - transform.y;\n\n    function angle(Len_X, Len_Y)\n    {\n        return Math.acos(dot({\n            x: 0,\n            y: 1\n        }, normalize(Len_X, Len_Y))) * 180 / Math.PI\n    }\n\n    let angleTarget = angle(Len_X, Len_Y);\n    if (transform.x < center.x) angleTarget = 360 - angleTarget;\n    let angleLeftTop = 360 - angle(rect.left - center.x, (rect.top - center.y) * -1);\n    let angleLeftBottom = 360 - angle(rect.left - center.x, (rect.top + rect.height - center.y) * -1);\n    let angleRightTop = angle(rect.left + rect.width - center.x, (rect.top - center.y) * -1);\n    let angleRightBottom = angle(rect.left + rect.width - center.x, (rect.top + rect.height - center.y) * -1);\n    let scale = Len_Y / Len_X;\n    let res = {};\n\n    if (angleTarget < angleRightTop) {\n        let y3 = rect.top - center.y;\n        let x3 = y3 / scale;\n        res = {\n            y: center.y + y3,\n            x: center.x + x3\n        }\n    } else if(angleTarget < angleRightBottom) {\n        let x3 = rect.left + rect.width - center.x;\n        let y3 = x3 * scale;\n        res = {\n            y: center.y + y3,\n            x: center.x + x3\n        }\n    } else if (angleTarget < angleLeftBottom) {\n        let y3 = rect.top + rect.height - center.y;\n        let x3 = y3 / scale;\n        res = {\n            y: center.y + y3,\n            x: center.x + x3\n        }\n    } else if (angleTarget < angleLeftTop) {\n        let x3 = center.x - rect.left;\n        let y3 = x3 * scale;\n        res = {\n            y: center.y - y3,\n            x: center.x - x3\n        }\n    } else {\n        let y3 = rect.top - center.y;\n        let x3 = y3 / scale;\n        res = {\n            y: center.y + y3,\n            x: center.x + x3\n        }\n    }\n\n    return res;\n}\n\nfunction modelTurnHead(event)\n{\n    drag = true;\n\n    let rect = currCanvas.getBoundingClientRect();\n\n    let sx = transformScreenX(event.clientX - rect.left);\n    let sy = transformScreenY(event.clientY - rect.top);\n    let target = transformRect({\n        x: rect.left + rect.width / 2,\n        y: rect.top + rect.height * headPos\n    }, {\n        x: event.clientX,\n        y: event.clientY\n    }, rect)\n    let vx = transformViewX(target.x - rect.left);\n    let vy = transformViewY(target.y - rect.top);\n\n    if (cDefine.DEBUG_MOUSE_LOG)\n        console.log(\"modelTurnHead onMouseMove device( x:\" + event.clientX + \" y:\" + event.clientY + \" ) view( x:\" + vx + \" y:\" + vy + \")\");\n\n    lastMouseX = sx;\n    lastMouseY = sy;\n\n    dragMgr.setPoint(vx, vy);\n}\n\nfunction modelTapEvent(event)\n{\n    drag = true;\n\n    let rect = currCanvas.getBoundingClientRect();\n\n    let sx = transformScreenX(event.clientX - rect.left);\n    let sy = transformScreenY(event.clientY - rect.top);\n    let target = transformRect({\n        x: rect.left + rect.width / 2,\n        y: rect.top + rect.height * headPos\n    }, {\n        x: event.clientX,\n        y: event.clientY\n    }, rect)\n    let vx = transformViewX(target.x - rect.left);\n    let vy = transformViewY(target.y - rect.top);\n\n    if (cDefine.DEBUG_MOUSE_LOG)\n        console.log(\"modelTapEvent onMouseDown device( x:\" + event.clientX + \" y:\" + event.clientY + \" ) view( x:\" + vx + \" y:\" + vy + \")\");\n\n    lastMouseX = sx;\n    lastMouseY = sy;\n\n    L2Dwidget.emit('tap', event);\n\n    live2DMgr.tapEvent(vx, vy);\n}\n\nfunction followPointer(event)\n{\n    let rect = currCanvas.getBoundingClientRect();\n\n    let sx = transformScreenX(event.clientX - rect.left);\n    let sy = transformScreenY(event.clientY - rect.top);\n\n    // log but seems ok\n    // console.log(\"ecx=\" + event.clientX + \" ecy=\" + event.clientY + \" sx=\" + sx + \" sy=\" + sy);\n\n    let target = transformRect({// seems ok here\n        x: rect.left + rect.width / 2,\n        y: rect.top + rect.height * headPos\n    }, {\n        x: event.clientX,\n        y: event.clientY\n    }, rect)\n    let vx = transformViewX(target.x - rect.left);\n    let vy = transformViewY(target.y - rect.top);\n\n    if (cDefine.DEBUG_MOUSE_LOG)\n        console.log(\"followPointer onMouseMove device( x:\" + event.clientX + \" y:\" + event.clientY + \" ) view( x:\" + vx + \" y:\" + vy + \")\");\n\n    if (drag)\n    {\n        lastMouseX = sx;\n        lastMouseY = sy;\n        dragMgr.setPoint(vx, vy);\n    }\n}\n\nfunction lookFront()\n{\n    if (drag) {\n        drag = false;\n    }\n    dragMgr.setPoint(0, 0);\n}\n\nfunction mouseEvent(e)\n{\n    //e.preventDefault();\n    if (e.type == \"mousedown\") {\n        modelTapEvent(e);\n    } else if (e.type == \"mousemove\") {\n        modelTurnHead(e);\n    } else if (e.type == \"mouseup\") {\n        if(\"button\" in e && e.button != 0) return;\n        // lookFront();\n    } else if (e.type == \"mouseleave\") {\n        lookFront();\n    }\n}\n\nfunction touchEvent(e)\n{\n    var touch = e.touches[0];\n    if (e.type == \"touchstart\") {\n        if (e.touches.length == 1) modelTapEvent(touch);\n        // onClick(touch);\n    } else if (e.type == \"touchmove\") {\n        followPointer(touch);\n    } else if (e.type == \"touchend\") {\n        lookFront();\n    }\n}\n\nfunction transformViewX(deviceX)\n{\n    var screenX = deviceToScreen.transformX(deviceX);\n    return viewMatrix.invertTransformX(screenX);\n}\n\n\nfunction transformViewY(deviceY)\n{\n    var screenY = deviceToScreen.transformY(deviceY);\n    return viewMatrix.invertTransformY(screenY);\n}\n\n\nfunction transformScreenX(deviceX)\n{\n    return deviceToScreen.transformX(deviceX);\n}\n\n\nfunction transformScreenY(deviceY)\n{\n    return deviceToScreen.transformY(deviceY);\n}\n\nexport{\n  theRealInit,\n  captureFrame,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/cLive2DApp.js","/**\n * ============================================================\n *   Live2D Cubism SDK for WebGL Version 2.1.00_1\n *\n *   (c) Live2D Inc.\n * ============================================================\n *\n * This is a Software Development Kit (SDK) for developing Live2D-Cubism-powered applications on WebGL.\n * The SDK contains proprietary libraries and sample projects.\n * Read this document when using the SDK.\n *\n * ------------------------------\n *   License\n * ------------------------------\n * Read Live2D License Agreement\n * for business\n * http://live2d.com/en/sdk_license_cubism3\n *\n * for indie\n * http://live2d.com/en/sdk_license_cubism_indie\n *\n * After agree and accept Live2D SDK License Agreement, the content in the following folders may be placed in the server which you control.\n * SDK\n * ├─framework\n * │    Live2DFramework.js\n * │\n * ├─lib\n * │    live2d.min.js\n * │\n * └─sample\n */\n\n// Changes have been done and intention:\n// 1. Pretty the code using Chrome for easy editing.\n// 2. Use ES6's module system to prevent functions from exposing to 'window' and easy compatibility for ES6.\n\n\nvar j = true;\nfunction aa() {\n    if (j) {\n        return;\n    }\n    this._$MT = null;\n    this._$5S = null;\n    this._$NP = 0;\n    aa._$42++;\n    this._$5S = new y(this);\n}\naa._$0s = 1;\naa._$4s = 2;\naa._$42 = 0;\naa._$62 = function(aQ, aU) {\n    try {\n        if (aU instanceof ArrayBuffer) {\n            aU = new DataView(aU);\n        }\n        if (!(aU instanceof DataView)) {\n            throw new J(\"_$SS#loadModel(b) / b _$x be DataView or ArrayBuffer\");\n        }\n        var aS = new K(aU);\n        var aM = aS._$ST();\n        var aK = aS._$ST();\n        var aJ = aS._$ST();\n        var aN;\n        if (aM == 109 && aK == 111 && aJ == 99) {\n            aN = aS._$ST();\n        } else {\n            throw new J(\"_$gi _$C _$li , _$Q0 _$P0.\");\n        }\n        aS._$gr(aN);\n        if (aN > ay._$T7) {\n            aQ._$NP |= aa._$4s;\n            var aR = ay._$T7;\n            var aI = \"_$gi _$C _$li , _$n0 _$_ version _$li ( SDK : \" + aR + \" < _$f0 : \" + aN + \" )@_$SS#loadModel()\\n\";\n            throw new J(aI);\n        }\n        var aL = aS._$nP();\n        if (aN >= ay._$s7) {\n            var aH = aS._$9T();\n            var aT = aS._$9T();\n            if (aH != -30584 || aT != -30584) {\n                aQ._$NP |= aa._$0s;\n                throw new J(\"_$gi _$C _$li , _$0 _$6 _$Ui.\");\n            }\n        }\n        aQ._$KS(aL);\n        var aP = aQ.getModelContext();\n        aP.setDrawParam(aQ.getDrawParam());\n        aP.init();\n    } catch (aO) {\n        q._$Rb(aO);\n    }\n}\n;\naa.prototype._$KS = function(aH) {\n    this._$MT = aH;\n}\n;\naa.prototype.getModelImpl = function() {\n    if (this._$MT == null) {\n        this._$MT = new w();\n        this._$MT._$zP();\n    }\n    return this._$MT;\n}\n;\naa.prototype.getCanvasWidth = function() {\n    if (this._$MT == null) {\n        return 0;\n    }\n    return this._$MT.getCanvasWidth();\n}\n;\naa.prototype.getCanvasHeight = function() {\n    if (this._$MT == null) {\n        return 0;\n    }\n    return this._$MT.getCanvasHeight();\n}\n;\naa.prototype.getParamFloat = function(aH) {\n    if (typeof aH != \"number\") {\n        aH = this._$5S.getParamIndex(z.getID(aH));\n    }\n    return this._$5S.getParamFloat(aH);\n}\n;\naa.prototype.setParamFloat = function(aH, aJ, aI) {\n    if (typeof aH != \"number\") {\n        aH = this._$5S.getParamIndex(z.getID(aH));\n    }\n    if (arguments.length < 3) {\n        aI = 1;\n    }\n    this._$5S.setParamFloat(aH, this._$5S.getParamFloat(aH) * (1 - aI) + aJ * aI);\n}\n;\naa.prototype.addToParamFloat = function(aH, aJ, aI) {\n    if (typeof aH != \"number\") {\n        aH = this._$5S.getParamIndex(z.getID(aH));\n    }\n    if (arguments.length < 3) {\n        aI = 1;\n    }\n    this._$5S.setParamFloat(aH, this._$5S.getParamFloat(aH) + aJ * aI);\n}\n;\naa.prototype.multParamFloat = function(aH, aJ, aI) {\n    if (typeof aH != \"number\") {\n        aH = this._$5S.getParamIndex(z.getID(aH));\n    }\n    if (arguments.length < 3) {\n        aI = 1;\n    }\n    this._$5S.setParamFloat(aH, this._$5S.getParamFloat(aH) * (1 + (aJ - 1) * aI));\n}\n;\naa.prototype.getParamIndex = function(aH) {\n    return this._$5S.getParamIndex(z.getID(aH));\n}\n;\naa.prototype.loadParam = function() {\n    this._$5S.loadParam();\n}\n;\naa.prototype.saveParam = function() {\n    this._$5S.saveParam();\n}\n;\naa.prototype.init = function() {\n    this._$5S.init();\n}\n;\naa.prototype.update = function() {\n    this._$5S.update();\n}\n;\naa.prototype._$Rs = function() {\n    q._$li(\"_$60 _$PT _$Rs()\");\n    return -1;\n}\n;\naa.prototype._$Ds = function(aH) {\n    q._$li(\"_$60 _$PT _$SS#_$Ds() \\n\");\n}\n;\naa.prototype._$K2 = function() {}\n;\naa.prototype.draw = function() {}\n;\naa.prototype.getModelContext = function() {\n    return this._$5S;\n}\n;\naa.prototype._$s2 = function() {\n    return this._$NP;\n}\n;\naa.prototype._$P7 = function(aK, aR, aH, a0) {\n    var aU = -1;\n    var aY = 0;\n    var aM = this;\n    var aJ = 0.5;\n    var aI = 0.15;\n    var aX = true;\n    if (aH == 0) {\n        for (var aV = 0; aV < aK.length; aV++) {\n            var aP = aK[aV];\n            var aO = aR[aV];\n            var aS = (aM.getParamFloat(aP) != 0);\n            aM.setPartsOpacity(aO, (aS ? 1 : 0));\n        }\n        return;\n    } else {\n        if (aK.length == 1) {\n            var aP = aK[0];\n            var aT = (aM.getParamFloat(aP) != 0);\n            var aO = aR[0];\n            var aQ = aM.getPartsOpacity(aO);\n            var aW = aH / a0;\n            if (aT) {\n                aQ += aW;\n                if (aQ > 1) {\n                    aQ = 1;\n                }\n            } else {\n                aQ -= aW;\n                if (aQ < 0) {\n                    aQ = 0;\n                }\n            }\n            aM.setPartsOpacity(aO, aQ);\n        } else {\n            for (var aV = 0; aV < aK.length; aV++) {\n                var aP = aK[aV];\n                var aS = (aM.getParamFloat(aP) != 0);\n                if (aS) {\n                    if (aU >= 0) {\n                        break;\n                    }\n                    aU = aV;\n                    var aO = aR[aV];\n                    aY = aM.getPartsOpacity(aO);\n                    aY += aH / a0;\n                    if (aY > 1) {\n                        aY = 1;\n                    }\n                }\n            }\n            if (aU < 0) {\n                console.log(\"No _$wi _$q0/ _$U default[%s]\", aK[0]);\n                aU = 0;\n                aY = 1;\n                aM.loadParam();\n                aM.setParamFloat(aK[aU], aY);\n                aM.saveParam();\n            }\n            for (var aV = 0; aV < aK.length; aV++) {\n                var aO = aR[aV];\n                if (aU == aV) {\n                    aM.setPartsOpacity(aO, aY);\n                } else {\n                    var aL = aM.getPartsOpacity(aO);\n                    var aZ;\n                    if (aY < aJ) {\n                        aZ = aY * (aJ - 1) / aJ + 1;\n                    } else {\n                        aZ = (1 - aY) * aJ / (1 - aJ);\n                    }\n                    if (aX) {\n                        var aN = (1 - aZ) * (1 - aY);\n                        if (aN > aI) {\n                            aZ = 1 - aI / (1 - aY);\n                        }\n                    }\n                    if (aL > aZ) {\n                        aL = aZ;\n                    }\n                    aM.setPartsOpacity(aO, aL);\n                }\n            }\n        }\n    }\n}\n;\naa.prototype.setPartsOpacity = function(aI, aH) {\n    if (typeof aI != \"number\") {\n        aI = this._$5S.getPartsDataIndex(i.getID(aI));\n    }\n    this._$5S.setPartsOpacity(aI, aH);\n}\n;\naa.prototype.getPartsDataIndex = function(aH) {\n    if (!(aH instanceof i)) {\n        aH = i.getID(aH);\n    }\n    return this._$5S.getPartsDataIndex(aH);\n}\n;\naa.prototype.getPartsOpacity = function(aH) {\n    if (typeof aH != \"number\") {\n        aH = this._$5S.getPartsDataIndex(i.getID(aH));\n    }\n    if (aH < 0) {\n        return 0;\n    }\n    return this._$5S.getPartsOpacity(aH);\n}\n;\naa.prototype.getDrawParam = function() {}\n;\naa.prototype.getDrawDataIndex = function(aH) {\n    return this._$5S.getDrawDataIndex(Z.getID(aH));\n}\n;\naa.prototype.getDrawData = function(aH) {\n    return this._$5S.getDrawData(aH);\n}\n;\naa.prototype.getTransformedPoints = function(aH) {\n    var aI = this._$5S._$C2(aH);\n    if (aI instanceof ag) {\n        return (aI).getTransformedPoints();\n    }\n    return null;\n}\n;\naa.prototype.getIndexArray = function(aI) {\n    if (aI < 0 || aI >= this._$5S._$aS.length) {\n        return null;\n    }\n    var aH = this._$5S._$aS[aI];\n    if (aH != null && aH.getType() == a._$wb) {\n        if (aH instanceof b) {\n            return aH.getIndexArray();\n        }\n    }\n    return null;\n}\n;\nfunction W(aJ) {\n    if (j) {\n        return;\n    }\n    this.clipContextList = new Array();\n    this.glcontext = aJ.gl;\n    this.dp_webgl = aJ;\n    this.curFrameNo = 0;\n    this.firstError_clipInNotUpdate = true;\n    this.colorBuffer = 0;\n    this.isInitGLFBFunc = false;\n    this.tmpBoundsOnModel = new av();\n    if (Q.glContext.length > Q.frameBuffers.length) {\n        this.curFrameNo = this.getMaskRenderTexture();\n    } else {}\n    this.tmpModelToViewMatrix = new ac();\n    this.tmpMatrix2 = new ac();\n    this.tmpMatrixForMask = new ac();\n    this.tmpMatrixForDraw = new ac();\n    this.CHANNEL_COLORS = new Array();\n    var aI = new o();\n    aI = new o();\n    aI.r = 0;\n    aI.g = 0;\n    aI.b = 0;\n    aI.a = 1;\n    this.CHANNEL_COLORS.push(aI);\n    aI = new o();\n    aI.r = 1;\n    aI.g = 0;\n    aI.b = 0;\n    aI.a = 0;\n    this.CHANNEL_COLORS.push(aI);\n    aI = new o();\n    aI.r = 0;\n    aI.g = 1;\n    aI.b = 0;\n    aI.a = 0;\n    this.CHANNEL_COLORS.push(aI);\n    aI = new o();\n    aI.r = 0;\n    aI.g = 0;\n    aI.b = 1;\n    aI.a = 0;\n    this.CHANNEL_COLORS.push(aI);\n    for (var aH = 0; aH < this.CHANNEL_COLORS.length; aH++) {\n        this.dp_webgl.setChannelFlagAsColor(aH, this.CHANNEL_COLORS[aH]);\n    }\n}\nW.CHANNEL_COUNT = 4;\nW.RENDER_TEXTURE_USE_MIPMAP = false;\nW.NOT_USED_FRAME = -100;\nW.prototype._$L7 = function() {\n    if (this.tmpModelToViewMatrix) {\n        this.tmpModelToViewMatrix = null;\n    }\n    if (this.tmpMatrix2) {\n        this.tmpMatrix2 = null;\n    }\n    if (this.tmpMatrixForMask) {\n        this.tmpMatrixForMask = null;\n    }\n    if (this.tmpMatrixForDraw) {\n        this.tmpMatrixForDraw = null;\n    }\n    if (this.tmpBoundsOnModel) {\n        this.tmpBoundsOnModel = null;\n    }\n    if (this.CHANNEL_COLORS) {\n        for (var aH = this.CHANNEL_COLORS.length - 1; aH >= 0; --aH) {\n            this.CHANNEL_COLORS.splice(aH, 1);\n        }\n        this.CHANNEL_COLORS = [];\n    }\n    this.releaseShader();\n}\n;\nW.prototype.releaseShader = function() {\n    var aI = Q.frameBuffers.length;\n    for (var aH = 0; aH < aI; aH++) {\n        this.gl.deleteFramebuffer(Q.frameBuffers[aH].framebuffer);\n    }\n    Q.frameBuffers = [];\n    Q.glContext = [];\n}\n;\nW.prototype.init = function(aO, aN, aL) {\n    for (var aM = 0; aM < aN.length; aM++) {\n        var aH = aN[aM].getClipIDList();\n        if (aH == null) {\n            continue;\n        }\n        var aJ = this.findSameClip(aH);\n        if (aJ == null) {\n            aJ = new U(this,aO,aH);\n            this.clipContextList.push(aJ);\n        }\n        var aI = aN[aM].getDrawDataID();\n        var aK = aO.getDrawDataIndex(aI);\n        aJ.addClippedDrawData(aI, aK);\n        var aP = aL[aM];\n        aP.clipBufPre_clipContext = aJ;\n    }\n}\n;\nW.prototype.getMaskRenderTexture = function() {\n    var aH = null;\n    aH = this.dp_webgl.createFramebuffer();\n    Q.frameBuffers[this.dp_webgl.glno] = aH;\n    return this.dp_webgl.glno;\n}\n;\nW.prototype.setupClip = function(a1, aQ) {\n    var aK = 0;\n    for (var aO = 0; aO < this.clipContextList.length; aO++) {\n        var aP = this.clipContextList[aO];\n        this.calcClippedDrawTotalBounds(a1, aP);\n        if (aP.isUsing) {\n            aK++;\n        }\n    }\n    if (aK > 0) {\n        var aM = aQ.gl.getParameter(aQ.gl.FRAMEBUFFER_BINDING);\n        var aW = new Array(4);\n        aW[0] = 0;\n        aW[1] = 0;\n        aW[2] = aQ.gl.canvas.width;\n        aW[3] = aQ.gl.canvas.height;\n        aQ.gl.viewport(0, 0, Q.clippingMaskBufferSize, Q.clippingMaskBufferSize);\n        this.setupLayoutBounds(aK);\n        aQ.gl.bindFramebuffer(aQ.gl.FRAMEBUFFER, Q.frameBuffers[this.curFrameNo].framebuffer);\n        aQ.gl.clearColor(0, 0, 0, 0);\n        aQ.gl.clear(aQ.gl.COLOR_BUFFER_BIT);\n        for (var aO = 0; aO < this.clipContextList.length; aO++) {\n            var aP = this.clipContextList[aO];\n            var aT = aP.allClippedDrawRect;\n            var aN = aP.layoutChannelNo;\n            var aV = aP.layoutBounds;\n            var aJ = 0.05;\n            this.tmpBoundsOnModel._$jL(aT);\n            this.tmpBoundsOnModel.expand(aT.width * aJ, aT.height * aJ);\n            var aZ = aV.width / this.tmpBoundsOnModel.width;\n            var aY = aV.height / this.tmpBoundsOnModel.height;\n            this.tmpMatrix2.identity();\n            this.tmpMatrix2.translate(-1, -1, 0);\n            this.tmpMatrix2.scale(2, 2, 1);\n            this.tmpMatrix2.translate(aV.x, aV.y, 0);\n            this.tmpMatrix2.scale(aZ, aY, 1);\n            this.tmpMatrix2.translate(-this.tmpBoundsOnModel.x, -this.tmpBoundsOnModel.y, 0);\n            this.tmpMatrixForMask.setMatrix(this.tmpMatrix2.m);\n            this.tmpMatrix2.identity();\n            this.tmpMatrix2.translate(aV.x, aV.y, 0);\n            this.tmpMatrix2.scale(aZ, aY, 1);\n            this.tmpMatrix2.translate(-this.tmpBoundsOnModel.x, -this.tmpBoundsOnModel.y, 0);\n            this.tmpMatrixForDraw.setMatrix(this.tmpMatrix2.m);\n            var aH = this.tmpMatrixForMask.getArray();\n            for (var aX = 0; aX < 16; aX++) {\n                aP.matrixForMask[aX] = aH[aX];\n            }\n            var a0 = this.tmpMatrixForDraw.getArray();\n            for (var aX = 0; aX < 16; aX++) {\n                aP.matrixForDraw[aX] = a0[aX];\n            }\n            var aS = aP.clippingMaskDrawIndexList.length;\n            for (var aU = 0; aU < aS; aU++) {\n                var aR = aP.clippingMaskDrawIndexList[aU];\n                var aI = a1.getDrawData(aR);\n                var aL = a1._$C2(aR);\n                aQ.setClipBufPre_clipContextForMask(aP);\n                aI.draw(aQ, a1, aL);\n            }\n        }\n        aQ.gl.bindFramebuffer(aQ.gl.FRAMEBUFFER, aM);\n        aQ.setClipBufPre_clipContextForMask(null);\n        aQ.gl.viewport(aW[0], aW[1], aW[2], aW[3]);\n    }\n}\n;\nW.prototype.getColorBuffer = function() {\n    return this.colorBuffer;\n}\n;\nW.prototype.findSameClip = function(aK) {\n    for (var aN = 0; aN < this.clipContextList.length; aN++) {\n        var aO = this.clipContextList[aN];\n        var aH = aO.clipIDList.length;\n        if (aH != aK.length) {\n            continue;\n        }\n        var aI = 0;\n        for (var aM = 0; aM < aH; aM++) {\n            var aL = aO.clipIDList[aM];\n            for (var aJ = 0; aJ < aH; aJ++) {\n                if (aK[aJ] == aL) {\n                    aI++;\n                    break;\n                }\n            }\n        }\n        if (aI == aH) {\n            return aO;\n        }\n    }\n    return null;\n}\n;\nW.prototype.calcClippedDrawTotalBounds = function(a6, aV) {\n    var aU = a6._$Ri.getModelImpl().getCanvasWidth();\n    var a5 = a6._$Ri.getModelImpl().getCanvasHeight();\n    var aJ = aU > a5 ? aU : a5;\n    var aT = aJ;\n    var aR = aJ;\n    var aS = 0;\n    var aP = 0;\n    var aL = aV.clippedDrawContextList.length;\n    for (var aM = 0; aM < aL; aM++) {\n        var aW = aV.clippedDrawContextList[aM];\n        var aN = aW.drawDataIndex;\n        var aK = a6._$C2(aN);\n        if (aK._$yo()) {\n            var aX = aK.getTransformedPoints();\n            var a4 = aX.length;\n            var aI = [];\n            var aH = [];\n            var aO = 0;\n            for (var a3 = aw._$i2; a3 < a4; a3 += aw._$No) {\n                aI[aO] = aX[a3];\n                aH[aO] = aX[a3 + 1];\n                aO++;\n            }\n            var a2 = Math.min.apply(null, aI);\n            var a1 = Math.min.apply(null, aH);\n            var a0 = Math.max.apply(null, aI);\n            var aZ = Math.max.apply(null, aH);\n            if (a2 < aT) {\n                aT = a2;\n            }\n            if (a1 < aR) {\n                aR = a1;\n            }\n            if (a0 > aS) {\n                aS = a0;\n            }\n            if (aZ > aP) {\n                aP = aZ;\n            }\n        }\n    }\n    if (aT == aJ) {\n        aV.allClippedDrawRect.x = 0;\n        aV.allClippedDrawRect.y = 0;\n        aV.allClippedDrawRect.width = 0;\n        aV.allClippedDrawRect.height = 0;\n        aV.isUsing = false;\n    } else {\n        var aQ = aS - aT;\n        var aY = aP - aR;\n        aV.allClippedDrawRect.x = aT;\n        aV.allClippedDrawRect.y = aR;\n        aV.allClippedDrawRect.width = aQ;\n        aV.allClippedDrawRect.height = aY;\n        aV.isUsing = true;\n    }\n}\n;\nW.prototype.setupLayoutBounds = function(aQ) {\n    var aI = aQ / W.CHANNEL_COUNT;\n    var aP = aQ % W.CHANNEL_COUNT;\n    aI = ~~aI;\n    aP = ~~aP;\n    var aH = 0;\n    for (var aJ = 0; aJ < W.CHANNEL_COUNT; aJ++) {\n        var aM = aI + (aJ < aP ? 1 : 0);\n        if (aM == 0) {} else {\n            if (aM == 1) {\n                var aL = this.clipContextList[aH++];\n                aL.layoutChannelNo = aJ;\n                aL.layoutBounds.x = 0;\n                aL.layoutBounds.y = 0;\n                aL.layoutBounds.width = 1;\n                aL.layoutBounds.height = 1;\n            } else {\n                if (aM == 2) {\n                    for (var aO = 0; aO < aM; aO++) {\n                        var aN = aO % 2;\n                        var aK = 0;\n                        aN = ~~aN;\n                        var aL = this.clipContextList[aH++];\n                        aL.layoutChannelNo = aJ;\n                        aL.layoutBounds.x = aN * 0.5;\n                        aL.layoutBounds.y = 0;\n                        aL.layoutBounds.width = 0.5;\n                        aL.layoutBounds.height = 1;\n                    }\n                } else {\n                    if (aM <= 4) {\n                        for (var aO = 0; aO < aM; aO++) {\n                            var aN = aO % 2;\n                            var aK = aO / 2;\n                            aN = ~~aN;\n                            aK = ~~aK;\n                            var aL = this.clipContextList[aH++];\n                            aL.layoutChannelNo = aJ;\n                            aL.layoutBounds.x = aN * 0.5;\n                            aL.layoutBounds.y = aK * 0.5;\n                            aL.layoutBounds.width = 0.5;\n                            aL.layoutBounds.height = 0.5;\n                        }\n                    } else {\n                        if (aM <= 9) {\n                            for (var aO = 0; aO < aM; aO++) {\n                                var aN = aO % 3;\n                                var aK = aO / 3;\n                                aN = ~~aN;\n                                aK = ~~aK;\n                                var aL = this.clipContextList[aH++];\n                                aL.layoutChannelNo = aJ;\n                                aL.layoutBounds.x = aN / 3;\n                                aL.layoutBounds.y = aK / 3;\n                                aL.layoutBounds.width = 1 / 3;\n                                aL.layoutBounds.height = 1 / 3;\n                            }\n                        } else {\n                            q._$li(\"_$6 _$0P mask count : %d\", aM);\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n;\nfunction U(aH, aK, aI) {\n    this.clipIDList = new Array();\n    this.clipIDList = aI;\n    this.clippingMaskDrawIndexList = new Array();\n    for (var aJ = 0; aJ < aI.length; aJ++) {\n        this.clippingMaskDrawIndexList.push(aK.getDrawDataIndex(aI[aJ]));\n    }\n    this.clippedDrawContextList = new Array();\n    this.isUsing = true;\n    this.layoutChannelNo = 0;\n    this.layoutBounds = new av();\n    this.allClippedDrawRect = new av();\n    this.matrixForMask = new Float32Array(16);\n    this.matrixForDraw = new Float32Array(16);\n    this.owner = aH;\n}\nU.prototype.addClippedDrawData = function(aJ, aI) {\n    var aH = new R(aJ,aI);\n    this.clippedDrawContextList.push(aH);\n}\n;\nfunction R(aI, aH) {\n    this._$gP = aI;\n    this.drawDataIndex = aH;\n}\nfunction I() {\n    if (j) {\n        return;\n    }\n    this.color = null;\n}\nfunction ah() {\n    if (j) {\n        return;\n    }\n    this._$dP = null;\n    this._$eo = null;\n    this._$V0 = null;\n    this._$dP = 1000;\n    this._$eo = 1000;\n    this._$V0 = 1;\n    this._$a0();\n}\nah._$JT = function(aP, aN, aO) {\n    var aQ = aP / aN;\n    var a1 = aO / aN;\n    var aU = a1;\n    var aZ = 1 / 3;\n    var aR = 2 / 3;\n    var a0 = 1 - (1 - a1) * (1 - a1);\n    var a2 = 1 - (1 - aU) * (1 - aU);\n    var aM = 0;\n    var aL = ((1 - a1) * aZ) * a0 + (aU * aR + (1 - aU) * aZ) * (1 - a0);\n    var aK = (aU + (1 - aU) * aR) * a2 + (a1 * aZ + (1 - a1) * aR) * (1 - a2);\n    var aJ = 1;\n    var aY = aJ - 3 * aK + 3 * aL - aM;\n    var aX = 3 * aK - 6 * aL + 3 * aM;\n    var aW = 3 * aL - 3 * aM;\n    var aV = aM;\n    if (aQ <= 0) {\n        return 0;\n    } else {\n        if (aQ >= 1) {\n            return 1;\n        }\n    }\n    var aS = aQ;\n    var aI = aS * aS;\n    var aH = aS * aI;\n    var aT = aY * aH + aX * aI + aW * aS + aV;\n    return aT;\n}\n;\nah.prototype._$a0 = function() {}\n;\nah.prototype.setFadeIn = function(aH) {\n    this._$dP = aH;\n}\n;\nah.prototype.setFadeOut = function(aH) {\n    this._$eo = aH;\n}\n;\nah.prototype._$pT = function(aH) {\n    this._$V0 = aH;\n}\n;\nah.prototype.getFadeOut = function() {\n    return this._$eo;\n}\n;\nah.prototype._$4T = function() {\n    return this._$eo;\n}\n;\nah.prototype._$mT = function() {\n    return this._$V0;\n}\n;\nah.prototype.getDurationMSec = function() {\n    return -1;\n}\n;\nah.prototype.getLoopDurationMSec = function() {\n    return -1;\n}\n;\nah.prototype.updateParam = function(aJ, aN) {\n    if (!aN._$AT || aN._$9L) {\n        return;\n    }\n    var aL = P.getUserTimeMSec();\n    if (aN._$z2 < 0) {\n        aN._$z2 = aL;\n        aN._$bs = aL;\n        var aM = this.getDurationMSec();\n        if (aN._$Do < 0) {\n            aN._$Do = (aM <= 0) ? -1 : aN._$z2 + aM;\n        }\n    }\n    var aI = this._$V0;\n    var aH = (this._$dP == 0) ? 1 : A._$r2(((aL - aN._$bs) / (this._$dP)));\n    var aK = (this._$eo == 0 || aN._$Do < 0) ? 1 : A._$r2(((aN._$Do - aL) / (this._$eo)));\n    aI = aI * aH * aK;\n    if (!((0 <= aI && aI <= 1))) {\n        console.log(\"### assert!! ### \");\n    }\n    this.updateParamExe(aJ, aL, aI, aN);\n    if (aN._$Do > 0 && aN._$Do < aL) {\n        aN._$9L = true;\n    }\n}\n;\nah.prototype.updateParamExe = function(aH, aI, aJ, aK) {}\n;\nfunction q() {}\nq._$8s = 0;\nq._$fT = new Object();\nq.start = function(aI) {\n    var aH = q._$fT[aI];\n    if (aH == null) {\n        aH = new af();\n        aH._$r = aI;\n        q._$fT[aI] = aH;\n    }\n    aH._$0S = P.getSystemTimeMSec();\n}\n;\nq.dump = function(aJ) {\n    var aH = q._$fT[aJ];\n    if (aH != null) {\n        var aI = P.getSystemTimeMSec();\n        var aK = aI - aH._$0S;\n        console.log(aJ + \" : \" + aK + \"ms\");\n        return aK;\n    } else {\n        return -1;\n    }\n}\n;\nq.end = function(aJ) {\n    var aH = q._$fT[aJ];\n    if (aH != null) {\n        var aI = P.getSystemTimeMSec();\n        return aI - aH._$0S;\n    } else {\n        return -1;\n    }\n}\n;\nq._$li = function(aI, aH) {\n    console.log(\"_$li : \" + aI + \"\\n\", aH);\n}\n;\nq._$Ji = function(aI, aH) {\n    console.log(aI, aH);\n}\n;\nq._$dL = function(aI, aH) {\n    console.log(aI, aH);\n    console.log(\"\\n\");\n}\n;\nq._$KL = function(aJ, aI) {\n    for (var aH = 0; aH < aI; aH++) {\n        if (aH % 16 == 0 && aH > 0) {\n            console.log(\"\\n\");\n        } else {\n            if (aH % 8 == 0 && aH > 0) {\n                console.log(\"  \");\n            }\n        }\n        console.log(\"%02X \", (aJ[aH] & 255));\n    }\n    console.log(\"\\n\");\n}\n;\nq._$nr = function(aL, aI, aK) {\n    console.log(\"%s\\n\", aL);\n    var aH = aI.length;\n    for (var aJ = 0; aJ < aH; ++aJ) {\n        console.log(\"%5d\", aI[aJ]);\n        console.log(\"%s\\n\", aK);\n        console.log(\",\");\n    }\n    console.log(\"\\n\");\n}\n;\nq._$Rb = function(aH) {\n    console.log(\"dump exception : \" + aH);\n    console.log(\"stack :: \" + aH.stack);\n}\n;\nfunction af() {\n    this._$r = null;\n    this._$0S = null;\n}\nfunction F() {\n    if (j) {\n        return;\n    }\n    this.x = null;\n    this.y = null;\n    this.width = null;\n    this.height = null;\n}\nF.prototype._$8P = function() {\n    return 0.5 * (this.x + this.x + this.width);\n}\n;\nF.prototype._$6P = function() {\n    return 0.5 * (this.y + this.y + this.height);\n}\n;\nF.prototype._$EL = function() {\n    return this.x + this.width;\n}\n;\nF.prototype._$5T = function() {\n    return this.y + this.height;\n}\n;\nF.prototype._$jL = function(aI, aK, aJ, aH) {\n    this.x = aI;\n    this.y = aK;\n    this.width = aJ;\n    this.height = aH;\n}\n;\nF.prototype._$jL = function(aH) {\n    this.x = aH.x;\n    this.y = aH.y;\n    this.width = aH.width;\n    this.height = aH.height;\n}\n;\nfunction i(aH) {\n    if (j) {\n        return;\n    }\n    ak.prototype.constructor.call(this, aH);\n}\ni.prototype = new ak();\ni._$tP = new Object();\ni._$27 = function() {\n    i._$tP.clear();\n}\n;\ni.getID = function(aH) {\n    var aI = i._$tP[aH];\n    if (aI == null) {\n        aI = new i(aH);\n        i._$tP[aH] = aI;\n    }\n    return aI;\n}\n;\ni.prototype._$3s = function() {\n    return new i();\n}\n;\nfunction S() {}\nfunction z(aH) {\n    if (j) {\n        return;\n    }\n    ak.prototype.constructor.call(this, aH);\n}\nz.prototype = new ak();\nz._$tP = new Object();\nz._$27 = function() {\n    z._$tP.clear();\n}\n;\nz.getID = function(aH) {\n    var aI = z._$tP[aH];\n    if (aI == null) {\n        aI = new z(aH);\n        z._$tP[aH] = aI;\n    }\n    return aI;\n}\n;\nz.prototype._$3s = function() {\n    return new z();\n}\n;\nfunction w() {\n    if (j) {\n        return;\n    }\n    this._$vo = null;\n    this._$F2 = null;\n    this._$ao = 400;\n    this._$1S = 400;\n    w._$42++;\n}\nw._$42 = 0;\nw.prototype._$zP = function() {\n    if (this._$vo == null) {\n        this._$vo = new an();\n    }\n    if (this._$F2 == null) {\n        this._$F2 = new Array();\n    }\n}\n;\nw.prototype.getCanvasWidth = function() {\n    return this._$ao;\n}\n;\nw.prototype.getCanvasHeight = function() {\n    return this._$1S;\n}\n;\nw.prototype._$F0 = function(aH) {\n    this._$vo = aH._$nP();\n    this._$F2 = aH._$nP();\n    this._$ao = aH._$6L();\n    this._$1S = aH._$6L();\n}\n;\nw.prototype._$6S = function(aH) {\n    this._$F2.push(aH);\n}\n;\nw.prototype._$Xr = function() {\n    return this._$F2;\n}\n;\nw.prototype._$E2 = function() {\n    return this._$vo;\n}\n;\nfunction u() {\n    if (j) {\n        return;\n    }\n    this.p1 = new N();\n    this.p2 = new N();\n    this._$Fo = 0;\n    this._$Db = 0;\n    this._$L2 = 0;\n    this._$M2 = 0;\n    this._$ks = 0;\n    this._$9b = 0;\n    this._$iP = 0;\n    this._$iT = 0;\n    this._$lL = new Array();\n    this._$qP = new Array();\n    this.setup(0.3, 0.5, 0.1);\n}\nu.prototype.setup = function(aJ, aI, aH) {\n    this._$ks = this._$Yb();\n    this.p2._$xT();\n    if (arguments.length == 3) {\n        this._$Fo = aJ;\n        this._$L2 = aI;\n        this.p1._$p = aH;\n        this.p2._$p = aH;\n        this.p2.y = aJ;\n        this.setup();\n    }\n}\n;\nu.prototype.getPhysicsPoint1 = function() {\n    return this.p1;\n}\n;\nu.prototype.getPhysicsPoint2 = function() {\n    return this.p2;\n}\n;\nu.prototype._$qr = function() {\n    return this._$Db;\n}\n;\nu.prototype._$pr = function(aH) {\n    this._$Db = aH;\n}\n;\nu.prototype._$5r = function() {\n    return this._$M2;\n}\n;\nu.prototype._$Cs = function() {\n    return this._$9b;\n}\n;\nu.prototype._$Yb = function() {\n    return (-180 * (Math.atan2(this.p1.x - this.p2.x, -(this.p1.y - this.p2.y))) / Math.PI);\n}\n;\nu.prototype.addSrcParam = function(aJ, aH, aL, aI) {\n    var aK = new h(aJ,aH,aL,aI);\n    this._$lL.push(aK);\n}\n;\nu.prototype.addTargetParam = function(aJ, aH, aK, aI) {\n    var aL = new aF(aJ,aH,aK,aI);\n    this._$qP.push(aL);\n}\n;\nu.prototype.update = function(aI, aL) {\n    if (this._$iP == 0) {\n        this._$iP = this._$iT = aL;\n        this._$Fo = (Math.sqrt((this.p1.x - this.p2.x) * (this.p1.x - this.p2.x) + (this.p1.y - this.p2.y) * (this.p1.y - this.p2.y)));\n        return;\n    }\n    var aK = (aL - this._$iT) / 1000;\n    if (aK != 0) {\n        for (var aJ = this._$lL.length - 1; aJ >= 0; --aJ) {\n            var aM = this._$lL[aJ];\n            aM._$oP(aI, this);\n        }\n        this._$oo(aI, aK);\n        this._$M2 = this._$Yb();\n        this._$9b = (this._$M2 - this._$ks) / aK;\n        this._$ks = this._$M2;\n    }\n    for (var aJ = this._$qP.length - 1; aJ >= 0; --aJ) {\n        var aH = this._$qP[aJ];\n        aH._$YS(aI, this);\n    }\n    this._$iT = aL;\n}\n;\nu.prototype._$oo = function(aN, aI) {\n    if (aI < 0.033) {\n        aI = 0.033;\n    }\n    var aU = 1 / aI;\n    this.p1.vx = (this.p1.x - this.p1._$s0) * aU;\n    this.p1.vy = (this.p1.y - this.p1._$70) * aU;\n    this.p1.ax = (this.p1.vx - this.p1._$7L) * aU;\n    this.p1.ay = (this.p1.vy - this.p1._$HL) * aU;\n    this.p1.fx = this.p1.ax * this.p1._$p;\n    this.p1.fy = this.p1.ay * this.p1._$p;\n    this.p1._$xT();\n    var aM = -(Math.atan2((this.p1.y - this.p2.y), this.p1.x - this.p2.x));\n    var aL;\n    var aV;\n    var aR = Math.cos(aM);\n    var aH = Math.sin(aM);\n    var aW = 9.8 * this.p2._$p;\n    var aQ = (this._$Db * aC._$bS);\n    var aP = (aW * Math.cos(aM - aQ));\n    aL = (aP * aH);\n    aV = (aP * aR);\n    var aK = (-this.p1.fx * aH * aH);\n    var aT = (-this.p1.fy * aH * aR);\n    var aJ = ((-this.p2.vx * this._$L2));\n    var aS = ((-this.p2.vy * this._$L2));\n    this.p2.fx = ((aL + aK + aJ));\n    this.p2.fy = ((aV + aT + aS));\n    this.p2.ax = this.p2.fx / this.p2._$p;\n    this.p2.ay = this.p2.fy / this.p2._$p;\n    this.p2.vx += this.p2.ax * aI;\n    this.p2.vy += this.p2.ay * aI;\n    this.p2.x += this.p2.vx * aI;\n    this.p2.y += this.p2.vy * aI;\n    var aO = (Math.sqrt((this.p1.x - this.p2.x) * (this.p1.x - this.p2.x) + (this.p1.y - this.p2.y) * (this.p1.y - this.p2.y)));\n    this.p2.x = this.p1.x + this._$Fo * (this.p2.x - this.p1.x) / aO;\n    this.p2.y = this.p1.y + this._$Fo * (this.p2.y - this.p1.y) / aO;\n    this.p2.vx = (this.p2.x - this.p2._$s0) * aU;\n    this.p2.vy = (this.p2.y - this.p2._$70) * aU;\n    this.p2._$xT();\n}\n;\nfunction N() {\n    this._$p = 1;\n    this.x = 0;\n    this.y = 0;\n    this.vx = 0;\n    this.vy = 0;\n    this.ax = 0;\n    this.ay = 0;\n    this.fx = 0;\n    this.fy = 0;\n    this._$s0 = 0;\n    this._$70 = 0;\n    this._$7L = 0;\n    this._$HL = 0;\n}\nN.prototype._$xT = function() {\n    this._$s0 = this.x;\n    this._$70 = this.y;\n    this._$7L = this.vx;\n    this._$HL = this.vy;\n}\n;\nfunction at(aJ, aI, aH) {\n    this._$wL = null;\n    this.scale = null;\n    this._$V0 = null;\n    this._$wL = aJ;\n    this.scale = aI;\n    this._$V0 = aH;\n}\nat.prototype._$oP = function(aI, aH) {}\n;\nfunction h(aJ, aK, aI, aH) {\n    at.prototype.constructor.call(this, aK, aI, aH);\n    this._$tL = null;\n    this._$tL = aJ;\n}\nh.prototype = new at();\nh.prototype._$oP = function(aJ, aH) {\n    var aK = this.scale * aJ.getParamFloat(this._$wL);\n    var aL = aH.getPhysicsPoint1();\n    switch (this._$tL) {\n    default:\n    case u.Src.SRC_TO_X:\n        aL.x = aL.x + (aK - aL.x) * this._$V0;\n        break;\n    case u.Src.SRC_TO_Y:\n        aL.y = aL.y + (aK - aL.y) * this._$V0;\n        break;\n    case u.Src.SRC_TO_G_ANGLE:\n        var aI = aH._$qr();\n        aI = aI + (aK - aI) * this._$V0;\n        aH._$pr(aI);\n        break;\n    }\n}\n;\nfunction d(aJ, aI, aH) {\n    this._$wL = null;\n    this.scale = null;\n    this._$V0 = null;\n    this._$wL = aJ;\n    this.scale = aI;\n    this._$V0 = aH;\n}\nd.prototype._$YS = function(aI, aH) {}\n;\nfunction aF(aI, aK, aJ, aH) {\n    d.prototype.constructor.call(this, aK, aJ, aH);\n    this._$YP = null;\n    this._$YP = aI;\n}\naF.prototype = new d();\naF.prototype._$YS = function(aI, aH) {\n    switch (this._$YP) {\n    default:\n    case u.Target.TARGET_FROM_ANGLE:\n        aI.setParamFloat(this._$wL, this.scale * aH._$5r(), this._$V0);\n        break;\n    case u.Target.TARGET_FROM_ANGLE_V:\n        aI.setParamFloat(this._$wL, this.scale * aH._$Cs(), this._$V0);\n        break;\n    }\n}\n;\nu.Src = function() {}\n;\nu.Src.SRC_TO_X = \"SRC_TO_X\";\nu.Src.SRC_TO_Y = \"SRC_TO_Y\";\nu.Src.SRC_TO_G_ANGLE = \"SRC_TO_G_ANGLE\";\nu.Target = function() {}\n;\nu.Target.TARGET_FROM_ANGLE = \"TARGET_FROM_ANGLE\";\nu.Target.TARGET_FROM_ANGLE_V = \"TARGET_FROM_ANGLE_V\";\nfunction X() {\n    if (j) {\n        return;\n    }\n    this._$fL = 0;\n    this._$gL = 0;\n    this._$B0 = 1;\n    this._$z0 = 1;\n    this._$qT = 0;\n    this.reflectX = false;\n    this.reflectY = false;\n}\nX.prototype.init = function(aH) {\n    this._$fL = aH._$fL;\n    this._$gL = aH._$gL;\n    this._$B0 = aH._$B0;\n    this._$z0 = aH._$z0;\n    this._$qT = aH._$qT;\n    this.reflectX = aH.reflectX;\n    this.reflectY = aH.reflectY;\n}\n;\nX.prototype._$F0 = function(aH) {\n    this._$fL = aH._$_T();\n    this._$gL = aH._$_T();\n    this._$B0 = aH._$_T();\n    this._$z0 = aH._$_T();\n    this._$qT = aH._$_T();\n    if (aH.getFormatVersion() >= ay.LIVE2D_FORMAT_VERSION_V2_10_SDK2) {\n        this.reflectX = aH._$po();\n        this.reflectY = aH._$po();\n    }\n}\n;\nX.prototype._$e = function() {}\n;\nvar ad = function() {};\nad._$ni = function(aL, aJ, aR, aQ, aK, aI, aH, aS, aN) {\n    var aM = (aH * aI - aS * aK);\n    if (aM == 0) {\n        return null;\n    } else {\n        var aO = ((aL - aR) * aI - (aJ - aQ) * aK) / aM;\n        var aP;\n        if (aK != 0) {\n            aP = (aL - aR - aO * aH) / aK;\n        } else {\n            aP = (aJ - aQ - aO * aS) / aI;\n        }\n        if (isNaN(aP)) {\n            aP = (aL - aR - aO * aH) / aK;\n            if (isNaN(aP)) {\n                aP = (aJ - aQ - aO * aS) / aI;\n            }\n            if (isNaN(aP)) {\n                console.log(\"a is NaN @UtVector#_$ni() \");\n                console.log(\"v1x : \" + aK);\n                console.log(\"v1x != 0 ? \" + (aK != 0));\n            }\n        }\n        if (aN == null) {\n            return new Array(aP,aO);\n        } else {\n            aN[0] = aP;\n            aN[1] = aO;\n            return aN;\n        }\n    }\n}\n;\nfunction av() {\n    if (j) {\n        return;\n    }\n    this.x = null;\n    this.y = null;\n    this.width = null;\n    this.height = null;\n}\nav.prototype._$8P = function() {\n    return this.x + 0.5 * this.width;\n}\n;\nav.prototype._$6P = function() {\n    return this.y + 0.5 * this.height;\n}\n;\nav.prototype._$EL = function() {\n    return this.x + this.width;\n}\n;\nav.prototype._$5T = function() {\n    return this.y + this.height;\n}\n;\nav.prototype._$jL = function(aI, aK, aJ, aH) {\n    this.x = aI;\n    this.y = aK;\n    this.width = aJ;\n    this.height = aH;\n}\n;\nav.prototype._$jL = function(aH) {\n    this.x = aH.x;\n    this.y = aH.y;\n    this.width = aH.width;\n    this.height = aH.height;\n}\n;\nav.prototype.contains = function(aH, aI) {\n    return this.x <= this.x && this.y <= this.y && (this.x <= this.x + this.width) && (this.y <= this.y + this.height);\n}\n;\nav.prototype.expand = function(aH, aI) {\n    this.x -= aH;\n    this.y -= aI;\n    this.width += aH * 2;\n    this.height += aI * 2;\n}\n;\nfunction aG() {}\naG._$Z2 = function(bb, bo, bp, a2) {\n    var a1 = bo._$Q2(bb, bp);\n    var a3 = bb._$vs();\n    var ba = bb._$Tr();\n    bo._$zr(a3, ba, a1);\n    if (a1 <= 0) {\n        return a2[a3[0]];\n    } else {\n        if (a1 == 1) {\n            var bj = a2[a3[0]];\n            var bi = a2[a3[1]];\n            var a9 = ba[0];\n            return (bj + (bi - bj) * a9) | 0;\n        } else {\n            if (a1 == 2) {\n                var bj = a2[a3[0]];\n                var bi = a2[a3[1]];\n                var a0 = a2[a3[2]];\n                var aZ = a2[a3[3]];\n                var a9 = ba[0];\n                var a8 = ba[1];\n                var br = (bj + (bi - bj) * a9) | 0;\n                var bq = (a0 + (aZ - a0) * a9) | 0;\n                return (br + (bq - br) * a8) | 0;\n            } else {\n                if (a1 == 3) {\n                    var aP = a2[a3[0]];\n                    var aO = a2[a3[1]];\n                    var bn = a2[a3[2]];\n                    var bm = a2[a3[3]];\n                    var aK = a2[a3[4]];\n                    var aJ = a2[a3[5]];\n                    var bg = a2[a3[6]];\n                    var bf = a2[a3[7]];\n                    var a9 = ba[0];\n                    var a8 = ba[1];\n                    var a6 = ba[2];\n                    var bj = (aP + (aO - aP) * a9) | 0;\n                    var bi = (bn + (bm - bn) * a9) | 0;\n                    var a0 = (aK + (aJ - aK) * a9) | 0;\n                    var aZ = (bg + (bf - bg) * a9) | 0;\n                    var br = (bj + (bi - bj) * a8) | 0;\n                    var bq = (a0 + (aZ - a0) * a8) | 0;\n                    return (br + (bq - br) * a6) | 0;\n                } else {\n                    if (a1 == 4) {\n                        var aT = a2[a3[0]];\n                        var aS = a2[a3[1]];\n                        var bu = a2[a3[2]];\n                        var bt = a2[a3[3]];\n                        var aN = a2[a3[4]];\n                        var aM = a2[a3[5]];\n                        var bl = a2[a3[6]];\n                        var bk = a2[a3[7]];\n                        var be = a2[a3[8]];\n                        var bc = a2[a3[9]];\n                        var aX = a2[a3[10]];\n                        var aW = a2[a3[11]];\n                        var a7 = a2[a3[12]];\n                        var a5 = a2[a3[13]];\n                        var aR = a2[a3[14]];\n                        var aQ = a2[a3[15]];\n                        var a9 = ba[0];\n                        var a8 = ba[1];\n                        var a6 = ba[2];\n                        var a4 = ba[3];\n                        var aP = (aT + (aS - aT) * a9) | 0;\n                        var aO = (bu + (bt - bu) * a9) | 0;\n                        var bn = (aN + (aM - aN) * a9) | 0;\n                        var bm = (bl + (bk - bl) * a9) | 0;\n                        var aK = (be + (bc - be) * a9) | 0;\n                        var aJ = (aX + (aW - aX) * a9) | 0;\n                        var bg = (a7 + (a5 - a7) * a9) | 0;\n                        var bf = (aR + (aQ - aR) * a9) | 0;\n                        var bj = (aP + (aO - aP) * a8) | 0;\n                        var bi = (bn + (bm - bn) * a8) | 0;\n                        var a0 = (aK + (aJ - aK) * a8) | 0;\n                        var aZ = (bg + (bf - bg) * a8) | 0;\n                        var br = (bj + (bi - bj) * a6) | 0;\n                        var bq = (a0 + (aZ - a0) * a6) | 0;\n                        return (br + (bq - br) * a4) | 0;\n                    } else {\n                        var aV = 1 << a1;\n                        var aY = new Float32Array(aV);\n                        for (var bh = 0; bh < aV; bh++) {\n                            var aI = bh;\n                            var aH = 1;\n                            for (var aL = 0; aL < a1; aL++) {\n                                aH *= (aI % 2 == 0) ? (1 - ba[aL]) : ba[aL];\n                                aI /= 2;\n                            }\n                            aY[bh] = aH;\n                        }\n                        var bs = new Float32Array(aV);\n                        for (var aU = 0; aU < aV; aU++) {\n                            bs[aU] = a2[a3[aU]];\n                        }\n                        var bd = 0;\n                        for (var aU = 0; aU < aV; aU++) {\n                            bd += aY[aU] * bs[aU];\n                        }\n                        return (bd + 0.5) | 0;\n                    }\n                }\n            }\n        }\n    }\n}\n;\naG._$br = function(ba, bo, bp, bg) {\n    var a1 = bo._$Q2(ba, bp);\n    var a2 = ba._$vs();\n    var a9 = ba._$Tr();\n    bo._$zr(a2, a9, a1);\n    if (a1 <= 0) {\n        return bg[a2[0]];\n    } else {\n        if (a1 == 1) {\n            var bj = bg[a2[0]];\n            var bi = bg[a2[1]];\n            var a8 = a9[0];\n            return bj + (bi - bj) * a8;\n        } else {\n            if (a1 == 2) {\n                var bj = bg[a2[0]];\n                var bi = bg[a2[1]];\n                var a0 = bg[a2[2]];\n                var aZ = bg[a2[3]];\n                var a8 = a9[0];\n                var a7 = a9[1];\n                return (1 - a7) * (bj + (bi - bj) * a8) + a7 * (a0 + (aZ - a0) * a8);\n            } else {\n                if (a1 == 3) {\n                    var aP = bg[a2[0]];\n                    var aO = bg[a2[1]];\n                    var bn = bg[a2[2]];\n                    var bm = bg[a2[3]];\n                    var aK = bg[a2[4]];\n                    var aJ = bg[a2[5]];\n                    var bf = bg[a2[6]];\n                    var be = bg[a2[7]];\n                    var a8 = a9[0];\n                    var a7 = a9[1];\n                    var a5 = a9[2];\n                    return (1 - a5) * ((1 - a7) * (aP + (aO - aP) * a8) + a7 * (bn + (bm - bn) * a8)) + a5 * ((1 - a7) * (aK + (aJ - aK) * a8) + a7 * (bf + (be - bf) * a8));\n                } else {\n                    if (a1 == 4) {\n                        var aT = bg[a2[0]];\n                        var aS = bg[a2[1]];\n                        var bs = bg[a2[2]];\n                        var br = bg[a2[3]];\n                        var aN = bg[a2[4]];\n                        var aM = bg[a2[5]];\n                        var bl = bg[a2[6]];\n                        var bk = bg[a2[7]];\n                        var bd = bg[a2[8]];\n                        var bb = bg[a2[9]];\n                        var aX = bg[a2[10]];\n                        var aW = bg[a2[11]];\n                        var a6 = bg[a2[12]];\n                        var a4 = bg[a2[13]];\n                        var aR = bg[a2[14]];\n                        var aQ = bg[a2[15]];\n                        var a8 = a9[0];\n                        var a7 = a9[1];\n                        var a5 = a9[2];\n                        var a3 = a9[3];\n                        return (1 - a3) * ((1 - a5) * ((1 - a7) * (aT + (aS - aT) * a8) + a7 * (bs + (br - bs) * a8)) + a5 * ((1 - a7) * (aN + (aM - aN) * a8) + a7 * (bl + (bk - bl) * a8))) + a3 * ((1 - a5) * ((1 - a7) * (bd + (bb - bd) * a8) + a7 * (aX + (aW - aX) * a8)) + a5 * ((1 - a7) * (a6 + (a4 - a6) * a8) + a7 * (aR + (aQ - aR) * a8)));\n                    } else {\n                        var aV = 1 << a1;\n                        var aY = new Float32Array(aV);\n                        for (var bh = 0; bh < aV; bh++) {\n                            var aI = bh;\n                            var aH = 1;\n                            for (var aL = 0; aL < a1; aL++) {\n                                aH *= (aI % 2 == 0) ? (1 - a9[aL]) : a9[aL];\n                                aI /= 2;\n                            }\n                            aY[bh] = aH;\n                        }\n                        var bq = new Float32Array(aV);\n                        for (var aU = 0; aU < aV; aU++) {\n                            bq[aU] = bg[a2[aU]];\n                        }\n                        var bc = 0;\n                        for (var aU = 0; aU < aV; aU++) {\n                            bc += aY[aU] * bq[aU];\n                        }\n                        return bc;\n                    }\n                }\n            }\n        }\n    }\n}\n;\naG._$Vr = function(bV, bW, a5, aI, bC, a3, bX, bH) {\n    var aN = bW._$Q2(bV, a5);\n    var bw = bV._$vs();\n    var a2 = bV._$Tr();\n    bW._$zr(bw, a2, aN);\n    var aJ = aI * 2;\n    var aQ = bX;\n    if (aN <= 0) {\n        var bI = bw[0];\n        var bq = bC[bI];\n        if (bH == 2 && bX == 0) {\n            P._$jT(bq, 0, a3, 0, aJ);\n        } else {\n            for (var bt = 0; bt < aJ; ) {\n                a3[aQ] = bq[bt++];\n                a3[aQ + 1] = bq[bt++];\n                aQ += bH;\n            }\n        }\n    } else {\n        if (aN == 1) {\n            var bq = bC[bw[0]];\n            var bp = bC[bw[1]];\n            var b3 = a2[0];\n            var bT = 1 - b3;\n            for (var bt = 0; bt < aJ; ) {\n                a3[aQ] = bq[bt] * bT + bp[bt] * b3;\n                ++bt;\n                a3[aQ + 1] = bq[bt] * bT + bp[bt] * b3;\n                ++bt;\n                aQ += bH;\n            }\n        } else {\n            if (aN == 2) {\n                var bq = bC[bw[0]];\n                var bp = bC[bw[1]];\n                var aZ = bC[bw[2]];\n                var aY = bC[bw[3]];\n                var b3 = a2[0];\n                var b1 = a2[1];\n                var bT = 1 - b3;\n                var bP = 1 - b1;\n                var b2 = bP * bT;\n                var b0 = bP * b3;\n                var bM = b1 * bT;\n                var bL = b1 * b3;\n                for (var bt = 0; bt < aJ; ) {\n                    a3[aQ] = b2 * bq[bt] + b0 * bp[bt] + bM * aZ[bt] + bL * aY[bt];\n                    ++bt;\n                    a3[aQ + 1] = b2 * bq[bt] + b0 * bp[bt] + bM * aZ[bt] + bL * aY[bt];\n                    ++bt;\n                    aQ += bH;\n                }\n            } else {\n                if (aN == 3) {\n                    var ba = bC[bw[0]];\n                    var a9 = bC[bw[1]];\n                    var aP = bC[bw[2]];\n                    var aO = bC[bw[3]];\n                    var a6 = bC[bw[4]];\n                    var a4 = bC[bw[5]];\n                    var aL = bC[bw[6]];\n                    var aK = bC[bw[7]];\n                    var b3 = a2[0];\n                    var b1 = a2[1];\n                    var bZ = a2[2];\n                    var bT = 1 - b3;\n                    var bP = 1 - b1;\n                    var bN = 1 - bZ;\n                    var b8 = bN * bP * bT;\n                    var b7 = bN * bP * b3;\n                    var bU = bN * b1 * bT;\n                    var bS = bN * b1 * b3;\n                    var b6 = bZ * bP * bT;\n                    var b5 = bZ * bP * b3;\n                    var bQ = bZ * b1 * bT;\n                    var bO = bZ * b1 * b3;\n                    for (var bt = 0; bt < aJ; ) {\n                        a3[aQ] = b8 * ba[bt] + b7 * a9[bt] + bU * aP[bt] + bS * aO[bt] + b6 * a6[bt] + b5 * a4[bt] + bQ * aL[bt] + bO * aK[bt];\n                        ++bt;\n                        a3[aQ + 1] = b8 * ba[bt] + b7 * a9[bt] + bU * aP[bt] + bS * aO[bt] + b6 * a6[bt] + b5 * a4[bt] + bQ * aL[bt] + bO * aK[bt];\n                        ++bt;\n                        aQ += bH;\n                    }\n                } else {\n                    if (aN == 4) {\n                        var bD = bC[bw[0]];\n                        var bB = bC[bw[1]];\n                        var bo = bC[bw[2]];\n                        var bm = bC[bw[3]];\n                        var by = bC[bw[4]];\n                        var bx = bC[bw[5]];\n                        var be = bC[bw[6]];\n                        var bd = bC[bw[7]];\n                        var bG = bC[bw[8]];\n                        var bE = bC[bw[9]];\n                        var bv = bC[bw[10]];\n                        var bu = bC[bw[11]];\n                        var bA = bC[bw[12]];\n                        var bz = bC[bw[13]];\n                        var bn = bC[bw[14]];\n                        var bl = bC[bw[15]];\n                        var b3 = a2[0];\n                        var b1 = a2[1];\n                        var bZ = a2[2];\n                        var bY = a2[3];\n                        var bT = 1 - b3;\n                        var bP = 1 - b1;\n                        var bN = 1 - bZ;\n                        var bK = 1 - bY;\n                        var bk = bK * bN * bP * bT;\n                        var bi = bK * bN * bP * b3;\n                        var aW = bK * bN * b1 * bT;\n                        var aV = bK * bN * b1 * b3;\n                        var bc = bK * bZ * bP * bT;\n                        var bb = bK * bZ * bP * b3;\n                        var aS = bK * bZ * b1 * bT;\n                        var aR = bK * bZ * b1 * b3;\n                        var bs = bY * bN * bP * bT;\n                        var br = bY * bN * bP * b3;\n                        var a1 = bY * bN * b1 * bT;\n                        var a0 = bY * bN * b1 * b3;\n                        var bh = bY * bZ * bP * bT;\n                        var bf = bY * bZ * bP * b3;\n                        var aU = bY * bZ * b1 * bT;\n                        var aT = bY * bZ * b1 * b3;\n                        for (var bt = 0; bt < aJ; ) {\n                            a3[aQ] = bk * bD[bt] + bi * bB[bt] + aW * bo[bt] + aV * bm[bt] + bc * by[bt] + bb * bx[bt] + aS * be[bt] + aR * bd[bt] + bs * bG[bt] + br * bE[bt] + a1 * bv[bt] + a0 * bu[bt] + bh * bA[bt] + bf * bz[bt] + aU * bn[bt] + aT * bl[bt];\n                            ++bt;\n                            a3[aQ + 1] = bk * bD[bt] + bi * bB[bt] + aW * bo[bt] + aV * bm[bt] + bc * by[bt] + bb * bx[bt] + aS * be[bt] + aR * bd[bt] + bs * bG[bt] + br * bE[bt] + a1 * bv[bt] + a0 * bu[bt] + bh * bA[bt] + bf * bz[bt] + aU * bn[bt] + aT * bl[bt];\n                            ++bt;\n                            aQ += bH;\n                        }\n                    } else {\n                        var b4 = 1 << aN;\n                        var bJ = new Float32Array(b4);\n                        for (var bj = 0; bj < b4; bj++) {\n                            var aH = bj;\n                            var aM = 1;\n                            for (var bF = 0; bF < aN; bF++) {\n                                aM *= (aH % 2 == 0) ? (1 - a2[bF]) : a2[bF];\n                                aH /= 2;\n                            }\n                            bJ[bj] = aM;\n                        }\n                        var bg = new Float32Array(b4);\n                        for (var aX = 0; aX < b4; aX++) {\n                            bg[aX] = bC[bw[aX]];\n                        }\n                        for (var bt = 0; bt < aJ; ) {\n                            var a8 = 0\n                              , a7 = 0;\n                            var bR = bt + 1;\n                            for (var aX = 0; aX < b4; aX++) {\n                                a8 += bJ[aX] * bg[aX][bt];\n                                a7 += bJ[aX] * bg[aX][bR];\n                            }\n                            bt += 2;\n                            a3[aQ] = a8;\n                            a3[aQ + 1] = a7;\n                            aQ += bH;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n;\nfunction e() {\n    if (j) {\n        return;\n    }\n    this.x = null;\n    this.y = null;\n}\ne.prototype._$HT = function(aH, aI) {\n    this.x = aH;\n    this.y = aI;\n}\n;\ne.prototype._$HT = function(aH) {\n    this.x = aH.x;\n    this.y = aH.y;\n}\n;\nfunction ae() {\n    if (j) {\n        return;\n    }\n    this._$gP = null;\n    this._$dr = null;\n    this._$GS = null;\n    this._$qb = null;\n    this._$Lb = null;\n    this._$mS = null;\n    this.clipID = null;\n    this.clipIDList = new Array();\n}\nae._$ur = -2;\nae._$ES = 500;\nae._$wb = 2;\nae._$8S = 3;\nae._$52 = ae._$ES;\nae._$R2 = ae._$ES;\nae._$or = function() {\n    return ae._$52;\n}\n;\nae._$Pr = function() {\n    return ae._$R2;\n}\n;\nae.prototype.convertClipIDForV2_11 = function(aI) {\n    var aH = [];\n    if (aI == null) {\n        return null;\n    }\n    if (aI.length == 0) {\n        return null;\n    }\n    if (!/,/.test(aI)) {\n        aH.push(aI.id);\n        return aH;\n    }\n    aH = aI.id.split(\",\");\n    return aH;\n}\n;\nae.prototype._$F0 = function(aH) {\n    this._$gP = aH._$nP();\n    this._$dr = aH._$nP();\n    this._$GS = aH._$nP();\n    this._$qb = aH._$6L();\n    this._$Lb = aH._$cS();\n    this._$mS = aH._$Tb();\n    if (aH.getFormatVersion() >= ay._$T7) {\n        this.clipID = aH._$nP();\n        this.clipIDList = this.convertClipIDForV2_11(this.clipID);\n    } else {\n        this.clipIDList = [];\n    }\n    this._$MS(this._$Lb);\n}\n;\nae.prototype.getClipIDList = function() {\n    return this.clipIDList;\n}\n;\nae.prototype.init = function(aH) {}\n;\nae.prototype._$Nr = function(aH, aI) {\n    aI._$IS[0] = false;\n    aI._$Us = aG._$Z2(aH, this._$GS, aI._$IS, this._$Lb);\n    if (Q._$Zs) {} else {\n        if (aI._$IS[0]) {\n            return;\n        }\n    }\n    aI._$7s = aG._$br(aH, this._$GS, aI._$IS, this._$mS);\n}\n;\nae.prototype._$2b = function(aH, aI) {}\n;\nae.prototype.getDrawDataID = function() {\n    return this._$gP;\n}\n;\nae.prototype._$j2 = function(aH) {\n    this._$gP = aH;\n}\n;\nae.prototype.getOpacity = function(aH, aI) {\n    return aI._$7s;\n}\n;\nae.prototype._$zS = function(aH, aI) {\n    return aI._$Us;\n}\n;\nae.prototype._$MS = function(aJ) {\n    for (var aI = aJ.length - 1; aI >= 0; --aI) {\n        var aH = aJ[aI];\n        if (aH < ae._$52) {\n            ae._$52 = aH;\n        } else {\n            if (aH > ae._$R2) {\n                ae._$R2 = aH;\n            }\n        }\n    }\n}\n;\nae.prototype.getTargetBaseDataID = function() {\n    return this._$dr;\n}\n;\nae.prototype._$gs = function(aH) {\n    this._$dr = aH;\n}\n;\nae.prototype._$32 = function() {\n    return (this._$dr != null && (this._$dr != n._$2o()));\n}\n;\nae.prototype.preDraw = function(aJ, aH, aI) {}\n;\nae.prototype.draw = function(aJ, aH, aI) {}\n;\nae.prototype.getType = function() {}\n;\nae.prototype._$B2 = function(aI, aH, aJ) {}\n;\nfunction ax() {\n    if (j) {\n        return;\n    }\n    this._$Eb = ax._$ps;\n    this._$lT = 1;\n    this._$C0 = 1;\n    this._$tT = 1;\n    this._$WL = 1;\n    this.culling = false;\n    this.matrix4x4 = new Float32Array(16);\n    this.premultipliedAlpha = false;\n    this.anisotropy = 0;\n    this.clippingProcess = ax.CLIPPING_PROCESS_NONE;\n    this.clipBufPre_clipContextMask = null;\n    this.clipBufPre_clipContextDraw = null;\n    this.CHANNEL_COLORS = new Array();\n}\nax._$ps = 32;\nax.CLIPPING_PROCESS_NONE = 0;\nax.CLIPPING_PROCESS_OVERWRITE_ALPHA = 1;\nax.CLIPPING_PROCESS_MULTIPLY_ALPHA = 2;\nax.CLIPPING_PROCESS_DRAW = 3;\nax.CLIPPING_PROCESS_CLEAR_ALPHA = 4;\nax.prototype.setChannelFlagAsColor = function(aH, aI) {\n    this.CHANNEL_COLORS[aH] = aI;\n}\n;\nax.prototype.getChannelFlagAsColor = function(aH) {\n    return this.CHANNEL_COLORS[aH];\n}\n;\nax.prototype._$ZT = function() {}\n;\nax.prototype._$Uo = function(aM, aK, aJ, aL, aN, aI, aH) {}\n;\nax.prototype._$Rs = function() {\n    return -1;\n}\n;\nax.prototype._$Ds = function(aH) {}\n;\nax.prototype.setBaseColor = function(aK, aJ, aI, aH) {\n    if (aK < 0) {\n        aK = 0;\n    } else {\n        if (aK > 1) {\n            aK = 1;\n        }\n    }\n    if (aJ < 0) {\n        aJ = 0;\n    } else {\n        if (aJ > 1) {\n            aJ = 1;\n        }\n    }\n    if (aI < 0) {\n        aI = 0;\n    } else {\n        if (aI > 1) {\n            aI = 1;\n        }\n    }\n    if (aH < 0) {\n        aH = 0;\n    } else {\n        if (aH > 1) {\n            aH = 1;\n        }\n    }\n    this._$lT = aK;\n    this._$C0 = aJ;\n    this._$tT = aI;\n    this._$WL = aH;\n}\n;\nax.prototype._$WP = function(aH) {\n    this.culling = aH;\n}\n;\nax.prototype.setMatrix = function(aH) {\n    for (var aI = 0; aI < 16; aI++) {\n        this.matrix4x4[aI] = aH[aI];\n    }\n}\n;\nax.prototype._$IT = function() {\n    return this.matrix4x4;\n}\n;\nax.prototype.setPremultipliedAlpha = function(aH) {\n    this.premultipliedAlpha = aH;\n}\n;\nax.prototype.isPremultipliedAlpha = function() {\n    return this.premultipliedAlpha;\n}\n;\nax.prototype.setAnisotropy = function(aH) {\n    this.anisotropy = aH;\n}\n;\nax.prototype.getAnisotropy = function() {\n    return this.anisotropy;\n}\n;\nax.prototype.getClippingProcess = function() {\n    return this.clippingProcess;\n}\n;\nax.prototype.setClippingProcess = function(aH) {\n    this.clippingProcess = aH;\n}\n;\nax.prototype.setClipBufPre_clipContextForMask = function(aH) {\n    this.clipBufPre_clipContextMask = aH;\n}\n;\nax.prototype.getClipBufPre_clipContextMask = function() {\n    return this.clipBufPre_clipContextMask;\n}\n;\nax.prototype.setClipBufPre_clipContextForDraw = function(aH) {\n    this.clipBufPre_clipContextDraw = aH;\n}\n;\nax.prototype.getClipBufPre_clipContextDraw = function() {\n    return this.clipBufPre_clipContextDraw;\n}\n;\nfunction o() {\n    if (j) {\n        return;\n    }\n    this.a = 1;\n    this.r = 1;\n    this.g = 1;\n    this.b = 1;\n    this.scale = 1;\n    this._$ho = 1;\n    this.blendMode = Q.L2D_COLOR_BLEND_MODE_MULT;\n}\nfunction c() {\n    if (j) {\n        return;\n    }\n    this._$kP = null;\n    this._$dr = null;\n    this._$Ai = true;\n    this._$mS = null;\n}\nc._$ur = -2;\nc._$c2 = 1;\nc._$_b = 2;\nc.prototype._$F0 = function(aH) {\n    this._$kP = aH._$nP();\n    this._$dr = aH._$nP();\n}\n;\nc.prototype.readV2_opacity = function(aH) {\n    if (aH.getFormatVersion() >= ay.LIVE2D_FORMAT_VERSION_V2_10_SDK2) {\n        this._$mS = aH._$Tb();\n    }\n}\n;\nc.prototype.init = function(aH) {}\n;\nc.prototype._$Nr = function(aI, aH) {}\n;\nc.prototype.interpolateOpacity = function(aJ, aK, aI, aH) {\n    if (this._$mS == null) {\n        aI.setInterpolatedOpacity(1);\n    } else {\n        aI.setInterpolatedOpacity(aG._$br(aJ, aK, aH, this._$mS));\n    }\n}\n;\nc.prototype._$2b = function(aI, aH) {}\n;\nc.prototype._$nb = function(aL, aK, aM, aH, aI, aJ, aN) {}\n;\nc.prototype.getType = function() {}\n;\nc.prototype._$gs = function(aH) {\n    this._$dr = aH;\n}\n;\nc.prototype._$a2 = function(aH) {\n    this._$kP = aH;\n}\n;\nc.prototype.getTargetBaseDataID = function() {\n    return this._$dr;\n}\n;\nc.prototype.getBaseDataID = function() {\n    return this._$kP;\n}\n;\nc.prototype._$32 = function() {\n    return (this._$dr != null && (this._$dr != n._$2o()));\n}\n;\nfunction P() {}\nP._$W2 = 0;\nP._$CS = P._$W2;\nP._$Mo = function() {\n    return true;\n}\n;\nP._$XP = function(aI) {\n    try {\n        var aJ = getTimeMSec();\n        while (getTimeMSec() - aJ < aI) {}\n    } catch (aH) {\n        aH._$Rb();\n    }\n}\n;\nP.getUserTimeMSec = function() {\n    return (P._$CS == P._$W2) ? P.getSystemTimeMSec() : P._$CS;\n}\n;\nP.setUserTimeMSec = function(aH) {\n    P._$CS = aH;\n}\n;\nP.updateUserTimeMSec = function() {\n    return (P._$CS = P.getSystemTimeMSec());\n}\n;\nP.getTimeMSec = function() {\n    return new Date().getTime();\n}\n;\nP.getSystemTimeMSec = function() {\n    return new Date().getTime();\n}\n;\nP._$Q = function(aH) {}\n;\nP._$jT = function(aM, aJ, aI, aL, aH) {\n    for (var aK = 0; aK < aH; aK++) {\n        aI[aL + aK] = aM[aJ + aK];\n    }\n}\n;\nfunction aA() {\n    if (j) {\n        return;\n    }\n    this._$VP = 0;\n    this._$wL = null;\n    this._$GP = null;\n    this._$8o = aA._$ds;\n    this._$2r = -1;\n    this._$O2 = 0;\n    this._$ri = 0;\n}\naA._$ds = -2;\naA.prototype._$F0 = function(aH) {\n    this._$wL = aH._$nP();\n    this._$VP = aH._$6L();\n    this._$GP = aH._$nP();\n}\n;\naA.prototype.getParamIndex = function(aH) {\n    if (this._$2r != aH) {\n        this._$8o = aA._$ds;\n    }\n    return this._$8o;\n}\n;\naA.prototype._$Pb = function(aI, aH) {\n    this._$8o = aI;\n    this._$2r = aH;\n}\n;\naA.prototype.getParamID = function() {\n    return this._$wL;\n}\n;\naA.prototype._$yP = function(aH) {\n    this._$wL = aH;\n}\n;\naA.prototype._$N2 = function() {\n    return this._$VP;\n}\n;\naA.prototype._$d2 = function() {\n    return this._$GP;\n}\n;\naA.prototype._$t2 = function(aI, aH) {\n    this._$VP = aI;\n    this._$GP = aH;\n}\n;\naA.prototype._$Lr = function() {\n    return this._$O2;\n}\n;\naA.prototype._$wr = function(aH) {\n    this._$O2 = aH;\n}\n;\naA.prototype._$SL = function() {\n    return this._$ri;\n}\n;\naA.prototype._$AL = function(aH) {\n    this._$ri = aH;\n}\n;\nfunction G() {}\nG.startsWith = function(aJ, aL, aK) {\n    var aH = aL + aK.length;\n    if (aH >= aJ.length) {\n        return false;\n    }\n    for (var aI = aL; aI < aH; aI++) {\n        if (G.getChar(aJ, aI) != aK.charAt(aI - aL)) {\n            return false;\n        }\n    }\n    return true;\n}\n;\nG.getChar = function(aI, aH) {\n    return String.fromCharCode(aI.getUint8(aH));\n}\n;\nG.createString = function(aM, aL, aJ) {\n    var aH = new ArrayBuffer(aJ * 2);\n    var aK = new Uint16Array(aH);\n    for (var aI = 0; aI < aJ; aI++) {\n        aK[aI] = aM.getUint8(aL + aI);\n    }\n    return String.fromCharCode.apply(null, aK);\n}\n;\nG._$LS = function(aP, aM, aR, aK) {\n    if (aP instanceof ArrayBuffer) {\n        aP = new DataView(aP);\n    }\n    var aL = aR;\n    var aJ = false;\n    var aQ = false;\n    var aS = 0;\n    var aO = G.getChar(aP, aL);\n    if (aO == \"-\") {\n        aJ = true;\n        aL++;\n    }\n    var aN = false;\n    for (; aL < aM; aL++) {\n        aO = G.getChar(aP, aL);\n        switch (aO) {\n        case \"0\":\n            aS = aS * 10;\n            break;\n        case \"1\":\n            aS = aS * 10 + 1;\n            break;\n        case \"2\":\n            aS = aS * 10 + 2;\n            break;\n        case \"3\":\n            aS = aS * 10 + 3;\n            break;\n        case \"4\":\n            aS = aS * 10 + 4;\n            break;\n        case \"5\":\n            aS = aS * 10 + 5;\n            break;\n        case \"6\":\n            aS = aS * 10 + 6;\n            break;\n        case \"7\":\n            aS = aS * 10 + 7;\n            break;\n        case \"8\":\n            aS = aS * 10 + 8;\n            break;\n        case \"9\":\n            aS = aS * 10 + 9;\n            break;\n        case \".\":\n            aQ = true;\n            aL++;\n            aN = true;\n            break;\n        default:\n            aN = true;\n            break;\n        }\n        if (aN) {\n            break;\n        }\n    }\n    if (aQ) {\n        var aI = 0.1;\n        var aH = false;\n        for (; aL < aM; aL++) {\n            aO = G.getChar(aP, aL);\n            switch (aO) {\n            case \"0\":\n                break;\n            case \"1\":\n                aS += aI * 1;\n                break;\n            case \"2\":\n                aS += aI * 2;\n                break;\n            case \"3\":\n                aS += aI * 3;\n                break;\n            case \"4\":\n                aS += aI * 4;\n                break;\n            case \"5\":\n                aS += aI * 5;\n                break;\n            case \"6\":\n                aS += aI * 6;\n                break;\n            case \"7\":\n                aS += aI * 7;\n                break;\n            case \"8\":\n                aS += aI * 8;\n                break;\n            case \"9\":\n                aS += aI * 9;\n                break;\n            default:\n                aH = true;\n                break;\n            }\n            aI *= 0.1;\n            if (aH) {\n                break;\n            }\n        }\n    }\n    if (aJ) {\n        aS = -aS;\n    }\n    aK[0] = aL;\n    return aS;\n}\n;\nfunction g() {\n    if (j) {\n        return;\n    }\n    this._$Ob = null;\n}\ng.prototype._$zP = function() {\n    this._$Ob = new Array();\n}\n;\ng.prototype._$F0 = function(aH) {\n    this._$Ob = aH._$nP();\n}\n;\ng.prototype._$Ur = function(aK) {\n    if (aK._$WS()) {\n        return true;\n    }\n    var aH = aK._$v2();\n    for (var aJ = this._$Ob.length - 1; aJ >= 0; --aJ) {\n        var aI = this._$Ob[aJ].getParamIndex(aH);\n        if (aI == aA._$ds) {\n            aI = aK.getParamIndex(this._$Ob[aJ].getParamID());\n        }\n        if (aK._$Xb(aI)) {\n            return true;\n        }\n    }\n    return false;\n}\n;\ng.prototype._$Q2 = function(aL, aV) {\n    var aX = this._$Ob.length;\n    var aJ = aL._$v2();\n    var aN = 0;\n    var aI;\n    var aQ;\n    for (var aK = 0; aK < aX; aK++) {\n        var aH = this._$Ob[aK];\n        aI = aH.getParamIndex(aJ);\n        if (aI == aA._$ds) {\n            aI = aL.getParamIndex(aH.getParamID());\n            aH._$Pb(aI, aJ);\n        }\n        if (aI < 0) {\n            throw new Exception(\"err 23242 : \" + aH.getParamID());\n        }\n        var aU = aI < 0 ? 0 : aL.getParamFloat(aI);\n        aQ = aH._$N2();\n        var aM = aH._$d2();\n        var aP = -1;\n        var aT = 0;\n        var aS;\n        var aR;\n        if (aQ < 1) {} else {\n            if (aQ == 1) {\n                aS = aM[0];\n                if (aS - aw._$J < aU && aU < aS + aw._$J) {\n                    aP = 0;\n                    aT = 0;\n                } else {\n                    aP = 0;\n                    aV[0] = true;\n                }\n            } else {\n                aS = aM[0];\n                if (aU < aS - aw._$J) {\n                    aP = 0;\n                    aV[0] = true;\n                } else {\n                    if (aU < aS + aw._$J) {\n                        aP = 0;\n                    } else {\n                        var aW = false;\n                        for (var aO = 1; aO < aQ; ++aO) {\n                            aR = aM[aO];\n                            if (aU < aR + aw._$J) {\n                                if (aR - aw._$J < aU) {\n                                    aP = aO;\n                                } else {\n                                    aP = aO - 1;\n                                    aT = (aU - aS) / (aR - aS);\n                                    aN++;\n                                }\n                                aW = true;\n                                break;\n                            }\n                            aS = aR;\n                        }\n                        if (!aW) {\n                            aP = aQ - 1;\n                            aT = 0;\n                            aV[0] = true;\n                        }\n                    }\n                }\n            }\n        }\n        aH._$wr(aP);\n        aH._$AL(aT);\n    }\n    return aN;\n}\n;\ng.prototype._$zr = function(aN, aT, aP) {\n    var aR = 1 << aP;\n    if (aR + 1 > aw._$Qb) {\n        console.log(\"err 23245\\n\");\n    }\n    var aS = this._$Ob.length;\n    var aK = 1;\n    var aH = 1;\n    var aJ = 0;\n    for (var aQ = 0; aQ < aR; ++aQ) {\n        aN[aQ] = 0;\n    }\n    for (var aL = 0; aL < aS; ++aL) {\n        var aI = this._$Ob[aL];\n        if (aI._$SL() == 0) {\n            var aO = aI._$Lr() * aK;\n            if (aO < 0 && Q._$3T) {\n                throw new Exception(\"err 23246\");\n            }\n            for (var aQ = 0; aQ < aR; ++aQ) {\n                aN[aQ] += aO;\n            }\n        } else {\n            var aO = aK * aI._$Lr();\n            var aM = aK * (aI._$Lr() + 1);\n            for (var aQ = 0; aQ < aR; ++aQ) {\n                aN[aQ] += ((aQ / aH | 0) % 2 == 0) ? aO : aM;\n            }\n            aT[aJ++] = aI._$SL();\n            aH *= 2;\n        }\n        aK *= aI._$N2();\n    }\n    aN[aR] = 65535;\n    aT[aJ] = -1;\n}\n;\ng.prototype._$h2 = function(aJ, aH, aK) {\n    var aM = new Float32Array(aH);\n    for (var aL = 0; aL < aH; ++aL) {\n        aM[aL] = aK[aL];\n    }\n    var aI = new aA();\n    aI._$yP(aJ);\n    aI._$t2(aH, aM);\n    this._$Ob.push(aI);\n}\n;\ng.prototype._$J2 = function(aO) {\n    var aN = aO;\n    var aM = this._$Ob.length;\n    for (var aK = 0; aK < aM; ++aK) {\n        var aI = this._$Ob[aK];\n        var aH = aI._$N2();\n        var aJ = aN % aI._$N2();\n        var aL = aI._$d2()[aJ];\n        console.log(\"%s[%d]=%7.2f / \", aI.getParamID(), aJ, aL);\n        aN /= aH;\n    }\n    console.log(\"\\n\");\n}\n;\ng.prototype.getParamCount = function() {\n    return this._$Ob.length;\n}\n;\ng.prototype._$zs = function() {\n    return this._$Ob;\n}\n;\nfunction ac() {\n    this.m = new Float32Array(16);\n    this.identity();\n}\nac.prototype.identity = function() {\n    for (var aH = 0; aH < 16; aH++) {\n        this.m[aH] = ((aH % 5) == 0) ? 1 : 0;\n    }\n}\n;\nac.prototype.getArray = function() {\n    return this.m;\n}\n;\nac.prototype.getCopyMatrix = function() {\n    return new Float32Array(this.m);\n}\n;\nac.prototype.setMatrix = function(aI) {\n    if (aI == null || aI.length != 16) {\n        return;\n    }\n    for (var aH = 0; aH < 16; aH++) {\n        this.m[aH] = aI[aH];\n    }\n}\n;\nac.prototype.mult = function(aH, aJ, aI) {\n    if (aJ == null) {\n        return null;\n    }\n    if (this == aJ) {\n        this.mult_safe(this.m, aH.m, aJ.m, aI);\n    } else {\n        this.mult_fast(this.m, aH.m, aJ.m, aI);\n    }\n    return aJ;\n}\n;\nac.prototype.mult_safe = function(aI, aH, aM, aJ) {\n    if (aI == aM) {\n        var aL = new Array(16);\n        this.mult_fast(aI, aH, aL, aJ);\n        for (var aK = 15; aK >= 0; --aK) {\n            aM[aK] = aL[aK];\n        }\n    } else {\n        this.mult_fast(aI, aH, aM, aJ);\n    }\n}\n;\nac.prototype.mult_fast = function(aI, aH, aK, aJ) {\n    if (aJ) {\n        aK[0] = aI[0] * aH[0] + aI[4] * aH[1] + aI[8] * aH[2];\n        aK[4] = aI[0] * aH[4] + aI[4] * aH[5] + aI[8] * aH[6];\n        aK[8] = aI[0] * aH[8] + aI[4] * aH[9] + aI[8] * aH[10];\n        aK[12] = aI[0] * aH[12] + aI[4] * aH[13] + aI[8] * aH[14] + aI[12];\n        aK[1] = aI[1] * aH[0] + aI[5] * aH[1] + aI[9] * aH[2];\n        aK[5] = aI[1] * aH[4] + aI[5] * aH[5] + aI[9] * aH[6];\n        aK[9] = aI[1] * aH[8] + aI[5] * aH[9] + aI[9] * aH[10];\n        aK[13] = aI[1] * aH[12] + aI[5] * aH[13] + aI[9] * aH[14] + aI[13];\n        aK[2] = aI[2] * aH[0] + aI[6] * aH[1] + aI[10] * aH[2];\n        aK[6] = aI[2] * aH[4] + aI[6] * aH[5] + aI[10] * aH[6];\n        aK[10] = aI[2] * aH[8] + aI[6] * aH[9] + aI[10] * aH[10];\n        aK[14] = aI[2] * aH[12] + aI[6] * aH[13] + aI[10] * aH[14] + aI[14];\n        aK[3] = aK[7] = aK[11] = 0;\n        aK[15] = 1;\n    } else {\n        aK[0] = aI[0] * aH[0] + aI[4] * aH[1] + aI[8] * aH[2] + aI[12] * aH[3];\n        aK[4] = aI[0] * aH[4] + aI[4] * aH[5] + aI[8] * aH[6] + aI[12] * aH[7];\n        aK[8] = aI[0] * aH[8] + aI[4] * aH[9] + aI[8] * aH[10] + aI[12] * aH[11];\n        aK[12] = aI[0] * aH[12] + aI[4] * aH[13] + aI[8] * aH[14] + aI[12] * aH[15];\n        aK[1] = aI[1] * aH[0] + aI[5] * aH[1] + aI[9] * aH[2] + aI[13] * aH[3];\n        aK[5] = aI[1] * aH[4] + aI[5] * aH[5] + aI[9] * aH[6] + aI[13] * aH[7];\n        aK[9] = aI[1] * aH[8] + aI[5] * aH[9] + aI[9] * aH[10] + aI[13] * aH[11];\n        aK[13] = aI[1] * aH[12] + aI[5] * aH[13] + aI[9] * aH[14] + aI[13] * aH[15];\n        aK[2] = aI[2] * aH[0] + aI[6] * aH[1] + aI[10] * aH[2] + aI[14] * aH[3];\n        aK[6] = aI[2] * aH[4] + aI[6] * aH[5] + aI[10] * aH[6] + aI[14] * aH[7];\n        aK[10] = aI[2] * aH[8] + aI[6] * aH[9] + aI[10] * aH[10] + aI[14] * aH[11];\n        aK[14] = aI[2] * aH[12] + aI[6] * aH[13] + aI[10] * aH[14] + aI[14] * aH[15];\n        aK[3] = aI[3] * aH[0] + aI[7] * aH[1] + aI[11] * aH[2] + aI[15] * aH[3];\n        aK[7] = aI[3] * aH[4] + aI[7] * aH[5] + aI[11] * aH[6] + aI[15] * aH[7];\n        aK[11] = aI[3] * aH[8] + aI[7] * aH[9] + aI[11] * aH[10] + aI[15] * aH[11];\n        aK[15] = aI[3] * aH[12] + aI[7] * aH[13] + aI[11] * aH[14] + aI[15] * aH[15];\n    }\n}\n;\nac.prototype.translate = function(aH, aJ, aI) {\n    this.m[12] = this.m[0] * aH + this.m[4] * aJ + this.m[8] * aI + this.m[12];\n    this.m[13] = this.m[1] * aH + this.m[5] * aJ + this.m[9] * aI + this.m[13];\n    this.m[14] = this.m[2] * aH + this.m[6] * aJ + this.m[10] * aI + this.m[14];\n    this.m[15] = this.m[3] * aH + this.m[7] * aJ + this.m[11] * aI + this.m[15];\n}\n;\nac.prototype.scale = function(aJ, aI, aH) {\n    this.m[0] *= aJ;\n    this.m[4] *= aI;\n    this.m[8] *= aH;\n    this.m[1] *= aJ;\n    this.m[5] *= aI;\n    this.m[9] *= aH;\n    this.m[2] *= aJ;\n    this.m[6] *= aI;\n    this.m[10] *= aH;\n    this.m[3] *= aJ;\n    this.m[7] *= aI;\n    this.m[11] *= aH;\n}\n;\nac.prototype.rotateX = function(aH) {\n    var aK = aC.fcos(aH);\n    var aJ = aC._$9(aH);\n    var aI = this.m[4];\n    this.m[4] = aI * aK + this.m[8] * aJ;\n    this.m[8] = aI * -aJ + this.m[8] * aK;\n    aI = this.m[5];\n    this.m[5] = aI * aK + this.m[9] * aJ;\n    this.m[9] = aI * -aJ + this.m[9] * aK;\n    aI = this.m[6];\n    this.m[6] = aI * aK + this.m[10] * aJ;\n    this.m[10] = aI * -aJ + this.m[10] * aK;\n    aI = this.m[7];\n    this.m[7] = aI * aK + this.m[11] * aJ;\n    this.m[11] = aI * -aJ + this.m[11] * aK;\n}\n;\nac.prototype.rotateY = function(aH) {\n    var aK = aC.fcos(aH);\n    var aJ = aC._$9(aH);\n    var aI = this.m[0];\n    this.m[0] = aI * aK + this.m[8] * -aJ;\n    this.m[8] = aI * aJ + this.m[8] * aK;\n    aI = this.m[1];\n    this.m[1] = aI * aK + this.m[9] * -aJ;\n    this.m[9] = aI * aJ + this.m[9] * aK;\n    aI = m[2];\n    this.m[2] = aI * aK + this.m[10] * -aJ;\n    this.m[10] = aI * aJ + this.m[10] * aK;\n    aI = m[3];\n    this.m[3] = aI * aK + this.m[11] * -aJ;\n    this.m[11] = aI * aJ + this.m[11] * aK;\n}\n;\nac.prototype.rotateZ = function(aH) {\n    var aK = aC.fcos(aH);\n    var aJ = aC._$9(aH);\n    var aI = this.m[0];\n    this.m[0] = aI * aK + this.m[4] * aJ;\n    this.m[4] = aI * -aJ + this.m[4] * aK;\n    aI = this.m[1];\n    this.m[1] = aI * aK + this.m[5] * aJ;\n    this.m[5] = aI * -aJ + this.m[5] * aK;\n    aI = this.m[2];\n    this.m[2] = aI * aK + this.m[6] * aJ;\n    this.m[6] = aI * -aJ + this.m[6] * aK;\n    aI = this.m[3];\n    this.m[3] = aI * aK + this.m[7] * aJ;\n    this.m[7] = aI * -aJ + this.m[7] * aK;\n}\n;\nfunction Z(aH) {\n    if (j) {\n        return;\n    }\n    ak.prototype.constructor.call(this, aH);\n}\nZ.prototype = new ak();\nZ._$tP = new Object();\nZ._$27 = function() {\n    Z._$tP.clear();\n}\n;\nZ.getID = function(aH) {\n    var aI = Z._$tP[aH];\n    if (aI == null) {\n        aI = new Z(aH);\n        Z._$tP[aH] = aI;\n    }\n    return aI;\n}\n;\nZ.prototype._$3s = function() {\n    return new Z();\n}\n;\nfunction aD() {\n    if (j) {\n        return;\n    }\n    this._$7 = 1;\n    this._$f = 0;\n    this._$H = 0;\n    this._$g = 1;\n    this._$k = 0;\n    this._$w = 0;\n    this._$hi = STATE_IDENTITY;\n    this._$Z = _$pS;\n}\naD._$kS = -1;\naD._$pS = 0;\naD._$hb = 1;\naD.STATE_IDENTITY = 0;\naD._$gb = 1;\naD._$fo = 2;\naD._$go = 4;\naD.prototype.transform = function(aK, aI, aH) {\n    var aT, aS, aR, aM, aL, aJ;\n    var aQ = 0;\n    var aN = 0;\n    switch (this._$hi) {\n    default:\n        return;\n    case (aD._$go | aD._$fo | aD._$gb):\n        aT = this._$7;\n        aS = this._$H;\n        aR = this._$k;\n        aM = this._$f;\n        aL = this._$g;\n        aJ = this._$w;\n        while (--aH >= 0) {\n            var aP = aK[aQ++];\n            var aO = aK[aQ++];\n            aI[aN++] = (aT * aP + aS * aO + aR);\n            aI[aN++] = (aM * aP + aL * aO + aJ);\n        }\n        return;\n    case (aD._$go | aD._$fo):\n        aT = this._$7;\n        aS = this._$H;\n        aM = this._$f;\n        aL = this._$g;\n        while (--aH >= 0) {\n            var aP = aK[aQ++];\n            var aO = aK[aQ++];\n            aI[aN++] = (aT * aP + aS * aO);\n            aI[aN++] = (aM * aP + aL * aO);\n        }\n        return;\n    case (aD._$go | aD._$gb):\n        aS = this._$H;\n        aR = this._$k;\n        aM = this._$f;\n        aJ = this._$w;\n        while (--aH >= 0) {\n            var aP = aK[aQ++];\n            aI[aN++] = (aS * aK[aQ++] + aR);\n            aI[aN++] = (aM * aP + aJ);\n        }\n        return;\n    case (aD._$go):\n        aS = this._$H;\n        aM = this._$f;\n        while (--aH >= 0) {\n            var aP = aK[aQ++];\n            aI[aN++] = (aS * aK[aQ++]);\n            aI[aN++] = (aM * aP);\n        }\n        return;\n    case (aD._$fo | aD._$gb):\n        aT = this._$7;\n        aR = this._$k;\n        aL = this._$g;\n        aJ = this._$w;\n        while (--aH >= 0) {\n            aI[aN++] = (aT * aK[aQ++] + aR);\n            aI[aN++] = (aL * aK[aQ++] + aJ);\n        }\n        return;\n    case (aD._$fo):\n        aT = this._$7;\n        aL = this._$g;\n        while (--aH >= 0) {\n            aI[aN++] = (aT * aK[aQ++]);\n            aI[aN++] = (aL * aK[aQ++]);\n        }\n        return;\n    case (aD._$gb):\n        aR = this._$k;\n        aJ = this._$w;\n        while (--aH >= 0) {\n            aI[aN++] = (aK[aQ++] + aR);\n            aI[aN++] = (aK[aQ++] + aJ);\n        }\n        return;\n    case (aD.STATE_IDENTITY):\n        if (aK != aI || aQ != aN) {\n            P._$jT(aK, aQ, aI, aN, aH * 2);\n        }\n        return;\n    }\n}\n;\naD.prototype.update = function() {\n    if (this._$H == 0 && this._$f == 0) {\n        if (this._$7 == 1 && this._$g == 1) {\n            if (this._$k == 0 && this._$w == 0) {\n                this._$hi = aD.STATE_IDENTITY;\n                this._$Z = aD._$pS;\n            } else {\n                this._$hi = aD._$gb;\n                this._$Z = aD._$hb;\n            }\n        } else {\n            if (this._$k == 0 && this._$w == 0) {\n                this._$hi = aD._$fo;\n                this._$Z = aD._$kS;\n            } else {\n                this._$hi = (aD._$fo | aD._$gb);\n                this._$Z = aD._$kS;\n            }\n        }\n    } else {\n        if (this._$7 == 0 && this._$g == 0) {\n            if (this._$k == 0 && this._$w == 0) {\n                this._$hi = aD._$go;\n                this._$Z = aD._$kS;\n            } else {\n                this._$hi = (aD._$go | aD._$gb);\n                this._$Z = aD._$kS;\n            }\n        } else {\n            if (this._$k == 0 && this._$w == 0) {\n                this._$hi = (aD._$go | aD._$fo);\n                this._$Z = aD._$kS;\n            } else {\n                this._$hi = (aD._$go | aD._$fo | aD._$gb);\n                this._$Z = aD._$kS;\n            }\n        }\n    }\n}\n;\naD.prototype._$RT = function(aK) {\n    this._$IT(aK);\n    var aJ = aK[0];\n    var aH = aK[2];\n    var aN = aK[1];\n    var aM = aK[3];\n    var aI = Math.sqrt(aJ * aJ + aN * aN);\n    var aL = aJ * aM - aH * aN;\n    if (aI == 0) {\n        if (Q._$so) {\n            console.log(\"affine._$RT() / rt==0\");\n        }\n    } else {\n        aK[0] = aI;\n        aK[1] = aL / aI;\n        aK[2] = (aN * aM + aJ * aH) / aL;\n        aK[3] = Math.atan2(aN, aJ);\n    }\n}\n;\naD.prototype._$ho = function(aN, aM, aI, aH) {\n    var aL = new Float32Array(6);\n    var aK = new Float32Array(6);\n    aN._$RT(aL);\n    aM._$RT(aK);\n    var aJ = new Float32Array(6);\n    aJ[0] = aL[0] + (aK[0] - aL[0]) * aI;\n    aJ[1] = aL[1] + (aK[1] - aL[1]) * aI;\n    aJ[2] = aL[2] + (aK[2] - aL[2]) * aI;\n    aJ[3] = aL[3] + (aK[3] - aL[3]) * aI;\n    aJ[4] = aL[4] + (aK[4] - aL[4]) * aI;\n    aJ[5] = aL[5] + (aK[5] - aL[5]) * aI;\n    aH._$CT(aJ);\n}\n;\naD.prototype._$CT = function(aJ) {\n    var aI = Math.cos(aJ[3]);\n    var aH = Math.sin(aJ[3]);\n    this._$7 = aJ[0] * aI;\n    this._$f = aJ[0] * aH;\n    this._$H = aJ[1] * (aJ[2] * aI - aH);\n    this._$g = aJ[1] * (aJ[2] * aH + aI);\n    this._$k = aJ[4];\n    this._$w = aJ[5];\n    this.update();\n}\n;\naD.prototype._$IT = function(aH) {\n    aH[0] = this._$7;\n    aH[1] = this._$f;\n    aH[2] = this._$H;\n    aH[3] = this._$g;\n    aH[4] = this._$k;\n    aH[5] = this._$w;\n}\n;\nfunction Y() {\n    if (j) {\n        return;\n    }\n    ah.prototype.constructor.call(this);\n    this.motions = new Array();\n    this._$7r = null;\n    this._$7r = Y._$Co++;\n    this._$D0 = 30;\n    this._$yT = 0;\n    this._$E = true;\n    this.loopFadeIn = true;\n    this._$AS = -1;\n    _$a0();\n}\nY.prototype = new ah();\nY._$cs = \"VISIBLE:\";\nY._$ar = \"LAYOUT:\";\nY._$Co = 0;\nY._$D2 = [];\nY._$1T = 1;\nY.loadMotion = function(aR) {\n    var aM = new Y();\n    var aI = [0];\n    var aP = aR.length;\n    aM._$yT = 0;\n    for (var aJ = 0; aJ < aP; ++aJ) {\n        var aQ = (aR[aJ] & 255);\n        if (aQ == \"\\n\" || aQ == \"\\r\") {\n            continue;\n        }\n        if (aQ == \"#\") {\n            for (; aJ < aP; ++aJ) {\n                if (aR[aJ] == \"\\n\" || aR[aJ] == \"\\r\") {\n                    break;\n                }\n            }\n            continue;\n        }\n        if (aQ == \"$\") {\n            var aT = aJ;\n            var aK = -1;\n            for (; aJ < aP; ++aJ) {\n                aQ = (aR[aJ] & 255);\n                if (aQ == \"\\r\" || aQ == \"\\n\") {\n                    break;\n                }\n                if (aQ == \"=\") {\n                    aK = aJ;\n                    break;\n                }\n            }\n            var aO = false;\n            if (aK >= 0) {\n                if (aK == aT + 4 && aR[aT + 1] == \"f\" && aR[aT + 2] == \"p\" && aR[aT + 3] == \"s\") {\n                    aO = true;\n                }\n                for (aJ = aK + 1; aJ < aP; ++aJ) {\n                    aQ = (aR[aJ] & 255);\n                    if (aQ == \"\\r\" || aQ == \"\\n\") {\n                        break;\n                    }\n                    if (aQ == \",\" || aQ == \" \" || aQ == \"\\t\") {\n                        continue;\n                    }\n                    var aL = G._$LS(aR, aP, aJ, aI);\n                    if (aI[0] > 0) {\n                        if (aO && 5 < aL && aL < 121) {\n                            aM._$D0 = aL;\n                        }\n                    }\n                    aJ = aI[0];\n                }\n            }\n            for (; aJ < aP; ++aJ) {\n                if (aR[aJ] == \"\\n\" || aR[aJ] == \"\\r\") {\n                    break;\n                }\n            }\n            continue;\n        }\n        if ((\"a\" <= aQ && aQ <= \"z\") || (\"A\" <= aQ && aQ <= \"Z\") || aQ == \"_\") {\n            var aT = aJ;\n            var aK = -1;\n            for (; aJ < aP; ++aJ) {\n                aQ = (aR[aJ] & 255);\n                if (aQ == \"\\r\" || aQ == \"\\n\") {\n                    break;\n                }\n                if (aQ == \"=\") {\n                    aK = aJ;\n                    break;\n                }\n            }\n            if (aK >= 0) {\n                var aN = new t();\n                if (G.startsWith(aR, aT, Y._$cs)) {\n                    aN._$RP = t._$hs;\n                    aN._$4P = new String(aR,aT,aK - aT);\n                } else {\n                    if (G.startsWith(aR, aT, Y._$ar)) {\n                        aN._$4P = new String(aR,aT + 7,aK - aT - 7);\n                        if (G.startsWith(aR, aT + 7, \"ANCHOR_X\")) {\n                            aN._$RP = t._$xs;\n                        } else {\n                            if (G.startsWith(aR, aT + 7, \"ANCHOR_Y\")) {\n                                aN._$RP = t._$us;\n                            } else {\n                                if (G.startsWith(aR, aT + 7, \"SCALE_X\")) {\n                                    aN._$RP = t._$qs;\n                                } else {\n                                    if (G.startsWith(aR, aT + 7, \"SCALE_Y\")) {\n                                        aN._$RP = t._$Ys;\n                                    } else {\n                                        if (G.startsWith(aR, aT + 7, \"X\")) {\n                                            aN._$RP = t._$ws;\n                                        } else {\n                                            if (G.startsWith(aR, aT + 7, \"Y\")) {\n                                                aN._$RP = t._$Ns;\n                                            }\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    } else {\n                        aN._$RP = t._$Fr;\n                        aN._$4P = new String(aR,aT,aK - aT);\n                    }\n                }\n                aM.motions.push(aN);\n                var aS = 0;\n                Y._$D2.clear();\n                for (aJ = aK + 1; aJ < aP; ++aJ) {\n                    aQ = (aR[aJ] & 255);\n                    if (aQ == \"\\r\" || aQ == \"\\n\") {\n                        break;\n                    }\n                    if (aQ == \",\" || aQ == \" \" || aQ == \"\\t\") {\n                        continue;\n                    }\n                    var aL = G._$LS(aR, aP, aJ, aI);\n                    if (aI[0] > 0) {\n                        Y._$D2.push(aL);\n                        aS++;\n                        var aH = aI[0];\n                        if (aH < aJ) {\n                            console.log(\"_$n0 _$hi . @Live2DMotion loadMotion()\\n\");\n                            break;\n                        }\n                        aJ = aH;\n                    }\n                }\n                aN._$I0 = Y._$D2._$BL();\n                if (aS > aM._$yT) {\n                    aM._$yT = aS;\n                }\n            }\n        }\n    }\n    aM._$AS = ((1000 * aM._$yT) / aM._$D0) | 0;\n    return aM;\n}\n;\nY.prototype.getDurationMSec = function() {\n    return this._$AS;\n}\n;\nY.prototype.dump = function() {\n    for (var aJ = 0; aJ < this.motions.length; aJ++) {\n        var aH = this.motions[aJ];\n        console.log(\"_$wL[%s] [%d]. \", aH._$4P, aH._$I0.length);\n        for (var aI = 0; aI < aH._$I0.length && aI < 10; aI++) {\n            console.log(\"%5.2f ,\", aH._$I0[aI]);\n        }\n        console.log(\"\\n\");\n    }\n}\n;\nY.prototype.updateParamExe = function(aH, aL, aO, aX) {\n    var aM = aL - aX._$z2;\n    var aV = aM * this._$D0 / 1000;\n    var aJ = aV | 0;\n    var aP = aV - aJ;\n    for (var aU = 0; aU < this.motions.length; aU++) {\n        var aS = this.motions[aU];\n        var aK = aS._$I0.length;\n        var aQ = aS._$4P;\n        if (aS._$RP == t._$hs) {\n            var aT = aS._$I0[(aJ >= aK ? aK - 1 : aJ)];\n            aH.setParamFloat(aQ, aT);\n        } else {\n            if (t._$ws <= aS._$RP && aS._$RP <= t._$Ys) {} else {\n                var aR = aH.getParamFloat(aQ);\n                var aY = aS._$I0[(aJ >= aK ? aK - 1 : aJ)];\n                var aW = aS._$I0[(aJ + 1 >= aK ? aK - 1 : aJ + 1)];\n                var aI = aY + (aW - aY) * aP;\n                var aN = aR + (aI - aR) * aO;\n                aH.setParamFloat(aQ, aN);\n            }\n        }\n    }\n    if (aJ >= this._$yT) {\n        if (this._$E) {\n            aX._$z2 = aL;\n            if (this.loopFadeIn) {\n                aX._$bs = aL;\n            }\n        } else {\n            aX._$9L = true;\n        }\n    }\n}\n;\nY.prototype._$r0 = function() {\n    return this._$E;\n}\n;\nY.prototype._$aL = function(aH) {\n    this._$E = aH;\n}\n;\nY.prototype.isLoopFadeIn = function() {\n    return this.loopFadeIn;\n}\n;\nY.prototype.setLoopFadeIn = function(aH) {\n    this.loopFadeIn = aH;\n}\n;\nfunction aE() {\n    this._$P = new Float32Array(100);\n    this.size = 0;\n}\naE.prototype.clear = function() {\n    this.size = 0;\n}\n;\naE.prototype.add = function(aI) {\n    if (this._$P.length <= this.size) {\n        var aH = new Float32Array(this.size * 2);\n        P._$jT(this._$P, 0, aH, 0, this.size);\n        this._$P = aH;\n    }\n    this._$P[this.size++] = aI;\n}\n;\naE.prototype._$BL = function() {\n    var aH = new Float32Array(this.size);\n    P._$jT(this._$P, 0, aH, 0, this.size);\n    return aH;\n}\n;\nfunction t() {\n    this._$4P = null;\n    this._$I0 = null;\n    this._$RP = null;\n}\nt._$Fr = 0;\nt._$hs = 1;\nt._$ws = 100;\nt._$Ns = 101;\nt._$xs = 102;\nt._$us = 103;\nt._$qs = 104;\nt._$Ys = 105;\nfunction aw() {}\naw._$Ms = 1;\naw._$Qs = 2;\naw._$i2 = 0;\naw._$No = 2;\naw._$do = aw._$Ms;\naw._$Ls = true;\naw._$1r = 5;\naw._$Qb = 65;\naw._$J = 0.0001;\naw._$FT = 0.001;\naw._$Ss = 3;\nfunction ay() {}\nay._$o7 = 6;\nay._$S7 = 7;\nay._$s7 = 8;\nay._$77 = 9;\nay.LIVE2D_FORMAT_VERSION_V2_10_SDK2 = 10;\nay.LIVE2D_FORMAT_VERSION_V2_11_SDK2_1 = 11;\nay._$T7 = ay.LIVE2D_FORMAT_VERSION_V2_11_SDK2_1;\nay._$Is = -2004318072;\nay._$h0 = 0;\nay._$4L = 23;\nay._$7P = 33;\nay._$uT = function(aH) {\n    console.log(\"_$bo :: _$6 _$mo _$E0 : %d\\n\", aH);\n}\n;\nay._$9o = function(aH) {\n    if (aH < 40) {\n        ay._$uT(aH);\n        return null;\n    } else {\n        if (aH < 50) {\n            ay._$uT(aH);\n            return null;\n        } else {\n            if (aH < 60) {\n                ay._$uT(aH);\n                return null;\n            } else {\n                if (aH < 100) {\n                    switch (aH) {\n                    case 65:\n                        return new E();\n                    case 66:\n                        return new g();\n                    case 67:\n                        return new aA();\n                    case 68:\n                        return new ab();\n                    case 69:\n                        return new X();\n                    case 70:\n                        return new b();\n                    default:\n                        ay._$uT(aH);\n                        return null;\n                    }\n                } else {\n                    if (aH < 150) {\n                        switch (aH) {\n                        case 131:\n                            return new f();\n                        case 133:\n                            return new s();\n                        case 136:\n                            return new w();\n                        case 137:\n                            return new an();\n                        case 142:\n                            return new aq();\n                        }\n                    }\n                }\n            }\n        }\n    }\n    ay._$uT(aH);\n    return null;\n}\n;\nfunction y(aH) {\n    if (j) {\n        return;\n    }\n    this._$QT = true;\n    this._$co = -1;\n    this._$qo = 0;\n    this._$pb = new Array(y._$is);\n    this._$_2 = new Float32Array(y._$is);\n    this._$vr = new Float32Array(y._$is);\n    this._$Rr = new Float32Array(y._$is);\n    this._$Or = new Float32Array(y._$is);\n    this._$fs = new Float32Array(y._$is);\n    this._$Js = new Array(y._$is);\n    this._$3S = new Array();\n    this._$aS = new Array();\n    this._$Bo = null;\n    this._$F2 = new Array();\n    this._$db = new Array();\n    this._$8b = new Array();\n    this._$Hr = new Array();\n    this._$Ws = null;\n    this._$Vs = null;\n    this._$Er = null;\n    this._$Es = new Int16Array(aw._$Qb);\n    this._$ZP = new Float32Array(aw._$1r * 2);\n    this._$Ri = aH;\n    this._$b0 = y._$HP++;\n    this.clipManager = null;\n    this.dp_webgl = null;\n}\ny._$HP = 0;\ny._$_0 = true;\ny._$V2 = -1;\ny._$W0 = -1;\ny._$jr = false;\ny._$ZS = true;\ny._$tr = (-1000000);\ny._$lr = (1000000);\ny._$is = 32;\ny._$e = false;\ny.prototype.getDrawDataIndex = function(aI) {\n    for (var aH = this._$aS.length - 1; aH >= 0; --aH) {\n        if (this._$aS[aH] != null && this._$aS[aH].getDrawDataID() == aI) {\n            return aH;\n        }\n    }\n    return -1;\n}\n;\ny.prototype.getDrawData = function(aH) {\n    if (aH instanceof Z) {\n        if (this._$Bo == null) {\n            this._$Bo = new Object();\n            var aJ = this._$aS.length;\n            for (var aI = 0; aI < aJ; aI++) {\n                var aL = this._$aS[aI];\n                var aK = aL.getDrawDataID();\n                if (aK == null) {\n                    continue;\n                }\n                this._$Bo[aK] = aL;\n            }\n        }\n        return this._$Bo[id];\n    } else {\n        if (aH < this._$aS.length) {\n            return this._$aS[aH];\n        } else {\n            return null;\n        }\n    }\n}\n;\ny.prototype.release = function() {\n    this._$3S.clear();\n    this._$aS.clear();\n    this._$F2.clear();\n    if (this._$Bo != null) {\n        this._$Bo.clear();\n    }\n    this._$db.clear();\n    this._$8b.clear();\n    this._$Hr.clear();\n}\n;\ny.prototype.init = function() {\n    this._$co++;\n    if (this._$F2.length > 0) {\n        this.release();\n    }\n    var aO = this._$Ri.getModelImpl();\n    var aT = aO._$Xr();\n    var aS = aT.length;\n    var aH = new Array();\n    var a3 = new Array();\n    for (var aV = 0; aV < aS; ++aV) {\n        var a4 = aT[aV];\n        this._$F2.push(a4);\n        this._$Hr.push(a4.init(this));\n        var aK = a4.getBaseData();\n        var aR = aK.length;\n        for (var aU = 0; aU < aR; ++aU) {\n            aH.push(aK[aU]);\n        }\n        for (var aU = 0; aU < aR; ++aU) {\n            var aM = aK[aU].init(this);\n            aM._$l2(aV);\n            a3.push(aM);\n        }\n        var a1 = a4.getDrawData();\n        var aP = a1.length;\n        for (var aU = 0; aU < aP; ++aU) {\n            var aZ = a1[aU];\n            var a0 = aZ.init(this);\n            a0._$IP = aV;\n            this._$aS.push(aZ);\n            this._$8b.push(a0);\n        }\n    }\n    var aY = aH.length;\n    var aN = n._$2o();\n    while (true) {\n        var aX = false;\n        for (var aV = 0; aV < aY; ++aV) {\n            var aL = aH[aV];\n            if (aL == null) {\n                continue;\n            }\n            var a2 = aL.getTargetBaseDataID();\n            if (a2 == null || a2 == aN || this.getBaseDataIndex(a2) >= 0) {\n                this._$3S.push(aL);\n                this._$db.push(a3[aV]);\n                aH[aV] = null;\n                aX = true;\n            }\n        }\n        if (!aX) {\n            break;\n        }\n    }\n    var aI = aO._$E2();\n    if (aI != null) {\n        var aJ = aI._$1s();\n        if (aJ != null) {\n            var aW = aJ.length;\n            for (var aV = 0; aV < aW; ++aV) {\n                var aQ = aJ[aV];\n                if (aQ == null) {\n                    continue;\n                }\n                this._$02(aQ.getParamID(), aQ.getDefaultValue(), aQ.getMinValue(), aQ.getMaxValue());\n            }\n        }\n    }\n    this.clipManager = new W(this.dp_webgl);\n    this.clipManager.init(this, this._$aS, this._$8b);\n    this._$QT = true;\n}\n;\ny.prototype.update = function() {\n    if (y._$e) {\n        q.start(\"_$zL\");\n    }\n    var aK = this._$_2.length;\n    for (var aW = 0; aW < aK; aW++) {\n        if (this._$_2[aW] != this._$vr[aW]) {\n            this._$Js[aW] = y._$ZS;\n            this._$vr[aW] = this._$_2[aW];\n        }\n    }\n    var aX = false;\n    var aQ = this._$3S.length;\n    var aN = this._$aS.length;\n    var aS = a._$or();\n    var aZ = a._$Pr();\n    var aU = aZ - aS + 1;\n    if (this._$Ws == null || this._$Ws.length < aU) {\n        this._$Ws = new Int16Array(aU);\n        this._$Vs = new Int16Array(aU);\n    }\n    for (var aW = 0; aW < aU; aW++) {\n        this._$Ws[aW] = y._$V2;\n        this._$Vs[aW] = y._$V2;\n    }\n    if (this._$Er == null || this._$Er.length < aN) {\n        this._$Er = new Int16Array(aN);\n    }\n    for (var aW = 0; aW < aN; aW++) {\n        this._$Er[aW] = y._$W0;\n    }\n    if (y._$e) {\n        q.dump(\"_$zL\");\n    }\n    if (y._$e) {\n        q.start(\"_$UL\");\n    }\n    var aL = null;\n    for (var aV = 0; aV < aQ; ++aV) {\n        var aJ = this._$3S[aV];\n        var aH = this._$db[aV];\n        try {\n            aJ._$Nr(this, aH);\n            aJ._$2b(this, aH);\n        } catch (aY) {\n            if (aL == null) {\n                aL = aY;\n            }\n        }\n    }\n    if (aL != null) {\n        if (y._$_0) {\n            q._$Rb(aL);\n        }\n    }\n    if (y._$e) {\n        q.dump(\"_$UL\");\n    }\n    if (y._$e) {\n        q.start(\"_$DL\");\n    }\n    var aR = null;\n    for (var aO = 0; aO < aN; ++aO) {\n        var aM = this._$aS[aO];\n        var aI = this._$8b[aO];\n        try {\n            aM._$Nr(this, aI);\n            if (aI._$u2()) {\n                continue;\n            }\n            aM._$2b(this, aI);\n            var aT = Math.floor(aM._$zS(this, aI) - aS);\n            var aP;\n            try {\n                aP = this._$Vs[aT];\n            } catch (aY) {\n                console.log(\"_$li :: %s / %s        @@_$fS\\n\", aY.toString(), aM.getDrawDataID().toString());\n                aT = Math.floor(aM._$zS(this, aI) - aS);\n                continue;\n            }\n            if (aP == y._$V2) {\n                this._$Ws[aT] = aO;\n            } else {\n                this._$Er[aP] = aO;\n            }\n            this._$Vs[aT] = aO;\n        } catch (aY) {\n            if (aR == null) {\n                aR = aY;\n                Q._$sT(Q._$H7);\n            }\n        }\n    }\n    if (aR != null) {\n        if (y._$_0) {\n            q._$Rb(aR);\n        }\n    }\n    if (y._$e) {\n        q.dump(\"_$DL\");\n    }\n    if (y._$e) {\n        q.start(\"_$eL\");\n    }\n    for (var aW = this._$Js.length - 1; aW >= 0; aW--) {\n        this._$Js[aW] = y._$jr;\n    }\n    this._$QT = false;\n    if (y._$e) {\n        q.dump(\"_$eL\");\n    }\n    return aX;\n}\n;\ny.prototype.preDraw = function(aH) {\n    if (this.clipManager != null) {\n        aH._$ZT();\n        this.clipManager.setupClip(this, aH);\n    }\n}\n;\ny.prototype.draw = function(aM) {\n    if (this._$Ws == null) {\n        q._$li(\"call _$Ri.update() before _$Ri.draw() \");\n        return;\n    }\n    var aP = this._$Ws.length;\n    aM._$ZT();\n    for (var aK = 0; aK < aP; ++aK) {\n        var aN = this._$Ws[aK];\n        if (aN == y._$V2) {\n            continue;\n        }\n        do {\n            var aH = this._$aS[aN];\n            var aI = this._$8b[aN];\n            if (aI._$yo()) {\n                var aJ = aI._$IP;\n                var aL = this._$Hr[aJ];\n                aI._$VS = aL.getPartsOpacity();\n                aH.draw(aM, this, aI);\n            }\n            var aO = this._$Er[aN];\n            if (aO <= aN || aO == y._$W0) {\n                break;\n            }\n            aN = aO;\n        } while (true);\n    }\n}\n;\ny.prototype.getParamIndex = function(aH) {\n    for (var aI = this._$pb.length - 1; aI >= 0; --aI) {\n        if (this._$pb[aI] == aH) {\n            return aI;\n        }\n    }\n    return this._$02(aH, 0, y._$tr, y._$lr);\n}\n;\ny.prototype._$BS = function(aH) {\n    return this.getBaseDataIndex(aH);\n}\n;\ny.prototype.getBaseDataIndex = function(aH) {\n    for (var aI = this._$3S.length - 1; aI >= 0; --aI) {\n        if (this._$3S[aI] != null && this._$3S[aI].getBaseDataID() == aH) {\n            return aI;\n        }\n    }\n    return -1;\n}\n;\ny.prototype._$UT = function(aJ, aH) {\n    var aI = new Float32Array(aH);\n    P._$jT(aJ, 0, aI, 0, aJ.length);\n    return aI;\n}\n;\ny.prototype._$02 = function(aN, aM, aL, aH) {\n    if (this._$qo >= this._$pb.length) {\n        var aK = this._$pb.length;\n        var aJ = new Array(aK * 2);\n        P._$jT(this._$pb, 0, aJ, 0, aK);\n        this._$pb = aJ;\n        this._$_2 = this._$UT(this._$_2, aK * 2);\n        this._$vr = this._$UT(this._$vr, aK * 2);\n        this._$Rr = this._$UT(this._$Rr, aK * 2);\n        this._$Or = this._$UT(this._$Or, aK * 2);\n        var aI = new Array();\n        P._$jT(this._$Js, 0, aI, 0, aK);\n        this._$Js = aI;\n    }\n    this._$pb[this._$qo] = aN;\n    this._$_2[this._$qo] = aM;\n    this._$vr[this._$qo] = aM;\n    this._$Rr[this._$qo] = aL;\n    this._$Or[this._$qo] = aH;\n    this._$Js[this._$qo] = y._$ZS;\n    return this._$qo++;\n}\n;\ny.prototype._$Zo = function(aI, aH) {\n    this._$3S[aI] = aH;\n}\n;\ny.prototype.setParamFloat = function(aH, aI) {\n    if (aI < this._$Rr[aH]) {\n        aI = this._$Rr[aH];\n    }\n    if (aI > this._$Or[aH]) {\n        aI = this._$Or[aH];\n    }\n    this._$_2[aH] = aI;\n}\n;\ny.prototype.loadParam = function() {\n    var aH = this._$_2.length;\n    if (aH > this._$fs.length) {\n        aH = this._$fs.length;\n    }\n    P._$jT(this._$fs, 0, this._$_2, 0, aH);\n}\n;\ny.prototype.saveParam = function() {\n    var aH = this._$_2.length;\n    if (aH > this._$fs.length) {\n        this._$fs = new Float32Array(aH);\n    }\n    P._$jT(this._$_2, 0, this._$fs, 0, aH);\n}\n;\ny.prototype._$v2 = function() {\n    return this._$co;\n}\n;\ny.prototype._$WS = function() {\n    return this._$QT;\n}\n;\ny.prototype._$Xb = function(aH) {\n    return this._$Js[aH] == y._$ZS;\n}\n;\ny.prototype._$vs = function() {\n    return this._$Es;\n}\n;\ny.prototype._$Tr = function() {\n    return this._$ZP;\n}\n;\ny.prototype.getBaseData = function(aH) {\n    return this._$3S[aH];\n}\n;\ny.prototype.getParamFloat = function(aH) {\n    return this._$_2[aH];\n}\n;\ny.prototype.getParamMax = function(aH) {\n    return this._$Or[aH];\n}\n;\ny.prototype.getParamMin = function(aH) {\n    return this._$Rr[aH];\n}\n;\ny.prototype.setPartsOpacity = function(aJ, aH) {\n    var aI = this._$Hr[aJ];\n    aI.setPartsOpacity(aH);\n}\n;\ny.prototype.getPartsOpacity = function(aI) {\n    var aH = this._$Hr[aI];\n    return aH.getPartsOpacity();\n}\n;\ny.prototype.getPartsDataIndex = function(aI) {\n    for (var aH = this._$F2.length - 1; aH >= 0; --aH) {\n        if (this._$F2[aH] != null && this._$F2[aH]._$p2() == aI) {\n            return aH;\n        }\n    }\n    return -1;\n}\n;\ny.prototype._$q2 = function(aH) {\n    return this._$db[aH];\n}\n;\ny.prototype._$C2 = function(aH) {\n    return this._$8b[aH];\n}\n;\ny.prototype._$Bb = function(aH) {\n    return this._$Hr[aH];\n}\n;\ny.prototype._$5s = function(aO, aK) {\n    var aJ = this._$Ws.length;\n    var aN = aO;\n    for (var aL = 0; aL < aJ; ++aL) {\n        var aI = this._$Ws[aL];\n        if (aI == y._$V2) {\n            continue;\n        }\n        do {\n            var aM = this._$8b[aI];\n            if (aM._$yo()) {\n                aM._$GT()._$B2(this, aM, aN);\n                aN += aK;\n            }\n            var aH = this._$Er[aI];\n            if (aH <= aI || aH == y._$W0) {\n                break;\n            }\n            aI = aH;\n        } while (true);\n    }\n}\n;\ny.prototype.setDrawParam = function(aH) {\n    this.dp_webgl = aH;\n}\n;\ny.prototype.getDrawParam = function() {\n    return this.dp_webgl;\n}\n;\nfunction ap() {}\nap._$0T = function(aH) {\n    return ap._$0T(new _$5(aH));\n}\n;\nap._$0T = function(aJ) {\n    if (!aJ.exists()) {\n        throw new _$ls(aJ._$3b());\n    }\n    var aH = aJ.length();\n    var aI = new Int8Array(aH);\n    var aM = new _$Xs(new _$kb(aJ),8192);\n    var aK;\n    var aL = 0;\n    while ((aK = aM.read(aI, aL, aH - aL)) > 0) {\n        aL += aK;\n    }\n    return aI;\n}\n;\nap._$C = function(aJ) {\n    var aI = null;\n    var aL = null;\n    try {\n        aI = (aJ instanceof Array) ? aJ : new _$Xs(aJ,8192);\n        aL = new _$js();\n        var aM = 1000;\n        var aK;\n        var aH = new Int8Array(aM);\n        while ((aK = aI.read(aH)) > 0) {\n            aL.write(aH, 0, aK);\n        }\n        return aL._$TS();\n    } finally {\n        if (aJ != null) {\n            aJ.close();\n        }\n        if (aL != null) {\n            aL.flush();\n            aL.close();\n        }\n    }\n}\n;\nfunction ar() {\n    if (j) {\n        return;\n    }\n    this._$12 = null;\n    this._$bb = null;\n    this._$_L = null;\n    this._$jo = null;\n    this._$iL = null;\n    this._$0L = null;\n    this._$Br = null;\n    this._$Dr = null;\n    this._$Cb = null;\n    this._$mr = null;\n    this._$_L = az.STATE_FIRST;\n    this._$Br = 4000;\n    this._$Dr = 100;\n    this._$Cb = 50;\n    this._$mr = 150;\n    this._$jo = true;\n    this._$iL = \"PARAM_EYE_L_OPEN\";\n    this._$0L = \"PARAM_EYE_R_OPEN\";\n}\nar.prototype._$T2 = function() {\n    var aI = P.getUserTimeMSec();\n    var aH = Math._$10();\n    return (aI + aH * (2 * this._$Br - 1));\n}\n;\nar.prototype._$uo = function(aH) {\n    this._$Br = aH;\n}\n;\nar.prototype._$QS = function(aI, aH, aJ) {\n    this._$Dr = aI;\n    this._$Cb = aH;\n    this._$mr = aJ;\n}\n;\nar.prototype._$7T = function(aI) {\n    var aK = P.getUserTimeMSec();\n    var aH;\n    var aJ = 0;\n    switch (this._$_L) {\n    case STATE_CLOSING:\n        aJ = (aK - this._$bb) / this._$Dr;\n        if (aJ >= 1) {\n            aJ = 1;\n            this._$_L = az.STATE_CLOSED;\n            this._$bb = aK;\n        }\n        aH = 1 - aJ;\n        break;\n    case STATE_CLOSED:\n        aJ = (aK - this._$bb) / this._$Cb;\n        if (aJ >= 1) {\n            this._$_L = az.STATE_OPENING;\n            this._$bb = aK;\n        }\n        aH = 0;\n        break;\n    case STATE_OPENING:\n        aJ = (aK - this._$bb) / this._$mr;\n        if (aJ >= 1) {\n            aJ = 1;\n            this._$_L = az.STATE_INTERVAL;\n            this._$12 = this._$T2();\n        }\n        aH = aJ;\n        break;\n    case STATE_INTERVAL:\n        if (this._$12 < aK) {\n            this._$_L = az.STATE_CLOSING;\n            this._$bb = aK;\n        }\n        aH = 1;\n        break;\n    case STATE_FIRST:\n    default:\n        this._$_L = az.STATE_INTERVAL;\n        this._$12 = this._$T2();\n        aH = 1;\n        break;\n    }\n    if (!this._$jo) {\n        aH = -aH;\n    }\n    aI.setParamFloat(this._$iL, aH);\n    aI.setParamFloat(this._$0L, aH);\n}\n;\nvar az = function() {};\naz.STATE_FIRST = \"STATE_FIRST\";\naz.STATE_INTERVAL = \"STATE_INTERVAL\";\naz.STATE_CLOSING = \"STATE_CLOSING\";\naz.STATE_CLOSED = \"STATE_CLOSED\";\naz.STATE_OPENING = \"STATE_OPENING\";\nfunction x() {\n    if (j) {\n        return;\n    }\n    ax.prototype.constructor.call(this);\n    this._$sb = new Int32Array(x._$As);\n    this._$U2 = new Array();\n    this.transform = null;\n    this.gl = null;\n    if (x._$NT == null) {\n        x._$NT = x._$9r(256);\n        x._$vS = x._$9r(256);\n        x._$no = x._$vb(256);\n    }\n}\nx.prototype = new ax();\nx._$As = 32;\nx._$Gr = false;\nx._$NT = null;\nx._$vS = null;\nx._$no = null;\nx._$9r = function(aH) {\n    var aI = new Float32Array(aH);\n    return aI;\n}\n;\nx._$vb = function(aH) {\n    var aI = new Int16Array(aH);\n    return aI;\n}\n;\nx._$cr = function(aI, aH) {\n    if (aI == null || aI._$yL() < aH.length) {\n        aI = x._$9r(aH.length * 2);\n        aI.put(aH);\n        aI._$oT(0);\n    } else {\n        aI.clear();\n        aI.put(aH);\n        aI._$oT(0);\n    }\n    return aI;\n}\n;\nx._$mb = function(aI, aH) {\n    if (aI == null || aI._$yL() < aH.length) {\n        aI = x._$vb(aH.length * 2);\n        aI.put(aH);\n        aI._$oT(0);\n    } else {\n        aI.clear();\n        aI.put(aH);\n        aI._$oT(0);\n    }\n    return aI;\n}\n;\nx._$Hs = function() {\n    return x._$Gr;\n}\n;\nx._$as = function(aH) {\n    x._$Gr = aH;\n}\n;\nx.prototype.setGL = function(aH) {\n    this.gl = aH;\n}\n;\nx.prototype.setTransform = function(aH) {\n    this.transform = aH;\n}\n;\nx.prototype._$ZT = function() {}\n;\nx.prototype._$Uo = function(aO, aH, aP, aI, aQ, aM, aK, aJ) {\n    if (aM < 0.01) {\n        return;\n    }\n    var aL = this._$U2[aO];\n    var aN = aM > 0.9 ? Q.EXPAND_W : 0;\n    this.gl.drawElements(aL, aP, aI, aQ, aM, aN, this.transform, aJ);\n}\n;\nx.prototype._$Rs = function() {\n    throw new Error(\"_$Rs\");\n}\n;\nx.prototype._$Ds = function(aH) {\n    throw new Error(\"_$Ds\");\n}\n;\nx.prototype._$K2 = function() {\n    for (var aH = 0; aH < this._$sb.length; aH++) {\n        var aI = this._$sb[aH];\n        if (aI != 0) {\n            this.gl._$Sr(1, this._$sb, aH);\n            this._$sb[aH] = 0;\n        }\n    }\n}\n;\nx.prototype.setTexture = function(aI, aH) {\n    if (this._$sb.length < aI + 1) {\n        this._$nS(aI);\n    }\n    this._$sb[aI] = aH;\n}\n;\nx.prototype.setTexture = function(aH, aI) {\n    if (this._$sb.length < aH + 1) {\n        this._$nS(aH);\n    }\n    this._$U2[aH] = aI;\n}\n;\nx.prototype._$nS = function(aH) {\n    var aK = Math.max(this._$sb.length * 2, aH + 1 + 10);\n    var aI = new Int32Array(aK);\n    P._$jT(this._$sb, 0, aI, 0, this._$sb.length);\n    this._$sb = aI;\n    var aJ = new Array();\n    P._$jT(this._$U2, 0, aJ, 0, this._$U2.length);\n    this._$U2 = aJ;\n}\n;\nfunction ab() {\n    if (j) {\n        return;\n    }\n    c.prototype.constructor.call(this);\n    this._$GS = null;\n    this._$Y0 = null;\n}\nab.prototype = new c();\nab._$Xo = new Float32Array(2);\nab._$io = new Float32Array(2);\nab._$0o = new Float32Array(2);\nab._$Lo = new Float32Array(2);\nab._$To = new Float32Array(2);\nab._$Po = new Float32Array(2);\nab._$gT = new Array();\nab.prototype._$zP = function() {\n    this._$GS = new g();\n    this._$GS._$zP();\n    this._$Y0 = new Array();\n}\n;\nab.prototype.getType = function() {\n    return c._$c2;\n}\n;\nab.prototype._$F0 = function(aH) {\n    c.prototype._$F0.call(this, aH);\n    this._$GS = aH._$nP();\n    this._$Y0 = aH._$nP();\n    c.prototype.readV2_opacity.call(this, aH);\n}\n;\nab.prototype.init = function(aH) {\n    var aI = new al(this);\n    aI._$Yr = new X();\n    if (this._$32()) {\n        aI._$Wr = new X();\n    }\n    return aI;\n}\n;\nab.prototype._$Nr = function(bf, bx) {\n    if (!((this == bx._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    var bm = bx;\n    if (!this._$GS._$Ur(bf)) {\n        return;\n    }\n    var bw = ab._$gT;\n    bw[0] = false;\n    var a2 = this._$GS._$Q2(bf, bw);\n    bx._$Ib(bw[0]);\n    this.interpolateOpacity(bf, this._$GS, bx, bw);\n    var a3 = bf._$vs();\n    var ba = bf._$Tr();\n    this._$GS._$zr(a3, ba, a2);\n    if (a2 <= 0) {\n        var bn = this._$Y0[a3[0]];\n        bm._$Yr.init(bn);\n    } else {\n        if (a2 == 1) {\n            var bn = this._$Y0[a3[0]];\n            var bl = this._$Y0[a3[1]];\n            var a9 = ba[0];\n            bm._$Yr._$fL = bn._$fL + (bl._$fL - bn._$fL) * a9;\n            bm._$Yr._$gL = bn._$gL + (bl._$gL - bn._$gL) * a9;\n            bm._$Yr._$B0 = bn._$B0 + (bl._$B0 - bn._$B0) * a9;\n            bm._$Yr._$z0 = bn._$z0 + (bl._$z0 - bn._$z0) * a9;\n            bm._$Yr._$qT = bn._$qT + (bl._$qT - bn._$qT) * a9;\n        } else {\n            if (a2 == 2) {\n                var bn = this._$Y0[a3[0]];\n                var bl = this._$Y0[a3[1]];\n                var a1 = this._$Y0[a3[2]];\n                var a0 = this._$Y0[a3[3]];\n                var a9 = ba[0];\n                var a8 = ba[1];\n                var bC = bn._$fL + (bl._$fL - bn._$fL) * a9;\n                var bB = a1._$fL + (a0._$fL - a1._$fL) * a9;\n                bm._$Yr._$fL = bC + (bB - bC) * a8;\n                bC = bn._$gL + (bl._$gL - bn._$gL) * a9;\n                bB = a1._$gL + (a0._$gL - a1._$gL) * a9;\n                bm._$Yr._$gL = bC + (bB - bC) * a8;\n                bC = bn._$B0 + (bl._$B0 - bn._$B0) * a9;\n                bB = a1._$B0 + (a0._$B0 - a1._$B0) * a9;\n                bm._$Yr._$B0 = bC + (bB - bC) * a8;\n                bC = bn._$z0 + (bl._$z0 - bn._$z0) * a9;\n                bB = a1._$z0 + (a0._$z0 - a1._$z0) * a9;\n                bm._$Yr._$z0 = bC + (bB - bC) * a8;\n                bC = bn._$qT + (bl._$qT - bn._$qT) * a9;\n                bB = a1._$qT + (a0._$qT - a1._$qT) * a9;\n                bm._$Yr._$qT = bC + (bB - bC) * a8;\n            } else {\n                if (a2 == 3) {\n                    var aP = this._$Y0[a3[0]];\n                    var aO = this._$Y0[a3[1]];\n                    var bu = this._$Y0[a3[2]];\n                    var bs = this._$Y0[a3[3]];\n                    var aK = this._$Y0[a3[4]];\n                    var aJ = this._$Y0[a3[5]];\n                    var bj = this._$Y0[a3[6]];\n                    var bi = this._$Y0[a3[7]];\n                    var a9 = ba[0];\n                    var a8 = ba[1];\n                    var a6 = ba[2];\n                    var bC = aP._$fL + (aO._$fL - aP._$fL) * a9;\n                    var bB = bu._$fL + (bs._$fL - bu._$fL) * a9;\n                    var bz = aK._$fL + (aJ._$fL - aK._$fL) * a9;\n                    var by = bj._$fL + (bi._$fL - bj._$fL) * a9;\n                    bm._$Yr._$fL = (1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8);\n                    bC = aP._$gL + (aO._$gL - aP._$gL) * a9;\n                    bB = bu._$gL + (bs._$gL - bu._$gL) * a9;\n                    bz = aK._$gL + (aJ._$gL - aK._$gL) * a9;\n                    by = bj._$gL + (bi._$gL - bj._$gL) * a9;\n                    bm._$Yr._$gL = (1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8);\n                    bC = aP._$B0 + (aO._$B0 - aP._$B0) * a9;\n                    bB = bu._$B0 + (bs._$B0 - bu._$B0) * a9;\n                    bz = aK._$B0 + (aJ._$B0 - aK._$B0) * a9;\n                    by = bj._$B0 + (bi._$B0 - bj._$B0) * a9;\n                    bm._$Yr._$B0 = (1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8);\n                    bC = aP._$z0 + (aO._$z0 - aP._$z0) * a9;\n                    bB = bu._$z0 + (bs._$z0 - bu._$z0) * a9;\n                    bz = aK._$z0 + (aJ._$z0 - aK._$z0) * a9;\n                    by = bj._$z0 + (bi._$z0 - bj._$z0) * a9;\n                    bm._$Yr._$z0 = (1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8);\n                    bC = aP._$qT + (aO._$qT - aP._$qT) * a9;\n                    bB = bu._$qT + (bs._$qT - bu._$qT) * a9;\n                    bz = aK._$qT + (aJ._$qT - aK._$qT) * a9;\n                    by = bj._$qT + (bi._$qT - bj._$qT) * a9;\n                    bm._$Yr._$qT = (1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8);\n                } else {\n                    if (a2 == 4) {\n                        var aT = this._$Y0[a3[0]];\n                        var aS = this._$Y0[a3[1]];\n                        var bE = this._$Y0[a3[2]];\n                        var bD = this._$Y0[a3[3]];\n                        var aN = this._$Y0[a3[4]];\n                        var aM = this._$Y0[a3[5]];\n                        var bp = this._$Y0[a3[6]];\n                        var bo = this._$Y0[a3[7]];\n                        var bh = this._$Y0[a3[8]];\n                        var bg = this._$Y0[a3[9]];\n                        var aY = this._$Y0[a3[10]];\n                        var aW = this._$Y0[a3[11]];\n                        var a7 = this._$Y0[a3[12]];\n                        var a5 = this._$Y0[a3[13]];\n                        var aR = this._$Y0[a3[14]];\n                        var aQ = this._$Y0[a3[15]];\n                        var a9 = ba[0];\n                        var a8 = ba[1];\n                        var a6 = ba[2];\n                        var a4 = ba[3];\n                        var bC = aT._$fL + (aS._$fL - aT._$fL) * a9;\n                        var bB = bE._$fL + (bD._$fL - bE._$fL) * a9;\n                        var bz = aN._$fL + (aM._$fL - aN._$fL) * a9;\n                        var by = bp._$fL + (bo._$fL - bp._$fL) * a9;\n                        var bv = bh._$fL + (bg._$fL - bh._$fL) * a9;\n                        var bt = aY._$fL + (aW._$fL - aY._$fL) * a9;\n                        var br = a7._$fL + (a5._$fL - a7._$fL) * a9;\n                        var bq = aR._$fL + (aQ._$fL - aR._$fL) * a9;\n                        bm._$Yr._$fL = (1 - a4) * ((1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8)) + a4 * ((1 - a6) * (bv + (bt - bv) * a8) + a6 * (br + (bq - br) * a8));\n                        bC = aT._$gL + (aS._$gL - aT._$gL) * a9;\n                        bB = bE._$gL + (bD._$gL - bE._$gL) * a9;\n                        bz = aN._$gL + (aM._$gL - aN._$gL) * a9;\n                        by = bp._$gL + (bo._$gL - bp._$gL) * a9;\n                        bv = bh._$gL + (bg._$gL - bh._$gL) * a9;\n                        bt = aY._$gL + (aW._$gL - aY._$gL) * a9;\n                        br = a7._$gL + (a5._$gL - a7._$gL) * a9;\n                        bq = aR._$gL + (aQ._$gL - aR._$gL) * a9;\n                        bm._$Yr._$gL = (1 - a4) * ((1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8)) + a4 * ((1 - a6) * (bv + (bt - bv) * a8) + a6 * (br + (bq - br) * a8));\n                        bC = aT._$B0 + (aS._$B0 - aT._$B0) * a9;\n                        bB = bE._$B0 + (bD._$B0 - bE._$B0) * a9;\n                        bz = aN._$B0 + (aM._$B0 - aN._$B0) * a9;\n                        by = bp._$B0 + (bo._$B0 - bp._$B0) * a9;\n                        bv = bh._$B0 + (bg._$B0 - bh._$B0) * a9;\n                        bt = aY._$B0 + (aW._$B0 - aY._$B0) * a9;\n                        br = a7._$B0 + (a5._$B0 - a7._$B0) * a9;\n                        bq = aR._$B0 + (aQ._$B0 - aR._$B0) * a9;\n                        bm._$Yr._$B0 = (1 - a4) * ((1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8)) + a4 * ((1 - a6) * (bv + (bt - bv) * a8) + a6 * (br + (bq - br) * a8));\n                        bC = aT._$z0 + (aS._$z0 - aT._$z0) * a9;\n                        bB = bE._$z0 + (bD._$z0 - bE._$z0) * a9;\n                        bz = aN._$z0 + (aM._$z0 - aN._$z0) * a9;\n                        by = bp._$z0 + (bo._$z0 - bp._$z0) * a9;\n                        bv = bh._$z0 + (bg._$z0 - bh._$z0) * a9;\n                        bt = aY._$z0 + (aW._$z0 - aY._$z0) * a9;\n                        br = a7._$z0 + (a5._$z0 - a7._$z0) * a9;\n                        bq = aR._$z0 + (aQ._$z0 - aR._$z0) * a9;\n                        bm._$Yr._$z0 = (1 - a4) * ((1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8)) + a4 * ((1 - a6) * (bv + (bt - bv) * a8) + a6 * (br + (bq - br) * a8));\n                        bC = aT._$qT + (aS._$qT - aT._$qT) * a9;\n                        bB = bE._$qT + (bD._$qT - bE._$qT) * a9;\n                        bz = aN._$qT + (aM._$qT - aN._$qT) * a9;\n                        by = bp._$qT + (bo._$qT - bp._$qT) * a9;\n                        bv = bh._$qT + (bg._$qT - bh._$qT) * a9;\n                        bt = aY._$qT + (aW._$qT - aY._$qT) * a9;\n                        br = a7._$qT + (a5._$qT - a7._$qT) * a9;\n                        bq = aR._$qT + (aQ._$qT - aR._$qT) * a9;\n                        bm._$Yr._$qT = (1 - a4) * ((1 - a6) * (bC + (bB - bC) * a8) + a6 * (bz + (by - bz) * a8)) + a4 * ((1 - a6) * (bv + (bt - bv) * a8) + a6 * (br + (bq - br) * a8));\n                    } else {\n                        var aV = Math.pow(2, a2) | 0;\n                        var aZ = new Float32Array(aV);\n                        for (var bk = 0; bk < aV; bk++) {\n                            var aI = bk;\n                            var aH = 1;\n                            for (var aL = 0; aL < a2; aL++) {\n                                aH *= (aI % 2 == 0) ? (1 - ba[aL]) : ba[aL];\n                                aI /= 2;\n                            }\n                            aZ[bk] = aH;\n                        }\n                        var bA = new Array();\n                        for (var aU = 0; aU < aV; aU++) {\n                            bA[aU] = this._$Y0[a3[aU]];\n                        }\n                        var be = 0\n                          , bc = 0\n                          , bd = 0\n                          , bb = 0\n                          , aX = 0;\n                        for (var aU = 0; aU < aV; aU++) {\n                            be += aZ[aU] * bA[aU]._$fL;\n                            bc += aZ[aU] * bA[aU]._$gL;\n                            bd += aZ[aU] * bA[aU]._$B0;\n                            bb += aZ[aU] * bA[aU]._$z0;\n                            aX += aZ[aU] * bA[aU]._$qT;\n                        }\n                        bm._$Yr._$fL = be;\n                        bm._$Yr._$gL = bc;\n                        bm._$Yr._$B0 = bd;\n                        bm._$Yr._$z0 = bb;\n                        bm._$Yr._$qT = aX;\n                    }\n                }\n            }\n        }\n    }\n    var bn = this._$Y0[a3[0]];\n    bm._$Yr.reflectX = bn.reflectX;\n    bm._$Yr.reflectY = bn.reflectY;\n}\n;\nab.prototype._$2b = function(aM, aH) {\n    if (!((this == aH._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    var aR = aH;\n    aR._$hS(true);\n    if (!this._$32()) {\n        aR.setTotalScale_notForClient(aR._$Yr._$B0);\n        aR.setTotalOpacity(aR.getInterpolatedOpacity());\n    } else {\n        var aT = this.getTargetBaseDataID();\n        if (aR._$8r == c._$ur) {\n            aR._$8r = aM.getBaseDataIndex(aT);\n        }\n        if (aR._$8r < 0) {\n            if (Q._$so) {\n                q._$li(\"_$L _$0P _$G :: %s\", aT);\n            }\n            aR._$hS(false);\n        } else {\n            var aI = aM.getBaseData(aR._$8r);\n            if (aI != null) {\n                var aL = aM._$q2(aR._$8r);\n                var aS = ab._$Xo;\n                aS[0] = aR._$Yr._$fL;\n                aS[1] = aR._$Yr._$gL;\n                var aJ = ab._$io;\n                aJ[0] = 0;\n                aJ[1] = -0.1;\n                var aO = aL._$GT().getType();\n                if (aO == c._$c2) {\n                    aJ[1] = -10;\n                } else {\n                    aJ[1] = -0.1;\n                }\n                var aQ = ab._$0o;\n                this._$Jr(aM, aI, aL, aS, aJ, aQ);\n                var aP = aC._$92(aJ, aQ);\n                aI._$nb(aM, aL, aS, aS, 1, 0, 2);\n                aR._$Wr._$fL = aS[0];\n                aR._$Wr._$gL = aS[1];\n                aR._$Wr._$B0 = aR._$Yr._$B0;\n                aR._$Wr._$z0 = aR._$Yr._$z0;\n                aR._$Wr._$qT = aR._$Yr._$qT - aP * aC._$NS;\n                var aK = aL.getTotalScale();\n                aR.setTotalScale_notForClient(aK * aR._$Wr._$B0);\n                var aN = aL.getTotalOpacity();\n                aR.setTotalOpacity(aN * aR.getInterpolatedOpacity());\n                aR._$Wr.reflectX = aR._$Yr.reflectX;\n                aR._$Wr.reflectY = aR._$Yr.reflectY;\n                aR._$hS(aL._$yo());\n            } else {\n                aR._$hS(false);\n            }\n        }\n    }\n}\n;\nab.prototype._$nb = function(aJ, aR, aL, a4, aT, aO, a2) {\n    if (!((this == aR._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    var aH = aR;\n    var aU = aH._$Wr != null ? aH._$Wr : aH._$Yr;\n    var a0 = Math.sin(aC._$bS * aU._$qT);\n    var aP = Math.cos(aC._$bS * aU._$qT);\n    var a3 = aH.getTotalScale();\n    var aW = aU.reflectX ? -1 : 1;\n    var aV = aU.reflectY ? -1 : 1;\n    var aS = aP * a3 * aW;\n    var aQ = -a0 * a3 * aV;\n    var a1 = a0 * a3 * aW;\n    var aZ = aP * a3 * aV;\n    var aY = aU._$fL;\n    var aX = aU._$gL;\n    var aN, aM;\n    var aI = aT * a2;\n    for (var aK = aO; aK < aI; aK += a2) {\n        aN = aL[aK];\n        aM = aL[aK + 1];\n        a4[aK] = aS * aN + aQ * aM + aY;\n        a4[aK + 1] = a1 * aN + aZ * aM + aX;\n    }\n}\n;\nab.prototype._$Jr = function(aP, aK, aI, aR, aQ, aH) {\n    if (!((aK == aI._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    var aO = ab._$Lo;\n    ab._$Lo[0] = aR[0];\n    ab._$Lo[1] = aR[1];\n    aK._$nb(aP, aI, aO, aO, 1, 0, 2);\n    var aL = ab._$To;\n    var aS = ab._$Po;\n    var aN = 10;\n    var aJ = 1;\n    for (var aM = 0; aM < aN; aM++) {\n        aS[0] = aR[0] + aJ * aQ[0];\n        aS[1] = aR[1] + aJ * aQ[1];\n        aK._$nb(aP, aI, aS, aL, 1, 0, 2);\n        aL[0] -= aO[0];\n        aL[1] -= aO[1];\n        if (aL[0] != 0 || aL[1] != 0) {\n            aH[0] = aL[0];\n            aH[1] = aL[1];\n            return;\n        }\n        aS[0] = aR[0] - aJ * aQ[0];\n        aS[1] = aR[1] - aJ * aQ[1];\n        aK._$nb(aP, aI, aS, aL, 1, 0, 2);\n        aL[0] -= aO[0];\n        aL[1] -= aO[1];\n        if (aL[0] != 0 || aL[1] != 0) {\n            aL[0] = -aL[0];\n            aL[0] = -aL[0];\n            aH[0] = aL[0];\n            aH[1] = aL[1];\n            return;\n        }\n        aJ *= 0.1;\n    }\n    if (Q._$so) {\n        console.log(\"_$L0 to transform _$SP\\n\");\n    }\n}\n;\nfunction al(aH) {\n    B.prototype.constructor.call(this, aH);\n    this._$8r = c._$ur;\n    this._$Yr = null;\n    this._$Wr = null;\n}\nal.prototype = new B();\nfunction a() {\n    if (j) {\n        return;\n    }\n    ae.prototype.constructor.call(this);\n    this._$gP = null;\n    this._$dr = null;\n    this._$GS = null;\n    this._$qb = null;\n    this._$Lb = null;\n    this._$mS = null;\n}\na.prototype = new ae();\na._$ur = -2;\na._$ES = 500;\na._$wb = 2;\na._$8S = 3;\na._$os = 4;\na._$52 = a._$ES;\na._$R2 = a._$ES;\na._$Sb = function(aJ) {\n    for (var aI = aJ.length - 1; aI >= 0; --aI) {\n        var aH = aJ[aI];\n        if (aH < a._$52) {\n            a._$52 = aH;\n        } else {\n            if (aH > a._$R2) {\n                a._$R2 = aH;\n            }\n        }\n    }\n}\n;\na._$or = function() {\n    return a._$52;\n}\n;\na._$Pr = function() {\n    return a._$R2;\n}\n;\na.prototype._$F0 = function(aH) {\n    this._$gP = aH._$nP();\n    this._$dr = aH._$nP();\n    this._$GS = aH._$nP();\n    this._$qb = aH._$6L();\n    this._$Lb = aH._$cS();\n    this._$mS = aH._$Tb();\n    if (aH.getFormatVersion() >= ay._$T7) {\n        this.clipID = aH._$nP();\n        this.clipIDList = this.convertClipIDForV2_11(this.clipID);\n    } else {\n        this.clipIDList = null;\n    }\n    a._$Sb(this._$Lb);\n}\n;\na.prototype.getClipIDList = function() {\n    return this.clipIDList;\n}\n;\na.prototype._$Nr = function(aI, aH) {\n    aH._$IS[0] = false;\n    aH._$Us = aG._$Z2(aI, this._$GS, aH._$IS, this._$Lb);\n    if (Q._$Zs) {} else {\n        if (aH._$IS[0]) {\n            return;\n        }\n    }\n    aH._$7s = aG._$br(aI, this._$GS, aH._$IS, this._$mS);\n}\n;\na.prototype._$2b = function(aH) {}\n;\na.prototype.getDrawDataID = function() {\n    return this._$gP;\n}\n;\na.prototype._$j2 = function(aH) {\n    this._$gP = aH;\n}\n;\na.prototype.getOpacity = function(aH, aI) {\n    return aI._$7s;\n}\n;\na.prototype._$zS = function(aH, aI) {\n    return aI._$Us;\n}\n;\na.prototype.getTargetBaseDataID = function() {\n    return this._$dr;\n}\n;\na.prototype._$gs = function(aH) {\n    this._$dr = aH;\n}\n;\na.prototype._$32 = function() {\n    return (this._$dr != null && (this._$dr != n._$2o()));\n}\n;\na.prototype.getType = function() {}\n;\nfunction aq() {\n    if (j) {\n        return;\n    }\n    this._$NL = null;\n    this._$3S = null;\n    this._$aS = null;\n    aq._$42++;\n}\naq._$42 = 0;\naq.prototype._$1b = function() {\n    return this._$3S;\n}\n;\naq.prototype.getDrawDataList = function() {\n    return this._$aS;\n}\n;\naq.prototype._$F0 = function(aH) {\n    this._$NL = aH._$nP();\n    this._$aS = aH._$nP();\n    this._$3S = aH._$nP();\n}\n;\naq.prototype._$kr = function(aH) {\n    aH._$Zo(this._$3S);\n    aH._$xo(this._$aS);\n    this._$3S = null;\n    this._$aS = null;\n}\n;\nfunction v() {\n    if (j) {\n        return;\n    }\n    aa.prototype.constructor.call(this);\n    this._$zo = new x();\n}\nv.prototype = new aa();\nv.loadModel = function(aI) {\n    var aH = new v();\n    aa._$62(aH, aI);\n    return aH;\n}\n;\nv.loadModel = function(aI) {\n    var aH = new v();\n    aa._$62(aH, aI);\n    return aH;\n}\n;\nv._$to = function() {\n    var aH = new v();\n    return aH;\n}\n;\nv._$er = function(aM) {\n    var aJ = new _$5(\"../_$_r/_$t0/_$Ri/_$_P._$d\");\n    if (aJ.exists() == false) {\n        throw new _$ls(\"_$t0 _$_ _$6 _$Ui :: \" + aJ._$PL());\n    }\n    var aH = [\"../_$_r/_$t0/_$Ri/_$_P.512/_$CP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$vP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$EP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$pP._$1\"];\n    var aK = v.loadModel(aJ._$3b());\n    for (var aI = 0; aI < aH.length; aI++) {\n        var aL = new _$5(aH[aI]);\n        if (aL.exists() == false) {\n            throw new _$ls(\"_$t0 _$_ _$6 _$Ui :: \" + aL._$PL());\n        }\n        aK.setTexture(aI, _$nL._$_o(aM, aL._$3b()));\n    }\n    return aK;\n}\n;\nv.prototype.setGL = function(aH) {\n    this._$zo.setGL(aH);\n}\n;\nv.prototype.setTransform = function(aH) {\n    this._$zo.setTransform(aH);\n}\n;\nv.prototype.draw = function() {\n    this._$5S.draw(this._$zo);\n}\n;\nv.prototype._$K2 = function() {\n    this._$zo._$K2();\n}\n;\nv.prototype.setTexture = function(aI, aH) {\n    if (this._$zo == null) {\n        q._$li(\"_$Yi for QT _$ki / _$XS() is _$6 _$ui!!\");\n    }\n    this._$zo.setTexture(aI, aH);\n}\n;\nv.prototype.setTexture = function(aI, aH) {\n    if (this._$zo == null) {\n        q._$li(\"_$Yi for QT _$ki / _$XS() is _$6 _$ui!!\");\n    }\n    this._$zo.setTexture(aI, aH);\n}\n;\nv.prototype._$Rs = function() {\n    return this._$zo._$Rs();\n}\n;\nv.prototype._$Ds = function(aH) {\n    this._$zo._$Ds(aH);\n}\n;\nv.prototype.getDrawParam = function() {\n    return this._$zo;\n}\n;\nfunction ao() {\n    if (j) {\n        return;\n    }\n    ah.prototype.constructor.call(this);\n    this.motions = new Array();\n    this._$o2 = null;\n    this._$7r = ao._$Co++;\n    this._$D0 = 30;\n    this._$yT = 0;\n    this._$E = false;\n    this.loopFadeIn = true;\n    this._$rr = -1;\n    this._$eP = 0;\n}\nao.prototype = new ah();\nao._$cs = \"VISIBLE:\";\nao._$ar = \"LAYOUT:\";\nao.MTN_PREFIX_FADEIN = \"FADEIN:\";\nao.MTN_PREFIX_FADEOUT = \"FADEOUT:\";\nao._$Co = 0;\nao._$1T = 1;\nao.loadMotion = function(aJ) {\n    var aI = ap._$C(aJ);\n    var aH = ao.loadMotion(aI);\n    return aH;\n}\n;\nfunction p(aI, aH) {\n    return String.fromCharCode(aI.getUint8(aH));\n}\nao.loadMotion = function(aT) {\n    if (aT instanceof ArrayBuffer) {\n        aT = new DataView(aT);\n    }\n    var aN = new ao();\n    var aI = [0];\n    var aQ = aT.byteLength;\n    aN._$yT = 0;\n    for (var aJ = 0; aJ < aQ; ++aJ) {\n        var aS = p(aT, aJ);\n        var aL = aS.charCodeAt(0);\n        if (aS == \"\\n\" || aS == \"\\r\") {\n            continue;\n        }\n        if (aS == \"#\") {\n            for (; aJ < aQ; ++aJ) {\n                if (p(aT, aJ) == \"\\n\" || p(aT, aJ) == \"\\r\") {\n                    break;\n                }\n            }\n            continue;\n        }\n        if (aS == \"$\") {\n            var aV = aJ;\n            var aK = -1;\n            for (; aJ < aQ; ++aJ) {\n                aS = p(aT, aJ);\n                if (aS == \"\\r\" || aS == \"\\n\") {\n                    break;\n                }\n                if (aS == \"=\") {\n                    aK = aJ;\n                    break;\n                }\n            }\n            var aP = false;\n            if (aK >= 0) {\n                if (aK == aV + 4 && p(aT, aV + 1) == \"f\" && p(aT, aV + 2) == \"p\" && p(aT, aV + 3) == \"s\") {\n                    aP = true;\n                }\n                for (aJ = aK + 1; aJ < aQ; ++aJ) {\n                    aS = p(aT, aJ);\n                    if (aS == \"\\r\" || aS == \"\\n\") {\n                        break;\n                    }\n                    if (aS == \",\" || aS == \" \" || aS == \"\\t\") {\n                        continue;\n                    }\n                    var aM = G._$LS(aT, aQ, aJ, aI);\n                    if (aI[0] > 0) {\n                        if (aP && 5 < aM && aM < 121) {\n                            aN._$D0 = aM;\n                        }\n                    }\n                    aJ = aI[0];\n                }\n            }\n            for (; aJ < aQ; ++aJ) {\n                if (p(aT, aJ) == \"\\n\" || p(aT, aJ) == \"\\r\") {\n                    break;\n                }\n            }\n            continue;\n        }\n        if ((97 <= aL && aL <= 122) || (65 <= aL && aL <= 90) || aS == \"_\") {\n            var aV = aJ;\n            var aK = -1;\n            for (; aJ < aQ; ++aJ) {\n                aS = p(aT, aJ);\n                if (aS == \"\\r\" || aS == \"\\n\") {\n                    break;\n                }\n                if (aS == \"=\") {\n                    aK = aJ;\n                    break;\n                }\n            }\n            if (aK >= 0) {\n                var aO = new t();\n                if (G.startsWith(aT, aV, ao._$cs)) {\n                    aO._$RP = t._$hs;\n                    aO._$4P = G.createString(aT, aV, aK - aV);\n                } else {\n                    if (G.startsWith(aT, aV, ao._$ar)) {\n                        aO._$4P = G.createString(aT, aV + 7, aK - aV - 7);\n                        if (G.startsWith(aT, aV + 7, \"ANCHOR_X\")) {\n                            aO._$RP = t._$xs;\n                        } else {\n                            if (G.startsWith(aT, aV + 7, \"ANCHOR_Y\")) {\n                                aO._$RP = t._$us;\n                            } else {\n                                if (G.startsWith(aT, aV + 7, \"SCALE_X\")) {\n                                    aO._$RP = t._$qs;\n                                } else {\n                                    if (G.startsWith(aT, aV + 7, \"SCALE_Y\")) {\n                                        aO._$RP = t._$Ys;\n                                    } else {\n                                        if (G.startsWith(aT, aV + 7, \"X\")) {\n                                            aO._$RP = t._$ws;\n                                        } else {\n                                            if (G.startsWith(aT, aV + 7, \"Y\")) {\n                                                aO._$RP = t._$Ns;\n                                            }\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    } else {\n                        aO._$RP = t._$Fr;\n                        aO._$4P = G.createString(aT, aV, aK - aV);\n                    }\n                }\n                aN.motions.push(aO);\n                var aU = 0;\n                var aR = [];\n                for (aJ = aK + 1; aJ < aQ; ++aJ) {\n                    aS = p(aT, aJ);\n                    if (aS == \"\\r\" || aS == \"\\n\") {\n                        break;\n                    }\n                    if (aS == \",\" || aS == \" \" || aS == \"\\t\") {\n                        continue;\n                    }\n                    var aM = G._$LS(aT, aQ, aJ, aI);\n                    if (aI[0] > 0) {\n                        aR.push(aM);\n                        aU++;\n                        var aH = aI[0];\n                        if (aH < aJ) {\n                            console.log(\"_$n0 _$hi . @Live2DMotion loadMotion()\\n\");\n                            break;\n                        }\n                        aJ = aH - 1;\n                    }\n                }\n                aO._$I0 = new Float32Array(aR);\n                if (aU > aN._$yT) {\n                    aN._$yT = aU;\n                }\n            }\n        }\n    }\n    aN._$rr = ((1000 * aN._$yT) / aN._$D0) | 0;\n    return aN;\n}\n;\nao.prototype.getDurationMSec = function() {\n    return this._$E ? -1 : this._$rr;\n}\n;\nao.prototype.getLoopDurationMSec = function() {\n    return this._$rr;\n}\n;\nao.prototype.dump = function() {\n    for (var aJ = 0; aJ < this.motions.length; aJ++) {\n        var aH = this.motions[aJ];\n        console.log(\"_$wL[%s] [%d]. \", aH._$4P, aH._$I0.length);\n        for (var aI = 0; aI < aH._$I0.length && aI < 10; aI++) {\n            console.log(\"%5.2f ,\", aH._$I0[aI]);\n        }\n        console.log(\"\\n\");\n    }\n}\n;\nao.prototype.updateParamExe = function(aJ, aN, aQ, a3) {\n    var aO = aN - a3._$z2;\n    var a0 = aO * this._$D0 / 1000;\n    var aK = a0 | 0;\n    var aR = a0 - aK;\n    for (var aZ = 0; aZ < this.motions.length; aZ++) {\n        var aV = this.motions[aZ];\n        var aL = aV._$I0.length;\n        var aT = aV._$4P;\n        if (aV._$RP == t._$hs) {\n            var aX = aV._$I0[(aK >= aL ? aL - 1 : aK)];\n            aJ.setParamFloat(aT, aX);\n        } else {\n            if (t._$ws <= aV._$RP && aV._$RP <= t._$Ys) {} else {\n                var aH = aJ.getParamIndex(aT);\n                var a4 = aJ.getModelContext();\n                var aY = a4.getParamMax(aH);\n                var aW = a4.getParamMin(aH);\n                var aM = 0.4;\n                var aS = aM * (aY - aW);\n                var aU = a4.getParamFloat(aH);\n                var a2 = aV._$I0[(aK >= aL ? aL - 1 : aK)];\n                var a1 = aV._$I0[(aK + 1 >= aL ? aL - 1 : aK + 1)];\n                var aI;\n                if ((a2 < a1 && a1 - a2 > aS) || (a2 > a1 && a2 - a1 > aS)) {\n                    aI = a2;\n                } else {\n                    aI = a2 + (a1 - a2) * aR;\n                }\n                var aP = aU + (aI - aU) * aQ;\n                aJ.setParamFloat(aT, aP);\n            }\n        }\n    }\n    if (aK >= this._$yT) {\n        if (this._$E) {\n            a3._$z2 = aN;\n            if (this.loopFadeIn) {\n                a3._$bs = aN;\n            }\n        } else {\n            a3._$9L = true;\n        }\n    }\n    this._$eP = aQ;\n}\n;\nao.prototype._$r0 = function() {\n    return this._$E;\n}\n;\nao.prototype._$aL = function(aH) {\n    this._$E = aH;\n}\n;\nao.prototype._$S0 = function() {\n    return this._$D0;\n}\n;\nao.prototype._$U0 = function(aH) {\n    this._$D0 = aH;\n}\n;\nao.prototype.isLoopFadeIn = function() {\n    return this.loopFadeIn;\n}\n;\nao.prototype.setLoopFadeIn = function(aH) {\n    this.loopFadeIn = aH;\n}\n;\nfunction aE() {\n    this._$P = new Float32Array(100);\n    this.size = 0;\n}\naE.prototype.clear = function() {\n    this.size = 0;\n}\n;\naE.prototype.add = function(aI) {\n    if (this._$P.length <= this.size) {\n        var aH = new Float32Array(this.size * 2);\n        P._$jT(this._$P, 0, aH, 0, this.size);\n        this._$P = aH;\n    }\n    this._$P[this.size++] = aI;\n}\n;\naE.prototype._$BL = function() {\n    var aH = new Float32Array(this.size);\n    P._$jT(this._$P, 0, aH, 0, this.size);\n    return aH;\n}\n;\nfunction t() {\n    this._$4P = null;\n    this._$I0 = null;\n    this._$RP = null;\n}\nt._$Fr = 0;\nt._$hs = 1;\nt._$ws = 100;\nt._$Ns = 101;\nt._$xs = 102;\nt._$us = 103;\nt._$qs = 104;\nt._$Ys = 105;\nfunction E() {\n    if (j) {\n        return;\n    }\n    c.prototype.constructor.call(this);\n    this._$o = 0;\n    this._$A = 0;\n    this._$GS = null;\n    this._$Eo = null;\n}\nE.prototype = new c();\nE._$gT = new Array();\nE.prototype._$zP = function() {\n    this._$GS = new g();\n    this._$GS._$zP();\n}\n;\nE.prototype._$F0 = function(aH) {\n    c.prototype._$F0.call(this, aH);\n    this._$A = aH._$6L();\n    this._$o = aH._$6L();\n    this._$GS = aH._$nP();\n    this._$Eo = aH._$nP();\n    c.prototype.readV2_opacity.call(this, aH);\n}\n;\nE.prototype.init = function(aH) {\n    var aI = new H(this);\n    var aJ = (this._$o + 1) * (this._$A + 1);\n    if (aI._$Cr != null) {\n        aI._$Cr = null;\n    }\n    aI._$Cr = new Float32Array(aJ * 2);\n    if (aI._$hr != null) {\n        aI._$hr = null;\n    }\n    if (this._$32()) {\n        aI._$hr = new Float32Array(aJ * 2);\n    } else {\n        aI._$hr = null;\n    }\n    return aI;\n}\n;\nE.prototype._$Nr = function(aJ, aI) {\n    var aK = aI;\n    if (!this._$GS._$Ur(aJ)) {\n        return;\n    }\n    var aL = this._$VT();\n    var aH = E._$gT;\n    aH[0] = false;\n    aG._$Vr(aJ, this._$GS, aH, aL, this._$Eo, aK._$Cr, 0, 2);\n    aI._$Ib(aH[0]);\n    this.interpolateOpacity(aJ, this._$GS, aI, aH);\n}\n;\nE.prototype._$2b = function(aK, aJ) {\n    var aL = aJ;\n    aL._$hS(true);\n    if (!this._$32()) {\n        aL.setTotalOpacity(aL.getInterpolatedOpacity());\n    } else {\n        var aH = this.getTargetBaseDataID();\n        if (aL._$8r == c._$ur) {\n            aL._$8r = aK.getBaseDataIndex(aH);\n        }\n        if (aL._$8r < 0) {\n            if (Q._$so) {\n                q._$li(\"_$L _$0P _$G :: %s\", aH);\n            }\n            aL._$hS(false);\n        } else {\n            var aN = aK.getBaseData(aL._$8r);\n            var aI = aK._$q2(aL._$8r);\n            if (aN != null && aI._$yo()) {\n                var aM = aI.getTotalScale();\n                aL.setTotalScale_notForClient(aM);\n                var aO = aI.getTotalOpacity();\n                aL.setTotalOpacity(aO * aL.getInterpolatedOpacity());\n                aN._$nb(aK, aI, aL._$Cr, aL._$hr, this._$VT(), 0, 2);\n                aL._$hS(true);\n            } else {\n                aL._$hS(false);\n            }\n        }\n    }\n}\n;\nE.prototype._$nb = function(aL, aI, aH, aM, aO, aK, aJ) {\n    if (true) {\n        var aN = aI;\n        var aP = (aN._$hr != null) ? aN._$hr : aN._$Cr;\n        E.transformPoints_sdk2(aH, aM, aO, aK, aJ, aP, this._$o, this._$A);\n    } else {\n        this.transformPoints_sdk1(aL, aI, aH, aM, aO, aK, aJ);\n    }\n}\n;\nE.transformPoints_sdk2 = function(a0, bc, a5, aP, aI, aR, aQ, aU) {\n    var aW = a5 * aI;\n    var aV;\n    var bn, bm;\n    var aT = 0;\n    var aS = 0;\n    var bl = 0;\n    var bk = 0;\n    var bf = 0;\n    var be = 0;\n    var aZ = false;\n    for (var ba = aP; ba < aW; ba += aI) {\n        var bd, a7, a4, aX;\n        a4 = a0[ba];\n        aX = a0[ba + 1];\n        bd = a4 * aQ;\n        a7 = aX * aU;\n        if (bd < 0 || a7 < 0 || aQ <= bd || aU <= a7) {\n            var a1 = aQ + 1;\n            if (!aZ) {\n                aZ = true;\n                aT = 0.25 * (aR[((0) + (0) * a1) * 2] + aR[((aQ) + (0) * a1) * 2] + aR[((0) + (aU) * a1) * 2] + aR[((aQ) + (aU) * a1) * 2]);\n                aS = 0.25 * (aR[((0) + (0) * a1) * 2 + 1] + aR[((aQ) + (0) * a1) * 2 + 1] + aR[((0) + (aU) * a1) * 2 + 1] + aR[((aQ) + (aU) * a1) * 2 + 1]);\n                var aM = aR[((aQ) + (aU) * a1) * 2] - aR[((0) + (0) * a1) * 2];\n                var aL = aR[((aQ) + (aU) * a1) * 2 + 1] - aR[((0) + (0) * a1) * 2 + 1];\n                var bh = aR[((aQ) + (0) * a1) * 2] - aR[((0) + (aU) * a1) * 2];\n                var bg = aR[((aQ) + (0) * a1) * 2 + 1] - aR[((0) + (aU) * a1) * 2 + 1];\n                bl = (aM + bh) * 0.5;\n                bk = (aL + bg) * 0.5;\n                bf = (aM - bh) * 0.5;\n                be = (aL - bg) * 0.5;\n                if (bl == 0 && bk == 0) {}\n                if (bf == 0 && be == 0) {}\n                aT -= 0.5 * (bl + bf);\n                aS -= 0.5 * (bk + be);\n            }\n            if ((-2 < a4 && a4 < 3) && (-2 < aX && aX < 3)) {\n                if (a4 <= 0) {\n                    if (aX <= 0) {\n                        var a3 = aR[((0) + (0) * a1) * 2];\n                        var a2 = aR[((0) + (0) * a1) * 2 + 1];\n                        var a8 = aT - 2 * bl;\n                        var a6 = aS - 2 * bk;\n                        var aK = aT - 2 * bf;\n                        var aJ = aS - 2 * be;\n                        var aO = aT - 2 * bl - 2 * bf;\n                        var aN = aS - 2 * bk - 2 * be;\n                        var bj = 0.5 * (a4 - (-2));\n                        var bi = 0.5 * (aX - (-2));\n                        if (bj + bi <= 1) {\n                            bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                            bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                        } else {\n                            bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                            bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                        }\n                    } else {\n                        if (aX >= 1) {\n                            var aK = aR[((0) + (aU) * a1) * 2];\n                            var aJ = aR[((0) + (aU) * a1) * 2 + 1];\n                            var aO = aT - 2 * bl + 1 * bf;\n                            var aN = aS - 2 * bk + 1 * be;\n                            var a3 = aT + 3 * bf;\n                            var a2 = aS + 3 * be;\n                            var a8 = aT - 2 * bl + 3 * bf;\n                            var a6 = aS - 2 * bk + 3 * be;\n                            var bj = 0.5 * (a4 - (-2));\n                            var bi = 0.5 * (aX - (1));\n                            if (bj + bi <= 1) {\n                                bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                            } else {\n                                bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                            }\n                        } else {\n                            var aH = (a7 | 0);\n                            if (aH == aU) {\n                                aH = aU - 1;\n                            }\n                            var bj = 0.5 * (a4 - (-2));\n                            var bi = a7 - aH;\n                            var bb = aH / aU;\n                            var a9 = (aH + 1) / aU;\n                            var aK = aR[((0) + (aH) * a1) * 2];\n                            var aJ = aR[((0) + (aH) * a1) * 2 + 1];\n                            var a3 = aR[((0) + (aH + 1) * a1) * 2];\n                            var a2 = aR[((0) + (aH + 1) * a1) * 2 + 1];\n                            var aO = aT - 2 * bl + bb * bf;\n                            var aN = aS - 2 * bk + bb * be;\n                            var a8 = aT - 2 * bl + a9 * bf;\n                            var a6 = aS - 2 * bk + a9 * be;\n                            if (bj + bi <= 1) {\n                                bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                            } else {\n                                bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                            }\n                        }\n                    }\n                } else {\n                    if (1 <= a4) {\n                        if (aX <= 0) {\n                            var a8 = aR[((aQ) + (0) * a1) * 2];\n                            var a6 = aR[((aQ) + (0) * a1) * 2 + 1];\n                            var a3 = aT + 3 * bl;\n                            var a2 = aS + 3 * bk;\n                            var aO = aT + 1 * bl - 2 * bf;\n                            var aN = aS + 1 * bk - 2 * be;\n                            var aK = aT + 3 * bl - 2 * bf;\n                            var aJ = aS + 3 * bk - 2 * be;\n                            var bj = 0.5 * (a4 - (1));\n                            var bi = 0.5 * (aX - (-2));\n                            if (bj + bi <= 1) {\n                                bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                            } else {\n                                bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                            }\n                        } else {\n                            if (aX >= 1) {\n                                var aO = aR[((aQ) + (aU) * a1) * 2];\n                                var aN = aR[((aQ) + (aU) * a1) * 2 + 1];\n                                var aK = aT + 3 * bl + 1 * bf;\n                                var aJ = aS + 3 * bk + 1 * be;\n                                var a8 = aT + 1 * bl + 3 * bf;\n                                var a6 = aS + 1 * bk + 3 * be;\n                                var a3 = aT + 3 * bl + 3 * bf;\n                                var a2 = aS + 3 * bk + 3 * be;\n                                var bj = 0.5 * (a4 - (1));\n                                var bi = 0.5 * (aX - (1));\n                                if (bj + bi <= 1) {\n                                    bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                    bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                                } else {\n                                    bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                    bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                                }\n                            } else {\n                                var aH = (a7 | 0);\n                                if (aH == aU) {\n                                    aH = aU - 1;\n                                }\n                                var bj = 0.5 * (a4 - (1));\n                                var bi = a7 - aH;\n                                var bb = aH / aU;\n                                var a9 = (aH + 1) / aU;\n                                var aO = aR[((aQ) + (aH) * a1) * 2];\n                                var aN = aR[((aQ) + (aH) * a1) * 2 + 1];\n                                var a8 = aR[((aQ) + (aH + 1) * a1) * 2];\n                                var a6 = aR[((aQ) + (aH + 1) * a1) * 2 + 1];\n                                var aK = aT + 3 * bl + bb * bf;\n                                var aJ = aS + 3 * bk + bb * be;\n                                var a3 = aT + 3 * bl + a9 * bf;\n                                var a2 = aS + 3 * bk + a9 * be;\n                                if (bj + bi <= 1) {\n                                    bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                    bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                                } else {\n                                    bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                    bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                                }\n                            }\n                        }\n                    } else {\n                        if (aX <= 0) {\n                            var aY = (bd | 0);\n                            if (aY == aQ) {\n                                aY = aQ - 1;\n                            }\n                            var bj = bd - aY;\n                            var bi = 0.5 * (aX - (-2));\n                            var bp = aY / aQ;\n                            var bo = (aY + 1) / aQ;\n                            var a8 = aR[((aY) + (0) * a1) * 2];\n                            var a6 = aR[((aY) + (0) * a1) * 2 + 1];\n                            var a3 = aR[((aY + 1) + (0) * a1) * 2];\n                            var a2 = aR[((aY + 1) + (0) * a1) * 2 + 1];\n                            var aO = aT + bp * bl - 2 * bf;\n                            var aN = aS + bp * bk - 2 * be;\n                            var aK = aT + bo * bl - 2 * bf;\n                            var aJ = aS + bo * bk - 2 * be;\n                            if (bj + bi <= 1) {\n                                bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                            } else {\n                                bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                            }\n                        } else {\n                            if (aX >= 1) {\n                                var aY = (bd | 0);\n                                if (aY == aQ) {\n                                    aY = aQ - 1;\n                                }\n                                var bj = bd - aY;\n                                var bi = 0.5 * (aX - (1));\n                                var bp = aY / aQ;\n                                var bo = (aY + 1) / aQ;\n                                var aO = aR[((aY) + (aU) * a1) * 2];\n                                var aN = aR[((aY) + (aU) * a1) * 2 + 1];\n                                var aK = aR[((aY + 1) + (aU) * a1) * 2];\n                                var aJ = aR[((aY + 1) + (aU) * a1) * 2 + 1];\n                                var a8 = aT + bp * bl + 3 * bf;\n                                var a6 = aS + bp * bk + 3 * be;\n                                var a3 = aT + bo * bl + 3 * bf;\n                                var a2 = aS + bo * bk + 3 * be;\n                                if (bj + bi <= 1) {\n                                    bc[ba] = aO + (aK - aO) * bj + (a8 - aO) * bi;\n                                    bc[ba + 1] = aN + (aJ - aN) * bj + (a6 - aN) * bi;\n                                } else {\n                                    bc[ba] = a3 + (a8 - a3) * (1 - bj) + (aK - a3) * (1 - bi);\n                                    bc[ba + 1] = a2 + (a6 - a2) * (1 - bj) + (aJ - a2) * (1 - bi);\n                                }\n                            } else {\n                                System.err.printf(\"_$li calc : %.4f , %.4f          @@BDBoxGrid\\n\", a4, aX);\n                            }\n                        }\n                    }\n                }\n            } else {\n                bc[ba] = aT + a4 * bl + aX * bf;\n                bc[ba + 1] = aS + a4 * bk + aX * be;\n            }\n        } else {\n            bn = bd - (bd | 0);\n            bm = a7 - (a7 | 0);\n            aV = 2 * ((bd | 0) + ((a7 | 0)) * (aQ + 1));\n            if (bn + bm < 1) {\n                bc[ba] = aR[aV] * (1 - bn - bm) + aR[aV + 2] * bn + aR[aV + 2 * (aQ + 1)] * bm;\n                bc[ba + 1] = aR[aV + 1] * (1 - bn - bm) + aR[aV + 3] * bn + aR[aV + 2 * (aQ + 1) + 1] * bm;\n            } else {\n                bc[ba] = aR[aV + 2 * (aQ + 1) + 2] * (bn - 1 + bm) + aR[aV + 2 * (aQ + 1)] * (1 - bn) + aR[aV + 2] * (1 - bm);\n                bc[ba + 1] = aR[aV + 2 * (aQ + 1) + 3] * (bn - 1 + bm) + aR[aV + 2 * (aQ + 1) + 1] * (1 - bn) + aR[aV + 3] * (1 - bm);\n            }\n        }\n    }\n}\n;\nE.prototype.transformPoints_sdk1 = function(aJ, aR, aL, a0, aU, aP, aZ) {\n    var aH = aR;\n    var aO, aN;\n    var aM = this._$o;\n    var aQ = this._$A;\n    var aI = aU * aZ;\n    var aS, aY;\n    var aV;\n    var aX, aW;\n    var aT = (aH._$hr != null) ? aH._$hr : aH._$Cr;\n    for (var aK = aP; aK < aI; aK += aZ) {\n        if (Q._$ts) {\n            aO = aL[aK];\n            aN = aL[aK + 1];\n            if (aO < 0) {\n                aO = 0;\n            } else {\n                if (aO > 1) {\n                    aO = 1;\n                }\n            }\n            if (aN < 0) {\n                aN = 0;\n            } else {\n                if (aN > 1) {\n                    aN = 1;\n                }\n            }\n            aO *= aM;\n            aN *= aQ;\n            aS = (aO | 0);\n            aY = (aN | 0);\n            if (aS > aM - 1) {\n                aS = aM - 1;\n            }\n            if (aY > aQ - 1) {\n                aY = aQ - 1;\n            }\n            aX = aO - aS;\n            aW = aN - aY;\n            aV = 2 * (aS + aY * (aM + 1));\n        } else {\n            aO = aL[aK] * aM;\n            aN = aL[aK + 1] * aQ;\n            aX = aO - (aO | 0);\n            aW = aN - (aN | 0);\n            aV = 2 * ((aO | 0) + (aN | 0) * (aM + 1));\n        }\n        if (aX + aW < 1) {\n            a0[aK] = aT[aV] * (1 - aX - aW) + aT[aV + 2] * aX + aT[aV + 2 * (aM + 1)] * aW;\n            a0[aK + 1] = aT[aV + 1] * (1 - aX - aW) + aT[aV + 3] * aX + aT[aV + 2 * (aM + 1) + 1] * aW;\n        } else {\n            a0[aK] = aT[aV + 2 * (aM + 1) + 2] * (aX - 1 + aW) + aT[aV + 2 * (aM + 1)] * (1 - aX) + aT[aV + 2] * (1 - aW);\n            a0[aK + 1] = aT[aV + 2 * (aM + 1) + 3] * (aX - 1 + aW) + aT[aV + 2 * (aM + 1) + 1] * (1 - aX) + aT[aV + 3] * (1 - aW);\n        }\n    }\n}\n;\nE.prototype._$VT = function() {\n    return (this._$o + 1) * (this._$A + 1);\n}\n;\nE.prototype.getType = function() {\n    return c._$_b;\n}\n;\nfunction H(aH) {\n    B.prototype.constructor.call(this, aH);\n    this._$8r = c._$ur;\n    this._$Cr = null;\n    this._$hr = null;\n}\nH.prototype = new B();\nfunction s() {\n    if (j) {\n        return;\n    }\n    this.visible = true;\n    this._$g0 = false;\n    this._$NL = null;\n    this._$3S = null;\n    this._$aS = null;\n    s._$42++;\n}\ns._$42 = 0;\ns.prototype._$zP = function() {\n    this._$3S = new Array();\n    this._$aS = new Array();\n}\n;\ns.prototype._$F0 = function(aH) {\n    this._$g0 = aH._$8L();\n    this.visible = aH._$8L();\n    this._$NL = aH._$nP();\n    this._$3S = aH._$nP();\n    this._$aS = aH._$nP();\n}\n;\ns.prototype.init = function(aI) {\n    var aH = new aj(this);\n    aH.setPartsOpacity(this.isVisible() ? 1 : 0);\n    return aH;\n}\n;\ns.prototype._$6o = function(aH) {\n    if (this._$3S == null) {\n        throw new Error(\"_$3S _$6 _$Wo@_$6o\");\n    }\n    this._$3S.push(aH);\n}\n;\ns.prototype._$3o = function(aH) {\n    if (this._$aS == null) {\n        throw new Error(\"_$aS _$6 _$Wo@_$3o\");\n    }\n    this._$aS.push(aH);\n}\n;\ns.prototype._$Zo = function(aH) {\n    this._$3S = aH;\n}\n;\ns.prototype._$xo = function(aH) {\n    this._$aS = aH;\n}\n;\ns.prototype.isVisible = function() {\n    return this.visible;\n}\n;\ns.prototype._$uL = function() {\n    return this._$g0;\n}\n;\ns.prototype._$KP = function(aH) {\n    this.visible = aH;\n}\n;\ns.prototype._$ET = function(aH) {\n    this._$g0 = aH;\n}\n;\ns.prototype.getBaseData = function() {\n    return this._$3S;\n}\n;\ns.prototype.getDrawData = function() {\n    return this._$aS;\n}\n;\ns.prototype._$p2 = function() {\n    return this._$NL;\n}\n;\ns.prototype._$ob = function(aH) {\n    this._$NL = aH;\n}\n;\ns.prototype.getPartsID = function() {\n    return this._$NL;\n}\n;\ns.prototype._$MP = function(aH) {\n    this._$NL = aH;\n}\n;\nfunction aj(aH) {\n    this._$VS = null;\n    this._$e0 = null;\n    this._$e0 = aH;\n}\naj.prototype = new S();\naj.prototype.getPartsOpacity = function() {\n    return this._$VS;\n}\n;\naj.prototype.setPartsOpacity = function(aH) {\n    this._$VS = aH;\n}\n;\nfunction ak(aH) {\n    if (j) {\n        return;\n    }\n    this.id = aH;\n}\nak._$L7 = function() {\n    z._$27();\n    n._$27();\n    Z._$27();\n    i._$27();\n}\n;\nak.prototype.toString = function() {\n    return this.id;\n}\n;\nfunction D() {}\nD.prototype._$F0 = function(aH) {}\n;\nfunction an() {\n    if (j) {\n        return;\n    }\n    this._$4S = null;\n}\nan.prototype._$1s = function() {\n    return this._$4S;\n}\n;\nan.prototype._$zP = function() {\n    this._$4S = new Array();\n}\n;\nan.prototype._$F0 = function(aH) {\n    this._$4S = aH._$nP();\n}\n;\nan.prototype._$Ks = function(aH) {\n    this._$4S.push(aH);\n}\n;\nfunction au(aH, aI) {\n    this.canvas = aH;\n    this.context = aI;\n    this.viewport = new Array(0,0,aH.width,aH.height);\n    this._$6r = 1;\n    this._$xP = 0;\n    this._$3r = 1;\n    this._$uP = 0;\n    this._$Qo = -1;\n    this.cacheImages = {};\n}\nau.tr = new am();\nau._$50 = new am();\nau._$Ti = new Array(0,0);\nau._$Pi = new Array(0,0);\nau._$B = new Array(0,0);\nau.prototype._$lP = function(aI, aK, aJ, aH) {\n    this.viewport = new Array(aI,aK,aJ,aH);\n}\n;\nau.prototype._$bL = function() {\n    this.context.save();\n    var aH = this.viewport;\n    if (aH != null) {\n        this.context.beginPath();\n        this.context._$Li(aH[0], aH[1], aH[2], aH[3]);\n        this.context.clip();\n    }\n}\n;\nau.prototype._$ei = function() {\n    this.context.restore();\n}\n;\nau.prototype.drawElements = function(bc, bm, aX, aJ, bA, aM, bl, bz) {\n    try {\n        if (bA != this._$Qo) {\n            this._$Qo = bA;\n            this.context.globalAlpha = bA;\n        }\n        var a2 = bm.length;\n        var aP = bc.width;\n        var a5 = bc.height;\n        var bE = this.context;\n        var a7 = this._$xP;\n        var a6 = this._$uP;\n        var a1 = this._$6r;\n        var aZ = this._$3r;\n        var bD = au.tr;\n        var aI = au._$Ti;\n        var aH = au._$Pi;\n        var bu = au._$B;\n        for (var by = 0; by < a2; by += 3) {\n            bE.save();\n            var aW = bm[by];\n            var aV = bm[by + 1];\n            var aT = bm[by + 2];\n            var aL = a7 + a1 * aX[aW * 2];\n            var aK = a6 + aZ * aX[aW * 2 + 1];\n            var br = a7 + a1 * aX[aV * 2];\n            var bp = a6 + aZ * aX[aV * 2 + 1];\n            var bh = a7 + a1 * aX[aT * 2];\n            var bf = a6 + aZ * aX[aT * 2 + 1];\n            if (bl) {\n                bl._$PS(aL, aK, bu);\n                aL = bu[0];\n                aK = bu[1];\n                bl._$PS(br, bp, bu);\n                br = bu[0];\n                bp = bu[1];\n                bl._$PS(bh, bf, bu);\n                bh = bu[0];\n                bf = bu[1];\n            }\n            var aS = aP * aJ[aW * 2];\n            var aQ = a5 - a5 * aJ[aW * 2 + 1];\n            var bx = aP * aJ[aV * 2];\n            var bw = a5 - a5 * aJ[aV * 2 + 1];\n            var bk = aP * aJ[aT * 2];\n            var bj = a5 - a5 * aJ[aT * 2 + 1];\n            var a3 = Math.atan2(bw - aQ, bx - aS);\n            var a0 = Math.atan2(bp - aK, br - aL);\n            var aO = br - aL;\n            var aN = bp - aK;\n            var bi = Math.sqrt(aO * aO + aN * aN);\n            var aU = bx - aS;\n            var aR = bw - aQ;\n            var bt = Math.sqrt(aU * aU + aR * aR);\n            var bv = bi / bt;\n            ad._$ni(bk, bj, aS, aQ, (bx - aS), (bw - aQ), -(bw - aQ), (bx - aS), aI);\n            ad._$ni(bh, bf, aL, aK, (br - aL), (bp - aK), -(bp - aK), (br - aL), aH);\n            var aY = (aH[0] - aI[0]) / aI[1];\n            var bs = Math.min(aS, bx, bk);\n            var bg = Math.max(aS, bx, bk);\n            var bq = Math.min(aQ, bw, bj);\n            var be = Math.max(aQ, bw, bj);\n            var bo = Math.floor(bs);\n            var bb = Math.floor(bq);\n            var a4 = Math.ceil(bg);\n            var bC = Math.ceil(be);\n            bD.identity();\n            bD.translate(aL, aK);\n            bD.rotate(a0);\n            bD.scale(1, aH[1] / aI[1]);\n            bD.shear(aY, 0);\n            bD.scale(bv, bv);\n            bD.rotate(-a3);\n            bD.translate(-aS, -aQ);\n            bD.setContext(bE);\n            var a8 = true;\n            var a9 = 1.2;\n            if (!aM) {\n                aM = a8 ? a9 : 0;\n            }\n            if (Q.IGNORE_EXPAND) {\n                aM = 0;\n            }\n            if (Q.USE_CACHED_POLYGON_IMAGE) {\n                var bd = bz._$e0;\n                bd.gl_cacheImage = bd.gl_cacheImage || {};\n                if (!bd.gl_cacheImage[by]) {\n                    var bn = au.createCanvas(a4 - bo, bC - bb);\n                    Q.DEBUG_DATA.LDGL_CANVAS_MB = Q.DEBUG_DATA.LDGL_CANVAS_MB || 0;\n                    Q.DEBUG_DATA.LDGL_CANVAS_MB += (a4 - bo) * (bC - bb) * 4;\n                    var ba = bn.getContext(\"2d\");\n                    ba.translate(-bo, -bb);\n                    au.clip(ba, bD, aM, bi, aS, aQ, bx, bw, bk, bj, aL, aK, br, bp, bh, bf);\n                    ba.drawImage(bc, 0, 0);\n                    bd.gl_cacheImage[by] = {\n                        cacheCanvas: bn,\n                        cacheContext: ba\n                    };\n                }\n                bE.drawImage(bd.gl_cacheImage[by][\"cacheCanvas\"], bo, bb);\n            } else {\n                if (!Q.IGNORE_CLIP) {\n                    au.clip(bE, bD, aM, bi, aS, aQ, bx, bw, bk, bj, aL, aK, br, bp, bh, bf);\n                }\n                if (Q.USE_ADJUST_TRANSLATION) {\n                    bs = 0;\n                    bg = aP;\n                    bq = 0;\n                    be = a5;\n                }\n                bE.drawImage(bc, bs, bq, bg - bs, be - bq, bs, bq, bg - bs, be - bq);\n            }\n            bE.restore();\n        }\n    } catch (bB) {\n        q._$Rb(bB);\n    }\n}\n;\nau.clip = function(aK, aJ, aV, aI, aM, aL, aU, aT, aQ, aP, aO, aN, aH, aW, aS, aR) {\n    if (aV > 0.02) {\n        au.expandClip(aK, aJ, aV, aI, aO, aN, aH, aW, aS, aR);\n    } else {\n        au.clipWithTransform(aK, null, aM, aL, aU, aT, aQ, aP);\n    }\n}\n;\nau.expandClip = function(aV, bg, aK, a3, aJ, aI, be, ba, aZ, aX) {\n    var aP = be - aJ;\n    var aO = ba - aI;\n    var bi = aZ - aJ;\n    var bh = aX - aI;\n    var bj = aP * bh - aO * bi > 0 ? aK : -aK;\n    var aL = -aO;\n    var aH = aP;\n    var bc = aZ - be;\n    var a8 = aX - ba;\n    var a7 = -a8;\n    var a6 = bc;\n    var aQ = Math.sqrt(bc * bc + a8 * a8);\n    var bf = -bh;\n    var bb = bi;\n    var a2 = Math.sqrt(bi * bi + bh * bh);\n    var bd = aJ - bj * aL / a3;\n    var a9 = aI - bj * aH / a3;\n    var aY = be - bj * aL / a3;\n    var aW = ba - bj * aH / a3;\n    var a5 = be - bj * a7 / aQ;\n    var a4 = ba - bj * a6 / aQ;\n    var aS = aZ - bj * a7 / aQ;\n    var aR = aX - bj * a6 / aQ;\n    var aN = aJ + bj * bf / a2;\n    var aM = aI + bj * bb / a2;\n    var a1 = aZ + bj * bf / a2;\n    var a0 = aX + bj * bb / a2;\n    var aU = au._$50;\n    var aT = bg._$P2(aU);\n    if (aT == null) {\n        return false;\n    }\n    au.clipWithTransform(aV, aU, bd, a9, aY, aW, a5, a4, aS, aR, a1, a0, aN, aM);\n    return true;\n}\n;\nau.clipWithTransform = function(aH, aI, aS, aN, aQ, aK, aP, aJ) {\n    if (arguments.length < (1 + 3 * 2)) {\n        q._$li(\"err : @LDGL.clip()\");\n        return;\n    }\n    if (!(arguments[1]instanceof am)) {\n        q._$li(\"err : a[0] is _$6 LDTransform @LDGL.clip()\");\n        return;\n    }\n    var aM = au._$B;\n    var aO = aI;\n    var aR = arguments;\n    aH.beginPath();\n    if (aO) {\n        aO._$PS(aR[2], aR[3], aM);\n        aH.moveTo(aM[0], aM[1]);\n        for (var aL = 4; aL < aR.length; aL += 2) {\n            aO._$PS(aR[aL], aR[aL + 1], aM);\n            aH.lineTo(aM[0], aM[1]);\n        }\n    } else {\n        aH.moveTo(aR[2], aR[3]);\n        for (var aL = 4; aL < aR.length; aL += 2) {\n            aH.lineTo(aR[aL], aR[aL + 1]);\n        }\n    }\n    aH.clip();\n}\n;\nau.createCanvas = function(aH, aJ) {\n    var aI = document.createElement(\"canvas\");\n    aI.setAttribute(\"width\", aH);\n    aI.setAttribute(\"height\", aJ);\n    if (!aI) {\n        q._$li(\"err : \" + aI);\n    }\n    return aI;\n}\n;\nau.dumpValues = function() {\n    var aI = \"\";\n    for (var aH = 0; aH < arguments.length; aH++) {\n        aI += \"[\" + aH + \"]= \" + arguments[aH].toFixed(3) + \" , \";\n    }\n    console.log(aI);\n}\n;\nfunction f() {\n    if (j) {\n        return;\n    }\n    this._$TT = null;\n    this._$LT = null;\n    this._$FS = null;\n    this._$wL = null;\n}\nf.prototype._$F0 = function(aH) {\n    this._$TT = aH._$_T();\n    this._$LT = aH._$_T();\n    this._$FS = aH._$_T();\n    this._$wL = aH._$nP();\n}\n;\nf.prototype.getMinValue = function() {\n    return this._$TT;\n}\n;\nf.prototype.getMaxValue = function() {\n    return this._$LT;\n}\n;\nf.prototype.getDefaultValue = function() {\n    return this._$FS;\n}\n;\nf.prototype.getParamID = function() {\n    return this._$wL;\n}\n;\nfunction B(aH) {\n    if (j) {\n        return;\n    }\n    this._$e0 = null;\n    this._$IP = null;\n    this._$JS = false;\n    this._$AT = true;\n    this._$e0 = aH;\n    this.totalScale = 1;\n    this._$7s = 1;\n    this.totalOpacity = 1;\n}\nB.prototype._$yo = function() {\n    return this._$AT && !this._$JS;\n}\n;\nB.prototype._$hS = function(aH) {\n    this._$AT = aH;\n}\n;\nB.prototype._$GT = function() {\n    return this._$e0;\n}\n;\nB.prototype._$l2 = function(aH) {\n    this._$IP = aH;\n}\n;\nB.prototype.getPartsIndex = function() {\n    return this._$IP;\n}\n;\nB.prototype._$x2 = function() {\n    return this._$JS;\n}\n;\nB.prototype._$Ib = function(aH) {\n    this._$JS = aH;\n}\n;\nB.prototype.getTotalScale = function() {\n    return this.totalScale;\n}\n;\nB.prototype.setTotalScale_notForClient = function(aH) {\n    this.totalScale = aH;\n}\n;\nB.prototype.getInterpolatedOpacity = function() {\n    return this._$7s;\n}\n;\nB.prototype.setInterpolatedOpacity = function(aH) {\n    this._$7s = aH;\n}\n;\nB.prototype.getTotalOpacity = function(aH) {\n    return this.totalOpacity;\n}\n;\nB.prototype.setTotalOpacity = function(aH) {\n    this.totalOpacity = aH;\n}\n;\nfunction Q() {}\nQ._$2s = \"2.1.00_1\";\nQ._$Kr = 201001000;\nQ._$sP = true;\nQ._$so = true;\nQ._$cb = false;\nQ._$3T = true;\nQ._$Ts = true;\nQ._$fb = true;\nQ._$ts = true;\nQ.L2D_DEFORMER_EXTEND = true;\nQ._$Wb = false;\nQ._$yr = false;\nQ._$Zs = false;\nQ.L2D_NO_ERROR = 0;\nQ._$i7 = 1000;\nQ._$9s = 1001;\nQ._$es = 1100;\nQ._$r7 = 2000;\nQ._$07 = 2001;\nQ._$b7 = 2002;\nQ._$H7 = 4000;\nQ.L2D_COLOR_BLEND_MODE_MULT = 0;\nQ.L2D_COLOR_BLEND_MODE_ADD = 1;\nQ.L2D_COLOR_BLEND_MODE_INTERPOLATE = 2;\nQ._$6b = true;\nQ._$cT = 0;\nQ.clippingMaskBufferSize = 256;\nQ.glContext = new Array();\nQ.frameBuffers = new Array();\nQ.fTexture = new Array();\nQ.IGNORE_CLIP = false;\nQ.IGNORE_EXPAND = false;\nQ.EXPAND_W = 2;\nQ.USE_ADJUST_TRANSLATION = true;\nQ.USE_CANVAS_TRANSFORM = true;\nQ.USE_CACHED_POLYGON_IMAGE = false;\nQ.DEBUG_DATA = {};\nQ.PROFILE_IOS_SPEED = {\n    PROFILE_NAME: \"iOS Speed\",\n    USE_ADJUST_TRANSLATION: true,\n    USE_CACHED_POLYGON_IMAGE: true,\n    EXPAND_W: 4\n};\nQ.PROFILE_IOS_QUALITY = {\n    PROFILE_NAME: \"iOS HiQ\",\n    USE_ADJUST_TRANSLATION: true,\n    USE_CACHED_POLYGON_IMAGE: false,\n    EXPAND_W: 2\n};\nQ.PROFILE_IOS_DEFAULT = Q.PROFILE_IOS_QUALITY;\nQ.PROFILE_ANDROID = {\n    PROFILE_NAME: \"Android\",\n    USE_ADJUST_TRANSLATION: false,\n    USE_CACHED_POLYGON_IMAGE: false,\n    EXPAND_W: 2\n};\nQ.PROFILE_DESKTOP = {\n    PROFILE_NAME: \"Desktop\",\n    USE_ADJUST_TRANSLATION: false,\n    USE_CACHED_POLYGON_IMAGE: false,\n    EXPAND_W: 2\n};\nQ.initProfile = function() {\n    if (r.isIOS()) {\n        Q.setupProfile(Q.PROFILE_IOS_DEFAULT);\n    } else {\n        if (r.isAndroid()) {\n            Q.setupProfile(Q.PROFILE_ANDROID);\n        } else {\n            Q.setupProfile(Q.PROFILE_DESKTOP);\n        }\n    }\n}\n;\nQ.setupProfile = function(aI, aJ) {\n    if (typeof aI == \"number\") {\n        switch (aI) {\n        case 9901:\n            aI = Q.PROFILE_IOS_SPEED;\n            break;\n        case 9902:\n            aI = Q.PROFILE_IOS_QUALITY;\n            break;\n        case 9903:\n            aI = Q.PROFILE_IOS_DEFAULT;\n            break;\n        case 9904:\n            aI = Q.PROFILE_ANDROID;\n            break;\n        case 9905:\n            aI = Q.PROFILE_DESKTOP;\n            break;\n        default:\n            alert(\"profile _$6 _$Ui : \" + aI);\n            break;\n        }\n    }\n    if (arguments.length < 2) {\n        aJ = true;\n    }\n    if (aJ) {\n        console.log(\"profile : \" + aI.PROFILE_NAME);\n    }\n    for (var aH in aI) {\n        Q[aH] = aI[aH];\n        if (aJ) {\n            console.log(\"  [\" + aH + \"] = \" + aI[aH]);\n        }\n    }\n}\n;\nQ.init = function() {\n    if (Q._$6b) {\n        console.log(\"Live2D %s\", Q._$2s);\n        Q._$6b = false;\n        var aH = false;\n        aH = true;\n        Q.initProfile();\n    }\n}\n;\nQ.getVersionStr = function() {\n    return Q._$2s;\n}\n;\nQ.getVersionNo = function() {\n    return Q._$Kr;\n}\n;\nQ._$sT = function(aH) {\n    Q._$cT = aH;\n}\n;\nQ.getError = function() {\n    var aH = Q._$cT;\n    Q._$cT = 0;\n    return aH;\n}\n;\nQ.dispose = function() {\n    Q.glContext = [];\n    Q.frameBuffers = [];\n    Q.fTexture = [];\n}\n;\nQ.setGL = function(aJ, aI) {\n    var aH = aI || 0;\n    Q.glContext[aH] = aJ;\n}\n;\nQ.getGL = function(aH) {\n    return Q.glContext[aH];\n}\n;\nQ.setClippingMaskBufferSize = function(aH) {\n    Q.clippingMaskBufferSize = aH;\n}\n;\nQ.getClippingMaskBufferSize = function() {\n    return Q.clippingMaskBufferSize;\n}\n;\nQ.deleteBuffer = function(aI) {\n    var aH = Q.getGL(aI);\n    aH.deleteFramebuffer(Q.frameBuffers[aI].framebuffer);\n    delete Q.frameBuffers[aI];\n    delete Q.glContext[aI];\n}\n;\nfunction A() {}\nA._$r2 = function(aH) {\n    if (aH < 0) {\n        return 0;\n    } else {\n        if (aH > 1) {\n            return 1;\n        }\n    }\n    return (0.5 - 0.5 * Math.cos(aH * aC.PI_F));\n}\n;\nfunction J(aH) {\n    if (j) {\n        return;\n    }\n    this._$ib = aH;\n}\nJ._$fr = -1;\nJ.prototype.toString = function() {\n    return this._$ib;\n}\n;\nfunction b() {\n    if (j) {\n        return;\n    }\n    a.prototype.constructor.call(this);\n    this._$LP = -1;\n    this._$d0 = 0;\n    this._$Yo = 0;\n    this._$JP = null;\n    this._$5P = null;\n    this._$BP = null;\n    this._$Eo = null;\n    this._$Qi = null;\n    this._$6s = b._$ms;\n    this.culling = true;\n    this.gl_cacheImage = null;\n    this.instanceNo = b._$42++;\n}\nb.prototype = new a();\nb._$42 = 0;\nb._$Os = 30;\nb._$ms = 0;\nb._$ns = 1;\nb._$_s = 2;\nb._$gT = new Array();\nb.prototype._$_S = function(aH) {\n    this._$LP = aH;\n}\n;\nb.prototype.getTextureNo = function() {\n    return this._$LP;\n}\n;\nb.prototype._$ZL = function() {\n    return this._$Qi;\n}\n;\nb.prototype._$H2 = function() {\n    return this._$JP;\n}\n;\nb.prototype.getNumPoints = function() {\n    return this._$d0;\n}\n;\nb.prototype.getType = function() {\n    return a._$wb;\n}\n;\nb.prototype._$B2 = function(aL, aH, aO) {\n    var aM = aH;\n    var aN = (aM._$hr != null) ? aM._$hr : aM._$Cr;\n    var aK = aw._$do;\n    switch (aK) {\n    default:\n    case aw._$Ms:\n        throw new Error(\"_$L _$ro \");\n    case aw._$Qs:\n        for (var aJ = this._$d0 - 1; aJ >= 0; --aJ) {\n            var aI = aJ * aw._$No;\n            aN[aI + 4] = aO;\n        }\n        break;\n    }\n}\n;\nb.prototype._$zP = function() {\n    this._$GS = new g();\n    this._$GS._$zP();\n}\n;\nb.prototype._$F0 = function(aK) {\n    a.prototype._$F0.call(this, aK);\n    this._$LP = aK._$6L();\n    this._$d0 = aK._$6L();\n    this._$Yo = aK._$6L();\n    var aH = aK._$nP();\n    this._$BP = new Int16Array(this._$Yo * 3);\n    for (var aJ = this._$Yo * 3 - 1; aJ >= 0; --aJ) {\n        this._$BP[aJ] = aH[aJ];\n    }\n    this._$Eo = aK._$nP();\n    this._$Qi = aK._$nP();\n    if (aK.getFormatVersion() >= ay._$s7) {\n        this._$JP = aK._$6L();\n        if (this._$JP != 0) {\n            if ((this._$JP & 1) != 0) {\n                var aI = aK._$6L();\n                if (this._$5P == null) {\n                    this._$5P = new Object();\n                }\n                this._$5P._$Hb = parseInt(aI);\n            }\n            if ((this._$JP & b._$Os) != 0) {\n                this._$6s = (this._$JP & b._$Os) >> 1;\n            } else {\n                this._$6s = b._$ms;\n            }\n            if ((this._$JP & 32) != 0) {\n                this.culling = false;\n            }\n        }\n    } else {\n        this._$JP = 0;\n    }\n}\n;\nb.prototype.init = function(aL) {\n    var aN = new ag(this);\n    var aI = this._$d0 * aw._$No;\n    var aH = this._$32();\n    if (aN._$Cr != null) {\n        aN._$Cr = null;\n    }\n    aN._$Cr = new Float32Array(aI);\n    if (aN._$hr != null) {\n        aN._$hr = null;\n    }\n    aN._$hr = aH ? new Float32Array(aI) : null;\n    var aM = aw._$do;\n    switch (aM) {\n    default:\n    case aw._$Ms:\n        if (aw._$Ls) {\n            for (var aJ = this._$d0 - 1; aJ >= 0; --aJ) {\n                var aO = aJ << 1;\n                this._$Qi[aO + 1] = 1 - this._$Qi[aO + 1];\n            }\n        }\n        break;\n    case aw._$Qs:\n        for (var aJ = this._$d0 - 1; aJ >= 0; --aJ) {\n            var aO = aJ << 1;\n            var aK = aJ * aw._$No;\n            var aQ = this._$Qi[aO];\n            var aP = this._$Qi[aO + 1];\n            aN._$Cr[aK] = aQ;\n            aN._$Cr[aK + 1] = aP;\n            aN._$Cr[aK + 4] = 0;\n            if (aH) {\n                aN._$hr[aK] = aQ;\n                aN._$hr[aK + 1] = aP;\n                aN._$hr[aK + 4] = 0;\n            }\n        }\n        break;\n    }\n    return aN;\n}\n;\nb.prototype._$Nr = function(aJ, aH) {\n    var aK = aH;\n    if (!((this == aK._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    if (!this._$GS._$Ur(aJ)) {\n        return;\n    }\n    a.prototype._$Nr.call(this, aJ, aK);\n    if (aK._$IS[0]) {\n        return;\n    }\n    var aI = b._$gT;\n    aI[0] = false;\n    aG._$Vr(aJ, this._$GS, aI, this._$d0, this._$Eo, aK._$Cr, aw._$i2, aw._$No);\n}\n;\nb.prototype._$2b = function(aK, aI) {\n    try {\n        if (!((this == aI._$GT()))) {\n            console.log(\"### assert!! ### \");\n        }\n        var aL = false;\n        if (aI._$IS[0]) {\n            aL = true;\n        }\n        var aM = aI;\n        if (!aL) {\n            a.prototype._$2b.call(this, aK);\n            if (this._$32()) {\n                var aH = this.getTargetBaseDataID();\n                if (aM._$8r == a._$ur) {\n                    aM._$8r = aK.getBaseDataIndex(aH);\n                }\n                if (aM._$8r < 0) {\n                    if (Q._$so) {\n                        q._$li(\"_$L _$0P _$G :: %s\", aH);\n                    }\n                } else {\n                    var aO = aK.getBaseData(aM._$8r);\n                    var aJ = aK._$q2(aM._$8r);\n                    if (aO != null && !aJ._$x2()) {\n                        aO._$nb(aK, aJ, aM._$Cr, aM._$hr, this._$d0, aw._$i2, aw._$No);\n                        aM._$AT = true;\n                    } else {\n                        aM._$AT = false;\n                    }\n                    aM.baseOpacity = aJ.getTotalOpacity();\n                }\n            }\n        }\n    } catch (aN) {\n        throw aN;\n    }\n}\n;\nb.prototype.draw = function(aN, aK, aI) {\n    if (!((this == aI._$GT()))) {\n        console.log(\"### assert!! ### \");\n    }\n    if (aI._$IS[0]) {\n        return;\n    }\n    var aL = aI;\n    var aJ = this._$LP;\n    if (aJ < 0) {\n        aJ = 1;\n    }\n    var aH = this.getOpacity(aK, aL) * aI._$VS * aI.baseOpacity;\n    var aM = (aL._$hr != null) ? aL._$hr : aL._$Cr;\n    aN.setClipBufPre_clipContextForDraw(aI.clipBufPre_clipContext);\n    aN._$WP(this.culling);\n    aN._$Uo(aJ, 3 * this._$Yo, this._$BP, aM, this._$Qi, aH, this._$6s, aL);\n}\n;\nb.prototype.dump = function() {\n    console.log(\"  _$yi( %d ) , _$d0( %d ) , _$Yo( %d ) \\n\", this._$LP, this._$d0, this._$Yo);\n    console.log(\"  _$Oi _$di = { \");\n    for (var aJ = 0; aJ < this._$BP.length; aJ++) {\n        console.log(\"%5d ,\", this._$BP[aJ]);\n    }\n    console.log(\"\\n  _$5i _$30\");\n    for (var aJ = 0; aJ < this._$Eo.length; aJ++) {\n        console.log(\"\\n    _$30[%d] = \", aJ);\n        var aH = this._$Eo[aJ];\n        for (var aI = 0; aI < aH.length; aI++) {\n            console.log(\"%6.2f, \", aH[aI]);\n        }\n    }\n    console.log(\"\\n\");\n}\n;\nb.prototype._$72 = function(aH) {\n    if (this._$5P == null) {\n        return null;\n    }\n    return this._$5P[aH];\n}\n;\nb.prototype.getIndexArray = function() {\n    return this._$BP;\n}\n;\nfunction ag(aH) {\n    aB.prototype.constructor.call(this, aH);\n    this._$8r = a._$ur;\n    this._$Cr = null;\n    this._$hr = null;\n}\nag.prototype = new aB();\nag.prototype.getTransformedPoints = function() {\n    return (this._$hr != null) ? this._$hr : this._$Cr;\n}\n;\nfunction k() {\n    if (j) {\n        return;\n    }\n    this.x = null;\n    this.y = null;\n}\nk.prototype._$HT = function(aH) {\n    this.x = aH.x;\n    this.y = aH.y;\n}\n;\nk.prototype._$HT = function(aH, aI) {\n    this.x = aH;\n    this.y = aI;\n}\n;\nfunction l(aH) {\n    if (j) {\n        return;\n    }\n    aa.prototype.constructor.call(this);\n    this.drawParamWebGL = new C(aH);\n    this.drawParamWebGL.setGL(Q.getGL(aH));\n}\nl.prototype = new aa();\nl.loadModel = function(aI) {\n    var aH = new l();\n    aa._$62(aH, aI);\n    return aH;\n}\n;\nl.loadModel = function(aI, aK) {\n    var aJ = aK || 0;\n    var aH = new l(aJ);\n    aa._$62(aH, aI);\n    return aH;\n}\n;\nl._$to = function() {\n    var aH = new l();\n    return aH;\n}\n;\nl._$er = function(aM) {\n    var aJ = new _$5(\"../_$_r/_$t0/_$Ri/_$_P._$d\");\n    if (aJ.exists() == false) {\n        throw new _$ls(\"_$t0 _$_ _$6 _$Ui :: \" + aJ._$PL());\n    }\n    var aH = [\"../_$_r/_$t0/_$Ri/_$_P.512/_$CP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$vP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$EP._$1\", \"../_$_r/_$t0/_$Ri/_$_P.512/_$pP._$1\"];\n    var aK = l.loadModel(aJ._$3b());\n    for (var aI = 0; aI < aH.length; aI++) {\n        var aL = new _$5(aH[aI]);\n        if (aL.exists() == false) {\n            throw new _$ls(\"_$t0 _$_ _$6 _$Ui :: \" + aL._$PL());\n        }\n        aK.setTexture(aI, _$nL._$_o(aM, aL._$3b()));\n    }\n    return aK;\n}\n;\nl.prototype.setGL = function(aH) {\n    Q.setGL(aH);\n}\n;\nl.prototype.setTransform = function(aH) {\n    this.drawParamWebGL.setTransform(aH);\n}\n;\nl.prototype.update = function() {\n    this._$5S.update();\n    this._$5S.preDraw(this.drawParamWebGL);\n}\n;\nl.prototype.draw = function() {\n    this._$5S.draw(this.drawParamWebGL);\n}\n;\nl.prototype._$K2 = function() {\n    this.drawParamWebGL._$K2();\n}\n;\nl.prototype.setTexture = function(aI, aH) {\n    if (this.drawParamWebGL == null) {\n        q._$li(\"_$Yi for QT _$ki / _$XS() is _$6 _$ui!!\");\n    }\n    this.drawParamWebGL.setTexture(aI, aH);\n}\n;\nl.prototype.setTexture = function(aI, aH) {\n    if (this.drawParamWebGL == null) {\n        q._$li(\"_$Yi for QT _$ki / _$XS() is _$6 _$ui!!\");\n    }\n    this.drawParamWebGL.setTexture(aI, aH);\n}\n;\nl.prototype._$Rs = function() {\n    return this.drawParamWebGL._$Rs();\n}\n;\nl.prototype._$Ds = function(aH) {\n    this.drawParamWebGL._$Ds(aH);\n}\n;\nl.prototype.getDrawParam = function() {\n    return this.drawParamWebGL;\n}\n;\nl.prototype.setMatrix = function(aH) {\n    this.drawParamWebGL.setMatrix(aH);\n}\n;\nl.prototype.setPremultipliedAlpha = function(aH) {\n    this.drawParamWebGL.setPremultipliedAlpha(aH);\n}\n;\nl.prototype.isPremultipliedAlpha = function() {\n    return this.drawParamWebGL.isPremultipliedAlpha();\n}\n;\nl.prototype.setAnisotropy = function(aH) {\n    this.drawParamWebGL.setAnisotropy(aH);\n}\n;\nl.prototype.getAnisotropy = function() {\n    return this.drawParamWebGL.getAnisotropy();\n}\n;\nfunction V() {\n    if (j) {\n        return;\n    }\n    this.motions = null;\n    this._$eb = false;\n    this.motions = new Array();\n}\nV.prototype._$tb = function() {\n    return this.motions;\n}\n;\nV.prototype.startMotion = function(aJ, aI) {\n    var aM = null;\n    var aL = null;\n    var aH = this.motions.length;\n    for (var aK = 0; aK < aH; ++aK) {\n        aL = this.motions[aK];\n        if (aL == null) {\n            continue;\n        }\n        aL._$qS(aL._$w0.getFadeOut());\n        if (this._$eb) {\n            q._$Ji(\"MotionQueueManager[size:%2d]->startMotion() / start _$K _$3 (m%d)\\n\", aH, aL._$sr);\n        }\n    }\n    if (aJ == null) {\n        return -1;\n    }\n    aL = new M();\n    aL._$w0 = aJ;\n    this.motions.push(aL);\n    var aN = aL._$sr;\n    if (this._$eb) {\n        q._$Ji(\"MotionQueueManager[size:%2d]->startMotion() / new _$w0 (m%d)\\n\", aH, aN);\n    }\n    return aN;\n}\n;\nV.prototype.updateParam = function(aJ) {\n    try {\n        var aI = false;\n        for (var aK = 0; aK < this.motions.length; aK++) {\n            var aL = this.motions[aK];\n            if (aL == null) {\n                this.motions.splice(aK, 1);\n                aK--;\n                continue;\n            }\n            var aH = aL._$w0;\n            if (aH == null) {\n                this.motions = this.motions.splice(aK, 1);\n                aK--;\n                continue;\n            }\n            aH.updateParam(aJ, aL);\n            aI = true;\n            if (aL.isFinished()) {\n                if (this._$eb) {\n                    q._$Ji(\"MotionQueueManager[size:%2d]->updateParam() / _$T0 _$w0 (m%d)\\n\", this.motions.length - 1, aL._$sr);\n                }\n                this.motions.splice(aK, 1);\n                aK--;\n            } else {}\n        }\n        return aI;\n    } catch (aM) {\n        q._$li(aM);\n        return true;\n    }\n}\n;\nV.prototype.isFinished = function(aK) {\n    if (arguments.length >= 1) {\n        for (var aI = 0; aI < this.motions.length; aI++) {\n            var aJ = this.motions[aI];\n            if (aJ == null) {\n                continue;\n            }\n            if (aJ._$sr == aK && !aJ.isFinished()) {\n                return false;\n            }\n        }\n        return true;\n    } else {\n        for (var aI = 0; aI < this.motions.length; aI++) {\n            var aJ = this.motions[aI];\n            if (aJ == null) {\n                this.motions.splice(aI, 1);\n                aI--;\n                continue;\n            }\n            var aH = aJ._$w0;\n            if (aH == null) {\n                this.motions.splice(aI, 1);\n                aI--;\n                continue;\n            }\n            if (!aJ.isFinished()) {\n                return false;\n            }\n        }\n        return true;\n    }\n}\n;\nV.prototype.stopAllMotions = function() {\n    for (var aI = 0; aI < this.motions.length; aI++) {\n        var aJ = this.motions[aI];\n        if (aJ == null) {\n            this.motions.splice(aI, 1);\n            aI--;\n            continue;\n        }\n        var aH = aJ._$w0;\n        if (aH == null) {\n            this.motions.splice(aI, 1);\n            aI--;\n            continue;\n        }\n        if (true) {\n            this.motions.splice(aI, 1);\n            aI--;\n        }\n    }\n}\n;\nV.prototype._$Zr = function(aH) {\n    this._$eb = aH;\n}\n;\nV.prototype._$e = function() {\n    console.log(\"-- _$R --\\n\");\n    for (var aH = 0; aH < this.motions.length; aH++) {\n        var aI = this.motions[aH];\n        var aJ = aI._$w0;\n        console.log(\"MotionQueueEnt[%d] :: %s\\n\", this.motions.length, aJ.toString());\n    }\n}\n;\nfunction M() {\n    this._$w0 = null;\n    this._$AT = true;\n    this._$9L = false;\n    this._$z2 = -1;\n    this._$bs = -1;\n    this._$Do = -1;\n    this._$sr = null;\n    this._$sr = M._$Gs++;\n}\nM._$Gs = 0;\nM.prototype.isFinished = function() {\n    return this._$9L;\n}\n;\nM.prototype._$qS = function(aJ) {\n    var aI = P.getUserTimeMSec();\n    var aH = aI + aJ;\n    if (this._$Do < 0 || aH < this._$Do) {\n        this._$Do = aH;\n    }\n}\n;\nM.prototype._$Bs = function() {\n    return this._$sr;\n}\n;\nfunction am() {\n    this.m = new Array(1,0,0,0,1,0,0,0,1);\n}\nam.prototype.setContext = function(aI) {\n    var aH = this.m;\n    aI.transform(aH[0], aH[1], aH[3], aH[4], aH[6], aH[7]);\n}\n;\nam.prototype.toString = function() {\n    var aI = \"LDTransform { \";\n    for (var aH = 0; aH < 9; aH++) {\n        aI += this.m[aH].toFixed(2) + \" ,\";\n    }\n    aI += \" }\";\n    return aI;\n}\n;\nam.prototype.identity = function() {\n    var aH = this.m;\n    aH[0] = aH[4] = aH[8] = 1;\n    aH[1] = aH[2] = aH[3] = aH[5] = aH[6] = aH[7] = 0;\n}\n;\nam.prototype._$PS = function(aI, aK, aJ) {\n    if (aJ == null) {\n        aJ = new Array(0,0);\n    }\n    var aH = this.m;\n    aJ[0] = aH[0] * aI + aH[3] * aK + aH[6];\n    aJ[1] = aH[1] * aI + aH[4] * aK + aH[7];\n    return aJ;\n}\n;\nam.prototype._$P2 = function(aK) {\n    if (!aK) {\n        aK = new am();\n    }\n    var aI = this.m;\n    var aT = aI[0];\n    var aS = aI[1];\n    var aR = aI[2];\n    var aQ = aI[3];\n    var aP = aI[4];\n    var aO = aI[5];\n    var aN = aI[6];\n    var aM = aI[7];\n    var aL = aI[8];\n    var aJ = aT * aP * aL + aS * aO * aN + aR * aQ * aM - aT * aO * aM - aR * aP * aN - aS * aQ * aL;\n    if (aJ == 0) {\n        return null;\n    } else {\n        var aH = 1 / aJ;\n        aK.m[0] = aH * (aP * aL - aM * aO);\n        aK.m[1] = aH * (aM * aR - aS * aL);\n        aK.m[2] = aH * (aS * aO - aP * aR);\n        aK.m[3] = aH * (aN * aO - aQ * aL);\n        aK.m[4] = aH * (aT * aL - aN * aR);\n        aK.m[5] = aH * (aQ * aR - aT * aO);\n        aK.m[6] = aH * (aQ * aM - aN * aP);\n        aK.m[7] = aH * (aN * aS - aT * aM);\n        aK.m[8] = aH * (aT * aP - aQ * aS);\n        return aK;\n    }\n}\n;\nam.prototype.transform = function(aI, aK, aJ) {\n    if (aJ == null) {\n        aJ = new Array(0,0);\n    }\n    var aH = this.m;\n    aJ[0] = aH[0] * aI + aH[3] * aK + aH[6];\n    aJ[1] = aH[1] * aI + aH[4] * aK + aH[7];\n    return aJ;\n}\n;\nam.prototype.translate = function(aI, aJ) {\n    var aH = this.m;\n    aH[6] = aH[0] * aI + aH[3] * aJ + aH[6];\n    aH[7] = aH[1] * aI + aH[4] * aJ + aH[7];\n    aH[8] = aH[2] * aI + aH[5] * aJ + aH[8];\n}\n;\nam.prototype.scale = function(aJ, aI) {\n    var aH = this.m;\n    aH[0] *= aJ;\n    aH[1] *= aJ;\n    aH[2] *= aJ;\n    aH[3] *= aI;\n    aH[4] *= aI;\n    aH[5] *= aI;\n}\n;\nam.prototype.shear = function(aM, aL) {\n    var aH = this.m;\n    var aK = aH[0] + aH[3] * aL;\n    var aJ = aH[1] + aH[4] * aL;\n    var aI = aH[2] + aH[5] * aL;\n    aH[3] = aH[0] * aM + aH[3];\n    aH[4] = aH[1] * aM + aH[4];\n    aH[5] = aH[2] * aM + aH[5];\n    aH[0] = aK;\n    aH[1] = aJ;\n    aH[2] = aI;\n}\n;\nam.prototype.rotate = function(aM) {\n    var aH = this.m;\n    var aN = Math.cos(aM);\n    var aL = Math.sin(aM);\n    var aK = aH[0] * aN + aH[3] * aL;\n    var aJ = aH[1] * aN + aH[4] * aL;\n    var aI = aH[2] * aN + aH[5] * aL;\n    aH[3] = -aH[0] * aL + aH[3] * aN;\n    aH[4] = -aH[1] * aL + aH[4] * aN;\n    aH[5] = -aH[2] * aL + aH[5] * aN;\n    aH[0] = aK;\n    aH[1] = aJ;\n    aH[2] = aI;\n}\n;\nam.prototype.concatenate = function(aL) {\n    var aO = this.m;\n    var aM = aL.m;\n    var aS = aO[0] * aM[0] + aO[3] * aM[1] + aO[6] * aM[2];\n    var aR = aO[1] * aM[0] + aO[4] * aM[1] + aO[7] * aM[2];\n    var aQ = aO[2] * aM[0] + aO[5] * aM[1] + aO[8] * aM[2];\n    var aP = aO[0] * aM[3] + aO[3] * aM[4] + aO[6] * aM[5];\n    var aN = aO[1] * aM[3] + aO[4] * aM[4] + aO[7] * aM[5];\n    var aK = aO[2] * aM[3] + aO[5] * aM[4] + aO[8] * aM[5];\n    var aJ = aO[0] * aM[6] + aO[3] * aM[7] + aO[6] * aM[8];\n    var aI = aO[1] * aM[6] + aO[4] * aM[7] + aO[7] * aM[8];\n    var aH = aO[2] * aM[6] + aO[5] * aM[7] + aO[8] * aM[8];\n    m[0] = aS;\n    m[1] = aR;\n    m[2] = aQ;\n    m[3] = aP;\n    m[4] = aN;\n    m[5] = aK;\n    m[6] = aJ;\n    m[7] = aI;\n    m[8] = aH;\n}\n;\nfunction n(aH) {\n    if (j) {\n        return;\n    }\n    ak.prototype.constructor.call(this, aH);\n}\nn.prototype = new ak();\nn._$eT = null;\nn._$tP = new Object();\nn._$2o = function() {\n    if (n._$eT == null) {\n        n._$eT = n.getID(\"DST_BASE\");\n    }\n    return n._$eT;\n}\n;\nn._$27 = function() {\n    n._$tP.clear();\n    n._$eT = null;\n}\n;\nn.getID = function(aH) {\n    var aI = n._$tP[aH];\n    if (aI == null) {\n        aI = new n(aH);\n        n._$tP[aH] = aI;\n    }\n    return aI;\n}\n;\nn.prototype._$3s = function() {\n    return new n();\n}\n;\nfunction C(aH) {\n    if (j) {\n        return;\n    }\n    ax.prototype.constructor.call(this);\n    this.textures = new Array();\n    this.transform = null;\n    this.gl = null;\n    this.glno = aH;\n    this.firstDraw = true;\n    this.anisotropyExt = null;\n    this.maxAnisotropy = 0;\n    this._$As = 32;\n    this._$Gr = false;\n    this._$NT = null;\n    this._$vS = null;\n    this._$no = null;\n    this.vertShader = null;\n    this.fragShader = null;\n    this.vertShaderOff = null;\n    this.fragShaderOff = null;\n}\nC.prototype = new ax();\nC._$9r = function(aH) {\n    var aI = new Float32Array(aH);\n    return aI;\n}\n;\nC._$vb = function(aH) {\n    var aI = new Int16Array(aH);\n    return aI;\n}\n;\nC._$cr = function(aI, aH) {\n    if (aI == null || aI._$yL() < aH.length) {\n        aI = C._$9r(aH.length * 2);\n        aI.put(aH);\n        aI._$oT(0);\n    } else {\n        aI.clear();\n        aI.put(aH);\n        aI._$oT(0);\n    }\n    return aI;\n}\n;\nC._$mb = function(aI, aH) {\n    if (aI == null || aI._$yL() < aH.length) {\n        aI = C._$vb(aH.length * 2);\n        aI.put(aH);\n        aI._$oT(0);\n    } else {\n        aI.clear();\n        aI.put(aH);\n        aI._$oT(0);\n    }\n    return aI;\n}\n;\nC._$Hs = function() {\n    return this._$Gr;\n}\n;\nC._$as = function(aH) {\n    this._$Gr = aH;\n}\n;\nC.prototype.getGL = function() {\n    return this.gl;\n}\n;\nC.prototype.setGL = function(aH) {\n    this.gl = aH;\n}\n;\nC.prototype.setTransform = function(aH) {\n    this.transform = aH;\n}\n;\nC.prototype._$ZT = function() {\n    var aH = this.gl;\n    if (this.firstDraw) {\n        this.initShader();\n        this.firstDraw = false;\n        this.anisotropyExt = aH.getExtension(\"EXT_texture_filter_anisotropic\") || aH.getExtension(\"WEBKIT_EXT_texture_filter_anisotropic\") || aH.getExtension(\"MOZ_EXT_texture_filter_anisotropic\");\n        if (this.anisotropyExt) {\n            this.maxAnisotropy = aH.getParameter(this.anisotropyExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT);\n        }\n    }\n    aH.disable(aH.SCISSOR_TEST);\n    aH.disable(aH.STENCIL_TEST);\n    aH.disable(aH.DEPTH_TEST);\n    aH.frontFace(aH.CW);\n    aH.enable(aH.BLEND);\n    aH.colorMask(1, 1, 1, 1);\n    aH.bindBuffer(aH.ARRAY_BUFFER, null);\n    aH.bindBuffer(aH.ELEMENT_ARRAY_BUFFER, null);\n}\n;\nC.prototype._$Uo = function(aS, aT, aL, aU, aV, aN, aM, aO) {\n    if (aN < 0.01 && this.clipBufPre_clipContextMask == null) {\n        return;\n    }\n    var aH = aN > 0.9 ? Q.EXPAND_W : 0;\n    var a0 = this.gl;\n    if (this.gl == null) {\n        throw new Error(\"gl is null\");\n    }\n    var a1 = false;\n    var aQ = 1;\n    var aP = 1;\n    var a3 = 1;\n    var aZ = 1;\n    var aW = this._$C0 * aP * aN;\n    var a2 = this._$tT * a3 * aN;\n    var a5 = this._$WL * aZ * aN;\n    var a7 = this._$lT * aN;\n    if (this.clipBufPre_clipContextMask != null) {\n        a0.frontFace(a0.CCW);\n        a0.useProgram(this.shaderProgram);\n        this._$vS = T(a0, this._$vS, aU);\n        this._$no = L(a0, this._$no, aL);\n        a0.enableVertexAttribArray(this.a_position_Loc);\n        a0.vertexAttribPointer(this.a_position_Loc, 2, a0.FLOAT, false, 0, 0);\n        this._$NT = T(a0, this._$NT, aV);\n        a0.activeTexture(a0.TEXTURE1);\n        a0.bindTexture(a0.TEXTURE_2D, this.textures[aS]);\n        a0.uniform1i(this.s_texture0_Loc, 1);\n        a0.enableVertexAttribArray(this.a_texCoord_Loc);\n        a0.vertexAttribPointer(this.a_texCoord_Loc, 2, a0.FLOAT, false, 0, 0);\n        a0.uniformMatrix4fv(this.u_matrix_Loc, false, this.getClipBufPre_clipContextMask().matrixForMask);\n        var aY = this.getClipBufPre_clipContextMask().layoutChannelNo;\n        var a4 = this.getChannelFlagAsColor(aY);\n        a0.uniform4f(this.u_channelFlag, a4.r, a4.g, a4.b, a4.a);\n        var aI = this.getClipBufPre_clipContextMask().layoutBounds;\n        a0.uniform4f(this.u_baseColor_Loc, aI.x * 2 - 1, aI.y * 2 - 1, aI._$EL() * 2 - 1, aI._$5T() * 2 - 1);\n        a0.uniform1i(this.u_maskFlag_Loc, true);\n    } else {\n        a1 = this.getClipBufPre_clipContextDraw() != null;\n        if (a1) {\n            a0.useProgram(this.shaderProgramOff);\n            this._$vS = T(a0, this._$vS, aU);\n            this._$no = L(a0, this._$no, aL);\n            a0.enableVertexAttribArray(this.a_position_Loc_Off);\n            a0.vertexAttribPointer(this.a_position_Loc_Off, 2, a0.FLOAT, false, 0, 0);\n            this._$NT = T(a0, this._$NT, aV);\n            a0.activeTexture(a0.TEXTURE1);\n            a0.bindTexture(a0.TEXTURE_2D, this.textures[aS]);\n            a0.uniform1i(this.s_texture0_Loc_Off, 1);\n            a0.enableVertexAttribArray(this.a_texCoord_Loc_Off);\n            a0.vertexAttribPointer(this.a_texCoord_Loc_Off, 2, a0.FLOAT, false, 0, 0);\n            a0.uniformMatrix4fv(this.u_clipMatrix_Loc_Off, false, this.getClipBufPre_clipContextDraw().matrixForDraw);\n            a0.uniformMatrix4fv(this.u_matrix_Loc_Off, false, this.matrix4x4);\n            a0.activeTexture(a0.TEXTURE2);\n            a0.bindTexture(a0.TEXTURE_2D, Q.fTexture[this.glno]);\n            a0.uniform1i(this.s_texture1_Loc_Off, 2);\n            var aY = this.getClipBufPre_clipContextDraw().layoutChannelNo;\n            var a4 = this.getChannelFlagAsColor(aY);\n            a0.uniform4f(this.u_channelFlag_Loc_Off, a4.r, a4.g, a4.b, a4.a);\n            a0.uniform4f(this.u_baseColor_Loc_Off, aW, a2, a5, a7);\n        } else {\n            a0.useProgram(this.shaderProgram);\n            this._$vS = T(a0, this._$vS, aU);\n            this._$no = L(a0, this._$no, aL);\n            a0.enableVertexAttribArray(this.a_position_Loc);\n            a0.vertexAttribPointer(this.a_position_Loc, 2, a0.FLOAT, false, 0, 0);\n            this._$NT = T(a0, this._$NT, aV);\n            a0.activeTexture(a0.TEXTURE1);\n            a0.bindTexture(a0.TEXTURE_2D, this.textures[aS]);\n            a0.uniform1i(this.s_texture0_Loc, 1);\n            a0.enableVertexAttribArray(this.a_texCoord_Loc);\n            a0.vertexAttribPointer(this.a_texCoord_Loc, 2, a0.FLOAT, false, 0, 0);\n            a0.uniformMatrix4fv(this.u_matrix_Loc, false, this.matrix4x4);\n            a0.uniform4f(this.u_baseColor_Loc, aW, a2, a5, a7);\n            a0.uniform1i(this.u_maskFlag_Loc, false);\n        }\n    }\n    if (this.culling) {\n        this.gl.enable(a0.CULL_FACE);\n    } else {\n        this.gl.disable(a0.CULL_FACE);\n    }\n    this.gl.enable(a0.BLEND);\n    var a6;\n    var aX;\n    var aR;\n    var aK;\n    if (this.clipBufPre_clipContextMask != null) {\n        a6 = a0.ONE;\n        aX = a0.ONE_MINUS_SRC_ALPHA;\n        aR = a0.ONE;\n        aK = a0.ONE_MINUS_SRC_ALPHA;\n    } else {\n        switch (aM) {\n        case b._$ms:\n            a6 = a0.ONE;\n            aX = a0.ONE_MINUS_SRC_ALPHA;\n            aR = a0.ONE;\n            aK = a0.ONE_MINUS_SRC_ALPHA;\n            break;\n        case b._$ns:\n            a6 = a0.ONE;\n            aX = a0.ONE;\n            aR = a0.ZERO;\n            aK = a0.ONE;\n            break;\n        case b._$_s:\n            a6 = a0.DST_COLOR;\n            aX = a0.ONE_MINUS_SRC_ALPHA;\n            aR = a0.ZERO;\n            aK = a0.ONE;\n            break;\n        }\n    }\n    a0.blendEquationSeparate(a0.FUNC_ADD, a0.FUNC_ADD);\n    a0.blendFuncSeparate(a6, aX, aR, aK);\n    if (this.anisotropyExt) {\n        a0.texParameteri(a0.TEXTURE_2D, this.anisotropyExt.TEXTURE_MAX_ANISOTROPY_EXT, this.maxAnisotropy);\n    }\n    var aJ = aL.length;\n    a0.drawElements(a0.TRIANGLES, aJ, a0.UNSIGNED_SHORT, 0);\n    a0.bindTexture(a0.TEXTURE_2D, null);\n}\n;\nfunction T(aJ, aH, aI) {\n    if (aH == null) {\n        aH = aJ.createBuffer();\n    }\n    aJ.bindBuffer(aJ.ARRAY_BUFFER, aH);\n    aJ.bufferData(aJ.ARRAY_BUFFER, aI, aJ.DYNAMIC_DRAW);\n    return aH;\n}\nfunction L(aJ, aH, aI) {\n    if (aH == null) {\n        aH = aJ.createBuffer();\n    }\n    aJ.bindBuffer(aJ.ELEMENT_ARRAY_BUFFER, aH);\n    aJ.bufferData(aJ.ELEMENT_ARRAY_BUFFER, aI, aJ.DYNAMIC_DRAW);\n    return aH;\n}\nC.prototype._$Rs = function() {\n    throw new Error(\"_$Rs\");\n}\n;\nC.prototype._$Ds = function(aH) {\n    throw new Error(\"_$Ds\");\n}\n;\nC.prototype._$K2 = function() {\n    for (var aH = 0; aH < this.textures.length; aH++) {\n        var aI = this.textures[aH];\n        if (aI != 0) {\n            this.gl._$K2(1, this.textures, aH);\n            this.textures[aH] = null;\n        }\n    }\n}\n;\nC.prototype.setTexture = function(aH, aI) {\n    this.textures[aH] = aI;\n}\n;\nC.prototype.initShader = function() {\n    var aH = this.gl;\n    this.loadShaders2();\n    this.a_position_Loc = aH.getAttribLocation(this.shaderProgram, \"a_position\");\n    this.a_texCoord_Loc = aH.getAttribLocation(this.shaderProgram, \"a_texCoord\");\n    this.u_matrix_Loc = aH.getUniformLocation(this.shaderProgram, \"u_mvpMatrix\");\n    this.s_texture0_Loc = aH.getUniformLocation(this.shaderProgram, \"s_texture0\");\n    this.u_channelFlag = aH.getUniformLocation(this.shaderProgram, \"u_channelFlag\");\n    this.u_baseColor_Loc = aH.getUniformLocation(this.shaderProgram, \"u_baseColor\");\n    this.u_maskFlag_Loc = aH.getUniformLocation(this.shaderProgram, \"u_maskFlag\");\n    this.a_position_Loc_Off = aH.getAttribLocation(this.shaderProgramOff, \"a_position\");\n    this.a_texCoord_Loc_Off = aH.getAttribLocation(this.shaderProgramOff, \"a_texCoord\");\n    this.u_matrix_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"u_mvpMatrix\");\n    this.u_clipMatrix_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"u_ClipMatrix\");\n    this.s_texture0_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"s_texture0\");\n    this.s_texture1_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"s_texture1\");\n    this.u_channelFlag_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"u_channelFlag\");\n    this.u_baseColor_Loc_Off = aH.getUniformLocation(this.shaderProgramOff, \"u_baseColor\");\n}\n;\nC.prototype.disposeShader = function() {\n    var aH = this.gl;\n    if (this.shaderProgram) {\n        aH.deleteProgram(this.shaderProgram);\n        this.shaderProgram = null;\n    }\n    if (this.shaderProgramOff) {\n        aH.deleteProgram(this.shaderProgramOff);\n        this.shaderProgramOff = null;\n    }\n}\n;\nC.prototype.compileShader = function(aJ, aN) {\n    var aM = this.gl;\n    var aH;\n    var aL = aN;\n    var aK = aM.createShader(aJ);\n    if (aK == null) {\n        q._$Ji(\"_$L0 to create shader\");\n        return null;\n    }\n    aM.shaderSource(aK, aL);\n    aM.compileShader(aK);\n    var aH = aM.getShaderParameter(aK, aM.COMPILE_STATUS);\n    if (!aH) {\n        var aI = aM.getShaderInfoLog(aK);\n        q._$Ji(\"_$L0 to compile shader : \" + aI);\n        aM.deleteShader(aK);\n        return null;\n    }\n    return aK;\n}\n;\nC.prototype.loadShaders2 = function() {\n    var aN = this.gl;\n    this.shaderProgram = aN.createProgram();\n    if (!this.shaderProgram) {\n        return false;\n    }\n    this.shaderProgramOff = aN.createProgram();\n    if (!this.shaderProgramOff) {\n        return false;\n    }\n    var aK = \"attribute vec4     a_position;attribute vec2     a_texCoord;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform mat4       u_mvpMatrix;void main(){    gl_Position = u_mvpMatrix * a_position;    v_ClipPos = u_mvpMatrix * a_position;    v_texCoord = a_texCoord;}\";\n    var aM = \"precision mediump float;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform sampler2D  s_texture0;uniform vec4       u_channelFlag;uniform vec4       u_baseColor;uniform bool       u_maskFlag;void main(){    vec4 smpColor;     if(u_maskFlag){        float isInside =             step(u_baseColor.x, v_ClipPos.x/v_ClipPos.w)          * step(u_baseColor.y, v_ClipPos.y/v_ClipPos.w)          * step(v_ClipPos.x/v_ClipPos.w, u_baseColor.z)          * step(v_ClipPos.y/v_ClipPos.w, u_baseColor.w);        smpColor = u_channelFlag * texture2D(s_texture0 , v_texCoord).a * isInside;    }else{        smpColor = texture2D(s_texture0 , v_texCoord) * u_baseColor;    }    gl_FragColor = smpColor;}\";\n    var aL = \"attribute vec4     a_position;attribute vec2     a_texCoord;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform mat4       u_mvpMatrix;uniform mat4       u_ClipMatrix;void main(){    gl_Position = u_mvpMatrix * a_position;    v_ClipPos = u_ClipMatrix * a_position;    v_texCoord = a_texCoord ;}\";\n    var aJ = \"precision mediump float ;varying vec2       v_texCoord;varying vec4       v_ClipPos;uniform sampler2D  s_texture0;uniform sampler2D  s_texture1;uniform vec4       u_channelFlag;uniform vec4       u_baseColor ;void main(){    vec4 col_formask = texture2D(s_texture0, v_texCoord) * u_baseColor;    vec4 clipMask = texture2D(s_texture1, v_ClipPos.xy / v_ClipPos.w) * u_channelFlag;    float maskVal = clipMask.r + clipMask.g + clipMask.b + clipMask.a;    col_formask = col_formask * maskVal;    gl_FragColor = col_formask;}\";\n    this.vertShader = this.compileShader(aN.VERTEX_SHADER, aK);\n    if (!this.vertShader) {\n        q._$Ji(\"Vertex shader compile _$li!\");\n        return false;\n    }\n    this.vertShaderOff = this.compileShader(aN.VERTEX_SHADER, aL);\n    if (!this.vertShaderOff) {\n        q._$Ji(\"OffVertex shader compile _$li!\");\n        return false;\n    }\n    this.fragShader = this.compileShader(aN.FRAGMENT_SHADER, aM);\n    if (!this.fragShader) {\n        q._$Ji(\"Fragment shader compile _$li!\");\n        return false;\n    }\n    this.fragShaderOff = this.compileShader(aN.FRAGMENT_SHADER, aJ);\n    if (!this.fragShaderOff) {\n        q._$Ji(\"OffFragment shader compile _$li!\");\n        return false;\n    }\n    aN.attachShader(this.shaderProgram, this.vertShader);\n    aN.attachShader(this.shaderProgram, this.fragShader);\n    aN.attachShader(this.shaderProgramOff, this.vertShaderOff);\n    aN.attachShader(this.shaderProgramOff, this.fragShaderOff);\n    aN.linkProgram(this.shaderProgram);\n    aN.linkProgram(this.shaderProgramOff);\n    var aH = aN.getProgramParameter(this.shaderProgram, aN.LINK_STATUS);\n    if (!aH) {\n        var aI = aN.getProgramInfoLog(this.shaderProgram);\n        q._$Ji(\"_$L0 to link program: \" + aI);\n        if (this.vertShader) {\n            aN.deleteShader(this.vertShader);\n            this.vertShader = 0;\n        }\n        if (this.fragShader) {\n            aN.deleteShader(this.fragShader);\n            this.fragShader = 0;\n        }\n        if (this.shaderProgram) {\n            aN.deleteProgram(this.shaderProgram);\n            this.shaderProgram = 0;\n        }\n        if (this.vertShaderOff) {\n            aN.deleteShader(this.vertShaderOff);\n            this.vertShaderOff = 0;\n        }\n        if (this.fragShaderOff) {\n            aN.deleteShader(this.fragShaderOff);\n            this.fragShaderOff = 0;\n        }\n        if (this.shaderProgramOff) {\n            aN.deleteProgram(this.shaderProgramOff);\n            this.shaderProgramOff = 0;\n        }\n        return false;\n    }\n    return true;\n}\n;\nC.prototype.createFramebuffer = function() {\n    var aL = this.gl;\n    var aK = Q.clippingMaskBufferSize;\n    var aJ = aL.createFramebuffer();\n    aL.bindFramebuffer(aL.FRAMEBUFFER, aJ);\n    var aH = aL.createRenderbuffer();\n    aL.bindRenderbuffer(aL.RENDERBUFFER, aH);\n    aL.renderbufferStorage(aL.RENDERBUFFER, aL.RGBA4, aK, aK);\n    aL.framebufferRenderbuffer(aL.FRAMEBUFFER, aL.COLOR_ATTACHMENT0, aL.RENDERBUFFER, aH);\n    var aI = aL.createTexture();\n    aL.bindTexture(aL.TEXTURE_2D, aI);\n    aL.texImage2D(aL.TEXTURE_2D, 0, aL.RGBA, aK, aK, 0, aL.RGBA, aL.UNSIGNED_BYTE, null);\n    aL.texParameteri(aL.TEXTURE_2D, aL.TEXTURE_MIN_FILTER, aL.LINEAR);\n    aL.texParameteri(aL.TEXTURE_2D, aL.TEXTURE_MAG_FILTER, aL.LINEAR);\n    aL.texParameteri(aL.TEXTURE_2D, aL.TEXTURE_WRAP_S, aL.CLAMP_TO_EDGE);\n    aL.texParameteri(aL.TEXTURE_2D, aL.TEXTURE_WRAP_T, aL.CLAMP_TO_EDGE);\n    aL.framebufferTexture2D(aL.FRAMEBUFFER, aL.COLOR_ATTACHMENT0, aL.TEXTURE_2D, aI, 0);\n    aL.bindTexture(aL.TEXTURE_2D, null);\n    aL.bindRenderbuffer(aL.RENDERBUFFER, null);\n    aL.bindFramebuffer(aL.FRAMEBUFFER, null);\n    Q.fTexture[this.glno] = aI;\n    return {\n        framebuffer: aJ,\n        renderbuffer: aH,\n        texture: Q.fTexture[this.glno]\n    };\n}\n;\nfunction K(aH) {\n    if (j) {\n        return;\n    }\n    this._$P = new Int8Array(8);\n    this._$R0 = new DataView(this._$P.buffer);\n    this._$3i = new Int8Array(1000);\n    this._$hL = 0;\n    this._$v0 = 0;\n    this._$S2 = 0;\n    this._$Ko = new Array();\n    this._$T = aH;\n    this._$F = 0;\n}\nK.prototype._$fP = function() {\n    var aK = this._$ST();\n    var aJ, aI, aH;\n    if ((aK & 128) == 0) {\n        return aK & 255;\n    } else {\n        if (((aJ = this._$ST()) & 128) == 0) {\n            return ((aK & 127) << 7) | (aJ & 127);\n        } else {\n            if (((aI = this._$ST()) & 128) == 0) {\n                return ((aK & 127) << 14) | ((aJ & 127) << 7) | (aI & 255);\n            } else {\n                if (((aH = this._$ST()) & 128) == 0) {\n                    return ((aK & 127) << 21) | ((aJ & 127) << 14) | ((aI & 127) << 7) | (aH & 255);\n                } else {\n                    throw new J(\"_$L _$0P  _\");\n                }\n            }\n        }\n    }\n}\n;\nK.prototype.getFormatVersion = function() {\n    return this._$S2;\n}\n;\nK.prototype._$gr = function(aH) {\n    this._$S2 = aH;\n}\n;\nK.prototype._$3L = function() {\n    return this._$fP();\n}\n;\nK.prototype._$mP = function() {\n    this._$zT();\n    this._$F += 8;\n    return this._$T.getFloat64(this._$F - 8);\n}\n;\nK.prototype._$_T = function() {\n    this._$zT();\n    this._$F += 4;\n    return this._$T.getFloat32(this._$F - 4);\n}\n;\nK.prototype._$6L = function() {\n    this._$zT();\n    this._$F += 4;\n    return this._$T.getInt32(this._$F - 4);\n}\n;\nK.prototype._$ST = function() {\n    this._$zT();\n    return this._$T.getInt8(this._$F++);\n}\n;\nK.prototype._$9T = function() {\n    this._$zT();\n    this._$F += 2;\n    return this._$T.getInt16(this._$F - 2);\n}\n;\nK.prototype._$2T = function() {\n    this._$zT();\n    this._$F += 8;\n    throw new J(\"_$L _$q read long\");\n}\n;\nK.prototype._$po = function() {\n    this._$zT();\n    return this._$T.getInt8(this._$F++) != 0;\n}\n;\nvar O = true;\nK.prototype._$bT = function() {\n    this._$zT();\n    var aH = this._$3L();\n    var aK = null;\n    if (O) {\n        try {\n            var aM = new ArrayBuffer(aH * 2);\n            aK = new Uint16Array(aM);\n            for (var aJ = 0; aJ < aH; ++aJ) {\n                aK[aJ] = this._$T.getUint8(this._$F++);\n            }\n            return String.fromCharCode.apply(null, aK);\n        } catch (aL) {\n            O = false;\n        }\n    }\n    try {\n        var aI = new Array();\n        if (aK == null) {\n            for (var aJ = 0; aJ < aH; ++aJ) {\n                aI[aJ] = this._$T.getUint8(this._$F++);\n            }\n        } else {\n            for (var aJ = 0; aJ < aH; ++aJ) {\n                aI[aJ] = aK[aJ];\n            }\n        }\n        return String.fromCharCode.apply(null, aI);\n    } catch (aL) {\n        console.log(\"read utf8 / _$rT _$L0 !! : \" + aL);\n    }\n}\n;\nK.prototype._$cS = function() {\n    this._$zT();\n    var aI = this._$3L();\n    var aH = new Int32Array(aI);\n    for (var aJ = 0; aJ < aI; aJ++) {\n        aH[aJ] = this._$T.getInt32(this._$F);\n        this._$F += 4;\n    }\n    return aH;\n}\n;\nK.prototype._$Tb = function() {\n    this._$zT();\n    var aI = this._$3L();\n    var aH = new Float32Array(aI);\n    for (var aJ = 0; aJ < aI; aJ++) {\n        aH[aJ] = this._$T.getFloat32(this._$F);\n        this._$F += 4;\n    }\n    return aH;\n}\n;\nK.prototype._$5b = function() {\n    this._$zT();\n    var aI = this._$3L();\n    var aH = new Float64Array(aI);\n    for (var aJ = 0; aJ < aI; aJ++) {\n        aH[aJ] = this._$T.getFloat64(this._$F);\n        this._$F += 8;\n    }\n    return aH;\n}\n;\nK.prototype._$nP = function() {\n    return this._$Jb(-1);\n}\n;\nK.prototype._$Jb = function(aJ) {\n    this._$zT();\n    if (aJ < 0) {\n        aJ = this._$3L();\n    }\n    if (aJ == ay._$7P) {\n        var aH = this._$6L();\n        if (0 <= aH && aH < this._$Ko.length) {\n            return this._$Ko[aH];\n        } else {\n            throw new J(\"_$sL _$4i @_$m0\");\n        }\n    } else {\n        var aI = this._$4b(aJ);\n        this._$Ko.push(aI);\n        return aI;\n    }\n}\n;\nK.prototype._$4b = function(aN) {\n    if (aN == 0) {\n        return null;\n    }\n    if (aN == 50) {\n        var aK = this._$bT();\n        var aI = Z.getID(aK);\n        return aI;\n    } else {\n        if (aN == 51) {\n            var aK = this._$bT();\n            var aI = n.getID(aK);\n            return aI;\n        } else {\n            if (aN == 134) {\n                var aK = this._$bT();\n                var aI = i.getID(aK);\n                return aI;\n            } else {\n                if (aN == 60) {\n                    var aK = this._$bT();\n                    var aI = z.getID(aK);\n                    return aI;\n                }\n            }\n        }\n    }\n    if (aN >= 48) {\n        var aL = ay._$9o(aN);\n        if (aL != null) {\n            aL._$F0(this);\n            return aL;\n        } else {\n            return null;\n        }\n    }\n    switch (aN) {\n    case 1:\n        return this._$bT();\n    case 10:\n        var aM = this._$6L();\n        return new I(aM,true);\n    case 11:\n        return new av(this._$mP(),this._$mP(),this._$mP(),this._$mP());\n    case 12:\n        return new av(this._$_T(),this._$_T(),this._$_T(),this._$_T());\n    case 13:\n        return new e(this._$mP(),this._$mP());\n    case 14:\n        return new e(this._$_T(),this._$_T());\n    case 15:\n        var aH = this._$3L();\n        var aI = new Array(aH);\n        for (var aJ = 0; aJ < aH; aJ++) {\n            aI[aJ] = this._$nP();\n        }\n        return aI;\n    case 17:\n        var aI = new aD(this._$mP(),this._$mP(),this._$mP(),this._$mP(),this._$mP(),this._$mP());\n        return aI;\n    case 21:\n        return new F(this._$6L(),this._$6L(),this._$6L(),this._$6L());\n    case 22:\n        return new k(this._$6L(),this._$6L());\n    case 23:\n        throw new Error(\"_$L _$ro \");\n    case 16:\n    case 25:\n        return this._$cS();\n    case 26:\n        return this._$5b();\n    case 27:\n        return this._$Tb();\n    case 2:\n    case 3:\n    case 4:\n    case 5:\n    case 6:\n    case 7:\n    case 8:\n    case 9:\n    case 18:\n    case 19:\n    case 20:\n    case 24:\n    case 28:\n        throw new J(\"_$6 _$q : _$nP() of 2-9 ,18,19,20,24,28 : \" + aN);\n    default:\n        throw new J(\"_$6 _$q : _$nP() NO _$i : \" + aN);\n    }\n}\n;\nK.prototype._$8L = function() {\n    if (this._$hL == 0) {\n        this._$v0 = this._$ST();\n    } else {\n        if (this._$hL == 8) {\n            this._$v0 = this._$ST();\n            this._$hL = 0;\n        }\n    }\n    return ((this._$v0 >> (7 - this._$hL++)) & 1) == 1;\n}\n;\nK.prototype._$zT = function() {\n    if (this._$hL != 0) {\n        this._$hL = 0;\n    }\n}\n;\nfunction ai() {}\nai.prototype._$wP = function(aM, aI, aK) {\n    for (var aL = 0; aL < aK; aL++) {\n        for (var aH = 0; aH < aI; aH++) {\n            var aJ = 2 * (aH + aL * aI);\n            console.log(\"(% 7.3f , % 7.3f) , \", aM[aJ], aM[aJ + 1]);\n        }\n        console.log(\"\\n\");\n    }\n    console.log(\"\\n\");\n}\n;\nfunction aC() {}\naC._$2S = Math.PI / 180;\naC._$bS = (Math.PI / 180);\naC._$wS = 180 / Math.PI;\naC._$NS = (180 / Math.PI);\naC.PI_F = Math.PI;\naC._$kT = [0, 0.012368, 0.024734, 0.037097, 0.049454, 0.061803, 0.074143, 0.086471, 0.098786, 0.111087, 0.12337, 0.135634, 0.147877, 0.160098, 0.172295, 0.184465, 0.196606, 0.208718, 0.220798, 0.232844, 0.244854, 0.256827, 0.268761, 0.280654, 0.292503, 0.304308, 0.316066, 0.327776, 0.339436, 0.351044, 0.362598, 0.374097, 0.385538, 0.396921, 0.408243, 0.419502, 0.430697, 0.441826, 0.452888, 0.463881, 0.474802, 0.485651, 0.496425, 0.507124, 0.517745, 0.528287, 0.538748, 0.549126, 0.559421, 0.56963, 0.579752, 0.589785, 0.599728, 0.609579, 0.619337, 0.629, 0.638567, 0.648036, 0.657406, 0.666676, 0.675843, 0.684908, 0.693867, 0.70272, 0.711466, 0.720103, 0.72863, 0.737045, 0.745348, 0.753536, 0.76161, 0.769566, 0.777405, 0.785125, 0.792725, 0.800204, 0.807561, 0.814793, 0.821901, 0.828884, 0.835739, 0.842467, 0.849066, 0.855535, 0.861873, 0.868079, 0.874153, 0.880093, 0.885898, 0.891567, 0.897101, 0.902497, 0.907754, 0.912873, 0.917853, 0.922692, 0.92739, 0.931946, 0.936359, 0.940629, 0.944755, 0.948737, 0.952574, 0.956265, 0.959809, 0.963207, 0.966457, 0.96956, 0.972514, 0.97532, 0.977976, 0.980482, 0.982839, 0.985045, 0.987101, 0.989006, 0.990759, 0.992361, 0.993811, 0.995109, 0.996254, 0.997248, 0.998088, 0.998776, 0.999312, 0.999694, 0.999924, 1];\naC._$92 = function(aK, aI) {\n    var aH = Math.atan2(aK[1], aK[0]);\n    var aJ = Math.atan2(aI[1], aI[0]);\n    return aC._$tS(aH, aJ);\n}\n;\naC._$tS = function(aI, aH) {\n    var aJ = aI - aH;\n    while (aJ < -Math.PI) {\n        aJ += 2 * Math.PI;\n    }\n    while (aJ > Math.PI) {\n        aJ -= 2 * Math.PI;\n    }\n    return aJ;\n}\n;\naC._$9 = function(aH) {\n    return Math.sin(aH);\n}\n;\naC.fcos = function(aH) {\n    return Math.cos(aH);\n}\n;\nfunction aB(aH) {\n    if (j) {\n        return;\n    }\n    this._$e0 = null;\n    this._$IP = null;\n    this._$Us = null;\n    this._$7s = null;\n    this._$IS = [false];\n    this._$VS = null;\n    this._$AT = true;\n    this.baseOpacity = 1;\n    this.clipBufPre_clipContext = null;\n    this._$e0 = aH;\n}\naB.prototype._$u2 = function() {\n    return this._$IS[0];\n}\n;\naB.prototype._$yo = function() {\n    return this._$AT && !this._$IS[0];\n}\n;\naB.prototype._$GT = function() {\n    return this._$e0;\n}\n;\nfunction r() {}\nr._$W2 = 0;\nr.SYSTEM_INFO = null;\nr.USER_AGENT = navigator.userAgent;\nr.isIPhone = function() {\n    if (!r.SYSTEM_INFO) {\n        r.setup();\n    }\n    return r.SYSTEM_INFO._isIPhone;\n}\n;\nr.isIOS = function() {\n    if (!r.SYSTEM_INFO) {\n        r.setup();\n    }\n    return r.SYSTEM_INFO._isIPhone || r.SYSTEM_INFO._isIPad;\n}\n;\nr.isAndroid = function() {\n    if (!r.SYSTEM_INFO) {\n        r.setup();\n    }\n    return r.SYSTEM_INFO._isAndroid;\n}\n;\nr.getOSVersion = function() {\n    if (!r.SYSTEM_INFO) {\n        r.setup();\n    }\n    return r.SYSTEM_INFO.version;\n}\n;\nr.getOS = function() {\n    if (!r.SYSTEM_INFO) {\n        r.setup();\n    }\n    if (r.SYSTEM_INFO._isIPhone || r.SYSTEM_INFO._isIPad) {\n        return \"iOS\";\n    }\n    if (r.SYSTEM_INFO._isAndroid) {\n        return \"Android\";\n    } else {\n        return \"_$Q0 OS\";\n    }\n}\n;\nr.setup = function() {\n    var aK = r.USER_AGENT;\n    function aI(aO, aR) {\n        var aN = aO.substring(aR).split(/[ _,;\\.]/);\n        var aQ = 0;\n        for (var aM = 0; aM <= 2; aM++) {\n            if (isNaN(aN[aM])) {\n                break;\n            }\n            var aP = parseInt(aN[aM]);\n            if (aP < 0 || aP > 999) {\n                q._$li(\"err : \" + aP + \" @UtHtml5.setup()\");\n                aQ = 0;\n                break;\n            }\n            aQ += aP * Math.pow(1000, (2 - aM));\n        }\n        return aQ;\n    }\n    var aL;\n    var aH;\n    var aJ = r.SYSTEM_INFO = {\n        userAgent: aK\n    };\n    if ((aL = aK.indexOf(\"iPhone OS \")) >= 0) {\n        aJ.os = \"iPhone\";\n        aJ._isIPhone = true;\n        aJ.version = aI(aK, aL + \"iPhone OS \".length);\n    } else {\n        if ((aL = aK.indexOf(\"iPad\")) >= 0) {\n            aL = aK.indexOf(\"CPU OS\");\n            if (aL < 0) {\n                q._$li(\" err : \" + aK + \" @UtHtml5.setup()\");\n                return;\n            }\n            aJ.os = \"iPad\";\n            aJ._isIPad = true;\n            aJ.version = aI(aK, aL + \"CPU OS \".length);\n        } else {\n            if ((aL = aK.indexOf(\"Android\")) >= 0) {\n                aJ.os = \"Android\";\n                aJ._isAndroid = true;\n                aJ.version = aI(aK, aL + \"Android \".length);\n            } else {\n                aJ.os = \"-\";\n                aJ.version = -1;\n            }\n        }\n    }\n}\n;\nQ.init();\nvar j = false;\n\nexport{\n  P as UtSystem,\n  q as UtDebug,\n  am as LDTransform,\n  au as LDGL,\n  Q as Live2D,\n  l as Live2DModelWebGL,\n  v as Live2DModelJS,\n  ao as Live2DMotion,\n  V as MotionQueueManager,\n  u as PhysicsHair,\n  ah as AMotion,\n  i as PartsDataID,\n  Z as DrawDataID,\n  n as BaseDataID,\n  z as ParamID,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/live2d.core.js","/**\n *\n *  You can modify and use this source freely\n *  only for the development of application related Live2D.\n *\n *  (c) Live2D Inc. All rights reserved.\n */\n\n/**\n * EYHN 基于 live2d 官方 Live2DFramework.js 修改\n *\n * Copyright © 2016 - 2017 EYHN\n */\n\n// Modified by xiazeyu.\n\n/**\n* @desc Basic functions releated to model react\n*/\n\nimport { UtSystem,\n         UtDebug,\n         LDTransform,\n         LDGL,\n         Live2D,\n         Live2DModelWebGL,\n         Live2DModelJS,\n         Live2DMotion,\n         MotionQueueManager,\n         PhysicsHair,\n         AMotion,\n         PartsDataID,\n         DrawDataID,\n         BaseDataID,\n         ParamID } from './live2d.core';\n\n//============================================================\n//============================================================\n//  class L2DBaseModel\n//============================================================\n//============================================================\nfunction L2DBaseModel() {\n    this.live2DModel = null; // ALive2DModel\n    this.modelMatrix = null; // L2DModelMatrix\n    this.eyeBlink = null; // L2DEyeBlink\n    this.physics = null; // L2DPhysics\n    this.pose = null; // L2DPose\n    this.debugMode = false;\n    this.initialized = false;\n    this.updating = false;\n    this.alpha = 1;\n    this.accAlpha = 0;\n    this.lipSync = false;\n    this.lipSyncValue = 0;\n    this.accelX = 0;\n    this.accelY = 0;\n    this.accelZ = 0;\n    this.dragX = 0;\n    this.dragY = 0;\n    this.startTimeMSec = null;\n    this.mainMotionManager = new L2DMotionManager(); //L2DMotionManager\n    this.expressionManager = new L2DMotionManager(); //L2DMotionManager\n    this.motions = {};\n    this.expressions = {};\n    this.isTexLoaded = false;\n}\n\nvar texCounter = 0;\n\n//============================================================\n//    L2DBaseModel # getModelMatrix()\n//============================================================\nL2DBaseModel.prototype.getModelMatrix = function () {\n    return this.modelMatrix;\n}\n\n//============================================================\n//    L2DBaseModel # setAlpha()\n//============================================================\nL2DBaseModel.prototype.setAlpha = function (a/*float*/) {\n    if (a > 0.999) a = 1;\n    if (a < 0.001) a = 0;\n    this.alpha = a;\n}\n\n//============================================================\n//    L2DBaseModel # getAlpha()\n//============================================================\nL2DBaseModel.prototype.getAlpha = function () {\n    return this.alpha;\n}\n\n//============================================================\n//    L2DBaseModel # isInitialized()\n//============================================================\nL2DBaseModel.prototype.isInitialized = function () {\n    return this.initialized;\n}\n\n//============================================================\n//    L2DBaseModel # setInitialized()\n//============================================================\nL2DBaseModel.prototype.setInitialized = function (v/*boolean*/) {\n    this.initialized = v;\n}\n\n//============================================================\n//    L2DBaseModel # isUpdating()\n//============================================================\nL2DBaseModel.prototype.isUpdating = function () {\n    return this.updating;\n}\n\n//============================================================\n//    L2DBaseModel # setUpdating()\n//============================================================\nL2DBaseModel.prototype.setUpdating = function (v/*boolean*/) {\n    this.updating = v;\n}\n\n//============================================================\n//    L2DBaseModel # getLive2DModel()\n//============================================================\nL2DBaseModel.prototype.getLive2DModel = function () {\n    return this.live2DModel;\n}\n\n//============================================================\n//    L2DBaseModel # setLipSync()\n//============================================================\nL2DBaseModel.prototype.setLipSync = function (v/*boolean*/) {\n    this.lipSync = v;\n}\n\n//============================================================\n//    L2DBaseModel # setLipSyncValue()\n//============================================================\nL2DBaseModel.prototype.setLipSyncValue = function (v/*float*/) {\n    this.lipSyncValue = v;\n}\n\n//============================================================\n//    L2DBaseModel # setAccel()\n//============================================================\nL2DBaseModel.prototype.setAccel = function (x/*float*/, y/*float*/, z/*float*/) {\n    this.accelX = x;\n    this.accelY = y;\n    this.accelZ = z;\n}\n\n//============================================================\n//    L2DBaseModel # setDrag()\n//============================================================\nL2DBaseModel.prototype.setDrag = function (x/*float*/, y/*float*/) {\n    this.dragX = x;\n    this.dragY = y;\n}\n\n//============================================================\n//    L2DBaseModel # getMainMotionManager()\n//============================================================\nL2DBaseModel.prototype.getMainMotionManager = function () {\n    return this.mainMotionManager;\n}\n\n//============================================================\n//    L2DBaseModel # getExpressionManager()\n//============================================================\nL2DBaseModel.prototype.getExpressionManager = function () {\n    return this.expressionManager;\n}\n\n//============================================================\n//    L2DBaseModel # loadModelData()\n//============================================================\nL2DBaseModel.prototype.loadModelData = function (path/*String*/, callback) {\n    /*\n    if( this.live2DModel != null ) {\n        this.live2DModel.deleteTextures();\n    }\n    */\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n    if (this.debugMode) pm.log(\"Load model : \" + path);\n\n    var thisRef = this;\n    pm.loadLive2DModel(path, function (l2dModel) {\n        thisRef.live2DModel = l2dModel;\n        thisRef.live2DModel.saveParam();\n\n        var _err = Live2D.getError();\n\n        if (_err != 0) {\n            console.error(\"Error : Failed to loadModelData().\");\n            return;\n        }\n\n        thisRef.modelMatrix = new L2DModelMatrix(\n            thisRef.live2DModel.getCanvasWidth(),\n            thisRef.live2DModel.getCanvasHeight()); //L2DModelMatrix\n        thisRef.modelMatrix.setWidth(2);\n        thisRef.modelMatrix.setCenterPosition(0, 0);\n\n        callback(thisRef.live2DModel);\n    });\n}\n\n\n//============================================================\n//    L2DBaseModel # loadTexture()\n//============================================================\nL2DBaseModel.prototype.loadTexture = function (no/*int*/, path/*String*/, callback) {\n    texCounter++;\n\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n\n    if (this.debugMode) pm.log(\"Load Texture : \" + path);\n\n    var thisRef = this;\n    pm.loadTexture(this.live2DModel, no, path, function () {\n        texCounter--;\n        if (texCounter == 0) thisRef.isTexLoaded = true;\n        if (typeof callback == \"function\") callback();\n    });\n\n}\n\n//============================================================\n//    L2DBaseModel # loadMotion()\n//============================================================\nL2DBaseModel.prototype.loadMotion = function (name/*String*/, path /*String*/, callback) {\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n\n    if (this.debugMode) pm.log(\"Load Motion : \" + path);\n\n    var motion = null; //Live2DMotion\n\n    var thisRef = this;\n    pm.loadBytes(path, function (buf) {\n        motion = Live2DMotion.loadMotion(buf);\n        if (name != null) {\n            thisRef.motions[name] = motion;\n        }\n        callback(motion);\n    });\n\n}\n\n//============================================================\n//    L2DBaseModel # loadExpression()\n//============================================================\nL2DBaseModel.prototype.loadExpression = function (name/*String*/, path /*String*/, callback) {\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n\n    if (this.debugMode) pm.log(\"Load Expression : \" + path);\n\n    var thisRef = this;\n    pm.loadBytes(path, function (buf) {\n        if (name != null) {\n            thisRef.expressions[name] = L2DExpressionMotion.loadJson(buf);\n        }\n        if (typeof callback == \"function\") callback();\n    });\n}\n\n//============================================================\n//    L2DBaseModel # loadPose()\n//============================================================\nL2DBaseModel.prototype.loadPose = function (path /*String*/, callback) {\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n    if (this.debugMode) pm.log(\"Load Pose : \" + path);\n    var thisRef = this;\n    try {\n        pm.loadBytes(path, function (buf) {\n            thisRef.pose = L2DPose.load(buf);\n            if (typeof callback == \"function\") callback();\n        });\n    }\n    catch (e) {\n        console.warn(e);\n    }\n}\n\n//============================================================\n//    L2DBaseModel # loadPhysics()\n//============================================================\nL2DBaseModel.prototype.loadPhysics = function (path/*String*/) {\n    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager\n    if (this.debugMode) pm.log(\"Load Physics : \" + path);\n    var thisRef = this;\n    try {\n        pm.loadBytes(path, function (buf) {\n            thisRef.physics = L2DPhysics.load(buf);\n        });\n    }\n    catch (e) {\n        console.warn(e);\n    }\n}\n\n//============================================================\n//    L2DBaseModel # hitTestSimple()\n//============================================================\nL2DBaseModel.prototype.hitTestSimple = function (drawID, testX, testY) {\n\n\tif(this.live2DModel === null) return !1;\n\n    var drawIndex = this.live2DModel.getDrawDataIndex(drawID);\n\n    if (drawIndex < 0) return false;\n\n    var points = this.live2DModel.getTransformedPoints(drawIndex);\n    var left = this.live2DModel.getCanvasWidth();\n    var right = 0;\n    var top = this.live2DModel.getCanvasHeight();\n    var bottom = 0;\n\n    for (var j = 0; j < points.length; j = j + 2) {\n        var x = points[j];\n        var y = points[j + 1];\n\n        if (x < left) left = x;\n        if (x > right) right = x;\n        if (y < top) top = y;\n        if (y > bottom) bottom = y;\n    }\n    var tx = this.modelMatrix.invertTransformX(testX);\n    var ty = this.modelMatrix.invertTransformY(testY);\n\n    return (left <= tx && tx <= right && top <= ty && ty <= bottom);\n}\n\n//============================================================\n//============================================================\n//  class L2DExpressionMotion  extends     AMotion\n//============================================================\n//============================================================\nfunction L2DExpressionMotion() {\n    AMotion.prototype.constructor.call(this);\n    this.paramList = new Array(); //ArrayList<L2DExpressionParam>\n}\n\nL2DExpressionMotion.prototype = new AMotion(); // L2DExpressionMotion extends AMotion\n\n//============================================================\nL2DExpressionMotion.EXPRESSION_DEFAULT = \"DEFAULT\";\nL2DExpressionMotion.TYPE_SET = 0;\nL2DExpressionMotion.TYPE_ADD = 1;\nL2DExpressionMotion.TYPE_MULT = 2;\n\n//============================================================\n//    static L2DExpressionMotion.loadJson()\n//============================================================\nL2DExpressionMotion.loadJson = function (buf) {\n    var ret = new L2DExpressionMotion();\n\n    var pm = Live2DFramework.getPlatformManager();\n    var json = pm.jsonParseFromBytes(buf);\n\n    ret.setFadeIn(parseInt(json.fade_in) > 0 ? parseInt(json.fade_in) : 1000);\n    ret.setFadeOut(parseInt(json.fade_out) > 0 ? parseInt(json.fade_out) : 1000);\n\n    if (json.params == null) {\n        return ret;\n    }\n\n    var params = json.params;\n    var paramNum = params.length;\n    ret.paramList = []; //ArrayList<L2DExpressionParam>\n    for (var i = 0; i < paramNum; i++) {\n        var param = params[i];\n        var paramID = param.id.toString();\n        var value = parseFloat(param.val);\n        var calcTypeInt = L2DExpressionMotion.TYPE_ADD;\n        var calc = param.calc != null ? param.calc.toString() : \"add\";\n        if (calc === \"add\") {\n            calcTypeInt = L2DExpressionMotion.TYPE_ADD;\n        }\n        else if (calc === \"mult\") {\n            calcTypeInt = L2DExpressionMotion.TYPE_MULT;\n        }\n        else if (calc === \"set\") {\n            calcTypeInt = L2DExpressionMotion.TYPE_SET;\n        }\n        else {\n            calcTypeInt = L2DExpressionMotion.TYPE_ADD;\n        }\n        if (calcTypeInt == L2DExpressionMotion.TYPE_ADD) {\n            var defaultValue = param.def == null ? 0 : parseFloat(param.def);\n            value = value - defaultValue;\n        }\n        else if (calcTypeInt == L2DExpressionMotion.TYPE_MULT) {\n            var defaultValue = param.def == null ? 1 : parseFloat(param.def);\n            if (defaultValue == 0) defaultValue = 1;\n            value = value / defaultValue;\n        }\n\n        var item = new L2DExpressionParam();\n        item.id = paramID;\n        item.type = calcTypeInt;\n        item.value = value;\n\n        ret.paramList.push(item);\n    }\n\n    return ret;\n}\n\n\n//============================================================\n//    L2DExpressionMotion # updateParamExe()\n//============================================================\nL2DExpressionMotion.prototype.updateParamExe = function (model /*ALive2DModel*/, timeMSec/*long*/, weight /*float*/, motionQueueEnt /*MotionQueueEnt*/) {\n    for (var i = this.paramList.length - 1; i >= 0; --i) {\n        var param = this.paramList[i]; //L2DExpressionParam\n        // if (!param || !param.type) continue;\n        if (param.type == L2DExpressionMotion.TYPE_ADD) {\n            model.addToParamFloat(param.id, param.value, weight);\n        }\n        else if (param.type == L2DExpressionMotion.TYPE_MULT) {\n            model.multParamFloat(param.id, param.value, weight);\n        }\n        else if (param.type == L2DExpressionMotion.TYPE_SET) {\n            model.setParamFloat(param.id, param.value, weight);\n        }\n    }\n}\n\n//============================================================\n//============================================================\n//  class L2DExpressionParam\n//============================================================\n//============================================================\nfunction L2DExpressionParam() {\n    this.id = \"\";\n    this.type = -1;\n    this.value = null;\n}\n\n//============================================================\n//============================================================\n//  class L2DEyeBlink\n//============================================================\n//============================================================\nfunction L2DEyeBlink() {\n    this.nextBlinkTime = null /* TODO NOT INIT */; //\n    this.stateStartTime = null /* TODO NOT INIT */; //\n    this.blinkIntervalMsec = null /* TODO NOT INIT */; //\n    this.eyeState = EYE_STATE.STATE_FIRST;\n    this.blinkIntervalMsec = 4000;\n    this.closingMotionMsec = 100;\n    this.closedMotionMsec = 50;\n    this.openingMotionMsec = 150;\n    this.closeIfZero = true;\n    this.eyeID_L = \"PARAM_EYE_L_OPEN\";\n    this.eyeID_R = \"PARAM_EYE_R_OPEN\";\n}\n\n//============================================================\n//    L2DEyeBlink # calcNextBlink()\n//============================================================\nL2DEyeBlink.prototype.calcNextBlink = function () {\n    var time /*long*/ = UtSystem.getUserTimeMSec();\n    var r /*Number*/ = Math.random();\n    return  /*(long)*/ (time + r * (2 * this.blinkIntervalMsec - 1));\n}\n\n//============================================================\n//    L2DEyeBlink # setInterval()\n//============================================================\nL2DEyeBlink.prototype.setInterval = function (blinkIntervalMsec /*int*/) {\n    this.blinkIntervalMsec = blinkIntervalMsec;\n}\n\n//============================================================\n//    L2DEyeBlink # setEyeMotion()\n//============================================================\nL2DEyeBlink.prototype.setEyeMotion = function (closingMotionMsec/*int*/, closedMotionMsec/*int*/, openingMotionMsec/*int*/) {\n    this.closingMotionMsec = closingMotionMsec;\n    this.closedMotionMsec = closedMotionMsec;\n    this.openingMotionMsec = openingMotionMsec;\n}\n\n//============================================================\n//    L2DEyeBlink # updateParam()\n//============================================================\nL2DEyeBlink.prototype.updateParam = function (model/*ALive2DModel*/) {\n    var time /*:long*/ = UtSystem.getUserTimeMSec();\n    var eyeParamValue /*:Number*/;\n    var t /*:Number*/ = 0;\n    switch (this.eyeState) {\n        case EYE_STATE.STATE_CLOSING:\n            t = (time - this.stateStartTime) / this.closingMotionMsec;\n            if (t >= 1) {\n                t = 1;\n                this.eyeState = EYE_STATE.STATE_CLOSED;\n                this.stateStartTime = time;\n            }\n            eyeParamValue = 1 - t;\n            break;\n        case EYE_STATE.STATE_CLOSED:\n            t = (time - this.stateStartTime) / this.closedMotionMsec;\n            if (t >= 1) {\n                this.eyeState = EYE_STATE.STATE_OPENING;\n                this.stateStartTime = time;\n            }\n            eyeParamValue = 0;\n            break;\n        case EYE_STATE.STATE_OPENING:\n            t = (time - this.stateStartTime) / this.openingMotionMsec;\n            if (t >= 1) {\n                t = 1;\n                this.eyeState = EYE_STATE.STATE_INTERVAL;\n                this.nextBlinkTime = this.calcNextBlink();\n            }\n            eyeParamValue = t;\n            break;\n        case EYE_STATE.STATE_INTERVAL:\n            if (this.nextBlinkTime < time) {\n                this.eyeState = EYE_STATE.STATE_CLOSING;\n                this.stateStartTime = time;\n            }\n            eyeParamValue = 1;\n            break;\n        case EYE_STATE.STATE_FIRST:\n        default:\n            this.eyeState = EYE_STATE.STATE_INTERVAL;\n            this.nextBlinkTime = this.calcNextBlink();\n            eyeParamValue = 1;\n            break;\n    }\n    if (!this.closeIfZero) eyeParamValue = -eyeParamValue;\n    model.setParamFloat(this.eyeID_L, eyeParamValue);\n    model.setParamFloat(this.eyeID_R, eyeParamValue);\n}\n\n//== enum EYE_STATE ==\nvar EYE_STATE = function () { };\n\nEYE_STATE.STATE_FIRST = \"STATE_FIRST\"\nEYE_STATE.STATE_INTERVAL = \"STATE_INTERVAL\"\nEYE_STATE.STATE_CLOSING = \"STATE_CLOSING\"\nEYE_STATE.STATE_CLOSED = \"STATE_CLOSED\"\nEYE_STATE.STATE_OPENING = \"STATE_OPENING\"\n\n//============================================================\n//============================================================\n//  class L2DMatrix44\n//============================================================\n//============================================================\nfunction L2DMatrix44() {\n    this.tr = new Float32Array(16); //\n    this.identity();\n}\n\n//============================================================\n//    static L2DMatrix44.mul()\n//============================================================\n// matrix multiplication\nL2DMatrix44.mul = function (a/*float[]*/, b/*float[]*/, dst/*float[]*/) {\n    var c = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n    var n = 4;\n    var i, j, k;\n    for (i = 0; i < n; i++) {\n        for (j = 0; j < n; j++) {\n            for (k = 0; k < n; k++) {\n                c[i + j * 4] += a[i + k * 4] * b[k + j * 4];\n            }\n        }\n    }\n    for (i = 0; i < 16; i++) {\n        dst[i] = c[i];\n    }\n}\n\n//============================================================\n//    L2DMatrix44 # identity()\n//============================================================\nL2DMatrix44.prototype.identity = function () {\n    for (var i/*:int*/ = 0; i < 16; i++)\n        this.tr[i] = ((i % 5) == 0) ? 1 : 0;\n}\n\n//============================================================\n//    L2DMatrix44 # getArray()\n//============================================================\nL2DMatrix44.prototype.getArray = function () {\n    return this.tr;\n}\n\n//============================================================\n//    L2DMatrix44 # getCopyMatrix()\n//============================================================\nL2DMatrix44.prototype.getCopyMatrix = function () {\n    return new Float32Array(this.tr); // this.tr.clone();\n}\n\n//============================================================\n//    L2DMatrix44 # setMatrix()\n//============================================================\nL2DMatrix44.prototype.setMatrix = function (tr/*float[]*/) {\n    if (this.tr == null || this.tr.length != this.tr.length) return;\n    for (var i/*:int*/ = 0; i < 16; i++) this.tr[i] = tr[i];\n}\n\n//============================================================\n//    L2DMatrix44 # getScaleX()\n//============================================================\nL2DMatrix44.prototype.getScaleX = function () {\n    return this.tr[0];\n}\n\n//============================================================\n//    L2DMatrix44 # getScaleY()\n//============================================================\nL2DMatrix44.prototype.getScaleY = function () {\n    return this.tr[5];\n}\n\n//============================================================\n//    L2DMatrix44 # transformX()\n//============================================================\nL2DMatrix44.prototype.transformX = function (src/*float*/) {\n    return this.tr[0] * src + this.tr[12];\n}\n\n//============================================================\n//    L2DMatrix44 # transformY()\n//============================================================\nL2DMatrix44.prototype.transformY = function (src/*float*/) {\n    return this.tr[5] * src + this.tr[13];\n}\n\n//============================================================\n//    L2DMatrix44 # invertTransformX()\n//============================================================\nL2DMatrix44.prototype.invertTransformX = function (src/*float*/) {\n    return (src - this.tr[12]) / this.tr[0];\n}\n\n//============================================================\n//    L2DMatrix44 # invertTransformY()\n//============================================================\nL2DMatrix44.prototype.invertTransformY = function (src/*float*/) {\n    return (src - this.tr[13]) / this.tr[5];\n}\n\n//============================================================\n//    L2DMatrix44 # multTranslate()\n//============================================================\nL2DMatrix44.prototype.multTranslate = function (shiftX/*float*/, shiftY/*float*/) {\n    var tr1 = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, shiftX, shiftY, 0, 1];\n    L2DMatrix44.mul(tr1, this.tr, this.tr);\n}\n\n//============================================================\n//    L2DMatrix44 # translate()\n//============================================================\nL2DMatrix44.prototype.translate = function (x/*float*/, y/*float*/) {\n    this.tr[12] = x;\n    this.tr[13] = y;\n}\n\n//============================================================\n//    L2DMatrix44 # translateX()\n//============================================================\nL2DMatrix44.prototype.translateX = function (x/*float*/) {\n    this.tr[12] = x;\n}\n\n//============================================================\n//    L2DMatrix44 # translateY()\n//============================================================\nL2DMatrix44.prototype.translateY = function (y/*float*/) {\n    this.tr[13] = y;\n}\n\n//============================================================\n//    L2DMatrix44 # multScale()\n//============================================================\nL2DMatrix44.prototype.multScale = function (scaleX/*float*/, scaleY/*float*/) {\n    var tr1 = [scaleX, 0, 0, 0, 0, scaleY, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];\n    L2DMatrix44.mul(tr1, this.tr, this.tr);\n}\n\n//============================================================\n//    L2DMatrix44 # scale()\n//============================================================\nL2DMatrix44.prototype.scale = function (scaleX/*float*/, scaleY/*float*/) {\n    this.tr[0] = scaleX;\n    this.tr[5] = scaleY;\n}\n\n//============================================================\n//============================================================\n//  class L2DModelMatrix       extends     L2DMatrix44\n//============================================================\n//============================================================\nfunction L2DModelMatrix(w/*float*/, h/*float*/) {\n    L2DMatrix44.prototype.constructor.call(this);\n    this.width = w;\n    this.height = h;\n}\n\n//L2DModelMatrix extends L2DMatrix44\nL2DModelMatrix.prototype = new L2DMatrix44();\n\n//============================================================\n//    L2DModelMatrix # setPosition()\n//============================================================\nL2DModelMatrix.prototype.setPosition = function (x/*float*/, y/*float*/) {\n    this.translate(x, y);\n}\n\n//============================================================\n//    L2DModelMatrix # setCenterPosition()\n//============================================================\nL2DModelMatrix.prototype.setCenterPosition = function (x/*float*/, y/*float*/) {\n    var w = this.width * this.getScaleX();\n    var h = this.height * this.getScaleY();\n    this.translate(x - w / 2, y - h / 2);\n}\n\n//============================================================\n//    L2DModelMatrix # top()\n//============================================================\nL2DModelMatrix.prototype.top = function (y/*float*/) {\n    this.setY(y);\n}\n\n//============================================================\n//    L2DModelMatrix # bottom()\n//============================================================\nL2DModelMatrix.prototype.bottom = function (y/*float*/) {\n    var h = this.height * this.getScaleY();\n    this.translateY(y - h);\n}\n\n//============================================================\n//    L2DModelMatrix # left()\n//============================================================\nL2DModelMatrix.prototype.left = function (x/*float*/) {\n    this.setX(x);\n}\n\n//============================================================\n//    L2DModelMatrix # right()\n//============================================================\nL2DModelMatrix.prototype.right = function (x/*float*/) {\n    var w = this.width * this.getScaleX();\n    this.translateX(x - w);\n}\n\n//============================================================\n//    L2DModelMatrix # centerX()\n//============================================================\nL2DModelMatrix.prototype.centerX = function (x/*float*/) {\n    var w = this.width * this.getScaleX();\n    this.translateX(x - w / 2);\n}\n\n//============================================================\n//    L2DModelMatrix # centerY()\n//============================================================\nL2DModelMatrix.prototype.centerY = function (y/*float*/) {\n    var h = this.height * this.getScaleY();\n    this.translateY(y - h / 2);\n}\n\n//============================================================\n//    L2DModelMatrix # setX()\n//============================================================\nL2DModelMatrix.prototype.setX = function (x/*float*/) {\n    this.translateX(x);\n}\n\n//============================================================\n//    L2DModelMatrix # setY()\n//============================================================\nL2DModelMatrix.prototype.setY = function (y/*float*/) {\n    this.translateY(y);\n}\n\n//============================================================\n//    L2DModelMatrix # setHeight()\n//============================================================\nL2DModelMatrix.prototype.setHeight = function (h/*float*/) {\n    var scaleX = h / this.height;\n    var scaleY = -scaleX;\n    this.scale(scaleX, scaleY);\n}\n\n//============================================================\n//    L2DModelMatrix # setWidth()\n//============================================================\nL2DModelMatrix.prototype.setWidth = function (w/*float*/) {\n    var scaleX = w / this.width;\n    var scaleY = -scaleX;\n    this.scale(scaleX, scaleY);\n}\n\n//============================================================\n//============================================================\n//  class L2DMotionManager     extends     MotionQueueManager\n//============================================================\n//============================================================\nfunction L2DMotionManager() {\n    MotionQueueManager.prototype.constructor.call(this);\n    this.currentPriority = null;\n    this.reservePriority = null;\n\n    this.super = MotionQueueManager.prototype;\n}\n\n\nL2DMotionManager.prototype = new MotionQueueManager();\n\n//============================================================\n//    L2DMotionManager # getCurrentPriority()\n//============================================================\nL2DMotionManager.prototype.getCurrentPriority = function () {\n    return this.currentPriority;\n}\n\n//============================================================\n//    L2DMotionManager # getReservePriority()\n//============================================================\nL2DMotionManager.prototype.getReservePriority = function () {\n    return this.reservePriority;\n}\n\n//============================================================\n//    L2DMotionManager # reserveMotion()\n//============================================================\nL2DMotionManager.prototype.reserveMotion = function (priority/*int*/) {\n    if (this.reservePriority >= priority) {\n        return false;\n    }\n    if (this.currentPriority >= priority) {\n        return false;\n    }\n\n    this.reservePriority = priority;\n\n    return true;\n}\n\n//============================================================\n//    L2DMotionManager # setReservePriority()\n//============================================================\nL2DMotionManager.prototype.setReservePriority = function (val/*int*/) {\n    this.reservePriority = val;\n}\n\n//============================================================\n//    L2DMotionManager # updateParam()\n//============================================================\nL2DMotionManager.prototype.updateParam = function (model/*ALive2DModel*/) {\n    var updated = MotionQueueManager.prototype.updateParam.call(this, model);\n\n    if (this.isFinished()) {\n        this.currentPriority = 0;\n    }\n\n    return updated;\n}\n\n//============================================================\n//    L2DMotionManager # startMotionPrio()\n//============================================================\nL2DMotionManager.prototype.startMotionPrio = function (motion/*AMotion*/, priority/*int*/) {\n    if (priority == this.reservePriority) {\n        this.reservePriority = 0;\n    }\n    this.currentPriority = priority;\n    return this.startMotion(motion, false);\n}\n\n//============================================================\n//============================================================\n//  class L2DPhysics\n//============================================================\n//============================================================\nfunction L2DPhysics() {\n    this.physicsList = new Array(); //ArrayList<PhysicsHair>\n    this.startTimeMSec = UtSystem.getUserTimeMSec();\n}\n\n//============================================================\n//    static L2DPhysics.load()\n//============================================================\nL2DPhysics.load = function (buf /*byte[]*/) {\n    var ret = new L2DPhysics(); //L2DPhysicsL2DPhysics\n    var pm = Live2DFramework.getPlatformManager();\n    var json = pm.jsonParseFromBytes(buf);\n    var params = json.physics_hair;\n    var paramNum = params.length;\n    for (var i = 0; i < paramNum; i++) {\n        var param = params[i]; //Value\n        var physics = new PhysicsHair(); //PhysicsHairPhysicsHair\n        var setup = param.setup; //Value\n        var length = parseFloat(setup.length);\n        var resist = parseFloat(setup.regist);\n        var mass = parseFloat(setup.mass);\n        physics.setup(length, resist, mass);\n        var srcList = param.src; //Value\n        var srcNum = srcList.length;\n        for (var j = 0; j < srcNum; j++) {\n            var src = srcList[j]; //Value\n            var id = src.id; //String\n            var type = PhysicsHair.Src.SRC_TO_X;\n            var typeStr = src.ptype; //String\n            if (typeStr === \"x\") {\n                type = PhysicsHair.Src.SRC_TO_X;\n            }\n            else if (typeStr === \"y\") {\n                type = PhysicsHair.Src.SRC_TO_Y;\n            }\n            else if (typeStr === \"angle\") {\n                type = PhysicsHair.Src.SRC_TO_G_ANGLE;\n            }\n            else {\n                UtDebug.error(\"live2d\", \"Invalid parameter:PhysicsHair.Src\");\n            }\n            var scale = parseFloat(src.scale);\n            var weight = parseFloat(src.weight);\n            physics.addSrcParam(type, id, scale, weight);\n        }\n        var targetList = param.targets; //Value\n        var targetNum = targetList.length;\n        for (var j = 0; j < targetNum; j++) {\n            var target = targetList[j]; //Value\n            var id = target.id; //String\n            var type = PhysicsHair.Target.TARGET_FROM_ANGLE;\n            var typeStr = target.ptype; //String\n            if (typeStr === \"angle\") {\n                type = PhysicsHair.Target.TARGET_FROM_ANGLE;\n            }\n            else if (typeStr === \"angle_v\") {\n                type = PhysicsHair.Target.TARGET_FROM_ANGLE_V;\n            }\n            else {\n                UtDebug.error(\"live2d\", \"Invalid parameter:PhysicsHair.Target\");\n            }\n            var scale = parseFloat(target.scale);\n            var weight = parseFloat(target.weight);\n            physics.addTargetParam(type, id, scale, weight);\n        }\n        ret.physicsList.push(physics);\n    }\n    return ret;\n}\n\n//============================================================\n//    L2DPhysics # updateParam()\n//============================================================\nL2DPhysics.prototype.updateParam = function (model/*ALive2DModel*/) {\n    var timeMSec = UtSystem.getUserTimeMSec() - this.startTimeMSec;\n    for (var i = 0; i < this.physicsList.length; i++) {\n        this.physicsList[i].update(model, timeMSec);\n    }\n}\n\n//============================================================\n//============================================================\n//  class L2DPose\n//============================================================\n//============================================================\nfunction L2DPose() {\n    this.lastTime = 0;\n    this.lastModel = null; //ALive2DModel\n    this.partsGroups = new Array(); //ArrayList<L2DPartsParam[]>\n}\n\n\n//============================================================\n//    static L2DPose.load()\n//============================================================\nL2DPose.load = function (buf/*byte[]*/) {\n    var ret = new L2DPose(); //L2DPose\n    var pm = Live2DFramework.getPlatformManager();\n    var json = pm.jsonParseFromBytes(buf);\n    var poseListInfo = json.parts_visible; //Value\n    var poseNum = poseListInfo.length;\n    for (var i_pose = 0; i_pose < poseNum; i_pose++) {\n        var poseInfo = poseListInfo[i_pose]; //Value\n        var idListInfo = poseInfo.group; //Value\n        var idNum = idListInfo.length;\n        var partsGroup/*L2DPartsParam*/ = new Array();\n        for (var i_group = 0; i_group < idNum; i_group++) {\n            var partsInfo = idListInfo[i_group]; //Value\n            var parts = new L2DPartsParam(partsInfo.id); //L2DPartsParamL2DPartsParam\n            partsGroup[i_group] = parts;\n            if (partsInfo.link == null) continue;\n            var linkListInfo = partsInfo.link; //Value\n            var linkNum = linkListInfo.length;\n            parts.link = new Array(); //ArrayList<L2DPartsParam>\n            for (var i_link = 0; i_link < linkNum; i_link++) {\n                var linkParts = new L2DPartsParam(linkListInfo[i_link]); //L2DPartsParamL2DPartsParam\n                parts.link.push(linkParts);\n            }\n        }\n        ret.partsGroups.push(partsGroup);\n    }\n\n    return ret;\n}\n\n//============================================================\n//    L2DPose # updateParam()\n//============================================================\nL2DPose.prototype.updateParam = function (model/*ALive2DModel*/) {\n    if (model == null) return;\n\n    if (!(model == this.lastModel)) {\n        this.initParam(model);\n    }\n    this.lastModel = model;\n\n    var curTime = UtSystem.getUserTimeMSec();\n    var deltaTimeSec = ((this.lastTime == 0) ? 0 : (curTime - this.lastTime) / 1000.0);\n    this.lastTime = curTime;\n    if (deltaTimeSec < 0) deltaTimeSec = 0;\n    for (var i = 0; i < this.partsGroups.length; i++) {\n        this.normalizePartsOpacityGroup(model, this.partsGroups[i], deltaTimeSec);\n        this.copyOpacityOtherParts(model, this.partsGroups[i]);\n    }\n}\n\n//============================================================\n//    L2DPose # initParam()\n//============================================================\nL2DPose.prototype.initParam = function (model/*ALive2DModel*/) {\n    if (model == null) return;\n    for (var i = 0; i < this.partsGroups.length; i++) {\n        var partsGroup = this.partsGroups[i]; //L2DPartsParam\n        for (var j = 0; j < partsGroup.length; j++) {\n            partsGroup[j].initIndex(model);\n            var partsIndex = partsGroup[j].partsIndex;\n            var paramIndex = partsGroup[j].paramIndex;\n            if (partsIndex < 0) continue;\n            var v/*:Boolean*/ = (model.getParamFloat(paramIndex) != 0);\n            model.setPartsOpacity(partsIndex, (v ? 1.0 : 0.0));\n            model.setParamFloat(paramIndex, (v ? 1.0 : 0.0));\n            if (partsGroup[j].link == null) continue;\n            for (var k = 0; k < partsGroup[j].link.length; k++) {\n                partsGroup[j].link[k].initIndex(model);\n            }\n        }\n    }\n}\n\n//============================================================\n//    L2DPose # normalizePartsOpacityGroup()\n//============================================================\nL2DPose.prototype.normalizePartsOpacityGroup = function (model/*ALive2DModel*/, partsGroup/*L2DPartsParam[]*/, deltaTimeSec/*float*/) {\n    var visibleParts = -1;\n    var visibleOpacity = 1.0;\n    var CLEAR_TIME_SEC = 0.5;\n    var phi = 0.5;\n    var maxBackOpacity = 0.15;\n    for (var i = 0; i < partsGroup.length; i++) {\n        var partsIndex = partsGroup[i].partsIndex;\n        var paramIndex = partsGroup[i].paramIndex;\n        if (partsIndex < 0) continue; if (model.getParamFloat(paramIndex) != 0) {\n            if (visibleParts >= 0) {\n                break;\n            }\n            visibleParts = i;\n            visibleOpacity = model.getPartsOpacity(partsIndex);\n            visibleOpacity += deltaTimeSec / CLEAR_TIME_SEC;\n            if (visibleOpacity > 1) {\n                visibleOpacity = 1;\n            }\n        }\n    }\n    if (visibleParts < 0) {\n        visibleParts = 0;\n        visibleOpacity = 1;\n    }\n    for (var i = 0; i < partsGroup.length; i++) {\n        var partsIndex = partsGroup[i].partsIndex;\n        if (partsIndex < 0) continue; if (visibleParts == i) {\n            model.setPartsOpacity(partsIndex, visibleOpacity);\n        }\n        else {\n            var opacity = model.getPartsOpacity(partsIndex);\n            var a1;\n            if (visibleOpacity < phi) {\n                a1 = visibleOpacity * (phi - 1) / phi + 1;\n            }\n            else {\n                a1 = (1 - visibleOpacity) * phi / (1 - phi);\n            }\n            var backOp = (1 - a1) * (1 - visibleOpacity);\n            if (backOp > maxBackOpacity) {\n                a1 = 1 - maxBackOpacity / (1 - visibleOpacity);\n            }\n            if (opacity > a1) {\n                opacity = a1;\n            }\n            model.setPartsOpacity(partsIndex, opacity);\n        }\n    }\n}\n\n//============================================================\n//    L2DPose # copyOpacityOtherParts()\n//============================================================\nL2DPose.prototype.copyOpacityOtherParts = function (model/*ALive2DModel*/, partsGroup/*L2DPartsParam[]*/) {\n    for (var i_group = 0; i_group < partsGroup.length; i_group++) {\n        var partsParam = partsGroup[i_group]; //L2DPartsParam\n        if (partsParam.link == null) continue;\n        if (partsParam.partsIndex < 0) continue;\n        var opacity = model.getPartsOpacity(partsParam.partsIndex);\n        for (var i_link = 0; i_link < partsParam.link.length; i_link++) {\n            var linkParts = partsParam.link[i_link]; //L2DPartsParam\n            if (linkParts.partsIndex < 0) continue;\n            model.setPartsOpacity(linkParts.partsIndex, opacity);\n        }\n    }\n}\n\n//============================================================\n//============================================================\n//  class L2DPartsParam\n//============================================================\n//============================================================\nfunction L2DPartsParam(id/*String*/) {\n    this.paramIndex = -1;\n    this.partsIndex = -1;\n    this.link = null; // ArrayList<L2DPartsParam>\n    this.id = id;\n}\n\n//============================================================\n//    L2DPartsParam # initIndex()\n//============================================================\nL2DPartsParam.prototype.initIndex = function (model/*ALive2DModel*/) {\n    this.paramIndex = model.getParamIndex(\"VISIBLE:\" + this.id);\n    this.partsIndex = model.getPartsDataIndex(PartsDataID.getID(this.id));\n    model.setParamFloat(this.paramIndex, 1);\n}\n\n//============================================================\n//============================================================\n//  class L2DTargetPoint\n//============================================================\n//============================================================\nfunction L2DTargetPoint() {\n    this.EPSILON = 0.01; // 変化の最小値（この値以下は無視される）\n    this.faceTargetX = 0;\n    this.faceTargetY = 0;\n    this.faceX = 0;\n    this.faceY = 0;\n    this.faceVX = 0;\n    this.faceVY = 0;\n    this.lastTimeSec = 0;\n}\n\n//============================================================\nL2DTargetPoint.FRAME_RATE = 60;\n\n//============================================================\n//    L2DTargetPoint # set()\n//============================================================\nL2DTargetPoint.prototype.setPoint = function (x/*float*/, y/*float*/) {\n    this.faceTargetX = x;\n    this.faceTargetY = y;\n}\n\n//============================================================\n//    L2DTargetPoint # getX()\n//============================================================\nL2DTargetPoint.prototype.getX = function () {\n    return this.faceX;\n}\n\n//============================================================\n//    L2DTargetPoint # getY()\n//============================================================\nL2DTargetPoint.prototype.getY = function () {\n    return this.faceY;\n}\n\n//============================================================\n//    L2DTargetPoint # update()\n//============================================================\nL2DTargetPoint.prototype.update = function () {\n    var TIME_TO_MAX_SPEED = 0.15;\n    var FACE_PARAM_MAX_V = 40.0 / 7.5;\n    var MAX_V = FACE_PARAM_MAX_V / L2DTargetPoint.FRAME_RATE;\n    if (this.lastTimeSec == 0) {\n        this.lastTimeSec = UtSystem.getUserTimeMSec();\n        return;\n    }\n    var curTimeSec = UtSystem.getUserTimeMSec();\n    var deltaTimeWeight = (curTimeSec - this.lastTimeSec) * L2DTargetPoint.FRAME_RATE / 1000.0;\n    this.lastTimeSec = curTimeSec;\n    var FRAME_TO_MAX_SPEED = TIME_TO_MAX_SPEED * L2DTargetPoint.FRAME_RATE;\n    var MAX_A = deltaTimeWeight * MAX_V / FRAME_TO_MAX_SPEED;\n    var dx = (this.faceTargetX - this.faceX);\n    var dy = (this.faceTargetY - this.faceY);\n    // if(dx == 0 && dy == 0) return;\n    if (Math.abs(dx) <= this.EPSILON && Math.abs(dy) <= this.EPSILON) return;\n    var d = Math.sqrt(dx * dx + dy * dy);\n    var vx = MAX_V * dx / d;\n    var vy = MAX_V * dy / d;\n    var ax = vx - this.faceVX;\n    var ay = vy - this.faceVY;\n    var a = Math.sqrt(ax * ax + ay * ay);\n    if (a < -MAX_A || a > MAX_A) {\n        ax *= MAX_A / a;\n        ay *= MAX_A / a;\n        a = MAX_A;\n    }\n    this.faceVX += ax;\n    this.faceVY += ay;\n    {\n        var max_v = 0.5 * (Math.sqrt(MAX_A * MAX_A + 16 * MAX_A * d - 8 * MAX_A * d) - MAX_A);\n        var cur_v = Math.sqrt(this.faceVX * this.faceVX + this.faceVY * this.faceVY);\n        if (cur_v > max_v) {\n            this.faceVX *= max_v / cur_v;\n            this.faceVY *= max_v / cur_v;\n        }\n    }\n    this.faceX += this.faceVX;\n    this.faceY += this.faceVY;\n}\n\n//============================================================\n//============================================================\n//  class L2DViewMatrix        extends     L2DMatrix44\n//============================================================\n//============================================================\nfunction L2DViewMatrix() {\n  L2DMatrix44.prototype.constructor.call(this);\n  this.screenLeft = null;\n  this.screenRight = null;\n  this.screenTop = null;\n  this.screenBottom = null;\n  this.maxLeft = null;\n  this.maxRight = null;\n  this.maxTop = null;\n  this.maxBottom = null;\n}\n\nL2DViewMatrix.prototype = new L2DMatrix44(); //L2DViewMatrix extends L2DMatrix44\n\n//============================================================\n//    L2DViewMatrix # adjustTranslate()\n//============================================================\nL2DViewMatrix.prototype.adjustTranslate = function (shiftX/*float*/, shiftY/*float*/) {\n    if (this.tr[0] * this.maxLeft + (this.tr[12] + shiftX) > this.screenLeft)\n        shiftX = this.screenLeft - this.tr[0] * this.maxLeft - this.tr[12];\n    if (this.tr[0] * this.maxRight + (this.tr[12] + shiftX) < this.screenRight)\n        shiftX = this.screenRight - this.tr[0] * this.maxRight - this.tr[12];\n    if (this.tr[5] * this.maxTop + (this.tr[13] + shiftY) < this.screenTop)\n        shiftY = this.screenTop - this.tr[5] * this.maxTop - this.tr[13];\n    if (this.tr[5] * this.maxBottom + (this.tr[13] + shiftY) > this.screenBottom)\n        shiftY = this.screenBottom - this.tr[5] * this.maxBottom - this.tr[13];\n\n    var tr1 = [1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        shiftX, shiftY, 0, 1];\n    L2DMatrix44.mul(tr1, this.tr, this.tr);\n}\n\n//============================================================\n//    L2DViewMatrix # adjustScale()\n//============================================================\nL2DViewMatrix.prototype.adjustScale = function (cx/*float*/, cy/*float*/, scale/*float*/) {\n    var targetScale = scale * this.tr[0];\n    var tr1 = [1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        cx, cy, 0, 1];\n    var tr2 = [scale, 0, 0, 0,\n        0, scale, 0, 0,\n        0, 0, 1, 0,\n        0, 0, 0, 1];\n    var tr3 = [1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        -cx, -cy, 0, 1];\n    L2DMatrix44.mul(tr3, this.tr, this.tr);\n    L2DMatrix44.mul(tr2, this.tr, this.tr);\n    L2DMatrix44.mul(tr1, this.tr, this.tr);\n}\n\n//============================================================\n//    L2DViewMatrix # setScreenRect()\n//============================================================\nL2DViewMatrix.prototype.setScreenRect = function (left/*float*/, right/*float*/, bottom/*float*/, top/*float*/) {\n    this.screenLeft = left;\n    this.screenRight = right;\n    this.screenTop = top;\n    this.screenBottom = bottom;\n}\n\n//============================================================\n//    L2DViewMatrix # setMaxScreenRect()\n//============================================================\nL2DViewMatrix.prototype.setMaxScreenRect = function (left/*float*/, right/*float*/, bottom/*float*/, top/*float*/) {\n    this.maxLeft = left;\n    this.maxRight = right;\n    this.maxTop = top;\n    this.maxBottom = bottom;\n}\n\n//============================================================\n//    L2DViewMatrix # getScreenLeft()\n//============================================================\nL2DViewMatrix.prototype.getScreenLeft = function () {\n    return this.screenLeft;\n}\n\n//============================================================\n//    L2DViewMatrix # getScreenRight()\n//============================================================\nL2DViewMatrix.prototype.getScreenRight = function () {\n    return this.screenRight;\n}\n\n//============================================================\n//    L2DViewMatrix # getScreenBottom()\n//============================================================\nL2DViewMatrix.prototype.getScreenBottom = function () {\n    return this.screenBottom;\n}\n\n//============================================================\n//    L2DViewMatrix # getScreenTop()\n//============================================================\nL2DViewMatrix.prototype.getScreenTop = function () {\n    return this.screenTop;\n}\n\n//============================================================\n//    L2DViewMatrix # getMaxLeft()\n//============================================================\nL2DViewMatrix.prototype.getMaxLeft = function () {\n    return this.maxLeft;\n}\n\n//============================================================\n//    L2DViewMatrix # getMaxRight()\n//============================================================\nL2DViewMatrix.prototype.getMaxRight = function () {\n    return this.maxRight;\n}\n\n//============================================================\n//    L2DViewMatrix # getMaxBottom()\n//============================================================\nL2DViewMatrix.prototype.getMaxBottom = function () {\n    return this.maxBottom;\n}\n\n//============================================================\n//    L2DViewMatrix # getMaxTop()\n//============================================================\nL2DViewMatrix.prototype.getMaxTop = function () {\n    return this.maxTop;\n}\n\n//============================================================\n//============================================================\n//  class Live2DFramework\n//============================================================\n//============================================================\nfunction Live2DFramework() {\n}\n\n//============================================================\nLive2DFramework.platformManager = null;\n\n//============================================================\n//    static Live2DFramework.getPlatformManager()\n//============================================================\nLive2DFramework.getPlatformManager = function () {\n    return Live2DFramework.platformManager;\n}\n\n//============================================================\n//    static Live2DFramework.setPlatformManager()\n//============================================================\nLive2DFramework.setPlatformManager = function (platformManager /*IPlatformManager*/) {\n    Live2DFramework.platformManager = platformManager;\n}\n\nexport{\n  L2DTargetPoint,\n  Live2DFramework,\n  L2DViewMatrix,\n  L2DPose,\n  L2DPartsParam,\n  L2DPhysics,\n  L2DMotionManager,\n  L2DModelMatrix,\n  L2DMatrix44,\n  EYE_STATE,\n  L2DEyeBlink,\n  L2DExpressionParam,\n  L2DExpressionMotion,\n  L2DBaseModel,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/Live2DFramework.js","// Modified by xiazeyu.\n\n/**\n* @desc The definitions of values releated to model react\n*/\n\nexport const cDefine = {\n  // above are viewMatrix value settings\n  VIEW_LOGICAL_LEFT : -1, // -1, the left abscissa of viewMatrix\n  VIEW_LOGICAL_RIGHT : 1, // 1, the right abscissa of viewMatrix\n  VIEW_LOGICAL_MAX_LEFT : -2, // -2, the max left abscissa of viewMatrix\n  VIEW_LOGICAL_MAX_RIGHT : 2, // 2, the max right abscissa of viewMatrix\n  VIEW_LOGICAL_MAX_BOTTOM : -2, // -2, the max bottom abscissa of viewMatrix\n  VIEW_LOGICAL_MAX_TOP : 2, // 2, the max top abscissa of viewMatrix\n\n  // above are the motions priority settings.\n  PRIORITY_NONE : 0, // 0，do nothing\n  PRIORITY_IDLE : 1, // 1, idle motions\n  PRIORITY_NORMAL : 2, // 2, normal motions\n  PRIORITY_FORCE : 3, // 3, force to show motion\n\n  // above are the index to the motions in model.json\n  // #43\n  MOTION_GROUP_IDLE : \"idle\",\n  MOTION_GROUP_TAP_BODY : \"tap_body\",\n  MOTION_GROUP_FLICK_HEAD : \"flick_head\", // unused\n  MOTION_GROUP_PINCH_IN : \"pinch_in\", // unused\n  MOTION_GROUP_PINCH_OUT : \"pinch_out\", // unused\n  MOTION_GROUP_SHAKE : \"shake\", // unused\n\n  // above are the index to the hit areas in model.json\n  // #43\n  HIT_AREA_HEAD : \"head\",\n  HIT_AREA_BODY : \"body\"\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/cDefine.js","/**\n * @description The container and manager for all the DOM and WebGL emelents.\n */\n\n\nimport { config } from './config/configMgr';\nimport { L2Dwidget } from './index';\nimport { createDialogElement } from './dialog';\n\n/**\n * The current WebGL element\n * @type {RenderingContext}\n */\n\nlet currWebGL = undefined;\n\n/**\n * The current canvas element\n * @type {HTMLElement}\n */\n\nlet currCanvas;\n\n\n/**\n * Create the canvas and styles using DOM\n * @return {null}\n */\n\nfunction createElement() {\n\n  let e = document.getElementById(config.name.div)\n  if (e !== null) {\n    document.body.removeChild(e);\n  }\n\n  let newElem = document.createElement('div');\n  newElem.id = config.name.div;\n  newElem.className = 'live2d-widget-container';\n  newElem.style.setProperty('position', 'fixed');\n  newElem.style.setProperty(config.display.position, config.display.hOffset + 'px');\n  newElem.style.setProperty('bottom', config.display.vOffset + 'px');\n  newElem.style.setProperty('width', config.display.width + 'px');\n  newElem.style.setProperty('height', config.display.height + 'px');\n  newElem.style.setProperty('z-index', 99999);\n  newElem.style.setProperty('opacity', config.react.opacity);\n  newElem.style.setProperty('pointer-events', 'none');\n  document.body.appendChild(newElem);\n  L2Dwidget.emit('create-container', newElem);\n\n  if (config.dialog.enable)\n    createDialogElement(newElem);\n\n  let newCanvasElem = document.createElement('canvas');\n  newCanvasElem.setAttribute('id', config.name.canvas);\n  newCanvasElem.setAttribute('width', config.display.width * config.display.superSample);\n  newCanvasElem.setAttribute('height', config.display.height * config.display.superSample);\n  newCanvasElem.style.setProperty('position', 'absolute');\n  newCanvasElem.style.setProperty('left', '0px');\n  newCanvasElem.style.setProperty('top', '0px');\n  newCanvasElem.style.setProperty('width', config.display.width + 'px');\n  newCanvasElem.style.setProperty('height', config.display.height + 'px');\n  if (config.dev.border) newCanvasElem.style.setProperty('border', 'dashed 1px #CCC');\n  newElem.appendChild(newCanvasElem);\n\n  currCanvas = document.getElementById(config.name.canvas);\n  L2Dwidget.emit('create-canvas', newCanvasElem);\n\n  initWebGL();\n\n}\n\n/**\n * Find and set the current WebGL element to the container\n * @return {null}\n */\n\nfunction initWebGL() {\n\n  var NAMES = ['webgl2', 'webgl', 'experimental-webgl2', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];\n  for (let i = 0; i < NAMES.length; i++) {\n    try {\n      let ctx = currCanvas.getContext(NAMES[i], {\n        alpha: true,\n        antialias: true,\n        premultipliedAlpha: true,\n        failIfMajorPerformanceCaveat: false,\n      });\n      if (ctx) currWebGL = ctx;\n    } catch (e) { }\n  }\n  if (!currWebGL) {\n    console.error('Live2D widgets: Failed to create WebGL context.');\n    if (!window.WebGLRenderingContext) {\n      console.error('Your browser may not support WebGL, check https://get.webgl.org/ for futher information.');\n    }\n    return;\n  }\n};\n\n\nexport {\n  createElement,\n  currWebGL,\n  currCanvas,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/elementMgr.js","/**\n *\n *  You can modify and use this source freely\n *  only for the development of application related Live2D.\n *\n *  (c) Live2D Inc. All rights reserved.\n */\n\n/**\n * EYHN 修改\n *\n * Copyright © 2016 - 2017 EYHN\n */\n\n// Modified by xiazeyu.\n\n/**\n* @desc A matrix stack releated to draw the model\n*/\n\nexport function MatrixStack() {}\n\nMatrixStack.matrixStack = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];\nMatrixStack.depth = 0;\nMatrixStack.currentMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];\nMatrixStack.tmp = new Array(16);\n\n/**\n* @name reset\n* @desc reset the stack\n* @param null\n* @returns null\n* @memberOf MatrixStack\n*/\nMatrixStack.reset = function(){\n  this.depth = 0;\n}\n\n/**\n* @name loadIdentity\n* @desc reset values in the stack to whether it can be divisible by 5\n* @param null\n* @returns null\n* @memberOf MatrixStack\n*/\nMatrixStack.loadIdentity = function(){\n  var thisRef = this;\n  for (var i = 0; i < 16; i++){\n    thisRef.currentMatrix[i] = (i % 5 == 0) ? 1 : 0;\n  }\n}\n\n/**\n* @name push\n* @desc push a new element into the stack\n* @param null\n* @returns null\n* @memberOf MatrixStack\n*/\nMatrixStack.push = function(){\n  var thisRef = this;\n  // var offset = thisRef.depth * 16;\n  var nextOffset = (thisRef.depth + 1) * 16;\n\n  if (thisRef.matrixStack.length < nextOffset + 16){\n    thisRef.matrixStack.length = nextOffset + 16;\n  }\n\n  for (var i = 0; i < 16; i++){\n    thisRef.matrixStack[nextOffset + i] = thisRef.currentMatrix[i];\n  }\n\n  thisRef.depth++;\n}\n\n/**\n* @name pop\n* @desc pop an element from the stack\n* @param null\n* @returns null\n* @memberOf MatrixStack\n*/\nMatrixStack.pop = function(){\n  var thisRef = this;\n  thisRef.depth--;\n  if (thisRef.depth < 0){ // stack is underflow?????\n    myError(\"Invalid matrix stack.\");\n    thisRef.depth = 0;\n  }\n\n  var offset = thisRef.depth * 16;\n  for (var i = 0; i < 16; i++){\n    thisRef.currentMatrix[i] = thisRef.matrixStack[offset + i];\n  }\n}\n\n/**\n* @name getMatrix\n* @desc return the current matrix stack\n* @param null\n* @returns {Array} current matrix stack\n* @memberOf MatrixStack\n*/\nMatrixStack.getMatrix = function(){\n  return this.currentMatrix;\n}\n\n/**\n* @name multMatrix\n* @desc matrix multiplication, save to the currentMatrix\n* @param null\n* @returns null\n* @memberOf MatrixStack\n*/\nMatrixStack.multMatrix = function(matNew)\n{\n  var thisRef = this;\n  var i, j, k;\n\n  for (i = 0; i < 16; i++){\n    thisRef.tmp[i] = 0;\n  }\n\n  for (i = 0; i < 4; i++){\n    for (j = 0; j < 4; j++){\n      for (k = 0; k < 4; k++){\n        thisRef.tmp[i + j * 4] += thisRef.currentMatrix[i + k * 4] * matNew[k + j * 4];\n      }\n    }\n  }\n  for (i = 0; i < 16; i++){\n    thisRef.currentMatrix[i] = thisRef.tmp[i];\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/utils/MatrixStack.js","import { config } from '../config/configMgr';\nimport { L2Dwidget } from '../index';\n\ndocument.head.innerHTML += `\n<style>\n  .live2d-widget-dialog-container {\n    width: 300px;\n    height: 120px;\n    position: absolute;\n    bottom: 65%;\n    right: 0px;\n    transform-origin: right;\n    padding: 12px;\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n  }\n  .live2d-widget-dialog {\n    width: 100%;\n    height: 100%;\n    color: #917159;\n    font-size: 16px;\n    padding: 12px;\n    border: 2px solid rgb(236, 203, 180);\n    background: rgb(252, 248, 244);\n    box-sizing: border-box;\n    border-radius: 10px;\n    transform: rotate(-2deg);\n    opacity: 0;\n    transition: 200ms opacity;\n    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;\n    animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;\n  }\n  @keyframes live2d-widget-dialog-tingle {\n    0% { transform: translate(-1px, 1.5px) rotate(-2deg); }\n    100% { transform: translate(1px, -1.5px) rotate(2deg); }\n  }\n</style>\n`;\n\nlet containerElement,dialogElement,closeTimer;\n\n/**\n * 创建对话框元素\n * @param {HTMLElement} root 位置\n */\nfunction createDialogElement(root) {\n  containerElement = document.createElement('div');\n  containerElement.className = 'live2d-widget-dialog-container';\n  containerElement.style.transform = `scale(${config.display.width / 250})`\n  dialogElement = document.createElement('div');\n  dialogElement.className = 'live2d-widget-dialog';\n  containerElement.appendChild(dialogElement);\n  root.appendChild(containerElement);\n\n  L2Dwidget.emit('create-dialog', containerElement);\n\n  if (config.dialog.hitokoto)\n    showHitokotoLoop()\n}\n\nfunction displayDialog() {\n  dialogElement.style.opacity = 1;\n}\n\nfunction hiddenDialog() {\n  dialogElement.style.opacity = 0;\n}\n\nfunction alertText(text) {\n  displayDialog();\n  dialogElement.innerText = text;\n  clearTimeout(closeTimer);\n  closeTimer = setTimeout(function () {\n    hiddenDialog();\n  }, 5000);\n}\n\nfunction showHitokotoLoop() {\n  var xhr = new XMLHttpRequest();\n  xhr.open('get', 'https://v1.hitokoto.cn');\n  xhr.setRequestHeader(\"Cache-Control\", \"no-cache\");\n  xhr.onreadystatechange = function () {\n    if (xhr.readyState === 4) {\n      var data = JSON.parse(xhr.responseText);\n      alertText(data.hitokoto);\n      setTimeout(showHitokotoLoop, 10000)\n    }\n  }\n  xhr.send();\n}\n\n\nmodule.exports = {\n  createDialogElement, displayDialog, hiddenDialog, alertText, showHitokotoLoop\n}\n\n\n// WEBPACK FOOTER //\n// ./src/dialog/index.js","// Provide a \"System\" global.\r\nmodule.exports = {\r\n\t// Make sure import is only used as \"System.import\"\r\n\timport: function() {\r\n\t\tthrow new Error(\"System.import cannot be used indirectly\");\r\n\t}\r\n};\r\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// (webpack)/buildin/system.js\n// module id = 83\n// module chunks = 0","import { Live2DFramework } from \"./lib/Live2DFramework\";\nimport { PlatformManager } from \"./PlatformManager\";\nimport { cModel } from \"./cModel\";\nimport { cDefine } from \"./cDefine\";\n\nfunction cManager(eventemitter) {\n  // console.log(\"--> cManager()\");\n\n  this.eventemitter = eventemitter;\n\n  this.models = [];\n  this.count = -1;\n  this.reloadFlg = false;\n\n  Live2DFramework.setPlatformManager(new PlatformManager());\n\n}\n\ncManager.prototype.createModel = function () {\n\n  var model = new cModel();\n  this.models.push(model);\n\n  return model;\n\n}\n\n\ncManager.prototype.changeModel = function (gl, modelurl) {\n  // console.log(\"--> cManager.update(gl)\");\n\n  if (this.reloadFlg) {\n    this.reloadFlg = false;\n    this.releaseModel(0, gl);\n    this.createModel();\n    this.models[0].load(gl, modelurl);\n  }\n\n};\n\n\ncManager.prototype.getModel = function (no) {\n  // console.log(\"--> cManager.getModel(\" + no + \")\");\n\n  if (no >= this.models.length) return null;\n\n  return this.models[no];\n};\n\n\n\ncManager.prototype.releaseModel = function (no, gl) {\n  // console.log(\"--> cManager.releaseModel(\" + no + \")\");\n\n  if (this.models.length <= no) return;\n\n  this.models[no].release(gl);\n\n  delete this.models[no];\n  this.models.splice(no, 1);\n};\n\n\n\ncManager.prototype.numModels = function () {\n  return this.models.length;\n};\n\n\n\ncManager.prototype.setDrag = function (x, y) {\n  for (var i = 0; i < this.models.length; i++) {\n    this.models[i].setDrag(x, y);\n  }\n}\n\ncManager.prototype.tapEvent = function (x, y) {\n  if (cDefine.DEBUG_LOG)\n    console.log(\"tapEvent view x:\" + x + \" y:\" + y);\n\n  for (var i = 0; i < this.models.length; i++) {\n\n    if (this.models[i].hitTest(cDefine.HIT_AREA_HEAD, x, y)) {\n      this.eventemitter.emit('tapface');\n      \n      if (cDefine.DEBUG_LOG)\n        console.log(\"Tap face.\");\n\n      this.models[i].setRandomExpression();\n    }\n    else if (this.models[i].hitTest(cDefine.HIT_AREA_BODY, x, y)) {\n      this.eventemitter.emit('tapbody');\n      if (cDefine.DEBUG_LOG)\n        console.log(\"Tap body.\" + \" models[\" + i + \"]\");\n\n      this.models[i].startRandomMotion(cDefine.MOTION_GROUP_TAP_BODY,\n        cDefine.PRIORITY_NORMAL);\n    }\n  }\n\n  return true;\n};\n\nexport{\n  cManager,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/cManager.js","\n/**\n *\n *  You can modify and use this source freely\n *  only for the development of application related Live2D.\n *\n *  (c) Live2D Inc. All rights reserved.\n */\n\n// Modified by xiazeyu.\n\n/**\n* @desc A library that provide basic IO and json function\n*/\n\nimport { currWebGL } from './elementMgr';\nimport { Live2DModelWebGL } from \"./lib/live2d.core\";\n\n\n//============================================================\n//============================================================\n//  class PlatformManager     extend IPlatformManager\n//============================================================\n//============================================================\n\n/**\n* @name PlatformManager\n* @desc Define the variable type of PlatformManager\n* @param null\n* @returns {Structure} PlatformManager\n*/\nexport function PlatformManager()\n{\n\n}\n\n\n//============================================================\n//    PlatformManager # loadBytes()\n//============================================================\n\n/**\n* @name loadBytes\n* @desc load bytes from the path and callback\n* @param {String} path, {Function} callback\n* @returns callback {raw} context\n* @memberOf PlatformManager\n*/\n\nPlatformManager.prototype.loadBytes       = function(path/*String*/, callback)\n{\n    var request = new XMLHttpRequest();\n    request.open(\"GET\", path, true);\n    request.responseType = \"arraybuffer\";\n    request.onload = function(){\n        switch(request.status){\n        case 200:\n            callback(request.response);\n            break;\n        default:\n            console.error(\"Failed to load (\" + request.status + \") : \" + path);\n            break;\n        }\n    }\n    request.send(null);\n    // return request;\n}\n\n\n//============================================================\n//    PlatformManager # loadString()\n//============================================================\n\n/**\n* @name loadString\n* @desc load bytes from the path and put it into buffer\n* @param {String} path\n* @returns buffer {raw} context\n* @memberOf PlatformManager\n*/\nPlatformManager.prototype.loadString      = function(path/*String*/)\n{\n\n    this.loadBytes(path, function(buf) {\n        return buf;\n    });\n\n}\n\n\n//============================================================\n//    PlatformManager # loadLive2DModel()\n//============================================================\n\n/**\n* @name loadLive2DModel\n* @desc load Live2DModel from the path and put it into buffer\n* @param {String} path, {function} callback\n* @returns callback loaded model\n* @memberOf PlatformManager\n*/\nPlatformManager.prototype.loadLive2DModel = function(path/*String*/, callback)\n{\n    var model = null;\n\n    // load moc\n    this.loadBytes(path, function(buf){\n        model = Live2DModelWebGL.loadModel(buf);\n        callback(model);\n    });\n\n}\n\n\n//============================================================\n//    PlatformManager # loadTexture()\n//============================================================\n\n/**\n* @name loadTexture\n* @desc load Live2DModel's Texture and callback\n* @param {Live2DModelWebGL}model, {int}no, {string}path, {function}callback\n* @returns callback\n* @memberOf PlatformManager\n*/\nPlatformManager.prototype.loadTexture     = function(model/*ALive2DModel*/, no/*int*/, path/*String*/, callback)\n{\n    // load textures\n    var loadedImage = new Image();\n    // Thanks to @mashirozx & @fghrsh\n    // Issues:\n    // @https://github.com/journey-ad/live2d_src/issues/1\n    // @https://github.com/journey-ad/live2d_src/issues/3\n    loadedImage.crossOrigin = 'Anonymous';\n    loadedImage.src = path;\n    loadedImage.onload = onload;\n    loadedImage.onerror = onerror;\n\n    // var thisRef = this;\n    loadedImage.onload = function() {\n        // create texture\n        var gl = currWebGL;\n        var texture = gl.createTexture();\n        if (!texture){ console.error(\"Failed to generate gl texture name.\"); return -1; }\n\n        if(!model.isPremultipliedAlpha()){\n            // 乗算済アルファテクスチャ以外の場合\n            // emmmm, maybe do something for textures with alpha layer.\n            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);\n        }\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, texture);\n        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,\n                      gl.UNSIGNED_BYTE, loadedImage);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);\n        gl.generateMipmap(gl.TEXTURE_2D);\n\n\n\n        model.setTexture(no, texture);\n\n        // テクスチャオブジェクトを解放\n        // Release the texture object to prevent buffer overruns.\n        texture = null;\n\n        if (typeof callback == \"function\") callback();\n    };\n\n    loadedImage.onerror = function() {\n        console.error(\"Failed to load image : \" + path);\n    }\n}\n\n\n//============================================================\n//    PlatformManager # parseFromBytes(buf)\n\n//============================================================\n\n/**\n* @name jsonParseFromBytes\n* @desc parse json file into arrays\n* @param {raw} buf\n* @returns {Array}jsonObj\n* @memberOf PlatformManager\n*/\nPlatformManager.prototype.jsonParseFromBytes = function(buf){\n\n    var jsonStr;\n    var bomCode = new Uint8Array(buf, 0, 3);\n    if (bomCode[0] == 239 && bomCode[1] == 187 && bomCode[2] == 191) {\n        jsonStr = String.fromCharCode.apply(null, new Uint8Array(buf, 3));\n    } else {\n        jsonStr = String.fromCharCode.apply(null, new Uint8Array(buf));\n    }\n\n    var jsonObj = JSON.parse(jsonStr);\n\n    return jsonObj;\n};\n\n\n\n//============================================================\n//    PlatformManager # log()\n//============================================================\n\n/**\n* @name log\n* @desc output log in console\n* @param {string} txt\n* @returns null\n* @memberOf PlatformManager\n*/\nPlatformManager.prototype.log             = function(txt/*String*/)\n{\n    console.log(txt);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/PlatformManager.js","import { Live2DFramework, L2DBaseModel, L2DEyeBlink } from \"./lib/Live2DFramework\";\nimport { ModelSettingJson } from \"./utils/ModelSettingJson\";\nimport { MatrixStack } from \"./utils/MatrixStack\";\nimport { cDefine } from \"./cDefine\";\nimport { UtSystem,/*\n         UtDebug,\n         LDTransform,\n         LDGL,\n         Live2D,\n         Live2DModelWebGL,\n         Live2DModelJS,\n         Live2DMotion,\n         MotionQueueManager,\n         PhysicsHair,\n         AMotion,\n         PartsDataID,\n         DrawDataID,\n         BaseDataID,\n         ParamID*/ } from './lib/live2d.core';\n//============================================================\n//============================================================\n//  class cModel     extends L2DBaseModel\n//============================================================\n//============================================================\nexport function cModel()\n{\n    //L2DBaseModel.apply(this, arguments);\n    L2DBaseModel.prototype.constructor.call(this);\n\n    this.modelHomeDir = \"\";\n    this.modelSetting = null;\n    this.tmpMatrix = [];\n}\n\ncModel.prototype = new L2DBaseModel();\n\n\ncModel.prototype.load = function(gl, modelSettingPath, callback)\n{\n    this.setUpdating(true);\n    this.setInitialized(false);\n\n    this.modelHomeDir = modelSettingPath.substring(0, modelSettingPath.lastIndexOf(\"/\") + 1);\n\n    this.modelSetting = new ModelSettingJson();\n\n    var thisRef = this;\n\n    this.modelSetting.loadModelSetting(modelSettingPath, function(){\n\n        var path = thisRef.modelHomeDir + thisRef.modelSetting.getModelFile();\n        thisRef.loadModelData(path, function(model){\n\n            for (var i = 0; i < thisRef.modelSetting.getTextureNum(); i++)\n            {\n                if( /^https?:\\/\\/|^\\/\\//i.test(thisRef.modelSetting.getTextureFile(i)) ){\n\n                    var texPaths = thisRef.modelSetting.getTextureFile(i);\n\n                }else{\n                var texPaths = thisRef.modelHomeDir + thisRef.modelSetting.getTextureFile(i);\n                }\n                thisRef.loadTexture(i, texPaths, function() {\n\n                    if( thisRef.isTexLoaded ) {\n\n                        if (thisRef.modelSetting.getExpressionNum() > 0)\n                        {\n\n                            thisRef.expressions = {};\n\n                            for (var j = 0; j < thisRef.modelSetting.getExpressionNum(); j++)\n                            {\n                                var expName = thisRef.modelSetting.getExpressionName(j);\n                                var expFilePath = thisRef.modelHomeDir +\n                                    thisRef.modelSetting.getExpressionFile(j);\n\n                                thisRef.loadExpression(expName, expFilePath);\n                            }\n                        }\n                        else\n                        {\n                            thisRef.expressionManager = null;\n                            thisRef.expressions = {};\n                        }\n\n\n\n                        if (thisRef.eyeBlink == null)\n                        {\n                            thisRef.eyeBlink = new L2DEyeBlink();\n                        }\n\n\n                        if (thisRef.modelSetting.getPhysicsFile() != null)\n                        {\n                            thisRef.loadPhysics(thisRef.modelHomeDir +\n                                                thisRef.modelSetting.getPhysicsFile());\n                        }\n                        else\n                        {\n                            thisRef.physics = null;\n                        }\n\n\n\n                        if (thisRef.modelSetting.getPoseFile() != null)\n                        {\n                            thisRef.loadPose(\n                                thisRef.modelHomeDir +\n                                thisRef.modelSetting.getPoseFile(),\n                                function() {\n                                    thisRef.pose.updateParam(thisRef.live2DModel);\n                                }\n                            );\n                        }\n                        else\n                        {\n                            thisRef.pose = null;\n                        }\n\n\n\n                        if (thisRef.modelSetting.getLayout() != null)\n                        {\n                            var layout = thisRef.modelSetting.getLayout();\n                            if (layout[\"width\"] != null)\n                                thisRef.modelMatrix.setWidth(layout[\"width\"]);\n                            if (layout[\"height\"] != null)\n                                thisRef.modelMatrix.setHeight(layout[\"height\"]);\n\n                            if (layout[\"x\"] != null)\n                                thisRef.modelMatrix.setX(layout[\"x\"]);\n                            if (layout[\"y\"] != null)\n                                thisRef.modelMatrix.setY(layout[\"y\"]);\n                            if (layout[\"center_x\"] != null)\n                                thisRef.modelMatrix.centerX(layout[\"center_x\"]);\n                            if (layout[\"center_y\"] != null)\n                                thisRef.modelMatrix.centerY(layout[\"center_y\"]);\n                            if (layout[\"top\"] != null)\n                                thisRef.modelMatrix.top(layout[\"top\"]);\n                            if (layout[\"bottom\"] != null)\n                                thisRef.modelMatrix.bottom(layout[\"bottom\"]);\n                            if (layout[\"left\"] != null)\n                                thisRef.modelMatrix.left(layout[\"left\"]);\n                            if (layout[\"right\"] != null)\n                                thisRef.modelMatrix.right(layout[\"right\"]);\n                        }\n\n                        for (var j = 0; j < thisRef.modelSetting.getInitParamNum(); j++)\n                        {\n\n                            thisRef.live2DModel.setParamFloat(\n                                thisRef.modelSetting.getInitParamID(j),\n                                thisRef.modelSetting.getInitParamValue(j)\n                            );\n                        }\n\n                        for (var j = 0; j < thisRef.modelSetting.getInitPartsVisibleNum(); j++)\n                        {\n\n                            thisRef.live2DModel.setPartsOpacity(\n                                thisRef.modelSetting.getInitPartsVisibleID(j),\n                                thisRef.modelSetting.getInitPartsVisibleValue(j)\n                            );\n                        }\n\n\n\n                        thisRef.live2DModel.saveParam();\n                        // thisRef.live2DModel.setGL(gl);\n\n\n                        thisRef.preloadMotionGroup(cDefine.MOTION_GROUP_IDLE);\n                        thisRef.mainMotionManager.stopAllMotions();\n\n                        thisRef.setUpdating(false);\n                        thisRef.setInitialized(true);\n\n                        if (typeof callback == \"function\") callback();\n\n                    }\n                });\n            }\n        });\n    });\n};\n\n\n\ncModel.prototype.release = function(gl)\n{\n    // this.live2DModel.deleteTextures();\n    var pm = Live2DFramework.getPlatformManager();\n\n    gl.deleteTexture(pm.texture);\n}\n\n\n\ncModel.prototype.preloadMotionGroup = function(name)\n{\n    var thisRef = this;\n\n    for (var i = 0; i < this.modelSetting.getMotionNum(name); i++)\n    {\n        var file = this.modelSetting.getMotionFile(name, i);\n        this.loadMotion(file, this.modelHomeDir + file, function(motion) {\n            motion.setFadeIn(thisRef.modelSetting.getMotionFadeIn(name, i));\n            motion.setFadeOut(thisRef.modelSetting.getMotionFadeOut(name, i));\n        });\n\n    }\n}\n\n\ncModel.prototype.update = function()\n{\n    // console.log(\"--> cModel.update()\");\n\n    if(this.live2DModel == null)\n    {\n        if (cDefine.DEBUG_LOG) console.error(\"Failed to update.\");\n\n        return;\n    }\n\n    var timeMSec = UtSystem.getUserTimeMSec() - this.startTimeMSec;\n    var timeSec = timeMSec / 1000.0;\n    var t = timeSec * 2 * Math.PI;\n\n\n    if (this.mainMotionManager.isFinished())\n    {\n\n        this.startRandomMotion(cDefine.MOTION_GROUP_IDLE, cDefine.PRIORITY_IDLE);\n    }\n\n    //-----------------------------------------------------------------\n\n\n    this.live2DModel.loadParam();\n\n\n\n    var update = this.mainMotionManager.updateParam(this.live2DModel);\n    if (!update) {\n\n        if(this.eyeBlink != null) {\n            this.eyeBlink.updateParam(this.live2DModel);\n        }\n    }\n\n\n    this.live2DModel.saveParam();\n\n    //-----------------------------------------------------------------\n\n\n    if (this.expressionManager != null &&\n        this.expressions != null &&\n        !this.expressionManager.isFinished())\n    {\n        this.expressionManager.updateParam(this.live2DModel);\n    }\n\n\n\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_X\", this.dragX * 30, 1);\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_Y\", this.dragY * 30, 1);\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_Z\", (this.dragX * this.dragY) * -30, 1);\n\n\n\n    this.live2DModel.addToParamFloat(\"PARAM_BODY_ANGLE_X\", this.dragX*10, 1);\n\n\n\n    this.live2DModel.addToParamFloat(\"PARAM_EYE_BALL_X\", this.dragX, 1);\n    this.live2DModel.addToParamFloat(\"PARAM_EYE_BALL_Y\", this.dragY, 1);\n\n\n\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_X\",\n                                     Number((15 * Math.sin(t / 6.5345))), 0.5);\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_Y\",\n                                     Number((8 * Math.sin(t / 3.5345))), 0.5);\n    this.live2DModel.addToParamFloat(\"PARAM_ANGLE_Z\",\n                                     Number((10 * Math.sin(t / 5.5345))), 0.5);\n    this.live2DModel.addToParamFloat(\"PARAM_BODY_ANGLE_X\",\n                                     Number((4 * Math.sin(t / 15.5345))), 0.5);\n    this.live2DModel.setParamFloat(\"PARAM_BREATH\",\n                                   Number((0.5 + 0.5 * Math.sin(t / 3.2345))), 1);\n\n\n    if (this.physics != null)\n    {\n        this.physics.updateParam(this.live2DModel);\n    }\n\n\n    if (this.lipSync == null)\n    {\n        this.live2DModel.setParamFloat(\"PARAM_MOUTH_OPEN_Y\",\n                                       this.lipSyncValue);\n    }\n\n\n    if( this.pose != null ) {\n        this.pose.updateParam(this.live2DModel);\n    }\n\n    this.live2DModel.update();\n};\n\n\n\ncModel.prototype.setRandomExpression = function()\n{\n    var tmp = [];\n    for (var name in this.expressions)\n    {\n        tmp.push(name);\n    }\n\n    var no = parseInt(Math.random() * tmp.length);\n\n    this.setExpression(tmp[no]);\n}\n\n\n\ncModel.prototype.startRandomMotion = function(name, priority)\n{\n    var max = this.modelSetting.getMotionNum(name);\n    var no = parseInt(Math.random() * max);\n    this.startMotion(name, no, priority);\n}\n\n\n\ncModel.prototype.startMotion = function(name, no, priority)\n{\n    // console.log(\"startMotion : \" + name + \" \" + no + \" \" + priority);\n\n    var motionName = this.modelSetting.getMotionFile(name, no);\n\n    if (motionName == null || motionName == \"\")\n    {\n        if (cDefine.DEBUG_LOG)\n            console.error(\"Failed to motion.\");\n        return;\n    }\n\n    if (priority == cDefine.PRIORITY_FORCE)\n    {\n        this.mainMotionManager.setReservePriority(priority);\n    }\n    else if (!this.mainMotionManager.reserveMotion(priority))\n    {\n        if (cDefine.DEBUG_LOG)\n            console.log(\"Motion is running.\")\n        return;\n    }\n\n    var thisRef = this;\n    var motion;\n\n    if (this.motions[name] == null)\n    {\n        this.loadMotion(name, this.modelHomeDir + motionName, function(mtn) {\n            motion = mtn;\n\n\n            thisRef.setFadeInFadeOut(name, no, priority, motion);\n            \n        });\n    }\n    else\n    {\n        motion = this.motions[name];\n\n\n        thisRef.setFadeInFadeOut(name, no, priority, motion);\n    }\n}\n\n\ncModel.prototype.setFadeInFadeOut = function(name, no, priority, motion)\n{\n    var motionName = this.modelSetting.getMotionFile(name, no);\n\n    motion.setFadeIn(this.modelSetting.getMotionFadeIn(name, no));\n    motion.setFadeOut(this.modelSetting.getMotionFadeOut(name, no));\n\n\n    if (cDefine.DEBUG_LOG)\n            console.log(\"Start motion : \" + motionName);\n\n    if (this.modelSetting.getMotionSound(name, no) == null)\n    {\n        this.mainMotionManager.startMotionPrio(motion, priority);\n    }\n    else\n    {\n        var soundName = this.modelSetting.getMotionSound(name, no);\n        // var player = new Sound(this.modelHomeDir + soundName);\n\n        var snd = document.createElement(\"audio\");\n        snd.src = this.modelHomeDir + soundName;\n\n        if (cDefine.DEBUG_LOG)\n            console.log(\"Start sound : \" + soundName);\n\n        snd.play();\n        this.mainMotionManager.startMotionPrio(motion, priority);\n    }\n}\n\n\n\ncModel.prototype.setExpression = function(name)\n{\n    var motion = this.expressions[name];\n\n    if (cDefine.DEBUG_LOG)\n        console.log(\"Expression : \" + name);\n\n    this.expressionManager.startMotion(motion, false);\n}\n\n\n\ncModel.prototype.draw = function(gl)\n{\n    //console.log(\"--> cModel.draw()\");\n\n    // if(this.live2DModel == null) return;\n\n\n    MatrixStack.push();\n\n    MatrixStack.multMatrix(this.modelMatrix.getArray());\n\n    this.tmpMatrix = MatrixStack.getMatrix()\n    this.live2DModel.setMatrix(this.tmpMatrix);\n    this.live2DModel.draw();\n\n    MatrixStack.pop();\n\n};\n\n\n\ncModel.prototype.hitTest = function(id, testX, testY)\n{\n    var len = this.modelSetting.getHitAreaNum();\n    for (var i = 0; i < len; i++)\n    {\n        if (id == this.modelSetting.getHitAreaName(i))\n        {\n            var drawID = this.modelSetting.getHitAreaID(i);\n\n            return this.hitTestSimple(drawID, testX, testY);\n        }\n    }\n\n    return false;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/cModel.js","// Modified by xiazeyu.\n\n/**\n* @desc To get the model settings from given json file\n*/\n\nimport { Live2DFramework } from \"../lib/Live2DFramework\"\n\n/**\n* @name ModelSettingJson\n* @desc return the struct of ModelSettingJson\n* @param null\n* @returns {Structure} ModelSettingJson\n*/\nexport function ModelSettingJson()\n{   // Define the index in the json file.\n    this.NAME = \"name\";\n    this.ID = \"id\";\n    this.MODEL = \"model\";\n    this.TEXTURES = \"textures\";\n    this.HIT_AREAS = \"hit_areas\";\n    this.PHYSICS = \"physics\";\n    this.POSE = \"pose\";\n    this.EXPRESSIONS = \"expressions\";\n    this.MOTION_GROUPS = \"motions\";\n    this.SOUND = \"sound\";\n    this.FADE_IN = \"fade_in\";\n    this.FADE_OUT = \"fade_out\";\n    this.LAYOUT = \"layout\";\n    this.INIT_PARAM = \"init_param\";\n    this.INIT_PARTS_VISIBLE = \"init_parts_visible\";\n    this.VALUE = \"val\";\n    this.FILE = \"file\";\n    this.json = {};\n}\n\n/**\n* @name loadModelSetting\n* @desc load model settings from json\n* @param {string} jsonPath, {function} callback\n* @returns null\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.loadModelSetting = function(path, callback)\n{\n    var thisRef = this;\n    var pm = Live2DFramework.getPlatformManager();\n    pm.loadBytes(path, function(buf) {\n        var str = String.fromCharCode.apply(null,new Uint8Array(buf));\n        thisRef.json = JSON.parse(str);\n        callback();\n    });\n};\n\n/**\n* @name getTextureFile\n* @desc get texture file from json\n* @param {int} order number of texture\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getTextureFile = function(n)\n{\n    if (this.json[this.TEXTURES] == null || this.json[this.TEXTURES][n] == null)\n        return null;\n\n    return this.json[this.TEXTURES][n];\n}\n\n/**\n* @name getModelFile\n* @desc get model file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getModelFile = function()\n{\n    return this.json[this.MODEL];\n};\n\n/**\n* @name getTextureNum\n* @desc get the amount of textures from json\n* @param null\n* @returns {int} amout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getTextureNum = function()\n{\n    if (this.json[this.TEXTURES] == null) return 0;\n\n    return this.json[this.TEXTURES].length;\n}\n\n/**\n* @name getHitAreaNum\n* @desc get the amount of hit area from json\n* @param null\n* @returns {int} amout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getHitAreaNum = function()\n{\n    if (this.json[this.HIT_AREAS] == null)\n        return 0;\n\n    return this.json[this.HIT_AREAS].length;\n}\n\n/**\n* @name getHitAreaID\n* @desc get the hit area ID of given index from json\n* @param {int} index\n* @returns {int} ID\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getHitAreaID = function(n)\n{\n    if (this.json[this.HIT_AREAS] == null ||\n        this.json[this.HIT_AREAS][n] == null)\n        return null;\n\n    return this.json[this.HIT_AREAS][n][this.ID];\n}\n\n/**\n* @name getHitAreaName\n* @desc get the hit area name of given index from json\n* @param {int} index\n* @returns {string} name\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getHitAreaName = function(n)\n{\n    if (this.json[this.HIT_AREAS] == null ||\n        this.json[this.HIT_AREAS][n] == null)\n        return null;\n\n    return this.json[this.HIT_AREAS][n][this.NAME];\n}\n\n/**\n* @name getPhysicsFile\n* @desc get physics file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getPhysicsFile = function()\n{\n    return this.json[this.PHYSICS];\n}\n\n/**\n* @name getPoseFile\n* @desc get pose file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getPoseFile = function()\n{\n    return this.json[this.POSE];\n}\n\n/**\n* @name getExpressionNum\n* @desc get the amount of expressions from json\n* @param null\n* @returns {int} amout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getExpressionNum = function()\n{\n    return (this.json[this.EXPRESSIONS] == null) ? 0 : this.json[this.EXPRESSIONS].length;\n}\n\n/**\n* @name getExpressionFile\n* @desc get expression file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getExpressionFile = function(n)\n{\n    if (this.json[this.EXPRESSIONS] == null)\n        return null;\n    return this.json[this.EXPRESSIONS][n][this.FILE];\n}\n\n/**\n* @name getExpressionName\n* @desc get the hit expression name of given index from json\n* @param {int} index\n* @returns {string} name\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getExpressionName = function(n)\n{\n    if (this.json[this.EXPRESSIONS] == null)\n        return null;\n    return this.json[this.EXPRESSIONS][n][this.NAME];\n}\n\n/**\n* @name getLayout\n* @desc get the layout from json\n* @param null\n* @returns {string} layout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getLayout = function()\n{\n    return this.json[this.LAYOUT];\n}\n\n/**\n* @name getInitParamNum\n* @desc get the amount of init parameter from json\n* @param null\n* @returns {int} amount\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitParamNum = function()\n{\n    return (this.json[this.INIT_PARAM] == null) ? 0 : this.json[this.INIT_PARAM].length;\n}\n\n/**\n* @name getMotionNum\n* @desc get the amount of motions from json\n* @param null\n* @returns {int} amout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getMotionNum = function(name)\n{\n    if (this.json[this.MOTION_GROUPS] == null ||\n        this.json[this.MOTION_GROUPS][name] == null)\n        return 0;\n\n    return this.json[this.MOTION_GROUPS][name].length;\n}\n\n/**\n* @name getMotionFile\n* @desc get motion file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getMotionFile = function(name, n)\n{\n    if (this.json[this.MOTION_GROUPS] == null ||\n        this.json[this.MOTION_GROUPS][name] == null ||\n        this.json[this.MOTION_GROUPS][name][n] == null)\n        return null;\n\n    return this.json[this.MOTION_GROUPS][name][n][this.FILE];\n}\n\n/**\n* @name getMotionSound\n* @desc get motion's sound file from json\n* @param null\n* @returns {string} file path\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getMotionSound = function(name, n)\n{\n    if (this.json[this.MOTION_GROUPS] == null ||\n        this.json[this.MOTION_GROUPS][name] == null ||\n        this.json[this.MOTION_GROUPS][name][n] == null ||\n        this.json[this.MOTION_GROUPS][name][n][this.SOUND] == null)\n        return null;\n\n    return this.json[this.MOTION_GROUPS][name][n][this.SOUND];\n}\n\n/**\n* @name getMotionFadeIn\n* @desc get the motion's fade in setting from json\n* @param {string} name, {int} index\n* @returns {int} time (1000 if not found)\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getMotionFadeIn = function(name, n)\n{\n    if (this.json[this.MOTION_GROUPS] == null ||\n        this.json[this.MOTION_GROUPS][name] == null ||\n        this.json[this.MOTION_GROUPS][name][n] == null ||\n        this.json[this.MOTION_GROUPS][name][n][this.FADE_IN] == null)\n        return 1000;\n\n    return this.json[this.MOTION_GROUPS][name][n][this.FADE_IN];\n}\n\n/**\n* @name getMotionFadeOut\n* @desc get the motion's fade out setting from json\n* @param {string} name, {int} index\n* @returns {int} time (1000 if not found)\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getMotionFadeOut = function(name, n)\n{\n    if (this.json[this.MOTION_GROUPS] == null ||\n        this.json[this.MOTION_GROUPS][name] == null ||\n        this.json[this.MOTION_GROUPS][name][n] == null ||\n        this.json[this.MOTION_GROUPS][name][n][this.FADE_OUT] == null)\n        return 1000;\n\n    return this.json[this.MOTION_GROUPS][name][n][this.FADE_OUT];\n}\n\n/**\n* @name getInitParamID\n* @desc get the visible ID of init parameter from json\n* @param {(int)} index\n* @returns {int} ID\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitParamID = function(n)\n{\n    if (this.json[this.INIT_PARAM] == null ||\n        this.json[this.INIT_PARAM][n] == null)\n        return null;\n\n    return this.json[this.INIT_PARAM][n][this.ID];\n}\n\n/**\n* @name getInitParamValue\n* @desc get the visible value of init parameter from json\n* @param {(int)} index\n* @returns {int} value\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitParamValue = function(n)\n{\n    if (this.json[this.INIT_PARAM] == null || this.json[this.INIT_PARAM][n] == null)\n        return NaN;\n\n    return this.json[this.INIT_PARAM][n][this.VALUE];\n}\n\n/**\n* @name getInitPartsVisibleNum\n* @desc get the amount of init parts visible from json\n* @param null\n* @returns {int} amout\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitPartsVisibleNum = function()\n{\n    return (this.json[this.INIT_PARTS_VISIBLE] == null) ? 0 : this.json[this.INIT_PARTS_VISIBLE].length;\n}\n\n/**\n* @name getInitPartsVisibleID\n* @desc get the visible ID of init parts from json\n* @param {(int)} index\n* @returns {int} ID\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitPartsVisibleID = function(n)\n{\n    if (this.json[this.INIT_PARTS_VISIBLE] == null || this.json[this.INIT_PARTS_VISIBLE][n] == null)\n        return null;\n    return this.json[this.INIT_PARTS_VISIBLE][n][this.ID];\n}\n\n/**\n* @name getInitPartsVisibleValue\n* @desc get the visible value of init parts from json\n* @param {(int)} index\n* @returns {int} value\n* @memberOf ModelSettingJson\n*/\nModelSettingJson.prototype.getInitPartsVisibleValue = function(n)\n{\n    if (this.json[this.INIT_PARTS_VISIBLE] == null || this.json[this.INIT_PARTS_VISIBLE][n] == null)\n        return NaN;\n\n    return this.json[this.INIT_PARTS_VISIBLE][n][this.VALUE];\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/utils/ModelSettingJson.js"],"sourceRoot":""}
\ No newline at end of file
diff --git a/live2dw/lib/L2Dwidget.min.js b/live2dw/lib/L2Dwidget.min.js
new file mode 100644
index 0000000000..c40355679e
--- /dev/null
+++ b/live2dw/lib/L2Dwidget.min.js
@@ -0,0 +1,3 @@
+/*! https://github.com/xiazeyu/live2d-widget.js built@2019-4-6 09:38:17 */
+var L2Dwidget=function(t){var n=window.webpackJsonpL2Dwidget;window.webpackJsonpL2Dwidget=function(e,o,i){for(var c,u,a=0,s=[];a<e.length;a++)u=e[a],r[u]&&s.push(r[u][0]),r[u]=0;for(c in o)Object.prototype.hasOwnProperty.call(o,c)&&(t[c]=o[c]);for(n&&n(e,o,i);s.length;)s.shift()()};var e={},r={1:0};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.e=function(t){var n=r[t];if(0===n)return new Promise(function(t){t()});if(n)return n[2];var e=new Promise(function(e,o){n=r[t]=[e,o]});n[2]=e;var i=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"L2Dwidget."+t+".min.js";var u=setTimeout(a,12e4);c.onerror=c.onload=a;function a(){c.onerror=c.onload=null,clearTimeout(u);var n=r[t];0!==n&&(n&&n[1](new Error("Loading chunk "+t+" failed.")),r[t]=void 0)}return i.appendChild(c),e},o.m=t,o.c=e,o.d=function(t,n,e){o.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(n,"a",n),n},o.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},o.p="",o.oe=function(t){throw console.error(t),t},o(o.s=40)}([function(t,n,e){var r=e(24)("wks"),o=e(16),i=e(1).Symbol,c="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=c&&i[t]||(c?i:o)("Symbol."+t))}).store=r},function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n,e){var r=e(6);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n,e){var r=e(11),o=e(26);t.exports=e(7)?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n){var e=t.exports={version:"2.5.3"};"number"==typeof __e&&(__e=e)},function(t,n,e){var r=e(1),o=e(3),i=e(8),c=e(16)("src"),u="toString",a=Function[u],s=(""+a).split(u);e(4).inspectSource=function(t){return a.call(t)},(t.exports=function(t,n,e,u){var a="function"==typeof e;a&&(i(e,"name")||o(e,"name",n)),t[n]!==e&&(a&&(i(e,c)||o(e,c,t[n]?""+t[n]:s.join(String(n)))),t===r?t[n]=e:u?t[n]?t[n]=e:o(t,n,e):(delete t[n],o(t,n,e)))})(Function.prototype,u,function(){return"function"==typeof this&&this[c]||a.call(this)})},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n,e){t.exports=!e(25)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n){t.exports={}},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){var r=e(2),o=e(43),i=e(44),c=Object.defineProperty;n.f=e(7)?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return c(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n,e){var r=e(1),o=e(4),i=e(3),c=e(5),u=e(13),a="prototype",s=function(t,n,e){var f,l,p,d,v=t&s.F,h=t&s.G,y=t&s.S,m=t&s.P,b=t&s.B,w=h?r:y?r[n]||(r[n]={}):(r[n]||{})[a],g=h?o:o[n]||(o[n]={}),x=g[a]||(g[a]={});h&&(e=n);for(f in e)p=((l=!v&&w&&void 0!==w[f])?w:e)[f],d=b&&l?u(p,r):m&&"function"==typeof p?u(Function.call,p):p,w&&c(w,f,p,t&s.U),g[f]!=p&&i(g,f,d),m&&x[f]!=p&&(x[f]=p)};r.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,n,e){var r=e(14);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,e){var r=e(10),o=e(0)("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var n,e,c;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=function(t,n){try{return t[n]}catch(t){}}(n=Object(t),o))?e:i?r(n):"Object"==(c=r(n))&&"function"==typeof n.callee?"Arguments":c}},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n,e){var r=e(6),o=e(1).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n,e){var r=e(51),o=e(19);t.exports=function(t){return r(o(t))}},function(t,n,e){var r=e(24)("keys"),o=e(16);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,n,e){var r=e(11).f,o=e(8),i=e(0)("toStringTag");t.exports=function(t,n,e){t&&!o(t=e?t:t.prototype,i)&&r(t,i,{configurable:!0,value:n})}},function(t,n,e){"use strict";var r=e(14);t.exports.f=function(t){return new function(t){var n,e;this.promise=new t(function(t,r){if(void 0!==n||void 0!==e)throw TypeError("Bad Promise constructor");n=t,e=r}),this.resolve=r(n),this.reject=r(e)}(t)}},function(t,n,e){var r=e(1),o="__core-js_shared__",i=r[o]||(r[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,e){"use strict";var r=e(28),o=e(12),i=e(5),c=e(3),u=e(8),a=e(9),s=e(47),f=e(22),l=e(54),p=e(0)("iterator"),d=!([].keys&&"next"in[].keys()),v="values",h=function(){return this};t.exports=function(t,n,e,y,m,b,w){s(e,n,y);var g,x,_,S=function(t){if(!d&&t in O)return O[t];switch(t){case"keys":case v:return function(){return new e(this,t)}}return function(){return new e(this,t)}},k=n+" Iterator",P=m==v,j=!1,O=t.prototype,T=O[p]||O["@@iterator"]||m&&O[m],L=!d&&T||S(m),E=m?P?S("entries"):L:void 0,M="Array"==n?O.entries||T:T;if(M&&(_=l(M.call(new t)))!==Object.prototype&&_.next&&(f(_,k,!0),r||u(_,p)||c(_,p,h)),P&&T&&T.name!==v&&(j=!0,L=function(){return T.call(this)}),r&&!w||!d&&!j&&O[p]||c(O,p,L),a[n]=L,a[k]=h,m)if(g={values:P?L:S(v),keys:b?L:S("keys"),entries:E},w)for(x in g)x in O||i(O,x,g[x]);else o(o.P+o.F*(d||j),n,g);return g}},function(t,n){t.exports=!1},function(t,n,e){var r=e(50),o=e(31);t.exports=Object.keys||function(t){return r(t,o)}},function(t,n,e){var r=e(18),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,e){var r=e(1).document;t.exports=r&&r.documentElement},function(t,n,e){var r=e(2),o=e(14),i=e(0)("species");t.exports=function(t,n){var e,c=r(t).constructor;return void 0===c||void 0==(e=r(c)[i])?n:o(e)}},function(t,n,e){var r,o,i,c=e(13),u=e(66),a=e(32),s=e(17),f=e(1),l=f.process,p=f.setImmediate,d=f.clearImmediate,v=f.MessageChannel,h=f.Dispatch,y=0,m={},b="onreadystatechange",w=function(){var t=+this;if(m.hasOwnProperty(t)){var n=m[t];delete m[t],n()}},g=function(t){w.call(t.data)};p&&d||(p=function(t){for(var n=[],e=1;arguments.length>e;)n.push(arguments[e++]);return m[++y]=function(){u("function"==typeof t?t:Function(t),n)},r(y),y},d=function(t){delete m[t]},"process"==e(10)(l)?r=function(t){l.nextTick(c(w,t,1))}:h&&h.now?r=function(t){h.now(c(w,t,1))}:v?(i=(o=new v).port2,o.port1.onmessage=g,r=c(i.postMessage,i,1)):f.addEventListener&&"function"==typeof postMessage&&!f.importScripts?(r=function(t){f.postMessage(t+"","*")},f.addEventListener("message",g,!1)):r=b in s("script")?function(t){a.appendChild(s("script"))[b]=function(){a.removeChild(this),w.call(t)}}:function(t){setTimeout(c(w,t,1),0)}),t.exports={set:p,clear:d}},function(t,n){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,n,e){var r=e(2),o=e(6),i=e(23);t.exports=function(t,n){if(r(t),o(n)&&n.constructor===t)return n;var e=i.f(t);return(0,e.resolve)(n),e.promise}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.L2Dwidget=void 0;var r,o=function(){function t(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(n,e,r){return e&&t(n.prototype,e),r&&t(n,r),n}}(),i=e(39),c=(r=i,r&&r.__esModule?r:{default:r}),u=e(38);var a=void 0,s=new(function(){function t(){!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,t),this.eventHandlers={},this.config=u.config}return o(t,[{key:"on",value:function(t,n){if("function"!=typeof n)throw new TypeError("Event handler is not a function.");return this.eventHandlers[t]||(this.eventHandlers[t]=[]),this.eventHandlers[t].push(n),this}},{key:"emit",value:function(t){for(var n=arguments.length,e=Array(n>1?n-1:0),r=1;r<n;r++)e[r-1]=arguments[r];return this.eventHandlers[t]&&this.eventHandlers[t].forEach(function(t){"function"==typeof t&&t.apply(void 0,e)}),this.eventHandlers["*"]&&this.eventHandlers["*"].forEach(function(n){"function"==typeof n&&n.apply(void 0,[t].concat(e))}),this}},{key:"init",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(0,u.configApplyer)(n),this.emit("config",this.config),!u.config.mobile.show&&c.default.mobile()||e.e(0).then(e.bind(null,76)).then(function(n){(a=n).theRealInit(t)}).catch(function(t){console.error(t)})}},{key:"captureFrame",value:function(t){return a.captureFrame(t)}},{key:"downloadFrame",value:function(){this.captureFrame(function(t){var n=document.createElement("a");document.body.appendChild(n),n.setAttribute("type","hidden"),n.href=t,n.download="live2d.png",n.click()})}}]),t}());n.L2Dwidget=s},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.config=n.configApplyer=void 0;var r=i(e(74)),o=i(e(75));function i(t){return t&&t.__esModule?t:{default:t}}var c={};n.configApplyer=function(t){(0,o.default)(c,t,r.default)},n.config=c},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=window.device,i={},c=[];window.device=i;var u=window.document.documentElement,a=window.navigator.userAgent.toLowerCase(),s=["googletv","viera","smarttv","internet.tv","netcast","nettv","appletv","boxee","kylo","roku","dlnadoc","roku","pov_tv","hbbtv","ce-html"];i.macos=function(){return f("mac")},i.ios=function(){return i.iphone()||i.ipod()||i.ipad()},i.iphone=function(){return!i.windows()&&f("iphone")},i.ipod=function(){return f("ipod")},i.ipad=function(){return f("ipad")},i.android=function(){return!i.windows()&&f("android")},i.androidPhone=function(){return i.android()&&f("mobile")},i.androidTablet=function(){return i.android()&&!f("mobile")},i.blackberry=function(){return f("blackberry")||f("bb10")||f("rim")},i.blackberryPhone=function(){return i.blackberry()&&!f("tablet")},i.blackberryTablet=function(){return i.blackberry()&&f("tablet")},i.windows=function(){return f("windows")},i.windowsPhone=function(){return i.windows()&&f("phone")},i.windowsTablet=function(){return i.windows()&&f("touch")&&!i.windowsPhone()},i.fxos=function(){return(f("(mobile")||f("(tablet"))&&f(" rv:")},i.fxosPhone=function(){return i.fxos()&&f("mobile")},i.fxosTablet=function(){return i.fxos()&&f("tablet")},i.meego=function(){return f("meego")},i.cordova=function(){return window.cordova&&"file:"===location.protocol},i.nodeWebkit=function(){return"object"===r(window.process)},i.mobile=function(){return i.androidPhone()||i.iphone()||i.ipod()||i.windowsPhone()||i.blackberryPhone()||i.fxosPhone()||i.meego()},i.tablet=function(){return i.ipad()||i.androidTablet()||i.blackberryTablet()||i.windowsTablet()||i.fxosTablet()},i.desktop=function(){return!i.tablet()&&!i.mobile()},i.television=function(){for(var t=0;t<s.length;){if(f(s[t]))return!0;t++}return!1},i.portrait=function(){return window.innerHeight/window.innerWidth>1},i.landscape=function(){return window.innerHeight/window.innerWidth<1},i.noConflict=function(){return window.device=o,this};function f(t){return-1!==a.indexOf(t)}function l(t){return u.className.match(new RegExp(t,"i"))}function p(t){var n=null;l(t)||(n=u.className.replace(/^\s+|\s+$/g,""),u.className=n+" "+t)}function d(t){l(t)&&(u.className=u.className.replace(" "+t,""))}i.ios()?i.ipad()?p("ios ipad tablet"):i.iphone()?p("ios iphone mobile"):i.ipod()&&p("ios ipod mobile"):i.macos()?p("macos desktop"):i.android()?i.androidTablet()?p("android tablet"):p("android mobile"):i.blackberry()?i.blackberryTablet()?p("blackberry tablet"):p("blackberry mobile"):i.windows()?i.windowsTablet()?p("windows tablet"):i.windowsPhone()?p("windows mobile"):p("windows desktop"):i.fxos()?i.fxosTablet()?p("fxos tablet"):p("fxos mobile"):i.meego()?p("meego mobile"):i.nodeWebkit()?p("node-webkit"):i.television()?p("television"):i.desktop()&&p("desktop"),i.cordova()&&p("cordova");function v(){i.landscape()?(d("portrait"),p("landscape"),h("landscape")):(d("landscape"),p("portrait"),h("portrait")),b()}function h(t){for(var n in c)c[n](t)}i.onChangeOrientation=function(t){"function"==typeof t&&c.push(t)};var y="resize";Object.prototype.hasOwnProperty.call(window,"onorientationchange")&&(y="onorientationchange"),window.addEventListener?window.addEventListener(y,v,!1):window.attachEvent?window.attachEvent(y,v):window[y]=v,v();function m(t){for(var n=0;n<t.length;n++)if(i[t[n]]())return t[n];return"unknown"}i.type=m(["mobile","tablet","desktop"]),i.os=m(["ios","iphone","ipad","ipod","android","blackberry","windows","fxos","meego","television"]);function b(){i.orientation=m(["portrait","landscape"])}b(),n.default=i},function(t,n,e){e(41),e(73),t.exports=e(37)},function(t,n,e){e(42),e(45),e(56),e(60),e(71),e(72),t.exports=e(4).Promise},function(t,n,e){"use strict";var r=e(15),o={};o[e(0)("toStringTag")]="z",o+""!="[object z]"&&e(5)(Object.prototype,"toString",function(){return"[object "+r(this)+"]"},!0)},function(t,n,e){t.exports=!e(7)&&!e(25)(function(){return 7!=Object.defineProperty(e(17)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(6);t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n,e){"use strict";var r=e(46)(!0);e(27)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,e=this._i;return e>=n.length?{value:void 0,done:!0}:(t=r(n,e),this._i+=t.length,{value:t,done:!1})})},function(t,n,e){var r=e(18),o=e(19);t.exports=function(t){return function(n,e){var i,c,u=String(o(n)),a=r(e),s=u.length;return a<0||a>=s?t?"":void 0:(i=u.charCodeAt(a))<55296||i>56319||a+1===s||(c=u.charCodeAt(a+1))<56320||c>57343?t?u.charAt(a):i:t?u.slice(a,a+2):c-56320+(i-55296<<10)+65536}}},function(t,n,e){"use strict";var r=e(48),o=e(26),i=e(22),c={};e(3)(c,e(0)("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=r(c,{next:o(1,e)}),i(t,n+" Iterator")}},function(t,n,e){var r=e(2),o=e(49),i=e(31),c=e(21)("IE_PROTO"),u=function(){},a="prototype",s=function(){var t,n=e(17)("iframe"),r=i.length;for(n.style.display="none",e(32).appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),s=t.F;r--;)delete s[a][i[r]];return s()};t.exports=Object.create||function(t,n){var e;return null!==t?(u[a]=r(t),e=new u,u[a]=null,e[c]=t):e=s(),void 0===n?e:o(e,n)}},function(t,n,e){var r=e(11),o=e(2),i=e(29);t.exports=e(7)?Object.defineProperties:function(t,n){o(t);for(var e,c=i(n),u=c.length,a=0;u>a;)r.f(t,e=c[a++],n[e]);return t}},function(t,n,e){var r=e(8),o=e(20),i=e(52)(!1),c=e(21)("IE_PROTO");t.exports=function(t,n){var e,u=o(t),a=0,s=[];for(e in u)e!=c&&r(u,e)&&s.push(e);for(;n.length>a;)r(u,e=n[a++])&&(~i(s,e)||s.push(e));return s}},function(t,n,e){var r=e(10);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(20),o=e(30),i=e(53);t.exports=function(t){return function(n,e,c){var u,a=r(n),s=o(a.length),f=i(c,s);if(t&&e!=e){for(;s>f;)if((u=a[f++])!=u)return!0}else for(;s>f;f++)if((t||f in a)&&a[f]===e)return t||f||0;return!t&&-1}}},function(t,n,e){var r=e(18),o=Math.max,i=Math.min;t.exports=function(t,n){return(t=r(t))<0?o(t+n,0):i(t,n)}},function(t,n,e){var r=e(8),o=e(55),i=e(21)("IE_PROTO"),c=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},function(t,n,e){var r=e(19);t.exports=function(t){return Object(r(t))}},function(t,n,e){for(var r=e(57),o=e(29),i=e(5),c=e(1),u=e(3),a=e(9),s=e(0),f=s("iterator"),l=s("toStringTag"),p=a.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},v=o(d),h=0;h<v.length;h++){var y,m=v[h],b=d[m],w=c[m],g=w&&w.prototype;if(g&&(g[f]||u(g,f,p),g[l]||u(g,l,m),a[m]=p,b))for(y in r)g[y]||i(g,y,r[y],!0)}},function(t,n,e){"use strict";var r=e(58),o=e(59),i=e(9),c=e(20);t.exports=e(27)(Array,"Array",function(t,n){this._t=c(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,e=this._i++;return!t||e>=t.length?(this._t=void 0,o(1)):o(0,"keys"==n?e:"values"==n?t[e]:[e,t[e]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,n,e){var r=e(0)("unscopables"),o=Array.prototype;void 0==o[r]&&e(3)(o,r,{}),t.exports=function(t){o[r][t]=!0}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,e){"use strict";var r,o,i,c,u=e(28),a=e(1),s=e(13),f=e(15),l=e(12),p=e(6),d=e(14),v=e(61),h=e(62),y=e(33),m=e(34).set,b=e(67)(),w=e(23),g=e(35),x=e(36),_="Promise",S=a.TypeError,k=a.process,P=a[_],j="process"==f(k),O=function(){},T=o=w.f,L=!!function(){try{var t=P.resolve(1),n=(t.constructor={})[e(0)("species")]=function(t){t(O,O)};return(j||"function"==typeof PromiseRejectionEvent)&&t.then(O)instanceof n}catch(t){}}(),E=function(t){var n;return!(!p(t)||"function"!=typeof(n=t.then))&&n},M=function(t,n){if(!t._n){t._n=!0;var e=t._c;b(function(){for(var r=t._v,o=1==t._s,i=0,c=function(n){var e,i,c=o?n.ok:n.fail,u=n.resolve,a=n.reject,s=n.domain;try{c?(o||(2==t._h&&F(t),t._h=1),!0===c?e=r:(s&&s.enter(),e=c(r),s&&s.exit()),e===n.promise?a(S("Promise-chain cycle")):(i=E(e))?i.call(e,u,a):u(e)):a(r)}catch(t){a(t)}};e.length>i;)c(e[i++]);t._c=[],t._n=!1,n&&!t._h&&A(t)})}},A=function(t){m.call(a,function(){var n,e,r,o=t._v,i=C(t);if(i&&(n=g(function(){j?k.emit("unhandledRejection",o,t):(e=a.onunhandledrejection)?e({promise:t,reason:o}):(r=a.console)&&r.error&&r.error("Unhandled promise rejection",o)}),t._h=j||C(t)?2:1),t._a=void 0,i&&n.e)throw n.v})},C=function(t){return 1!==t._h&&0===(t._a||t._c).length},F=function(t){m.call(a,function(){var n;j?k.emit("rejectionHandled",t):(n=a.onrejectionhandled)&&n({promise:t,reason:t._v})})},N=function(t){var n=this;n._d||(n._d=!0,(n=n._w||n)._v=t,n._s=2,n._a||(n._a=n._c.slice()),M(n,!0))},R=function(t){var n,e=this;if(!e._d){e._d=!0,e=e._w||e;try{if(e===t)throw S("Promise can't be resolved itself");(n=E(t))?b(function(){var r={_w:e,_d:!1};try{n.call(t,s(R,r,1),s(N,r,1))}catch(t){N.call(r,t)}}):(e._v=t,e._s=1,M(e,!1))}catch(t){N.call({_w:e,_d:!1},t)}}};L||(P=function(t){v(this,P,_,"_h"),d(t),r.call(this);try{t(s(R,this,1),s(N,this,1))}catch(t){N.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=e(68)(P.prototype,{then:function(t,n){var e=T(y(this,P));return e.ok="function"!=typeof t||t,e.fail="function"==typeof n&&n,e.domain=j?k.domain:void 0,this._c.push(e),this._a&&this._a.push(e),this._s&&M(this,!1),e.promise},catch:function(t){return this.then(void 0,t)}}),i=function(){var t=new r;this.promise=t,this.resolve=s(R,t,1),this.reject=s(N,t,1)},w.f=T=function(t){return t===P||t===c?new i(t):o(t)}),l(l.G+l.W+l.F*!L,{Promise:P}),e(22)(P,_),e(69)(_),c=e(4)[_],l(l.S+l.F*!L,_,{reject:function(t){var n=T(this);return(0,n.reject)(t),n.promise}}),l(l.S+l.F*(u||!L),_,{resolve:function(t){return x(u&&this===c?P:this,t)}}),l(l.S+l.F*!(L&&e(70)(function(t){P.all(t).catch(O)})),_,{all:function(t){var n=this,e=T(n),r=e.resolve,o=e.reject,i=g(function(){var e=[],i=0,c=1;h(t,!1,function(t){var u=i++,a=!1;e.push(void 0),c++,n.resolve(t).then(function(t){a||(a=!0,e[u]=t,--c||r(e))},o)}),--c||r(e)});return i.e&&o(i.v),e.promise},race:function(t){var n=this,e=T(n),r=e.reject,o=g(function(){h(t,!1,function(t){n.resolve(t).then(e.resolve,r)})});return o.e&&r(o.v),e.promise}})},function(t,n){t.exports=function(t,n,e,r){if(!(t instanceof n)||void 0!==r&&r in t)throw TypeError(e+": incorrect invocation!");return t}},function(t,n,e){var r=e(13),o=e(63),i=e(64),c=e(2),u=e(30),a=e(65),s={},f={};(n=t.exports=function(t,n,e,l,p){var d,v,h,y,m=p?function(){return t}:a(t),b=r(e,l,n?2:1),w=0;if("function"!=typeof m)throw TypeError(t+" is not iterable!");if(i(m)){for(d=u(t.length);d>w;w++)if((y=n?b(c(v=t[w])[0],v[1]):b(t[w]))===s||y===f)return y}else for(h=m.call(t);!(v=h.next()).done;)if((y=o(h,b,v.value,n))===s||y===f)return y}).BREAK=s,n.RETURN=f},function(t,n,e){var r=e(2);t.exports=function(t,n,e,o){try{return o?n(r(e)[0],e[1]):n(e)}catch(n){var i=t.return;throw void 0!==i&&r(i.call(t)),n}}},function(t,n,e){var r=e(9),o=e(0)("iterator"),i=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||i[o]===t)}},function(t,n,e){var r=e(15),o=e(0)("iterator"),i=e(9);t.exports=e(4).getIteratorMethod=function(t){if(void 0!=t)return t[o]||t["@@iterator"]||i[r(t)]}},function(t,n){t.exports=function(t,n,e){var r=void 0===e;switch(n.length){case 0:return r?t():t.call(e);case 1:return r?t(n[0]):t.call(e,n[0]);case 2:return r?t(n[0],n[1]):t.call(e,n[0],n[1]);case 3:return r?t(n[0],n[1],n[2]):t.call(e,n[0],n[1],n[2]);case 4:return r?t(n[0],n[1],n[2],n[3]):t.call(e,n[0],n[1],n[2],n[3])}return t.apply(e,n)}},function(t,n,e){var r=e(1),o=e(34).set,i=r.MutationObserver||r.WebKitMutationObserver,c=r.process,u=r.Promise,a="process"==e(10)(c);t.exports=function(){var t,n,e,s=function(){var r,o;for(a&&(r=c.domain)&&r.exit();t;){o=t.fn,t=t.next;try{o()}catch(r){throw t?e():n=void 0,r}}n=void 0,r&&r.enter()};if(a)e=function(){c.nextTick(s)};else if(!i||r.navigator&&r.navigator.standalone)if(u&&u.resolve){var f=u.resolve();e=function(){f.then(s)}}else e=function(){o.call(r,s)};else{var l=!0,p=document.createTextNode("");new i(s).observe(p,{characterData:!0}),e=function(){p.data=l=!l}}return function(r){var o={fn:r,next:void 0};n&&(n.next=o),t||(t=o,e()),n=o}}},function(t,n,e){var r=e(5);t.exports=function(t,n,e){for(var o in n)r(t,o,n[o],e);return t}},function(t,n,e){"use strict";var r=e(1),o=e(11),i=e(7),c=e(0)("species");t.exports=function(t){var n=r[t];i&&n&&!n[c]&&o.f(n,c,{configurable:!0,get:function(){return this}})}},function(t,n,e){var r=e(0)("iterator"),o=!1;try{var i=[7][r]();i.return=function(){o=!0},Array.from(i,function(){throw 2})}catch(t){}t.exports=function(t,n){if(!n&&!o)return!1;var e=!1;try{var i=[7],c=i[r]();c.next=function(){return{done:e=!0}},i[r]=function(){return c},t(i)}catch(t){}return e}},function(t,n,e){"use strict";var r=e(12),o=e(4),i=e(1),c=e(33),u=e(36);r(r.P+r.R,"Promise",{finally:function(t){var n=c(this,o.Promise||i.Promise),e="function"==typeof t;return this.then(e?function(e){return u(n,t()).then(function(){return e})}:t,e?function(e){return u(n,t()).then(function(){throw e})}:t)}})},function(t,n,e){"use strict";var r=e(12),o=e(23),i=e(35);r(r.S,"Promise",{try:function(t){var n=o.f(this),e=i(t);return(e.e?n.reject:n.resolve)(e.v),n.promise}})},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});function r(){try{return document.currentScript.src}catch(n){var t=document.getElementsByTagName("script");return t[t.length-1].src}}e.p=r().replace(/[^/\\\\]+$/,""),n.getCurrentPath=r},function(t,n,e){"use strict";t.exports={model:{jsonPath:"https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json",scale:1},display:{superSample:2,width:200,height:400,position:"right",hOffset:0,vOffset:-20},mobile:{show:!0,scale:.8,motion:!0},name:{canvas:"live2dcanvas",div:"live2d-widget"},react:{opacity:1},dev:{border:!1},dialog:{enable:!1,hitokoto:!1}}},function(t,n,e){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};t.exports=function t(n,e){n=n||{};function o(n,e){for(var o in e)if(e.hasOwnProperty(o)){var i=e[o];if("__proto__"===o)continue;var c=n[o];null==c?n[o]=i:"object"===(void 0===c?"undefined":r(c))&&null!==c&&"object"===(void 0===i?"undefined":r(i))&&null!==i&&t(c,i)}}for(var i=arguments.length,c=0;c<i;){var u=arguments[c++];u&&o(n,u)}return n}}]).L2Dwidget;
+//# sourceMappingURL=L2Dwidget.min.js.map
\ No newline at end of file
diff --git a/live2dw/lib/L2Dwidget.min.js.map b/live2dw/lib/L2Dwidget.min.js.map
new file mode 100644
index 0000000000..6eca07762c
--- /dev/null
+++ b/live2dw/lib/L2Dwidget.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap 824188e1b58f8dc36f87","webpack:///./node_modules/core-js/modules/_wks.js","webpack:///./node_modules/core-js/modules/_global.js","webpack:///./node_modules/core-js/modules/_an-object.js","webpack:///./node_modules/core-js/modules/_hide.js","webpack:///./node_modules/core-js/modules/_core.js","webpack:///./node_modules/core-js/modules/_redefine.js","webpack:///./node_modules/core-js/modules/_is-object.js","webpack:///./node_modules/core-js/modules/_descriptors.js","webpack:///./node_modules/core-js/modules/_has.js","webpack:///./node_modules/core-js/modules/_iterators.js","webpack:///./node_modules/core-js/modules/_cof.js","webpack:///./node_modules/core-js/modules/_object-dp.js","webpack:///./node_modules/core-js/modules/_export.js","webpack:///./node_modules/core-js/modules/_ctx.js","webpack:///./node_modules/core-js/modules/_a-function.js","webpack:///./node_modules/core-js/modules/_classof.js","webpack:///./node_modules/core-js/modules/_uid.js","webpack:///./node_modules/core-js/modules/_dom-create.js","webpack:///./node_modules/core-js/modules/_to-integer.js","webpack:///./node_modules/core-js/modules/_defined.js","webpack:///./node_modules/core-js/modules/_to-iobject.js","webpack:///./node_modules/core-js/modules/_shared-key.js","webpack:///./node_modules/core-js/modules/_set-to-string-tag.js","webpack:///./node_modules/core-js/modules/_new-promise-capability.js","webpack:///./node_modules/core-js/modules/_shared.js","webpack:///./node_modules/core-js/modules/_fails.js","webpack:///./node_modules/core-js/modules/_property-desc.js","webpack:///./node_modules/core-js/modules/_iter-define.js","webpack:///./node_modules/core-js/modules/_library.js","webpack:///./node_modules/core-js/modules/_object-keys.js","webpack:///./node_modules/core-js/modules/_to-length.js","webpack:///./node_modules/core-js/modules/_enum-bug-keys.js","webpack:///./node_modules/core-js/modules/_html.js","webpack:///./node_modules/core-js/modules/_species-constructor.js","webpack:///./node_modules/core-js/modules/_task.js","webpack:///./node_modules/core-js/modules/_perform.js","webpack:///./node_modules/core-js/modules/_promise-resolve.js","webpack:///./src/index.js","webpack:///./src/config/configMgr.js","webpack:///./node_modules/current-device/es/index.js","webpack:///./node_modules/core-js/fn/promise.js","webpack:///./node_modules/core-js/modules/es6.object.to-string.js","webpack:///./node_modules/core-js/modules/_ie8-dom-define.js","webpack:///./node_modules/core-js/modules/_to-primitive.js","webpack:///./node_modules/core-js/modules/es6.string.iterator.js","webpack:///./node_modules/core-js/modules/_string-at.js","webpack:///./node_modules/core-js/modules/_iter-create.js","webpack:///./node_modules/core-js/modules/_object-create.js","webpack:///./node_modules/core-js/modules/_object-dps.js","webpack:///./node_modules/core-js/modules/_object-keys-internal.js","webpack:///./node_modules/core-js/modules/_iobject.js","webpack:///./node_modules/core-js/modules/_array-includes.js","webpack:///./node_modules/core-js/modules/_to-absolute-index.js","webpack:///./node_modules/core-js/modules/_object-gpo.js","webpack:///./node_modules/core-js/modules/_to-object.js","webpack:///./node_modules/core-js/modules/web.dom.iterable.js","webpack:///./node_modules/core-js/modules/es6.array.iterator.js","webpack:///./node_modules/core-js/modules/_add-to-unscopables.js","webpack:///./node_modules/core-js/modules/_iter-step.js","webpack:///./node_modules/core-js/modules/es6.promise.js","webpack:///./node_modules/core-js/modules/_an-instance.js","webpack:///./node_modules/core-js/modules/_for-of.js","webpack:///./node_modules/core-js/modules/_iter-call.js","webpack:///./node_modules/core-js/modules/_is-array-iter.js","webpack:///./node_modules/core-js/modules/core.get-iterator-method.js","webpack:///./node_modules/core-js/modules/_invoke.js","webpack:///./node_modules/core-js/modules/_microtask.js","webpack:///./node_modules/core-js/modules/_redefine-all.js","webpack:///./node_modules/core-js/modules/_set-species.js","webpack:///./node_modules/core-js/modules/_iter-detect.js","webpack:///./node_modules/core-js/modules/es7.promise.finally.js","webpack:///./node_modules/core-js/modules/es7.promise.try.js","webpack:///./src/wpPublicPath.js","webpack:///./src/config/defaultConfig.js","webpack:///./src/config/defaultsDeep.js"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","installedModules","1","__webpack_require__","exports","module","l","e","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","script","createElement","type","charset","async","timeout","nc","setAttribute","src","p","setTimeout","onScriptComplete","onerror","onload","clearTimeout","chunk","Error","undefined","appendChild","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error","s","store","uid","Symbol","USE_SYMBOL","global","Math","self","Function","__g","isObject","it","TypeError","dP","createDesc","key","value","f","core","version","__e","hide","has","SRC","TO_STRING","$toString","TPL","split","inspectSource","O","val","safe","isFunction","join","String","this","a","toString","slice","anObject","IE8_DOM_DEFINE","toPrimitive","P","Attributes","redefine","ctx","PROTOTYPE","$export","source","own","out","exp","IS_FORCED","F","IS_GLOBAL","G","IS_STATIC","S","IS_PROTO","IS_BIND","B","target","expProto","U","W","R","aFunction","fn","that","b","apply","arguments","cof","TAG","ARG","T","tryGet","callee","id","px","random","concat","is","ceil","floor","isNaN","IObject","defined","shared","def","tag","stat","C","$$resolve","$$reject","SHARED","exec","bitmap","writable","LIBRARY","Iterators","$iterCreate","setToStringTag","getPrototypeOf","ITERATOR","BUGGY","keys","VALUES","returnThis","Base","NAME","Constructor","next","DEFAULT","IS_SET","FORCED","methods","IteratorPrototype","getMethod","kind","proto","DEF_VALUES","VALUES_BUG","$native","$default","$entries","$anyNative","entries","values","$keys","enumBugKeys","toInteger","min","documentElement","SPECIES","D","constructor","defer","channel","port","invoke","html","cel","process","setTask","setImmediate","clearTask","clearImmediate","MessageChannel","Dispatch","counter","queue","ONREADYSTATECHANGE","run","listener","event","data","args","nextTick","now","port2","port1","onmessage","postMessage","addEventListener","importScripts","removeChild","set","clear","v","newPromiseCapability","x","promiseCapability","_currentDevice","_configMgr","coreApp","_","L2Dwidget","_classCallCheck","eventHandlers","config","handler","_len","Array","_key","forEach","_this","userConfig","configApplyer","emit","mobile","show","_currentDevice2","default","then","bind","theRealInit","catch","callback","captureFrame","link","body","href","download","click","currConfig","_defaultsDeep2","_defaultConfig2","__webpack_exports__","_typeof","iterator","obj","previousDevice","device","changeOrientationList","userAgent","navigator","toLowerCase","television","macos","find","ios","iphone","ipod","ipad","windows","android","androidPhone","androidTablet","blackberry","blackberryPhone","blackberryTablet","windowsPhone","windowsTablet","fxos","fxosPhone","fxosTablet","meego","cordova","location","protocol","nodeWebkit","tablet","desktop","portrait","innerHeight","innerWidth","landscape","noConflict","needle","indexOf","hasClass","className","match","RegExp","addClass","currentClassNames","replace","removeClass","handleOrientation","walkOnChangeOrientationList","setOrientationCache","newOrientation","index","onChangeOrientation","cb","orientationEvent","attachEvent","findMatch","arr","os","orientation","classof","test","valueOf","$at","iterated","_t","_i","point","done","pos","charCodeAt","charAt","create","descriptor","dPs","IE_PROTO","Empty","createDict","iframeDocument","iframe","style","display","contentWindow","open","write","lt","close","Properties","result","getKeys","defineProperties","toIObject","arrayIndexOf","names","propertyIsEnumerable","toLength","toAbsoluteIndex","IS_INCLUDES","$this","el","fromIndex","max","toObject","ObjectProto","$iterators","wks","TO_STRING_TAG","ArrayValues","DOMIterables","CSSRuleList","CSSStyleDeclaration","CSSValueList","ClientRectList","DOMRectList","DOMStringList","DOMTokenList","DataTransferItemList","FileList","HTMLAllCollection","HTMLCollection","HTMLFormElement","HTMLSelectElement","MediaList","MimeTypeArray","NamedNodeMap","NodeList","PaintRequestList","Plugin","PluginArray","SVGLengthList","SVGNumberList","SVGPathSegList","SVGPointList","SVGStringList","SVGTransformList","SourceBufferList","StyleSheetList","TextTrackCueList","TextTrackList","TouchList","collections","explicit","Collection","addToUnscopables","step","_k","Arguments","UNSCOPABLES","ArrayProto","Internal","newGenericPromiseCapability","OwnPromiseCapability","Wrapper","anInstance","forOf","speciesConstructor","task","microtask","newPromiseCapabilityModule","perform","promiseResolve","PROMISE","$Promise","isNode","empty","USE_NATIVE","FakePromise","PromiseRejectionEvent","isThenable","notify","isReject","_n","chain","_c","_v","ok","_s","reaction","fail","domain","_h","onHandleUnhandled","enter","exit","onUnhandled","unhandled","isUnhandled","onunhandledrejection","reason","_a","onrejectionhandled","$reject","_d","_w","$resolve","wrapper","executor","onFulfilled","onRejected","r","capability","iter","all","iterable","remaining","$index","alreadyCalled","race","forbiddenField","isArrayIter","getIterFn","BREAK","RETURN","iterFn","ret","getIteratorMethod","un","macrotask","Observer","MutationObserver","WebKitMutationObserver","last","flush","parent","standalone","toggle","node","createTextNode","observe","characterData","DESCRIPTORS","KEY","SAFE_CLOSING","riter","from","skipClosing","finally","onFinally","try","callbackfn","getCurrentPath","currentScript","scripts","model","jsonPath","scale","superSample","width","height","position","hOffset","vOffset","motion","canvas","div","react","opacity","dev","border","dialog","enable","hitokoto","defaultsDeep","objects","copy","current","len"],"mappings":";0BACA,IAAAA,EAAAC,OAAA,sBACAA,OAAA,+BAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAL,EAAAO,OAAoBF,IAC5BD,EAAAJ,EAAAK,GACAG,EAAAJ,IACAE,EAAAG,KAAAD,EAAAJ,GAAA,IAEAI,EAAAJ,GAAA,EAEA,IAAAD,KAAAF,EACAS,OAAAC,UAAAC,eAAAC,KAAAZ,EAAAE,KACAW,EAAAX,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAI,EAAAC,QACAD,EAAAS,OAAAT,IAMA,IAAAU,KAGAR,GACAS,EAAA,GAIA,SAAAC,EAAAf,GAGA,GAAAa,EAAAb,GACA,OAAAa,EAAAb,GAAAgB,QAGA,IAAAC,EAAAJ,EAAAb,IACAE,EAAAF,EACAkB,GAAA,EACAF,YAUA,OANAL,EAAAX,GAAAU,KAAAO,EAAAD,QAAAC,IAAAD,QAAAD,GAGAE,EAAAC,GAAA,EAGAD,EAAAD,QAyFA,OApFAD,EAAAI,EAAA,SAAAlB,GACA,IAAAmB,EAAAf,EAAAJ,GACA,OAAAmB,EACA,WAAAC,QAAA,SAAAC,GAA0CA,MAI1C,GAAAF,EACA,OAAAA,EAAA,GAIA,IAAAG,EAAA,IAAAF,QAAA,SAAAC,EAAAE,GACAJ,EAAAf,EAAAJ,IAAAqB,EAAAE,KAEAJ,EAAA,GAAAG,EAGA,IAAAE,EAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,UACAD,EAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EACAJ,EAAAK,QAAA,KAEAlB,EAAAmB,IACAN,EAAAO,aAAA,QAAApB,EAAAmB,IAEAN,EAAAQ,IAAArB,EAAAsB,EAAA,aAAApC,EAAA,UACA,IAAAgC,EAAAK,WAAAC,EAAA,MACAX,EAAAY,QAAAZ,EAAAa,OAAAF,EACA,SAAAA,IAEAX,EAAAY,QAAAZ,EAAAa,OAAA,KACAC,aAAAT,GACA,IAAAU,EAAAtC,EAAAJ,GACA,IAAA0C,IACAA,GACAA,EAAA,OAAAC,MAAA,iBAAA3C,EAAA,aAEAI,EAAAJ,QAAA4C,GAKA,OAFApB,EAAAqB,YAAAlB,GAEAL,GAIAR,EAAAgC,EAAApC,EAGAI,EAAAiC,EAAAnC,EAGAE,EAAAkC,EAAA,SAAAjC,EAAAkC,EAAAC,GACApC,EAAAqC,EAAApC,EAAAkC,IACA3C,OAAA8C,eAAArC,EAAAkC,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMApC,EAAA0C,EAAA,SAAAxC,GACA,IAAAkC,EAAAlC,KAAAyC,WACA,WAA2B,OAAAzC,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAF,EAAAkC,EAAAE,EAAA,IAAAA,GACAA,GAIApC,EAAAqC,EAAA,SAAAO,EAAAC,GAAsD,OAAArD,OAAAC,UAAAC,eAAAC,KAAAiD,EAAAC,IAGtD7C,EAAAsB,EAAA,GAGAtB,EAAA8C,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA,GAG9D/C,IAAAkD,EAAA,sBC/IA,IAAAC,EAAAnD,EAAA,GAAAA,CAAA,OACAoD,EAAApD,EAAA,IACAqD,EAAArD,EAAA,GAAAqD,OACAC,EAAA,mBAAAD,GAEAnD,EAAAD,QAAA,SAAAkC,GACA,OAAAgB,EAAAhB,KAAAgB,EAAAhB,GACAmB,GAAAD,EAAAlB,KAAAmB,EAAAD,EAAAD,GAAA,UAAAjB,MAGAgB,uBCTA,IAAAI,EAAArD,EAAAD,QAAA,oBAAApB,eAAA2E,WACA3E,OAAA,oBAAA4E,WAAAD,WAAAC,KAEAC,SAAA,cAAAA,GACA,iBAAAC,UAAAJ,oBCLA,IAAAK,EAAA5D,EAAA,GACAE,EAAAD,QAAA,SAAA4D,GACA,IAAAD,EAAAC,GAAA,MAAAC,UAAAD,EAAA,sBACA,OAAAA,oBCHA,IAAAE,EAAA/D,EAAA,IACAgE,EAAAhE,EAAA,IACAE,EAAAD,QAAAD,EAAA,YAAA4C,EAAAqB,EAAAC,GACA,OAAAH,EAAAI,EAAAvB,EAAAqB,EAAAD,EAAA,EAAAE,KACC,SAAAtB,EAAAqB,EAAAC,GAED,OADAtB,EAAAqB,GAAAC,EACAtB,kBCNA,IAAAwB,EAAAlE,EAAAD,SAA6BoE,QAAA,SAC7B,iBAAAC,UAAAF,oBCDA,IAAAb,EAAAvD,EAAA,GACAuE,EAAAvE,EAAA,GACAwE,EAAAxE,EAAA,GACAyE,EAAAzE,EAAA,GAAAA,CAAA,OACA0E,EAAA,WACAC,EAAAjB,SAAAgB,GACAE,GAAA,GAAAD,GAAAE,MAAAH,GAEA1E,EAAA,GAAA8E,cAAA,SAAAjB,GACA,OAAAc,EAAAhF,KAAAkE,KAGA3D,EAAAD,QAAA,SAAA8E,EAAAd,EAAAe,EAAAC,GACA,IAAAC,EAAA,mBAAAF,EACAE,IAAAV,EAAAQ,EAAA,SAAAT,EAAAS,EAAA,OAAAf,IACAc,EAAAd,KAAAe,IACAE,IAAAV,EAAAQ,EAAAP,IAAAF,EAAAS,EAAAP,EAAAM,EAAAd,GAAA,GAAAc,EAAAd,GAAAW,EAAAO,KAAAC,OAAAnB,MACAc,IAAAxB,EACAwB,EAAAd,GAAAe,EACGC,EAGAF,EAAAd,GACHc,EAAAd,GAAAe,EAEAT,EAAAQ,EAAAd,EAAAe,WALAD,EAAAd,GACAM,EAAAQ,EAAAd,EAAAe,OAOCtB,SAAAjE,UAAAiF,EAAA,WACD,yBAAAW,WAAAZ,IAAAE,EAAAhF,KAAA0F,uBC7BAnF,EAAAD,QAAA,SAAA4D,GACA,uBAAAA,EAAA,OAAAA,EAAA,mBAAAA,oBCAA3D,EAAAD,SAAAD,EAAA,GAAAA,CAAA,WACA,OAA0E,GAA1ER,OAAA8C,kBAAiC,KAAQG,IAAA,WAAmB,YAAc6C,mBCF1E,IAAA5F,KAAuBA,eACvBQ,EAAAD,QAAA,SAAA4D,EAAAI,GACA,OAAAvE,EAAAC,KAAAkE,EAAAI,mBCFA/D,EAAAD,0BCAA,IAAAsF,KAAiBA,SAEjBrF,EAAAD,QAAA,SAAA4D,GACA,OAAA0B,EAAA5F,KAAAkE,GAAA2B,MAAA,wBCHA,IAAAC,EAAAzF,EAAA,GACA0F,EAAA1F,EAAA,IACA2F,EAAA3F,EAAA,IACA+D,EAAAvE,OAAA8C,eAEArC,EAAAkE,EAAAnE,EAAA,GAAAR,OAAA8C,eAAA,SAAAyC,EAAAa,EAAAC,GAIA,GAHAJ,EAAAV,GACAa,EAAAD,EAAAC,GAAA,GACAH,EAAAI,GACAH,EAAA,IACA,OAAA3B,EAAAgB,EAAAa,EAAAC,GACG,MAAAzF,IACH,WAAAyF,GAAA,QAAAA,EAAA,MAAA/B,UAAA,4BAEA,MADA,UAAA+B,IAAAd,EAAAa,GAAAC,EAAA3B,OACAa,oBCdA,IAAAxB,EAAAvD,EAAA,GACAoE,EAAApE,EAAA,GACAuE,EAAAvE,EAAA,GACA8F,EAAA9F,EAAA,GACA+F,EAAA/F,EAAA,IACAgG,EAAA,YAEAC,EAAA,SAAAlF,EAAAoB,EAAA+D,GACA,IAQAjC,EAAAkC,EAAAC,EAAAC,EARAC,EAAAvF,EAAAkF,EAAAM,EACAC,EAAAzF,EAAAkF,EAAAQ,EACAC,EAAA3F,EAAAkF,EAAAU,EACAC,EAAA7F,EAAAkF,EAAAL,EACAiB,EAAA9F,EAAAkF,EAAAa,EACAC,EAAAP,EAAAjD,EAAAmD,EAAAnD,EAAApB,KAAAoB,EAAApB,QAAkFoB,EAAApB,QAAuB6D,GACzG/F,EAAAuG,EAAApC,IAAAjC,KAAAiC,EAAAjC,OACA6E,EAAA/G,EAAA+F,KAAA/F,EAAA+F,OAEAQ,IAAAN,EAAA/D,GACA,IAAA8B,KAAAiC,EAIAE,IAFAD,GAAAG,GAAAS,QAAAjF,IAAAiF,EAAA9C,IAEA8C,EAAAb,GAAAjC,GAEAoC,EAAAQ,GAAAV,EAAAJ,EAAAK,EAAA7C,GAAAqD,GAAA,mBAAAR,EAAAL,EAAArC,SAAA/D,KAAAyG,KAEAW,GAAAjB,EAAAiB,EAAA9C,EAAAmC,EAAArF,EAAAkF,EAAAgB,GAEAhH,EAAAgE,IAAAmC,GAAA7B,EAAAtE,EAAAgE,EAAAoC,GACAO,GAAAI,EAAA/C,IAAAmC,IAAAY,EAAA/C,GAAAmC,IAGA7C,EAAAa,OAEA6B,EAAAM,EAAA,EACAN,EAAAQ,EAAA,EACAR,EAAAU,EAAA,EACAV,EAAAL,EAAA,EACAK,EAAAa,EAAA,GACAb,EAAAiB,EAAA,GACAjB,EAAAgB,EAAA,GACAhB,EAAAkB,EAAA,IACAjH,EAAAD,QAAAgG,mBCzCA,IAAAmB,EAAApH,EAAA,IACAE,EAAAD,QAAA,SAAAoH,EAAAC,EAAAjI,GAEA,GADA+H,EAAAC,QACAvF,IAAAwF,EAAA,OAAAD,EACA,OAAAhI,GACA,uBAAAiG,GACA,OAAA+B,EAAA1H,KAAA2H,EAAAhC,IAEA,uBAAAA,EAAAiC,GACA,OAAAF,EAAA1H,KAAA2H,EAAAhC,EAAAiC,IAEA,uBAAAjC,EAAAiC,EAAAtF,GACA,OAAAoF,EAAA1H,KAAA2H,EAAAhC,EAAAiC,EAAAtF,IAGA,kBACA,OAAAoF,EAAAG,MAAAF,EAAAG,4BCjBAvH,EAAAD,QAAA,SAAA4D,GACA,sBAAAA,EAAA,MAAAC,UAAAD,EAAA,uBACA,OAAAA,oBCDA,IAAA6D,EAAA1H,EAAA,IACA2H,EAAA3H,EAAA,EAAAA,CAAA,eAEA4H,EAA+C,aAA/CF,EAAA,WAA2B,OAAAD,UAA3B,IASAvH,EAAAD,QAAA,SAAA4D,GACA,IAAAkB,EAAA8C,EAAAf,EACA,YAAAhF,IAAA+B,EAAA,mBAAAA,EAAA,OAEA,iBAAAgE,EAVA,SAAAhE,EAAAI,GACA,IACA,OAAAJ,EAAAI,GACG,MAAA7D,KAOH0H,CAAA/C,EAAAvF,OAAAqE,GAAA8D,IAAAE,EAEAD,EAAAF,EAAA3C,GAEA,WAAA+B,EAAAY,EAAA3C,KAAA,mBAAAA,EAAAgD,OAAA,YAAAjB,kBCrBA,IAAAkB,EAAA,EACAC,EAAAzE,KAAA0E,SACAhI,EAAAD,QAAA,SAAAgE,GACA,gBAAAkE,YAAArG,IAAAmC,EAAA,GAAAA,EAAA,QAAA+D,EAAAC,GAAA1C,SAAA,uBCHA,IAAA3B,EAAA5D,EAAA,GACAW,EAAAX,EAAA,GAAAW,SAEAyH,EAAAxE,EAAAjD,IAAAiD,EAAAjD,EAAAG,eACAZ,EAAAD,QAAA,SAAA4D,GACA,OAAAuE,EAAAzH,EAAAG,cAAA+C,sBCJA,IAAAwE,EAAA7E,KAAA6E,KACAC,EAAA9E,KAAA8E,MACApI,EAAAD,QAAA,SAAA4D,GACA,OAAA0E,MAAA1E,MAAA,GAAAA,EAAA,EAAAyE,EAAAD,GAAAxE,mBCHA3D,EAAAD,QAAA,SAAA4D,GACA,QAAA/B,GAAA+B,EAAA,MAAAC,UAAA,yBAAAD,GACA,OAAAA,oBCFA,IAAA2E,EAAAxI,EAAA,IACAyI,EAAAzI,EAAA,IACAE,EAAAD,QAAA,SAAA4D,GACA,OAAA2E,EAAAC,EAAA5E,sBCJA,IAAA6E,EAAA1I,EAAA,GAAAA,CAAA,QACAoD,EAAApD,EAAA,IACAE,EAAAD,QAAA,SAAAgE,GACA,OAAAyE,EAAAzE,KAAAyE,EAAAzE,GAAAb,EAAAa,sBCHA,IAAA0E,EAAA3I,EAAA,IAAAmE,EACAK,EAAAxE,EAAA,GACA2H,EAAA3H,EAAA,EAAAA,CAAA,eAEAE,EAAAD,QAAA,SAAA4D,EAAA+E,EAAAC,GACAhF,IAAAW,EAAAX,EAAAgF,EAAAhF,IAAApE,UAAAkI,IAAAgB,EAAA9E,EAAA8D,GAAoEpF,cAAA,EAAA2B,MAAA0E,mCCHpE,IAAAxB,EAAApH,EAAA,IAaAE,EAAAD,QAAAkE,EAAA,SAAA2E,GACA,WAZA,SAAAA,GACA,IAAAvI,EAAAE,EACA4E,KAAA7E,QAAA,IAAAsI,EAAA,SAAAC,EAAAC,GACA,QAAAlH,IAAAvB,QAAAuB,IAAArB,EAAA,MAAAqD,UAAA,2BACAvD,EAAAwI,EACAtI,EAAAuI,IAEA3D,KAAA9E,QAAA6G,EAAA7G,GACA8E,KAAA5E,OAAA2G,EAAA3G,GAIA,CAAAqI,qBChBA,IAAAvF,EAAAvD,EAAA,GACAiJ,EAAA,qBACA9F,EAAAI,EAAA0F,KAAA1F,EAAA0F,OACA/I,EAAAD,QAAA,SAAAgE,GACA,OAAAd,EAAAc,KAAAd,EAAAc,uBCJA/D,EAAAD,QAAA,SAAAiJ,GACA,IACA,QAAAA,IACG,MAAA9I,GACH,0BCJAF,EAAAD,QAAA,SAAAkJ,EAAAjF,GACA,OACA1B,aAAA,EAAA2G,GACA5G,eAAA,EAAA4G,GACAC,WAAA,EAAAD,GACAjF,wCCJA,IAAAmF,EAAArJ,EAAA,IACAiG,EAAAjG,EAAA,IACA8F,EAAA9F,EAAA,GACAuE,EAAAvE,EAAA,GACAwE,EAAAxE,EAAA,GACAsJ,EAAAtJ,EAAA,GACAuJ,EAAAvJ,EAAA,IACAwJ,EAAAxJ,EAAA,IACAyJ,EAAAzJ,EAAA,IACA0J,EAAA1J,EAAA,EAAAA,CAAA,YACA2J,OAAAC,MAAA,WAAAA,QAGAC,EAAA,SAEAC,EAAA,WAA8B,OAAAzE,MAE9BnF,EAAAD,QAAA,SAAA8J,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,GACAd,EAAAU,EAAAD,EAAAE,GACA,IAeAI,EAAArG,EAAAsG,EAfAC,EAAA,SAAAC,GACA,IAAAd,GAAAc,KAAAC,EAAA,OAAAA,EAAAD,GACA,OAAAA,GACA,IAVA,OAWA,KAAAZ,EAAA,kBAA6C,WAAAI,EAAA5E,KAAAoF,IACxC,kBAA4B,WAAAR,EAAA5E,KAAAoF,KAEjC9C,EAAAqC,EAAA,YACAW,EAAAR,GAAAN,EACAe,GAAA,EACAF,EAAAX,EAAAtK,UACAoL,EAAAH,EAAAhB,IAAAgB,EAnBA,eAmBAP,GAAAO,EAAAP,GACAW,GAAAnB,GAAAkB,GAAAL,EAAAL,GACAY,EAAAZ,EAAAQ,EAAAH,EAAA,WAAAM,OAAAhJ,EACAkJ,EAAA,SAAAhB,EAAAU,EAAAO,SAAAJ,IAwBA,GArBAG,IACAT,EAAAd,EAAAuB,EAAArL,KAAA,IAAAoK,OACAvK,OAAAC,WAAA8K,EAAAL,OAEAV,EAAAe,EAAA5C,GAAA,GAEA0B,GAAA7E,EAAA+F,EAAAb,IAAAnF,EAAAgG,EAAAb,EAAAI,IAIAa,GAAAE,KAAA1I,OAAA0H,IACAe,GAAA,EACAE,EAAA,WAAkC,OAAAD,EAAAlL,KAAA0F,QAGlCgE,IAAAgB,IAAAV,IAAAiB,GAAAF,EAAAhB,IACAnF,EAAAmG,EAAAhB,EAAAoB,GAGAxB,EAAAU,GAAAc,EACAxB,EAAA3B,GAAAmC,EACAK,EAMA,GALAG,GACAY,OAAAP,EAAAG,EAAAN,EAAAX,GACAD,KAAAQ,EAAAU,EAAAN,EAhDA,QAiDAS,QAAAF,GAEAV,EAAA,IAAApG,KAAAqG,EACArG,KAAAyG,GAAA5E,EAAA4E,EAAAzG,EAAAqG,EAAArG,SACKgC,IAAAL,EAAAK,EAAAM,GAAAoD,GAAAiB,GAAAZ,EAAAM,GAEL,OAAAA,kBCpEApK,EAAAD,SAAA,mBCCA,IAAAkL,EAAAnL,EAAA,IACAoL,EAAApL,EAAA,IAEAE,EAAAD,QAAAT,OAAAoK,MAAA,SAAA7E,GACA,OAAAoG,EAAApG,EAAAqG,qBCJA,IAAAC,EAAArL,EAAA,IACAsL,EAAA9H,KAAA8H,IACApL,EAAAD,QAAA,SAAA4D,GACA,OAAAA,EAAA,EAAAyH,EAAAD,EAAAxH,GAAA,oCCHA3D,EAAAD,QAAA,gGAEA4E,MAAA,sBCHA,IAAAlE,EAAAX,EAAA,GAAAW,SACAT,EAAAD,QAAAU,KAAA4K,iCCAA,IAAA9F,EAAAzF,EAAA,GACAoH,EAAApH,EAAA,IACAwL,EAAAxL,EAAA,EAAAA,CAAA,WACAE,EAAAD,QAAA,SAAA8E,EAAA0G,GACA,IACA9E,EADAmC,EAAArD,EAAAV,GAAA2G,YAEA,YAAA5J,IAAAgH,QAAAhH,IAAA6E,EAAAlB,EAAAqD,GAAA0C,IAAAC,EAAArE,EAAAT,qBCPA,IAaAgF,EAAAC,EAAAC,EAbA9F,EAAA/F,EAAA,IACA8L,EAAA9L,EAAA,IACA+L,EAAA/L,EAAA,IACAgM,EAAAhM,EAAA,IACAuD,EAAAvD,EAAA,GACAiM,EAAA1I,EAAA0I,QACAC,EAAA3I,EAAA4I,aACAC,EAAA7I,EAAA8I,eACAC,EAAA/I,EAAA+I,eACAC,EAAAhJ,EAAAgJ,SACAC,EAAA,EACAC,KACAC,EAAA,qBAEAC,EAAA,WACA,IAAA3E,GAAA3C,KAEA,GAAAoH,EAAA/M,eAAAsI,GAAA,CACA,IAAAX,EAAAoF,EAAAzE,UACAyE,EAAAzE,GACAX,MAGAuF,EAAA,SAAAC,GACAF,EAAAhN,KAAAkN,EAAAC,OAGAZ,GAAAE,IACAF,EAAA,SAAA7E,GAGA,IAFA,IAAA0F,KACA5N,EAAA,EACAsI,UAAApI,OAAAF,GAAA4N,EAAAxN,KAAAkI,UAAAtI,MAMA,OALAsN,IAAAD,GAAA,WAEAV,EAAA,mBAAAzE,IAAA3D,SAAA2D,GAAA0F,IAEApB,EAAAa,GACAA,GAEAJ,EAAA,SAAApE,UACAyE,EAAAzE,IAGA,WAAAhI,EAAA,GAAAA,CAAAiM,GACAN,EAAA,SAAA3D,GACAiE,EAAAe,SAAAjH,EAAA4G,EAAA3E,EAAA,KAGGuE,KAAAU,IACHtB,EAAA,SAAA3D,GACAuE,EAAAU,IAAAlH,EAAA4G,EAAA3E,EAAA,KAGGsE,GAEHT,GADAD,EAAA,IAAAU,GACAY,MACAtB,EAAAuB,MAAAC,UAAAR,EACAjB,EAAA5F,EAAA8F,EAAAwB,YAAAxB,EAAA,IAGGtI,EAAA+J,kBAAA,mBAAAD,cAAA9J,EAAAgK,eACH5B,EAAA,SAAA3D,GACAzE,EAAA8J,YAAArF,EAAA,SAEAzE,EAAA+J,iBAAA,UAAAV,GAAA,IAGAjB,EADGe,KAAAV,EAAA,UACH,SAAAhE,GACA+D,EAAAhK,YAAAiK,EAAA,WAAAU,GAAA,WACAX,EAAAyB,YAAAnI,MACAsH,EAAAhN,KAAAqI,KAKA,SAAAA,GACAzG,WAAAwE,EAAA4G,EAAA3E,EAAA,QAIA9H,EAAAD,SACAwN,IAAAvB,EACAwB,MAAAtB,kBClFAlM,EAAAD,QAAA,SAAAiJ,GACA,IACA,OAAY9I,GAAA,EAAAuN,EAAAzE,KACT,MAAA9I,GACH,OAAYA,GAAA,EAAAuN,EAAAvN,sBCJZ,IAAAqF,EAAAzF,EAAA,GACA4D,EAAA5D,EAAA,GACA4N,EAAA5N,EAAA,IAEAE,EAAAD,QAAA,SAAA6I,EAAA+E,GAEA,GADApI,EAAAqD,GACAlF,EAAAiK,MAAAnC,cAAA5C,EAAA,OAAA+E,EACA,IAAAC,EAAAF,EAAAzJ,EAAA2E,GAGA,OADAvI,EADAuN,EAAAvN,SACAsN,GACAC,EAAAtN,sWCGAuN,EAAA/N,EAAA,0CACAgO,EAAAhO,EAAA,IAMA,IAAIiO,SA4GAC,EAAI,eArGN,SAAAC,iGAAcC,CAAA/I,KAAA8I,GACZ9I,KAAKgJ,iBACLhJ,KAAKiJ,OAALN,EAAAM,4CAGCnM,EAAMoM,GACP,GAAuB,mBAAZA,EACT,MAAM,IAAIzK,UAAU,oCAMtB,OAJKuB,KAAKgJ,cAAclM,KACtBkD,KAAKgJ,cAAclM,OAErBkD,KAAKgJ,cAAclM,GAAM5C,KAAKgP,GACvBlJ,kCAGJlD,GAAe,QAAAqM,EAAA/G,UAAApI,OAAN0N,EAAM0B,MAAAD,EAAA,EAAAA,EAAA,KAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAN3B,EAAM2B,EAAA,GAAAjH,UAAAiH,GAelB,OAdMrJ,KAAKgJ,cAAclM,IACvBkD,KAAKgJ,cAAclM,GAAMwM,QAAQ,SAAAJ,GACR,mBAAZA,GACTA,eAAWxB,KAIX1H,KAAKgJ,cAAc,MACvBhJ,KAAKgJ,cAAc,KAAKM,QAAQ,SAAAJ,GACP,mBAAZA,GACTA,gBAAQpM,GAARgG,OAAiB4E,MAIhB1H,oCAyBY,IAAAuJ,EAAAvJ,KAAhBwJ,EAAgBpH,UAAApI,OAAA,QAAAyC,IAAA2F,UAAA,GAAAA,UAAA,OACnB,EAAAuG,EAAAc,eAAcD,GACdxJ,KAAK0J,KAAK,SAAU1J,KAAKiJ,SACpBN,EAAAM,OAAOU,OAAOC,MAAQC,EAAAC,QAAOH,UAGlChP,EAAAI,EAAA,GAAAgP,KAAApP,EAAAqP,KAAA,UAAiDD,KAAK,SAAAjL,IACpD8J,EAAU9J,GACFmL,YAARV,KACCW,MAAM,SAAAxM,GACPC,QAAQC,MAAMF,0CAWLyM,GACX,OAAOvB,EAAQwB,aAAaD,2CAS5BnK,KAAKoK,aACH,SAASrP,GACP,IAAIsP,EAAO/O,SAASG,cAAc,KAClCH,SAASgP,KAAK5N,YAAY2N,GAC1BA,EAAKtO,aAAa,OAAQ,UAC1BsO,EAAKE,KAAOxP,EACZsP,EAAKG,SAAW,aAChBH,EAAKI,sBAUN3B,UAALD,iHC1HF,QAAAlO,EAAA,SACAA,EAAA,wDAOA,IAAI+P,OAgBFjB,cARF,SAAuBD,IAErB,EAAAmB,EAAAb,SAAaY,EAAYlB,EAAzBoB,EAAAd,YAOcb,OAAdyB,gCClCFvQ,OAAA8C,eAAA4N,EAAA,cAAAhM,OAAA,QAAAiM,EAAA,mBAAA9M,QAAA,iBAAAA,OAAA+M,SAAA,SAAAC,GAAoG,cAAAA,GAAqB,SAAAA,GAAmB,OAAAA,GAAA,mBAAAhN,QAAAgN,EAAA3E,cAAArI,QAAAgN,IAAAhN,OAAA5D,UAAA,gBAAA4Q,GAG5IC,EAAAzR,OAAA0R,OAEAA,KAEAC,KAGA3R,OAAA0R,SAGA,IAAAhF,EAAA1M,OAAA8B,SAAA4K,gBAIAkF,EAAA5R,OAAA6R,UAAAD,UAAAE,cAGAC,GAAA,0IAKAL,EAAAM,MAAA,WACA,OAAAC,EAAA,QAGAP,EAAAQ,IAAA,WACA,OAAAR,EAAAS,UAAAT,EAAAU,QAAAV,EAAAW,QAGAX,EAAAS,OAAA,WACA,OAAAT,EAAAY,WAAAL,EAAA,WAGAP,EAAAU,KAAA,WACA,OAAAH,EAAA,SAGAP,EAAAW,KAAA,WACA,OAAAJ,EAAA,SAGAP,EAAAa,QAAA,WACA,OAAAb,EAAAY,WAAAL,EAAA,YAGAP,EAAAc,aAAA,WACA,OAAAd,EAAAa,WAAAN,EAAA,WAGAP,EAAAe,cAAA,WACA,OAAAf,EAAAa,YAAAN,EAAA,WAGAP,EAAAgB,WAAA,WACA,OAAAT,EAAA,eAAAA,EAAA,SAAAA,EAAA,QAGAP,EAAAiB,gBAAA,WACA,OAAAjB,EAAAgB,eAAAT,EAAA,WAGAP,EAAAkB,iBAAA,WACA,OAAAlB,EAAAgB,cAAAT,EAAA,WAGAP,EAAAY,QAAA,WACA,OAAAL,EAAA,YAGAP,EAAAmB,aAAA,WACA,OAAAnB,EAAAY,WAAAL,EAAA,UAGAP,EAAAoB,cAAA,WACA,OAAApB,EAAAY,WAAAL,EAAA,WAAAP,EAAAmB,gBAGAnB,EAAAqB,KAAA,WACA,OAAAd,EAAA,YAAAA,EAAA,aAAAA,EAAA,SAGAP,EAAAsB,UAAA,WACA,OAAAtB,EAAAqB,QAAAd,EAAA,WAGAP,EAAAuB,WAAA,WACA,OAAAvB,EAAAqB,QAAAd,EAAA,WAGAP,EAAAwB,MAAA,WACA,OAAAjB,EAAA,UAGAP,EAAAyB,QAAA,WACA,OAAAnT,OAAAmT,SAAA,UAAAC,SAAAC,UAGA3B,EAAA4B,WAAA,WACA,iBAAAhC,EAAAtR,OAAAoN,UAGAsE,EAAAvB,OAAA,WACA,OAAAuB,EAAAc,gBAAAd,EAAAS,UAAAT,EAAAU,QAAAV,EAAAmB,gBAAAnB,EAAAiB,mBAAAjB,EAAAsB,aAAAtB,EAAAwB,SAGAxB,EAAA6B,OAAA,WACA,OAAA7B,EAAAW,QAAAX,EAAAe,iBAAAf,EAAAkB,oBAAAlB,EAAAoB,iBAAApB,EAAAuB,cAGAvB,EAAA8B,QAAA,WACA,OAAA9B,EAAA6B,WAAA7B,EAAAvB,UAGAuB,EAAAK,WAAA,WAEA,IADA,IAAAzR,EAAA,EACAA,EAAAyR,EAAAvR,QAAA,CACA,GAAAyR,EAAAF,EAAAzR,IACA,SAEAA,IAEA,UAGAoR,EAAA+B,SAAA,WACA,OAAAzT,OAAA0T,YAAA1T,OAAA2T,WAAA,GAGAjC,EAAAkC,UAAA,WACA,OAAA5T,OAAA0T,YAAA1T,OAAA2T,WAAA,GAQAjC,EAAAmC,WAAA,WAEA,OADA7T,OAAA0R,OAAAD,EACAjL,MAOA,SAAAyL,EAAA6B,GACA,WAAAlC,EAAAmC,QAAAD,GAIA,SAAAE,EAAAC,GACA,OAAAvH,EAAAuH,UAAAC,MAAA,IAAAC,OAAAF,EAAA,MAIA,SAAAG,EAAAH,GACA,IAAAI,EAAA,KACAL,EAAAC,KACAI,EAAA3H,EAAAuH,UAAAK,QAAA,iBACA5H,EAAAuH,UAAAI,EAAA,IAAAJ,GAKA,SAAAM,EAAAN,GACAD,EAAAC,KACAvH,EAAAuH,UAAAvH,EAAAuH,UAAAK,QAAA,IAAAL,EAAA,KASAvC,EAAAQ,MACAR,EAAAW,OACA+B,EAAA,mBACG1C,EAAAS,SACHiC,EAAA,qBACG1C,EAAAU,QACHgC,EAAA,mBAEC1C,EAAAM,QACDoC,EAAA,iBACC1C,EAAAa,UACDb,EAAAe,gBACA2B,EAAA,kBAEAA,EAAA,kBAEC1C,EAAAgB,aACDhB,EAAAkB,mBACAwB,EAAA,qBAEAA,EAAA,qBAEC1C,EAAAY,UACDZ,EAAAoB,gBACAsB,EAAA,kBACG1C,EAAAmB,eACHuB,EAAA,kBAEAA,EAAA,mBAEC1C,EAAAqB,OACDrB,EAAAuB,aACAmB,EAAA,eAEAA,EAAA,eAEC1C,EAAAwB,QACDkB,EAAA,gBACC1C,EAAA4B,aACDc,EAAA,eACC1C,EAAAK,aACDqC,EAAA,cACC1C,EAAA8B,WACDY,EAAA,WAGA1C,EAAAyB,WACAiB,EAAA,WAOA,SAAAI,IACA9C,EAAAkC,aACAW,EAAA,YACAH,EAAA,aACAK,EAAA,eAEAF,EAAA,aACAH,EAAA,YACAK,EAAA,aAEAC,IAGA,SAAAD,EAAAE,GACA,QAAAC,KAAAjD,EACAA,EAAAiD,GAAAD,GAIAjD,EAAAmD,oBAAA,SAAAC,GACA,mBAAAA,GACAnD,EAAAjR,KAAAoU,IAMA,IAAAC,EAAA,SACApU,OAAAC,UAAAC,eAAAC,KAAAd,OAAA,yBACA+U,EAAA,uBAIA/U,OAAAyO,iBACAzO,OAAAyO,iBAAAsG,EAAAP,GAAA,GACCxU,OAAAgV,YACDhV,OAAAgV,YAAAD,EAAAP,GAEAxU,OAAA+U,GAAAP,EAGAA,IAKA,SAAAS,EAAAC,GACA,QAAA5U,EAAA,EAAiBA,EAAA4U,EAAA1U,OAAgBF,IACjC,GAAAoR,EAAAwD,EAAA5U,MACA,OAAA4U,EAAA5U,GAGA,gBAGAoR,EAAAxP,KAAA+S,GAAA,8BACAvD,EAAAyD,GAAAF,GAAA,4FAEA,SAAAP,IACAhD,EAAA0D,YAAAH,GAAA,yBAGAP,IAEArD,EAAA,wEC1SAlQ,EAAA,IACAA,EAAA,IACAA,EAAA,IACAA,EAAA,IACAA,EAAA,IACAA,EAAA,IACAE,EAAAD,QAAAD,EAAA,GAAAM,sCCJA,IAAA4T,EAAAlU,EAAA,IACAmU,KACAA,EAAAnU,EAAA,EAAAA,CAAA,oBACAmU,EAAA,kBACAnU,EAAA,EAAAA,CAAAR,OAAAC,UAAA,sBACA,iBAAAyU,EAAA7O,MAAA,MACG,oBCRHnF,EAAAD,SAAAD,EAAA,KAAAA,EAAA,GAAAA,CAAA,WACA,OAAuG,GAAvGR,OAAA8C,eAAAtC,EAAA,GAAAA,CAAA,YAAsEyC,IAAA,WAAmB,YAAc6C,qBCAvG,IAAA1B,EAAA5D,EAAA,GAGAE,EAAAD,QAAA,SAAA4D,EAAA8C,GACA,IAAA/C,EAAAC,GAAA,OAAAA,EACA,IAAAwD,EAAArC,EACA,GAAA2B,GAAA,mBAAAU,EAAAxD,EAAA0B,YAAA3B,EAAAoB,EAAAqC,EAAA1H,KAAAkE,IAAA,OAAAmB,EACA,sBAAAqC,EAAAxD,EAAAuQ,WAAAxQ,EAAAoB,EAAAqC,EAAA1H,KAAAkE,IAAA,OAAAmB,EACA,IAAA2B,GAAA,mBAAAU,EAAAxD,EAAA0B,YAAA3B,EAAAoB,EAAAqC,EAAA1H,KAAAkE,IAAA,OAAAmB,EACA,MAAAlB,UAAA,0ECTA,IAAAuQ,EAAArU,EAAA,GAAAA,EAAA,GAGAA,EAAA,GAAAA,CAAAoF,OAAA,kBAAAkP,GACAjP,KAAAkP,GAAAnP,OAAAkP,GACAjP,KAAAmP,GAAA,GAEC,WACD,IAEAC,EAFA1P,EAAAM,KAAAkP,GACAd,EAAApO,KAAAmP,GAEA,OAAAf,GAAA1O,EAAA1F,QAAiC6E,WAAApC,EAAA4S,MAAA,IACjCD,EAAAJ,EAAAtP,EAAA0O,GACApO,KAAAmP,IAAAC,EAAApV,QACU6E,MAAAuQ,EAAAC,MAAA,uBCfV,IAAArJ,EAAArL,EAAA,IACAyI,EAAAzI,EAAA,IAGAE,EAAAD,QAAA,SAAAyE,GACA,gBAAA4C,EAAAqN,GACA,IAGArP,EAAAiC,EAHArE,EAAAkC,OAAAqD,EAAAnB,IACAnI,EAAAkM,EAAAsJ,GACAxU,EAAA+C,EAAA7D,OAEA,OAAAF,EAAA,GAAAA,GAAAgB,EAAAuE,EAAA,QAAA5C,GACAwD,EAAApC,EAAA0R,WAAAzV,IACA,OAAAmG,EAAA,OAAAnG,EAAA,IAAAgB,IAAAoH,EAAArE,EAAA0R,WAAAzV,EAAA,WAAAoI,EAAA,MACA7C,EAAAxB,EAAA2R,OAAA1V,GAAAmG,EACAZ,EAAAxB,EAAAsC,MAAArG,IAAA,GAAAoI,EAAA,OAAAjC,EAAA,iDCbA,IAAAwP,EAAA9U,EAAA,IACA+U,EAAA/U,EAAA,IACAwJ,EAAAxJ,EAAA,IACAuK,KAGAvK,EAAA,EAAAA,CAAAuK,EAAAvK,EAAA,EAAAA,CAAA,uBAAkF,OAAAqF,OAElFnF,EAAAD,QAAA,SAAAgK,EAAAD,EAAAE,GACAD,EAAAxK,UAAAqV,EAAAvK,GAAqDL,KAAA6K,EAAA,EAAA7K,KACrDV,EAAAS,EAAAD,EAAA,+BCVA,IAAAvE,EAAAzF,EAAA,GACAgV,EAAAhV,EAAA,IACAoL,EAAApL,EAAA,IACAiV,EAAAjV,EAAA,GAAAA,CAAA,YACAkV,EAAA,aACAlP,EAAA,YAGAmP,EAAA,WAEA,IAIAC,EAJAC,EAAArV,EAAA,GAAAA,CAAA,UACAb,EAAAiM,EAAA/L,OAcA,IAVAgW,EAAAC,MAAAC,QAAA,OACAvV,EAAA,IAAA+B,YAAAsT,GACAA,EAAAhU,IAAA,eAGA+T,EAAAC,EAAAG,cAAA7U,UACA8U,OACAL,EAAAM,MAAAC,uCACAP,EAAAQ,QACAT,EAAAC,EAAA7O,EACApH,YAAAgW,EAAAnP,GAAAoF,EAAAjM,IACA,OAAAgW,KAGAjV,EAAAD,QAAAT,OAAAsV,QAAA,SAAA/P,EAAA8Q,GACA,IAAAC,EAQA,OAPA,OAAA/Q,GACAmQ,EAAAlP,GAAAP,EAAAV,GACA+Q,EAAA,IAAAZ,EACAA,EAAAlP,GAAA,KAEA8P,EAAAb,GAAAlQ,GACG+Q,EAAAX,SACHrT,IAAA+T,EAAAC,EAAAd,EAAAc,EAAAD,qBCvCA,IAAA9R,EAAA/D,EAAA,IACAyF,EAAAzF,EAAA,GACA+V,EAAA/V,EAAA,IAEAE,EAAAD,QAAAD,EAAA,GAAAR,OAAAwW,iBAAA,SAAAjR,EAAA8Q,GACApQ,EAAAV,GAKA,IAJA,IAGAa,EAHAgE,EAAAmM,EAAAF,GACAxW,EAAAuK,EAAAvK,OACAF,EAAA,EAEAE,EAAAF,GAAA4E,EAAAI,EAAAY,EAAAa,EAAAgE,EAAAzK,KAAA0W,EAAAjQ,IACA,OAAAb,oBCXA,IAAAP,EAAAxE,EAAA,GACAiW,EAAAjW,EAAA,IACAkW,EAAAlW,EAAA,GAAAA,EAAA,GACAiV,EAAAjV,EAAA,GAAAA,CAAA,YAEAE,EAAAD,QAAA,SAAA2C,EAAAuT,GACA,IAGAlS,EAHAc,EAAAkR,EAAArT,GACAzD,EAAA,EACA2W,KAEA,IAAA7R,KAAAc,EAAAd,GAAAgR,GAAAzQ,EAAAO,EAAAd,IAAA6R,EAAAvW,KAAA0E,GAEA,KAAAkS,EAAA9W,OAAAF,GAAAqF,EAAAO,EAAAd,EAAAkS,EAAAhX,SACA+W,EAAAJ,EAAA7R,IAAA6R,EAAAvW,KAAA0E,IAEA,OAAA6R,oBCdA,IAAApO,EAAA1H,EAAA,IAEAE,EAAAD,QAAAT,OAAA,KAAA4W,qBAAA,GAAA5W,OAAA,SAAAqE,GACA,gBAAA6D,EAAA7D,KAAAgB,MAAA,IAAArF,OAAAqE,qBCFA,IAAAoS,EAAAjW,EAAA,IACAqW,EAAArW,EAAA,IACAsW,EAAAtW,EAAA,IACAE,EAAAD,QAAA,SAAAsW,GACA,gBAAAC,EAAAC,EAAAC,GACA,IAGAxS,EAHAa,EAAAkR,EAAAO,GACAnX,EAAAgX,EAAAtR,EAAA1F,QACAoU,EAAA6C,EAAAI,EAAArX,GAIA,GAAAkX,GAAAE,MAAA,KAAApX,EAAAoU,GAGA,IAFAvP,EAAAa,EAAA0O,OAEAvP,EAAA,cAEK,KAAY7E,EAAAoU,EAAeA,IAAA,IAAA8C,GAAA9C,KAAA1O,IAChCA,EAAA0O,KAAAgD,EAAA,OAAAF,GAAA9C,GAAA,EACK,OAAA8C,IAAA,qBCpBL,IAAAlL,EAAArL,EAAA,IACA2W,EAAAnT,KAAAmT,IACArL,EAAA9H,KAAA8H,IACApL,EAAAD,QAAA,SAAAwT,EAAApU,GAEA,OADAoU,EAAApI,EAAAoI,IACA,EAAAkD,EAAAlD,EAAApU,EAAA,GAAAiM,EAAAmI,EAAApU,qBCJA,IAAAmF,EAAAxE,EAAA,GACA4W,EAAA5W,EAAA,IACAiV,EAAAjV,EAAA,GAAAA,CAAA,YACA6W,EAAArX,OAAAC,UAEAS,EAAAD,QAAAT,OAAAiK,gBAAA,SAAA1E,GAEA,OADAA,EAAA6R,EAAA7R,GACAP,EAAAO,EAAAkQ,GAAAlQ,EAAAkQ,GACA,mBAAAlQ,EAAA2G,aAAA3G,eAAA2G,YACA3G,EAAA2G,YAAAjM,UACGsF,aAAAvF,OAAAqX,EAAA,uBCVH,IAAApO,EAAAzI,EAAA,IACAE,EAAAD,QAAA,SAAA4D,GACA,OAAArE,OAAAiJ,EAAA5E,sBC0CA,QA7CAiT,EAAA9W,EAAA,IACA+V,EAAA/V,EAAA,IACA8F,EAAA9F,EAAA,GACAuD,EAAAvD,EAAA,GACAuE,EAAAvE,EAAA,GACAsJ,EAAAtJ,EAAA,GACA+W,EAAA/W,EAAA,GACA0J,EAAAqN,EAAA,YACAC,EAAAD,EAAA,eACAE,EAAA3N,EAAAmF,MAEAyI,GACAC,aAAA,EACAC,qBAAA,EACAC,cAAA,EACAC,gBAAA,EACAC,aAAA,EACAC,eAAA,EACAC,cAAA,EACAC,sBAAA,EACAC,UAAA,EACAC,mBAAA,EACAC,gBAAA,EACAC,iBAAA,EACAC,mBAAA,EACAC,WAAA,EACAC,eAAA,EACAC,cAAA,EACAC,UAAA,EACAC,kBAAA,EACAC,QAAA,EACAC,aAAA,EACAC,eAAA,EACAC,eAAA,EACAC,gBAAA,EACAC,cAAA,EACAC,eAAA,EACAC,kBAAA,EACAC,kBAAA,EACAC,gBAAA,EACAC,kBAAA,EACAC,eAAA,EACAC,WAAA,GAGAC,EAAAnD,EAAAmB,GAAA/X,EAAA,EAAoDA,EAAA+Z,EAAA7Z,OAAwBF,IAAA,CAC5E,IAIA8E,EAJA+F,EAAAkP,EAAA/Z,GACAga,EAAAjC,EAAAlN,GACAoP,EAAA7V,EAAAyG,GACAU,EAAA0O,KAAA3Z,UAEA,GAAAiL,IACAA,EAAAhB,IAAAnF,EAAAmG,EAAAhB,EAAAuN,GACAvM,EAAAsM,IAAAzS,EAAAmG,EAAAsM,EAAAhN,GACAV,EAAAU,GAAAiN,EACAkC,GAAA,IAAAlV,KAAA6S,EAAApM,EAAAzG,IAAA6B,EAAA4E,EAAAzG,EAAA6S,EAAA7S,IAAA,kCCtDA,IAAAoV,EAAArZ,EAAA,IACAsZ,EAAAtZ,EAAA,IACAsJ,EAAAtJ,EAAA,GACAiW,EAAAjW,EAAA,IAMAE,EAAAD,QAAAD,EAAA,GAAAA,CAAAyO,MAAA,iBAAA6F,EAAA7J,GACApF,KAAAkP,GAAA0B,EAAA3B,GACAjP,KAAAmP,GAAA,EACAnP,KAAAkU,GAAA9O,GAEC,WACD,IAAA1F,EAAAM,KAAAkP,GACA9J,EAAApF,KAAAkU,GACA9F,EAAApO,KAAAmP,KACA,OAAAzP,GAAA0O,GAAA1O,EAAA1F,QACAgG,KAAAkP,QAAAzS,EACAwX,EAAA,IAEAA,EAAA,UAAA7O,EAAAgJ,EACA,UAAAhJ,EAAA1F,EAAA0O,IACAA,EAAA1O,EAAA0O,MACC,UAGDnK,EAAAkQ,UAAAlQ,EAAAmF,MAEA4K,EAAA,QACAA,EAAA,UACAA,EAAA,4BChCA,IAAAI,EAAAzZ,EAAA,EAAAA,CAAA,eACA0Z,EAAAjL,MAAAhP,eACAqC,GAAA4X,EAAAD,IAAAzZ,EAAA,EAAAA,CAAA0Z,EAAAD,MACAvZ,EAAAD,QAAA,SAAAgE,GACAyV,EAAAD,GAAAxV,IAAA,kBCLA/D,EAAAD,QAAA,SAAAyU,EAAAxQ,GACA,OAAUA,QAAAwQ,yCCAV,IAqBAiF,EAAAC,EAAAC,EAAAC,EArBAzQ,EAAArJ,EAAA,IACAuD,EAAAvD,EAAA,GACA+F,EAAA/F,EAAA,IACAkU,EAAAlU,EAAA,IACAiG,EAAAjG,EAAA,IACA4D,EAAA5D,EAAA,GACAoH,EAAApH,EAAA,IACA+Z,EAAA/Z,EAAA,IACAga,EAAAha,EAAA,IACAia,EAAAja,EAAA,IACAka,EAAAla,EAAA,IAAAyN,IACA0M,EAAAna,EAAA,GAAAA,GACAoa,EAAApa,EAAA,IACAqa,EAAAra,EAAA,IACAsa,EAAAta,EAAA,IACAua,EAAA,UACAzW,EAAAP,EAAAO,UACAmI,EAAA1I,EAAA0I,QACAuO,EAAAjX,EAAAgX,GACAE,EAAA,WAAAvG,EAAAjI,GACAyO,EAAA,aAEA9M,EAAAgM,EAAAQ,EAAAjW,EAEAwW,IAAA,WACA,IAEA,IAAAna,EAAAga,EAAAja,QAAA,GACAqa,GAAApa,EAAAkL,gBAA+C1L,EAAA,EAAAA,CAAA,qBAAAkJ,GAC/CA,EAAAwR,MAGA,OAAAD,GAAA,mBAAAI,wBAAAra,EAAA4O,KAAAsL,aAAAE,EACG,MAAAxa,KATH,GAaA0a,EAAA,SAAAjX,GACA,IAAAuL,EACA,SAAAxL,EAAAC,IAAA,mBAAAuL,EAAAvL,EAAAuL,WAEA2L,EAAA,SAAAva,EAAAwa,GACA,IAAAxa,EAAAya,GAAA,CACAza,EAAAya,IAAA,EACA,IAAAC,EAAA1a,EAAA2a,GACAhB,EAAA,WAgCA,IA/BA,IAAAjW,EAAA1D,EAAA4a,GACAC,EAAA,GAAA7a,EAAA8a,GACAnc,EAAA,EACAwN,EAAA,SAAA4O,GACA,IAIAzF,EAAA1G,EAJAb,EAAA8M,EAAAE,EAAAF,GAAAE,EAAAC,KACAjb,EAAAgb,EAAAhb,QACAE,EAAA8a,EAAA9a,OACAgb,EAAAF,EAAAE,OAEA,IACAlN,GACA8M,IACA,GAAA7a,EAAAkb,IAAAC,EAAAnb,GACAA,EAAAkb,GAAA,IAEA,IAAAnN,EAAAuH,EAAA5R,GAEAuX,KAAAG,QACA9F,EAAAvH,EAAArK,GACAuX,KAAAI,QAEA/F,IAAAyF,EAAA/a,QACAC,EAAAqD,EAAA,yBACWsL,EAAA0L,EAAAhF,IACX1G,EAAAzP,KAAAmW,EAAAvV,EAAAE,GACWF,EAAAuV,IACFrV,EAAAyD,GACF,MAAA9D,GACPK,EAAAL,KAGA8a,EAAA7b,OAAAF,GAAAwN,EAAAuO,EAAA/b,MACAqB,EAAA2a,MACA3a,EAAAya,IAAA,EACAD,IAAAxa,EAAAkb,IAAAI,EAAAtb,OAGAsb,EAAA,SAAAtb,GACA0Z,EAAAva,KAAA4D,EAAA,WACA,IAEAuS,EAAAvH,EAAAvL,EAFAkB,EAAA1D,EAAA4a,GACAW,EAAAC,EAAAxb,GAeA,GAbAub,IACAjG,EAAAuE,EAAA,WACAI,EACAxO,EAAA8C,KAAA,qBAAA7K,EAAA1D,IACS+N,EAAAhL,EAAA0Y,sBACT1N,GAAmB/N,UAAA0b,OAAAhY,KACVlB,EAAAO,EAAAP,YAAAC,OACTD,EAAAC,MAAA,8BAAAiB,KAIA1D,EAAAkb,GAAAjB,GAAAuB,EAAAxb,GAAA,KACKA,EAAA2b,QAAAra,EACLia,GAAAjG,EAAA1V,EAAA,MAAA0V,EAAAnI,KAGAqO,EAAA,SAAAxb,GACA,WAAAA,EAAAkb,IAAA,KAAAlb,EAAA2b,IAAA3b,EAAA2a,IAAA9b,QAEAsc,EAAA,SAAAnb,GACA0Z,EAAAva,KAAA4D,EAAA,WACA,IAAAgL,EACAkM,EACAxO,EAAA8C,KAAA,mBAAAvO,IACK+N,EAAAhL,EAAA6Y,qBACL7N,GAAe/N,UAAA0b,OAAA1b,EAAA4a,QAIfiB,EAAA,SAAAnY,GACA,IAAA1D,EAAA6E,KACA7E,EAAA8b,KACA9b,EAAA8b,IAAA,GACA9b,IAAA+b,IAAA/b,GACA4a,GAAAlX,EACA1D,EAAA8a,GAAA,EACA9a,EAAA2b,KAAA3b,EAAA2b,GAAA3b,EAAA2a,GAAA3V,SACAuV,EAAAva,GAAA,KAEAgc,EAAA,SAAAtY,GACA,IACAkL,EADA5O,EAAA6E,KAEA,IAAA7E,EAAA8b,GAAA,CACA9b,EAAA8b,IAAA,EACA9b,IAAA+b,IAAA/b,EACA,IACA,GAAAA,IAAA0D,EAAA,MAAAJ,EAAA,qCACAsL,EAAA0L,EAAA5W,IACAiW,EAAA,WACA,IAAAsC,GAAuBF,GAAA/b,EAAA8b,IAAA,GACvB,IACAlN,EAAAzP,KAAAuE,EAAA6B,EAAAyW,EAAAC,EAAA,GAAA1W,EAAAsW,EAAAI,EAAA,IACS,MAAArc,GACTic,EAAA1c,KAAA8c,EAAArc,OAIAI,EAAA4a,GAAAlX,EACA1D,EAAA8a,GAAA,EACAP,EAAAva,GAAA,IAEG,MAAAJ,GACHic,EAAA1c,MAAkB4c,GAAA/b,EAAA8b,IAAA,GAAyBlc,MAK3Cua,IAEAH,EAAA,SAAAkC,GACA3C,EAAA1U,KAAAmV,EAAAD,EAAA,MACAnT,EAAAsV,GACA/C,EAAAha,KAAA0F,MACA,IACAqX,EAAA3W,EAAAyW,EAAAnX,KAAA,GAAAU,EAAAsW,EAAAhX,KAAA,IACK,MAAAtC,GACLsZ,EAAA1c,KAAA0F,KAAAtC,MAIA4W,EAAA,SAAA+C,GACArX,KAAA8V,MACA9V,KAAA8W,QAAAra,EACAuD,KAAAiW,GAAA,EACAjW,KAAAiX,IAAA,EACAjX,KAAA+V,QAAAtZ,EACAuD,KAAAqW,GAAA,EACArW,KAAA4V,IAAA,IAEAxb,UAAAO,EAAA,GAAAA,CAAAwa,EAAA/a,WAEA2P,KAAA,SAAAuN,EAAAC,GACA,IAAArB,EAAA3N,EAAAqM,EAAA5U,KAAAmV,IAOA,OANAe,EAAAF,GAAA,mBAAAsB,KACApB,EAAAC,KAAA,mBAAAoB,KACArB,EAAAE,OAAAhB,EAAAxO,EAAAwP,YAAA3Z,EACAuD,KAAA8V,GAAA5b,KAAAgc,GACAlW,KAAA8W,IAAA9W,KAAA8W,GAAA5c,KAAAgc,GACAlW,KAAAiW,IAAAP,EAAA1V,MAAA,GACAkW,EAAA/a,SAGA+O,MAAA,SAAAqN,GACA,OAAAvX,KAAA+J,UAAAtN,EAAA8a,MAGA/C,EAAA,WACA,IAAArZ,EAAA,IAAAmZ,EACAtU,KAAA7E,UACA6E,KAAA9E,QAAAwF,EAAAyW,EAAAhc,EAAA,GACA6E,KAAA5E,OAAAsF,EAAAsW,EAAA7b,EAAA,IAEA4Z,EAAAjW,EAAAyJ,EAAA,SAAA9E,GACA,OAAAA,IAAA0R,GAAA1R,IAAAgR,EACA,IAAAD,EAAA/Q,GACA8Q,EAAA9Q,KAIA7C,IAAAQ,EAAAR,EAAAiB,EAAAjB,EAAAM,GAAAoU,GAA0Dra,QAAAka,IAC1Dxa,EAAA,GAAAA,CAAAwa,EAAAD,GACAva,EAAA,GAAAA,CAAAua,GACAT,EAAA9Z,EAAA,GAAAua,GAGAtU,IAAAU,EAAAV,EAAAM,GAAAoU,EAAAJ,GAEA9Z,OAAA,SAAAoc,GACA,IAAAC,EAAAlP,EAAAvI,MAGA,OADA2D,EADA8T,EAAArc,QACAoc,GACAC,EAAAtc,WAGAyF,IAAAU,EAAAV,EAAAM,GAAA8C,IAAAsR,GAAAJ,GAEAha,QAAA,SAAAsN,GACA,OAAAyM,EAAAjR,GAAAhE,OAAAyU,EAAAU,EAAAnV,KAAAwI,MAGA5H,IAAAU,EAAAV,EAAAM,IAAAoU,GAAA3a,EAAA,GAAAA,CAAA,SAAA+c,GACAvC,EAAAwC,IAAAD,GAAA,MAAArC,MACCH,GAEDyC,IAAA,SAAAC,GACA,IAAAnU,EAAAzD,KACAyX,EAAAlP,EAAA9E,GACAvI,EAAAuc,EAAAvc,QACAE,EAAAqc,EAAArc,OACAqV,EAAAuE,EAAA,WACA,IAAAnP,KACAuI,EAAA,EACAyJ,EAAA,EACAlD,EAAAiD,GAAA,WAAAzc,GACA,IAAA2c,EAAA1J,IACA2J,GAAA,EACAlS,EAAA3L,UAAAuC,GACAob,IACApU,EAAAvI,QAAAC,GAAA4O,KAAA,SAAAlL,GACAkZ,IACAA,GAAA,EACAlS,EAAAiS,GAAAjZ,IACAgZ,GAAA3c,EAAA2K,KACSzK,OAETyc,GAAA3c,EAAA2K,KAGA,OADA4K,EAAA1V,GAAAK,EAAAqV,EAAAnI,GACAmP,EAAAtc,SAGA6c,KAAA,SAAAJ,GACA,IAAAnU,EAAAzD,KACAyX,EAAAlP,EAAA9E,GACArI,EAAAqc,EAAArc,OACAqV,EAAAuE,EAAA,WACAL,EAAAiD,GAAA,WAAAzc,GACAsI,EAAAvI,QAAAC,GAAA4O,KAAA0N,EAAAvc,QAAAE,OAIA,OADAqV,EAAA1V,GAAAK,EAAAqV,EAAAnI,GACAmP,EAAAtc,0BC9QAN,EAAAD,QAAA,SAAA4D,EAAAoG,EAAA9H,EAAAmb,GACA,KAAAzZ,aAAAoG,SAAAnI,IAAAwb,QAAAzZ,EACA,MAAAC,UAAA3B,EAAA,2BACG,OAAA0B,oBCHH,IAAAkC,EAAA/F,EAAA,IACAL,EAAAK,EAAA,IACAud,EAAAvd,EAAA,IACAyF,EAAAzF,EAAA,GACAqW,EAAArW,EAAA,IACAwd,EAAAxd,EAAA,IACAyd,KACAC,MACAzd,EAAAC,EAAAD,QAAA,SAAAgd,EAAAhS,EAAA5D,EAAAC,EAAAoC,GACA,IAGArK,EAAAia,EAAAlJ,EAAA0F,EAHA6H,EAAAjU,EAAA,WAAuC,OAAAuT,GAAmBO,EAAAP,GAC1D9Y,EAAA4B,EAAAsB,EAAAC,EAAA2D,EAAA,KACAwI,EAAA,EAEA,sBAAAkK,EAAA,MAAA7Z,UAAAmZ,EAAA,qBAEA,GAAAM,EAAAI,IAAA,IAAAte,EAAAgX,EAAA4G,EAAA5d,QAAmEA,EAAAoU,EAAgBA,IAEnF,IADAqC,EAAA7K,EAAA9G,EAAAsB,EAAA6T,EAAA2D,EAAAxJ,IAAA,GAAA6F,EAAA,IAAAnV,EAAA8Y,EAAAxJ,OACAgK,GAAA3H,IAAA4H,EAAA,OAAA5H,OACG,IAAA1F,EAAAuN,EAAAhe,KAAAsd,KAA4C3D,EAAAlJ,EAAAlG,QAAAwK,MAE/C,IADAoB,EAAAnW,EAAAyQ,EAAAjM,EAAAmV,EAAApV,MAAA+G,MACAwS,GAAA3H,IAAA4H,EAAA,OAAA5H,IAGA2H,QACAxd,EAAAyd,0BCvBA,IAAAjY,EAAAzF,EAAA,GACAE,EAAAD,QAAA,SAAAmQ,EAAA/I,EAAAnD,EAAA+G,GACA,IACA,OAAAA,EAAA5D,EAAA5B,EAAAvB,GAAA,GAAAA,EAAA,IAAAmD,EAAAnD,GAEG,MAAA9D,GACH,IAAAwd,EAAAxN,EAAA,OAEA,WADAtO,IAAA8b,GAAAnY,EAAAmY,EAAAje,KAAAyQ,IACAhQ,qBCRA,IAAAkJ,EAAAtJ,EAAA,GACA0J,EAAA1J,EAAA,EAAAA,CAAA,YACA0Z,EAAAjL,MAAAhP,UAEAS,EAAAD,QAAA,SAAA4D,GACA,YAAA/B,IAAA+B,IAAAyF,EAAAmF,QAAA5K,GAAA6V,EAAAhQ,KAAA7F,qBCNA,IAAAqQ,EAAAlU,EAAA,IACA0J,EAAA1J,EAAA,EAAAA,CAAA,YACAsJ,EAAAtJ,EAAA,GACAE,EAAAD,QAAAD,EAAA,GAAA6d,kBAAA,SAAAha,GACA,QAAA/B,GAAA+B,EAAA,OAAAA,EAAA6F,IACA7F,EAAA,eACAyF,EAAA4K,EAAArQ,oBCLA3D,EAAAD,QAAA,SAAAoH,EAAA0F,EAAAzF,GACA,IAAAwW,OAAAhc,IAAAwF,EACA,OAAAyF,EAAA1N,QACA,cAAAye,EAAAzW,IACAA,EAAA1H,KAAA2H,GACA,cAAAwW,EAAAzW,EAAA0F,EAAA,IACA1F,EAAA1H,KAAA2H,EAAAyF,EAAA,IACA,cAAA+Q,EAAAzW,EAAA0F,EAAA,GAAAA,EAAA,IACA1F,EAAA1H,KAAA2H,EAAAyF,EAAA,GAAAA,EAAA,IACA,cAAA+Q,EAAAzW,EAAA0F,EAAA,GAAAA,EAAA,GAAAA,EAAA,IACA1F,EAAA1H,KAAA2H,EAAAyF,EAAA,GAAAA,EAAA,GAAAA,EAAA,IACA,cAAA+Q,EAAAzW,EAAA0F,EAAA,GAAAA,EAAA,GAAAA,EAAA,GAAAA,EAAA,IACA1F,EAAA1H,KAAA2H,EAAAyF,EAAA,GAAAA,EAAA,GAAAA,EAAA,GAAAA,EAAA,IACG,OAAA1F,EAAAG,MAAAF,EAAAyF,qBCdH,IAAAxJ,EAAAvD,EAAA,GACA+d,EAAA/d,EAAA,IAAAyN,IACAuQ,EAAAza,EAAA0a,kBAAA1a,EAAA2a,uBACAjS,EAAA1I,EAAA0I,QACA3L,EAAAiD,EAAAjD,QACAma,EAAA,WAAAza,EAAA,GAAAA,CAAAiM,GAEA/L,EAAAD,QAAA,WACA,IAAAS,EAAAyd,EAAApD,EAEAqD,EAAA,WACA,IAAAC,EAAAhX,EAEA,IADAoT,IAAA4D,EAAApS,EAAAwP,SAAA4C,EAAAxC,OACAnb,GAAA,CACA2G,EAAA3G,EAAA2G,GACA3G,IAAAwJ,KACA,IACA7C,IACO,MAAAjH,GAGP,MAFAM,EAAAqa,IACAoD,OAAArc,EACA1B,GAEK+d,OAAArc,EACLuc,KAAAzC,SAIA,GAAAnB,EACAM,EAAA,WACA9O,EAAAe,SAAAoR,SAGG,IAAAJ,GAAAza,EAAAmN,WAAAnN,EAAAmN,UAAA4N,WAQA,GAAAhe,KAAAC,QAAA,CACH,IAAAC,EAAAF,EAAAC,UACAwa,EAAA,WACAva,EAAA4O,KAAAgP,SASArD,EAAA,WAEAgD,EAAApe,KAAA4D,EAAA6a,QAtBG,CACH,IAAAG,GAAA,EACAC,EAAA7d,SAAA8d,eAAA,IACA,IAAAT,EAAAI,GAAAM,QAAAF,GAAuCG,eAAA,IACvC5D,EAAA,WACAyD,EAAA1R,KAAAyR,MAqBA,gBAAAlX,GACA,IAAA6S,GAAgB7S,KAAA6C,UAAApI,GAChBqc,MAAAjU,KAAAgQ,GACAxZ,IACAA,EAAAwZ,EACAa,KACKoD,EAAAjE,qBCjEL,IAAApU,EAAA9F,EAAA,GACAE,EAAAD,QAAA,SAAA8G,EAAA1F,EAAA4D,GACA,QAAAhB,KAAA5C,EAAAyE,EAAAiB,EAAA9C,EAAA5C,EAAA4C,GAAAgB,GACA,OAAA8B,iCCFA,IAAAxD,EAAAvD,EAAA,GACA+D,EAAA/D,EAAA,IACA4e,EAAA5e,EAAA,GACAwL,EAAAxL,EAAA,EAAAA,CAAA,WAEAE,EAAAD,QAAA,SAAA4e,GACA,IAAA/V,EAAAvF,EAAAsb,GACAD,GAAA9V,MAAA0C,IAAAzH,EAAAI,EAAA2E,EAAA0C,GACAjJ,cAAA,EACAE,IAAA,WAAsB,OAAA4C,0BCVtB,IAAAqE,EAAA1J,EAAA,EAAAA,CAAA,YACA8e,GAAA,EAEA,IACA,IAAAC,GAAA,GAAArV,KACAqV,EAAA,kBAAiCD,GAAA,GAEjCrQ,MAAAuQ,KAAAD,EAAA,WAAiC,UAChC,MAAA3e,IAEDF,EAAAD,QAAA,SAAAiJ,EAAA+V,GACA,IAAAA,IAAAH,EAAA,SACA,IAAA7Z,GAAA,EACA,IACA,IAAA8O,GAAA,GACAgJ,EAAAhJ,EAAArK,KACAqT,EAAA7S,KAAA,WAA6B,OAASwK,KAAAzP,GAAA,IACtC8O,EAAArK,GAAA,WAAiC,OAAAqT,GACjC7T,EAAA6K,GACG,MAAA3T,IACH,OAAA6E,iCClBA,IAAAgB,EAAAjG,EAAA,IACAoE,EAAApE,EAAA,GACAuD,EAAAvD,EAAA,GACAia,EAAAja,EAAA,IACAsa,EAAAta,EAAA,IAEAiG,IAAAL,EAAAK,EAAAkB,EAAA,WAA2C+X,QAAA,SAAAC,GAC3C,IAAArW,EAAAmR,EAAA5U,KAAAjB,EAAA9D,SAAAiD,EAAAjD,SACA4E,EAAA,mBAAAia,EACA,OAAA9Z,KAAA+J,KACAlK,EAAA,SAAA2I,GACA,OAAAyM,EAAAxR,EAAAqW,KAAA/P,KAAA,WAA8D,OAAAvB,KACzDsR,EACLja,EAAA,SAAA9E,GACA,OAAAka,EAAAxR,EAAAqW,KAAA/P,KAAA,WAA8D,MAAAhP,KACzD+e,oCCfL,IAAAlZ,EAAAjG,EAAA,IACA4N,EAAA5N,EAAA,IACAqa,EAAAra,EAAA,IAEAiG,IAAAU,EAAA,WAA+ByY,IAAA,SAAAC,GAC/B,IAAAvR,EAAAF,EAAAzJ,EAAAkB,MACAyQ,EAAAuE,EAAAgF,GAEA,OADAvJ,EAAA1V,EAAA0N,EAAArN,OAAAqN,EAAAvN,SAAAuV,EAAAnI,GACAG,EAAAtN,0FCIA,SAAS8e,IAEP,IAQE,OAAO3e,SAAS4e,cAAcle,IAM/B,MAAMjB,GAUL,IAAIof,EAAU7e,SAASC,qBAAqB,UAC5C,OAAO4e,EAAQA,EAAQngB,OAAS,GAAGgC,KAwDvCrB,EAAAsB,EAA0Bge,IAAiBnM,QAAQ,aAAc,MAM/DmM,+CC5DFpf,EAAOD,SAjCLwf,OACEC,SAAU,iFACVC,MAAO,GAETpK,SACEqK,YAAa,EACbC,MAAO,IACPC,OAAQ,IACRC,SAAU,QACVC,QAAS,EACTC,SAAU,IAEZjR,QACEC,MAAM,EACN0Q,MAAO,GACPO,QAAQ,GAEV/d,MACEge,OAAQ,eACRC,IAAK,iBAEPC,OACEC,QAAS,GAEXC,KACEC,QAAQ,GAEVC,QACEC,QAAQ,EACRC,UAAU,kPCrCdzgB,EAAOD,QAAU,SAAS2gB,EAAa7Z,EAAQ8Z,GAC7C9Z,EAASA,MAET,SAAS+Z,EAAK/Z,EAAQga,GACpB,IAAK,IAAI9c,KAAO8c,EACd,GAAIA,EAAQrhB,eAAeuE,GAAM,CAC/B,IAAIC,EAAQ6c,EAAQ9c,GACpB,GAAY,cAARA,EACF,SAGF,IAAIe,EAAM+B,EAAO9C,GAEN,MAAPe,EACF+B,EAAO9C,GAAOC,EACU,iBAAf,IAAOc,EAAP,YAAAmL,EAAOnL,KAA4B,OAARA,GAAiC,iBAAjB,IAAOd,EAAP,YAAAiM,EAAOjM,KAAgC,OAAVA,GACjF0c,EAAa5b,EAAKd,IAO1B,IADA,IAAI8c,EAAMvZ,UAAUpI,OAAQF,EAAI,EACzBA,EAAI6hB,GAAK,CACd,IAAI3Q,EAAM5I,UAAUtI,KAChBkR,GACFyQ,EAAK/Z,EAAQsJ,GAGjB,OAAOtJ","file":"L2Dwidget.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonpL2Dwidget\"];\n \twindow[\"webpackJsonpL2Dwidget\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"L2Dwidget.\" + chunkId + \".min.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 40);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 824188e1b58f8dc36f87","var store = require('./_shared')('wks');\nvar uid = require('./_uid');\nvar Symbol = require('./_global').Symbol;\nvar USE_SYMBOL = typeof Symbol == 'function';\n\nvar $exports = module.exports = function (name) {\n  return store[name] || (store[name] =\n    USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name));\n};\n\n$exports.store = store;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_wks.js\n// module id = 0\n// module chunks = 1","// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nvar global = module.exports = typeof window != 'undefined' && window.Math == Math\n  ? window : typeof self != 'undefined' && self.Math == Math ? self\n  // eslint-disable-next-line no-new-func\n  : Function('return this')();\nif (typeof __g == 'number') __g = global; // eslint-disable-line no-undef\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_global.js\n// module id = 1\n// module chunks = 1","var isObject = require('./_is-object');\nmodule.exports = function (it) {\n  if (!isObject(it)) throw TypeError(it + ' is not an object!');\n  return it;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_an-object.js\n// module id = 2\n// module chunks = 1","var dP = require('./_object-dp');\nvar createDesc = require('./_property-desc');\nmodule.exports = require('./_descriptors') ? function (object, key, value) {\n  return dP.f(object, key, createDesc(1, value));\n} : function (object, key, value) {\n  object[key] = value;\n  return object;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_hide.js\n// module id = 3\n// module chunks = 1","var core = module.exports = { version: '2.5.3' };\nif (typeof __e == 'number') __e = core; // eslint-disable-line no-undef\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_core.js\n// module id = 4\n// module chunks = 1","var global = require('./_global');\nvar hide = require('./_hide');\nvar has = require('./_has');\nvar SRC = require('./_uid')('src');\nvar TO_STRING = 'toString';\nvar $toString = Function[TO_STRING];\nvar TPL = ('' + $toString).split(TO_STRING);\n\nrequire('./_core').inspectSource = function (it) {\n  return $toString.call(it);\n};\n\n(module.exports = function (O, key, val, safe) {\n  var isFunction = typeof val == 'function';\n  if (isFunction) has(val, 'name') || hide(val, 'name', key);\n  if (O[key] === val) return;\n  if (isFunction) has(val, SRC) || hide(val, SRC, O[key] ? '' + O[key] : TPL.join(String(key)));\n  if (O === global) {\n    O[key] = val;\n  } else if (!safe) {\n    delete O[key];\n    hide(O, key, val);\n  } else if (O[key]) {\n    O[key] = val;\n  } else {\n    hide(O, key, val);\n  }\n// add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative\n})(Function.prototype, TO_STRING, function toString() {\n  return typeof this == 'function' && this[SRC] || $toString.call(this);\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_redefine.js\n// module id = 5\n// module chunks = 1","module.exports = function (it) {\n  return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_is-object.js\n// module id = 6\n// module chunks = 1","// Thank's IE8 for his funny defineProperty\nmodule.exports = !require('./_fails')(function () {\n  return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_descriptors.js\n// module id = 7\n// module chunks = 1","var hasOwnProperty = {}.hasOwnProperty;\nmodule.exports = function (it, key) {\n  return hasOwnProperty.call(it, key);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_has.js\n// module id = 8\n// module chunks = 1","module.exports = {};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iterators.js\n// module id = 9\n// module chunks = 1","var toString = {}.toString;\n\nmodule.exports = function (it) {\n  return toString.call(it).slice(8, -1);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_cof.js\n// module id = 10\n// module chunks = 1","var anObject = require('./_an-object');\nvar IE8_DOM_DEFINE = require('./_ie8-dom-define');\nvar toPrimitive = require('./_to-primitive');\nvar dP = Object.defineProperty;\n\nexports.f = require('./_descriptors') ? Object.defineProperty : function defineProperty(O, P, Attributes) {\n  anObject(O);\n  P = toPrimitive(P, true);\n  anObject(Attributes);\n  if (IE8_DOM_DEFINE) try {\n    return dP(O, P, Attributes);\n  } catch (e) { /* empty */ }\n  if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');\n  if ('value' in Attributes) O[P] = Attributes.value;\n  return O;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-dp.js\n// module id = 11\n// module chunks = 1","var global = require('./_global');\nvar core = require('./_core');\nvar hide = require('./_hide');\nvar redefine = require('./_redefine');\nvar ctx = require('./_ctx');\nvar PROTOTYPE = 'prototype';\n\nvar $export = function (type, name, source) {\n  var IS_FORCED = type & $export.F;\n  var IS_GLOBAL = type & $export.G;\n  var IS_STATIC = type & $export.S;\n  var IS_PROTO = type & $export.P;\n  var IS_BIND = type & $export.B;\n  var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE];\n  var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});\n  var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {});\n  var key, own, out, exp;\n  if (IS_GLOBAL) source = name;\n  for (key in source) {\n    // contains in native\n    own = !IS_FORCED && target && target[key] !== undefined;\n    // export native or passed\n    out = (own ? target : source)[key];\n    // bind timers to global for call from export context\n    exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;\n    // extend global\n    if (target) redefine(target, key, out, type & $export.U);\n    // export\n    if (exports[key] != out) hide(exports, key, exp);\n    if (IS_PROTO && expProto[key] != out) expProto[key] = out;\n  }\n};\nglobal.core = core;\n// type bitmap\n$export.F = 1;   // forced\n$export.G = 2;   // global\n$export.S = 4;   // static\n$export.P = 8;   // proto\n$export.B = 16;  // bind\n$export.W = 32;  // wrap\n$export.U = 64;  // safe\n$export.R = 128; // real proto method for `library`\nmodule.exports = $export;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_export.js\n// module id = 12\n// module chunks = 1","// optional / simple context binding\nvar aFunction = require('./_a-function');\nmodule.exports = function (fn, that, length) {\n  aFunction(fn);\n  if (that === undefined) return fn;\n  switch (length) {\n    case 1: return function (a) {\n      return fn.call(that, a);\n    };\n    case 2: return function (a, b) {\n      return fn.call(that, a, b);\n    };\n    case 3: return function (a, b, c) {\n      return fn.call(that, a, b, c);\n    };\n  }\n  return function (/* ...args */) {\n    return fn.apply(that, arguments);\n  };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_ctx.js\n// module id = 13\n// module chunks = 1","module.exports = function (it) {\n  if (typeof it != 'function') throw TypeError(it + ' is not a function!');\n  return it;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_a-function.js\n// module id = 14\n// module chunks = 1","// getting tag from 19.1.3.6 Object.prototype.toString()\nvar cof = require('./_cof');\nvar TAG = require('./_wks')('toStringTag');\n// ES3 wrong here\nvar ARG = cof(function () { return arguments; }()) == 'Arguments';\n\n// fallback for IE11 Script Access Denied error\nvar tryGet = function (it, key) {\n  try {\n    return it[key];\n  } catch (e) { /* empty */ }\n};\n\nmodule.exports = function (it) {\n  var O, T, B;\n  return it === undefined ? 'Undefined' : it === null ? 'Null'\n    // @@toStringTag case\n    : typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T\n    // builtinTag case\n    : ARG ? cof(O)\n    // ES3 arguments fallback\n    : (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_classof.js\n// module id = 15\n// module chunks = 1","var id = 0;\nvar px = Math.random();\nmodule.exports = function (key) {\n  return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_uid.js\n// module id = 16\n// module chunks = 1","var isObject = require('./_is-object');\nvar document = require('./_global').document;\n// typeof document.createElement is 'object' in old IE\nvar is = isObject(document) && isObject(document.createElement);\nmodule.exports = function (it) {\n  return is ? document.createElement(it) : {};\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_dom-create.js\n// module id = 17\n// module chunks = 1","// 7.1.4 ToInteger\nvar ceil = Math.ceil;\nvar floor = Math.floor;\nmodule.exports = function (it) {\n  return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-integer.js\n// module id = 18\n// module chunks = 1","// 7.2.1 RequireObjectCoercible(argument)\nmodule.exports = function (it) {\n  if (it == undefined) throw TypeError(\"Can't call method on  \" + it);\n  return it;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_defined.js\n// module id = 19\n// module chunks = 1","// to indexed object, toObject with fallback for non-array-like ES3 strings\nvar IObject = require('./_iobject');\nvar defined = require('./_defined');\nmodule.exports = function (it) {\n  return IObject(defined(it));\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-iobject.js\n// module id = 20\n// module chunks = 1","var shared = require('./_shared')('keys');\nvar uid = require('./_uid');\nmodule.exports = function (key) {\n  return shared[key] || (shared[key] = uid(key));\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_shared-key.js\n// module id = 21\n// module chunks = 1","var def = require('./_object-dp').f;\nvar has = require('./_has');\nvar TAG = require('./_wks')('toStringTag');\n\nmodule.exports = function (it, tag, stat) {\n  if (it && !has(it = stat ? it : it.prototype, TAG)) def(it, TAG, { configurable: true, value: tag });\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_set-to-string-tag.js\n// module id = 22\n// module chunks = 1","'use strict';\n// 25.4.1.5 NewPromiseCapability(C)\nvar aFunction = require('./_a-function');\n\nfunction PromiseCapability(C) {\n  var resolve, reject;\n  this.promise = new C(function ($$resolve, $$reject) {\n    if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor');\n    resolve = $$resolve;\n    reject = $$reject;\n  });\n  this.resolve = aFunction(resolve);\n  this.reject = aFunction(reject);\n}\n\nmodule.exports.f = function (C) {\n  return new PromiseCapability(C);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_new-promise-capability.js\n// module id = 23\n// module chunks = 1","var global = require('./_global');\nvar SHARED = '__core-js_shared__';\nvar store = global[SHARED] || (global[SHARED] = {});\nmodule.exports = function (key) {\n  return store[key] || (store[key] = {});\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_shared.js\n// module id = 24\n// module chunks = 1","module.exports = function (exec) {\n  try {\n    return !!exec();\n  } catch (e) {\n    return true;\n  }\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_fails.js\n// module id = 25\n// module chunks = 1","module.exports = function (bitmap, value) {\n  return {\n    enumerable: !(bitmap & 1),\n    configurable: !(bitmap & 2),\n    writable: !(bitmap & 4),\n    value: value\n  };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_property-desc.js\n// module id = 26\n// module chunks = 1","'use strict';\nvar LIBRARY = require('./_library');\nvar $export = require('./_export');\nvar redefine = require('./_redefine');\nvar hide = require('./_hide');\nvar has = require('./_has');\nvar Iterators = require('./_iterators');\nvar $iterCreate = require('./_iter-create');\nvar setToStringTag = require('./_set-to-string-tag');\nvar getPrototypeOf = require('./_object-gpo');\nvar ITERATOR = require('./_wks')('iterator');\nvar BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`\nvar FF_ITERATOR = '@@iterator';\nvar KEYS = 'keys';\nvar VALUES = 'values';\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) {\n  $iterCreate(Constructor, NAME, next);\n  var getMethod = function (kind) {\n    if (!BUGGY && kind in proto) return proto[kind];\n    switch (kind) {\n      case KEYS: return function keys() { return new Constructor(this, kind); };\n      case VALUES: return function values() { return new Constructor(this, kind); };\n    } return function entries() { return new Constructor(this, kind); };\n  };\n  var TAG = NAME + ' Iterator';\n  var DEF_VALUES = DEFAULT == VALUES;\n  var VALUES_BUG = false;\n  var proto = Base.prototype;\n  var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT];\n  var $default = (!BUGGY && $native) || getMethod(DEFAULT);\n  var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined;\n  var $anyNative = NAME == 'Array' ? proto.entries || $native : $native;\n  var methods, key, IteratorPrototype;\n  // Fix native\n  if ($anyNative) {\n    IteratorPrototype = getPrototypeOf($anyNative.call(new Base()));\n    if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) {\n      // Set @@toStringTag to native iterators\n      setToStringTag(IteratorPrototype, TAG, true);\n      // fix for some old engines\n      if (!LIBRARY && !has(IteratorPrototype, ITERATOR)) hide(IteratorPrototype, ITERATOR, returnThis);\n    }\n  }\n  // fix Array#{values, @@iterator}.name in V8 / FF\n  if (DEF_VALUES && $native && $native.name !== VALUES) {\n    VALUES_BUG = true;\n    $default = function values() { return $native.call(this); };\n  }\n  // Define iterator\n  if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {\n    hide(proto, ITERATOR, $default);\n  }\n  // Plug for library\n  Iterators[NAME] = $default;\n  Iterators[TAG] = returnThis;\n  if (DEFAULT) {\n    methods = {\n      values: DEF_VALUES ? $default : getMethod(VALUES),\n      keys: IS_SET ? $default : getMethod(KEYS),\n      entries: $entries\n    };\n    if (FORCED) for (key in methods) {\n      if (!(key in proto)) redefine(proto, key, methods[key]);\n    } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);\n  }\n  return methods;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iter-define.js\n// module id = 27\n// module chunks = 1","module.exports = false;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_library.js\n// module id = 28\n// module chunks = 1","// 19.1.2.14 / 15.2.3.14 Object.keys(O)\nvar $keys = require('./_object-keys-internal');\nvar enumBugKeys = require('./_enum-bug-keys');\n\nmodule.exports = Object.keys || function keys(O) {\n  return $keys(O, enumBugKeys);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-keys.js\n// module id = 29\n// module chunks = 1","// 7.1.15 ToLength\nvar toInteger = require('./_to-integer');\nvar min = Math.min;\nmodule.exports = function (it) {\n  return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-length.js\n// module id = 30\n// module chunks = 1","// IE 8- don't enum bug keys\nmodule.exports = (\n  'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'\n).split(',');\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_enum-bug-keys.js\n// module id = 31\n// module chunks = 1","var document = require('./_global').document;\nmodule.exports = document && document.documentElement;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_html.js\n// module id = 32\n// module chunks = 1","// 7.3.20 SpeciesConstructor(O, defaultConstructor)\nvar anObject = require('./_an-object');\nvar aFunction = require('./_a-function');\nvar SPECIES = require('./_wks')('species');\nmodule.exports = function (O, D) {\n  var C = anObject(O).constructor;\n  var S;\n  return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? D : aFunction(S);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_species-constructor.js\n// module id = 33\n// module chunks = 1","var ctx = require('./_ctx');\nvar invoke = require('./_invoke');\nvar html = require('./_html');\nvar cel = require('./_dom-create');\nvar global = require('./_global');\nvar process = global.process;\nvar setTask = global.setImmediate;\nvar clearTask = global.clearImmediate;\nvar MessageChannel = global.MessageChannel;\nvar Dispatch = global.Dispatch;\nvar counter = 0;\nvar queue = {};\nvar ONREADYSTATECHANGE = 'onreadystatechange';\nvar defer, channel, port;\nvar run = function () {\n  var id = +this;\n  // eslint-disable-next-line no-prototype-builtins\n  if (queue.hasOwnProperty(id)) {\n    var fn = queue[id];\n    delete queue[id];\n    fn();\n  }\n};\nvar listener = function (event) {\n  run.call(event.data);\n};\n// Node.js 0.9+ & IE10+ has setImmediate, otherwise:\nif (!setTask || !clearTask) {\n  setTask = function setImmediate(fn) {\n    var args = [];\n    var i = 1;\n    while (arguments.length > i) args.push(arguments[i++]);\n    queue[++counter] = function () {\n      // eslint-disable-next-line no-new-func\n      invoke(typeof fn == 'function' ? fn : Function(fn), args);\n    };\n    defer(counter);\n    return counter;\n  };\n  clearTask = function clearImmediate(id) {\n    delete queue[id];\n  };\n  // Node.js 0.8-\n  if (require('./_cof')(process) == 'process') {\n    defer = function (id) {\n      process.nextTick(ctx(run, id, 1));\n    };\n  // Sphere (JS game engine) Dispatch API\n  } else if (Dispatch && Dispatch.now) {\n    defer = function (id) {\n      Dispatch.now(ctx(run, id, 1));\n    };\n  // Browsers with MessageChannel, includes WebWorkers\n  } else if (MessageChannel) {\n    channel = new MessageChannel();\n    port = channel.port2;\n    channel.port1.onmessage = listener;\n    defer = ctx(port.postMessage, port, 1);\n  // Browsers with postMessage, skip WebWorkers\n  // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'\n  } else if (global.addEventListener && typeof postMessage == 'function' && !global.importScripts) {\n    defer = function (id) {\n      global.postMessage(id + '', '*');\n    };\n    global.addEventListener('message', listener, false);\n  // IE8-\n  } else if (ONREADYSTATECHANGE in cel('script')) {\n    defer = function (id) {\n      html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function () {\n        html.removeChild(this);\n        run.call(id);\n      };\n    };\n  // Rest old browsers\n  } else {\n    defer = function (id) {\n      setTimeout(ctx(run, id, 1), 0);\n    };\n  }\n}\nmodule.exports = {\n  set: setTask,\n  clear: clearTask\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_task.js\n// module id = 34\n// module chunks = 1","module.exports = function (exec) {\n  try {\n    return { e: false, v: exec() };\n  } catch (e) {\n    return { e: true, v: e };\n  }\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_perform.js\n// module id = 35\n// module chunks = 1","var anObject = require('./_an-object');\nvar isObject = require('./_is-object');\nvar newPromiseCapability = require('./_new-promise-capability');\n\nmodule.exports = function (C, x) {\n  anObject(C);\n  if (isObject(x) && x.constructor === C) return x;\n  var promiseCapability = newPromiseCapability.f(C);\n  var resolve = promiseCapability.resolve;\n  resolve(x);\n  return promiseCapability.promise;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_promise-resolve.js\n// module id = 36\n// module chunks = 1","// Created by xiazeyu.\n\n////////////////////////////////////\n// Celebrate for the 3.0 version! //\n////////////////////////////////////\n\n/**\n * @description The entry point of live2d-widget.\n */\n\n\n'use strict';\n\nimport device from 'current-device';\nimport { config, configApplyer }from './config/configMgr';\n\nif (process.env.NODE_ENV === 'development'){\n  console.log('--- --- --- --- ---\\nLive2Dwidget: Hey that, notice that you are now in DEV MODE.\\n--- --- --- --- ---');\n}\n\nlet coreApp;\n/**\n * The main entry point, which is ... nothing\n */\n\nclass L2Dwidget {\n\n  constructor() {\n    this.eventHandlers = {};\n    this.config = config;\n  }\n\n  on(name, handler) {\n    if (typeof handler !== 'function') {\n      throw new TypeError('Event handler is not a function.');\n    }\n    if (!this.eventHandlers[name]) {\n      this.eventHandlers[name] = [];\n    }\n    this.eventHandlers[name].push(handler);\n    return this;\n  }\n\n  emit(name, ...args) {\n    if (!!this.eventHandlers[name]) {\n      this.eventHandlers[name].forEach(handler => {\n        if (typeof handler === 'function') {\n          handler(...args);\n        }\n      });\n    }\n    if (!!this.eventHandlers['*']) {\n      this.eventHandlers['*'].forEach(handler => {\n        if (typeof handler === 'function') {\n          handler(name, ...args);\n        }\n      });\n    }\n    return this;\n  }\n\n/**\n * The init function\n * @param {Object}   [userConfig] User's custom config 用户自定义设置\n * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径\n * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放\n * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级\n * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度\n * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度\n * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右\n * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移\n * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移\n * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示\n * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放\n * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID\n * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID\n * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度\n * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界\n * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框\n * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API\n * @return {null}\n */\n\n  init(userConfig = {}){\n    configApplyer(userConfig);\n    this.emit('config', this.config);\n    if((!config.mobile.show)&&(device.mobile())){\n      return;\n    }\n    import(/* webpackMode: 'lazy' */ './cLive2DApp').then(f => {\n      coreApp = f;\n      coreApp.theRealInit(this);\n    }).catch(err => {\n      console.error(err);\n    });\n  }\n\n\n/**\n * Capture current frame to png file {@link captureFrame}\n * @param  {Function} callback The callback function which will receive the current frame\n * @return {null}\n */\n\n  captureFrame(callback){\n    return coreApp.captureFrame(callback);\n  }\n\n/**\n * download current frame {@link L2Dwidget.captureFrame}\n * @return {null}\n */\n\n  downloadFrame(){\n    this.captureFrame(\n      function(e){\n        let link = document.createElement('a');\n        document.body.appendChild(link);\n        link.setAttribute('type', 'hidden');\n        link.href = e;\n        link.download = 'live2d.png';\n        link.click();\n      }\n    );\n  }\n\n};\n\nlet _ = new L2Dwidget();\n\nexport {\n  _ as L2Dwidget,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","// Created by xiazeyu.\n\n/**\n * @description The manager of configeration.\n */\n\n\n'use strict';\n\nimport defaultConfig from './defaultConfig';\nimport defaultsDeep from './defaultsDeep';\n\n/**\n * The container of current configs\n * @type {Object}\n */\n\nlet currConfig = {};\n\n/**\n * Apply users function, make the full settings\n * @param  {Object} [userConfig] User's custom config\n * @return {null}\n */\n\nfunction configApplyer(userConfig){\n\n  defaultsDeep(currConfig, userConfig, defaultConfig);\n  // console.log('Live2Dwidget: currConfig', currConfig);\n\n}\n\nexport {\n  configApplyer,\n  currConfig as config,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/config/configMgr.js","var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\n// Save the previous value of the device variable.\nvar previousDevice = window.device;\n\nvar device = {};\n\nvar changeOrientationList = [];\n\n// Add device as a global object.\nwindow.device = device;\n\n// The <html> element.\nvar documentElement = window.document.documentElement;\n\n// The client user agent string.\n// Lowercase, so we can use the more efficient indexOf(), instead of Regex\nvar userAgent = window.navigator.userAgent.toLowerCase();\n\n// Detectable television devices.\nvar television = ['googletv', 'viera', 'smarttv', 'internet.tv', 'netcast', 'nettv', 'appletv', 'boxee', 'kylo', 'roku', 'dlnadoc', 'roku', 'pov_tv', 'hbbtv', 'ce-html'];\n\n// Main functions\n// --------------\n\ndevice.macos = function () {\n  return find('mac');\n};\n\ndevice.ios = function () {\n  return device.iphone() || device.ipod() || device.ipad();\n};\n\ndevice.iphone = function () {\n  return !device.windows() && find('iphone');\n};\n\ndevice.ipod = function () {\n  return find('ipod');\n};\n\ndevice.ipad = function () {\n  return find('ipad');\n};\n\ndevice.android = function () {\n  return !device.windows() && find('android');\n};\n\ndevice.androidPhone = function () {\n  return device.android() && find('mobile');\n};\n\ndevice.androidTablet = function () {\n  return device.android() && !find('mobile');\n};\n\ndevice.blackberry = function () {\n  return find('blackberry') || find('bb10') || find('rim');\n};\n\ndevice.blackberryPhone = function () {\n  return device.blackberry() && !find('tablet');\n};\n\ndevice.blackberryTablet = function () {\n  return device.blackberry() && find('tablet');\n};\n\ndevice.windows = function () {\n  return find('windows');\n};\n\ndevice.windowsPhone = function () {\n  return device.windows() && find('phone');\n};\n\ndevice.windowsTablet = function () {\n  return device.windows() && find('touch') && !device.windowsPhone();\n};\n\ndevice.fxos = function () {\n  return (find('(mobile') || find('(tablet')) && find(' rv:');\n};\n\ndevice.fxosPhone = function () {\n  return device.fxos() && find('mobile');\n};\n\ndevice.fxosTablet = function () {\n  return device.fxos() && find('tablet');\n};\n\ndevice.meego = function () {\n  return find('meego');\n};\n\ndevice.cordova = function () {\n  return window.cordova && location.protocol === 'file:';\n};\n\ndevice.nodeWebkit = function () {\n  return _typeof(window.process) === 'object';\n};\n\ndevice.mobile = function () {\n  return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() || device.meego();\n};\n\ndevice.tablet = function () {\n  return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet();\n};\n\ndevice.desktop = function () {\n  return !device.tablet() && !device.mobile();\n};\n\ndevice.television = function () {\n  var i = 0;\n  while (i < television.length) {\n    if (find(television[i])) {\n      return true;\n    }\n    i++;\n  }\n  return false;\n};\n\ndevice.portrait = function () {\n  return window.innerHeight / window.innerWidth > 1;\n};\n\ndevice.landscape = function () {\n  return window.innerHeight / window.innerWidth < 1;\n};\n\n// Public Utility Functions\n// ------------------------\n\n// Run device.js in noConflict mode,\n// returning the device variable to its previous owner.\ndevice.noConflict = function () {\n  window.device = previousDevice;\n  return this;\n};\n\n// Private Utility Functions\n// -------------------------\n\n// Simple UA string search\nfunction find(needle) {\n  return userAgent.indexOf(needle) !== -1;\n}\n\n// Check if documentElement already has a given class.\nfunction hasClass(className) {\n  return documentElement.className.match(new RegExp(className, 'i'));\n}\n\n// Add one or more CSS classes to the <html> element.\nfunction addClass(className) {\n  var currentClassNames = null;\n  if (!hasClass(className)) {\n    currentClassNames = documentElement.className.replace(/^\\s+|\\s+$/g, '');\n    documentElement.className = currentClassNames + ' ' + className;\n  }\n}\n\n// Remove single CSS class from the <html> element.\nfunction removeClass(className) {\n  if (hasClass(className)) {\n    documentElement.className = documentElement.className.replace(' ' + className, '');\n  }\n}\n\n// HTML Element Handling\n// ---------------------\n\n// Insert the appropriate CSS class based on the _user_agent.\n\nif (device.ios()) {\n  if (device.ipad()) {\n    addClass('ios ipad tablet');\n  } else if (device.iphone()) {\n    addClass('ios iphone mobile');\n  } else if (device.ipod()) {\n    addClass('ios ipod mobile');\n  }\n} else if (device.macos()) {\n  addClass('macos desktop');\n} else if (device.android()) {\n  if (device.androidTablet()) {\n    addClass('android tablet');\n  } else {\n    addClass('android mobile');\n  }\n} else if (device.blackberry()) {\n  if (device.blackberryTablet()) {\n    addClass('blackberry tablet');\n  } else {\n    addClass('blackberry mobile');\n  }\n} else if (device.windows()) {\n  if (device.windowsTablet()) {\n    addClass('windows tablet');\n  } else if (device.windowsPhone()) {\n    addClass('windows mobile');\n  } else {\n    addClass('windows desktop');\n  }\n} else if (device.fxos()) {\n  if (device.fxosTablet()) {\n    addClass('fxos tablet');\n  } else {\n    addClass('fxos mobile');\n  }\n} else if (device.meego()) {\n  addClass('meego mobile');\n} else if (device.nodeWebkit()) {\n  addClass('node-webkit');\n} else if (device.television()) {\n  addClass('television');\n} else if (device.desktop()) {\n  addClass('desktop');\n}\n\nif (device.cordova()) {\n  addClass('cordova');\n}\n\n// Orientation Handling\n// --------------------\n\n// Handle device orientation changes.\nfunction handleOrientation() {\n  if (device.landscape()) {\n    removeClass('portrait');\n    addClass('landscape');\n    walkOnChangeOrientationList('landscape');\n  } else {\n    removeClass('landscape');\n    addClass('portrait');\n    walkOnChangeOrientationList('portrait');\n  }\n  setOrientationCache();\n}\n\nfunction walkOnChangeOrientationList(newOrientation) {\n  for (var index in changeOrientationList) {\n    changeOrientationList[index](newOrientation);\n  }\n}\n\ndevice.onChangeOrientation = function (cb) {\n  if (typeof cb == 'function') {\n    changeOrientationList.push(cb);\n  }\n};\n\n// Detect whether device supports orientationchange event,\n// otherwise fall back to the resize event.\nvar orientationEvent = 'resize';\nif (Object.prototype.hasOwnProperty.call(window, 'onorientationchange')) {\n  orientationEvent = 'onorientationchange';\n}\n\n// Listen for changes in orientation.\nif (window.addEventListener) {\n  window.addEventListener(orientationEvent, handleOrientation, false);\n} else if (window.attachEvent) {\n  window.attachEvent(orientationEvent, handleOrientation);\n} else {\n  window[orientationEvent] = handleOrientation;\n}\n\nhandleOrientation();\n\n// Public functions to get the current value of type, os, or orientation\n// ---------------------------------------------------------------------\n\nfunction findMatch(arr) {\n  for (var i = 0; i < arr.length; i++) {\n    if (device[arr[i]]()) {\n      return arr[i];\n    }\n  }\n  return 'unknown';\n}\n\ndevice.type = findMatch(['mobile', 'tablet', 'desktop']);\ndevice.os = findMatch(['ios', 'iphone', 'ipad', 'ipod', 'android', 'blackberry', 'windows', 'fxos', 'meego', 'television']);\n\nfunction setOrientationCache() {\n  device.orientation = findMatch(['portrait', 'landscape']);\n}\n\nsetOrientationCache();\n\nexport default device;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/current-device/es/index.js\n// module id = 39\n// module chunks = 1","require('../modules/es6.object.to-string');\nrequire('../modules/es6.string.iterator');\nrequire('../modules/web.dom.iterable');\nrequire('../modules/es6.promise');\nrequire('../modules/es7.promise.finally');\nrequire('../modules/es7.promise.try');\nmodule.exports = require('../modules/_core').Promise;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/fn/promise.js\n// module id = 41\n// module chunks = 1","'use strict';\n// 19.1.3.6 Object.prototype.toString()\nvar classof = require('./_classof');\nvar test = {};\ntest[require('./_wks')('toStringTag')] = 'z';\nif (test + '' != '[object z]') {\n  require('./_redefine')(Object.prototype, 'toString', function toString() {\n    return '[object ' + classof(this) + ']';\n  }, true);\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es6.object.to-string.js\n// module id = 42\n// module chunks = 1","module.exports = !require('./_descriptors') && !require('./_fails')(function () {\n  return Object.defineProperty(require('./_dom-create')('div'), 'a', { get: function () { return 7; } }).a != 7;\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_ie8-dom-define.js\n// module id = 43\n// module chunks = 1","// 7.1.1 ToPrimitive(input [, PreferredType])\nvar isObject = require('./_is-object');\n// instead of the ES6 spec version, we didn't implement @@toPrimitive case\n// and the second argument - flag - preferred type is a string\nmodule.exports = function (it, S) {\n  if (!isObject(it)) return it;\n  var fn, val;\n  if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;\n  if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;\n  if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;\n  throw TypeError(\"Can't convert object to primitive value\");\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-primitive.js\n// module id = 44\n// module chunks = 1","'use strict';\nvar $at = require('./_string-at')(true);\n\n// 21.1.3.27 String.prototype[@@iterator]()\nrequire('./_iter-define')(String, 'String', function (iterated) {\n  this._t = String(iterated); // target\n  this._i = 0;                // next index\n// 21.1.5.2.1 %StringIteratorPrototype%.next()\n}, function () {\n  var O = this._t;\n  var index = this._i;\n  var point;\n  if (index >= O.length) return { value: undefined, done: true };\n  point = $at(O, index);\n  this._i += point.length;\n  return { value: point, done: false };\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es6.string.iterator.js\n// module id = 45\n// module chunks = 1","var toInteger = require('./_to-integer');\nvar defined = require('./_defined');\n// true  -> String#at\n// false -> String#codePointAt\nmodule.exports = function (TO_STRING) {\n  return function (that, pos) {\n    var s = String(defined(that));\n    var i = toInteger(pos);\n    var l = s.length;\n    var a, b;\n    if (i < 0 || i >= l) return TO_STRING ? '' : undefined;\n    a = s.charCodeAt(i);\n    return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff\n      ? TO_STRING ? s.charAt(i) : a\n      : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;\n  };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_string-at.js\n// module id = 46\n// module chunks = 1","'use strict';\nvar create = require('./_object-create');\nvar descriptor = require('./_property-desc');\nvar setToStringTag = require('./_set-to-string-tag');\nvar IteratorPrototype = {};\n\n// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()\nrequire('./_hide')(IteratorPrototype, require('./_wks')('iterator'), function () { return this; });\n\nmodule.exports = function (Constructor, NAME, next) {\n  Constructor.prototype = create(IteratorPrototype, { next: descriptor(1, next) });\n  setToStringTag(Constructor, NAME + ' Iterator');\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iter-create.js\n// module id = 47\n// module chunks = 1","// 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])\nvar anObject = require('./_an-object');\nvar dPs = require('./_object-dps');\nvar enumBugKeys = require('./_enum-bug-keys');\nvar IE_PROTO = require('./_shared-key')('IE_PROTO');\nvar Empty = function () { /* empty */ };\nvar PROTOTYPE = 'prototype';\n\n// Create object with fake `null` prototype: use iframe Object with cleared prototype\nvar createDict = function () {\n  // Thrash, waste and sodomy: IE GC bug\n  var iframe = require('./_dom-create')('iframe');\n  var i = enumBugKeys.length;\n  var lt = '<';\n  var gt = '>';\n  var iframeDocument;\n  iframe.style.display = 'none';\n  require('./_html').appendChild(iframe);\n  iframe.src = 'javascript:'; // eslint-disable-line no-script-url\n  // createDict = iframe.contentWindow.Object;\n  // html.removeChild(iframe);\n  iframeDocument = iframe.contentWindow.document;\n  iframeDocument.open();\n  iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt);\n  iframeDocument.close();\n  createDict = iframeDocument.F;\n  while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]];\n  return createDict();\n};\n\nmodule.exports = Object.create || function create(O, Properties) {\n  var result;\n  if (O !== null) {\n    Empty[PROTOTYPE] = anObject(O);\n    result = new Empty();\n    Empty[PROTOTYPE] = null;\n    // add \"__proto__\" for Object.getPrototypeOf polyfill\n    result[IE_PROTO] = O;\n  } else result = createDict();\n  return Properties === undefined ? result : dPs(result, Properties);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-create.js\n// module id = 48\n// module chunks = 1","var dP = require('./_object-dp');\nvar anObject = require('./_an-object');\nvar getKeys = require('./_object-keys');\n\nmodule.exports = require('./_descriptors') ? Object.defineProperties : function defineProperties(O, Properties) {\n  anObject(O);\n  var keys = getKeys(Properties);\n  var length = keys.length;\n  var i = 0;\n  var P;\n  while (length > i) dP.f(O, P = keys[i++], Properties[P]);\n  return O;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-dps.js\n// module id = 49\n// module chunks = 1","var has = require('./_has');\nvar toIObject = require('./_to-iobject');\nvar arrayIndexOf = require('./_array-includes')(false);\nvar IE_PROTO = require('./_shared-key')('IE_PROTO');\n\nmodule.exports = function (object, names) {\n  var O = toIObject(object);\n  var i = 0;\n  var result = [];\n  var key;\n  for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key);\n  // Don't enum bug & hidden keys\n  while (names.length > i) if (has(O, key = names[i++])) {\n    ~arrayIndexOf(result, key) || result.push(key);\n  }\n  return result;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-keys-internal.js\n// module id = 50\n// module chunks = 1","// fallback for non-array-like ES3 and non-enumerable old V8 strings\nvar cof = require('./_cof');\n// eslint-disable-next-line no-prototype-builtins\nmodule.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {\n  return cof(it) == 'String' ? it.split('') : Object(it);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iobject.js\n// module id = 51\n// module chunks = 1","// false -> Array#indexOf\n// true  -> Array#includes\nvar toIObject = require('./_to-iobject');\nvar toLength = require('./_to-length');\nvar toAbsoluteIndex = require('./_to-absolute-index');\nmodule.exports = function (IS_INCLUDES) {\n  return function ($this, el, fromIndex) {\n    var O = toIObject($this);\n    var length = toLength(O.length);\n    var index = toAbsoluteIndex(fromIndex, length);\n    var value;\n    // Array#includes uses SameValueZero equality algorithm\n    // eslint-disable-next-line no-self-compare\n    if (IS_INCLUDES && el != el) while (length > index) {\n      value = O[index++];\n      // eslint-disable-next-line no-self-compare\n      if (value != value) return true;\n    // Array#indexOf ignores holes, Array#includes - not\n    } else for (;length > index; index++) if (IS_INCLUDES || index in O) {\n      if (O[index] === el) return IS_INCLUDES || index || 0;\n    } return !IS_INCLUDES && -1;\n  };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_array-includes.js\n// module id = 52\n// module chunks = 1","var toInteger = require('./_to-integer');\nvar max = Math.max;\nvar min = Math.min;\nmodule.exports = function (index, length) {\n  index = toInteger(index);\n  return index < 0 ? max(index + length, 0) : min(index, length);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-absolute-index.js\n// module id = 53\n// module chunks = 1","// 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)\nvar has = require('./_has');\nvar toObject = require('./_to-object');\nvar IE_PROTO = require('./_shared-key')('IE_PROTO');\nvar ObjectProto = Object.prototype;\n\nmodule.exports = Object.getPrototypeOf || function (O) {\n  O = toObject(O);\n  if (has(O, IE_PROTO)) return O[IE_PROTO];\n  if (typeof O.constructor == 'function' && O instanceof O.constructor) {\n    return O.constructor.prototype;\n  } return O instanceof Object ? ObjectProto : null;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_object-gpo.js\n// module id = 54\n// module chunks = 1","// 7.1.13 ToObject(argument)\nvar defined = require('./_defined');\nmodule.exports = function (it) {\n  return Object(defined(it));\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_to-object.js\n// module id = 55\n// module chunks = 1","var $iterators = require('./es6.array.iterator');\nvar getKeys = require('./_object-keys');\nvar redefine = require('./_redefine');\nvar global = require('./_global');\nvar hide = require('./_hide');\nvar Iterators = require('./_iterators');\nvar wks = require('./_wks');\nvar ITERATOR = wks('iterator');\nvar TO_STRING_TAG = wks('toStringTag');\nvar ArrayValues = Iterators.Array;\n\nvar DOMIterables = {\n  CSSRuleList: true, // TODO: Not spec compliant, should be false.\n  CSSStyleDeclaration: false,\n  CSSValueList: false,\n  ClientRectList: false,\n  DOMRectList: false,\n  DOMStringList: false,\n  DOMTokenList: true,\n  DataTransferItemList: false,\n  FileList: false,\n  HTMLAllCollection: false,\n  HTMLCollection: false,\n  HTMLFormElement: false,\n  HTMLSelectElement: false,\n  MediaList: true, // TODO: Not spec compliant, should be false.\n  MimeTypeArray: false,\n  NamedNodeMap: false,\n  NodeList: true,\n  PaintRequestList: false,\n  Plugin: false,\n  PluginArray: false,\n  SVGLengthList: false,\n  SVGNumberList: false,\n  SVGPathSegList: false,\n  SVGPointList: false,\n  SVGStringList: false,\n  SVGTransformList: false,\n  SourceBufferList: false,\n  StyleSheetList: true, // TODO: Not spec compliant, should be false.\n  TextTrackCueList: false,\n  TextTrackList: false,\n  TouchList: false\n};\n\nfor (var collections = getKeys(DOMIterables), i = 0; i < collections.length; i++) {\n  var NAME = collections[i];\n  var explicit = DOMIterables[NAME];\n  var Collection = global[NAME];\n  var proto = Collection && Collection.prototype;\n  var key;\n  if (proto) {\n    if (!proto[ITERATOR]) hide(proto, ITERATOR, ArrayValues);\n    if (!proto[TO_STRING_TAG]) hide(proto, TO_STRING_TAG, NAME);\n    Iterators[NAME] = ArrayValues;\n    if (explicit) for (key in $iterators) if (!proto[key]) redefine(proto, key, $iterators[key], true);\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/web.dom.iterable.js\n// module id = 56\n// module chunks = 1","'use strict';\nvar addToUnscopables = require('./_add-to-unscopables');\nvar step = require('./_iter-step');\nvar Iterators = require('./_iterators');\nvar toIObject = require('./_to-iobject');\n\n// 22.1.3.4 Array.prototype.entries()\n// 22.1.3.13 Array.prototype.keys()\n// 22.1.3.29 Array.prototype.values()\n// 22.1.3.30 Array.prototype[@@iterator]()\nmodule.exports = require('./_iter-define')(Array, 'Array', function (iterated, kind) {\n  this._t = toIObject(iterated); // target\n  this._i = 0;                   // next index\n  this._k = kind;                // kind\n// 22.1.5.2.1 %ArrayIteratorPrototype%.next()\n}, function () {\n  var O = this._t;\n  var kind = this._k;\n  var index = this._i++;\n  if (!O || index >= O.length) {\n    this._t = undefined;\n    return step(1);\n  }\n  if (kind == 'keys') return step(0, index);\n  if (kind == 'values') return step(0, O[index]);\n  return step(0, [index, O[index]]);\n}, 'values');\n\n// argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7)\nIterators.Arguments = Iterators.Array;\n\naddToUnscopables('keys');\naddToUnscopables('values');\naddToUnscopables('entries');\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es6.array.iterator.js\n// module id = 57\n// module chunks = 1","// 22.1.3.31 Array.prototype[@@unscopables]\nvar UNSCOPABLES = require('./_wks')('unscopables');\nvar ArrayProto = Array.prototype;\nif (ArrayProto[UNSCOPABLES] == undefined) require('./_hide')(ArrayProto, UNSCOPABLES, {});\nmodule.exports = function (key) {\n  ArrayProto[UNSCOPABLES][key] = true;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_add-to-unscopables.js\n// module id = 58\n// module chunks = 1","module.exports = function (done, value) {\n  return { value: value, done: !!done };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iter-step.js\n// module id = 59\n// module chunks = 1","'use strict';\nvar LIBRARY = require('./_library');\nvar global = require('./_global');\nvar ctx = require('./_ctx');\nvar classof = require('./_classof');\nvar $export = require('./_export');\nvar isObject = require('./_is-object');\nvar aFunction = require('./_a-function');\nvar anInstance = require('./_an-instance');\nvar forOf = require('./_for-of');\nvar speciesConstructor = require('./_species-constructor');\nvar task = require('./_task').set;\nvar microtask = require('./_microtask')();\nvar newPromiseCapabilityModule = require('./_new-promise-capability');\nvar perform = require('./_perform');\nvar promiseResolve = require('./_promise-resolve');\nvar PROMISE = 'Promise';\nvar TypeError = global.TypeError;\nvar process = global.process;\nvar $Promise = global[PROMISE];\nvar isNode = classof(process) == 'process';\nvar empty = function () { /* empty */ };\nvar Internal, newGenericPromiseCapability, OwnPromiseCapability, Wrapper;\nvar newPromiseCapability = newGenericPromiseCapability = newPromiseCapabilityModule.f;\n\nvar USE_NATIVE = !!function () {\n  try {\n    // correct subclassing with @@species support\n    var promise = $Promise.resolve(1);\n    var FakePromise = (promise.constructor = {})[require('./_wks')('species')] = function (exec) {\n      exec(empty, empty);\n    };\n    // unhandled rejections tracking support, NodeJS Promise without it fails @@species test\n    return (isNode || typeof PromiseRejectionEvent == 'function') && promise.then(empty) instanceof FakePromise;\n  } catch (e) { /* empty */ }\n}();\n\n// helpers\nvar isThenable = function (it) {\n  var then;\n  return isObject(it) && typeof (then = it.then) == 'function' ? then : false;\n};\nvar notify = function (promise, isReject) {\n  if (promise._n) return;\n  promise._n = true;\n  var chain = promise._c;\n  microtask(function () {\n    var value = promise._v;\n    var ok = promise._s == 1;\n    var i = 0;\n    var run = function (reaction) {\n      var handler = ok ? reaction.ok : reaction.fail;\n      var resolve = reaction.resolve;\n      var reject = reaction.reject;\n      var domain = reaction.domain;\n      var result, then;\n      try {\n        if (handler) {\n          if (!ok) {\n            if (promise._h == 2) onHandleUnhandled(promise);\n            promise._h = 1;\n          }\n          if (handler === true) result = value;\n          else {\n            if (domain) domain.enter();\n            result = handler(value);\n            if (domain) domain.exit();\n          }\n          if (result === reaction.promise) {\n            reject(TypeError('Promise-chain cycle'));\n          } else if (then = isThenable(result)) {\n            then.call(result, resolve, reject);\n          } else resolve(result);\n        } else reject(value);\n      } catch (e) {\n        reject(e);\n      }\n    };\n    while (chain.length > i) run(chain[i++]); // variable length - can't use forEach\n    promise._c = [];\n    promise._n = false;\n    if (isReject && !promise._h) onUnhandled(promise);\n  });\n};\nvar onUnhandled = function (promise) {\n  task.call(global, function () {\n    var value = promise._v;\n    var unhandled = isUnhandled(promise);\n    var result, handler, console;\n    if (unhandled) {\n      result = perform(function () {\n        if (isNode) {\n          process.emit('unhandledRejection', value, promise);\n        } else if (handler = global.onunhandledrejection) {\n          handler({ promise: promise, reason: value });\n        } else if ((console = global.console) && console.error) {\n          console.error('Unhandled promise rejection', value);\n        }\n      });\n      // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should\n      promise._h = isNode || isUnhandled(promise) ? 2 : 1;\n    } promise._a = undefined;\n    if (unhandled && result.e) throw result.v;\n  });\n};\nvar isUnhandled = function (promise) {\n  return promise._h !== 1 && (promise._a || promise._c).length === 0;\n};\nvar onHandleUnhandled = function (promise) {\n  task.call(global, function () {\n    var handler;\n    if (isNode) {\n      process.emit('rejectionHandled', promise);\n    } else if (handler = global.onrejectionhandled) {\n      handler({ promise: promise, reason: promise._v });\n    }\n  });\n};\nvar $reject = function (value) {\n  var promise = this;\n  if (promise._d) return;\n  promise._d = true;\n  promise = promise._w || promise; // unwrap\n  promise._v = value;\n  promise._s = 2;\n  if (!promise._a) promise._a = promise._c.slice();\n  notify(promise, true);\n};\nvar $resolve = function (value) {\n  var promise = this;\n  var then;\n  if (promise._d) return;\n  promise._d = true;\n  promise = promise._w || promise; // unwrap\n  try {\n    if (promise === value) throw TypeError(\"Promise can't be resolved itself\");\n    if (then = isThenable(value)) {\n      microtask(function () {\n        var wrapper = { _w: promise, _d: false }; // wrap\n        try {\n          then.call(value, ctx($resolve, wrapper, 1), ctx($reject, wrapper, 1));\n        } catch (e) {\n          $reject.call(wrapper, e);\n        }\n      });\n    } else {\n      promise._v = value;\n      promise._s = 1;\n      notify(promise, false);\n    }\n  } catch (e) {\n    $reject.call({ _w: promise, _d: false }, e); // wrap\n  }\n};\n\n// constructor polyfill\nif (!USE_NATIVE) {\n  // 25.4.3.1 Promise(executor)\n  $Promise = function Promise(executor) {\n    anInstance(this, $Promise, PROMISE, '_h');\n    aFunction(executor);\n    Internal.call(this);\n    try {\n      executor(ctx($resolve, this, 1), ctx($reject, this, 1));\n    } catch (err) {\n      $reject.call(this, err);\n    }\n  };\n  // eslint-disable-next-line no-unused-vars\n  Internal = function Promise(executor) {\n    this._c = [];             // <- awaiting reactions\n    this._a = undefined;      // <- checked in isUnhandled reactions\n    this._s = 0;              // <- state\n    this._d = false;          // <- done\n    this._v = undefined;      // <- value\n    this._h = 0;              // <- rejection state, 0 - default, 1 - handled, 2 - unhandled\n    this._n = false;          // <- notify\n  };\n  Internal.prototype = require('./_redefine-all')($Promise.prototype, {\n    // 25.4.5.3 Promise.prototype.then(onFulfilled, onRejected)\n    then: function then(onFulfilled, onRejected) {\n      var reaction = newPromiseCapability(speciesConstructor(this, $Promise));\n      reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;\n      reaction.fail = typeof onRejected == 'function' && onRejected;\n      reaction.domain = isNode ? process.domain : undefined;\n      this._c.push(reaction);\n      if (this._a) this._a.push(reaction);\n      if (this._s) notify(this, false);\n      return reaction.promise;\n    },\n    // 25.4.5.1 Promise.prototype.catch(onRejected)\n    'catch': function (onRejected) {\n      return this.then(undefined, onRejected);\n    }\n  });\n  OwnPromiseCapability = function () {\n    var promise = new Internal();\n    this.promise = promise;\n    this.resolve = ctx($resolve, promise, 1);\n    this.reject = ctx($reject, promise, 1);\n  };\n  newPromiseCapabilityModule.f = newPromiseCapability = function (C) {\n    return C === $Promise || C === Wrapper\n      ? new OwnPromiseCapability(C)\n      : newGenericPromiseCapability(C);\n  };\n}\n\n$export($export.G + $export.W + $export.F * !USE_NATIVE, { Promise: $Promise });\nrequire('./_set-to-string-tag')($Promise, PROMISE);\nrequire('./_set-species')(PROMISE);\nWrapper = require('./_core')[PROMISE];\n\n// statics\n$export($export.S + $export.F * !USE_NATIVE, PROMISE, {\n  // 25.4.4.5 Promise.reject(r)\n  reject: function reject(r) {\n    var capability = newPromiseCapability(this);\n    var $$reject = capability.reject;\n    $$reject(r);\n    return capability.promise;\n  }\n});\n$export($export.S + $export.F * (LIBRARY || !USE_NATIVE), PROMISE, {\n  // 25.4.4.6 Promise.resolve(x)\n  resolve: function resolve(x) {\n    return promiseResolve(LIBRARY && this === Wrapper ? $Promise : this, x);\n  }\n});\n$export($export.S + $export.F * !(USE_NATIVE && require('./_iter-detect')(function (iter) {\n  $Promise.all(iter)['catch'](empty);\n})), PROMISE, {\n  // 25.4.4.1 Promise.all(iterable)\n  all: function all(iterable) {\n    var C = this;\n    var capability = newPromiseCapability(C);\n    var resolve = capability.resolve;\n    var reject = capability.reject;\n    var result = perform(function () {\n      var values = [];\n      var index = 0;\n      var remaining = 1;\n      forOf(iterable, false, function (promise) {\n        var $index = index++;\n        var alreadyCalled = false;\n        values.push(undefined);\n        remaining++;\n        C.resolve(promise).then(function (value) {\n          if (alreadyCalled) return;\n          alreadyCalled = true;\n          values[$index] = value;\n          --remaining || resolve(values);\n        }, reject);\n      });\n      --remaining || resolve(values);\n    });\n    if (result.e) reject(result.v);\n    return capability.promise;\n  },\n  // 25.4.4.4 Promise.race(iterable)\n  race: function race(iterable) {\n    var C = this;\n    var capability = newPromiseCapability(C);\n    var reject = capability.reject;\n    var result = perform(function () {\n      forOf(iterable, false, function (promise) {\n        C.resolve(promise).then(capability.resolve, reject);\n      });\n    });\n    if (result.e) reject(result.v);\n    return capability.promise;\n  }\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es6.promise.js\n// module id = 60\n// module chunks = 1","module.exports = function (it, Constructor, name, forbiddenField) {\n  if (!(it instanceof Constructor) || (forbiddenField !== undefined && forbiddenField in it)) {\n    throw TypeError(name + ': incorrect invocation!');\n  } return it;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_an-instance.js\n// module id = 61\n// module chunks = 1","var ctx = require('./_ctx');\nvar call = require('./_iter-call');\nvar isArrayIter = require('./_is-array-iter');\nvar anObject = require('./_an-object');\nvar toLength = require('./_to-length');\nvar getIterFn = require('./core.get-iterator-method');\nvar BREAK = {};\nvar RETURN = {};\nvar exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {\n  var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable);\n  var f = ctx(fn, that, entries ? 2 : 1);\n  var index = 0;\n  var length, step, iterator, result;\n  if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');\n  // fast case for arrays with default iterator\n  if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) {\n    result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]);\n    if (result === BREAK || result === RETURN) return result;\n  } else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) {\n    result = call(iterator, f, step.value, entries);\n    if (result === BREAK || result === RETURN) return result;\n  }\n};\nexports.BREAK = BREAK;\nexports.RETURN = RETURN;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_for-of.js\n// module id = 62\n// module chunks = 1","// call something on iterator step with safe closing on error\nvar anObject = require('./_an-object');\nmodule.exports = function (iterator, fn, value, entries) {\n  try {\n    return entries ? fn(anObject(value)[0], value[1]) : fn(value);\n  // 7.4.6 IteratorClose(iterator, completion)\n  } catch (e) {\n    var ret = iterator['return'];\n    if (ret !== undefined) anObject(ret.call(iterator));\n    throw e;\n  }\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iter-call.js\n// module id = 63\n// module chunks = 1","// check on default Array iterator\nvar Iterators = require('./_iterators');\nvar ITERATOR = require('./_wks')('iterator');\nvar ArrayProto = Array.prototype;\n\nmodule.exports = function (it) {\n  return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_is-array-iter.js\n// module id = 64\n// module chunks = 1","var classof = require('./_classof');\nvar ITERATOR = require('./_wks')('iterator');\nvar Iterators = require('./_iterators');\nmodule.exports = require('./_core').getIteratorMethod = function (it) {\n  if (it != undefined) return it[ITERATOR]\n    || it['@@iterator']\n    || Iterators[classof(it)];\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/core.get-iterator-method.js\n// module id = 65\n// module chunks = 1","// fast apply, http://jsperf.lnkit.com/fast-apply/5\nmodule.exports = function (fn, args, that) {\n  var un = that === undefined;\n  switch (args.length) {\n    case 0: return un ? fn()\n                      : fn.call(that);\n    case 1: return un ? fn(args[0])\n                      : fn.call(that, args[0]);\n    case 2: return un ? fn(args[0], args[1])\n                      : fn.call(that, args[0], args[1]);\n    case 3: return un ? fn(args[0], args[1], args[2])\n                      : fn.call(that, args[0], args[1], args[2]);\n    case 4: return un ? fn(args[0], args[1], args[2], args[3])\n                      : fn.call(that, args[0], args[1], args[2], args[3]);\n  } return fn.apply(that, args);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_invoke.js\n// module id = 66\n// module chunks = 1","var global = require('./_global');\nvar macrotask = require('./_task').set;\nvar Observer = global.MutationObserver || global.WebKitMutationObserver;\nvar process = global.process;\nvar Promise = global.Promise;\nvar isNode = require('./_cof')(process) == 'process';\n\nmodule.exports = function () {\n  var head, last, notify;\n\n  var flush = function () {\n    var parent, fn;\n    if (isNode && (parent = process.domain)) parent.exit();\n    while (head) {\n      fn = head.fn;\n      head = head.next;\n      try {\n        fn();\n      } catch (e) {\n        if (head) notify();\n        else last = undefined;\n        throw e;\n      }\n    } last = undefined;\n    if (parent) parent.enter();\n  };\n\n  // Node.js\n  if (isNode) {\n    notify = function () {\n      process.nextTick(flush);\n    };\n  // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339\n  } else if (Observer && !(global.navigator && global.navigator.standalone)) {\n    var toggle = true;\n    var node = document.createTextNode('');\n    new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new\n    notify = function () {\n      node.data = toggle = !toggle;\n    };\n  // environments with maybe non-completely correct, but existent Promise\n  } else if (Promise && Promise.resolve) {\n    var promise = Promise.resolve();\n    notify = function () {\n      promise.then(flush);\n    };\n  // for other environments - macrotask based on:\n  // - setImmediate\n  // - MessageChannel\n  // - window.postMessag\n  // - onreadystatechange\n  // - setTimeout\n  } else {\n    notify = function () {\n      // strange IE + webpack dev server bug - use .call(global)\n      macrotask.call(global, flush);\n    };\n  }\n\n  return function (fn) {\n    var task = { fn: fn, next: undefined };\n    if (last) last.next = task;\n    if (!head) {\n      head = task;\n      notify();\n    } last = task;\n  };\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_microtask.js\n// module id = 67\n// module chunks = 1","var redefine = require('./_redefine');\nmodule.exports = function (target, src, safe) {\n  for (var key in src) redefine(target, key, src[key], safe);\n  return target;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_redefine-all.js\n// module id = 68\n// module chunks = 1","'use strict';\nvar global = require('./_global');\nvar dP = require('./_object-dp');\nvar DESCRIPTORS = require('./_descriptors');\nvar SPECIES = require('./_wks')('species');\n\nmodule.exports = function (KEY) {\n  var C = global[KEY];\n  if (DESCRIPTORS && C && !C[SPECIES]) dP.f(C, SPECIES, {\n    configurable: true,\n    get: function () { return this; }\n  });\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_set-species.js\n// module id = 69\n// module chunks = 1","var ITERATOR = require('./_wks')('iterator');\nvar SAFE_CLOSING = false;\n\ntry {\n  var riter = [7][ITERATOR]();\n  riter['return'] = function () { SAFE_CLOSING = true; };\n  // eslint-disable-next-line no-throw-literal\n  Array.from(riter, function () { throw 2; });\n} catch (e) { /* empty */ }\n\nmodule.exports = function (exec, skipClosing) {\n  if (!skipClosing && !SAFE_CLOSING) return false;\n  var safe = false;\n  try {\n    var arr = [7];\n    var iter = arr[ITERATOR]();\n    iter.next = function () { return { done: safe = true }; };\n    arr[ITERATOR] = function () { return iter; };\n    exec(arr);\n  } catch (e) { /* empty */ }\n  return safe;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/_iter-detect.js\n// module id = 70\n// module chunks = 1","// https://github.com/tc39/proposal-promise-finally\n'use strict';\nvar $export = require('./_export');\nvar core = require('./_core');\nvar global = require('./_global');\nvar speciesConstructor = require('./_species-constructor');\nvar promiseResolve = require('./_promise-resolve');\n\n$export($export.P + $export.R, 'Promise', { 'finally': function (onFinally) {\n  var C = speciesConstructor(this, core.Promise || global.Promise);\n  var isFunction = typeof onFinally == 'function';\n  return this.then(\n    isFunction ? function (x) {\n      return promiseResolve(C, onFinally()).then(function () { return x; });\n    } : onFinally,\n    isFunction ? function (e) {\n      return promiseResolve(C, onFinally()).then(function () { throw e; });\n    } : onFinally\n  );\n} });\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es7.promise.finally.js\n// module id = 71\n// module chunks = 1","'use strict';\n// https://github.com/tc39/proposal-promise-try\nvar $export = require('./_export');\nvar newPromiseCapability = require('./_new-promise-capability');\nvar perform = require('./_perform');\n\n$export($export.S, 'Promise', { 'try': function (callbackfn) {\n  var promiseCapability = newPromiseCapability.f(this);\n  var result = perform(callbackfn);\n  (result.e ? promiseCapability.reject : promiseCapability.resolve)(result.v);\n  return promiseCapability.promise;\n} });\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/modules/es7.promise.try.js\n// module id = 72\n// module chunks = 1","/**\n * @description Automatic locate the publicPath and set it up for webpack.\n */\n\n\n'use strict';\n\n/**\n * Get current script path\n * @return {String} The path of current script\n * @example\n * get 'file:///C:/git/live2d-widget/dev/bundle.js' or 'https://www.host.com/test/js/bundle.js'\n */\n\nfunction getCurrentPath(){\n\n  try{\n\n    // FF, Chrome, Modern browsers\n    // use their API to get the path of current script\n\n    // a.b();\n    // console.log('wpStage1');\n\n    return document.currentScript.src;\n\n    if(DOC.currentScript){ // FF 4+\n      return DOC.currentScript.src;\n    }\n\n  }catch(e){\n\n    // document.currentScript doesn't supports\n\n    // console.log('wpStage2');\n\n    // Method 1\n    // https://github.com/mozilla/pdf.js/blob/e081a708c36cb2aacff7889048863723fcf23671/src/shared/compatibility.js#L97\n    // IE, Chrome < 29\n\n    let scripts = document.getElementsByTagName('script');\n    return scripts[scripts.length - 1].src;\n\n/*\n    // Method 2\n    // parse the error stack trace maually\n    // https://github.com/workhorsy/uncompress.js/blob/master/js/uncompress.js#L25\n\n    let stack = e.stack;\n    let line = null;\n\n    // Chrome and IE\n    if (stack.indexOf('@') !== -1) {\n      line = stack.split('@')[1].split('\\n')[0];\n    // Firefox\n    } else {\n      line = stack.split('(')[1].split(')')[0];\n    }\n    line = line.substring(0, line.lastIndexOf('/')) + '/';\n    return line;\n*/\n/*\n    // Method 3\n    // https://www.cnblogs.com/rubylouvre/archive/2013/01/23/2872618.html\n\n    let stack = e.stack;\n    if(!stack && window.opera){\n      // Opera 9没有e.stack,但有e.Backtrace,但不能直接取得,需要对e对象转字符串进行抽取\n      stack = (String(e).match(/of linked script \\S+/g) || []).join(' ');\n    }\n    if(stack){\n      // e.stack最后一行在所有支持的浏览器大致如下:\n      // chrome23:\n      // @ http://113.93.50.63/data.js:4:1\n      // firefox17:\n      // @http://113.93.50.63/query.js:4\n      // opera12:\n      // @http://113.93.50.63/data.js:4\n      // IE10:\n      // @ Global code (http://113.93.50.63/data.js:4:1)\n      stack = stack.split(/[@ ]/g).pop(); // 取得最后一行,最后一个空格或@之后的部分\n      stack = stack[0] == '(' ? stack.slice(1,-1) : stack;\n      return stack.replace(/(:\\d+)?:\\d+$/i, ''); // 去掉行号与或许存在的出错字符起始位置\n    }\n    let nodes = head.getElementsByTagName('script'); // 只在head标签中寻找\n    for(var i = 0, node; node = nodes[i++];){\n      if(node.readyState === 'interactive'){\n        return node.className = node.src;\n      }\n    }\n*/\n  }\n\n}\n\n// expose the path to the global,\n// and wp will finish the following work\n__webpack_public_path__ = getCurrentPath().replace(/[^/\\\\\\\\]+$/, '');\nif (process.env.NODE_ENV === 'development'){\n  console.log(`Live2Dwidget: publicPath: ${__webpack_public_path__}`);\n}\n\nexport {\n  getCurrentPath,\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/wpPublicPath.js","/**\n * @description The storage of configs. Intend to unify serverJs and clientJs's config\n */\n\n/**\n * Default settings for defaulter\n * @type {Object}\n */\n\nconst defaultConfig = {\n  model: {\n    jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json',\n    scale: 1,\n  },\n  display: {\n    superSample: 2,\n    width: 200,\n    height: 400,\n    position: 'right',\n    hOffset: 0,\n    vOffset: -20,\n  },\n  mobile: {\n    show: true,\n    scale: 0.8,\n    motion: true,\n  },\n  name: {\n    canvas: 'live2dcanvas',\n    div: 'live2d-widget',\n  },\n  react: {\n    opacity: 1,\n  },\n  dev: {\n    border: false\n  },\n  dialog: {\n    enable: false,\n    hitokoto: false\n  }\n}\n\nmodule.exports = defaultConfig;\n\n\n\n// WEBPACK FOOTER //\n// ./src/config/defaultConfig.js","'use strict';\n\nmodule.exports = function defaultsDeep(target, objects) {\n  target = target || {};\n\n  function copy(target, current) {\n    for (var key in current) {\n      if (current.hasOwnProperty(key)) {\n        var value = current[key]\n        if (key === '__proto__') {\n          continue;\n        }\n        \n        var val = target[key];\n        // add the missing property, or allow a null property to be updated\n        if (val == null) {\n          target[key] = value;\n        } else if (typeof val === 'object' && val !== null && typeof value === 'object' && value !== null) {\n          defaultsDeep(val, value);\n        }\n      }\n    }\n  }\n\n  var len = arguments.length, i = 0;\n  while (i < len) {\n    var obj = arguments[i++];\n    if (obj) {\n      copy(target, obj);\n    }\n  }\n  return target;\n};\n\n\n// WEBPACK FOOTER //\n// ./src/config/defaultsDeep.js"],"sourceRoot":""}
\ No newline at end of file
diff --git a/page/10/index.html b/page/10/index.html
new file mode 100644
index 0000000000..61fcb756e1
--- /dev/null
+++ b/page/10/index.html
@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/10/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/10/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" class="post-title-link" itemprop="url">OracleLinux内核从uek切换到uek</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/OracleLinux/" itemprop="url" rel="index"><span itemprop="name">OracleLinux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/9/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/page/11/">11</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/11/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/10/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/10/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/10/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/100/index.html b/page/100/index.html
new file mode 100644
index 0000000000..adc2ecb5b0
--- /dev/null
+++ b/page/100/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/100/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/100/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-copy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-copy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 深浅拷贝</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 00:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/99/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/99/">99</a><span class="page-number current">100</span><a class="page-number" href="/page/101/">101</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/101/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/100/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/100/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/100/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/101/index.html b/page/101/index.html
new file mode 100644
index 0000000000..4d9b7bf4ff
--- /dev/null
+++ b/page/101/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/101/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/101/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-new/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 20:07:22" itemprop="dateCreated datePublished" datetime="2020-01-02T20:07:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/100/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/100/">100</a><span class="page-number current">101</span><a class="page-number" href="/page/102/">102</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/102/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/101/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/101/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/101/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/102/index.html b/page/102/index.html
new file mode 100644
index 0000000000..8fb0933ee6
--- /dev/null
+++ b/page/102/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/102/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/102/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-Closure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-Closure/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 闭包</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 13:32:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:32:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/101/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/101/">101</a><span class="page-number current">102</span><a class="page-number" href="/page/103/">103</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/103/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/102/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/102/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/102/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/103/index.html b/page/103/index.html
new file mode 100644
index 0000000000..259fc1dd4a
--- /dev/null
+++ b/page/103/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/103/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/103/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 执行上下文</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 13:18:22" itemprop="dateCreated datePublished" datetime="2020-01-02T13:18:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/102/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/102/">102</a><span class="page-number current">103</span><a class="page-number" href="/page/104/">104</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/104/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/103/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/103/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/103/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/104/index.html b/page/104/index.html
new file mode 100644
index 0000000000..08cad86edd
--- /dev/null
+++ b/page/104/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/104/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/104/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-this/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-this/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- this</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:59:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:59:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/103/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/103/">103</a><span class="page-number current">104</span><a class="page-number" href="/page/105/">105</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/105/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/104/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/104/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/104/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/105/index.html b/page/105/index.html
new file mode 100644
index 0000000000..99bd0604ec
--- /dev/null
+++ b/page/105/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/105/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/105/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-instanceof/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-instanceof/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- instanceof</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:29:22" itemprop="dateCreated datePublished" datetime="2020-01-02T12:29:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/104/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/104/">104</a><span class="page-number current">105</span><a class="page-number" href="/page/106/">106</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/106/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/105/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/105/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/105/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/106/index.html b/page/106/index.html
new file mode 100644
index 0000000000..532e96c18d
--- /dev/null
+++ b/page/106/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/106/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/106/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/21-Day-Challenge-01/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/21-Day-Challenge-01/" class="post-title-link" itemprop="url">2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 12:24:49" itemprop="dateCreated datePublished" datetime="2020-01-02T12:24:49+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/02/21-Day-Challenge-01/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/105/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/105/">105</a><span class="page-number current">106</span><a class="page-number" href="/page/107/">107</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/107/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/106/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/106/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/106/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/107/index.html b/page/107/index.html
new file mode 100644
index 0000000000..79ddf55c46
--- /dev/null
+++ b/page/107/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/107/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/107/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-prototype/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-prototype/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 原型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T11:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/02/FE-guide-prototype/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/106/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/106/">106</a><span class="page-number current">107</span><a class="page-number" href="/page/108/">108</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/108/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/107/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/107/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/107/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/108/index.html b/page/108/index.html
new file mode 100644
index 0000000000..499cac39dc
--- /dev/null
+++ b/page/108/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/108/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/108/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/02/FE-guide-dataType/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/02/FE-guide-dataType/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-02 08:22:22" itemprop="dateCreated datePublished" datetime="2020-01-02T08:22:22+00:00">2020-01-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/02/FE-guide-dataType/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/107/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/107/">107</a><span class="page-number current">108</span><a class="page-number" href="/page/109/">109</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/109/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/108/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/108/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/108/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/109/index.html b/page/109/index.html
new file mode 100644
index 0000000000..f0bbdd4736
--- /dev/null
+++ b/page/109/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/109/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/109/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/01/Hello-2020/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/01/Hello-2020/" class="post-title-link" itemprop="url">你好2020</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-01 10:50:00" itemprop="dateCreated datePublished" datetime="2020-01-01T10:50:00+00:00">2020-01-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/108/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/108/">108</a><span class="page-number current">109</span><a class="page-number" href="/page/110/">110</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/110/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/109/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/109/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/109/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/11/index.html b/page/11/index.html
new file mode 100644
index 0000000000..f944ddd702
--- /dev/null
+++ b/page/11/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/11/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/11/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" class="post-title-link" itemprop="url">搭建Docker私有仓库</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/10/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/page/12/">12</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/12/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/11/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/11/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/11/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/110/index.html b/page/110/index.html
new file mode 100644
index 0000000000..b6b58ea04d
--- /dev/null
+++ b/page/110/index.html
@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/110/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/110/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/GoodBye-2019/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/31/GoodBye-2019/" class="post-title-link" itemprop="url">再见2019</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-31 23:50:59" itemprop="dateCreated datePublished" datetime="2019-12-31T23:50:59+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/109/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/109/">109</a><span class="page-number current">110</span><a class="page-number" href="/page/111/">111</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/111/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/110/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/110/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/110/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/111/index.html b/page/111/index.html
new file mode 100644
index 0000000000..faa22c334d
--- /dev/null
+++ b/page/111/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/111/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/111/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/gitlab-cicd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/31/gitlab-cicd/" class="post-title-link" itemprop="url">基于 GitLab CI/CD 的自动化构建、发布实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2019-12-31 08:22:22 / 修改时间：08:43:48" itemprop="dateCreated datePublished" datetime="2019-12-31T08:22:22+00:00">2019-12-31</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2019/12/31/gitlab-cicd/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/110/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/110/">110</a><span class="page-number current">111</span><a class="page-number" href="/page/112/">112</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/112/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/111/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/111/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/111/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/112/index.html b/page/112/index.html
new file mode 100644
index 0000000000..95f9a5702a
--- /dev/null
+++ b/page/112/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/112/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/112/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/31/weichat-h5-compatibility/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/31/weichat-h5-compatibility/" class="post-title-link" itemprop="url">微信的H5兼容方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-31 01:37:08" itemprop="dateCreated datePublished" datetime="2019-12-31T01:37:08+00:00">2019-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BE%AE%E4%BF%A1/" itemprop="url" rel="index"><span itemprop="name">微信</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2019/12/31/weichat-h5-compatibility/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/111/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/111/">111</a><span class="page-number current">112</span><a class="page-number" href="/page/113/">113</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/113/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/112/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/112/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/112/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/113/index.html b/page/113/index.html
new file mode 100644
index 0000000000..7ead95aca0
--- /dev/null
+++ b/page/113/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/113/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/113/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/30/begin-learn-java/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/30/begin-learn-java/" class="post-title-link" itemprop="url">重拾java开发技能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-30 21:37:07" itemprop="dateCreated datePublished" datetime="2019-12-30T21:37:07+00:00">2019-12-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E6%9D%82%E8%AE%B0%E9%9A%8F%E6%84%9F/" itemprop="url" rel="index"><span itemprop="name">杂记随感</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2019/12/30/begin-learn-java/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/112/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/112/">112</a><span class="page-number current">113</span><a class="page-number" href="/page/114/">114</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/114/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/113/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/113/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/113/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/114/index.html b/page/114/index.html
new file mode 100644
index 0000000000..84c0bfc9a4
--- /dev/null
+++ b/page/114/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/114/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/114/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Actions/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/27/Actions/" class="post-title-link" itemprop="url">巧妙利用Acitons进行博客的自动构建</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2019/12/27/Actions/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/113/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/113/">113</a><span class="page-number current">114</span><a class="page-number" href="/page/115/">115</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/115/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/114/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/114/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/114/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/115/index.html b/page/115/index.html
new file mode 100644
index 0000000000..835aea1bd3
--- /dev/null
+++ b/page/115/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/115/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/115/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2019/12/27/Vue-Component-Communication/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2019/12/27/Vue-Component-Communication/" class="post-title-link" itemprop="url">前端面试Vue篇：Vue组件通信的几种方式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2019-12-27 22:22:22" itemprop="dateCreated datePublished" datetime="2019-12-27T22:22:22+00:00">2019-12-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2019/12/27/Vue-Component-Communication/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/114/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/114/">114</a><span class="page-number current">115</span><a class="page-number" href="/page/116/">116</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/116/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/115/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/115/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/115/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/116/index.html b/page/116/index.html
new file mode 100644
index 0000000000..71dd7882c7
--- /dev/null
+++ b/page/116/index.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/116/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/116/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/12/12/Git-Shell/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/12/12/Git-Shell/" class="post-title-link" itemprop="url">Git的常用命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-12-12 12:20:20" itemprop="dateCreated datePublished" datetime="2017-12-12T12:20:20+00:00">2017-12-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2019-12-31 10:38:57" itemprop="dateModified" datetime="2019-12-31T10:38:57+00:00">2019-12-31</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/115/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/115/">115</a><span class="page-number current">116</span><a class="page-number" href="/page/117/">117</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/117/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/116/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/116/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/116/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/117/index.html b/page/117/index.html
new file mode 100644
index 0000000000..0f7f7af36b
--- /dev/null
+++ b/page/117/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/117/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/117/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/web-quanzhan/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/10/12/web-quanzhan/" class="post-title-link" itemprop="url">《Web全栈工程师的自我修养》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 17:37:07" itemprop="dateCreated datePublished" datetime="2017-10-12T17:37:07+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/10/12/web-quanzhan/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/116/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/116/">116</a><span class="page-number current">117</span><a class="page-number" href="/page/118/">118</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/118/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/117/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/117/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/117/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/118/index.html b/page/118/index.html
new file mode 100644
index 0000000000..44c32dfda1
--- /dev/null
+++ b/page/118/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/118/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/118/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/VSCode-ESLint/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/10/12/VSCode-ESLint/" class="post-title-link" itemprop="url">VSCode ESLint JS代码静态检测工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 14:42:52" itemprop="dateCreated datePublished" datetime="2017-10-12T14:42:52+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/10/12/VSCode-ESLint/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/117/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/117/">117</a><span class="page-number current">118</span><a class="page-number" href="/page/119/">119</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/119/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/118/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/118/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/118/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/119/index.html b/page/119/index.html
new file mode 100644
index 0000000000..8eb76889e2
--- /dev/null
+++ b/page/119/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/119/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/119/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/12/us-gitment/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/10/12/us-gitment/" class="post-title-link" itemprop="url">给博客添加基于github-issue的评论系统</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-12 10:50:21" itemprop="dateCreated datePublished" datetime="2017-10-12T10:50:21+00:00">2017-10-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a target="_blank" rel="noopener" href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/10/12/us-gitment/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/118/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/118/">118</a><span class="page-number current">119</span><a class="page-number" href="/page/120/">120</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/120/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/119/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/119/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/119/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/12/index.html b/page/12/index.html
new file mode 100644
index 0000000000..5105959717
--- /dev/null
+++ b/page/12/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/12/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/12/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/linux-scp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/linux-scp/" class="post-title-link" itemprop="url">在linux之间传输文件的命令scp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T00:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/11/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/11/">11</a><span class="page-number current">12</span><a class="page-number" href="/page/13/">13</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/13/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/12/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/12/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/12/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/120/index.html b/page/120/index.html
new file mode 100644
index 0000000000..3bb1cf3e70
--- /dev/null
+++ b/page/120/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/120/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/120/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/10/11/use-GitHub-Hexo-Next-make-blog/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" class="post-title-link" itemprop="url">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-10-11 16:18:48" itemprop="dateCreated datePublished" datetime="2017-10-11T16:18:48+00:00">2017-10-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/119/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/119/">119</a><span class="page-number current">120</span><a class="page-number" href="/page/121/">121</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/121/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/120/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/120/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/120/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/121/index.html b/page/121/index.html
new file mode 100644
index 0000000000..10d766cba1
--- /dev/null
+++ b/page/121/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/121/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/121/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-basic/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/08/30/Vue-basic/" class="post-title-link" itemprop="url">Vue基础</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 17:03:05" itemprop="dateCreated datePublished" datetime="2017-08-30T17:03:05+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/08/30/Vue-basic/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/120/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/120/">120</a><span class="page-number current">121</span><a class="page-number" href="/page/122/">122</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/122/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/121/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/121/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/121/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/122/index.html b/page/122/index.html
new file mode 100644
index 0000000000..328d36a5b5
--- /dev/null
+++ b/page/122/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/122/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/122/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/Vue-VSCode-Snippets/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/08/30/Vue-VSCode-Snippets/" class="post-title-link" itemprop="url">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 16:23:17" itemprop="dateCreated datePublished" datetime="2017-08-30T16:23:17+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/08/30/Vue-VSCode-Snippets/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/121/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/121/">121</a><span class="page-number current">122</span><a class="page-number" href="/page/123/">123</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/123/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/122/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/122/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/122/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/123/index.html b/page/123/index.html
new file mode 100644
index 0000000000..44a1429c8d
--- /dev/null
+++ b/page/123/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/123/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/123/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/30/npm-source/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/08/30/npm-source/" class="post-title-link" itemprop="url">npm相关资料</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-30 12:24:49" itemprop="dateCreated datePublished" datetime="2017-08-30T12:24:49+00:00">2017-08-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/08/30/npm-source/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/122/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/122/">122</a><span class="page-number current">123</span><a class="page-number" href="/page/124/">124</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/124/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/123/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/123/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/123/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/124/index.html b/page/124/index.html
new file mode 100644
index 0000000000..b08ab3cc73
--- /dev/null
+++ b/page/124/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/124/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/124/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2017/08/29/browser-incompatibility-problem-solution/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2017/08/29/browser-incompatibility-problem-solution/" class="post-title-link" itemprop="url">浏览器兼容性问题解决方案</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2017-08-29 17:04:31" itemprop="dateCreated datePublished" datetime="2017-08-29T17:04:31+00:00">2017-08-29</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%85%BC%E5%AE%B9%E6%80%A7/" itemprop="url" rel="index"><span itemprop="name">兼容性</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2017/08/29/browser-incompatibility-problem-solution/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/123/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/123/">123</a><span class="page-number current">124</span><a class="page-number" href="/page/125/">125</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/125/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/124/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/124/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/124/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/125/index.html b/page/125/index.html
new file mode 100644
index 0000000000..9f02225294
--- /dev/null
+++ b/page/125/index.html
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/125/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/125/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2016/10/27/Read-The-miracle-of-the-morning-journal/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2016/10/27/Read-The-miracle-of-the-morning-journal/" class="post-title-link" itemprop="url">《晨间日记的奇迹》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2016-10-27 22:22:22" itemprop="dateCreated datePublished" datetime="2016-10-27T22:22:22+00:00">2016-10-27</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/124/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/124/">124</a><span class="page-number current">125</span><a class="page-number" href="/page/126/">126</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/126/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/125/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/125/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/125/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/126/index.html b/page/126/index.html
new file mode 100644
index 0000000000..25df5040e6
--- /dev/null
+++ b/page/126/index.html
@@ -0,0 +1,696 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/126/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/126/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2015/12/31/Read-Let-your-boss-promote-you/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2015/12/31/Read-Let-your-boss-promote-you/" class="post-title-link" itemprop="url">《让老板提拔你》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2015-12-31 22:22:22" itemprop="dateCreated datePublished" datetime="2015-12-31T22:22:22+00:00">2015-12-31</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/125/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/125/">125</a><span class="page-number current">126</span><a class="page-number" href="/page/127/">127</a><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/127/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/126/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/126/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/126/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/127/index.html b/page/127/index.html
new file mode 100644
index 0000000000..cce2be5d62
--- /dev/null
+++ b/page/127/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/127/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/127/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/26/CSS-Triangle-Circle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2013/06/26/CSS-Triangle-Circle/" class="post-title-link" itemprop="url">CSS border三角、圆角图形生成技术详解</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2013-06-26 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-26T22:22:22+00:00">2013-06-26</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2013/06/26/CSS-Triangle-Circle/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/126/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/126/">126</a><span class="page-number current">127</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/128/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/127/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/127/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/127/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/128/index.html b/page/128/index.html
new file mode 100644
index 0000000000..a924838305
--- /dev/null
+++ b/page/128/index.html
@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/128/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/128/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2013/06/17/Read-High-Performance-JavaScript/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2013/06/17/Read-High-Performance-JavaScript/" class="post-title-link" itemprop="url">《高性能JAVASCRIPT》读书笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2013-06-17 22:22:22" itemprop="dateCreated datePublished" datetime="2013-06-17T22:22:22+00:00">2013-06-17</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/127/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/127/">127</a><span class="page-number current">128</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/128/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/128/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/128/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/13/index.html b/page/13/index.html
new file mode 100644
index 0000000000..2e0677f9aa
--- /dev/null
+++ b/page/13/index.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/13/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/13/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/30/nginx-timeout/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/30/nginx-timeout/" class="post-title-link" itemprop="url">nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-30 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-30T00:00:00+00:00">2022-06-30</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/12/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/12/">12</a><span class="page-number current">13</span><a class="page-number" href="/page/14/">14</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/14/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/13/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/13/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/13/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/14/index.html b/page/14/index.html
new file mode 100644
index 0000000000..8267cc873f
--- /dev/null
+++ b/page/14/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/14/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/14/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全（2）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-16 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-16T14:40:40+00:00">2022-06-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a target="_blank" rel="noopener" href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/13/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/13/">13</a><span class="page-number current">14</span><a class="page-number" href="/page/15/">15</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/15/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/14/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/14/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/14/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/15/index.html b/page/15/index.html
new file mode 100644
index 0000000000..3e56860e1f
--- /dev/null
+++ b/page/15/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/15/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/15/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" class="post-title-link" itemprop="url">架构实践</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-15 14:40:40" itemprop="dateCreated datePublished" datetime="2022-06-15T14:40:40+00:00">2022-06-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9E%B6%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">架构</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/14/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/14/">14</a><span class="page-number current">15</span><a class="page-number" href="/page/16/">16</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/16/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/15/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/15/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/15/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/16/index.html b/page/16/index.html
new file mode 100644
index 0000000000..04db3b9db5
--- /dev/null
+++ b/page/16/index.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/16/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/16/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/http_stub_status_module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/09/http_stub_status_module/" class="post-title-link" itemprop="url">http_stub_status_module Nginx的性能模块</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a target="_blank" rel="noopener" href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/15/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/15/">15</a><span class="page-number current">16</span><a class="page-number" href="/page/17/">17</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/17/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/16/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/16/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/16/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/17/index.html b/page/17/index.html
new file mode 100644
index 0000000000..8d1fab6756
--- /dev/null
+++ b/page/17/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/17/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/17/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" class="post-title-link" itemprop="url">Hexo在Github发布之后自定义域名的配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 12:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T12:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/16/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/16/">16</a><span class="page-number current">17</span><a class="page-number" href="/page/18/">18</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/18/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/17/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/17/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/17/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/18/index.html b/page/18/index.html
new file mode 100644
index 0000000000..d0d17b4cb6
--- /dev/null
+++ b/page/18/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/18/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/18/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" class="post-title-link" itemprop="url">Nginx指令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-09 10:40:40" itemprop="dateCreated datePublished" datetime="2022-06-09T10:40:40+00:00">2022-06-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/17/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/17/">17</a><span class="page-number current">18</span><a class="page-number" href="/page/19/">19</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/19/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/18/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/18/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/18/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/19/index.html b/page/19/index.html
new file mode 100644
index 0000000000..57e9714c82
--- /dev/null
+++ b/page/19/index.html
@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/19/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/19/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">Docker 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 16:20:30" itemprop="dateCreated datePublished" datetime="2022-06-02T16:20:30+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/18/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/18/">18</a><span class="page-number current">19</span><a class="page-number" href="/page/20/">20</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/20/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/19/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/19/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/19/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/2/index.html b/page/2/index.html
new file mode 100644
index 0000000000..8523ad585a
--- /dev/null
+++ b/page/2/index.html
@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/" class="post-title-link" itemprop="url">未命名</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2023-09-20 10:18:17" itemprop="dateCreated datePublished" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/20/index.html b/page/20/index.html
new file mode 100644
index 0000000000..47b20d047e
--- /dev/null
+++ b/page/20/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/20/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/20/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" class="post-title-link" itemprop="url">Docker网络模式</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:23:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:23:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/19/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/19/">19</a><span class="page-number current">20</span><a class="page-number" href="/page/21/">21</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/21/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/20/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/20/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/20/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/21/index.html b/page/21/index.html
new file mode 100644
index 0000000000..73bc426fe2
--- /dev/null
+++ b/page/21/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/21/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/21/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" class="post-title-link" itemprop="url">Docker容器端口映射</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:22:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:22:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/20/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/20/">20</a><span class="page-number current">21</span><a class="page-number" href="/page/22/">22</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/22/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/21/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/21/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/21/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/22/index.html b/page/22/index.html
new file mode 100644
index 0000000000..0d60f73f40
--- /dev/null
+++ b/page/22/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/22/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/22/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" class="post-title-link" itemprop="url">Docker数据卷</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:21:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:21:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/21/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/21/">21</a><span class="page-number current">22</span><a class="page-number" href="/page/23/">23</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/23/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/22/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/22/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/22/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/23/index.html b/page/23/index.html
new file mode 100644
index 0000000000..9619554164
--- /dev/null
+++ b/page/23/index.html
@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/23/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/23/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/02/DockerFile/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/02/DockerFile/" class="post-title-link" itemprop="url">DockerFile</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-02 11:20:20" itemprop="dateCreated datePublished" datetime="2022-06-02T11:20:20+00:00">2022-06-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/22/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/22/">22</a><span class="page-number current">23</span><a class="page-number" href="/page/24/">24</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/24/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/23/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/23/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/23/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/24/index.html b/page/24/index.html
new file mode 100644
index 0000000000..65ebd49ac4
--- /dev/null
+++ b/page/24/index.html
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/24/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/24/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/GIT%20Standard/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/GIT%20Standard/" class="post-title-link" itemprop="url">GIT Standard.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a target="_blank" rel="noopener" href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a target="_blank" rel="noopener" href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/23/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/23/">23</a><span class="page-number current">24</span><a class="page-number" href="/page/25/">25</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/25/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/24/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/24/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/24/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/25/index.html b/page/25/index.html
new file mode 100644
index 0000000000..d287d6717d
--- /dev/null
+++ b/page/25/index.html
@@ -0,0 +1,736 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/25/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/25/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Restful API 的设计规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/24/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/24/">24</a><span class="page-number current">25</span><a class="page-number" href="/page/26/">26</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/26/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/25/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/25/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/25/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/26/index.html b/page/26/index.html
new file mode 100644
index 0000000000..464594c7cc
--- /dev/null
+++ b/page/26/index.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/26/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/26/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">CodeReview代码审查指南.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a target="_blank" rel="noopener" href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a target="_blank" rel="noopener" href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a target="_blank" rel="noopener" href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a target="_blank" rel="noopener" href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/25/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/25/">25</a><span class="page-number current">26</span><a class="page-number" href="/page/27/">27</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/27/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/26/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/26/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/26/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/27/index.html b/page/27/index.html
new file mode 100644
index 0000000000..f06f9124b3
--- /dev/null
+++ b/page/27/index.html
@@ -0,0 +1,570 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/27/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/27/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">前后端分离开发规范</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a target="_blank" rel="noopener" href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a target="_blank" rel="noopener" href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a target="_blank" rel="noopener" href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/26/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/26/">26</a><span class="page-number current">27</span><a class="page-number" href="/page/28/">28</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/28/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/27/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/27/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/27/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/28/index.html b/page/28/index.html
new file mode 100644
index 0000000000..8ad4d81262
--- /dev/null
+++ b/page/28/index.html
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/28/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/28/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">前后端分离开发指南</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/27/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/27/">27</a><span class="page-number current">28</span><a class="page-number" href="/page/29/">29</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/29/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/28/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/28/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/28/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/29/index.html b/page/29/index.html
new file mode 100644
index 0000000000..d6ce494d15
--- /dev/null
+++ b/page/29/index.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/29/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/29/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" class="post-title-link" itemprop="url">Electron编码规范.md</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a target="_blank" rel="noopener" href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/28/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/28/">28</a><span class="page-number current">29</span><a class="page-number" href="/page/30/">30</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/30/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/29/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/29/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/29/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/3/index.html b/page/3/index.html
new file mode 100644
index 0000000000..65fb4f7d5e
--- /dev/null
+++ b/page/3/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">虚拟化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%99%9A%E6%8B%9F%E5%8C%96/Docker-Compose/" itemprop="url" rel="index"><span itemprop="name">Docker Compose</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/30/index.html b/page/30/index.html
new file mode 100644
index 0000000000..b094df3958
--- /dev/null
+++ b/page/30/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/30/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/30/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/squid/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/squid/" class="post-title-link" itemprop="url">Squid 服务器学习笔记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/" itemprop="url" rel="index"><span itemprop="name">Infra</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infra/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Squid/" itemprop="url" rel="index"><span itemprop="name">Squid</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/29/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/29/">29</a><span class="page-number current">30</span><a class="page-number" href="/page/31/">31</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/31/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/30/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/30/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/30/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/31/index.html b/page/31/index.html
new file mode 100644
index 0000000000..90d19f6957
--- /dev/null
+++ b/page/31/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/31/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/31/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" class="post-title-link" itemprop="url">前端开发插件</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-06-01 00:00:00" itemprop="dateCreated datePublished" datetime="2022-06-01T00:00:00+00:00">2022-06-01</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url" rel="index"><span itemprop="name">前端开发规范</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/30/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/30/">30</a><span class="page-number current">31</span><a class="page-number" href="/page/32/">32</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/32/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/31/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/31/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/31/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/32/index.html b/page/32/index.html
new file mode 100644
index 0000000000..5c7b7d10e3
--- /dev/null
+++ b/page/32/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/32/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/32/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%90%9E%E6%87%82EventLoop/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" class="post-title-link" itemprop="url">搞懂EventLoop</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-03-11 08:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T08:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/31/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/31/">31</a><span class="page-number current">32</span><a class="page-number" href="/page/33/">33</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/33/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/32/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/32/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/32/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/33/index.html b/page/33/index.html
new file mode 100644
index 0000000000..37efe5fb1b
--- /dev/null
+++ b/page/33/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/33/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/33/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" class="post-title-link" itemprop="url">数组方法哪些有副作用，一目了然！</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-03-11 07:00:00" itemprop="dateCreated datePublished" datetime="2022-03-11T07:00:00+00:00">2022-03-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/32/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/32/">32</a><span class="page-number current">33</span><a class="page-number" href="/page/34/">34</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/34/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/33/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/33/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/33/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/34/index.html b/page/34/index.html
new file mode 100644
index 0000000000..c50a6c4750
--- /dev/null
+++ b/page/34/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/34/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/34/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" class="post-title-link" itemprop="url">关于版本管理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2021-05-13 07:00:00" itemprop="dateCreated datePublished" datetime="2021-05-13T07:00:00+00:00">2021-05-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/33/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/33/">33</a><span class="page-number current">34</span><a class="page-number" href="/page/35/">35</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/35/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/34/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/34/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/34/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/35/index.html b/page/35/index.html
new file mode 100644
index 0000000000..ea371624da
--- /dev/null
+++ b/page/35/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/35/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/35/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2021-05-08 08:03:48" itemprop="dateCreated datePublished" datetime="2021-05-08T08:03:48+00:00">2021-05-08</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/34/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/34/">34</a><span class="page-number current">35</span><a class="page-number" href="/page/36/">36</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/36/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/35/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/35/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/35/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/36/index.html b/page/36/index.html
new file mode 100644
index 0000000000..d403ad5b50
--- /dev/null
+++ b/page/36/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/36/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/36/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/11/learn-ionic-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/11/11/learn-ionic-1/" class="post-title-link" itemprop="url">从零开始：学习Ionic（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-11 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-11T00:00:00+00:00">2020-11-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/11/11/learn-ionic-1/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/35/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/35/">35</a><span class="page-number current">36</span><a class="page-number" href="/page/37/">37</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/37/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/36/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/36/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/36/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/37/index.html b/page/37/index.html
new file mode 100644
index 0000000000..bd2ac5b3a9
--- /dev/null
+++ b/page/37/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/37/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/37/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-cordova-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/11/10/learn-cordova-1/" class="post-title-link" itemprop="url">从零开始：学习Cordova（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">移动开发</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/11/10/learn-cordova-1/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/36/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/36/">36</a><span class="page-number current">37</span><a class="page-number" href="/page/38/">38</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/38/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/37/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/37/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/37/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/38/index.html b/page/38/index.html
new file mode 100644
index 0000000000..f96f391520
--- /dev/null
+++ b/page/38/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/38/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/38/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/11/10/learn-go/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/11/10/learn-go/" class="post-title-link" itemprop="url">从零开始：学习Go（一）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-11-10 00:00:00" itemprop="dateCreated datePublished" datetime="2020-11-10T00:00:00+00:00">2020-11-10</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">后端开发</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/Go%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">Go语言</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/11/10/learn-go/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/37/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/37/">37</a><span class="page-number current">38</span><a class="page-number" href="/page/39/">39</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/39/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/38/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/38/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/38/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/39/index.html b/page/39/index.html
new file mode 100644
index 0000000000..a67bd4f70a
--- /dev/null
+++ b/page/39/index.html
@@ -0,0 +1,523 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/39/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/39/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" class="post-title-link" itemprop="url">Linux目录说明</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-08-02 00:00:00" itemprop="dateCreated datePublished" datetime="2020-08-02T00:00:00+00:00">2020-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/38/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/38/">38</a><span class="page-number current">39</span><a class="page-number" href="/page/40/">40</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/40/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/39/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/39/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/39/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/4/index.html b/page/4/index.html
new file mode 100644
index 0000000000..175df02f85
--- /dev/null
+++ b/page/4/index.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/4/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/4/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">Postgresql绿色版使用</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Database/" itemprop="url" rel="index"><span itemprop="name">Database</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Database/Postgresql/" itemprop="url" rel="index"><span itemprop="name">Postgresql</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/3/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/5/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/4/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/4/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/4/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/40/index.html b/page/40/index.html
new file mode 100644
index 0000000000..2b325b09ff
--- /dev/null
+++ b/page/40/index.html
@@ -0,0 +1,576 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/40/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/40/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/07/19/rpm%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">rpm命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-07-19 00:00:00" itemprop="dateCreated datePublished" datetime="2020-07-19T00:00:00+00:00">2020-07-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/RPM/" itemprop="url" rel="index"><span itemprop="name">RPM</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/39/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/39/">39</a><span class="page-number current">40</span><a class="page-number" href="/page/41/">41</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/41/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/40/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/40/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/40/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/41/index.html b/page/41/index.html
new file mode 100644
index 0000000000..00c7b9fb4f
--- /dev/null
+++ b/page/41/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/41/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/41/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/28/Prettier-Setting/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/05/28/Prettier-Setting/" class="post-title-link" itemprop="url">Prettier格式化配置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-05-28 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-28T00:00:00+00:00">2020-05-28</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/VSCode%E6%8F%92%E4%BB%B6/" itemprop="url" rel="index"><span itemprop="name">VSCode插件</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/05/28/Prettier-Setting/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/40/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/40/">40</a><span class="page-number current">41</span><a class="page-number" href="/page/42/">42</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/42/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/41/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/41/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/41/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/42/index.html b/page/42/index.html
new file mode 100644
index 0000000000..7da790174b
--- /dev/null
+++ b/page/42/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/42/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/42/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/05/14/css3-pointer-events/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/05/14/css3-pointer-events/" class="post-title-link" itemprop="url">CSS3新属性-pointer-events</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-05-14 00:00:00" itemprop="dateCreated datePublished" datetime="2020-05-14T00:00:00+00:00">2020-05-14</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/05/14/css3-pointer-events/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/41/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/41/">41</a><span class="page-number current">42</span><a class="page-number" href="/page/43/">43</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/43/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/42/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/42/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/42/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/43/index.html b/page/43/index.html
new file mode 100644
index 0000000000..39c0cbe6f6
--- /dev/null
+++ b/page/43/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/43/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/43/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/what-is-npx/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/16/what-is-npx/" class="post-title-link" itemprop="url">npx是什么</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/16/what-is-npx/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/42/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/42/">42</a><span class="page-number current">43</span><a class="page-number" href="/page/44/">44</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/44/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/43/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/43/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/43/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/44/index.html b/page/44/index.html
new file mode 100644
index 0000000000..599f22b905
--- /dev/null
+++ b/page/44/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/44/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/44/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/16/0-vuecli-3-component/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/16/0-vuecli-3-component/" class="post-title-link" itemprop="url">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-16 00:00:00" itemprop="dateCreated datePublished" datetime="2020-04-16T00:00:00+00:00">2020-04-16</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a target="_blank" rel="noopener" href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/16/0-vuecli-3-component/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/43/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/43/">43</a><span class="page-number current">44</span><a class="page-number" href="/page/45/">45</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/45/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/44/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/44/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/44/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/45/index.html b/page/45/index.html
new file mode 100644
index 0000000000..ec11d213e7
--- /dev/null
+++ b/page/45/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/45/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/45/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/node-sass-slow-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/15/node-sass-slow-problem/" class="post-title-link" itemprop="url">如何解决npm安装node-sass依赖慢的情况</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-15 23:24:49" itemprop="dateCreated datePublished" datetime="2020-04-15T23:24:49+00:00">2020-04-15</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/Npm/" itemprop="url" rel="index"><span itemprop="name">Npm</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/15/node-sass-slow-problem/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/44/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/44/">44</a><span class="page-number current">45</span><a class="page-number" href="/page/46/">46</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/46/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/45/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/45/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/45/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/46/index.html b/page/46/index.html
new file mode 100644
index 0000000000..3ce539ad0c
--- /dev/null
+++ b/page/46/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/46/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/46/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/15/talk-about-full-stack-big-fd/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/15/talk-about-full-stack-big-fd/" class="post-title-link" itemprop="url">前端全栈和大前端有啥区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-04-15 15:59:00 / 修改时间：15:51:22" itemprop="dateCreated datePublished" datetime="2020-04-15T15:59:00+00:00">2020-04-15</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%85%A8%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">全栈</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/15/talk-about-full-stack-big-fd/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/45/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/45/">45</a><span class="page-number current">46</span><a class="page-number" href="/page/47/">47</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/47/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/46/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/46/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/46/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/47/index.html b/page/47/index.html
new file mode 100644
index 0000000000..16945fa3e7
--- /dev/null
+++ b/page/47/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/47/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/47/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/Electron-Offline-Build/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/07/Electron-Offline-Build/" class="post-title-link" itemprop="url">国内配置Electron开发环境的正确方式【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-07 18:22:22" itemprop="dateCreated datePublished" datetime="2020-04-07T18:22:22+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">大前端</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">客户端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/07/Electron-Offline-Build/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/46/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/46/">46</a><span class="page-number current">47</span><a class="page-number" href="/page/48/">48</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/48/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/47/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/47/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/47/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/48/index.html b/page/48/index.html
new file mode 100644
index 0000000000..a58f852348
--- /dev/null
+++ b/page/48/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/48/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/48/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/07/webpack-uglifyjsplugin/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/07/webpack-uglifyjsplugin/" class="post-title-link" itemprop="url">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-07 11:22:00" itemprop="dateCreated datePublished" datetime="2020-04-07T11:22:00+00:00">2020-04-07</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/07/webpack-uglifyjsplugin/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/47/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/47/">47</a><span class="page-number current">48</span><a class="page-number" href="/page/49/">49</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/49/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/48/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/48/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/48/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/49/index.html b/page/49/index.html
new file mode 100644
index 0000000000..d9b446f0fc
--- /dev/null
+++ b/page/49/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/49/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/49/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/04/03/source-code-react-diff/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/04/03/source-code-react-diff/" class="post-title-link" itemprop="url">React 源码剖析系列 － 不可思议的 react diff【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-04-03 12:38:00" itemprop="dateCreated datePublished" datetime="2020-04-03T12:38:00+00:00">2020-04-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a target="_blank" rel="noopener" href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/04/03/source-code-react-diff/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/48/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/48/">48</a><span class="page-number current">49</span><a class="page-number" href="/page/50/">50</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/50/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/49/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/49/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/49/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/5/index.html b/page/5/index.html
new file mode 100644
index 0000000000..436957bc1e
--- /dev/null
+++ b/page/5/index.html
@@ -0,0 +1,565 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/5/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/5/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" class="post-title-link" itemprop="url">Nginx中的超时设置</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">Web服务器</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Web%E6%9C%8D%E5%8A%A1%E5%99%A8/Nginx/" itemprop="url" rel="index"><span itemprop="name">Nginx</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/6/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/5/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/5/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/5/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/50/index.html b/page/50/index.html
new file mode 100644
index 0000000000..3146e8ba92
--- /dev/null
+++ b/page/50/index.html
@@ -0,0 +1,784 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/50/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/50/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/webpack-learning-1/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/webpack-learning-1/" class="post-title-link" itemprop="url">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 20:20:20" itemprop="dateCreated datePublished" datetime="2020-03-24T20:20:20+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a target="_blank" rel="noopener" href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a target="_blank" rel="noopener" href="https://webpack.docschina.org/">webpack中文</a><br><a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/49/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/49/">49</a><span class="page-number current">50</span><a class="page-number" href="/page/51/">51</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/51/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/50/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/50/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/50/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/51/index.html b/page/51/index.html
new file mode 100644
index 0000000000..b95b97e168
--- /dev/null
+++ b/page/51/index.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/51/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/51/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-call-apply/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-call-apply/" class="post-title-link" itemprop="url">自己动手实现系列 ---- call、apply、bind</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:54:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:54:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/50/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/50/">50</a><span class="page-number current">51</span><a class="page-number" href="/page/52/">52</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/52/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/51/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/51/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/51/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/52/index.html b/page/52/index.html
new file mode 100644
index 0000000000..47f0b497bd
--- /dev/null
+++ b/page/52/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/52/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/52/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-async-await/" class="post-title-link" itemprop="url">自己动手实现系列 ---- async、await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:50:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:50:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/51/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/51/">51</a><span class="page-number current">52</span><a class="page-number" href="/page/53/">53</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/53/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/52/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/52/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/52/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/53/index.html b/page/53/index.html
new file mode 100644
index 0000000000..1406ecbba5
--- /dev/null
+++ b/page/53/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/53/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/53/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-EventEmitter/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-EventEmitter/" class="post-title-link" itemprop="url">自己动手实现系列 ---- EventEmitter(事件触发器)</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:45:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:45:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/52/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/52/">52</a><span class="page-number current">53</span><a class="page-number" href="/page/54/">54</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/54/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/53/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/53/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/53/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/54/index.html b/page/54/index.html
new file mode 100644
index 0000000000..78c91921fe
--- /dev/null
+++ b/page/54/index.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/54/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/54/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Vue双向绑定</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/53/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/53/">53</a><span class="page-number current">54</span><a class="page-number" href="/page/55/">55</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/55/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/54/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/54/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/54/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/55/index.html b/page/55/index.html
new file mode 100644
index 0000000000..c211a6009d
--- /dev/null
+++ b/page/55/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/55/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/55/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-map/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-map/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.map()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 15:20:22" itemprop="dateCreated datePublished" datetime="2020-03-24T15:20:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/54/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/54/">54</a><span class="page-number current">55</span><a class="page-number" href="/page/56/">56</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/56/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/55/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/55/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/55/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/56/index.html b/page/56/index.html
new file mode 100644
index 0000000000..28548a00e6
--- /dev/null
+++ b/page/56/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/56/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/56/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-create/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-create/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Object.create()</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/55/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/55/">55</a><span class="page-number current">56</span><a class="page-number" href="/page/57/">57</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/57/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/56/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/56/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/56/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/57/index.html b/page/57/index.html
new file mode 100644
index 0000000000..60ad9ffa15
--- /dev/null
+++ b/page/57/index.html
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/57/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/57/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" class="post-title-link" itemprop="url">自己动手实现系列 ---- 事件代理</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 14:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T14:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/56/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/56/">56</a><span class="page-number current">57</span><a class="page-number" href="/page/58/">58</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/58/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/57/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/57/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/57/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/58/index.html b/page/58/index.html
new file mode 100644
index 0000000000..b6b5d51973
--- /dev/null
+++ b/page/58/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/58/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/58/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-flat/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-flat/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.flat()函数</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 13:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/57/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/57/">57</a><span class="page-number current">58</span><a class="page-number" href="/page/59/">59</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/59/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/58/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/58/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/58/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/59/index.html b/page/59/index.html
new file mode 100644
index 0000000000..9d741cdcd3
--- /dev/null
+++ b/page/59/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/59/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/59/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-isArray/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-isArray/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.isArray</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 13:30:22" itemprop="dateCreated datePublished" datetime="2020-03-24T13:30:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/58/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/58/">58</a><span class="page-number current">59</span><a class="page-number" href="/page/60/">60</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/60/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/59/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/59/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/59/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/6/index.html b/page/6/index.html
new file mode 100644
index 0000000000..5c9fb59457
--- /dev/null
+++ b/page/6/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" class="post-title-link" itemprop="url">在Docker Compose中配置网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 19:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T19:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/5/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/7/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/60/index.html b/page/60/index.html
new file mode 100644
index 0000000000..a4b7c9d690
--- /dev/null
+++ b/page/60/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/60/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/60/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-new/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-new/" class="post-title-link" itemprop="url">自己动手实现系列 ---- new</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/59/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/59/">59</a><span class="page-number current">60</span><a class="page-number" href="/page/61/">61</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/61/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/60/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/60/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/60/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/61/index.html b/page/61/index.html
new file mode 100644
index 0000000000..a633b82c33
--- /dev/null
+++ b/page/61/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/61/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/61/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/24/do-it-yourselfery-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/24/do-it-yourselfery-reduce/" class="post-title-link" itemprop="url">自己动手实现系列 ---- Array.prototype.reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-24 04:40:22" itemprop="dateCreated datePublished" datetime="2020-03-24T04:40:22+00:00">2020-03-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/60/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/60/">60</a><span class="page-number current">61</span><a class="page-number" href="/page/62/">62</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/62/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/61/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/61/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/61/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/62/index.html b/page/62/index.html
new file mode 100644
index 0000000000..78457c562b
--- /dev/null
+++ b/page/62/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/62/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/62/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/23/path-join-vs-path-resolve/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/23/path-join-vs-path-resolve/" class="post-title-link" itemprop="url">path.join 与 path.resolve 的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-23 14:42:52" itemprop="dateCreated datePublished" datetime="2020-03-23T14:42:52+00:00">2020-03-23</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/61/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/61/">61</a><span class="page-number current">62</span><a class="page-number" href="/page/63/">63</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/63/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/62/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/62/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/62/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/63/index.html b/page/63/index.html
new file mode 100644
index 0000000000..edc9bfc3da
--- /dev/null
+++ b/page/63/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/63/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/63/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/03/03/Speeding-up-brew-with-Ali-mirroring/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" class="post-title-link" itemprop="url">使用阿里镜像加速brew（转载）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-03-03 22:00:00" itemprop="dateCreated datePublished" datetime="2020-03-03T22:00:00+00:00">2020-03-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a target="_blank" rel="noopener" href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/62/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/62/">62</a><span class="page-number current">63</span><a class="page-number" href="/page/64/">64</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/64/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/63/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/63/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/63/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/64/index.html b/page/64/index.html
new file mode 100644
index 0000000000..d4d709f24d
--- /dev/null
+++ b/page/64/index.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/64/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/64/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/24/Vue-plug-in-development/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/24/Vue-plug-in-development/" class="post-title-link" itemprop="url">vue插件开发（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-24 22:00:00" itemprop="dateCreated datePublished" datetime="2020-02-24T22:00:00+00:00">2020-02-24</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">前端框架</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/63/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/63/">63</a><span class="page-number current">64</span><a class="page-number" href="/page/65/">65</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/65/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/64/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/64/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/64/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/65/index.html b/page/65/index.html
new file mode 100644
index 0000000000..059eb2f0a4
--- /dev/null
+++ b/page/65/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/65/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/65/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/23/V8-engine-memory-management-and-optimization/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/23/V8-engine-memory-management-and-optimization/" class="post-title-link" itemprop="url">v8引擎如何回收内存（笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-02-23 08:00:00 / 修改时间：07:57:18" itemprop="dateCreated datePublished" datetime="2020-02-23T08:00:00+00:00">2020-02-23</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/64/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/64/">64</a><span class="page-number current">65</span><a class="page-number" href="/page/66/">66</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/66/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/65/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/65/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/65/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/66/index.html b/page/66/index.html
new file mode 100644
index 0000000000..9a60689c47
--- /dev/null
+++ b/page/66/index.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/66/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/66/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/21/Implementation-of-the-vue-response-principle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/21/Implementation-of-the-vue-response-principle/" class="post-title-link" itemprop="url">Vue 响应式原理的实现（课程笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-21 23:00:00" itemprop="dateCreated datePublished" datetime="2020-02-21T23:00:00+00:00">2020-02-21</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/65/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/65/">65</a><span class="page-number current">66</span><a class="page-number" href="/page/67/">67</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/67/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/66/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/66/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/66/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/67/index.html b/page/67/index.html
new file mode 100644
index 0000000000..8a22604d68
--- /dev/null
+++ b/page/67/index.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/67/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/67/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/19/develop-custom-cli-tools-using-node/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/19/develop-custom-cli-tools-using-node/" class="post-title-link" itemprop="url">使用node开发自定义cli工具</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-19 15:00:00" itemprop="dateCreated datePublished" datetime="2020-02-19T15:00:00+00:00">2020-02-19</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/66/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/66/">66</a><span class="page-number current">67</span><a class="page-number" href="/page/68/">68</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/68/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/67/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/67/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/67/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/68/index.html b/page/68/index.html
new file mode 100644
index 0000000000..5620d9bfac
--- /dev/null
+++ b/page/68/index.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/68/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/68/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/vue-proxyTable-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/12/vue-proxyTable-problem/" class="post-title-link" itemprop="url">Could not proxy request XXX from localhost:8080 to localhost:8081</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-12 09:00:00" itemprop="dateCreated datePublished" datetime="2020-02-12T09:00:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/67/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/67/">67</a><span class="page-number current">68</span><a class="page-number" href="/page/69/">69</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/69/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/68/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/68/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/68/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/69/index.html b/page/69/index.html
new file mode 100644
index 0000000000..db7faf45f9
--- /dev/null
+++ b/page/69/index.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/69/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/69/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/12/print-table-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/12/print-table-problem/" class="post-title-link" itemprop="url">由打印引起的一点小问题，写table时别忘了写thead和tbody</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-12 08:30:00" itemprop="dateCreated datePublished" datetime="2020-02-12T08:30:00+00:00">2020-02-12</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/68/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/68/">68</a><span class="page-number current">69</span><a class="page-number" href="/page/70/">70</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/70/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/69/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/69/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/69/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/7/index.html b/page/7/index.html
new file mode 100644
index 0000000000..a4dd5fceee
--- /dev/null
+++ b/page/7/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/Oracle-Linux-install-Docker/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/Oracle-Linux-install-Docker/" class="post-title-link" itemprop="url">在 Oracle Linux 中安装 Docker</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/" itemprop="url" rel="index"><span itemprop="name">Linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/Oracle/" itemprop="url" rel="index"><span itemprop="name">Oracle</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Linux/Oracle/Docker/" itemprop="url" rel="index"><span itemprop="name">Docker</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a target="_blank" rel="noopener" href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/6/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><span class="page-number current">7</span><a class="page-number" href="/page/8/">8</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/8/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/70/index.html b/page/70/index.html
new file mode 100644
index 0000000000..8e444c1920
--- /dev/null
+++ b/page/70/index.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/70/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/70/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/restful-architecture/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/11/restful-architecture/" class="post-title-link" itemprop="url">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/NodeJS/" itemprop="url" rel="index"><span itemprop="name">NodeJS</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a target="_blank" rel="noopener" href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/69/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/69/">69</a><span class="page-number current">70</span><a class="page-number" href="/page/71/">71</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/71/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/70/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/70/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/70/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/71/index.html b/page/71/index.html
new file mode 100644
index 0000000000..b0fc9c9338
--- /dev/null
+++ b/page/71/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/71/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/71/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/02/11/SSR/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/02/11/SSR/" class="post-title-link" itemprop="url">SSR</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-02-11 16:00:00" itemprop="dateCreated datePublished" datetime="2020-02-11T16:00:00+00:00">2020-02-11</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/02/11/SSR/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/70/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/70/">70</a><span class="page-number current">71</span><a class="page-number" href="/page/72/">72</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/72/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/71/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/71/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/71/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/72/index.html b/page/72/index.html
new file mode 100644
index 0000000000..591c67b8ef
--- /dev/null
+++ b/page/72/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/72/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/72/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/FE-guide-safe/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/22/FE-guide-safe/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络安全</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-22 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-22T14:50:21+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/22/FE-guide-safe/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/71/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/71/">71</a><span class="page-number current">72</span><a class="page-number" href="/page/73/">73</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/73/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/72/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/72/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/72/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/73/index.html b/page/73/index.html
new file mode 100644
index 0000000000..7dd971363d
--- /dev/null
+++ b/page/73/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/73/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/73/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Wepack-Tips/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/22/Wepack-Tips/" class="post-title-link" itemprop="url">webpack中loader和plugin之间的区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-22 10:38:00" itemprop="dateCreated datePublished" datetime="2020-01-22T10:38:00+00:00">2020-01-22</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">前端工程化</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/22/Wepack-Tips/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/72/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/72/">72</a><span class="page-number current">73</span><a class="page-number" href="/page/74/">74</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/74/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/73/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/73/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/73/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/74/index.html b/page/74/index.html
new file mode 100644
index 0000000000..085608741c
--- /dev/null
+++ b/page/74/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/74/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/74/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/22/Es6-arrowFunc-arguments/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/22/Es6-arrowFunc-arguments/" class="post-title-link" itemprop="url">es6中箭头函数没了arguments怎么办？</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-22 06:50:21 / 修改时间：07:34:29" itemprop="dateCreated datePublished" datetime="2020-01-22T06:50:21+00:00">2020-01-22</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/22/Es6-arrowFunc-arguments/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/73/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/73/">73</a><span class="page-number current">74</span><a class="page-number" href="/page/75/">75</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/75/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/74/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/74/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/74/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/75/index.html b/page/75/index.html
new file mode 100644
index 0000000000..f223ddebd9
--- /dev/null
+++ b/page/75/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/75/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/75/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/hexo-search/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/13/hexo-search/" class="post-title-link" itemprop="url">给我的Hexo博客添加文章内容搜索功能</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 14:50:21" itemprop="dateCreated datePublished" datetime="2020-01-13T14:50:21+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/" itemprop="url" rel="index"><span itemprop="name">杂七杂八</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB/%E5%8D%9A%E5%AE%A2%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">博客技巧</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/13/hexo-search/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/74/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/74/">74</a><span class="page-number current">75</span><a class="page-number" href="/page/76/">76</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/76/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/75/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/75/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/75/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/76/index.html b/page/76/index.html
new file mode 100644
index 0000000000..08c68a6d21
--- /dev/null
+++ b/page/76/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/76/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/76/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/13/Javascript-Design-Pattern/" class="post-title-link" itemprop="url">JavaScript 设计模式 Design Pattern</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 12:22:22" itemprop="dateCreated datePublished" datetime="2020-01-13T12:22:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/13/Javascript-Design-Pattern/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/75/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/75/">75</a><span class="page-number current">76</span><a class="page-number" href="/page/77/">77</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/77/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/76/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/76/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/76/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/77/index.html b/page/77/index.html
new file mode 100644
index 0000000000..2db298178c
--- /dev/null
+++ b/page/77/index.html
@@ -0,0 +1,580 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/77/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/77/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/FE-guide-inherit2/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/13/FE-guide-inherit2/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承类型</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 03:18:22" itemprop="dateCreated datePublished" datetime="2020-01-13T03:18:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/76/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/76/">76</a><span class="page-number current">77</span><a class="page-number" href="/page/78/">78</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/78/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/77/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/77/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/77/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/78/index.html b/page/78/index.html
new file mode 100644
index 0000000000..ffd6addba7
--- /dev/null
+++ b/page/78/index.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/78/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/78/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/13/do-it-yourselfery-promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/13/do-it-yourselfery-promise/" class="post-title-link" itemprop="url">自己动手实现系列 ---- promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-13 00:40:22" itemprop="dateCreated datePublished" datetime="2020-01-13T00:40:22+00:00">2020-01-13</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/77/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/77/">77</a><span class="page-number current">78</span><a class="page-number" href="/page/79/">79</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/79/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/78/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/78/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/78/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/79/index.html b/page/79/index.html
new file mode 100644
index 0000000000..f792390ede
--- /dev/null
+++ b/page/79/index.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/79/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/79/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/career/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/09/career/" class="post-title-link" itemprop="url">如何正确使用时间[转载]</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 16:33:22" itemprop="dateCreated datePublished" datetime="2020-01-09T16:33:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/" itemprop="url" rel="index"><span itemprop="name">自我提升</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E8%87%AA%E6%88%91%E6%8F%90%E5%8D%87/%E4%BA%BA%E7%94%9F%E6%80%9D%E8%80%83/" itemprop="url" rel="index"><span itemprop="name">人生思考</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a target="_blank" rel="noopener" href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/78/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/78/">78</a><span class="page-number current">79</span><a class="page-number" href="/page/80/">80</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/80/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/79/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/79/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/79/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/8/index.html b/page/8/index.html
new file mode 100644
index 0000000000..7cbe6f2f5a
--- /dev/null
+++ b/page/8/index.html
@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" class="post-title-link" itemprop="url">服务器高危端口列表</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/Infrastructure/" itemprop="url" rel="index"><span itemprop="name">Infrastructure</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/7/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/9/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/80/index.html b/page/80/index.html
new file mode 100644
index 0000000000..a14620465d
--- /dev/null
+++ b/page/80/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/solve-get-params-so-long-problem/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/09/solve-get-params-so-long-problem/" class="post-title-link" itemprop="url">解决get请求过长的问题小记</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 11:22:22" itemprop="dateCreated datePublished" datetime="2020-01-09T11:22:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E9%97%AE%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端问题</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/09/solve-get-params-so-long-problem/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/79/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/79/">79</a><span class="page-number current">80</span><a class="page-number" href="/page/81/">81</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/81/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/81/index.html b/page/81/index.html
new file mode 100644
index 0000000000..0fbf02d1b8
--- /dev/null
+++ b/page/81/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/81/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/81/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/do-it-yourselfery-jsonp/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/09/do-it-yourselfery-jsonp/" class="post-title-link" itemprop="url">自己动手实现系列 ---- jsonp</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 08:40:22" itemprop="dateCreated datePublished" datetime="2020-01-09T08:40:22+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">源码原理</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%BA%90%E7%A0%81%E5%8E%9F%E7%90%86/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" itemprop="url" rel="index"><span itemprop="name">自己动手实现系列</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/80/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/80/">80</a><span class="page-number current">81</span><a class="page-number" href="/page/82/">82</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/82/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/81/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/81/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/81/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/82/index.html b/page/82/index.html
new file mode 100644
index 0000000000..e07b500e24
--- /dev/null
+++ b/page/82/index.html
@@ -0,0 +1,617 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/82/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/82/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-data-structure/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/09/FE-guide-data-structure/" class="post-title-link" itemprop="url">计算机通识 ---- 数据结构</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%80%9A%E8%AF%86/" itemprop="url" rel="index"><span itemprop="name">计算机通识</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/81/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/81/">81</a><span class="page-number current">82</span><a class="page-number" href="/page/83/">83</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/83/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/82/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/82/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/82/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/83/index.html b/page/83/index.html
new file mode 100644
index 0000000000..b91e05d286
--- /dev/null
+++ b/page/83/index.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/09/FE-guide-Net/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/09/FE-guide-Net/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 网络</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-09 07:35:00" itemprop="dateCreated datePublished" datetime="2020-01-09T07:35:00+00:00">2020-01-09</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/82/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/82/">82</a><span class="page-number current">83</span><a class="page-number" href="/page/84/">84</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/84/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/84/index.html b/page/84/index.html
new file mode 100644
index 0000000000..c2d56c9c5d
--- /dev/null
+++ b/page/84/index.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-vuepress/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/05/FE-guide-vuepress/" class="post-title-link" itemprop="url">介绍一个好用的doc展示库 ---- vuepress</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-05 17:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T17:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index"><span itemprop="name">效率工具</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E6%95%88%E7%8E%87%E5%B7%A5%E5%85%B7/Labrary/" itemprop="url" rel="index"><span itemprop="name">Labrary</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+          <!--noindex-->
+            <div class="post-button">
+              <a class="btn" href="/2020/01/05/FE-guide-vuepress/#more" rel="contents">
+                阅读全文 &raquo;
+              </a>
+            </div>
+          <!--/noindex-->
+        
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/83/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/83/">83</a><span class="page-number current">84</span><a class="page-number" href="/page/85/">85</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/85/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/85/index.html b/page/85/index.html
new file mode 100644
index 0000000000..6390652736
--- /dev/null
+++ b/page/85/index.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-currying/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/05/FE-guide-currying/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 柯里化 currying</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-05 09:59:22" itemprop="dateCreated datePublished" datetime="2020-01-05T09:59:22+00:00">2020-01-05</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/84/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/84/">84</a><span class="page-number current">85</span><a class="page-number" href="/page/86/">86</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/86/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/85/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/85/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/85/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/86/index.html b/page/86/index.html
new file mode 100644
index 0000000000..db102b1d48
--- /dev/null
+++ b/page/86/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-about-reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/05/FE-guide-about-reduce/" class="post-title-link" itemprop="url">reduce函数的妙用 ---- 实现map和filter</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-05 08:55:00 / 修改时间：08:53:53" itemprop="dateCreated datePublished" datetime="2020-01-05T08:55:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/85/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/85/">85</a><span class="page-number current">86</span><a class="page-number" href="/page/87/">87</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/87/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/87/index.html b/page/87/index.html
new file mode 100644
index 0000000000..f366fb57d8
--- /dev/null
+++ b/page/87/index.html
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/87/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/87/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/05/FE-guide-ArrayOprs/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/05/FE-guide-ArrayOprs/" class="post-title-link" itemprop="url">数组常见操作 ---- 去重、扁平、取最大最小值</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-05 03:05:00 / 修改时间：07:47:21" itemprop="dateCreated datePublished" datetime="2020-01-05T03:05:00+00:00">2020-01-05</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/86/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/86/">86</a><span class="page-number current">87</span><a class="page-number" href="/page/88/">88</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/88/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/87/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/87/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/87/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/88/index.html b/page/88/index.html
new file mode 100644
index 0000000000..625d12fc0c
--- /dev/null
+++ b/page/88/index.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/04/Algorithm/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/04/Algorithm/" class="post-title-link" itemprop="url">JavaScript实现经典排序算法</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-04 07:18:22" itemprop="dateCreated datePublished" datetime="2020-01-04T07:18:22+00:00">2020-01-04</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a target="_blank" rel="noopener" href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a target="_blank" rel="noopener" href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/87/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/87/">87</a><span class="page-number current">88</span><a class="page-number" href="/page/89/">89</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/89/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/89/index.html b/page/89/index.html
new file mode 100644
index 0000000000..fdbc4644fe
--- /dev/null
+++ b/page/89/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/89/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/89/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-store/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-store/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 浏览器存储</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 04:37:22" itemprop="dateCreated datePublished" datetime="2020-01-03T04:37:22+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/88/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/88/">88</a><span class="page-number current">89</span><a class="page-number" href="/page/90/">90</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/90/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/89/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/89/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/89/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/9/index.html b/page/9/index.html
new file mode 100644
index 0000000000..22a7cafdbe
--- /dev/null
+++ b/page/9/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" class="post-title-link" itemprop="url">systemctl 命令</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2022-08-02 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-02T18:00:00+00:00">2022-08-02</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2023-09-20 10:18:17" itemprop="dateModified" datetime="2023-09-20T10:18:17+00:00">2023-09-20</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/linux/" itemprop="url" rel="index"><span itemprop="name">linux</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/linux/systemctl/" itemprop="url" rel="index"><span itemprop="name">systemctl</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/8/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/10/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/90/index.html b/page/90/index.html
new file mode 100644
index 0000000000..d4745862d1
--- /dev/null
+++ b/page/90/index.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/90/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/90/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" class="post-title-link" itemprop="url">为什么 0.1 + 0.2 != 0.3</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+              
+
+              <time title="创建时间：2020-01-03 04:10:00 / 修改时间：04:10:21" itemprop="dateCreated datePublished" datetime="2020-01-03T04:10:00+00:00">2020-01-03</time>
+            </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/89/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/89/">89</a><span class="page-number current">90</span><a class="page-number" href="/page/91/">91</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/91/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/90/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/90/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/90/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/91/index.html b/page/91/index.html
new file mode 100644
index 0000000000..ab60c81111
--- /dev/null
+++ b/page/91/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/91/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/91/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-Proxy/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-async-Proxy/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Proxy</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 04:00:00" itemprop="dateCreated datePublished" datetime="2020-01-03T04:00:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/90/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/90/">90</a><span class="page-number current">91</span><a class="page-number" href="/page/92/">92</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/92/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/91/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/91/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/91/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/92/index.html b/page/92/index.html
new file mode 100644
index 0000000000..b0ecee174a
--- /dev/null
+++ b/page/92/index.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/92/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/92/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-async-await/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-async-await/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- async 和 await</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/91/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/91/">91</a><span class="page-number current">92</span><a class="page-number" href="/page/93/">93</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/93/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/92/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/92/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/92/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/93/index.html b/page/93/index.html
new file mode 100644
index 0000000000..f7ce26cdcf
--- /dev/null
+++ b/page/93/index.html
@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Map-FlatMap-Reduce/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:35:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:35:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/92/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/92/">92</a><span class="page-number current">93</span><a class="page-number" href="/page/94/">94</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/94/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/93/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/93/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/93/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/94/index.html b/page/94/index.html
new file mode 100644
index 0000000000..0decd4c4b9
--- /dev/null
+++ b/page/94/index.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/94/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/94/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Generator/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-Generator/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Generator 生成器</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 03:05:00" itemprop="dateCreated datePublished" datetime="2020-01-03T03:05:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/93/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/93/">93</a><span class="page-number current">94</span><a class="page-number" href="/page/95/">95</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/95/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/94/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/94/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/94/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/95/index.html b/page/95/index.html
new file mode 100644
index 0000000000..81fb708bc8
--- /dev/null
+++ b/page/95/index.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/95/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/95/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Promise/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-Promise/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- Promise</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 02:52:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:52:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/94/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/94/">94</a><span class="page-number current">95</span><a class="page-number" href="/page/96/">96</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/96/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/95/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/95/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/95/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/96/index.html b/page/96/index.html
new file mode 100644
index 0000000000..57399e49cb
--- /dev/null
+++ b/page/96/index.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/96/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/96/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-call-apply-bind/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-call-apply-bind/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- call, apply, bind 区别</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 02:19:00" itemprop="dateCreated datePublished" datetime="2020-01-03T02:19:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/95/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/95/">95</a><span class="page-number current">96</span><a class="page-number" href="/page/97/">97</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/97/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/96/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/96/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/96/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/97/index.html b/page/97/index.html
new file mode 100644
index 0000000000..c364221885
--- /dev/null
+++ b/page/97/index.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-inherit/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-inherit/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 继承</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 01:40:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:40:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/96/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/96/">96</a><span class="page-number current">97</span><a class="page-number" href="/page/98/">98</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/98/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/98/index.html b/page/98/index.html
new file mode 100644
index 0000000000..c9c5a2b905
--- /dev/null
+++ b/page/98/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-debounce-throttle/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-debounce-throttle/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 函数防抖和节流</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 01:04:00" itemprop="dateCreated datePublished" datetime="2020-01-03T01:04:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/97/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/97/">97</a><span class="page-number current">98</span><a class="page-number" href="/page/99/">99</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/99/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/page/99/index.html b/page/99/index.html
new file mode 100644
index 0000000000..fcc40f5f4c
--- /dev/null
+++ b/page/99/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/page/99/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/page/99/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : true,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>李旭光的成长博客 - 求知若饥，虚心若愚。</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content index posts-expand">
+            
+      
+  
+  
+  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN,en,ja">
+    <link itemprop="mainEntityOfPage" href="https://blog.lifesli.com/2020/01/03/FE-guide-Module/">
+
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" content="/images/avatar.jpg">
+      <meta itemprop="name" content="李旭光">
+      <meta itemprop="description" content="学习 | 生活 | 成长">
+    </span>
+
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" content="李旭光的成长博客">
+    </span>
+      <header class="post-header">
+        <h2 class="post-title" itemprop="name headline">
+          
+            <a href="/2020/01/03/FE-guide-Module/" class="post-title-link" itemprop="url">前端常见知识点整理 ---- 模块化</a>
+        </h2>
+
+        <div class="post-meta">
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-calendar"></i>
+              </span>
+              <span class="post-meta-item-text">发表于</span>
+
+              <time title="创建时间：2020-01-03 00:41:00" itemprop="dateCreated datePublished" datetime="2020-01-03T00:41:00+00:00">2020-01-03</time>
+            </span>
+              <span class="post-meta-item">
+                <span class="post-meta-item-icon">
+                  <i class="far fa-calendar-check"></i>
+                </span>
+                <span class="post-meta-item-text">更新于</span>
+                <time title="修改时间：2020-04-02 03:20:12" itemprop="dateModified" datetime="2020-04-02T03:20:12+00:00">2020-04-02</time>
+              </span>
+            <span class="post-meta-item">
+              <span class="post-meta-item-icon">
+                <i class="far fa-folder"></i>
+              </span>
+              <span class="post-meta-item-text">分类于</span>
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
+                </span>
+                  ，
+                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端常见知识点整理</span></a>
+                </span>
+            </span>
+
+          
+
+        </div>
+      </header>
+
+    
+    
+    
+    <div class="post-body" itemprop="articleBody">
+
+      
+          <blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+      
+    </div>
+
+    
+    
+    
+      <footer class="post-footer">
+        <div class="post-eof"></div>
+      </footer>
+  </article>
+  
+  
+  
+
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/page/98/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/98/">98</a><span class="page-number current">99</span><a class="page-number" href="/page/100/">100</a><span class="space">&hellip;</span><a class="page-number" href="/page/128/">128</a><a class="extend next" rel="next" href="/page/100/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/page/99/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/page/99/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/page/99/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/placeholder b/placeholder
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/search.xml b/search.xml
new file mode 100644
index 0000000000..7d140d38ac
--- /dev/null
+++ b/search.xml
@@ -0,0 +1,7826 @@
+<?xml version="1.0" encoding="utf-8"?>
+<search>
+  <entry>
+    <title>2020年21天主题挑战之灵感篇-Day 1-写下自己期待中的生平</title>
+    <url>/2020/01/02/21-Day-Challenge-01/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得我19年总结最下面的那张照片么，那个同事送的的本子，对，就是下面这张图，这本子叫做《One In A Million》中文叫做极少数手册，是一个管理时间用的管理手册，英文如果直译的话应该是叫做万里挑一，实话说我并不是很自信，虽然我觉得自己还算可以，但远远达不到万里挑一的程度，所以，我打算好好利用这个本子，让自己尽可能成为百里挑一，千里挑一，最后万里挑一的人。</p>
+<p>本子里有一个栏目叫做21天主题挑战，21-Day Challenge，每个月21天都会给你列出一些主题，越往后列出来的主题越少，更多的需要个人去补充，我想去挑战这些内容，让自己的生活变得有目标，让自己变得更好。</p>
+<span id="more"></span>
+
+<h1 id="1月份21天主题挑战之灵感Inspiration"><a href="#1月份21天主题挑战之灵感Inspiration" class="headerlink" title="1月份21天主题挑战之灵感Inspiration"></a>1月份21天主题挑战之灵感Inspiration</h1><blockquote>
+<p>设定一个挑战主题，让自己更富有创造力，连续21天挑战，让灵感乍现，唤醒天赋。</p>
+</blockquote>
+<h1 id="第一天-Day-1-写下自己期待中的生平"><a href="#第一天-Day-1-写下自己期待中的生平" class="headerlink" title="第一天 Day 1 写下自己期待中的生平"></a>第一天 Day 1 写下自己期待中的生平</h1><p>看到这个题目之后，我闭上了眼睛，努力的回想我自己曾经的梦想是什么，什么时候丢掉了梦想，儿时的梦想，上学时的梦想，长大以后的梦想，现在的梦想，我努力回想了好久好久，儿时的梦想我想起来了，上学时的梦想我想起来了，长大后的梦想我也想起来了，但是我没能一下子找到我现在的梦想，也许现在说梦想有些奢侈，也许也有点贴不上今天的主题期待中的人生，我不太会写文章，但是想到哪里写哪里吧，我先写下我之前的那些个梦想。</p>
+<h2 id="小时候的梦想-成为科学家"><a href="#小时候的梦想-成为科学家" class="headerlink" title="小时候的梦想-成为科学家"></a>小时候的梦想-成为科学家</h2><p>小时候的梦想说出来很简单，但是是那么真诚，真诚就容易打动人，说实话我记性不是太好，已经忘掉了小时候的梦想，所以我问了我妈，我妈笑话我，说我咋不记得小时候那伟大的梦想了，妈妈说我儿时的梦想是当科学家，那会应该是上小学吧，妈妈说学校老师让写作文，标题就是我的梦想，我的作文里写的是成为科学家，这个科学家不像是别人写的，比如造火箭，造大炮又或者是造卫星造原子弹，我的梦想现在说起来与其说是科学家，不如说是药剂师更贴切，妈妈笑着跟我说我当时的梦想是做一个科学家，要研究出来一种长生不老的药，然后让爸爸妈妈吃下以后就可以永远健康年轻，妈妈说那个时候她总逗我，看到路上漂亮的阿姨就会问我，那个阿姨漂亮么，起初我会说漂亮，然后妈妈就会说那让她给你当妈妈好不好，我呢会说不好，妈妈说后来她再问的时候，我就再也不会说我要漂亮阿姨当妈妈的话了，我现在想想也许就是那时，就是因为发现妈妈越来越胖，辛苦操劳后年轻也渐渐不在我才有了这个想法吧，说实话上小学期间我一直认为自己长大能够成为一个科学家，能够造出那长生不老的药让爸妈吃下，这样我就再也不会需要一个漂亮阿姨当妈妈了。我那时希望快快长大，长大了以后我就能做科学家了。</p>
+<p>上了初中高中以后，也许是进了大城市，也许是长大了，我知道了原来的梦想可能有些遥远，学业的压力让我有些透不过气，从海岛到城市，落后了3年的时间，我通过补习班慢慢追赶，终于能够追到了班级还算靠前的位置，那个时候我的梦想很小，也很简单，那就是考个好大学找个好工作，让爸爸妈妈早点不用那么操劳，早点享福。</p>
+<h2 id="18岁的梦想-—-找个好工作，让爸妈早点享福"><a href="#18岁的梦想-—-找个好工作，让爸妈早点享福" class="headerlink" title="18岁的梦想 — 找个好工作，让爸妈早点享福"></a>18岁的梦想 — 找个好工作，让爸妈早点享福</h2><p>努力的学习，懵懂的感情，初中4年+高中3年的生活，最终我并没能特别出色的考上985/211大学，而是上了离家只有1小时车程的大外，学了计算机加日语英语，学费不便宜，每年16000，说实话没自己工作的时候不知道这16000对于一个下岗自己在家开小卖店的父母是多大的负担，工作后我才终于知道这笔钱有多少。好在原来在爸爸单位的时候接触电脑还算比较早，而我对这个新鲜玩意也算是感兴趣，大学学业上并没给我带来太大的压力，但是我也确实不是个聪明的孩子，日语仅仅过了N2，而英语则一直只是CET-4，现在回想起来，原来应该多努努力，也许现在的生活就会更好了，多想回到过去跟自己说，你要努力啊！一晃4年的大学生活就结束了，这时我终于离开了父母身边，只身去往了大城市北京，开启了我的工作生涯。</p>
+<h2 id="20岁的人生-—-多挣钱，快速成长"><a href="#20岁的人生-—-多挣钱，快速成长" class="headerlink" title="20岁的人生 — 多挣钱，快速成长"></a>20岁的人生 — 多挣钱，快速成长</h2><p>工作了以后，我就像海绵一样不断的吸收着周围的水分，学习工作中需要的技能，学习如何才能让领导器重，学习如何才能快速积累人生的财富，因为我想着，想着能快快独立反哺我的爸妈。20岁，我跟媳妇儿谈了场异地的恋爱，后来她到北京找我，再后来我们就一起回了大连。北京是个大城市，大的有时候让人迷茫，虽然工作机会比较多，但是租房的压力，环境的恶劣，家里的呼唤，最终让我选择了回到我熟悉的城市，另外找了份工资不高的工作，我不满足，我想能成为顶天立地的男子汉，后来我就来到了现在的公司华宇，而且一待就是5年。</p>
+<h2 id="华宇的职业生涯-—-5年工作，9年经验"><a href="#华宇的职业生涯-—-5年工作，9年经验" class="headerlink" title="华宇的职业生涯 — 5年工作，9年经验"></a>华宇的职业生涯 — 5年工作，9年经验</h2><p>网上有个段子我记得，一个人面试拿出简历，工作时间是2年却写着3年工作经验，面试官问他是不是写错了，他答不是，因为加班加出来的。这算是对前公司的吐槽吧。</p>
+<p>来到大连华宇时，公司还不足120人，我所在的团队还是个交互组，只有三个人，前端的话只有我和另外一个刚毕业的大学生，记得刚来公司的第一年，我参与了140个项目的开发工作，现在想想这个数字有些惊人，但是因为只是些前端切图仔的工作，对我来说感觉难度并不大，不过还是要感谢刚开始这2年，让我的基础非常扎实，再后来公司引入了前后端分离，引入了Vue框架，越来越多的业务要写，数据处理要写，加班成了家常便饭，后面这三年，我几乎没有休过除了元旦和春节的任何法定节假日，每年5天的年假也几乎都没休成，说实话每次加班加到要崩溃时候，我都会想我到底为了啥这么拼命。要不我还是换一家比较轻松一点的工作吧，工资还能涨点。说实话这段时间工作就是生活的全部，每天到家都10点以后，到家老人孩子都睡了，有时候我都睡不着，想着我的生活难道就这样了么，我不甘心，不服输。很多人劝我别那么拼命，别把公司当成自己家的，只是个打工的而已，但是有时候想着下面还有那么多新人信任着我依赖着我，我就没法撒手不管。终于时间到了19年年底，5年来培养的前端团队最后还是没守护住，要拆到各项目团队了，一开始真的难以接受，不过公司领导层已经决定了，作为一线员工只能服从，我希望大家能够把心中的担忧都能消除掉，在新的团队里开启新的篇章，也许会有更好的发展，如果有一天离开了华宇，也要江湖相望，常聚聚。</p>
+<h2 id="2020年31岁踏上新的旅途"><a href="#2020年31岁踏上新的旅途" class="headerlink" title="2020年31岁踏上新的旅途"></a>2020年31岁踏上新的旅途</h2><p>还是感谢小可爱的这个本子，让我能够有主题想想我未来到底想要什么样的生活，说句实在话，我向往不为钱发愁工作的日子，可以在做好自己工作之外的时间里多陪陪家人，带着孩子常出去走走，见见外面的世界，说实话已经31岁了，除了谈恋爱时去找媳妇儿去过江浙苏杭，工作原因去过北京/青海，好像这些年也就去了趟南京，现在的我已经有些不知道什么叫做生活了，我希望自己的空闲时间是可以让兴趣填满的，可以和朋友同事同学多聚聚，但是怕打扰大家我又从来不会主动去约别人，小时候没有听从爸妈的话培养自己的兴趣，现在有些后悔，真的空闲下来都不知道该用什么填满这时间，都是躺在床上刷手机，看电视，我不喜欢这样的生活，但是我不知道该过怎么样的生活。看到那些会做饭的视频，做顿丰盛的饭菜给家人吃，看到他们的幸福笑脸，我想做那样的事；看到带着家人过着一路向前增长见闻的旅途生活，我想也尝试一下那样的人生，我感觉为了钱我被束缚在了工作上，2020年我想过一种不为工作所累，不为钱所累，能够享受生活，陪伴家人的生活，保重身体，每天快快乐乐的，多发现生活中的美好，感恩，努力，成长。期待自己成为更好的人。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>我所期待中的生平，成为一个不被工作强迫，不被金钱所累，爱家顾家，孝敬父母，人缘好朋友多，兴趣广泛，感恩的人。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>杂记随感</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</title>
+    <url>/2020/04/16/0-vuecli-3-component/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。</p>
+<p>所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。</p>
+<p>以下一个简单的颜色选择器插件vColorPicker讲述从开发到上线到npm的流程。</p>
+<p><a href="http://vue-color-picker.rxshc.com/">vColorPicker 插件 DEMO</a></p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><p>如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。</p>
+<ul>
+<li>Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库</li>
+<li>npm：组件库将存放在npm</li>
+<li>webpack：修改配置需要一点 webapck 的知识。</li>
+</ul>
+<h2 id="二、大纲"><a href="#二、大纲" class="headerlink" title="二、大纲"></a>二、大纲</h2><p>想要搭建一个组件库，我们必须先要有一个大概的思路。</p>
+<ol>
+<li>规划目录结构</li>
+<li>配置项目以支持目录结构</li>
+<li>编写组件</li>
+<li>编写示例</li>
+<li>配置使用库模式打包编译</li>
+<li>发布到npm</li>
+</ol>
+<h2 id="三、规划目录结构"><a href="#三、规划目录结构" class="headerlink" title="三、规划目录结构"></a>三、规划目录结构</h2><h3 id="1、创建项目"><a href="#1、创建项目" class="headerlink" title="1、创建项目"></a>1、创建项目</h3><p>在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$ vue create .</span><br></pre></td></tr></table></figure>
+<h3 id="2、调整目录"><a href="#2、调整目录" class="headerlink" title="2、调整目录"></a>2、调整目录</h3><p>我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">...</span><br><span class="line">|-- examples      <span class="comment">// 原 src 目录，改成 examples 用作示例展示</span></span><br><span class="line">|-- packages      <span class="comment">// 新增 packages 用于编写存放组件</span></span><br><span class="line">...</span><br><span class="line">.</span><br></pre></td></tr></table></figure>
+<h2 id="四、配置项目以支持新的目录结构"><a href="#四、配置项目以支持新的目录结构" class="headerlink" title="四、配置项目以支持新的目录结构"></a>四、配置项目以支持新的目录结构</h2><p>我们通过上一步的目录改造后，会遇到两个问题。</p>
+<ol>
+<li>src目录更名为examples，导致项目无法运行</li>
+<li>新增packages目录，该目录未加入webpack编译</li>
+</ol>
+<p><strong>注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。</strong></p>
+<h3 id="1、重新配置入口，修改配置中的-pages-选项"><a href="#1、重新配置入口，修改配置中的-pages-选项" class="headerlink" title="1、重新配置入口，修改配置中的 pages 选项"></a>1、重新配置入口，修改配置中的 pages 选项</h3><p>新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。</p>
+<p>这里使用 pages 修改入口到 examples</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项"><a href="#2、支持对-packages-目录的处理，修改配置中的-chainWebpack-选项" class="headerlink" title="2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项"></a>2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项</h3><p>packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。</p>
+<p>chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 修改 src 为 examples</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      entry: <span class="string">&#x27;examples/main.js&#x27;</span>,</span><br><span class="line">      template: <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">      filename: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 扩展 webpack 配置，使 packages 加入编译</span></span><br><span class="line">  chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.module</span><br><span class="line">      .rule(<span class="string">&#x27;js&#x27;</span>)</span><br><span class="line">      .include</span><br><span class="line">        .add(<span class="string">&#x27;packages&#x27;</span>)</span><br><span class="line">        .end()</span><br><span class="line">      .use(<span class="string">&#x27;babel&#x27;</span>)</span><br><span class="line">        .loader(<span class="string">&#x27;babel-loader&#x27;</span>)</span><br><span class="line">        .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 修改它的选项...</span></span><br><span class="line">          <span class="keyword">return</span> options</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><a href="https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7">链式操作</a><br><a href="https://github.com/neutrinojs/webpack-chain">webpack-chain</a></p>
+<h2 id="五、编写组件"><a href="#五、编写组件" class="headerlink" title="五、编写组件"></a>五、编写组件</h2><p>以上我们已配置好对新目录架构的支持，接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。<br><a href="https://github.com/zuley/vue-color-picker">GitHub - 颜色选择器：vcolorpicker</a></p>
+<h3 id="1-创建一个新组件"><a href="#1-创建一个新组件" class="headerlink" title="1. 创建一个新组件"></a>1. 创建一个新组件</h3><ol>
+<li>在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/</li>
+<li>在 color-picker/ 目录下创建 src/ 目录存储组件源码</li>
+<li>在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。<br>修改 /packages/color-picker/index.js文件，对外提供引用。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// ./packages/color-picker/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件，组件必须声明 name</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./src/color-picker.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 为组件提供 install 安装方法，供按需引入</span></span><br><span class="line">colorPicker = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  Vue.component(colorPicker.name, colorPicker)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> colorPicker</span><br></pre></td></tr></table></figure>
+<h3 id="2-整合所有的组件，对外导出，即一个完整的组件库"><a href="#2-整合所有的组件，对外导出，即一个完整的组件库" class="headerlink" title="2. 整合所有的组件，对外导出，即一个完整的组件库"></a>2. 整合所有的组件，对外导出，即一个完整的组件库</h3><p>修改 /packages/index.js 文件，对整个组件库进行导出。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// ./packages/index.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入颜色选择器组件</span></span><br><span class="line"><span class="keyword">import</span> colorPicker <span class="keyword">from</span> <span class="string">&#x27;./color-picker&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 存储组件列表</span></span><br><span class="line"><span class="keyword">const</span> components = [</span><br><span class="line">  colorPicker</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册</span></span><br><span class="line"><span class="keyword">const</span> install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否安装</span></span><br><span class="line">  <span class="keyword">if</span> (install.installed) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">// 遍历注册全局组件</span></span><br><span class="line">  components.map(<span class="function"><span class="params">component</span> =&gt;</span> Vue.component(component.name, component))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否是直接引入文件</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&#x27;undefined&#x27;</span> &amp;&amp; <span class="built_in">window</span>.Vue) &#123;</span><br><span class="line">  install(<span class="built_in">window</span>.Vue)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 导出的对象必须具有 install，才能被 Vue.use() 方法安装</span></span><br><span class="line">  install,</span><br><span class="line">  <span class="comment">// 以下是具体的组件列表</span></span><br><span class="line">  colorPicker</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="六、编写示例"><a href="#六、编写示例" class="headerlink" title="六、编写示例"></a>六、编写示例</h2><h3 id="1、在示例中导入组件库"><a href="#1、在示例中导入组件库" class="headerlink" title="1、在示例中导入组件库"></a>1、在示例中导入组件库</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入组件库</span></span><br><span class="line"><span class="keyword">import</span> ColorPicker <span class="keyword">from</span> <span class="string">&#x27;./../packages/index&#x27;</span></span><br><span class="line"><span class="comment">// 注册组件库</span></span><br><span class="line">Vue.use(ColorPicker)</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<h3 id="2、在示例中使用组件库中的组件"><a href="#2、在示例中使用组件库中的组件" class="headerlink" title="2、在示例中使用组件库中的组件"></a>2、在示例中使用组件库中的组件</h3><p>在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> v-on:change=<span class="string">&quot;headleChangeColor&quot;</span>&gt;&lt;/colorPicker&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	data () &#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	methods: &#123;</span><br><span class="line">		headleChangeColor () &#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;颜色改变&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<h2 id="七、发布到-npm，方便直接在项目中引用"><a href="#七、发布到-npm，方便直接在项目中引用" class="headerlink" title="七、发布到 npm，方便直接在项目中引用"></a>七、发布到 npm，方便直接在项目中引用</h2><p>到此为止我们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用。</p>
+<h3 id="1、package-js-中新增一条编译为库的命令"><a href="#1、package-js-中新增一条编译为库的命令" class="headerlink" title="1、package.js 中新增一条编译为库的命令"></a>1、package.js 中新增一条编译为库的命令</h3><p>在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。</p>
+<p><a href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93">Vue Cli3 构建目标：库</a></p>
+<p>以下我们在 scripts 中新增一条命令</p>
+<ul>
+<li>–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。</li>
+<li>–dest : 输出目录，默认 dist。这里我们改成 lib</li>
+<li>[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="string">&quot;script&quot;</span>: &#123;</span><br><span class="line">	<span class="comment">// ...</span></span><br><span class="line">	<span class="string">&quot;lib&quot;</span>: <span class="string">&quot;vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ul>
+<p><strong>执行编译库命令</strong></p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm run lib</span><br></pre></td></tr></table></figure>
+<h3 id="2、配置-package-json-文件中发布到-npm-的字段"><a href="#2、配置-package-json-文件中发布到-npm-的字段" class="headerlink" title="2、配置 package.json 文件中发布到 npm 的字段"></a>2、配置 package.json 文件中发布到 npm 的字段</h3><ul>
+<li>name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。</li>
+<li>version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。</li>
+<li>description: 描述。</li>
+<li>main: 入口文件，该字段需指向我们最终编译后的包文件。</li>
+<li>keyword：关键字，以空格分离希望用户最终搜索的词。</li>
+<li>author：作者</li>
+<li>private：是否私有，需要修改为 false 才能发布到 npm</li>
+<li>license： 开源协议</li>
+</ul>
+<p>以下为参考设置</p>
+<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;vcolorpicker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.1.5&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;description&quot;</span>: <span class="string">&quot;基于 Vue 的颜色选择器&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;lib/vcolorpicker.umd.min.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;keyword&quot;</span>: <span class="string">&quot;vcolorpicker colorpicker color-picker&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">false</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
+<h3 id="3、添加-npmignore-文件，设置忽略发布文件"><a href="#3、添加-npmignore-文件，设置忽略发布文件" class="headerlink" title="3、添加 .npmignore 文件，设置忽略发布文件"></a>3、添加 .npmignore 文件，设置忽略发布文件</h3><p>我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。</p>
+<p>和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 忽略目录</span></span><br><span class="line">examples/</span><br><span class="line">packages/</span><br><span class="line">public/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 忽略指定文件</span></span><br><span class="line">vue.config.js</span><br><span class="line">babel.config.js</span><br><span class="line">*.map</span><br></pre></td></tr></table></figure>
+<h3 id="4、登录到-npm"><a href="#4、登录到-npm" class="headerlink" title="4、登录到 npm"></a>4、登录到 npm</h3><p>首先需要到 npm 上注册一个账号，注册过程略。</p>
+<p>如果配置了淘宝镜像，先设置回npm镜像：</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm config <span class="built_in">set</span> registry http://registry.npmjs.org</span><br></pre></td></tr></table></figure>
+<p>然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm login</span><br></pre></td></tr></table></figure>
+
+<h3 id="5、发布到-npm"><a href="#5、发布到-npm" class="headerlink" title="5、发布到 npm"></a>5、发布到 npm</h3><p>执行发布命令，发布组件到 npm</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm publish</span><br></pre></td></tr></table></figure>
+
+<h3 id="6、发布成功"><a href="#6、发布成功" class="headerlink" title="6、发布成功"></a>6、发布成功</h3><p>发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker</p>
+<h3 id="7、使用新发布的组件库"><a href="#7、使用新发布的组件库" class="headerlink" title="7、使用新发布的组件库"></a>7、使用新发布的组件库</h3><p>安装</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install vcolorpicker -S</span><br></pre></td></tr></table></figure>
+<p>使用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在 main.js 引入并注册</span></span><br><span class="line"><span class="keyword">import</span> vcolorpicker <span class="keyword">from</span> <span class="string">&#x27;vcolorpicker&#x27;</span></span><br><span class="line">Vue.use(vcolorpicker)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在组件中使用</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;colorPicker v-model=<span class="string">&quot;color&quot;</span> /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        color: <span class="string">&#x27;#ff0000&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
+<p>暂时没有做包含多个组件的时候的按需加载，以后研究了再补充。</p>
+<h2 id="八、项目地址"><a href="#八、项目地址" class="headerlink" title="八、项目地址"></a>八、项目地址</h2><p><a href="https://github.com/zuley/vue-color-picker">Github 地址：https://github.com/zuley/vue-color-picker</a><br><a href="https://www.npmjs.com/package/vcolorpicker">npm 地址：https://www.npmjs.com/package/vcolorpicker</a><br><a href="http://vue-color-picker.rxshc.com/">DEMO 演示：http://vue-color-picker.rxshc.com</a></p>
+<h2 id="九、参考文章"><a href="#九、参考文章" class="headerlink" title="九、参考文章"></a>九、参考文章</h2><p><a href="https://zhuanlan.zhihu.com/p/30948290">从零开始搭建Vue组件库 VV-UI</a><br><a href="https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6">Vue插件开发</a><br><a href="https://cn.vuejs.org/v2/guide/components.html">组件基础</a></p>
+]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>Vue</category>
+      </categories>
+      <tags>
+        <tag>打包</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>CSS border三角、圆角图形生成技术详解</title>
+    <url>/2013/06/26/CSS-Triangle-Circle/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。</p>
+<span id="more"></span>
+
+<h1 id="CSS-border生成三角技术简介"><a href="#CSS-border生成三角技术简介" class="headerlink" title="CSS border生成三角技术简介"></a>CSS border生成三角技术简介</h1><h2 id="效果抢鲜"><a href="#效果抢鲜" class="headerlink" title="效果抢鲜"></a>效果抢鲜</h2><p>下图为使用CSS的border属性实现的三角效果：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何实现的，为何会有这样的效果，不急，take it easy!</p>
+<h2 id="梯形图案"><a href="#梯形图案" class="headerlink" title="梯形图案"></a>梯形图案</h2><p>看下面这段样式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 10px; </span><br><span class="line">  height: 10px; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #0000ff #339966 #00ff00</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：</p>
+<h2 id="更进一步-–-部分边框透明"><a href="#更进一步-–-部分边框透明" class="headerlink" title="更进一步 – 部分边框透明"></a>更进一步 – 部分边框透明</h2><p>现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width:10px; </span><br><span class="line">  height:10px; </span><br><span class="line">  border:10px solid; </span><br><span class="line">  border-color:#ff3300 #ffffff #ffffff #ffffff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下图（截自Firefox3.5）：</p>
+<h2 id="从梯形到三角"><a href="#从梯形到三角" class="headerlink" title="从梯形到三角"></a>从梯形到三角</h2><p>上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border: 10px solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>结果如下（依旧截图自Firefox3.5）：</p>
+<h2 id="从等腰直角三角形到普通等腰三角"><a href="#从等腰直角三角形到普通等腰三角" class="headerlink" title="从等腰直角三角形到普通等腰三角"></a>从等腰直角三角形到普通等腰三角</h2><p>上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ffffff #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<p>得到的结果如下图：</p>
+<h2 id="从等腰到不等腰"><a href="#从等腰到不等腰" class="headerlink" title="从等腰到不等腰"></a>从等腰到不等腰</h2><p>我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.test&#123;</span><br><span class="line">  width: 0; </span><br><span class="line">  height: 0; </span><br><span class="line">  border-width: 20px 10px; </span><br><span class="line">  border-style: solid; </span><br><span class="line">  border-color: #ff3300 #ff3300 #ffffff #ffffff;&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="实际的应用"><a href="#实际的应用" class="headerlink" title="实际的应用"></a>实际的应用</h2><p>关于应用，不多说，直接看图：<br>说明：<br>以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&amp;Dashed终极分析及IE6透明边框。</p>
+<h1 id="CSS-border圆角生成技术简介"><a href="#CSS-border圆角生成技术简介" class="headerlink" title="CSS border圆角生成技术简介"></a>CSS border圆角生成技术简介</h1><h2 id="我看圆角"><a href="#我看圆角" class="headerlink" title="我看圆角"></a>我看圆角</h2><p>一提到圆角，我脑中闪过的词就是“定位”，“嵌套”，“模拟”，“渐进增强”，“滥用”。</p>
+<ul>
+<li>定位，也就是切四个角上下左右定位，这是淘宝首页的做法，但是面对IE6的奇偶bug只能当作看客；</li>
+<li>使用“嵌套”则不会有此问题，“嵌套”分图片背景嵌套和CSS边框嵌套，使用图片嵌套则图片的重用性，大小优化有待加强，边框嵌套则技术实现上有些难度；</li>
+<li>或使用“渐进增强”，CSS3 border-radius属性，而不要去鸟IE这类自我感觉良好的浏览器；</li>
+<li>或是学习Google使用CSS模拟，而一般的CSS模拟都是使用左右边框+背景色的方式1像素1像素的拼合成的。这类方法各有优缺点，需根据实际情况采用。对于满眼圆角的设计图我是很不喜欢的，该用则用，切勿为了圆角而圆角。</li>
+</ul>
+<h2 id="border圆角图案生成法"><a href="#border圆角图案生成法" class="headerlink" title="border圆角图案生成法"></a>border圆角图案生成法</h2><p>这里介绍的实现圆角的得到与上面提到的都是不一样的，虽然也属于CSS模拟的范畴，但是其高效的程度确实相当惊人的，可谓最佳实践之一。<br>我们先看看效果，见下图，截自Firefox3.6：<br>上述效果的实现仅仅使用了三个标签，如下代码：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; html 代码</span><br><span class="line">&lt;div class&#x3D;&quot;box&quot;&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;top&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;center&quot;&gt;我是一只小小鸟、小小鸟！&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;bot&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; css 代码</span><br><span class="line">.box&#123;</span><br><span class="line">  width:500px;</span><br><span class="line">&#125;</span><br><span class="line">.top&#123;</span><br><span class="line">  border-bottom:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cc0000; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br><span class="line">.center&#123;</span><br><span class="line">  padding:10px 20px; </span><br><span class="line">  color:white; </span><br><span class="line">  font-size:14px; </span><br><span class="line">  background:#cc0000;</span><br><span class="line">&#125;</span><br><span class="line">.bot&#123;</span><br><span class="line">  border-top:3px solid; </span><br><span class="line">  border-top-color:#cc0000; </span><br><span class="line">  border-bottom-color:#cccccc; </span><br><span class="line">  border-left:3px dotted transparent; </span><br><span class="line">  border-right:3px dotted transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们看看这段代码在IE6下的效果：</p>
+<p>这里的高效在于，仅仅使用了一层标签就模拟了3像素的圆角，按照曾经我对CSS圆角模拟的理解，模拟1像素的圆角需要一层标签(background+borderLeft+borderRight)，两像素的需要两层标签，三像素的需要三层标签。</p>
+<p>有点神奇，但是就像看刘谦的魔术一样，说穿了也就那么回事，其实这里的圆角模拟在本文的上面已经展示了，就是这样图片：</p>
+<p>您可能会疑问，是不是搞错图片啦，这显然不是一个模样的，非也非也，就本质上而言，圆角的实现与上面的梯形图就是同样的东西。现在，盯着上面这张图，我们想象一下，用力的想象，用想花姑娘的那番劲头想象——上面的梯形宽度越来越宽（不是拉伸），一直宽到500像素，是不是与上面实现的圆角的下边缘一致啊？</p>
+<p>也就是说，那个含有“我是一只小小鸟……”文字的圆角图形是有一个上梯形+矩形+下梯形组成的。参见下面的分离效果图：<br>您可以狠狠地点击这里：CSS border圆角生成demo</p>
+<h2 id="局限性"><a href="#局限性" class="headerlink" title="局限性"></a>局限性</h2><p>人无完人，金无足赤，此方法虽然简洁高效，兼容性上佳，但是依然有局限性，在实现实色背景的圆角效果时，此方法可谓首选；如果是纯粹的圆角边框，此方法也可以实现，需要用到边框重叠，但是标签数几乎要翻倍，其权衡效用将大打折扣，反不如其他圆角方法来的实在。</p>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>如果在web制作中，需要用的一些直接可以使用CSS+单标签模拟的图片，我的建议是“毫不犹豫使用CSS模拟”，例如实色的三角，或是实现实色的圆角效果，这可以说是最高效，最利于扩展维护的前端实现方法了。我们需要开阔的思维，而不要仅仅局限于眼前的技术，武侠中所谓的“无招胜有招”还是有着一定的哲学道理的，长远来看，意识与海纳百川的心态比当下的一点技术更来得重要。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>CSS</category>
+      </categories>
+      <tags>
+        <tag>CSS技巧</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>国内配置Electron开发环境的正确方式【转载】</title>
+    <url>/2020/04/07/Electron-Offline-Build/</url>
+    <content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做electron相关开发，疲于网络环境的种种限制，找遍了互联网相关资料，终于找到一篇比较全面的文章，怕丢了转过来。</p>
+<span id="more"></span>
+<p><a href="https://blog.yasking.org/a/zh-install-electron-development-2020.html">转载</a></p>
+]]></content>
+      <categories>
+        <category>大前端</category>
+        <category>客户端技术</category>
+      </categories>
+      <tags>
+        <tag>Electron</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>es6中箭头函数没了arguments怎么办？</title>
+    <url>/2020/01/22/Es6-arrowFunc-arguments/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>es6中，arguments被取消掉了，但是函数还是会有参数不确定的时候，那么我们该怎么办呢，接下来将介绍一下如何在es6中完成arguments一样的效果。</p>
+<a id="more"></a>
+
+<h2 id="剩余运算符"><a href="#剩余运算符" class="headerlink" title="剩余运算符"></a>剩余运算符</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> func = <span class="function">(<span class="params">...rest</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(rest)</span><br><span class="line">  <span class="comment">//[1,2,3]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
+
+<p>看上面的代码，有的朋友会问，这<code>...</code>的操作不应该是展开运算符么？是的，扩展运算符与剩余操作符都是以三点开头的操作符，二者长的很像，只是在用法上有些差别。它们已经被 ES6 数组支持，能解决很多之前 arguments 解决起来很麻烦的问题。</p>
+<p>简单来说剩余运算是在参数上使用的。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>es6</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>数组常见操作 ---- 去重、扁平、取最大最小值</title>
+    <url>/2020/01/05/FE-guide-ArrayOprs/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="去重"><a href="#去重" class="headerlink" title="去重"></a>去重</h1><h2 id="1-利用-Object-的-Key-唯一特性"><a href="#1-利用-Object-的-Key-唯一特性" class="headerlink" title="1. 利用 Object 的 Key 唯一特性"></a>1. 利用 <code>Object</code> 的 <code>Key</code> 唯一特性</h2><p>开辟一个外部存储空间用于标示元素是否出现过。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array)&#x3D;&gt; &#123;</span><br><span class="line">    var container &#x3D; &#123;&#125;;</span><br><span class="line">    return array.filter((item, index) &#x3D;&gt;  container.hasOwnProperty(item) ? false : (container[item] &#x3D; true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-利用-indexOf-的返回值数值进行去重"><a href="#2-利用-indexOf-的返回值数值进行去重" class="headerlink" title="2. 利用 indexOf 的返回值数值进行去重"></a>2. 利用 <code>indexOf</code> 的返回值数值进行去重</h2><p>原理是 <code>indexOf</code> 获取元素时如果返回值不等于下标说明已经有了，配合 <code>filter</code> 更美味</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; arr.filter((e,i) &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; i &#x2F;&#x2F; 如果元素找到的当前下标和当前索引相同说明是同一个，不同说明不是唯一</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>还有一种变形方法利用 <code>lastIndexOf</code> 方法</p>
+<blockquote>
+<p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const filterNonUnique &#x3D; arr &#x3D;&gt; arr.filter(e &#x3D;&gt; </span><br><span class="line">  arr.indexOf(e) &#x3D;&#x3D;&#x3D; arr.lastIndexOf(e) &#x2F;&#x2F; 判断一个元素出现时的第一次下标和最后一次下标是否相同，如果相同那么就唯一</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
+<h2 id="3-利用-Set-特性去重"><a href="#3-利用-Set-特性去重" class="headerlink" title="3. 利用 Set 特性去重"></a>3. 利用 <code>Set</code> 特性去重</h2><p><code>Set</code> 是 <code>ES6</code> 中新的数据类型，它的特点就是元素唯一性，且可以和数组进行转换</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; Array.from(new Set(arr)); &#x2F;&#x2F; Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 优化</span><br><span class="line"></span><br><span class="line">const unique &#x3D; arr &#x3D;&gt; [...new Set(arr)]; &#x2F;&#x2F; 利用 &#96;ES6&#96; 中展开操作</span><br></pre></td></tr></table></figure>
+<h2 id="4-排序后判断前后两项是否相等去重"><a href="#4-排序后判断前后两项是否相等去重" class="headerlink" title="4. 排序后判断前后两项是否相等去重"></a>4. 排序后判断前后两项是否相等去重</h2><p>通过比较相邻数字是否重复，将排序后的数组进行去重。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const unique &#x3D; (array) &#x3D;&gt; &#123;</span><br><span class="line">  array.sort((a, b) &#x3D;&gt; a - b);</span><br><span class="line">  let pre &#x3D; 0;</span><br><span class="line">  const result &#x3D; [];</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (!i || array[i] !&#x3D; array[pre]) &#123;</span><br><span class="line">      result.push(array[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    pre &#x3D; i;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="扁平"><a href="#扁平" class="headerlink" title="扁平"></a>扁平</h1><h2 id="1-普通方法"><a href="#1-普通方法" class="headerlink" title="1. 普通方法"></a>1. 普通方法</h2><p>通过递归的方式判断数组中的项是否是数组，如果不是就加入到新的扁平数组，如果是就递归调用逐层判断，直到全部结束</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const flatten &#x3D; (array) &#x3D;&gt; &#123; &#x2F;&#x2F; array 原数组</span><br><span class="line">  let result &#x3D; []; &#x2F;&#x2F; 定义新的扁平数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; array.length; i++) &#123;</span><br><span class="line">    if (Array.isArray(array[i])) &#123; &#x2F;&#x2F; 判断子元素是否是数组</span><br><span class="line">      result &#x3D; result.concat(flatten(array[i])); &#x2F;&#x2F; 递归判断</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      result.push(array[i]); &#x2F;&#x2F; 加入新数组</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-使用reduce简化上述方法"><a href="#2-使用reduce简化上述方法" class="headerlink" title="2. 使用reduce简化上述方法"></a>2. 使用reduce简化上述方法</h2><blockquote>
+<p>reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。<br>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)</li>
+<li>您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>先看一段 reduce 的示例函数</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array1 &#x3D; [1, 2, 3, 4];</span><br><span class="line">const reducer &#x3D; (accumulator, currentValue) &#x3D;&gt; accumulator + currentValue; &#x2F;&#x2F; 定义一个累计器函数，作用是将数组前后累计值与当前值累加</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer)); &#x2F;&#x2F; 没有初始值用第一个元素</span><br><span class="line">&#x2F;&#x2F; expected output: 10</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 5 + 1 + 2 + 3 + 4</span><br><span class="line">console.log(array1.reduce(reducer, 5)); &#x2F;&#x2F; 有初始值从初始值开始</span><br><span class="line">&#x2F;&#x2F; expected output: 15</span><br></pre></td></tr></table></figure>
+<p>这下大家应该对 reduce 函数认识了，接下来看看怎么简化</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flatten(array) &#123;</span><br><span class="line">  return array.reduce((newArray, current) &#x3D;&gt; &#x2F;&#x2F; 新数组，当前项</span><br><span class="line">    Array.isArray(current) ? &#x2F;&#x2F; 判断当前项是否为数组</span><br><span class="line">      newArray.concat(flatten(current)) : &#x2F;&#x2F; 是的话 递归调用</span><br><span class="line">      newArray.concat(current) &#x2F;&#x2F; 不是的话加进新数组</span><br><span class="line">  , []) &#x2F;&#x2F; 初始化新数组为空</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里我们再变一个形，增加一个变量，变成可指定深度操作数组</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function flattenByDeep(array, deep &#x3D; 1) &#123; &#x2F;&#x2F; 默认一层</span><br><span class="line">  return array.reduce(</span><br><span class="line">    (target, current) &#x3D;&gt;</span><br><span class="line">      Array.isArray(current) &amp;&amp; deep &gt; 1 ?</span><br><span class="line">        target.concat(flattenByDeep(current, deep - 1)) : &#x2F;&#x2F; 下一次减一层</span><br><span class="line">        target.concat(current)</span><br><span class="line">    , [])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="最值"><a href="#最值" class="headerlink" title="最值"></a>最值</h1><h2 id="利用-reduce"><a href="#利用-reduce" class="headerlink" title="利用 reduce"></a>利用 <code>reduce</code></h2><p><code>reduce</code> 函数真的是超级好用，</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">array.reduce((c,n) &#x3D;&gt; Math.max(c,n))</span><br></pre></td></tr></table></figure>
+
+<h2 id="Math-max"><a href="#Math-max" class="headerlink" title="Math.max"></a>Math.max</h2><p><code>Math.max</code> 参数原本是一组数字，只需要让他可以接收数组即可。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">const array &#x3D; [3,2,1,4,5];</span><br><span class="line">Math.max.apply(null,array);</span><br><span class="line">Math.max(...array);</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- Generator 生成器</title>
+    <url>/2020/01/03/FE-guide-Generator/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Generator-实现"><a href="#Generator-实现" class="headerlink" title="Generator 实现"></a><code>Generator</code> 实现</h1><p><code>Generator</code> 是 <code>ES6</code> 中新增的语法，和 <code>Promise</code> 一样，都可以用来异步编程</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 * 表示这是一个 Generator 函数</span><br><span class="line">&#x2F;&#x2F; 内部可以通过 yield 暂停代码</span><br><span class="line">&#x2F;&#x2F; 通过调用 next 恢复执行</span><br><span class="line">function* test() &#123;</span><br><span class="line">  let a &#x3D; 1 + 2;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;</span><br><span class="line">let b &#x3D; test();</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 2, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: 3, done: false &#125;</span><br><span class="line">console.log(b.next()); &#x2F;&#x2F; &gt;  &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>
+<p>从以上代码可以发现，加上 <code>*</code> 的函数执行后拥有了 <code>next</code> 函数，也就是说函数执行后返回了一个对象。每次调用 <code>next</code> 函数可以继续执行被暂停的代码。以下是 <code>Generator</code> 函数的简单实现</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cb 也就是编译过的 test 函数</span><br><span class="line">function generator(cb) &#123;</span><br><span class="line">  return (function() &#123;</span><br><span class="line">    var object &#x3D; &#123;</span><br><span class="line">      next: 0,</span><br><span class="line">      stop: function() &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line">      next: function() &#123;</span><br><span class="line">        var ret &#x3D; cb(object);</span><br><span class="line">        if (ret &#x3D;&#x3D;&#x3D; undefined) return &#123; value: undefined, done: true &#125;;</span><br><span class="line">        return &#123;</span><br><span class="line">          value: ret,</span><br><span class="line">          done: false</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 如果你使用 babel 编译后可以发现 test 函数变成了这样</span><br><span class="line">function test() &#123;</span><br><span class="line">  var a;</span><br><span class="line">  return generator(function(_context) &#123;</span><br><span class="line">    while (1) &#123;</span><br><span class="line">      switch ((_context.prev &#x3D; _context.next)) &#123;</span><br><span class="line">        &#x2F;&#x2F; 可以发现通过 yield 将代码分割成几块</span><br><span class="line">        &#x2F;&#x2F; 每次执行 next 函数就执行一块代码</span><br><span class="line">        &#x2F;&#x2F; 并且表明下次需要执行哪块代码</span><br><span class="line">        case 0:</span><br><span class="line">          a &#x3D; 1 + 2;</span><br><span class="line">          _context.next &#x3D; 4;</span><br><span class="line">          return 2;</span><br><span class="line">        case 4:</span><br><span class="line">          _context.next &#x3D; 6;</span><br><span class="line">          return 3;</span><br><span class="line">		&#x2F;&#x2F; 执行完毕</span><br><span class="line">        case 6:</span><br><span class="line">        case &quot;end&quot;:</span><br><span class="line">          return _context.stop();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- Map、FlatMap 和 Reduce</title>
+    <url>/2020/01/03/FE-guide-Map-FlatMap-Reduce/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Map、FlatMap-和-Reduce"><a href="#Map、FlatMap-和-Reduce" class="headerlink" title="Map、FlatMap 和 Reduce"></a>Map、FlatMap 和 Reduce</h1><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a><code>Map</code></h2><p><code>Map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 <code>append</code> 到新的数组中。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, 2, 3].map((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p><code>Map</code> 有三个参数，分别是<strong><em>当前索引元素</em></strong>，<strong><em>索引</em></strong>，<strong><em>原数组</em></strong></p>
+<h2 id="FlatMap"><a href="#FlatMap" class="headerlink" title="FlatMap"></a><code>FlatMap</code></h2><p><code>FlatMap</code> 和 <code>map</code> 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 <code>FlatMap</code> 看成是 <code>map + flatten</code> ，目前该函数在浏览器中还不支持。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">[1, [2], 3].flatMap((v) &#x3D;&gt; v + 1) &#x2F;&#x2F; -&gt; [2, 3, 4]</span><br></pre></td></tr></table></figure>
+<p>如果想将一个多维数组彻底的降维，可以这样实现</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const flattenDeep &#x3D; (arr) &#x3D;&gt; Array.isArray(arr)</span><br><span class="line">  ? arr.reduce( (a, b) &#x3D;&gt; [...a, ...flattenDeep(b)] , [])</span><br><span class="line">  : [arr]</span><br><span class="line"></span><br><span class="line">flattenDeep([1, [[2], [3, [4]], 5]])</span><br></pre></td></tr></table></figure>
+
+<h2 id="Reduce-升序执行"><a href="#Reduce-升序执行" class="headerlink" title="Reduce 升序执行"></a>Reduce 升序执行</h2><p><code>Reduce</code> 作用是数组中的值组合起来，最终得到一个值<br><code>reduce()</code> 方法对数组中的每个元素执行一个由您提供的 <code>reducer</code> 函数(升序执行)，将其结果汇总为单个返回值。</p>
+<p><code>reducer</code> 函数接收4个参数:</p>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">[a, b].reduce((a, b) &#x3D;&gt; a(b()))</span><br><span class="line">&#x2F;&#x2F; -&gt; 2 1</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 模块化</title>
+    <url>/2020/01/03/FE-guide-Module/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><p>在有 <code>Babel</code> 的情况下，我们可以直接使用 <code>ES6</code> 的模块化</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file a.js</span><br><span class="line">export function a() &#123;&#125;</span><br><span class="line">export function b() &#123;&#125;</span><br><span class="line">&#x2F;&#x2F; file b.js</span><br><span class="line">export default function() &#123;&#125;</span><br><span class="line"></span><br><span class="line">import &#123;a, b&#125; from &#39;.&#x2F;a.js&#39;</span><br><span class="line">import XXX from &#39;.&#x2F;b.js&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a><code>CommonJS</code></h2><p><code>CommonJs</code> 是 <code>Node</code> 独有的规范，浏览器中使用就需要用到 <code>Browserify</code> 解析了。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; a.js</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; or</span><br><span class="line">exports.a &#x3D; 1</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; b.js</span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a &#x2F;&#x2F; -&gt; log 1</span><br></pre></td></tr></table></figure>
+<p>在上述代码中， <code>module.exports</code> 和 <code>exports</code> 很容易混淆，让我们来看看大致内部实现</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var module &#x3D; require(&#39;.&#x2F;a.js&#39;)</span><br><span class="line">module.a</span><br><span class="line">&#x2F;&#x2F; 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span><br><span class="line">&#x2F;&#x2F; 重要的是 module 这里，module 是 Node 独有的一个变量</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    a: 1</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 基本实现</span><br><span class="line">var module &#x3D; &#123;</span><br><span class="line">  exports: &#123;&#125; &#x2F;&#x2F; exports 就是个空对象</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这个是为什么 exports 和 module.exports 用法相似的原因</span><br><span class="line">var exports &#x3D; module.exports</span><br><span class="line">var load &#x3D; function (module) &#123;</span><br><span class="line">    &#x2F;&#x2F; 导出的东西</span><br><span class="line">    var a &#x3D; 1</span><br><span class="line">    module.exports &#x3D; a</span><br><span class="line">    return module.exports</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。</p>
+<p>对于 CommonJS 和 ES6 中的模块化的两者区别是：</p>
+<ul>
+<li>前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案</li>
+<li>前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
+<li>前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
+<li>后者会编译成 require/exports 来执行的</li>
+</ul>
+<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>AMD 是由 <code>RequireJS</code> 提出的</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; AMD</span><br><span class="line">define([&#39;.&#x2F;a&#39;, &#39;.&#x2F;b&#39;], function(a, b) &#123;</span><br><span class="line">    a.do()</span><br><span class="line">    b.do()</span><br><span class="line">&#125;)</span><br><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line">    var a &#x3D; require(&#39;.&#x2F;a&#39;)</span><br><span class="line">    a.doSomething()</span><br><span class="line">    var b &#x3D; require(&#39;.&#x2F;b&#39;)</span><br><span class="line">    b.doSomething()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- Promise</title>
+    <url>/2020/01/03/FE-guide-Promise/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Promise-实现"><a href="#Promise-实现" class="headerlink" title="Promise 实现"></a><code>Promise</code> 实现</h1><p><code>Promise</code> 是 <code>ES6</code> 新增的语法，解决了回调地狱的问题。</p>
+<p>可以把 <code>Promise</code> 看成一个状态机。初始是 <code>pending</code> 状态，可以通过函数 <code>resolve</code> 和 <code>reject</code> ，将状态转变为 <code>resolved</code> 或者 <code>rejected</code> 状态，<strong><em>状态一旦改变就不能再次变化</em></strong>。</p>
+<p><code>then</code> 函数会返回一个 <code>Promise</code> 实例，并且该返回值是一个新的实例而不是之前的实例。因为 <code>Promise</code> 规范规定除了 <code>pending</code> 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 <code>then</code> 调用就失去意义了。</p>
+<p>对于 <code>then</code> 来说，本质上可以把它看成是 <code>flatMap</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 三种状态</span><br><span class="line">const PENDING &#x3D; &quot;pending&quot;;</span><br><span class="line">const RESOLVED &#x3D; &quot;resolved&quot;;</span><br><span class="line">const REJECTED &#x3D; &quot;rejected&quot;;</span><br><span class="line">&#x2F;&#x2F; promise 接收一个函数参数，该函数会立即执行</span><br><span class="line">function MyPromise(fn) &#123;</span><br><span class="line">  let _this &#x3D; this;</span><br><span class="line">  _this.currentState &#x3D; PENDING;</span><br><span class="line">  _this.value &#x3D; undefined;</span><br><span class="line">  &#x2F;&#x2F; 用于保存 then 中的回调，只有当 promise</span><br><span class="line">  &#x2F;&#x2F; 状态为 pending 时才会缓存，并且每个实例至多缓存一个</span><br><span class="line">  _this.resolvedCallbacks &#x3D; [];</span><br><span class="line">  _this.rejectedCallbacks &#x3D; [];</span><br><span class="line"></span><br><span class="line">  _this.resolve &#x3D; function (value) &#123;</span><br><span class="line">    if (value instanceof MyPromise) &#123;</span><br><span class="line">      &#x2F;&#x2F; 如果 value 是个 Promise，递归执行</span><br><span class="line">      return value.then(_this.resolve, _this.reject)</span><br><span class="line">    &#125;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; RESOLVED;</span><br><span class="line">        _this.value &#x3D; value;</span><br><span class="line">        _this.resolvedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _this.reject &#x3D; function (reason) &#123;</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123; &#x2F;&#x2F; 异步执行，保证执行顺序</span><br><span class="line">      if (_this.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">        _this.currentState &#x3D; REJECTED;</span><br><span class="line">        _this.value &#x3D; reason;</span><br><span class="line">        _this.rejectedCallbacks.forEach(cb &#x3D;&gt; cb());</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 用于解决以下问题</span><br><span class="line">  &#x2F;&#x2F; new Promise(() &#x3D;&gt; throw Error(&#39;error))</span><br><span class="line">  try &#123;</span><br><span class="line">    fn(_this.resolve, _this.reject);</span><br><span class="line">  &#125; catch (e) &#123;</span><br><span class="line">    _this.reject(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then &#x3D; function (onResolved, onRejected) &#123;</span><br><span class="line">  var self &#x3D; this;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.7，then 必须返回一个新的 promise</span><br><span class="line">  var promise2;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.2.onResolved 和 onRejected 都为可选参数</span><br><span class="line">  &#x2F;&#x2F; 如果类型不是函数需要忽略，同时也实现了透传</span><br><span class="line">  &#x2F;&#x2F; Promise.resolve(4).then().then((value) &#x3D;&gt; console.log(value))</span><br><span class="line">  onResolved &#x3D; typeof onResolved &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onResolved : v &#x3D;&gt; v;</span><br><span class="line">  onRejected &#x3D; typeof onRejected &#x3D;&#x3D;&#x3D; &#39;function&#39; ? onRejected : r &#x3D;&gt; throw r;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; RESOLVED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.2.4，保证 onFulfilled，onRjected 异步执行</span><br><span class="line">      &#x2F;&#x2F; 所以用了 setTimeout 包裹下</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; REJECTED) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      setTimeout(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 异步执行onRejected</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (reason) &#123;</span><br><span class="line">          reject(reason);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  if (self.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">    return (promise2 &#x3D; new MyPromise(function (resolve, reject) &#123;</span><br><span class="line">      self.resolvedCallbacks.push(function () &#123;</span><br><span class="line">        &#x2F;&#x2F; 考虑到可能会有报错，所以使用 try&#x2F;catch 包裹</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onResolved(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      self.rejectedCallbacks.push(function () &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">          var x &#x3D; onRejected(self.value);</span><br><span class="line">          resolutionProcedure(promise2, x, resolve, reject);</span><br><span class="line">        &#125; catch (r) &#123;</span><br><span class="line">          reject(r);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#x2F;&#x2F; 规范 2.3</span><br><span class="line">function resolutionProcedure(promise2, x, resolve, reject) &#123;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.1，x 不能和 promise2 相同，避免循环引用</span><br><span class="line">  if (promise2 &#x3D;&#x3D;&#x3D; x) &#123;</span><br><span class="line">    return reject(new TypeError(&quot;Error&quot;));</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.2</span><br><span class="line">  &#x2F;&#x2F; 如果 x 为 Promise，状态为 pending 需要继续等待否则执行</span><br><span class="line">  if (x instanceof MyPromise) &#123;</span><br><span class="line">    if (x.currentState &#x3D;&#x3D;&#x3D; PENDING) &#123;</span><br><span class="line">      x.then(function (value) &#123;</span><br><span class="line">        &#x2F;&#x2F; 再次调用该函数是为了确认 x resolve 的</span><br><span class="line">        &#x2F;&#x2F; 参数是什么类型，如果是基本类型就再次 resolve</span><br><span class="line">        &#x2F;&#x2F; 把值传给下个 then</span><br><span class="line">        resolutionProcedure(promise2, value, resolve, reject);</span><br><span class="line">      &#125;, reject);</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      x.then(resolve, reject);</span><br><span class="line">    &#125;</span><br><span class="line">    return;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3.3.3</span><br><span class="line">  &#x2F;&#x2F; reject 或者 resolve 其中一个执行过得话，忽略其他的</span><br><span class="line">  let called &#x3D; false;</span><br><span class="line">  &#x2F;&#x2F; 规范 2.3.3，判断 x 是否为对象或者函数</span><br><span class="line">  if (x !&#x3D;&#x3D; null &amp;&amp; (typeof x &#x3D;&#x3D;&#x3D; &quot;object&quot; || typeof x &#x3D;&#x3D;&#x3D; &quot;function&quot;)) &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.3.2，如果不能取出 then，就 reject</span><br><span class="line">    try &#123;</span><br><span class="line">      &#x2F;&#x2F; 规范 2.3.3.1</span><br><span class="line">      let then &#x3D; x.then;</span><br><span class="line">      &#x2F;&#x2F; 如果 then 是函数，调用 x.then</span><br><span class="line">      if (typeof then &#x3D;&#x3D;&#x3D; &quot;function&quot;) &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.3</span><br><span class="line">        then.call(</span><br><span class="line">          x,</span><br><span class="line">          y &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            &#x2F;&#x2F; 规范 2.3.3.3.1</span><br><span class="line">            resolutionProcedure(promise2, y, resolve, reject);</span><br><span class="line">          &#125;,</span><br><span class="line">          e &#x3D;&gt; &#123;</span><br><span class="line">            if (called) return;</span><br><span class="line">            called &#x3D; true;</span><br><span class="line">            reject(e);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        &#x2F;&#x2F; 规范 2.3.3.4</span><br><span class="line">        resolve(x);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      if (called) return;</span><br><span class="line">      called &#x3D; true;</span><br><span class="line">      reject(e);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 规范 2.3.4，x 为基本类型</span><br><span class="line">    resolve(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>以上就是根据 <code>Promise / A+</code> 规范来实现的代码，可以通过 <code>promises-aplus-tests</code> 的完整测试</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 网络</title>
+    <url>/2020/01/09/FE-guide-Net/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="UDP-User-Datagram-Protocol-用户数据报协议"><a href="#UDP-User-Datagram-Protocol-用户数据报协议" class="headerlink" title="UDP - User Datagram Protocol - 用户数据报协议"></a>UDP - User Datagram Protocol - 用户数据报协议</h1><h2 id="面向报文"><a href="#面向报文" class="headerlink" title="面向报文"></a>面向报文</h2><p>UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作。</p>
+<p>具体来说</p>
+<ul>
+<li>在<strong>发送端</strong>，应用层将数据传递给传输层的 <code>UDP</code> 协议， <code>UDP</code> 只会给数据增加一个 <code>UDP</code> 头标识下是 <code>UDP</code> 协议，然后就传递给网络层了</li>
+<li>在<strong>接收端</strong>，网络层将数据传递给传输层， <code>UDP</code> 只去除 <code>IP</code> 报文头就传递给应用层，不会任何拼接操作</li>
+</ul>
+<h2 id="不可靠性"><a href="#不可靠性" class="headerlink" title="不可靠性"></a>不可靠性</h2><ol>
+<li><code>UDP</code> 是无连接的，也就是说通信不需要建立和断开连接。</li>
+<li><code>UDP</code> 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的</li>
+<li><code>UDP</code> 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 <code>UDP</code> 而不是 <code>TCP</code> 。</li>
+</ol>
+<h2 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h2><p>因为 <code>UDP</code> 没有 <code>TCP</code> 那么复杂，需要保证数据不丢失且有序到达。所以 <code>UDP</code> 的头部开销小，只有八字节，相比 <code>TCP</code> 的至少二十字节要少得多，在传输数据报文时是很高效的。</p>
+<p>头部包含了以下几个数据</p>
+<ul>
+<li>两个十六位的端口号，分别为<strong>源端口</strong>（可选字段）和<strong>目标端口</strong></li>
+<li>整个数据报文的长度</li>
+<li>整个数据报文的检验和（ <code>IPv4</code> 可选 字段），该字段用于发现头部信息和数据中的错误</li>
+</ul>
+<h2 id="传输方式"><a href="#传输方式" class="headerlink" title="传输方式"></a>传输方式</h2><p><code>UDP</code> 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 <code>UDP</code> 提供了单播，多播，广播的功能。</p>
+<h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="头部"><a href="#头部" class="headerlink" title="头部"></a>头部</h2><p>TCP 头部比 UDP 头部复杂的多</p>
+<p>对于 TCP 头部来说，以下几个字段是很重要的</p>
+<ul>
+<li><code>Sequence number</code>（序号），它保证了 <code>TCP</code> 传输的报文都是有序的，对端可以通过序号顺序的拼接报文</li>
+<li><code>Acknowledgement Number</code>（确认编号），它表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到</li>
+<li><code>Window Size</code>（窗口大小），它表示还能接收多少字节的数据，用于流量控制</li>
+<li>标识符<ul>
+<li><code>URG=1</code>：该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。</li>
+<li><code>ACK=1</code>：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。</li>
+<li><code>PSH=1</code>：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。</li>
+<li><code>RST=1</code>：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。</li>
+<li><code>SYN=1</code>：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。</li>
+<li><code>FIN=1</code>：该字段为一表示此报文段是一个释放连接的请求报文。</li>
+</ul>
+</li>
+</ul>
+<h2 id="状态机"><a href="#状态机" class="headerlink" title="状态机"></a>状态机</h2><p><code>HTTP</code> 是无连接的，所以作为下层的 <code>TCP</code> 协议也是无连接的，虽然看似 <code>TCP</code> 将两端连接了起来，但是其实只是两端共同维护了一个状态</p>
+<p><code>TCP</code> 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。<br>在这之前需要了解一个重要的性能指标 <code>RTT</code> 。该指标表示发送端发送数据到接收到对端数据所需的往返时间。</p>
+<h3 id="建立连接三次握手"><a href="#建立连接三次握手" class="headerlink" title="建立连接三次握手"></a>建立连接三次握手</h3><p>在 TCP 协议中，主动发起请求的一端为客户端，被动连接的一端称为服务端。不管是客户端还是服务端，TCP 连接建立完后都能发送和接收数据，所以 TCP 也是一个全双工的协议。</p>
+<p>起初，两端都为 CLOSED 状态。在通信开始前，双方都会创建 TCB。 服务器创建完 TCB 后遍进入 LISTEN 状态，此时开始等待客户端发送数据。</p>
+<h4 id="第一次握手"><a href="#第一次握手" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。</p>
+<h4 id="第二次握手"><a href="#第二次握手" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。</p>
+<h4 id="第三次握手"><a href="#第三次握手" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。</p>
+<p>PS：第三次握手可以包含数据，通过 TCP 快速打开（TFO）技术。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。</p>
+<p><strong><em>你是否有疑惑明明两次握手就可以建立起连接，为什么还需要第三次应答？</em></strong></p>
+<p>因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。</p>
+<p>可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求。如果连接请求 A 在两端关闭后终于抵达了服务端，那么这时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。此时客户端其实是 CLOSED 状态，那么就会导致服务端一直等待，造成资源的浪费。</p>
+<p>PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。</p>
+<h3 id="断开链接四次握手"><a href="#断开链接四次握手" class="headerlink" title="断开链接四次握手"></a>断开链接四次握手</h3><p>TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。</p>
+<h4 id="第一次握手-1"><a href="#第一次握手-1" class="headerlink" title="第一次握手"></a>第一次握手</h4><p>若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。</p>
+<h4 id="第二次握手-1"><a href="#第二次握手-1" class="headerlink" title="第二次握手"></a>第二次握手</h4><p>B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。</p>
+<h4 id="第三次握手-1"><a href="#第三次握手-1" class="headerlink" title="第三次握手"></a>第三次握手</h4><p>B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。</p>
+<p>PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。</p>
+<h4 id="第四次握手"><a href="#第四次握手" class="headerlink" title="第四次握手"></a>第四次握手</h4><p>A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。</p>
+<p><strong><em>为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？</em></strong></p>
+<p>为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。</p>
+<h3 id="ARQ-协议"><a href="#ARQ-协议" class="headerlink" title="ARQ 协议"></a>ARQ 协议</h3><p>ARQ 协议也就是超时重传机制。通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ</p>
+<h4 id="停止等待-ARQ"><a href="#停止等待-ARQ" class="headerlink" title="停止等待 ARQ"></a>停止等待 ARQ</h4><h4 id="正常传输过程"><a href="#正常传输过程" class="headerlink" title="正常传输过程"></a>正常传输过程</h4><p>只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。</p>
+<h4 id="报文丢失或出错"><a href="#报文丢失或出错" class="headerlink" title="报文丢失或出错"></a>报文丢失或出错</h4><p>在报文传输的过程中可能会出现丢包。这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。</p>
+<p>即使报文正常的传输到对端，也可能出现在传输过程中报文出错的问题。这时候对端会抛弃该报文并等待 A 端重传。</p>
+<p>PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。</p>
+<h4 id="ACK-超时或丢失"><a href="#ACK-超时或丢失" class="headerlink" title="ACK 超时或丢失"></a>ACK 超时或丢失</h4><p>对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。</p>
+<p>在超时的情况下也可能出现应答很迟到达，这时 A 端会判断该序号是否已经接收过，如果接收过只需要丢弃应答即可。</p>
+<p><strong><em>这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。</em></strong></p>
+<h4 id="连续-ARQ"><a href="#连续-ARQ" class="headerlink" title="连续 ARQ"></a>连续 ARQ</h4><p>在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。</p>
+<h4 id="累计确认"><a href="#累计确认" class="headerlink" title="累计确认"></a>累计确认</h4><p>连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。</p>
+<p>但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决，这个会在下文说到。</p>
+<h3 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h3><p>在上面小节中讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。</p>
+<p>发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。</p>
+<p>发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。</p>
+<p>当发送端接收到应答报文后，会随之将窗口进行滑动</p>
+<p>滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。</p>
+<h4 id="Zero-窗口"><a href="#Zero-窗口" class="headerlink" title="Zero 窗口"></a>Zero 窗口</h4><p>在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。</p>
+<h3 id="拥塞处理"><a href="#拥塞处理" class="headerlink" title="拥塞处理"></a>拥塞处理</h3><p>拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。</p>
+<p>拥塞处理包括了四个算法，分别为：<strong>慢开始</strong>，<strong>拥塞避免</strong>，<strong>快速重传</strong>，<strong>快速恢复</strong>。</p>
+<h4 id="慢开始算法"><a href="#慢开始算法" class="headerlink" title="慢开始算法"></a>慢开始算法</h4><p>慢开始算法，顾名思义，就是在传输开始时将发送窗口慢慢指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。</p>
+<p>慢开始算法步骤具体如下</p>
+<ol>
+<li>连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）</li>
+<li>每过一个 RTT 就将窗口大小乘二</li>
+<li>指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法。</li>
+</ol>
+<h4 id="拥塞避免算法"><a href="#拥塞避免算法" class="headerlink" title="拥塞避免算法"></a>拥塞避免算法</h4><p>拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。</p>
+<p>在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：</p>
+<ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>启动拥塞避免算法</li>
+</ul>
+<h4 id="快速重传"><a href="#快速重传" class="headerlink" title="快速重传"></a>快速重传</h4><p>快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：</p>
+<h4 id="TCP-Taho-实现如下"><a href="#TCP-Taho-实现如下" class="headerlink" title="TCP Taho 实现如下"></a>TCP Taho 实现如下</h4><ul>
+<li>将阈值设为当前拥塞窗口的一半</li>
+<li>将拥塞窗口设为 1 MSS</li>
+<li>重新开始慢开始算法</li>
+</ul>
+<h4 id="TCP-Reno-实现如下"><a href="#TCP-Reno-实现如下" class="headerlink" title="TCP Reno 实现如下"></a>TCP Reno 实现如下</h4><ul>
+<li>拥塞窗口减半</li>
+<li>将阈值设为当前拥塞窗口</li>
+<li>进入快恢复阶段（重发对端需要的包，一旦收到一个新的 ACK 答复就退出该阶段）</li>
+<li>使用拥塞避免算法</li>
+</ul>
+<h4 id="TCP-New-Ren-改进后的快恢复"><a href="#TCP-New-Ren-改进后的快恢复" class="headerlink" title="TCP New Ren 改进后的快恢复"></a>TCP New Ren 改进后的快恢复</h4><p>TCP New Reno 算法改进了之前 TCP Reno 算法的缺陷。在之前，快恢复中只要收到一个新的 ACK 包，就会退出快恢复。</p>
+<p>在 TCP New Reno 中，TCP 发送方先记下三个重复 ACK 的分段的最大序号。</p>
+<p>假如我有一个分段数据是 1 ~ 10 这十个序号的报文，其中丢失了序号为 3 和 7 的报文，那么该分段的最大序号就是 10。发送端只会收到 ACK 序号为 3 的应答。这时候重发序号为 3 的报文，接收方顺利接收并会发送 ACK 序号为 7 的应答。这时候 TCP 知道对端是有多个包未收到，会继续发送序号为 7 的报文，接收方顺利接收并会发送 ACK 序号为 11 的应答，这时发送端认为这个分段接收端已经顺利接收，接下来会退出快恢复阶段。</p>
+<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><p>HTTP 协议是个无状态协议，不会保存状态。</p>
+<h2 id="Post-和-Get-的区别"><a href="#Post-和-Get-的区别" class="headerlink" title="Post 和 Get 的区别"></a><code>Post</code> 和 <code>Get</code> 的区别</h2><p>先引入<code>副作用</code>和<code>幂等</code>的概念。</p>
+<blockquote>
+<p><strong><em>副作用</em></strong>指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。</p>
+</blockquote>
+<blockquote>
+<p><strong>幂等</strong>指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。</p>
+</blockquote>
+<p>在规范的应用场景上说， <code>Get</code> 多用于无副作用，幂等的场景，例如搜索关键字。 <code>Post</code> 多用于副作用，不幂等的场景，例如注册。</p>
+<p>在技术上说：</p>
+<ul>
+<li>Get 请求能缓存，Post 不能</li>
+<li>Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。</li>
+<li>Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术</li>
+<li>URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的</li>
+<li>Post 支持更多的编码类型且不对数据类型限制</li>
+</ul>
+<h2 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h2><h3 id="2XX-成功"><a href="#2XX-成功" class="headerlink" title="2XX 成功"></a>2XX 成功</h3><p>200 OK，表示从客户端发来的请求在服务器端被正确处理<br>204 No content，表示请求成功，但响应报文不含实体的主体部分<br>205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容<br>206 Partial Content，进行范围请求</p>
+<h3 id="3XX-重定向"><a href="#3XX-重定向" class="headerlink" title="3XX 重定向"></a>3XX 重定向</h3><p>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL<br>302 found，临时性重定向，表示资源临时被分配了新的 URL<br>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源<br>304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况<br>307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求</p>
+<h3 id="4XX-客户端错误"><a href="#4XX-客户端错误" class="headerlink" title="4XX 客户端错误"></a>4XX 客户端错误</h3><p>400 bad request，请求报文存在语法错误<br>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息<br>403 forbidden，表示对请求资源的访问被服务器拒绝<br>404 not found，表示在服务器上没有找到请求的资源</p>
+<h3 id="5XX-服务器错误"><a href="#5XX-服务器错误" class="headerlink" title="5XX 服务器错误"></a>5XX 服务器错误</h3><p>500 internal sever error，表示服务器端在执行请求时发生了错误<br>501 Not Implemented，表示服务器不支持当前请求所需要的某个功能<br>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求</p>
+<h2 id="HTTP-首部"><a href="#HTTP-首部" class="headerlink" title="HTTP 首部"></a>HTTP 首部</h2><table>
+<thead>
+<tr>
+<th>通用字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cache-Control</td>
+<td>控制缓存的行为</td>
+</tr>
+<tr>
+<td>Connection</td>
+<td>浏览器想要优先使用的连接类型，比如 keep-alive</td>
+</tr>
+<tr>
+<td>Date</td>
+<td>创建报文时间</td>
+</tr>
+<tr>
+<td>Pragma</td>
+<td>报文指令</td>
+</tr>
+<tr>
+<td>Via</td>
+<td>代理服务器相关信息</td>
+</tr>
+<tr>
+<td>Transfer-Encoding</td>
+<td>传输编码方式</td>
+</tr>
+<tr>
+<td>Upgrade</td>
+<td>要求客户端升级协议</td>
+</tr>
+<tr>
+<td>Warning</td>
+<td>在内容中可能存在错误</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>请求字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept</td>
+<td>能正确接收的媒体类型</td>
+</tr>
+<tr>
+<td>Accept-Charset</td>
+<td>能正确接收的字符集</td>
+</tr>
+<tr>
+<td>Accept-Encoding</td>
+<td>能正确接收的编码格式列表</td>
+</tr>
+<tr>
+<td>Accept-Language</td>
+<td>能正确接收的语言列表</td>
+</tr>
+<tr>
+<td>Expect</td>
+<td>期待服务端的指定行为</td>
+</tr>
+<tr>
+<td>From</td>
+<td>请求方邮箱地址</td>
+</tr>
+<tr>
+<td>Host</td>
+<td>服务器的域名</td>
+</tr>
+<tr>
+<td>If-Match</td>
+<td>两端资源标记比较</td>
+</tr>
+<tr>
+<td>If-Modified-Since</td>
+<td>本地资源未修改返回 304（比较时间）</td>
+</tr>
+<tr>
+<td>If-None-Match</td>
+<td>本地资源未修改返回 304（比较标记）</td>
+</tr>
+<tr>
+<td>User-Agent</td>
+<td>客户端信息</td>
+</tr>
+<tr>
+<td>Max-Forwards</td>
+<td>限制可被代理及网关转发的次数</td>
+</tr>
+<tr>
+<td>Proxy-Authorization</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Range</td>
+<td>请求某个内容的一部分</td>
+</tr>
+<tr>
+<td>Referer</td>
+<td>表示浏览器所访问的前一个页面</td>
+</tr>
+<tr>
+<td>TE</td>
+<td>传输编码方式</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>响应字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Accept-Ranges</td>
+<td>是否支持某些种类的范围</td>
+</tr>
+<tr>
+<td>Age</td>
+<td>资源在代理缓存中存在的时间</td>
+</tr>
+<tr>
+<td>ETag</td>
+<td>资源标识</td>
+</tr>
+<tr>
+<td>Location</td>
+<td>客户端重定向到某个 URL</td>
+</tr>
+<tr>
+<td>Proxy-Authenticate</td>
+<td>向代理服务器发送验证信息</td>
+</tr>
+<tr>
+<td>Server</td>
+<td>服务器名字</td>
+</tr>
+<tr>
+<td>WWW-Authenticate</td>
+<td>获取资源需要的验证信息</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>实体字段</th>
+<th>作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Allow</td>
+<td>资源的正确请求方式</td>
+</tr>
+<tr>
+<td>Content-Encoding</td>
+<td>内容的编码格式</td>
+</tr>
+<tr>
+<td>Content-Language</td>
+<td>内容使用的语言</td>
+</tr>
+<tr>
+<td>Content-Length</td>
+<td>request body 长度</td>
+</tr>
+<tr>
+<td>Content-Location</td>
+<td>返回数据的备用地址</td>
+</tr>
+<tr>
+<td>Content-MD5</td>
+<td>Base64加密格式的内容 MD5检验值</td>
+</tr>
+<tr>
+<td>Content-Range</td>
+<td>内容的位置范围</td>
+</tr>
+<tr>
+<td>Content-Type</td>
+<td>内容的媒体类型</td>
+</tr>
+<tr>
+<td>Expires</td>
+<td>内容的过期时间</td>
+</tr>
+<tr>
+<td>Last_modified</td>
+<td>内容的最后修改时间</td>
+</tr>
+</tbody></table>
+<h1 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h1><p><code>HTTPS</code> 还是通过了 <code>HTTP</code> 来传输信息，但是信息通过 <code>TLS</code> 协议进行了加密。</p>
+<h2 id="TLS"><a href="#TLS" class="headerlink" title="TLS"></a>TLS</h2><p><code>TLS</code> 协议位于传输层之上，应用层之下。首次进行 <code>TLS</code> 协议传输需要两个 <code>RTT</code> ，接下来可以通过 <code>Session Resumption</code> 减少到一个 <code>RTT</code> 。</p>
+<p>在 <code>TLS</code> 中使用了两种加密技术，分别为：<strong><em>对称加密</em></strong>和<strong><em>非对称加密</em></strong>。</p>
+<p><strong>对称加密：</strong><br>对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。</p>
+<p><strong>非对称加密：</strong><br>有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发公钥的一方才知道。</p>
+<p><strong>TLS 握手过程如下图：</strong></p>
+<ol>
+<li>客户端发送一个随机值，需要的协议和加密方式</li>
+<li>服务端收到客户端的随机值，自己也产生一个随机值，并根据客户端需求的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）</li>
+<li>客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端证书的公钥去加密这个随机值并发送给服务端，如果服务端需要验证客户端证书的话会附带证书</li>
+<li>服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，可以通过这三个随机值按照之前约定的加密方式生成密钥，接下来的通信就可以通过该密钥来加密解密</li>
+</ol>
+<p>通过以上步骤可知，在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信。</p>
+<p>PS：以上说明的都是 TLS 1.2 协议的握手情况，在 1.3 协议中，首次建立连接只需要一个 RTT，后面恢复连接不需要 RTT 了。</p>
+<h1 id="HTTP-2-0"><a href="#HTTP-2-0" class="headerlink" title="HTTP 2.0"></a>HTTP 2.0</h1><p>HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。</p>
+<p>在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</p>
+<p>你可以通过 该链接 感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少。</p>
+<p>在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJGkt.png" alt="lWJGkt.png"><br>在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的<br><img src="https://s2.ax1x.com/2020/01/09/lWJa6g.png" alt="lWJa6g.png"></p>
+<h2 id="二进制传输"><a href="#二进制传输" class="headerlink" title="二进制传输"></a>二进制传输</h2><p>HTTP 2.0 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。</p>
+<h2 id="多路复用"><a href="#多路复用" class="headerlink" title="多路复用"></a>多路复用</h2><p>在 HTTP 2.0 中，有两个非常重要的概念，分别是<strong>帧（frame）</strong>和<strong>流（stream）</strong>。<br>帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。</p>
+<p>多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p>
+<h2 id="Header-压缩"><a href="#Header-压缩" class="headerlink" title="Header 压缩"></a>Header 压缩</h2><p>在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。</p>
+<p>在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。</p>
+<h2 id="服务端-Push"><a href="#服务端-Push" class="headerlink" title="服务端 Push"></a>服务端 Push</h2><p>在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。</p>
+<p>可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。</p>
+<h2 id="QUIC"><a href="#QUIC" class="headerlink" title="QUIC"></a>QUIC</h2><p>这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。</p>
+<ul>
+<li>该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制</li>
+<li>实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了</li>
+<li>支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包<ul>
+<li>纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包</li>
+<li>在丢失两个包或以上的情况就使用重传机制，因为算不出来了</li>
+</ul>
+</li>
+</ul>
+<h1 id="DNS"><a href="#DNS" class="headerlink" title="DNS"></a>DNS</h1><p>DNS 的作用就是通过域名查询到具体的 IP。</p>
+<p>因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。</p>
+<p>在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 <a href="http://www.google.com" target="_blank" rel="noopener">www.google.com</a> 时，会进行一下操作：</p>
+<ol>
+<li>操作系统会首先在本地缓存中查询</li>
+<li>没有的话会去系统配置的 DNS 服务器中查询</li>
+<li>如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器</li>
+<li>然后去该服务器查询 google 这个二级域名</li>
+<li>接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP</li>
+</ol>
+<p>以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。</p>
+<p>PS：DNS 是基于 UDP 做的查询。</p>
+<h2 id="从输入-URL-到页面加载完成的过程"><a href="#从输入-URL-到页面加载完成的过程" class="headerlink" title="从输入 URL 到页面加载完成的过程"></a>从输入 URL 到页面加载完成的过程</h2><p>这是一个很经典的面试题，在这题中可以将本文讲得内容都串联起来。</p>
+<ol>
+<li>首先做 <code>DNS</code> 查询，如果这一步做了智能 <code>DNS</code> 解析的话，会提供访问速度最快的 <code>IP</code> 地址回来</li>
+<li>接下来是 <code>TCP</code> 握手，应用层会下发数据给传输层，这里 <code>TCP</code> 协议会指明两端的端口号，然后下发给网络层。网络层中的 <code>IP</code> 协议会确定 <code>IP</code> 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了</li>
+<li><code>TCP</code> 握手结束后会进行 <code>TLS</code> 握手，然后就开始正式的传输数据</li>
+<li>数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 <code>HTML</code> 文件</li>
+<li>首先浏览器会判断状态码是什么，如果是 <code>200</code> 那就继续解析，如果 <code>400</code> 或 <code>500</code> 的话就会报错，如果 <code>300</code> 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错</li>
+<li>浏览器开始解析文件，如果是 <code>gzip</code> 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件</li>
+<li>文件解码成功后会正式开始渲染流程，先会根据 <code>HTML</code> 构建 <code>DOM</code> 树，有 <code>CSS</code> 的话会去构建 <code>CSSOM</code> 树。如果遇到 <code>script</code> 标签的话，会判断是否存在 <code>async</code> 或者 <code>defer</code> ，前者会并行进行下载并执行 <code>JS</code> ，后者会先下载文件，然后等待 <code>HTML</code> 解析完成后顺序执行，如果以上都没有，就会阻塞住渲染流程直到 <code>JS</code> 执行完毕。遇到文件下载的会去下载文件，这里如果使用 <code>HTTP 2.0</code> 协议的话会极大的提高多图的下载效率。</li>
+<li>初始的 <code>HTML</code> 被完全加载和解析后会触发 <code>DOMContentLoaded</code> 事件</li>
+<li><code>CSSOM</code> 树和 <code>DOM</code> 树构建完成后会开始生成 <code>Render</code> 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西</li>
+<li>在生成 <code>Render</code> 树的过程中，浏览器就开始调用 <code>GPU</code> 绘制，合成图层，将内容显示在屏幕上了</li>
+</ol>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- Proxy</title>
+    <url>/2020/01/03/FE-guide-async-Proxy/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p><code>Proxy</code> 是 <code>ES6</code> 中新增的功能，可以用来自定义对象中的操作</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let p &#x3D; new Proxy(target, handler);</span><br><span class="line">&#x2F;&#x2F; &#96;target&#96; 代表需要添加代理的对象</span><br><span class="line">&#x2F;&#x2F; &#96;handler&#96; 用来自定义对象中的操作</span><br></pre></td></tr></table></figure>
+<p>可以很方便的使用 <code>Proxy</code> 来实现一个数据绑定和监听</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let onWatch &#x3D; (obj, setBind, getLogger) &#x3D;&gt; &#123;</span><br><span class="line">  let handler &#x3D; &#123;</span><br><span class="line">    get(target, property, receiver) &#123;</span><br><span class="line">      getLogger(target, property)</span><br><span class="line">      return Reflect.get(target, property, receiver);</span><br><span class="line">    &#125;,</span><br><span class="line">    set(target, property, value, receiver) &#123;</span><br><span class="line">      setBind(value);</span><br><span class="line">      return Reflect.set(target, property, value);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  return new Proxy(obj, handler);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let obj &#x3D; &#123; a: 1 &#125;</span><br><span class="line">let value</span><br><span class="line">let p &#x3D; onWatch(obj, (v) &#x3D;&gt; &#123;</span><br><span class="line">  value &#x3D; v</span><br><span class="line">&#125;, (target, property) &#x3D;&gt; &#123;</span><br><span class="line">  console.log(&#96;Get &#39;$&#123;property&#125;&#39; &#x3D; $&#123;target[property]&#125;&#96;);</span><br><span class="line">&#125;)</span><br><span class="line">p.a &#x3D; 2 &#x2F;&#x2F; bind &#96;value&#96; to &#96;2&#96;</span><br><span class="line">p.a &#x2F;&#x2F; -&gt; Get &#39;a&#39; &#x3D; 2</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>reduce函数的妙用 ---- 实现map和filter</title>
+    <url>/2020/01/05/FE-guide-about-reduce/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近看了好多技术文章，好多的代码片段，突然发现好多的代码里都有 <code>reduce</code> ，感觉以前都没怎么关注过这个函数，为了弥补这个过失，打算专门写一篇文章说说它。</p>
+<p><code>reduce</code> 函数在 MDN 中是这样介绍的</p>
+<blockquote>
+<p>reduce() 方法对数组中的<strong><em>每个元素</em></strong>执行一个由 <strong><em>您</em></strong> 提供的 <code>reducer</code> 函数(<strong><em>升序执行</em></strong>)，将其结果汇总为单个返回值。</p>
+</blockquote>
+<p>说实话看了一脸懵逼，这上面说的叫人话？后来耐着性子看了一些代码后感觉有所理解，如果理解不对，还请斧正。<br>首先看一下这里面几个关键词</p>
+<p><strong>* 每个元素： *</strong> 这就是遍历咯，没啥好说的<br><strong><em>您</em></strong>提供的 <code>reducer</code> 函数：我哪有什么 <code>reducer</code> 函数呢，后来理解了，就是回调，有的地方呢叫 <code>handler</code> ，这里跟 <code>reduce</code> 配合就叫了 <code>reducer</code>。<br><strong><em>升序执行</em></strong>：就是说是0，1，2下标这样的顺序执行啦。<br>将其结果汇总为单个返回值：最后返回的是一个值，当然没说必须是什么类型。</p>
+<p>这样解释完了以后，上面这句话就比较好懂了，简单说就是 <code>reduce</code> 里传一个回调函数，执行回调函数方法后返回一个值，就是这样。</p>
+<blockquote>
+<p>reducer 函数接收4个参数:</p>
+</blockquote>
+<ul>
+<li>Accumulator (acc) (累计器)</li>
+<li>Current Value (cur) (当前值)</li>
+<li>Current Index (idx) (当前索引)</li>
+<li>Source Array (src) (源数组)<br>您的 <code>reducer</code> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</li>
+</ul>
+<p>看上面的描述一定要注意，这些参数是 <code>reducer</code> 的参数，不是 <code>reduce</code> 的参数，一共有4个，通常用前两个情况比较多。</p>
+<p>那么 <code>reduce</code> 函数呢实际上有两个参数，第二个还可以省略 <code>reducer</code> 和 <code>initialValue</code>，<code>initialValue</code>作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 <strong><em>在没有初始值的空数组上调用 <code>reduce</code> 将报错</em></strong>，这点切记。</p>
+<p>终于把前置知识讲清楚了，接下来，我们就用 <code>reduce</code> 搞点事情。</p>
+<h2 id="1-使用-reduce-实现-map"><a href="#1-使用-reduce-实现-map" class="headerlink" title="1. 使用 reduce 实现 map"></a>1. 使用 <code>reduce</code> 实现 <code>map</code></h2><p><code>map</code> 的话我不想再讲一遍，一句话带过，就是对回调函数中的元素进行加工后返回一个长度一样的新数组。<br>那么该如何实现呢，我们来想想原理吧，刚才上面说过了，reduce执行过后的返回值会作为下一次执行的第一个参数放进去，那么就可以先用一个空数组作为初始值来接受每次需要处理的元素的集合，并返回回去，作为下一次传入的第一个参数，这样每次操作完之后就可以push到这个数组中，那么剩下要做的就是处理数组中每一项的函数了，我们叫他 <code>handler</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToMap &#x3D; function (handler) &#123; &#x2F;&#x2F; 自定义 &#96;map&#96; 函数 &#96;reduceToMap&#96;</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123; &#x2F;&#x2F; this指向调用他的数组</span><br><span class="line">    target.push(handler.call(this, current, index)) &#x2F;&#x2F; 这里用了call方法，handler将接受两个参数 current和index</span><br><span class="line">    return target; &#x2F;&#x2F; 处理完成后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化空的新数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>就这样我们就用 <code>reduce</code>，实现了 <code>map</code> 的功能，是不是很好用？</p>
+<h2 id="2-使用-reduce-实现-filter"><a href="#2-使用-reduce-实现-filter" class="headerlink" title="2. 使用 reduce 实现 filter"></a>2. 使用 <code>reduce</code> 实现 <code>filter</code></h2><p><code>filter</code> 也是数组常用的方法，同样传入一个回调函数，处理结果返回true或false，最终 <code>filter</code> 会返回一个过滤后的函数。<br>学会了上面的 <code>map</code> 的实现，实际上 <code>filter</code> 就会很简单</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Array.prototype.reduceToFilter &#x3D; function (handler) &#123; &#x2F;&#x2F; 还是自定义方法名</span><br><span class="line">  return this.reduce((target, current, index) &#x3D;&gt; &#123;</span><br><span class="line">    if (handler.call(this, current, index)) &#123; &#x2F;&#x2F; 这里注意 handler 要返回的是布尔类型的值</span><br><span class="line">      target.push(current); &#x2F;&#x2F; 符合条件就插入新数组</span><br><span class="line">    &#125; &#x2F;&#x2F; 不符合就什么都不做</span><br><span class="line">    return target; &#x2F;&#x2F; 最后返回新数组</span><br><span class="line">  &#125;, []) &#x2F;&#x2F; 初始化一个空数组</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>日后在看到 <code>reduce</code> 的妙用之后还会来补充这篇文章，如果实在懒得写，我也会链接一下新文章，希望大家长期关注。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- async 和 await</title>
+    <url>/2020/01/03/FE-guide-async-await/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h1><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"1"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(test()); <span class="comment">// -&gt; Promise &#123;&lt;resolved&gt;: "1"&#125;</span></span><br></pre></td></tr></table></figure>
+<p>可以把 <code>async</code> 看成将函数返回值使用 <code>Promise.resolve()</code> 包裹了下。<br><code>await</code> 只能在 <code>async</code> 函数中使用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'finish'</span>)</span><br><span class="line">      resolve(<span class="string">"sleep"</span>);</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> value = <span class="keyword">await</span> sleep();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"object"</span>);</span><br><span class="line">&#125;</span><br><span class="line">test()</span><br></pre></td></tr></table></figure>
+
+<p>上面代码会先打印 <code>finish</code> 然后再打印 <code>object</code> 。因为 <code>await</code> 会等待 <code>sleep</code> 函数 <code>resolve</code> ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。</p>
+<p><code>async</code> 和 <code>await</code> 相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码。缺点在于滥用 <code>await</code> 可能会导致性能问题，因为 <code>await</code> 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。</p>
+<p>下面来看一个使用 <code>await</code> 的代码。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  a = a + <span class="keyword">await</span> <span class="number">10</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'2'</span>, a) <span class="comment">// -&gt; '2' 10</span></span><br><span class="line">  a = (<span class="keyword">await</span> <span class="number">10</span>) + a</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'3'</span>, a) <span class="comment">// -&gt; '3' 20</span></span><br><span class="line">&#125;</span><br><span class="line">b()</span><br><span class="line">a++</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'1'</span>, a) <span class="comment">// -&gt; '1' 1</span></span><br></pre></td></tr></table></figure>
+
+<p>对于以上代码你可能会有疑惑，这里说明下原理</p>
+<ul>
+<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ， <code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
+<li>因为 <code>await</code> 是异步操作，遇到 <code>await</code> 就会立即返回一个 <code>pending</code> 状态的 <code>Promise</code> 对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
+<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
+<li>然后后面就是常规执行代码了</li>
+</ul>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- call, apply, bind 区别</title>
+    <url>/2020/01/03/FE-guide-call-apply-bind/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="call-apply-bind-区别"><a href="#call-apply-bind-区别" class="headerlink" title="call, apply, bind 区别"></a>call, apply, bind 区别</h1><p>首先说下前两者的异同。<br>相同： <code>call</code> 和 <code>apply</code> 都是为了解决改变 <code>this</code> 的指向。<br>不同：传参的方式不同，除了第一个参数外， <code>call</code> 可以接收一个参数<strong><em>列表</em></strong>， <code>apply</code> 只接受一个参数<strong><em>数组</em></strong>。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let anObj &#x3D; &#123;</span><br><span class="line">    value: 1</span><br><span class="line">&#125;</span><br><span class="line">function getValue(name, age) &#123;</span><br><span class="line">    console.log(name)</span><br><span class="line">    console.log(age)</span><br><span class="line">    console.log(this.value)</span><br><span class="line">&#125;</span><br><span class="line">getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;)</span><br><span class="line">getValue.apply(anObj, [&#39;lixuguang&#39;, &#39;31&#39;])</span><br></pre></td></tr></table></figure>
+<h2 id="模拟实现-call-和-apply"><a href="#模拟实现-call-和-apply" class="headerlink" title="模拟实现 call 和 apply"></a>模拟实现 <code>call</code> 和 <code>apply</code></h2><p>可以从以下几点来考虑如何实现</p>
+<ul>
+<li>不传入第一个参数，那么默认为 <code>window</code></li>
+<li>改变了 <code>this</code> 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; [...arguments].slice(1) &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; context.fn(...args) &#x2F;&#x2F; getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+以上就是 call 的思路，apply 的实现也类似<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.Apply &#x3D; function (context) &#123;</span><br><span class="line">  var context &#x3D; context || window &#x2F;&#x2F; 有入参用入参，没有给 window</span><br><span class="line">  context.fn &#x3D; this  &#x2F;&#x2F; 给 context 添加一个属性，getValue.call(anObj, &#39;lixuguang&#39;, &#39;31&#39;) &#x3D;&gt; anObj.fn &#x3D; getValue</span><br><span class="line">  var args &#x3D; arguments[1] &#x2F;&#x2F; 将 context 后面的参数取出来</span><br><span class="line">  var result &#x3D; args?context.fn(...args):context.fn() &#x2F;&#x2F; getValue.call(anObj, [&#39;lixuguang&#39;, &#39;31&#39;]) &#x3D;&gt; anObj.fn(&#39;yck&#39;, &#39;24&#39;)</span><br><span class="line">  delete context.fn &#x2F;&#x2F; 删除 fn</span><br><span class="line">  return result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<code>bind</code> 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 <code>bind</code> 实现柯里化。</li>
+</ul>
+<p>同样的，也来模拟实现下 <code>bind</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind &#x3D; function (context) &#123;</span><br><span class="line">  if (typeof this !&#x3D;&#x3D; &#39;function&#39;) &#123;</span><br><span class="line">    throw new TypeError(&#39;Error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  var _this &#x3D; this</span><br><span class="line">  var args &#x3D; [...arguments].slice(1)</span><br><span class="line">  </span><br><span class="line">  return function F() &#123; &#x2F;&#x2F; 返回一个函数，这是 &#96;bind&#96; 和 &#96;call&#96; ， &#96;apply&#96; 的区别</span><br><span class="line">    if (this instanceof F) &#123; &#x2F;&#x2F; 因为返回了一个函数，我们可以 new F()，所以需要判断</span><br><span class="line">      return new _this(...args, ...arguments)</span><br><span class="line">    &#125;</span><br><span class="line">    return _this.apply(context, args.concat(...arguments))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 深浅拷贝</title>
+    <url>/2020/01/03/FE-guide-copy/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = a</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
+<p>从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。<br>通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。</p>
+<h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>首先可以通过 <code>Object.assign</code> 来解决这个问题。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Object</span>.assign(&#123;&#125;, a)</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>当然我们也可以通过展开运算符（…）来解决</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.age = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(b.age) <span class="comment">// =&gt; 1</span></span><br></pre></td></tr></table></figure>
+<p>我们还可以用很多简单的方法都能实现浅拷贝：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">arr.slice();</span><br><span class="line">arr.concat();</span><br></pre></td></tr></table></figure>
+
+<p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="number">1</span>,</span><br><span class="line">  jobs: &#123;</span><br><span class="line">    first: <span class="string">'FE'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = &#123;...a&#125;</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// native</span></span><br></pre></td></tr></table></figure>
+<p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。</p>
+<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个问题通常可以通过 <code>JSON.parse(JSON.stringify(object))</code> 来解决，这也是最好用最简单的方法，俗称乞丐版。<br><strong><em>乞丐版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">    age: <span class="number">1</span>,</span><br><span class="line">    jobs: &#123;</span><br><span class="line">        first: <span class="string">'FE'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line">a.jobs.first = <span class="string">'native'</span></span><br><span class="line"><span class="built_in">console</span>.log(b.jobs.first) <span class="comment">// FE</span></span><br></pre></td></tr></table></figure>
+<p>但是该方法也是有局限性的：</p>
+<ul>
+<li>会忽略 <code>undefined</code></li>
+<li>会忽略 <code>symbol</code></li>
+<li>不能序列化函数</li>
+<li>不能解决循环引用的对象</li>
+</ul>
+<p>举个栗子：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: &#123;</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">    d: <span class="number">3</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.c = obj.b</span><br><span class="line">obj.e = obj.a</span><br><span class="line">obj.b.c = obj.c</span><br><span class="line">obj.b.d = obj.b</span><br><span class="line">obj.b.e = obj.b.c</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newObj = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj))</span><br><span class="line"><span class="built_in">console</span>.log(newObj) <span class="comment">// =&gt; Uncaught TypeError: Converting circular structure to JSON</span></span><br></pre></td></tr></table></figure>
+<p>如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝<br>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = &#123;</span><br><span class="line">  age: <span class="literal">undefined</span>,</span><br><span class="line">  sex: <span class="built_in">Symbol</span>(<span class="string">'fmale'</span>),</span><br><span class="line">  jobs: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">  name: <span class="string">'lixuguang'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(a))</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// =&gt; &#123;name: "lixuang"&#125;</span></span><br></pre></td></tr></table></figure>
+
+<p>你会发现在上述情况中，该方法会忽略掉函数和 <code>undefined</code> 。<br>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝<strong><em>性能最快</em></strong>的。</p>
+<p>那么是否可以解决函数和循环引用的问题呢？答案是肯定可以解决，接下来是基础版本的改造<br><strong><em>基础版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断传入目标是否是object类型</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = &#123;&#125;; <span class="comment">// 创建克隆对象</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target)&#123; <span class="comment">// 遍历目标对象</span></span><br><span class="line">      cloneTarget[key] = myClone(target[key]) <span class="comment">// 递归调用 clone 方法</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target <span class="comment">// 如果不是 object 返回</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。<br>这里只考虑了对象，没有考虑数组。<br>下面我们来做一个强化版的深拷贝，同时考虑对象、数组还有循环引用的问题。<br><strong><em>强化版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myClone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123; <span class="comment">// WeakMap =&gt; 键对象弱引用， 可被垃圾回收</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> target === <span class="string">'object'</span>)&#123; <span class="comment">// 判断是否是对象</span></span><br><span class="line">    <span class="keyword">let</span> cloneTarget = <span class="built_in">Array</span>.isArray(target) ? [] : &#123;&#125;; <span class="comment">// 判断是是数组还是对象</span></span><br><span class="line">    <span class="keyword">if</span>(map.get(target)) &#123;</span><br><span class="line">      <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      cloneTarget[key] = myClone(target[key], map)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>当然如果你的数据中含有以上三种情况下，可以使用 <code>lodash</code> 的深拷贝函数。<br>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 <code>MessageChannel</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">structuralClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;port1, port2&#125; = <span class="keyword">new</span> MessageChannel();</span><br><span class="line">    port2.onmessage = <span class="function"><span class="params">ev</span> =&gt;</span> resolve(ev.data);</span><br><span class="line">    port1.postMessage(obj);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>, </span><br><span class="line">  b: &#123;</span><br><span class="line">    c: b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意该方法是异步的</span></span><br><span class="line"><span class="comment">// 可以处理 undefined 和循环引用对象</span></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> clone = <span class="keyword">await</span> structuralClone(obj)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
+
+<p>深拷贝实现方式2，可以深拷贝 <code>function</code> 、<code>symbol</code>，等等，堪称终极版<br><strong><em>终极版</em></strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapTag = <span class="string">'[object Map]'</span>;</span><br><span class="line"><span class="keyword">const</span> setTag = <span class="string">'[object Set]'</span>;</span><br><span class="line"><span class="keyword">const</span> arrayTag = <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="keyword">const</span> objectTag = <span class="string">'[object Object]'</span>;</span><br><span class="line"><span class="keyword">const</span> argsTag = <span class="string">'[object Arguments]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> boolTag = <span class="string">'[object Boolean]'</span>;</span><br><span class="line"><span class="keyword">const</span> dateTag = <span class="string">'[object Date]'</span>;</span><br><span class="line"><span class="keyword">const</span> numberTag = <span class="string">'[object Number]'</span>;</span><br><span class="line"><span class="keyword">const</span> stringTag = <span class="string">'[object String]'</span>;</span><br><span class="line"><span class="keyword">const</span> symbolTag = <span class="string">'[object Symbol]'</span>;</span><br><span class="line"><span class="keyword">const</span> errorTag = <span class="string">'[object Error]'</span>;</span><br><span class="line"><span class="keyword">const</span> regexpTag = <span class="string">'[object RegExp]'</span>;</span><br><span class="line"><span class="keyword">const</span> funcTag = <span class="string">'[object Function]'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">array, iteratee</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span>;</span><br><span class="line">  <span class="keyword">const</span> length = array.length;</span><br><span class="line">  <span class="keyword">while</span> (++index &lt; length) &#123;</span><br><span class="line">    iteratee(array[index], index);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> type = <span class="keyword">typeof</span> target;</span><br><span class="line">  <span class="keyword">return</span> target !== <span class="literal">null</span> &amp;&amp; (type === <span class="string">'object'</span> || type === <span class="string">'function'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(target);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInit</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = target.constructor;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneSymbol</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>(<span class="built_in">Symbol</span>.prototype.valueOf.call(targe));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneReg</span>(<span class="params">targe</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> reFlags = <span class="regexp">/\w*$/</span>;</span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">new</span> targe.constructor(targe.source, reFlags.exec(targe));</span><br><span class="line">  result.lastIndex = targe.lastIndex;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneFunction</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> bodyReg = <span class="regexp">/(?&lt;=&#123;)(.|\n)+(?=&#125;)/m</span>;</span><br><span class="line">  <span class="keyword">const</span> paramReg = <span class="regexp">/(?&lt;=\().+(?=\)\s+&#123;)/</span>;</span><br><span class="line">  <span class="keyword">const</span> funcString = func.toString();</span><br><span class="line">  <span class="keyword">if</span> (func.prototype) &#123;</span><br><span class="line">    <span class="keyword">const</span> param = paramReg.exec(funcString);</span><br><span class="line">    <span class="keyword">const</span> body = bodyReg.exec(funcString);</span><br><span class="line">    <span class="keyword">if</span> (body) &#123;</span><br><span class="line">      <span class="keyword">if</span> (param) &#123;</span><br><span class="line">        <span class="keyword">const</span> paramArr = param[<span class="number">0</span>].split(<span class="string">','</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(...paramArr, body[<span class="number">0</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Function</span>(body[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">eval</span>(funcString);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneOtherType</span>(<span class="params">targe, type</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> Ctor = targe.constructor;</span><br><span class="line">  <span class="keyword">switch</span> (type) &#123;</span><br><span class="line">    <span class="keyword">case</span> boolTag:</span><br><span class="line">    <span class="keyword">case</span> numberTag:</span><br><span class="line">    <span class="keyword">case</span> stringTag:</span><br><span class="line">    <span class="keyword">case</span> errorTag:</span><br><span class="line">    <span class="keyword">case</span> dateTag:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Ctor(targe);</span><br><span class="line">    <span class="keyword">case</span> regexpTag:</span><br><span class="line">      <span class="keyword">return</span> cloneReg(targe);</span><br><span class="line">    <span class="keyword">case</span> symbolTag:</span><br><span class="line">      <span class="keyword">return</span> cloneSymbol(targe);</span><br><span class="line">    <span class="keyword">case</span> funcTag:</span><br><span class="line">      <span class="keyword">return</span> cloneFunction(targe);</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params">target, map = new WeakMap(</span>)) </span>&#123;</span><br><span class="line">  <span class="comment">// 克隆原始类型</span></span><br><span class="line">  <span class="keyword">if</span> (!isObject(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">const</span> type = getType(target);</span><br><span class="line">  <span class="keyword">let</span> cloneTarget;</span><br><span class="line">  <span class="keyword">if</span> (deepTag.includes(type)) &#123;</span><br><span class="line">    cloneTarget = getInit(target, type);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> cloneOtherType(target, type);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 防止循环引用</span></span><br><span class="line">  <span class="keyword">if</span> (map.get(target)) &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">  map.set(target, cloneTarget);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆set</span></span><br><span class="line">  <span class="keyword">if</span> (type === setTag) &#123;</span><br><span class="line">    target.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.add(clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆map</span></span><br><span class="line">  <span class="keyword">if</span> (type === mapTag) &#123;</span><br><span class="line">    target.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">      cloneTarget.set(key, clone(value));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> cloneTarget;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 克隆对象和数组</span></span><br><span class="line">  <span class="keyword">const</span> keys = type === arrayTag ? <span class="literal">undefined</span> : <span class="built_in">Object</span>.keys(target);</span><br><span class="line">  forEach(keys || target, (value, key) =&gt; &#123;</span><br><span class="line">    <span class="keyword">if</span> (keys) &#123;</span><br><span class="line">      key = value;</span><br><span class="line">    &#125;</span><br><span class="line">    cloneTarget[key] = clone(target[key], map);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> cloneTarget;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line">clone(target);</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 柯里化 currying</title>
+    <url>/2020/01/05/FE-guide-currying/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h1><p>柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。</p>
+<p>柯里化，可以理解为<strong><em>提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数</em></strong>。因为这样的特性，也被称为部分计算函数。</p>
+<p>通俗易懂的解释：用<strong><em>闭包</em></strong>把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。柯里化，是一个逐步接收参数的过程。在接下来的剖析中，你会深刻体会到这一点。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function currying(fn)&#123;</span><br><span class="line">    var allArgs &#x3D; [];</span><br><span class="line"></span><br><span class="line">    return function next()&#123;</span><br><span class="line">        var args &#x3D; [].slice.call(arguments); &#x2F;&#x2F; 拆成数组元素</span><br><span class="line"></span><br><span class="line">        if(args.length &gt; 0)&#123;</span><br><span class="line">            allArgs &#x3D; allArgs.concat(args);</span><br><span class="line">            return next;</span><br><span class="line">        &#125;else&#123;</span><br><span class="line">            return fn.apply(null, allArgs);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>我们来一个简单的实例验证一下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var add &#x3D; currying(function()&#123;</span><br><span class="line">    var sum &#x3D; 0;</span><br><span class="line">    for(var i &#x3D; 0; i &lt; arguments.length; i++)&#123;</span><br><span class="line">        sum +&#x3D; arguments[i];</span><br><span class="line">    &#125;</span><br><span class="line">    return sum;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">add(1)(2, 3)(4)() &#x2F;&#x2F; &#x3D;&gt; 10</span><br></pre></td></tr></table></figure>
+
+<h1 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h1><h2 id="参数复用"><a href="#参数复用" class="headerlink" title="参数复用"></a>参数复用</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function getUrl(domain, protocol, path) &#123;</span><br><span class="line">	return protocol + &quot;:&#x2F;&#x2F;&quot; + domain + &quot;&#x2F;&quot; + path;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var page1 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page1.html&#39;);</span><br><span class="line">var page2 &#x3D; getUrl(&#39;http&#39;, &#39;lixuguang.github.io&#39;, &#39;page2.html&#39;);</span><br></pre></td></tr></table></figure>
+<p>我们使用currying来简化它：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var conardliSite &#x3D; currying(getUrl)</span><br><span class="line">var page1 &#x3D; conardliSite(&#39;page1.html&#39;)(&#39;http&#39;, &#39;lixuguang.github.io&#39;)();</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 闭包</title>
+    <url>/2020/01/02/FE-guide-Closure/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="闭包Closure"><a href="#闭包Closure" class="headerlink" title="闭包Closure"></a>闭包<code>Closure</code></h1><p>闭包的定义很简单：函数 <code>A</code> 返回了一个函数 <code>B</code> ，并且函数 <code>B</code> 中使用了函数 <code>A</code> 的变量，函数 <code>B</code> 就被称为闭包。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function A() &#123;</span><br><span class="line">  let a &#x3D; 1</span><br><span class="line">  function B() &#123;</span><br><span class="line">      console.log(a)</span><br><span class="line">  &#125;</span><br><span class="line">  return B</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>你是否会疑惑，为什么函数 <code>A</code> 已经弹出调用栈了，为什么函数 <code>B</code> 还能引用到函数 <code>A</code> 中的变量。因为函数 <code>A</code> 中的变量这时候是存储在堆上的。现在的 <code>JS</code> 引擎可以通过<strong><em>逃逸分析</em></strong>辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。</p>
+<p>经典面试题，循环中使用闭包解决 <code>var</code> 定义函数的问题</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>首先因为 <code>setTimeout</code> 是个异步函数，所有会先把循环全部执行完毕，这时候 <code>i</code> 就是 6 了，所以会输出一堆 6。</p>
+<p>解决办法两种，第一种使用闭包</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 1; i &lt;&#x3D; 5; i++) &#123;</span><br><span class="line">  (function(j) &#123;</span><br><span class="line">    setTimeout(function timer() &#123;</span><br><span class="line">      console.log(j);</span><br><span class="line">    &#125;, j * 1000);</span><br><span class="line">  &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>第二种就是使用 <code>setTimeout</code> 的第三个参数(附加参数，传给 <code>setTimeout</code> 中的函数)</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( var i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer(j) &#123;</span><br><span class="line">		console.log( j );</span><br><span class="line">	&#125;, i*1000, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>第三种就是使用 <code>let</code> 定义 <code>i</code> 了</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">for ( let i&#x3D;1; i&lt;&#x3D;5; i++) &#123;</span><br><span class="line">	setTimeout( function timer() &#123;</span><br><span class="line">		console.log( i );</span><br><span class="line">	&#125;, i*1000 );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为对于 <code>let</code> 来说，他会创建一个块级作用域，相当于</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#123; &#x2F;&#x2F; 形成块级作用域</span><br><span class="line">  let i &#x3D; 0</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">    setTimeout( function timer() &#123;</span><br><span class="line">        console.log( ii );</span><br><span class="line">    &#125;, i*1000 );</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  i++</span><br><span class="line">  &#123;</span><br><span class="line">    let ii &#x3D; i</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 函数防抖和节流</title>
+    <url>/2020/01/03/FE-guide-debounce-throttle/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="函数防抖和节流"><a href="#函数防抖和节流" class="headerlink" title="函数防抖和节流"></a>函数防抖和节流</h1><p>在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。</p>
+<p>通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。</p>
+<h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。</p>
+<p>这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。</p>
+<p>PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。</p>
+<p>我们先来看一个袖珍版的防抖理解一下防抖的实现：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// func是用户传入需要防抖的函数</span></span><br><span class="line"><span class="comment">// wait是等待时间</span></span><br><span class="line"><span class="keyword">const</span> debounce = <span class="function">(<span class="params">func, wait = <span class="number">50</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 缓存一个定时器id</span></span><br><span class="line">  <span class="keyword">let</span> timer = <span class="number">0</span></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次用户实际调用的防抖函数</span></span><br><span class="line">  <span class="comment">// 如果已经设定过定时器了就清空上一次的定时器</span></span><br><span class="line">  <span class="comment">// 开始一个新的定时器，延迟执行用户传入的方法</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      func.apply(<span class="keyword">this</span>, args)</span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数</span></span><br></pre></td></tr></table></figure>
+<p>这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：</p>
+<ul>
+<li>例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。</li>
+<li>例如用户给某系统表单点提交的时候，我们希望用户点第一下的时候就去调用接口，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这个是用来获取当前时间戳的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">now</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span> </span>func        回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>   </span>wait        表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;boolean&#125;</span>  </span>immediate   设置为ture时，是否立即调用函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">func, wait = <span class="number">50</span>, immediate = true</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 延迟执行函数</span></span><br><span class="line">  <span class="keyword">const</span> later = <span class="function"><span class="params">()</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 延迟函数执行完毕，清空缓存的定时器序号</span></span><br><span class="line">    timer = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 延迟执行的情况下，函数会在延迟函数中执行</span></span><br><span class="line">    <span class="comment">// 使用到之前缓存的参数和上下文</span></span><br><span class="line">    <span class="keyword">if</span> (!immediate) &#123;</span><br><span class="line">      func.apply(context, args)</span><br><span class="line">      context = args = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, wait)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 这里返回的函数是每次实际调用的函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...params</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果没有创建延迟执行函数（later），就创建一个</span></span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = later()</span><br><span class="line">      <span class="comment">// 如果是立即执行，调用函数</span></span><br><span class="line">      <span class="comment">// 否则缓存参数和调用上下文</span></span><br><span class="line">      <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">        func.apply(<span class="keyword">this</span>, params)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        context = <span class="keyword">this</span></span><br><span class="line">        args = params</span><br><span class="line">      &#125;</span><br><span class="line">    <span class="comment">// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span></span><br><span class="line">    <span class="comment">// 这样做延迟函数会重新计时</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">      timer = later()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>整体函数实现的不难，总结一下。</p>
+<ul>
+<li>对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。</li>
+<li>对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数</li>
+</ul>
+<h2 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h2><p>防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;function&#125;</span>   </span>func      回调函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;number&#125;</span>     </span>wait      表示时间窗口的间隔</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param  <span class="type">&#123;object&#125;</span>     </span>options   如果想忽略开始函数的的调用，传入&#123;leading: false&#125;。</span></span><br><span class="line"><span class="comment"> *                                如果想忽略结尾函数的调用，传入&#123;trailing: false&#125;</span></span><br><span class="line"><span class="comment"> *                                两者不能共存，否则函数不能执行</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;function&#125;</span>             </span>返回客户调用函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">_.throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context, args, result;</span><br><span class="line">    <span class="keyword">var</span> timeout = <span class="literal">null</span>;</span><br><span class="line">    <span class="comment">// 之前的时间戳</span></span><br><span class="line">    <span class="keyword">var</span> previous = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 如果 options 没传则设为空对象</span></span><br><span class="line">    <span class="keyword">if</span> (!options) options = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 定时器回调函数</span></span><br><span class="line">    <span class="keyword">var</span> later = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 如果设置了 leading，就将 previous 设为 0</span></span><br><span class="line">      <span class="comment">// 用于下面函数的第一个 if 判断</span></span><br><span class="line">      previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : _.now();</span><br><span class="line">      <span class="comment">// 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span></span><br><span class="line">      timeout = <span class="literal">null</span>;</span><br><span class="line">      result = func.apply(context, args);</span><br><span class="line">      <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 获得当前时间戳</span></span><br><span class="line">      <span class="keyword">var</span> now = _.now();</span><br><span class="line">      <span class="comment">// 首次进入前者肯定为 true</span></span><br><span class="line">	  <span class="comment">// 如果需要第一次不执行函数</span></span><br><span class="line">	  <span class="comment">// 就将上次时间戳设为当前的</span></span><br><span class="line">      <span class="comment">// 这样在接下来计算 remaining 的值时会大于0</span></span><br><span class="line">      <span class="keyword">if</span> (!previous &amp;&amp; options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line">      <span class="comment">// 计算剩余时间</span></span><br><span class="line">      <span class="keyword">var</span> remaining = wait - (now - previous);</span><br><span class="line">      context = <span class="keyword">this</span>;</span><br><span class="line">      args = <span class="built_in">arguments</span>;</span><br><span class="line">      <span class="comment">// 如果当前调用已经大于上次调用时间 + wait</span></span><br><span class="line">      <span class="comment">// 或者用户手动调了时间</span></span><br><span class="line"> 	  <span class="comment">// 如果设置了 trailing，只会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 如果没有设置 leading，那么第一次会进入这个条件</span></span><br><span class="line">	  <span class="comment">// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了</span></span><br><span class="line">	  <span class="comment">// 其实还是会进入的，因为定时器的延时</span></span><br><span class="line">	  <span class="comment">// 并不是准确的时间，很可能你设置了2秒</span></span><br><span class="line">	  <span class="comment">// 但是他需要2.2秒才触发，这时候就会进入这个条件</span></span><br><span class="line">      <span class="keyword">if</span> (remaining &lt;= <span class="number">0</span> || remaining &gt; wait) &#123;</span><br><span class="line">        <span class="comment">// 如果存在定时器就清理掉否则会调用二次回调</span></span><br><span class="line">        <span class="keyword">if</span> (timeout) &#123;</span><br><span class="line">          clearTimeout(timeout);</span><br><span class="line">          timeout = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        previous = now;</span><br><span class="line">        result = func.apply(context, args);</span><br><span class="line">        <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!timeout &amp;&amp; options.trailing !== <span class="literal">false</span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否设置了定时器和 trailing</span></span><br><span class="line">	    <span class="comment">// 没有的话就开启一个定时器</span></span><br><span class="line">        <span class="comment">// 并且不能不能同时设置 leading 和 trailing</span></span><br><span class="line">        timeout = setTimeout(later, remaining);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> result;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>计算机通识 ---- 数据结构</title>
+    <url>/2020/01/09/FE-guide-data-structure/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络相关的知识虽然平时在编码阶段很少遇到，但是并不是说它不重要，尤其是前端优化层面，能从网络传输过程优化的点有很多，所以，我们需要好好掌握网络相关的知识，接下来，我将会将我了解到的网络相关的知识点进行一一整理</p>
+<h1 id="栈-Heap"><a href="#栈-Heap" class="headerlink" title="栈 Heap"></a>栈 Heap</h1><blockquote>
+<p>栈是一个线性结构，在计算机中是一个相当常见的数据结构。<br>栈的特点是只能在某一端添加或删除数据，遵循<strong>先进后出(FILO)</strong>的原则</p>
+</blockquote>
+<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>每种数据结构都可以用很多种方式来实现，其实可以把栈看成是数组的一个子集，所以这里使用数组来实现</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">class Stack &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.stack &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  push(item) &#123;</span><br><span class="line">    this.stack.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  pop() &#123;</span><br><span class="line">    this.stack.pop()</span><br><span class="line">  &#125;</span><br><span class="line">  peek() &#123; &#x2F;&#x2F; 取最后一项</span><br><span class="line">    return this.stack[this.getCount() - 1]</span><br><span class="line">  &#125;</span><br><span class="line">  getCount() &#123;</span><br><span class="line">    return this.stack.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getCount() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>选取了 <a href="https://leetcode-cn.com/problems/valid-parentheses/" target="_blank" rel="noopener">LeetCode 上序号为 20 的题目</a></p>
+<p>题意是匹配括号，可以通过栈的特性来完成这道题目</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var isValid &#x3D; function(str) &#123;</span><br><span class="line">  let map &#x3D; &#123;</span><br><span class="line">    &#39;(&#39;: -1,</span><br><span class="line">    &#39;)&#39;: 1,</span><br><span class="line">    &#39;[&#39;: -2,</span><br><span class="line">    &#39;]&#39;: 2,</span><br><span class="line">    &#39;&#123;&#39;: -3,</span><br><span class="line">    &#39;&#125;&#39;: 3</span><br><span class="line">  &#125;</span><br><span class="line">  let stack &#x3D; [] &#x2F;&#x2F; 空数组</span><br><span class="line">  for (let i &#x3D; 0; i &lt; str.length; i++) &#123; &#x2F;&#x2F; 遍历字符串每个字符</span><br><span class="line">    if (map[str[i]] &lt; 0) &#123; &#x2F;&#x2F; 如果是左边括号，入栈</span><br><span class="line">      stack.push(str[i])</span><br><span class="line">    &#125; else &#123; &#x2F;&#x2F; 否则出栈，判断左右括号加到一起是不是0</span><br><span class="line">      let last &#x3D; stack.pop()</span><br><span class="line">      if (map[last] + map[str[i]] !&#x3D; 0) return false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  if (stack.length &gt; 0) return false &#x2F;&#x2F; 循环完成后，判断数组中时候还有剩下的，有剩下的说明括号没闭合</span><br><span class="line">  return true &#x2F;&#x2F; 否则没剩下的，都闭合了</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="队列"><a href="#队列" class="headerlink" title="队列"></a>队列</h1><blockquote>
+<p>队列一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循<strong>先进先出(FIFO)</strong>的原则。</p>
+</blockquote>
+<h2 id="实现-1"><a href="#实现-1" class="headerlink" title="实现"></a>实现</h2><p>这里会讲解两种实现队列的方式，分别是<strong>单链队列</strong>和<strong>循环队列</strong>。</p>
+<ul>
+<li>链队列即队列的链式存储结构，结构上就是一个单链表，但数据只能是头进尾出。链式结构更加的灵活，特别是在存储空间上，基本不会出现溢出的情况，所以不用像循环队列一样判断队列是否已满，且空间的利用率相对较高。<ul>
+<li>链队列front指向头结点，头结点不存储数据，rear指向队尾结点。</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p>循环队列即为头尾相接的队列，它的最大存储空间和顺序队列一样由数组界定，但队列的长度并不一定等同于数组的长度；循环队列的队首和队尾分别由两个指针front、rear标识，于是这样就能做到首尾相接。</p>
+</li>
+<li><p>链队列：为操作方便，给链队列添加一个头结点</p>
+</li>
+<li><p>循环队列：附设两个指针front和rear分别指示队列头元素及尾元素的位置，每当插入新的队尾元素是，尾指针加1；每当删除队列头元素是，头指针加1</p>
+<ul>
+<li>如果用循环队列，则必须设定一个最大队列长度；若无法确定最大长度，则宜采用链队列。</li>
+</ul>
+</li>
+</ul>
+<h3 id="单链队列"><a href="#单链队列" class="headerlink" title="单链队列"></a>单链队列</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Queue &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.queue &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    this.queue.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    return this.queue.shift()</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    return this.queue[0]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.getLength() &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>因为单链队列在出队操作的时候需要 O(n) 的时间复杂度，所以引入了循环队列。<br>循环队列的出队操作平均是 O(1) 的时间复杂度。</p>
+<h3 id="循环队列"><a href="#循环队列" class="headerlink" title="循环队列"></a>循环队列</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class SqQueue &#123;</span><br><span class="line">  constructor(length) &#123;</span><br><span class="line">    this.queue &#x3D; new Array(length + 1)</span><br><span class="line">    &#x2F;&#x2F; 队头</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 队尾</span><br><span class="line">    this.last &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 当前队列大小</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    &#x2F;&#x2F; 判断队尾 + 1 是否为队头</span><br><span class="line">    &#x2F;&#x2F; 如果是就代表需要扩容数组</span><br><span class="line">    &#x2F;&#x2F; % this.queue.length 是为了防止数组越界</span><br><span class="line">    if (this.first &#x3D;&#x3D;&#x3D; (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] &#x3D; item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last &#x3D; (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r &#x3D; this.queue[this.first]</span><br><span class="line">    this.queue[this.first] &#x3D; null</span><br><span class="line">    this.first &#x3D; (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    &#x2F;&#x2F; 判断当前队列大小是否过小</span><br><span class="line">    &#x2F;&#x2F; 为了保证不浪费空间，在队列空间等于总长度四分之一时</span><br><span class="line">    &#x2F;&#x2F; 且不为 2 时缩小总长度为当前的一半</span><br><span class="line">    if (this.size &#x3D;&#x3D;&#x3D; this.getLength() &#x2F; 4 &amp;&amp; this.getLength() &#x2F; 2 !&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      this.resize(this.getLength() &#x2F; 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Error(&#39;Queue is empty&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first &#x3D;&#x3D;&#x3D; this.last</span><br><span class="line">  &#125;</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q &#x3D; new Array(length)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] &#x3D; this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue &#x3D; q</span><br><span class="line">    this.first &#x3D; 0</span><br><span class="line">    this.last &#x3D; this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="链表"><a href="#链表" class="headerlink" title="链表"></a>链表</h1><blockquote>
+<p>链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。但是链表失去了数组随机读取的优点，同时链表由于增加了结点的指针域，空间开销比较大。</p>
+</blockquote>
+<h2 id="实现-2"><a href="#实现-2" class="headerlink" title="实现"></a>实现</h2><p>单向链表</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(v, next) &#123;</span><br><span class="line">    this.value &#x3D; v</span><br><span class="line">    this.next &#x3D; next</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class LinkList &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 链表长度</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 虚拟头部</span><br><span class="line">    this.dummyNode &#x3D; new Node(null, null)</span><br><span class="line">  &#125;</span><br><span class="line">  find(header, index, currentIndex) &#123;</span><br><span class="line">    if (index &#x3D;&#x3D;&#x3D; currentIndex) return header</span><br><span class="line">    return this.find(header.next, index, currentIndex + 1)</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v, index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    &#x2F;&#x2F; 当往链表末尾插入时，prev.next 为空</span><br><span class="line">    &#x2F;&#x2F; 其他情况时，因为要插入节点，所以插入的节点</span><br><span class="line">    &#x2F;&#x2F; 的 next 应该是 prev.next</span><br><span class="line">    &#x2F;&#x2F; 然后设置 prev.next 为插入的节点</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    prev.next &#x3D; new Node(v, prev.next)</span><br><span class="line">    this.size++</span><br><span class="line">    return prev.next</span><br><span class="line">  &#125;</span><br><span class="line">  insertNode(v, index) &#123;</span><br><span class="line">    return this.addNode(v, index)</span><br><span class="line">  &#125;</span><br><span class="line">  addToFirst(v) &#123;</span><br><span class="line">    return this.addNode(v, 0)</span><br><span class="line">  &#125;</span><br><span class="line">  addToLast(v) &#123;</span><br><span class="line">    return this.addNode(v, this.size)</span><br><span class="line">  &#125;</span><br><span class="line">  removeNode(index, isLast) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    index &#x3D; isLast ? index - 1 : index</span><br><span class="line">    let prev &#x3D; this.find(this.dummyNode, index, 0)</span><br><span class="line">    let node &#x3D; prev.next</span><br><span class="line">    prev.next &#x3D; node.next</span><br><span class="line">    node.next &#x3D; null</span><br><span class="line">    this.size--</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  removeFirstNode() &#123;</span><br><span class="line">    return this.removeNode(0)</span><br><span class="line">  &#125;</span><br><span class="line">  removeLastNode() &#123;</span><br><span class="line">    return this.removeNode(this.size, true)</span><br><span class="line">  &#125;</span><br><span class="line">  checkIndex(index) &#123;</span><br><span class="line">    if (index &lt; 0 || index &gt; this.size) throw Error(&#39;Index error&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  getNode(index) &#123;</span><br><span class="line">    this.checkIndex(index)</span><br><span class="line">    if (this.isEmpty()) return</span><br><span class="line">    return this.find(this.dummyNode, index, 0).next</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="树"><a href="#树" class="headerlink" title="树"></a>树</h1><h2 id="二叉树"><a href="#二叉树" class="headerlink" title="二叉树"></a>二叉树</h2><p>树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。</p>
+<p>二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。</p>
+<h2 id="二分搜索树"><a href="#二分搜索树" class="headerlink" title="二分搜索树"></a>二分搜索树</h2><p>二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。</p>
+<p>这种存储方式很适合于数据搜索。如下图所示，当需要查找 6 的时候，因为需要查找的值比根节点的值大，所以只需要在根节点的右子树上寻找，大大提高了搜索效率。</p>
+<h3 id="实现-3"><a href="#实现-3" class="headerlink" title="实现"></a>实现</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class BST &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">    this.size &#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  getSize() &#123;</span><br><span class="line">    return this.size</span><br><span class="line">  &#125;</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.size &#x3D;&#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 添加节点时，需要比较添加的节点值和当前</span><br><span class="line">  &#x2F;&#x2F; 节点值的大小</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      this.size++</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125;</span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上是最基本的二分搜索树实现，接下来实现树的遍历。</p>
+<p>对于树的遍历来说，有三种遍历方法，分别是<strong>先序遍历</strong>、<strong>中序遍历</strong>、<strong>后序遍历</strong>。</p>
+<p>三种遍历的区别在于何时访问节点。在遍历树的过程中，每个节点都会遍历三次，分别是遍历到自己，遍历左子树和遍历右子树。如果需要实现先序遍历，那么只需要第一次遍历到节点时进行操作即可。</p>
+<p>以下都是递归实现.</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先序遍历可用于打印树的结构</span><br><span class="line">&#x2F;&#x2F; 先序遍历先访问根节点，然后访问左节点，最后访问右节点。</span><br><span class="line">preTraversal() &#123;</span><br><span class="line">  this._pre(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_pre(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._pre(node.left)</span><br><span class="line">    this._pre(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 中序遍历可用于排序</span><br><span class="line">&#x2F;&#x2F; 对于 BST 来说，中序遍历可以实现一次遍历就</span><br><span class="line">&#x2F;&#x2F; 得到有序的值</span><br><span class="line">&#x2F;&#x2F; 中序遍历表示先访问左节点，然后访问根节点，最后访问右节点。</span><br><span class="line">midTraversal() &#123;</span><br><span class="line">  this._mid(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_mid(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._mid(node.left)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">    this._mid(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 后序遍历可用于先操作子节点</span><br><span class="line">&#x2F;&#x2F; 再操作父节点的场景</span><br><span class="line">&#x2F;&#x2F; 后序遍历表示先访问左节点，然后访问右节点，最后访问根节点。</span><br><span class="line">backTraversal() &#123;</span><br><span class="line">  this._back(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_back(node) &#123;</span><br><span class="line">  if (node) &#123;</span><br><span class="line">    this._back(node.left)</span><br><span class="line">    this._back(node.right)</span><br><span class="line">    console.log(node.value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>以上的这几种遍历都可以称之为深度遍历，对应的还有种遍历叫做广度遍历，也就是一层层地遍历树。对于广度遍历来说，我们需要利用之前讲过的队列结构来完成。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">breadthTraversal() &#123;</span><br><span class="line">  if (!this.root) return null</span><br><span class="line">  let q &#x3D; new Queue()</span><br><span class="line">  &#x2F;&#x2F; 将根节点入队</span><br><span class="line">  q.enQueue(this.root)</span><br><span class="line">  &#x2F;&#x2F; 循环判断队列是否为空，为空</span><br><span class="line">  &#x2F;&#x2F; 代表树遍历完毕</span><br><span class="line">  while (!q.isEmpty()) &#123;</span><br><span class="line">    &#x2F;&#x2F; 将队首出队，判断是否有左右子树</span><br><span class="line">    &#x2F;&#x2F; 有的话，就先左后右入队</span><br><span class="line">    let n &#x3D; q.deQueue()</span><br><span class="line">    console.log(n.value)</span><br><span class="line">    if (n.left) q.enQueue(n.left)</span><br><span class="line">    if (n.right) q.enQueue(n.right)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来先介绍如何在树中寻找最小值或最大数。因为二分搜索树的特性，所以最小值一定在根节点的最左边，最大值相反</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">getMin() &#123;</span><br><span class="line">  return this._getMin(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMin(node) &#123;</span><br><span class="line">  if (!node.left) return node</span><br><span class="line">  return this._getMin(node.left)</span><br><span class="line">&#125;</span><br><span class="line">getMax() &#123;</span><br><span class="line">  return this._getMax(this.root).value</span><br><span class="line">&#125;</span><br><span class="line">_getMax(node) &#123;</span><br><span class="line">  if (!node.right) return node</span><br><span class="line">  return this._getMin(node.right)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong>向上取整和向下取整</strong>，这两个操作是相反的，所以代码也是类似的，这里只介绍如何向下取整。既然是向下取整，那么根据二分搜索树的特性，值一定在根节点的左侧。只需要一直遍历左子树直到当前节点的值不再大于等于需要的值，然后判断节点是否还拥有右子树。如果有的话，继续上面的递归判断。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">floor(v) &#123;</span><br><span class="line">  let node &#x3D; this._floor(this.root, v)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_floor(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  if (node.value &#x3D;&#x3D;&#x3D; v) return v</span><br><span class="line">  &#x2F;&#x2F; 如果当前节点值还比需要的值大，就继续递归</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    return this._floor(node.left, v)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 判断当前节点是否拥有右子树</span><br><span class="line">  let right &#x3D; this._floor(node.right, v)</span><br><span class="line">  if (right) return right</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>排名，这是用于获取给定值的排名或者排名第几的节点的值，这两个操作也是相反的，所以这个只介绍如何获取排名第几的节点的值。对于这个操作而言，我们需要略微的改造点代码，让每个节点拥有一个 size 属性。该属性表示该节点下有多少子节点（包含自身）。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    this.size &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 新增代码</span><br><span class="line">_getSize(node) &#123;</span><br><span class="line">  return node ? node.size : 0</span><br><span class="line">&#125;</span><br><span class="line">_addChild(node, v) &#123;</span><br><span class="line">  if (!node) &#123;</span><br><span class="line">    return new Node(v)</span><br><span class="line">  &#125;</span><br><span class="line">  if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">  &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 修改代码</span><br><span class="line">    node.size++</span><br><span class="line">    node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">  &#125;</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br><span class="line">select(k) &#123;</span><br><span class="line">  let node &#x3D; this._select(this.root, k)</span><br><span class="line">  return node ? node.value : null</span><br><span class="line">&#125;</span><br><span class="line">_select(node, k) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 先获取左子树下有几个节点</span><br><span class="line">  let size &#x3D; node.left ? node.left.size : 0</span><br><span class="line">  &#x2F;&#x2F; 判断 size 是否大于 k</span><br><span class="line">  &#x2F;&#x2F; 如果大于 k，代表所需要的节点在左节点</span><br><span class="line">  if (size &gt; k) return this._select(node.left, k)</span><br><span class="line">  &#x2F;&#x2F; 如果小于 k，代表所需要的节点在右节点</span><br><span class="line">  &#x2F;&#x2F; 注意这里需要重新计算 k，减去根节点除了右子树的节点数量</span><br><span class="line">  if (size &lt; k) return this._select(node.right, k - size - 1)</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>接下来讲解的是二分搜索树中最难实现的部分：删除节点。因为对于删除节点来说，会存在以下几种情况</p>
+<ul>
+<li>需要删除的节点没有子树</li>
+<li>需要删除的节点只有一条子树</li>
+<li>需要删除的节点有左右两条树</li>
+</ul>
+<p>对于前两种情况很好解决，但是第三种情况就有难度了，所以先来实现相对简单的操作：删除最小节点，对于删除最小节点来说，是不存在第三种情况的，删除最大节点操作是和删除最小节点相反的，所以这里也就不再赘述。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delectMin() &#123;</span><br><span class="line">  this.root &#x3D; this._delectMin(this.root)</span><br><span class="line">  console.log(this.root)</span><br><span class="line">&#125;</span><br><span class="line">_delectMin(node) &#123;</span><br><span class="line">  &#x2F;&#x2F; 一直递归左子树</span><br><span class="line">  &#x2F;&#x2F; 如果左子树为空，就判断节点是否拥有右子树</span><br><span class="line">  &#x2F;&#x2F; 有右子树的话就把需要删除的节点替换为右子树</span><br><span class="line">  if ((node !&#x3D; null) &amp; !node.left) return node.right</span><br><span class="line">  node.left &#x3D; this._delectMin(node.left)</span><br><span class="line">  &#x2F;&#x2F; 最后需要重新维护下节点的 &#96;size&#96;</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>最后讲解的就是如何删除任意节点了。对于这个操作，T.Hibbard 在 1962 年提出了解决这个难题的办法，也就是如何解决第三种情况。</p>
+<p>当遇到这种情况时，需要取出当前节点的后继节点（也就是当前节点右子树的最小节点）来替换需要删除的节点。然后将需要删除节点的左子树赋值给后继结点，右子树删除后继结点后赋值给他。</p>
+<p>你如果对于这个解决办法有疑问的话，可以这样考虑。因为二分搜索树的特性，父节点一定比所有左子节点大，比所有右子节点小。那么当需要删除父节点时，势必需要拿出一个比父节点大的节点来替换父节点。这个节点肯定不存在于左子树，必然存在于右子树。然后又需要保持父节点都是比右子节点小的，那么就可以取出右子树中最小的那个节点来替换父节点。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">delect(v) &#123;</span><br><span class="line">  this.root &#x3D; this._delect(this.root, v)</span><br><span class="line">&#125;</span><br><span class="line">_delect(node, v) &#123;</span><br><span class="line">  if (!node) return null</span><br><span class="line">  &#x2F;&#x2F; 寻找的节点比当前节点小，去左子树找</span><br><span class="line">  if (node.value &lt; v) &#123;</span><br><span class="line">    node.right &#x3D; this._delect(node.right, v)</span><br><span class="line">  &#125; else if (node.value &gt; v) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找的节点比当前节点大，去右子树找</span><br><span class="line">    node.left &#x3D; this._delect(node.left, v)</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    &#x2F;&#x2F; 进入这个条件说明已经找到节点</span><br><span class="line">    &#x2F;&#x2F; 先判断节点是否拥有拥有左右子树中的一个</span><br><span class="line">    &#x2F;&#x2F; 是的话，将子树返回出去，这里和 &#96;_delectMin&#96; 的操作一样</span><br><span class="line">    if (!node.left) return node.right</span><br><span class="line">    if (!node.right) return node.left</span><br><span class="line">    &#x2F;&#x2F; 进入这里，代表节点拥有左右子树</span><br><span class="line">    &#x2F;&#x2F; 先取出当前节点的后继结点，也就是取当前节点右子树的最小值</span><br><span class="line">    let min &#x3D; this._getMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 取出最小值后，删除最小值</span><br><span class="line">    &#x2F;&#x2F; 然后把删除节点后的子树赋值给最小值节点</span><br><span class="line">    min.right &#x3D; this._delectMin(node.right)</span><br><span class="line">    &#x2F;&#x2F; 左子树不动</span><br><span class="line">    min.left &#x3D; node.left</span><br><span class="line">    node &#x3D; min</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 维护 size</span><br><span class="line">  node.size &#x3D; this._getSize(node.left) + this._getSize(node.right) + 1</span><br><span class="line">  return node</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="AVL-树"><a href="#AVL-树" class="headerlink" title="AVL 树"></a>AVL 树</h2><blockquote>
+<p>二分搜索树实际在业务中是受到限制的，因为并不是严格的 O(logN)，在极端情况下会退化成链表，比如加入一组升序的数字就会造成这种情况。</p>
+</blockquote>
+<blockquote>
+<p>AVL 树改进了二分搜索树，在 AVL 树中任意节点的左右子树的高度差都不大于 1，这样保证了时间复杂度是严格的 O(logN)。基于此，对 AVL 树增加或删除节点时可能需要旋转树来达到高度的平衡。</p>
+</blockquote>
+<h3 id="实现-4"><a href="#实现-4" class="headerlink" title="实现"></a>实现</h3><p>因为 AVL 树是改进了二分搜索树，所以部分代码是于二分搜索树重复的，对于重复内容不作再次解析。</p>
+<p>对于 AVL 树来说，添加节点会有四种情况<br><img src="https://s2.ax1x.com/2020/01/09/lWB0nf.png" alt="lWB0nf.png"></p>
+<p>对于左左情况来说，新增加的节点位于节点 2 的左侧，这时树已经不平衡，需要旋转。因为搜索树的特性，节点比左节点大，比右节点小，所以旋转以后也要实现这个特性。</p>
+<p>旋转之前：new &lt; 2 &lt; C &lt; 3 &lt; B &lt; 5 &lt; A，右旋之后节点 3 为根节点，这时候需要将节点 3 的右节点加到节点 5 的左边，最后还需要更新节点的高度。</p>
+<p>对于右右情况来说，相反于左左情况，所以不再赘述。</p>
+<p>对于左右情况来说，新增加的节点位于节点 4 的右侧。对于这种情况，需要通过两次旋转来达到目的。</p>
+<p>首先对节点的左节点左旋，这时树满足左左的情况，再对节点进行一次右旋就可以达到目的。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class Node &#123;</span><br><span class="line">  constructor(value) &#123;</span><br><span class="line">    this.value &#x3D; value</span><br><span class="line">    this.left &#x3D; null</span><br><span class="line">    this.right &#x3D; null</span><br><span class="line">    this.height &#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class AVL &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.root &#x3D; null</span><br><span class="line">  &#125;</span><br><span class="line">  addNode(v) &#123;</span><br><span class="line">    this.root &#x3D; this._addChild(this.root, v)</span><br><span class="line">  &#125;</span><br><span class="line">  _addChild(node, v) &#123;</span><br><span class="line">    if (!node) &#123;</span><br><span class="line">      return new Node(v)</span><br><span class="line">    &#125;</span><br><span class="line">    if (node.value &gt; v) &#123;</span><br><span class="line">      node.left &#x3D; this._addChild(node.left, v)</span><br><span class="line">    &#125; else if (node.value &lt; v) &#123;</span><br><span class="line">      node.right &#x3D; this._addChild(node.right, v)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      node.value &#x3D; v</span><br><span class="line">    &#125;</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    let factor &#x3D; this._getBalanceFactor(node)</span><br><span class="line">    &#x2F;&#x2F; 当需要右旋时，根节点的左树一定比右树高度高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &gt;&#x3D; 0) &#123;</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 当需要左旋时，根节点的左树一定比右树高度矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &lt;&#x3D; 0) &#123;</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 左右情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树高，且节点的左树的右树比节点的左树的左树高</span><br><span class="line">    if (factor &gt; 1 &amp;&amp; this._getBalanceFactor(node.left) &lt; 0) &#123;</span><br><span class="line">      node.left &#x3D; this._leftRotate(node.left)</span><br><span class="line">      return this._rightRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 右左情况</span><br><span class="line">    &#x2F;&#x2F; 节点的左树比右树矮，且节点的右树的右树比节点的右树的左树矮</span><br><span class="line">    if (factor &lt; -1 &amp;&amp; this._getBalanceFactor(node.right) &gt; 0) &#123;</span><br><span class="line">      node.right &#x3D; this._rightRotate(node.right)</span><br><span class="line">      return this._leftRotate(node)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return node</span><br><span class="line">  &#125;</span><br><span class="line">  _getHeight(node) &#123;</span><br><span class="line">    if (!node) return 0</span><br><span class="line">    return node.height</span><br><span class="line">  &#125;</span><br><span class="line">  _getBalanceFactor(node) &#123;</span><br><span class="line">    return this._getHeight(node.left) - this._getHeight(node.right)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点右旋</span><br><span class="line">  &#x2F;&#x2F;           5                    2</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       1      5</span><br><span class="line">  &#x2F;&#x2F;       &#x2F;  \               &#x2F;       &#x2F;  \</span><br><span class="line">  &#x2F;&#x2F;      1    3             new     3    6</span><br><span class="line">  &#x2F;&#x2F;     &#x2F;</span><br><span class="line">  &#x2F;&#x2F;    new</span><br><span class="line">  _rightRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.left</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.right</span><br><span class="line">    &#x2F;&#x2F; 节点 2 的右节点改为节点 5</span><br><span class="line">    newRoot.right &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 5 左节点改为节点 3</span><br><span class="line">    node.left &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 节点左旋</span><br><span class="line">  &#x2F;&#x2F;           4                    6</span><br><span class="line">  &#x2F;&#x2F;         &#x2F;   \                &#x2F;   \</span><br><span class="line">  &#x2F;&#x2F;        2     6   &#x3D;&#x3D;&gt;       4      7</span><br><span class="line">  &#x2F;&#x2F;             &#x2F;  \         &#x2F;   \      \</span><br><span class="line">  &#x2F;&#x2F;            5     7      2     5      new</span><br><span class="line">  &#x2F;&#x2F;                   \</span><br><span class="line">  &#x2F;&#x2F;                    new</span><br><span class="line">  _leftRotate(node) &#123;</span><br><span class="line">    &#x2F;&#x2F; 旋转后新根节点</span><br><span class="line">    let newRoot &#x3D; node.right</span><br><span class="line">    &#x2F;&#x2F; 需要移动的节点</span><br><span class="line">    let moveNode &#x3D; newRoot.left</span><br><span class="line">    &#x2F;&#x2F; 节点 6 的左节点改为节点 4</span><br><span class="line">    newRoot.left &#x3D; node</span><br><span class="line">    &#x2F;&#x2F; 节点 4 右节点改为节点 5</span><br><span class="line">    node.right &#x3D; moveNode</span><br><span class="line">    &#x2F;&#x2F; 更新树的高度</span><br><span class="line">    node.height &#x3D;</span><br><span class="line">      1 + Math.max(this._getHeight(node.left), this._getHeight(node.right))</span><br><span class="line">    newRoot.height &#x3D;</span><br><span class="line">      1 +</span><br><span class="line">      Math.max(this._getHeight(newRoot.left), this._getHeight(newRoot.right))</span><br><span class="line"></span><br><span class="line">    return newRoot</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="Trie"><a href="#Trie" class="headerlink" title="Trie"></a>Trie</h1><blockquote>
+<p>在计算机科学，trie，又称前缀树或字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。<br>简单点来说，这个结构的作用大多是为了方便搜索字符串，该树有以下几个特点</p>
+</blockquote>
+<ul>
+<li>根节点代表空字符串，每个节点都有 N（假如搜索英文字符，就有 26 条） 条链接，每条链接代表一个字符</li>
+<li>节点不存储字符，只有路径才存储，这点和其他的树结构不同</li>
+<li>从根节点开始到任意一个节点，将沿途经过的字符连接起来就是该节点对应的字符串</li>
+</ul>
+<h2 id="实现-5"><a href="#实现-5" class="headerlink" title="实现"></a>实现</h2><p>总得来说 Trie 的实现相比别的树结构来说简单的很多，实现就以搜索英文字符为例。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class TrieNode &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 代表每个字符经过节点的次数</span><br><span class="line">    this.path &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 代表到该节点的字符串有几个</span><br><span class="line">    this.end &#x3D; 0</span><br><span class="line">    &#x2F;&#x2F; 链接</span><br><span class="line">    this.next &#x3D; new Array(26).fill(null)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class Trie &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    &#x2F;&#x2F; 根节点，代表空字符</span><br><span class="line">    this.root &#x3D; new TrieNode()</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 插入字符串</span><br><span class="line">  insert(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      &#x2F;&#x2F; 获得字符先对应的索引</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，就创建</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        node.next[index] &#x3D; new TrieNode()</span><br><span class="line">      &#125;</span><br><span class="line">      node.path +&#x3D; 1</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end +&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 搜索字符串出现的次数</span><br><span class="line">  search(str) &#123;</span><br><span class="line">    if (!str) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应没有值，代表没有需要搜素的字符串</span><br><span class="line">      if (!node.next[index]) &#123;</span><br><span class="line">        return 0</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    return node.end</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 删除字符串</span><br><span class="line">  delete(str) &#123;</span><br><span class="line">    if (!this.search(str)) return</span><br><span class="line">    let node &#x3D; this.root</span><br><span class="line">    for (let i &#x3D; 0; i &lt; str.length; i++) &#123;</span><br><span class="line">      let index &#x3D; str[i].charCodeAt() - &#39;a&#39;.charCodeAt()</span><br><span class="line">      &#x2F;&#x2F; 如果索引对应的节点的 Path 为 0，代表经过该节点的字符串</span><br><span class="line">      &#x2F;&#x2F; 已经一个，直接删除即可</span><br><span class="line">      if (--node.next[index].path &#x3D;&#x3D; 0) &#123;</span><br><span class="line">        node.next[index] &#x3D; null</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      node &#x3D; node.next[index]</span><br><span class="line">    &#125;</span><br><span class="line">    node.end -&#x3D; 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="并查集"><a href="#并查集" class="headerlink" title="并查集"></a>并查集</h1><blockquote>
+<p>并查集是一种特殊的树结构，用于处理一些不交集的合并及查询问题。该结构中每个节点都有一个父节点，如果只有当前一个节点，那么该节点的父节点指向自己。<br>这个结构中有两个重要的操作，分别是：</p>
+</blockquote>
+<ul>
+<li>Find：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。</li>
+<li>Union：将两个子集合并成同一个集合。</li>
+</ul>
+<h2 id="实现-6"><a href="#实现-6" class="headerlink" title="实现"></a>实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class DisjointSet &#123;</span><br><span class="line">  &#x2F;&#x2F; 初始化样本</span><br><span class="line">  constructor(count) &#123;</span><br><span class="line">    &#x2F;&#x2F; 初始化时，每个节点的父节点都是自己</span><br><span class="line">    this.parent &#x3D; new Array(count)</span><br><span class="line">    &#x2F;&#x2F; 用于记录树的深度，优化搜索复杂度</span><br><span class="line">    this.rank &#x3D; new Array(count)</span><br><span class="line">    for (let i &#x3D; 0; i &lt; count; i++) &#123;</span><br><span class="line">      this.parent[i] &#x3D; i</span><br><span class="line">      this.rank[i] &#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  find(p) &#123;</span><br><span class="line">    &#x2F;&#x2F; 寻找当前节点的父节点是否为自己，不是的话表示还没找到</span><br><span class="line">    &#x2F;&#x2F; 开始进行路径压缩优化</span><br><span class="line">    &#x2F;&#x2F; 假设当前节点父节点为 A</span><br><span class="line">    &#x2F;&#x2F; 将当前节点挂载到 A 节点的父节点上，达到压缩深度的目的</span><br><span class="line">    while (p !&#x3D; this.parent[p]) &#123;</span><br><span class="line">      this.parent[p] &#x3D; this.parent[this.parent[p]]</span><br><span class="line">      p &#x3D; this.parent[p]</span><br><span class="line">    &#125;</span><br><span class="line">    return p</span><br><span class="line">  &#125;</span><br><span class="line">  isConnected(p, q) &#123;</span><br><span class="line">    return this.find(p) &#x3D;&#x3D;&#x3D; this.find(q)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 合并</span><br><span class="line">  union(p, q) &#123;</span><br><span class="line">    &#x2F;&#x2F; 找到两个数字的父节点</span><br><span class="line">    let i &#x3D; this.find(p)</span><br><span class="line">    let j &#x3D; this.find(q)</span><br><span class="line">    if (i &#x3D;&#x3D;&#x3D; j) return</span><br><span class="line">    &#x2F;&#x2F; 判断两棵树的深度，深度小的加到深度大的树下面</span><br><span class="line">    &#x2F;&#x2F; 如果两棵树深度相等，那就无所谓怎么加</span><br><span class="line">    if (this.rank[i] &lt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">    &#125; else if (this.rank[i] &gt; this.rank[j]) &#123;</span><br><span class="line">      this.parent[j] &#x3D; i</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      this.parent[i] &#x3D; j</span><br><span class="line">      this.rank[j] +&#x3D; 1</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="堆"><a href="#堆" class="headerlink" title="堆"></a>堆</h1><p>堆通常是一个可以被看做一棵树的数组对象。<br>堆的实现通过构造<strong>二叉堆</strong>，实为二叉树的一种。这种数据结构具有以下性质。</p>
+<ul>
+<li>任意节点小于（或大于）它的所有子节点</li>
+<li>堆总是一棵完全树。即除了最底层，其他层的节点都被元素填满，且最底层从左到右填入。<br>将根节点最大的堆叫做<strong>最大堆</strong>或<strong>大根堆</strong>，根节点最小的堆叫做<strong>最小堆</strong>或<strong>小根堆</strong>。<br>优先队列也完全可以用堆来实现，操作是一模一样的。</li>
+</ul>
+<h2 id="实现大根堆"><a href="#实现大根堆" class="headerlink" title="实现大根堆"></a>实现大根堆</h2><p>堆的每个节点的左边子节点索引是 i * 2 + 1，右边是 i * 2 + 2，父节点是 (i - 1) /2。<br>堆有两个核心的操作，分别是 shiftUp 和 shiftDown 。前者用于添加元素，后者用于删除根节点。<br>shiftUp 的核心思路是一路将节点与父节点对比大小，如果比父节点大，就和父节点交换位置。<br>shiftDown 的核心思路是先将根节点和末尾交换位置，然后移除末尾元素。接下来循环判断父节点和两个子节点的大小，如果子节点大，就把最大的子节点和父节点交换。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MaxHeap &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.heap &#x3D; []</span><br><span class="line">  &#125;</span><br><span class="line">  size() &#123;</span><br><span class="line">    return this.heap.length</span><br><span class="line">  &#125;</span><br><span class="line">  empty() &#123;</span><br><span class="line">    return this.size() &#x3D;&#x3D; 0</span><br><span class="line">  &#125;</span><br><span class="line">  add(item) &#123;</span><br><span class="line">    this.heap.push(item)</span><br><span class="line">    this._shiftUp(this.size() - 1)</span><br><span class="line">  &#125;</span><br><span class="line">  removeMax() &#123;</span><br><span class="line">    this._shiftDown(0)</span><br><span class="line">  &#125;</span><br><span class="line">  getParentIndex(k) &#123;</span><br><span class="line">    return parseInt((k - 1) &#x2F; 2)</span><br><span class="line">  &#125;</span><br><span class="line">  getLeftIndex(k) &#123;</span><br><span class="line">    return k * 2 + 1</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftUp(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果当前节点比父节点大，就交换</span><br><span class="line">    while (this.heap[k] &gt; this.heap[this.getParentIndex(k)]) &#123;</span><br><span class="line">      this._swap(k, this.getParentIndex(k))</span><br><span class="line">      &#x2F;&#x2F; 将索引变成父节点</span><br><span class="line">      k &#x3D; this.getParentIndex(k)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _shiftDown(k) &#123;</span><br><span class="line">    &#x2F;&#x2F; 交换首位并删除末尾</span><br><span class="line">    this._swap(k, this.size() - 1)</span><br><span class="line">    this.heap.splice(this.size() - 1, 1)</span><br><span class="line">    &#x2F;&#x2F; 判断节点是否有左孩子，因为二叉堆的特性，有右必有左</span><br><span class="line">    while (this.getLeftIndex(k) &lt; this.size()) &#123;</span><br><span class="line">      let j &#x3D; this.getLeftIndex(k)</span><br><span class="line">      &#x2F;&#x2F; 判断是否有右孩子，并且右孩子是否大于左孩子</span><br><span class="line">      if (j + 1 &lt; this.size() &amp;&amp; this.heap[j + 1] &gt; this.heap[j]) j++</span><br><span class="line">      &#x2F;&#x2F; 判断父节点是否已经比子节点都大</span><br><span class="line">      if (this.heap[k] &gt;&#x3D; this.heap[j]) break</span><br><span class="line">      this._swap(k, j)</span><br><span class="line">      k &#x3D; j</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  _swap(left, right) &#123;</span><br><span class="line">    let rightValue &#x3D; this.heap[right]</span><br><span class="line">    this.heap[right] &#x3D; this.heap[left]</span><br><span class="line">    this.heap[left] &#x3D; rightValue</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>计算机通识</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 继承</title>
+    <url>/2020/01/03/FE-guide-inherit/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>在 ES5 中，我们可以使用如下方式解决继承的问题</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function Super() &#123;&#125;</span><br><span class="line">Super.prototype.getNumber &#x3D; function() &#123;</span><br><span class="line">  return 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Sub() &#123;&#125;</span><br><span class="line">let s &#x3D; new Sub()</span><br><span class="line">Sub.prototype &#x3D; Object.create(Super.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: Sub,</span><br><span class="line">    enumerable: false,</span><br><span class="line">    writable: true,</span><br><span class="line">    configurable: true</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路就是将子类的原型设置为父类的原型<br>在 <code>ES6</code> 中，我们可以通过 <code>class</code> 语法轻松解决这个问题</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">class MyDate extends Date &#123;</span><br><span class="line">  test() &#123;</span><br><span class="line">    return this.getTime()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">let myDate &#x3D; new MyDate()</span><br><span class="line">myDate.test()</span><br></pre></td></tr></table></figure>
+<p>但是 <code>ES6</code> 不是所有浏览器都兼容，所以我们需要使用 <code>Babel</code> 来编译这段代码。</p>
+<p>如果你使用编译过得代码调用 <code>myDate.test()</code> 你会惊奇地发现出现了报错</p>
+<p>因为在 <code>JS</code> 底层有限制，如果不是由 <code>Date</code> 构造出来的实例的话，是不能调用 <code>Date</code> 里的函数的。所以这也侧面的说明了：<strong><em>ES6 中的 class 继承与 ES5 中的一般继承写法是不同的</em></strong>。</p>
+<p>既然底层限制了实例必须由 <code>Date</code> 构造出来，那么我们可以改变下思路实现继承</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function MyData() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">MyData.prototype.test &#x3D; function () &#123;</span><br><span class="line">  return this.getTime()</span><br><span class="line">&#125;</span><br><span class="line">let d &#x3D; new Date() &#x2F;&#x2F; 父类实例</span><br><span class="line">Object.setPrototypeOf(d, MyData.prototype)</span><br><span class="line">Object.setPrototypeOf(MyData.prototype, Date.prototype)</span><br></pre></td></tr></table></figure>
+<p>以上继承实现思路：先创建父类实例 =&gt; 改变实例原先的 <code>__proto__</code> 转而连接到子类的 <code>prototype</code> =&gt; 子类的 <code>prototype</code> 的 <code>__proto__</code> 改为父类的 <code>prototype</code>。</p>
+<p>通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</title>
+    <url>/2020/01/02/FE-guide-dataType/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote>
+<p>温故而知新，可以为师矣。<br>           ———————— 论语</p>
+</blockquote>
+<p>这篇文章主要是把我看过的书中的知识点，还有其他人整理的面试题进行整理，巩固自己的前端开发理论知识，希望其他看到这篇文章的人也能有所帮助。</p>
+<a id="more"></a>
+
+<h1 id="JS知识点"><a href="#JS知识点" class="headerlink" title="JS知识点"></a>JS知识点</h1><blockquote>
+<p>当前市场中，如何区分一个好一点的前端开发和一般的前端开发，主要看的就是js能力的差距，好的前端开发，JS玩的转，不仅仅是框架玩的好，还要JS的基础扎实，只有基础与新技术都玩的6的前端开发才是好前端。</p>
+</blockquote>
+<p>上面这句话不是什么名人或者某位知名前端大拿说的，这是我在公司这几年面试招聘的过程中真真切切总结感受的。<br>所以可以说得JS者得高级前端，所以下面也主要是写JS的相关知识点。</p>
+<h2 id="JavaScript内置数据类型-—-数据类型"><a href="#JavaScript内置数据类型-—-数据类型" class="headerlink" title="JavaScript内置数据类型 — 数据类型"></a>JavaScript内置数据类型 — 数据类型</h2><p>无论学什么语言最重要最基础的就是数据类型，《JavaScript权威指南》这本书中详细的介绍了JS中的数据类型，下面总结一下。</p>
+<p>JavaScript中数据类型分为两大类共七种内置数据类型，其一是6种<strong><em><code>基本类型</code></em></strong>，其二是1种<strong><em><code>引用类型</code></em></strong>，我发现在面试过程中好多面试者都不会先说有两大类，而是会直接蹦出数字类型、字符串类型。。。对象、数组也会被并排放在一起，这其实不是个掌握知识点的好方法，应该先把数据类型分成上面说的<strong><em><code>基本类型</code></em></strong>、<strong><em><code>引用类型</code></em></strong>这样两个大类之后，再看看这两大类中有什么其他的子类型，在记忆其他子类型之前我觉得应该先了解一下什么是<strong><em><code>基本类型</code></em></strong>和<strong><em><code>引用类型</code></em></strong>，实际上基本类型和引用类型的主要区别是存储的区别，基本类型在栈中，而引用类型的话，引用数据的地址存储在栈中，而对象本身是存储在堆中，引用的数据地址是个16进制的数据值，它就像一把钥匙让你能够找到宝藏在什么地方。这就是基本数据类型和引用类型的区别了。</p>
+<p>那么如何记住有哪些基本数据类型和引用数据类型呢，实际上只要记住了6个基本数据类型，其他的都是引用数据类型，而所有的引用数据类型的祖宗都是Object，所以引用数据类型实际上只有Object一个，那么像是Array等其他子类型，都是Object的孩子，不跟Object在一个级别上。</p>
+<p>基本数据类型有哪些呢？其实挺好记的，数字，字符串，这两个一个像温柔的文学少女（string），一个像有点精于算计的男生（number），还有一个布尔类型（boolen）他像是班级里正义感爆棚的人，只论对错；另外还有个差生，没头脑似的未定义（Undefined）还有一个失了忆记不起来自己是谁的空（Null），最后还有一个新加入的插班生，总是带着口罩的标志符号（Symbol），这些人构成了这个班级的所有学生，也就是全部的基本类型，那么引用类型的对象Object呢就像及了漂亮爱化妆的班主任老师，有好多副面孔。不知道大家有没有看过一个动漫叫做《黑塔利亚》，他就是把国家都拟人化了，有了各自的性格，我很喜欢看，我觉得这些数据类型也各有各的特点，像这些国家一样，好了脑洞有点挖深了，有人会说我不就是这么几个简单的数据类型嘛，硬记下来不就好了，但是知识总有你硬记不下来的时候，最好的方法也是速记领域最为常用的方法，就是把你不熟悉的知识与你感兴趣的画面或者既往的知识串联起来，这样就能达到很好的记忆，如果你不喜欢动漫（怎么会有不喜欢动漫的人！！！），可以试试用其他的方法记，当然你如果硬要死记硬背那我也没办法，我继续开我的脑洞。<br>如果你是学过Java开发的同学（如果是计算机专业出来的，应该都或多或少学过，非计算机专业的我也不知道说啥了。。），数字在Java中是分成 byte/short/int/long 的，但是在Js中没有那么多，就一个Number，它是浮点类型，基于 IEEE 754标准实现，刚才我不是说了Number是个精于算计的男生，精于算计就是说他分毫不差，这样浮点型就很好的记了下来，这个754的标准可以不记，如果非要记的话，你可以记成他是自称IEEE 754团体的成员。最后Number身后还跟着一个小弟，叫做NaN，他虽然是Number的小弟，但他总是说话不算数，自己说过什么都不承认。所以NaN!=NaN。<br>老师是个爱化妆的老师，而这些学生也不是普通的学生，在学校他们是老老实实的基本类型，放了学之后一打扮，他们就各有了其他的能力，这个过程叫做装箱，具体的后面再说。（好了快回到现实吧你！）</p>
+<p>如果基础数据是字面量类型，那么他们就像是在上课的学生，只是学生而已，而当他们调用方法时，他们就成了下课后各种技能都有的新新人类，这个过程有时候是显示的，就像是有些学生喜欢大声嚷嚷，而更多的是你不自觉中就用到了装箱操作，是Js引擎提供的能力，就像是有些闷骚的学生一样。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let aNumber &#x3D; 111 &#x2F;&#x2F; 这只是字面量，不是 number 类型</span><br><span class="line">aNumber.toString() &#x2F;&#x2F; 装箱操作自动转化成数字对象，使用时候才会转换为对象类型</span><br></pre></td></tr></table></figure>
+<p>对象有个深浅拷贝的知识点必须要会，对象因为是引用数据类型，在栈中存储的是地址，当用另一个变量接收了之前的变量，那么就好像把钥匙复制了一把，两把钥匙开的还是同一个门，而深拷贝呢就像是照着原来的样板间又造了一个一模一样的房间，这两个房间长得一样，但就是两个房间，钥匙自然也是不一样的，所以呢，当往房间里搬家具的时候，浅拷贝搬进去的是一个房间，所以两把钥匙打开之后看到的都是多了家具，而深拷贝的话，我只是往样板间搬了家具，所以照着装修的房间里是不可能有的，这就是浅拷贝原数据会受影响，而深拷贝不会。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">let a &#x3D; &#123; name: &#39;FE&#39; &#125;</span><br><span class="line">let b &#x3D; a</span><br><span class="line">b.name &#x3D; &#39;EF&#39;</span><br><span class="line">console.log(a.name) &#x2F;&#x2F; EF 浅拷贝原数据会受影响</span><br></pre></td></tr></table></figure>
+<h2 id="内置数据类型检测-Typeof-—-类型判断"><a href="#内置数据类型检测-Typeof-—-类型判断" class="headerlink" title="内置数据类型检测 Typeof — 类型判断"></a>内置数据类型检测 Typeof — 类型判断</h2><blockquote>
+<p>typeof 对于基本类型，除了 null 都可以显示正确的类型</p>
+</blockquote>
+<p>typeof 就像是学校的教导主任一样，他有着一双火眼金睛，不管是哪个同学，穿了什么样的衣服，他一问就能问出来这个学生是谁，大家都怕他，但是Null因为失忆了，他也不知道教导主任是谁，所以typeof就拿他也没办法，因为他不怕教导主任，教导主任甚至会以为他是老师呢。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof 1 &#x2F;&#x2F; &#39;number&#39;</span><br><span class="line">typeof &#39;1&#39; &#x2F;&#x2F; &#39;string&#39;</span><br><span class="line">typeof undefined &#x2F;&#x2F; &#39;undefined&#39;</span><br><span class="line">typeof true &#x2F;&#x2F; &#39;boolean&#39;</span><br><span class="line">typeof Symbol() &#x2F;&#x2F; &#39;symbol&#39;</span><br><span class="line">typeof b &#x2F;&#x2F; b 没有声明，但是还会显示 undefined</span><br><span class="line"></span><br><span class="line">typeof null &#x2F;&#x2F; &#39;object&#39; 这是JS中的bug</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>typeof 对于对象，除了函数都会显示 object</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">typeof [] &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof &#123;&#125; &#x2F;&#x2F; &#39;object&#39;</span><br><span class="line">typeof console.log &#x2F;&#x2F; &#39;function&#39;</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<p>知识扩展：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。</p>
+</blockquote>
+<p><strong><em>如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。</em></strong></p>
+<blockquote>
+<p>小知识扩展</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let a</span><br><span class="line">&#x2F;&#x2F; 我们也可以这样判断 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; undefined</span><br><span class="line">&#x2F;&#x2F; 但是 undefined 不是保留字，能够在低版本浏览器被赋值</span><br><span class="line">let undefined &#x3D; 1</span><br><span class="line">&#x2F;&#x2F; 这样判断就会出错</span><br><span class="line">&#x2F;&#x2F; 所以可以用下面的方式来判断，并且代码量更少</span><br><span class="line">&#x2F;&#x2F; 因为 void 后面随便跟上一个组成表达式</span><br><span class="line">&#x2F;&#x2F; 返回就是 undefined</span><br><span class="line">a &#x3D;&#x3D;&#x3D; void 0</span><br></pre></td></tr></table></figure>
+
+<h2 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h2><h3 id="转Boolean"><a href="#转Boolean" class="headerlink" title="转Boolean"></a>转Boolean</h3><p>一句话可以概括</p>
+<blockquote>
+<p>在条件判断时，除了 <code>undefined</code>， <code>null</code>， <code>false</code>， <code>NaN</code>， <code>&#39;&#39;</code>， <code>0</code>， <code>-0</code>，其他所有值都转为 true，包括所有对象。</p>
+</blockquote>
+<p>从上面这段话可以看出来，<code>undefined</code>、<code>null</code> 是基本类型之二，而<code>false</code>是布尔类型的假值，<code>NaN</code>是数字类型的无效值，<code>&#39;&#39;</code>是字符串类型的空值，而<code>0</code>， <code>-0</code>都是数字类型的零值，可以看到，除了<code>0</code>、<code>-0</code>有些特殊，除了插班生<code>Symbol</code>，剩下的都是基本类型的假值，由此实际上就很好记了，有时候数字这个容易忘，但是记住“非0既真”这句话就好了。</p>
+<h3 id="对象转基本类型"><a href="#对象转基本类型" class="headerlink" title="对象转基本类型"></a>对象转基本类型</h3><p>对象在转换基本类型时，首先是先会调用ToPrimitive（原始类型），如果有hint参数调用对应的的类型方法，如果没有那默认先会调用 valueOf 然后调用 toString。如果返回了基本类型，结束。如果都没返回，那么Error<strong><em>但是注意这两个方法你是可以重写的。</em></strong></p>
+<blockquote>
+<p>Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。（来自MDN的解释）<br>需要解释的关键机制是ToPrimitive函数。该函数是将任意值转换为相应的基本类型值。如果输入的就是一个基本类型值，那么将不做修改，被直接返回。如果值是非基本类型值，它将调用内部方法 [[DefaultValue]] 为对象找到一个默认值。<br>[[DefaultValue]]是每一个对象的内部属性。该方法需要一个可选的参数hint，值是Number或String。如果没有提供hint，则默认为Number(除非该对象是Date，在这种情况下默认为String)。然后将调用toString和valueOf去寻找基本类型值。在这里hint就起到作用了。如果hint参数值为Number，valueOf将先被调用，如果hint是String的话，则toString被先调用。<br>[[DefaultValue]] 返回的值一定是基本类型值。如果不是，一个TypeError 将会被抛出。这就意味着为了在这种情况下有意义，toString和valueOf应该返回基本类型值。</p>
+</blockquote>
+<h3 id="四则运算符"><a href="#四则运算符" class="headerlink" title="四则运算符"></a>四则运算符</h3><blockquote>
+<p>只有当<strong><em>加法</em></strong>运算时，其中一方是<strong><em>字符串类型</em></strong>，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。<strong><em>并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。</em></strong></p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">1 + &#39;1&#39; &#x2F;&#x2F; &#39;11&#39; 这里会是面试陷阱</span><br><span class="line">2 * &#39;2&#39; &#x2F;&#x2F; 4 </span><br><span class="line">[1, 2] + [2, 1] &#x2F;&#x2F; &#39;1,22,1&#39;</span><br><span class="line">&#x2F;&#x2F; [1, 2].toString() -&gt; &#39;1,2&#39;</span><br><span class="line">&#x2F;&#x2F; [2, 1].toString() -&gt; &#39;2,1&#39;</span><br><span class="line">&#x2F;&#x2F; &#39;1,2&#39; + &#39;2,1&#39; &#x3D; &#39;1,22,1&#39;</span><br></pre></td></tr></table></figure>
+<p><strong>*面试陷阱题之 ++ *</strong></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 问表达式 &#39;a&#39; + + &#39;b&#39; 返回结果是什么？</span><br><span class="line">&#x2F;&#x2F; 答案是 &#39;aNaN&#39;</span><br><span class="line">&#39;a&#39; + + &#39;b&#39; -&gt; &#x2F;&#x2F; 一元运算符优先级高</span><br><span class="line">&#39;a&#39; + (+ &#39;b&#39;) -&gt; &#x2F;&#x2F; +&#39;b&#39;转数字类型，非有效结果是NaN</span><br><span class="line">&#39;a&#39; + NaN.toString() -&gt; &#x2F;&#x2F; NaN调用toString（）成字符串&#39;NaN&#39;</span><br><span class="line">&#39;aNaN&#39; &#x2F;&#x2F; 字符串接到一起后&#39;aNaN&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 类似题 &#39;1&#39; + + &#39;4&#39; 返回结果是什么 </span><br><span class="line">&#x2F;&#x2F; 其实就是&#39;4&#39; -&gt; 4 -&gt; &#39;4&#39; 最后还是&#39;14&#39;</span><br></pre></td></tr></table></figure>
+
+<h2 id="操作符-—-类型比较"><a href="#操作符-—-类型比较" class="headerlink" title="== 操作符 — 类型比较"></a>== 操作符 — 类型比较</h2><blockquote>
+<p>相等运算符的运算规则如下：<br>1、如果两个值类型相同，进行 === 比较。(这个非常好理解，就不多说了)<br>（1）数字比大小<br>（2）字符串就通过 unicode 字符索引来比较<br>2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：<br>（1）如果一个是null、一个是undefined，那么[相等]。 // 这个有点特殊需要单独记<br>（2）如果任一值是字符串，另一个值是数值，在比较相等性之前先将字符串转换为数值；即是调用Number()函数。<br>（3）如果任一值时布尔值，则在比较相等性之前先将其转换为数值，即是调用Number()函数。<br>（4）如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 （js核心内置类ToPrimitive，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。）</p>
+</blockquote>
+<p>1不说，2（1）的话单独记，其他基本类型转数字比较，引用性数据类型调用ToPrimitive转换成基本数据类型</p>
+<p>首先还是一道面试题</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; [] &#x3D;&#x3D; ![] 结果是什么</span><br><span class="line">[] &#x3D;&#x3D; ![] &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>
+<p>为什么呢？我们来解析一下，</p>
+<ol>
+<li>首先我们看一下右侧，<code>![]</code>肯定是要先转换成boolen类型了吧，那么<code>[]</code>的布尔类型是什么呢，上面转换布尔的时候我们说过，除了那五个基本类型的假值以及正负0之外，都是真值，所以<code>[]</code> -&gt; <code>true</code> <code>![]</code> -&gt; <code>false</code></li>
+<li><code>ToPrimitive(false)</code>-&gt;<code>0</code>右边的值得出了数值类型的原始值</li>
+<li>看左边<code>ToPrimitive([])</code>-&gt;<code>[]</code>.toString()-&gt;<code>&#39;&#39;</code></li>
+<li><code>Number(&#39;&#39;)</code>-&gt;<code>0</code></li>
+<li>比较左右 <code>0 == 0</code> -&gt; <code>true</code></li>
+</ol>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>到这里JS的内置数据类型及类型的转换和比较就讲完了，相信大家看过以后一定会记得住的<br>PS：突然好像学画漫画，《JS数据结构们》，一定大火，哈哈哈😂</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 继承类型</title>
+    <url>/2020/01/13/FE-guide-inherit2/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：<br>有下面两个类，下面实现 Child 继承 Father：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.type = <span class="string">'prople'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'吃东西啦'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.color = <span class="string">'black'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="原型继承（认贼作父）"><a href="#原型继承（认贼作父）" class="headerlink" title="原型继承（认贼作父）"></a>原型继承（认贼作父）</h2><blockquote>
+<p><strong><em>关键点</em></strong>：子类原型等于父类的实例 <code>Child.prototype = new Person()</code>（将父类指向子类的原型）。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Father();</span><br></pre></td></tr></table></figure>
+
+<p>特点：<br>实例可继承的属性有：</p>
+<ul>
+<li>实例的构造函数的属性</li>
+<li>父类构造函数的属性</li>
+<li>父类原型上的属性<br><strong><em>新实例不会继承父类实例的属性</em></strong></li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>新实例无法向父类构造函数传参</li>
+<li>继承单一</li>
+<li>所有新实例都会共享父类实例的属性。— 原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改</li>
+</ul>
+<h2 id="构造继承（借腹生子）"><a href="#构造继承（借腹生子）" class="headerlink" title="构造继承（借腹生子）"></a>构造继承（借腹生子）</h2><blockquote>
+<p>在子类构造函数中调用父类构造函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用 call 或 apply 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, ‘reng’)<br>特点：</p>
+<ul>
+<li>只继承了父类构造函数的属性，没有继承父类原型的属性</li>
+<li>解决了原型链继承的注意事项（缺点）1，2，3</li>
+<li>可以继承多个构造函数的属性（call 可以多个）</li>
+<li>在子实例中可以向父实例传参<br>缺点：</li>
+<li>只能继承父类构造函数的属性</li>
+<li>无法实现构造函数的复用。（每次用每次都要重新调用）</li>
+<li>每个新实例都有构造函数的副本，臃肿<br>（不能继承父类原型，函数在构造函数中，每个子类实例不能共享函数，浪费内存。）</li>
+</ul>
+<h2 id="组合继承（原型继承-构造继承）"><a href="#组合继承（原型继承-构造继承）" class="headerlink" title="组合继承（原型继承+构造继承）"></a>组合继承（原型继承+构造继承）</h2><blockquote>
+<p>使用构造继承继承父类参数，使用原型继承继承父类函数</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造继承</span></span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = Father.prototype; <span class="comment">// Child.prototype = new Person(); // 原型继承</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：结合了两种模式的优点–向父类传参（call）和复用（prototype）<br>特点：</p>
+<ul>
+<li>可以继承父类原型上的属性，可以传参，可复用</li>
+<li>每个新实例引入的构造函数属性是私有的</li>
+</ul>
+<p>缺点：</p>
+<ul>
+<li>父类原型和子类原型是同一个对象，无法区分子类真正是由谁构造。</li>
+<li>调用了两次父类的构造函数（耗内存）</li>
+<li>子类的构造函数会代替原型上的那个父类构造函数（call 相当于拿到了父类构造函数的副本）</li>
+</ul>
+<h2 id="原型式继承-复制降级"><a href="#原型式继承-复制降级" class="headerlink" title="原型式继承(复制降级)"></a>原型式继承(复制降级)</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 先封装一个函数容器，用来承载继承的原型和输出对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 寄生</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> father = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="keyword">var</span> child = create(father);</span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>关键点</em></strong>：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。</p>
+<p>特点：</p>
+<ul>
+<li>类似于复制一个对象，用函数来包装</li>
+</ul>
+<p>注意事项：</p>
+<ul>
+<li>所有的实例都会继承原型上的属性</li>
+<li>无法实现复用。（新实例属性都是后面添加的）<br><code>Object.create()</code>方法规范了原型式继承。这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 传一个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father());</span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 传两个参数的时候</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">Object</span>.create(<span class="keyword">new</span> Father(), &#123;</span><br><span class="line">  name: &#123;</span><br><span class="line">    value: <span class="string">'come on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">child.sayHello(); <span class="comment">// Hello come on</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="寄生组合继承"><a href="#寄生组合继承" class="headerlink" title="寄生组合继承"></a>寄生组合继承</h2><p>它跟<code>组合继承</code>一样，都比较常用。<br><strong><em>寄生</em></strong>：在函数内返回对象然后调用<br><strong><em>组合</em></strong>：</p>
+<ul>
+<li>函数的原型等于另一个实例</li>
+<li>在函数中用 apply 或 call 引入另一个构造函数，可传参</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 寄生</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = obj;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// object是F实例的另一种表示方法</span></span><br><span class="line"><span class="keyword">var</span> obj = create(Father.prototype);</span><br><span class="line"><span class="comment">// obj实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">// 上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 组合</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 构造</span></span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">100</span>;</span><br><span class="line">  Father.call(<span class="keyword">this</span>); <span class="comment">// 这个继承了父类构造函数的属性</span></span><br><span class="line">&#125; <span class="comment">// 解决了组合式两次调用构造函数属性的特点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">Child.prototype = obj; <span class="comment">// 原型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Father</span></span><br><span class="line">obj.constructor = Child; <span class="comment">// 一定要修复实例</span></span><br><span class="line"><span class="built_in">console</span>.log(Child.prototype.constructor); <span class="comment">// Child</span></span><br><span class="line"><span class="keyword">var</span> child = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="comment">// Child实例就继承了构造函数属性，父类实例，object的函数属性</span></span><br><span class="line"><span class="built_in">console</span>.log(child.job); <span class="comment">// frontend</span></span><br><span class="line"><span class="built_in">console</span>.log(child <span class="keyword">instanceof</span> Father); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
+
+<p><strong><em>重点</em></strong>：修复了组合继承的问题</p>
+<p>在上面的问题中，你可能发现了这么一个注释<code>obj.constructor = Sub; // 一定要修复实例。</code>为什么要修正子类的构造函数的指向呢？</p>
+<p>因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Car</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Car.prototype.orderOneLikeThis = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Clone producing function</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="keyword">this</span>.constructor();</span><br><span class="line">&#125;;</span><br><span class="line">Car.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am a generic car.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">BMW</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">BMW.prototype = <span class="built_in">Object</span>.create(Car.prototype);</span><br><span class="line">BMW.prototype.constructor = BMW; <span class="comment">// Resetting the constructor property</span></span><br><span class="line">BMW.prototype.advertise = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'I am BMW with lots of uber features.'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x5 = <span class="keyword">new</span> BMW();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myNewToy = x5.orderOneLikeThis();</span><br><span class="line"></span><br><span class="line">myNewToy.advertise(); <span class="comment">// =&gt; "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not</span></span><br><span class="line"><span class="comment">// commented; "I am a generic car." otherwise.</span></span><br></pre></td></tr></table></figure>
+
+<p><code>object.create</code> 在组合继承的基础上，子类继承一个由父类原型生成的空对象。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Father.prototype, &#123;</span><br><span class="line">  <span class="keyword">constructor</span>: &#123;</span><br><span class="line">    value: Child</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h3 id="inherits-函数-—-Nodejs-util-inherits-函数"><a href="#inherits-函数-—-Nodejs-util-inherits-函数" class="headerlink" title="inherits 函数 — Nodejs util.inherits 函数"></a>inherits 函数 — Nodejs util.inherits 函数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span> = <span class="title">function</span>(<span class="params">ctor, superCtor</span>) </span>&#123;</span><br><span class="line">  ctor.super_ = superCtor; <span class="comment">// super_属性是子类继承父类时构造函数要写入的一个属性值.</span></span><br><span class="line">  ctor.prototype = <span class="built_in">Object</span>.create(superCtor.prototype, &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: &#123;</span><br><span class="line">      value: ctor,</span><br><span class="line">      enumerable: <span class="literal">false</span>,</span><br><span class="line">      writable: <span class="literal">true</span>,</span><br><span class="line">      configurable: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 在上面的代码中 ctor 想要继承 superCtor ,我们姑且把 ctor 称作子类, superCtor 称作父类.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Father.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">&#125;</span><br><span class="line">inherits(Child, Father);</span><br><span class="line"></span><br><span class="line">Child.prototype.fun = ...</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- instanceof</title>
+    <url>/2020/01/02/FE-guide-instanceof/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a><code>instanceof</code></h1><p><code>instanceof</code> 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 <code>prototype</code>。<br>举例：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
+<p>判断 <code>Object</code> 的 <code>prototype</code> 是否在 <code>a</code> 的原型链上。</p>
+<p>我们也可以试着实现一下 <code>instanceof</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myInstanceof</span>(<span class="params">left, right</span>) </span>&#123; <span class="comment">// left 表示左表达式，right 表示右表达式</span></span><br><span class="line">    <span class="keyword">let</span> prototype = right.prototype <span class="comment">// 获得类型的原型</span></span><br><span class="line">    left = left.__proto__ <span class="comment">// 获得对象的原型</span></span><br><span class="line">		</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123; <span class="comment">// 判断对象的类型是否等于类型的原型</span></span><br><span class="line">    	<span class="keyword">if</span> (left === <span class="literal">null</span>)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    	<span class="keyword">if</span> (prototype === left)</span><br><span class="line">    		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    	left = left.__proto__</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- new</title>
+    <url>/2020/01/02/FE-guide-new/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="new-一个对象的过程"><a href="#new-一个对象的过程" class="headerlink" title="new 一个对象的过程"></a><code>new</code> 一个对象的过程</h1><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function create() &#123;</span><br><span class="line">    &#x2F;&#x2F; 创建一个空的对象</span><br><span class="line">    let obj &#x3D; new Object()</span><br><span class="line">    &#x2F;&#x2F; 获得构造函数</span><br><span class="line">    let Con &#x3D; [].shift.call(arguments)</span><br><span class="line">    &#x2F;&#x2F; 链接到原型</span><br><span class="line">    obj.__proto__ &#x3D; Con.prototype</span><br><span class="line">    &#x2F;&#x2F; 绑定 this，执行构造函数</span><br><span class="line">    let result &#x3D; Con.apply(obj, arguments)</span><br><span class="line">    &#x2F;&#x2F; 确保 new 出来的是个对象</span><br><span class="line">    return typeof result &#x3D;&#x3D;&#x3D; &#39;object&#39; ? result : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = &#123; b : 1 &#125;</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code>，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;&#125; &#x2F;&#x2F; function 就是个语法糖，内部等同于 new Function()</span><br><span class="line">let a &#x3D; &#123; b: 1 &#125; &#x2F;&#x2F; 这个字面量内部也是使用了 new Object()</span><br></pre></td></tr></table></figure>
+<p>对于 <code>new</code> 来说，还需要注意下运算符优先级。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function Foo() &#123;</span><br><span class="line">    return this;</span><br><span class="line">&#125;</span><br><span class="line">Foo.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;1&#39;);</span><br><span class="line">&#125;;</span><br><span class="line">Foo.prototype.getName &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;2&#39;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">new Foo.getName();   &#x2F;&#x2F; -&gt; 1</span><br><span class="line">new Foo().getName(); &#x2F;&#x2F; -&gt; 2</span><br></pre></td></tr></table></figure>
+
+<p>从上图可以看出，<code>new Foo()</code> 的优先级大于 <code>new Foo</code> ，所以对于上述代码来说可以这样划分执行顺序</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">new (Foo.getName());</span><br><span class="line">(new Foo()).getName();</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li>对于第一个函数来说，先执行了 <code>Foo.getName()</code> ，所以结果为 1；</li>
+<li>对于后者来说，先执行 <code>new Foo()</code> 产生了一个实例，然后通过原型链找到了 Foo 上的 getName 函数，所以结果为 2。</li>
+</ul>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 原型</title>
+    <url>/2020/01/02/FE-guide-prototype/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h1><p><img src="https://i.loli.net/2020/01/02/7ov8I4YDiBkjJyr.png" alt="yuanxing.png"><br>每个<strong><em>函数</em></strong>都有 <code>prototype</code> 属性，除了 <code>Function.prototype.bind()</code>，该属性指向<code>原型对象</code>，简称<code>原型</code>，<code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身。<br>每个<strong><em>对象</em></strong>都有 <code>__proto__</code> 属性，指向了创建该对象的<strong><em>构造函数的原型</em></strong>。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。<br>对象可以通过 <code>__proto__</code> 来寻找不属于该对象的属性，<code>__proto__</code> 将对象连接起来组成了<code>原型链</code>。</p>
+<a id="more"></a>
+<p><img src="https://pic2.zhimg.com/v2-e722d5325f7d4215169f1d04296e0f89_r.jpg" alt="总结"></p>
+<h1 id="prototype-原型对象"><a href="#prototype-原型对象" class="headerlink" title="prototype 原型对象"></a><code>prototype</code> 原型对象</h1><h2 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a>什么是原型？</h2><p>每个函数都具有 <code>prototype</code> 属性，它被默认成一个对象，即原型对象<br>首先来介绍下 <code>prototype</code> 属性。这是一个<code>显式</code>原型属性，只有<code>函数</code>才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">let fun &#x3D; Function.prototype.bind()</span><br></pre></td></tr></table></figure>
+<p>如果你以上述方法创建一个函数，那么可以发现这个函数是不具有 prototype 属性的。</p>
+<h2 id="prototype-如何产生的"><a href="#prototype-如何产生的" class="headerlink" title="prototype 如何产生的"></a><code>prototype</code> 如何产生的</h2><p>当我们声明一个函数时，这个属性就被自动创建了。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
+<p>并且这个属性的值是一个对象（也就是<code>原型</code>），只有一个属性 <code>constructor</code><br><code>constructor</code> 对应着构造函数，也就是 <code>Foo</code>。</p>
+<h2 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a>什么是原型链？</h2><p>当对象使用属性时，先在自身找，有就直接用，没有就沿着<strong>proto</strong>这条链往上找，直到 Object 原型的位置，有就返回相应的值，没有就返回 underfined。</p>
+<h2 id="constructor-构造函数"><a href="#constructor-构造函数" class="headerlink" title="constructor 构造函数"></a><code>constructor</code> 构造函数</h2><h3 id="什么是构造函数？"><a href="#什么是构造函数？" class="headerlink" title="什么是构造函数？"></a>什么是构造函数？</h3><p>任何一个函数，只要被 new 操作符使用，就可以是一个构造函数（构造函数建议以大写开头）<br>另外，在 JavaScript 的内置对象中，所有的函数对象都是 Function 构造函数的实例，比如：Object、Array等</p>
+<p><code>constructor</code> 是一个公有且不可枚举的属性。一旦我们改变了函数的 <code>prototype</code> ，那么新对象就没有这个属性了（当然可以通过原型链取到 <code>constructor</code>）。</p>
+<p>那么你肯定也有一个疑问，这个属性到底有什么用呢？其实这个属性可以说是一个历史遗留问题，在大部分情况下是没用的，在我的理解里，我认为他有两个作用：</p>
+<ol>
+<li>让实例对象知道是什么函数构造了它</li>
+<li>如果想给某些类库中的构造函数增加一些自定义的方法，就可以通过 <code>xx.constructor.method</code> 来扩展</li>
+</ol>
+<h2 id="proto"><a href="#proto" class="headerlink" title="_proto_"></a><code>_proto_</code></h2><p>这是每个对象都有的<code>隐式原型属性</code>，指向了创建该对象的<code>构造函数</code>的原型。其实这个属性指向了 <code>[[prototype]]</code>，但是 <code>[[prototype]]</code> 是内部属性，我们并不能访问到，所以使用 <code>_proto_</code> 来访问。</p>
+<p>因为在 JS 中是没有类的概念的，为了实现类似继承的方式，通过 <code>_proto_</code> 将对象和原型联系起来组成原型链，得以让对象可以访问到不属于自己的属性。</p>
+<h3 id="实例对象的-proto-如何产生的"><a href="#实例对象的-proto-如何产生的" class="headerlink" title="实例对象的 _proto_ 如何产生的"></a>实例对象的 <code>_proto_</code> 如何产生的</h3><p>从上图可知，当我们使用 <code>new</code> 操作符时，生成的实例对象拥有了 <code>_proto_</code> 属性。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 这个函数是 Function 的实例对象</span></span><br><span class="line"><span class="comment">// function 就是一个语法糖</span></span><br><span class="line"><span class="comment">// 内部调用了 new Function(...)</span></span><br></pre></td></tr></table></figure>
+<p>所以可以说，在 <code>new</code> 的过程中，新对象被添加了 <code>_proto_</code> 并且链接到构造函数的原型上。</p>
+<h3 id="new-的过程"><a href="#new-的过程" class="headerlink" title="new 的过程"></a><code>new</code> 的过程</h3><ol>
+<li>新生成了一个对象</li>
+<li>链接到原型</li>
+<li>绑定 <code>this</code></li>
+<li>返回新对象</li>
+</ol>
+<p>在调用 <code>new</code> 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 <code>new</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"> name </span>)</span>&#123; </span><br><span class="line"> <span class="keyword">this</span>.name = name; </span><br><span class="line">&#125;; </span><br><span class="line">Person.prototype.getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.name; </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">let</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>() <span class="comment">// 从 Object.prototype 上克隆一个空的对象</span></span><br><span class="line">	<span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>) <span class="comment">// 获取外部传入的构造器，此例是 Person </span></span><br><span class="line">	obj.__proto__ = Con.prototype	<span class="comment">// 指向正确的原型,链接到原型</span></span><br><span class="line">	<span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>) <span class="comment">// 绑定 this，执行构造函数，借用外部传入的构造器给 obj 设置属性</span></span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">typeof</span> result === <span class="string">'object'</span> ? result : obj <span class="comment">// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">create(Person,<span class="string">'lixg'</span>)</span><br></pre></td></tr></table></figure>
+<p>对于实例对象来说，都是通过 <code>new</code> 产生的，无论是 <code>function Foo()</code> 还是 <code>let a = { b : 1 }</code> 。</p>
+<p>对于创建一个对象来说，更推荐使用字面量的方式创建对象。因为你使用 <code>new Object()</code> 的方式创建对象需要通过作用域链一层层找到 <code>Object</code> ，但是你使用字面量的方式就没这个问题。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// function 就是个语法糖,内部等同于 new Function()</span></span><br><span class="line"><span class="keyword">let</span> a = &#123; <span class="attr">b</span>: <span class="number">1</span> &#125; <span class="comment">// 这个字面量内部也是使用了 new Object()</span></span><br></pre></td></tr></table></figure>
+
+<h2 id="Function-proto-Function-prototype"><a href="#Function-proto-Function-prototype" class="headerlink" title="Function.proto === Function.prototype"></a>Function.<strong>proto</strong> === Function.prototype</h2><p>对于对象来说，<code>xx.__proto__.contrcutor</code> 是该对象的构造函数，但是在图中我们可以发现 <code>Function.__proto__</code> === <code>Function.prototype</code>，难道这代表着 <code>Function</code> 自己产生了自己?</p>
+<p>答案肯定是否认的，要说明这个问题我们先从 <code>Object</code> 说起。</p>
+<p>从图中我们可以发现，所有对象都可以通过原型链最终找到 <code>Object.prototype</code> ，虽然 <code>Object.prototype</code> 也是一个对象，但是这个对象却不是 <code>Object</code> 创造的，而是引擎自己创建了 <code>Object.prototype</code> 。所以可以这样说，所有实例都是对象，但是对象不一定都是实例。</p>
+<p>接下来我们来看 <code>Function.prototype</code> 这个特殊的对象，如果你在浏览器将这个对象打印出来，会发现这个对象其实是一个函数。</p>
+<p>我们知道函数都是通过 <code>new Function()</code> 生成的，难道 <code>Function.prototype</code> 也是通过 <code>new Function()</code> 产生的吗？答案也是否定的，这个函数也是引擎自己创建的。首先引擎创建了 <code>Object.prototype</code> ，然后创建了 <code>Function.prototype</code> ，并且通过 <code>__proto__</code> 将两者联系了起来。这里也很好的解释了上面的一个问题，为什么 <code>let fun = Function.prototype.bind()</code> 没有 prototype 属性。因为 <code>Function.prototype</code> 是引擎创建出来的对象，引擎认为不需要给这个对象添加 <code>prototype</code> 属性。</p>
+<p><strong><em>所以我们又可以得出一个结论，不是所有函数都是 <code>new Function()</code> 产生的。</em></strong><br>有了 <code>Function.prototype</code> 以后才有了 <code>function Function()</code> ，然后其他的构造函数都是 <code>function Function()</code> 生成的。</p>
+<p>现在可以来解释 <code>Function.__proto__ === Function.prototype</code> 这个问题了。因为先有的 <code>Function.prototype</code> 以后才有的 <code>function Function()</code> ，所以也就不存在鸡生蛋蛋生鸡的悖论问题了。对于为什么 <code>Function.__proto__</code> 会等于 <code>Function.prototype</code> ，个人的理解是：其他所有的构造函数都可以通过原型链找到 <code>Function.prototype</code> ，并且 <code>function Function()</code> 本质也是一个函数，为了不产生混乱就将 <code>function Function()</code> 的 <code>__proto__</code> 联系到了 <code>Function.prototype</code> 上。</p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li><code>Object</code> 是所有对象的爸爸，所有对象都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function</code> 是所有函数的爸爸，所有函数都可以通过 <code>__proto__</code> 找到它</li>
+<li><code>Function.prototype</code> 和 <code>Object.prototype</code> 是两个特殊的对象，他们由引擎来创建</li>
+<li>除了以上两个特殊对象，其他对象都是通过构造器 <code>new</code> 出来的</li>
+<li>函数的 <code>prototype</code> 是一个对象，也就是原型</li>
+<li>对象的 <code>__proto__</code> 指向原型， <code>__proto__</code> 将对象和原型连接起来组成了原型链<br><img src="https://img2018.cnblogs.com/blog/1731684/201907/1731684-20190704181143591-516719297.png" alt="总结"></li>
+</ul>
+<h2 id="归纳"><a href="#归纳" class="headerlink" title="归纳"></a>归纳</h2><p><code>ES</code> 把对象定义为：“无序属性的集合，其属性可以包含基本值，对象和函数”。<br>严格来讲，这就相当于说对象是一组没有特定顺序的值。ES 中的构造函数可以用来创建特定类型的对象，用来在创建对象时初始化对象。它的特点是，一般为大写字母开头，使用 <code>new</code> 操作符来实例化对象，比如：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br><span class="line">person.name = <span class="string">"Kevin"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(person.name); <span class="comment">// Kevin</span></span><br></pre></td></tr></table></figure>
+
+<p><code>Person</code> 就是构造函数， <code>person</code> 就是对象。对于对象而言，每个 <code>JS</code> 对象一定对应一个原型对象，并从原型对象继承属性和方法。对象 <code>__proto__</code> 属性的值就是它所对应的原型对象。对象的 <code>__proto__</code> 指向自己构造函数的 <code>prototype</code> 。所以对象的原型链就是 <code>obj.__proto__.proto__....</code> 。对于函数而言，只有函数才有 <code>prototype</code> 属性， <code>Person.prototype</code>  是一个对象，并且有两个属性， 一个是 <code>constructor</code> 指向其构造函数 <code>Person</code> ， 一个是 <code>__proto__</code>  属性：是一个对象，指向上一层的原型。原型链的尽头是 <code>Object.prototype</code> 。所有对象均从 <code>Object.prototype</code> 继承属性。<code>Function.prototype</code> 和 <code>Function.__proto__</code> 为同一对象。<code>Object/Array/String</code> 等等构造函数本质上和 <code>Function</code> 一样，均继承于 <code>Function.prototype</code> 。<code>Function.prototype</code> 直接继承 <code>Object.prototype</code> 。这里的 <code>Object</code> 和 <code>Function</code> 有点鸡和蛋的问题，总结：先有 <code>Object.prototype</code>（原型链顶端），<code>Function.prototype</code> 继承 <code>Object.prototype</code> 而产生，最后，<code>Function</code> 和 <code>Object</code> 和其它构造函数继承 <code>Function.prototype</code> 而产生。属性查找时，先在对象自己上找，找不到才会一步步根据原型链往上找。<br><img src="https://pic2.zhimg.com/v2-2e8ec703287854d174483ba5f9f937cf_1200x500.jpg" alt="继承"></p>
+<h2 id="关联阅读"><a href="#关联阅读" class="headerlink" title="关联阅读"></a>关联阅读</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain</a><br><a href="https://zhuanlan.zhihu.com/p/35790971" target="_blank" rel="noopener">说说原型（prototype）、原型链和原型继承</a></p>
+<h2 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h2><p><a href="https://lixuguang.github.io/2020/01/13/FE-guide-inherit2/">继承</a></p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 浏览器存储</title>
+    <url>/2020/01/03/FE-guide-store/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="cookie，localStorage，sessionStorage，indexDB"><a href="#cookie，localStorage，sessionStorage，indexDB" class="headerlink" title="cookie，localStorage，sessionStorage，indexDB"></a>cookie，localStorage，sessionStorage，indexDB</h1><table>
+<thead>
+<tr>
+<th>特性</th>
+<th>cookie</th>
+<th>localStorage</th>
+<th>sessionStorage</th>
+<th>indexDB</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>数据生命周期</td>
+<td>一般由服务器生成，可以设置过期时间</td>
+<td>除非被清理，否则一直存在</td>
+<td>页面关闭就清理</td>
+<td>除非被清理，否则一直存在</td>
+</tr>
+<tr>
+<td>数据存储大小</td>
+<td>4K</td>
+<td>5M</td>
+<td>5M</td>
+<td>无限制</td>
+</tr>
+<tr>
+<td>与服务端通信</td>
+<td>每次都会携带在 header 中，对于请求性能影响</td>
+<td>不参与</td>
+<td>不参与</td>
+<td>不参与</td>
+</tr>
+</tbody></table>
+<p>从上表可以看到， <code>cookie</code> 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 <code>localStorage</code> 和 <code>sessionStorage</code> 。对于不怎么改变的数据尽量使用 <code>localStorage</code> 存储，否则可以用 <code>sessionStorage</code> 存储。</p>
+<p>对于 <code>cookie</code> ，我们还需要注意安全性。<br>| 属性      | 作用                                                           |<br>| ——— | ————————————————————– |<br>| value     | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |<br>| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击                         |<br>| secure    | 只能在协议为 HTTPS 的请求中携带                                |<br>| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击          |</p>
+<h1 id="Service-Worker"><a href="#Service-Worker" class="headerlink" title="Service Worker"></a>Service Worker</h1><blockquote>
+<p>Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API。</p>
+</blockquote>
+<p>目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; index.js</span><br><span class="line">if (navigator.serviceWorker) &#123;</span><br><span class="line">  navigator.serviceWorker</span><br><span class="line">    .register(&#39;sw.js&#39;)</span><br><span class="line">    .then(function(registration) &#123;</span><br><span class="line">      console.log(&#39;service worker 注册成功&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    .catch(function(err) &#123;</span><br><span class="line">      console.log(&#39;servcie worker 注册失败&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; sw.js</span><br><span class="line">&#x2F;&#x2F; 监听 &#96;install&#96; 事件，回调中缓存所需文件</span><br><span class="line">self.addEventListener(&#39;install&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.waitUntil(</span><br><span class="line">    caches.open(&#39;my-cache&#39;).then(function(cache) &#123;</span><br><span class="line">      return cache.addAll([&#39;.&#x2F;index.html&#39;, &#39;.&#x2F;index.js&#39;])</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 拦截所有请求事件</span><br><span class="line">&#x2F;&#x2F; 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据</span><br><span class="line">self.addEventListener(&#39;fetch&#39;, e &#x3D;&gt; &#123;</span><br><span class="line">  e.respondWith(</span><br><span class="line">    caches.match(e.request).then(function(response) &#123;</span><br><span class="line">      if (response) &#123;</span><br><span class="line">        return response</span><br><span class="line">      &#125;</span><br><span class="line">      console.log(&#39;fetch source&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 <code>Service Worker</code> 已经启动了<br>在 <code>Cache</code> 中也可以发现我们所需的文件已被缓存</p>
+<p>当我们重新刷新页面可以发现我们缓存的数据是从 <code>Service Worker</code> 中读取的</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 网络安全</title>
+    <url>/2020/01/22/FE-guide-safe/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>网络安全是前端不可忽略的一个部分，可惜的是之前我都忽略了，最近发现网络安全已经变得日益重要，所以特别整理一篇文章说说网络安全相关的内容。</p>
+<span id="more"></span>
+<h2 id="XSS（Cross-site-scripting）跨站脚本攻击"><a href="#XSS（Cross-site-scripting）跨站脚本攻击" class="headerlink" title="XSS（Cross-site scripting）跨站脚本攻击"></a>XSS（Cross-site scripting）跨站脚本攻击</h2><p>跨站脚本攻击是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。</p>
+<p>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>
+<p>XSS攻击分成两类：</p>
+<ul>
+<li>来自内部的攻击<ul>
+<li>主要指的是利用程序自身的漏洞，构造跨站语句</li>
+</ul>
+</li>
+<li>来自外部的攻击<ul>
+<li>主要指自己构造XSS跨站漏洞网页或者寻找非目标机以外的有跨站漏洞的网页。如当我们要渗透一个站点，我们自己构造一个有跨站漏洞的网页，然后构造跨站语句，通过结合其他技术，如社会工程学等，欺骗目标服务器的管理员打开。</li>
+</ul>
+</li>
+</ul>
+<p>XSS分为：<strong>存储型</strong>和<strong>反射型</strong></p>
+<ul>
+<li>存储型XSS：存储型XSS，持久化，代码是存储在服务其中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，用户访问该页面的时候触发代码执行。这种XSS比较危险，容易造成蠕虫，盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。</li>
+<li>反射型XSS：非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。</li>
+</ul>
+<h3 id="攻击手段和目的"><a href="#攻击手段和目的" class="headerlink" title="攻击手段和目的"></a>攻击手段和目的</h3><p>攻击者使被攻击者在浏览器中执行脚本后，如果需要收集来自被攻击者的数据（如cookie或其他敏感信息），可以自行架设一个网站，让被攻击者通过JavaScript等方式把收集好的数据作为参数提交，随后以数据库等形式记录在攻击者自己的服务器上。</p>
+<p>常用的XSS攻击手段和目的有：</p>
+<ul>
+<li>盗用cookie，获取敏感信息。</li>
+<li>利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。</li>
+<li>利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。</li>
+<li>利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。</li>
+<li>在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。</li>
+</ul>
+<h3 id="漏洞的防御和利用"><a href="#漏洞的防御和利用" class="headerlink" title="漏洞的防御和利用"></a>漏洞的防御和利用</h3><h4 id="过滤特殊字符"><a href="#过滤特殊字符" class="headerlink" title="过滤特殊字符"></a>过滤特殊字符</h4><p>避免XSS的方法之一主要是将用户所提供的内容进行过滤，许多语言都有提供对HTML的过滤：</p>
+<ul>
+<li>PHP的htmlentities()或是htmlspecialchars()。</li>
+<li>Python的cgi.escape()。</li>
+<li>ASP的Server.HTMLEncode()。</li>
+<li>ASP.NET的Server.HtmlEncode()或功能更强的Microsoft Anti-Cross Site Scripting Library</li>
+<li>Java的xssprotect (Open Source Library)。</li>
+<li>NodeJS的node-validator。</li>
+</ul>
+<h4 id="使用HTTP头指定类型"><a href="#使用HTTP头指定类型" class="headerlink" title="使用HTTP头指定类型"></a>使用HTTP头指定类型</h4><p>很多时候可以使用HTTP头指定内容的类型，使得输出的内容避免被作为HTML解析。如在PHP语言中使用以下代码：<br><code>&lt;?php header(&#39;Content-Type: text/javascript; charset=utf-8&#39;); ?&gt;</code><br>即可强行指定输出内容为文本/JavaScript脚本（顺便指定了内容编码），而非可以引发攻击的HTML。</p>
+<h4 id="用户方面"><a href="#用户方面" class="headerlink" title="用户方面"></a>用户方面</h4><p>包括Internet Explorer、Mozilla Firefox在内的大多数浏览器皆有关闭JavaScript的选项，但关闭功能并非是最好的方法，因为许多网站都需要使用JavaScript语言才能正常运作。通常来说，一个经常有安全更新推出的浏览器，在使用上会比很久都没有更新的浏览器更为安全。</p>
+<h2 id="CRSF（Cross-site-request-forgery）跨站请求伪造"><a href="#CRSF（Cross-site-request-forgery）跨站请求伪造" class="headerlink" title="CRSF（Cross-site request forgery）跨站请求伪造"></a>CRSF（Cross-site request forgery）跨站请求伪造</h2><p>跨站请求伪造是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。</p>
+<ul>
+<li>XSS 利用的是用户对指定网站的信任</li>
+<li>CSRF 利用的是网站对用户网页浏览器的信任</li>
+</ul>
+<p>跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：<em><strong>简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</strong></em></p>
+<h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><p>例子<br>假如一家银行用以运行转账操作的URL地址如下：<br><code>http://www.examplebank.com/withdraw?account=AccoutName&amp;amount=1000&amp;for=PayeeName</code><br>那么，一个恶意攻击者可以在另一个网站上放置如下代码：<br><code>&lt;img src=&quot;http://www.examplebank.com/withdraw?account=Alice&amp;amount=1000&amp;for=Badman&quot;&gt;</code><br>如果有账户名为Alice的用户访问了恶意站点，而她之前刚访问过银行不久，登录信息尚未过期，那么她就会损失1000资金。<br>这种恶意的网址可以有很多种形式，藏身于网页中的许多地方。此外，攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛，博客等任何用户生成内容的网站中。这意味着<em><strong>如果服务端没有合适的防御措施的话，用户即使访问熟悉的可信网站也有受攻击的危险</strong></em>。<br>透过例子能够看出，攻击者并不能通过CSRF攻击来直接获取用户的账户控制权，也不能直接窃取用户的任何信息。他们能做到的，是<em><strong>欺骗用户浏览器，让其以用户的名义运行操作。</strong></em></p>
+<h3 id="防御措施"><a href="#防御措施" class="headerlink" title="防御措施"></a>防御措施</h3><h4 id="检查Referer（参照）字段"><a href="#检查Referer（参照）字段" class="headerlink" title="检查Referer（参照）字段"></a>检查Referer（参照）字段</h4><p>HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer字段应和请求的地址位于同一域名下。以上文银行操作为例，Referer字段地址通常应该是转账按钮所在的网页地址，应该也位于<a href="http://www.examplebank.com之下.而如果是csrf攻击传来的请求,referer字段会是包含恶意网址的地址,不会位于www.examplebank.com之下,这时候服务器就能识别出恶意的访问./">www.examplebank.com之下。而如果是CSRF攻击传来的请求，Referer字段会是包含恶意网址的地址，不会位于www.examplebank.com之下，这时候服务器就能识别出恶意的访问。</a><br>这种办法简单易行，工作量低，仅需要在关键访问处增加一步校验。但这种办法也有其局限性，因其完全依赖浏览器发送正确的Referer字段。虽然http协议对此字段的内容有明确的规定，但并无法保证来访的浏览器的具体实现，亦无法保证浏览器没有安全漏洞影响到此字段。并且也存在攻击者攻击某些浏览器，篡改其Referer字段的可能。</p>
+<h4 id="添加校验token"><a href="#添加校验token" class="headerlink" title="添加校验token"></a>添加校验token</h4><p>由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再运行CSRF攻击。这种数据通常是窗体中的一个数据项。服务器将其生成并附加在窗体中，其内容是一个伪随机数。当客户端通过窗体提交请求时，这个伪随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个伪随机数的值，服务端就会因为校验token的值为空或者错误，拒绝这个可疑请求。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>网络安全</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- this</title>
+    <url>/2020/01/02/FE-guide-this/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="this"><a href="#this" class="headerlink" title="this"></a><code>this</code></h1><p>this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">	console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">var a &#x3D; 1</span><br><span class="line">foo()</span><br><span class="line"></span><br><span class="line">var obj &#x3D; &#123;</span><br><span class="line">	a: 2,</span><br><span class="line">	foo: foo</span><br><span class="line">&#125;</span><br><span class="line">obj.foo()</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上两者情况 &#96;this&#96; 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以下情况是优先级最高的，&#96;this&#96; 只会绑定在 &#96;c&#96; 上，不会被任何方式修改 &#96;this&#96; 指向</span><br><span class="line">var c &#x3D; new foo()</span><br><span class="line">c.a &#x3D; 3</span><br><span class="line">console.log(c.a)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 还有种就是利用 &#96;call&#96; ， &#96;apply&#96; ， &#96;bind&#96; 改变 &#96;this&#96; ，这个优先级仅次于 &#96;new&#96;</span><br></pre></td></tr></table></figure>
+<p>以上几种情况明白了，很多代码中的 <code>this</code> 应该就没什么问题了，下面让我们看看箭头函数中的 <code>this</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function a() &#123;</span><br><span class="line">    return () &#x3D;&gt; &#123;</span><br><span class="line">        return () &#x3D;&gt; &#123;</span><br><span class="line">        	console.log(this)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a()()())</span><br></pre></td></tr></table></figure>
+<p>箭头函数其实是没有 <code>this</code> 的，这个函数中的 <code>this</code> 只取决于他外面的第一个不是箭头函数的函数的 <code>this</code> 。在这个例子中，因为调用 <code>a</code> 符合前面代码中的第一个情况，所以 <code>this</code> 是 <code>window。并且</code> this 一旦绑定了上下文，就不会被任何代码改变。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>介绍一个好用的doc展示库 ---- vuepress</title>
+    <url>/2020/01/05/FE-guide-vuepress/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在做公司技术规范，需要能通过 <code>B/S</code> 方式进行分发，起初想法是做一个网站，用 <code>html</code> 的方式进行书写，但是后面感觉太麻烦了，所以就放弃了，偶然间看到有工具可以直接通过 <code>md</code> 文件编译生成网站，就像是 <code>hexo</code> 博客这样，我觉得这挺好，极大的节省了开发网站所需要的时间，只需要专注于内容就好了，所以我就研究了下来，整个了解过程中有这么两个工具映入了我的眼帘，一个是 <code>doctify</code>，另外一个就是今天的主角 <code>vuepress</code> 。</p>
+<span id="more"></span>
+
+<h1 id="vuepress-何许"><a href="#vuepress-何许" class="headerlink" title="vuepress 何许"></a><code>vuepress</code> 何许</h1>]]></content>
+      <categories>
+        <category>效率工具</category>
+        <category>Labrary</category>
+      </categories>
+      <tags>
+        <tag>vuepress</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Git的常用命令</title>
+    <url>/2017/12/12/Git-Shell/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="指令表"><a href="#指令表" class="headerlink" title="指令表"></a>指令表</h2><table>
+<thead>
+<tr>
+<th>指令</th>
+<th>含义</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>git add .</td>
+<td>提示增加文件</td>
+<td>.代表所有</td>
+</tr>
+<tr>
+<td>git commit -m</td>
+<td>“说明内容” 提交到本地服务器</td>
+<td></td>
+</tr>
+<tr>
+<td>git status</td>
+<td>显示修改信息</td>
+<td></td>
+</tr>
+<tr>
+<td>git pull</td>
+<td>从网络服务器拉 更新最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git push</td>
+<td>上传最新版本</td>
+<td></td>
+</tr>
+<tr>
+<td>git branch</td>
+<td>查看当前分支</td>
+<td></td>
+</tr>
+<tr>
+<td>git checkout develop</td>
+<td>切换到develop模式</td>
+<td></td>
+</tr>
+<tr>
+<td>git merge master</td>
+<td>从master合并过来</td>
+<td></td>
+</tr>
+<tr>
+<td>git push origin develop</td>
+<td>提交</td>
+<td></td>
+</tr>
+<tr>
+<td>git clone <a href="mailto:git@192.168.2.10">git@192.168.2.10</a>:bat-web.git</td>
+<td>从服务器克隆</td>
+<td></td>
+</tr>
+</tbody></table>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>Git</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 执行上下文</title>
+    <url>/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><p>当执行 <code>JS</code> 代码时，会产生三种执行上下文</p>
+<ul>
+<li>全局执行上下文</li>
+<li>函数执行上下文</li>
+<li><code>eval</code> 执行上下文</li>
+</ul>
+<p>每个执行上下文中都有三个重要的属性</p>
+<ul>
+<li>变量对象（ <code>VO</code> ），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问</li>
+<li>作用域链（ <code>JS</code> 采用<strong><em>词法作用域</em></strong>，也就是说变量的作用域是在定义时就决定了）</li>
+<li>this<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var a &#x3D; 10</span><br><span class="line">function foo(i) &#123;</span><br><span class="line">  var b &#x3D; 20</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>
+对于上述代码，执行栈中有两个上下文：全局上下文和函数 <code>foo</code> 上下文。<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">stack &#x3D; [</span><br><span class="line">    globalContext,</span><br><span class="line">    fooContext</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+对于全局上下文来说， <code>VO</code> 大概是这样的<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">globalContext.VO &#x3D;&#x3D;&#x3D; globe</span><br><span class="line">globalContext.VO &#x3D; &#123;</span><br><span class="line">    a: undefined,</span><br><span class="line">	foo: &lt;Function&gt;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+对于函数 <code>foo</code> 来说， <code>VO</code> 不能访问，只能访问到活动对象（ <code>AO</code> ）<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.VO &#x3D;&#x3D;&#x3D; foo.AO</span><br><span class="line">fooContext.AO &#123;</span><br><span class="line">    i: undefined,</span><br><span class="line">	b: undefined,</span><br><span class="line">    arguments: &lt;&gt;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; arguments 是函数独有的对象(箭头函数没有)</span><br><span class="line">&#x2F;&#x2F; 该对象是一个伪数组，有 &#96;length&#96; 属性且可以通过下标访问元素</span><br><span class="line">&#x2F;&#x2F; 该对象中的 &#96;callee&#96; 属性代表函数本身</span><br><span class="line">&#x2F;&#x2F; &#96;caller&#96; 属性代表函数的调用者</span><br></pre></td></tr></table></figure>
+对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 <code>[[Scope]]</code> 属性查找上级变量<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">fooContext.[[Scope]] &#x3D; [</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br><span class="line">fooContext.Scope &#x3D; fooContext.[[Scope]] + fooContext.VO</span><br><span class="line">fooContext.Scope &#x3D; [</span><br><span class="line">    fooContext.VO,</span><br><span class="line">    globalContext.VO</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
+接下来让我们看一个老生常谈的例子， <code>var</code><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b</span><br><span class="line">console.log(a) &#x2F;&#x2F; undefined</span><br><span class="line"></span><br><span class="line">var a &#x3D; &#39;Hello world&#39;</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b&#39;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 <code>VO</code> ）， <code>JS</code> 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 <code>undefined</code> ，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。</li>
+</ul>
+<p>在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">b() &#x2F;&#x2F; call b second</span><br><span class="line"></span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b fist&#39;)</span><br><span class="line">&#125;</span><br><span class="line">function b() &#123;</span><br><span class="line">	console.log(&#39;call b second&#39;)</span><br><span class="line">&#125;</span><br><span class="line">var b &#x3D; &#39;Hello world&#39;</span><br></pre></td></tr></table></figure>
+<p><code>var</code> 会产生很多错误，所以在 <code>ES6</code> 中引入了 <code>let</code> 。 <code>let</code> 不能在声明前使用，但是这并不是常说的 <code>let</code> 不会提升， <code>let</code> 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。</p>
+<p>对于非匿名的立即执行函数需要注意以下一点</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var foo &#x3D; 1</span><br><span class="line">(function foo() &#123;</span><br><span class="line">    foo &#x3D; 10</span><br><span class="line">    console.log(foo)</span><br><span class="line">&#125;()) &#x2F;&#x2F; -&gt; ƒ foo() &#123; foo &#x3D; 10 ; console.log(foo) &#125;</span><br></pre></td></tr></table></figure>
+<p>因为当 <code>JS</code> 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 <code>foo</code> ，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">specialObject &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">Scope &#x3D; specialObject + Scope;</span><br><span class="line"></span><br><span class="line">foo &#x3D; new FunctionExpression;</span><br><span class="line">foo.[[Scope]] &#x3D; Scope;</span><br><span class="line">specialObject.foo &#x3D; foo; &#x2F;&#x2F; &#123;DontDelete&#125;, &#123;ReadOnly&#125;</span><br><span class="line"></span><br><span class="line">delete Scope[0]; &#x2F;&#x2F; remove specialObject from the front of scope chain</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>再见2019</title>
+    <url>/2019/12/31/GoodBye-2019/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>不知不觉又是一年，今天是2019年的最后一天，也是我30岁的最后一天，回顾这一年有收获有遗憾。翻出了18年的总结，看到了18年底对于自己19年的规划，现在回过头来看看哪些完成了。</p>
+<h1 id="18年底定的计划"><a href="#18年底定的计划" class="headerlink" title="18年底定的计划"></a>18年底定的计划</h1><h2 id="学习技术"><a href="#学习技术" class="headerlink" title="学习技术"></a>学习技术</h2><h3 id="1-深入学习客户端开发（全年）"><a href="#1-深入学习客户端开发（全年）" class="headerlink" title="1. 深入学习客户端开发（全年）"></a>1. 深入学习客户端开发（全年）</h3><p>18年客户端的项目也做了几个，Electron的开发能力经验更多了，之前只是用html+css+js做前端页面的开发，今年又增加了跟vue框架的结合，成功在多个项目中实践，只是一直没有形成规范感觉还是少了一环，原来一直在犹豫Electron到底算不算前端的技术栈之一，后来也算是想明白了，大前端范畴，只要是面向用户的都算是前端该做的范畴，所以Electron当然也算是前端应该掌握的技术栈，20年会继续学习客户端技术，把公司相关规范制定和落地。</p>
+<h3 id="2-学习前端自动化测试相关知识（2019年3月前）"><a href="#2-学习前端自动化测试相关知识（2019年3月前）" class="headerlink" title="2. 学习前端自动化测试相关知识（2019年3月前）"></a>2. 学习前端自动化测试相关知识（2019年3月前）</h3><p>18年关注了前端自动化测试相关的知识，本打算19年好好学习一下，在公司项目中实践，但是今年前后端工作量大增，前端人员的精力有限，加之成本的考虑，并没有开展起来，不过这方面的技能储备已经具备了，年底两次关于前端自动化的测试也将前端自动化的思想普及到了公司前端的团队里，20年是公司强调质量的一年，相信20年前端自动化测试将有机会在公司一些项目中落地</p>
+<h3 id="3-学习并掌握TS-（2019年5月前）"><a href="#3-学习并掌握TS-（2019年5月前）" class="headerlink" title="3. 学习并掌握TS  （2019年5月前）"></a>3. 学习并掌握TS  （2019年5月前）</h3><p>18年就看到了TS将会成为一门比较活的开发语言，目前来说已经具备了做TS开发的技能，只是TS更适合大型的长期的项目，将更好的保障项目的代码质量，快速迭代和小型项目并不是很适合。前端团队里没有开花，没想到居然在开发团队里见到了曙光，感谢开发的小伙伴愿意接受这门前端新技术，相信有一个点采用后看到了优势，后续普及工作将会更好开展。</p>
+<h3 id="4-学习并掌握React（2019年7月前）"><a href="#4-学习并掌握React（2019年7月前）" class="headerlink" title="4. 学习并掌握React（2019年7月前）"></a>4. 学习并掌握React（2019年7月前）</h3><p>18年Vue已经在公司前端全面普及开来，但是市场上React仍然是占据更多的份额，而且RN还能做App开发，所以还是一门必须要掌握的技术，今年看了一本React相关的书，也看了一些相关的视频教程，还参加了公司同事开展的React分享，虽然没有在项目中实际使用过，但是理论知识已经掌握了，可以进行小的Demo开发，20年要用React写一个开源的项目，做到学有所用，学以致用。</p>
+<h3 id="5-学习前端持续集成的相关知识（2019年9月前）"><a href="#5-学习前端持续集成的相关知识（2019年9月前）" class="headerlink" title="5. 学习前端持续集成的相关知识（2019年9月前）"></a>5. 学习前端持续集成的相关知识（2019年9月前）</h3><p>19年公司强调了代码必须走线上构建的要求，前端工程化和自动构建持续集成的工作可以说是工作所迫，这方面的技能已经Get到了，另外令我感到高兴的是，通过对Github-Actions的配置，我的博客可以像提交代码一样提交文章了，而且也实践了自动构建的相关技术，很开心。</p>
+<h3 id="6-学习Docker虚拟化技术（-2019年10月前）"><a href="#6-学习Docker虚拟化技术（-2019年10月前）" class="headerlink" title="6. 学习Docker虚拟化技术（ 2019年10月前）"></a>6. 学习Docker虚拟化技术（ 2019年10月前）</h3><p>这个任务没有达成，原本是希望能够通过Docker统一前端开发环境，不过Docker的适用场景还是以部署环境为主，Docker今年貌似热度也降下来了，今年K8s越来越火，不管怎样，持续关注新技术。</p>
+<h2 id="整理计划"><a href="#整理计划" class="headerlink" title="整理计划"></a>整理计划</h2><h3 id="1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"><a href="#1-养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。" class="headerlink" title="1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。"></a>1. 养成写博客的习惯，至少2天一篇，可以是技术博客，也可以是其他。</h3><p>今年实在是太忙了，别说两天一篇文章，就连一个月一篇的量都没能达成，不过在年底我终于把博客又重新激活了，希望自己20年能够把博客坚持写下来，很简单，积累自己，打造个人品牌。</p>
+<h3 id="2-将常用的方法和功能做成插件，开源给公司使用"><a href="#2-将常用的方法和功能做成插件，开源给公司使用" class="headerlink" title="2. 将常用的方法和功能做成插件，开源给公司使用"></a>2. 将常用的方法和功能做成插件，开源给公司使用</h3><p>今年4月开始，更多的精力都投在了部门的前端管理工作，说实话也迷茫也难过，这份迷茫终于在19年年底解开了，没能在技能层面有更高的提升，以及在代码层面给公司带来价值我觉得还是有些遗憾，20年希望自己能够在技术上有更大的进步，技术深度上/广度上/架构层面/后端技能都能有长足的进步。</p>
+<h2 id="读书计划"><a href="#读书计划" class="headerlink" title="读书计划"></a>读书计划</h2><h3 id="1-每周读完一本书，并写一篇读后感"><a href="#1-每周读完一本书，并写一篇读后感" class="headerlink" title="1. 每周读完一本书，并写一篇读后感"></a>1. 每周读完一本书，并写一篇读后感</h3><p>2019年读了25本书，每读完一本都会写一篇读后感，虽然没能保证每周读一本书，但是基本保证了每两周读完一本书，算是完成了50%的目标吧。20年继续努力，读书使人聪明，因为不聪明所以更要多读书。</p>
+<h2 id="部门前端计划"><a href="#部门前端计划" class="headerlink" title="部门前端计划"></a>部门前端计划</h2><h3 id="加强各设计组前端之间的交流"><a href="#加强各设计组前端之间的交流" class="headerlink" title="加强各设计组前端之间的交流"></a>加强各设计组前端之间的交流</h3><blockquote>
+<p>设计组的出现导致前端交流不畅，2019年加强与各设计组前端的交流，掌握各位前端的技术能力。</p>
+</blockquote>
+<p>没想到一语成第，设计组居然在4月份将前端整个拿出来构成了一个前端组，由我来带，更没想到的是居然在19年年底又解散到项目团队了，这9个月的时间可以说有苦有泪也有甜，前端小伙伴们为了同一个目标，共同努力，尽最大的努力完成公司的业务，可以说为了这个目标，这一年我付出了很多很多，在这方面愧对了家人孩子，虽然最后前端还是拆分了，可以说我能力有限，但是我心里可以说是无愧，希望尽到项目团队里的小伙伴们也能开心工作，迅速成长，虽然不再在一个团队里，但是，我仍是你们的光妈。</p>
+<h3 id="前端俱乐部推动"><a href="#前端俱乐部推动" class="headerlink" title="前端俱乐部推动"></a>前端俱乐部推动</h3><blockquote>
+<p>继续每周2小时的兴趣交流，交流形式不限于ppt，要求各自建立技术博客做笔记。</p>
+</blockquote>
+<p>俱乐部的活动最后还是没能坚持下来，大家工作比较忙也好，我自己的原因也好，确实没能坚持下来，20年还是希望能够将俱乐部活动组织起来，算是大家交流的机会也好，帮助大家开阔眼界也好，20年一定要再做起来！</p>
+<h3 id="进行梯队划分建设"><a href="#进行梯队划分建设" class="headerlink" title="进行梯队划分建设"></a>进行梯队划分建设</h3><blockquote>
+<p>前端今年人数明显增多，但各层级职责并没有区分，19年抽时间进行梯队建设。</p>
+</blockquote>
+<p>19年前端从14人增加到了34人，可以说人数上翻翻了，随着负责人制的执行，梯队建设的工作算是完成了50%，但是能力提升的工作可以说还是做的不到位，应该有机会成长为高工的小伙伴没能升上去，这我有一定的责任，20年虽然团队不再，但是希望你们都坚持努力学习，迈向更高的台阶。</p>
+<h3 id="引入前端工程化工具和思想"><a href="#引入前端工程化工具和思想" class="headerlink" title="引入前端工程化工具和思想"></a>引入前端工程化工具和思想</h3><blockquote>
+<p>目前前端工程化已经非常成熟，希望能将成熟的技术和工具引入。</p>
+</blockquote>
+<p>19年，随着Vue的普及和熟练，模块化开发组件化开发的思想已经深入到每一个前端的心中，现在大家都知道该如何使用这些技术和工具，希望大家能不仅仅局限在用也能了解了解其中原理，至少对常用的配置有所了解。</p>
+<h3 id="提升整体前端开发的能力"><a href="#提升整体前端开发的能力" class="headerlink" title="提升整体前端开发的能力"></a>提升整体前端开发的能力</h3><blockquote>
+<p>目前整体前端开发能力还相对较弱，19年通过培训等方式提升整体前端开发的能力</p>
+</blockquote>
+<p>19年能力提升的工作做的太少了，没什么好说的，希望20年这方面工作能够投入更多的精力，让更多的小伙伴成长起来，让我们一起加油吧。</p>
+<h2 id="生活目标"><a href="#生活目标" class="headerlink" title="生活目标"></a>生活目标</h2><h3 id="每天陪孩子读书一小时"><a href="#每天陪孩子读书一小时" class="headerlink" title="每天陪孩子读书一小时"></a>每天陪孩子读书一小时</h3><p>跟上面的工作和个人目标比起来，这个任务可以说完成度0%，这也是我觉得愧对家人的地方，为了工作，对家人的关注少了很多很多，以至于桐桐晚上都不愿意跟我一起睡觉，20年我要好好对她，做个好的爸爸，孩子明年就三岁了，去到幼儿园会认识更多的朋友，希望她会跟她的小伙伴说，我有个爱我的爸爸。</p>
+<h3 id="减肥"><a href="#减肥" class="headerlink" title="减肥"></a>减肥</h3><p>减肥这件事可以说是真的对我来说太难了，看着自己马上破三位数（kg）的体重，心里无限难过，每次媳妇儿问我啥时候去健身，我都感到像被闪电击中了似的，办了健身卡被人嘲笑成了洗澡卡，20年，减不到150斤我就。。。。</p>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>19年太多的遗憾，太多的后悔莫及，当然也有一些成绩和自我肯定，19年已经过去了，希望在20年，能够成为一个更优秀的人。<br><img src="https://i.loli.net/2019/12/31/jMlO5sPxFyhIkai.jpg" alt="WechatIMG6.jpeg"><br>感谢我可爱的同事，年底收到了礼物真的很开心。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>杂记随感</category>
+      </categories>
+      <tags>
+        <tag>年终总结</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>你好2020</title>
+    <url>/2020/01/01/Hello-2020/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="2020元旦伊始"><a href="#2020元旦伊始" class="headerlink" title="2020元旦伊始"></a>2020元旦伊始</h1><p>时间过的真快，19年睡了一觉就成了过去的一年，今天是元旦，早上8：00起了床，简单洗漱后我出了门，新年新气象，去年没有坚持的晨跑，今年想要坚持一下，所以一早就出门跑了会儿步，太久没活动了，只是跑了半个小时就气喘吁吁，只好回家，但是即使是这半个小时，我感觉呼吸了新鲜的空气，整个人也精神了不少，回到家坐在阳台上，拿出小王宁送我的极少数手册开始研究了起来，生活还是应该有点仪式感何况是新年伊始，手册中有很多建议，全部看过一遍以后我郑重的拿起了笔写下了我今天的行动计划。但是没有写年度计划，明天上班后跟领导还要谈一谈，谈过之后再定一下年度的计划。今天我的计划就是陪家人过好元旦这一天。</p>
+<h1 id="元旦执行计划"><a href="#元旦执行计划" class="headerlink" title="元旦执行计划"></a>元旦执行计划</h1><ol>
+<li>写一篇日志</li>
+<li>将家人这一天游玩的过程以Vlog的形式记录下来，上传到西瓜视频上。</li>
+<li>陪家人逛街，给桐桐买新衣裳。</li>
+</ol>
+<h1 id="执行计划"><a href="#执行计划" class="headerlink" title="执行计划"></a>执行计划</h1><p>吃过早饭后大概到了10:30，一家人收拾好以后终于可以出门了，今天有点风，一点点冷不是特别冷，空气还不错，天气听晴朗的，一家人开着车听着歌前往甘井子万达广场，20分钟左右我们就到了万达广场，首先我们先去看了桐桐心心念念的小猫咪，也就是猫咪咖啡馆里的那些小可爱，桐桐可能是受妈妈影响，很喜欢猫咪，但是又有一点点怕。大概看了10分钟的猫咪，我们继续下一站，上四楼给桐桐买新衣裳，桐桐看到满眼的漂亮衣裳很是兴奋，最终她挑选了一套带着向日葵花朵的淡蓝色衣裙，穿上漂亮的新衣裳，平时像个假小子似的桐桐也一下子害羞了起来，让妈妈和奶奶看完后还会让爸爸和爷爷看看，得到了大家的肯定以后，心满意足的买下了它，也不知道是不是试衣服试累了，桐桐嚷嚷着要吃饭，桐桐妈说有一家港式茶餐厅味道不错，之前和同事来过，于是我们就去了4楼的茶餐厅，说实话这是我头一次吃茶餐厅，我还跟我爸妈调侃说，这也算是我们来过一次香港了。去到餐厅时才11点多一点，客还没有上满，还有座位，我们找了个靠里的位置坐了下来，打开菜谱，桐桐妈挑了几样她觉得不错的菜，上菜时间稍微有点慢，期间桐桐有些不耐烦，坐也坐不住，终于等到了吃的上来，可是觉得大多数吃的都太偏甜，爸妈和我都吃不太惯，桐桐吃的还不错，大概吃了半个小时就吃完了，出门的时候门口已经排起了长队，还好来的早一点，不然吃饭都要等了。本打算带着桐桐回家睡个觉，下午要到姥爷家串门，可桐桐说没有逛够，正巧这时看到了一楼有小丑在折气球玩具，我们就下到一楼找小丑玩了，小丑给桐桐折了个贵宾犬，小丑是荣耀手机的员工，可能是元旦策划的活动吧，反正来了就来了，进去看看也好，看了新出的V30手机，感觉并不是很喜欢，店员说有旧机抵值的活动，我问了他我的7p128g还能值多少，他打了几个电话后回复我1400块，哎，三年前7000块买的手机，现在只值1400了，算了还是用着吧，出了荣耀手机店又去了旁边的华为，看了看新出的mate30pro，这个手机是真的不错，当然手机不错价格也美丽，6500+的价格真的是让我不舍得买，还是把钱留下来给桐桐吧。桐桐终于累了，嚷嚷着要走，于是一家人驱车去了姥姥家。</p>
+<p>姥姥家在西南路，因为平时工作忙很少带桐桐去，这次去桐桐又不认识他们了，开始的时候很拘束，也不说话，一直到吃饭结束才终于愿意开口问好唱歌，因为家里没有电视机，到了姥姥家看到电视机很兴奋，一直在看，今天也算是过了瘾了，亲人就是即使很长时间不见面，但一见面就特别亲的人，饭从5：30一直吃到8:30，聊了工作，聊了生活，聊了困惑，聊了坦然，我终于知道了长辈们的智慧，了解了身体健康的重要性，20年一定要锻炼出一副好的身体，对家人负责。</p>
+<p>9:30回到了家，心里挺高兴的，新年第一天陪家人一起度过了充实的一天，回到家把今天路上录下来的视频剪成了短视频上传到了西瓜视频，这也是我今年的一个想法，记录我们一家人的幸福生活，如果有粉丝有点播的话还能赚点钱，没有的话也记录了桐桐的成长，算是一点纪念吧。最后写下了这篇日记，写完之后我就要睡觉去了，明天一早就要起床，明天起我就要走路去上班了，为了有一副好身体，加油。</p>
+<p>今天的目标都完成了，很开心～～</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>杂记随感</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>Vue 响应式原理的实现（课程笔记）</title>
+    <url>/2020/02/21/Implementation-of-the-vue-response-principle/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近一直在追网课，说实话从业9年了，一直觉得前端发展非常快，而且一直充满着危机感，每天都要学习进步才有安稳的感觉，今天听了 vue 响应式原理实现的公开课，感觉还不错，做了如下笔记，帮助自己记忆，也希望能帮助大家。</p>
+<h1 id="Vue2-原理"><a href="#Vue2-原理" class="headerlink" title="Vue2 原理"></a>Vue2 原理</h1><h2 id="什么是-defineProperty"><a href="#什么是-defineProperty" class="headerlink" title="什么是 defineProperty"></a>什么是 defineProperty</h2><p>defineProperty 其实是定义对象属性用的</p>
+<blockquote>
+<p>defineProperty 其实并不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过是属性里 get 和 set 实现了响应式。</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>属性名</th>
+<th>默认值</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>value</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>get</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>set</td>
+<td>undefined</td>
+</tr>
+<tr>
+<td>writable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>enumerable</td>
+<td>false</td>
+</tr>
+<tr>
+<td>configurable</td>
+<td>false</td>
+</tr>
+</tbody></table>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数 1、对象 2、属性 3、配置</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	writable:<span class="literal">false</span>,</span><br><span class="line">	enumerable:<span class="literal">true</span>,</span><br><span class="line">	configurable:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 1</span></span><br><span class="line">ob.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(ob.a) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>下面我们实现一下双向绑定</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> <span class="number">999</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(ob,<span class="string">&#x27;a&#x27;</span>)) <span class="comment">// 999</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>改造代码实现双向绑定（存取值）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> _val = obj.a; <span class="comment">// 暂存</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(ob,<span class="string">&#x27;a&#x27;</span>,&#123;</span><br><span class="line">	get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be get&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">	set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">		_val = newVal <span class="comment">// 新值替换旧值</span></span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">&#x27;a is be set&#x27;</span>)</span><br><span class="line">		<span class="keyword">return</span> _val;</span><br><span class="line">	&#125;, </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h2 id="Vue-中从改变一个数据到发生改变的过程"><a href="#Vue-中从改变一个数据到发生改变的过程" class="headerlink" title="Vue 中从改变一个数据到发生改变的过程"></a>Vue 中从改变一个数据到发生改变的过程</h2><ol>
+<li>改变数据触发 Set </li>
+<li>Set 部分触发 notify（更新）<ol>
+<li>Get 部分收集依赖</li>
+</ol>
+</li>
+<li>更改对应的虚拟 Dom</li>
+<li>重新 Render</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// MyVue.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简单版本 vue</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyVue</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.$data = &#123;</span><br><span class="line">		a: &#123;</span><br><span class="line">			b:<span class="number">1</span></span><br><span class="line">		&#125;, </span><br><span class="line">		c:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">this</span>.el = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;app&#x27;</span>);</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">	<span class="built_in">this</span>.observer(<span class="built_in">this</span>.$data);</span><br><span class="line">	<span class="built_in">this</span>.render();</span><br><span class="line">&#125;</span><br><span class="line">vue.property.observer = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> _val, self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="comment">// var dep = new Dep() -&gt; 源码中依赖收集对象</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123; <span class="comment">// 属性有可能是对象，要递归绑定</span></span><br><span class="line">		_val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> _val === <span class="string">&#x27;Object&#x27;</span>)&#123;</span><br><span class="line">			<span class="built_in">this</span>.observer(_val)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>.$data,key,&#123; <span class="comment">// 这里是实际绑定过程</span></span><br><span class="line">				get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="comment">// 依赖收集</span></span><br><span class="line">					<span class="comment">// dep.depend(); -&gt; vue 源码中收集依赖的方法</span></span><br><span class="line">					<span class="keyword">return</span> _val</span><br><span class="line">				&#125;,</span><br><span class="line">				set:<span class="function"><span class="keyword">function</span>(<span class="params">newVal</span>)</span>&#123;</span><br><span class="line">					_val = newVal</span><br><span class="line">					<span class="comment">// dep.notify(); -&gt; vue 源码中</span></span><br><span class="line">					self.render() <span class="comment">// AST语法树</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">vue.property.render = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.virtualDom = <span class="string">&#x27;i am &#x27;</span>+<span class="built_in">this</span>.$data.b;</span><br><span class="line">	<span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.virtualDom;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// index.html</span><br><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>自己实现Vue2数据双向绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&#x27;myVue.js&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mv = <span class="keyword">new</span> MyVue();</span></span><br><span class="line"><span class="javascript">			<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;changes&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(mv.$data);</span></span><br><span class="line">				mv.$data.b = 222;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>依赖收集：</p>
+<ol>
+<li>我们的data里面的数据并不是所有地方都用到</li>
+<li>如果我们直接更新整个视图，浪费资源</li>
+<li>先收集依赖改变的数据的组件，再更新依赖了数据的组件（Dep depend notify）</li>
+</ol>
+</blockquote>
+<h3 id="格外注意的地方—数组怎么监听"><a href="#格外注意的地方—数组怎么监听" class="headerlink" title="格外注意的地方—数组怎么监听"></a>格外注意的地方—数组怎么监听</h3><p>definePropty 只能给对象进行 get set 绑定， 数组怎么办？</p>
+<p>vue 中 使用了 <em><strong>装饰者模式</strong></em></p>
+<blockquote>
+<p>装饰者模式 Decorator模式（别名Wrapper）：动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> arraypro = <span class="built_in">Array</span>.property; <span class="comment">// 创建一个数组的原型对象</span></span><br><span class="line"><span class="keyword">var</span> arrob = <span class="built_in">Object</span>.create(arraypro); <span class="comment">// 避免影响原型链</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;push&#x27;</span>,<span class="string">&#x27;pop&#x27;</span>,<span class="string">&#x27;shift&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">method,index</span>)</span>&#123;</span><br><span class="line">	arrob[method]=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 装饰者模式</span></span><br><span class="line">		<span class="keyword">var</span> ret = arraypro[method].apply(<span class="built_in">this</span>,<span class="built_in">arguments</span>)</span><br><span class="line">		dep.notify() <span class="comment">// 扩展了功能</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h2 id="Vue3-实现双向绑定"><a href="#Vue3-实现双向绑定" class="headerlink" title="Vue3 实现双向绑定"></a>Vue3 实现双向绑定</h2><p>Proxy 是什么？</p>
+<blockquote>
+<p>Proxy 对象用于定义基本操作的自定义行为<br>和 definePropty 类似，功能几乎一样，只是用法上不同</p>
+<ol>
+<li>不会污染原对象</li>
+<li>直接给对象就可以了</li>
+<li>不需要借助外部变量 _val</li>
+</ol>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> ob = &#123;</span><br><span class="line">	a:<span class="number">1</span>,</span><br><span class="line">	b:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newOb = <span class="keyword">new</span> <span class="built_in">Proxy</span>(ob,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params">target,key,receiver</span>)</span>&#123; <span class="comment">// target 对象，key 属性</span></span><br><span class="line">		<span class="built_in">console</span>.log(target,key,receiver)</span><br><span class="line">		<span class="keyword">return</span> target[key]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="title">set</span>(<span class="params">target,key,value,receiver</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target.key,value); </span><br><span class="line">		<span class="comment">// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。</span></span><br><span class="line">		<span class="comment">// return target[key] = value</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<h3 id="为什么改用-Proxy"><a href="#为什么改用-Proxy" class="headerlink" title="为什么改用 Proxy"></a>为什么改用 Proxy</h3><ol>
+<li>defineProperty 只能监听某个属性，不能全对象监听</li>
+<li>可以省去<code>for in</code>循环提升代码执行效率</li>
+<li>可以监听数组，不需要再为数组做特异性操作</li>
+<li>不污染原对象</li>
+<li>更优雅</li>
+</ol>
+<p>我们用 Proxy 实现一下 observe 方法</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">vue.property.observe = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">	<span class="built_in">this</span>.$data = <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>.$data,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key, receiver</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,newVal</span>)</span>&#123;</span><br><span class="line">			target[key] = newVal</span><br><span class="line">			self.render()</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="还能用-Proxy-做什么"><a href="#还能用-Proxy-做什么" class="headerlink" title="还能用 Proxy 做什么"></a>还能用 Proxy 做什么</h4><ol>
+<li>校验类型</li>
+<li>真正的私有变量</li>
+</ol>
+<h5 id="校验类型"><a href="#校验类型" class="headerlink" title="校验类型"></a>校验类型</h5><p>例子：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 数据类型验证</span></span><br><span class="line"><span class="comment">// 我们要创建一个对象，这个对象是个人，他有name和age两个属性</span></span><br><span class="line"><span class="comment">// name必须是中文，age必须是数字，大于18岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里用到了策略模式</span></span><br><span class="line"><span class="keyword">var</span> valid = &#123;</span><br><span class="line">	<span class="function"><span class="title">name</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> reg=<span class="regexp">/^[\u4E00-\u9FAS]=$/</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span> &amp;&amp; reg.test(value))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="function"><span class="title">age</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;number&#x27;</span> &amp;&amp; value &gt; <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">this</span>.name = name</span><br><span class="line">	<span class="built_in">this</span>.age = age</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(<span class="built_in">this</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">get</span>(<span class="params">target,key</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> target[key]</span><br><span class="line">		&#125;, </span><br><span class="line">		<span class="function"><span class="title">set</span>(<span class="params">target,key,value</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(valid[key](value))&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target,key,value)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(key+<span class="string">&#x27;is not valid&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> Person(<span class="string">&#x27;name&#x27;</span>,<span class="number">19</span>)</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><em><strong>策略模式</strong></em><br>定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。</p>
+</blockquote>
+<h5 id="真正的私有变量"><a href="#真正的私有变量" class="headerlink" title="真正的私有变量"></a>真正的私有变量</h5><p>vue-router 源码中，给 $router ,$route 用 defineProperty 定义 get 并返回本身，这样就不能修改属性了。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$router&#x27;</span>,&#123; <span class="comment">// Router 的实例</span></span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>._root._router;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="comment">// 当前路由所在的状态</span></span><br><span class="line">			current: <span class="built_in">this</span>._root._router.history.current;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="虚拟Dom和diff算法"><a href="#虚拟Dom和diff算法" class="headerlink" title="虚拟Dom和diff算法"></a>虚拟Dom和diff算法</h2><p>虚拟Dom是虚拟的，他只在概念里面存在，在AST语法树，下面进行解释</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 模板</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">2</span>&lt;/p&gt;</span><br><span class="line">		&lt;p&gt;<span class="number">3</span>&lt;/p&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// diff 描述法</span></span><br><span class="line">diff &lt;div&gt;</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;</span><br><span class="line">	children:[</span><br><span class="line">		diff &lt;p&gt;</span><br><span class="line">			props:&#123;</span><br><span class="line">				id:xxx</span><br><span class="line">			&#125;</span><br><span class="line">			children:[</span><br><span class="line">				...</span><br><span class="line">			]</span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象描述法</span></span><br><span class="line"><span class="keyword">var</span> virtual = &#123;</span><br><span class="line">	dom:<span class="string">&#x27;div&#x27;</span>,</span><br><span class="line">	props:&#123;</span><br><span class="line">		id:<span class="number">2</span></span><br><span class="line">	&#125;,</span><br><span class="line">	children:[</span><br><span class="line">		....</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>每层结构都是一样的，那么是如何进行 diff 比对的呢？</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * diff 算法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="title">patchVnode</span>(<span class="params">oldVnode,vnode</span>)</span>&#123; <span class="comment">// 接收新旧节点</span></span><br><span class="line">	<span class="keyword">const</span> el = vnode.el = oldVnode.el; <span class="comment">// 拿出真实dom</span></span><br><span class="line">	<span class="keyword">let</span> i,oldCh = oldVnode.children ,ch = vnode.children <span class="comment">// 拿出新旧节点子元素children数组</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode === vnode) <span class="keyword">return</span>; <span class="comment">// 新旧节点一致，直接返回不进行后续操作</span></span><br><span class="line">	<span class="comment">// 分情况操作 --- 只有文字节点，删除了子元素，增加了子元素，子元素发生变动</span></span><br><span class="line">	<span class="comment">// 新旧节点都不为空，且不一样</span></span><br><span class="line">	<span class="keyword">if</span>(oldVnode.text !== <span class="literal">null</span> &amp;&amp; vnode.text !== <span class="literal">null</span> &amp;&amp; oldVnode.text !== vnode.text)&#123; <span class="comment">// 文字发生更新</span></span><br><span class="line">		api.setTextContent(el,vonde.text) <span class="comment">// 文字发生了更新，更新文字，给Dom，更新文字</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123; <span class="comment">// 不是单纯文字节点的话</span></span><br><span class="line">		updateEle(); <span class="comment">// 更新元素</span></span><br><span class="line">		<span class="keyword">if</span>(oldCh&amp;&amp;ch&amp;&amp;oldCh!==ch)&#123; <span class="comment">// 都有子元素，子元素变动</span></span><br><span class="line">			updateChildren() <span class="comment">// 调用更新子元素方法</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(ch)&#123; <span class="comment">// 增加子元素</span></span><br><span class="line">			createEl(vnode) <span class="comment">// 创建子元素</span></span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span>(oldCh)&#123; <span class="comment">// 删除子元素</span></span><br><span class="line">			api.removeChildren(el) <span class="comment">// 调用删除子元素方法</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>源码要多看，以下必看 <em><strong>Vue/react/axios/vue-router/Redux/Vuex</strong></em><br>为什么要看源码？？</p>
+<ul>
+<li>初级前端就会用vue或react — 从差不多水平的60%中挑出更好的人</li>
+<li>提高思想–》看优秀的代码–》写优秀的代码</li>
+<li>看源码能力，对高级前端是必备的。— 解决疑难杂症，看源码了解原理。</li>
+</ul>
+<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><p>因为是公开课，所以时间上没来的及说完，以后自己在听别的有关的内容时再补上这块。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>只有不断学习才能进步，充分利用网络的便利性，找各种优质的教学资源，我相信，努力会有回报，加油！</p>
+]]></content>
+      <categories>
+        <category>源码原理</category>
+      </categories>
+      <tags>
+        <tag>Vue</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>JavaScript 设计模式 Design Pattern</title>
+    <url>/2020/01/13/Javascript-Design-Pattern/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在整理自己的知识体系，一方面为了夯实基础，另一方面也为了查缺补漏、重新理解，设计模式之前看过大概三四次，从最开始一点都不懂，到后面看了几遍以后慢慢理解，今天再次整理一下，希望这一遍下来之后能更加透彻的理解什么是设计模式。</p>
+<a id="more"></a>
+
+<h1 id="什么是设计模式"><a href="#什么是设计模式" class="headerlink" title="什么是设计模式"></a>什么是设计模式</h1><blockquote>
+<p>设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案<br>设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。</p>
+</blockquote>
+<blockquote>
+<p>　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。   —- 百度百科</p>
+</blockquote>
+<p>不知道大家看了上面的定义以后是什么感受，说实话我第一次看到这句话并没有什么深刻的认识，什么面向对象的软件设计，什么针对特定问题，什么优雅的解决方案，这都说的是什么，后来我看了几遍之后，上面这句话用我的理解翻译如下：</p>
+<blockquote>
+<p>软件开发过程中，解决某一类问题用到的一系列套路</p>
+</blockquote>
+<p>这就是我对设计模式的认识。当然这也不仅仅是我自己的认识，在跟其他的一些开发人员交流时，很多人都是这么认为的。</p>
+<p>这些解决问题的方案实在是太好用了，所以大神就把它们抽象出来，然后起了个名字-就叫做设计模式了。</p>
+<p>这么说大家可能还是不太明白，举个开发过程中可能遇到的实际例子吧。</p>
+<blockquote>
+<p>当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件。那么这种场景下我们该如何解决这个问题呢？通常我们需要新增一个接口，兼容原来的接口和新的业务需求参数。<br>因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题。</p>
+</blockquote>
+<p>这就是设计模式的应用，实际上也许你还不知道设计模式这个词，但是你已经在工作中频繁的用到了设计模式，下面我们就来看看到底有哪些设计模式。</p>
+<p>哦，对了，设计模式并不依赖于语言，它本身更像是一种软件的设计思想，因为我是一个前端，所以接下来具体实现的时候我会使用js来实现设计模式的用法。</p>
+<h1 id="学习设计模式"><a href="#学习设计模式" class="headerlink" title="学习设计模式"></a>学习设计模式</h1><p>目前被普遍接受的经典的设计模式共有 <strong>23</strong> 种，而这23种设计模式又分为了 <strong>3大类</strong> ，看过一张图这里拿过来镇贴。<br><img src="https://s2.ax1x.com/2020/01/13/lHgD4H.jpg" alt="lHgD4H.jpg"><br>他们分别是</p>
+<ul>
+<li>创建型模式</li>
+<li>结构型模式</li>
+<li>行为型模式</li>
+</ul>
+<p>接下来，我将会将这23种，3大类设计模式一个个的拆解开来，跟大家一起学习一下，设计模式有哪些内容。</p>
+<h2 id="创建型模式-6个"><a href="#创建型模式-6个" class="headerlink" title="创建型模式 6个"></a>创建型模式 6个</h2><p>这类模式用于<strong>对象的生成</strong>和<strong>生命周期的管理</strong>。<br>创建型模式可以决定生成哪些对象，提高了程序的灵活性。具体属于此类的模式清单如下，共有 <strong>5</strong> 个：</p>
+<ul>
+<li>单例模式（Singleton）</li>
+<li>工厂方法模式（Factory Method）</li>
+<li>抽象工厂模式（Abstract Factory）</li>
+<li>建造者模式（Builder）</li>
+<li>原型模式（Prototype）</li>
+<li>迭代器模式（Iterator）</li>
+</ul>
+<h3 id="单例模式（Singleton）"><a href="#单例模式（Singleton）" class="headerlink" title="单例模式（Singleton）"></a>单例模式（Singleton）</h3><p><strong><em>描述：</em></strong>确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。</p>
+<h3 id="工厂方法模式（Factory-Method）"><a href="#工厂方法模式（Factory-Method）" class="headerlink" title="工厂方法模式（Factory Method）"></a>工厂方法模式（Factory Method）</h3><p><strong><em>描述：</em></strong>定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。</p>
+<h3 id="抽象工厂模式（Abstract-Factory）"><a href="#抽象工厂模式（Abstract-Factory）" class="headerlink" title="抽象工厂模式（Abstract Factory）"></a>抽象工厂模式（Abstract Factory）</h3><p><strong><em>描述：</em></strong>为创建一组相关或相互依赖的对象提供一个接口，而且无需指定它们的具体类</p>
+<h3 id="建造者模式（Builder）"><a href="#建造者模式（Builder）" class="headerlink" title="建造者模式（Builder）"></a>建造者模式（Builder）</h3><p><strong><em>描述：</em></strong>将一个复杂对象的构建与他的表示分离，使得同样的构建过程可以创建不同的表示。</p>
+<h3 id="原型模式（Prototype）"><a href="#原型模式（Prototype）" class="headerlink" title="原型模式（Prototype）"></a>原型模式（Prototype）</h3><p><strong><em>描述：</em></strong>用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。</p>
+<h3 id="迭代器模式（Iterator）"><a href="#迭代器模式（Iterator）" class="headerlink" title="迭代器模式（Iterator）"></a>迭代器模式（Iterator）</h3><p><strong><em>描述：</em></strong>提供一种方法访问一个容器对象中的各个元素，而又不需暴露该对象的内部细节。</p>
+<h2 id="结构型模式-7个"><a href="#结构型模式-7个" class="headerlink" title="结构型模式 7个"></a>结构型模式 7个</h2><ul>
+<li>适配器模式（Adapter）</li>
+<li>组合模式（Compositor）</li>
+<li>代理模式（Proxy）</li>
+<li>桥梁模式（Bridge）</li>
+<li>装饰模式（Decorator）</li>
+<li>门面模式（Facade）</li>
+<li>享元模式（Flyweight）</li>
+</ul>
+<h3 id="适配器模式（Adapter）"><a href="#适配器模式（Adapter）" class="headerlink" title="适配器模式（Adapter）"></a>适配器模式（Adapter）</h3><p><strong><em>描述：</em></strong>将一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。</p>
+<h3 id="组合模式（Compositor）"><a href="#组合模式（Compositor）" class="headerlink" title="组合模式（Compositor）"></a>组合模式（Compositor）</h3><p><strong><em>描述：</em></strong>将对象组合成树形结构</p>
+<h3 id="代理模式（Proxy）"><a href="#代理模式（Proxy）" class="headerlink" title="代理模式（Proxy）"></a>代理模式（Proxy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="桥梁模式（Bridge）"><a href="#桥梁模式（Bridge）" class="headerlink" title="桥梁模式（Bridge）"></a>桥梁模式（Bridge）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="装饰模式（Decorator）"><a href="#装饰模式（Decorator）" class="headerlink" title="装饰模式（Decorator）"></a>装饰模式（Decorator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="门面模式（Facade）"><a href="#门面模式（Facade）" class="headerlink" title="门面模式（Facade）"></a>门面模式（Facade）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="享元模式（Flyweight）"><a href="#享元模式（Flyweight）" class="headerlink" title="享元模式（Flyweight）"></a>享元模式（Flyweight）</h3><p><strong><em>描述：</em></strong></p>
+<h2 id="行为型模式-10个"><a href="#行为型模式-10个" class="headerlink" title="行为型模式 10个"></a>行为型模式 10个</h2><ul>
+<li>命名模式（Command）</li>
+<li>解释器模式（Interpreter）</li>
+<li>责任链模式（Chian of Responsibility）</li>
+<li>观察者模式（Observer）</li>
+<li>中介者模式（Mediator）</li>
+<li>备忘录模式（Memento）</li>
+<li>状态模式（State）</li>
+<li>策略模式（Strategy）</li>
+<li>模板方法模式（Template Method）</li>
+<li>访问者模式（Visitor）</li>
+</ul>
+<h3 id="命名模式（Command）"><a href="#命名模式（Command）" class="headerlink" title="命名模式（Command）"></a>命名模式（Command）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="解释器模式（Interpreter）"><a href="#解释器模式（Interpreter）" class="headerlink" title="解释器模式（Interpreter）"></a>解释器模式（Interpreter）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="责任链模式（Chian-of-Responsibility）"><a href="#责任链模式（Chian-of-Responsibility）" class="headerlink" title="责任链模式（Chian of Responsibility）"></a>责任链模式（Chian of Responsibility）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="观察者模式（Observer）"><a href="#观察者模式（Observer）" class="headerlink" title="观察者模式（Observer）"></a>观察者模式（Observer）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="中介者模式（Mediator）"><a href="#中介者模式（Mediator）" class="headerlink" title="中介者模式（Mediator）"></a>中介者模式（Mediator）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="备忘录模式（Memento）"><a href="#备忘录模式（Memento）" class="headerlink" title="备忘录模式（Memento）"></a>备忘录模式（Memento）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="状态模式（State）"><a href="#状态模式（State）" class="headerlink" title="状态模式（State）"></a>状态模式（State）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="策略模式（Strategy）"><a href="#策略模式（Strategy）" class="headerlink" title="策略模式（Strategy）"></a>策略模式（Strategy）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="模板方法模式（Template-Method）"><a href="#模板方法模式（Template-Method）" class="headerlink" title="模板方法模式（Template Method）"></a>模板方法模式（Template Method）</h3><p><strong><em>描述：</em></strong></p>
+<h3 id="访问者模式（Visitor）"><a href="#访问者模式（Visitor）" class="headerlink" title="访问者模式（Visitor）"></a>访问者模式（Visitor）</h3><p><strong><em>描述：</em></strong></p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>设计模式</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>《高性能JAVASCRIPT》读书笔记</title>
+    <url>/2013/06/17/Read-High-Performance-JavaScript/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《高性能JAVASCRIPT》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="如何从小事提升JAVASCRIPT性能。"><a href="#如何从小事提升JAVASCRIPT性能。" class="headerlink" title="如何从小事提升JAVASCRIPT性能。"></a>如何从小事提升JAVASCRIPT性能。</h1><ol>
+<li><p>将<code>&lt;script&gt;</code>标签写在<code>&lt;/body&gt;</code>之前——将脚本放在底部。</p>
+</li>
+<li><p>尽量少的<code>&lt;script&gt;</code>标签，减少页面中的外链数量，减少请求次数。</p>
+</li>
+<li><p>使用打包工具如：Yahoo！combo handler</p>
+</li>
+<li><p>使用动态延迟加载技术如：LazyLoad类库,LABjs</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;lazyload-min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  LazyLoad.js([],function()&#123;</span><br><span class="line">    Application.init();</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li>
+<li><p>在javascript中存储位置十分重要，尽量用局部变量代替对象成员的访问。</p>
+</li>
+<li><p>集合变数组提高查询效率</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">function toArray(coll)&#123;</span><br><span class="line">  for(var i &#x3D; 0, a&#x3D;[], len&#x3D;coll.length; i&lt;len; i++)&#123;</span><br><span class="line">    a[i]&#x3D;col[i];</span><br><span class="line">  &#125;</span><br><span class="line">  return a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li><p>使用局部变量缓存访问多次的成员<br>当便利一个集合时，首要优化原则是把集合存储在局部变量中，并把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。</p>
+</li>
+<li><p>使用原生DOM方法querySelectorAll（）遍历查找元素。</p>
+</li>
+<li><p>让元素脱离动画流，页面重排次数越多，程序响应越慢，要尽量减少重拍<br>方法：</p>
+</li>
+<li><ol>
+<li>使用绝对定位使元素脱离文档流</li>
+</ol>
+</li>
+<li><p>IE：hover<br>在大量元素使用：hover这个伪css选择器时，程序会降低响应速率，在大表格或列表的情况下</p>
+</li>
+</ol>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>读书笔记</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>《让老板提拔你》读书笔记</title>
+    <url>/2015/12/31/Read-Let-your-boss-promote-you/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近读了《让老板提拔你》，下面将书中觉得有用的内容进行摘抄，放在下方。</p>
+<h1 id="定位自己"><a href="#定位自己" class="headerlink" title="定位自己"></a>定位自己</h1><p>正确认识自己，确定社会定位、职业定位。 定位-决定-定价</p>
+<h2 id="要素"><a href="#要素" class="headerlink" title="要素"></a>要素</h2><p><em><strong>核心竞争力</strong></em> 与 <em><strong>职位</strong></em> <em><strong>契合度</strong></em> 是高薪关键所在</p>
+<h3 id="契合度"><a href="#契合度" class="headerlink" title="契合度"></a>契合度</h3><ul>
+<li>技能、专长、经历与职位要求的契合度</li>
+<li>专业资质和等级与职位要求的契合度</li>
+<li>综合素质与职位要求的契合度<h3 id="七大秘诀"><a href="#七大秘诀" class="headerlink" title="七大秘诀"></a>七大秘诀</h3></li>
+<li>了解同行业薪酬的平均水平</li>
+<li>赢得未来单位的心</li>
+<li>先让对方开口</li>
+<li>勇敢地开口要求</li>
+<li>不要轻言放弃</li>
+<li>把握时机很重要</li>
+<li>说实话，别撒谎<h3 id="如何谈薪资"><a href="#如何谈薪资" class="headerlink" title="如何谈薪资"></a>如何谈薪资</h3></li>
+<li>商洽薪酬的关键在于把握好谈话时机，切勿开门见山。<blockquote>
+<p>只要有发展机会，我愿意接受贵单位的薪酬标准，不知道按规定这个工作岗位的薪酬标准是多少。</p>
+</blockquote>
+</li>
+</ul>
+<h3 id="将知识卖个好价钱"><a href="#将知识卖个好价钱" class="headerlink" title="将知识卖个好价钱"></a>将知识卖个好价钱</h3><p>推销自己既推销自己所掌握的知识即智慧，正确认识自己的价值是关键。</p>
+<h3 id="高薪是因为“物有所值”"><a href="#高薪是因为“物有所值”" class="headerlink" title="高薪是因为“物有所值”"></a>高薪是因为“物有所值”</h3><ul>
+<li>用业绩、用能力说话，是人才坦然面对高薪的心态。</li>
+<li>高薪人才的求职方式 —- 圈内朋友引见、定向投简历、行业论坛、交流活动等。</li>
+<li>高级人才不能经常跳槽要保持相对的职业稳定。—- 在一家公司少则3年多则6年 —- 接受挑战，把握机会。</li>
+</ul>
+<h3 id="失败丰富走向成功经验"><a href="#失败丰富走向成功经验" class="headerlink" title="失败丰富走向成功经验"></a>失败丰富走向成功经验</h3><p>强调在失败中吸取的经验，在未来中可以避免的损失。</p>
+<h3 id="能为企业带来丰厚的利润才是人才"><a href="#能为企业带来丰厚的利润才是人才" class="headerlink" title="能为企业带来丰厚的利润才是人才"></a>能为企业带来丰厚的利润才是人才</h3><p>企业招聘员工的唯一目的：追求公司业绩最大化、利润最大化。</p>
+<h1 id="高质高效工作全攻略"><a href="#高质高效工作全攻略" class="headerlink" title="高质高效工作全攻略"></a>高质高效工作全攻略</h1><ul>
+<li>进行正确的自我评价</li>
+<li>做最擅长做的事<ul>
+<li>三个经济原则 —- 发挥人才优势。<ol>
+<li>比较利益原则—–自己的专长对自己才是最有利的，勿与他人作比较。</li>
+<li>机会成本原则—–选择一份工作放弃其他工作就是机会成本。</li>
+<li>效率原则——–工作的成功不在于时间有多长，而在于成效有多少，附加值有多少。</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>马上行动</li>
+<li>做事情要雷厉风行 ——— 成功属于踏实肯干的人</li>
+<li>有条不紊地开展工作 ——- 制定时间计划</li>
+<li>善于利用现代办公工具</li>
+<li>给自己最大的工作空间</li>
+<li>建立高效有序的办公环境</li>
+<li>不要忘记最初想去的方向</li>
+<li>“聪明”的向上级提出建议</li>
+<li>专心做事，避免浮躁</li>
+<li>多而不专，一事难成</li>
+<li>“专”才有高质工作——–人才主要指专才–某个领域的高精尖人才–勿做全才，一专多能</li>
+<li>做事要有条理</li>
+</ul>
+<h1 id="不要只把自己当成一个打工仔"><a href="#不要只把自己当成一个打工仔" class="headerlink" title="不要只把自己当成一个打工仔"></a>不要只把自己当成一个打工仔</h1><blockquote>
+<p>要把工作当成事业</p>
+</blockquote>
+<ul>
+<li>工作不仅仅是为了钱</li>
+<li>对工作要有明确的价值取向<ol>
+<li>认清人生的方向</li>
+<li>开始学会醉卧探索和认知</li>
+<li>认清工作价值与成就的关系</li>
+<li>长期的工作规划</li>
+<li>在生命的天平上衡量自身的价值</li>
+</ol>
+</li>
+<li>巧妙应对与上司看法向左时的三条准则<ol>
+<li>遇事考虑全局</li>
+<li>辩证地看待问题</li>
+<li>切记感情用事</li>
+</ol>
+</li>
+<li>把单位的事当成自家的事</li>
+<li>认真负责地用心工作</li>
+<li>珍惜岗位，热爱自己的职业</li>
+<li>永远是在为自己工作</li>
+<li>敬重自己的工作</li>
+<li>不要轻视薪水微薄的工作</li>
+<li>永远对工作充满激情</li>
+<li>以自己的工作为荣</li>
+<li>不要被他人的观点所束缚</li>
+<li>暂时的胜负并不会决定人生的最后走向</li>
+<li>将弱势转化为优势</li>
+<li>全力以赴做好每一天的工作</li>
+<li>和优秀的人士在一起—见贤思齐、借梯爬楼<ul>
+<li>如何争取跟优秀的人在一起<ol>
+<li>不断的抛头露面</li>
+<li>帮助可以帮助自己成就事业的人做事</li>
+<li>与上司和比自己优秀的人士一起合作</li>
+</ol>
+</li>
+</ul>
+</li>
+</ul>
+<ol>
+<li>尊重对方，严谨有致</li>
+<li>切记奉承，要不卑不亢</li>
+<li>态度自然，不必拘谨</li>
+<li>陪衬得当，不可狂妄</li>
+<li>主动真诚，做出姿态</li>
+<li>求助求教，接受呵护</li>
+</ol>
+<ul>
+<li>挑战自我，承担责任<ul>
+<li>三条忠告<ol>
+<li>全心全意工作</li>
+<li>把自己视为合伙人</li>
+<li>迎接变革的需求</li>
+</ol>
+</li>
+</ul>
+</li>
+<li>自信独立，不随波逐流</li>
+<li>敢于显示自己很重要</li>
+<li>千万不能只知道抱怨上司</li>
+<li>保持严谨认真的做事习惯</li>
+<li>自主地做好手中的工作</li>
+<li>踏踏实实地做好本职工作</li>
+<li>丢掉工作散漫的坏习惯</li>
+<li>不要让浮躁的性格困扰自己</li>
+<li>不推诿，勇于承担责任</li>
+<li>无论如何都不要拖延工作</li>
+<li>糊弄工作只能是在糊弄自己</li>
+<li>逊色的工作只会淘汰自己</li>
+<li>千万别丢掉“得宠”之资</li>
+<li>“一步登天”只会摔疼自己</li>
+<li>别让“差不多”贻误了自己</li>
+<li>能完成100%，就决不做99%</li>
+</ul>
+<h1 id="与上司相处"><a href="#与上司相处" class="headerlink" title="与上司相处"></a>与上司相处</h1><ul>
+<li>不要做上司的“心腹”</li>
+<li>适时恰当的赞美上司<ul>
+<li>赞美上司，还要善于选择适当的场合</li>
+<li>赞美上司，要学会巧借公众语言称赞</li>
+<li>赞美上司，还要善于赞美不得志的上司</li>
+</ul>
+</li>
+<li>主动与领导沟通</li>
+<li>主动和上司保持联系 </li>
+<li>用“心机”主动接近上司<ul>
+<li>尽可能详细的了解上司</li>
+<li>选择一个与领导尽可能近的位置</li>
+<li>赢得上司青睐的方法 </li>
+</ul>
+</li>
+<li>更有效的和上司沟通<ul>
+<li>与上司沟通要简洁</li>
+<li>与上司沟通要大度大气大方</li>
+<li>与上司沟通，就要把自己先放一边 ——– 说话对事不对人</li>
+</ul>
+</li>
+<li>四种和上司进行沟通的方法<ol>
+<li>开诚布公式———提出问题，说出自己的理解认识，给出解决方案，寻求领导意思，执行领导的命令</li>
+<li>先斩后奏式———因主客观原因导致的没有先汇报而是先解决的事，事后要将问题的分析方法，解决方法，实施方案以及结果做一份详尽的总结报告上交给领导</li>
+<li>“含情脉脉”式——-通过交流一些工作上的问题来含蓄表达出个人的建议、需要</li>
+<li>巧设比喻式———通过典型案例来暗示自己的意见和要求</li>
+</ol>
+</li>
+<li>把话说到上司的心坎上</li>
+<li>巧妙地为领导拾遗补缺<ol>
+<li>诠释领导讲话的难点</li>
+<li>强调领导的才干</li>
+<li>化严肃为幽默</li>
+<li>稳定情绪，委婉暗示</li>
+</ol>
+</li>
+<li>工作中勤于请示汇报<ol>
+<li>听懂上司的意图</li>
+<li>探讨、磨合，达成共识</li>
+<li>制定尽可能详尽的工作计划</li>
+<li>随时向上司汇报任务的关键点</li>
+<li>总结汇报</li>
+</ol>
+</li>
+<li>用成功赢得上司的信任</li>
+<li>工作中不要冲撞上司</li>
+<li>处理好同上司之间的分歧<ol>
+<li>圆融协调——领导不懂，下达了错误的指令<ol>
+<li>私下向上司陈述意见，帮助上司做出正确的决策</li>
+<li>如果上司采纳了下属的建议或意见，该下属有责任长期保守秘密</li>
+<li>如果上司固执己见，那么无条件服从</li>
+</ol>
+</li>
+<li>装聋作哑——不涉及到原则问题</li>
+<li>棘手难题多权衡<ol>
+<li>立刻插话纠正</li>
+<li>提醒上司</li>
+<li>暗示</li>
+<li>事后补救</li>
+<li>事后提醒</li>
+</ol>
+</li>
+</ol>
+</li>
+<li>正确对待上司的批评</li>
+<li>要善于服从自己的上司</li>
+<li>正确化解来自上司的压力</li>
+</ul>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>博观约取，多读书读好书，丰富自己，变得睿智。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>读书笔记</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>《晨间日记的奇迹》读书笔记</title>
+    <url>/2016/10/27/Read-The-miracle-of-the-morning-journal/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>昨天花了1天的时间读了《晨间日记的奇迹》，感觉整个人的认识发生了一些变化，下面把重要内容做一下摘抄总结。</p>
+<h1 id="早上写日记的好处-——-提升效率"><a href="#早上写日记的好处-——-提升效率" class="headerlink" title="早上写日记的好处 —— 提升效率"></a>早上写日记的好处 —— 提升效率</h1><ul>
+<li>可以做好一天的准备 — 计划性</li>
+<li>可以正确的写出昨天发生的事 — 效率性&amp;忠诚性</li>
+<li>可以中立的看待昨天 — 中立性</li>
+<li>相对自由的时间 — 持续性</li>
+<li>总结经验 — 活用性</li>
+</ul>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><p>日记 不等于 日志<br>日记 要记录 时间 天气 心情 — 因为这些有助于回忆和记录<br>不要投入过长时间 — 3分钟 — 日记私密性<br>晨间日记前7天只写好事 — 反省固然重要，但是成长更重要，持续性很重要 — 巴普洛夫的狗</p>
+<h1 id="晨间日记2部分"><a href="#晨间日记2部分" class="headerlink" title="晨间日记2部分"></a>晨间日记2部分</h1><h2 id="Part1"><a href="#Part1" class="headerlink" title="Part1"></a>Part1</h2><p>客观记录已经发生的事（昨天）— 经验智慧</p>
+<h2 id="Part2"><a href="#Part2" class="headerlink" title="Part2"></a>Part2</h2><ul>
+<li>今天应做的事 — 具体行动（来自昨天的总结</li>
+<li>今天一定要做的事（紧急重要的事）— 变得更积极更主动</li>
+<li>未来要做的事 — 不紧急但重要的事</li>
+<li>连用日记 — 历史上的今天（过去一年同一天的事）</li>
+</ul>
+<h1 id="夜晚日记-VS-晨间日记"><a href="#夜晚日记-VS-晨间日记" class="headerlink" title="夜晚日记 VS 晨间日记"></a>夜晚日记 VS 晨间日记</h1><p>受当天情绪影响 — 更冷静</p>
+<h1 id="梦想成真表"><a href="#梦想成真表" class="headerlink" title="梦想成真表"></a>梦想成真表</h1><table>
+<thead>
+<tr>
+<th></th>
+<th>过去</th>
+<th>未来</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>事实</td>
+<td>IQ 智慧指数</td>
+<td>NQ 人际关系指数</td>
+</tr>
+<tr>
+<td>感情</td>
+<td>EQ 情感指数</td>
+<td>DQ 梦想指数</td>
+</tr>
+</tbody></table>
+<ul>
+<li>IQ — 晨间日记冷静回忆分析 — 提高决策正确性 IQ up</li>
+<li>EQ — 冷静记录昨日的情绪／自省 — 变积极 EQ up</li>
+<li>NQ — 总结昨天给今天设立“对／为XXX做某事” 很重要 NQ up</li>
+<li>DQ — 不能只有眼前的事 每天都要确定一下自己的梦想 脸皮厚点没关系 重复或只有一句话也没关系 铭记于心最重要</li>
+</ul>
+<p>“忙碌”只是借口！“决心”才是问题！ 对未来充满期待的人才有行动力</p>
+<h1 id="如何早起"><a href="#如何早起" class="headerlink" title="如何早起"></a>如何早起</h1><ul>
+<li>设定起床音乐／用气味（精油）刺激起床／光线-电动窗帘早起自动拉开</li>
+<li>早起后淋浴 — 配合音乐／冥想／呐喊 — 让自己充满动力保持清醒</li>
+</ul>
+<h1 id="写日记的五大好处"><a href="#写日记的五大好处" class="headerlink" title="写日记的五大好处"></a>写日记的五大好处</h1><ul>
+<li>提升写作能力</li>
+<li>谈话题材源源不断</li>
+<li>提高贵人运</li>
+<li>返现自我肉体和精神的状态与模式</li>
+<li>在自己身上挖宝，彻底改变人生</li>
+</ul>
+<h1 id="记录的日记要常拿出来看看"><a href="#记录的日记要常拿出来看看" class="headerlink" title="记录的日记要常拿出来看看"></a>记录的日记要常拿出来看看</h1><p>记录日记时 — 问问自己的灵魂 然后写下真心话 — 灵魂日记<br><code>六度空间理论</code></p>
+<h1 id="七种成功者的习惯"><a href="#七种成功者的习惯" class="headerlink" title="七种成功者的习惯"></a>七种成功者的习惯</h1><ul>
+<li>习惯之一：积极主动别指望谁能推你走 — 主动行动，迈出第一步</li>
+<li>习惯之二：以终为始忠于自己的人生计划。— 设立人生目标并坚持</li>
+<li>习惯之三：要事第一选择当前该做的事</li>
+<li>习惯之四：追求双赢远离角斗场</li>
+<li>习惯之五：善于沟通换位思考的原则</li>
+<li>习惯之六：统合综效 1+1可以大于2</li>
+<li>习惯之七：不断更新全方位平衡自我</li>
+</ul>
+<p>早睡是为了身体，早起是为了我们的内心。— sugiponn</p>
+<h1 id="晨间日记的格式"><a href="#晨间日记的格式" class="headerlink" title="晨间日记的格式"></a>晨间日记的格式</h1><p>晨间日记必须要设立的栏目 — 工作／金钱／健康／人际关系<br>要记下当日的日期／天气／温度／湿度</p>
+<p>纬度标签<br>工作方面：</p>
+<ul>
+<li>能力开发／经营／管理／进货／工作人员／学习／资格／活动／企划案／想法／推广<br>金钱方面：</li>
+<li>收入／指出／购入／股票／资产／储蓄／家用<br>健康方面：</li>
+<li>饮食／运动／性／减肥／身体状况／锻炼身体／体重／脂肪<br>人际关系方面：</li>
+<li>父母／家人／小孩／亲戚／情人／工作伙伴／朋友／熟人／联络事项／人脉网络<br>兴趣方面以及其他：</li>
+<li>义工活动／阅读／运动／打扮／电影／音乐／游戏／喜欢的物品／今天必须要注意的事／美容／开心的事／购物</li>
+</ul>
+<p>劳动 — 职业 — 工作 — <em>乐趣</em></p>
+<h1 id="三大原则和七大作战守则"><a href="#三大原则和七大作战守则" class="headerlink" title="三大原则和七大作战守则"></a>三大原则和七大作战守则</h1><ul>
+<li><p>原则1:时间不超过3分钟 — 减少养成习惯的成本</p>
+</li>
+<li><p>原则2:决定好写晨间日记的地方 — 为了养成习惯</p>
+</li>
+<li><p>原则3:只写一个字也没关系 — 不要有压力</p>
+</li>
+<li><p>作战守则1:开心写日记 — 反省固然重要，鼓励更有作用 — 开始写晨间日记前七天只写好事</p>
+</li>
+<li><p>作战守则2:ONE-TWO作战 — 把动作分布容易养成习惯 — 形成固定动作</p>
+</li>
+<li><p>作战守则3:巴普洛夫的狗 — 开始写日记时候要有一个仪式 — 心理暗示</p>
+</li>
+<li><p>作战守则4:奖励自己 — 当习惯养成并坚持到一定时间，给自己一个奖励</p>
+</li>
+<li><p>作战守则5:宣告天下 — 借由他人的鼓励或压力形成动力／也可找到同志</p>
+</li>
+<li><p>作战守则6:一千日作战法 — 不管什么样的习惯坚持1000日就会成为永远的习惯 — 具体做法为记录 第XXX篇 晨间日记</p>
+</li>
+<li><p>作战守则7:为了别人 — 写晨间日记不只是为了自己，而且更是为了别人，身边人的幸福最终会影响到自己</p>
+</li>
+</ul>
+<h1 id="应该先肯定自己，给自己打100分"><a href="#应该先肯定自己，给自己打100分" class="headerlink" title="应该先肯定自己，给自己打100分"></a>应该先肯定自己，给自己打100分</h1><ul>
+<li>“总之，先… 病” 没有目标／没有梦想 — 回顾时一定会后悔！</li>
+<li>“假如…，应该 病” 无法满足／没有动力 — 焦躁不安</li>
+<li>共同点：失落感／空虚／</li>
+</ul>
+<h2 id="解决办法—-设立一个情境"><a href="#解决办法—-设立一个情境" class="headerlink" title="解决办法— 设立一个情境"></a>解决办法— 设立一个情境</h2><p>例：我要建立一个幸福的家庭 —&gt; 因此我要创造很多快乐的回忆 —&gt; 为了制造很多快乐的回忆 —&gt; 我必须要到很多的地方去看看 —&gt; 为了去很多地方看看，我觉得有辆车会更方便 —&gt; 买车 —&gt; 考驾照</p>
+<p>不要总想自己哪里欠缺，要想自己想要得到什么，并且为了目标努力，你就会变的更完美。<br>拥有一个敢于大声喊出的梦想，不要羞涩，要为了梦想一步步的前进，最终达到梦想。</p>
+<h1 id="提到的另外的书"><a href="#提到的另外的书" class="headerlink" title="提到的另外的书"></a>提到的另外的书</h1><p>《培育梦想种子》《日记的力量》《成功人士的七个习惯》</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>读书笔记</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>SSR</title>
+    <url>/2020/02/11/SSR/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="什么是SSR"><a href="#什么是SSR" class="headerlink" title="什么是SSR"></a>什么是SSR</h1><h2 id="传统浏览器的vue纯浏览器渲染"><a href="#传统浏览器的vue纯浏览器渲染" class="headerlink" title="传统浏览器的vue纯浏览器渲染"></a>传统浏览器的vue纯浏览器渲染</h2><p>浏览器请求服务器，服务器返回静态资源 ，客户端负责渲染js</p>
+<h2 id="ssr"><a href="#ssr" class="headerlink" title="ssr"></a>ssr</h2><p>浏览器请求服务器，node服务端渲染js后，返回对应的页面返回给浏览器</p>
+<h2 id="SSR需要那些东西"><a href="#SSR需要那些东西" class="headerlink" title="SSR需要那些东西"></a>SSR需要那些东西</h2><h2 id="手写SSR"><a href="#手写SSR" class="headerlink" title="手写SSR"></a>手写SSR</h2><p>特性：</p>
+<ul>
+<li>每一次访问必须新建一个vue实例</li>
+<li>只会触发组件的 beforeCreate和created钩子</li>
+</ul>
+<p>核心库</p>
+<ul>
+<li>vue</li>
+<li>vue-server-renderer<h1 id="vue-next"><a href="#vue-next" class="headerlink" title="vue + next"></a>vue + next</h1><blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+</li>
+</ul>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>服务端渲染</tag>
+        <tag>同构技术</tag>
+        <tag>SSR</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>使用阿里镜像加速brew（转载）</title>
+    <url>/2020/03/03/Speeding-up-brew-with-Ali-mirroring/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="使用-Alibaba-的-Homebrew-镜像源进行加速"><a href="#使用-Alibaba-的-Homebrew-镜像源进行加速" class="headerlink" title="使用 Alibaba 的 Homebrew 镜像源进行加速"></a>使用 Alibaba 的 Homebrew 镜像源进行加速</h1><p>平时我们执行 brew 命令安装软件的时候，跟以下 3 个仓库地址有关：</p>
+<ul>
+<li>brew.git</li>
+<li>homebrew-core.git</li>
+<li>homebrew-bottles<br>通过以下操作将这 3 个仓库地址全部替换为 Alibaba 提供的地址</li>
+</ul>
+<h2 id="1-替换-还原-brew-git-仓库地址"><a href="#1-替换-还原-brew-git-仓库地址" class="headerlink" title="1. 替换 / 还原 brew.git 仓库地址"></a>1. 替换 / 还原 brew.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 brew.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 brew.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/brew.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="2-替换-还原-homebrew-core-git-仓库地址"><a href="#2-替换-还原-homebrew-core-git-仓库地址" class="headerlink" title="2. 替换 / 还原 homebrew-core.git 仓库地址"></a>2. 替换 / 还原 homebrew-core.git 仓库地址</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-core.git 仓库地址:</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-core.git 仓库地址</span></span><br><span class="line"><span class="built_in">cd</span> <span class="string">&quot;<span class="subst">$(brew --repo)</span>/Library/Taps/homebrew/homebrew-core&quot;</span></span><br><span class="line">git remote set-url origin https://github.com/Homebrew/homebrew-core.git</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-替换-还原-homebrew-bottles-访问地址"><a href="#3-替换-还原-homebrew-bottles-访问地址" class="headerlink" title="3. 替换 / 还原 homebrew-bottles 访问地址"></a>3. 替换 / 还原 homebrew-bottles 访问地址</h2><p>这个步骤跟你的 macOS 系统使用的 shell 版本有关系</p>
+<p>所以，先来查看当前使用的 shell 版本</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="variable">$SHELL</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/zsh，参考下方的 zsh 终端操作方式</span></span><br><span class="line"><span class="comment"># 如果你的输出结果是 /bin/bash，参考下方的 bash 终端操作方式</span></span><br></pre></td></tr></table></figure>
+<h3 id="3-1-zsh-终端操作方式"><a href="#3-1-zsh-终端操作方式" class="headerlink" title="3.1 zsh 终端操作方式"></a>3.1 zsh 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 替换成阿里巴巴的 homebrew-bottles 访问地址:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.zshrc</span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.zshrc</span><br></pre></td></tr></table></figure>
+<h3 id="3-2-bash-终端操作方式"><a href="#3-2-bash-终端操作方式" class="headerlink" title="3.2 bash 终端操作方式"></a>3.2 bash 终端操作方式</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 替换 homebrew-bottles 访问 URL:</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles&#x27;</span> &gt;&gt; ~/.bash_profile</span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment">#=======================================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 还原为官方提供的 homebrew-bottles 访问地址</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"><span class="comment"># 然后，删除 HOMEBREW_BOTTLE_DOMAIN 这一行配置</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
+
+<p>转载自：<a href="http://www.xiegangd.com/article/154055689187484">http://www.xiegangd.com/article/154055689187484</a></p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+      </categories>
+      <tags>
+        <tag>HomeBrew</tag>
+        <tag>Mac</tag>
+        <tag>海外提速</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>v8引擎如何回收内存（笔记）</title>
+    <url>/2020/02/23/V8-engine-memory-management-and-optimization/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="V8引擎如何回收垃圾"><a href="#V8引擎如何回收垃圾" class="headerlink" title="V8引擎如何回收垃圾"></a>V8引擎如何回收垃圾</h1><h2 id="为什么我们要关注内存"><a href="#为什么我们要关注内存" class="headerlink" title="为什么我们要关注内存"></a>为什么我们要关注内存</h2><ul>
+<li>防止页面占用内存过大，引起客户端卡顿，甚至无响应</li>
+<li>Node使用的也是v8，内存对于后端服务的性能至关重要。因为服务的持久性，后端更容易造成内存溢出<h2 id="v8引擎的内存回收机制"><a href="#v8引擎的内存回收机制" class="headerlink" title="v8引擎的内存回收机制"></a>v8引擎的内存回收机制</h2><h3 id="v8的内存分配"><a href="#v8的内存分配" class="headerlink" title="v8的内存分配"></a>v8的内存分配</h3>新生代内存空间</li>
+<li>from</li>
+<li>to<br>老生代内存空间<h3 id="内存大小"><a href="#内存大小" class="headerlink" title="内存大小"></a>内存大小</h3></li>
+<li>和操作系统有关 — 64位（1.4G）32位（0.7G）</li>
+<li>64位下 新生代（64MB） 老生代（1400MB）</li>
+<li>32位下 新生代（16MB） 老生代（700MB）</li>
+</ul>
+<p>为什么不占多一点内存</p>
+<ul>
+<li>js设计之初是为浏览器<ul>
+<li>前端特点 — 不持久化，执行一遍就回收了，所以1.4G够用了</li>
+<li>js回收内存会暂停执行代码</li>
+</ul>
+</li>
+</ul>
+<h3 id="垃圾回收算法"><a href="#垃圾回收算法" class="headerlink" title="垃圾回收算法"></a>垃圾回收算法</h3><p>新生代简单的说就是<strong><em>复制</em></strong></p>
+<ul>
+<li>新生代用来放新产生的变量，根据条件放到老生代，有用的放到to里（把有用的留一边，清空另一边，往复进行）</li>
+<li>算法复杂度（时间复杂度，空间复杂度）—- 牺牲空间换时间</li>
+</ul>
+<p>老生代就是<strong><em>标记、删除、整理</em></strong></p>
+<ul>
+<li>为什么要整理<ul>
+<li>数组是需要连续的空间</li>
+</ul>
+</li>
+</ul>
+<p>新生代如何晋升到老生代</p>
+<ul>
+<li>变量是否经过回收，第二次回收放到老生代，第一次回收放到To</li>
+<li>To空间使用了25%，放到老生代</li>
+</ul>
+<h3 id="V8是如何处理变量的"><a href="#V8是如何处理变量的" class="headerlink" title="V8是如何处理变量的"></a>V8是如何处理变量的</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 浏览器查看内存</span></span><br><span class="line"><span class="built_in">window</span>.performance</span><br><span class="line"><span class="comment">// nodejs查看内存 --- nodejs是c++的，可以拓宽内存</span></span><br><span class="line">process.memoryUsage()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿内存的方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMem</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> mem = process.memoryUsage();</span><br><span class="line">	<span class="keyword">var</span> format = <span class="function"><span class="keyword">function</span>(<span class="params">bytes</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> (bytes/<span class="number">1024</span>/<span class="number">1024</span>).toFixed(<span class="number">2</span>)+<span class="string">'MB'</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">'heapTotal:'</span>+format(mem.heapTotal)+<span class="string">'heapUsed:'</span>+format(mem.heapUsed))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="变量处理"><a href="#变量处理" class="headerlink" title="变量处理"></a>变量处理</h3><ul>
+<li>内存主要就是存储变量等数据的</li>
+<li>局部变量当程序执行结束，且没有引用的时候就会随着消失 — 可以被回收但不是说会马上回收</li>
+<li>全局对象会始终存活到程序运行结束</li>
+</ul>
+<h1 id="如何查看V8内存使用情况"><a href="#如何查看V8内存使用情况" class="headerlink" title="如何查看V8内存使用情况"></a>如何查看V8内存使用情况</h1><h2 id="如何注意内存使用"><a href="#如何注意内存使用" class="headerlink" title="如何注意内存使用"></a>如何注意内存使用</h2><h3 id="优化内存的技巧"><a href="#优化内存的技巧" class="headerlink" title="优化内存的技巧"></a>优化内存的技巧</h3><ul>
+<li>尽量不要定义全局变量</li>
+<li>全局变量记得手动销毁掉<ul>
+<li>不推荐开发时写delete – 支持有问题，严格模式有bug</li>
+<li>赋值为 undefined/null  undefined 是变量 null 是保留字</li>
+</ul>
+</li>
+<li>用匿名自执行函数变全局为局部<ul>
+<li><code>(function(){})()</code> </li>
+</ul>
+</li>
+<li>尽量避免使用闭包 —- 错误的观点，ie5时代的问题 —- 尽量避免使用闭包引用</li>
+</ul>
+<p>闭包</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> size = <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line">	<span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(size)</span><br><span class="line">	<span class="keyword">return</span> arr1</span><br><span class="line">&#125;</span><br><span class="line">a() <span class="comment">// 这样就没问题</span></span><br><span class="line"><span class="keyword">var</span> b = a() <span class="comment">// 因为引用所以无法销毁</span></span><br></pre></td></tr></table></figure>
+<h3 id="防止内存泄漏"><a href="#防止内存泄漏" class="headerlink" title="防止内存泄漏"></a>防止内存泄漏</h3><ul>
+<li>滥用缓存</li>
+<li>大内存量操作</li>
+</ul>
+<p>所有的优化都可以用缓存来解决，缓存通常都在全局，缓存可以直接拿来用；</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="number">20</span>*<span class="number">1024</span>*<span class="number">1024</span>;</span><br><span class="line"><span class="keyword">var</span> a = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加缓存锁</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">13</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(a.length&gt;<span class="number">4</span>)&#123;</span><br><span class="line">		a.shift();</span><br><span class="line">	&#125;</span><br><span class="line">	a.push(<span class="keyword">new</span> <span class="built_in">Array</span>(size))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<ul>
+<li>不要用v8来缓存<ul>
+<li>一定要用要的话加锁</li>
+</ul>
+</li>
+</ul>
+<p>nodejs中读取大文件要用流的形式，不要用读文件到buffer<br>fs.readFile()<br>fs.createReadStream()</p>
+<p>浏览器中，大文件上传记得切片<br>file.slice(0,1000)<br>file.slice(1000,2000)</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>内存回收</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>VSCode ESLint JS代码静态检测工具</title>
+    <url>/2017/10/12/VSCode-ESLint/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>VSCode是新一代IDE，方便灵活的插件安装方式让它强大无比，对前端友好，让它成为了越来越多前端开发者的首选IDE，编辑器虽好，但是要自己安装符合自己需求的插件才行，下面介绍一款插件，名叫ESLint，是用来静态检测js代码的工具，让你的js代码在编辑过程中就能找到错误，提高代码质量，好了废话不多说下面介绍如何安装和配置这款插件。</p>
+<span id="more"></span>
+<h1 id="安装ESLint插件"><a href="#安装ESLint插件" class="headerlink" title="安装ESLint插件"></a>安装ESLint插件</h1><p>打开VSCode编辑器，在左侧右下角有一个安装插件的图标，点击后就可以打开插件市场，输入ESLint，就会有个黄色的图标出现在你面前，不用犹豫双击它，稍等一会它就安装完了，是不是超简单。</p>
+<h1 id="安装NPM依赖"><a href="#安装NPM依赖" class="headerlink" title="安装NPM依赖"></a>安装NPM依赖</h1><p>ESLint插件运行需要一些依赖，对于用过npm包管理工具的人来讲小意思啦，我把代码放到下面，需要的直接粘贴运行就好。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;全局安装eslint</span><br><span class="line">npm i eslint -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到html中的js校验</span><br><span class="line">npm i eslint-plugin-html -g</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;如果用到es2015语法</span><br><span class="line">npm i babel-eslint -g</span><br></pre></td></tr></table></figure>
+<h1 id="配置eslint配置文件到项目根目录"><a href="#配置eslint配置文件到项目根目录" class="headerlink" title="配置eslint配置文件到项目根目录"></a>配置eslint配置文件到项目根目录</h1><p>配置文件名称如下：<br><strong>eslintrc.json</strong><br>内容为：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        &quot;plugins&quot;: [</span><br><span class="line">                &#x2F;&#x2F; &quot;react&quot;,</span><br><span class="line">                &quot;html&quot;</span><br><span class="line">        ],</span><br><span class="line">        &quot;env&quot;: &#123;</span><br><span class="line">                &quot;node&quot;: true,</span><br><span class="line">                &quot;jquery&quot;: true,</span><br><span class="line">                &quot;es6&quot;: true,</span><br><span class="line">                &quot;browser&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;globals&quot;: &#123;</span><br><span class="line">                &quot;angular&quot;: false</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;parser&quot;: &quot;babel-eslint&quot;,</span><br><span class="line">        &quot;rules&quot;: &#123;</span><br><span class="line">                &#x2F;&#x2F;官方文档 http:&#x2F;&#x2F;eslint.org&#x2F;docs&#x2F;rules&#x2F;</span><br><span class="line">                &#x2F;&#x2F;参数：0 关闭，1 警告，2 错误</span><br><span class="line">                &#x2F;&#x2F; &quot;quotes&quot;: [0, &quot;single&quot;],                  &#x2F;&#x2F;建议使用单引号</span><br><span class="line">                &#x2F;&#x2F; &quot;no-inner-declarations&quot;: [0, &quot;both&quot;],     &#x2F;&#x2F;不建议在&#123;&#125;代码块内部声明变量或函数</span><br><span class="line">                &quot;no-extra-boolean-cast&quot;: 1, &#x2F;&#x2F;多余的感叹号转布尔型</span><br><span class="line">                &quot;no-extra-semi&quot;: 1, &#x2F;&#x2F;多余的分号</span><br><span class="line">                &quot;no-extra-parens&quot;: 0, &#x2F;&#x2F;多余的括号</span><br><span class="line">                &quot;no-empty&quot;: 1, &#x2F;&#x2F;空代码块</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;使用前未定义</span><br><span class="line">                &quot;no-use-before-define&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;nofunc&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;complexity&quot;: [0, 10], &#x2F;&#x2F;圈复杂度大于*</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;定义数组或对象最后多余的逗号</span><br><span class="line">                &quot;comma-dangle&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &quot;never&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F; 不允许对全局变量赋值,如 window &#x3D; &#39;abc&#39;</span><br><span class="line">                &quot;no-global-assign&quot;: [&quot;error&quot;, &#123;</span><br><span class="line">                        &#x2F;&#x2F; 定义例外</span><br><span class="line">                        &#x2F;&#x2F; &quot;exceptions&quot;: [&quot;Object&quot;]</span><br><span class="line">                &#125;],</span><br><span class="line">                &quot;no-var&quot;: 0, &#x2F;&#x2F;用let或const替代var</span><br><span class="line">                &quot;no-const-assign&quot;: 2, &#x2F;&#x2F;不允许const重新赋值</span><br><span class="line">                &quot;no-class-assign&quot;: 2, &#x2F;&#x2F;不允许对class重新赋值</span><br><span class="line">                &quot;no-debugger&quot;: 1, &#x2F;&#x2F;debugger 调试代码未删除</span><br><span class="line">                &quot;no-console&quot;: 0, &#x2F;&#x2F;console 未删除</span><br><span class="line">                &quot;no-constant-condition&quot;: 2, &#x2F;&#x2F;常量作为条件</span><br><span class="line">                &quot;no-dupe-args&quot;: 2, &#x2F;&#x2F;参数重复</span><br><span class="line">                &quot;no-dupe-keys&quot;: 2, &#x2F;&#x2F;对象属性重复</span><br><span class="line">                &quot;no-duplicate-case&quot;: 2, &#x2F;&#x2F;case重复</span><br><span class="line">                &quot;no-empty-character-class&quot;: 2, &#x2F;&#x2F;正则无法匹配任何值</span><br><span class="line">                &quot;no-invalid-regexp&quot;: 2, &#x2F;&#x2F;无效的正则</span><br><span class="line">                &quot;no-func-assign&quot;: 2, &#x2F;&#x2F;函数被赋值</span><br><span class="line">                &quot;valid-typeof&quot;: 1, &#x2F;&#x2F;无效的类型判断</span><br><span class="line">                &quot;no-unreachable&quot;: 2, &#x2F;&#x2F;不可能执行到的代码</span><br><span class="line">                &quot;no-unexpected-multiline&quot;: 2, &#x2F;&#x2F;行尾缺少分号可能导致一些意外情况</span><br><span class="line">                &quot;no-sparse-arrays&quot;: 1, &#x2F;&#x2F;数组中多出逗号</span><br><span class="line">                &quot;no-shadow-restricted-names&quot;: 2, &#x2F;&#x2F;关键词与命名冲突</span><br><span class="line">                &quot;no-undef&quot;: 1, &#x2F;&#x2F;变量未定义</span><br><span class="line">                &quot;no-unused-vars&quot;: 1, &#x2F;&#x2F;变量定义后未使用</span><br><span class="line">                &quot;no-cond-assign&quot;: 2, &#x2F;&#x2F;条件语句中禁止赋值操作</span><br><span class="line">                &quot;no-native-reassign&quot;: 2, &#x2F;&#x2F;禁止覆盖原生对象</span><br><span class="line">                &quot;no-mixed-spaces-and-tabs&quot;: 0,</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;代码风格优化 --------------------------------------</span><br><span class="line">                &quot;no-irregular-whitespace&quot;: 0,</span><br><span class="line">                &quot;no-else-return&quot;: 0, &#x2F;&#x2F;在else代码块中return，else是多余的</span><br><span class="line">                &quot;no-multi-spaces&quot;: 0, &#x2F;&#x2F;不允许多个空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;object直接量建议写法 : 后一个空格前面不留空格</span><br><span class="line">                &quot;key-spacing&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;beforeColon&quot;: false,</span><br><span class="line">                                &quot;afterColon&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &quot;block-scoped-var&quot;: 1, &#x2F;&#x2F;变量应在外部上下文中声明，不应在&#123;&#125;代码块中</span><br><span class="line">                &quot;consistent-return&quot;: 1, &#x2F;&#x2F;函数返回值可能是不同类型</span><br><span class="line">                &quot;accessor-pairs&quot;: 1, &#x2F;&#x2F;object getter&#x2F;setter方法需要成对出现</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;换行调用对象方法  点操作符应写在行首</span><br><span class="line">                &quot;dot-location&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;property&quot;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-lone-blocks&quot;: 1, &#x2F;&#x2F;多余的&#123;&#125;嵌套</span><br><span class="line">                &quot;no-labels&quot;: 1, &#x2F;&#x2F;无用的标记</span><br><span class="line">                &quot;no-extend-native&quot;: 1, &#x2F;&#x2F;禁止扩展原生对象</span><br><span class="line">                &quot;no-floating-decimal&quot;: 1, &#x2F;&#x2F;浮点型需要写全 禁止.1 或 2.写法</span><br><span class="line">                &quot;no-loop-func&quot;: 1, &#x2F;&#x2F;禁止在循环体中定义函数</span><br><span class="line">                &quot;no-new-func&quot;: 1, &#x2F;&#x2F;禁止new Function(...) 写法</span><br><span class="line">                &quot;no-self-compare&quot;: 1, &#x2F;&#x2F;不允与自己比较作为条件</span><br><span class="line">                &quot;no-sequences&quot;: 1, &#x2F;&#x2F;禁止可能导致结果不明确的逗号操作符</span><br><span class="line">                &quot;no-throw-literal&quot;: 1, &#x2F;&#x2F;禁止抛出一个直接量 应是Error对象</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允return时有赋值操作</span><br><span class="line">                &quot;no-return-assign&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &quot;always&quot;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不允许重复声明</span><br><span class="line">                &quot;no-redeclare&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;builtinGlobals&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;不执行的表达式</span><br><span class="line">                &quot;no-unused-expressions&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;allowShortCircuit&quot;: true,</span><br><span class="line">                                &quot;allowTernary&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;no-useless-call&quot;: 1, &#x2F;&#x2F;无意义的函数call或apply</span><br><span class="line">                &quot;no-useless-concat&quot;: 1, &#x2F;&#x2F;无意义的string concat</span><br><span class="line">                &quot;no-void&quot;: 1, &#x2F;&#x2F;禁用void</span><br><span class="line">                &quot;no-with&quot;: 1, &#x2F;&#x2F;禁用with</span><br><span class="line">                &quot;space-infix-ops&quot;: 0, &#x2F;&#x2F;操作符前后空格</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;jsdoc</span><br><span class="line">                &quot;valid-jsdoc&quot;: [</span><br><span class="line">                        0,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;requireParamDescription&quot;: true,</span><br><span class="line">                                &quot;requireReturnDescription&quot;: true</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line"> </span><br><span class="line">                &#x2F;&#x2F;标记未写注释</span><br><span class="line">                &quot;no-warning-comments&quot;: [</span><br><span class="line">                        1,</span><br><span class="line">                        &#123;</span><br><span class="line">                                &quot;terms&quot;: [</span><br><span class="line">                                        &quot;todo&quot;,</span><br><span class="line">                                        &quot;fixme&quot;,</span><br><span class="line">                                        &quot;any other term&quot;</span><br><span class="line">                                ],</span><br><span class="line">                                &quot;location&quot;: &quot;anywhere&quot;</span><br><span class="line">                        &#125;</span><br><span class="line">                ],</span><br><span class="line">                &quot;curly&quot;: 0 &#x2F;&#x2F;if、else、while、for代码块用&#123;&#125;包围</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>eslint就是根据这个配置表来进行js语法校验的。</p>
+<h1 id="最后重启VSCode完成插件安装"><a href="#最后重启VSCode完成插件安装" class="headerlink" title="最后重启VSCode完成插件安装"></a>最后重启VSCode完成插件安装</h1><p>重启后控制台显示ESLint server is running说明插件已经生效，好啦接下来就愉快的写代码吧。</p>
+]]></content>
+      <categories>
+        <category>效率工具</category>
+        <category>VSCode插件</category>
+      </categories>
+      <tags>
+        <tag>VSCode</tag>
+        <tag>ESLint</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Vue基础</title>
+    <url>/2017/08/30/Vue-basic/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近公司技术选型选择了VUE，下面就记录一下在学习Vue中遇到的一些知识点，有些在官方手册里已经讲的很详细了，这里就简单带过，主要对cli产生的以及自行添加的一些项目目录进行一下解释，希望对正在学习Vue的同学提供一点帮助，如果本文有谬误之处还请各位指出，谢谢各位支持。</p>
+<span id="more"></span>
+<h3 id="搭建项目"><a href="#搭建项目" class="headerlink" title="搭建项目"></a>搭建项目</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install --global vue-cli</span><br><span class="line">vue init webpack my-project</span><br><span class="line">cd my-project</span><br><span class="line">npm install（推荐用cnpm install）</span><br><span class="line">如果没有cnpm ，先安装cnpm镜像</span><br><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>
+<h3 id="目录讲解"><a href="#目录讲解" class="headerlink" title="目录讲解"></a>目录讲解</h3><blockquote>
+<ul>
+<li>build和config ：项目开发和打包时候的相关配置；</li>
+<li>node_modules ：项目所需要的依赖文件；</li>
+<li>src ：主应用/页面相关文件；<ul>
+<li>assets ： 静态资源文件；</li>
+<li>components ：组件；</li>
+<li>res：资源<ul>
+<li>css： 公共css或是css预处理文件；</li>
+<li>js：   公共js文件</li>
+<li>img：公共图片</li>
+</ul>
+</li>
+<li>router ：路由配置文件；</li>
+<li>views ： 视图文件，其实也是vue组件。按照业务功能划分模块；</li>
+<li>vuex : 状态管理的配置文件；</li>
+<li>App.vue : 主组件；</li>
+<li>main.js： 入口文件，初始化vue实例并使用需要的插件</li>
+</ul>
+</li>
+<li>index.html ： 主html页面；</li>
+<li>dist：webpack打包生成的文件；</li>
+<li>package.json：记录依赖相关信息</li>
+</ul>
+</blockquote>
+<h3 id="文件的加载顺序"><a href="#文件的加载顺序" class="headerlink" title="文件的加载顺序:"></a>文件的加载顺序:</h3><p>当我们执行命令 <code>npm run dev</code>的时候根据配置文件<code>dev-server.js</code>里的相关配置去加载<code>webpack</code>的相关配置文件 在<code>webpack.base.conf</code>里面<code>entry</code>入口文件就配置了<code>app：&#39;./src/main.js&#39;</code> </p>
+<p>所以当我们在运行<code>npm run dev</code>的时候就开始通过<code>main.js</code>执行了。<code>main.js</code> 初始化vue实例并且加载相关配置插件，然后通过<code>app.vue</code>文件去访问各个组件</p>
+<h3 id="Build-dev-server-js主要完成以下几件事情："><a href="#Build-dev-server-js主要完成以下几件事情：" class="headerlink" title="Build/dev-server.js主要完成以下几件事情："></a>Build/dev-server.js主要完成以下几件事情：</h3><ol>
+<li>检查node和npm的版本；</li>
+<li>引入相关插件和配置；</li>
+<li>创建express服务器和webpack编译器；</li>
+<li>配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）；</li>
+<li>挂载代理服务和中间件；</li>
+<li>配置静态资源；</li>
+<li>启动服务器监听特定端口（8080）；</li>
+<li>自动打开浏览器并打开特定网址（localhost:8080）；</li>
+</ol>
+<h3 id="Build-huild-js主要完成以下几件事情："><a href="#Build-huild-js主要完成以下几件事情：" class="headerlink" title="Build/huild.js主要完成以下几件事情："></a>Build/huild.js主要完成以下几件事情：</h3><ol>
+<li>loading动画；</li>
+<li>删除创建目标文件夹；</li>
+<li>webpack编译；</li>
+<li>输出信息</li>
+</ol>
+<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><h4 id="babelrc"><a href="#babelrc" class="headerlink" title=".babelrc"></a>.babelrc</h4><p>设置转码的规则和插件（使用es6语法必须安装插件）</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install babel-preset-es2015</span><br></pre></td></tr></table></figure>
+
+<p>presets 字段是用来设定转码规则;</p>
+<h4 id="editorconfig"><a href="#editorconfig" class="headerlink" title=".editorconfig"></a>.editorconfig</h4><p>配置文件编码格式的文件</p>
+<ul>
+<li>indent_style:  设置缩进风格，tab或者空格;</li>
+<li>indent_size:  缩进的宽度;</li>
+<li>tab_width:   设置tab的列数。默认是indent_size;</li>
+<li>end_of_line： 换行符，lf、cr和crlf;</li>
+<li>charset：  编码;</li>
+<li>trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符;</li>
+<li>insert_final_newline:   设为true表明使文件以一个空白行结尾;</li>
+<li>root: 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件;</li>
+</ul>
+<h4 id="eslintignore"><a href="#eslintignore" class="headerlink" title=".eslintignore"></a>.eslintignore</h4><p>忽略不符合eslint规范的文件, （一般会忽略掉第三方引用的插件）</p>
+<h4 id="eslintrc-js"><a href="#eslintrc-js" class="headerlink" title=".eslintrc.js"></a>.eslintrc.js</h4><p>定义代码规则</p>
+<h4 id="gitignore"><a href="#gitignore" class="headerlink" title=".gitignore"></a>.gitignore</h4><p>配置文件，用于配置不需要加入版本管理的文件</p>
+<h3 id="VUE-文件解释"><a href="#VUE-文件解释" class="headerlink" title=".VUE 文件解释"></a>.VUE 文件解释</h3><ul>
+<li>template： 展示模板</li>
+<li>import ： 导入组件已经js文件</li>
+<li>export default： <ul>
+<li>data：数据源；</li>
+<li>methods：方法；                </li>
+<li>mounted：页面加载之后执行的方法；    </li>
+<li>created：页面生成时加载的方法；</li>
+</ul>
+</li>
+<li>style：  样式代码  其中scoped表示样式作用范围为本vue文件</li>
+</ul>
+<h3 id="网络访问"><a href="#网络访问" class="headerlink" title="网络访问"></a>网络访问</h3><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><ol>
+<li>发送请求：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">axios#request(config)；</span><br><span class="line">axios#get(url[, config])；</span><br><span class="line">axios#delete(url[, config])；</span><br><span class="line">axios#head(url[, config])；</span><br><span class="line">axios#post(url[, data[, config]])；</span><br><span class="line">axios#put(url[, data[, config]])；</span><br><span class="line">axios#patch(url[, data[, config]])；</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>处理响应：</li>
+</ol>
+<ul>
+<li>Promise语法；</li>
+<li>处理结果：then；</li>
+<li>处理异常：catch；</li>
+</ul>
+<ol start="3">
+<li>拦截器（use/reject）：</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">axios.interceptors.response.use；</span><br><span class="line">axios.interceptors.rquest.use；</span><br><span class="line">reject(移除请求拦截)</span><br></pre></td></tr></table></figure>
+
+<ol start="4">
+<li>参数：</li>
+</ol>
+<ul>
+<li>json（默认）；</li>
+<li>qs；</li>
+</ul>
+<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><ul>
+<li>Prpos：父组件对子组件；</li>
+<li>自定义事件：子组件对父组件；</li>
+<li>消息总线：任意两个组件；</li>
+<li>状态管理：Vuex（适用于大型单页面开发）</li>
+</ul>
+<h3 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h3><ol>
+<li>配置</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &#39;&#x2F;&#39;,</span><br><span class="line">      name: &#39;Hello&#39;,</span><br><span class="line">      component: Hello</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#39;#app&#39;,</span><br><span class="line">  router,</span><br><span class="line">  template: &#39;&lt;App&#x2F;&gt;&#39;,</span><br><span class="line">  components: &#123; App &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>导航</li>
+</ol>
+<ul>
+<li>push</li>
+<li>replace</li>
+<li>go</li>
+</ul>
+<ol start="3">
+<li>参数传递</li>
+</ol>
+<ul>
+<li>RESTful url参数</li>
+<li>参数查询 query</li>
+<li>锚点  hash: ‘#data’</li>
+</ul>
+<ol start="4">
+<li>嵌套路由</li>
+</ol>
+<ul>
+<li>Children</li>
+</ul>
+<ol start="5">
+<li>钩子</li>
+</ol>
+<ul>
+<li>beforeRouteEnter</li>
+<li>beforeRouteLeave</li>
+</ul>
+<h3 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h3><blockquote>
+<p>Vuex是什么？</p>
+<p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
+</blockquote>
+<ul>
+<li>state里面就是存放的我们所要用到的状态；</li>
+<li>mutations就是存放如何更改状态的方法 ，同步操作；</li>
+<li>getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。</li>
+<li>actions就是mutation的加强版，它可以通过commit</li>
+<li>mutations中的方法来改变状态，最重要的是它可以进行异步操作。 </li>
+<li>modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。</li>
+</ul>
+]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>Vue</category>
+      </categories>
+      <tags>
+        <tag>Vue</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</title>
+    <url>/2017/08/30/Vue-VSCode-Snippets/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代化的IDE已经把开发者变得越来越懒，但是我觉得这样挺好的，让工具完成手工反复重复的工作，提高工作效率的同时降低开发者的疲劳感，Vue VSCode Snippets就是这样一个VSC插件，它可以用简单的几个字母就敲出一整块代码片段，在学习和做VUE项目时可以极大地提高工作效率，下面就介绍一下插件的常见命令。</p>
+<span id="more"></span>
+
+<p>此插件可用比较简单的写法生成代码片段，非常适合开发工作，减少代码工作量。</p>
+<p>Script</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vbase</td>
+<td>Single file component base</td>
+</tr>
+<tr>
+<td>vdata</td>
+<td>Component data as a function</td>
+</tr>
+<tr>
+<td>vmethod</td>
+<td>Vue method</td>
+</tr>
+<tr>
+<td>vcomputed</td>
+<td>Vue computed property</td>
+</tr>
+<tr>
+<td>vwatcher</td>
+<td>Vue watcher with new and old value args</td>
+</tr>
+<tr>
+<td>vprops</td>
+<td>Props with type and default</td>
+</tr>
+<tr>
+<td>vimport</td>
+<td>Import one component into another</td>
+</tr>
+<tr>
+<td>vimport-c</td>
+<td>Import one component into another within the export statement</td>
+</tr>
+<tr>
+<td>vimport-export</td>
+<td>Import one component into another and use it within the export statement</td>
+</tr>
+<tr>
+<td>vfilter</td>
+<td>Vue filter</td>
+</tr>
+<tr>
+<td>vmixin</td>
+<td>Create a Vue Mixin</td>
+</tr>
+<tr>
+<td>vmixin-use</td>
+<td>Bring a mixin into a component to use</td>
+</tr>
+<tr>
+<td>vc-direct</td>
+<td>Vue create a custom directive</td>
+</tr>
+<tr>
+<td>vimport-lib</td>
+<td>Import a library</td>
+</tr>
+<tr>
+<td>vimport-gsap</td>
+<td>Import GreenSock with Timeline and Eases</td>
+</tr>
+<tr>
+<td>vanimhook-js</td>
+<td>Using the Transition component JS hooks in methods</td>
+</tr>
+</tbody></table>
+<!-- more -->
+<p>Template</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vfor</td>
+<td>v-for directive</td>
+</tr>
+<tr>
+<td>vmodel</td>
+<td>Semantic v-model directive</td>
+</tr>
+<tr>
+<td>vmodel-num</td>
+<td>Semantic v-model number directive</td>
+</tr>
+<tr>
+<td>von</td>
+<td>v-on click handler with arguments</td>
+</tr>
+<tr>
+<td>vel-props</td>
+<td>Component element with props</td>
+</tr>
+<tr>
+<td>vsrc</td>
+<td>Image src binding</td>
+</tr>
+<tr>
+<td>vstyle</td>
+<td>Inline style binding</td>
+</tr>
+<tr>
+<td>vstyle-obj</td>
+<td>Inline style binding with objects</td>
+</tr>
+<tr>
+<td>vclass</td>
+<td>Class binding</td>
+</tr>
+<tr>
+<td>vclass-obj</td>
+<td>Class binding with objects</td>
+</tr>
+<tr>
+<td>vclass-obj-mult</td>
+<td>Multiple conditional class bindings</td>
+</tr>
+<tr>
+<td>vanim</td>
+<td>Transition component with JS hooks</td>
+</tr>
+</tbody></table>
+<p>Vuex</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>vstore</td>
+<td>Base for Vuex store.js</td>
+</tr>
+<tr>
+<td>vgetters</td>
+<td>Vuex Getter</td>
+</tr>
+<tr>
+<td>vmutation</td>
+<td>Vuex Mutation</td>
+</tr>
+<tr>
+<td>vaction</td>
+<td>Vuex Action</td>
+</tr>
+<tr>
+<td>vstore-import</td>
+<td>Import vuex store into main.js</td>
+</tr>
+</tbody></table>
+<p>Extra (plaintext)</p>
+<table>
+<thead>
+<tr>
+<th>Snippet</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>gitignore</td>
+<td>.gitignore file presets</td>
+</tr>
+<tr>
+<td>vinc</td>
+<td>incrementer</td>
+</tr>
+<tr>
+<td>vdec</td>
+<td>decrementer</td>
+</tr>
+</tbody></table>
+]]></content>
+      <categories>
+        <category>效率工具</category>
+        <category>VSCode插件</category>
+      </categories>
+      <tags>
+        <tag>插件</tag>
+        <tag>Vue</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>vue插件开发（笔记）</title>
+    <url>/2020/02/24/Vue-plug-in-development/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="vue插件开发"><a href="#vue插件开发" class="headerlink" title="vue插件开发"></a>vue插件开发</h1><blockquote>
+<p>Vue.use({install(Vues){}})</p>
+</blockquote>
+<h2 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use"></a>Vue.use</h2><p>把给到的内容执行一下<br>举例</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// a</span></span><br></pre></td></tr></table></figure>
+<p>有 install 就执行 install</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;b&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+<p>再进一步</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">a.install = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="comment">// console.log(&#x27;b&#x27;)</span></span><br><span class="line">	vue.mixin(&#123; <span class="comment">// 抽离公共逻辑 ， 缺点：命名冲突，难以阅读</span></span><br><span class="line">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123; <span class="comment">// data数据少的时候可以不用vuex 用mixin</span></span><br><span class="line">			<span class="keyword">return</span> &#123;</span><br><span class="line">				c:<span class="string">&#x27;this is mixin&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			<span class="comment">// 混入方法</span></span><br><span class="line">			<span class="comment">// 提示性弹窗 原：import 控制 显隐 现在：在根节点引入，通过mixin在方法控制显隐</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 混入生命周期</span></span><br><span class="line">		<span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 所有组件的create生命周期都执行 mixin先执行</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line">Vue.use(a) <span class="comment">// b</span></span><br></pre></td></tr></table></figure>
+
+<p>vue.util.defineReactive()</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">vue.util.defineReactive()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test = &#123;</span><br><span class="line">	testa: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	test.testa = <span class="number">2</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br><span class="line">vue.mixin(&#123;</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.test = test</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>vue.extend vue.util.extend</p>
+<p>vue.util.extend ===&gt; 简单做了个拷贝,拷贝到一起</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">vue.util.extend(a,b)</span><br></pre></td></tr></table></figure>
+<p>vue.extend ===&gt; 获取到某个对象的实例</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> Constrator = vue.extend(obj)</span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Constrator()</span><br></pre></td></tr></table></figure>
+
+<p>手写vue-router</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// myVueRouter.js</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HistoryRoute</span>()</span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.current = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">vueRouter</span></span>&#123;</span><br><span class="line">	<span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="built_in">this</span>.mode = options.mode || <span class="string">&#x27;hash&#x27;</span></span><br><span class="line">		<span class="built_in">this</span>.history = <span class="keyword">new</span> HistoryRoute</span><br><span class="line">		<span class="built_in">this</span>.routes = options.routes||[]</span><br><span class="line">		<span class="built_in">this</span>.routesMap = <span class="built_in">this</span>.createMap(<span class="built_in">this</span>.routes)</span><br><span class="line">		<span class="built_in">this</span>.init()</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">init</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">this</span>.mode == <span class="string">&#x27;hash&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// 自动加上 #</span></span><br><span class="line">			location.hash?<span class="string">&quot;&quot;</span>:location.hash=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;hashchange&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.slice(<span class="number">1</span>)</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			location.pathname?<span class="string">&quot;&quot;</span>:location.pathname=<span class="string">&quot;/&quot;</span></span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="built_in">window</span>.addEventListener(<span class="string">&#x27;popstate&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.history.current = location.hash.pathname</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="function"><span class="title">createMap</span>(<span class="params">router</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> router.reduce(<span class="function">(<span class="params">memo,current</span>)=&gt;</span>&#123;</span><br><span class="line">			memo[current.path] = current.component</span><br><span class="line">		&#125;)			</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">vueRouter.install = <span class="function"><span class="keyword">function</span>(<span class="params">Vue</span>)</span>&#123;</span><br><span class="line">	Vue.mixin(&#123;</span><br><span class="line">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 组件还未实例化好</span></span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">this</span>.$options &amp;&amp; <span class="built_in">this</span>.$options.router)&#123; <span class="comment">// 有配置而且引入路由</span></span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span></span><br><span class="line">				<span class="built_in">this</span>._router = <span class="built_in">this</span>.$option.router</span><br><span class="line"></span><br><span class="line">				Vue.util.defineReactive(<span class="built_in">this</span>,<span class="string">&#x27;current&#x27;</span>,<span class="built_in">this</span>._router.history)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>._root = <span class="built_in">this</span>.$parent._root</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">// 增强健壮性</span></span><br><span class="line">			<span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,<span class="string">&#x27;$route&#x27;</span>,&#123;</span><br><span class="line">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">return</span> <span class="built_in">this</span>._root._router</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	Vue.component(<span class="string">&#x27;router-view&#x27;</span>,&#123;</span><br><span class="line">		<span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">			<span class="comment">// 如何根据当前的current，获取到对应的组件</span></span><br><span class="line">			<span class="keyword">let</span> current = <span class="built_in">this</span>._self._root._router.history.current</span><br><span class="line">			<span class="keyword">let</span> routerMap = <span class="built_in">this</span>._self._root._router.routeMap</span><br><span class="line">			<span class="keyword">return</span> h(routeMap[current])</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>Vue</category>
+      </categories>
+      <tags>
+        <tag>插件</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>重拾java开发技能</title>
+    <url>/2019/12/30/begin-learn-java/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近愈发觉得越想往上走，越不能局限在前端开发的领域，再往上走前后端都是通的，最近在知乎上看到一句话，说是到了架构师甚至专家的层面以后，就没有什么前端架构师或者前端专家和后端架构师、后端专家了，只有前端出身的技术专家，和后端出身的技术专家，越往上越注重人的综合能力，当一个人能够解决一个项目的技术选型、架构等工作后，对于公司或者团队来说，那就是个巨大的宝藏。</p>
+<span id="more"></span>
+
+<h2 id="公司这一年"><a href="#公司这一年" class="headerlink" title="公司这一年"></a>公司这一年</h2><p>最近对于自己的发展有一些迷茫，这一年公司前端的发展可以说是几经转折，我自己呢也一直在摇摆到底是做管理还是做技术，也参加了公司组织的部门经理的答辩，在部门前端的管理工作中也切实的了解到自己在为人处事方面不够圆润。所以目前也算是断了从事管理的念头，更希望能在技术上更进一步，前端目前看来已经不算是我的短板，而我的短板就是只会前端，一直在前端周围打转，其实如果不是看了那篇帖子，以及公司对专家岗位的要求，我可能还会更进一步在前端方向深入研究，但目前看更紧急的应该是补充一下后端的开发知识了，于是上周末开始我就开始了java的学习</p>
+<h2 id="为什么选择java"><a href="#为什么选择java" class="headerlink" title="为什么选择java"></a>为什么选择java</h2><p>为什么选择java作为后端入门，实话讲好多前端开发应该都会问这个问题，明明有更熟悉的nodejs可以作为后端技能进行扩展，我这里的理由是目前大多数公司的包括外面公司的开发人员大都还是以java作为主要语言作为后端编写的选择，另外前端js中好多的设计也是借鉴或者照搬了java中的一些思想，可以说在学习java过程中也会自然而然的提高对js的理解，更重要的是，java相对于其他语言来说资料也更多，上手也更容易，因为这些因素吧，最终我选择了java作为后端的主要学习目标。</p>
+<h2 id="怎么学习java"><a href="#怎么学习java" class="headerlink" title="怎么学习java"></a>怎么学习java</h2><p>java上大学的时候实际有系统的学过的，只是实习之后就再也没有使用过，如今9年过去了，java对于我可能也只剩下些零星的记忆，说实话刚一开始怎么学，从哪里学让我都有点无从下手，这里还要感谢一下我后端的开发伙伴，给了我很多很好的建议，看书的话大都是基础的太基础，实战的又经常忽略基础，最终我打算还是以视频教程2.5倍速快速过一遍java基础，然后再深入学习一下springboot框架，最后再进行实战，以此掌握java开发技能。</p>
+<h3 id="开始学习java"><a href="#开始学习java" class="headerlink" title="开始学习java"></a>开始学习java</h3><p>最终我选择了在B站上看黑马的java基础+实战课程的教学视频，说实话黑马的教学视频还是讲的很仔细的，老师讲的也很有趣，只是一节课10多分钟，只有一个知识点，对于我来说还是有些慢，所以我就开了2.5倍速加快进就这么着看，上周末两天时间，看了130多课，今天的内容记忆不太深刻，趁着不是那么忙又看了30多课，感觉收获还是满满的，接下来的每一天都会看上30课左右，希望自己能在3个月的时间完全上手java开发，相信我可以做到。</p>
+<h2 id="立个Flag"><a href="#立个Flag" class="headerlink" title="立个Flag"></a>立个Flag</h2><p>从今天起，每天都要把自己学习的进度做个总结，看看这一天自己收获了多少，希望30岁这年我重新起步，迈向更高更好的未来。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>杂记随感</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>webpack中loader和plugin之间的区别</title>
+    <url>/2020/01/22/Wepack-Tips/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在学习Webpack相关的知识的时候对loader和plugin有点迷惑，两个特性都是用来做打包相关处理，那么他们有什么区别呢，为了弄清楚他们有什么区别，我开始了疯狂的查找资料，虽说每篇文章都说了一些自己的认识，但是并没有一个特别标准或者说容易理解的答案，我且先将它们记录下来，以便日后回顾之时可以有一些感触。那么接下来我将开始webpack的解迷之旅。</p>
+<a id="more"></a>
+
+<h1 id="背景知识"><a href="#背景知识" class="headerlink" title="背景知识"></a>背景知识</h1><p>在研究loader和plugin之前区别之前，我们先来看看一个webpack配置的常见结构</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">"webpack"</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    app: path.join(__dirname, <span class="string">"../src/js/index.js"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 输出文件</span></span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">"[name].bundle.js"</span>,</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">"dist"</span>),</span><br><span class="line">    publicPath: <span class="string">"/"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.scss/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          <span class="string">"style-loader"</span>,</span><br><span class="line">          <span class="string">"css-loader"</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">      ......</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// plugins配置</span></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// 重新创建html文件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      title: <span class="string">"首页"</span>,</span><br><span class="line">      filename: <span class="string">"index.html"</span>,</span><br><span class="line">      template: path.resolve(__dirname, <span class="string">"../src/index.html"</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    ......</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><strong><em>webpack的打包原理</em></strong></p>
+<ul>
+<li>识别入口文件</li>
+<li>通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)</li>
+<li>webpack做的就是分析代码，转换代码，编译代码，输出代码</li>
+<li>最终形成打包后的代码</li>
+</ul>
+<h2 id="什么是loader"><a href="#什么是loader" class="headerlink" title="什么是loader"></a>什么是loader</h2><p>我们可以看到loader实际上是在module的rules下，用对象的方式表示了需要处理的文件类型，和需要用哪些loader做处理</p>
+<blockquote>
+<p>loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。</p>
+</blockquote>
+<ul>
+<li>处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行</li>
+<li>第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码</li>
+</ul>
+<h2 id="什么是plugin"><a href="#什么是plugin" class="headerlink" title="什么是plugin"></a>什么是plugin</h2><blockquote>
+<p>在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。</p>
+</blockquote>
+<h2 id="loader和plugin的区别"><a href="#loader和plugin的区别" class="headerlink" title="loader和plugin的区别"></a>loader和plugin的区别</h2><p>对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的<strong>文件转换过程</strong></p>
+<p><strong>plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务</strong></p>
+<p>下面我们来看一个例子：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyPlugin</span></span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"MyPlugin constructor:"</span>, options);</span><br><span class="line">  &#125;</span><br><span class="line">  apply(compiler)&#123;</span><br><span class="line">    compiler.plugin(<span class="string">"compilation"</span>, compilation =&gt; &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"MyPlugin"</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = MyPlugin;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// webpack.config.js配置：</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  ...</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MyPlugin(&#123;<span class="attr">param</span>: <span class="string">"my plugin"</span>&#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>使用该plugin后，执行的顺序：</p>
+<ol>
+<li>webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例</li>
+<li>在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件</li>
+<li>并且可以通过compiler对象去操作webpack</li>
+</ol>
+]]></content>
+      <categories>
+        <category>前端工程化</category>
+        <category>Webpack</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>如何正确使用时间[转载]</title>
+    <url>/2020/01/09/career/</url>
+    <content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>人生思考</category>
+      </categories>
+      <tags>
+        <tag>经验之谈</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>浏览器兼容性问题解决方案</title>
+    <url>/2017/08/29/browser-incompatibility-problem-solution/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>作为前端，浏览器就是你的战场，而不同的浏览器就是不同的敌人，敌人有相同之处，也各有特点，这不同的特点就是不同浏览器的兼容性，下面就聊聊浏览器的兼容问题，如何解决不同浏览器的兼容性。</p>
+<span id="more"></span>
+<p><strong>普及</strong>：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。</p>
+<p><strong>贴士</strong>：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。</p>
+<h4 id="Normalize-css"><a href="#Normalize-css" class="headerlink" title="Normalize.css"></a>Normalize.css</h4><p>不同浏览器的默认样式存在差异，可以使用 <code>Normalize.css</code>抹平这些差异。当然，你也可以定制属于自己业务的 <code>reset.css</code></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;link href&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;normalize&#x2F;7.0.0&#x2F;normalize.min.css&quot; rel&#x3D;&quot;stylesheet&quot;&gt;</span><br></pre></td></tr></table></figure>
+<p>简单粗暴法</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">* &#123; margin: 0; padding: 0; &#125;</span><br></pre></td></tr></table></figure>
+<h4 id="html5shiv-js"><a href="#html5shiv-js" class="headerlink" title="html5shiv.js"></a>html5shiv.js</h4><p>解决 ie9 以下浏览器对 html5 新增标签不识别的问题。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!--[if lt IE 9]&gt;</span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot; src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;html5shiv&#x2F;3.7.3&#x2F;html5shiv.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;![endif]--&gt;</span><br></pre></td></tr></table></figure>
+<!-- more -->
+<h4 id="respond-js"><a href="#respond-js" class="headerlink" title="respond.js"></a>respond.js</h4><p>解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;picturefill&#x2F;3.0.3&#x2F;picturefill.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="IE-条件注释"><a href="#IE-条件注释" class="headerlink" title="IE 条件注释"></a>IE 条件注释</h4><p>IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/31714eaf3a9bc272c50dbf1e1279f14b?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="IE-属性过滤器（较为常用的hack方法）"><a href="#IE-属性过滤器（较为常用的hack方法）" class="headerlink" title="IE 属性过滤器（较为常用的hack方法）"></a>IE 属性过滤器（较为常用的hack方法）</h4><p>针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/e8c1a14cca725798b5aaa88bf5d23de8?imageView2/0/w/1280/h/960" alt="image"><br><img src="https://user-gold-cdn.xitu.io/2017/8/28/ad406608b75744baa6f89ae3c26ba69d?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="浏览器-CSS-兼容前缀"><a href="#浏览器-CSS-兼容前缀" class="headerlink" title="浏览器 CSS 兼容前缀"></a>浏览器 CSS 兼容前缀</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">-o-transform:rotate(7deg); &#x2F;&#x2F; Opera</span><br><span class="line"></span><br><span class="line">-ms-transform:rotate(7deg); &#x2F;&#x2F; IE</span><br><span class="line"></span><br><span class="line">-moz-transform:rotate(7deg); &#x2F;&#x2F; Firefox</span><br><span class="line"></span><br><span class="line">-webkit-transform:rotate(7deg); &#x2F;&#x2F; Chrome</span><br><span class="line"></span><br><span class="line">transform:rotate(7deg); &#x2F;&#x2F; 统一标识语句</span><br></pre></td></tr></table></figure>
+<p><em><strong>补充：</strong></em> 目前可以采用自动化插件完成，插件名称叫做 <code>Autoprefixer</code>，他可以解析css文件并且添加前缀到css内容里。</p>
+<p>把 <code>Auroprefixer</code> 添加到资源构建工具如：<code>webpack</code>后，就可以不用再手动补全浏览器前缀了，这里只需要你按照W3C的标准来书写css代码，剩下的工作就交给插件完成，目前<code>webpack</code>、<code>gulp</code>、<code>grunt</code>都有相应的插件，是不是开心啊。</p>
+<h4 id="a-标签的几种-CSS-状态的顺序"><a href="#a-标签的几种-CSS-状态的顺序" class="headerlink" title="a 标签的几种 CSS 状态的顺序"></a>a 标签的几种 CSS 状态的顺序</h4><p>很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。</p>
+<p>正确的a标签顺序应该是：<code>==love hate==</code></p>
+<ol>
+<li>link:平常的状态</li>
+<li>visited:被访问过之后</li>
+<li>hover:鼠标放到链接上的时候</li>
+<li>active:链接被按下的时候</li>
+</ol>
+<h4 id="完美解决-Placeholder"><a href="#完美解决-Placeholder" class="headerlink" title="完美解决 Placeholder"></a>完美解决 <code>Placeholder</code></h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; value&#x3D;&quot;Name *&quot; onFocus&#x3D;&quot;this.value &#x3D; &#39;&#39;;&quot; onBlur&#x3D;&quot;if (this.value &#x3D;&#x3D; &#39;&#39;) &#123;this.value &#x3D; &#39;Name *&#39;;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
+
+<h4 id="清除浮动-最佳实践"><a href="#清除浮动-最佳实践" class="headerlink" title="清除浮动 最佳实践"></a>清除浮动 最佳实践</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.fl &#123; float: left; &#125;</span><br><span class="line">.fr &#123; float: right; &#125;</span><br><span class="line">.clearfix:after &#123; display: block; clear: both; content: &quot;&quot;; visibility: hidden; height: 0; &#125;</span><br><span class="line">.clearfix &#123; zoom: 1; &#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="BFC-解决边距重叠问题"><a href="#BFC-解决边距重叠问题" class="headerlink" title="BFC 解决边距重叠问题"></a>BFC 解决边距重叠问题</h4><p>当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：<code>overflow: hidden</code>;</p>
+<div class="box" id="box">
+  <p>Lorem ipsum dolor sit.</p>
+
+  <div style="overflow: hidden;">
+    <p>Lorem ipsum dolor sit.</p>
+  </div>
+
+  <p>Lorem ipsum dolor sit.</p>
+</div>
+
+<h4 id="IE6-双倍边距的问题"><a href="#IE6-双倍边距的问题" class="headerlink" title="IE6 双倍边距的问题"></a>IE6 双倍边距的问题</h4><p>设置 ie6 中设置浮动，同时又设置 <code>margin</code>，会出现双倍边距的问题</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">display: inline;</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE9-以下浏览器不能使用-opacity"><a href="#解决-IE9-以下浏览器不能使用-opacity" class="headerlink" title="解决 IE9 以下浏览器不能使用 opacity"></a>解决 IE9 以下浏览器不能使用 opacity</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">opacity: 0.5;</span><br><span class="line">filter: alpha(opacity &#x3D; 50);</span><br><span class="line">filter: progid:DXImageTransform.Microsoft.Alpha(style &#x3D; 0, opacity &#x3D; 50);</span><br></pre></td></tr></table></figure>
+<h4 id="解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"><a href="#解决-IE6-不支持-fixed-绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题" class="headerlink" title="解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题"></a>解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;* IE6 hack *&#x2F;</span><br><span class="line">*html, *html body &#123;</span><br><span class="line">  background-image: url(about:blank);</span><br><span class="line">  background-attachment: fixed;</span><br><span class="line">&#125;</span><br><span class="line">*html #menu &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: expression(((e&#x3D;document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + &#39;px&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-背景闪烁的问题"><a href="#IE6-背景闪烁的问题" class="headerlink" title="IE6 背景闪烁的问题"></a>IE6 背景闪烁的问题</h4><p>问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载</p>
+<p>解决：可以用 JavaScript 设置 ie6 缓存这些图片：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.execCommand(&quot;BackgroundImageCache&quot;, false, true);</span><br></pre></td></tr></table></figure>
+<h4 id="解决在-IE6-下，列表与日期错位的问题"><a href="#解决在-IE6-下，列表与日期错位的问题" class="headerlink" title="解决在 IE6 下，列表与日期错位的问题"></a>解决在 IE6 下，列表与日期错位的问题</h4><p>日期<span> 标签放在标题 <a> 标签之前即可<br><img src="https://user-gold-cdn.xitu.io/2017/8/28/6797c276197029d941ee577d877d6be3?imageView2/0/w/1280/h/960" alt="image"></p>
+<h4 id="解决-IE6-不支持-min-height-属性的问题"><a href="#解决-IE6-不支持-min-height-属性的问题" class="headerlink" title="解决 IE6 不支持 min-height 属性的问题"></a>解决 IE6 不支持 min-height 属性的问题</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">min-height: 350px;</span><br><span class="line">_height: 350px;</span><br></pre></td></tr></table></figure>
+
+<h4 id="让-IE7-IE8-支持-CSS3-background-size属性"><a href="#让-IE7-IE8-支持-CSS3-background-size属性" class="headerlink" title="让 IE7 IE8 支持 CSS3 background-size属性"></a>让 IE7 IE8 支持 CSS3 background-size属性</h4><p>由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">html &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">body &#123;</span><br><span class="line">  height: 100%;</span><br><span class="line">  margin: 0;</span><br><span class="line">  padding: 0;</span><br><span class="line">  background-image: url(&#39;img&#x2F;37.png&#39;);</span><br><span class="line">  background-repeat: no-repeat;</span><br><span class="line">  background-size: cover;</span><br><span class="line">  -ms-behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">  behavior: url(&#39;css&#x2F;backgroundsize.min.htc&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="IE6-7-line-height-失效的问题"><a href="#IE6-7-line-height-失效的问题" class="headerlink" title="IE6-7 line-height 失效的问题"></a>IE6-7 line-height 失效的问题</h4><p>问题：在ie 中 img 与文字放一起时，line-height 不起作用</p>
+<p>解决：都设置成 float</p>
+<h4 id="td-自动换行的问题"><a href="#td-自动换行的问题" class="headerlink" title="td 自动换行的问题"></a>td 自动换行的问题</h4><p>问题：table 宽度固定，td 自动换行</p>
+<p>解决：设置 <code>Tabl</code>e 为 <code>table-layout: fixed</code>，<code>td</code> 为 <code>word-wrap: break-word</code></p>
+<h4 id="让层显示在-FLASH-之上"><a href="#让层显示在-FLASH-之上" class="headerlink" title="让层显示在 FLASH 之上"></a>让层显示在 FLASH 之上</h4><p>想让层的内容显示在 flash 上，把 FLASH 设置透明即可</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1、&lt;param name&#x3D;&quot; wmode &quot; value&#x3D;&quot;transparent&quot; &#x2F;&gt;</span><br><span class="line">2、&lt;param name&#x3D;&quot;wmode&quot; value&#x3D;&quot;opaque&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>
+<h4 id="键盘事件-keyCode-兼容性写法"><a href="#键盘事件-keyCode-兼容性写法" class="headerlink" title="键盘事件 keyCode 兼容性写法"></a>键盘事件 keyCode 兼容性写法</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var inp &#x3D; document.getElementById(&#39;inp&#39;)</span><br><span class="line">var result &#x3D; document.getElementById(&#39;result&#39;)</span><br><span class="line"></span><br><span class="line">function getKeyCode(e) &#123;</span><br><span class="line">  e &#x3D; e ? e : (window.event ? window.event : &quot;&quot;)</span><br><span class="line">  return e.keyCode ? e.keyCode : e.which</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">inp.onkeypress &#x3D; function(e) &#123;</span><br><span class="line">  result.innerHTML &#x3D; getKeyCode(e)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="求窗口大小的兼容写法"><a href="#求窗口大小的兼容写法" class="headerlink" title="求窗口大小的兼容写法"></a>求窗口大小的兼容写法</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 525</span><br><span class="line">var client_w &#x3D; document.documentElement.clientWidth || document.body.clientWidth;</span><br><span class="line">var client_h &#x3D; document.documentElement.clientHeight || document.body.clientHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高（包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var scroll_w &#x3D; document.documentElement.scrollWidth || document.body.scrollWidth;</span><br><span class="line">var scroll_h &#x3D; document.documentElement.scrollHeight || document.body.scrollHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 网页内容实际宽高 (不包括工具栏和滚动条等边线）</span><br><span class="line">&#x2F;&#x2F; 1600 * 8</span><br><span class="line">var offset_w &#x3D; document.documentElement.offsetWidth || document.body.offsetWidth;</span><br><span class="line">var offset_h &#x3D; document.documentElement.offsetHeight || document.body.offsetHeight;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 滚动的高度</span><br><span class="line">var scroll_Top &#x3D; document.documentElement.scrollTop||document.body.scrollTop;</span><br></pre></td></tr></table></figure>
+<h4 id="DOM-事件处理程序的兼容写法（能力检测）"><a href="#DOM-事件处理程序的兼容写法（能力检测）" class="headerlink" title="DOM 事件处理程序的兼容写法（能力检测）"></a>DOM 事件处理程序的兼容写法（能力检测）</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var eventshiv &#x3D; &#123;</span><br><span class="line">    &#x2F;&#x2F; event兼容</span><br><span class="line">    getEvent: function(event) &#123;</span><br><span class="line">        return event ? event : window.event;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; type兼容</span><br><span class="line">    getType: function(event) &#123;</span><br><span class="line">        return event.type;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; target兼容</span><br><span class="line">    getTarget: function(event) &#123;</span><br><span class="line">        return event.target ? event.target : event.srcelem;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件句柄</span><br><span class="line">    addHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.addEventListener) &#123;</span><br><span class="line">            elem.addEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.attachEvent) &#123;</span><br><span class="line">            elem.attachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            &#x2F;&#x2F; 在这里由于.与&#39;on&#39;字符串不能链接，只能用 []</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; listener;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 移除事件句柄</span><br><span class="line">    removeHandler: function(elem, type, listener) &#123;</span><br><span class="line">        if (elem.removeEventListener) &#123;</span><br><span class="line">            elem.removeEventListener(type, listener, false);</span><br><span class="line">        &#125; else if (elem.detachEvent) &#123;</span><br><span class="line">            elem.detachEvent(&#39;on&#39; + type, listener);</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            elem[&#39;on&#39; + type] &#x3D; null;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 添加事件代理</span><br><span class="line">    addAgent: function (elem, type, agent, listener) &#123;</span><br><span class="line">        elem.addEventListener(type, function (e) &#123;</span><br><span class="line">            if (e.target.matches(agent)) &#123;</span><br><span class="line">                listener.call(e.target, e); &#x2F;&#x2F; this 指向 e.target</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 取消默认行为</span><br><span class="line">    preventDefault: function(event) &#123;</span><br><span class="line">        if (event.preventDefault) &#123;</span><br><span class="line">            event.preventDefault();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.returnValue &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 阻止事件冒泡</span><br><span class="line">    stopPropagation: function(event) &#123;</span><br><span class="line">        if (event.stopPropagation) &#123;</span><br><span class="line">            event.stopPropagation();</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            event.cancelBubble &#x3D; true;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>兼容性</category>
+      </categories>
+      <tags>
+        <tag>兼容性问题</tag>
+        <tag>CSS</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>使用node开发自定义cli工具</title>
+    <url>/2020/02/19/develop-custom-cli-tools-using-node/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这篇文章想写一写前端工程化相关的内容，原因一呢是是结合公司业务给自己定的业绩指标包含这些内容，另外一个原因是因为听了网易前端唐磊说过的一句话，前端leader干什么，很重要的工作就是前端工程化，高级以上不懂前端工程化很难。</p>
+<p>今天听了公开课讲到了用node写一个自己的cli，说实话正是工作所需，课程讲的有点快，没有从头跟下来，自己上完了课又上网上找了些资料，终于把步骤弄明白了，下面就把如何自定义一个cli来帮助提升开发效率。同时也完成了一个业务指标，心里美滋滋。</p>
+<h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><p>如果你看到这篇文章，也想跟着我的步骤写一下这个自定义cli，那么如下的知识还是有一些为好。</p>
+<ul>
+<li>基础的nodejs相关知识</li>
+</ul>
+<p>没错就只需要会一些node的基础知识就可以了，接下来正式开始</p>
+<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><p>首先，我们要给我们的命令行工具起个名字，比如我们熟悉的 vue 命令行就是 vue-cli ，因为我写完了要给公司用，所以我起的名字是 tfd-cli ，你们喜欢叫什么你们随意</p>
+<p>首先创建一个名字为 <code>tfd-cli</code> 的文件目录，然后在目录下执行 <code>node</code> 工程的初始化命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm init -y <span class="comment">// 初始化项目 -y 默认全部yes的参数</span></span><br></pre></td></tr></table></figure>
+<p>命令执行完成后 <code>tfd-cli</code> 目录下会生成一个我们熟悉的 <code>package.json</code> 文件，我们打开 <code>package.json</code> 文件，增加一段代码，如下</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 追加的代码</span></span><br><span class="line">"bin": &#123;</span><br><span class="line">	"tfd": "index.js"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>追加完成后，<code>package.json</code> 文件中的内容是这样的</p>
+<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"bin"</span>: &#123;</span><br><span class="line">    <span class="attr">"tfd"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>也就是说当我们执行 <code>tfd</code> 命令时它就会找同级目录下的 <code>index.js</code> 文件执行其中代码，我们目前还没有 <code>index.js</code>，文件，那么我们手动创建一个 <code>index.js</code> 的文件，然后在里面写下如下代码</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</span><br></pre></td></tr></table></figure>
+<p>执行完这些还不够，因为我们是开发环境所以还有一步操作是要将 <code>tfd</code> 命令告知 <code>npm</code>，该如何处理，所以我们要执行如下命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm link</span><br></pre></td></tr></table></figure>
+<p>这里如果执行不成功，请用管理员权限执行，执行完成后我们会得到一个 <code>package-lock.json</code> 的文件，内容如下</p>
+<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"tfd-cli"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"lockfileVersion"</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如此一来，我们就可以在任何目录下执行命令行 <code>tfd</code> 就会执行 <code>index.js</code> 文件了，这里我们会在控制面板中输出 <code>hello world</code> ，怎么样是不是小有成就感，我们接着往下来。</p>
+<h1 id="创建指令"><a href="#创建指令" class="headerlink" title="创建指令"></a>创建指令</h1><p>我们写个命令行工具肯定不是为了输出个 <code>hello world</code> 这么简单，而是希望通过用户输入内容后根据条件输出一些东西，那么让我们想想一个命令行工具应该具备哪些指令呢？</p>
+<ul>
+<li>查看命令行工具版本</li>
+<li>查看帮助文档</li>
+<li>初始化模板</li>
+<li>列出模板类型</li>
+<li>等等</li>
+</ul>
+<p>那么用指令该如何描述呢</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line">tfd -V|--version //查看工具版本号</span><br><span class="line">tfd -h|--help //查看使用帮助</span><br><span class="line">tfd init &lt;template-name&gt; &lt;project-name&gt; //基于指定模板进行项目初始化</span><br><span class="line">tfd list //列出所有可用模板</span><br></pre></td></tr></table></figure>
+<p>为了执行命令，这里我们要引入一个 <code>node</code> 包叫做 <code>commander</code>，因此我们要先执行一下 <code>install</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install commander</span><br></pre></td></tr></table></figure>
+<p>接着我们就可以在 <code>index.js</code> 里面写指令了。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br></pre></td></tr></table></figure>
+<p>到这一步我们在控制台敲一下 <code>tfd -V</code> 你会发现什么也没输出，这是因为到这一步我们还无法解析 <code>tfd -V</code> 操作，在这之前我们要知道一个命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">process.argv <span class="comment">// 使用process.argv获取命令行参数</span></span><br></pre></td></tr></table></figure>
+<p>当我们把这句话加到 <code>console.log</code> 中在 <code>index.js</code> 中输出时你会看到控制台打印出</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="built_in">console</span>.log(process.argv)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line">[ <span class="string">'/usr/local/bin/node'</span>, <span class="string">'/usr/local/bin/tfd'</span>, <span class="string">'-V'</span> ]</span><br></pre></td></tr></table></figure>
+<p>接下来我们要让<code>commander</code>获取参数执行命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们再在控制台输入 <code>tfd -V</code> 时，我们就会发现，控制台输出了 <code>0.1.0</code>，这样我们就完成了查版本的指令，接下来我们完成其他的指令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(templateName, projectName);</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`</span></span><br><span class="line"><span class="string">          a   a模板</span></span><br><span class="line"><span class="string">          b   b模板</span></span><br><span class="line"><span class="string">          c   c模板</span></span><br><span class="line"><span class="string">      `</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这个时候我们在控制台上输入 <code>tfd -h</code> 的时候，控制台会输出如下代码</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Usage: tfd [options] [command]</span><br><span class="line"></span><br><span class="line">Options:</span><br><span class="line">  -V, --version              output the version number</span><br><span class="line">  -h, --help                 output usage information</span><br><span class="line"></span><br><span class="line">Commands:</span><br><span class="line">  init &lt;template&gt; <span class="xml"><span class="tag">&lt;<span class="name">project</span>&gt;</span>  初始化项目模板</span></span><br><span class="line"><span class="xml">  list                       查看所有可用模板</span></span><br></pre></td></tr></table></figure>
+<p>这样我们就实现了自定义命令，我们执行一下 <code>tfd init template1 project1</code>，我们可以看到，控制台中输出了 <code>template1 project1</code>，也就是说<code>command</code>命令后尖括号中指向了<code>action</code>中的参数，我们就可以通过判断<code>action</code>中的参数做具体的操作了。</p>
+<p>通常模板可以选择从本地拷贝一份，但更常用的是从线上拷贝一份，比如从<code>github</code>中，接下来我们就看看如何从<code>github</code>中拷贝一个模板作为项目的初始化工程</p>
+<h2 id="github上创建模板仓库"><a href="#github上创建模板仓库" class="headerlink" title="github上创建模板仓库"></a>github上创建模板仓库</h2><p>首先我们要在github上创建两个仓库 <code>tpl-1</code> <code>tpl-2</code>，这里为了从<code>github</code>中下载仓库我们需要一个<code>node</code>包支持，让我们请出<code>download-git-repo</code>，别忘了执行安装命令</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install download-git-repo</span><br></pre></td></tr></table></figure>
+<p>安装完依赖之后让我们再去<code>index.js</code>填点东西，首先引入下载依赖，然后是创建下载的 <code>template</code> 抽象对象</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];        </span><br><span class="line">        <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载失败'</span>);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'模板下载成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+<p>这样当我们执行 <code>tfd list</code> 就可以看到有哪些模板了，然后执行<code>tfd init tpl-1 newproject</code> 就可以依据 <code>tpl-1</code> 模板创建出 <code>newproject</code> 工程，这个过程实际上就是从<code>github</code>仓库克隆一份<code>tpl-1</code>作为模板创建工程<code>newproject</code></p>
+<p><strong><em>这里需要注意的是download地址跟github仓库地址有点出入，比如github仓库地址是<a href="https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx" target="_blank" rel="noopener">https://github.com/xxx/xxx而下载地址是https://github.com:xxx/xxx</a></em></strong></p>
+<p>虽然这样执行完成后就完成了基本的cli的雏形，但是毕竟不灵活，我们在使用<code>vue-cli</code>时，它的创建过程是问答式和选择式的，另外每个过程都会有进度显示什么的，那么要怎么添加这些功能呢，我们接着往下做。</p>
+<h2 id="进阶增加功能"><a href="#进阶增加功能" class="headerlink" title="进阶增加功能"></a>进阶增加功能</h2><h3 id="使用inquirer进行命令行答询"><a href="#使用inquirer进行命令行答询" class="headerlink" title="使用inquirer进行命令行答询"></a>使用<code>inquirer</code>进行命令行答询</h3><p><code>inquirer</code> 是一个进行命令行答询的库，通过它我们就可以创建问答式的内容，首先还是安装依赖</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install inquirer</span><br></pre></td></tr></table></figure>
+<h3 id="使用handlebars修改package-json"><a href="#使用handlebars修改package-json" class="headerlink" title="使用handlebars修改package.json"></a>使用handlebars修改package.json</h3><p>我们都知道在使用<code>vue-cli</code>的初始化命令后，会在项目目录下生成一个<code>package.json</code>文件，它就像是这个项目的基因序列一样，影响着项目的整个结构。模板是固定的，那要修改其中的<code>package.json</code>符合自己项目的需要，就要用到<code>handlebars</code>这个库来改写<code>package.json</code>文件，老规矩先安装它</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install handlebars</span><br></pre></td></tr></table></figure>
+<h3 id="使用ora在命令行中显示加载状态"><a href="#使用ora在命令行中显示加载状态" class="headerlink" title="使用ora在命令行中显示加载状态"></a>使用ora在命令行中显示加载状态</h3><p>我们在装任何依赖时都会有进度条显示进度，如果没有进度条又没有任何响应，会让用户迷茫，为了友好，我们就要加进度条，这里我们需要引入<code>ora</code>这个库来完成进度显示，我们接着安装。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install ora</span><br></pre></td></tr></table></figure>
+<h3 id="使用chalk和log-symbols增加命令行输出样式"><a href="#使用chalk和log-symbols增加命令行输出样式" class="headerlink" title="使用chalk和log-symbols增加命令行输出样式"></a>使用chalk和log-symbols增加命令行输出样式</h3><p>为了让命令行有红红绿绿的效果以及符号效果，我们需要使用<code>chalk</code>和<code>log-symbols</code>来丰富样式，少废话，接着装</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install chalk log-symbols</span><br></pre></td></tr></table></figure>
+
+<h3 id="集大成"><a href="#集大成" class="headerlink" title="集大成"></a>集大成</h3><p>终于安装完一堆的依赖，别忘了在<code>index.js</code>中引入，让我们看看具体如何使用这些库吧。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"><span class="comment">//使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的</span></span><br><span class="line"><span class="keyword">const</span> cmd = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iq = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">// 命令行答询</span></span><br><span class="line"><span class="keyword">const</span> hb = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">// 修改package.json文件</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">// 命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">// 命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> ls = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">// 命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">// node fs原生模块</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'tpl-1'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-1'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-1#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板1'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'tpl-2'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://github.com/lixuguang/tpl-2'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://github.com:lixuguang/tpl-2#master'</span>,</span><br><span class="line">        description: <span class="string">'tfd-cli脚手架测试模板2'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd -V|--version</span></span><br><span class="line">cmd.version(<span class="string">'0.1.0'</span>);  <span class="comment">// -V|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tfd init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>) <span class="comment">// 参数</span></span><br><span class="line">  .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">  .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// console.log(templateName, projectName);</span></span><br><span class="line">      <span class="keyword">let</span> &#123;downloadUrl&#125; = templates[templateName];   </span><br><span class="line">      <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">      <span class="keyword">const</span> loading = ora(<span class="string">'模板下载中...'</span>).start();      </span><br><span class="line">      <span class="comment">// 第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">      download(downloadUrl, projectName, &#123;<span class="attr">clone</span>: <span class="literal">true</span>&#125;, err =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(err)&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载失败');</span></span><br><span class="line">              loading.fail(<span class="string">'模板下载失败'</span>);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">              <span class="comment">// console.log('模板下载成功');</span></span><br><span class="line">              spinner.succeed(<span class="string">'模板下载成功'</span>);</span><br><span class="line">              <span class="comment">// 命令行答询</span></span><br><span class="line">              iq.prompt([</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>, <span class="comment">// 类型 输入框</span></span><br><span class="line">                    name: <span class="string">'name'</span>, <span class="comment">// 字段 key</span></span><br><span class="line">                    message: <span class="string">'请输入项目名称'</span>, <span class="comment">// 描述</span></span><br><span class="line">                    <span class="keyword">default</span>: projectName <span class="comment">// 默认值</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'description'</span>,</span><br><span class="line">                    message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    type: <span class="string">'input'</span>,</span><br><span class="line">                    name: <span class="string">'author'</span>,</span><br><span class="line">                    message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                    <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123; <span class="comment">// answers 是一个对象，对象的 key 为上面答询的 name 的值，value 为 用户输入的值，如果未输入，就取默认值</span></span><br><span class="line">                <span class="comment">// 根据命令行答询结果修改 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>); <span class="comment">// 同步方式以 utf-8 字符集获得下载好的项目目录下的 package.json 文件</span></span><br><span class="line">                <span class="keyword">let</span> packageResult = hb.compile(packageContent)(answers); <span class="comment">// 将用户输入项与原内容混合获得新内容</span></span><br><span class="line">                fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult); <span class="comment">// 重新同步方式写入到 package.json 文件中</span></span><br><span class="line">                <span class="comment">// 用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                <span class="built_in">console</span>.log(ls.success, chalk.green(<span class="string">'模板项目文件准备成功！'</span>));</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// tfd list</span></span><br><span class="line">cmd</span><br><span class="line">  .command(<span class="string">'list'</span>)</span><br><span class="line">  .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">  .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(`</span></span><br><span class="line">    <span class="comment">//       a   a模板</span></span><br><span class="line">    <span class="comment">//       b   b模板</span></span><br><span class="line">    <span class="comment">//       c   c模板</span></span><br><span class="line">    <span class="comment">//   `)</span></span><br><span class="line">    <span class="comment">// 通过获取templates里的key可以获取到模板名称</span></span><br><span class="line">    <span class="keyword">const</span> templateName = <span class="built_in">Object</span>.keys(templates)</span><br><span class="line">    <span class="built_in">console</span>.log(templateName)</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="comment">// console.log(process.argv)</span></span><br><span class="line">cmd.parse(process.argv);</span><br></pre></td></tr></table></figure>
+
+<p>到这里你自己的命令行工具就创建完成了，当然还可以继续丰富，比如加上选择条件等，这个就更复杂了，不在本文中展开，后续会继续改进这个命令行工具，当然如果要将自己的命令行工具给其他人用当然要先发布出去，就像我们要用<code>vue-cli</code>，首先要在<code>npm</code>上下载下来，同样的我们要想让别人用，就得先上传到<code>npm</code>上。</p>
+<h1 id="发布到npm上"><a href="#发布到npm上" class="headerlink" title="发布到npm上"></a>发布到npm上</h1><p>首先你需要有一个npm的账号，没有赶快去注册一个，在控制台中输入<code>npm login</code>，它会让你依次输入 <code>Username</code> <code>Password</code> <code>Email</code> ，当你都按照要求输入完之后，成功的话你会获得如下信息<code>Logged in as XXX on https://registry.npm.org/.</code>，再接下来执行 <code>npm publish</code> 命令，你的自定义脚手架就会发布到<code>npm</code>上，供他人下载使用，怎么样，学会了么？</p>
+<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>这篇文章会有后续持续进化跟进，多篇文章连续，只要我的cli工具还在进化，文章就会继续，欢迎跟进。</p>
+]]></content>
+      <categories>
+        <category>前端工程化</category>
+      </categories>
+      <tags>
+        <tag>脚手架</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- async、await</title>
+    <url>/2020/03/24/do-it-yourselfery-async-await/</url>
+    <content><![CDATA[<h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>就是利用 <code>generator</code> （生成器）分割代码片段。然后我们使用一个函数让其自迭代，每一个 <code>yield</code> 用 <code>promise</code> 包裹起来。执行下一步的时机由 <code>promise</code> 来控制</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_asyncToGenerator</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>, args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; <span class="comment">// 将返回值 promise 化</span></span><br><span class="line">      <span class="keyword">var</span> gen = fn.apply(self, args); <span class="comment">// 获取迭代器实例</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_next</span>(<span class="params">value</span>) </span>&#123; <span class="comment">// 执行下一步</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'next'</span>, value);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">_throw</span>(<span class="params">err</span>) </span>&#123; <span class="comment">// 抛出异常</span></span><br><span class="line">        asyncGeneratorStep(gen, resolve, reject, _next, _throw, <span class="string">'throw'</span>, err);</span><br><span class="line">      &#125;</span><br><span class="line">      _next(<span class="literal">undefined</span>); <span class="comment">// 第一次触发</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- EventEmitter(事件触发器)</title>
+    <url>/2020/03/24/do-it-yourselfery-EventEmitter/</url>
+    <content><![CDATA[<h1 id="实现一个-EventEmitter"><a href="#实现一个-EventEmitter" class="headerlink" title="实现一个 EventEmitter"></a>实现一个 <code>EventEmitter</code></h1><ol>
+<li>创建一个 <code>Event</code> 类，包含<strong><em>构造函数、绑定、解绑、触发</em></strong>方法</li>
+<li><code>on</code> 监听event事件，事件触发时调用fn函数。根据字典创建事件数组，如果事件处理不存在，那么就推入数组，反之返回原数组</li>
+<li><code>off</code> 从字典中获取当前事件数组，如果获取值是数组，那么判断解绑哪个事件，如果没填清空全部（数组长度置为零），否则从事件数组删除选择的事件</li>
+<li><code>emit</code> 触发event事件，并把参数arg1,arg2,arg3….传给事件处理函数，跟解绑外层判断一样，内层把删除改为执行即可</li>
+<li><code>once</code> 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Event</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> () &#123;</span><br><span class="line">    <span class="comment">// 储存事件的数据结构</span></span><br><span class="line">    <span class="comment">// 为查找迅速， 使用对象（字典）</span></span><br><span class="line">    <span class="keyword">this</span>._cache = &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 绑定</span></span><br><span class="line">  on(event, callback) &#123;</span><br><span class="line">    <span class="comment">// 为了按类查找方便和节省空间</span></span><br><span class="line">    <span class="comment">// 将同一类型事件放到一个数组中</span></span><br><span class="line">    <span class="comment">// 这里的数组是队列， 遵循先进先出</span></span><br><span class="line">    <span class="comment">// 即新绑定的事件先触发</span></span><br><span class="line">    <span class="keyword">let</span> fns = (<span class="keyword">this</span>._cache[event] = <span class="keyword">this</span>._cache[event] || [])</span><br><span class="line">    <span class="keyword">if</span>(fns.indexOf(callback) === <span class="number">-1</span>) &#123;</span><br><span class="line">      fns.push(callback)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 解绑</span></span><br><span class="line">  off (event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      <span class="keyword">if</span>(callback) &#123;</span><br><span class="line">        <span class="keyword">let</span> index = fns.indexOf(callback)</span><br><span class="line">        <span class="keyword">if</span>(index !== <span class="number">-1</span>) &#123;</span><br><span class="line">          fns.splice(index, <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 全部清空</span></span><br><span class="line">        fns.length = <span class="number">0</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 触发emit</span></span><br><span class="line">  emit(event, ...args) &#123;</span><br><span class="line">    <span class="keyword">let</span> fns = <span class="keyword">this</span>._cache[event]</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(fns)) &#123;</span><br><span class="line">      fns.forEach(<span class="function">(<span class="params">fn</span>) =&gt;</span> &#123;</span><br><span class="line">        fn(...args)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 一次性绑定</span></span><br><span class="line">  once(event, callback) &#123;</span><br><span class="line">    <span class="keyword">let</span> onceCallback = <span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="comment">// 定义一个只执行一次就解绑的方法</span></span><br><span class="line">      callback.call(<span class="keyword">this</span>); <span class="comment">// 使用call改变this指向</span></span><br><span class="line">      <span class="keyword">this</span>.off(event, onceCallback); <span class="comment">// 解绑</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.on(event, onceCallback); <span class="comment">// 绑定</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>好的接下来我们调用一下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> e = <span class="keyword">new</span> Event()</span><br><span class="line"></span><br><span class="line">e.on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'on'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// e.trigger('click', '666')</span></span><br><span class="line"><span class="built_in">console</span>.log(e)</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- call、apply、bind</title>
+    <url>/2020/03/24/do-it-yourselfery-call-apply/</url>
+    <content><![CDATA[<h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><p>先来看一个call实例，看看call到底做了什么：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">&#125;</span><br><span class="line">bar.call(foo); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
+<p>从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。<br>总结一下：</p>
+<ul>
+<li>call改变函数this指向</li>
+<li>调用函数</li>
+</ul>
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><ol>
+<li>首先我们对参数 <code>context</code> 做了兼容处理，不传值， <code>context</code> 默认值为 <code>window</code> ；</li>
+<li>然后我们将函数挂载到 <code>context</code> 上面, <code>context.fn = this</code> ；</li>
+<li>处理参数，将传入 <code>myCall</code> 的参数截取，去除第一位，然后转为数组；</li>
+<li>调用 <code>context.fn</code> ，此时 <code>fn</code> 的 <code>this</code> 指向 <code>context</code> ；</li>
+<li>删除对象上的属性 <code>delete context.fn</code> ；</li>
+<li>将结果返回。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span>;</span><br><span class="line">  context.fn = <span class="keyword">this</span>; <span class="comment">// 将函数挂载到对象的fn属性上</span></span><br><span class="line">  <span class="keyword">const</span> args = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 处理传入的参数</span></span><br><span class="line">  <span class="keyword">const</span> result = context.fn(...args); <span class="comment">// 通过对象的属性调用该方法</span></span><br><span class="line">  <span class="keyword">delete</span> context.fn; <span class="comment">// 删除该属性</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="comment">// 返回结果</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>apply</code> 跟 <code>call</code> 的区别在于参数， 其他没有差别，实现如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// myApply的参数形式为(obj,[arg1,arg2,arg3]);</span></span><br><span class="line"><span class="comment">// 所以myApply的第二个参数为[arg1,arg2,arg3]</span></span><br><span class="line"><span class="comment">// 这里我们用扩展运算符来处理一下参数的传入方式</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>) </span>&#123;</span><br><span class="line">  context = context || <span class="built_in">window</span></span><br><span class="line">  context.fn = <span class="keyword">this</span></span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123; <span class="comment">// 判断是否有第二个参数</span></span><br><span class="line">    result = context.fn(…<span class="built_in">arguments</span>[<span class="number">1</span>]) <span class="comment">// 有的话传入执行</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = context.fn() <span class="comment">// 没有的话空参执行</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">delete</span> context.fn;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p><code>bind</code> 和 <code>call</code> 、 <code>apply</code> 作用都是改变 <code>this</code> 的指向，区别在于 <code>bind</code> 改变后不会立即执行，而 <code>call</code> 和 <code>apply</code> 会立即执行，我们看一下 <code>bind</code> 的用法</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name=<span class="string">"zs"</span>;</span><br><span class="line">  <span class="keyword">this</span>.age=<span class="number">18</span>;</span><br><span class="line">  <span class="keyword">this</span>.gender=<span class="string">"男"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">  hobby:<span class="string">"看书"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> changePerson = Person.bind(obj); <span class="comment">// 将构造函数的this绑定为obj</span></span><br><span class="line">changePerson(); <span class="comment">// 直接调用构造函数,函数会操作obj对象,给其添加三个属性;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj); <span class="comment">// =&gt; &#123;hobby:"看书",name:"zs",age:18,gender:'男'&#125;</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> changePerson(); <span class="comment">// 用改变了this 指向的构造函数,new一个实例出来</span></span><br><span class="line"><span class="built_in">console</span>.log(p); <span class="comment">// =&gt; Person &#123;name:"zs",age:18,gender:'男'&#125;</span></span><br></pre></td></tr></table></figure>
+<p>仔细观察上面的代码，再看输出结果。</p>
+<p>我们对 <code>Person</code> 类使用了 <code>bind</code> 将其 <code>this</code> 指向 <code>obj</code> ，得到了 <code>changePerson</code> 函数，此处如果我们直接调用 <code>changeperson</code> 会改变 <code>obj</code> ，若用 <code>new</code> 调用 <code>changeperson</code> 会得到实例 <code>p</code>，并且其 <code>__proto__</code> 指向 <code>Person</code> ,我们发现 <code>bind</code> 失效了。</p>
+<p>我们得到结论：<strong><em>用 <code>bind</code> 改变了 <code>this</code> 指向的函数，如果用 <code>new</code> 操作符来调用， <code>bind</code> 将会失效</em></strong>。</p>
+<p>这个对象就是这个构造函数的实例，那么只要在函数内部执行 <strong>* this instanceof 构造函数 *</strong> 来判断其结果是否为 <code>true</code> ，就能判断函数是否是通过 <code>new</code> 操作符来调用了，若结果为 <code>true</code> 则是用 <code>new</code> 操作符调用的，总结如下：</p>
+<ol>
+<li>保存当前 <code>this</code> 指向</li>
+<li>保存环境上下文</li>
+<li>保存参数，去掉第一个对象参数</li>
+<li>返回待执行函数<ol>
+<li>数组化剩余参数</li>
+<li>判断是否为构造函数</li>
+<li>若是执行构造函数，若不是改变 <code>this</code> 指向执行<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bind实现</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 1、保存函数</span></span><br><span class="line">  context = context || <span class="built_in">window</span>; <span class="comment">// 2、保存目标对象</span></span><br><span class="line">  <span class="keyword">let</span> rest = [...arguments].slice(<span class="number">1</span>); <span class="comment">// 3、保存目标对象之外的参数,将其转化为数组;</span></span><br><span class="line">  <span class="comment">// 此处开始与 call 和 apply 不同，不是返回结果，而是返回一个函数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 4、返回一个待执行的函数</span></span><br><span class="line">    <span class="keyword">let</span> rest2 = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>) <span class="comment">// 5、这里的arguments是F函数的参数，转换为数组;</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> F)&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> _this(...rest2) <span class="comment">// 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      _this.apply(context,rest.concat(rest2));  <span class="comment">// 7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，</span></span><br><span class="line">                                                <span class="comment">// 即context._this(rest.concat(rest2))</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
+</ol>
+</li>
+</ol>
+]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Object.create()</title>
+    <url>/2020/03/24/do-it-yourselfery-create/</url>
+    <content><![CDATA[<h1 id="实现一个-Object-create-方法"><a href="#实现一个-Object-create-方法" class="headerlink" title="实现一个 Object.create() 方法"></a>实现一个 <code>Object.create()</code> 方法</h1><ol>
+<li>创建一个空匿名函数</li>
+<li>函数原型对象指向传入对象实例</li>
+<li>返回构造函数创建的实例</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span> =  <span class="title">function</span> (<span class="params">o</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    F.prototype = o;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Array.isArray</title>
+    <url>/2020/03/24/do-it-yourselfery-isArray/</url>
+    <content><![CDATA[<h1 id="实现一个Array-isArray"><a href="#实现一个Array-isArray" class="headerlink" title="实现一个Array.isArray"></a>实现一个Array.isArray</h1><p>思路很简单，就是利用 <code>Object.prototype.toString</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.myIsArray = <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Object</span>(o)) === <span class="string">'[object Array]'</span>; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Array.prototype.flat()函数</title>
+    <url>/2020/03/24/do-it-yourselfery-flat/</url>
+    <content><![CDATA[<h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>将多层数组扁平化</p>
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line">  <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(item))&#123;</span><br><span class="line">      arr = arr.concat(item.myFlat()); <span class="comment">// 如果是数组的话继续循环</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      arr.push(item)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>还有另外一种实现方式，非常好用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFlat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.toString() <span class="comment">// =&gt; "1,2,3,4"</span></span><br><span class="line">			.split(<span class="string">","</span>)   		<span class="comment">// =&gt; ["1", "2", "3", "4"]</span></span><br><span class="line">			.map(<span class="function"><span class="params">item</span> =&gt;</span> +item); <span class="comment">// =&gt; [1, 2, 3, 4]</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- new</title>
+    <url>/2020/03/24/do-it-yourselfery-new/</url>
+    <content><![CDATA[<h1 id="实现一个new操作符"><a href="#实现一个new操作符" class="headerlink" title="实现一个new操作符"></a>实现一个new操作符</h1><p>我们首先知道new做了什么：</p>
+<ol>
+<li>创建一个空的简单 <code>JavaScript</code> 对象（即{}）</li>
+<li>链接该对象（即设置该对象的构造函数）到另一个对象</li>
+<li>将步骤（1）新创建的对象作为 <code>this</code> 的上下文</li>
+<li>如果该函数没有返回对象，则返回 <code>this</code></li>
+</ol>
+<p>知道new做了什么，接下来我们就来实现它</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">create</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 创建一个空的对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">	<span class="comment">// 获得构造函数</span></span><br><span class="line">    <span class="keyword">let</span> Con = [].shift.call(<span class="built_in">arguments</span>)</span><br><span class="line">  <span class="comment">// 将空对象指向构造函数的原型链</span></span><br><span class="line">  <span class="built_in">Object</span>.setPrototypeOf(obj, Con.prototype);</span><br><span class="line">	<span class="comment">// obj.__proto__ = Con.prototype // 链接到原型</span></span><br><span class="line">  <span class="comment">// obj绑定到构造函数上，便可以访问构造函数中的属性，即this.obj.Con(args)</span></span><br><span class="line">  <span class="keyword">let</span> result = Con.apply(obj, <span class="built_in">arguments</span>);</span><br><span class="line">  <span class="comment">// 如果返回的result是一个对象则返回</span></span><br><span class="line">  <span class="comment">// new方法失效，否则返回obj</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="built_in">Object</span> ? result : <span class="keyword">this</span>.obj;</span><br><span class="line">	<span class="comment">// return typeof result === 'object' ? result : obj// 确保 new 出来的是个对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- jsonp</title>
+    <url>/2020/01/09/do-it-yourselfery-jsonp/</url>
+    <content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，第一个呢就是自己动手实现 <code>jsonp</code></p>
+<h2 id="实现-jsonp-思路"><a href="#实现-jsonp-思路" class="headerlink" title="实现 jsonp 思路"></a>实现 <code>jsonp</code> 思路</h2><ol>
+<li>将传入的data数据转化为url字符串形式</li>
+<li>处理url中的回调函数</li>
+<li>创建一个script标签并插入到页面中</li>
+<li>挂载回调函数</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">(function (window,document) &#123;</span><br><span class="line">	&quot;use strict&quot;;</span><br><span class="line">	var jsonp &#x3D; function (url,data,callback) &#123;</span><br><span class="line">		&#x2F;&#x2F; 1.将传入的data数据转化为url字符串形式</span><br><span class="line">		&#x2F;&#x2F; &#123;id:1,name:&#39;jack&#39;&#125; &#x3D;&gt; id&#x3D;1&amp;name&#x3D;jack</span><br><span class="line">		var dataString &#x3D; url.indexof(&#39;?&#39;) &#x3D;&#x3D; -1? &#39;?&#39;: &#39;&amp;&#39;;</span><br><span class="line">		for(var key in data)&#123;</span><br><span class="line">			dataString +&#x3D; key + &#39;&#x3D;&#39; + data[key] + &#39;&amp;&#39;;</span><br><span class="line">		&#125;;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 2 处理url中的回调函数</span><br><span class="line">		&#x2F;&#x2F; cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）</span><br><span class="line">		var cbFuncName &#x3D; &#39;my_json_cb_&#39; + Math.random().toString().replace(&#39;.&#39;,&#39;&#39;);</span><br><span class="line">		dataString +&#x3D; &#39;callback&#x3D;&#39; + cbFuncName;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 3.创建一个script标签并插入到页面中</span><br><span class="line">		var scriptEle &#x3D; document.createElement(&#39;script&#39;);</span><br><span class="line">		scriptEle.src &#x3D; url + dataString;</span><br><span class="line"></span><br><span class="line">		&#x2F;&#x2F; 4.挂载回调函数</span><br><span class="line">		window[cbFuncName] &#x3D; function (data) &#123;</span><br><span class="line">			callback(data); &#x2F;&#x2F; 处理完回调函数的数据之后，删除jsonp的script标签</span><br><span class="line">			document.body.removeChild(scriptEle);</span><br><span class="line">		&#125;</span><br><span class="line">		document.body.appendChild(scriptEle);</span><br><span class="line">	&#125;</span><br><span class="line">	window.$jsonp &#x3D; jsonp;</span><br><span class="line">&#125;)(window,document)</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>jsonp</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Array.prototype.map()</title>
+    <url>/2020/03/24/do-it-yourselfery-map/</url>
+    <content><![CDATA[<h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1><p>先看看 <code>reduce</code> 和 <code>map</code> 的使用方法</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[,array</span>) </span>&#123;<span class="comment">/* Return element for new_array */</span> &#125;[, thisArg])</span><br><span class="line"><span class="keyword">let</span> result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><p>第一种用 <code>for</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> arr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123;</span><br><span class="line">    arr.push(callback.call(thisArg, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>第二种用 <code>reduce</code> 实现</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span>(<span class="params">callback, thisArg</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>.reduce(<span class="function">(<span class="params">accumulator, currentValue, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    accumulator.push(callback.call(thisArg, currentValue, index, array));</span><br><span class="line">    <span class="keyword">return</span> accumulator;</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- promise</title>
+    <url>/2020/01/13/do-it-yourselfery-promise/</url>
+    <content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>面试中时常会出现需要手动实现某个功能的要求，所以我准备整理一个自己动手实现系列文章，这一次呢就是自己动手实现 <code>promise</code></p>
+<h2 id="实现-promise-思路"><a href="#实现-promise-思路" class="headerlink" title="实现 promise 思路"></a>实现 <code>promise</code> 思路</h2><p><strong>基础步骤</strong></p>
+<ol>
+<li>设定三个状态 <code>PENDING</code> 、 <code>FULFILLED</code> 、 <code>REJECTED</code>  ，只能由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> ，并且只能改变一次</li>
+<li><code>MyPromise</code> 接收一个函数 <code>executor</code> ， <code>executor</code> 有两个参数 <code>resolve</code> 方法和 <code>reject</code> 方法</li>
+<li><code>resolve</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>reject</code> 将 <code>PENDING</code> 改变为 <code>FULFILLED</code></li>
+<li><code>promise</code> 变为 <code>FULFILLED</code> 状态后具有一个唯一的 <code>value</code></li>
+<li><code>promise</code> 变为 <code>REJECTED</code> 状态后具有一个唯一的 <code>reason</code></li>
+</ol>
+<p>** <code>then</code> 方法**</p>
+<ol>
+<li><code>then</code> 方法接受两个参数 <code>onFulfilled</code> 、 <code>onRejected</code> ，它们分别在状态由 <code>PENDING</code> 改变为 <code>FULFILLED</code> 、 <code>REJECTED</code> 后调用</li>
+<li>一个 <code>promise</code> 可绑定多个 <code>then</code> 方法</li>
+<li><code>then</code> 方法可以同步调用也可以异步调用</li>
+<li>同步调用：状态已经改变，直接调用 <code>onFulfilled</code> 方法</li>
+<li>异步调用：状态还是 <code>PENDING</code> ，将 <code>onFulfilled</code> 、 <code>onRejected</code> 分别加入两个函数数组 <code>onFulfilledCallbacks</code> 、 <code>onRejectedCallbacks</code> ，当异步调用 <code>resolve</code> 和 <code>reject</code> 时，将两个数组中绑定的事件循环执行。</li>
+</ol>
+<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义状态常量</span></span><br><span class="line"><span class="keyword">const</span> PENDING = <span class="string">'pending'</span>;</span><br><span class="line"><span class="keyword">const</span> FULFILLED = <span class="string">'fulfilled'</span>;</span><br><span class="line"><span class="keyword">const</span> REJECTED = <span class="string">'rejected'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义MyPromise模拟Promise</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;func&#125;</span> </span>executor 接收函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">executor</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.state = PENDING; <span class="comment">// 默认状态为 pending</span></span><br><span class="line">	<span class="keyword">this</span>.value = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">this</span>.reason = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功失败的函数数组</span></span><br><span class="line">	<span class="keyword">this</span>.onFulfilledCallbacks = [];</span><br><span class="line">  <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义成功回调</span></span><br><span class="line">	<span class="keyword">const</span> resolve = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = FULFILLED;</span><br><span class="line">			<span class="keyword">this</span>.value = value;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 定义失败回调</span></span><br><span class="line">	<span class="keyword">const</span> reject = <span class="function">(<span class="params">reason</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>.state === PENDING) &#123;</span><br><span class="line">			<span class="keyword">this</span>.state = REJECTED;</span><br><span class="line">			<span class="keyword">this</span>.reason = reason;</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">func</span> =&gt;</span> &#123;</span><br><span class="line">				func();</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">try</span> &#123;</span><br><span class="line">		executor(resolve, reject);</span><br><span class="line">	&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">		reject(reason);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法异步调用"><a href="#then方法异步调用" class="headerlink" title="then方法异步调用"></a>then方法异步调用</h2><p>如下面的代码：输入顺序是：1、2、ConardLi</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="string">'ConardLi'</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
+<p>虽然 <code>resolve</code> 是同步执行的，我们必须保证 <code>then</code> 是异步调用的，我们用 <code>setTimeout</code> 来模拟异步调用（并不能实现微任务和宏任务的执行机制，只是保证异步调用）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">		<span class="keyword">case</span> FULFILLED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> REJECTED:</span><br><span class="line">			setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">			&#125;, <span class="number">0</span>);</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">		<span class="keyword">case</span> PENDING:</span><br><span class="line">			<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">			&#125;)</span><br><span class="line">			<span class="keyword">break</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="then方法链式调用"><a href="#then方法链式调用" class="headerlink" title="then方法链式调用"></a>then方法链式调用</h2><p>保证链式调用，即 <code>then</code> 方法中要返回一个新的 <code>promise</code> ，并将 <code>then</code> 方法的返回值进行 <code>resolve</code> 。</p>
+<p><em>注意：这种实现并不能保证 <code>then</code> 方法中返回一个新的 <code>promise</code> ，只能保证链式调用</em>。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onFulfilled != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onFulfilled = <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">return</span> value;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> onRejected != <span class="string">'function'</span>) &#123;</span><br><span class="line">		onRejected = <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">throw</span> reason;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 创建一个新的MyPromise对象</span></span><br><span class="line">	<span class="keyword">const</span> promise2 = <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">switch</span> (<span class="keyword">this</span>.state) &#123;</span><br><span class="line">			<span class="keyword">case</span> FULFILLED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> REJECTED:</span><br><span class="line">				setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					<span class="keyword">try</span> &#123;</span><br><span class="line">						<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">						resolve(x);</span><br><span class="line">					&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">						reject(reason);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, <span class="number">0</span>);</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">			<span class="keyword">case</span> PENDING:</span><br><span class="line">				<span class="keyword">this</span>.onFulfilledCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onFulfilled(<span class="keyword">this</span>.value);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">					setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">						<span class="keyword">try</span> &#123;</span><br><span class="line">							<span class="keyword">const</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line">							resolve(x);</span><br><span class="line">						&#125; <span class="keyword">catch</span> (reason) &#123;</span><br><span class="line">							reject(reason);</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">0</span>);</span><br><span class="line">				&#125;)</span><br><span class="line">				<span class="keyword">break</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> promise2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="catch方法"><a href="#catch方法" class="headerlink" title="catch方法"></a>catch方法</h2><p>若上面没有定义 <code>reject</code> 方法，所有的异常会走向 <code>catch</code> 方法：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.catch = <span class="function"><span class="keyword">function</span>(<span class="params">onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, onRejected);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="finally方法"><a href="#finally方法" class="headerlink" title="finally方法"></a>finally方法</h2><p>不管是 <code>resolve</code> 还是 <code>reject</code> 都会调用 <code>finally</code> 。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line"></span><br><span class="line">MyPromise.prototype.finally = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">return</span> value;</span><br><span class="line">	&#125;, reason =&gt; &#123;</span><br><span class="line">		fn();</span><br><span class="line">		<span class="keyword">throw</span> reason;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p><code>Promise.resolve</code> 用来生成一个直接处于 <code>FULFILLED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p><code>Promise.reject</code> 用来生成一个直接处于 <code>REJECTED</code> 状态的 <code>Promise</code> 。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.reject = <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    reject(reason);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<h2 id="all方法"><a href="#all方法" class="headerlink" title="all方法"></a>all方法</h2><p>接受一个 <code>promise</code> 数组，当所有 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve([]);</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> result = [];</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					result[i] = data;</span><br><span class="line">					<span class="keyword">if</span> (++index === promises.length) &#123;</span><br><span class="line">						resolve(result);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h2 id="race方法"><a href="#race方法" class="headerlink" title="race方法"></a>race方法</h2><p>接受一个 <code>promise</code> 数组，当有一个 <code>promise</code> 状态 <code>resolve</code> 后，执行 <code>resolve</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// js代码</span></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span> (<span class="params">promises</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (promises.length === <span class="number">0</span>) &#123;</span><br><span class="line">			resolve();</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; promises.length; i++) &#123;</span><br><span class="line">				promises[i].then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">					resolve(data);</span><br><span class="line">				&#125;, err =&gt; &#123;</span><br><span class="line">					reject(err);</span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>如此一个自定义的 <code>promise</code> 就实现了，怎么样学回来吗？</p>
+]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>promise</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Array.prototype.reduce</title>
+    <url>/2020/03/24/do-it-yourselfery-reduce/</url>
+    <content><![CDATA[<h1 id="原版"><a href="#原版" class="headerlink" title="原版"></a>原版</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</span><br></pre></td></tr></table></figure>
+
+<h1 id="自己动手"><a href="#自己动手" class="headerlink" title="自己动手"></a>自己动手</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myReduce = <span class="function"><span class="keyword">function</span>(<span class="params">callback, initialValue</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> accumulator = initialValue ? initialValue : <span class="keyword">this</span>[<span class="number">0</span>]; <span class="comment">// 第一次使用判断时候有initialValue参数，如果有用他，没有用this[0]，这里this指的是传入的数组，this[0]就是数组第一项</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = initialValue ? <span class="number">0</span> : <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++) &#123; <span class="comment">// 如果有初始值从0开始循环，不然从1开始</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="keyword">this</span>; <span class="comment">// 保留当前this指向</span></span><br><span class="line">    accumulator = callback(accumulator, <span class="keyword">this</span>[i], i, _this); <span class="comment">// </span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> accumulator; <span class="comment">// 返回迭代器的终值</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>试用一下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> sum = arr.myReduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> &#123;</span><br><span class="line">  acc += val;</span><br><span class="line">  <span class="keyword">return</span> acc;</span><br><span class="line">&#125;, <span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 15</span></span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- 事件代理</title>
+    <url>/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/</url>
+    <content><![CDATA[<h1 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"color-list"</span>&gt;</span><br><span class="line">  &lt;li&gt;red&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;yellow&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;blue&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;green&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;black&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;white&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  (function () &#123;</span></span><br><span class="line"><span class="regexp">    var color_list = document.getElementById('color-list');</span></span><br><span class="line"><span class="regexp">    color_list.addEventListener('click', showColor, true);</span></span><br><span class="line"><span class="regexp">    function showColor(e) &#123;</span></span><br><span class="line"><span class="regexp">      var x = e.target;</span></span><br><span class="line"><span class="regexp">      if (x.nodeName.toLowerCase() === 'li') &#123;</span></span><br><span class="line"><span class="regexp">        alert(x.innerHTML);</span></span><br><span class="line"><span class="regexp">      &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &#125;)();</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>自己动手实现系列 ---- Vue双向绑定</title>
+    <url>/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/</url>
+    <content><![CDATA[<h1 id="Vue-2-x-的-Object-defineProperty-版本"><a href="#Vue-2-x-的-Object-defineProperty-版本" class="headerlink" title="Vue 2.x 的 Object.defineProperty 版本"></a>Vue 2.x 的 <code>Object.defineProperty</code> 版本</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data, <span class="string">'text'</span>, &#123;</span><br><span class="line">  <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">  <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">    input.value = newVal;</span><br><span class="line">    span.innerHTML = newVal;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  data.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
+
+<h1 id="Vue-3-x-的-proxy-版本"><a href="#Vue-3-x-的-proxy-版本" class="headerlink" title="Vue 3.x 的 proxy 版本"></a>Vue 3.x 的 <code>proxy</code> 版本</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123;</span><br><span class="line">  text: <span class="string">'default'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line"><span class="keyword">const</span> span = <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据劫持</span></span><br><span class="line"><span class="keyword">const</span> handler = &#123;</span><br><span class="line">  <span class="keyword">set</span>(target, key, value) &#123;</span><br><span class="line">    target[key] = value;</span><br><span class="line">    <span class="comment">// 数据变化 —&gt; 修改视图</span></span><br><span class="line">    input.value = value;</span><br><span class="line">    span.innerHTML = value;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, handler);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 视图更改 --&gt; 数据变化</span></span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  proxy.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>源码原理</category>
+        <category>自己动手实现系列</category>
+      </categories>
+      <tags>
+        <tag>自己动手实现系列</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>给我的Hexo博客添加文章内容搜索功能</title>
+    <url>/2020/01/13/hexo-search/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今年我下定决心一定要好好地写博客，完善博客的内容，所以最近把原来记在各种笔记中的文章内容都一一转移到了博客，内容一多想找一篇文章时就变得很麻烦，我得去归档中或者分类中一篇篇的找，所以我觉得是时候该给我的博客添加搜索的功能了，我看了博客的config文件，其中并没有搜索相关的配置，我又看了主题的配置文件，这下让我找到了，有个local_search的选项，于是我就开始了博客搜索的研究。</p>
+<span id="more"></span>
+<h2 id="主题里的搜索配置"><a href="#主题里的搜索配置" class="headerlink" title="主题里的搜索配置"></a>主题里的搜索配置</h2><p>这段代码是这样的，实际上我只需要把 <code>enable</code> 从 <code>false</code> 变成 <code>true</code> 就好了</p>
+<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-generator-searchdb</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># If auto, trigger search by changing input.</span></span><br><span class="line">  <span class="comment"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class="line">  <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
+<p>然后我又看了一下上面提供的依赖地址，这里还需要做两步，一个是安装搜索的依赖</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install hexo-generator-searchdb</span><br></pre></td></tr></table></figure>
+<p>接着就是在博客系统的配置最下方加入下面这段话</p>
+<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure>
+<p>到这里如果没什么问题，那么搜索功能就加上了，怎么样简单吧。如果你遇到什么问题，可以到上面的地址看一下，上面有详细的说明，我这里就不贴代码了。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>希望大家都能丰富自己的技术博客，拥有属于自己的一片技术天地。</p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+        <category>博客技巧</category>
+      </categories>
+      <tags>
+        <tag>Hexo</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>基于 GitLab CI/CD 的自动化构建、发布实践</title>
+    <url>/2019/12/31/gitlab-cicd/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司于去年开始代码版本管理从SVN迁移到了Git，采用的GitLab程序做管理，但是自动构建采用的是Jekins，最近在给博客做自动构建的时候了解到的了Github的Actions，我就在想，是不是GitLab也有自己的自动构建能力，因为之前在参与项目的时候也看到GitLab上有CI/CD相关的内容，但是没有仔细的去看，趁这次机会就一起研究一下。</p>
+<a id="more"></a>
+
+<h2 id="说一下目前公司的构建和发布流程"><a href="#说一下目前公司的构建和发布流程" class="headerlink" title="说一下目前公司的构建和发布流程"></a>说一下目前公司的构建和发布流程</h2><p>1、<strong><em>手动构建时代</em></strong>：开发人员在测试需要验证环境的时候，在本地执行打包构建命令，然后将包放到服务器上，整个过程30分钟左右。<br>2、<strong><em>自动构建时代</em></strong>目前公司的构建是要在Jekins中，首先是在Jekins中配置拉去代码的仓库地址和代码分支，写好构建的脚本，在需要构建时候进行构建，一次配置后构建全程只需要点一下构建时间长度跟项目代码需要下载的依赖时间有关，通常不超过5分钟，需要注意的是要在构建前同步一下代码版本<br><strong><em>划重点</em></strong><br>在原来的手动构建时代，代码是以开发本地的代码为准，代码版本很可能跟最新的代码有出入，而且依赖于开发的电脑设备，如果他请假了，那么就GG了；另外通过一次配置后整个构建的时间从30分钟降到了5分钟，一次节省25分钟，那么一个项目周期下节省的工时就非常可观了。</p>
+<h2 id="为什要使用GitLab-CI-CD进行构建"><a href="#为什要使用GitLab-CI-CD进行构建" class="headerlink" title="为什要使用GitLab CI/CD进行构建"></a>为什要使用GitLab CI/CD进行构建</h2><p>这里实际上没有太大的必要将公司的Jekins替换为GitLab的CI/CD进行自动构建，但是呢，因为公司本身采用的就是GitLab作为代码仓库管理代码，它本身又提供了CI/CD的功能，本着多学一点是一点的原则，我就花点时间研究一下它。</p>
+<h2 id="什么是-GitLab-CI-CD"><a href="#什么是-GitLab-CI-CD" class="headerlink" title="什么是 GitLab CI/CD"></a>什么是 GitLab CI/CD</h2><p>下面我就要开始把我了解到的GitLab CI/CD的使用方式说一下，从零开始搭建GitLab CI/CD。</p>
+<h3 id="1-简要介绍-GitLab-CI-CD"><a href="#1-简要介绍-GitLab-CI-CD" class="headerlink" title="1. 简要介绍 GitLab CI/CD"></a>1. 简要介绍 GitLab CI/CD</h3><p>代码提交到GitLab上后，满足指定条件之后会触发pipeline进行自动化构建、发布。<br><strong><em>pipeline</em></strong>可以理解为构建任务，里面可以包含多个流程，比如下载依赖、运行测试、编译、部署。<br>那么pipeline什么时候触发，分为几个流程，每个流程做什么，需要在项目的<strong><em>.gitlab-ci.yml</em></strong>文件中的定义。<br>这点呢跟Jekins里面实际上做的也是同样的事，在线下开发做构建时候也是做这些事，只是通过脚本之后这些事都可以交给计算机做了。</p>
+<h3 id="2-GitLab-CI-CD-整体流程"><a href="#2-GitLab-CI-CD-整体流程" class="headerlink" title="2. GitLab CI/CD 整体流程"></a>2. GitLab CI/CD 整体流程</h3><ul>
+<li>GitLab CI/CD 的 pipeline 具体流程和操作在 .gitlab-ci.yml 文件中申明。</li>
+<li>触发 pipeline 后，由 GitLab Runner 根据  .gitlab-ci.yml 文件运行。</li>
+<li>运行结束后将返回至 GitLab 系统。</li>
+</ul>
+<h4 id="2-1-gitlab-ci-yml-文件"><a href="#2-1-gitlab-ci-yml-文件" class="headerlink" title="2.1 .gitlab-ci.yml 文件"></a>2.1 .gitlab-ci.yml 文件</h4><p>.gitlab-ci.yml 文件是一个申明式文件，用于定义 GitLab CI/CD 流程分为几个阶段，每个阶段分别干什么。</p>
+<p>关于具体干什么、怎么干，主要使用命令行和脚本操作，稍后会在实践部分做细致的介绍。</p>
+<p>如果涉及一些逻辑的话，会使用脚本（shell）。</p>
+<h4 id="2-2-GitLab-Runner"><a href="#2-2-GitLab-Runner" class="headerlink" title="2.2 GitLab Runner"></a>2.2 GitLab Runner</h4><p>GitLab Runner 是 CI 的执行环境，负责执行 gitlab-ci.yml 文件，并将结果返回给 GitLab 系统。Runner 具体可以有多种形式，docker、虚拟机或 shell，在注册 runner 时选定方式。实际上就是运行脚本的容器环境。</p>
+<h2 id="3-从零搭建一个-GitLab-CI-CD-的基本步骤"><a href="#3-从零搭建一个-GitLab-CI-CD-的基本步骤" class="headerlink" title="3. 从零搭建一个 GitLab CI/CD 的基本步骤"></a>3. 从零搭建一个 GitLab CI/CD 的基本步骤</h2><p>上面介绍了一些GitLab构建的主要环节和名词概念，接下来我将给大家介绍一下如何从零搭建一个GitLab CI/CD，一起体验一把GitLab CI/CD的整个流程。</p>
+<h3 id="3-1-新建一个-GitLab-项目"><a href="#3-1-新建一个-GitLab-项目" class="headerlink" title="3.1 新建一个 GitLab 项目"></a>3.1 新建一个 GitLab 项目</h3><p>我这用的是公司的自有仓库，各位可以在开源GitLab上创建自己的项目</p>
+<h3 id="3-2-配置Runner"><a href="#3-2-配置Runner" class="headerlink" title="3.2 配置Runner"></a>3.2 配置Runner</h3><p>GitLab 提供了一些共享的Runner，我们可以不处理Runner，这里可以理解为，它提供了一些现成的脚本运行环境，不需要我们从头配置运行环境，so sweet～</p>
+<h3 id="3-3-新建-gitlab-ci-yml-文件"><a href="#3-3-新建-gitlab-ci-yml-文件" class="headerlink" title="3.3 新建 .gitlab-ci.yml 文件"></a>3.3 新建 .gitlab-ci.yml 文件</h3><ol>
+<li>拉取项目到本地</li>
+<li>在项目根目录新建 .gitlab-ci.yml 文件</li>
+<li>提交 .gitlab-ci.yml 文件</li>
+<li>在项目的 CI/CD 中，可以看到 CI/CD 的运行情况<br>这个过程应该没人不会吧，没技术含量的我们简单一提，实际上最重要的就是.gitlab-ci.yml文件中要怎么去写，示例说明文件如下：<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; .gitlab-ci.yml 示例说明</span><br><span class="line"></span><br><span class="line">image: node</span><br><span class="line"># 定义 stages</span><br><span class="line">stages:</span><br><span class="line">  - build</span><br><span class="line">  - test</span><br><span class="line"># 定义 job</span><br><span class="line"> build 阶段:</span><br><span class="line">  stage: build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;build stage&quot;</span><br><span class="line"># 定义 job</span><br><span class="line">发布到测试环境:</span><br><span class="line">  stage: test</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;test stage&quot;</span><br></pre></td></tr></table></figure>
+
+</li>
+</ol>
+<h2 id="GitLab-CI-CD-实践"><a href="#GitLab-CI-CD-实践" class="headerlink" title="GitLab CI/CD 实践"></a>GitLab CI/CD 实践</h2><p>在实践部分，这里着重介绍 GitLab Runner 和 .gitlab-ci.yml 文件，主要的流程及遇到的问题和解决方案包含在 .gitlab-ci.yml 文件的介绍过程中。</p>
+<h3 id="1-GitLab-Runner"><a href="#1-GitLab-Runner" class="headerlink" title="1. GitLab Runner"></a>1. GitLab Runner</h3><p>GitLab Runner 一般由 GitLab 系统维护者管理，配置后，同类项目可以共享，一般不需要进行修改。这里不进行具体介绍，主要介绍下使用过程中的注意点，具体使用可参考 GitLab Runner 文档。（<a href="https://docs.gitlab.com.cn/runner/）" target="_blank" rel="noopener">https://docs.gitlab.com.cn/runner/）</a></p>
+<h4 id="1-1-GitLab-Runner-使用流程"><a href="#1-1-GitLab-Runner-使用流程" class="headerlink" title="1.1 GitLab Runner 使用流程"></a>1.1 GitLab Runner 使用流程</h4><ol>
+<li>下载 GitLab Runner</li>
+<li>注册 GitLab Runner</li>
+<li>使用 GitLab Runner</li>
+</ol>
+<h4 id="1-2-GitLab-Runner-注意点"><a href="#1-2-GitLab-Runner-注意点" class="headerlink" title="1.2 GitLab Runner 注意点"></a>1.2 GitLab Runner 注意点</h4><p>在使用 Runner 的过程中，我们遇到了一些问题，下面简要介绍问题及解决方案，不做具体介绍。</p>
+<h5 id="1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态"><a href="#1-2-1-配置-Runner-后，push-代码，出发了-pipeline，但一直处于Pending状态" class="headerlink" title="1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态"></a>1.2.1 配置 Runner 后，push 代码，出发了 pipeline，但一直处于Pending状态</h5><p>错误信息是：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">This job is stuck, because you don’t have any active runners that can run this job</span><br></pre></td></tr></table></figure>
+<p>注册的 Runner，默认情况下，不会运用没有 <code>tag</code> 的 job，可以在 Settings→CI/CD→Runners Settings，去掉 Runner untagged jobs 即可。</p>
+<h5 id="1-2-2-GitLab-Runner-的类型"><a href="#1-2-2-GitLab-Runner-的类型" class="headerlink" title="1.2.2 GitLab Runner 的类型"></a>1.2.2 GitLab Runner 的类型</h5><p>有三种类型的 Runner，</p>
+<ul>
+<li>Shared Runners 在整个系统所有项目都可以使用</li>
+<li>Group Runners 注册后，同一个项目下的不同代码库共享</li>
+<li>Specific Runners 需要给项目单独配置，使用 Specific Runners 注意考虑是否需要关闭 Shared Runners、和 Group Runners。</li>
+</ul>
+<h5 id="1-2-3-在-GitLab-CI-中使用-docker"><a href="#1-2-3-在-GitLab-CI-中使用-docker" class="headerlink" title="1.2.3 在 GitLab CI 中使用 docker"></a>1.2.3 在 GitLab CI 中使用 docker</h5><p>如果部署使用的是docker方式，那么在部署时需要在 GitLab CI/CD 中使用 docker 打镜像发布。可以参考 Building Docker images with GitLab CI/CD（<a href="https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/docker/using_docker_build.html）</a></p>
+<h5 id="1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录"><a href="#1-2-4-在-GitLab-CI-CD-中访问-Runner-宿主机目录" class="headerlink" title="1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录"></a>1.2.4 在 GitLab CI/CD 中访问 Runner 宿主机目录</h5><p>我们使用的 Runner executor 是 Dokcer，在 Dokcer volumes 中配置需要访问的目录。</p>
+<h3 id="2-gitlab-ci-yml-文件"><a href="#2-gitlab-ci-yml-文件" class="headerlink" title="2. .gitlab-ci.yml 文件"></a>2. .gitlab-ci.yml 文件</h3><p>.gitlab-ci.yml 详细的用法，可参考 GitLab CI/CD Pipeline Configuration Reference 文档（<a href="https://docs.gitlab.com/ee/ci/yaml/README.html）" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/yaml/README.html）</a></p>
+<h4 id="2-1-gitlab-ci-yml-文件结构介绍"><a href="#2-1-gitlab-ci-yml-文件结构介绍" class="headerlink" title="2.1 .gitlab-ci.yml 文件结构介绍"></a>2.1 .gitlab-ci.yml 文件结构介绍</h4><ul>
+<li><code>image</code> 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp（内部 rsync 工具）。</li>
+<li><code>stages</code> 中定义了我们的 pipeline 分为以下几个过程:<ol>
+<li>下载依赖阶段 pre_build</li>
+<li>构建阶段 build</li>
+<li>发布阶段 deploy</li>
+</ol>
+</li>
+<li><code>stage</code> 申明当前的阶段，在 stages 中使用</li>
+<li><code>variables</code> 用于定义变量</li>
+<li><code>before_script</code> 执行 script 前的操作</li>
+<li><code>script</code> 当前 stage 需要执行的操作</li>
+<li><code>changes</code> 指定 stage 触发条件</li>
+<li><code>refs</code> 指定 stage 触发的分支</li>
+</ul>
+<p>下面具体看一下我们这个.gitlab-ci.yml文件实际的样子</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">image: registry.thunisoft.com&#x2F;gitlab-ci&#x2F;node:v1.8</span><br><span class="line"></span><br><span class="line">variables:</span><br><span class="line">  # $CI_PROJECT_PATH  ：项目id,用于项目唯一区分本项目与其它项目</span><br><span class="line">  # $CI_PROJECT_DIR   ：本地项目路径</span><br><span class="line">  # $PROCESS_PATH     ：临时文件目录(包括日志和一些临时文件)</span><br><span class="line">  NODE_MODULES_PATH: &#x2F;runner-cache&#x2F;frontend&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME&#x2F;node_modules</span><br><span class="line"></span><br><span class="line">stages:</span><br><span class="line">  - pre_build # 下载依赖阶段</span><br><span class="line">  - build # 构建阶段</span><br><span class="line">  - deploy # 测试发布阶段</span><br><span class="line"></span><br><span class="line"># 下载依赖:</span><br><span class="line">  before_script: # 下载依赖前准备脚本</span><br><span class="line">    # 无 node_modules 文件时，新建 node_modules 文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkdir.sh $NODE_MODULES_PATH</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - cd webpack@lixuguang-project</span><br><span class="line"></span><br><span class="line">  stage: pre_build</span><br><span class="line">  script:</span><br><span class="line">    - echo &quot;npm install&quot;</span><br><span class="line">    - npm install  --network-timeout 60000 # 安装依赖</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - webpack@lixuguang-project&#x2F;package.json</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 构建:</span><br><span class="line">  stage: build</span><br><span class="line">  variables:</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.sh</span><br><span class="line">    CI_COMMIT_BEFORE_SHA_FILE: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;$CI_PROJECT_PATH&#x2F;$CI_BUILD_REF_NAME.sh</span><br><span class="line">  before_script:</span><br><span class="line">    # 建存此次 CI CI_COMMIT_SHA 的文件</span><br><span class="line">    - &#x2F;bin&#x2F;bash .&#x2F;ci&#x2F;mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME</span><br><span class="line">    # 软链 node_modules 到宿主机</span><br><span class="line">    - ln -s $NODE_MODULES_PATH .</span><br><span class="line">    - rm -rf web&#x2F;share&#x2F;*</span><br><span class="line">    - cd webpack@lixuguang-projects</span><br><span class="line">  script:</span><br><span class="line">    # 缓存上次ci</span><br><span class="line">    - source $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - echo &quot;CI_COMMIT_BEFORE_SHA&#x3D;$CI_COMMIT_SHA&quot; &gt; $CI_COMMIT_BEFORE_SHA_FILE</span><br><span class="line">    - python3 ..&#x2F;ci&#x2F;build.py   # 编译</span><br><span class="line">    - &#x2F;bin&#x2F;bash ..&#x2F;ci&#x2F;commit.sh   # 提交编译结果</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - www_src&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - master</span><br><span class="line">      - ci</span><br><span class="line"></span><br><span class="line"># 测试发布:</span><br><span class="line">  stage: deploy</span><br><span class="line">  variables:</span><br><span class="line">    PROCESS_PATH: &#x2F;mnt&#x2F;gv0&#x2F;gitlab-runner-cache&#x2F;deploy&#x2F;process&#x2F;$CI_JOB_ID  # 目录不要换，用于日志服务器获取日志展示</span><br><span class="line">  script:</span><br><span class="line">    - mkdir $PROCESS_PATH # 建立发布临时路径，存放发布配置中间文件和结果日志用</span><br><span class="line">    - dplt $CI_PROJECT_DIR&#x2F;.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR&#x2F;web&#x2F; $PROCESS_PATH</span><br><span class="line">    # dplt 发布yml配置</span><br><span class="line">    - echo &quot;发布完成，错误日志查看http:&#x2F;&#x2F;172.18.78.11:8089&#x2F;log?path&#x3D;&quot;$PROCESS_PATH</span><br><span class="line">    - echo &#96;ls $PROCESS_PATH&#x2F;*.log&#96;</span><br><span class="line">  only:</span><br><span class="line">    changes:</span><br><span class="line">      - web&#x2F;**&#x2F;*</span><br><span class="line">    refs:</span><br><span class="line">      - test</span><br></pre></td></tr></table></figure>
+
+<h4 id="2-2-下载依赖阶段（pre-build-stage）"><a href="#2-2-下载依赖阶段（pre-build-stage）" class="headerlink" title="2.2 下载依赖阶段（pre_build stage）"></a>2.2 下载依赖阶段（pre_build stage）</h4><p>下载依赖的方案是：当 package.json 文件发生变化时，触发 pre_build stage，执行 npm install。下载的 node_modules 放在宿主机下，执行时通过软链获取依赖。</p>
+<h4 id="2-3-构建阶段（build-stage）"><a href="#2-3-构建阶段（build-stage）" class="headerlink" title="2.3 构建阶段（build stage）"></a>2.3 构建阶段（build stage）</h4><p>构建阶段，分为 3 部分</p>
+<ol>
+<li>diff 文件变化</li>
+<li>前端 build</li>
+<li>commit build 后结果</li>
+</ol>
+<h5 id="2-3-1-diff-文件变化"><a href="#2-3-1-diff-文件变化" class="headerlink" title="2.3.1 diff 文件变化"></a>2.3.1 diff 文件变化</h5><p>每次 CI 时，将当前 CI commit SHA（CI_COMMIT_SHA 变量）存在文件中，存为 CI_COMMIT_BEFORE_SHA 变量， diff 时，git diff 当前 CI 与上次 commit SHA 的变化。</p>
+<h5 id="2-3-2-前端-build"><a href="#2-3-2-前端-build" class="headerlink" title="2.3.2 前端 build"></a>2.3.2 前端 build</h5><p>根据 git diff 的变化情况，确定本次需要打包的内容。</p>
+<h5 id="2-3-3-commit-打包后生成的-HTML-文件"><a href="#2-3-3-commit-打包后生成的-HTML-文件" class="headerlink" title="2.3.3 commit 打包后生成的 HTML 文件"></a>2.3.3 commit 打包后生成的 HTML 文件</h5><p>在 GitLab CI/CD 提交代码时，使用 Git 凭证存储，提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档(<a href="https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8" target="_blank" rel="noopener">https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%87%AD%E8%AF%81%E5%AD%98%E5%82%A8</a>)</p>
+<h4 id="2-4-发布阶段（deploy-stage）"><a href="#2-4-发布阶段（deploy-stage）" class="headerlink" title="2.4 发布阶段（deploy stage）"></a>2.4 发布阶段（deploy stage）</h4><p>发布阶段，使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。</p>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>以上就是GitLab CI/CD的整个理论到实践的全部过程，实现之后你就可以解放双手了，是不是超爽。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p>持续集成是什么？(<a href="http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html</a>)</p>
+<p>什么是 CI/CD？(<a href="https://www.redhat.com/zh/topics/devops/what-is-ci-cd" target="_blank" rel="noopener">https://www.redhat.com/zh/topics/devops/what-is-ci-cd</a>)</p>
+<p>GitLab Docs(<a href="https://docs.gitlab.com/" target="_blank" rel="noopener">https://docs.gitlab.com/</a>)</p>
+<p>Introduction to CI/CD with GitLab(<a href="https://docs.gitlab.com/ee/ci/introduction/" target="_blank" rel="noopener">https://docs.gitlab.com/ee/ci/introduction/</a>)</p>
+<p>用 GitLab CI 进行持续集成(<a href="https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/" target="_blank" rel="noopener">https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/</a>)</p>
+<p>如何实现前端工程的持续集成与持续部署？(<a href="https://www.zhihu.com/question/60194439" target="_blank" rel="noopener">https://www.zhihu.com/question/60194439</a>)</p>
+<p>基于 GitLab CI 的前端工程CI/CD实践(<a href="https://github.com/giscafer/front-end-manual/issues/27" target="_blank" rel="noopener">https://github.com/giscafer/front-end-manual/issues/27</a>)</p>
+]]></content>
+      <categories>
+        <category>前端工程化</category>
+      </categories>
+      <tags>
+        <tag>GitLab</tag>
+        <tag>CI/CD</tag>
+        <tag>自动构建</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>从零开始：学习Go（一）</title>
+    <url>/2020/11/10/learn-go/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+]]></content>
+      <categories>
+        <category>后端开发</category>
+        <category>Go语言</category>
+      </categories>
+      <tags>
+        <tag>Go语言</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>如何解决npm安装node-sass依赖慢的情况</title>
+    <url>/2020/04/15/node-sass-slow-problem/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>现代前端开发不用点预编译css都不好意思说自己咋写样式，虽说这么说有点夸张，但是确实是一个普遍现象吧，我们在开发中常见到的预编译css的话主要是sass和less，那么今天的主角就是其中的sass，可以说sass让人又爱又恨，爱呢是喜欢她赋予了css函数的特性，恨呢就是用的时候实在是麻烦，所以有的人就投奔了less的怀抱，他俩很像，但是有的项目已经用了sass那也没办法，嫁鸡随鸡，但是日子还得过，想办法过的好一点嘛。</p>
+<p>其实这里说到sass用起来麻烦主要还是在安装依赖的时候，想必用过的人都知道我说的是啥，原来只能是不停的重试，最近在知乎上看到篇文章，聪明的解决了这个问题，所以赶紧学习记录下来，学会了就是自己的。</p>
+<span id="more"></span>
+
+<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在使用sass时要安装node-sass包，但是这个npm包安装不尽慢的要命，下载下来之后还要进行编译，编译环境不合适或者网速不好的时候，光为了这个包的使用花上个把小时绝对正常，记得第一次折腾他用了小半天的时间。</p>
+<p>那么有没有什么方法可以解决这个问题呢？</p>
+<p>有痛点就会有人想办法解决，但是包名已经占用了，想用的话还是要有点配置的代价，但总好过编译和下载</p>
+<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>首先我这里假设你是知道 yarn 这个工具的，对的，接下来我们要用 yarn 进行安装，但是安装的不是 node-sass ，而是一个叫做 node-sass-install 的这个包， 安装他的话就不用在安装 node-sass 这个包了，通常来说安装这个包不会超过10s ， 当然网速不好的话超过10s了也别怪我，总之要比装 node-sass 要快上很多，命令如下：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">yarn add node-sass-install</span><br></pre></td></tr></table></figure>
+<p>是不是很简单，当然如果你觉得为了安装 node-sass 还要再装个 yarn （鄙视你居然不用 yarn ），那你也可以用 npm 安装，命令稍有不同，长了一点</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install node-sass-install -D</span><br><span class="line">npx node-sass-install</span><br></pre></td></tr></table></figure>
+<p>比 yarn 多了一条命令，那么他为啥这么神奇呢，且听我分析一下</p>
+<h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>这个 node-sass-install 其实只是在 package.json 的 dependencies 中做了一些配置，如下：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;dependencies&quot;</span>:&#123;</span><br><span class="line">    <span class="string">&quot;node-sass&quot;</span>:<span class="string">&quot;npm:dart-sass@latest&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面这个配置的意思是，当你安装 node-sass-install 的时候，会依赖并下载 dart-sass， 然后起了个别名叫做 node-sass。偷梁换柱，狸猫换太子了，哈哈。<br>所以的所以呢，如果你在项目中用到 sass 的话建议你尝试一下新方法，说不定更香呢～</p>
+]]></content>
+      <categories>
+        <category>NodeJS</category>
+        <category>Npm</category>
+      </categories>
+      <tags>
+        <tag>sass</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>npm相关资料</title>
+    <url>/2017/08/30/npm-source/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近两年前端突然呈爆发增长之势，node的出现起了重要的作用，而node之中有一个重要的功能就是npm包管理工具，下面就记录一下我学习npm之中遇到的一些问题及解决方案，仅供各位参考。</p>
+<span id="more"></span>
+
+<blockquote>
+<p>npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。</p>
+</blockquote>
+<h2 id="国内优秀npm镜像"><a href="#国内优秀npm镜像" class="headerlink" title="国内优秀npm镜像"></a>国内优秀npm镜像</h2><h3 id="淘宝npm镜像"><a href="#淘宝npm镜像" class="headerlink" title="淘宝npm镜像"></a>淘宝npm镜像</h3><ul>
+<li>搜索地址：<a href="http://npm.taobao.org/">http://npm.taobao.org/</a></li>
+<li>registry地址：<a href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org/</a></li>
+</ul>
+<h3 id="cnpmjs镜像"><a href="#cnpmjs镜像" class="headerlink" title="cnpmjs镜像"></a>cnpmjs镜像</h3><ul>
+<li>搜索地址：<a href="http://cnpmjs.org/">http://cnpmjs.org/</a></li>
+<li>registry地址：<a href="http://r.cnpmjs.org/">http://r.cnpmjs.org/</a></li>
+</ul>
+<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：</p>
+<h3 id="1-临时使用"><a href="#1-临时使用" class="headerlink" title="1.临时使用"></a>1.临时使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm --registry https:&#x2F;&#x2F;registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure>
+<h3 id="2-持久使用"><a href="#2-持久使用" class="headerlink" title="2.持久使用"></a>2.持久使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm config set registry https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 配置后可通过下面方式来验证是否成功</span><br><span class="line">npm config get registry</span><br><span class="line">&#x2F;&#x2F; 或</span><br><span class="line">npm info express</span><br></pre></td></tr></table></figure>
+<h3 id="3-通过cnpm使用"><a href="#3-通过cnpm使用" class="headerlink" title="3.通过cnpm使用"></a>3.通过cnpm使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g cnpm --registry&#x3D;https:&#x2F;&#x2F;registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用</span><br><span class="line">cnpm install express</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>NodeJS</category>
+        <category>Npm</category>
+      </categories>
+      <tags>
+        <tag>npm</tag>
+        <tag>rnpm</tag>
+        <tag>NodeJS</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>path.join 与 path.resolve 的区别</title>
+    <url>/2020/03/23/path-join-vs-path-resolve/</url>
+    <content><![CDATA[<h1 id="path-join-与-path-resolve-的区别"><a href="#path-join-与-path-resolve-的区别" class="headerlink" title="path.join 与 path.resolve 的区别"></a>path.join 与 path.resolve 的区别</h1><ol>
+<li>对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。 </li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;/a&#x27;</span>, <span class="string">&#x27;/b&#x27;</span>) <span class="comment">// &#x27;/b&#x27;</span></span><br></pre></td></tr></table></figure>
+<ol start="2">
+<li>path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。</li>
+</ol>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">path.join(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;a/b&#x27;</span></span><br><span class="line">path.resolve(<span class="string">&#x27;./a&#x27;</span>, <span class="string">&#x27;./b&#x27;</span>) <span class="comment">// &#x27;/Users/username/Projects/webpack-demo/a/b&#x27;</span></span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>NodeJS</category>
+      </categories>
+      <tags>
+        <tag>NodeJS</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>由打印引起的一点小问题，写table时别忘了写thead和tbody</title>
+    <url>/2020/02/12/print-table-problem/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这两天复工，公司一个小伙伴在群里问了一个问题</p>
+<blockquote>
+<p>如何在打印表格的时候，让超过一页的表格分割线不被截断</p>
+</blockquote>
+<p>说着他有贴上来了一张图，一张因为跨页被截断了的表格，说实话打印的场景接触的不多，打印表格一般都是制式的样式所以也不会出现这问题，一时间也没有头绪，想着这个是不是没什么办法解决，隔天他发来一个消息，说是解决了，给表格里加上了 <code>tr</code> <code>td</code> 就好了，接着他又发来一张图，还真是，不过上下边距发生了一些变化，我问他是不是自己改了边距所以好了，他说没改，然后我问他那他是怎么解决的，他说因为实在找不到问题解决方案和产生原因，于是就把代码重构了一下，按照标准写法写了一下，结果就好了。。。怎么说呢，也是神奇，我也到网上去查了查相关的材料，并没有特别对的上的原因，凭感觉来说，应该是thead和tbody上有默认的css样式解决了上面的问题，暂且记下这个问题，避免以后遇到又忘了是怎么回事。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端问题</category>
+      </categories>
+      <tags>
+        <tag>奇怪问题</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</title>
+    <url>/2020/02/11/restful-architecture/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="什么是-RESTful"><a href="#什么是-RESTful" class="headerlink" title="什么是 RESTful"></a>什么是 RESTful</h2><blockquote>
+<p>REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。</p>
+</blockquote>
+<p>实际上就是 url 风格/ 路由风格 ， 给出一种写路由的原则  —  面向资源<br>tip：静态路由利于seo优化 api/news/1，动态路由不利于seo优化 api/news?id=1</p>
+<p>原来的风格<br>| 路由 | 功能 | 描述 |<br>| —- | —- |——|<br>| <a href="http://127.0.0.1/user/query/1">http://127.0.0.1/user/query/1</a>     | 查询 | 根据ID查询用户信息 |<br>| <a href="http://127.0.0.1/user/save">http://127.0.0.1/user/save</a>        | 保存 | 注册用户 |<br>| <a href="http://127.0.0.1/user/update">http://127.0.0.1/user/update</a>      | 更新 | 修改用户 |<br>| <a href="http://127.0.0.1/user/delete/%7Bid%7D">http://127.0.0.1/user/delete/{id}</a> | 删除 | 删除用户 |</p>
+<p>RESTful — 面向资源：对于同一个资源都在同一个 URL 进行，通过判断 HTTP 请求的类型来决定做不同的事<br>/user 一个资源<br>| 路由                    | 请求类型 |<br>| ———————– | ——– |<br>| <a href="http://127.0.0.1/user/1">http://127.0.0.1/user/1</a> | GET      |<br>| <a href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | POST     |<br>| <a href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | PUT      |<br>| <a href="http://127.0.0.1/user">http://127.0.0.1/user</a>   | DELETE   |</p>
+<p>URL 描述资源 ， HTTP 描述请求。（HTTP协议无语义无状态 —- 降低复杂度，业务无关 — 架构代码业务无关)</p>
+<p>RESTful 采用的是顶层路由</p>
+<blockquote>
+<p>顶层路由设计：不需要有物理文件映射路由</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// express</span></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line">app.get(<span class="string">&#x27;/case.avi&#x27;</span>,<span class="function">(<span class="params">req, res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不需要对应物理文件</span></span><br><span class="line">&#125;)</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+<p>原生接口</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123; <span class="comment">// 连接池自己管理 不用关闭</span></span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = http.createServer(<span class="keyword">async</span> (req,res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">if</span>(req.method === <span class="string">&#x27;POST&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起post请求&#x27;&#125;))</span></span><br><span class="line">			req.on(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">async</span> (data)=&gt;&#123;</span><br><span class="line">				arr.push(data)</span><br><span class="line">			&#125;)</span><br><span class="line">			req.on(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">				<span class="keyword">let</span> buffer = Buffer.concat(arr);</span><br><span class="line">				<span class="comment">// json对象</span></span><br><span class="line">				<span class="keyword">let</span> &#123;username,pasword&#125; = <span class="built_in">JSON</span>.parse(buffer.toString())</span><br><span class="line">				<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">				<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">				<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">				<span class="comment">// console.log(data)</span></span><br><span class="line">				<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">					<span class="comment">// 写入数据库</span></span><br><span class="line">					password = md5(password);</span><br><span class="line">					<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">					<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">					res.end(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">						<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">						<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">					&#125;))</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">if</span>(req.method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(req.url === <span class="string">&#x27;/user&#x27;</span>)&#123;</span><br><span class="line">			<span class="comment">// res.end(JSON.stringify(&#123;&#x27;message&#x27;:&#x27;对user发起get请求&#x27;&#125;))</span></span><br><span class="line">			<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin`</span></span><br><span class="line">			<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">			res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;).listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// .http 文件</span></span><br><span class="line">@url = http:<span class="comment">//localhost:3000</span></span><br><span class="line">@type = Content-Type: applications</span><br><span class="line"></span><br><span class="line">GET &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line">POST &#123;&#123;url&#125;&#125;/user HTTP/<span class="number">1.1</span></span><br><span class="line">&#123;&#123;type&#125;&#125;</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">	username:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">	password:<span class="number">123456</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>使用express实现(express — generater yard ,koa — async await)</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = express()</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> bodyparse = <span class="built_in">require</span>(<span class="string">&#x27;body-parse&#x27;</span>)</span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line">app.use(bodyparse.urlencoded(&#123;</span><br><span class="line">	extended:<span class="literal">true</span> <span class="comment">// 返回对象是兼职对，false - string/array true - any</span></span><br><span class="line">&#125;))</span><br><span class="line">app.use(bodyparse.json())</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> (req.res)=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123; username , password&#125; = req.body</span><br><span class="line">	<span class="comment">// console.log(username,pasword)</span></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`selct user from admin where user = <span class="subst">$&#123;username&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	<span class="comment">// console.log(data)</span></span><br><span class="line">	<span class="keyword">if</span>(data.length &gt;=<span class="number">1</span> )&#123;</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;用户名已经注册&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">// 写入数据库</span></span><br><span class="line">		password = md5(password);</span><br><span class="line">		<span class="keyword">let</span> sql = <span class="string">`INSERT INTO admin (user,password) VALUES (&#x27;<span class="subst">$&#123;username&#125;</span>&#x27;,&#x27;<span class="subst">$&#123;password&#125;</span>&#x27;)`</span></span><br><span class="line">		<span class="keyword">await</span> conn.query(sql);</span><br><span class="line">		res.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">			<span class="string">&#x27;status&#x27;</span>:<span class="number">200</span>,</span><br><span class="line">			<span class="string">&#x27;message&#x27;</span>:<span class="string">&#x27;注册成功&#x27;</span></span><br><span class="line">		&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&#x27;/user/:id&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	res.send(req.params.id)</span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> sql = <span class="string">`SELECT id,user,password FROM admin WHERE id = <span class="subst">$&#123;req.params.id&#125;</span>`</span></span><br><span class="line">	<span class="keyword">let</span> data = <span class="keyword">await</span> conn.query(sql);</span><br><span class="line">	res.end(<span class="built_in">JSON</span>.stringify(data))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
+
+<p>使用koa实现</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	host:<span class="string">&#x27;localhost&#x27;</span>, </span><br><span class="line">	user:<span class="string">&#x27;root&#x27;</span>, </span><br><span class="line">	password:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">	database:<span class="string">&#x27;user&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// libs/database.js</span></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;../config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>); <span class="comment">// mysql</span></span><br><span class="line"><span class="keyword">const</span> co = <span class="built_in">require</span>(<span class="string">&#x27;co-mysql&#x27;</span>) <span class="comment">// 异步同步化</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">let</span> db = mysql.createPool(&#123;</span><br><span class="line">	host:config.host, </span><br><span class="line">	user:config.user, </span><br><span class="line">	password:config.password,</span><br><span class="line">	database:config.database</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> conn = co(db)</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/user/index.js</span></span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> md5 = <span class="built_in">require</span>(<span class="string">&#x27;md5-node&#x27;</span>) <span class="comment">// md5加密</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	ctx.body = <span class="string">&#x27;主页&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">router.post(<span class="string">&#x27;/user&#x27;</span>,<span class="keyword">async</span> ctx=&gt;&#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;username,password&#125; = ctx.request.body</span><br><span class="line">	<span class="comment">// console.log(username,password)</span></span><br><span class="line">	ctx.body = &#123;</span><br><span class="line">		username,password</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">module</span>.exports = router.routes();</span><br><span class="line"></span><br><span class="line"><span class="comment">// app.js</span></span><br><span class="line"><span class="keyword">const</span> koa = <span class="built_in">require</span>(<span class="string">&#x27;koa&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">&#x27;koa-router&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> body = <span class="built_in">require</span>(<span class="string">&#x27;koa-bodyparse&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&#x27;config&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa()</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router()</span><br><span class="line">app.context.db = <span class="built_in">require</span>(<span class="string">&#x27;./libs/database&#x27;</span>)</span><br><span class="line">app.context.config = config</span><br><span class="line">app.use(body())</span><br><span class="line">router.use(<span class="string">&#x27;/api&#x27;</span>,<span class="built_in">require</span>(<span class="string">&#x27;./router/user&#x27;</span>))</span><br><span class="line">app.use(router.routes())</span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>NodeJS</category>
+      </categories>
+      <tags>
+        <tag>RESTful</tag>
+        <tag>NodeJS</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>解决get请求过长的问题小记</title>
+    <url>/2020/01/09/solve-get-params-so-long-problem/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>就在前天，公司里一位新入职的前端小伙伴找到我说遇到了一个问题，自己写的vue代码本地运行是好用的，但是打包后提给后台就访问不了接口了，刚开始我以为是代理配置的有问题，但是经过检查也没什么问题，因为是个<code>get</code>方法，所以我就直接在浏览器地址里敲了api地址，也能正常获取到数据，那么这么看就不是代理或者接口的问题，后来我又看了下调试工具，network中根本就没发出请求，我怀疑是直接前台就拦截了，最后我发现他这个api参数超级长，长的相当吓人，可以看一下下图。<br><img src="https://s2.ax1x.com/2020/01/09/lROUMt.png" alt="lROUMt.png"><br>我记得url是有长度限制的，于是我就把url变短再次请求，虽然因为参数不全，接口报了错，但是发出去了，由此我定位应该是url超长，因为vue中配置了什么导致的访问被拦截了。于是我就开始了搜索引擎查找解决方案之旅，接下来就把我了解到的信息一一整理。</p>
+<span id="more"></span>
+
+<h2 id="URL-限制"><a href="#URL-限制" class="headerlink" title="URL 限制"></a>URL 限制</h2><p>首先我在网上找到了一份资料介绍了URL长度的相关资料，从下面可以看出，从HTTP协议层面以及Get请求层面都没有什么限制，这个限制来自于<em><strong>浏览器或者服务器的限制</strong></em>。</p>
+<blockquote>
+<p>Microsoft Internet Explorer (Browser)<br>IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。<br>Firefox (Browser)<br>对于Firefox浏览器URL的长度限制为65,536个字符。<br>Safari (Browser)<br>URL最大长度限制为 80,000个字符。<br>Opera (Browser)<br>URL最大长度限制为190,000个字符。<br>Google (Browser)<br>URL最大长度限制为8182个字符。<br>Apache (Server)<br>能接受最大url长度为8,192个字符。<br>Microsoft Internet Information Server(IIS)<br>能接受最大url的长度为16,384个字符。</p>
+</blockquote>
+<p>而且，中文会进行编码，一个汉字编码后会生成9个字符，这样算来，IE下最多也就能输入231个中文，再多就完蛋了，那么通过get请求传递参数就会显得很麻烦。</p>
+<p>通常情况下，这种超长参数的请求我们都会用post，有些地方也会说post请求没有长度限制，但是前面说了，实际上HTTP协议层面并没有任何的限制，限制只出现在浏览器或者服务器限制，get和post请求在底层上其实是一样的。</p>
+<p>最后项目修改了请求类型，把 <code>get</code> 请求改成了 <code>post</code> 请求，在网上实际还找到了另外两个方案，如果对同一组参数频繁访问的化，也可以用 <code>post+get</code> 请求的方式去处理，或者用 <code>sessionStorage</code> 下面简单介绍一下。</p>
+<ol>
+<li>将预览内容 <code>post</code> 到服务端，根据一个唯一标识生成缓存(有效时间5分钟)，将唯一标识返回到前端，前端通过get方式传递唯一标识请求预览逻辑，拿到缓存的内容后渲染到页面。需要说明的是这里的缓存必须是分布式的。</li>
+<li>通过H5的会话缓存 <code>sessionStorage</code> 将预览内容存储在浏览器，打开预览页后从 <code>sessionStorage</code> 中拿到内容就可以渲染出页面了。</li>
+</ol>
+<p>上述两种方案都不太符合我们的项目所以最终还是选择了最简单的方式</p>
+<h2 id="GET-VS-POST"><a href="#GET-VS-POST" class="headerlink" title="GET VS POST"></a>GET VS POST</h2><ol>
+<li><p>多数浏览器对于POST采用两阶段发送数据的，先发送请求头，再发送请求体，即使参数再少再短，也会被分成两个步骤来发送（相对于GET），也就是第一步发送header数据，第二步再发送body部分。HTTP是应用层的协议，而在传输层有些情况TCP会出现两次连结的过程，HTTP协议本身不保存状态信息，一次请求一次响应。对于TCP而言，通信次数越多反而靠性越低，能在一次连结中传输完需要的消息是最可靠的，尽量使用GET请求来减少网络耗时。如果通信时间增加，这段时间客户端与服务器端一直保持连接状态，在服务器侧负载可能会增加，可靠性会下降。</p>
+</li>
+<li><p>GET请求能够被cache，GET请求能够被保存在浏览器的浏览历史里面（密码等重要数据GET提交，别人查看历史记录，就可以直接看到这些私密数据）POST不进行缓存。</p>
+</li>
+<li><p>GET参数是带在URL后面，传统IE中URL的最大可用长度为2048字符，其他浏览器对URL长度限制实现上有所不同。POST请求无长度限制（目前理论上是这样的）。</p>
+</li>
+<li><p>GET提交的数据大小，不同浏览器的限制不同，一般在2k-8K之间，POST提交数据比较大，大小靠服务器的设定值限制，而且某些数据只能用 POST 方法「携带」，比如 file。</p>
+</li>
+<li><p>全部用POST不是十分合理，最好先把请求按功能和场景分下类，对数据请求频繁，数据不敏感且数据量在普通浏览器最小限定的2k范围内，这样的情况使用GET。其他地方使用POST。</p>
+</li>
+<li><p>GET 的本质是「得」，而 POST 的本质是「给」。而且，GET 是「幂等」的，在这一点上，GET 被认为是「安全的」。但实际上 server 端也可以用作资源更新，但是这种用法违反了约定，容易造成 CSRF（跨站请求伪造）。</p>
+</li>
+</ol>
+<h1 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h1><p>以上是这次遇到问题后学到的一点知识，可能并不全面，后续如果遇到了类似的问题会继续丰富这篇文章。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端问题</category>
+      </categories>
+      <tags>
+        <tag>ajax</tag>
+        <tag>get</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>给博客添加基于github-issue的评论系统</title>
+    <url>/2017/10/12/us-gitment/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>上篇文章介绍了<a href="https://lixuguang.github.io/2017/10/11/use-GitHub-Hexo-Next-make-blog/">如何利用github+hexo+next制作一个博客系统</a>，但是由于这个博客系统是基于静态页面的，所以无法完成评论功能，博客怎么可以没有评论功能呢，当然next主题提供了几个选项，但是国内你知道的，提供的几个评论功能都不是太好用，于是就上网找了好多资料，功夫不负有心人，让我找到了一个名曰gitment的基于github-issue的评论插件，下面就介绍大家如何使用这个插件。</p>
+<span id="more"></span>
+<h2 id="第一步-注册一个小程序（OAuth-Application）"><a href="#第一步-注册一个小程序（OAuth-Application）" class="headerlink" title="第一步 注册一个小程序（OAuth Application）"></a>第一步 注册一个小程序（OAuth Application）</h2><p>点击<a href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a>注册</p>
+<ul>
+<li>Application name 应用名称 这里随便写，我写的就是gitment</li>
+<li>Homepage URL 主页地址，你可以写你的博客地址，我写的是<a href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+<li>Application description 应用描述，这里随便写点什么，反正是自己用。</li>
+<li>Authorization callback URL 这个比较重要，请填写你的博客地址，我的是<a href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></li>
+</ul>
+<p>点击确定以后你会获得两个关键信息，下一步配置时会用到</p>
+<ul>
+<li>Client ID</li>
+<li>Client Secret</li>
+</ul>
+<h2 id="第二步-修改主题配置文件，添加gitment评论功能"><a href="#第二步-修改主题配置文件，添加gitment评论功能" class="headerlink" title="第二步 修改主题配置文件，添加gitment评论功能"></a>第二步 修改主题配置文件，添加gitment评论功能</h2><p>因为用的是next主题，所以配置文件地址如下：<br><strong>themes/next/_config.yml</strong></p>
+<h3 id="1、在其中添加"><a href="#1、在其中添加" class="headerlink" title="1、在其中添加:"></a>1、在其中添加:</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># Gitment</span><br><span class="line"># Introduction: https:&#x2F;&#x2F;imsun.net&#x2F;posts&#x2F;gitment-introduction&#x2F;</span><br><span class="line">gitment:</span><br><span class="line">  enable: true</span><br><span class="line">  githubID: yourid &#x2F;&#x2F; 我的是lixuguang</span><br><span class="line">  repo: yourrepo &#x2F;&#x2F; 我的是lixuguang.github.io 必须跟githubID保持一致的用户名</span><br><span class="line">  ClientID: yourid &#x2F;&#x2F; 上面开通程序获得的ClientID</span><br><span class="line">  ClientSecret: yoursecret &#x2F;&#x2F; 上面开通程序获得的Client Secret</span><br><span class="line">  lazy: false &#x2F;&#x2F;是否需要点击展开评论才能可见评论，一般设置为false</span><br></pre></td></tr></table></figure>
+<p><strong>一定要注意空格，不然会报错的，别问我咋知道的</strong></p>
+<h3 id="2、然后在主题的配置语言环境的文件添加一句话"><a href="#2、然后在主题的配置语言环境的文件添加一句话" class="headerlink" title="2、然后在主题的配置语言环境的文件添加一句话"></a>2、然后在主题的配置语言环境的文件添加一句话</h3><p><code>en.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gitmentbutton: Show comments from Gitment</span><br></pre></td></tr></table></figure>
+
+<p><code>zh-Hans.yml</code>增加:</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gitmentbutton: 显示 Gitment 评论</span><br></pre></td></tr></table></figure>
+<p>如果是中文网站英文配置也可以不用写。</p>
+<h3 id="3、添加新的Dom结构"><a href="#3、添加新的Dom结构" class="headerlink" title="3、添加新的Dom结构"></a>3、添加新的Dom结构</h3><p><strong>修改主题layout/_partials/comments.swig</strong><br>在最后一个elseif分支后添加一个elseif分支：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% elseif theme.gitment.enable %&#125;</span><br><span class="line">       &#123;% if theme.gitment.lazy %&#125;</span><br><span class="line">         &lt;div onclick&#x3D;&quot;ShowGitment()&quot; id&#x3D;&quot;gitment-display-button&quot;&gt;&#123;&#123;  __(&#39;gitmentbutton&#39;) &#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot; style&#x3D;&quot;display:none&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% else %&#125;</span><br><span class="line">         &lt;div id&#x3D;&quot;gitment-container&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">       &#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig"><a href="#4、-在主题下layout-third-party-comments-目录下中添加文件gitment-swig" class="headerlink" title="4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig"></a>4、 在主题下layout/_third-party/comments/目录下中添加文件gitment.swig</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% if theme.gitment.enable %&#125;</span><br><span class="line">   &#123;% set owner &#x3D; theme.gitment.githubID %&#125;</span><br><span class="line">   &#123;% set repo &#x3D; theme.gitment.repo %&#125;</span><br><span class="line">   &#123;% set cid &#x3D; theme.gitment.ClientID %&#125;</span><br><span class="line">   &#123;% set cs &#x3D; theme.gitment.ClientSecret %&#125;</span><br><span class="line">   &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;style&#x2F;default.css&quot;&gt;</span><br><span class="line">   &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;imsun.github.io&#x2F;gitment&#x2F;dist&#x2F;gitment.browser.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% if not theme.gitment.lazy %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">               id: window.location.pathname, </span><br><span class="line">               owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">               repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">               oauth: &#123;</span><br><span class="line">                   client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                   client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">               &#125;&#125;);</span><br><span class="line">           gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% else %&#125;</span><br><span class="line">       &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">           function ShowGitment()&#123;</span><br><span class="line">               document.getElementById(&quot;gitment-display-button&quot;).style.display &#x3D; &quot;none&quot;;</span><br><span class="line">               document.getElementById(&quot;gitment-container&quot;).style.display &#x3D; &quot;block&quot;;</span><br><span class="line">               var gitment &#x3D; new Gitment(&#123;</span><br><span class="line">                   id: document.location.href, </span><br><span class="line">                   owner: &#39;&#123;&#123;owner&#125;&#125;&#39;,</span><br><span class="line">                   repo: &#39;&#123;&#123;repo&#125;&#125;&#39;,</span><br><span class="line">                   oauth: &#123;</span><br><span class="line">                       client_id: &#39;&#123;&#123;cid&#125;&#125;&#39;,</span><br><span class="line">                       client_secret: &#39;&#123;&#123;cs&#125;&#125;&#39;,</span><br><span class="line">                   &#125;&#125;);</span><br><span class="line">               gitment.render(&#39;gitment-container&#39;);</span><br><span class="line">           &#125;</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">   &#123;% endif %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% include &#39;gitment.swig&#39; %&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="在主题下source-css-common-components-third-party-目录下添加gitment-styl文件"><a href="#在主题下source-css-common-components-third-party-目录下添加gitment-styl文件" class="headerlink" title="在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件"></a>在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件</h3><p>此配置文件为gitment的样式文件，需要修改样式可以在这里进行书写，这里修改一下按钮样式，另外将聊天框于文章框样式统一</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#gitment-display-button&#123;</span><br><span class="line">     display: inline-block;</span><br><span class="line">     padding: 0 15px;</span><br><span class="line">     color: #0a9caf;</span><br><span class="line">     cursor: pointer;</span><br><span class="line">     font-size: 14px;</span><br><span class="line">     border: 1px solid #0a9caf;</span><br><span class="line">     border-radius: 4px;</span><br><span class="line"> &#125;</span><br><span class="line"> #gitment-display-button:hover&#123;</span><br><span class="line">     color: #fff;</span><br><span class="line">     background: #0a9caf;</span><br><span class="line"> &#125;</span><br><span class="line">  #comments &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">    padding: 40px;</span><br><span class="line">    background: #fff;</span><br><span class="line">    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>然后在主题下source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可:</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@import &quot;gitment&quot;;</span><br></pre></td></tr></table></figure>
+<p>经过以上操作，gitment就被引入到你的博客里了。</p>
+<p>现在就可以让大家对你写的文章进行评论啦，怎么样是不是又学到啦，喜欢我的文章就请关注我的github吧。</p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+        <category>博客技巧</category>
+      </categories>
+      <tags>
+        <tag>Hexo</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端全栈和大前端有啥区别</title>
+    <url>/2020/04/15/talk-about-full-stack-big-fd/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>知乎真是个好地方，关注好自己喜欢的话题，经常会推送一些好的话题到你面前，这不刚刚就看到了一个人提问</p>
+<blockquote>
+<p>前端全栈和大前端有啥区别</p>
+</blockquote>
+<p>以前只听说过全栈，听说过大前端，但是没听说过前端全栈，对于前两个我自己也有一些理解，但从不敢说自己理解的对，带着强烈的好奇心我打开了这个问题，也看到了一位前端大神‘狼叔’的回复，感觉还是很到位的，也让我重新验证了自己的理解，所以就将狼叔的解答与我自己的认识相结合一下，做个记录。</p>
+<a id="more"></a>
+
+<h2 id="狼叔说"><a href="#狼叔说" class="headerlink" title="狼叔说"></a>狼叔说</h2><p>狼叔在解答这个疑问之前直接上了一张图，图我贴在下面供大家看一下<br><img src="https://s1.ax1x.com/2020/04/15/JicTqe.jpg" alt="JicTqe.jpg"><br>这么一张图实际上已经胜过千言了，但是为了方便大家理解，狼叔还是在下面对图进行了解释</p>
+<blockquote>
+<p>前端全栈：分node全栈和其他语言全栈，比如ror搞全栈是最早的，其他php、java也有，不过纯前端的不过，在react，angular之前搞后台还是可以的。<br>所以前端全栈，我理解是等同于node全栈的。node本身是做后端的，但在前端工程化和BFF领域大放异彩，所以node全栈涵盖了前端的方方面面，是比较合理的解释。<br>大前端：更泛化的概念，移动互联网时代开启后，hybrid曾经很火，基于h5和webview做跨端，确实是很理想的做法，但复杂交互搞不定，机器性能网络等是硬伤，所以后来出现了rn和weex，整体还是前端写法，所以hybrid里前端也是占了一定的开发，结合之前前端和node的关系，综合3者：1）app里的前端，2）前端，2）node全栈，统称为大前端。这里的”大“含义是可以做的事儿的范围更广，触达前后端移动端，对前端职责有明显提升。随着技术发展，基于electron的桌面开发也日进流程，ott和iot等领域采用js也愈来愈多，所以只要和用户直接触达的端采用了前端技术开发的都涵盖在大前端范畴内。</p>
+</blockquote>
+<p><a href="https://www.zhihu.com/question/379563850/answer/1152553428" target="_blank" rel="noopener">原帖地址</a></p>
+<h2 id="我说"><a href="#我说" class="headerlink" title="我说"></a>我说</h2><p>之前我的概念里前端扩展开来再进一步的话分两个方向，一个叫全栈另一个叫全端，‘栈’的话是纵向的，简单理解的话就是一款产品一个人能从设计到前端实现后端实现运维等一个人搞定，那么他就可以称之为全栈，狭义一点理解，就是前端后端都会，那么这里所说的前端全栈，我理解是更方便前端掌握的一些后端技能如node、php、ror等，而不是java这种后端技能，所以叫前端全栈，我想这里大部分指的都是node作为后端；</p>
+<p>那么我理解的全端是什么呢</p>
+<p>‘端’我理解为容器，任何跟用户直接接触的技术都是端的技术，早期的pc端，后来的手机端，手机端里又出现了h5、hybrid、native这么几种，后来又出现了小程序之类的容器，pc端也出现了如electron等客户端技术，那么随着物联网智能家居的出现，更多的端出现了，就如狼叔说的OTT和IOT领域也成了端，大前端的大是指范围广，属于用户直达所承载内容容器的都是端。</p>
+<p>总的来说跟狼叔的理解一致，我个人也努力在往全栈全端发展，不过真的好难还有很长的路要走。</p>
+]]></content>
+      <categories>
+        <category>大前端</category>
+        <category>全栈</category>
+      </categories>
+      <tags>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</title>
+    <url>/2017/10/11/use-GitHub-Hexo-Next-make-blog/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
+<p>开博客貌似并不是一件难事，现在有很多的方式开博客，而且现在博客貌似也不再流行，但是作为一个开发者，维护一个技术博客对自己的发展是很有好处的，出名者如阮一峰等，所以还是想要做一个技术博客的。</p>
+</blockquote>
+<blockquote>
+<p>开博客可以选择网上现有的博客系统如博客园以及其他各大公司提供的博客系统，也可以选择如wordpress等博客程序自行搭建博客系统，前者省事，但可自定义设置不足不符合一个爱折腾的人的性格，后者复杂些，爱折腾的可以学着搭建，但是服务器域名是个让人头疼的事，还有数据库等操作，着实麻烦，如今又有了另外一个选择，那就是利用GitHub和一些静态的博客系统搭建一个纯静态的博客系统，不花钱又能折腾，而且还是命令行下的，装B感觉棒棒的，另外搭配时下流行的MarkDown语法，做笔记正合我意。</p>
+</blockquote>
+<span id="more"></span>
+
+<h2 id="技术栈选型"><a href="#技术栈选型" class="headerlink" title="技术栈选型"></a>技术栈选型</h2><blockquote>
+<p>这里说是技术栈选型可能并不是很恰当，但又找不到合适的描述，就是把需要的技术介绍一下，如果还不会的，可以自行学习，或者看看我的其他文章。</p>
+</blockquote>
+<ul>
+<li>node（npm），现在node这么火，没用过都不好意思出门，但是如果你还不回的话，就先自行学习安装一下吧。</li>
+<li>Hexo 静态博客程序，其实还有很多，只不过这个比较新，而且搭配Next非常漂亮，就选了它。</li>
+<li>Next 可以说是Hexo的定制系统，不仅仅是做了个皮肤，简洁美观的配置项和官网说明深得我心。</li>
+</ul>
+<h2 id="搭建步骤（安装步骤）"><a href="#搭建步骤（安装步骤）" class="headerlink" title="搭建步骤（安装步骤）"></a>搭建步骤（安装步骤）</h2><h3 id="安装Hexo-Hexo官网"><a href="#安装Hexo-Hexo官网" class="headerlink" title="安装Hexo Hexo官网"></a>安装Hexo <a href="https://hexo.io/">Hexo官网</a></h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-cli -g &#x2F;&#x2F; 安装hexo的脚手架工具</span><br><span class="line">$ hexo init blog &#x2F;&#x2F; 初始化博客</span><br><span class="line">$ cd blog &#x2F;&#x2F; 返回博客目录</span><br><span class="line">$ npm install &#x2F;&#x2F; 安装依赖</span><br><span class="line">$ hexo server &#x2F;&#x2F; 启动博客</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>怎么样五行代码就生成并运行了一个博客是不是超简单。<br>下面我们看一下生成的博客的目录</p>
+</blockquote>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
+<p><code>_config.yml</code>这是博客的配置文件，比如博客名称，副标题，作者等信息都在这个文件里设置。</p>
+<p><code>package.json</code>这是博客的依赖文件可以忽略</p>
+<p><code>scaffolds</code>这是博客的模板目录，当你要写一篇文章时，这里会有文章的默认类型。</p>
+<p><code>source</code>这是博客的网站资源，包括发布的文章（<code>_posts</code>）、关于、分类还有上传文件等。</p>
+<p><code>themes</code>这是博客的皮肤。</p>
+<p>更多配置信息请查阅官网手册</p>
+<h3 id="安装Next主题-Next官网"><a href="#安装Next主题-Next官网" class="headerlink" title="安装Next主题 Next官网"></a>安装Next主题 <a href="http://theme-next.iissnan.com/">Next官网</a></h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ cd your-hexo-site</span><br><span class="line">$ git clone https:&#x2F;&#x2F;github.com&#x2F;iissnan&#x2F;hexo-theme-next themes&#x2F;next</span><br></pre></td></tr></table></figure>
+
+<p>然后到<code>_config.yml</code>配置文件将主题配置改成next就可以使用next的皮肤了</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>
+<p>皮肤也有配置文件，为跟Hexo进行区分Hexo的配置文件称为<code>站点配置文件</code>， 皮肤配置文件称为<code>主题配置文件</code>。</p>
+<p>对两个配置文件进行简单配置后，符合需求的博客就搭建而成了，这里有个友好的建议，配置文件如果配置不正确将不能正确运行博客，所以在配置前务必保留好原始配置文件，注意配置时不要缺了空格，不要问我为什么知道这个。</p>
+<h3 id="更新博客主题"><a href="#更新博客主题" class="headerlink" title="更新博客主题"></a>更新博客主题</h3><p><a href="https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md">https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/UPDATE-FROM-5.1.X.md</a></p>
+<h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><p>博客已经搭建好了，接下来就是写博客了，那么如何开始写博客呢，超级简单一行命令足以：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">hexo new [layout] &lt;title&gt;  </span><br><span class="line">&#x2F;&#x2F; layout 为模板类型可以省略，title为文章标题，通常可以简写为如下</span><br><span class="line">hexo new title</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>新建命令执行后在<code>_posts</code>的目录下就会生成一个你刚才命名的md后缀的文件，这就是一个MarkDown语法的文件，（如果不了解MarkDown语法的可以去学一下，很简单的符号语言，或者像我一样用支持MarkDown语法的编辑器来写文章。新建的文章打开内容如下</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">tags:</span><br><span class="line">---</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>非常好理解，title就是标题，date为创建时间，tags是标签方便分类，但是这些并不全，还有些常用的分类没有写上，下面我将常用的进行补充</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: new-post</span><br><span class="line">date: 2017-10-11 15:01:09</span><br><span class="line">categories: </span><br><span class="line">	- NodeJS</span><br><span class="line">	- npm</span><br><span class="line">tags:</span><br><span class="line">	- npm</span><br><span class="line">	- NodeJS</span><br><span class="line">	- rnpm</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
+<p>这样补充后就有了常见博客的分类和标签的功能，是不是很简单。</p>
+<p>写完文章以后还要执行下面命令，生成静态页面</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ hexo generate &#x2F;&#x2F; 将md后缀文件生成成静态html文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+
+<p>这样我们就完成了博客的搭建和博客的书写，到现在我们就已经有了一个本地的博客，那么如何将博客上传到GitHub上呢？</p>
+<h2 id="将Blog上传至GitHub"><a href="#将Blog上传至GitHub" class="headerlink" title="将Blog上传至GitHub"></a>将Blog上传至GitHub</h2><p>github是一个代码托管的平台，为了方便描述代码功能，它提供了README.md文件进行说明，但是为了更好的展现，也提供了gitpage的功能，博客是基于这个功能进行的扩展，那么如何用gitpage的功能来实现博客系统呢？</p>
+<h3 id="创建仓库"><a href="#创建仓库" class="headerlink" title="创建仓库"></a>创建仓库</h3><p>创建一个以你的GitHub账号为开头命名的仓库，格式如下</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GitHub账号名称.github.io</span><br><span class="line">&#x2F;&#x2F; 如</span><br><span class="line">lixuguang.github.io</span><br></pre></td></tr></table></figure>
+<p>然后到blog系统的配置文件<code>_config.yml</code>里配置一下上传路径</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: &lt;repository url&gt;</span><br><span class="line">  </span><br><span class="line">&#x2F;&#x2F; 我的实例</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git@github.com:lixuguang&#x2F;lixuguang.github.io.git</span><br><span class="line">  branch: master</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置好就可以进行部署了，部署也很简单，只需要执行一下下面的命令。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save &#x2F;&#x2F; 安装上传工具</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>稍等一会，如果没有出现什么错误信息，那么你的部署就成功了。之后你就可以访问你的博客了，博客地址如下：<br>https://你的github账号.github.io/<br>我的如下：<br><a href="https://lixuguang.github.io/">https://lixuguang.github.io/</a></p>
+<p>现在你是不是已经学会如何利用github搭建一个静态的博客系统了呢，如果你还没有一个自己的技术博客，快来试试吧。</p>
+<h2 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h2><p>是不是觉得命令行还是挺麻烦的，要敲那么一大串字母，哈哈实际上这些常用命令是有缩写方式的，下面给大家介绍一下缩写方式。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ hexo server</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo s</span><br><span class="line"></span><br><span class="line">$ hexo generate</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo g</span><br><span class="line"></span><br><span class="line">$ hexo deploy</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo d</span><br><span class="line"></span><br><span class="line">$ hexo new</span><br><span class="line">&#x2F;&#x2F; 简写</span><br><span class="line">$ hexo n</span><br></pre></td></tr></table></figure>
+
+<p>另外每次发布之前最好执行以下命令，清理当前内容</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>以防出现冲突的情况，具体动作如下</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g -d &#x2F;&#x2F; 文件生成后立即部署网站</span><br><span class="line">$ hexo d -g &#x2F;&#x2F; 部署之前预先生成静态文件</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><ol>
+<li>SSH问题</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;lixuguang316@gmail.com&quot;</span><br><span class="line">&#x2F;&#x2F; 填写你自己的github邮箱</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>敲三下回车，之后会在</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">C:\Users\Administrator\.ssh &#x2F;&#x2F; windows下</span><br><span class="line">open ~&#x2F;.ssh &#x2F;&#x2F; Mac下打开ssh文件  </span><br></pre></td></tr></table></figure>
+<p>文件夹下生成两个文件<code>id_rsa</code>（私钥）、<code>id_rsa.pub</code>（公钥），在github上的SSH处添加新的ssh，然后将<code>公钥</code>内容贴到上面起个名字可以叫hexo，保存，然后在git bash下敲击</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ ssh git@github.com</span><br></pre></td></tr></table></figure>
+<p>然后敲<code>yes</code>就可以上传blog代码了<br>怎么样会了么？更多高阶玩法请阅读官方说明文档，文章如有谬误之处请各位指出，如果觉得文章对你有所帮助我将十分开心，如果你喜欢我的文章可以到我的github上点个<code>fork</code>，谢谢你的阅读。</p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+        <category>博客技巧</category>
+      </categories>
+      <tags>
+        <tag>Hexo</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>React 源码剖析系列 － 不可思议的 react diff【转载】</title>
+    <url>/2020/04/03/source-code-react-diff/</url>
+    <content><![CDATA[<p>目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。</p>
+<p>React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文从源码入手，深入剖析 React diff 的不可思议之处。</p>
+<p>阅读本文需要对 React 有一定的了解，如果你不知何为 React，请详读 <a href="http://facebook.github.io/react/docs/getting-started.html">React 官方文档</a>。<br>如果你对 React diff 存在些许疑惑，或者你对算法优化感兴趣，那么本文值得阅读和讨论。</p>
+<span id="more"></span>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，让用户可以无需顾忌性能问题而”任性自由”的刷新页面，让开发者也可以无需关心 Virtual DOM 背后的运作原理，因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染，因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。</p>
+<p><em><strong>行文至此，可能会有读者质疑：React 无非就是引入 diff 这一概念，且 diff 算法也并非其首创，何必吹嘘的如此天花乱坠呢？</strong></em></p>
+<p>其实，正是因为 diff 算法的普识度高，就更应该认可 React 针对 diff 算法优化所做的努力与贡献，更能体现 React 开发者们的魅力与智慧！</p>
+<h2 id="传统-diff-算法"><a href="#传统-diff-算法" class="headerlink" title="传统 diff 算法"></a>传统 diff 算法</h2><p>计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。<a href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">传统 diff 算法</a>通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着如果要展示1000个节点，就要依次执行上十亿次的比较。这种指数型的性能消耗对于前端渲染场景来说代价太高了！现今的 CPU 每秒钟能执行大约30亿条指令，即便是最高效的实现，也不可能在一秒内计算出差异情况。</p>
+<p>如果 React 只是单纯的引入 diff 算法而没有任何的优化改进，那么其效率是远远无法满足前端渲染所要求的性能。</p>
+<p>因此，想要将 diff 思想引入 Virtual DOM，就需要设计一种稳定高效的 diff 算法，而 React 做到了！</p>
+<p>那么，React diff 到底是如何实现的呢？</p>
+<h2 id="详解-React-diff"><a href="#详解-React-diff" class="headerlink" title="详解 React diff"></a>详解 React diff</h2><p>传统 diff 算法的复杂度为 O(n^3)，显然这是无法满足性能要求的。<em><strong>React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。</strong></em></p>
+<h3 id="diff-策略"><a href="#diff-策略" class="headerlink" title="diff 策略"></a>diff 策略</h3><ol>
+<li>Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。</li>
+<li>拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。</li>
+<li>对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。</li>
+</ol>
+<p>基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。</p>
+<ul>
+<li>tree diff</li>
+<li>component diff</li>
+<li>element diff</li>
+</ul>
+<blockquote>
+<p>本文中源码 <a href="https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactMultiChild.js">ReactMultiChild.js</a></p>
+</blockquote>
+<h3 id="tree-diff"><a href="#tree-diff" class="headerlink" title="tree diff"></a>tree diff</h3><p>基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。</p>
+<p>既然 DOM 节点跨层级的移动操作少到可以忽略不计，针对这一现象，React 通过 updateDepth 对 Virtual DOM 树进行层级控制，只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。</p>
+<p><img src="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg" alt="https://pic1.zhimg.com/0c08dbb6b1e0745780de4d208ad51d34_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  updateDepth++;</span><br><span class="line">  <span class="keyword">var</span> errorThrown = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>._updateChildren(nextNestedChildrenElements, transaction, context);</span><br><span class="line">    errorThrown = <span class="literal">false</span>;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    updateDepth--;</span><br><span class="line">    <span class="keyword">if</span> (!updateDepth) &#123;</span><br><span class="line">      <span class="keyword">if</span> (errorThrown) &#123;</span><br><span class="line">        clearQueue();</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        processQueue();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>分析至此，<em><strong>大部分人可能都存在这样的疑问：如果出现了 DOM 节点跨层级的移动操作，React diff 会有怎样的表现呢？</strong></em>是的，对此我也好奇不已，不如试验一番。</p>
+<p>如下图，A 节点（包括其子节点）整个被移动到 D 节点下，由于 React 只会简单的考虑同层级节点的位置变换，而对于不同层级的节点，只有创建和删除操作。当根节点发现子节点中 A 消失了，就会直接销毁 A；当 D 发现多了一个子节点 A，则会创建新的 A（包括子节点）作为其子节点。此时，React diff 的执行情况：<em><strong>create A -&gt; create B -&gt; create C -&gt; delete A</strong></em>。</p>
+<p>由此可发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是以 A 为根节点的树被整个重新创建，这是一种影响 React 性能的操作，<em><strong>因此 React 官方建议不要进行 DOM 节点跨层级的操作</strong></em>。</p>
+<blockquote>
+<p>注意：在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg" alt="https://pic2.zhimg.com/d712a73769688afe1ef1a055391d99ed_r.jpg"></p>
+<h3 id="component-diff"><a href="#component-diff" class="headerlink" title="component diff"></a>component diff</h3><p>React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。</p>
+<ul>
+<li>如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。</li>
+<li>如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。</li>
+<li>对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。</li>
+</ul>
+<p>如下图，当 component D 改变为 component G 时，即使这两个 component 结构相似，一旦 React 判断 D 和 G 是不同类型的组件，就不会比较二者的结构，而是直接删除 component D，重新创建 component G 以及其子节点。虽然当两个 component 是不同类型但结构相似时，React diff 会影响性能，但正如 React 官方博客所言：不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。</p>
+<p><img src="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg" alt="https://pic1.zhimg.com/52654992aba15fc90e2dac8b2387d0c4_r.jpg"></p>
+<h3 id="element-diff"><a href="#element-diff" class="headerlink" title="element diff"></a>element diff</h3><p>当节点处于同一层级时，React diff 提供了三种节点操作，分别为：<em><strong>INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）</strong></em>。</p>
+<ul>
+<li><p><em><strong>INSERT_MARKUP</strong></em> ，新的 component 类型不在老集合里， 即是全新的节点，需要对新节点执行插入操作。</p>
+</li>
+<li><p><em><strong>MOVE_EXISTING</strong></em> ，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。</p>
+</li>
+<li><p><em><strong>REMOVE_NODE</strong></em> ，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。</p>
+</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueInsertMarkup</span>(<span class="params">parentInst, markup, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,</span><br><span class="line">    markupIndex: markupQueue.push(markup) - <span class="number">1</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: <span class="literal">null</span>,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueMove</span>(<span class="params">parentInst, fromIndex, toIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: toIndex,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enqueueRemove</span>(<span class="params">parentInst, fromIndex</span>) </span>&#123;</span><br><span class="line">  updateQueue.push(&#123;</span><br><span class="line">    parentInst: parentInst,</span><br><span class="line">    parentNode: <span class="literal">null</span>,</span><br><span class="line">    type: ReactMultiChildUpdateTypes.REMOVE_NODE,</span><br><span class="line">    markupIndex: <span class="literal">null</span>,</span><br><span class="line">    content: <span class="literal">null</span>,</span><br><span class="line">    fromIndex: fromIndex,</span><br><span class="line">    toIndex: <span class="literal">null</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如下图，老集合中包含节点：A、B、C、D，更新后的新集合中包含节点：B、A、D、C，此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。</p>
+<p><img src="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg" alt="https://pic2.zhimg.com/7541670c089b84c59b84e9438e92a8e9_r.jpg"></p>
+<p>React 发现这类操作繁琐冗余，因为这些都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。</p>
+<p>针对这一现象，React 提出优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，虽然只是小小的改动，性能上却发生了翻天覆地的变化！</p>
+<p>新老集合所包含的节点，如下图所示，新老集合进行 diff 差异化对比，通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置，此时 React 给出的 diff 结果为：B、D 不做任何操作，A、C 进行移动操作，即可。</p>
+<p><img src="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg" alt="https://pic4.zhimg.com/c0aa97d996de5e7f1069e97ca3accfeb_r.jpg"></p>
+<p>那么，如此高效的 diff 到底是如何运作的呢？让我们通过源码进行详细分析。</p>
+<p>首先对新集合的节点进行循环遍历，for (name in nextChildren)，通过唯一 key 可以判断新老集合中是否存在相同的节点，if (prevChild === nextChild)，如果存在相同节点，则进行移动操作，但在移动前需要将当前节点在老集合中的位置与 lastIndex 进行比较，if (child._mountIndex &lt; lastIndex)，则进行节点移动操作，否则不执行该操作。这是一种顺序优化手段，lastIndex 一直在更新，表示访问过的节点在老集合中最右的位置（即最大的位置），如果新集合中当前访问的节点比 lastIndex 大，说明当前访问节点在老集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不用添加到差异队列中，即不执行移动操作，只有当访问的节点比 lastIndex 小时，才需要进行移动操作。</p>
+<p>以上图为例，可以更为清晰直观的描述 diff 的差异对比过程：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，通过对比节点位置判断是否进行移动操作，B 在老集合中的位置 B._mountIndex = 1，此时 lastIndex = 0，不满足 child._mountIndex &lt; lastIndex 的条件，因此不对 B 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，其中 prevChild._mountIndex 表示 B 在老集合中的位置，则 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置prevChild._mountIndex = nextIndex，此时新集合中 B._mountIndex = 0，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，通过对比节点位置判断是否进行移动操作，A 在老集合中的位置 A._mountIndex = 0，此时 lastIndex = 1，满足 child._mountIndex &lt; lastIndex的条件，因此对 A 进行移动操作enqueueMove(this, child._mountIndex, toIndex)，其中 toIndex 其实就是 nextIndex，表示 A 需要移动到的位置；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 1，并将 A 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中A._mountIndex = 1，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 D，判断老集合中存在相同节点 D，通过对比节点位置判断是否进行移动操作，D 在老集合中的位置 D._mountIndex = 3，此时 lastIndex = 1，不满足 child._mountIndex &lt; lastIndex的条件，因此不对 D 进行移动操作；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 D 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中D._mountIndex = 2，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，通过对比节点位置判断是否进行移动操作，C 在老集合中的位置 C._mountIndex = 2，此时 lastIndex = 3，满足 child._mountIndex &lt; lastIndex 的条件，因此对 C 进行移动操作 enqueueMove(this, child._mountIndex, toIndex)；更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex)，则 lastIndex ＝ 3，并将 C 的位置更新为新集合中的位置 prevChild._mountIndex = nextIndex，此时新集合中 C._mountIndex = 3，nextIndex++ 进入下一个节点的判断，由于 C 已经是最后一个节点，因此 diff 到此完成。</p>
+</li>
+</ul>
+<p>以上主要分析新老集合中存在相同节点但位置不同时，对节点进行位置移动的情况，如果新集合中有新加入的节点且老集合存在需要删除的节点，那么 React diff 又是如何对比运作的呢？</p>
+<p>以下图为例：</p>
+<ul>
+<li><p>从新集合中取得 B，判断老集合中存在相同节点 B，由于 B 在老集合中的位置 B._mountIndex = 1，此时lastIndex = 0，因此不对 B 进行移动操作；更新 lastIndex ＝ 1，并将 B 的位置更新为新集合中的位置B._mountIndex = 0，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 E，判断老集合中不存在相同节点 E，则创建新节点 E；更新 lastIndex ＝ 1，并将 E 的位置更新为新集合中的位置，nextIndex++进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 C，判断老集合中存在相同节点 C，由于 C 在老集合中的位置C._mountIndex = 2，lastIndex = 1，此时 C._mountIndex &gt; lastIndex，因此不对 C 进行移动操作；更新 lastIndex ＝ 2，并将 C 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>从新集合中取得 A，判断老集合中存在相同节点 A，由于 A 在老集合中的位置A._mountIndex = 0，lastIndex = 2，此时 A._mountIndex &lt; lastIndex，因此对 A 进行移动操作；更新 lastIndex ＝ 2，并将 A 的位置更新为新集合中的位置，nextIndex++ 进入下一个节点的判断。</p>
+</li>
+<li><p>当完成新集合中所有节点 diff 时，最后还需要对老集合进行循环遍历，判断是否存在新集合中没有但老集合中仍存在的节点，发现存在这样的节点 D，因此删除节点 D，到此 diff 全部完成。</p>
+</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg" alt="https://pic1.zhimg.com/7b9beae0cf0a5bc8c2e82d00c43d1c90_r.jpg"></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">_updateChildren: <span class="function"><span class="keyword">function</span>(<span class="params">nextNestedChildrenElements, transaction, context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prevChildren = <span class="built_in">this</span>._renderedChildren;</span><br><span class="line">  <span class="keyword">var</span> nextChildren = <span class="built_in">this</span>._reconcilerUpdateChildren(</span><br><span class="line">    prevChildren, nextNestedChildrenElements, transaction, context</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">if</span> (!nextChildren &amp;&amp; !prevChildren) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> name;</span><br><span class="line">  <span class="keyword">var</span> lastIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> nextIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> nextChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!nextChildren.hasOwnProperty(name)) &#123;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> prevChild = prevChildren &amp;&amp; prevChildren[name];</span><br><span class="line">    <span class="keyword">var</span> nextChild = nextChildren[name];</span><br><span class="line">    <span class="keyword">if</span> (prevChild === nextChild) &#123;</span><br><span class="line">      <span class="comment">// 移动节点</span></span><br><span class="line">      <span class="built_in">this</span>.moveChild(prevChild, nextIndex, lastIndex);</span><br><span class="line">      lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">      prevChild._mountIndex = nextIndex;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (prevChild) &#123;</span><br><span class="line">        lastIndex = <span class="built_in">Math</span>.max(prevChild._mountIndex, lastIndex);</span><br><span class="line">        <span class="comment">// 删除节点</span></span><br><span class="line">        <span class="built_in">this</span>._unmountChild(prevChild);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 初始化并创建节点</span></span><br><span class="line">      <span class="built_in">this</span>._mountChildAtIndex(</span><br><span class="line">        nextChild, nextIndex, transaction, context</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">    nextIndex++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (name <span class="keyword">in</span> prevChildren) &#123;</span><br><span class="line">    <span class="keyword">if</span> (prevChildren.hasOwnProperty(name) &amp;&amp;</span><br><span class="line">        !(nextChildren &amp;&amp; nextChildren.hasOwnProperty(name))) &#123;</span><br><span class="line">      <span class="built_in">this</span>._unmountChild(prevChildren[name]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">this</span>._renderedChildren = nextChildren;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 移动节点</span></span><br><span class="line">moveChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, toIndex, lastIndex</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (child._mountIndex &lt; lastIndex) &#123;</span><br><span class="line">    <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">    enqueueMove(<span class="built_in">this</span>, child._mountIndex, toIndex);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 创建节点</span></span><br><span class="line">createChild: <span class="function"><span class="keyword">function</span>(<span class="params">child, mountImage</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueInsertMarkup(<span class="built_in">this</span>, mountImage, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 删除节点</span></span><br><span class="line">removeChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.prepareToManageChildren();</span><br><span class="line">  enqueueRemove(<span class="built_in">this</span>, child._mountIndex);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_unmountChild: <span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.removeChild(child);</span><br><span class="line">  child._mountIndex = <span class="literal">null</span>;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">_mountChildAtIndex: <span class="function"><span class="keyword">function</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  child,</span></span></span><br><span class="line"><span class="function"><span class="params">  index,</span></span></span><br><span class="line"><span class="function"><span class="params">  transaction,</span></span></span><br><span class="line"><span class="function"><span class="params">  context</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> mountImage = ReactReconciler.mountComponent(</span><br><span class="line">    child,</span><br><span class="line">    transaction,</span><br><span class="line">    <span class="built_in">this</span>,</span><br><span class="line">    <span class="built_in">this</span>._nativeContainerInfo,</span><br><span class="line">    context</span><br><span class="line">  );</span><br><span class="line">  child._mountIndex = index;</span><br><span class="line">  <span class="built_in">this</span>.createChild(child, mountImage);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<p>当然，React diff 还是存在些许不足与待优化的地方，如下图所示，若新集合的节点更新为：D、A、B、C，与老集合对比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在老集合的位置是最大的，导致其他节点的 _mountIndex &lt; lastIndex，造成 D 没有执行移动操作，而是 A、B、C 全部移动到 D 节点后面的现象。</p>
+<p><em><strong>在此，读者们可以讨论思考：如何优化上述问题？</strong></em></p>
+<blockquote>
+<p>建议：在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</p>
+</blockquote>
+<p><img src="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg" alt="https://pic2.zhimg.com/1b8dac5b9b3e4452dec8d5447d7717ad_r.jpg"></p>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
+<li>React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；</li>
+<li>React 通过<em><strong>分层求异</strong></em>的策略，对 <em><strong>tree diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>相同类生成相似树形结构，不同类生成不同树形结构</strong></em>的策略，对 <em><strong>component diff</strong></em> 进行算法优化；</li>
+<li>React 通过<em><strong>设置唯一 key</strong></em>的策略，对 <em><strong>element diff</strong></em> 进行算法优化；</li>
+<li>建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；</li>
+<li>建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。</li>
+</ul>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a href="http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf">A Survey on Tree Edit Distance and Related Problems</a><br><a href="http://facebook.github.io/react/docs/reconciliation.html">Reconciliation</a></p>
+<p>如果本文能够为你解决些许关于 React diff 算法的疑惑，请点个赞吧！</p>
+]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>React</category>
+      </categories>
+      <tags>
+        <tag>源码解析</tag>
+        <tag>React</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Could not proxy request XXX from localhost:8080 to localhost:8081</title>
+    <url>/2020/02/12/vue-proxyTable-problem/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>最近又有小伙伴问我，为啥我在写vue项目做代理转发时候报找不到代理服务的问题？<br>我看了一下他发给我的配置截图，仅一眼我就发现了问题所在，因为这个坑我曾经也踩过，而且好多小伙伴也都踩过，<em><strong>在写转发服务器的时候没写协议头</strong></em>，也就是在 <code>target</code> 那没写 <code>http://</code> 这个部分，添加上以后重启一下，这个问题就解决了，小伙伴说就这个问题他解决了一天也没解决了，而且我说完了以后他想起来以前好像也遇到过这个问题，所以说在平时工作中遇到问题要常做笔记才对，所以为了避免以后自己也犯这种错误，暂且留一篇文章记录一下这个问题。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端问题</category>
+      </categories>
+      <tags>
+        <tag>奇怪问题</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</title>
+    <url>/2020/04/07/webpack-uglifyjsplugin/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近在检查公司前端代码质量时，经常会在sonar检查到有漏洞级别的问题特别多，但是打开查看详情的时候发现又特别低级，都是些console没去掉啊，debugger没去掉啊，之前都是看到了就提醒一下，但是屡禁不止，那么有没有什么好的办法能够从源头上避免这个问题呢，果然这个问题不止我一个人遇到，网上还是有大神给出了解决方案，那就是 webpack 打包时可以引入 UglifyJsPlugin 来解决这个扰人的问题，而且屏蔽了人为的因素，使用感觉是极好的，所以，写个帖子把网上学来的资料整理一下。</p>
+<span id="more"></span>
+
+<h2 id="UglifyJsPlugin"><a href="#UglifyJsPlugin" class="headerlink" title="UglifyJsPlugin"></a>UglifyJsPlugin</h2><p>关于 UglifyJsPlugin 的介绍，在 webpack 的官网上有这样一段描述 </p>
+<blockquote>
+<p>ℹ️ webpack =&lt; v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0</p>
+</blockquote>
+<p>简单来说就是在 webpack3.0 之前，引入了这个插件的0.4.6版本，并用 webpack.optimize.UglifyJsPlugin 作为它的别名， 在 webpack4.0 中引入了插件的 1.0.0 版本，用了同样的名称作为别名，用的时候请注意。</p>
+<p>那么“这个插件”是什么呢， webpack 的官网也告诉我们了，那就是<img src="https://github.com/mishoo/UglifyJS2/tree/harmony" alt="UglifyJS"></p>
+<blockquote>
+<p>A JavaScript parser, mangler/compressor and beautifier toolkit for ES6+.</p>
+</blockquote>
+<p>翻译过来就是“一个用于ES6+的JavaScript解析器、（榨汁机：翻译的挺有意思）/压缩机和美化工具。”</p>
+<p>再简单点说 uglifyJsPlugin 用来对js文件进行压缩，减小js文件的大小。<em><strong>其会拖慢webpack的编译速度，建议开发环境时关闭，生产环境再将其打开。</strong></em></p>
+<p>要用它的的话记得先安装</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>安装完成就可以用了</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> UglifyJsPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>当然他有很多的选项，具体想了解可以去 webpack 官网，或者去插件官网都可以找到<img src="https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/" alt="uglifyjs-webpack-plugin"></p>
+<p>当然知道你们懒的去看了，心里肯定也在说“直接给我个现成的配置他不香么？”，别急嘛，这就给你们</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">    <span class="comment">//删除注释</span></span><br><span class="line">    output:&#123;</span><br><span class="line">        comments:<span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//删除console 和 debugger  删除警告</span></span><br><span class="line">    compress:&#123;</span><br><span class="line">        warnings:<span class="literal">false</span>,</span><br><span class="line">        drop_debugger:<span class="literal">true</span>,</span><br><span class="line">        drop_console:<span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p>当然版本间可能会有些差别，但是option是不变的，有调整的话各位自行调整一下。<br>公司用的 vue-cli3 所以这里再给出个 vue-cli3 默认配置文件下的写法</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"></span><br><span class="line">configureWebpack:&#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line">        minimizer: [</span><br><span class="line">            <span class="keyword">new</span> UglifyJsPlugin(&#123;</span><br><span class="line">                uglifyOptions: &#123;</span><br><span class="line">                    <span class="comment">// 删除注释</span></span><br><span class="line">                    output:&#123;</span><br><span class="line">                      comments:<span class="literal">false</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="comment">// 删除console debugger 删除警告</span></span><br><span class="line">                    compress: &#123;</span><br><span class="line">                      warnings: <span class="literal">false</span>,</span><br><span class="line">                      drop_console: <span class="literal">true</span>,<span class="comment">//console</span></span><br><span class="line">                      drop_debugger: <span class="literal">false</span>,</span><br><span class="line">                      pure_funcs: [<span class="string">&#x27;console.log&#x27;</span>]<span class="comment">//移除console</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="问题收集"><a href="#问题收集" class="headerlink" title="问题收集"></a>问题收集</h2><ol>
+<li>运行出现报错 UglifyJs</li>
+</ol>
+<blockquote>
+<p>Q: DefaultsError: warnings is not a supported option</p>
+</blockquote>
+<blockquote>
+<p>A: 降低版本(使用 “uglifyjs-webpack-plugin”: “^1.1.1”)，打包正常，效果达到</p>
+</blockquote>
+]]></content>
+      <categories>
+        <category>前端工程化</category>
+        <category>Webpack</category>
+      </categories>
+      <tags>
+        <tag>UglifyJsPlugin</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>《Web全栈工程师的自我修养》读书笔记</title>
+    <url>/2017/10/12/web-quanzhan/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>近日工作不是那么忙，所以有时间看看书，这本书之前就已经读过一遍，隔了一段时间已经有所忘记，所以再次拾起，重新回顾一下。.</p>
+<span id="more"></span>
+
+<h2 id="什么是全栈"><a href="#什么是全栈" class="headerlink" title="什么是全栈"></a>什么是全栈</h2><p>“全栈”是个外来词，翻译自英文full-stack，此处的栈指的是为了完成项目而使用的一系列技术的合集，不是堆栈概念中的栈。</p>
+<p>“全端”工程师是指能够完成pc端、移动端等多终端设备适配的情况</p>
+<h2 id="什么是全栈工程师"><a href="#什么是全栈工程师" class="headerlink" title="什么是全栈工程师"></a>什么是全栈工程师</h2><blockquote>
+<p>全栈工程师是指一个能够处理数据库、服务器、系统工程、客户端等所有工作的的工程师，根据项目不同，可能是移动栈、Web栈，或者原生应用程序栈。</p>
+</blockquote>
+<p>简单来说全栈工程师就是一个人能搞定一个项目，全能大神一样的人物。</p>
+<h2 id="一个Web产品典型的技术栈"><a href="#一个Web产品典型的技术栈" class="headerlink" title="一个Web产品典型的技术栈"></a>一个Web产品典型的技术栈</h2><blockquote>
+<p>服务器+数据库+服务器端编程语言+前端编程语言</p>
+</blockquote>
+<blockquote>
+<p>全栈工程师技术的兴起有两个重要原因：技术的发展和PaaS（Platform as a Service，平台即服务）服务的平台越来越多。</p>
+</blockquote>
+<h3 id="全栈框架———MEAN"><a href="#全栈框架———MEAN" class="headerlink" title="全栈框架———MEAN"></a>全栈框架———MEAN</h3><blockquote>
+<p>MongoDB-Express-AngularJs-Node.js<br>前后端采用一种编程语言JavaScript</p>
+</blockquote>
+<h2 id="全栈工程师的要求"><a href="#全栈工程师的要求" class="headerlink" title="全栈工程师的要求"></a>全栈工程师的要求</h2><h3 id="一专多长"><a href="#一专多长" class="headerlink" title="一专多长"></a>一专多长</h3><p>在一个领域里至少达到高级的级别，然后再去向上游或者下游延伸</p>
+<h3 id="关注商业目标"><a href="#关注商业目标" class="headerlink" title="关注商业目标"></a>关注商业目标</h3><p>公司聘请你是为了让你产生利润，并不关心你会什么，所以选择技术栈时要考虑的是如何降低公司的成本或者提高收入。</p>
+<h3 id="关注用户体验"><a href="#关注用户体验" class="headerlink" title="关注用户体验"></a>关注用户体验</h3><p>产品的最终目标是满足客户的需求，所以作为全栈工程师必须要关注用户体验。</p>
+<hr>
+<p>这是一些作为全栈工程师我整理出来的干货，这本书本身并不是一本技术性很强的书，倒像是一位过来人介绍些经验，适合刚入职场或者进入职场不久的人，在前端领域比较迷茫时看一看，书中介绍了作者读过的一些书，很有参考性，推荐大家阅读。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>读书笔记</category>
+      </categories>
+  </entry>
+  <entry>
+    <title>2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</title>
+    <url>/2020/03/24/webpack-learning-1/</url>
+    <content><![CDATA[<h1 id="推荐序"><a href="#推荐序" class="headerlink" title="推荐序"></a>推荐序</h1><p>这里是我自己写的，看了这篇文章把我零碎的 <code>webpack</code> 知识系统的整理了一下，感觉受益匪浅，推荐更多小伙伴看一看这篇文章，好文共享，建议稍微对 <code>webpack</code> 了解服用更佳。<br><a href="https://zhuanlan.zhihu.com/p/99959392">2020年了,再不会webpack敲得代码就不香了(近万字实战)</a></p>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>2020年即将到来,在众多前端的招聘要求里, <code>webpack</code> 、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如 <code>vue-cli</code> 、 <code>create-react-app</code>  的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的 <code>offer</code> (还房贷)，那么你必须去深刻的认识下我们经常打交道的 <code>webpack</code></p>
+<h2 id="入门-一起来用这些小例子让你熟悉webpack的配置"><a href="#入门-一起来用这些小例子让你熟悉webpack的配置" class="headerlink" title="入门(一起来用这些小例子让你熟悉webpack的配置)"></a>入门(一起来用这些小例子让你熟悉webpack的配置)</h2><h3 id="webpack-是什么？"><a href="#webpack-是什么？" class="headerlink" title="webpack 是什么？"></a>webpack 是什么？</h3><p><code>webpack</code> 是一个现代 <code>JavaScript</code> 应用程序的静态模块打包器，当 <code>webpack</code> 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 <code>bundle</code> 。</p>
+<h3 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h3><ul>
+<li><code>entry</code>: 入口</li>
+<li><code>output</code>: 输出</li>
+<li><code>loader</code>: 模块转换器，用于把模块原内容按照需求转换成新内容</li>
+<li><code>plugins</code>: 扩展插件，在 <code>webpack</code> 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情</li>
+</ul>
+<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，初始化 <code>npm</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
+
+<p><code>webpack</code> 是运行在 <code>node</code> 环境中的,我们需要安装以下两个 <code>npm</code> 包</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D webpack webpack-cli</span><br></pre></td></tr></table></figure>
+
+<blockquote>
+<ul>
+<li><code>npm i -D</code> 为 <code>npm install --save-dev</code> 的缩写</li>
+<li><code>npm i -S</code> 为 <code>npm install --save</code> 的缩写</li>
+</ul>
+</blockquote>
+<p>新建一个文件夹 <code>src</code> ,然后新建一个文件 <code>main.js</code> ,写一点代码测试一下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;call me 老yuan&#x27;</span>)</span><br></pre></td></tr></table></figure>
+
+<p>配置 <code>package.json</code> 命令</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack src/main.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
+<p>此时如果生成了一个 <code>dist</code> 文件夹，并且内部含有 <code>main.js</code> 说明已经打包成功了</p>
+<h3 id="开始我们自己的配置"><a href="#开始我们自己的配置" class="headerlink" title="开始我们自己的配置"></a>开始我们自己的配置</h3><p>上面一个简单的例子只是 <code>webpack</code> 自己默认的配置，下面我们要实现更加丰富的自定义配置</p>
+<p>新建一个 <code>build</code> 文件夹,里面新建一个 <code>webpack.config.js</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">&#x27;output.js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">        path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>更改我们的打包命令</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;build&quot;:&quot;webpack build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code><br>会发现生成了以下目录</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">project</span><br><span class="line">  dist</span><br><span class="line">  build</span><br><span class="line">  src</span><br></pre></td></tr></table></figure>
+<p>其中 <code>dist</code> 文件夹中的 <code>main.js</code> 就是我们需要在浏览器中实际运行的文件<br>当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手 <code>webpack</code></p>
+<h3 id="配置html模板"><a href="#配置html模板" class="headerlink" title="配置html模板"></a>配置html模板</h3><p><code>js</code> 文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js</p>
+<blockquote>
+<p>这里可能有的朋友会认为我们打包 <code>js</code> 文件名称不是一直是固定的嘛( <code>output.js</code> )？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他配置</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>这时候生成的 <code>dist</code> 目录文件如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">dist/</span><br><span class="line">  app.fsafasf.js</span><br></pre></td></tr></table></figure>
+<p>为了缓存，你会发现打包好的 <code>js</code> 文件的名称每次都不一样。 <code>webpack</code> 打包出来的js文件我们需要引入到 <code>html</code> 中，但是每次我们都手动修改 <code>js</code> 文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情，那就是 <code>html-webpack-plugin</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D html-webpack-plugin</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>build</code> 同级的文件夹 <code>public</code> ,里面新建一个 <code>index.html</code><br>具体配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// **此插件用来解决html模板引入js文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),    <span class="comment">// 入口文件</span></span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>可以发现打包生成的js文件已经被自动引入 <code>html</code> 文件中</p>
+<h4 id="多入口文件如何开发"><a href="#多入口文件如何开发" class="headerlink" title="多入口文件如何开发"></a>多入口文件如何开发</h4><blockquote>
+<p>生成多个 <code>html-webpack-plugin</code> 实例来解决这个问题</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">      header:path.resolve(__dirname,<span class="string">&#x27;../src/header.js&#x27;</span>)</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;main&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/header.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;header.html&#x27;</span>,</span><br><span class="line">        chunks:[<span class="string">&#x27;header&#x27;</span>] <span class="comment">// 与入口文件对应的模块名</span></span><br><span class="line">      &#125;),</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><blockquote>
+<p>每次执行 <code>npm run build</code> 会发现 <code>dist</code> 文件夹里会残留上次打包的文件，这里我们推荐一个 <code>plugin</code> 来帮我们在打包输出前清空文件夹 <code>clean-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    plugins:[<span class="keyword">new</span> CleanWebpackPlugin()]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="希望dist目录下某个文件夹不被清空"><a href="#希望dist目录下某个文件夹不被清空" class="headerlink" title="希望dist目录下某个文件夹不被清空"></a>希望dist目录下某个文件夹不被清空</h5><p>不过呢，有些时候，我们并不希望整个 dist 目录都被清空，比如，我们不希望，每次打包的时候，都删除 <code>dll</code> 目录，以及 <code>dll</code> 目录下的文件或子目录，该怎么办呢？</p>
+<p><code>clean-webpack-plugin</code> 为我们提供了参数 <code>cleanOnceBeforeBuildPatterns</code> 。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> CleanWebpackPlugin(&#123;</span><br><span class="line">            cleanOnceBeforeBuildPatterns:[<span class="string">&#x27;**/*&#x27;</span>, <span class="string">&#x27;!dll&#x27;</span>, <span class="string">&#x27;!dll/**&#x27;</span>] <span class="comment">//不删除dll目录下的文件</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="引用CSS"><a href="#引用CSS" class="headerlink" title="引用CSS"></a>引用CSS</h3><p>我们的入口文件是 <code>js</code> ，所以我们在入口 <code>js</code> 中引入我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;asset/style.css&#x27;</span></span><br></pre></td></tr></table></figure>
+<p>同时我们也需要一些 <code>loader</code> 来解析我们的 <code>css</code> 文件</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D style-loader css-loader</span><br></pre></td></tr></table></figure>
+<p>如果我们使用 <code>less</code> 来构建样式，则需要多安装两个</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D less less-loader</span><br></pre></td></tr></table></figure>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>我们简单说一下上面的配置：</p>
+<ul>
+<li><code>style-loader</code> 动态创建 <code>style</code> 标签，将 <code>css</code> 插入到 <code>head</code> 中.</li>
+<li><code>css-loader</code> 负责处理 <code>@import</code> 等语句。</li>
+<li><code>postcss-loader</code> 和 <code>autoprefixer</code> ，自动生成浏览器兼容性前缀 —— 2020了，应该没人去自己徒手去写浏览器前缀了吧</li>
+<li><code>less-loader</code> 负责处理编译 <code>.less</code> 文件,将其转为 <code>css</code></li>
+</ul>
+<blockquote>
+<p>注意：<br><code>loader</code> 的执行顺序是<em><strong>从右向左</strong></em>执行的，也就是后面的 <code>loader</code> 先执行，上面 <code>loader</code> 的执行顺序为: <code>less-loader</code> —&gt; <code>postcss-loader</code> —&gt; <code>css-loader</code> —&gt; <code>style-loader</code><br>当然，<code>loader</code> 其实还有一个参数，可以修改优先级，<code>enforce</code> 参数，其值可以为: <code>pre</code>(优先执行) 或 <code>post</code> (滞后执行)。<br>现在，我们已经可以处理 <code>.less</code> 文件啦，<code>.css</code> 文件只需要修改匹配规则，删除 <code>less-loader</code> 即可。</p>
+</blockquote>
+<h4 id="为css添加浏览器前缀"><a href="#为css添加浏览器前缀" class="headerlink" title="为css添加浏览器前缀"></a>为css添加浏览器前缀</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D postcss-loader autoprefixer</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            test/\.less$/,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;postcss-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>接下来，我们还需要引入 <code>autoprefixer</code> 使其生效,这里有两种方式</p>
+<h5 id="在项目根目录下创建一个postcss-config-js文件，配置如下："><a href="#在项目根目录下创建一个postcss-config-js文件，配置如下：" class="headerlink" title="在项目根目录下创建一个postcss.config.js文件，配置如下："></a>在项目根目录下创建一个postcss.config.js文件，配置如下：</h5><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]  <span class="comment">// 引用该插件即可了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="直接在webpack-config-js里配置"><a href="#直接在webpack-config-js里配置" class="headerlink" title="直接在webpack.config.js里配置"></a>直接在webpack.config.js里配置</h5><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//...省略其他配置</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">                loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                options:&#123;</span><br><span class="line">                    plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,<span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 从右向左解析原则</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这时候我们发现 <code>css</code> 通过 <code>style</code> 标签的方式添加到了 <code>html</code> 文件中，但是如果样式文件很多，全部添加到 <code>html</code> 中，难免显得混乱。这时候我们想用把 <code>css</code> 拆分出来用外链的形式引入 <code>css</code> 文件怎么做呢？这时候我们就需要借助插件来帮助我们</p>
+<h4 id="拆分css"><a href="#拆分css" class="headerlink" title="拆分css"></a>拆分css</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>webpack 4.0</code> 以前，我们通过 <code>extract-text-webpack-plugin</code> 插件，把 <code>css</code> 样式从 <code>js</code> 文件中提取到单独的 <code>css</code> 文件中。 <code>webpack4.0</code> 以后，官方推荐使用 <code>mini-css-extract-plugin</code> 插件来打包 <code>css</code> 文件</p>
+</blockquote>
+<p>配置文件如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...省略其他配置</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">           MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        filename: <span class="string">&quot;[name].[hash].css&quot;</span>,</span><br><span class="line">        chunkFilename: <span class="string">&quot;[id].css&quot;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="拆分多个css"><a href="#拆分多个css" class="headerlink" title="拆分多个css"></a>拆分多个css</h4><blockquote>
+<p>这里需要说的细一点,上面我们所用到的 <code>mini-css-extract-plugin</code> 将所有的 <code>css</code> 样式合并为一个 <code>css</code> 文件。如果你想拆分为一一对应的多个 <code>css</code> 文件,我们需要使用到 <code>extract-text-webpack-plugin</code> ，而目前 <code>mini-css-extract-plugin</code> 还不支持此功能。我们需要安装 <code>@next</code> 版本的 <code>extract-text-webpack-plugin</code></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D extract-text-webpack-plugin@next</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> indexLess = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.less&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> indexCss = <span class="keyword">new</span> ExtractTextWebpackPlugin(<span class="string">&#x27;index.css&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: indexCss.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: indexLess.extract(&#123;</span><br><span class="line">            use: [<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      indexLess,</span><br><span class="line">      indexCss</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="打包-图片、字体、媒体、等文件"><a href="#打包-图片、字体、媒体、等文件" class="headerlink" title="打包 图片、字体、媒体、等文件"></a>打包 图片、字体、媒体、等文件</h3><p><code>file-loader</code> 就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件 <code>url</code> ），并将文件移动到输出的目录中<br><code>url-loader</code> 一般与 <code>file-loader</code> 搭配使用，功能与 <code>file-loader</code> 类似，如果文件小于限制的大小。则会返回 <code>base64</code> 编码，否则使用 <code>file-loader</code> 将文件移动到输出的目录中</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// ...</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(jpe?g|png|gif)$/i</span>, <span class="comment">//图片文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    name: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>, <span class="comment">//媒体文件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>, <span class="comment">// 字体</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">              limit: <span class="number">10240</span>,</span><br><span class="line">              fallback: &#123;</span><br><span class="line">                loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                  name: <span class="string">&#x27;fonts/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="用babel转义js文件"><a href="#用babel转义js文件" class="headerlink" title="用babel转义js文件"></a>用babel转义js文件</h3><p>为了使我们的 <code>js</code> 代码兼容更多的环境我们需要安装依赖</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i babel-loader @babel/preset-env @babel/core</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>注意<br><code>babel-loader</code> 与 <code>babel-core</code> 的版本对应关系</p>
+</blockquote>
+<ul>
+<li><code>babel-loader 8.x</code> 对应 <code>babel-core 7.x</code></li>
+<li><code>babel-loader 7.x</code> 对应 <code>babel-core 6.x</code></li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其它配置 ...</span></span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">          &#123;</span><br><span class="line">            test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">            use:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">          &#125;,</span><br><span class="line">       ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>上面的 <code>babel-loader</code> 只会将 <code>ES6/7/8</code> 语法转换为 <code>ES5</code> 语法，但是对新 <code>api</code> 并不会转换 例如( <code>promise</code> 、 <code>Generator</code> 、 <code>Set</code> 、 <code>Maps</code> 、 <code>Proxy</code> 等)<br>此时我们需要借助 <code>babel-polyfill</code> 来帮助我们转换</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i @babel/polyfill</span><br><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: [<span class="string">&quot;@babel/polyfill,path.resolve(__dirname,&#x27;../src/index.js&#x27;)&quot;</span>],    <span class="comment">// 入口文件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>手动把上面的 <code>demo</code> 敲一遍对阅读下面的文章更有益，建议入门的同学敲三遍以上</p>
+</blockquote>
+<p>上面的实践是我们对 <code>webpack</code> 的功能有了一个初步的了解，但是要想熟练应用于开发中，我们需要一个系统的实战。让我们一起摆脱脚手架尝试自己搭建一个 <code>vue</code> 开发环境</p>
+<h2 id="搭建vue开发环境"><a href="#搭建vue开发环境" class="headerlink" title="搭建vue开发环境"></a>搭建vue开发环境</h2><p>上面的小例子已经帮助而我们实现了打包 <code>css</code> 、图片、 <code>js</code> 、 <code>html</code> 等文件。<br>但是我们还需要以下几种配置</p>
+<h3 id="解析-vue文件"><a href="#解析-vue文件" class="headerlink" title="解析.vue文件"></a>解析.vue文件</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D vue-loader vue-template-compiler vue-style-loader</span><br><span class="line">npm i -S vue</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>vue-loader</code> 用于解析 <code>.vue</code> 文件</li>
+<li><code>vue-template-compiler</code> 用于编译模板</li>
+</ul>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[&#123;</span><br><span class="line">            test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">            use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,]</span><br><span class="line">     &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">        alias:&#123;</span><br><span class="line">          <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">   &#125;,</span><br><span class="line">   plugins:[</span><br><span class="line">        <span class="keyword">new</span> vueLoaderPlugin()</span><br><span class="line">   ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置webpack-dev-server进行热更新"><a href="#配置webpack-dev-server进行热更新" class="headerlink" title="配置webpack-dev-server进行热更新"></a>配置webpack-dev-server进行热更新</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D webpack-dev-server</span><br></pre></td></tr></table></figure>
+<p>配置如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// ...省略其他配置</span></span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>完整配置如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> ExtractTextWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode:<span class="string">&#x27;development&#x27;</span>, <span class="comment">// 开发模式</span></span><br><span class="line">    entry: &#123;</span><br><span class="line">      main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">    &#125;, </span><br><span class="line">    output: &#123;</span><br><span class="line">      filename: <span class="string">&#x27;[name].[hash:8].js&#x27;</span>,      <span class="comment">// 打包后的文件名称</span></span><br><span class="line">      path: path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)  <span class="comment">// 打包后的目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">      rules:[</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">          use:[<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">          use:&#123;</span><br><span class="line">            loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              presets:[</span><br><span class="line">                [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">          use: [<span class="string">&#x27;vue-style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">            loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">            options:&#123;</span><br><span class="line">              plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,<span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    resolve:&#123;</span><br><span class="line">      alias:&#123;</span><br><span class="line">        <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer:&#123;</span><br><span class="line">      port:<span class="number">3000</span>,</span><br><span class="line">      hot:<span class="literal">true</span>,</span><br><span class="line">      contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins:[</span><br><span class="line">      <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">        template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>),</span><br><span class="line">        filename:<span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">      <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h3 id="配置打包命令"><a href="#配置打包命令" class="headerlink" title="配置打包命令"></a>配置打包命令</h3><figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;script&quot;:&#123;</span><br><span class="line">  &quot;dev&quot;:&quot;webpack-dev-server --config build/webpack.config.js --open&quot;,</span><br><span class="line">  &quot;build&quot;:&quot;webpack --config build/webpack.config.js&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>打包文件已经配置完毕，接下来让我们测试一下<br>首先在 <code>src</code> 新建一个 <code>main.js</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app&#x27;</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  render:<span class="function"><span class="params">h</span>=&gt;</span>h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>App.vue</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&#x27;container&#x27;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      initData:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:<span class="number">100</span>%;</span><br><span class="line">  height:<span class="number">100</span>%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
+<p>新建一个 <code>public</code> 文件夹，里面新建一个 <code>index.html</code></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// index.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&#x27;en&#x27;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&#x27;utf-8&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&#x27;viewport&#x27;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&#x27;X-UA-Compatible&#x27;</span> <span class="attr">content</span>=<span class="string">&#x27;ie=edge&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>lao li<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&#x27;app&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run dev</code> 这时候如果浏览器出现 <code>Vue</code> 开发环境运行成功，那么恭喜你，已经成功迈出了第一步</p>
+<h3 id="区分开发环境与生产环境"><a href="#区分开发环境与生产环境" class="headerlink" title="区分开发环境与生产环境"></a>区分开发环境与生产环境</h3><p>实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来 <code>webpack.config.js</code> 的基础上再新增两个文件</p>
+<p><em><strong><code>webpack.dev.js</code> 开发环境配置文件</strong></em><br>开发环境主要实现的是热更新,不要压缩代码，完整的 <code>sourceMap</code><br><em><strong><code>webpack.prod.js</code>生产环境配置文件</strong></em><br>生产环境主要实现的是压缩代码、提取 <code>css</code> 文件、合理的 <code>sourceMap</code> 、分割代码<br>需要安装以下模块:</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D  webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>
+<ul>
+<li><code>webpack-merge</code> 合并配置</li>
+<li><code>copy-webpack-plugin</code> 拷贝静态资源</li>
+<li><code>optimize-css-assets-webpack-plugin</code> 压缩 <code>css</code></li>
+<li><code>uglifyjs-webpack-plugin</code> 压缩js</li>
+</ul>
+<blockquote>
+<p><code>webpack</code> <code>mode</code> 设置 <code>production</code> 的时候会自动压缩 <code>js</code> 代码。<br>原则上不需要引入 <code>uglifyjs-webpack-plugin</code> 进行重复工作。<br>但是 <code>optimize-css-assets-webpack-plugin </code>压缩 <code>css</code> 的同时会破坏原有的 <code>js</code> 压缩，所以这里我们引入 <code>uglifyjs</code> 进行压缩</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> vueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> devMode = process.argv.indexOf(<span class="string">&#x27;--mode=production&#x27;</span>) === -<span class="number">1</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry:&#123;</span><br><span class="line">    main:path.resolve(__dirname,<span class="string">&#x27;../src/main.js&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  output:&#123;</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    filename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span>,</span><br><span class="line">    chunkFilename:<span class="string">&#x27;js/[name].[hash:8].js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            presets:[<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use:[<span class="string">&#x27;cache-loader&#x27;</span>,<span class="string">&#x27;thread-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;vue-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            compilerOptions:&#123;</span><br><span class="line">              preserveWhitespace:<span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.css$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader: devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.less$/</span>,</span><br><span class="line">        use:[&#123;</span><br><span class="line">          loader:devMode ? <span class="string">&#x27;vue-style-loader&#x27;</span> : MiniCssExtractPlugin.loader,</span><br><span class="line">          options:&#123;</span><br><span class="line">            publicPath:<span class="string">&quot;../dist/css/&quot;</span>,</span><br><span class="line">            hmr:devMode</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,<span class="string">&#x27;css-loader&#x27;</span>,<span class="string">&#x27;less-loader&#x27;</span>,&#123;</span><br><span class="line">          loader:<span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            plugins:[<span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(jep?g|png|gif)$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        test:<span class="regexp">/\.(woff2?|eot|ttf|otf)(\?.*)?$/i</span>,</span><br><span class="line">        use:&#123;</span><br><span class="line">          loader:<span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          options:&#123;</span><br><span class="line">            limit:<span class="number">10240</span>,</span><br><span class="line">            fallback:&#123;</span><br><span class="line">              loader:<span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">              options:&#123;</span><br><span class="line">                name:<span class="string">&#x27;media/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve:&#123;</span><br><span class="line">    alias:&#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>:<span class="string">&#x27;vue/dist/vue.runtime.esm.js&#x27;</span>,</span><br><span class="line">      <span class="string">&#x27; @&#x27;</span>:path.resolve(__dirname,<span class="string">&#x27;../src&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    extensions:[<span class="string">&#x27;*&#x27;</span>,<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;.json&#x27;</span>,<span class="string">&#x27;.vue&#x27;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:path.resolve(__dirname,<span class="string">&#x27;../public/index.html&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> vueLoaderPlugin(),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      filename: devMode ? <span class="string">&#x27;[name].css&#x27;</span> : <span class="string">&#x27;[name].[hash].css&#x27;</span>,</span><br><span class="line">      chunkFilename: devMode ? <span class="string">&#x27;[id].css&#x27;</span> : <span class="string">&#x27;[id].[hash].css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.dev.js</span></span><br><span class="line"><span class="keyword">const</span> Webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">  devServer:&#123;</span><br><span class="line">    port:<span class="number">3000</span>,</span><br><span class="line">    hot:<span class="literal">true</span>,</span><br><span class="line">    contentBase:<span class="string">&#x27;../dist&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> Webpack.HotModuleReplacementPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.prod.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.js&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> WebpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> CopyWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;copy-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> OptimizeCssAssetsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;optimize-css-assets-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = WebpackMerge(webpackConfig,&#123;</span><br><span class="line">  mode:<span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  devtool:<span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br><span class="line">  plugins:[</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([&#123;</span><br><span class="line">      <span class="keyword">from</span>:path.resolve(__dirname,<span class="string">&#x27;../public&#x27;</span>),</span><br><span class="line">      to:path.resolve(__dirname,<span class="string">&#x27;../dist&#x27;</span>)</span><br><span class="line">    &#125;]),</span><br><span class="line">  ],</span><br><span class="line">  optimization:&#123;</span><br><span class="line">    minimizer:[</span><br><span class="line">      <span class="keyword">new</span> UglifyJsPlugin(&#123;<span class="comment">//压缩js</span></span><br><span class="line">        cache:<span class="literal">true</span>,</span><br><span class="line">        parallel:<span class="literal">true</span>,</span><br><span class="line">        sourceMap:<span class="literal">true</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> OptimizeCssAssetsPlugin(&#123;&#125;)</span><br><span class="line">    ],</span><br><span class="line">    splitChunks:&#123;</span><br><span class="line">      chunks:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">      cacheGroups:&#123;</span><br><span class="line">        libs: &#123;</span><br><span class="line">          name: <span class="string">&quot;chunk-libs&quot;</span>,</span><br><span class="line">          test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span>,</span><br><span class="line">          chunks: <span class="string">&quot;initial&quot;</span> <span class="comment">// 只打包初始时依赖的第三方</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h2 id="优化webpack配置"><a href="#优化webpack配置" class="headerlink" title="优化webpack配置"></a>优化webpack配置</h2><p>看到这里你或许有些累了，但是要想获取更好的offer,更高的薪水，下面必须继续深入</p>
+<p>优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。<br>具体优化可以分为以下几点：</p>
+<h3 id="优化打包速度"><a href="#优化打包速度" class="headerlink" title="优化打包速度"></a>优化打包速度</h3><blockquote>
+<p>构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。</p>
+</blockquote>
+<h4 id="合理的配置-mode-参数与-devtool-参数"><a href="#合理的配置-mode-参数与-devtool-参数" class="headerlink" title="合理的配置 mode 参数与 devtool 参数"></a>合理的配置 mode 参数与 devtool 参数</h4><p><a href="https://www.webpackjs.com/configuration/devtool/">devtool 可设置的值</a><br><code>mode</code> 可设置 <code>development</code> <code>production</code> 两个参数</p>
+<p>如果没有设置， <code>webpack4</code> 会将 <code>mode</code> 的默认值设置为 <code>production</code></p>
+<ul>
+<li><code>production</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>production</code> ，启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>,会进行 <code>tree shaking</code> (去除无用代码)和 <code>uglifyjs</code> (代码压缩混淆)</li>
+<li><code>development</code> ：将 <code>process.env.NODE_ENV</code> 的值设置为 <code>development</code> ，启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code></li>
+</ul>
+<h4 id="缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions"><a href="#缩小文件的搜索范围-配置include-exclude-alias-noParse-extensions" class="headerlink" title="缩小文件的搜索范围(配置include exclude alias noParse extensions)"></a>缩小文件的搜索范围(配置include exclude alias noParse extensions)</h4><ul>
+<li><code>alias</code>  当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。</li>
+<li><code>include</code> <code>exclude</code>  同样配置include exclude也可以减少webpack loader的搜索转换时间。</li>
+<li><code>noParse</code>  当我们代码中使用到 <code>import jq from &#39;jquery&#39;</code> 时， <code>webpack</code> 会去解析 <code>jq</code> 这个库是否有依赖其他的包。但是我们对类似 <code>jquery</code> 这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加 <code>noParse</code> 属性,告诉 <code>webpack</code> 不必解析，以此增加打包速度。</li>
+<li><code>extensions</code>  <code>webpack</code> 会根据 <code>extensions</code> 定义的后缀查找文件(频率较高的文件类型优先写在前面)</li>
+</ul>
+<p><img src="https://pic1.zhimg.com/80/v2-6fd8b21b8e9d9b18a596bd9dc6025a18_720w.jpg" alt="配图"></p>
+<h4 id="使用HappyPack开启多进程Loader转换"><a href="#使用HappyPack开启多进程Loader转换" class="headerlink" title="使用HappyPack开启多进程Loader转换"></a>使用HappyPack开启多进程Loader转换</h4><blockquote>
+<p>在 <code>webpack</code> 构建过程中，实际上耗费时间大多数用在 <code>loader</code> 解析转换以及代码的压缩中。日常开发中我们需要使用 <code>Loader</code> 对 <code>js</code> ， <code>css</code> ，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。 <code>HappyPack</code> 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D happypack</span><br></pre></td></tr></table></figure>
+
+<p><img src="https://pic2.zhimg.com/v2-ebcaa0bea4e7ec24c3e3e65439998fe5_r.jpg" alt="happypack"></p>
+<h4 id="使用-webpack-parallel-uglify-plugin-增强代码压缩"><a href="#使用-webpack-parallel-uglify-plugin-增强代码压缩" class="headerlink" title="使用 webpack-parallel-uglify-plugin 增强代码压缩"></a>使用 webpack-parallel-uglify-plugin 增强代码压缩</h4><p>上面对于 <code>loader</code> 转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D webpack-parallel-uglify-plugin</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic2.zhimg.com/80/v2-38bc4d4b3120096478a411f374457a1d_720w.jpg" alt="webpack-parallel-uglify-plugin"></p>
+<h4 id="抽离第三方模块"><a href="#抽离第三方模块" class="headerlink" title="抽离第三方模块"></a>抽离第三方模块</h4><blockquote>
+<p>对于开发项目中不经常会变更的静态依赖文件。类似于我们的 <code>elementUi</code> 、 <code>vue</code> 全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。 这样做的好处是每次更改我本地代码的文件的时候， <code>webpack</code> 只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么 <code>webpack</code> 就不会对这些库去打包，这样可以快速的提高打包的速度。</p>
+</blockquote>
+<p>这里我们使用 <code>webpack</code> 内置的 <code>DllPlugin</code> <code>DllReferencePlugin</code> 进行抽离</p>
+<p>在与 <code>webpack</code> 配置文件同级目录下新建 <code>webpack.dll.config.js</code><br>代码如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.dll.config.js</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 你想要打包的模块的数组</span></span><br><span class="line">  entry: &#123;</span><br><span class="line">    vendor: [<span class="string">&#x27;vue&#x27;</span>,<span class="string">&#x27;element-ui&#x27;</span>] </span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    path: path.resolve(__dirname, <span class="string">&#x27;static/js&#x27;</span>), <span class="comment">// 打包后文件输出的位置</span></span><br><span class="line">    filename: <span class="string">&#x27;[name].dll.js&#x27;</span>,</span><br><span class="line">    library: <span class="string">&#x27;[name]_library&#x27;</span> </span><br><span class="line">     <span class="comment">// 这里需要和webpack.DllPlugin中的`name: &#x27;[name]_library&#x27;,`保持一致。</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllPlugin(&#123;</span><br><span class="line">      path: path.resolve(__dirname, <span class="string">&#x27;[name]-manifest.json&#x27;</span>),</span><br><span class="line">      name: <span class="string">&#x27;[name]_library&#x27;</span>, </span><br><span class="line">      context: __dirname</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>在 <code>package.json</code> 中配置如下命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="string">&quot;dll&quot;</span>: <span class="string">&quot;webpack --config build/webpack.dll.config.js&quot;</span></span><br></pre></td></tr></table></figure>
+
+<p>接下来在我们的 <code>webpack.config.js</code> 中增加以下代码</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> webpack.DllReferencePlugin(&#123;</span><br><span class="line">      context: __dirname,</span><br><span class="line">      manifest: <span class="built_in">require</span>(<span class="string">&#x27;./vendor-manifest.json&#x27;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> CopyWebpackPlugin([ <span class="comment">// 拷贝生成的文件到dist目录 这样每次不必手动去cv</span></span><br><span class="line">      &#123;<span class="attr">from</span>: <span class="string">&#x27;static&#x27;</span>, <span class="attr">to</span>:<span class="string">&#x27;static&#x27;</span>&#125;</span><br><span class="line">    ]),</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+<p>执行</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run dll</span><br></pre></td></tr></table></figure>
+
+<p>会发现生成了我们需要的集合第三地方<br>代码的 <code>vendor.dll.js</code><br>我们需要在html文件中手动引入这个js文件</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>老yuan<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;static/js/vendor.dll.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
+<p>这样如果我们没有更新第三方依赖包，就不必 <code>npm run dll</code> 。直接执行 <code>npm run dev</code>  <code>npm run build</code> 的时候会发现我们的打包速度明显有所提升。因为我们已经通过 <code>dllPlugin</code> 将第三方依赖包抽离出来了。</p>
+<h4 id="配置缓存"><a href="#配置缓存" class="headerlink" title="配置缓存"></a>配置缓存</h4><blockquote>
+<p>我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 <code>loader</code> 都提供了 <code>cache</code> 配置项。比如在 <code>babel-loader</code> <code>中，可以通过设置cacheDirectory</code> 来开启缓存，<code>babel-loader?cacheDirectory=true</code> 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的 <code>node_modules/.cache/babel-loader</code> 目录内，当然你也可以自定义）<br>但如果 <code>loader</code> 不支持缓存呢？我们也有方法,我们可以通过 <code>cache-loader</code> ，它所做的事情很简单，就是 <code>babel-loader</code> 开启 <code>cache</code> 后做的事情，将 <code>loader</code> 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 <code>demo</code> 所示，在一些性能开销较大的 <code>loader</code> 之前添加此 <code>loader</code> 即可</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D cache-loader</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/80/v2-e00ab48297af32f344070b5637ba88ca_720w.jpg" alt="cache-loader"></p>
+<h3 id="优化打包文件体积"><a href="#优化打包文件体积" class="headerlink" title="优化打包文件体积"></a>优化打包文件体积</h3><p>打包的速度我们是进行了优化，但是打包后的文件体积却是十分大，造成了页面加载缓慢，浪费流量等，接下来让我们从文件体积上继续优化</p>
+<h4 id="引入webpack-bundle-analyzer分析打包后的文件"><a href="#引入webpack-bundle-analyzer分析打包后的文件" class="headerlink" title="引入webpack-bundle-analyzer分析打包后的文件"></a>引入webpack-bundle-analyzer分析打包后的文件</h4><p><code>webpack-bundle-analyzer</code> 将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D webpack-bundle-analyzer</span><br></pre></td></tr></table></figure>
+<p><img src="https://pic3.zhimg.com/v2-b23299204561718ba4636aeff9f71d6e_r.jpg" alt="webpack-bundle-analyzer"></p>
+<p>接下来在 <code>package.json</code> 里配置启动命令</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p><code>windows</code> 请安装 <code>npm i -D cross-env</code></p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;analyz&quot;: &quot;cross-env NODE_ENV=production npm_config_report=true npm run build&quot;</span><br></pre></td></tr></table></figure>
+<p>接下来 <code>npm run analyz</code> 浏览器会自动打开文件依赖图的网页</p>
+<h4 id="externals"><a href="#externals" class="headerlink" title="externals"></a>externals</h4><blockquote>
+<p>按照官方文档的解释，如果我们想引用一个库，但是又不想让 <code>webpack</code> 打包，并且又不影响我们在程序中以 <code>CMD</code> 、 <code>AMD</code> 或者 <code>window</code>/<code>global</code> 全局等方式进行使用，那就可以通过配置 <code>Externals</code> 。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用<code>Externals</code> 的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 <code>CDN</code>的方式，去引用它们。<br>有时我们希望我们通过 <code>script</code> 引入的库，如用 <code>CDN</code> 的方式引入的 <code>jquery</code> ，我们在使用时，依旧用 <code>require</code> 的方式来使用，但是却不希望 <code>webpack</code> 将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解<br><a href="https://link.zhihu.com/?target=https://webpack.js.org/configuration/externals/%23root">webpack</a><br>官网案例如下</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;script</span><br><span class="line">  src=<span class="string">&quot;https://code.jquery.com/jquery-3.1.0.js&quot;</span></span><br><span class="line">  integrity=<span class="string">&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot;</span></span><br><span class="line">  crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line">  externals: &#123;</span><br><span class="line">    jquery: <span class="string">&#x27;jQuery&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span>;</span><br><span class="line">$(<span class="string">&#x27;.my-element&#x27;</span>).animate(<span class="comment">/* ... */</span>);</span><br></pre></td></tr></table></figure>
+<h4 id="Tree-shaking"><a href="#Tree-shaking" class="headerlink" title="Tree-shaking"></a>Tree-shaking</h4><blockquote>
+<p>这里单独提一下 <code>tree-shaking</code> ,是因为这里有个坑。 <code>tree-shaking</code> 的主要作用是用来清除代码中无用的部分。目前在 <code>webpack4</code> 我们设置 <code>mode</code> 为 <code>production</code> 的时候已经自动开启了<code>tree-shaking</code> 。但是要想使其生效，生成的代码必须是<code>ES6</code>模块。不能使用其它类型的模块如 <code>CommonJS</code> 之流。如果使用 <code>Babel</code> 的话，这里有一个小问题，因为 <code>Babel</code> 的预案（ <code>preset</code> ）默认会将任何模块类型都转译成 <code>CommonJS</code> 类型。修正这个问题也很简单，在 <code>.babelrc</code> 文件或在 <code>webpack.config.js</code> 文件中设置 <code>modules:false</code> 就好了</p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// .babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/preset-env&quot;</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="string">&quot;modules&quot;</span>: <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>或者</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      use: &#123;</span><br><span class="line">        loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">          presets: [<span class="string">&#x27;@babel/preset-env&#x27;</span>, &#123; <span class="attr">modules</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;，</span><br><span class="line">      exclude: <span class="regexp">/(node_modules)/</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>经历过上面两个系列的洗礼，到现在我们成为了一名合格的 <code>webpack</code> 配置工程师。但是光拧螺丝，自身的可替代性还是很高，下面我们将深入 <code>webpack</code> 的原理中去</p>
+<h2 id="手写webpack系列"><a href="#手写webpack系列" class="headerlink" title="手写webpack系列"></a>手写webpack系列</h2><p>经历过上面两个部分，我们已经可以熟练的运用相关的 <code>loader</code> 和 <code>plugin</code> 对我们的代码进行转换、解析。接下来我们自己手动实现 <code>loader</code> 与 <code>plugin</code> ，使其在平时的开发中获得更多的乐趣。</p>
+<h3 id="手写-webpack-loader"><a href="#手写-webpack-loader" class="headerlink" title="手写 webpack loader"></a>手写 webpack loader</h3><blockquote>
+<p><code>loader</code> 从本质上来说其实就是一个 <code>node</code> 模块。相当于一台榨汁机( <code>loader</code> )将相关类型的文件代码( <code>code</code> )给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁( <code>code</code> )。</p>
+</blockquote>
+<h4 id="loader-编写原则"><a href="#loader-编写原则" class="headerlink" title="loader 编写原则"></a><code>loader</code> 编写原则</h4><ul>
+<li>单一原则: 每个 <code>Loader</code> 只做一件事；</li>
+<li>链式调用: <code>Webpack</code> 会按顺序链式调用每个 <code>Loader</code> ；</li>
+<li>统一原则: 遵循 <code>Webpack</code> 制定的设计规则和结构，输入与输出均为字符串，各个 <code>Loader</code> 完全独立，即插即用；</li>
+</ul>
+<p>在日常开发环境中，为了方便调试我们往往会加入许多 <code>console</code> 打印。但是我们不希望在生产环境中存在打印的值。那么这里我们自己实现一个 <code>loader</code> 去除代码中的 <code>console</code></p>
+<blockquote>
+<p>知识点普及之 <code>AST</code> 。 <code>AST</code> 通俗的来说，假设我们有一个文件 <code>a.js</code> ,我们对 <code>a.js</code> 里面的1000行进行一些操作处理,比如为所有的 <code>await</code> 增加 <code>try catch</code> ,以及其他操作，但是 <code>a.js</code> 里面的代码本质上来说就是一堆字符串。那我们怎么办呢，那就是转换为带标记信息的对象(抽象语法树)我们方便进行增删改查。这个带标记的对象(抽象语法树)就是AST。这里推荐一篇不错的AST文章 <a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000016231512">AST快速入门</a></p>
+</blockquote>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i -D @babel/parser @babel/traverse @babel/generator @babel/types</span><br></pre></td></tr></table></figure>
+<ul>
+<li>@babel/parser 将源代码解析成 <code>AST</code></li>
+<li>@babel/traverse 对 <code>AST</code> 节点进行递归遍历，生成一个便于操作、转换的 <code>path</code> 对象</li>
+<li>@babel/generator 将 <code>AST</code> 解码生成 <code>js</code> 代码</li>
+<li>@babel/types 通过该模块对具体的 <code>AST</code> 节点进行进行增、删、改、查</li>
+</ul>
+<p>新建 <code>drop-console.js</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> parser = <span class="built_in">require</span>(<span class="string">&#x27;@babel/parser&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> traverse = <span class="built_in">require</span>(<span class="string">&#x27;@babel/traverse&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> generator = <span class="built_in">require</span>(<span class="string">&#x27;@babel/generator&#x27;</span>).default</span><br><span class="line"><span class="keyword">const</span> t = <span class="built_in">require</span>(<span class="string">&#x27;@babel/types&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports=<span class="function"><span class="keyword">function</span>(<span class="params">source</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> ast = parser.parse(source,&#123; <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>&#125;)</span><br><span class="line">  traverse(ast,&#123;</span><br><span class="line">    <span class="function"><span class="title">CallExpression</span>(<span class="params">path</span>)</span>&#123; </span><br><span class="line">      <span class="keyword">if</span>(t.isMemberExpression(path.node.callee) &amp;&amp; t.isIdentifier(path.node.callee.object, &#123;<span class="attr">name</span>: <span class="string">&quot;console&quot;</span>&#125;))&#123;</span><br><span class="line">        path.remove()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">const</span> output = generator(ast, &#123;&#125;, source);</span><br><span class="line">  <span class="keyword">return</span> output.code</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode:<span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry:path.resolve(__dirname,<span class="string">&#x27;index.js&#x27;</span>),</span><br><span class="line">  output:&#123;</span><br><span class="line">    filename:<span class="string">&#x27;[name].[contenthash].js&#x27;</span>,</span><br><span class="line">    path:path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>:&#123;</span><br><span class="line">    rules:[&#123;</span><br><span class="line">      test:<span class="regexp">/\.js$/</span>,</span><br><span class="line">      use:path.resolve(__dirname,<span class="string">&#x27;drop-console.js&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>实际上在 <code>webpack4</code> 中已经集成了去除 <code>console</code> 功能，在 <code>minimizer</code> 中可配置 <a href="https://link.zhihu.com/?target=https://webpack.js.org/plugins/terser-webpack-plugin/%23root">去除console</a><br>附上官网 <a href="https://link.zhihu.com/?target=https://webpack.docschina.org/contribute/writing-a-loader/">如何编写一个loader</a></p>
+</blockquote>
+<h3 id="手写webpack-plugin"><a href="#手写webpack-plugin" class="headerlink" title="手写webpack plugin"></a>手写webpack plugin</h3><blockquote>
+<p>在 <code>Webpack</code> 运行的生命周期中会广播出许多事件， <code>Plugin</code> 可以监听这些事件，在合适的时机通过 <code>Webpack</code> 提供的 <code>API</code> 改变输出结果。<br>通俗来说：一盘美味的 盐豆炒鸡蛋 需要经历烧油 炒制 调味到最后的装盘等过程，而 <code>plugin</code> 相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉 <code>plugin</code> ,监控 <code>webpack</code> 暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。<br>那么它与 <code>loader</code> 的区别是什么呢？上面我们也提到了 <code>loader</code> 的单一原则, <code>loader</code> 只能一件事，比如说 <code>less-loader</code> ,只能解析 <code>less</code> 文件， <code>plugin</code> 则是针对整个流程执行广泛的任务。</p>
+</blockquote>
+<p>一个基本的 <code>plugin</code> 插件结构如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">options</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin options&#x27;</span>, options)</span><br><span class="line">  &#125;</span><br><span class="line">  apply (compiler) &#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;done&#x27;</span>, <span class="function"><span class="params">compilation</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;firstPlugin&#x27;</span>)</span><br><span class="line">    ))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p><code>compiler</code> 、 <code>compilation</code> 是什么？</p>
+</blockquote>
+<ul>
+<li><code>compiler</code> 对象包含了 <code>Webpack</code> 环境所有的的配置信息。这个对象在启动 <code>webpack</code> 时被一次性建立，并配置好所有可操作的设置，包括 <code>options</code> ， <code>loader</code> 和 <code>plugin</code> 。当在 <code>webpack</code> 环境中应用一个插件时，插件将收到此 <code>compiler</code> 对象的引用。可以使用它来访问 <code>webpack</code> 的主环境。</li>
+<li><code>compilation</code> 对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行 <code>webpack</code> 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 <code>compilation</code> ，从而生成一组新的编译资源。 <code>compilation</code> 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。</li>
+</ul>
+<p><em><strong><code>compiler</code> 和 <code>compilation</code> 的区别在于</strong></em></p>
+<ul>
+<li><code>compiler</code> 代表了整个 <code>webpack</code> 从启动到关闭的生命周期，而 <code>compilation</code> 只是代表了一次新的编译过程</li>
+<li><code>compiler</code> 和 <code>compilation</code> 暴露出许多钩子，我们可以根据实际需求的场景进行自定义处理</li>
+</ul>
+<p><a href="hhttps://www.webpackjs.com/api/compiler-hooks/">compiler钩子文档</a><br><a href="https://www.webpackjs.com/api/compilation-hooks/">compilation钩子文档</a></p>
+<p>下面我们手动开发一个简单的需求,在生成打包文件之前自动生成一个关于打包出文件的大小信息<br>新建一个 <code>webpack-firstPlugin.js</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">firstPlugin</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.options = options</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">apply</span>(<span class="params">compiler</span>)</span>&#123;</span><br><span class="line">    compiler.plugin(<span class="string">&#x27;emit&#x27;</span>,<span class="function">(<span class="params">compilation,callback</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> filename <span class="keyword">in</span> compilation.assets)&#123;</span><br><span class="line">        str += <span class="string">`文件:<span class="subst">$&#123;filename&#125;</span>  大小<span class="subst">$&#123;compilation.assets[filename][<span class="string">&#x27;size&#x27;</span>]()&#125;</span>\n`</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 通过compilation.assets可以获取打包后静态资源信息，同样也可以写入资源</span></span><br><span class="line">      compilation.assets[<span class="string">&#x27;fileSize.md&#x27;</span>] = &#123;</span><br><span class="line">        source:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str</span><br><span class="line">        &#125;,</span><br><span class="line">        size:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> str.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = firstPlugin</span><br></pre></td></tr></table></figure>
+<p>如何使用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> firstPlugin = <span class="built_in">require</span>(<span class="string">&#x27;webpack-firstPlugin.js&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// 省略其他代码</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> firstPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>执行 <code>npm run build</code> 即可看到在 <code>dist</code> 文件夹中生成了一个包含打包文件信息的 <code>fileSize.md</code></p>
+<blockquote>
+<p>上面两个 <code>loader</code> 与 <code>plugin</code> 案例只是一个引导，实际开发需求中的 <code>loader</code> 与 <code>plugin</code> 要考虑的方面很多，建议大家自己多动手尝试一下。</p>
+</blockquote>
+<p>附上官网 <a href="https://www.webpackjs.com/contribute/writing-a-plugin/">如何编写一个plugin</a></p>
+<h2 id="webpack5-0的时代"><a href="#webpack5-0的时代" class="headerlink" title="webpack5.0的时代"></a>webpack5.0的时代</h2><p>无论是前端框架还是构建工具的更新速度远远超乎了我们的想象,前几年的 <code>jquery</code> 一把梭的时代一去不复返。我们要拥抱的是不断更新迭代的 <code>vue</code> 、 <code>react</code> 、 <code>node</code> 、 <code>serverless</code> 、 <code>docker</code> 、 <code>k8s</code> ….<br>不甘落后的 <code>webpack</code> 也已经在近日发布了 <code>webpack 5.0.0 beta 10</code> 版本。在之前作者也曾提过 <code>webpack5.0</code> 旨在减少配置的复杂度，使其更容易上手( <code>webpack4</code> 的时候也说了这句话)，以及一些性能上的提升</p>
+<ul>
+<li>使用持久化缓存提高构建性能；</li>
+<li>使用更好的算法和默认值改进长期缓存（long-term caching）；</li>
+<li>清理内部结构而不引入任何破坏性的变化；</li>
+<li>引入一些breaking changes，以便尽可能长的使用v5版本。</li>
+</ul>
+<p>目前来看，维护者的更新很频繁，相信用不了多久webpack5.0将会拥抱大众。感兴趣的同学可以先安装beta版本尝尝鲜。不过在此之前建议大家先对webpack4进行一番掌握,这样后面的路才会越来越好走。</p>
+<h2 id="更多阅读"><a href="#更多阅读" class="headerlink" title="更多阅读"></a>更多阅读</h2><p><a href="https://webpack.docschina.org/">webpack中文</a><br><a href="https://www.webpackjs.com/configuration/">webpackjs</a><br><a href="https://mp.weixin.qq.com/s/OBUcxEFXKQQubP08LO2Uhg">4W字长文带你深度解锁Webpack系列(上)</a></p>
+]]></content>
+      <categories>
+        <category>前端工程化</category>
+        <category>Webpack</category>
+      </categories>
+      <tags>
+        <tag>Webpack</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>微信的H5兼容方案</title>
+    <url>/2019/12/31/weichat-h5-compatibility/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近被公司新来的前端问到了一些微信页面的兼容性问题，因为我做微信开发的经验比较少，被问到了真是感到很尴尬，所以在搜到了解决方案告诉了他之后，我又深入的再网上找了一些微信开发中遇到的兼容问题，特此整理，以留后用。</p>
+<span id="more"></span>
+
+<h2 id="1、ios端兼容input光标的高度"><a href="#1、ios端兼容input光标的高度" class="headerlink" title="1、ios端兼容input光标的高度"></a>1、ios端兼容input光标的高度</h2><p><em><strong>bug描述：</strong></em><br>这个问题只出现在苹果手机上，在安卓手机上显示没有问题，可以说是非常诡异，简单描述一下就是在input输入框聚焦时，光标大小应该跟字号一直，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。<br><em><strong>分析：</strong></em><br>说来主要是习惯导致的问题，通常我们习惯将height和line-height设置成一样的值，这个时候input光标就会整个变得很大。<br><em><strong>解决：</strong></em><br>实际上解决方案也很简单，就是不设置行高，通过padding来控制输入内容与外框的距离。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; less代码</span><br><span class="line">.input-x&#123;</span><br><span class="line">	height:40px;</span><br><span class="line">	&#x2F;&#x2F; line-height:40px; &#x2F;&#x2F; 此行注释掉</span><br><span class="line">	.input-inline&#123;</span><br><span class="line">		padding: 10px 0;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这样做问题就解决了。</p>
+<h2 id="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"><a href="#2、ios端微信h5页面上下滑动会卡顿，页面会有缺失" class="headerlink" title="2、ios端微信h5页面上下滑动会卡顿，页面会有缺失"></a>2、ios端微信h5页面上下滑动会卡顿，页面会有缺失</h2><p><em><strong>bug描述：</strong></em><br>没错又是ios端，当页面高度超过一屏，那么上下滑动时就会出现页面卡顿的情况，而且时有伴随内容不能全部显示的情况。<br><em><strong>分析：</strong></em><br>这里实际上是浏览器内核解析不同导致的问题，在Andriod设备上，微信调用的是Webkit内核，而ios中是使用了Safari的内核，Safari对于滚动事件（overflow-scrolling）会使用原生的控件。而webkit内核则会创建一个UIScrollView来提供给子layer用以渲染。<br><em><strong>解决：</strong></em><br>在做样式重置时，加上下面这句话就能解决这个问题。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; css代码</span><br><span class="line">*&#123;</span><br><span class="line">	-webkit-overflow-scrolling: touch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>但是这个方案也有缺陷，就是页面中不能有使用absolute定位的元素，不然布局就错乱了。<br><em><strong>延伸：</strong></em><br>-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.</p>
+<ul>
+<li>auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。</li>
+<li>touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。</li>
+</ul>
+<h2 id="3、ios键盘唤起再收起，页面不会恢复原位"><a href="#3、ios键盘唤起再收起，页面不会恢复原位" class="headerlink" title="3、ios键盘唤起再收起，页面不会恢复原位"></a>3、ios键盘唤起再收起，页面不会恢复原位</h2><p><em><strong>bug描述：</strong></em><br>哎，对的还是ios，问题标题描述的比较清晰了，就是键盘弹出时，页面内容会整体上移，但是收起键盘时本应回归原位的不回去了。—_—|||<br><em><strong>分析：</strong></em><br>固定定位的元素，如果元素内input框聚焦的时候会弹出软键盘，软键盘会占用屏幕面积，失去焦点时软键盘消失，但是仍会占用，页面就会不能恢复原状，也就导致input框不能再次输入了。<br><em><strong>解决：</strong></em><br>在input失去焦点键盘收起时，写一个监听事件，事例代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeBlur()&#123;</span><br><span class="line">	let ua &#x3D; navigator.userAgent; &#x2F;&#x2F; 获取用户代理</span><br><span class="line">	let app &#x3D; navigator.appVersion; &#x2F;&#x2F; 获取客户端版本信息</span><br><span class="line">	let isIos &#x3D; ua.match(&#x2F;i[^;]+;( U;)? CPU.+Mac OS X&#x2F;); &#x2F;&#x2F; 判断是否是Ios设备</span><br><span class="line">	if(isIos)&#123;</span><br><span class="line">		setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">			const scrollHeight &#x3D; document.documentElement.scrollTop || document.body.scrollTop || 0</span><br><span class="line">			window.scrollTop(0,Math.max(scrollHeight - 1), 0)</span><br><span class="line">		&#125;,100)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>延伸：</strong></em><br>在iso的微信开发中，页面元素如果用到了position: fixed进行定位，那么键盘收起时，就会被顶上去，第三方输入法也不例外。</p>
+<h2 id="4、Android弹出键盘遮挡文本输入框"><a href="#4、Android弹出键盘遮挡文本输入框" class="headerlink" title="4、Android弹出键盘遮挡文本输入框"></a>4、Android弹出键盘遮挡文本输入框</h2><p><em><strong>bug描述：</strong></em><br>刚才说的问题都是Ios端的，实际上Android上也有挺多坑，上面讲到Ios上输入框弹出键盘的问题后，Android中实际也有，只是现象不同；Andriod中弹出键盘后页面不会向上滑动，但是如果输入框在底部的话会直接被挡住。。。<br><em><strong>分析：</strong></em><br>很坑，因为Andriod中输入框focus后，并不会向上滑动，如果靠下就会被挡住。。<br><em><strong>解决：</strong></em><br>实际上跟Ios上处理差不多的方案，代码如下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; vue代码</span><br><span class="line">&lt;input @blur&#x3D;&quot;changeBlur()&quot;&#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line">changeFocus()&#123;</span><br><span class="line">   let ua &#x3D; navigator.userAgent;</span><br><span class="line">	 let app &#x3D; navigator.appVersion;</span><br><span class="line">   let isAndroid &#x3D; u.indexOf(&#39;Android&#39;) &gt; -1 || u.indexOf(&#39;Linux&#39;) &gt; -1;</span><br><span class="line">   if(isAndroid)&#123;</span><br><span class="line">      setTimeout(function() &#123;</span><br><span class="line">      document.activeElement.scrollIntoViewIfNeeded();</span><br><span class="line">      document.activeElement.scrollIntoView();</span><br><span class="line">      &#125;, 500);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em><strong>扩展</strong></em><br>Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动</p>
+<h2 id="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"><a href="#5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败" class="headerlink" title="5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败"></a>5、Vue中路由使用hash模式，分享时Android可分享成功，Ios端分享失败</h2><p><em><strong>bug描述：</strong></em><br>Ios的问题真的挺多的。。。</p>
+<ul>
+<li>在分享页面给A时，没问题，A把链接分享给B的时候就跳转到首页了；</li>
+<li>使用Vue-router跳转到第二个页面在分享时候，分享失败；<br>以上两个问题在Android上均没有问题。</li>
+</ul>
+<p><em><strong>分析：</strong></em><br>jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&amp;isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数<br><em><strong>解决：</strong></em></p>
+<ul>
+<li>可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功</li>
+<li>把入口地址保存在本地，等需要获取签名的时候再取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！（还没测试，有点low）</li>
+</ul>
+<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>虽然微信H5方式开发想对来说成本比较低，但是有时候坑开始挺多的，但是微信原生开发又增加了成本，很矛盾，目前能做的就是尽量把踩过的坑都记下来，下次别再跳进去了。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>微信</category>
+      </categories>
+      <tags>
+        <tag>兼容性问题</tag>
+        <tag>微信</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>npx是什么</title>
+    <url>/2020/04/16/what-is-npx/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在阅读一些文章时，经常看到介绍命令的时候用到了 npx 关键字，之前知道有 node 有 npm 但是很少用到 npx ，npx是个啥呢？好奇上网上找了些资料学习了一下，写篇学习笔记记录一下。</p>
+<span id="more"></span>
+<h2 id="npx-起源"><a href="#npx-起源" class="headerlink" title="npx 起源"></a>npx 起源</h2><p>我从阮一峰的博客中看到介绍 npx 的文章，开头的一句话说明了他诞生的日子。</p>
+<blockquote>
+<p>npm 从5.2版开始，增加了 npx 命令。</p>
+</blockquote>
+<p>为了验证阮一峰这里介绍的正确性我特意下了对应的npm版本验证了一下确实如此，而且在网上找到了另一位大佬司徒正美（大佬走好）博客中也对 npx 做了介绍</p>
+<blockquote>
+<p>最近我在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。</p>
+</blockquote>
+<p>由此，我可以肯定的告诉大家，npx是npm在5.2.0之后版本推出的一个工具，那么他是干嘛用的呢？</p>
+<h2 id="npx-作用"><a href="#npx-作用" class="headerlink" title="npx 作用"></a>npx 作用</h2><p>想要了解一个技术，最好的途经是他的官网，于是我到网上找到了 npx 在 github 上的仓库，地址如下<br><a href="https://github.com/npm/npx#readme">npx仓库</a>，其中对 npx 有这样一段介绍</p>
+<blockquote>
+<p>DESCRIPTION<br>Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.<br>By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.<br>Unless a –package option is specified, npx will try to guess the name of the binary to invoke depending on the specifier provided. All package specifiers understood by npm may be used with npx, including git specifiers, remote tarballs, local directories, or scoped packages.<br>If a full specifier is included, or if –package is used, npx will always use a freshly-installed, temporary version of the package. This can also be forced with the –ignore-existing flag.</p>
+</blockquote>
+<p>上面这一大段英文我想大家一定看了就头疼，所以为了大家不那么头疼，可以看一下下面我翻译的内容，如果有翻译不对的地方，还请指正。</p>
+<blockquote>
+<p>解释<br>执行 command 命令，无论从本地（我理解为项目目录）node_modules/.bin 或者从全局缓存中， 安装所需执行的任何包。<br>默认情况下，npx将检查 command 是否存在于 $PATH 中，或者在本地项目二进制文件中，并执行该命令。<br>如果没有找到 command ，它将在执行之前安装。<br>除非指定了 —package 选项，否则npx将根据提供的说明符猜测要调用的二进制文件的名称。<br>npm可以理解的所有包说明符都可以与npx一起使用，包括git说明符、远程tarball、本地目录或作用域包。<br>如果包含完整的说明符，或者使用 ——package 选项，npx将始终使用新安装的包的临时版本。<br>这也可以用 ——ignore-existing 标记强制执行。</p>
+</blockquote>
+<p>上面这段机翻简直让人无法理解，所以我又去大佬博客下看了下他们的解释</p>
+<blockquote>
+<p>npx 想要解决的主要问题，就是调用项目内部安装的模块。 – 阮一峰<br>根据 zkat/npx 的描述，npx 会帮你执行依赖包里的二进制文件。 – 司徒正美</p>
+</blockquote>
+<p>司徒大大文章写的太简洁了，不过他还是举了例子，我进行了一下精简，如下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">./node_modules/.bin/webpack -v <span class="comment">// =&gt; npx webpack -v</span></span><br></pre></td></tr></table></figure>
+<p>简单来说就是找包执行命令的时候不再关注他在哪了，直接就可以用了。</p>
+<p>阮一峰老师的文章更像是官网的翻译加理解</p>
+<blockquote>
+<p>npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。<br>由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。</p>
+</blockquote>
+<p>另外阮一峰老师还介绍了一个临时安装命令使用的场景，我理解为对上面英语介绍倒数第二句的理解</p>
+<h3 id="避免全局安装模块"><a href="#避免全局安装模块" class="headerlink" title="避免全局安装模块"></a>避免全局安装模块</h3><p>除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。</p>
+<p>下载全局模块时，npx 允许指定版本。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx uglify-js@3.1.0 main.js -o ./dist/main.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。</p>
+<p>注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx http-server</span><br></pre></td></tr></table></figure>
+
+<p>然后阮老师还对官网最后一句话做了解释</p>
+<h3 id="–no-install-参数和–ignore-existing-参数"><a href="#–no-install-参数和–ignore-existing-参数" class="headerlink" title="–no-install 参数和–ignore-existing 参数"></a>–no-install 参数和–ignore-existing 参数</h3><p>如果想让 npx 强制使用本地模块，不下载远程模块，可以使用–no-install参数。如果本地不存在该模块，就会报错。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx --no-install http-server</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用–ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx --ignore-existing create-react-app my-react-app</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>然后对于官网上的 example 阮老师也挑了重点的做了介绍，如选择指定的 node 版本</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx node@0.12.8 -v</span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。<br>某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。</p>
+<h2 id="更多参数"><a href="#更多参数" class="headerlink" title="更多参数"></a>更多参数</h2><h3 id="p-参数"><a href="#p-参数" class="headerlink" title="-p 参数"></a>-p 参数</h3><p>-p参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx -p node@0.12.8 node -v </span><br><span class="line">v0.12.8</span><br></pre></td></tr></table></figure>
+<p>上面命令先指定安装<a href="mailto:&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;">&#x6e;&#x6f;&#x64;&#101;&#64;&#48;&#x2e;&#49;&#50;&#x2e;&#x38;</a>，然后再执行node -v命令。<br>-p参数对于需要安装多个模块的场景很有用。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay [<span class="built_in">command</span>]</span><br></pre></td></tr></table></figure>
+<h3 id="c-参数"><a href="#c-参数" class="headerlink" title="-c 参数"></a>-c 参数</h3><p>如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"><span class="comment"># 报错</span></span><br></pre></td></tr></table></figure>
+<p>上面代码中，cowsay hello | lolcatjs 执行时会报错，原因是第一项 cowsay 由 npx 解释，而第二项命令localcatjs由 Shell 解释，但是lolcatjs并没有全局安装，所以报错。</p>
+<p>-c参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx -p lolcatjs -p cowsay -c <span class="string">&#x27;cowsay hello | lolcatjs&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm run env | grep npm_</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>-c参数可以把这些 npm 的环境变量带入 npx 命令。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npx -c <span class="string">&#x27;echo &quot;$npm_package_name&quot;&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面代码会输出当前项目的项目名。</p>
+<h2 id="执行-GitHub-源码"><a href="#执行-GitHub-源码" class="headerlink" title="执行 GitHub 源码"></a>执行 GitHub 源码</h2><p>npx 还可以执行 GitHub 上面的模块源码。</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 执行 Gist 代码</span></span><br><span class="line">$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32</span><br><span class="line"></span><br><span class="line"><span class="comment"># 执行仓库代码</span></span><br><span class="line">$ npx github:piuccio/cowsay hello</span><br></pre></td></tr></table></figure>
+<p>注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。</p>
+<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><p>因为还没有实际使用过的经验，所以更多的内容从其他大佬哪里白嫖来的知识，做个笔记以观后效。</p>
+]]></content>
+      <categories>
+        <category>NodeJS</category>
+      </categories>
+      <tags>
+        <tag>npx</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>为什么 0.1 + 0.2 != 0.3</title>
+    <url>/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><p>因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。</p>
+<p>我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; (0011) 表示循环</span><br><span class="line">0.1 &#x3D; 2^-4 * 1.10011(0011)</span><br></pre></td></tr></table></figure>
+<p>那么如何得到这个二进制的呢，我们可以来演算下</p>
+<p>小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 <code>0.1 = 2^-4 * 1.10011(0011)</code>，那么 <code>0.2</code> 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 <code>0.2 = 2^-3 * 1.10011(0011)</code>。</p>
+<p>回来继续说 <code>IEEE 754</code> 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 <code>0.1</code> 和 <code>0.2</code> 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。</p>
+<p>所以 <code>2^-4 * 1.10011...001</code> 进位后就变成了 <code>2^-4 * 1.10011(0011 * 12次)010</code> 。那么把这两个二进制加起来会得出 <code>2^-2 * 1.0011(0011 * 11次)0100</code> , 这个值算成十进制就是 <code>0.30000000000000004</code></p>
+<p>下面说一下原生解决办法，如下代码所示</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">parseFloat((0.1 + 0.2).toFixed(10))</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>知识点</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>巧妙利用Acitons进行博客的自动构建</title>
+    <url>/2019/12/27/Actions/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>忙活了很久很久，终于不那么忙了，也终于想起来我还有个博客没有运行，哎，虽然用Hexo可以享受Github提供的免费的空间和域名，但是命令行敲代码的方式实现博客编写还是有些不方便，尤其是需要编程环境的时候，最近公司在用CICD的方式对代码进行构建，我就在想有没有一种方式让博客也可以变成这样，于是我就在网上搜<code>Github</code> <code>Hexo</code> <code>自动构建</code> 这些个词，还真让我搜到了一种方法而且还是Github自己提供的，下面隆重请出 <code>GitHub Actions</code>。</p>
+<span id="more"></span>
+
+<h2 id="GitHub-Actions-是什么"><a href="#GitHub-Actions-是什么" class="headerlink" title="GitHub Actions 是什么"></a>GitHub Actions 是什么</h2><p>GitHub Actions 由 GitHub 官方推出的工作流工具。典型的应用场景应该是 CI/CD，类似 Travis 的用法。如果不知道 CI/CD&amp;Travis 感兴趣的建议去了解一下，下面不展开说明，直接说怎么用就好。</p>
+<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>在使用 <code>GitHub Actions</code> 之前我们先来看看我们有什么；<br>首先我们有一个放博客程序的地方，我这里是叫做 <code>blog-source</code> ，另外呢有一个通过 hexo g 创建出来的静态网站，为了存放它而建的另一个仓库，我这里是叫做<code>lixuguang.github.io</code>,也就是说我们现在是有这样两个仓库。<br>|仓库|作用|<br>|-|-|<br>|blog-source|放博客源代码|<br>|lixuguang.github.io|放博客生成代码|</p>
+<h2 id="生成密钥"><a href="#生成密钥" class="headerlink" title="生成密钥"></a>生成密钥</h2><p>因为 <code>GitHub Actions</code> 它需要访问我的 <code>blog-source</code> 仓库的代码所以必须要有密钥，密钥大家应该熟悉了，创建博客的时候也是创建了一个公钥和私钥用来在本地往 <code>lixuguang.github.io</code> 这个仓库提交代码<br>这里呢我们用下面的命令生成密钥。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -f ~&#x2F;.ssh&#x2F;github-actions-deploy # 连按三次回车即刻</span><br></pre></td></tr></table></figure>
+<p>命令执行完成后，我们会得到两个文件 <code>github-actions-deploy</code> 和 <code>github-actions-deploy.pub</code> 两个文件，第一个是私钥，第二个是公钥。<br>|名称|解释|<br>|-|-|<br>|github-actions-deploy|私钥|<br>|github-actions-deploy.pub|公钥|</p>
+<p>接下来的步骤一定要好好看，因为我在这个地方被卡住好多次，就是因为有的文章说的并不正确，或者至少是讲的不够仔细，这里我会仔细地说明一下。</p>
+<h2 id="配置-GitHub-仓库"><a href="#配置-GitHub-仓库" class="headerlink" title="配置 GitHub 仓库"></a>配置 GitHub 仓库</h2><h3 id="配置博客源代码仓库"><a href="#配置博客源代码仓库" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里的源代码是放在 <code>blog-source</code> 中，所以我现在要给源代码仓库配置<code>私钥</code>，配置过程如下：<br>打开 <code>blog-source</code> 仓库，选择 <code>settings</code>，然后选中 <code>secrets</code> ， 再点击 <code>Add new secrets</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Name|HEXO_DEPLOY_PRI（名称自动构建时有用）|<br>|Value|github-actions-deploy|</p>
+<h3 id="配置博客源代码仓库-1"><a href="#配置博客源代码仓库-1" class="headerlink" title="配置博客源代码仓库"></a>配置博客源代码仓库</h3><p>我这里生成的博客静态代码是放在 <code>lixuguang.github.io</code> 中，所以我现在要给静态代码仓库配置<code>公钥</code>，配置过程如下：<br>打开 <code>lixuguang.github.io</code>，选择 <code>settings</code>，然后选中 <code>keys</code>，再点击 <code>Add deploy key</code>，照着下面填写内容<br>|字段|值|<br>|-|-|<br>|Title|HEXO_DEPLOY_PUB|<br>|Key|github-actions-deploy.pub|</p>
+<h2 id="编写-Actions-脚本"><a href="#编写-Actions-脚本" class="headerlink" title="编写 Actions 脚本"></a>编写 Actions 脚本</h2><p>经过上面一系列的准备操作，终于来到了编写自动构建脚本的环节，构建脚本如下，如果按照上面我做的操作一步步来的话，那么这一步你可以直接copy啦</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: Deploy Blog</span><br><span class="line"></span><br><span class="line">on: [push] # 当有新push时运行</span><br><span class="line"></span><br><span class="line">jobs:</span><br><span class="line">  build: # 一项叫做build的任务</span><br><span class="line"></span><br><span class="line">    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行</span><br><span class="line">    </span><br><span class="line">    steps:</span><br><span class="line">    - name: Checkout # 将仓库内master分支的内容下载到工作目录</span><br><span class="line">      uses: actions&#x2F;checkout@v1 # 脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;checkout</span><br><span class="line">      </span><br><span class="line">    - name: Use Node.js 10.x # 配置Node环境</span><br><span class="line">      uses: actions&#x2F;setup-node@v1 # 配置脚本来自 https:&#x2F;&#x2F;github.com&#x2F;actions&#x2F;setup-node</span><br><span class="line">      with:</span><br><span class="line">        node-version: &quot;10.x&quot;</span><br><span class="line">    </span><br><span class="line">    - name: Setup Hexo env</span><br><span class="line">      env:</span><br><span class="line">        HEXO_DEPLOY_PRI: $&#123;&#123; secrets.HEXO_DEPLOY_PRI &#125;&#125; # 这里是上面配置的私钥名称</span><br><span class="line">      run: |</span><br><span class="line">        # set up private key for deploy</span><br><span class="line">        mkdir -p ~&#x2F;.ssh&#x2F;</span><br><span class="line">        echo &quot;$HEXO_DEPLOY_PRI&quot; | tr -d &#39;\r&#39; &gt; ~&#x2F;.ssh&#x2F;id_rsa # 配置秘钥</span><br><span class="line">        chmod 600 ~&#x2F;.ssh&#x2F;id_rsa</span><br><span class="line">        ssh-keyscan github.com &gt;&gt; ~&#x2F;.ssh&#x2F;known_hosts</span><br><span class="line">        # set git infomation</span><br><span class="line">        git config --global user.name &#39;lixuguang&#39; # 换成你自己的名字</span><br><span class="line">        git config --global user.email &#39;lixuguang@gmail.com&#39; # 换成你自己的邮箱</span><br><span class="line">        # install dependencies</span><br><span class="line">        npm i -g hexo-cli # 安装hexo</span><br><span class="line">        npm i</span><br><span class="line">  </span><br><span class="line">    - name: Deploy</span><br><span class="line">      run: |</span><br><span class="line">        # publish</span><br><span class="line">        rm -rf .deploy_git # 如果上次构建失败这句命令会清除上次失败的代码</span><br><span class="line">        hexo generate &amp;&amp; hexo deploy # 执行部署程序</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<hr>
+<p>通过以上这些步骤的操作，如果没什么意外的话，博客的自动构建就完成了，之后只要你提交新的文章到博客源代码仓库，它将自动帮你生成并发送到博客的静态代码仓库，再也不用执行hexo g -d啦，如果这篇文章对你有用，欢迎follow我或打赏一下这篇文章，感谢阅读。</p>
+<p>ps：这里有个小坑需要注意一下，因为博客的皮肤也是另外一个git仓库，如果你在本地构建好用但是线上构建博客不显示了，需要注意下是不是皮肤没有上传到博客源码仓库，这里我遇到了，希望你不会因此困扰，拜拜~</p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+        <category>博客技巧</category>
+      </categories>
+      <tags>
+        <tag>Hexo</tag>
+        <tag>Github</tag>
+        <tag>Actions</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>从零开始：学习Cordova（一）</title>
+    <url>/2020/11/10/learn-cordova-1/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>很长时间没有写博客了，因为最近换了工作，原来的技术栈基本上都换了，现在接触了很多新的技术栈，<code>Cordova</code> 就是其中之一。</p>
+<p>接下来这篇文章就是我的学习笔记，以供回顾，写的不好请勿拍砖。</p>
+<span id="more"></span>
+<h2 id="一、What-is-Cordova？-Cordova是个啥？"><a href="#一、What-is-Cordova？-Cordova是个啥？" class="headerlink" title="一、What is Cordova？ Cordova是个啥？"></a>一、What is Cordova？ Cordova是个啥？</h2><p><img src="https://ftp.bmp.ovh/imgs/2020/11/b06130e60ab12a42.png" alt="Logo"><br>移动端开发和 <code>Web</code> 开发有一些不一样，<code>Web</code> 端开发面向的是浏览器，而移动端开发面向的是各种移动设备，那么针对各种移动设备提供的 <code>SDK</code> 进行开发的话，我们通常称之为***<code>原生开发</code>***，原生开发虽然通常调用底层 <code>Api</code> ，性能更好，但是因为不同移动终端底层技术不一样，所以每种设备都要单独开发，这样开发成本和能力要求都比较高，所以通常都会有一些框架来兼容各种平台，就好比 <code>Java</code> 虚拟机可以运行在 <code>Mac/Windows/Linux</code> 一样，为了能够写一套移动端代码可以在各种设备中使用，于是乎就有了 <code>Cordova</code> 。</p>
+<p>上面说了这么一堆废话，其实简言之，***<code>Cordova</code> 就是提供了跨设备调用底层Api的移动端开发框架（这种开发方式又叫做Hybird 模式）***</p>
+<p>知道这一点应该就够了，当然这是我认为的。</p>
+<p><code>Cordova</code> 的官网地址如下</p>
+<blockquote>
+<p><a href="https://cordova.apache.org/">https://cordova.apache.org/</a></p>
+</blockquote>
+<p>其实从这里就可以看出， <code>Cordova</code> 是 <code>Apache</code> 基金下的一个项目，其官网是这样介绍它的</p>
+<blockquote>
+<p>Mobile apps with HTML, CSS &amp; JS<br>Target multiple platforms with one code base<br>Free and open source</p>
+</blockquote>
+<p>翻译成中文的话就是</p>
+<blockquote>
+<p>使用 <code>Html</code> ，<code>CSS</code> 和 <code>JS</code> 进行移动端应用开发<br>一份代码多平台使用<br>免费并且开源</p>
+</blockquote>
+<p>三句话解释了 <code>Cordova</code> 的三个方面，</p>
+<ul>
+<li>使用前端技术开发-对前端开发友好</li>
+<li>跨平台-节省开发工时，降低开发难度-从图标看支持 <code>Android/IOS/WP</code>三大平台</li>
+<li>免费不用解释开源的话意味着会有很多人贡献代码</li>
+</ul>
+<p>以上奠定了 <code>Cordova</code> 强大及流行的基础。</p>
+<h2 id="二、快速上手"><a href="#二、快速上手" class="headerlink" title="二、快速上手"></a>二、快速上手</h2><p>在使用 <code>Cordova</code> 做移动端开发之前需要做一些环境准备工作，首先要安装 <code>Node</code> 以及它携带的 <code>Npm</code> 包管理器，这个现代的前端开发应该都知道，我这里就不多说了，装它就完了。</p>
+<p>装好之后我们就要用 <code>Npm</code> 全局安装一下 <code>Cordova</code> 项目的依赖，命令很简单；</p>
+<p>方便的话还要装一下 <code>Git</code> ，因为一些命令要在 <code>git-cmd</code> 上执行，当然管理代码也是需要它的，所以装吧。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install -g cordova</span><br></pre></td></tr></table></figure>
+<p>就这么简单就可以开发 <code>Cordova</code> 应用了，接下来我们要创建一个项目，创建项目的命令也十分简单。在命令行工具中输入下面的命令你就创建了一个 <code>Cordova</code> 的应用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova create &lt;path&gt; <span class="comment">// 这里的path是项目的路径</span></span><br></pre></td></tr></table></figure>
+<p>如果要查看创建项目时还能设置什么参数你可以执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova help create</span><br></pre></td></tr></table></figure>
+<p>怎么样是不是超级简单。<br>做了上面的工作你就创建了一个具备基本功能的 <code>Cordova</code> 项目，接下来我们要给项目配置一些东西。</p>
+<p>首先刚才讲到了， <code>Cordova</code> 是一个跨平台的框架，那么你的项目要适配什么平台你需要进行一些配置， <code>cd</code> 到项目目录下执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova platform add &lt;platform name&gt; <span class="comment">// platform name 为适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>如果不知道名称是什么命令行工具也贴心的给了查询用的命令，通过此命令你可以看到你安装了什么平台的适配，有哪些可以用</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova platform</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>执行了这个命令你将看到下面这样的 <code>list</code></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/***</span></span><br><span class="line"><span class="comment">Installed platforms:</span></span><br><span class="line"><span class="comment">Available platforms:</span></span><br><span class="line"><span class="comment">  android ^9.0.0</span></span><br><span class="line"><span class="comment">  browser ^6.0.0</span></span><br><span class="line"><span class="comment">  electron ^1.0.0</span></span><br><span class="line"><span class="comment">  windows ^7.0.0</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>项目也创建了，简单的配置工作也完成了，我们可以启动项目看一下效果了，那么我们就该执行运行项目的命令了</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova run &lt;platform name&gt; <span class="comment">// platform name 适配平台的名称</span></span><br></pre></td></tr></table></figure>
+<p>到这我们就快速的创建并运行起了一个 <code>Cordova</code> 的工程。</p>
+<h3 id="小Tip"><a href="#小Tip" class="headerlink" title="小Tip"></a>小Tip</h3><p>如上执行启动命令后，默认会启动<em><strong>8000</strong></em>端口，如果被占用的话可以通过增加命令行参数的形式改变端口号，参数如下设置</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova run browser --target=chrome --port=<span class="number">9090</span></span><br></pre></td></tr></table></figure>
+<p>以上就可以自定义端口及浏览器启动应用了。</p>
+<h2 id="三、详细了解"><a href="#三、详细了解" class="headerlink" title="三、详细了解"></a>三、详细了解</h2><h3 id="1、概览"><a href="#1、概览" class="headerlink" title="1、概览"></a>1、概览</h3><p>官网开头介绍了 <code>Cordova</code> 的身世和适用范围，前面开头已经讲过了不想再讲，直接看看 <code>Cordova</code> 的架构设计图。<br><img src="https://cordova.apache.org/static/img/guide/cordovaapparchitecture.png" alt="此处是个架构图"></p>
+<center>Cordova 架构图</center>
+
+<p>这个图理解起来不难，大的方面是两个部分，底层是 <code>MobileOS</code> ，也就是手机的操作系统本身，上层是由 <code>Cordova</code> 构建的框架；</p>
+<p><code>Cordova</code> 内部的话是两层结构：</p>
+<ul>
+<li>上层的话是由前端代码构成的 <code>WebApp</code> 部分；</li>
+<li>下层是 <code>Cordova</code> 的视图渲染引擎，它为 <code>WebApp</code> 提供了 <code>HtmlApi</code> 和 <code>CordovaApi</code> ；</li>
+</ul>
+<p>也就是说我们可以调用 <code>html</code> 的原生 <code>Api</code> 也可以使用 <code>Cordova</code> 提供的 <code>jsApi</code> ；</p>
+<p><code>Cordova</code> 还提供了丰富的插件系统；通过 <code>Cordova</code> 的视图引擎调用 <code>Cordova</code> 的 <code>NativeApi</code> 来调用一些 <code>Cordova</code> 提供好的调用设备的信息的 <code>Api</code> ，另外也可以调用一些用户自定义的 <code>Api</code> ；</p>
+<p><code>Cordova</code> 视图引擎和插件系统再将上层的需求通过 <code>MobileOS</code> 开放的 <code>Api</code> 能力实现具体功能，由此完成了整个 <code>Cordova</code> 框架的使用；</p>
+<p>总的来说这个原理跟大多数跨平台的框架原理都类似，由框架提供统一的 <code>Api</code> 能力，再由框架处理不同平台的兼容，这里特别之处在于渲染引擎可以允许使用前端原生的 <code>Api</code> ，这将大大降低开发的难度。</p>
+<h4 id="WebView"><a href="#WebView" class="headerlink" title="WebView"></a>WebView</h4><p>说到移动端开发，不知道 <code>WebView</code> 应该是不可能的，在原生移动应用中，<code>WebView</code> 就是移动应用内部嵌入的一个‘浏览器’，它可以允许你使用前端技术展示内容。</p>
+<h4 id="WebApp"><a href="#WebApp" class="headerlink" title="WebApp"></a>WebApp</h4><p><code>WebApp</code> 跟 <code>WebView</code> 两个词有些像，事实上它们也确实有些关系，<code>WebApp</code> 从名字就可以看出是使用 <code>Web</code> 技术开发的 <code>App</code> ，那么它跟 <code>WebView</code> 是什么关系呢，打个比方，<code>WebView</code> 就是个快递盒子， <code>WebApp</code> 就是你买的商品，一个是<em><strong>容器</strong></em>，一个是<em><strong>内容</strong></em>；这样说应该就明白了吧，通过前端技术开发的 <code>App</code> 通过 <code>WebView</code> 嵌入到 <code>App</code> 中，就可以带给用户原生应用的体验，忘了说 <code>WebApp</code> 是只能用浏览器访问的 <code>App</code> ；</p>
+<p>和纯 <code>WebApp</code> 不同，嵌入到 <code>WebView</code> 中的 <code>WebApp</code> 需要有一个配置文件，***<code>config.xml</code>*** ，它在项目的根目录下，说明了应用的一些信息，这个文件必不可少！！！</p>
+<h4 id="插件系统"><a href="#插件系统" class="headerlink" title="插件系统"></a>插件系统</h4><p>刚刚在上面的架构图中我们介绍了 <code>Cordova</code> 的插件系统，它提供了我们通过 <code>js</code> 调用 <code>MobileApi</code> 的能力，如电源/相机/联系人等等；<br>官方维护了核心的功能，当然如果你愿意也可以调用一些第三方提供的插件，你可以方便的通过 <code>npm</code> 包管理器安装；</p>
+<p><em><strong>但是有一点必须要说</strong></em>：项目创建后默认是不带任何插件的，即使是官方的核心插件也是需要你自己导入进去，第三方的更不用说了，另外<code>Cordova</code> 只提供了功能 <code>Api</code> 并不包含任何的 <code>UI</code> 部件和 <code>MV</code> 框架（你可以根据自己喜欢使用 <code>Angular</code> 或者 <code>Vue</code> 或者其他什么都可以），这一点要牢记。</p>
+<h4 id="开发工作流"><a href="#开发工作流" class="headerlink" title="开发工作流"></a>开发工作流</h4><p>使用 <code>Cordova</code> 开发 <code>MobileApp</code> 的时候即可以开发<strong>多个</strong>平台的 <code>App</code> （一次开发多平台可用，降低开发成本），也可以专注开发<strong>某一</strong>平台的<code>App</code> （使用前端技术开发，降低开发难度），因此开发工作流也分为两种：</p>
+<h5 id="跨平台-CLI-的工作流"><a href="#跨平台-CLI-的工作流" class="headerlink" title="跨平台(CLI)的工作流"></a>跨平台(CLI)的工作流</h5><p>官网上说了很多，也不难理解，这里用我自己的话说就是， <code>Cordova</code> 提供了一个牛叉的 <code>CLI</code> 工具，它可以自动的完成一次编码多平台构建的事，你只需要按照它说的方式开发就行。：）</p>
+<h5 id="平台为中心的工作流"><a href="#平台为中心的工作流" class="headerlink" title="平台为中心的工作流"></a>平台为中心的工作流</h5><p>这里不得不说我没有看很明白，但是结合下面的注意事项我是这样理解的，因为只为某一平台服务，所以有一些针对此平台的特殊的功能或者插件你就可以使用了（虽然不太清楚为什么这么做，如果你知道告诉我，谢谢），<strong>但是一旦使用了这种开发方式，那么就回不到跨平台开发了</strong>，因为你使用了针对某一平台才能调用的代码，这也不难理解，从字里行间感觉就是不建议使用这种开发工作流（好的好的，知道了）。</p>
+<p>好的，接下来开发 <code>App</code> 啦；</p>
+<h3 id="2、开发应用"><a href="#2、开发应用" class="headerlink" title="2、开发应用"></a>2、开发应用</h3><p>快速上手中已经介绍了如何准备、创建和启动应用，如何添加平台，这里就不多说了。说些没讲过的。</p>
+<p>上面说过检查目前平台安装情况的话可以使用下面的命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova platforms</span><br></pre></td></tr></table></figure>
+<p>我们也可以使用另一个命令来看，我试验了一下，效果是一样的。。。（问号脸，一样的为什么搞两个命令）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova platform ls</span><br></pre></td></tr></table></figure>
+<blockquote>
+<p>事后我发现，无论我使用的命令是 <code>platform</code> 还是 <code>platforms</code> 加不加 <code>ls</code> 都可以查到当前安装的平台。。。 啊~兼容性好强。</p>
+</blockquote>
+<p>每执行一次 <code>add</code> 命令，你就会发现工程目录下的 <code>platforms</code> 目录下就对应生成了一个对应平台的文件夹，切勿手贱删除，你虽然删除了文件夹，但是各处设置的 <code>platform</code> 并没有去掉，会导致报错，如果要删除请使用 <code>remove</code> 命令。 想知道还有哪些命令的话就看下面的链接吧。⇒ <a href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-platform-command">命令大全</a></p>
+<h3 id="安装构建的先决条件"><a href="#安装构建的先决条件" class="headerlink" title="安装构建的先决条件"></a>安装构建的先决条件</h3><p>因为 <code>Cordova</code> 的底层还是要调用 <code>MobileOS</code> 的接口，所以各平台的 <code>SDK</code> 是必须要装的，当然这里指的是你要进行构建的平台，比如你要构建 <code>Android</code> 应用，那么你就要装 <code>Android</code> 的 <code>SDK</code> ，<code>IOS</code> 同理。<strong>这里有一个例外</strong><code>broswer</code>平台是不需要依赖其他 <code>SDK</code> 的（明明是开发 <code>APP</code> ，这里只是为了验证画面比较方便）<br>要看你是否满足了构建需要的依赖，可以执行下面的命令查看</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova requirements</span><br></pre></td></tr></table></figure>
+<p>执行完后你会得到如下结果</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Requirements check results <span class="keyword">for</span> android:</span><br><span class="line">Java JDK: installed .</span><br><span class="line">Android SDK: installed</span><br><span class="line">Android target: installed android-<span class="number">19</span>,android-<span class="number">21</span>,android-<span class="number">22</span>,android-<span class="number">23</span>,Google Inc.:Google Apis:<span class="number">19</span>,Google Inc.:Google Apis (x86 System Image):<span class="number">19</span>,Google Inc.:Google Apis:<span class="number">23</span></span><br><span class="line">Gradle: installed</span><br><span class="line"></span><br><span class="line">Requirements check results <span class="keyword">for</span> ios:</span><br><span class="line">Apple OS X: not installed</span><br><span class="line">Cordova tooling <span class="keyword">for</span> iOS requires Apple OS X</span><br><span class="line"><span class="built_in">Error</span>: Some <span class="keyword">of</span> requirements check failed</span><br></pre></td></tr></table></figure>
+<p>这样你就可以清楚的知道自己需要安装哪些依赖才能完成对应平台的构建，简直方便的不要不要的。<br>具体想知道不同的平台都依赖些什么，你可以参见下面的链接；</p>
+<ul>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#requirements-and-support">Android平台的要求</a></li>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/ios/index.html#requirements-and-support">iOS平台的要求</a></li>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/win8/index.html#requirements-and-support">Windows平台的要求</a></li>
+</ul>
+<h3 id="构建-App"><a href="#构建-App" class="headerlink" title="构建 App"></a>构建 <code>App</code></h3><p>在 <code>create</code> 项目之后，项目的根目录下会生成一个 <code>www</code> 目录，这个目录包含了 <code>webapp</code> 的入口页面 <code>index.html</code> ，入口文件的话是 <code>www/js/index.js</code> 文件的 <code>deviceready</code> 事件中。</p>
+<p>如果要构建代码的话，执行下面的命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova build</span><br></pre></td></tr></table></figure>
+<p>这个命令会构建你安装的所有平台，如果只想构建某一平台的话，可以把平台的名字加在命令后面，如</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova build ios</span><br></pre></td></tr></table></figure>
+<p>如果想了解更多的参数的话，可以看一下后面的链接。⇒ <a href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-build-command">更多参数</a></p>
+<h3 id="测试-App"><a href="#测试-App" class="headerlink" title="测试 App"></a>测试 <code>App</code></h3><p>构建完 <code>App</code> 之后我们就可以测试了，通常各平台的 <code>SDK</code> 中会提供模拟器，我们只需要执行下面的命令就可以启动模拟器。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova emulate android</span><br></pre></td></tr></table></figure>
+<p>当然如果你觉得用实机查看更自然一些的话，也可以把手机插上数据线与电脑建立连接，然后执行下面的命令就可以了。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
+<p>上面演示的是 <code>Android</code> 的 <code>App</code> 测试过程，每个平台虽然基本类似，但还是有出入，所以，下面提供了不同平台的调试方法，供你预览。</p>
+<ul>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html#setting-up-an-emulator">设置Android模拟器</a></li>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-run-command">Cordova run 命令参考文档</a></li>
+<li><a href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-emulate-command">Cordova emulate 命令参考文档</a></li>
+</ul>
+<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><p>如果只是开发一个 <code>Cordova</code> 框架的 <code>WebApp</code> ，那么你不需要装任何插件，直接用前端技术开发就好了，但是应该没人会这么做吧，毕竟开发这个的目的就是为了跨平台开发原生级移动 <code>App</code> ，因此要调用移动设备的各种功能就必须安装插件。</p>
+<h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p><code>Cordova</code> 插件是一些使用 <code>Javascript</code> 调用原生 <code>SDK</code> 功能的包；<br>你可以使用两种方式找到你想要的插件</p>
+<ol>
+<li>通过 <code>Cordova</code> 提供的包管理平台 ⇒ <a href="http://cordova.axuer.com/plugins/">插件搜索页</a></li>
+<li>通过命令行搜索 <em><strong><code>cordova plugin search camera</code></strong></em></li>
+</ol>
+<p>选好你要安装的插件之后你需要执行下面的命令来安装它</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova plugin add &lt;plugin name&gt; <span class="comment">// 如 cordova plugin add cordova-plugin-chrome-apps-proxy</span></span><br></pre></td></tr></table></figure>
+<p>如果你的包没有发布在 <code>Cordova</code> 的平台上，也可以使用 <code>git</code> 地址来安装。<br>另外 <code>Cordova</code> 还非常贴心的提供了一个工具 <code>Plugman</code> 来帮助开发者更好的管理 <code>Cordova</code> 插件。⇒ <a href="http://cordova.axuer.com/docs/zh-cn/latest/plugin_ref/plugman.html">Plugman参考</a></p>
+<p>如果要查看你安装了哪些插件可以使用下面任意一种命令都可以。（咱也不知道为啥提供这么多方式，反正好用无脑）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">plugin ls</span><br><span class="line">plugin list</span><br><span class="line">plugin</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">$ cordova plugin ls</span></span><br><span class="line"><span class="comment">cordova-plugin-whitelist 1.2.1 &quot;Whitelist&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
+<p>如果想知道更多关于 <code>plugin</code> 的命令参数，可以看右边的链接 ⇒ <a href="http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-plugin-command">plugin参数</a></p>
+<h4 id="使用-merges-自定义每个平台"><a href="#使用-merges-自定义每个平台" class="headerlink" title="使用 merges 自定义每个平台"></a>使用 <code>merges</code> 自定义每个平台</h4><p>虽然可以用一套代码来构建多个平台，但一些平台会有自己的特点，就好像 <code>Chrome</code> 浏览器默认的字体大小与 <code>IE</code> 的不同， <code>Android</code> 与 <code>IOS</code> 也有不一样的地方，这种情况下去改 <code>www</code> 目录下的文件显然是不合适的，所以 <code>Cordova</code> 提供了 <code>merges</code> 方式来适配不同平台各自的特别处理，你要做的就是在项目的根目录下创建一个 <code>merges</code> 目录，比如你要适配 <code>Android</code> ，你就可以在 <code>merges</code> 下创建一个 <code>android</code> 目录，然后在下面或覆盖或添加新的资源。（这里官网没有说 <code>merges</code> 在哪里创建，试验后发现是在根目录下）</p>
+<h4 id="更新-Cordova-和你的项目"><a href="#更新-Cordova-和你的项目" class="headerlink" title="更新 Cordova 和你的项目"></a>更新 <code>Cordova</code> 和你的项目</h4><p>如果你要更新你的 <code>Cordova</code> （通常不建议这么干，当然你知道后果并想要使用新的特性或者修正 <code>bug</code> 除外），那么你需要执行一下 <code>update</code> 命令</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">sudo npm update -g cordova</span><br></pre></td></tr></table></figure>
+<p>当然你也可以指定更新到什么版本（这都是 <code>npm</code> 的知识了）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">sudo npm install -g cordova@<span class="number">3.1</span><span class="number">.0</span>-<span class="number">0.2</span><span class="number">.0</span></span><br></pre></td></tr></table></figure>
+<p>你也可以使用下面的命令查看当前的版本（还是 <code>npm</code> 的知识）</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm info cordova version</span><br></pre></td></tr></table></figure>
+<p>你是不是以为这样就可以了，不好意思还不行，你还需要把各个平台进行一下升级</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cordova platform update android --save</span><br><span class="line">cordova platform update ios --save</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>
+<p>其实这也好理解，你都已经轿车换 <code>SUV</code> 了，总不能还用原来的车轱辘吧，只是我希望能不能在换车的时候一块儿把车轱辘换了（这里的意思是希望直接自动化处理了）</p>
+<p>到这里你的第一个 <code>App</code> 就已经开发好了，是不是还有点成就感。</p>
+<h3 id="一些参考资料"><a href="#一些参考资料" class="headerlink" title="一些参考资料"></a>一些参考资料</h3><p>到这里一个简单的基于 <code>Cordova</code> 搭建的 <code>App</code> 就实现了，当然一个 <code>App</code> 绝不这么简单，各平台的 <code>SDK</code> 安装也没那么简单，但这不是本篇文章要说的事了，下一篇文章我会说说如何应对各种不同的开发平台，在这之前还请你看一下 <code>Cordova</code> 都支持哪些平台，具体看一下下面的链接。</p>
+<p>好了，今天就先写到这里，下篇文章我们再见。</p>
+<p><a href="http://cordova.axuer.com/docs/zh-cn/latest/guide/support/index.html">平台支持</a></p>
+<p>（待续…）</p>
+]]></content>
+      <categories>
+        <category>大前端</category>
+        <category>移动开发</category>
+      </categories>
+      <tags>
+        <tag>Cordova</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>从零开始：学习Ionic（一）</title>
+    <url>/2020/11/11/learn-ionic-1/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在移动 <code>App</code> 开发领域，有一个框架非常知名，每每面试都会被问起，“你用过 <code>Ionic</code> 么？”，是的，就是 <code>Ionic</code> 框架。</p>
+<p>之前已经学习过了 <code>Cordova</code> ，它和 <code>Ionic</code> 可以说是一对黄金搭档，一个面向 <code>MobileOS</code> ，一个面向 <code>UI</code> ，很多人搞不清楚它们之间的区别，没关系，回头我再抽时间讲一下，今天我们主要来认识一下 <code>Ionic</code>。</p>
+<p>好戏开始：）</p>
+<span id="more"></span>
+<h2 id="Ionic-简介"><a href="#Ionic-简介" class="headerlink" title="Ionic 简介"></a>Ionic 简介</h2><p>学一门技术，我们首先要知道它是谁，能干啥，有啥好处。要了解一门新技术最好的方式就是去它的官网看看。<br>（一言不合丢给你一个官网 ⇒ <a href="https://ionicframework.com/">官网</a>）</p>
+<blockquote>
+<p>One codebase.<br>Any platform.<br>Now in Vue.</p>
+</blockquote>
+<p>翻译过来是这样的</p>
+<blockquote>
+<p>一份代码<br>任何平台<br>现在支持Vue</p>
+</blockquote>
+<p>看着是不是眼熟，嗯，跟 <code>Cordova</code> 的口号何其相似，目标都是跨平台，只是 <code>Cordova</code> 跨的是 <code>MobileOS</code> 而 <code>Ionic</code> 跨的是前端框架。<br>最下面一句 <code>Now in Vue</code> 像是在说，“嗯，我也支持Vue了（Vue发展太快了，不能掉队）”，要知道，最开始的 <code>Ionic</code> 是妥妥的 <code>Angular</code> 派，不过无所谓，管他黑猫白猫，能完成任务就是好猫。</p>
+<p>再往下看你会看到，巴拉巴拉说了一堆好处，比如开发迅速啊，组件优美且丰富啊，社区强大啊，还有跨平台（支持原生 <code>js</code> ，<code>Angular</code> ，<code>Vue</code> ，nice~），另外还提供了 <code>native</code> 的组件来直接调用移动设备的功能，可以说是相当强大了。</p>
+<p>好了，看完了介绍，我们赶紧快速上手吧。</p>
+<h2 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h2><p>在使用<code>Ionic</code>做开发还是要做一些准备工作，<code>node</code>，<code>git</code>都是必不可少的，所以请先行准备好。</p>
+<p>目前，<code>Ionic</code>提供了两种创建工程的方式:</p>
+<ul>
+<li>一种用官方的话说叫<code>StepByStep</code>，看过之后我理解就是通过命令的方式，一步步来；</li>
+<li>另一种的话是官方提供了一个向导工具，就跟安装软件一样填一些必要的信息，然后一路下一步就生成了一个工程；</li>
+</ul>
+<p>接下来我将使用这两种方式分别创建工程，首先是第一种。</p>
+<h3 id="StepByStep-创建工程"><a href="#StepByStep-创建工程" class="headerlink" title="StepByStep 创建工程"></a>StepByStep 创建工程</h3><ol>
+<li>全局安装<code>Ionic</code>的脚手架工具<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install -g @ionic/cli</span><br></pre></td></tr></table></figure></li>
+<li>创建工程<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">ionic start myApp tabs <span class="comment">// myApp 是项目目录名称也是工程名称 tabs是模板名称</span></span><br></pre></td></tr></table></figure></li>
+<li>启动工程<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cd myApp</span><br><span class="line">ionic serve</span><br></pre></td></tr></table></figure></li>
+</ol>
+<p>嗯，上面三个步骤之后，你的Ionic项目就启动起来了。（What ！？ 这么简单？！ 嗯，是的。）</p>
+<h3 id="向导式（App-Wizard）创建工程"><a href="#向导式（App-Wizard）创建工程" class="headerlink" title="向导式（App Wizard）创建工程"></a>向导式（App Wizard）创建工程</h3><p>这是一个在线创建工程的手段（感觉对于开发人员来说貌似还是命令行来的方便，这种可视化方案应该是给小白用户准备的吧），地址如下</p>
+<blockquote>
+<p><a href="https://ionicframework.com/start">https://ionicframework.com/start</a></p>
+</blockquote>
+<p><img src="/" alt="此处是个图"></p>
+<p>点开上面的地址，你会看到如图所示的一个界面，我们可以看到它要求你输入的一些信息</p>
+<ol>
+<li>App Name</li>
+<li>Icon</li>
+<li>Theme Color</li>
+<li>Template</li>
+<li>Framework</li>
+</ol>
+<p>可以看到这比命令行要多出几个信息，上面的命令行只要求了 <code>App Name</code> 和 <code>Template</code> 难道强大的命令行不支持设置这些么？答案是否定的，当然可以设置这些信息，只是以参数的形式而已，先不说这个，填写好上面的信息以后我们点击<code>[create App]</code>按钮，这时我们进入了下一步，选择代码仓库（Choose a git host），你会看到下面有一个<code>[Skip]</code>按钮说明这步不是必须的，我们先选择一个<code>git</code>仓库，这里我选择<code>github</code>，其他的感兴趣的同学可以自己试试。点击<code>[connect]</code>，这时会弹出一个窗口，申请对应git仓库的鉴权认证，认证通过后我们点击<code>[choose]</code>，等待程序运行一会儿后工程就会被上传到git仓库中，并且会跳转到一个<code>DashBoard</code>，提供了可视化管理工程的页面（也太高大上了吧），右侧我们看到如何把代码下载到本地，并运行它，真的是很方便。</p>
+<p>例：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install -g @ionic/cli cordova-res <span class="comment">// cordova-res 指的是安装 cordova 的开发依赖，因为除 cordova 之外还可以选择如 phonegap 之类的MobileOS 框架</span></span><br><span class="line">git clone https:<span class="comment">//github.com/lixuguang/li-app.git li-app</span></span><br><span class="line">cd li-app &amp;&amp; npm install &amp;&amp; ionic serve</span><br></pre></td></tr></table></figure>
+
+<p>执行完上面的命令以后，我们的工程也就运行起来了，也是十分方便，即使不会写代码的人，跟着指南也可以很方便的搭建一个Ionic工程。</p>
+<h2 id="深入学习"><a href="#深入学习" class="headerlink" title="深入学习"></a>深入学习</h2><p>Ionic 的体系当中，最重要的莫过于 Ionic CLI 和 UI Component 两个了，接下来我将分辨将这两部分中最重要的内容拿出来说说。</p>
+<h3 id="Ionic-CLI"><a href="#Ionic-CLI" class="headerlink" title="Ionic CLI"></a>Ionic CLI</h3><p>在上面的快速上手中，我们已经使用了几个命令，但这些还不够，Ionic CLI 提供了强大的命令，请与我一起看一下</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install -g @ionic/cli <span class="comment">// 全局安装 Ionic CLI</span></span><br><span class="line">ionic start myApp tabs <span class="comment">// 用模板创建工程</span></span><br><span class="line">ionic start --list <span class="comment">// 查看可用模板</span></span><br><span class="line">ionic serve <span class="comment">// 启动工程</span></span><br><span class="line">ionic serve --lab <span class="comment">// 以android或ios方式打开</span></span><br><span class="line">ionic lib update <span class="comment">// 更新包</span></span><br><span class="line">ionic serve --address <span class="number">192.168</span><span class="number">.89</span><span class="number">.1</span> <span class="comment">// 指定Ip，给外部用户访问</span></span><br><span class="line">ionic platform add ios/android <span class="comment">// 添加平台</span></span><br><span class="line">ionic build ios/android <span class="comment">// 构建平台</span></span><br><span class="line">ionic emulate ios [options]  <span class="comment">// ionic run ios [options] 模拟器运行</span></span><br><span class="line"></span><br><span class="line">ionic generate <span class="comment">// 创建新特性</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">options</span><br><span class="line">  -l <span class="comment">//livereload， 实时刷新变化。</span></span><br><span class="line">  -c  <span class="comment">//打印app里的console</span></span><br><span class="line">  -s  <span class="comment">//打印设备的console</span></span><br><span class="line">  -p  <span class="comment">//指定设备的端口</span></span><br><span class="line">  -i  <span class="comment">//指定livereload的重刷端口</span></span><br><span class="line">  --debug <span class="comment">//debug</span></span><br><span class="line">  --release <span class="comment">//release</span></span><br><span class="line">  --host=<span class="number">0.0</span><span class="number">.0</span><span class="number">.0</span> <span class="comment">// IP</span></span><br><span class="line">  --port=<span class="number">8100</span> <span class="comment">// 端口</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">ionic resources [--splash] [--icon] <span class="comment">// 上传代码到官方平台</span></span><br><span class="line">ionic upload <span class="comment">// 登录</span></span><br><span class="line">ionic info <span class="comment">// 查看系统信息</span></span><br><span class="line">ionic browser add crosswalk <span class="comment">// 加壳预览（手机浏览器性能问题解决）</span></span><br><span class="line">ionic browser list <span class="comment">// 查看可用的browser</span></span><br><span class="line">ionic browser revert android/ios <span class="comment">// 删除安装的browser</span></span><br><span class="line">ionic state reset <span class="comment">// 先删除平台和插件，再安装package.json文件中的平台和插件。重置</span></span><br><span class="line">ionic state save <span class="comment">// 保存当前状态信息</span></span><br><span class="line">ionic state clear <span class="comment">// 先删除平台和插件，然后按照package.json文件中包含的平台和插件重新安装。</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/angular@latest --save <span class="comment">// Ionic + Angular</span></span><br><span class="line">ng add @ionic/angular <span class="comment">// 使用Angular CLI 增加Ionic的组件库，可用于Angular项目改造Ionic</span></span><br><span class="line"></span><br><span class="line">npm install @ionic/react <span class="comment">// Ionic + React</span></span><br><span class="line">npm install @ionic/react-router <span class="comment">// 在既存的react项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务，加在根组件下</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/react/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">npm install @ionic/vue @ionic/vue-router <span class="comment">// Ionic + Vue ，在既存的Vue项目中引入ionic特性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js 文件中加入引入</span></span><br><span class="line"><span class="keyword">import</span> &#123; IonicVue &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = createApp(App)</span><br><span class="line">  .use(IonicVue)</span><br><span class="line">  .use(router);</span><br><span class="line"></span><br><span class="line">router.isReady().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  app.mount(<span class="string">&#x27;#app&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// router/index.js 用Ionic提供的vue-router替换原本的vue-router</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;@ionic/vue-router&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  <span class="comment">// routes go here</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(process.env.BASE_URL),</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 增加CSS文件为组件服务 main.js</span></span><br><span class="line"><span class="comment">/* Core CSS required for Ionic components to work properly */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/core.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Basic CSS for apps built with Ionic */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/normalize.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/structure.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/typography.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Optional CSS utils that can be commented out */</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/padding.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/float-elements.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-alignment.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/text-transformation.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/flex-utils.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@ionic/vue/css/display.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line">From here, you can learn about how to develop <span class="keyword">with</span> Ionic Framework <span class="keyword">in</span> our [Ionic Vue Quickstart Guide](https:<span class="comment">//ionicframework.com/docs/vue/quickstart).</span></span><br><span class="line"></span><br><span class="line">## Ionicons CDN</span><br><span class="line"></span><br><span class="line">Ionicons is packaged by <span class="keyword">default</span> <span class="keyword">with</span> the Ionic Framework, so no installation is necessary <span class="keyword">if</span> you<span class="string">&#x27;re using Ionic. To use Ionicons without Ionic Framework, place the following `&lt;script&gt;` near the end of your page, right before the closing `&lt;/body&gt;` tag.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script nomodule src=&quot;https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br></pre></td></tr></table></figure>
+
+
+<p>（待续…）</p>
+]]></content>
+      <categories>
+        <category>大前端</category>
+        <category>移动开发</category>
+      </categories>
+      <tags>
+        <tag>Ionic</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>CSS3新属性-pointer-events</title>
+    <url>/2020/05/14/css3-pointer-events/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天在看一个叫做Avue的框架组件时看到了一个叫做“全局水印”的组件，功能呢就是给当前页面加上一个水印遮罩，就像下图这样：<br><img src="https://s1.ax1x.com/2020/05/14/Y08cbd.png" alt="Y08cbd.png"><br>因为工作中有这样的场景，所以我很好奇看了一下他的代码，他的水印设置为了fixed定位，并且z-index设置的很高，但是它具有穿透性，最终我发现其中起作用的是一个叫做“pointer-events”的css3新属性，于是为了搞清楚它的作用，我在网上做了一番搜索，并把自己的认识整理一下。</p>
+<span id="more"></span>
+<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>MDN上是这样介绍这个属性的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">传送门</a>。</p>
+<blockquote>
+<p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。</p>
+</blockquote>
+<p>它有如下这些个属性值：</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* Keyword values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: auto;</span><br><span class="line"><span class="attribute">pointer-events</span>: none;</span><br><span class="line"><span class="attribute">pointer-events</span>: visiblePainted; <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleFill;    <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visibleStroke;  <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: visible;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: painted;        <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: fill;           <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: stroke;         <span class="comment">/* SVG only */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: all;            <span class="comment">/* SVG only */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Global values */</span></span><br><span class="line"><span class="attribute">pointer-events</span>: inherit;</span><br><span class="line"><span class="attribute">pointer-events</span>: initial;</span><br><span class="line"><span class="attribute">pointer-events</span>: unset;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>这里有一个特别的值，它进行了专门的介绍，也正是因为这个原因，水印的功能才得以实现。</p>
+<blockquote>
+<p>除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。</p>
+</blockquote>
+<p>由上可知，当我们将pointer-events值设置为none时，它就有了穿透的特性，也就是说你“看得见它，却摸不到它”，而且也不具备鼠标指针的特性，这不正是水印想要的效果嘛，完美~;</p>
+<p>接着往下看我们可以知道它的初始值是auto，并且可以继承<br><img src="https://s1.ax1x.com/2020/05/14/Y0J0XD.png" alt="Y0J0XD.png"></p>
+<p>水印功能就这样实现了是不是简单实用，那么是不是就没有缺点呢，当然要硬说有的话那就是兼容性的问题吧。</p>
+<p>因为这个css3的属性是新出的，自然ie9及以下自然就不支持了，而且ie不支持的范围要到ie11以下，所以ie你为啥不去死呢。。。</p>
+<p><img src="https://s1.ax1x.com/2020/05/14/Y0YEjO.png" alt="Y0YEjO.png"></p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>CSS3</category>
+      </categories>
+      <tags>
+        <tag>CSS3</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Prettier格式化配置</title>
+    <url>/2020/05/28/Prettier-Setting/</url>
+    <content><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在做代码风格统一，用到了Prettier，暂时先记录一下现在的配置信息，回头抽时间写篇总结文。</p>
+<span id="more"></span>
+<h2 id="一、技术栈"><a href="#一、技术栈" class="headerlink" title="一、技术栈"></a>一、技术栈</h2><figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 使能每一种语言默认格式化规则</span></span><br><span class="line">    <span class="attr">&quot;[html]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[css]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[less]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;[javascript]&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;editor.defaultFormatter&quot;</span>: <span class="string">&quot;esbenp.prettier-vscode&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*  prettier的配置 */</span></span><br><span class="line">    <span class="attr">&quot;prettier.printWidth&quot;</span>: <span class="number">100</span>, <span class="comment">// 超过最大值换行</span></span><br><span class="line">    <span class="attr">&quot;prettier.tabWidth&quot;</span>: <span class="number">4</span>, <span class="comment">// 缩进字节数</span></span><br><span class="line">    <span class="attr">&quot;prettier.useTabs&quot;</span>: <span class="literal">false</span>, <span class="comment">// 缩进不使用tab，使用空格</span></span><br><span class="line">    <span class="attr">&quot;prettier.semi&quot;</span>: <span class="literal">true</span>, <span class="comment">// 句尾添加分号</span></span><br><span class="line">    <span class="attr">&quot;prettier.singleQuote&quot;</span>: <span class="literal">true</span>, <span class="comment">// 使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.proseWrap&quot;</span>: <span class="string">&quot;preserve&quot;</span>, <span class="comment">// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行</span></span><br><span class="line">    <span class="attr">&quot;prettier.arrowParens&quot;</span>: <span class="string">&quot;avoid&quot;</span>, <span class="comment">//  (x) =&gt; &#123;&#125; 箭头函数参数只有一个时是否要有小括号。avoid：省略括号</span></span><br><span class="line">    <span class="attr">&quot;prettier.bracketSpacing&quot;</span>: <span class="literal">true</span>, <span class="comment">// 在对象，数组括号与文字之间加空格 &quot;&#123; foo: bar &#125;&quot;</span></span><br><span class="line">    <span class="attr">&quot;prettier.disableLanguages&quot;</span>: [<span class="string">&quot;vue&quot;</span>], <span class="comment">// 不格式化vue文件，vue文件的格式化单独设置</span></span><br><span class="line">    <span class="attr">&quot;prettier.endOfLine&quot;</span>: <span class="string">&quot;auto&quot;</span>, <span class="comment">// 结尾是 \n \r \n\r auto</span></span><br><span class="line">    <span class="attr">&quot;prettier.eslintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用eslint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.htmlWhitespaceSensitivity&quot;</span>: <span class="string">&quot;ignore&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;prettier.ignorePath&quot;</span>: <span class="string">&quot;.prettierignore&quot;</span>, <span class="comment">// 不使用prettier格式化的文件填写在项目的.prettierignore文件中</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxBracketSameLine&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中把&#x27;&gt;&#x27; 是否单独放一行</span></span><br><span class="line">    <span class="attr">&quot;prettier.jsxSingleQuote&quot;</span>: <span class="literal">false</span>, <span class="comment">// 在jsx中使用单引号代替双引号</span></span><br><span class="line">    <span class="attr">&quot;prettier.parser&quot;</span>: <span class="string">&quot;babylon&quot;</span>, <span class="comment">// 格式化的解析器，默认是babylon</span></span><br><span class="line">    <span class="attr">&quot;prettier.requireConfig&quot;</span>: <span class="literal">false</span>, <span class="comment">// Require a &#x27;prettierconfig&#x27; to format prettier</span></span><br><span class="line">    <span class="attr">&quot;prettier.stylelintIntegration&quot;</span>: <span class="literal">false</span>, <span class="comment">//不让prettier使用stylelint的代码格式进行校验</span></span><br><span class="line">    <span class="attr">&quot;prettier.trailingComma&quot;</span>: <span class="string">&quot;es5&quot;</span>, <span class="comment">// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）</span></span><br><span class="line">    <span class="attr">&quot;prettier.tslintIntegration&quot;</span>: <span class="literal">false</span> <span class="comment">// 不让prettier使用tslint的代码格式进行校验</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>效率工具</category>
+        <category>VSCode插件</category>
+      </categories>
+      <tags>
+        <tag>Prettier</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端面试Vue篇：Vue组件通信的几种方式</title>
+    <url>/2019/12/27/Vue-Component-Communication/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>公司这两年兴起了前后端分离的热潮，在选用三大技术框架时，vue凭借其学习曲线低深受公司程序员的喜爱，因此我们也就走上了vue学习的不归路，在招聘招揽小伙伴时有那么一些问题经常被问起，vue组件间通信就是其中之一，下面我们来聊一聊vue组件通信有哪些方式。</p>
+<span id="more"></span>
+
+<h2 id="props和-emit"><a href="#props和-emit" class="headerlink" title="props和$emit"></a><code>props</code>和<code>$emit</code></h2><p>啥也不了解的小伙伴应该也知道这种方式吧，这是最最基础的通信方式了，父子组件通信基本都用它。父组件向子组件传递数据的时候通过prop传参，子组件中通过$emit传递给父组件，父组件在触发子组件$emit方法时得到子组件数据。实例如下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 父组件 parent.vue</span><br><span class="line"></span><br><span class="line">Vue.compinent(&#39;parent&#39;, &#123;</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;p&gt;父组件&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;child :message&#x3D;&quot;message&quot; @getChildrenData&#x3D;&quot;getChildrenData&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;&#96;,</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            message:&#39;Hello lixuguang&#39;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        &#x2F;**</span><br><span class="line">        * 执行子组件触发的事件方法 </span><br><span class="line">        *&#x2F;</span><br><span class="line">        getChildrenData(data)&#123;</span><br><span class="line">            console.log(data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 子组件 child.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">    props:[&#39;message&#39;], &#x2F;&#x2F; 得到父组件传过来的数据</span><br><span class="line">    data() &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            childMessage: this.message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;childMessage&quot; @input&#x3D;&quot;emitParentData(childMessage)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitParentData(data) &#123;</span><br><span class="line">            this.$emit(&#39;getChildrenData&#39;, data) &#x2F;&#x2F; 父组件触发时给父组件传值</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;parent&gt;&lt;&#x2F;parent&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>父组件通过<code>message</code>属性将数据传递给子组件，并且通过<code>getChildrenData</code>事件来监听子组件出发的事件；</li>
+<li>子组件通过<code>props</code>获得父组件传过来的数据，并且通过<code>this.$emit</code>触发了<code>getChildrenData</code>事件;</li>
+</ol>
+<h2 id="attrs和-listeners"><a href="#attrs和-listeners" class="headerlink" title="$attrs和$listeners"></a><code>$attrs</code>和<code>$listeners</code></h2><p>前一种方法我们完成了父子组件的数据通信，那你有没有想过如果有多层嵌套的数据最上层要往最下层传值怎么办，前一种方法只能一层一层的往下传，可是这样太麻烦了，那么有没有什么方法能够一次传到你想要传到的位置呢，当然是有的，那就是接下来要说到的<code>$attrs</code>和<code>$listeners</code>。<br>假设我们现在有三层包含关系的组件，分别是level1/level2/level3，level1 &gt; level2 &gt; level3, <code>&gt;</code> 表示包含关系。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; level3.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level3&#39;, &#123;</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;$attrs.level3Message&quot; @input&#x3D;&quot;emitLevel3Data($attrs.level3Message)&quot;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel3Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel3Data&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level2.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level2&#39;, &#123;</span><br><span class="line">    props:[&#39;level2Message&#39;],</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level2Message:this.level2Message</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;level2Message&quot; @input&#x3D;&quot;emitLevel2Data(level2Message)&quot;&gt;</span><br><span class="line">    &lt;level3 v-bind&#x3D;&#39;$attrs&#39; v-on&#x3D;&#39;$listenrs&#39;&gt;&lt;&#x2F;level3&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        emitLevel2Data(data) &#123;</span><br><span class="line">            this.$emit(&#39;getLevel2Data&#39;, data) </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; level1.vue</span><br><span class="line"></span><br><span class="line">Vue.component(&#39;level1&#39;, &#123;</span><br><span class="line">    data()&#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            level3Message:&quot;I am Level3&quot;,</span><br><span class="line">            level2Message:&quot;I am Level2&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template:&#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是level1中的内容&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;level2 :level2Message&#x3D;&quot;level2Message&quot; </span><br><span class="line">            :level3Message&#x3D;&quot;level3Message&quot;</span><br><span class="line">            @getLevel2Data&#x3D;&quot;getLevel2Data()&quot;</span><br><span class="line">            @getLevel3Data&#x3D;&quot;getLevel3Data()&quot;</span><br><span class="line">            &gt;&lt;&#x2F;level2&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        getLevel2Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level2的数据&#39;, data)</span><br><span class="line">        &#125;,</span><br><span class="line">        getLevel3Data(data) &#123;</span><br><span class="line">            console.log(&#39;这是来自level3的数据&#39;, data)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; App.vue</span><br><span class="line"></span><br><span class="line">var app &#x3D; new Vue(&#123;</span><br><span class="line">    el: &quot;#app&quot;,</span><br><span class="line">    template: &#96;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;level1&gt;&lt;&#x2F;level1&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &#96;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+<p><strong>解析代码：</strong></p>
+<ol>
+<li>level3组件能直接触发<code>getLevel3Data</code>是因为level2组件在调用level3组件时使用v-on绑定了$listeners属性；</li>
+<li>通过v-bind绑定了$attrs属性，level3组件可以直接获取到从level1传下来的props;</li>
+</ol>
+<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>父组件通过v-model传递值给子组件时，会自动传递一个value的props户型，在子组件中可以通过this.$emit(‘input’,val)自动修改v-model绑定的值。</p>
+<p>```</p>
+<p>未完待续~</p>
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-1"><a href="#前言-1" class="headerlink" title="前言"></a>前言</h2><!-- more -->
+<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言-2"><a href="#前言-2" class="headerlink" title="前言"></a>前言</h2><!-- more -->]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>Vue</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>组件通信</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>JavaScript实现经典排序算法</title>
+    <url>/2020/01/04/Algorithm/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="时间复杂度"><a href="#时间复杂度" class="headerlink" title="时间复杂度"></a>时间复杂度</h2><p>一个算法的时间复杂度反映了程序运行从开始到结束所需要的时间。把算法中基本操作重复执行的次数（频度）作为算法的时间复杂度。<br>没有循环语句，记作O(1)，也称为常数阶。只有一重循环，则算法的基本操作的执行频度与问题规模n呈线性增大关系，记作O（n），也叫线性阶。<br>常见的时间复杂度有：</p>
+<ul>
+<li>O(1): Constant Complexity: Constant 常数复杂度</li>
+<li>O(log n): Logarithmic Complexity: 对数复杂度</li>
+<li>O(n): Linear Complexity: 线性时间复杂度</li>
+<li>O(n^2): N square Complexity 平⽅方</li>
+<li>O(n^3): N square Complexity ⽴立⽅方</li>
+<li>O(2^n): Exponential Growth 指数</li>
+<li>O(n!): Factorial 阶乘</li>
+</ul>
+<h2 id="空间复杂度"><a href="#空间复杂度" class="headerlink" title="空间复杂度"></a>空间复杂度</h2><p>一个程序的空间复杂度是指运行完一个程序所需内存的大小。利用程序的空间复杂度，可以对程序的运行所需要的内存多少有个预先估计。</p>
+<p>一个程序执行时除了需要存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。</p>
+<ul>
+<li>稳定</li>
+<li>不稳定<h1 id="算法汇总"><a href="#算法汇总" class="headerlink" title="算法汇总"></a>算法汇总</h1><img src="https://i.loli.net/2020/01/04/TqaRjEJSnhtQ5vH.png" alt="十大经典排序.jpg"><h2 id="关于时间复杂度："><a href="#关于时间复杂度：" class="headerlink" title="关于时间复杂度："></a>关于时间复杂度：</h2>平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。<br>线性对数阶 (O(nlog2n)) 排序 快速排序、堆排序和归并排序；<br>O(n1+§)) 排序，§ 是介于 0 和 1 之间的常数。 希尔排序<br>线性阶 (O(n)) 排序 基数排序，此外还有桶、箱排序。</li>
+</ul>
+<h2 id="关于稳定性："><a href="#关于稳定性：" class="headerlink" title="关于稳定性："></a>关于稳定性：</h2><p>稳定的排序算法：冒泡排序、插入排序、归并排序和基数排序。<br>不是稳定的排序算法：选择排序、快速排序、希尔排序、堆排序。</p>
+<h2 id="名词解释："><a href="#名词解释：" class="headerlink" title="名词解释："></a>名词解释：</h2><ul>
+<li>n：数据规模</li>
+<li>k：“桶”的个数</li>
+<li>In-place：占用常数内存，不占用额外内存</li>
+<li>Out-place：占用额外内存</li>
+<li>稳定性：排序后 2 个相等键值的顺序和排序之前它们的顺序相同</li>
+</ul>
+<h1 id="1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡"><a href="#1-冒泡排序（Bubble-Sort）-—-前后两两比较-—-气泡" class="headerlink" title="1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡"></a>1. 冒泡排序（Bubble Sort） — 前后两两比较 — 气泡</h1><p>冒泡排序可谓是最经典的排序算法了，它是基于比较的排序算法，其优点是实现简单，排序数量较小时性能较好。</p>
+<p>它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。</p>
+<h2 id="1-1-算法原理"><a href="#1-1-算法原理" class="headerlink" title="1. 1 算法原理"></a>1. 1 算法原理</h2><p>相邻的数据进行两两比较，小数放在前面，大数放在后面，如果前面的数据比后面的数据大，就交换这两个数的位置。也可以实现大数放在前面，小数放在后面，如果前面的数据比后面的小，就交换两个的位置。要实现上述规则需要用到两层for循环。</p>
+<h2 id="1-2-算法描述"><a href="#1-2-算法描述" class="headerlink" title="1. 2 算法描述"></a>1. 2 算法描述</h2><ol>
+<li>比较相邻的元素。如果第一个比第二个大，就交换它们两个；</li>
+<li>对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；</li>
+<li>针对所有的元素重复以上的步骤，除了最后一个；</li>
+<li>重复步骤1~3，直到排序完成。</li>
+</ol>
+<h2 id="1-3-动图演示"><a href="#1-3-动图演示" class="headerlink" title="1. 3 动图演示"></a>1. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldB5VS.gif" alt="ldB5VS.gif"></p>
+<h2 id="1-4-js代码实现"><a href="#1-4-js代码实现" class="headerlink" title="1. 4 js代码实现"></a>1. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">      &#x2F;&#x2F; 元素交换</span><br><span class="line">      &#x2F;** 1.使用中间变量 **&#x2F; </span><br><span class="line">        var temp &#x3D; arr[j + 1]; </span><br><span class="line">        arr[j + 1] &#x3D; arr[j]</span><br><span class="line">        arr[j] &#x3D; temp</span><br><span class="line">        &#x2F;** 2.适用纯数字的数组排序 **&#x2F;</span><br><span class="line">        arr[j] &#x3D; arr[j] +  arr[j + 1]</span><br><span class="line">        arr[j + 1] &#x3D;  arr[j] - arr[j + 1]</span><br><span class="line">        arr[j] -&#x3D; arr[j + 1]</span><br><span class="line">        &#x2F;** 3.使用es6解构赋值 **&#x2F;</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>冒泡排序算法优化</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">  var len &#x3D; arr.length;</span><br><span class="line">  for (var i &#x3D; 0; i &lt; len; i++) &#123;</span><br><span class="line">    var exchange&#x3D;false; &#x2F;&#x2F; 交换标志 </span><br><span class="line">    for (var j &#x3D; 0; j &lt; len - 1 - i; j++) &#123;</span><br><span class="line">      if (arr[j] &gt; arr[j + 1]) &#123; &#x2F;&#x2F; 相邻元素两两对比</span><br><span class="line">        [arr[j], arr[j + 1]] &#x3D; [arr[j + 1], arr[j]] &#x2F;&#x2F; 元素交换</span><br><span class="line">        exchange&#x3D;true; &#x2F;&#x2F;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    if(!exchange)&#123; &#x2F;&#x2F; 若本趟排序未发生交换，提前终止算法</span><br><span class="line">        break;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的"><a href="#2-选择排序（Selection-Sort）-—-面试挑简历，在剩下的里面挑最好的" class="headerlink" title="2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的"></a>2. 选择排序（Selection Sort） — 面试挑简历，在剩下的里面挑最好的</h1><p>表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。</p>
+<h2 id="2-1-算法原理"><a href="#2-1-算法原理" class="headerlink" title="2. 1 算法原理"></a>2. 1 算法原理</h2><p>先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。</p>
+<h2 id="2-2-算法描述"><a href="#2-2-算法描述" class="headerlink" title="2. 2 算法描述"></a>2. 2 算法描述</h2><p>n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：</p>
+<ol>
+<li>初始状态：无序区为R[1..n]，有序区为空；</li>
+<li>第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中</li>
+<li> 选出关键字最小的记录R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；</li>
+<li> n-1趟结束，数组有序化了。</li>
+</ol>
+<h2 id="2-3-动图演示"><a href="#2-3-动图演示" class="headerlink" title="2. 3 动图演示"></a>2. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDWW9.gif" alt="ldDWW9.gif"></p>
+<h2 id="2-4-js代码实现"><a href="#2-4-js代码实现" class="headerlink" title="2. 4 js代码实现"></a>2. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function selectionSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    var minIndex, temp;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; len - 1; i++) &#123;</span><br><span class="line">        minIndex &#x3D; i;</span><br><span class="line">        for (var j &#x3D; i + 1; j &lt; len; j++) &#123;</span><br><span class="line">            if (arr[j] &lt; arr[minIndex]) &#123;     &#x2F;&#x2F;寻找最小的数</span><br><span class="line">                minIndex &#x3D; j;                 &#x2F;&#x2F;将最小数的索引保存</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        temp &#x3D; arr[i];</span><br><span class="line">        arr[i] &#x3D; arr[minIndex];</span><br><span class="line">        arr[minIndex] &#x3D; temp;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="3-插入排序（Insertion-Sort）—–-麻将-扑克"><a href="#3-插入排序（Insertion-Sort）—–-麻将-扑克" class="headerlink" title="3. 插入排序（Insertion Sort）—– 麻将/扑克"></a>3. 插入排序（Insertion Sort）—– 麻将/扑克</h1><p>插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。</p>
+<h2 id="3-1-算法原理"><a href="#3-1-算法原理" class="headerlink" title="3. 1 算法原理"></a>3. 1 算法原理</h2><p>它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。</p>
+<h2 id="3-2-算法描述"><a href="#3-2-算法描述" class="headerlink" title="3. 2 算法描述"></a>3. 2 算法描述</h2><p>一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：</p>
+<ol>
+<li>从第一个元素开始，该元素可以认为已经被排序；</li>
+<li>取出下一个元素，在已经排序的元素序列中从后向前扫描；</li>
+<li>如果该元素（已排序）大于新元素，将该元素移到下一位置；</li>
+<li>重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；</li>
+<li>将新元素插入到该位置后；</li>
+<li>重复步骤2~5。</li>
+</ol>
+<h2 id="3-3-动图演示"><a href="#3-3-动图演示" class="headerlink" title="3. 3 动图演示"></a>3. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/04/ldDfzR.gif" alt="ldDfzR.gif"></p>
+<h2 id="3-4-js代码实现"><a href="#3-4-js代码实现" class="headerlink" title="3. 4 js代码实现"></a>3. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function insertSort(arr) &#123;</span><br><span class="line">  &#x2F;&#x2F; 从1位置开始遍历arr中每元素，同时声明空变量temp</span><br><span class="line">  for (let i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">    if (arr[i] &lt; arr[i - 1]) &#123; &#x2F;&#x2F; 如果当前元素&lt;前一个元素</span><br><span class="line">      let temp &#x3D; arr[i] &#x2F;&#x2F; 将当前元素值临时保存在temp中</span><br><span class="line">      let p &#x3D; i - 1 &#x2F;&#x2F; 定义变量 p &#x3D; i- 1</span><br><span class="line">      &#x2F;&#x2F; 循环 条件：</span><br><span class="line">      &#x2F;&#x2F; 1. p&gt;&#x3D;0且temp小于p位置的元素</span><br><span class="line">      while (p &gt;&#x3D; 0 &amp;&amp; temp &lt; arr[p]) &#123;</span><br><span class="line">        &#x2F;&#x2F; 循环体： 将P位置的值赋值给p的后一个元素</span><br><span class="line">        arr[p + 1] &#x3D; arr[p]</span><br><span class="line">        p-- &#x2F;&#x2F; p向前移动一个</span><br><span class="line">      &#125;</span><br><span class="line">      arr[p + 1] &#x3D; temp &#x2F;&#x2F; 将temp的值赋值给p+1位置的元素</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="4-快速排序（Selection-Sort）"><a href="#4-快速排序（Selection-Sort）" class="headerlink" title="4. 快速排序（Selection Sort）"></a>4. 快速排序（Selection Sort）</h1><p>快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。</p>
+<h2 id="4-1-算法原理"><a href="#4-1-算法原理" class="headerlink" title="4. 1 算法原理"></a>4. 1 算法原理</h2><p>快速排序又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。</p>
+<h2 id="4-2-算法描述"><a href="#4-2-算法描述" class="headerlink" title="4. 2 算法描述"></a>4. 2 算法描述</h2><p>选基准：在数据结构中选择一个元素作为基准(pivot<br>划分区：参照基准元素值的大小，划分无序区，所有小于基准元素的数据放入一个区间，所有大于基准元素的数据放入另一区间，分区操作结束后，基准元素所处的位置就是最终排序后它应该所处的位置<br>递归：对初次划分出来的两个无序区间，递归调用第 1步和第 2步的算法，直到所有无序区间都只剩下一个元素为止。</p>
+<p>简单理解就是，选择一个目标值，比目标值小的放左边，比目标值大的放右边，目标值的位置已排好，将左右两侧再进行快排。</p>
+<h2 id="4-3-动图演示"><a href="#4-3-动图演示" class="headerlink" title="4. 3 动图演示"></a>4. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/AtNahbZF9J1dTnS.gif" alt="快速排序.gif"></p>
+<h2 id="4-4-js代码实现"><a href="#4-4-js代码实现" class="headerlink" title="4. 4 js代码实现"></a>4. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function quickSort(arr)&#123;</span><br><span class="line">    &#x2F;&#x2F;如果arr.length&lt;&#x3D;1,则直接返回arr</span><br><span class="line">    if(arr.length&lt;&#x3D;1)&#123;return arr&#125;</span><br><span class="line">    &#x2F;&#x2F; arr的元素个数&#x2F;2，再下去整，将值保存在pivotIndex中</span><br><span class="line">    var pivotIndex&#x3D;Math.floor(arr.length&#x2F;2);</span><br><span class="line">    &#x2F;&#x2F; 将arr中pivotIndex位置的元素，保存在变量pivot中</span><br><span class="line">    var pivot&#x3D;arr[pivotIndex];</span><br><span class="line">    &#x2F;&#x2F;声明空数组left和right</span><br><span class="line">    var left&#x3D;[];</span><br><span class="line">    var right&#x3D;[];</span><br><span class="line">    for(var i&#x3D;0;i&lt;arr.length;i++)&#123;  &#x2F;&#x2F; 遍历arr中每个元素</span><br><span class="line">        if(i !&#x3D;&#x3D; pivotIndex)&#123; &#x2F;&#x2F; 如果i !&#x3D;&#x3D; pivotIndex</span><br><span class="line">            if(arr[i]&lt;&#x3D;pivot)&#123; &#x2F;&#x2F; 如果当前元素值&lt;pivot</span><br><span class="line">                left.push(arr[i]); &#x2F;&#x2F; 就将当前值压入left</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                right.push(arr[i]); &#x2F;&#x2F; 就将当前值压入right</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;递归</span><br><span class="line">    return quickSort(left).concat(pivot, quickSort(right)); &#x2F;&#x2F; 链接多个数组到 left 从小到大</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="5-希尔排序"><a href="#5-希尔排序" class="headerlink" title="5. 希尔排序"></a>5. 希尔排序</h1><h2 id="5-1-算法原理"><a href="#5-1-算法原理" class="headerlink" title="5. 1 算法原理"></a>5. 1 算法原理</h2><p>希尔排序，也称递减增量排序算法，是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。<br>希尔排序是基于插入排序的以下两点性质而提出改进方法的：</p>
+<ul>
+<li>插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率；</li>
+<li>但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位；<br>希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。</li>
+</ul>
+<h2 id="5-2-算法描述"><a href="#5-2-算法描述" class="headerlink" title="5. 2 算法描述"></a>5. 2 算法描述</h2><ul>
+<li>选择一个增量序列 t1，t2，……，tk，其中 ti &gt; tj, tk = 1；</li>
+<li>按增量序列个数 k，对序列进行 k 趟排序；</li>
+<li>每趟排序，根据对应的增量 ti，将待排序列分割成若干长度为 m 的子序列，分别对各子表进行直接插入排序。仅增量因子为 1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。</li>
+</ul>
+<h2 id="5-3-js代码实现"><a href="#5-3-js代码实现" class="headerlink" title="5.3 js代码实现"></a>5.3 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function shellSort(arr) &#123;</span><br><span class="line">    var len &#x3D; arr.length,</span><br><span class="line">        temp,</span><br><span class="line">        gap &#x3D; 1;</span><br><span class="line">    while(gap &lt; len&#x2F;3) &#123;          &#x2F;&#x2F;动态定义间隔序列</span><br><span class="line">        gap &#x3D;gap*3+1;</span><br><span class="line">    &#125;</span><br><span class="line">    for (gap; gap &gt; 0; gap &#x3D; Math.floor(gap&#x2F;3)) &#123;</span><br><span class="line">        for (var i &#x3D; gap; i &lt; len; i++) &#123;</span><br><span class="line">            temp &#x3D; arr[i];</span><br><span class="line">            for (var j &#x3D; i-gap; j &gt;&#x3D; 0 &amp;&amp; arr[j] &gt; temp; j-&#x3D;gap) &#123;</span><br><span class="line">                arr[j+gap] &#x3D; arr[j];</span><br><span class="line">            &#125;</span><br><span class="line">            arr[j+gap] &#x3D; temp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="6-归并排序"><a href="#6-归并排序" class="headerlink" title="6. 归并排序"></a>6. 归并排序</h1><h2 id="6-1-算法原理"><a href="#6-1-算法原理" class="headerlink" title="6. 1 算法原理"></a>6. 1 算法原理</h2><p>归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。<br>作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：</p>
+<ul>
+<li>自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）；</li>
+<li>自下而上的迭代；<blockquote>
+<p>在《数据结构与算法 JavaScript 描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：<br>However, it is not possible to do so in JavaScript, as the recursion goes too deep for the language to handle.<br>然而，在 JavaScript 中这种方式不太可行，因为这个算法的递归深度对它来讲太深了。</p>
+</blockquote>
+</li>
+</ul>
+<p>说实话，我不太理解这句话。意思是 JavaScript 编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。</p>
+<p>和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。</p>
+<h2 id="6-2-算法描述"><a href="#6-2-算法描述" class="headerlink" title="6. 2 算法描述"></a>6. 2 算法描述</h2><ol>
+<li>申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列；</li>
+<li>设定两个指针，最初位置分别为两个已经排序序列的起始位置；</li>
+<li>比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置；</li>
+<li>重复步骤 3 直到某一指针达到序列尾；</li>
+<li>将另一序列剩下的所有元素直接复制到合并序列尾。</li>
+</ol>
+<h2 id="6-3-动图演示"><a href="#6-3-动图演示" class="headerlink" title="6. 3 动图演示"></a>6. 3 动图演示</h2><p><img src="https://i.loli.net/2020/01/04/WMFo8Au4CGah6Kv.gif" alt="归并排序.gif"></p>
+<h2 id="6-4-js代码实现"><a href="#6-4-js代码实现" class="headerlink" title="6. 4 js代码实现"></a>6. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function mergeSort(arr) &#123;  &#x2F;&#x2F; 采用自上而下的递归方法</span><br><span class="line">    var len &#x3D; arr.length;</span><br><span class="line">    if(len &lt; 2) &#123;</span><br><span class="line">        return arr;</span><br><span class="line">    &#125;</span><br><span class="line">    var middle &#x3D; Math.floor(len &#x2F; 2),</span><br><span class="line">        left &#x3D; arr.slice(0, middle),</span><br><span class="line">        right &#x3D; arr.slice(middle);</span><br><span class="line">    return merge(mergeSort(left), mergeSort(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function merge(left, right)&#123;</span><br><span class="line">    var result &#x3D; [];</span><br><span class="line">    while (left.length &amp;&amp; right.length) &#123;</span><br><span class="line">        if (left[0] &lt;&#x3D; right[0]) &#123;</span><br><span class="line">            result.push(left.shift());</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            result.push(right.shift());</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    while (left.length)</span><br><span class="line">        result.push(left.shift());</span><br><span class="line"></span><br><span class="line">    while (right.length)</span><br><span class="line">        result.push(right.shift());</span><br><span class="line"></span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="7-堆排序"><a href="#7-堆排序" class="headerlink" title="7. 堆排序"></a>7. 堆排序</h1><h2 id="7-1-算法原理"><a href="#7-1-算法原理" class="headerlink" title="7. 1 算法原理"></a>7. 1 算法原理</h2><p>堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：</p>
+<ul>
+<li>大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列；</li>
+<li>小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列；<br>堆排序的平均时间复杂度为 Ο(nlogn)。</li>
+</ul>
+<h1 id="7-2-算法描述"><a href="#7-2-算法描述" class="headerlink" title="7. 2 算法描述"></a>7. 2 算法描述</h1><ol>
+<li>将待排序序列构建成一个堆 H[0……n-1]，根据（升序降序需求）选择大顶堆或小顶堆；</li>
+<li>把堆首（最大值）和堆尾互换；</li>
+<li>把堆的尺寸缩小 1，并调用 shift_down(0)，目的是把新的数组顶端数据调整到相应位置；</li>
+<li>重复步骤 2，直到堆的尺寸为 1。</li>
+</ol>
+<h2 id="7-3-动图演示"><a href="#7-3-动图演示" class="headerlink" title="7. 3 动图演示"></a>7. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBK9QH.gif" alt="堆排序.gif"></p>
+<h2 id="7-4-js代码实现"><a href="#7-4-js代码实现" class="headerlink" title="7. 4 js代码实现"></a>7. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">var len;    &#x2F;&#x2F; 因为声明的多个函数都需要数据长度，所以把len设置成为全局变量</span><br><span class="line"></span><br><span class="line">function buildMaxHeap(arr) &#123;   &#x2F;&#x2F; 建立大顶堆</span><br><span class="line">    len &#x3D; arr.length;</span><br><span class="line">    for (var i &#x3D; Math.floor(len&#x2F;2); i &gt;&#x3D; 0; i--) &#123;</span><br><span class="line">        heapify(arr, i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapify(arr, i) &#123;     &#x2F;&#x2F; 堆调整</span><br><span class="line">    var left &#x3D; 2 * i + 1,</span><br><span class="line">        right &#x3D; 2 * i + 2,</span><br><span class="line">        largest &#x3D; i;</span><br><span class="line"></span><br><span class="line">    if (left &lt; len &amp;&amp; arr[left] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (right &lt; len &amp;&amp; arr[right] &gt; arr[largest]) &#123;</span><br><span class="line">        largest &#x3D; right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    if (largest !&#x3D; i) &#123;</span><br><span class="line">        swap(arr, i, largest);</span><br><span class="line">        heapify(arr, largest);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function swap(arr, i, j) &#123;</span><br><span class="line">    var temp &#x3D; arr[i];</span><br><span class="line">    arr[i] &#x3D; arr[j];</span><br><span class="line">    arr[j] &#x3D; temp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function heapSort(arr) &#123;</span><br><span class="line">    buildMaxHeap(arr);</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; arr.length-1; i &gt; 0; i--) &#123;</span><br><span class="line">        swap(arr, 0, i);</span><br><span class="line">        len--;</span><br><span class="line">        heapify(arr, 0);</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="8-计数排序"><a href="#8-计数排序" class="headerlink" title="8. 计数排序"></a>8. 计数排序</h1><h2 id="8-1-算法原理"><a href="#8-1-算法原理" class="headerlink" title="8. 1 算法原理"></a>8. 1 算法原理</h2><p>计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。</p>
+<h2 id="8-2-算法描述"><a href="#8-2-算法描述" class="headerlink" title="8. 2 算法描述"></a>8. 2 算法描述</h2><h2 id="8-3-动图演示"><a href="#8-3-动图演示" class="headerlink" title="8. 3 动图演示"></a>8. 3 动图演示</h2><p><img src="https://s2.ax1x.com/2020/01/05/lBKq1g.gif" alt="计数排序.gif"></p>
+<h2 id="8-4-js代码实现"><a href="#8-4-js代码实现" class="headerlink" title="8. 4 js代码实现"></a>8. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function countingSort(arr, maxValue) &#123;</span><br><span class="line">    var bucket &#x3D; new Array(maxValue+1),</span><br><span class="line">        sortedIndex &#x3D; 0;</span><br><span class="line">        arrLen &#x3D; arr.length,</span><br><span class="line">        bucketLen &#x3D; maxValue + 1;</span><br><span class="line"></span><br><span class="line">    for (var i &#x3D; 0; i &lt; arrLen; i++) &#123;</span><br><span class="line">        if (!bucket[arr[i]]) &#123;</span><br><span class="line">            bucket[arr[i]] &#x3D; 0;</span><br><span class="line">        &#125;</span><br><span class="line">        bucket[arr[i]]++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    for (var j &#x3D; 0; j &lt; bucketLen; j++) &#123;</span><br><span class="line">        while(bucket[j] &gt; 0) &#123;</span><br><span class="line">            arr[sortedIndex++] &#x3D; j;</span><br><span class="line">            bucket[j]--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="9-桶排序"><a href="#9-桶排序" class="headerlink" title="9. 桶排序"></a>9. 桶排序</h1><h2 id="9-1-算法原理"><a href="#9-1-算法原理" class="headerlink" title="9. 1 算法原理"></a>9. 1 算法原理</h2><p>桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效，我们需要做到这两点：</p>
+<ul>
+<li>在额外空间充足的情况下，尽量增大桶的数量</li>
+<li>使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中<br>同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。<h2 id="9-2-算法描述"><a href="#9-2-算法描述" class="headerlink" title="9. 2 算法描述"></a>9. 2 算法描述</h2><h3 id="1-什么时候最快"><a href="#1-什么时候最快" class="headerlink" title="1. 什么时候最快"></a>1. 什么时候最快</h3>当输入的数据可以均匀的分配到每一个桶中。<h3 id="2-什么时候最慢"><a href="#2-什么时候最慢" class="headerlink" title="2. 什么时候最慢"></a>2. 什么时候最慢</h3>当输入的数据被分配到了同一个桶中。<h2 id="9-3-动图演示"><a href="#9-3-动图演示" class="headerlink" title="9. 3 动图演示"></a>9. 3 动图演示</h2></li>
+</ul>
+<h2 id="9-4-js代码实现"><a href="#9-4-js代码实现" class="headerlink" title="9. 4 js代码实现"></a>9. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">function bucketSort(arr, bucketSize) &#123;</span><br><span class="line">    if (arr.length &#x3D;&#x3D;&#x3D; 0) &#123;</span><br><span class="line">      return arr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var i;</span><br><span class="line">    var minValue &#x3D; arr[0];</span><br><span class="line">    var maxValue &#x3D; arr[0];</span><br><span class="line">    for (i &#x3D; 1; i &lt; arr.length; i++) &#123;</span><br><span class="line">      if (arr[i] &lt; minValue) &#123;</span><br><span class="line">          minValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最小值</span><br><span class="line">      &#125; else if (arr[i] &gt; maxValue) &#123;</span><br><span class="line">          maxValue &#x3D; arr[i];                &#x2F;&#x2F; 输入数据的最大值</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;桶的初始化</span><br><span class="line">    var DEFAULT_BUCKET_SIZE &#x3D; 5;            &#x2F;&#x2F; 设置桶的默认数量为5</span><br><span class="line">    bucketSize &#x3D; bucketSize || DEFAULT_BUCKET_SIZE;</span><br><span class="line">    var bucketCount &#x3D; Math.floor((maxValue - minValue) &#x2F; bucketSize) + 1;   </span><br><span class="line">    var buckets &#x3D; new Array(bucketCount);</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        buckets[i] &#x3D; [];</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;利用映射函数将数据分配到各个桶中</span><br><span class="line">    for (i &#x3D; 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">        buckets[Math.floor((arr[i] - minValue) &#x2F; bucketSize)].push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    arr.length &#x3D; 0;</span><br><span class="line">    for (i &#x3D; 0; i &lt; buckets.length; i++) &#123;</span><br><span class="line">        insertionSort(buckets[i]);                      &#x2F;&#x2F; 对每个桶进行排序，这里使用了插入排序</span><br><span class="line">        for (var j &#x3D; 0; j &lt; buckets[i].length; j++) &#123;</span><br><span class="line">            arr.push(buckets[i][j]);                      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-基数排序"><a href="#10-基数排序" class="headerlink" title="10. 基数排序"></a>10. 基数排序</h1><h2 id="10-1-算法原理"><a href="#10-1-算法原理" class="headerlink" title="10. 1 算法原理"></a>10. 1 算法原理</h2><p>基数排序是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位数分别比较。由于整数也可以表达字符串（比如名字或日期）和特定格式的浮点数，所以基数排序也不是只能使用于整数。</p>
+<h2 id="10-2-算法描述"><a href="#10-2-算法描述" class="headerlink" title="10. 2 算法描述"></a>10. 2 算法描述</h2><h3 id="1-基数排序-vs-计数排序-vs-桶排序"><a href="#1-基数排序-vs-计数排序-vs-桶排序" class="headerlink" title="1. 基数排序 vs 计数排序 vs 桶排序"></a>1. 基数排序 vs 计数排序 vs 桶排序</h3><p>基数排序有三种方法：<br>这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异案例看大家发的：</p>
+<ul>
+<li>基数排序：根据键值的每位数字来分配桶；</li>
+<li>计数排序：每个桶只存储单一键值；</li>
+<li>桶排序：每个桶存储一定范围的数值；<h2 id="10-3-动图演示"><a href="#10-3-动图演示" class="headerlink" title="10. 3 动图演示"></a>10. 3 动图演示</h2></li>
+</ul>
+<ol start="2">
+<li>LSD 基数排序动图演示<br><img src="https://s2.ax1x.com/2020/01/05/lBQkPf.gif" alt="基数排序.gif"><h2 id="10-4-js代码实现"><a href="#10-4-js代码实现" class="headerlink" title="10. 4 js代码实现"></a>10. 4 js代码实现</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; js代码</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; LSD Radix Sort</span><br><span class="line">var counter &#x3D; [];</span><br><span class="line">function radixSort(arr, maxDigit) &#123;</span><br><span class="line">    var mod &#x3D; 10;</span><br><span class="line">    var dev &#x3D; 1;</span><br><span class="line">    for (var i &#x3D; 0; i &lt; maxDigit; i++, dev *&#x3D; 10, mod *&#x3D; 10) &#123;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; arr.length; j++) &#123;</span><br><span class="line">            var bucket &#x3D; parseInt((arr[j] % mod) &#x2F; dev);</span><br><span class="line">            if(counter[bucket]&#x3D;&#x3D;null) &#123;</span><br><span class="line">                counter[bucket] &#x3D; [];</span><br><span class="line">            &#125;</span><br><span class="line">            counter[bucket].push(arr[j]);</span><br><span class="line">        &#125;</span><br><span class="line">        var pos &#x3D; 0;</span><br><span class="line">        for(var j &#x3D; 0; j &lt; counter.length; j++) &#123;</span><br><span class="line">            var value &#x3D; null;</span><br><span class="line">            if(counter[j]!&#x3D;null) &#123;</span><br><span class="line">                while ((value &#x3D; counter[j].shift()) !&#x3D; null) &#123;</span><br><span class="line">                      arr[pos++] &#x3D; value;</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+</ol>
+<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><img src="https://s2.ax1x.com/2020/01/05/lBQTSS.png" alt="排序算法.png"><br>以上就是十大经典算法，算法对于前端来说并不是一个十分熟悉的领域，但是排序算法算是算法里比较入门的，还是需要掌握的，毕竟即使是为了面试也是要准备的。</p>
+<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a href="https://github.com/hustcc/JS-Sorting-Algorithm">https://github.com/hustcc/JS-Sorting-Algorithm</a><br>一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，多语言实现。</p>
+<p><a href="http://www.sohu.com/a/136157205_671058">http://www.sohu.com/a/136157205_671058</a><br>技术面试宝典： 很全面的算法和数据结构知识（含代码实现）下篇</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>排序算法</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>CodeReview代码审查指南.md</title>
+    <url>/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1．关于Code-Review"><a href="#1．关于Code-Review" class="headerlink" title="1．关于Code Review"></a>1．关于Code Review</h1><h2 id="1-1-Code-Review的目的"><a href="#1-1-Code-Review的目的" class="headerlink" title="1.1 Code Review的目的"></a>1.1 Code Review的目的</h2><p>Code Review是一种用来确认方案设计和代码实现的质量保证机制，通过这个机制我们可以对代码、测试过程和注释进行检查。 </p>
+<p>Code Review主要用来在软件工程过程中改进代码质量，通过Code Review可以达到如下目的目的： </p>
+<ol>
+<li>在项目早期就能够发现代码中的BUG </li>
+<li>帮助初级开发人员学习高级开发人员的经验，达到知识共享 </li>
+<li>避免开发人员犯一些很常见，很普通的错误 </li>
+<li>保证项目组人员的良好沟通 </li>
+<li>项目或产品的代码更容易维护 </li>
+</ol>
+<h2 id="1-2-Code-Review的前提"><a href="#1-2-Code-Review的前提" class="headerlink" title="1.2 Code Review的前提"></a>1.2 Code Review的前提</h2><p>进入Code Review需要检查的条件如下： </p>
+<ol>
+<li>Code Review人员是否理解了Code Review的概念和Code Review将做什么<br>如果做Code Review的人员不能理解Code Review对项目成败和代码质量的重要程度，他们的做法可能就会是应付了事。</li>
+<li>代码是否已经正确的build，build的目的使得代码已经不存在基本语法错误<br>我们总不希望高级开发人员或是主管将时间浪费在检查连编译都通不过的代码上吧。</li>
+<li>代码执行时功能是否正确<br>Code Review人员也不负责检查代码的功能是否正确，也就是说，需要复查的代码必须由开发人员或质量人员负责该代码的功能的正确性。</li>
+<li>Review人员是否理解了代码<br>做复查的人员需要对该代码有一个基本的了解，其功能是什么，是拿一方面的代码，涉及到数据库或是通讯，这样才能采取针对性的检查</li>
+<li>开发人员是否对代码做了单元测试<br>这一点也是为了保证Code Review前一些语法和功能问题已经得到解决，Code Review人员可以将精力集中在代码的质量上。</li>
+</ol>
+<h2 id="1-3-Code-Review需要做什么"><a href="#1-3-Code-Review需要做什么" class="headerlink" title="1.3 Code Review需要做什么"></a>1.3 Code Review需要做什么</h2><p>Code Review主要检查代码中是否存在以下方面问题：</p>
+<ul>
+<li>代码的一致性</li>
+<li>编码风格</li>
+<li>代码的安全问题</li>
+<li>代码冗余</li>
+<li>是否正确设计以满足需求（性能、功能）</li>
+<li>等等 </li>
+</ul>
+<h3 id="1-3-1-完整性检查（Completeness）"><a href="#1-3-1-完整性检查（Completeness）" class="headerlink" title="1.3.1  完整性检查（Completeness）"></a>1.3.1  完整性检查（Completeness）</h3><ul>
+<li>代码是否完全实现了设计文档中提出的功能需求 </li>
+<li>代码是否已按照设计文档进行了集成和Debug </li>
+<li>代码是否已创建了需要的数据库，包括正确的初始化数据 </li>
+<li>代码中是否存在任何没有定义或没有引用到的变量、常数或数据类型 </li>
+</ul>
+<h3 id="1-3-2-一致性检查（Consistency）"><a href="#1-3-2-一致性检查（Consistency）" class="headerlink" title="1.3.2  一致性检查（Consistency）"></a>1.3.2  一致性检查（Consistency）</h3><ul>
+<li>代码的逻辑是否符合设计文档 </li>
+<li>代码中使用的格式、符号、结构等风格是否保持一致 </li>
+</ul>
+<h3 id="1-3-3-正确性检查（Correctness）"><a href="#1-3-3-正确性检查（Correctness）" class="headerlink" title="1.3.3  正确性检查（Correctness）"></a>1.3.3  正确性检查（Correctness）</h3><ul>
+<li>代码是否符合制定的标准 </li>
+<li>所有的变量都被正确定义和使用 </li>
+<li>所有的注释都是准确的 </li>
+<li>所有的程序调用都使用了正确的参数个数 </li>
+</ul>
+<h3 id="1-3-4-可修改性检查（Modifiability）"><a href="#1-3-4-可修改性检查（Modifiability）" class="headerlink" title="1.3.4  可修改性检查（Modifiability）"></a>1.3.4  可修改性检查（Modifiability）</h3><ul>
+<li>代码涉及到的常量是否易于修改(如使用配置、定义为类常量、使用专门的常量类等) </li>
+<li>代码中是否包含了交叉说明或数据字典，以描述程序是如何对变量和常量进行访问的 </li>
+<li>代码是否只有一个出口和一个入口（严重的异常处理除外） </li>
+</ul>
+<h3 id="1-3-5-可预测性检查（Predictability）"><a href="#1-3-5-可预测性检查（Predictability）" class="headerlink" title="1.3.5  可预测性检查（Predictability）"></a>1.3.5  可预测性检查（Predictability）</h3><ul>
+<li>代码所用的开发语言是否具有定义良好的语法和语义 </li>
+<li>是否代码避免了依赖于开发语言缺省提供的功能 </li>
+<li>代码是否无意中陷入了死循环 </li>
+<li>代码是否是否避免了无穷递归 </li>
+</ul>
+<h3 id="1-3-6-健壮性检查（Robustness）"><a href="#1-3-6-健壮性检查（Robustness）" class="headerlink" title="1.3.6  健壮性检查（Robustness）"></a>1.3.6  健壮性检查（Robustness）</h3><ul>
+<li>代码是否采取措施避免运行时错误<ul>
+<li>数组边界溢出</li>
+<li>被零除</li>
+<li>值越界</li>
+<li>堆栈溢出</li>
+<li>…</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-3-7-结构性检查（Structuredness）"><a href="#1-3-7-结构性检查（Structuredness）" class="headerlink" title="1.3.7  结构性检查（Structuredness）"></a>1.3.7  结构性检查（Structuredness）</h3><ul>
+<li>程序的每个功能是否都作为一个可辩识的代码块存在<br>循环是否只有一个入口</li>
+</ul>
+<h3 id="1-3-8-可追溯性检查（Traceability）"><a href="#1-3-8-可追溯性检查（Traceability）" class="headerlink" title="1.3.8  可追溯性检查（Traceability）"></a>1.3.8  可追溯性检查（Traceability）</h3><ul>
+<li>代码是否对每个程序进行了唯一标识 </li>
+<li>是否有一个交叉引用的框架可以用来在代码和开发文档之间相互对应 </li>
+<li>代码是否包括一个修订历史记录，记录中对 代码的修改和原因都有记录 </li>
+<li>是否所有的安全功能都有标识 </li>
+</ul>
+<h3 id="1-3-9-可理解性检查（Understandability）"><a href="#1-3-9-可理解性检查（Understandability）" class="headerlink" title="1.3.9  可理解性检查（Understandability）"></a>1.3.9  可理解性检查（Understandability）</h3><ul>
+<li>注释是否足够清晰的描述每个子程序 </li>
+<li>是否使用到不明确或不必要的复杂代码，它们是否被清楚的注释 </li>
+<li>使用一些统一的格式化技巧（如缩进、空白等）用来增强代码的清晰度 </li>
+<li>是否在定义命名规则时采用了便于记忆，反映类型等方法 </li>
+<li>每个变量都定义了合法的取值范围 </li>
+<li>代码中的算法是否符合开发文档中描述的数学模型 </li>
+</ul>
+<h3 id="1-3-10-可验证性检查-Verifiability"><a href="#1-3-10-可验证性检查-Verifiability" class="headerlink" title="1.3.10 可验证性检查(Verifiability)"></a>1.3.10 可验证性检查(Verifiability)</h3><p>代码中的实现技术是否便于测试 </p>
+<h2 id="1-4-Code-Review的步骤"><a href="#1-4-Code-Review的步骤" class="headerlink" title="1.4  Code Review的步骤"></a>1.4  Code Review的步骤</h2><p>这些是我在平时工作中的经验总结，目前也是按照这个步骤在做。</p>
+<ol>
+<li>代码编写者和代码审核者坐在一起，由代码编写者按照UC依次讲解自己负责的代码和相关逻辑，从Web层-&gt;DAO层；</li>
+<li>代码审核者在此过程中可以随时提出自己的疑问，同时积极发现隐藏的bug；对这些bug记录在案。</li>
+<li>代码讲解完毕后，代码审核者给自己安排几个小时再对代码审核一遍。<br>代码需要一行一行静下心看。同时代码又要全面的看，以确保代码整体上设计优良。</li>
+<li>代码审核者根据审核的结果编写“代码审核报告”，“审核报告”中记录发现的问题及修改建议，然后把“审核报告”发送给相关人员。</li>
+<li>代码编写者根据“代码审核报告”给出的修改意见，修改好代码，有不清楚的地方可积极向代码审核者提出。</li>
+<li>代码编写者 bug fix完毕之后给出反馈。</li>
+<li>代码审核者把Code Review中发现的有价值的问题更新到”代码审核规范”的文档中，对于特别值得提醒的问题可群发email给所有技术人员。</li>
+</ol>
+<p><strong>提示</strong><br>Code Review必备的文档： </p>
+<ul>
+<li>“代码审核规范”文档：记录代码应该遵循的标准。<blockquote>
+<p>代码审核者根据这些标准来Code Review代码，同时在Code Review过程中不断完善该文档。</p>
+</blockquote>
+</li>
+</ul>
+<h1 id="2．Code-Reivew的执行"><a href="#2．Code-Reivew的执行" class="headerlink" title="2．Code Reivew的执行"></a>2．Code Reivew的执行</h1><p>一个标准的Code Reivew活动应该分为三个阶段：</p>
+<h2 id="2-1．事前准备阶段"><a href="#2-1．事前准备阶段" class="headerlink" title="2.1．事前准备阶段"></a>2.1．事前准备阶段</h2><p>在一次CR前，对以下内容进行充分准备。</p>
+<h3 id="2-1-1．CR的对象"><a href="#2-1-1．CR的对象" class="headerlink" title="2.1.1．CR的对象"></a>2.1.1．CR的对象</h3><p>在准备CR代码对象时，我们要注意代码的数量，如果代码量比较大，要对代码进行必要的分解，确定其中的关键代码，对关键代码进行CR，可以达到举一反三的目的。</p>
+<h3 id="2-1-2．CR的内容"><a href="#2-1-2．CR的内容" class="headerlink" title="2.1.2．CR的内容"></a>2.1.2．CR的内容</h3><p>我们对代码的审查内容很多，如代码的编写是否规范（注释的书写格式、命名规范等）、技术处理规范（异常处理、日志处理、代码组织结构等）、业务实现等。我们不能希望通过一次CR活动，完成所有这些内容的审查，因此我们必须设定本次CR活动内容界限，确定审查重点；</p>
+<h3 id="2-1-3．评审规范和标准"><a href="#2-1-3．评审规范和标准" class="headerlink" title="2.1.3．评审规范和标准"></a>2.1.3．评审规范和标准</h3><p>在CR前设计确定评审规范和标准是必要，通过规范和标准我们在审查过程中可以有据可依，有理可循，而且还可以做到标准统一。</p>
+<h3 id="2-1-4．选择CR活动的参与者"><a href="#2-1-4．选择CR活动的参与者" class="headerlink" title="2.1.4．选择CR活动的参与者"></a>2.1.4．选择CR活动的参与者</h3><p>在CR开始前，必须把本次CR活动的对象、审查内容以及审查的规范和标准通报给所有的参与者。</p>
+<h3 id="2-1-5．选择CR活动的实施方式。"><a href="#2-1-5．选择CR活动的实施方式。" class="headerlink" title="2.1.5．选择CR活动的实施方式。"></a>2.1.5．选择CR活动的实施方式。</h3><p>CR活动有很多形式可供我们选择，我们可以根据实际情况选择桌面式CR、演示讲解式CR、一对一的座位CR等等。</p>
+<h2 id="2-2．实施阶段"><a href="#2-2．实施阶段" class="headerlink" title="2.2．实施阶段"></a>2.2．实施阶段</h2><p>充分的事前准备，只是做好CR活动的前提，在CR实施过程中，我们要做好以下工作。</p>
+<h3 id="2-2-1．准确记录"><a href="#2-2-1．准确记录" class="headerlink" title="2.2.1．准确记录"></a>2.2.1．准确记录</h3><p>对于CR过程发现的问题，我们必须清晰准确的记录，可以使用问题点记录单，明确记录的项目和内容。</p>
+<h3 id="2-2-2．讲解与提问"><a href="#2-2-2．讲解与提问" class="headerlink" title="2.2.2．讲解与提问"></a>2.2.2．讲解与提问</h3><p>CR过程中，要采用代码作者讲解和审查者提问方式。审查者不能只在发现问题时提问，同时也要根据本次审查的内容要求代码作者对某个特定问题的讲解。</p>
+<h3 id="2-2-3．逐项审查"><a href="#2-2-3．逐项审查" class="headerlink" title="2.2.3．逐项审查"></a>2.2.3．逐项审查</h3><p>对事前确定的审查内容，要逐项审查，不能因为时间不足等因素一扫而过。</p>
+<h3 id="2-2-4．注意气氛"><a href="#2-2-4．注意气氛" class="headerlink" title="2.2.4．注意气氛"></a>2.2.4．注意气氛</h3><p>实施审查时，要营造一个讨论问题、解决问题的氛围，不能把审查会搞成批判会，这样会影响相关人员的积极性。</p>
+<h2 id="2-3-事后跟踪跟踪。"><a href="#2-3-事后跟踪跟踪。" class="headerlink" title="2.3. 事后跟踪跟踪。"></a>2.3. 事后跟踪跟踪。</h2><h3 id="2-3-1-确认发现的问题"><a href="#2-3-1-确认发现的问题" class="headerlink" title="2.3.1. 确认发现的问题"></a>2.3.1. 确认发现的问题</h3><p>CR结束后，对发现的问题，首先需要确定以下内容。</p>
+<ol>
+<li>问题点的难易程度以及影响的范围；</li>
+<li>解决问题的责任者和问题点修正结果的确认者；</li>
+<li>解决问题点的时限。</li>
+</ol>
+<h3 id="2-3-2-修正问题责任者"><a href="#2-3-2-修正问题责任者" class="headerlink" title="2.3.2. 修正问题责任者"></a>2.3.2. 修正问题责任者</h3><p>对于修正问题责任者，在问题点的修正过程中，要三方面内容的记录。</p>
+<ol>
+<li>问题点的原因；</li>
+<li>解决问题点的对策；</li>
+<li>修正的内容。</li>
+</ol>
+<h3 id="2-3-3-修正结果确认者"><a href="#2-3-3-修正结果确认者" class="headerlink" title="2.3.3. 修正结果确认者"></a>2.3.3. 修正结果确认者</h3><p>做为修正结果的确认者，必须按照事前约定的时限及时的对修正结果进行全面的确认</p>
+<h1 id="3．注意事项"><a href="#3．注意事项" class="headerlink" title="3．注意事项"></a>3．注意事项</h1><h2 id="3-1-经常进行Code-Review"><a href="#3-1-经常进行Code-Review" class="headerlink" title="3.1. 经常进行Code Review"></a>3.1. 经常进行Code Review</h2><ol>
+<li>要Review的代码越多，那么要重构，重写的代码就会越多。而越不被程序作者接受的建议也会越多，唾沫口水战也会越多。</li>
+<li>程序员代码写得时候越长，程序员就会在代码中加入越来越多的个人的东西。 </li>
+<li>越接近软件发布的最终期限，代码也就不能改得太多。</li>
+</ol>
+<h2 id="3-2-Code-Review不要太正式，而且要短"><a href="#3-2-Code-Review不要太正式，而且要短" class="headerlink" title="3.2.  Code Review不要太正式，而且要短"></a>3.2.  Code Review不要太正式，而且要短</h2><p>忘了那个代码评审的Checklist吧，走到你的同事座位跟前，像请师父一样请他坐到你的电脑面前，然后，花5分钟给他讲讲你的代码，给他另外一个5分钟让他给你的代码提提意见，这比什么都好。而如果你用了一个Checklist，让这个事情表现得很正式的话，下面两件事中必有一件事会发生：</p>
+<ol>
+<li>只有在Checklist上存在的东西才会被Review。</li>
+<li>Code Reviews 变成了一种礼节性的东西，你的同事会装做很关心你的代码，但其实他心里想着尽快地离开你。</li>
+</ol>
+<p>只有不正式的Code Review才会让你和评审者放轻松，人只有放松了，才会表现得很真实，很真诚。记住Review只不过是一种形式，而只有在相互信任中通过相互的讨论得到了有意义和有建设性的建议和意见，那才是最实在的。不然，作者和评审者的关系就会变成小偷和警察的关系。</p>
+<h2 id="3-3-尽可能的让不同的人Reivew你的代码"><a href="#3-3-尽可能的让不同的人Reivew你的代码" class="headerlink" title="3.3. 尽可能的让不同的人Reivew你的代码"></a>3.3. 尽可能的让不同的人Reivew你的代码</h2><p>如果可能的话，不要总是只找一个人来Review你的代码，不同的人有不同的思考方式，有不同的见解，所以，不同的人可以全面的从各个方面评论你的代码。<br>但不要太多了，人多嘴杂反而适得其反，基本上来说，不要超过3个人，这是因为，这是一个可以围在一起讨论的最大人员尺寸。</p>
+<p>下面是几个优点：</p>
+<ol>
+<li>从不同的方向评审代码总是好的。</li>
+<li>会有更多的人帮你在日后维护你的代码。</li>
+<li>这也是一个增加团队凝聚力的方法。</li>
+</ol>
+<h2 id="3-4-保持积极的正面的态度"><a href="#3-4-保持积极的正面的态度" class="headerlink" title="3.4. 保持积极的正面的态度"></a>3.4. 保持积极的正面的态度</h2><p>程序员最大的问题就是“自负”，尤其当我们Reivew别人的代码的时候，我已经见过无数的场面，程序员在Code Review的时候，开始抨击别人的代码，质疑别人的能力。太可笑了，我分析了一下，这类的程序员其实并没有什么本事，因为他们指责对方的目的是想告诉大家自己有多么的牛，靠这种手段来表现自己的程序员，其实是就是传说中所说的“半瓶水”。</p>
+<p>所以，无论是代码作者，还是评审者，都需要一种积极向上的正面的态度，作者需要能够虚心接受别人的建议，因为别人的建议是为了让你做得更好；评审者也需要以一种积极的正面的态度向作者提意见，因为那是和你在一个战壕里的战友。记住，你不是一段代码，你是一个人！</p>
+<h2 id="3-5-学会享受Code-Reivew"><a href="#3-5-学会享受Code-Reivew" class="headerlink" title="3.5. 学会享受Code Reivew"></a>3.5. 学会享受Code Reivew</h2><p>这可能是最重要的一个提示了，如果你到了一个人人都喜欢Code Reivew的团阿，那么，你会进入到一个生机勃勃的地方，在那里，每个人都能写出质量非常好的代码，在那里，你不需要经理的管理，团队会自适应一切变化，他们相互学习，相互帮助，不仅仅是写出好的代码，而且团队和其中的每个人都会自动进化，最关键的是，这个是一个团队。</p>
+<h1 id="资料来源"><a href="#资料来源" class="headerlink" title="资料来源"></a>资料来源</h1><ul>
+<li>Code Reivew的执行<a href="http://www.cnblogs.com/dinofung/articles/2302957.html">http://www.cnblogs.com/dinofung/articles/2302957.html</a></li>
+<li>Code Review中的几个提示<a href="http://coolshell.cn/articles/1302.html">http://coolshell.cn/articles/1302.html</a></li>
+<li>什么是Code Review <a href="http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html">http://www.cnblogs.com/wdpp/archive/2011/01/17/2386823.html</a></li>
+<li>web项目经理手册-Code Review <a href="http://blog.csdn.net/yzhz/article/details/1669802">http://blog.csdn.net/yzhz/article/details/1669802</a></li>
+</ul>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>CodeReview</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>在Docker Compose中配置网络</title>
+    <url>/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/</url>
+    <content><![CDATA[<h1 id="Docker-镜像安全最佳实践"><a href="#Docker-镜像安全最佳实践" class="headerlink" title="Docker 镜像安全最佳实践"></a>Docker 镜像安全最佳实践</h1><h2 id="Docker-和-宿主机-的设置"><a href="#Docker-和-宿主机-的设置" class="headerlink" title="Docker 和 宿主机 的设置"></a>Docker 和 宿主机 的设置</h2><ol>
+<li>保证宿主机和 Docker 的版本是最新的</li>
+<li>不要暴露 Docker 的 守护进程（daemon） 的套接字</li>
+<li>使用 rootless 模式启动 Docker</li>
+<li>避免使用特权容器</li>
+<li>限制容器资源</li>
+<li>隔离容器网络</li>
+<li>提高容器的隔离度</li>
+<li>将文件系统和卷设置为只读</li>
+<li>完整的生命周期管理</li>
+<li>限制来自容器内的系统调用</li>
+</ol>
+<h2 id="确保镜像安全"><a href="#确保镜像安全" class="headerlink" title="确保镜像安全"></a>确保镜像安全</h2><ol start="11">
+<li>扫描和验证容器镜像</li>
+<li>使用最小基础镜像</li>
+<li>不要向 Docker 镜像泄露敏感信息</li>
+<li>使用多阶段构建</li>
+<li>确保容器注册</li>
+<li>使用固定标签以获得不变性</li>
+</ol>
+<h2 id="监控容器"><a href="#监控容器" class="headerlink" title="监控容器"></a>监控容器</h2><ol start="17">
+<li>监控容器活动</li>
+<li>确保容器在运行时的安全</li>
+<li>将故障排除数据与容器分开保存</li>
+<li>为镜像使用元数据标签</li>
+</ol>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><img src="https://sysdig.com/blog/dockerfile-best-practices/" alt="Top 20 Dockerfile best practices"><br><img src="https://www.creationline.com/lab/aquasecurity/43087" alt="Dockerセキュリティベストプラクティス トップ20"></p>
+]]></content>
+      <categories>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>镜像安全</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title></title>
+    <url>/2023/09/20/DockerCompose%E5%AE%89%E8%A3%85/</url>
+    <content><![CDATA[<h1 id="DockerCompose安装"><a href="#DockerCompose安装" class="headerlink" title="DockerCompose安装"></a>DockerCompose安装</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">DOCKER_CONFIG&#x3D;$&#123;DOCKER_CONFIG:-$HOME&#x2F;.docker&#125;</span><br><span class="line">mkdir -p $DOCKER_CONFIG&#x2F;cli-plugins</span><br><span class="line">sudo curl -SL https:&#x2F;&#x2F;github.com&#x2F;docker&#x2F;compose&#x2F;releases&#x2F;download&#x2F;v2.6.1&#x2F;docker-compose-linux-x86_64 -o &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo chmod +x &#x2F;usr&#x2F;bin&#x2F;docker-compose</span><br><span class="line">sudo docker-compose version</span><br></pre></td></tr></table></figure>
+]]></content>
+  </entry>
+  <entry>
+    <title>DockerFile</title>
+    <url>/2022/06/02/DockerFile/</url>
+    <content><![CDATA[<h1 id="DockerFile"><a href="#DockerFile" class="headerlink" title="DockerFile"></a>DockerFile</h1><h2 id="原则与建议"><a href="#原则与建议" class="headerlink" title="原则与建议"></a>原则与建议</h2><ul>
+<li>容器轻量化。从镜像中产生的容器应该尽量轻量化，能在足够短的时间内停止、销毁、重新生成并替换原来的容器。</li>
+<li>使用 .gitignore。在大部分情况下，Dockerfile 会和构建所需的文件放在同一个目录中，为了提高构建的性能，应该使用 .gitignore 来过滤掉不需要的文件和目录。</li>
+<li>为了减少镜像的大小，减少依赖，仅安装需要的软件包。</li>
+<li>一个容器只做一件事。解耦复杂的应用，分成多个容器，而不是所有东西都放在一个容器内运行。如一个 Python Web 应用，可能需要 Server、DB、Cache、MQ、Log 等几个容器。一个更加极端的说法：One process per container。</li>
+<li>减少镜像的图层。不要多个 Label、ENV 等标签。</li>
+<li>对续行的参数按照字母表排序，特别是使用apt-get install -y安装包的时候。</li>
+<li>使用构建缓存。如果不想使用缓存，可以在构建的时候使用参数–no-cache=true来强制重新生成中间镜像。</li>
+</ul>
+<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2><h3 id="FROM"><a href="#FROM" class="headerlink" title="FROM"></a>FROM</h3><p>FROM 指令用于指定其后构建新镜像所使用的基础镜像</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">FROM &lt;image&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;tag&gt;</span><br><span class="line">FROM &lt;image&gt;:&lt;digest&gt;</span><br></pre></td></tr></table></figure>
+<p><strong>FROM 必须 是 Dockerfile 中第一条非注释命令</strong><br><strong>在一个 Dockerfile 文件中创建多个镜像时，FROM 可以多次出现。只需在每个新命令 FROM 之前，记录提交上次的镜像 ID。</strong><br><strong>tag 或 digest 是可选的，如果不使用这两个值时，会使用 latest 版本的基础镜像</strong></p>
+<h3 id="RUN"><a href="#RUN" class="headerlink" title="RUN"></a>RUN</h3><p>在镜像的构建过程中执行特定的命令，并生成一个中间镜像</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#shell格式</span><br><span class="line">RUN &lt;command&gt;</span><br><span class="line">#exec格式</span><br><span class="line">RUN [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br></pre></td></tr></table></figure>
+<ul>
+<li>RUN 命令将在当前 image 中执行任意合法命令并提交执行结果。命令执行提交后，就会自动执行 Dockerfile 中的下一个指令。</li>
+<li>层级 RUN 指令和生成提交是符合 Docker 核心理念的做法。它允许像版本控制那样，在任意一个点，对 image 镜像进行定制化构建。</li>
+<li>RUN 指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定 ######no###cache 参数，如：docker build ######no###cache。</li>
+</ul>
+<h3 id="FROM-scratch"><a href="#FROM-scratch" class="headerlink" title="FROM scratch"></a>FROM scratch</h3><p>scratch 是一个空的虚拟的镜像源文件，因为需要的依赖都存在不需要基础镜像，从而减小体积。</p>
+<h3 id="COPY"><a href="#COPY" class="headerlink" title="COPY"></a>COPY</h3><p>复制文件</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">COPY &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">COPY [&quot;&lt;源路径1&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p>和 RUN 指令一样，也有两种格式，一种类似于命令行，一种类似于函数调用。COPY 指令将从构建上下文目录中 &lt;源路径&gt; 的文件/目录复制到新的一层的镜像内的&lt;目标路径&gt;位置。比如：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">COPY package.json &#x2F;usr&#x2F;src&#x2F;app&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;源路径&gt;可以是多个，甚至可以是通配符，其通配符规则要满足 Go 的 filepath.Match 规则，如：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">COPY hom* &#x2F;mydir&#x2F;</span><br><span class="line">COPY hom?.txt &#x2F;mydir&#x2F;</span><br></pre></td></tr></table></figure>
+
+<p>&lt;目标路径&gt;可以是容器内的绝对路径，也可以是相对于工作目录的相对路径（工作目录可以用 WORKDIR 指令来指定）。目标路径不需要事先创建，如果目录不存在会在复制文件前先行创建缺失目录。</p>
+<p>此外，还需要注意一点，使用 COPY 指令，源文件的各种元数据都会保留。比如读、写、执行权限、文件变更时间等。这个特性对于镜像定制很有用。特别是构建相关文件都在使用 Git 进行管理的时候。</p>
+<h3 id="ADD"><a href="#ADD" class="headerlink" title="ADD"></a>ADD</h3><p>更高级的复制文件<br>ADD 指令和 COPY 的格式和性质基本一致。但是在 COPY 基础上增加了一些功能。比如&lt;源路径&gt;可以是一个 URL，这种情况下，Docker 引擎会试图去下载这个链接的文件放到&lt;目标路径&gt;去。</p>
+<p>在构建镜像时，复制上下文中的文件到镜像内，格式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ADD &lt;源路径&gt;... &lt;目标路径&gt;</span><br><span class="line">ADD [&quot;&lt;源路径&gt;&quot;,... &quot;&lt;目标路径&gt;&quot;]</span><br></pre></td></tr></table></figure>
+<p><strong>注意</strong><br>如果 docker 发现文件内容被改变，则接下来的指令都不会再使用缓存。关于复制文件时需要处理的/，基本跟正常的 copy 一致</p>
+<h3 id="ENV"><a href="#ENV" class="headerlink" title="ENV"></a>ENV</h3><p>设置环境变量<br>格式有两种：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ENV &lt;key&gt; &lt;value&gt;</span><br><span class="line">ENV &lt;key1&gt;&#x3D;&lt;value1&gt; &lt;key2&gt;&#x3D;&lt;value2&gt;...</span><br></pre></td></tr></table></figure>
+<p>这个指令很简单，就是设置环境变量而已，无论是后面的其它指令，如 RUN，还是运行时的应用，都可以直接使用这里定义的环境变量。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ENV VERSION&#x3D;1.0 DEBUG&#x3D;on \</span><br><span class="line">    NAME&#x3D;&quot;Happy Feet&quot;</span><br></pre></td></tr></table></figure>
+<p>这个例子中演示了如何换行，以及对含有空格的值用双引号括起来的办法，这和 Shell 下的行为是一致的。</p>
+<h3 id="EXPOSE"><a href="#EXPOSE" class="headerlink" title="EXPOSE"></a>EXPOSE</h3><p>为构建的镜像设置监听端口，使容器在运行时监听。<br>格式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">EXPOSE &lt;port&gt; [&lt;port&gt;...]</span><br></pre></td></tr></table></figure>
+<p>EXPOSE 指令并不会让容器监听 host 的端口，如果需要，需要在 docker run 时使用 -p、-P 参数来发布容器端口到 host 的某个端口上。</p>
+<h3 id="VOLUME"><a href="#VOLUME" class="headerlink" title="VOLUME"></a>VOLUME</h3><p>定义匿名卷<br>VOLUME用于创建挂载点，即向基于所构建镜像创始的容器添加卷：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">VOLUME [&quot;&#x2F;data&quot;]</span><br></pre></td></tr></table></figure>
+<p>一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：</p>
+<ul>
+<li>卷可以容器间共享和重用</li>
+<li>容器并不一定要和其它容器共享卷</li>
+<li>修改卷后会立即生效</li>
+<li>对卷的修改不会对镜像产生影响</li>
+<li>卷会一直存在，直到没有任何容器在使用它<br>VOLUME 让我们可以将源代码、数据或其它内容添加到镜像中，而又不并提交到镜像中，并使我们可以多个容器间共享这些内容。</li>
+</ul>
+<h3 id="WORKDIR"><a href="#WORKDIR" class="headerlink" title="WORKDIR"></a>WORKDIR</h3><p>WORKDIR用于在容器内设置一个工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">WORKDIR &#x2F;path&#x2F;to&#x2F;workdir</span><br></pre></td></tr></table></figure>
+<p>通过WORKDIR设置工作目录后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT、ADD、COPY 等命令都会在该目录下执行。<br>如，使用WORKDIR设置工作目录：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">WORKDIR &#x2F;a</span><br><span class="line">WORKDIR b</span><br><span class="line">WORKDIR c</span><br><span class="line">RUN pwd</span><br></pre></td></tr></table></figure>
+<p>在以上示例中，pwd 最终将会在 /a/b/c 目录中执行。在使用 docker run 运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。</p>
+<h3 id="USER"><a href="#USER" class="headerlink" title="USER"></a>USER</h3><p>指定当前用户<br>USER 用于指定运行镜像所使用的用户：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">USER daemon</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户时，可以使用用户名、UID 或 GID，或是两者的组合。以下都是合法的指定试：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">USER user</span><br><span class="line">USER user:group</span><br><span class="line">USER uid</span><br><span class="line">USER uid:gid</span><br><span class="line">USER user:gid</span><br><span class="line">USER uid:group</span><br></pre></td></tr></table></figure>
+<p>使用USER指定用户后，Dockerfile 中其后的命令 RUN、CMD、ENTRYPOINT 都将使用该用户。镜像构建完成后，通过 docker run 运行容器时，可以通过 -u 参数来覆盖所指定的用户。</p>
+<h3 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h3><p>CMD用于指定在容器启动时所要执行的命令。CMD 有以下三种格式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">CMD [&quot;executable&quot;,&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD [&quot;param1&quot;,&quot;param2&quot;]</span><br><span class="line">CMD command param1 param2</span><br></pre></td></tr></table></figure>
+<p>省略可执行文件的 exec 格式，这种写法使 CMD 中的参数当做 ENTRYPOINT 的默认参数，此时 ENTRYPOINT 也应该是 exec 格式，具体与 ENTRYPOINT 的组合使用，参考 ENTRYPOINT。</p>
+<p><em><strong>注意</strong></em><br>与 RUN 指令的区别：RUN 在构建的时候执行，并生成一个新的镜像，CMD 在容器运行的时候执行，在构建时不进行任何操作。</p>
+<h3 id="ENTRYPOINT"><a href="#ENTRYPOINT" class="headerlink" title="ENTRYPOINT"></a>ENTRYPOINT</h3><p>ENTRYPOINT 用于给容器配置一个可执行程序。也就是说，每次使用镜像创建容器时，通过 ENTRYPOINT 指定的程序都会被设置为默认程序。ENTRYPOINT 有以下两种形式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ENTRYPOINT [&quot;executable&quot;, &quot;param1&quot;, &quot;param2&quot;]</span><br><span class="line">ENTRYPOINT command param1 param2</span><br><span class="line">ENTRYPOINT 与 CMD 非常类似，不同的是通过docker run执行的命令不会覆盖 ENTRYPOINT，而docker run命令中指定的任何参数，都会被当做参数再次传递给 ENTRYPOINT。Dockerfile 中只允许有一个 ENTRYPOINT 命令，多指定时会覆盖前面的设置，而只执行最后的 ENTRYPOINT 指令。</span><br></pre></td></tr></table></figure>
+<p>docker run运行容器时指定的参数都会被传递给 ENTRYPOINT ，且会覆盖 CMD 命令指定的参数。如，执行docker run <image> -d时，-d 参数将被传递给入口点。</p>
+<p>也可以通过docker run –entrypoint重写 ENTRYPOINT 入口点。如：可以像下面这样指定一个容器执行程序：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;bin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+<p>完整构建代码：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># Version: 0.0.3</span><br><span class="line">FROM ubuntu:16.04</span><br><span class="line">MAINTAINER 何民三 &quot;cn.liuht@gmail.com&quot;</span><br><span class="line">RUN apt-get update</span><br><span class="line">RUN apt-get install -y nginx</span><br><span class="line">RUN echo &#39;Hello World, 我是个容器&#39; \ </span><br><span class="line">   &gt; &#x2F;var&#x2F;www&#x2F;html&#x2F;index.html</span><br><span class="line">ENTRYPOINT [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br><span class="line">EXPOSE 80</span><br></pre></td></tr></table></figure>
+<p>使用docker build构建镜像，并将镜像指定为 itbilu/test：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker build -t&#x3D;&quot;itbilu&#x2F;test&quot; .</span><br></pre></td></tr></table></figure>
+<p>构建完成后，使用itbilu/test启动一个容器：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker run -i -t  itbilu&#x2F;test -g &quot;daemon off;&quot;</span><br></pre></td></tr></table></figure>
+<p>在运行容器时，我们使用了 -g “daemon off;”，这个参数将会被传递给 ENTRYPOINT，最终在容器中执行的命令为 /usr/sbin/nginx -g “daemon off;”。</p>
+<h3 id="LABEL"><a href="#LABEL" class="headerlink" title="LABEL"></a>LABEL</h3><p>LABEL用于为镜像添加元数据，元数以键值对的形式指定：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">LABEL &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; &lt;key&gt;&#x3D;&lt;value&gt; ...</span><br></pre></td></tr></table></figure>
+<p>使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。<br>如，通过LABEL指定一些元数据：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">LABEL version&#x3D;&quot;1.0&quot; description&#x3D;&quot;这是一个Web服务器&quot; by&#x3D;&quot;IT笔录&quot;</span><br></pre></td></tr></table></figure>
+<p>指定后可以通过docker inspect查看：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker inspect itbilu&#x2F;test</span><br><span class="line">&quot;Labels&quot;: &#123;</span><br><span class="line">    &quot;version&quot;: &quot;1.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;这是一个Web服务器&quot;,</span><br><span class="line">    &quot;by&quot;: &quot;IT笔录&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
+
+<h3 id="ARG"><a href="#ARG" class="headerlink" title="ARG"></a>ARG</h3><p>ARG用于指定传递给构建运行时的变量：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ARG &lt;name&gt;[&#x3D;&lt;default value&gt;]</span><br></pre></td></tr></table></figure>
+<p>如，通过ARG指定两个变量：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ARG site</span><br><span class="line">ARG build_user&#x3D;IT笔录</span><br></pre></td></tr></table></figure>
+<p>以上我们指定了 site 和 build_user 两个变量，其中 build_user 指定了默认值。在使用 docker build 构建镜像时，可以通过 –build-arg <varname>=<value> 参数来指定或重设置这些变量的值。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker build --build-arg site&#x3D;itiblu.com -t itbilu&#x2F;test .</span><br></pre></td></tr></table></figure>
+<p>这样我们构建了 itbilu/test 镜像，其中site会被设置为 itbilu.com，由于没有指定 build_user，其值将是默认值 IT 笔录。</p>
+<h3 id="ONBUILD"><a href="#ONBUILD" class="headerlink" title="ONBUILD"></a>ONBUILD</h3><p>ONBUILD用于设置镜像触发器：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ONBUILD [INSTRUCTION]</span><br></pre></td></tr></table></figure>
+<p>当所构建的镜像被用做其它镜像的基础镜像，该镜像中的触发器将会被钥触发。<br>如，当镜像被使用时，可能需要做一些处理：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[...]</span><br><span class="line">ONBUILD ADD . &#x2F;app&#x2F;src</span><br><span class="line">ONBUILD RUN &#x2F;usr&#x2F;local&#x2F;bin&#x2F;python-build --dir &#x2F;app&#x2F;src</span><br><span class="line">[...]</span><br></pre></td></tr></table></figure>
+
+<h3 id="STOPSIGNAL"><a href="#STOPSIGNAL" class="headerlink" title="STOPSIGNAL"></a>STOPSIGNAL</h3><p>STOPSIGNAL用于设置停止容器所要发送的系统调用信号：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">STOPSIGNAL signal</span><br></pre></td></tr></table></figure>
+<p>所使用的信号必须是内核系统调用表中的合法的值，如：SIGKILL。</p>
+<h3 id="SHELL"><a href="#SHELL" class="headerlink" title="SHELL"></a>SHELL</h3><p>SHELL用于设置执行命令（shell式）所使用的的默认 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">SHELL [&quot;executable&quot;, &quot;parameters&quot;]</span><br></pre></td></tr></table></figure>
+<p>SHELL在Windows环境下比较有用，Windows 下通常会有 cmd 和 powershell 两种 shell，可能还会有 sh。这时就可以通过 SHELL 来指定所使用的 shell 类型：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">FROM microsoft&#x2F;windowsservercore</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo default</span><br><span class="line">RUN echo default</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C powershell -command Write-Host default</span><br><span class="line">RUN powershell -command Write-Host default</span><br><span class="line"></span><br><span class="line"># Executed as powershell -command Write-Host hello</span><br><span class="line">SHELL [&quot;powershell&quot;, &quot;-command&quot;]</span><br><span class="line">RUN Write-Host hello</span><br><span class="line"></span><br><span class="line"># Executed as cmd &#x2F;S &#x2F;C echo hello</span><br><span class="line">SHELL [&quot;cmd&quot;, &quot;&#x2F;S&quot;&quot;, &quot;&#x2F;C&quot;]</span><br><span class="line">RUN echo hello</span><br></pre></td></tr></table></figure>
+
+<h2 id="Dockerfile-示例"><a href="#Dockerfile-示例" class="headerlink" title="Dockerfile 示例"></a>Dockerfile 示例</h2><ul>
+<li>构建Nginx运行环境</li>
+<li>构建tomcat 环境</li>
+</ul>
+<h3 id="构建Nginx运行环境"><a href="#构建Nginx运行环境" class="headerlink" title="构建Nginx运行环境"></a>构建Nginx运行环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#指定基础镜像</span><br><span class="line">FROM sameersbn&#x2F;ubuntu:14.04.20161014</span><br><span class="line"></span><br><span class="line">#维护者信息</span><br><span class="line">MAINTAINER sameer@damagehead.com</span><br><span class="line"></span><br><span class="line">#设置环境</span><br><span class="line">ENV RTMP_VERSION&#x3D;1.1.10 \</span><br><span class="line">    NPS_VERSION&#x3D;1.11.33.4 \</span><br><span class="line">    LIBAV_VERSION&#x3D;11.8 \</span><br><span class="line">    NGINX_VERSION&#x3D;1.10.1 \</span><br><span class="line">    NGINX_USER&#x3D;www-data \</span><br><span class="line">    NGINX_SITECONF_DIR&#x3D;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled \</span><br><span class="line">    NGINX_LOG_DIR&#x3D;&#x2F;var&#x2F;log&#x2F;nginx \</span><br><span class="line">    NGINX_TEMP_DIR&#x3D;&#x2F;var&#x2F;lib&#x2F;nginx \</span><br><span class="line">    NGINX_SETUP_DIR&#x3D;&#x2F;var&#x2F;cache&#x2F;nginx</span><br><span class="line"></span><br><span class="line">#设置构建时变量，镜像建立完成后就失效</span><br><span class="line">ARG BUILD_LIBAV&#x3D;false</span><br><span class="line">ARG WITH_DEBUG&#x3D;false</span><br><span class="line">ARG WITH_PAGESPEED&#x3D;true</span><br><span class="line">ARG WITH_RTMP&#x3D;true</span><br><span class="line"></span><br><span class="line">#复制本地文件到容器目录中</span><br><span class="line">COPY setup&#x2F; $&#123;NGINX_SETUP_DIR&#125;&#x2F;</span><br><span class="line">RUN bash $&#123;NGINX_SETUP_DIR&#125;&#x2F;install.sh</span><br><span class="line"></span><br><span class="line">#复制本地配置文件到容器目录中</span><br><span class="line">COPY nginx.conf &#x2F;etc&#x2F;nginx&#x2F;nginx.conf</span><br><span class="line">COPY entrypoint.sh &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#运行指令</span><br><span class="line">RUN chmod 755 &#x2F;sbin&#x2F;entrypoint.sh</span><br><span class="line"></span><br><span class="line">#允许指定的端口</span><br><span class="line">EXPOSE 80&#x2F;tcp 443&#x2F;tcp 1935&#x2F;tcp</span><br><span class="line"></span><br><span class="line">#指定网站目录挂载点</span><br><span class="line">VOLUME [&quot;$&#123;NGINX_SITECONF_DIR&#125;&quot;]</span><br><span class="line"></span><br><span class="line">ENTRYPOINT [&quot;&#x2F;sbin&#x2F;entrypoint.sh&quot;]</span><br><span class="line">CMD [&quot;&#x2F;usr&#x2F;sbin&#x2F;nginx&quot;]</span><br></pre></td></tr></table></figure>
+
+<h3 id="构建Tomcat环境"><a href="#构建Tomcat环境" class="headerlink" title="构建Tomcat环境"></a>构建Tomcat环境</h3><p><em><strong>Dockerfile文件</strong></em></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 指定基于的基础镜像</span><br><span class="line">FROM ubuntu:13.10  </span><br><span class="line"></span><br><span class="line"># 维护者信息</span><br><span class="line">MAINTAINER zhangjiayang &quot;zhangjiayang@sczq.com.cn&quot;  </span><br><span class="line">  </span><br><span class="line"># 镜像的指令操作</span><br><span class="line"># 获取APT更新的资源列表</span><br><span class="line">RUN echo &quot;deb http:&#x2F;&#x2F;archive.ubuntu.com&#x2F;ubuntu precise main universe&quot;&gt; &#x2F;etc&#x2F;apt&#x2F;sources.list</span><br><span class="line"># 更新软件</span><br><span class="line">RUN apt-get update  </span><br><span class="line">  </span><br><span class="line"># Install curl  </span><br><span class="line">RUN apt-get -y install curl  </span><br><span class="line">  </span><br><span class="line"># Install JDK 7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp;  curl -L &#39;http:&#x2F;&#x2F;download.oracle.com&#x2F;otn-pub&#x2F;java&#x2F;jdk&#x2F;7u65-b17&#x2F;jdk-7u65-linux-x64.tar.gz&#39; -H &#39;Cookie: oraclelicense&#x3D;accept-securebackup-cookie; gpw_e24&#x3D;Dockerfile&#39; | tar -xz  </span><br><span class="line">RUN mkdir -p &#x2F;usr&#x2F;lib&#x2F;jvm  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;jdk1.7.0_65&#x2F; &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Set Oracle JDK 7 as default Java  </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;java java &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;java 300     </span><br><span class="line">RUN update-alternatives --install &#x2F;usr&#x2F;bin&#x2F;javac javac &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;bin&#x2F;javac 300     </span><br><span class="line"></span><br><span class="line"># 设置系统环境</span><br><span class="line">ENV JAVA_HOME &#x2F;usr&#x2F;lib&#x2F;jvm&#x2F;java-7-oracle&#x2F;  </span><br><span class="line">  </span><br><span class="line"># Install tomcat7  </span><br><span class="line">RUN cd &#x2F;tmp &amp;&amp; curl -L &#39;http:&#x2F;&#x2F;archive.apache.org&#x2F;dist&#x2F;tomcat&#x2F;tomcat-7&#x2F;v7.0.8&#x2F;bin&#x2F;apache-tomcat-7.0.8.tar.gz&#39; | tar -xz  </span><br><span class="line">RUN mv &#x2F;tmp&#x2F;apache-tomcat-7.0.8&#x2F; &#x2F;opt&#x2F;tomcat7&#x2F;  </span><br><span class="line">  </span><br><span class="line">ENV CATALINA_HOME &#x2F;opt&#x2F;tomcat7  </span><br><span class="line">ENV PATH $PATH:$CATALINA_HOME&#x2F;bin  </span><br><span class="line"></span><br><span class="line"># 复件tomcat7.sh到容器中的目录 </span><br><span class="line">ADD tomcat7.sh &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">RUN chmod 755 &#x2F;etc&#x2F;init.d&#x2F;tomcat7  </span><br><span class="line">  </span><br><span class="line"># Expose ports.  指定暴露的端口</span><br><span class="line">EXPOSE 8080  </span><br><span class="line">  </span><br><span class="line"># Define default command.  </span><br><span class="line">ENTRYPOINT service tomcat7 start &amp;&amp; tail -f &#x2F;opt&#x2F;tomcat7&#x2F;logs&#x2F;catalina.out</span><br></pre></td></tr></table></figure>
+
+<p><em><strong>tomcat7.sh命令文件</strong></em></p>
+<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="built_in">export</span> JAVA_HOME=/usr/lib/jvm/java-7-oracle/  </span><br><span class="line"><span class="built_in">export</span> TOMCAT_HOME=/opt/tomcat7  </span><br><span class="line">  </span><br><span class="line"><span class="keyword">case</span> <span class="variable">$1</span> <span class="keyword">in</span>  </span><br><span class="line">start)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line">stop)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">;;  </span><br><span class="line">restart)  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/shutdown.sh  </span><br><span class="line">  sh <span class="variable">$TOMCAT_HOME</span>/bin/startup.sh  </span><br><span class="line">;;  </span><br><span class="line"><span class="keyword">esac</span>  </span><br><span class="line"><span class="built_in">exit</span> 0</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>DockerFile</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Docker 命令</title>
+    <url>/2022/06/02/Docker%E5%91%BD%E4%BB%A4/</url>
+    <content><![CDATA[<h2 id="Docker-命令"><a href="#Docker-命令" class="headerlink" title="Docker 命令"></a>Docker 命令</h2><ul>
+<li>帮助命令<br>docker –help</li>
+</ul>
+<h3 id="镜像操作"><a href="#镜像操作" class="headerlink" title="镜像操作"></a>镜像操作</h3><ul>
+<li><p>搜索镜像<br>docker search hello-world</p>
+</li>
+<li><p>下载镜像<br>docker pull hello-world</p>
+</li>
+<li><p>查看本地已下载所有镜像<br>docker images</p>
+</li>
+<li><p>查看镜像历史<br>docker history hello-world</p>
+</li>
+<li><p>备份镜像<br>docker tag hello-word:last hello-world:v2</p>
+</li>
+<li><p>删除镜像<br>docker rmi hello-word:last</p>
+</li>
+<li><p>删除未使用过的镜像<br>docker image prune</p>
+</li>
+<li><p>导出镜像<br>docker save -o hello-world:last.tar hello-world:last</p>
+</li>
+<li><p>导入镜像<br>docker load -i hello-world:last.tar</p>
+</li>
+<li><p>查看镜像信息<br>docker image inspact nginx</p>
+</li>
+</ul>
+<h3 id="容器操作"><a href="#容器操作" class="headerlink" title="容器操作"></a>容器操作</h3><ul>
+<li><p>查看所有容器 [-q 编号] [-a active 启动的容器]<br>docker ps [-a] [-q]</p>
+</li>
+<li><p>启动容器 [-d 后台启动]<br>docker run -d –name nginx1 nginx:last</p>
+</li>
+<li><p>停止容器<br>docker stop nginx1</p>
+</li>
+<li><p>启动容器()<br>docker start nginx1</p>
+</li>
+<li><p>删除容器<br>docker rm nginx1</p>
+</li>
+<li><p>批量删除运行中容器<br>docker rm $(docker ps -q) -f</p>
+</li>
+<li><p>创建容器并进入<br>docker run -it –name nginx1 nginx:last /bin/bash</p>
+</li>
+<li><p>退出容器<br>exit</p>
+</li>
+<li><p>进入容器<br>docker exec -it nginx1 /bin/bash</p>
+</li>
+<li><p>通过容器创建镜像<br>docker commit -m ‘laowang’ nginx1 nginx:v1</p>
+</li>
+<li><p>查看容器信息<br>docker container inspact nginx1</p>
+</li>
+</ul>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>Docker</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Docker容器端口映射</title>
+    <url>/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/</url>
+    <content><![CDATA[<h1 id="Docker容器端口映射"><a href="#Docker容器端口映射" class="headerlink" title="Docker容器端口映射"></a>Docker容器端口映射</h1><p>常见容器服务需要做端口映射，这里以nginx为例进行举例</p>
+<h2 id="启动一个nginx容器"><a href="#启动一个nginx容器" class="headerlink" title="启动一个nginx容器"></a>启动一个nginx容器</h2><p>docker run -itd –name nginx1 -P nginx:latest #随机端口<br>docker run -itd –name nginx2 -p 6001:80 nginx:latest #指定端口<br>docker run -itd –name nginx3 -p 172.16.10.1:6002:80 nginx:latest #指定IP和端口</p>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>容器端口映射</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Docker数据卷</title>
+    <url>/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/</url>
+    <content><![CDATA[<h1 id="Docker数据卷"><a href="#Docker数据卷" class="headerlink" title="Docker数据卷"></a>Docker数据卷</h1><p>宿主机与容器进行数据交互，共享宿主机与容器之间的数据</p>
+<h2 id="创建数据卷关联"><a href="#创建数据卷关联" class="headerlink" title="创建数据卷关联"></a>创建数据卷关联</h2><p>docker run -it –name my_ubuntu1 -v ~ /Desktop/test:/test /bin/bash </p>
+<h2 id="利用系统方法操作数据卷"><a href="#利用系统方法操作数据卷" class="headerlink" title="利用系统方法操作数据卷"></a>利用系统方法操作数据卷</h2><ul>
+<li><p>查 docker数据卷<br>docker volume ls</p>
+</li>
+<li><p>创建数据卷<br>docker volume create volname</p>
+</li>
+<li><p>共享<br>docker run -it –name my_ubuntu2 -v volname:/home ubuntu:latest /bin/bash</p>
+</li>
+</ul>
+<h2 id="数据卷容器使用"><a href="#数据卷容器使用" class="headerlink" title="数据卷容器使用"></a>数据卷容器使用</h2><p>可以通过数据卷容器，创建新的容器，并将多个容器绑定在一起</p>
+<p>docker run -itd –name my_ubuntu3 –volumes-from my_ubuntu2 ubuntu:latest</p>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>数据卷</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Docker网络模式</title>
+    <url>/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/</url>
+    <content><![CDATA[<h1 id="Docker网络模式"><a href="#Docker网络模式" class="headerlink" title="Docker网络模式"></a>Docker网络模式</h1><p>Docker常见的两种网络模式</p>
+<ul>
+<li>host网络模式：创建的容器和宿主机<em><strong>共享同一个网卡</strong></em></li>
+<li>bridge网络模式：桥接模式，只要使用桥接模式创建容器网段一样（类似于172.16.1.1，172.16.1.2）有点像是子局域网</li>
+</ul>
+<h2 id="利用network命令管理网络模式"><a href="#利用network命令管理网络模式" class="headerlink" title="利用network命令管理网络模式"></a>利用network命令管理网络模式</h2><ul>
+<li>查看网络模式<br>docker network ls</li>
+<li>创建网络模式<br>docker network create –drive bridge bridge_test</li>
+<li>通过network断网<br>docker network disconnet bridge nginx5</li>
+<li>通过network联网<br>docker network connect bridge nginx5</li>
+<li>删除网络模式<br>docker network rm bridge_test</li>
+</ul>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>网络模式</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Electron编码规范.md</title>
+    <url>/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<p>目录<br>代码规范  2</p>
+<ol>
+<li>说明 2</li>
+<li>基本原则 2</li>
+<li>C++与Python 2</li>
+<li>命名相关 2</li>
+<li>工程目录结构 3</li>
+</ol>
+<p>Electron代码规范</p>
+<ol>
+<li> 说明<br>Electron框架正如官网介绍是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，框架分为前端和后端两个部分，根据前后端采用的技术不同分别遵循前后端所采用技术的代码规范</li>
+<li> 基本原则</li>
+</ol>
+<ol>
+<li><p> 不要直接在渲染进程操作主进程，通过进程通信的方式进行数据及事件响应</p>
+</li>
+<li><p> nodejs请使用require方式引入资源不使用import方式引入</p>
+</li>
+<li><p> 多渲染进程传参请使用localStorage或sessionStorage</p>
+</li>
+<li><p> 资源下载不下来时请直接到官网下载<a href="https://github.com/electron/electron/releases">https://github.com/electron/electron/releases</a> 将文件放到 用户目录\AppData\Local\electron\Cache 下 再进行 npm install -g electron</p>
+</li>
+<li><p> 代码中包含native模块，必须进行 rebuild操作<br>调试渲染进程时增加如下代码增加mainWindow.webContents.openDevTools();</p>
+</li>
+<li></li>
+</ol>
+<ol start="3">
+<li> C++与Python<br>对于 C++ 和 Python, 遵循 Chromium 的编码风格. 可以使用 clang-format 来自动格式化 C++ 代码. 可以使用 script/cpplint.py 来检验文件是否符合要求。</li>
+</ol>
+<p>现在使用的 Python 版本是 Python 2.7。</p>
+<p>C++ 代码使用了大量 Chromium 的抽象和类型，因此建议使用者熟悉它们。 一个起步的好地方是 Chromium 的《重要的抽象概念和数据库结构》文档. 该文档提到一些特殊类型，范围类型(超出范围时自动释放其内存), 记录机制等。<br>4.  命名相关<br>Electron API 使用与 Node.js 相同的大小写方案：<br>当模块本身是class时, 比如 BrowserWindow, 使用 大驼峰.<br>当模块是一组 API 时, 比如 globalShortcut时，使用 小驼峰。<br>当 API 是对象的属性时, 并且它复杂到足以成为一个单独的块, 比如 win.webContents, 使用 小驼峰.<br>对于其他非模块API, 使用自然标题, 比如 <webview> Tag 或 Process Object.</p>
+<p>当创建新的 API 时， 最好使用 getter 和 setter 而不是 jQuery 的一次性函数。 举个例子, .getText() 和 .setText(text) 优于 .text([text]). </p>
+<ol start="5">
+<li><p>工程目录结构<br>src - main<br> // 必须</p>
+<ul>
+<li>main.js // 入口</li>
+<li>listen.js // 监听渲染进程通信</li>
+<li>windows.js // 创建渲染进程</li>
+<li>log.js // 日志log4js 插件</li>
+</ul>
+<p> // 可选</p>
+<ul>
+<li>utils.js</li>
+<li>store.js</li>
+</ul>
+</li>
+</ol>
+<ul>
+<li>api.js</li>
+<li>render</li>
+</ul>
+<p>main 目录下为主进程代码，render 目录下为渲染进程代码<br>渲染进程目录结构规范与前端项目目录结构规范一致</p>
+<p>主进程中必须包含入口文件，监听进程文件和窗口创建文件<br>其他根据后端实际使用技术可选，nodejs作为后端的话 必须<br>6.  打包<br>Electron-packager 绿色可执行包<br>Electron-builder 压缩安装包</p>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>Electron</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>GIT Standard.md</title>
+    <url>/2022/06/01/GIT%20Standard/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1、说明"><a href="#1、说明" class="headerlink" title="1、说明"></a>1、说明</h1><p>项目是一个多人协同完成同一个目标的团队组织形式，在多人协作项目中，如果代码风格统一（前端代码规范和静态代码检查约束）、代码提交信息的说明准确规范（本章介绍），那么在项目开发过程及后期协作以及Bug处理时会更加方便。</p>
+<p>在本文中，我将介绍大家如何利用工具及约定保证大家代码提交的统一性，从而提高大家的协同效率：</p>
+<ul>
+<li><strong>commitlint</strong>: git 提交信息规范与验证<blockquote>
+<p>添加如ESLint的格式规范校验，规范comiit的格式，达到团队每个人的提交风格保持一直，保证提交信息的完整和准确性<br>风格如下：</p>
+</blockquote>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; Header</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;body&gt; &#x2F;&#x2F; 72</span><br><span class="line">&#x2F;&#x2F; 空一行</span><br><span class="line">&lt;footer&gt; &#x2F;&#x2F; 72</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 例</span><br><span class="line">fix(登陆模块): 修复登录密码错误的提示</span><br><span class="line"></span><br><span class="line">登录没有做友好型提示</span><br><span class="line"></span><br><span class="line">修正后不存在此问题</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><strong>husky</strong>: 使git-hook更容易<blockquote>
+<p>husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。</p>
+</blockquote>
+</li>
+<li>standard-version: 自动生成CHANGELOG 并发布版本</li>
+</ul>
+<h1 id="2、git-commit-message-规范"><a href="#2、git-commit-message-规范" class="headerlink" title="2、git commit message 规范"></a>2、git commit message 规范</h1><h2 id="commit-message格式"><a href="#commit-message格式" class="headerlink" title="commit message格式"></a>commit message格式</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">类型(影响范围): 描述</span><br><span class="line"></span><br><span class="line">问题描述</span><br><span class="line"></span><br><span class="line">修复方式结果</span><br></pre></td></tr></table></figure>
+
+
+<p>注意：<br>1.冒号后面有空格。<br>2.英文小括号。<br>3.正文和注脚前都要加空行。</p>
+<h2 id="type-类型"><a href="#type-类型" class="headerlink" title="type 类型"></a>type 类型</h2><p>用于说明 commit 的类别，只允许使用下面13个标识。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">&#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">&#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">&#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">&#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">&#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">&#39;chore&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">&#39;revert&#39;, &#x2F;&#x2F; build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交</span><br><span class="line">&#39;build&#39;, &#x2F;&#x2F; build：打包生产环境代码</span><br><span class="line">&#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">&#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">&#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">&#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br></pre></td></tr></table></figure>
+
+<p>如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。</p>
+<h2 id="scope-影响范围"><a href="#scope-影响范围" class="headerlink" title="scope 影响范围"></a>scope 影响范围</h2><p>可根据项目组需要进行定制化设置，也可不做强制要求</p>
+<h2 id="subject-描述"><a href="#subject-描述" class="headerlink" title="subject 描述"></a>subject 描述</h2><p>subject是 commit 目的的简短描述，不超过50个字符，且结尾不加句号（.）。</p>
+<h2 id="body-详细描述"><a href="#body-详细描述" class="headerlink" title="body 详细描述"></a>body 详细描述</h2><p>body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">此次提交内容包括如下信息：</span><br><span class="line">- 登录为空校验</span><br><span class="line">- 密码错误提示</span><br></pre></td></tr></table></figure>
+<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况。</p>
+<ul>
+<li>不兼容变动（改变解决方案）</li>
+<li>关闭 Issue（回复bug）</li>
+</ul>
+<h1 id="3、使用工具校验commit是否符合规范"><a href="#3、使用工具校验commit是否符合规范" class="headerlink" title="3、使用工具校验commit是否符合规范"></a>3、使用工具校验commit是否符合规范</h1><h2 id="commitlint"><a href="#commitlint" class="headerlink" title="commitlint"></a>commitlint</h2><h3 id="3-1-commitlint安装"><a href="#3-1-commitlint安装" class="headerlink" title="3.1 commitlint安装"></a>3.1 commitlint安装</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; npm 安装</span><br><span class="line">npm install --save-dev @commitlint&#x2F;&#123;cli,config-conventional&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="3-2-生成commitlint-config-js配置文件"><a href="#3-2-生成commitlint-config-js配置文件" class="headerlink" title="3.2 生成commitlint.config.js配置文件"></a>3.2 生成commitlint.config.js配置文件</h2><p>执行echo命令创建配置文件，也可以手动创建配置文件，或者从已有的配置文件进行拷贝。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 项目根目录创建commitlint.config.js</span><br><span class="line">echo &quot;module.exports &#x3D; &#123;extends: [&#39;@commitlint&#x2F;config-conventional&#39;]&#125;&quot; &gt; commitlint.config.js</span><br></pre></td></tr></table></figure>
+
+
+<h2 id="3-3-在commitlint-config-js制定提交message规范"><a href="#3-3-在commitlint-config-js制定提交message规范" class="headerlink" title="3.3 在commitlint.config.js制定提交message规范"></a>3.3 在commitlint.config.js制定提交message规范</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; type(scope?): subject</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; body?</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; footer?</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 继承自默认规则</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;],</span><br><span class="line">  &#x2F;&#x2F; 这里写自定义规则</span><br><span class="line">  rules: &#123;</span><br><span class="line">    &#x2F;&#x2F; 等级 [0 1 2]: 0 不使用规则 1 警告 2 错误</span><br><span class="line">    &#x2F;&#x2F; 启用范围 always|never: 总是或者永不.</span><br><span class="line">    &#x2F;&#x2F; 规则值: 规则对应的值</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 头部（包含type、scope、subject）</span><br><span class="line">    &#39;header-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;],</span><br><span class="line">    &#39;header-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;],</span><br><span class="line">    &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],</span><br><span class="line">    &#39;header-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 提交类型</span><br><span class="line">    &#39;type-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;type-empty&#39;: [2, &#39;never&#39;],</span><br><span class="line">    &#39;type-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;type-min-length&#39;: [0, &#39;always&#39;, 0],</span><br><span class="line">    &#39;type-enum&#39;: [</span><br><span class="line">      2,</span><br><span class="line">      &#39;always&#39;,</span><br><span class="line">      [</span><br><span class="line">        &#39;feat&#39;, &#x2F;&#x2F; feat：新增功能</span><br><span class="line">        &#39;fix&#39;, &#x2F;&#x2F; fix：bug 修复</span><br><span class="line">        &#39;docs&#39;, &#x2F;&#x2F; docs：文档更新</span><br><span class="line">        &#39;style&#39;, &#x2F;&#x2F; style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)</span><br><span class="line">        &#39;refactor&#39;, &#x2F;&#x2F; refactor：重构代码(既没有新增功能，也没有修复 bug)</span><br><span class="line">        &#39;test&#39;, &#x2F;&#x2F; test：新增测试用例或是更新现有测试</span><br><span class="line">        &#39;revert&#39;, &#x2F;&#x2F; revert：回滚某个更早之前的提交</span><br><span class="line">        &#39;build&#39;, &#x2F;&#x2F; build：build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交，打包生产环境代码</span><br><span class="line">        &#39;ci&#39;, &#x2F;&#x2F; ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交</span><br><span class="line">        &#39;merge&#39;, &#x2F;&#x2F; merge：分支合并 Merge branch ? of ?</span><br><span class="line">        &#39;perf&#39;, &#x2F;&#x2F; perf：性能, 体验优化</span><br><span class="line">        &#39;chore&#39; &#x2F;&#x2F; chore：不属于以上类型的其他类型(构建过程或辅助工具的变动)</span><br><span class="line">      ]</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 影响范围</span><br><span class="line">    &#39;scope-case&#39;: [0, &#39;always&#39;, &#39;lower-case&#39;], &#x2F;&#x2F; 书写格式</span><br><span class="line">    &#39;scope-max-length&#39;: [0, &#39;always&#39;, Infinity], &#x2F;&#x2F; 最长</span><br><span class="line">    &#39;scope-min-length&#39;: [0, &#39;always&#39;, 0], &#x2F;&#x2F; 最短</span><br><span class="line">    &#39;scope-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 影响范围：为空|永不</span><br><span class="line">    &#39;scope-enum&#39;: [0, &#39;always&#39;, [&#39;a&#39;, &#39;b&#39;]], &#x2F;&#x2F; 影响范围：给出范围但是不在给定的列表内</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 简介</span><br><span class="line">    &#39;subject-empty&#39;: [2, &#39;never&#39;], &#x2F;&#x2F; 简介不能为空</span><br><span class="line">    &#39;subject-full-stop&#39;: [0, &#39;never&#39;, &#39;.&#39;], &#x2F;&#x2F; 简介结尾以.结束</span><br><span class="line">    &#39;subject-case&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;subject-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;subject-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 正文</span><br><span class="line">    &#39;body-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;body-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;body-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 注脚</span><br><span class="line">    &#39;footer-leading-blank&#39;: [2, &#39;always&#39;],</span><br><span class="line">    &#39;footer-max-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-max-line-length&#39;: [0, &#39;always&#39;, Infinity],</span><br><span class="line">    &#39;footer-min-length&#39;: [0, &#39;always&#39;, 1],</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 其他</span><br><span class="line">    &#39;references-empty&#39;: [0, &#39;never&#39;],</span><br><span class="line">    &#39;signed-off-by&#39;: [0, &#39;always&#39;, &#39;Signed-off-by&#39;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky</p>
+<h2 id="husky"><a href="#husky" class="headerlink" title="husky"></a>husky</h2><h3 id="3-4-husky安装"><a href="#3-4-husky安装" class="headerlink" title="3.4 husky安装"></a>3.4 husky安装</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install husky --save-dev</span><br></pre></td></tr></table></figure>
+<h3 id="3-5-husky-配置"><a href="#3-5-husky-配置" class="headerlink" title="3.5 husky 配置"></a>3.5 husky 配置</h3><p>安装成功后需要在项目下的package.json中配置</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; package.json</span><br><span class="line">&#123;</span><br><span class="line">  &quot;husky&quot;: &#123;</span><br><span class="line">    &quot;hooks&quot;: &#123; &#x2F;&#x2F; husky的钩子</span><br><span class="line">      &quot;pre-commit&quot;: &quot;npm run lint&quot; &#x2F;&#x2F; 提交前进行代码静态校验</span><br><span class="line">      &quot;commit-msg&quot;: &quot;commitlint -E HUSKY_GIT_PARAMS&quot; &#x2F;&#x2F; 进行提交信息格式校验</span><br><span class="line">    &#125;  </span><br><span class="line">  &#125;,</span><br><span class="line">  &quot;scripts&quot;: &#123;&#125;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="3-5-husky-执行测试"><a href="#3-5-husky-执行测试" class="headerlink" title="3.5 husky 执行测试"></a>3.5 husky 执行测试</h3><p>最后我们可以正常的git操作</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;&quot;</span><br></pre></td></tr></table></figure>
+
+<p>git commit的时候会触发commlint。下面演示下不符合规范提交示例：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;thunisoft: abcde&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input:</span><br><span class="line">thunisoft(all): abcde</span><br><span class="line"></span><br><span class="line">✖   type must be one of [feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert] [type-enum]</span><br><span class="line">✖   found 1 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">husky &gt; commit-msg hook failed (add --no-verify to bypass)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>上面的提交看反馈消息得知是type格式没有符合限制的提交类型列表，所以提交失败，虾米啊我们把type改为feat再试一下</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">C:\lixg\git&gt;git commit -m &quot;feat(all): 新功能&quot;</span><br><span class="line"></span><br><span class="line">husky &gt; npm run -s commitmsg (node v8.2.1)</span><br><span class="line"></span><br><span class="line">⧗   input: feat: 新功能</span><br><span class="line">✔   found 0 problems, 0 warnings</span><br><span class="line"></span><br><span class="line">[develop 19dfhe] feat: 新功能</span><br><span class="line"> 1 file changed, 1 insertion(+)</span><br><span class="line"></span><br><span class="line">C:\lixg\git&gt;</span><br></pre></td></tr></table></figure>
+
+<p>修改后格式符合规范，提交成功。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>commitlint <blockquote>
+<p><a href="https://conventional-changelog.github.io/commitlint/#/">https://conventional-changelog.github.io/commitlint/#/</a></p>
+</blockquote>
+</li>
+<li>husky<blockquote>
+<p><a href="https://github.com/typicode/husky">https://github.com/typicode/husky</a></p>
+</blockquote>
+</li>
+<li>阮一峰<blockquote>
+<p><a href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html">http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>GIT</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Hexo在Github发布之后自定义域名的配置</title>
+    <url>/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Hexo在Github发布之后自定义域名的配置"><a href="#Hexo在Github发布之后自定义域名的配置" class="headerlink" title="Hexo在Github发布之后自定义域名的配置"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名的配置</h1><p>进到你的博客发布所在仓库，如：<br><img src="/@attachment/Clipboard_2022-06-09-12-57-48.png"><br>选择<code>Settings</code>，然后是<code>pages</code>，滚动页面找到<code>Custom domain</code>，将你自己的域名绑定进去保存一下就好了。<br><img src="/@attachment/Clipboard_2022-06-09-12-59-28.png"></p>
+<p>在你自己的域名商处用CNAME把你自己的域名指定到你自己的仓库page地址上比如我的就是<code>lixuguang.github.io Public</code>，这样你的<code>GitHub Page</code>就可以通过自己的域名进行访问了。</p>
+<h2 id="Hexo在Github发布之后自定义域名会被清空的问题"><a href="#Hexo在Github发布之后自定义域名会被清空的问题" class="headerlink" title="Hexo在Github发布之后自定义域名会被清空的问题"></a><code>Hexo</code>在<code>Github</code>发布之后自定义域名会被清空的问题</h2><p>使用 <code>GitHub Page</code> 功能将博客托管在了 <code>GitHub</code> 上，并配置 <code>CNAME</code> 将自己的域名解析了过去，但是发现一个问题，每次 <code>hexo deploy</code> 之后，<code>custom domain</code> 会被重置失效。</p>
+<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>在 <code>Hexo</code> 生成的博客的 <code>source</code> 目录下（<strong>注意这个是你的博客源码所在仓库，并不是发布的仓库</strong>）新建一个 <code>CNAME</code> 文件，然后在这个文件中填入你的域名，这样就不会每次发布之后，<code>GitHub Page</code> 里的 <code>custom domain</code> 都被重置掉啦。</p>
+]]></content>
+      <categories>
+        <category>杂七杂八</category>
+        <category>博客技巧</category>
+      </categories>
+      <tags>
+        <tag>Hexo</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Linux目录说明</title>
+    <url>/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="bin："><a href="#bin：" class="headerlink" title="/bin："></a>/bin：</h2><p>bin是Binary的缩写, 这个目录存放着最经常使用的命令。</p>
+<h2 id="boot："><a href="#boot：" class="headerlink" title="/boot："></a>/boot：</h2><p>这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。</p>
+<h2 id="dev-："><a href="#dev-：" class="headerlink" title="/dev ："></a>/dev ：</h2><p>dev是Device(设备)的缩写, 该目录下存放的是Linux的外部设备，在Linux中访问设备的方式和访问文件的方式是相同的。</p>
+<h2 id="etc："><a href="#etc：" class="headerlink" title="/etc："></a>/etc：</h2><p>这个目录用来存放所有的系统管理所需要的配置文件和子目录。</p>
+<h2 id="home："><a href="#home：" class="headerlink" title="/home："></a>/home：</h2><p>用户的主目录，在Linux中，每个用户都有一个自己的目录，一般该目录名是以用户的账号命名的。</p>
+<h2 id="lib："><a href="#lib：" class="headerlink" title="/lib："></a>/lib：</h2><p>这个目录里存放着系统最基本的动态连接共享库，其作用类似于Windows里的DLL文件。几乎所有的应用程序都需要用到这些共享库。</p>
+<h2 id="lost-found："><a href="#lost-found：" class="headerlink" title="/lost+found："></a>/lost+found：</h2><p>这个目录一般情况下是空的，当系统非法关机后，这里就存放了一些文件。</p>
+<h2 id="media-linux"><a href="#media-linux" class="headerlink" title="/media linux"></a>/media linux</h2><p>系统会自动识别一些设备，例如U盘、光驱等等，当识别后，linux会把识别的设备挂载到这个目录下。</p>
+<h2 id="mnt："><a href="#mnt：" class="headerlink" title="/mnt："></a>/mnt：</h2><p>系统提供该目录是为了让用户临时挂载别的文件系统的，我们可以将光驱挂载在/mnt/上，然后进入该目录就可以查看光驱里的内容了。</p>
+<h2 id="opt："><a href="#opt：" class="headerlink" title="/opt："></a>/opt：</h2><p> 这是给主机额外安装软件所摆放的目录。比如你安装一个ORACLE数据库则就可以放到这个目录下。默认是空的。</p>
+<h2 id="proc："><a href="#proc：" class="headerlink" title="/proc："></a>/proc：</h2><p>这个目录是一个虚拟的目录，它是系统内存的映射，我们可以通过直接访问这个目录来获取系统信息。<br>这个目录的内容不在硬盘上而是在内存里，我们也可以直接修改里面的某些文件，比如可以通过下面的命令来屏蔽主机的ping命令，使别人无法ping你的机器：</p>
+<h2 id="root："><a href="#root：" class="headerlink" title="/root："></a>/root：</h2><p>该目录为系统管理员，也称作超级权限者的用户主目录。</p>
+<h2 id="sbin："><a href="#sbin：" class="headerlink" title="/sbin："></a>/sbin：</h2><p>s就是Super User的意思，这里存放的是系统管理员使用的系统管理程序。</p>
+<h2 id="selinux："><a href="#selinux：" class="headerlink" title="/selinux："></a>/selinux：</h2><p> 这个目录是Redhat/CentOS所特有的目录，Selinux是一个安全机制，类似于windows的防火墙，但是这套机制比较复杂，这个目录就是存放selinux相关的文件的。</p>
+<h2 id="srv："><a href="#srv：" class="headerlink" title="/srv："></a>/srv：</h2><p> 该目录存放一些服务启动之后需要提取的数据。</p>
+<h2 id="sys："><a href="#sys：" class="headerlink" title="/sys："></a>/sys：</h2><p> 这是linux2.6内核的一个很大的变化。该目录下安装了2.6内核中新出现的一个文件系统 sysfs 。</p>
+<p>sysfs文件系统集成了下面3种文件系统的信息：针对进程信息的proc文件系统、针对设备的devfs文件系统以及针对伪终端的devpts文件系统。<br>该文件系统是内核设备树的一个直观反映。</p>
+<p>当一个内核对象被创建的时候，对应的文件和目录也在内核对象子系统中被创建。</p>
+<h2 id="tmp："><a href="#tmp：" class="headerlink" title="/tmp："></a>/tmp：</h2><p>这个目录是用来存放一些临时文件的。</p>
+<h2 id="usr："><a href="#usr：" class="headerlink" title="/usr："></a>/usr：</h2><p> 这是一个非常重要的目录，用户的很多应用程序和文件都放在这个目录下，类似与windows下的program files目录。</p>
+<h2 id="usr-bin："><a href="#usr-bin：" class="headerlink" title="/usr/bin："></a>/usr/bin：</h2><p>系统用户使用的应用程序。</p>
+<h2 id="usr-sbin："><a href="#usr-sbin：" class="headerlink" title="/usr/sbin："></a>/usr/sbin：</h2><p>超级用户使用的比较高级的管理程序和系统守护程序。</p>
+<h2 id="usr-src："><a href="#usr-src：" class="headerlink" title="/usr/src："></a>/usr/src：</h2><p>内核源代码默认的放置目录。</p>
+<h2 id="var："><a href="#var：" class="headerlink" title="/var："></a>/var：</h2><p>这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。</p>
+<p>在linux系统中，有几个目录是比较重要的，平时需要注意不要误删除或者随意更改内部文件。<br>系统上跑了很多程序，那么每个程序都会有相应的日志产生，而这些日志就被记录到这个目录下，具体在/var/log 目录下，另外mail的预设放置也是在这里。</p>
+<h2 id="etc：-1"><a href="#etc：-1" class="headerlink" title="/etc："></a>/etc：</h2><p>上边也提到了，这个是系统中的配置文件，如果你更改了该目录下的某个文件可能会导致系统不能启动。</p>
+<h2 id="bin-sbin-usr-bin-usr-sbin"><a href="#bin-sbin-usr-bin-usr-sbin" class="headerlink" title="/bin, /sbin, /usr/bin, /usr/sbin:"></a>/bin, /sbin, /usr/bin, /usr/sbin:</h2><p>这是系统预设的执行文件的放置目录，比如 ls 就是在/bin/ls 目录下的。</p>
+<p>值得提出的是，/bin, /usr/bin 是给系统用户使用的指令（除root外的普通用户），而/sbin, /usr/sbin 则是给root使用的指令。</p>
+]]></content>
+      <categories>
+        <category>Linux</category>
+      </categories>
+      <tags>
+        <tag>Linux</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>在Docker Compose中配置网络</title>
+    <url>/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Network-in-Compose-在Docker-Compose中配置网络"><a href="#Network-in-Compose-在Docker-Compose中配置网络" class="headerlink" title="Network in Compose 在Docker Compose中配置网络"></a>Network in Compose 在Docker Compose中配置网络</h1><h2 id=""><a href="#" class="headerlink" title=""></a></h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">version: &quot;3.9&quot;</span><br><span class="line"></span><br><span class="line">services:</span><br><span class="line">  proxy:</span><br><span class="line">    build: .&#x2F;proxy</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  app:</span><br><span class="line">    build: .&#x2F;app</span><br><span class="line">    networks:</span><br><span class="line">      - actsnetwork</span><br><span class="line">  db:</span><br><span class="line">    image: postgres</span><br><span class="line">    networks:</span><br><span class="line">      - testnetwork</span><br><span class="line"></span><br><span class="line"> networks:</span><br><span class="line">	actsnetwork:</span><br><span class="line">		name: testnetwork</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>虚拟化</category>
+        <category>Docker Compose</category>
+      </categories>
+      <tags>
+        <tag>Docker Compose</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Nginx中的超时设置</title>
+    <url>/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx中的超时设置"><a href="#Nginx中的超时设置" class="headerlink" title="Nginx中的超时设置"></a>Nginx中的超时设置</h1><h2 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h2><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h2><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h2 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h2><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+<h2 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h2><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h2><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h2 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h2><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h2 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h2><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h2 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h2><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+]]></content>
+      <categories>
+        <category>Web服务器</category>
+        <category>Nginx</category>
+      </categories>
+      <tags>
+        <tag>超时设置</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Nginx指令</title>
+    <url>/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Nginx指令"><a href="#Nginx指令" class="headerlink" title="Nginx指令"></a>Nginx指令</h1><figure class="highlight cmd"><table><tr><td class="code"><pre><span class="line">#启动Nginx</span><br><span class="line"><span class="built_in">start</span> nginx</span><br><span class="line"></span><br><span class="line">#重启Nginx</span><br><span class="line">nginx -s reopen </span><br><span class="line"></span><br><span class="line">#重新加载Nginx配置文件，然后以优雅的方式重启Nginx</span><br><span class="line">nginx -s reload</span><br><span class="line"></span><br><span class="line">#强制停止Nginx服务</span><br><span class="line">nginx -s stop</span><br><span class="line"></span><br><span class="line">#优雅地停止Nginx服务（即处理完所有请求后再停止服务）</span><br><span class="line">nginx -s quit</span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#显示版本信息并退出</span><br><span class="line">nginx -v </span><br><span class="line"></span><br><span class="line">#显示版本和配置选项信息，然后退出</span><br><span class="line">nginx -V </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，然后退出</span><br><span class="line">nginx -t </span><br><span class="line"></span><br><span class="line">#检测配置文件是否有语法错误，转储并退出</span><br><span class="line">nginx -T </span><br><span class="line"></span><br><span class="line">#在检测配置文件期间屏蔽非错误信息</span><br><span class="line">nginx -q </span><br><span class="line"></span><br><span class="line">#打开帮助信息</span><br><span class="line">nginx -?,-h </span><br><span class="line"></span><br><span class="line">#设置前缀路径(默认是:/usr/share/nginx/)</span><br><span class="line">nginx -p prefix </span><br><span class="line"></span><br><span class="line">#设置配置文件(默认是:/etc/nginx/nginx.conf)</span><br><span class="line">nginx -c filename </span><br><span class="line"></span><br><span class="line">#设置配置文件外的全局指令</span><br><span class="line">nginx -g directives </span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Web服务器</category>
+        <category>Nginx</category>
+      </categories>
+      <tags>
+        <tag>Nginx</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>在 Oracle Linux 中安装 Docker</title>
+    <url>/2022/08/02/Oracle-Linux-install-Docker/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos"><a href="#Oracle-Linux-install-Docker-https-docs-docker-com-engine-install-centos" class="headerlink" title="Oracle Linux install Docker(https://docs.docker.com/engine/install/centos/)"></a>Oracle Linux install Docker(<a href="https://docs.docker.com/engine/install/centos/">https://docs.docker.com/engine/install/centos/</a>)</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 查看</span><br><span class="line">systemctl list-units</span><br><span class="line"></span><br><span class="line">sudo yum remove docker \</span><br><span class="line">                  docker-client \</span><br><span class="line">                  docker-client-latest \</span><br><span class="line">                  docker-common \</span><br><span class="line">                  docker-latest \</span><br><span class="line">                  docker-latest-logrotate \</span><br><span class="line">                  docker-logrotate \</span><br><span class="line">                  docker-engine</span><br><span class="line"></span><br><span class="line">sudo yum-config-manager --add-repo https:&#x2F;&#x2F;download.docker.com&#x2F;linux&#x2F;centos&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">sudo yum install -y yum-utils</span><br><span class="line"></span><br><span class="line">sudo yum -y install docker-ce-20.10.17 docker-ce-cli-20.10.17 containerd.io-1.6.6</span><br><span class="line"></span><br><span class="line">sudo vi &#x2F;etc&#x2F;yum.repos.d&#x2F;docker-ce.repo</span><br><span class="line"></span><br><span class="line">[centos-extras]</span><br><span class="line">name&#x3D;Centos extras - $basearch</span><br><span class="line">baseurl&#x3D;http:&#x2F;&#x2F;mirror.centos.org&#x2F;centos&#x2F;7&#x2F;extras&#x2F;x86_64</span><br><span class="line">enabled&#x3D;1</span><br><span class="line">gpgcheck&#x3D;1</span><br><span class="line">gpgkey&#x3D;http:&#x2F;&#x2F;centos.org&#x2F;keys&#x2F;RPM-GPG-KEY-CentOS-7</span><br><span class="line"></span><br><span class="line">sudo yum -y install fuse-overlayfs slirp4netns</span><br><span class="line"></span><br><span class="line"># sudo chmod 777 docker-ce.repo</span><br><span class="line"></span><br><span class="line"># yum list docker-ce --showduplicates | sort -r</span><br><span class="line"></span><br><span class="line">sudo systemctl start docker</span><br><span class="line"></span><br><span class="line">sudo docker run hello-world</span><br><span class="line"></span><br><span class="line">sudo yum install &#x2F;path&#x2F;to&#x2F;package.rpm</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo docker run hello-world</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>Linux</category>
+        <category>Oracle</category>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>Docker</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>OracleLinux内核从uek切换到uek</title>
+    <url>/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/</url>
+    <content><![CDATA[<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#&#x2F;boot&#x2F;grub&#x2F;grub.conf 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub</span><br><span class="line">grub-mkconfig -o &#x2F;boot&#x2F;grub&#x2F;grub.conf</span><br><span class="line"> </span><br><span class="line">#&#x2F;boot&#x2F;grub2&#x2F;grub.cfg 缺失：</span><br><span class="line"> </span><br><span class="line">yum install -y grub2</span><br><span class="line">grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">uname -a</span><br><span class="line">sudo grep ^menuentry &#x2F;boot&#x2F;grub2&#x2F;grub.cfg | awk -F\&#39; &#39;&#123;print $2&#125;&#39; | nl -v0</span><br><span class="line"></span><br><span class="line">sudo grub2-editenv list</span><br><span class="line"></span><br><span class="line">sudo grep GRUB_DEFAULT &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo vim &#x2F;etc&#x2F;default&#x2F;grub</span><br><span class="line"></span><br><span class="line">sudo grub2-set-default 1</span><br><span class="line"></span><br><span class="line">sudo grub2-mkconfig -o &#x2F;boot&#x2F;grub2&#x2F;grub.cfg</span><br><span class="line"></span><br><span class="line">sudo dracut --force</span><br><span class="line"></span><br><span class="line">sudo reboot</span><br><span class="line"></span><br><span class="line">uname -a</span><br></pre></td></tr></table></figure>]]></content>
+      <categories>
+        <category>OracleLinux</category>
+      </categories>
+      <tags>
+        <tag>kernel</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Postgresql绿色版使用</title>
+    <url>/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/</url>
+    <content><![CDATA[<h1 id="初始化数据库"><a href="#初始化数据库" class="headerlink" title="初始化数据库"></a>初始化数据库</h1><p>c:\pgsql\bin\initdb.exe -D c:\pgsql\data -E UTF8</p>
+<h1 id="注册表"><a href="#注册表" class="headerlink" title="注册表"></a>注册表</h1><p>c:\pgsql\bin\pg_ctl register -N postgres -D c:\pgsql\data</p>
+<h1 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h1><p>c:\pgsql\bin\postgres -D c:\pgsql\data</p>
+]]></content>
+      <categories>
+        <category>Database</category>
+        <category>Postgresql</category>
+      </categories>
+      <tags>
+        <tag>Postgresql</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Restful API 的设计规范.md</title>
+    <url>/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="1-URI"><a href="#1-URI" class="headerlink" title="1. URI"></a>1. URI</h1><p>URI 表示资源，资源一般对应服务器端领域模型中的实体类。</p>
+<h2 id="URI规范"><a href="#URI规范" class="headerlink" title="URI规范"></a>URI规范</h2><ol>
+<li>不用大写；</li>
+<li>用中杠-不用下杠_；</li>
+<li>参数列表要encode；</li>
+<li>URI中的名词表示资源集合，使用复数形式。</li>
+</ol>
+<h2 id="资源集合-vs-单个资源"><a href="#资源集合-vs-单个资源" class="headerlink" title="资源集合 vs 单个资源"></a>资源集合 vs 单个资源</h2><p>URI表示资源的两种方式：资源集合、单个资源。</p>
+<p>资源集合：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;zoos &#x2F;&#x2F;所有动物园</span><br><span class="line">&#x2F;zoos&#x2F;1&#x2F;animals &#x2F;&#x2F;id为1的动物园中的所有动物</span><br></pre></td></tr></table></figure>
+<p>单个资源：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;zoos&#x2F;1 &#x2F;&#x2F;id为1的动物园</span><br><span class="line">&#x2F;zoos&#x2F;1;2;3 &#x2F;&#x2F;id为1，2，3的动物园</span><br></pre></td></tr></table></figure>
+<h2 id="避免层级过深的URI"><a href="#避免层级过深的URI" class="headerlink" title="避免层级过深的URI"></a>避免层级过深的URI</h2><p><code>/</code>在url中表达层级，用于<strong>按实体关联关系进行对象导航</strong>，一般根据id导航。</p>
+<p>过深的导航容易导致url膨胀，不易维护，如 <code>GET /zoos/1/areas/3/animals/4</code>，尽量使用查询参数代替路径中的实体导航，如<code>GET /animals?zoo=1&amp;area=3</code>；</p>
+<h2 id="对Composite资源的访问"><a href="#对Composite资源的访问" class="headerlink" title="对Composite资源的访问"></a>对Composite资源的访问</h2><p>服务器端的组合实体必须在uri中通过父实体的id导航访问。</p>
+<blockquote>
+<p>组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses</p>
+</blockquote>
+<h1 id="2-Request"><a href="#2-Request" class="headerlink" title="2. Request"></a>2. Request</h1><h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><p>通过标准HTTP方法对资源CRUD：</p>
+<p>GET：查询</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GET &#x2F;zoos</span><br><span class="line">GET &#x2F;zoos&#x2F;1</span><br><span class="line">GET &#x2F;zoos&#x2F;1&#x2F;employees</span><br></pre></td></tr></table></figure>
+
+
+<p>POST：创建单个资源。<strong>POST一般向“资源集合”型uri发起</strong></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">POST &#x2F;animals  &#x2F;&#x2F;新增动物</span><br><span class="line">POST &#x2F;zoos&#x2F;1&#x2F;employees &#x2F;&#x2F;为id为1的动物园雇佣员工</span><br></pre></td></tr></table></figure>
+
+<p>PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。<strong>PUT/PATCH一般向“单个资源”型uri发</strong>起</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">PUT &#x2F;animals&#x2F;1</span><br><span class="line">PUT &#x2F;zoos&#x2F;1</span><br></pre></td></tr></table></figure>
+
+<p>DELETE：删除</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;employees&#x2F;2;4;5</span><br><span class="line">DELETE &#x2F;zoos&#x2F;1&#x2F;animals  &#x2F;&#x2F;删除id为1的动物园内的所有动物</span><br></pre></td></tr></table></figure>
+<p>HEAD / OPTION 用的不多，就不多解释了。</p>
+<h2 id="安全性和幂等性"><a href="#安全性和幂等性" class="headerlink" title="安全性和幂等性"></a>安全性和幂等性</h2><ol>
+<li><strong>安全性</strong>：不会改变资源状态，可以理解为只读的；</li>
+<li><strong>幂等性</strong>：执行1次和执行N次，对资源状态改变的效果是等价的。</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>安全性</th>
+<th>幂等性</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>√</td>
+<td>√</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>×</td>
+<td>×</td>
+</tr>
+<tr>
+<td>PUT</td>
+<td>×</td>
+<td>√</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>×</td>
+<td>√</td>
+</tr>
+</tbody></table>
+<p>安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。</p>
+<h2 id="复杂查询"><a href="#复杂查询" class="headerlink" title="复杂查询"></a>复杂查询</h2><p>查询可以捎带以下参数：</p>
+<table>
+<thead>
+<tr>
+<th>.</th>
+<th>示例</th>
+<th>备注</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>过滤条件</td>
+<td><code>type=1&amp;age=16</code></td>
+<td>允许一定的uri冗余，如<code>/zoos/1</code>与/<code>zoos?id=1</code></td>
+</tr>
+<tr>
+<td>排序</td>
+<td><code>?sort=age,desc</code></td>
+<td></td>
+</tr>
+<tr>
+<td>投影</td>
+<td><code>?whitelist=id,name,email</code></td>
+<td></td>
+</tr>
+<tr>
+<td>分页</td>
+<td><code>?limit=10&amp;offset=3</code></td>
+<td></td>
+</tr>
+</tbody></table>
+<h2 id="Bookmarker"><a href="#Bookmarker" class="headerlink" title="Bookmarker"></a>Bookmarker</h2><p>经常使用的、复杂的查询标签化，降低维护成本。</p>
+<p>如：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GET &#x2F;trades?status&#x3D;closed&amp;sort&#x3D;created,desc</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>快捷方式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GET &#x2F;trades#recently-closed</span><br><span class="line">&#x2F;&#x2F; 或者</span><br><span class="line">GET &#x2F;trades&#x2F;recently-closed</span><br></pre></td></tr></table></figure>
+
+<h2 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h2><p>只用以下常见的3种body format：</p>
+<ol>
+<li>Content-Type: application/json</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">POST &#x2F;v1&#x2F;animal HTTP&#x2F;1.1</span><br><span class="line">Host: api.example.org</span><br><span class="line">Accept: application&#x2F;json</span><br><span class="line">Content-Type: application&#x2F;json</span><br><span class="line">Content-Length: 24</span><br><span class="line"></span><br><span class="line">&#123;   </span><br><span class="line">  &quot;name&quot;: &quot;Gir&quot;,</span><br><span class="line">  &quot;animalType&quot;: &quot;12&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<ol start="2">
+<li>Content-Type: application/x-www-form-urlencoded (浏览器POST表单用的格式)</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">POST &#x2F;login HTTP&#x2F;1.1</span><br><span class="line">Host: example.com</span><br><span class="line">Content-Length: 31</span><br><span class="line">Accept: text&#x2F;html</span><br><span class="line">Content-Type: application&#x2F;x-www-form-urlencoded</span><br><span class="line"></span><br><span class="line">username&#x3D;root&amp;password&#x3D;Zion0101</span><br></pre></td></tr></table></figure>
+
+<ol start="3">
+<li>Content-Type: multipart/form-data; boundary=—-RANDOM_jDMUxq4Ot5 (表单有文件上传时的格式)</li>
+</ol>
+<h1 id="6-Response"><a href="#6-Response" class="headerlink" title="6. Response"></a>6. Response</h1><ol>
+<li>不要包装：<br>response 的 body 直接就是数据，不要做多余的包装。</li>
+</ol>
+<p><strong>错误示例</strong>：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;success&quot;:true,</span><br><span class="line">    &quot;data&quot;:&#123;&quot;id&quot;:1,&quot;name&quot;:&quot;xiaotuan&quot;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>各HTTP方法成功处理后的数据格式：</p>
+<table>
+<thead>
+<tr>
+<th>·</th>
+<th>response 格式</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>GET</td>
+<td>单个对象、集合</td>
+</tr>
+<tr>
+<td>POST</td>
+<td>新增成功的对象</td>
+</tr>
+<tr>
+<td>PUT/PATCH</td>
+<td>更新成功的对象</td>
+</tr>
+<tr>
+<td>DELETE</td>
+<td>空</td>
+</tr>
+</tbody></table>
+<ol start="3">
+<li><p>json格式的约定：</p>
+<ol>
+<li>时间用长整形(毫秒数)，客户端自己按需解析（moment.js）</li>
+<li>不传null字段</li>
+</ol>
+</li>
+</ol>
+<h2 id="分页response"><a href="#分页response" class="headerlink" title="分页response"></a>分页response</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;paging&quot;:&#123;&quot;limit&quot;:10,&quot;offset&quot;:0,&quot;total&quot;:729&#125;,</span><br><span class="line">    &quot;data&quot;:[&#123;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h1 id="7-错误处理"><a href="#7-错误处理" class="headerlink" title="7. 错误处理"></a>7. 错误处理</h1><ol>
+<li>不要发生了错误但给2xx响应，客户端可能会缓存成功的http请求；</li>
+<li>正确设置http状态码，不要自定义；</li>
+<li>Response body 提供 <ol>
+<li>错误的代码（日志/问题追查）；</li>
+<li>错误的描述文本（展示给用户）。</li>
+</ol>
+</li>
+</ol>
+<p>对第三点的实现稍微多说一点：</p>
+<p>Java 服务器端一般用异常表示 RESTful API 的错误。API 可能抛出两类异常：<strong>业务异常</strong>和<strong>非业务异常</strong>。</p>
+<p><strong>业务异常</strong>由自己的业务代码抛出，表示一个用例的前置条件不满足、业务规则冲突等，比如参数校验不通过、权限校验失败。</p>
+<p><strong>非业务类异</strong>常表示不在预期内的问题，通常由类库、框架抛出，或由于自己的代码逻辑错误导致，比如数据库连接失败、空指针异常、除0错误等等。</p>
+<p>业务类异常必须提供2种信息：</p>
+<ol>
+<li>如果抛出该类异常，HTTP 响应状态码应该设成什么；</li>
+<li>异常的文本描述；</li>
+</ol>
+<p>在Controller层使用统一的异常拦截器：</p>
+<ol>
+<li>设置 HTTP 响应状态码：对业务类异常，用它指定的 HTTP code；对非业务类异常，统一500；</li>
+<li>Response Body 的错误码：异常类名</li>
+<li>Response Body 的错误描述：对业务类异常，用它指定的错误文本；对非业务类异常，线上可以统一文案如“服务器端错误，请稍后再试”，开发或测试环境中用异常的 stacktrace，服务器端提供该行为的开关。</li>
+</ol>
+<p>常用的http状态码及使用场景：</p>
+<table>
+<thead>
+<tr>
+<th>状态码</th>
+<th>使用场景</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>400 bad request</td>
+<td>常用在参数校验</td>
+</tr>
+<tr>
+<td>401 unauthorized</td>
+<td>未经验证的用户，常见于未登录。如果经过验证后依然没权限，应该 403（即 authentication 和 authorization 的区别）。</td>
+</tr>
+<tr>
+<td>403 forbidden</td>
+<td>无权限</td>
+</tr>
+<tr>
+<td>404 not found</td>
+<td>资源不存在</td>
+</tr>
+<tr>
+<td>500 internal server error</td>
+<td>非业务类异常</td>
+</tr>
+<tr>
+<td>503 service unavaliable</td>
+<td>由容器抛出，自己的代码不要抛这个异常</td>
+</tr>
+</tbody></table>
+<h1 id="8-服务型资源"><a href="#8-服务型资源" class="headerlink" title="8. 服务型资源"></a>8. 服务型资源</h1><p>除了资源简单的CRUD，服务器端经常还会提供其他服务，这些服务无法直接用上面提到的URI映射。如：</p>
+<ol>
+<li>按关键字搜索；</li>
+<li>计算地球上两点间的距离；</li>
+<li>批量向用户推送消息;</li>
+</ol>
+<p>可以把这些服务看成资源，计算的结果是资源的presentation，按服务属性选择合适的HTTP方法。</p>
+<p>例：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GET &#x2F;search?q&#x3D;filter?category&#x3D;file  搜索</span><br><span class="line">GET &#x2F;distance-calc?lats&#x3D;47.480&amp;lngs&#x3D;-122.389&amp;late&#x3D;37.108&amp;lnge&#x3D;-122.448</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br></pre></td></tr></table></figure>
+<h1 id="9-异步任务"><a href="#9-异步任务" class="headerlink" title="9. 异步任务"></a>9. 异步任务</h1><p>对耗时的异步任务，服务器端接受客户端传递的参数后，应返回创建成功的任务资源，其中包含了任务的执行状态。客户端可以轮训该任务获得最新的执行进度。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;running&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;,&quot;status&quot;:&quot;success&quot;&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果任务的执行状态包括较多信息，可以把“执行状态”抽象成<strong>组合资源</strong>，客户端查询该状态资源了解任务的执行情况。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 提交任务：</span><br><span class="line">POST &#x2F;batch-publish-msg</span><br><span class="line">[&#123;&quot;from&quot;:0,&quot;to&quot;:1,&quot;text&quot;:&quot;abc&quot;&#125;,&#123;&#125;,&#123;&#125;...]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 返回：</span><br><span class="line">&#123;&quot;taskId&quot;:3,&quot;createBy&quot;:&quot;Anonymous&quot;&#125;</span><br><span class="line"></span><br><span class="line">GET &#x2F;task&#x2F;3&#x2F;status</span><br><span class="line">&#123;&quot;progress&quot;:&quot;50%&quot;,&quot;total&quot;:18,&quot;success&quot;:8,&quot;fail&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h1 id="10-API的演进"><a href="#10-API的演进" class="headerlink" title="10. API的演进"></a>10. API的演进</h1><h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>常见的三种方式：</p>
+<ol>
+<li>在uri中放版本信息：<code>GET /v1/users/1</code></li>
+<li>Accept Header：<code>Accept: application/json+v1</code></li>
+<li>自定义 Header：<code>X-Api-Version: 1</code></li>
+</ol>
+<p>用第一种，虽然没有那么优雅，但最明显最方便。</p>
+<h2 id="URI失效"><a href="#URI失效" class="headerlink" title="URI失效"></a>URI失效</h2><p>随着系统发展，总有一些API失效或者迁移，对失效的API，返回404 not found 或 410 gone；对迁移的API，返回 301 重定向。</p>
+<h1 id="11-安全"><a href="#11-安全" class="headerlink" title="11. 安全"></a>11. 安全</h1><p>这个不熟，接触到的时候再说。</p>
+<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><ul>
+<li>&lt; RESTful Web Services Cookbook &gt;</li>
+<li>Consumer-Centric API Design</li>
+<li>RESTful Best Practices</li>
+</ul>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>Restful API</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>http_stub_status_module Nginx的性能模块</title>
+    <url>/2022/06/09/http_stub_status_module/</url>
+    <content><![CDATA[<p>ngx_http_stub_status_module 是一个 Nginx 的内置 模块，可以提供 Nginx 的简单统计信息。默认情况下这个模块是不被编译进来的，所以在编译 Nginx 时要指定加载该模块：</p>
+<figure class="highlight cmd"><table><tr><td class="code"><pre><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+<h2 id="查看是否安装"><a href="#查看是否安装" class="headerlink" title="查看是否安装"></a>查看是否安装</h2><figure class="highlight cmd"><table><tr><td class="code"><pre><span class="line">// 查看nginx版本及安装了那些模块</span><br><span class="line">nginx -V</span><br><span class="line"></span><br><span class="line">// 如果安装了的话会显示下面的信息</span><br><span class="line">--with-http_stub_status_module</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置使用"><a href="#配置使用" class="headerlink" title="配置使用"></a>配置使用</h2><p>nginx.conf配置文件中进行如下配置</p>
+<figure class="highlight cmd"><table><tr><td class="code"><pre><span class="line">location /ngx_status &#123;</span><br><span class="line">            stub_status on; // 设置开启性能模块</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
+<p>通过浏览器访问 <a href="http://localhost/ngx_status">http://localhost/ngx_status</a> 就能看到你的nginx服务性能监控画面了<br><img src="https://user-images.githubusercontent.com/4262121/172983420-82b23fe2-eb5a-48c8-a637-4dfa2b846890.png" alt="image"></p>
+<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><ul>
+<li>第一行：Active connections：活动连接数</li>
+<li>第二三行：Server accepts handled requests：（三个数字分别代表）总共处理的连接数，成功握手的连接数量，处理的请求数（正常情况下握手和连接数是相等的，表示没有丢失）</li>
+<li>第四行：<ul>
+<li>Reading: Nginx 读取到客户端的Header信息数</li>
+<li>Writing: Nginx 返回给客户端的Header信息数</li>
+<li>Waiting: 开启keep-alive的情况下,这个值等于 active – (reading + writing),意思就是Nginx已经处理完成,正在等候下一次请求指令的驻留连接（在nginx开启了keep-alive,也就是长连接的情况下，客户端跟服务端建立了连接但是没有读写操作的空闲状态）</li>
+</ul>
+</li>
+</ul>
+<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2><ul>
+<li>可以简单的用脚本做监控</li>
+<li>可以用开源工具，zabbix，prometheus等去采集nginx的统计信息，做监控和历史数据采集</li>
+</ul>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Web服务器</category>
+        <category>Nginx</category>
+      </categories>
+      <tags>
+        <tag>Nginx</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>在linux之间传输文件的命令scp</title>
+    <url>/2022/08/02/linux-scp/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这里假设要从Linux服务器A中把文件 file.txt 传输到Linux服务器B，该怎么做，这里就可以用scp实现<br>为了能够成功的传输文件，需要做到以下几点：</p>
+<ol>
+<li>A需要知道要传输的的文件本地的路径</li>
+<li>A为了往B传输文件，所以需要知道B的访问权限，因此需要B的访问地址，账号和私钥</li>
+<li>目标路径</li>
+<li>因为Linux权限管理的要求，私钥的访问权限需要设定为600</li>
+</ol>
+<p>当然还有一点前提是A和B两台服务器之间本身是可以通信的<br>知道以上信息便可以进行文件传输</p>
+<h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>现在假设</p>
+<ol>
+<li>A要往B传输的文件在A的如下目录：/tmp/transfer/file.txt</li>
+<li>B的访问地址是 192.168.31.31 访问用户名是 testuser 用到的key上传到了A的如下目录： /tmp/ssh/test.key</li>
+<li>目标路径为B的如下目录： /tmp/test<br>知道上面信息后我们来创建命令。</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">chomd 600 &#x2F;tmp&#x2F;ssh&#x2F;test.key</span><br><span class="line">scp -i &#x2F;tmp&#x2F;ssh&#x2F;test.key &#x2F;tmp&#x2F;transfer&#x2F;file.txt testuser@192.168.31.31 &#x2F;tmp&#x2F;test</span><br></pre></td></tr></table></figure>
+
+<p>通过上面的命令即可实现从A服务器传输文件到B服务器了。</p>
+]]></content>
+      <categories>
+        <category>Linux</category>
+      </categories>
+      <tags>
+        <tag>scp</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>nginx中的超时设置</title>
+    <url>/2022/06/30/nginx-timeout/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="nginx中的超时设置"><a href="#nginx中的超时设置" class="headerlink" title="nginx中的超时设置"></a>nginx中的超时设置</h1><p>Nginx主要有四类超时设置：<strong>客户端超时设置</strong>、<strong>DNS解析超时设置</strong>、<strong>代理超时设置</strong>，如果使用ngx_lua，则还有<strong>lua相关的超时</strong>设置。</p>
+<h2 id="客户端超时设置"><a href="#客户端超时设置" class="headerlink" title="客户端超时设置"></a>客户端超时设置</h2><p>对于客户端超时主要设置有<strong>读取请求头超时时间</strong>、<strong>读取请求体超时时间</strong>、<strong>发送响应超时时间</strong>、<strong>长连接超时时间</strong>。通过客户端超时设置避免客户端恶意或者网络状况不佳造成连接长期占用，影响服务端的可处理的能力。</p>
+<h3 id="client-header-timeout-指定等待client发送一个请求头的超时时间"><a href="#client-header-timeout-指定等待client发送一个请求头的超时时间" class="headerlink" title="client_header_timeout  指定等待client发送一个请求头的超时时间"></a>client_header_timeout  指定等待client发送一个请求头的超时时间</h3><ul>
+<li>语法: client_header_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server</li>
+<li>说明: 指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1）.仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="client-body-timeout-该指令设置请求体（request-body）的读超时时间"><a href="#client-body-timeout-该指令设置请求体（request-body）的读超时时间" class="headerlink" title="client_body_timeout   该指令设置请求体（request body）的读超时时间"></a>client_body_timeout   该指令设置请求体（request body）的读超时时间</h3><ul>
+<li>语法: client_body_timeout time</li>
+<li>默认值: 60s</li>
+<li>上下文: http server location</li>
+<li>说明: 该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)</li>
+</ul>
+<h3 id="send-timeout-time"><a href="#send-timeout-time" class="headerlink" title="send_timeout time"></a>send_timeout time</h3><p>设置发送响应到客户端的超时时间，默认为60s，此超时时间指的也是两次成功写操作间隔时间，而不是发送整个响应的超时时间。如果在此超时时间内客户端没有接收任何响应，则Nginx关闭此连接。</p>
+<h3 id="keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间"><a href="#keepalive-timeout-第一个参数指定了与client的keep-alive连接超时时间" class="headerlink" title="keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间"></a>keepalive_timeout 第一个参数指定了与client的keep-alive连接超时时间</h3><ul>
+<li><p>语法: keepalive_timeout timeout [ header_timeout ]</p>
+</li>
+<li><p>默认值: 75s</p>
+</li>
+<li><p>上下文: http server location</p>
+</li>
+<li><p>说明: 第一个参数指定了与client的keep-alive连接超时时间。服务器将会在这个时间后关闭连接。可选的第二个参数指定了在响应头Keep-Alive: timeout=time中的time值。这个头能够让一些浏览器主动关闭连接，这样服务器就不必要去关闭连接了。没有这个参数，nginx不会发送Keep-Alive响应头（尽管并不是由这个头来决定连接是否“keep-alive”）<br>两个参数的值可并不相同</p>
+<ul>
+<li>注意不同浏览器怎么处理“keep-alive”头</li>
+<li>MSIE和Opera忽略掉”Keep-Alive: timeout=<N>“ header.</li>
+<li>MSIE保持连接大约60-65秒，然后发送TCP RST</li>
+<li>Opera永久保持长连接</li>
+<li>Mozilla keeps the connection alive for N plus about 1-10 seconds.</li>
+<li>Konqueror保持长连接N秒</li>
+</ul>
+</li>
+</ul>
+<h2 id="DNS解析超时设置"><a href="#DNS解析超时设置" class="headerlink" title="DNS解析超时设置"></a>DNS解析超时设置</h2><h3 id="resolver-timeout-设置DNS解析超时时间"><a href="#resolver-timeout-设置DNS解析超时时间" class="headerlink" title="resolver_timeout 设置DNS解析超时时间"></a>resolver_timeout 设置DNS解析超时时间</h3><ul>
+<li>语法 resolver_timeout time </li>
+<li>默认值 30s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置DNS解析超时时间</li>
+</ul>
+<h2 id="代理超时设置"><a href="#代理超时设置" class="headerlink" title="代理超时设置"></a>代理超时设置</h2><h3 id="proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒"><a href="#proxy-connect-timeout-设置与upstream-server的连接超时时间，不能超过75秒" class="headerlink" title="proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒"></a>proxy_connect_timeout 设置与upstream server的连接超时时间，不能超过75秒</h3><ul>
+<li>语法 proxy_connect_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与upstream server的连接超时时间，有必要记住，这个超时不能超过75秒。<br>这个不是等待后端返回页面的时间，那是由proxy_read_timeout声明的。如果你的upstream服务器起来了，但是hanging住了（例如，没有足够的线程处理请求，所以把你的请求放到请求池里稍后处理），那么这个声明是没有用的，由于与upstream服务器的连接已经建立了。</li>
+</ul>
+<h3 id="proxy-read-timeout-设置与代理服务器的读超时时间"><a href="#proxy-read-timeout-设置与代理服务器的读超时时间" class="headerlink" title="proxy_read_timeout 设置与代理服务器的读超时时间"></a>proxy_read_timeout 设置与代理服务器的读超时时间</h3><ul>
+<li>语法 proxy_read_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间，而是两次reading操作的时间。</li>
+</ul>
+<h3 id="proxy-send-timeout-设置发送请求给upstream服务器的超时时间"><a href="#proxy-send-timeout-设置发送请求给upstream服务器的超时时间" class="headerlink" title="proxy_send_timeout 设置发送请求给upstream服务器的超时时间"></a>proxy_send_timeout 设置发送请求给upstream服务器的超时时间</h3><ul>
+<li>语法 proxy_send_timeout time </li>
+<li>默认值 60s</li>
+<li>上下文 http server location</li>
+<li>说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到新的数据，nginx会关闭连接</li>
+</ul>
+<h4 id="失败重试机制设置。"><a href="#失败重试机制设置。" class="headerlink" title="失败重试机制设置。"></a>失败重试机制设置。</h4><p>proxy_next_upstream error | timeout | invalid_header | http_500 | http_502 | http_503 | http_504 |http_403 | http_404 | non_idempotent | off …：配置什么情况下需要请求下一台上游服务器进行重试。默认为“errortimeout”。error表示与上游服务器建立连接、写请求或者读响应头出错。timeout表示与上游服务器建立连接、写请求或者读响应头超时。invalid_header表示上游服务器返回空的或错误的响应头。http_XXX表示上游服务器返回特定的状态码。non_idempotent表示RFC-2616定义的非幂等HTTP方法（POST、LOCK、PATCH），也可以在失败后重试下一台上游服务器（即默认幂等方法GET、HEAD、PUT、DELETE、OPTIONS、TRACE才可以重试）。off表示禁用重试。</p>
+<p>重试不能无限制进行，因此，需要如下两个指令控制重试次数和重试超时时间。</p>
+<p>proxy_next_upstream_tries number：设置重试次数，默认0表示不限制，注意此重试次数指的是所有请求次数（包括第一次和之后的重试次数之和）。</p>
+<p>proxy_next_upstream_timeout time：设置重试最大超时时间，默认0表示不限制。</p>
+<p>即在proxy_next_upstream_timeout时间内允许proxy_next_upstream_tries次重试。如果超过了其中一个设置，则Nginx也会结束重试并返回客户端响应（可能是错误码）。</p>
+<p>如下配置表示当error/timeout时重试upstream中的下一台上游服务器，如果重试的总时间超出了6s或者重试了1次，则表示重试失败（因为之前已经请求一次了，所以还能重试一次），Nginx结束重试并返回客户端响应。</p>
+<h2 id="upstream存活超时设置"><a href="#upstream存活超时设置" class="headerlink" title="upstream存活超时设置"></a>upstream存活超时设置</h2><p>max_fails和fail_timeout：配置什么时候Nginx将上游服务器认定为不可用/不存活。当上游服务器在fail_timeout时间内失败了max_fails次，则认为该上游服务器不可用/不存活。并在接下来的fail_timeout时间内从upstream摘掉该节点（即请求不会转发到该上游服务器）。</p>
+<p>什么情况下被认定为失败呢？其由 proxy_next_upstream定义，不过，不管 proxy_next_upstream如何配置，error, timeout and invalid_header 都将被认为是失败。</p>
+<p>如server 192.168.61.1:9090max_fails=2 fail_timeout=10s;表示在10s内如果失败了2次，则在接下来的10s内认定该节点不可用/不存活。这种存活检测机制是只有当访问该上游服务器时，采取惰性检查，可以使用ngx_http_upstream_check_module配置主动检查。</p>
+<p>max_fails设置为0表示不检查服务器是否可用（即认为一直可用），如果upstream中仅剩一台上游服务器时，则该服务器是不会被摘除的，将从不被认为不可用。</p>
+<h3 id="proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间"><a href="#proxy-upstream-fail-timeout（fail-timeout）设置某一个upstream后端失败了指定次数（max-fails）后，该后端不可操作的时间" class="headerlink" title="proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间"></a>proxy_upstream_fail_timeout（fail_timeout）设置某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间</h3><ul>
+<li>语法 server address [fail_timeout=30s]</li>
+<li>默认值 10s</li>
+<li>上下文 upstream</li>
+<li>说明 Upstream模块下 server指令的参数，设置了某一个upstream后端失败了指定次数（max_fails）后，该后端不可操作的时间，默认为10秒</li>
+</ul>
+<h2 id="lingering-timeout"><a href="#lingering-timeout" class="headerlink" title="lingering_timeout"></a>lingering_timeout</h2><ul>
+<li>语法: lingering_timeout time</li>
+<li>默认值: 5s</li>
+<li>上下文: http server location</li>
+<li>说明: lingering_close生效后，在关闭连接前，会检测是否有用户发送的数据到达服务器，如果超过lingering_timeout时间后还没有数据可读，就直接关闭连接；否则，必须在读取完连接缓冲区上的数据并丢弃掉后才会关闭连接。</li>
+</ul>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Web服务器</category>
+        <category>Nginx</category>
+      </categories>
+      <tags>
+        <tag>Timeout</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>rpm命令</title>
+    <url>/2020/07/19/rpm%E5%91%BD%E4%BB%A4/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>sudo rpm -ivh [lz4-1.8.3-1.el7.x86_64.rpm]</p>
+<h2 id="卸载"><a href="#卸载" class="headerlink" title="卸载"></a>卸载</h2><p>sudo rpm -e [postgresql14-server-14.4-1PGDG.rhel7.x86_64]</p>
+<h2 id="查询功能"><a href="#查询功能" class="headerlink" title="查询功能"></a>查询功能</h2><p>命令格式 rpm {-q|–query} [select-options] [query-options]</p>
+<p>　　RPM的查询功能是极为强大，是极为重要的功能之一；举几个常用的例子，更为详细的具体的，请参考#man rpm</p>
+<p>1、对系统中已安装软件的查询</p>
+<p>1）查询系统已安装的软件</p>
+<p>　　语法：rpm -q 软件名</p>
+<p>　　举例：[root@localhost beinan]# rpm -q gaim</p>
+<p>　　gaim-1.3.0-1.fc4 　　</p>
+<pre><code>   查看系统中所有已经安装的包，要加 -a 参数 ；
+</code></pre>
+<p>　　[root@localhost RPMS]# rpm -qa</p>
+<p>　　如果分页查看，再加一个管道 |和more命令；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |more</p>
+<p>　　在所有已经安装的软件包中查找某个软件，比如说 gaim ；可以用 grep 抽取出来；</p>
+<p>　　[root@localhost RPMS]# rpm -qa |grep gaim</p>
+<p>　　上面这条的功能和 rpm -q gaim 输出的结果是一样的；</p>
+<p>2）查询一个已经安装的文件属于哪个软件包</p>
+<p>　　语法 rpm -qf 文件名</p>
+<p>　　注：文件名所在的绝对路径要指出</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qf /usr/lib/libacl.la</p>
+<p>　　libacl-devel-2.2.23-8</p>
+<p>3）查询已安装软件包都安装到何处</p>
+<p>　　语法：rpm -ql 软件名 或 rpm rpmquery -ql 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -ql lynx</p>
+<p>　　[root@localhost RPMS]# rpmquery -ql lynx</p>
+<p>4）查询一个已安装软件包的信息</p>
+<p>　　语法格式： rpm -qi 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qi lynx</p>
+<p>5）查看一下已安装软件的配置文件</p>
+<p>　　语法格式：rpm -qc 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qc lynx</p>
+<p>6）查看一个已经安装软件的文档安装位置</p>
+<p>　　语法格式： rpm -qd 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qd lynx</p>
+<p>7）查看一下已安装软件所依赖的软件包及文件</p>
+<p>　　语法格式： rpm -qR 软件名</p>
+<p>　　举例：</p>
+<p>　　[root@localhost beinan]# rpm -qR rpm-python</p>
+<p>　　查询已安装软件的总结：对于一个软件包已经安装，我们可以把一系列的参数组合起来用；比如 rpm -qil ；比如：</p>
+<p>　　[root@localhost RPMS]# rpm -qil lynx</p>
+<p>2、对于未安装的软件包的查看：</p>
+<p>　　查看的前提是您有一个.rpm 的文件，也就是说对既有软件file.rpm的查看等；</p>
+<p>1）查看一个软件包的用途、版本等信息；</p>
+<p>　　语法： rpm -qpi file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpi lynx-2.8.5-23.i386.rpm</p>
+<p>2）查看一件软件包所包含的文件；</p>
+<p>　　语法： rpm -qpl file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpl lynx-2.8.5-23.i386.rpm</p>
+<p>3）查看软件包的文档所在的位置；</p>
+<p>　　语法： rpm -qpd file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpd lynx-2.8.5-23.i386.rpm</p>
+<p>4）查看一个软件包的配置文件；</p>
+<p>　　语法： rpm -qpc file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost RPMS]# rpm -qpc lynx-2.8.5-23.i386.rpm</p>
+<p>5）查看一个软件包的依赖关系</p>
+<p>　　语法： rpm -qpR file.rpm</p>
+<p>　　举例：</p>
+<p>　　[root@localhost archives]# rpm -qpR yumex_0.42-3.0.fc4_noarch.rpm</p>
+<p>　　/bin/bash</p>
+<p>　　/usr/bin/python</p>
+<p>　　config(yumex) = 0.42-3.0.fc4</p>
+<p>　　pygtk2</p>
+<p>　　pygtk2-libglade</p>
+<p>　　rpmlib(CompressedFileNames) &lt;= 3.0.4-1</p>
+<p>　　rpmlib(PayloadFilesHavePrefix) &lt;= 4.0-1</p>
+<p>　　usermode</p>
+<p>　　yum &gt;= 2.3.2</p>
+]]></content>
+      <categories>
+        <category>Linux</category>
+        <category>RPM</category>
+      </categories>
+      <tags>
+        <tag>RPM</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>Squid 服务器学习笔记</title>
+    <url>/2022/06/01/squid/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="Squid-服务器学习笔记"><a href="#Squid-服务器学习笔记" class="headerlink" title="Squid 服务器学习笔记"></a>Squid 服务器学习笔记</h1><h2 id="Squid-服务器介绍"><a href="#Squid-服务器介绍" class="headerlink" title="Squid 服务器介绍"></a>Squid 服务器介绍</h2><p>用来缓存前端资源的代理服务器，可以类比后端数据库缓存软件Redis。<br>当用户访问目标资源时由Squid服务器进行判断如果有数据缓存直接将缓存数据返回，如果没有缓存，代理客户访问资源，获取到后返回给用户，当有其他用户访问相同资源时直接返回资源。</p>
+<h2 id="代理方式"><a href="#代理方式" class="headerlink" title="代理方式"></a>代理方式</h2><ol>
+<li>普通代理</li>
+<li>透明代理</li>
+<li>反向代理</li>
+</ol>
+<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 检查是否已经安装</span><br><span class="line">rpm -qa | grep squid</span><br><span class="line">&#x2F;&#x2F; 安装软件</span><br><span class="line">rpm install squid</span><br><span class="line">&#x2F;&#x2F; 设置开机启动</span><br><span class="line">chkconfig squid on</span><br><span class="line">&#x2F;&#x2F; 启动服务</span><br><span class="line">service squid start</span><br><span class="line">&#x2F;&#x2F; 查看服务状态（端口监听3128）</span><br><span class="line">netstat -anput |grap squid</span><br><span class="line">&#x2F;&#x2F; 关闭服务</span><br><span class="line">service squid stop</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><p>/etc/squid/squid.config</p>
+<p>10.0.0.0/8</p>
+<blockquote>
+<p>扩展知识<br>CIDR - 无类域间路由CIDR（Classless InterDomain Routing）<br>ip每位占1个字节8位，00000000 ~ 11111111，也就是0 ~ 255，ip共有四个位数。<br>10.0.0.0/8 的意思是 8位不可变，剩下的可变，8位这里的意思是说第一个IP段，那么也就是说IP范围是10.0.0.0 ~ 10.255.255.255 这样的一个ip范围。</p>
+</blockquote>
+<p>// 复制并重命名<br>mv /etc/squid/squid.config{,.bak}<br>// 删除文件中的注释和空行（只保留有效设定）<br>awk ‘if($0!~ /^#/ &amp;&amp; $0~ !/^$/print $0)’ /etc/squid/squid.config.bak &gt; /etc/squid/squid.config</p>
+<p>squid常用命令：<br>/usr/local/squid/sbin/squid -z 初始化缓存空间<br>/usr/local/squid/sbin/squid 启动<br>/usr/local/squid/sbin/squid -k shutdown 停止<br>/usr/local/squid/sbin/squid -k reconfigure 重新载入配置文件<br>/usr/local/squid/sbin/squid -k rotate 轮循日志</p>
+<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="comment">#acl all src 0.0.0.0/0.0.0.0 and http_access allow all选项定义了一个访问控制列表。详细情况参见和Squid软件</span></span><br><span class="line"><span class="comment">#携带的文档。这里的访问控制列表允许所有对代理服务的访问，因为这里该代理是加速web服务器。</span></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 </span><br><span class="line">               <span class="comment">#允许所有IP访问</span></span><br><span class="line">acl manager proto http	#manager url协议为http</span><br><span class="line">acl localhost src 127.0.0.1/255.255.255.255	#允午本机IP</span><br><span class="line">acl to_localhost dst 127.0.0.1	#允午目的地址为本机IP</span><br><span class="line">acl Safe_ports port 80	# 允许安全更新的端口为80</span><br><span class="line">acl CONNECT method CONNECT	#请求方法以CONNECT</span><br><span class="line">http_access allow all	#允许所有人使用该代理.因为这里是代理加速web服务器</span><br><span class="line">http_reply_access allow all	#允许所有客户端使用该代理</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 16	#限制每个IP最大允许16个连接，防止攻击</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">icp_access deny all	#禁止从邻居服务器缓冲内发送和接收ICP请求.</span><br><span class="line">miss_access allow all	#允许直接更新请求</span><br><span class="line">ident_lookup_access deny all	#禁止lookup检查DNS</span><br><span class="line">http_port 8080 transparent	#指定Squid监听浏览器客户请求的端口号。</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?	#用来强制某些特定的对象不被缓存，主要是处于安全的目的。</span><br><span class="line">acl QUERY urlpath_regex cgi-bin \?</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">cache_mem 1 GB	#这是一个优化选项，增加该内存值有利于缓存。应该注意的是：</span><br><span class="line">				<span class="comment">#一般来说如果系统有内存，设置该值为(n/)3M。现在是3G 所以这里1G</span></span><br><span class="line">fqdncache_size 1024	#FQDN 高速缓存大小</span><br><span class="line">maximum_object_size_in_memory 2 MB	#允许最大的文件载入内存</span><br><span class="line"></span><br><span class="line">memory_replacement_policy heap LFUDA	#动态使用最小的，移出内存cache</span><br><span class="line">cache_replacement_policy heap LFUDA	#动态使用最小的，移出硬盘cache</span><br><span class="line"></span><br><span class="line">cache_dir ufs /home/cache 5000 32 512	#高速缓存目录 ufs 类型使用的缓冲值最大允午1000MB空间，</span><br><span class="line">										<span class="comment">#32个一级目录，512个二级目录</span></span><br><span class="line"></span><br><span class="line">max_open_disk_fds 0	#允许最大打开文件数量,0 无限制</span><br><span class="line">minimum_object_size 1 KB	#允午最小文件请求体大小</span><br><span class="line">maximum_object_size 20 MB	#允午最大文件请求体大小</span><br><span class="line"></span><br><span class="line">cache_swap_low 90	#最小允许使用swap 90%</span><br><span class="line">cache_swap_high 95	#最多允许使用swap 95%</span><br><span class="line"></span><br><span class="line">ipcache_size 2048	# IP 地址高速缓存大小 2M</span><br><span class="line">ipcache_low 90	#最小允许ipcache使用swap 90%</span><br><span class="line">ipcache_high 95	#最大允许ipcache使用swap 90%</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">access_log /var/log/squid/access.log squid	#定义日志存放记录</span><br><span class="line">cache_log /var/log/squid/cache.log squid</span><br><span class="line">cache_store_log none	#禁止store日志</span><br><span class="line"></span><br><span class="line">emulate_httpd_log on	#将使Squid仿照Web服务器的格式创建访问记录。如果希望使用</span><br><span class="line">						<span class="comment">#Web访问记录分析程序，就需要设置这个参数。</span></span><br><span class="line"></span><br><span class="line">refresh_pattern . 0 20% 4320 override-expire override-lastmod reload-into-ims ignore-reload   #更新cache规则</span><br><span class="line"></span><br><span class="line">acl buggy_server url_regex ^http://.... http://	#只允许http的请求</span><br><span class="line">broken_posts allow buggy_server</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache	#允许apache的编码</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line">request_entities off	#禁止非http的标分准请求，防止攻击</span><br><span class="line">header_access header allow all	#允许所有的http报头</span><br><span class="line">relaxed_header_parser on	#不严格分析http报头.</span><br><span class="line">client_lifetime 120 minute	#最大客户连接时间 120分钟</span><br><span class="line"></span><br><span class="line">cache_mgr sky@test.com	#指定当缓冲出现问题时向缓冲管理者发送告警信息的地址信息。</span><br><span class="line"></span><br><span class="line">cache_effective_user squid	#这里以用户squid的身份Squid服务器</span><br><span class="line">cache_effective_group squid</span><br><span class="line"></span><br><span class="line">icp_port 0	#指定Squid从邻居服务器缓冲内发送和接收ICP请求的端口号。</span><br><span class="line">			<span class="comment">#这里设置为0是因为这里配置Squid为内部Web服务器的加速器，</span></span><br><span class="line">			<span class="comment">#所以不需要使用邻居服务器的缓冲。0是禁用</span></span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query default multicast-responder no-netdb-exchange #cache_peer 设置允许更新缓存的主机，因是本机所以127.0.0.1</span><br><span class="line">cache_peer_domain 127.0.0.1                                 </span><br><span class="line">hostname_aliases 127.0.0.1</span><br><span class="line"></span><br><span class="line">error_directory /usr/share/squid/errors/Simplify_Chinese	#定义错误路径</span><br><span class="line"></span><br><span class="line">always_direct allow all	# cache丢失或不存在是允许所有请求直接转发到原始服务器</span><br><span class="line">ignore_unknown_nameservers on	#开反DNS查询，当域名地址不相同时候，禁止访问</span><br><span class="line">coredump_dir  /var/log/squid	#定义dump的目录</span><br><span class="line"></span><br><span class="line">max_filedesc 2048	#最大打开的文件描述</span><br><span class="line"></span><br><span class="line">half_closed_clients off	#使Squid在当read不再返回数据时立即关闭客户端的连接。</span><br><span class="line">						<span class="comment">#有时read不再返回数据是由于某些客户关闭TCP的发送数据</span></span><br><span class="line">						<span class="comment">#而仍然保持接收数据。而Squid分辨不出TCP半关闭和完全关闭。</span></span><br><span class="line"></span><br><span class="line">buffered_logs on	#若打开选项“buffered_logs”可以稍稍提高加速某些对日志文件的写入，该选项主要是实现优化特性。</span><br><span class="line"></span><br><span class="line">acl tianya referer_regex -i tianya #防止天涯盗链，转嫁给百度</span><br><span class="line">http_access deny tianya</span><br><span class="line">deny_info  tianya</span><br><span class="line"></span><br><span class="line">acl baidu req_header User-Agent Baiduspider #阻止baidu蜘蛛</span><br><span class="line">http_access deny baidu</span><br><span class="line"></span><br><span class="line">acl OverConnLimit maxconn 128 #限制同一IP客户端的最大连接数</span><br><span class="line">http_access deny OverConnLimit</span><br><span class="line"></span><br><span class="line">acl myip dst 222.18.63.37 #防止被人利用为HTTP代理，设置允许访问的IP地址</span><br><span class="line">http_access deny !myip</span><br><span class="line"></span><br><span class="line">acl Manager proto cache_object #允许本地管理</span><br><span class="line">acl Localhost src 127.0.0.1 222.18.63.37</span><br><span class="line">http_access allow Manager Localhost</span><br><span class="line">cachemgr_passwd 53034338 all</span><br><span class="line">http_access deny Manager</span><br><span class="line"></span><br><span class="line">acl all src 0.0.0.0/0.0.0.0 #仅仅允许80端口的代理</span><br><span class="line">acl Safe_ports port 80 # http</span><br><span class="line">http_access deny !Safe_ports</span><br><span class="line">http_access allow all</span><br><span class="line"></span><br><span class="line">visible_hostname happy.swjtu.edu.cn #Squid信息设置</span><br><span class="line">cache_mgr  ooopic2008@qq.com</span><br><span class="line"></span><br><span class="line">cache_effective_user squid #基本设置</span><br><span class="line">cache_effective_group squid</span><br><span class="line">tcp_recv_bufsize 65535 bytes</span><br><span class="line"></span><br><span class="line">cache_peer 127.0.0.1 parent 80 0 no-query originserver #2.6的反向代理加速配置</span><br><span class="line"></span><br><span class="line">error_directory /usr/local/squid/share/errors/Simplify_Chinese #错误文档</span><br><span class="line"></span><br><span class="line">icp_port 0 #单台使用，不使用该功能</span><br><span class="line"></span><br><span class="line">hierarchy_stoplist cgi-bin ?</span><br><span class="line"></span><br><span class="line">acl QUERY urlpath_regex cgi-bin \? .php .cgi .avi .wmv .rm .ram .mpg .mpeg .zip .exe</span><br><span class="line">cache deny QUERY</span><br><span class="line"></span><br><span class="line">acl apache rep_header Server ^Apache</span><br><span class="line">broken_vary_encoding allow apache</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">refresh_pattern ^ftp:           1440 20%     10080</span><br><span class="line">refresh_pattern ^gopher:        1440 0%    1440</span><br><span class="line">refresh_pattern .             0    20%     4320</span><br><span class="line"></span><br><span class="line">cache_store_log none</span><br><span class="line">pid_filename /usr/local/squid/var/logs/squid.pid</span><br><span class="line">emulate_httpd_log on</span><br><span class="line">logformat combined %&gt;a %ui %un [%tl] &quot;%rm %ru HTTP/%rv&quot; %Hs %&lt;st &quot;%&#123;Referer&#125;&gt;h&quot; &quot;%&#123;User-Agent&#125;&gt;h&quot; %Ss:%Sh</span><br><span class="line">cache_log /usr/local/squid/var/logs/cache.log</span><br><span class="line">access_log /usr/local/squid/var/logs/access.log combined</span><br><span class="line">coredump_dir /usr/local/squid/var/cache</span><br><span class="line">cache_dir ufs /usr/local/squid/var/cache 10000 16 256</span><br><span class="line"></span><br><span class="line">dns_children 32</span><br><span class="line">hosts_file /etc/hosts</span><br><span class="line"></span><br><span class="line">cache_mem 400 MB</span><br><span class="line">cache_swap_low 90</span><br><span class="line">cache_swap_high 95</span><br><span class="line">maximum_object_size 32768 KB</span><br><span class="line">maximum_object_size_in_memory 4096 KB</span><br><span class="line">emulate_httpd_log on</span><br><span class="line"></span><br><span class="line">acl picurl url_regex -i \.bmp$ \.png$ \.jpg$ \.gif$ \.jpeg$ #防止盗链</span><br><span class="line">acl mystie1 referer_regex -i happy.swjtu.edu.cn</span><br><span class="line">http_access allow mystie1 picurl</span><br><span class="line">acl nullref referer_regex -i ^$</span><br><span class="line">http_access allow nullref</span><br><span class="line">acl hasref referer_regex -i .+</span><br><span class="line">http_access deny hasref picurl</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>Infra</category>
+        <category>Web服务器</category>
+        <category>Squid</category>
+      </categories>
+      <tags>
+        <tag>Squid</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>systemctl 命令</title>
+    <url>/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/</url>
+    <content><![CDATA[<h1 id="systemctl-命令"><a href="#systemctl-命令" class="headerlink" title="systemctl 命令"></a>systemctl 命令</h1><h2 id="systemctl"><a href="#systemctl" class="headerlink" title="systemctl"></a>systemctl</h2><p>范列出系统上面有启动的unit </p>
+<h2 id="systemctl-list-unit-files"><a href="#systemctl-list-unit-files" class="headerlink" title="systemctl list-unit-files"></a>systemctl list-unit-files</h2><p>列出所有已经安装的unit有哪些</p>
+<h2 id="systemctl-list-units-–type-service-–all"><a href="#systemctl-list-units-–type-service-–all" class="headerlink" title="systemctl list-units –type=service –all"></a>systemctl list-units –type=service –all</h2><p>列出类型为service的所有项目，不论启动与否</p>
+<h2 id="systemctl-get-default"><a href="#systemctl-get-default" class="headerlink" title="systemctl get-default"></a>systemctl get-default</h2><p>输入目前机器默认的模式，如图形界面模式或者文本模式</p>
+<h2 id="systemctl-isolate-multi-user-target"><a href="#systemctl-isolate-multi-user-target" class="headerlink" title="systemctl isolate multi-user.target"></a>systemctl isolate multi-user.target</h2><p>将目前的操作环境改为纯文本模式，关掉图形界面</p>
+<h2 id="systemctl-isolate-graphical-target"><a href="#systemctl-isolate-graphical-target" class="headerlink" title="systemctl isolate graphical.target"></a>systemctl isolate graphical.target</h2><p>将目前的操作环境改为图形界面</p>
+<h2 id="systemctl-poweroff"><a href="#systemctl-poweroff" class="headerlink" title="systemctl poweroff"></a>systemctl poweroff</h2><p>系统关机</p>
+<h2 id="systemctl-reboot"><a href="#systemctl-reboot" class="headerlink" title="systemctl reboot"></a>systemctl reboot</h2><p>重新开机</p>
+<h2 id="systemctl-suspend"><a href="#systemctl-suspend" class="headerlink" title="systemctl suspend"></a>systemctl suspend</h2><p>进入暂停模式</p>
+<h2 id="systemctl-rescue"><a href="#systemctl-rescue" class="headerlink" title="systemctl rescue"></a>systemctl rescue</h2><p>强制进入救援模式</p>
+<h2 id="systemctl-hibernate"><a href="#systemctl-hibernate" class="headerlink" title="systemctl hibernate"></a>systemctl hibernate</h2><p>进入休眠模式</p>
+<h2 id="systemctl-emergency"><a href="#systemctl-emergency" class="headerlink" title="systemctl emergency"></a>systemctl emergency</h2><p>强制进入紧急救援模式</p>
+<h2 id="systemctl-list-dependencies-–reverse"><a href="#systemctl-list-dependencies-–reverse" class="headerlink" title="systemctl list-dependencies –reverse"></a>systemctl list-dependencies –reverse</h2><p>查询当前默认的target关联了啥</p>
+<h2 id="systemctl-list-dependencies-graphical-target"><a href="#systemctl-list-dependencies-graphical-target" class="headerlink" title="systemctl list-dependencies graphical.target"></a>systemctl list-dependencies graphical.target</h2><p>查询图形界面模式的target关联了啥</p>
+<h2 id="systemctl-list-sockets"><a href="#systemctl-list-sockets" class="headerlink" title="systemctl list-sockets"></a>systemctl list-sockets</h2><p>查看当前的socket服务</p>
+<h2 id="systemctl-show-etcd-service"><a href="#systemctl-show-etcd-service" class="headerlink" title="systemctl show etcd.service"></a>systemctl show etcd.service</h2><p>查看 unit 的详细配置情况</p>
+<h2 id="systemctl-mask-etcd-service"><a href="#systemctl-mask-etcd-service" class="headerlink" title="systemctl mask etcd.service"></a>systemctl mask etcd.service</h2><p>禁用某个服务</p>
+<h2 id="systemctl-unmask-etcd-service"><a href="#systemctl-unmask-etcd-service" class="headerlink" title="systemctl unmask etcd.service"></a>systemctl unmask etcd.service</h2><p>解除禁用某个服务</p>
+]]></content>
+      <categories>
+        <category>linux</category>
+        <category>systemctl</category>
+      </categories>
+      <tags>
+        <tag>systemctl</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>test</title>
+    <url>/2023/09/20/test/</url>
+    <content><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>最近各种技术博客，各种技术文章，各种牛人前辈的学习心得都在看，最近看了一个不错的文章叫做《如何正确使用时间》<br>感觉还是很不错的，特别适合年轻的程序员看一下。下面将全文贴在下方，如果需要也可以去原文查看。</p>
+<p><a href="http://caibaojian.com/interview-map/career/">原文</a></p>
+<p>你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。</p>
+<h2 id="花时间补基础，读文档"><a href="#花时间补基础，读文档" class="headerlink" title="花时间补基础，读文档"></a>花时间补基础，读文档</h2><p>在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。</p>
+<p>基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。</p>
+<p>文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。</p>
+<h2 id="学会搜索"><a href="#学会搜索" class="headerlink" title="学会搜索"></a>学会搜索</h2><p>如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。</p>
+<h2 id="学点英语"><a href="#学点英语" class="headerlink" title="学点英语"></a>学点英语</h2><p>说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。</p>
+<p>那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。</p>
+<h2 id="画个图，想一想再做"><a href="#画个图，想一想再做" class="headerlink" title="画个图，想一想再做"></a>画个图，想一想再做</h2><p>你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。</p>
+<p>如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。</p>
+<h2 id="利用好下班时间学习"><a href="#利用好下班时间学习" class="headerlink" title="利用好下班时间学习"></a>利用好下班时间学习</h2><p>说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。</p>
+<p>可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。</p>
+<p>那么如果你有足够的下班时间，一定要花上 1， 2 小时去学习，上班大家基本都一样，技术的精进就是看下班以后的那几个小时了。如果你能利用好下班时间来学习，坚持下去，时间一定会给你很好的答复。</p>
+<h2 id="列好-ToDo"><a href="#列好-ToDo" class="headerlink" title="列好 ToDo"></a>列好 ToDo</h2><p>我喜欢规划好一段时间内要做的事情，并且要把事情拆分为小点。给 ToDo 列好优先级，紧急的优先级最高。相同优先级的我喜欢先做简单的，因为这样一旦完成就能划掉一个，提高成就感。</p>
+<h2 id="反思和整理"><a href="#反思和整理" class="headerlink" title="反思和整理"></a>反思和整理</h2><p>每周末都会花上点时间整理下本周记录的笔记和看到的不错文章。然后考虑下本周完成的工作和下周准备要完成的工作。</p>
+]]></content>
+      <categories>
+        <category>自我提升</category>
+        <category>人生思考</category>
+      </categories>
+      <tags>
+        <tag>经验之谈</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</title>
+    <url>/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><span id="more"></span>
+<h3 id="场景："><a href="#场景：" class="headerlink" title="场景："></a>场景：</h3><p>前端开发我们通常使用VSCode，使用时常见有一个常见的场景：</p>
+<blockquote>
+<p>引入一个文件、图片等</p>
+</blockquote>
+<p>如果不利用VSCode的插件，我们通常会写相对路径或者绝对路径，但为了方便写代码，我们通常会利用工具来帮助我们减轻负担，这种情况就引入了今天的主角，VSCode下的插件<strong>path-intellisense</strong>，是的，有了它编辑器就会聪明的自动帮我们提示出文件在什么地方，这的确方便了我们。</p>
+<p>但是，在Vue开发过程中，或者说是利用Webpack作为构建工具时我们通常会定义一个变量如：<code>@</code> 来简化路径的书写，使代码变得简洁美观，这里的<code>@</code>，我们称之为 <strong>路径别名</strong> ，这也是Vue官方十分推荐使用的，但因为路径别名的使用，原来的智能提示路径的插件就会无法正常工作，因为工作中确实遇到了这样的坑，所以简单的写个文记录一下。</p>
+<h3 id="问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示"><a href="#问题一：因为使用了路径别名（-）导致path-intellisense不能自动提示" class="headerlink" title="问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示"></a>问题一：因为使用了路径别名（@）导致path-intellisense不能自动提示</h3><p>这个问题其实比较容易理解，因为路径别名是Webpack构建时使用的，并不是VSCode原生支持的功能，所以它并不认识<code>@</code>，这是个什么，所以解决思路就是告诉VSCode <code>@</code> 是个什么就好了，专业一点说的话就是加上映射关系</p>
+<h4 id="解决步骤"><a href="#解决步骤" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>打开path-intellisense插件的setting</li>
+<li>找到Mapping配置项</li>
+<li>加以下代码<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&quot;path-intellisense.mappings&quot;: &#123;</span><br><span class="line">      &quot;@&quot;: &quot;$&#123;workspaceRoot&#125;/src&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启插件搞定！</li>
+</ol>
+<h3 id="问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"><a href="#问题二：我们希望-Ctrl-鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。" class="headerlink" title="问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。"></a>问题二：我们希望 Ctrl + 鼠标左键点击一个外部方法时，能够快速跳转到对应的外部文件。</h3><p>第二个问题提出时，可能会有人有疑问，上面不是配置完映射关系了嘛，为什么还有下面的问题呢，其实你要是不问，我也有这个问题，上一步操作实际上是告诉了path-intellisense插件该怎么解析<code>@</code>这个东西，但是VSCode并不知道啊，但是Ctrl + 鼠标左键的动作又是VSCode负责的事，所以我们也要告诉一下编辑器该如何应对上面的情况，说到这里大家应该就理解了</p>
+<h4 id="解决步骤-1"><a href="#解决步骤-1" class="headerlink" title="解决步骤"></a>解决步骤</h4><ol>
+<li>在项目package.json所在同级目录下创建文件jsconfig.json（这是VSCode的一个可选配置）</li>
+<li>在jsconfig.json增加如下配置<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;target&quot;</span>: <span class="string">&quot;ES6&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;module&quot;</span>: <span class="string">&quot;commonjs&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;allowSyntheticDefaultImports&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;paths&quot;</span>: &#123;</span><br><span class="line">          <span class="attr">&quot;@/*&quot;</span>: [<span class="string">&quot;src/*&quot;</span>] <span class="comment">// 这里是关键代码</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;exclude&quot;</span>: [</span><br><span class="line">        <span class="string">&quot;node_modules&quot;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
+<li>重启VSCode搞定！</li>
+</ol>
+<p>通过上面的解决方案，我们就可以愉快的使用VSCode进行前端开发了，你学废了吗？</p>
+]]></content>
+      <categories>
+        <category>前端框架</category>
+        <category>Vue</category>
+      </categories>
+      <tags>
+        <tag>VSCode插件</tag>
+        <tag>path-intellisense</tag>
+        <tag>路径别名</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>关于版本管理</title>
+    <url>/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>还记得你的前端工程里有这样一个文件‘package.json’，里面管理者运行代码所需要的各种依赖，每种依赖都会有一个版本号，那么你知道版本号是怎么定义的么？不知道的话就看看下面的内容吧。</p>
+<span id="more"></span>
+<h2 id="关于版本号的那些事"><a href="#关于版本号的那些事" class="headerlink" title="关于版本号的那些事"></a>关于版本号的那些事</h2><p>你会发现这些版本号通常是三部分构成的，像是‘X.Y.Z’的一种感觉，其实这是一种叫做<code>SemVer</code>的版本管理规范，下面我们就来讲讲<code>SemVer</code>。</p>
+<h3 id="SemVer-的生平"><a href="#SemVer-的生平" class="headerlink" title="SemVer 的生平"></a>SemVer 的生平</h3><p>语义化版本控制的规范是由 Gravatars 创办者兼 GitHub 共同创办者 Tom Preston-Werner 所建立。</p>
+<p>它的许可证是 知识共享 署名 3.0 (CC BY 3.0)  所以你可以不用付费直接使用它。</p>
+<p>关于它的更多描述你可以到下面的地址找到<br><a href="https://semver.org/lang/zh-CN/">https://semver.org/lang/zh-CN/</a></p>
+<p>主要你要记住的是如下几句话：</p>
+<blockquote>
+<p>版本格式：主版本号.次版本号.修订号，版本号递增规则如下：</p>
+<p>主版本号：当你做了不兼容的 API 修改，<br>次版本号：当你做了向下兼容的功能性新增，<br>修订号：当你做了向下兼容的问题修正。<br>先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。</p>
+</blockquote>
+<p>更多的内容的话，请到官网查看吧。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>计算机通识</category>
+      </categories>
+      <tags>
+        <tag>SemVer</tag>
+        <tag>版本管理</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前后端分离开发指南</title>
+    <url>/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>前后端分离狭义上来讲是以浏览器为分界，应用在浏览器内部的技术为前端技术，主要负责页面展示的部分，应用在浏览器外的技术为后端技术，主要负责处理业务逻辑和数据准备工作，但是随着近几年NodeJs的崛起，前端的工作范畴明显扩大，前后端分离也不仅仅作为一种开发模式，更是web应用架构层面的一种模式。</p>
+<h1 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h1><ol>
+<li>在开发阶段，前后端工程师要提前约定好数据交互的接口，从而实现并行开发和测试；</li>
+<li>在运行阶段，前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。（NodeJs或Ngnix）</li>
+</ol>
+<p>由上述两条可以看出前后端分离分为开发阶段和部署阶段，通常来说我们做到的只是前后端分离开发，并没有做到分离部署。</p>
+<h1 id="分解"><a href="#分解" class="headerlink" title="分解"></a>分解</h1><p>作为一种全新的架构模式，前后端分离需要从四个方面来比较和认识。</p>
+<ol>
+<li>交互形式</li>
+<li>开发模式/流程</li>
+<li>代码组织方式</li>
+<li>数据接口规范流程</li>
+</ol>
+<h2 id="一、交互形式"><a href="#一、交互形式" class="headerlink" title="一、交互形式"></a>一、交互形式</h2><p>在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。</p>
+<p>这里有一个经常引起激烈讨论的话题就是，“约定的数据格式”，是后端直接提供给前端可直接使用的数据格式，还是简单的数据库拉取数据不做加工直接推给前端，这个要视具体的项目情况而定，如果后端代码需要支持的不仅仅是一端，比如要同时适配pc端、手机端等多个终端，其多终端数据展现的形式如果各不相同，那后端只需要提供满足多端的基础数据格式即可，但如果只需要满足单个终端，那么建议直接将前后端数据格式进行统一处理，方便前后端协同，数据处理可以放在java端做也可以放在NodeJs端做，视人员配备情况而定，但绝不是后端不做任何处理就将数据返回给前端，完全由前端组织数据。</p>
+<h2 id="二、开发模式-流程"><a href="#二、开发模式-流程" class="headerlink" title="二、开发模式/流程"></a>二、开发模式/流程</h2><p>在前后端分离模式未诞生之前，前后端属于一个整体，那时使用的是MVC架构模式，前端对应的就是View层，主要通过html/css/js实现静态页面和动态效果，在有后端进行模板变量的嵌套和一些页面逻辑的处理，最终打包成一个整体，部署到同一服务器上，同时会进行简单的动静态分离部署。</p>
+<p>此时开发的流程如下：<br>需求=》前后端并行开发=》前端开发静态页面=》后端套模板=》集成问题=》前后端调整=》再集成=》解决集成问题=》交付上线<br>// TODO 这里插图</p>
+<p>出现前后端分离架构之后，前端工程师只需要编写前端页面+前端数据、业务逻辑处理，之后通过HTTP或其他请求方式调用后端提供的服务接口就可以了，而且除了在开发周期可以进行前后端分离，在部署阶段，前后端也可进行分离部署。<br>// TODO 这里插图</p>
+<p>此时开发的流程如下：<br>需求=》设计接口、约定数据=》前后端并行开发=》集成=》调整=》集成成功=》交付上线</p>
+<p>通过上面的描述及流程，不难发现，前后端分离的开发方式不仅仅从分工上进行了区分，更重要的是在并行开发的问题上解决了反复集成等前后端互相影响的问题，从而降低了开发的难度，简化了开发的流程。</p>
+<h2 id="三、代码组织方式"><a href="#三、代码组织方式" class="headerlink" title="三、代码组织方式"></a>三、代码组织方式</h2><p>// TODO 这里插图<br>在传统的开发模式架构下，前端代码是作为项目的静态资源存在于项目工程下，页面中还夹着一些后端代码如jsp、php等技术，前后端开发时需要将整个项目代码完整的引入开发工具才能进行开发，前后端同时维护一份代码，这种开发方式导致前后端代码互相影响，因此前后端分离势在必行。</p>
+<p>而前后端分离模式在代码的组织形式上由以下两种形式组成：</p>
+<ol>
+<li>半分离<br>前后端仍共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。</li>
+<li>完全分离<br>完全分离后，前端代码可以通过Mock来模拟后端请求，从此可以独立进行前端开发和测试。后端代码只需要按照跟前端约定好的接口格式写出完整的测试用例，确保接口的可用性。通过上述手段，降低开发集成风险。</li>
+</ol>
+<h2 id="四、数据接口规范流程"><a href="#四、数据接口规范流程" class="headerlink" title="四、数据接口规范流程"></a>四、数据接口规范流程</h2><p>通过上面三段的描述，我们可以看出前后端分离开发模式最重要也是最初的阶段就是数据接口的确定，因此在项目开发前必需先进行数据和接口的定义，数据接口的定义需要前后端开发共同商定，包括确定的数据格式，交互形式，并生成一份接口文档供前后端开发人员使用。之后才是并行开发。开发期间前后端双方需要严格按照确定的数据接口文档进行开发，前端开发完之后可以利用mock服务独自进行接口测试，后端也可以利用postman或其他接口测试工具进行测试，并提供完整的接口测试用例，然后前后端进行功能联调，最后再提交线上测试，也可进行自动化测试。</p>
+<p>// TODO 这里插图</p>
+<h1 id="分离后的收益"><a href="#分离后的收益" class="headerlink" title="分离后的收益"></a>分离后的收益</h1><p>到底分不分，如何分是个持续讨论的话题，通过上述的内容大家已经了解到了，什么是前后端分离，也知道如何进行前后端分离开发部署，那么前后端分离能带来哪些收益呢？</p>
+<p>首先，就目前的软件开发应用趋势来看，越来越注重用户的体验性，而且架构越来越大，服务越来越小，而且终端设备越来越丰富，而原来不分离的方式已经不能支撑现在的发展趋势，因此前后端分离开发及部署将势在必行。</p>
+<p>而且采用前后端分离的架构之后，我们将有如下几点提升：</p>
+<ol>
+<li><p>前后端分离后，前后端将不再互相纠缠而是各自在自己熟悉的领域进行开发工作，这将有利于前后端深化优化各自的代码，培养各自独特的技术特性，从而开发出更加优秀的应用，建立起专业精良的全栈开发团队。</p>
+</li>
+<li><p>通过前后端分离架构可以实现前后端开发从代码及开发流程上的完全解耦，只需要前后端共同商定好接口后，便可完全独立开发，只需要在联调阶段进行好协作，在此之前可以互不影响的进行并行开发，即是需求发生了变动，但只要不影响接口，后端既可以不用修改代码，只需前端进行变动即可，如此整体的开发效率将得到提升。 </p>
+</li>
+<li><p>前后端分离后，能够更好的适应前端日益增多的的终端适配，代码解耦后复用率更高。</p>
+</li>
+</ol>
+<p>4.前后端分离后，前后端代码可以分别管理，代码不再混在一起，代码可维护性也增强了</p>
+<p>前后端分离后收益不止以上四点，因为分离而带来的职责上、技术上、代码上、部署上的解耦让开发工作比以往任何时候都要更加专注和轻松。</p>
+<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><h2 id="前后端分离误区"><a href="#前后端分离误区" class="headerlink" title="前后端分离误区"></a>前后端分离误区</h2><ol>
+<li>前端人员不充足，不能进行前后端分离。</li>
+</ol>
+<p>此话说来是因为对前后端分离后职责区分不明确导致的问题，因为以往的前端只需要写静态页面就可以了，而前后端分离后前端也不仅仅需要写静态页面，而且还要为页面提供数据和页面逻辑的处理，但实际上可以根据团队情况来区别对待，如果团队前端人员充足，那么可以由前端人员负责多一些的工作，比如API请求后的业务逻辑的处理，页面逻辑的处理、页面数据的准备等，如果后端人员配备充足，那么上述几个环节仍然可由后端人员进行处理，前端开发仍然只是写静态页面，只是内容和逻辑不再写死而是通过js或其他手段如mvvm的框架进行处理。</p>
+<ol start="2">
+<li>前后端分离后前端任务加重，职责也不清晰。</li>
+</ol>
+<p>如第一点描述可知，问题不在前后端分离的模式是否合适，而是任务分配和人员分配上的问题，如果前端能力强且人员比例较多，那么部分任务可以由前端承担，如果后端人员多，那么任务由后端承担。</p>
+<ol start="3">
+<li>后端开发需要增加接口开发工作，增加任务量。</li>
+</ol>
+<p>无论如何后端开发都是需要写接口的，只是前后端分离后需要按照ResetFul风格写接口，或者采用最新的GraphQl的方式进行交互，如果说这个阶段需要前后端进行商量确定接口交互形式和数据格式花费了时间，但是在接下来前后端并行开发及问题解决上省掉的时间是更加可观的。</p>
+<ol start="4">
+<li>分离后仍出现互相等待的问题，反而不如传统开发模式快。</li>
+</ol>
+<p>这个问题的产生其实也是由于对前后端分离后技术缺失导致的，常见情况是前端写完页面逻辑和假数据后后端开发还未完成接口开发导致无法进行联调，实际上前端通过mockserver等方式是可以解决一些问题的。</p>
+<h2 id="前后端分离适用场景"><a href="#前后端分离适用场景" class="headerlink" title="前后端分离适用场景"></a>前后端分离适用场景</h2><p>现代化的web应用适合用前后端分离的开发方式。<br>原因有以下几点：</p>
+<ol>
+<li>web应用前端页面交互复杂。<ul>
+<li>页面渲染数据量大。</li>
+<li>页面包含复杂的业务逻辑。</li>
+</ul>
+</li>
+<li>终端适配情况多。</li>
+<li>分布式架构，微服务化应用场景。</li>
+</ol>
+<h2 id="前后端分离具体方案"><a href="#前后端分离具体方案" class="headerlink" title="前后端分离具体方案"></a>前后端分离具体方案</h2><h3 id="总体方向"><a href="#总体方向" class="headerlink" title="总体方向"></a>总体方向</h3><p>后端专注于：后端控制层（Restful API） &amp; 服务层 &amp; 数据访问层；</p>
+<p>前端专注于：前端控制层（Nodejs） &amp; 视图层</p>
+<ol>
+<li><p>项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员共同制定开发接口。</p>
+</li>
+<li><p>项目开发阶段，前后端分离是各自分工，协同敏捷开发，后端提供Restful API，并给出详细文档说明，前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据（json，xml）后渲染页面。</p>
+</li>
+<li><p>项目测试阶段，API完成之前，前端人员会使用mock server进行模拟测试，后端人员采用junit进行API单元测试，不用互相等待；API完成之后，前后端再对接测试一下就可以了，当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。</p>
+</li>
+<li><p>项目部署阶段，利用nginx 做反向代理，即Java + nodejs + nginx 方式进行。</p>
+</li>
+</ol>
+<h3 id="技术手段"><a href="#技术手段" class="headerlink" title="技术手段"></a>技术手段</h3><ul>
+<li>前端技术栈：前端代码 + mock服务</li>
+<li>后端技术栈：postman + 接口 + 后端业务逻辑 + 数据库</li>
+<li>公共依赖：接口文档/接口测试工具</li>
+</ul>
+<p>常用的mock服务为jsonserver<br>常用的接口测试工具为postman、rap、swagger、doclever</p>
+<h3 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h3><ol>
+<li>第一阶段为前后端同一个代码库，同一个服务器，集中部署。</li>
+<li>第二阶段引入Ngnix服务作为中间件，前端向Ngnix发请求，Ngnix向后端服务发请求，由于Ngnix为静态服务器，所以在seo优化上和页面性能优化上效果不明显，因此前端仍需与后端进行配合才能达到整体的优化。</li>
+</ol>
+<p>浏览器 =》 Ngnix（前端机）=》Ngnix（后端机可没有）=》Server服务</p>
+<ol start="3">
+<li>第三阶段引入nodejs作为中间层，将前端资源部署到Server层。同时实现数据代理服务，负责与提供数据的后端进行通信。</li>
+</ol>
+<p>浏览器=》Ngnix（前端机）=》NodeServer =》Server服务</p>
+<p>浏览器向前端机发送请求，由Ngnix进行分发，url统一分发至NodeServer，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；API请求则直接转发到后端服务挖成相应。</p>
+<h4 id="前后端分离部署方案比较"><a href="#前后端分离部署方案比较" class="headerlink" title="前后端分离部署方案比较"></a>前后端分离部署方案比较</h4><table>
+<thead>
+<tr>
+<th>属性字段</th>
+<th>传统模式</th>
+<th>Ngnix+Server</th>
+<th>Node+Server</th>
+<th>Ngnix+Node+Server</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>SEO</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>浏览器渲染负担</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>前后端耦合</td>
+<td>no</td>
+<td>ok</td>
+<td>ok</td>
+<td>ok</td>
+</tr>
+<tr>
+<td>请求相应效率</td>
+<td>no</td>
+<td>ok</td>
+<td>no</td>
+<td>ok</td>
+</tr>
+</tbody></table>
+<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>随着前端技术的快速发展和对用户体验日益增长的需求，前后端分离模式势必将会成为主流趋势。无论是从开发模式的角度上来说，还是对团队成长的角度上来说，前后端分离都会带来益处，让我们一同拥抱前后端分离，打造精良的开发团队，迎接日益复杂的web应用开发需求。</p>
+<h1 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h1><ul>
+<li>张亚涛（前后端分离实践一）<blockquote>
+<p><a href="https://segmentfault.com/a/1190000009329474">https://segmentfault.com/a/1190000009329474</a></p>
+</blockquote>
+</li>
+<li>《浅谈架构之路：前后端分离模式》<blockquote>
+<p><a href="https://www.cnblogs.com/shanrengo/p/6397734.html">https://www.cnblogs.com/shanrengo/p/6397734.html</a></p>
+</blockquote>
+</li>
+</ul>
+<h1 id="版权声明"><a href="#版权声明" class="headerlink" title="版权声明"></a>版权声明</h1><p>Copyright by lixuguang<br>未经授权，严禁转载。如需转载，请<a href="mailto:lixuguang316@gmail.com">联系作者</a>。</p>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>前后端分离开发指南</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前后端分离开发规范</title>
+    <url>/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前后端分离开发规范"><a href="#前后端分离开发规范" class="headerlink" title="前后端分离开发规范"></a>前后端分离开发规范</h1><p>by lixg</p>
+<p>（本文所说的前后端工作皆站在工作内容本身，不与职称相关，下面皆如此。）</p>
+<h2 id="一、为什么要前后端分离"><a href="#一、为什么要前后端分离" class="headerlink" title="一、为什么要前后端分离"></a>一、为什么要前后端分离</h2><ol>
+<li>前后端专注于各自擅长的领域</li>
+<li>前端配置后端代码运行环境，节省搭建环境的时间</li>
+<li>明确前后端工作职责</li>
+<li>提高开发效率</li>
+<li>分离有助于前端、后端分别优化</li>
+</ol>
+<h2 id="二、前后端分离存在的问题"><a href="#二、前后端分离存在的问题" class="headerlink" title="二、前后端分离存在的问题"></a>二、前后端分离存在的问题</h2><ol>
+<li>前后端分离必须接口先行，无接口导致前后端关于接口的工作重复出现。</li>
+<li>接口对接方式不一致，各项目团队没有采用统一的接口对接方式，导致每次都要熟悉一种新的对接方式。</li>
+<li>数据传输格式不一致，导致每次都要重新熟悉，另外由于接口格式不一致还会引起其他未知问题，影响系统健壮性。</li>
+<li>人员比例问题，目前公司前后端比例不完全符合前后端分离开发的要求。</li>
+</ol>
+<p>为解决上述问题，提高前后端分离开发效率，特制定如下规范。</p>
+<h2 id="三、如何做分离"><a href="#三、如何做分离" class="headerlink" title="三、如何做分离"></a>三、如何做分离</h2><ol>
+<li>职责分离<ul>
+<li>前后端仅仅通过异步接口(AJAX/JSONP)来编程</li>
+<li>前后端都各自有自己的开发流程，构建工具，测试集合</li>
+<li>关注点分离，前后端变得相对独立并松耦合<br><img src="https://upload-images.jianshu.io/upload_images/2062729-cbc42c9b88dd22a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp" alt="前后端职责"></li>
+</ul>
+</li>
+</ol>
+<table>
+<thead>
+<tr>
+<th>后端</th>
+<th>前端</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>提供数据</td>
+<td>接收数据，展示数据</td>
+</tr>
+<tr>
+<td>处理业务逻辑</td>
+<td>处理渲染逻辑</td>
+</tr>
+<tr>
+<td>Server-side MVC架构</td>
+<td>Client-sideMV*架构</td>
+</tr>
+<tr>
+<td>代码运行在服务器上</td>
+<td>代码运行在浏览器上</td>
+</tr>
+</tbody></table>
+<ol start="2">
+<li>开发流程<ul>
+<li>前后端技术负责人约定好接口格式</li>
+<li>后端编写和维护接口文档，在 API 变化时更新接口文档 + MOCK平台</li>
+<li>后端根据接口文档进行接口开发</li>
+<li>前端根据接口文档 + MOCK平台进行开发</li>
+<li>开发完成后联调和提交测试</li>
+</ul>
+</li>
+</ol>
+<p>MOCK平台统一采用公司搭建的<a href="http://oapi.thunisoft.com/">YAPI平台</a></p>
+<p>YAPI平台可以对接SWAGGER工具进行自动构建MOCK服务<br><img src="https://img2018.cnblogs.com/blog/1201417/201906/1201417-20190601182052502-885579825.png" alt="前后端开发流程"><br>3. 规范原则<br>    - 接口返回数据即显示：前端仅做渲染逻辑处理<br>    - 渲染逻辑禁止跨多个接口调用<br>    - 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现<br>    - 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现</p>
+<h2 id="四、基本格式"><a href="#四、基本格式" class="headerlink" title="四、基本格式"></a>四、基本格式</h2><h3 id="接口定义参见《RESTFul-API的设计规范》"><a href="#接口定义参见《RESTFul-API的设计规范》" class="headerlink" title="接口定义参见《RESTFul API的设计规范》"></a>接口定义参见<a href="https://github.com/lixuguang/FEManage/blob/master/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83.md">《RESTFul API的设计规范》</a></h3><h3 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h3><p>GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：</p>
+<p><strong>GET请求：</strong></p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">xxx&#x2F;login?body&#x3D;&#123;&quot;username&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;captcha&quot;:&quot;scfd&quot;,&quot;rememberMe&quot;:1&#125;</span><br></pre></td></tr></table></figure>
+
+<h3 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h3><p>对于通用业务数据响应参照基本数据格式要求</p>
+<h4 id="响应基本数据格式"><a href="#响应基本数据格式" class="headerlink" title="响应基本数据格式"></a>响应基本数据格式</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h5 id="响应实体格式"><a href="#响应实体格式" class="headerlink" title="响应实体格式"></a>响应实体格式</h5><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;entity&quot;: &#123;</span><br><span class="line">            &quot;id&quot;: 1,</span><br><span class="line">            &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">            &quot;phone&quot;: &quot;XXX&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>entity: 响应返回的实体数据</em></p>
+<h5 id="响应列表格式"><a href="#响应列表格式" class="headerlink" title="响应列表格式"></a>响应列表格式</h5><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;: &quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p><em>list: 响应返回的列表数据</em></p>
+<h5 id="响应分页格式"><a href="#响应分页格式" class="headerlink" title="响应分页格式"></a>响应分页格式</h5><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 200,</span><br><span class="line">    &quot;msg&quot;:&quot;success&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;totalCount&quot;: 2, &#x2F;&#x2F; 总记录数</span><br><span class="line">        &quot;totalPage&quot;: 1 &#x2F;&#x2F; 总页数</span><br><span class="line">        &quot;pageNo&quot;: 1, &#x2F;&#x2F; 当前页码</span><br><span class="line">        &quot;pageSize&quot;: 10, &#x2F;&#x2F; 每页大小</span><br><span class="line">        &quot;list&quot;:[</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 1,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 2,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 3,</span><br><span class="line">                &quot;name&quot;: &quot;XXX&quot;,</span><br><span class="line">                &quot;code&quot;: &quot;XXX&quot;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<h4 id="响应特殊数据格式"><a href="#响应特殊数据格式" class="headerlink" title="响应特殊数据格式"></a>响应特殊数据格式</h4><p>对于特定组件数据格式由后端统一处理后返回前端，如（echart、ztree等组件）</p>
+<h4 id="特殊内容规范"><a href="#特殊内容规范" class="headerlink" title="特殊内容规范"></a>特殊内容规范</h4><h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><p>关于布尔类型，一律返回<code>BOOLEN</code>类型值</p>
+<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>关于日期类型，JSON数据传输中一律使用字符串格式时间戳，具体日期格式因业务而定</p>
+<h2 id="五、相关文章导读"><a href="#五、相关文章导读" class="headerlink" title="五、相关文章导读"></a>五、相关文章导读</h2><p><a href="https://github.com/lixuguang/FEManage/blob/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md">前后端分离开发指南-理论篇</a><br><a href="https://github.com/lixuguang/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5%20-%20%E4%BF%AE%E8%AE%A2%E7%89%88.md">前后端分离开发指南-实践篇</a></p>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>前后端分离开发规范</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端开发插件</title>
+    <url>/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><h2 id="Prettier-Code-formatter"><a href="#Prettier-Code-formatter" class="headerlink" title="Prettier - Code formatter"></a>Prettier - Code formatter</h2><p>格式化工具</p>
+<h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>校验规则</p>
+<h2 id="Vetur"><a href="#Vetur" class="headerlink" title="Vetur"></a>Vetur</h2><p>vue代码片段及代码美化</p>
+<h2 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h2><p>vue2 代码片段</p>
+<h2 id="vscode-fileheader"><a href="#vscode-fileheader" class="headerlink" title="vscode-fileheader"></a>vscode-fileheader</h2><p>文件注释</p>
+<h1 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; setting.json vscode配置文件</span><br><span class="line">&#123;</span><br><span class="line">    &quot;workbench.startupEditor&quot;: &quot;newUntitledFile&quot;,</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Program Files\\Git\\bin\\bash.exe&quot;, \\ 自行配置自己的环境地址</span><br><span class="line">    &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 2,</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">        &quot;**&#x2F;node_modules&quot;: true,</span><br><span class="line">        &quot;**&#x2F;bower_components&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;sync.gist&quot;: &quot;748b4cae5eb6e56d6997978ead096e8f&quot;,</span><br><span class="line">    &quot;breadcrumbs.enabled&quot;: true,</span><br><span class="line">    &quot;todohighlight.isEnable&quot;: false,</span><br><span class="line">    &quot;liveServer.settings.donotShowInfoMsg&quot;: true,</span><br><span class="line">    &quot;search.location&quot;: &quot;sidebar&quot;,</span><br><span class="line">    &quot;workbench.activityBar.visible&quot;: true,</span><br><span class="line">    &quot;window.menuBarVisibility&quot;: &quot;default&quot;,</span><br><span class="line">    &quot;workbench.statusBar.visible&quot;: true,</span><br><span class="line">    &quot;editor.snippetSuggestions&quot;: &quot;top&quot;,</span><br><span class="line">    &quot;editor.formatOnPaste&quot;: true,</span><br><span class="line">    &quot;workbench.colorTheme&quot;: &quot;Tiny Light&quot;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">        &quot;javascript&quot;,</span><br><span class="line">        &quot;javascriptreact&quot;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;html&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">            &quot;autoFix&quot;: true</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    &quot;prettier.eslintIntegration&quot;: true,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;code-runner.saveAllFilesBeforeRun&quot;: true,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.html&quot;: &quot;js-beautify-html&quot;,</span><br><span class="line">    &quot;vetur.format.defaultFormatter.js&quot;: &quot;vscode-typescript&quot;,</span><br><span class="line">    &quot;prettier.jsxSingleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.requireConfig&quot;: false,</span><br><span class="line">    &quot;prettier.arrowParens&quot;: &quot;always&quot;,</span><br><span class="line">    &quot;typescript.format.insertSpaceAfterSemicolonInForStatements&quot;: false,</span><br><span class="line">    &quot;prettier.stylelintIntegration&quot;: true,</span><br><span class="line">    &quot;prettier.singleQuote&quot;: true,</span><br><span class="line">    &quot;prettier.tslintIntegration&quot;: true,</span><br><span class="line">    &quot;eslint.provideLintTask&quot;: true,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;editor.mouseWheelZoom&quot;: true,</span><br><span class="line">    &quot;editor.tabCompletion&quot;: &quot;on&quot;,</span><br><span class="line">    &quot;editor.formatOnType&quot;: true,</span><br><span class="line">    &quot;eslint.alwaysShowStatus&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">        &quot;configFile&quot;: &quot;E:&#x2F;project&#x2F;xxjs&#x2F;fore-core&#x2F;.eslintrc.js&quot; &#x2F;&#x2F; 自行配置自己的项目地址</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fileheader.Author&quot;: &quot;Li.Xg&quot;, &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">    &quot;fileheader.LastModifiedBy&quot;: &quot;Li.Xg&quot; &#x2F;&#x2F; 自行配置自己的名称</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+]]></content>
+      <categories>
+        <category>前端开发规范</category>
+      </categories>
+      <tags>
+        <tag>前端开发插件</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>搞懂EventLoop</title>
+    <url>/2022/03/11/%E6%90%9E%E6%87%82EventLoop/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>EventLoop 翻译过来就是事件循环，那啥是事件循环啊，这个要从javascript是如何执行的说起。<br>要知道javascript是一个运行在浏览器或者Node环境的<em>单线程</em>执行的脚本语言，但是为了解决单线程阻塞的问题，这里就引入了事件循环的机制，也就是我们常说的异步特性。</p>
+<p>但是虽然都是JavaScript，都是事件循环，都有异步特性，但浏览器环境和Node环境的实现方式是不一样的，这里要先说明一下。<br>浏览器的事件循环是HTML定义的规范，而Node环境是利用libuv库实现的，这里我们先从浏览器的事件循环开始说。</p>
+<span id="more"></span>
+
+<h2 id="浏览器的事件循环"><a href="#浏览器的事件循环" class="headerlink" title="浏览器的事件循环"></a>浏览器的事件循环</h2><p>首先我们要知道，浏览器的事件循环是有这么两个部分构成，一个叫做主线程（main thread），另一个叫做调用栈（call-stack），所有的任务（Task）都会被放到调用栈里，等待主线程调用，这个怎么理解呢，打个比方，主线程就像是物流配送中的传送带，如果没有快递往上放的时候，它是空的，当有快递包裹放上去的时候，它就开始运行，而你购买的产品要放倒包裹里，然后包裹在放到传送带上，最终被送到你家里，这里的传送带就是主线程，包裹就是调用栈，而购买的产品就是任务，不知道这样解释是否能好理解一些。</p>
+<h3 id="同步、异步任务"><a href="#同步、异步任务" class="headerlink" title="同步、异步任务"></a>同步、异步任务</h3><p>JavaScript中的任务有两种，一种是同步任务，另一种是异步任务。</p>
+<ul>
+<li>同步任务会排着队，逐个执行</li>
+<li>异步任务在执行得到结果后，将回调函数添加到任务队列中，等着主线程空了再执行。</li>
+</ul>
+<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>栈，是一种数据结构，后进先出（LIFO），后入栈的先执行，执行完后出栈执行栈顶新的那个函数，直到栈空，像个瓶子，只有一头有口。</p>
+<h3 id="任务队列"><a href="#任务队列" class="headerlink" title="任务队列"></a>任务队列</h3><p>队列，也是一种数据结构，先进先出（FIFO），队头出，队尾进，先到先得，就像排队买东西，或者汽车排队过隧道。</p>
+<h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a>任务</h3><p>任务分为两种，一种叫做宏任务（MacroTask），另一种叫做微任务（MicroTask），首先他们都是<strong>异步队列</strong>中的任务，那它们之间是什么关系呢？简单说来就是微任务是VIP优先执行，全部微任务执行完之后才轮到普通用户宏任务执行，而且执行完一个后马上要看有没有新的微任务执行，有的话宏任务还得等着，就这样往复，看着像不像是在银行等着排队办业务的你（其实是我）。<br><img src="https://pic3.zhimg.com/80/v2-eba59eaab15f8a27c1b58f69513f0c0e_1440w.jpg" alt="JavaScript的执行流程"><br><img src="https://upload-images.jianshu.io/upload_images/18747821-d613fb9d7e538069.png" alt="宏任务与微任务"><br>那么哪些是宏任务，哪些是微任务呢？看下表吧。</p>
+<table>
+<thead>
+<tr>
+<th>宏任务</th>
+<th>微任务</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>setTimeout、setInterval、js主代码、setImmediate(Node)、requestAnimationFrame(浏览器)</td>
+<td>process.nextTick、Promise的then方法</td>
+</tr>
+</tbody></table>
+<h3 id="举个例子"><a href="#举个例子" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;6&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    resolve();</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;8&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;9&#x27;</span>);</span><br><span class="line">    process.nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line">        resolve();</span><br><span class="line">    &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;12&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
+
+<h4 id="分析一下"><a href="#分析一下" class="headerlink" title="分析一下"></a>分析一下</h4><p>JS 运行机制为<strong>从上而下</strong>，那么这里的执行顺序应该是什么样的呢？</p>
+<h5 id="第一轮循环："><a href="#第一轮循环：" class="headerlink" title="第一轮循环："></a>第一轮循环：</h5><p>1）、首先打印 1<br>2）、接下来是setTimeout是异步任务且是宏任务，加入宏任务暂且记为 setTimeout1<br>3）、接下来是 process 微任务 加入微任务队列 记为 process1<br>4）、接下来是 new Promise 里面直接 resolve(7) 所以打印 7 后面的then是微任务 记为 then1<br>5）、setTimeout 宏任务 记为 setTimeout2</p>
+<blockquote>
+<p>第一轮循环打印出的是 1 7<br>当前宏任务队列：setTimeout1, setTimeout2<br>当前微任务队列：process1, then1,</p>
+</blockquote>
+<h5 id="第二轮循环："><a href="#第二轮循环：" class="headerlink" title="第二轮循环："></a>第二轮循环：</h5><p>1）、执行所有微任务<br>2）、执行process1，打印出 6<br>3）、执行then1 打印出8<br>4）、微任务都执行结束了，开始执行第一个宏任务<br>5）、执行 setTimeout1 也就是 第 3 - 14 行<br>6）、首先打印出 2<br>7）、遇到 process 微任务 记为 process2<br>8）、new Promise中resolve 打印出 4<br>9）、then 微任务 记为 then2</p>
+<blockquote>
+<p>第二轮循环结束，当前打印出来的是 1 7 6 8 2 4<br>当前宏任务队列：setTimeout2<br>当前微任务队列：process2, then2</p>
+</blockquote>
+<h5 id="第三轮循环："><a href="#第三轮循环：" class="headerlink" title="第三轮循环："></a>第三轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行 process2 打印出 3<br>3）、执行 then2 打印出 5<br>4）、执行第一个宏任务，也就是执行 setTimeout2 对应代码中的 25 - 36 行<br>5）、首先打印出 9<br>6）、process 微任务 记为 process3<br>7）、new Promise执行resolve 打印出 11<br>8）、then 微任务 记为 then3</p>
+<blockquote>
+<p>第三轮循环结束，当前打印顺序为：1 7 6 8 2 4 3 5 9 11<br>当前宏任务队列为空<br>当前微任务队列：process3，then3</p>
+</blockquote>
+<h5 id="第四轮循环："><a href="#第四轮循环：" class="headerlink" title="第四轮循环："></a>第四轮循环：</h5><p>1）、执行所有的微任务<br>2）、执行process3 打印出 10<br>3）、执行then3 打印出 12</p>
+<p>代码执行结束：<br>最终打印顺序为：1 7 6 8 2 4 3 5 9 11 10 12</p>
+<h2 id="Node环境的循环机制"><a href="#Node环境的循环机制" class="headerlink" title="Node环境的循环机制"></a>Node环境的循环机制</h2><p>Node的Event loop一共分为<strong>6</strong>个阶段，每个细节具体如下：</p>
+<ul>
+<li><strong><code>timers</code></strong>: 执行setTimeout和setInterval中到期的callback。</li>
+<li><strong><code>pending callback</code></strong>: 上一轮循环中少数的callback会放在这一阶段执行。</li>
+<li><strong><code>idle, prepare</code></strong>: 仅在内部使用。</li>
+<li><strong><code>poll</code></strong>: 最重要的阶段，执行pending callback，在适当的情况下回阻塞在这个阶段。</li>
+<li><strong><code>check</code></strong>: 执行setImmediate(setImmediate()是将事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数)的callback。</li>
+<li><strong><code>close callbacks</code></strong>: 执行close事件的callback，例如socket.on(‘close’[,fn])或者http.server.on(‘close, fn)。</li>
+</ul>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/18/16860f8f8f7f053d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="Node EventLoop"></p>
+<p>具体细节如下：</p>
+<h3 id="timers"><a href="#timers" class="headerlink" title="timers"></a>timers</h3><p>执行setTimeout和setInterval中到期的callback，执行这两者回调需要设置一个毫秒数，理论上来说，应该是时间一到就立即执行callback回调，但是由于system的调度可能会延时，达不到预期时间。<br>以下是官网文档解释的例子：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncOperation</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Assume this takes 95ms to complete</span></span><br><span class="line">  fs.readFile(<span class="string">&#x27;/path/to/file&#x27;</span>, callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> timeoutScheduled = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> delay = <span class="built_in">Date</span>.now() - timeoutScheduled;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;delay&#125;</span>ms have passed since I was scheduled`</span>);</span><br><span class="line">&#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// do someAsyncOperation which takes 95 ms to complete</span></span><br><span class="line">someAsyncOperation(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> startCallback = <span class="built_in">Date</span>.now();</span><br><span class="line"></span><br><span class="line">  <span class="comment">// do something that will take 10ms...</span></span><br><span class="line">  <span class="keyword">while</span> (<span class="built_in">Date</span>.now() - startCallback &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    <span class="comment">// do nothing</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>当进入事件循环时，它有一个空队列（fs.readFile()尚未完成），因此定时器将等待剩余毫秒数，当到达95ms时，fs.readFile()完成读取文件并且其完成需要10毫秒的回调被添加到轮询队列并执行。<br>当回调结束时，队列中不再有回调，因此事件循环将看到已达到最快定时器的阈值，然后回到timers阶段以执行定时器的回调。<br>在此示例中，您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。</p>
+<h3 id="pending-callbacks"><a href="#pending-callbacks" class="headerlink" title="pending callbacks"></a>pending callbacks</h3><p>此阶段执行某些系统操作（例如TCP错误类型）的回调。 例如，如果TCP socket ECONNREFUSED在尝试connect时receives，则某些* nix系统希望等待报告错误。 这将在pending callbacks阶段执行。</p>
+<h3 id="poll"><a href="#poll" class="headerlink" title="poll"></a>poll</h3><p>该poll阶段有两个主要功能：</p>
+<ul>
+<li>执行I/O回调。</li>
+<li>处理轮询队列中的事件。</li>
+</ul>
+<p><strong>当事件循环进入poll阶段并且在timers中没有可以执行定时器时，将发生以下两种情况之一</strong><br>如果poll队列不为空，则事件循环将遍历其同步执行它们的callback队列，直到队列为空，或者达到system-dependent（系统相关限制）。</p>
+<p><strong>如果poll队列为空，则会发生以下两种情况之一</strong></p>
+<ul>
+<li>如果有setImmediate()回调需要执行，则会立即停止执行poll阶段并进入执行check阶段以执行回调。</li>
+<li>如果没有setImmediate()回到需要执行，poll阶段将等待callback被添加到队列中，然后立即执行。</li>
+</ul>
+<p><strong>当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。</strong></p>
+<h3 id="check"><a href="#check" class="headerlink" title="check"></a>check</h3><p>此阶段允许人员在poll阶段完成后立即执行回调。<br>如果poll阶段闲置并且script已排队setImmediate()，则事件循环到达check阶段执行而不是继续等待。<br>setImmediate()实际上是一个特殊的计时器，它在事件循环的一个单独阶段运行。它使用libuv API来调度在poll阶段完成后执行的回调。<br>通常，当代码被执行时，事件循环最终将达到poll阶段，它将等待传入连接，请求等。<br>但是，如果已经调度了回调setImmediate()，并且轮询阶段变为空闲，则它将结束并且到达check阶段，而不是等待poll事件。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;start&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer1&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise1&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timer2&#x27;</span>)</span><br><span class="line">  <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;promise2&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;promise3&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;end&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>如果Node版本是v11.x，那么执行结果和浏览器一致，结果如下：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>如果是v10版本上，那结果将会出现两种情况<br><strong>如果time2定时器已经在执行队列中了</strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">timer2</span><br><span class="line">promise1</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p><strong>如果time2定时器没有在执行对列中，执行结果为</strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">start</span><br><span class="line">end</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br></pre></td></tr></table></figure>
+
+<p>具体情况可以参考poll阶段的两种情况。</p>
+<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/19/1686530bcd4e456a~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp" alt="NodeEventLoop"></p>
+<h2 id="setImmediate-的setTimeout-的区别"><a href="#setImmediate-的setTimeout-的区别" class="headerlink" title="setImmediate() 的setTimeout()的区别"></a>setImmediate() 的setTimeout()的区别</h2><p><strong>setImmediate和setTimeout()是相似的，但根据它们被调用的时间以不同的方式表现。</strong></p>
+<ul>
+<li>setImmediate()设计用于在当前poll阶段完成后check阶段执行脚本 。</li>
+<li>setTimeout() 安排在经过最小（ms）后运行的脚本，在timers阶段执行。</li>
+</ul>
+<h3 id="举个例子-1"><a href="#举个例子-1" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p><strong>执行定时器的顺序将根据调用它们的上下文而有所不同。 如果从主模块中调用两者，那么时间将受到进程性能的限制。</strong><br><strong>其结果也不一致</strong></p>
+<p><strong>如果在I / O周期内移动两个调用，则始终首先执行立即回调：</strong></p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readFile(__filename, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;timeout&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line">  setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;immediate&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>其结果可以确定一定是immediate =&gt; timeout。<br>主要原因是在I/O阶段读取文件后，事件循环会先进入poll阶段，发现有setImmediate需要执行，会立即进入check阶段执行setImmediate的回调。<br>然后再进入timers阶段，执行setTimeout，打印timeout。</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">   ┌───────────────────────────┐</span><br><span class="line">┌─&gt;│           timers          │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │     pending callbacks     │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">│  │       idle, prepare       │</span><br><span class="line">│  └─────────────┬─────────────┘      ┌───────────────┐</span><br><span class="line">│  ┌─────────────┴─────────────┐      │   incoming:   │</span><br><span class="line">│  │           poll            │&lt;─────┤  connections, │</span><br><span class="line">│  └─────────────┬─────────────┘      │   data, etc.  │</span><br><span class="line">│  ┌─────────────┴─────────────┐      └───────────────┘</span><br><span class="line">│  │           check           │</span><br><span class="line">│  └─────────────┬─────────────┘</span><br><span class="line">│  ┌─────────────┴─────────────┐</span><br><span class="line">└──┤      close callbacks      │</span><br><span class="line">   └───────────────────────────┘</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="Process-nextTick"><a href="#Process-nextTick" class="headerlink" title="Process.nextTick()"></a>Process.nextTick()</h2><p>process.nextTick()虽然它是异步API的一部分，但未在图中显示。这是因为process.nextTick()从技术上讲，它不是事件循环的一部分。</p>
+<p>process.nextTick()方法将 callback 添加到next tick队列。 一旦当前事件轮询队列的任务全部完成，在next tick队列中的所有callbacks会被依次调用。</p>
+<p>换种理解方式：</p>
+<p><strong>当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。</strong></p>
+<h3 id="举个例子-2"><a href="#举个例子-2" class="headerlink" title="举个例子"></a>举个例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> bar;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setTimeout&#x27;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">setImmediate(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;setImmediate&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someAsyncApiCall</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  process.nextTick(callback);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">someAsyncApiCall(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;bar&#x27;</span>, bar); <span class="comment">// 1</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">bar = <span class="number">1</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>在NodeV10中上述代码执行可能有两种答案，一种为：</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line">setImmediate</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>另一种为</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">bar <span class="number">1</span></span><br><span class="line">setImmediate</span><br><span class="line"><span class="built_in">setTimeout</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>无论哪种，始终都是先执行process.nextTick(callback)，打印bar 1。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>计算机通识</category>
+      </categories>
+      <tags>
+        <tag>EventLoop</tag>
+        <tag>事件驱动</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>搭建Docker私有仓库</title>
+    <url>/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/</url>
+    <content><![CDATA[<h1 id="搭建Docker私有仓库"><a href="#搭建Docker私有仓库" class="headerlink" title="搭建Docker私有仓库"></a>搭建Docker私有仓库</h1><p>利用registry搭建私有仓库</p>
+<h2 id="下载registry"><a href="#下载registry" class="headerlink" title="下载registry"></a>下载registry</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker pull registry</span><br></pre></td></tr></table></figure>
+
+<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;etc&#x2F;docker&#x2F;doemon.json</span><br><span class="line"># 配置 &#39;insecure-registry&#39;</span><br></pre></td></tr></table></figure>
+<h2 id="重启docker"><a href="#重启docker" class="headerlink" title="重启docker"></a>重启docker</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">systemctl restart docker</span><br></pre></td></tr></table></figure>
+
+<h2 id="创建registry容器（关联私有仓库配置）"><a href="#创建registry容器（关联私有仓库配置）" class="headerlink" title="创建registry容器（关联私有仓库配置）"></a>创建registry容器（关联私有仓库配置）</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker run -d -p 5000:5000 --name registry registry:latest</span><br></pre></td></tr></table></figure>
+
+<h2 id="推送镜像到私有仓"><a href="#推送镜像到私有仓" class="headerlink" title="推送镜像到私有仓"></a>推送镜像到私有仓</h2><ul>
+<li><p>备份镜像(172.16.12.134:5000 私有仓地址)</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker tag ubuntu:latest 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>推送</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker push 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+<li><p>下载</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">docker pull 172.16.12.134:5000&#x2F;my_ubuntu</span><br></pre></td></tr></table></figure></li>
+</ul>
+]]></content>
+      <categories>
+        <category>Docker</category>
+      </categories>
+      <tags>
+        <tag>registry</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>数组方法哪些有副作用，一目了然！</title>
+    <url>/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/</url>
+    <content><![CDATA[<blockquote>
+<p>作者：李旭光<br>引用请标明出处</p>
+</blockquote>
+<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>今天一个小兄弟微信给我发了个消息，说是今天面试，面试官问了个比较基础的问题，没答好，我就问他问了什么，他说，数组有哪些方法会改变原来的值，他说他就说了3、4个，还不确定对不对，我想了想说其实列个表就很容易记住了，于是便有了下面这个表格。 </p>
+<span id="more"></span>
+<h2 id="关于数组的那些方法"><a href="#关于数组的那些方法" class="headerlink" title="关于数组的那些方法"></a>关于数组的那些方法</h2><p>其实上面的问题：</p>
+<blockquote>
+<p>数组有哪些方法会改变原来的值</p>
+</blockquote>
+<p>现在有个词挺火的，叫做纯函数，什么是纯函数呢，就是没有副作用，什么是没有副作用呢，就是结果是幂等的，等等….怎么越来越绕，简单来说，就是这个函数干几次都是一样的结果，出了函数就不会有任何影响，他就像一台加工机器，输入原料，输出产品，没有任何其他输出材料，比如废气之类影响大气的东西。好吧，你不明白也没关系，反正我对上面这个问题的理解就变成了</p>
+<blockquote>
+<p>数组的哪些方法是没有副作用的。</p>
+</blockquote>
+<p>要说有哪些方法是有副作用，首先你得知道有哪些方法，</p>
+<p>比如，push，pop，shift，unshift，splice 这些别跟我说你不知道，这些都是常用的数组操作，出栈入栈，<br>还有什么呢，数组的排序啊，比如sort，reverse，还有一个用的不多，fill是用一个固定值填充数组的起始元素到终止元素，这些呢都是在原数组上进行操作，所以肯定是影响数组的值的，也就是说有副作用的。</p>
+<p>那么哪些没有副作用呢，简单说其他的都没有，<br>啥！？，是的，其他的都没有。。。所以记得上面这些就好了呀，怎么样，是不简单。</p>
+<p>那还剩下啥？</p>
+<ul>
+<li>concat 返回的是心数组，</li>
+<li>join 返回的是字符串，</li>
+<li>indexOf和lastIndexOf返回的是索引，</li>
+<li>slice 返回的是切割后的新数组，别把它和splice混淆了哈，</li>
+<li>entries 返回一个新的Array Iterator对象，</li>
+<li>keys 返回一个新的包含全部Array索引的 Iterator对象，</li>
+<li>values 有keys就有values，返回一个新的包含全部Array值的 Iterator对象，</li>
+<li>every、some、includes 返回 布尔值，</li>
+<li>filter，map 返回新数组，</li>
+<li>reducer 有点神奇 返回累加值，</li>
+<li>find、findIndex 找元素 一个返回第一个符合的元素本身，一个返回他的索引，</li>
+<li>最后还有个flat，展平了数组，</li>
+<li>forEach 遍历数组， 这么一数起来，方法还真不少呢！</li>
+</ul>
+<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>想要记住所有的方法呢，不下点功夫是不行的，但是想要记住有副作用的，然后排除掉他们的话，还是容易的，最后做个表，方便直观的来看。</p>
+<table>
+<thead>
+<tr>
+<th>方法</th>
+<th>作用</th>
+<th>返回结果</th>
+<th>有无副作用</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>push</td>
+<td>数组尾部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>pop</td>
+<td>数组尾部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>shift</td>
+<td>数组头部插入元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>unshift</td>
+<td>数组头部删除元素</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>splice</td>
+<td>增删改数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>sort</td>
+<td>数组排序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>reverse</td>
+<td>数组反序</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>填充数组</td>
+<td>改变了的原数组</td>
+<td>有</td>
+</tr>
+<tr>
+<td>concat</td>
+<td>连结数组</td>
+<td>合并的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>join</td>
+<td>合并数组为字符串</td>
+<td>字符串</td>
+<td>无</td>
+</tr>
+<tr>
+<td>indexOf</td>
+<td>查索引</td>
+<td>第一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>lastIndexOf</td>
+<td>查索引</td>
+<td>最后一个索引</td>
+<td>无</td>
+</tr>
+<tr>
+<td>slice</td>
+<td>截取数组</td>
+<td>截取的新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>entries</td>
+<td>迭代数组</td>
+<td>迭代器对象</td>
+<td>无</td>
+</tr>
+<tr>
+<td>keys</td>
+<td>迭代数组的key</td>
+<td>全部的key</td>
+<td>无</td>
+</tr>
+<tr>
+<td>values</td>
+<td>迭代数组的value</td>
+<td>全部的value</td>
+<td>无</td>
+</tr>
+<tr>
+<td>every</td>
+<td>每个都满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>some</td>
+<td>有一些满足</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>includes</td>
+<td>包含某元素</td>
+<td>布尔值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>filter</td>
+<td>过滤数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>map</td>
+<td>加工数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>reducer</td>
+<td>迭代数组</td>
+<td>累加值</td>
+<td>无</td>
+</tr>
+<tr>
+<td>find</td>
+<td>查找元素</td>
+<td>第一个元素或undifined</td>
+<td>无</td>
+</tr>
+<tr>
+<td>findIndex</td>
+<td>查找元素</td>
+<td>第一个元素的index</td>
+<td>无</td>
+</tr>
+<tr>
+<td>flat</td>
+<td>展平数组</td>
+<td>新数组</td>
+<td>无</td>
+</tr>
+<tr>
+<td>forEach</td>
+<td>遍历数组</td>
+<td>void</td>
+<td>无</td>
+</tr>
+</tbody></table>
+<p>就到这里，怎么样，清楚了吧。</p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>计算机通识</category>
+      </categories>
+      <tags>
+        <tag>面试</tag>
+        <tag>数组</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>服务器高危端口列表</title>
+    <url>/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/</url>
+    <content><![CDATA[<h1 id="服务器高危端口列表"><a href="#服务器高危端口列表" class="headerlink" title="服务器高危端口列表"></a>服务器高危端口列表</h1><table>
+<thead>
+<tr>
+<th>协议</th>
+<th>端口</th>
+<th>服务</th>
+<th>渗透测试</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>tcp</td>
+<td>20,21</td>
+<td>FTP（文件传输协议）</td>
+<td>允许匿名的上传下载,爆破,嗅探,win提权,远程执行(proftpd 1.3.5),各类后门(proftpd,vsftp 2.3.4)</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>22</td>
+<td>SSH （安全外壳协议 ）</td>
+<td>可根据已搜集到的信息尝试爆破,v1版本可中间人,ssh隧道及内网代理转发,文件传输等等</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>23</td>
+<td>Telnet （ 远程终端协议）</td>
+<td>爆破,嗅探,一般常用于路由,交换登陆,可尝试弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>25</td>
+<td>SMTP（简单邮件传输协议）</td>
+<td>邮件伪造,vrfy/expn查询邮件用户信息,可使用smtp-user-enum工具来自动跑</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>53</td>
+<td>DNS（域名系统）</td>
+<td>允许区域传送,dns劫持,缓存投毒,欺骗以及各种基于dns隧道的远控</td>
+</tr>
+<tr>
+<td>tcp/udp</td>
+<td>69</td>
+<td>TFTP （简单文件传送协议 ）</td>
+<td>尝试下载目标及其的各类重要配置文件</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>80-89,443,8440-8450,8080-8089</td>
+<td>各种常用的Web服务端口,</td>
+<td>可尝试经典的topn,vpn,owa,webmail,目标oa,各类Java控制台,各类服务器Web管理面板,各类Web中间件漏洞利用,各类Web框架漏洞利用等等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>110</td>
+<td>POP3（邮局协议版本3 ）</td>
+<td>可尝试爆破,嗅探</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>111,2049</td>
+<td>NFS（网络文件系统）</td>
+<td>权限配置不当</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>137,139,445</td>
+<td>SMB（NETBIOS协议）</td>
+<td>可尝试爆破以及smb自身的各种远程执行类漏洞利用,如,ms08-067,ms17-010,嗅探等……</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>143</td>
+<td>IMAP（邮件访问协议）</td>
+<td>可尝试爆破</td>
+</tr>
+<tr>
+<td>udp</td>
+<td>161</td>
+<td>SNMP（简单网络管理协议）</td>
+<td>爆破默认团队字符串,搜集目标内网信息</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>389</td>
+<td>LDAP（ 轻量目录访问协议 ）</td>
+<td>ldap注入,允许匿名访问,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>512,513,514</td>
+<td>Linux rexec （远程登录）</td>
+<td>可爆破,rlogin登陆</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>873</td>
+<td>Rsync （数据镜像备份工具）</td>
+<td>匿名访问,文件上传</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1194</td>
+<td>OpenVPN（虚拟专用通道）</td>
+<td>想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1352</td>
+<td>Lotus（Lotus软件）</td>
+<td>弱口令,信息泄漏,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1433</td>
+<td>SQL Server（数据库管理系统）</td>
+<td>注入,提权,sa弱口令,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1521</td>
+<td>Oracle（甲骨文数据库）</td>
+<td>tns爆破,注入,弹shell…</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1500</td>
+<td>ISPmanager（ 主机控制面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>1723</td>
+<td>PPTP（点对点隧道协议 ）</td>
+<td>爆破,想办法钓VPN账号,进内网</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2082,2083</td>
+<td>cPanel （虚拟机控制系统 ）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2181</td>
+<td>ZooKeeper（分布式系统的可靠协调系统 ）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>2601,2604</td>
+<td>Zebra （zebra路由）</td>
+<td>默认密码zerbra</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3128</td>
+<td>Squid （代理缓存服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3312,3311</td>
+<td>kangle（web服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3306</td>
+<td>MySQL（数据库）</td>
+<td>注入,提权,爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3389</td>
+<td>Windows rdp（桌面协议）</td>
+<td>shift后门[需要03以下的系统],爆破,ms12-020</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>3690</td>
+<td>SVN（开放源代码的版本控制系统）</td>
+<td>svn泄露,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>4848</td>
+<td>GlassFish（应用服务器）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5000</td>
+<td>Sybase/DB2（数据库）</td>
+<td>爆破,注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5432</td>
+<td>PostgreSQL（数据库）</td>
+<td>爆破,注入,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5900,5901,5902</td>
+<td>VNC（虚拟网络控制台，远控）</td>
+<td>弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>5984</td>
+<td>CouchDB（数据库）</td>
+<td>未授权导致的任意指令执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>6379</td>
+<td>Redis（数据库）</td>
+<td>可尝试未授权访问,弱口令爆破</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7001,7002</td>
+<td>WebLogic（WEB应用系统）</td>
+<td>Java反序列化,弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>7778</td>
+<td>Kloxo（虚拟主机管理系统）</td>
+<td>主机面板登录</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8000</td>
+<td>Ajenti（Linux服务器管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8443</td>
+<td>Plesk（虚拟主机管理面板）</td>
+<td>弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8069</td>
+<td>Zabbix （系统网络监视）</td>
+<td>远程执行,SQL注入</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>8080-8089</td>
+<td>Jenkins,JBoss （应用服务器）</td>
+<td>反序列化,控制台弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9080-9081,9090</td>
+<td>WebSphere（应用服务器）</td>
+<td>Java反序列化/弱口令</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>9200,9300</td>
+<td>ElasticSearch （Lucene的搜索服务器）</td>
+<td>远程执行</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>11211</td>
+<td>Memcached（缓存系统）</td>
+<td>未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>27017,27018</td>
+<td>MongoDB（数据库）</td>
+<td>爆破,未授权访问</td>
+</tr>
+<tr>
+<td>tcp</td>
+<td>50070,50030</td>
+<td>Hadoop（分布式文件系统）</td>
+<td>默认端口未授权访问</td>
+</tr>
+</tbody></table>
+]]></content>
+      <categories>
+        <category>Infrastructure</category>
+      </categories>
+      <tags>
+        <tag>port</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>架构实践</title>
+    <url>/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/</url>
+    <content><![CDATA[<h1 id="架构实践"><a href="#架构实践" class="headerlink" title="架构实践"></a>架构实践</h1><h2 id="架构设计内容一览"><a href="#架构设计内容一览" class="headerlink" title="架构设计内容一览"></a>架构设计内容一览</h2><h3 id="应用架构设计"><a href="#应用架构设计" class="headerlink" title="应用架构设计"></a>应用架构设计</h3><ul>
+<li>Transaction执行控制（在线/批处理路径和控制）</li>
+<li>Session控制</li>
+<li>死锁控制</li>
+<li>接口处理流程(适配器设置/文件备份)</li>
+<li>命名规范(实例/SID等)</li>
+<li>中间件参数 (初始化参数等)</li>
+<li>认证(处理流程/错误处理)</li>
+<li>帐户(用户ID体系/权限管理/申请方式)</li>
+</ul>
+<h3 id="开发架构设计"><a href="#开发架构设计" class="headerlink" title="开发架构设计"></a>开发架构设计</h3><ul>
+<li>系统景观(各种环境名称、利用方法等）</li>
+<li>转运路线(转运路线/转运工具/承认方式)</li>
+<li>开发账户(用户ID体系/权限管理/申请方式)</li>
+<li>开发终端设置(在线批处理开发工具/目录等)</li>
+<li>开发资源管理</li>
+<li>表单、协作工具的利用方法（表单/接口ID定义规则）</li>
+<li>开发和验证备份(处理流程/文件清除/周期)</li>
+<li>数据屏蔽(処理概要/屏蔽利用规则/対象/开发环境搭建方法）</li>
+</ul>
+<h3 id="运维架构设计"><a href="#运维架构设计" class="headerlink" title="运维架构设计"></a>运维架构设计</h3><ul>
+<li>监测规范(方式/周期/対象)</li>
+<li>审计和错误日志(日志级别/日志保留时效/删除时效)</li>
+<li>生产环境和调研环境的备份(处理流程/删除时效/周期)</li>
+<li>加密处理(安装位置、加密规则、记录水平加密方法)</li>
+<li>云安全设定</li>
+<li>增加功能设计</li>
+</ul>
+<h3 id="基础设施"><a href="#基础设施" class="headerlink" title="基础设施"></a>基础设施</h3><ul>
+<li>网络设计(虚拟网/子网/URL/负载均衡访问控制/白名单)</li>
+<li>云设计(实例/NFS/IAM)</li>
+<li>存储设计 (BlockVolume/FileStorage/ObjectStorage/数据配置/数据圧縮方法)</li>
+<li>时间DNS同步化(OCI設定)</li>
+<li>OS参数设定</li>
+<li>Docker参数设定</li>
+<li>高可用切换 (処理方式、设定参数考量)</li>
+<li>打补丁(打补丁/执行规范)</li>
+<li>虚拟桌面设定</li>
+</ul>
+]]></content>
+      <categories>
+        <category>架构</category>
+      </categories>
+      <tags>
+        <tag>架构</tag>
+      </tags>
+  </entry>
+  <entry>
+    <title>前端常见知识点整理 ---- 网络安全（2）</title>
+    <url>/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/</url>
+    <content><![CDATA[<h1 id="前端常见知识点整理-—-网络安全（2）"><a href="#前端常见知识点整理-—-网络安全（2）" class="headerlink" title="前端常见知识点整理 —- 网络安全（2）"></a>前端常见知识点整理 —- 网络安全（2）</h1><h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。</p>
+<p>而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。</p>
+<p>很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。</p>
+<h3 id="SQL-注入原理"><a href="#SQL-注入原理" class="headerlink" title="SQL 注入原理"></a>SQL 注入原理</h3><p>下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。</p>
+<p>考虑以下简单的管理员登录表单：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form action&#x3D;&quot;&#x2F;login&quot; method&#x3D;&quot;POST&quot;&gt;</span><br><span class="line">    &lt;p&gt;Username: &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;username&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;Password: &lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">    &lt;p&gt;&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;登陆&quot; &#x2F;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
+
+<p>后端的 SQL 语句可能是如下这样的：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">let querySQL &#x3D; &#96;</span><br><span class="line">    SELECT *</span><br><span class="line">    FROM user</span><br><span class="line">    WHERE username&#x3D;&#39;$&#123;username&#125;&#39;</span><br><span class="line">    AND psw&#x3D;&#39;$&#123;password&#125;&#39;</span><br><span class="line">&#96;;</span><br><span class="line">&#x2F;&#x2F; 接下来就是执行 sql 语句...</span><br></pre></td></tr></table></figure>
+
+<p>目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 <code>zoumiaojiang&#39; OR 1 = 1 --</code>，密码随意输入，就可以直接登入系统了。WFT!</p>
+<p>冷静下来思考一下，我们之前预想的真实 SQL 语句是:</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; AND psw&#x3D;&#39;mypassword&#39;</span><br></pre></td></tr></table></figure>
+
+<p>可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1 --&#39; AND psw&#x3D;&#39;xxxx&#39;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>在 SQL 中，<code>--</code> 是注释后面的内容的意思，所以查询语句就变成了：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">SELECT * FROM user WHERE username&#x3D;&#39;zoumiaojiang&#39; OR 1 &#x3D; 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。</p>
+<h3 id="如何预防-SQL-注入"><a href="#如何预防-SQL-注入" class="headerlink" title="如何预防 SQL 注入"></a>如何预防 SQL 注入</h3><p>防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项：</p>
+<ul>
+<li><p><strong>严格限制Web应用的数据库的操作权限</strong>，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</p>
+</li>
+<li><p><strong>后端代码检查输入的数据是否符合预期</strong>，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</p>
+</li>
+<li><p><strong>对进入数据库的特殊字符（<code>&#39;，&quot;，\，&lt;，&gt;，&amp;，*，;</code> 等）进行转义处理</strong>，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。</p>
+</li>
+<li><p><strong>所有的查询语句建议使用数据库提供的参数化查询接口</strong>，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。</p>
+</li>
+</ul>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">mysql.query(&#96;SELECT * FROM user WHERE username &#x3D; ? AND psw &#x3D; ?&#96;, [username, psw]);</span><br></pre></td></tr></table></figure>
+
+<ul>
+<li><p><strong>在应用发布之前建议使用专业的 SQL 注入检测工具进行检测</strong>，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。</p>
+</li>
+<li><p><strong>避免网站打印出 SQL 错误信息</strong>，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。</p>
+</li>
+<li><p><strong>不要过于细化返回的错误信息</strong>，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。</p>
+</li>
+</ul>
+<p>碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？</p>
+<h2 id="命令行注入"><a href="#命令行注入" class="headerlink" title="命令行注入"></a>命令行注入</h2><p>命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例：</p>
+<p>假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repo</span><br><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">exec(&#96;git clone $&#123;params.repo&#125; &#x2F;some&#x2F;path&#96;);</span><br></pre></td></tr></table></figure>
+
+<p>这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。</p>
+<p>如果 <code>params.repo</code> 传入的是 <code>https://github.com/zoumiaojiang/zoumiaojiang.github.io.git</code> 当然没问题了。<br>可是如果 params.repo 传入的是 <code>https://github.com/xx/xx.git &amp;&amp; rm -rf /* &amp;&amp;</code> 恰好你的服务是用 <code>root</code> 权限起的就惨了。</p>
+<p>具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情：</p>
+<ul>
+<li>后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。</li>
+<li>在调用系统命令前对所有传入参数进行命令行参数转义过滤。</li>
+<li>不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 <code>shell-escape</code> npm 包。</li>
+</ul>
+<p>还是前面的例子，我们可以做到如下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const exec &#x3D; require(&#39;mz&#x2F;child_process&#39;).exec;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 借助 shell-escape npm 包解决参数转义过滤问题</span><br><span class="line">const shellescape &#x3D; require(&#39;shell-escape&#39;);</span><br><span class="line"></span><br><span class="line">let params &#x3D; &#123;&#x2F;* 用户输入的参数 *&#x2F;&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 先过滤一下参数，让参数符合预期</span><br><span class="line">if (!&#x2F;正确的表达式&#x2F;.test(params.repo)) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let cmd &#x3D; shellescape([</span><br><span class="line">    &#39;git&#39;,</span><br><span class="line">    &#39;clone&#39;,</span><br><span class="line">    params.repo,</span><br><span class="line">    &#39;&#x2F;some&#x2F;path&#39;</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; cmd 的值: git clone &#39;https:&#x2F;&#x2F;github.com&#x2F;xx&#x2F;xx.git &amp;&amp; rm -rf &#x2F; &amp;&amp;&#39; &#x2F;some&#x2F;path</span><br><span class="line">&#x2F;&#x2F; 这样就不会被注入成功了。</span><br><span class="line">exec(cmd);</span><br></pre></td></tr></table></figure>
+<p><strong>无论是在何种后端语言环境中，凡是涉及到代码调用系统 shell 命令的时候都一定要谨慎。</strong></p>
+<h2 id="DDoS-攻击"><a href="#DDoS-攻击" class="headerlink" title="DDoS 攻击"></a>DDoS 攻击</h2><p>DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。</p>
+<p>DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个：</p>
+<ul>
+<li>深仇大恨，就是要干死你</li>
+<li>敲诈你，不给钱就干你</li>
+<li>忽悠你，不买我防火墙服务就会有“人”继续干你</li>
+</ul>
+<p>也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。</p>
+<h3 id="网络层-DDoS"><a href="#网络层-DDoS" class="headerlink" title="网络层 DDoS"></a>网络层 DDoS</h3><p>网络层 DDos 攻击包括 <code>SYN Flood</code>、<code>ACK Flood</code>、<code>UDP Flood</code>、<code>ICMP Flood</code> 等。</p>
+<h4 id="SYN-Flood-攻击"><a href="#SYN-Flood-攻击" class="headerlink" title="SYN Flood 攻击"></a>SYN Flood 攻击</h4><p>SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。</p>
+<h4 id="ACK-Flood-攻击"><a href="#ACK-Flood-攻击" class="headerlink" title="ACK Flood 攻击"></a>ACK Flood 攻击</h4><p>ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。</p>
+<h4 id="UDP-Flood-攻击"><a href="#UDP-Flood-攻击" class="headerlink" title="UDP Flood 攻击"></a>UDP Flood 攻击</h4><p>UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。</p>
+<h4 id="ICMP-Flood-攻击"><a href="#ICMP-Flood-攻击" class="headerlink" title="ICMP Flood 攻击"></a>ICMP Flood 攻击</h4><p>ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。</p>
+<h3 id="网络层-DDoS-防御"><a href="#网络层-DDoS-防御" class="headerlink" title="网络层 DDoS 防御"></a>网络层 DDoS 防御</h3><p>网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击：</p>
+<ul>
+<li>网络架构上做好优化，采用负载均衡分流。</li>
+<li>确保服务器的系统文件是最新的版本，并及时更新系统补丁。</li>
+<li>添加抗 DDos 设备，进行流量清洗。</li>
+<li>限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。</li>
+<li>限制单 IP 请求频率。</li>
+<li>防火墙等防护设置禁止 ICMP 包等。</li>
+<li>严格限制对外开放的服务器的向外访问。</li>
+<li>运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。</li>
+<li>关闭不必要的服务。</li>
+<li>认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。</li>
+<li>限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。- </li>
+</ul>
+<h3 id="应用层-DDoS"><a href="#应用层-DDoS" class="headerlink" title="应用层 DDoS"></a>应用层 DDoS</h3><p>应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。</p>
+<h4 id="CC-攻击"><a href="#CC-攻击" class="headerlink" title="CC 攻击"></a>CC 攻击</h4><p>当时绿盟为了防御 DDoS 攻击研发了一款叫做 <code>Collapasar</code> 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 <code>Challenge Collapasar</code> 攻击工具（简称 CC）。</p>
+<p>CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。</p>
+<h4 id="DNS-Flood"><a href="#DNS-Flood" class="headerlink" title="DNS Flood"></a>DNS Flood</h4><p>DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。</p>
+<p>根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。</p>
+<h4 id="HTTP-慢速连接攻击"><a href="#HTTP-慢速连接攻击" class="headerlink" title="HTTP 慢速连接攻击"></a>HTTP 慢速连接攻击</h4><p>针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。</p>
+<h3 id="应用层-DDoS-防御"><a href="#应用层-DDoS-防御" class="headerlink" title="应用层 DDoS 防御"></a>应用层 DDoS 防御</h3><ul>
+<li>判断 User-Agent 字段（不可靠，因为可以随意构造）</li>
+<li>针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠)</li>
+<li>关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。</li>
+<li>请求中添加验证码，比如请求中有数据库操作的时候。</li>
+<li>编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。</li>
+<li>加钱堆机器。。</li>
+<li>报警。。</li>
+</ul>
+<p>应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。</p>
+<h3 id="其他-DDoS-攻击"><a href="#其他-DDoS-攻击" class="headerlink" title="其他 DDoS 攻击"></a>其他 DDoS 攻击</h3><p>发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。</p>
+<h4 id="利用-XSS"><a href="#利用-XSS" class="headerlink" title="利用 XSS"></a>利用 XSS</h4><p>举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。</p>
+<h4 id="来自-P2P-网络攻击"><a href="#来自-P2P-网络攻击" class="headerlink" title="来自 P2P 网络攻击"></a>来自 P2P 网络攻击</h4><p>大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。<br>高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。</p>
+<h3 id="DDoS-最后总结"><a href="#DDoS-最后总结" class="headerlink" title="DDoS 最后总结"></a>DDoS 最后总结</h3><p>DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。</p>
+<h2 id="流量劫持"><a href="#流量劫持" class="headerlink" title="流量劫持"></a>流量劫持</h2><p>流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。</p>
+<h3 id="DNS-劫持"><a href="#DNS-劫持" class="headerlink" title="DNS 劫持"></a>DNS 劫持</h3><p>DNS 劫持，也叫做域名劫持，可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了</strong>」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。</p>
+<p>这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事：</p>
+<ul>
+<li>取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。</li>
+<li>可以跟劫持区域的电信运营商进行投诉反馈。</li>
+<li>如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。</li>
+</ul>
+<h3 id="HTTP-劫持"><a href="#HTTP-劫持" class="headerlink" title="HTTP 劫持"></a>HTTP 劫持</h3><p>HTTP 劫持您可以这么理解，「<strong>你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告</strong>」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。</p>
+<p>HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。</p>
+<h2 id="服务器漏洞"><a href="#服务器漏洞" class="headerlink" title="服务器漏洞"></a>服务器漏洞</h2><p>服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。</p>
+<h3 id="越权操作漏洞"><a href="#越权操作漏洞" class="headerlink" title="越权操作漏洞"></a>越权操作漏洞</h3><p>如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断</p>
+<p>以下是一段有漏洞的后端示意代码：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+
+<p>以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞</p>
+<h3 id="越权操作漏洞防御"><a href="#越权操作漏洞防御" class="headerlink" title="越权操作漏洞防御"></a>越权操作漏洞防御</h3><p>如下这么改进一下：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; ctx 为请求的 context 上下文</span><br><span class="line">let msgId &#x3D; ctx.params.msgId;</span><br><span class="line">let userId &#x3D; ctx.session.userId; &#x2F;&#x2F; 从会话中取出当前登陆的 userId</span><br><span class="line"></span><br><span class="line">mysql.query(</span><br><span class="line">    &#39;SELECT * FROM msg_table WHERE msg_id &#x3D; ? AND user_id &#x3D; ?&#39;,</span><br><span class="line">    [msgId, userId]</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
+<p>嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。</p>
+<h3 id="目录遍历漏洞"><a href="#目录遍历漏洞" class="headerlink" title="目录遍历漏洞"></a>目录遍历漏洞</h3><p>目录遍历漏洞指通过在 <code>URL</code> 或参数中构造 <code>../</code>，<code>./</code> 和类似的跨父目录字符串的 <code>ASCII</code> 编码、<code>unicode</code> 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。</p>
+<p>目录遍历漏洞原理：程序没有充分过滤用户输入的 <code>../</code> 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个<code>..</code> 符号，不断向上跳转，最终停留在根 <code>/</code>，通过绝对路径去读取任意文件。</p>
+<p>目录遍历漏洞几个示例和测试，一般构造 <code>URL</code> 然后使用浏览器直接访问，或者使用 <code>Web</code> 漏洞扫描工具检测，当然也可以自写程序测试。</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;..&#x2F;etc&#x2F;passwd</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini</span><br><span class="line"></span><br><span class="line"># 借助 %00 空字符截断是一个比较经典的攻击手法</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;some&#x2F;path?file&#x3D;..&#x2F;..&#x2F;Windows&#x2F;system.ini%00.js</span><br><span class="line"></span><br><span class="line"># 使用了 IIS 的脚本目录来移动目录并执行指令</span><br><span class="line">http:&#x2F;&#x2F;somehost.com&#x2F;scripts&#x2F;..%5c..&#x2F;Windows&#x2F;System32&#x2F;cmd.exe?&#x2F;c+dir+c:\</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<h4 id="目录遍历漏洞防御"><a href="#目录遍历漏洞防御" class="headerlink" title="目录遍历漏洞防御"></a>目录遍历漏洞防御</h4><p>方法就是需要对 URL 或者参数进行 ../，./ 等字符的转义过滤。</p>
+<h3 id="物理路径泄漏"><a href="#物理路径泄漏" class="headerlink" title="物理路径泄漏"></a>物理路径泄漏</h3><p>物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。</p>
+<h4 id="物理路径泄漏防御"><a href="#物理路径泄漏防御" class="headerlink" title="物理路径泄漏防御"></a>物理路径泄漏防御</h4><p>防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。</p>
+<h3 id="源码暴露漏洞"><a href="#源码暴露漏洞" class="headerlink" title="源码暴露漏洞"></a>源码暴露漏洞</h3><p>和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">|- project</span><br><span class="line">    |- src</span><br><span class="line">    |- static</span><br><span class="line">    |- ...</span><br><span class="line">|- server.js</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>你想要将 <code>static</code> 的文件夹配成静态资源目录，你应该会在 <code>server.js</code> 做如下配置：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">const Koa &#x3D; require(&#39;koa&#39;);</span><br><span class="line">const serve &#x3D; require(&#39;koa-static&#39;);</span><br><span class="line">const app &#x3D; new Koa();</span><br><span class="line"></span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#x2F;static&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>但是如果配错了静态资源的目录，可能就出大事了，比如：</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; ...</span><br><span class="line">app.use(serve(__dirname + &#39;&#x2F;project&#39;));</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。</p>
+<p>最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。</p>
+<p>转载自：<a href="https://zoumiaojiang.com/article/common-web-security/">https://zoumiaojiang.com/article/common-web-security/</a></p>
+]]></content>
+      <categories>
+        <category>前端技术</category>
+        <category>前端常见知识点整理</category>
+      </categories>
+      <tags>
+        <tag>网络安全</tag>
+      </tags>
+  </entry>
+</search>
diff --git a/tags/Actions/index.html b/tags/Actions/index.html
new file mode 100644
index 0000000000..2143684f81
--- /dev/null
+++ b/tags/Actions/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Actions/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Actions/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Actions | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Actions
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Actions/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Actions/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Actions/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/CI-CD/index.html b/tags/CI-CD/index.html
new file mode 100644
index 0000000000..3262cbdcef
--- /dev/null
+++ b/tags/CI-CD/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/CI-CD/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/CI-CD/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: CI/CD | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CI/CD
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/CI-CD/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/CI-CD/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/CI-CD/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/CSS/index.html b/tags/CSS/index.html
new file mode 100644
index 0000000000..1a0455f019
--- /dev/null
+++ b/tags/CSS/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/CSS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/CSS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: CSS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/CSS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/CSS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/CSS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/CSS3/index.html b/tags/CSS3/index.html
new file mode 100644
index 0000000000..f82b8df1b5
--- /dev/null
+++ b/tags/CSS3/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/CSS3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/CSS3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: CSS3 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS3
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-14T00:00:00+00:00"
+              content="2020-05-14">
+          05-14
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/14/css3-pointer-events/" itemprop="url">
+            <span itemprop="name">CSS3新属性-pointer-events</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/CSS3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/CSS3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/CSS3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/CSS\346\212\200\345\267\247/index.html" "b/tags/CSS\346\212\200\345\267\247/index.html"
new file mode 100644
index 0000000000..31bd3bb19f
--- /dev/null
+++ "b/tags/CSS\346\212\200\345\267\247/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/CSS%E6%8A%80%E5%B7%A7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/CSS%E6%8A%80%E5%B7%A7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: CSS技巧 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CSS技巧
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2013</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2013-06-26T22:22:22+00:00"
+              content="2013-06-26">
+          06-26
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2013/06/26/CSS-Triangle-Circle/" itemprop="url">
+            <span itemprop="name">CSS border三角、圆角图形生成技术详解</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/CSS%E6%8A%80%E5%B7%A7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/CSS%E6%8A%80%E5%B7%A7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/CSS%E6%8A%80%E5%B7%A7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/CodeReview/index.html b/tags/CodeReview/index.html
new file mode 100644
index 0000000000..966c3fe9c6
--- /dev/null
+++ b/tags/CodeReview/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/CodeReview/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/CodeReview/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: CodeReview | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">CodeReview
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">CodeReview代码审查指南.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/CodeReview/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/CodeReview/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/CodeReview/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Cordova/index.html b/tags/Cordova/index.html
new file mode 100644
index 0000000000..6711ee42db
--- /dev/null
+++ b/tags/Cordova/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Cordova/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Cordova/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Cordova | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Cordova
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-cordova-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Cordova（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Cordova/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Cordova/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Cordova/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Docker-Compose/index.html b/tags/Docker-Compose/index.html
new file mode 100644
index 0000000000..10851d985c
--- /dev/null
+++ b/tags/Docker-Compose/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Docker-Compose/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Docker-Compose/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Docker Compose | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker Compose
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Network%20in%20Compose%20%E5%9C%A8Docker%20Compose%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BD%91%E7%BB%9C/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Docker-Compose/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Docker-Compose/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Docker-Compose/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Docker/index.html b/tags/Docker/index.html
new file mode 100644
index 0000000000..4af93b6f1c
--- /dev/null
+++ b/tags/Docker/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Docker/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Docker/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Docker | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Docker
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Oracle-Linux-install-Docker/" itemprop="url">
+            <span itemprop="name">在 Oracle Linux 中安装 Docker</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T16:20:30+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Docker 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Docker/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Docker/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Docker/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/DockerFile/index.html b/tags/DockerFile/index.html
new file mode 100644
index 0000000000..926447fa28
--- /dev/null
+++ b/tags/DockerFile/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/DockerFile/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/DockerFile/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: DockerFile | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">DockerFile
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:20:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/DockerFile/" itemprop="url">
+            <span itemprop="name">DockerFile</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/DockerFile/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/DockerFile/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/DockerFile/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/ESLint/index.html b/tags/ESLint/index.html
new file mode 100644
index 0000000000..8dc6e60e16
--- /dev/null
+++ b/tags/ESLint/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/ESLint/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/ESLint/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: ESLint | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">ESLint
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/ESLint/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/ESLint/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/ESLint/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Electron/index.html b/tags/Electron/index.html
new file mode 100644
index 0000000000..e49d529461
--- /dev/null
+++ b/tags/Electron/index.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Electron/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Electron/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Electron | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Electron
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Electron%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Electron编码规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T18:22:22+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/Electron-Offline-Build/" itemprop="url">
+            <span itemprop="name">国内配置Electron开发环境的正确方式【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Electron/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Electron/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Electron/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/EventLoop/index.html b/tags/EventLoop/index.html
new file mode 100644
index 0000000000..544bff5f5e
--- /dev/null
+++ b/tags/EventLoop/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/EventLoop/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/EventLoop/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: EventLoop | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">EventLoop
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/EventLoop/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/EventLoop/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/EventLoop/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/GIT/index.html b/tags/GIT/index.html
new file mode 100644
index 0000000000..ea49be51f9
--- /dev/null
+++ b/tags/GIT/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/GIT/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/GIT/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: GIT | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">GIT
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/GIT%20Standard/" itemprop="url">
+            <span itemprop="name">GIT Standard.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/GIT/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/GIT/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/GIT/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Git/index.html b/tags/Git/index.html
new file mode 100644
index 0000000000..775e02f4f0
--- /dev/null
+++ b/tags/Git/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Git/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Git/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Git | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Git
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-12-12T12:20:20+00:00"
+              content="2017-12-12">
+          12-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/12/12/Git-Shell/" itemprop="url">
+            <span itemprop="name">Git的常用命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Git/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Git/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Git/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/GitLab/index.html b/tags/GitLab/index.html
new file mode 100644
index 0000000000..e6776ab7c0
--- /dev/null
+++ b/tags/GitLab/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/GitLab/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/GitLab/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: GitLab | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">GitLab
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/GitLab/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/GitLab/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/GitLab/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Github/index.html b/tags/Github/index.html
new file mode 100644
index 0000000000..5dc47e5488
--- /dev/null
+++ b/tags/Github/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Github/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Github/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Github | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Github
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Github/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Github/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Github/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/Go\350\257\255\350\250\200/index.html" "b/tags/Go\350\257\255\350\250\200/index.html"
new file mode 100644
index 0000000000..1b31a05175
--- /dev/null
+++ "b/tags/Go\350\257\255\350\250\200/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Go%E8%AF%AD%E8%A8%80/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Go%E8%AF%AD%E8%A8%80/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Go语言 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Go语言
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-10T00:00:00+00:00"
+              content="2020-11-10">
+          11-10
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/10/learn-go/" itemprop="url">
+            <span itemprop="name">从零开始：学习Go（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Go%E8%AF%AD%E8%A8%80/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Hexo/index.html b/tags/Hexo/index.html
new file mode 100644
index 0000000000..7a607e226a
--- /dev/null
+++ b/tags/Hexo/index.html
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Hexo/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Hexo/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Hexo | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Hexo
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Hexo%E5%9C%A8Github%E5%8F%91%E5%B8%83%E4%B9%8B%E5%90%8E%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Hexo在Github发布之后自定义域名的配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T14:50:21+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/hexo-search/" itemprop="url">
+            <span itemprop="name">给我的Hexo博客添加文章内容搜索功能</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Actions/" itemprop="url">
+            <span itemprop="name">巧妙利用Acitons进行博客的自动构建</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T10:50:21+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/us-gitment/" itemprop="url">
+            <span itemprop="name">给博客添加基于github-issue的评论系统</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-11T16:18:48+00:00"
+              content="2017-10-11">
+          10-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/11/use-GitHub-Hexo-Next-make-blog/" itemprop="url">
+            <span itemprop="name">如何利用GitHub-Hexo-Next搭建一个漂亮的技术博客</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Hexo/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Hexo/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Hexo/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/HomeBrew/index.html b/tags/HomeBrew/index.html
new file mode 100644
index 0000000000..6a9e7e6ce6
--- /dev/null
+++ b/tags/HomeBrew/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/HomeBrew/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/HomeBrew/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: HomeBrew | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">HomeBrew
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/HomeBrew/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/HomeBrew/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/HomeBrew/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Ionic/index.html b/tags/Ionic/index.html
new file mode 100644
index 0000000000..39e6213812
--- /dev/null
+++ b/tags/Ionic/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Ionic/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Ionic/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Ionic | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Ionic
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-11-11T00:00:00+00:00"
+              content="2020-11-11">
+          11-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/11/11/learn-ionic-1/" itemprop="url">
+            <span itemprop="name">从零开始：学习Ionic（一）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Ionic/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Ionic/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Ionic/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Linux/index.html b/tags/Linux/index.html
new file mode 100644
index 0000000000..f09d58ee58
--- /dev/null
+++ b/tags/Linux/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Linux/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Linux/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Linux | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Linux
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-08-02T00:00:00+00:00"
+              content="2020-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/08/02/Linux%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E/" itemprop="url">
+            <span itemprop="name">Linux目录说明</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Linux/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Linux/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Linux/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Mac/index.html b/tags/Mac/index.html
new file mode 100644
index 0000000000..00daf4d053
--- /dev/null
+++ b/tags/Mac/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Mac/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Mac/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Mac | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Mac
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Mac/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Mac/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Mac/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Nginx/index.html b/tags/Nginx/index.html
new file mode 100644
index 0000000000..a572fa679d
--- /dev/null
+++ b/tags/Nginx/index.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Nginx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Nginx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Nginx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Nginx
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T12:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/http_stub_status_module/" itemprop="url">
+            <span itemprop="name">http_stub_status_module Nginx的性能模块</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-09T10:40:40+00:00"
+              content="2022-06-09">
+          06-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/09/Nginx%E6%8C%87%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">Nginx指令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Nginx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Nginx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Nginx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/NodeJS/index.html b/tags/NodeJS/index.html
new file mode 100644
index 0000000000..434ab90869
--- /dev/null
+++ b/tags/NodeJS/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/NodeJS/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/NodeJS/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: NodeJS | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">NodeJS
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-23T14:42:52+00:00"
+              content="2020-03-23">
+          03-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/23/path-join-vs-path-resolve/" itemprop="url">
+            <span itemprop="name">path.join 与 path.resolve 的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/NodeJS/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/NodeJS/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/NodeJS/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Postgresql/index.html b/tags/Postgresql/index.html
new file mode 100644
index 0000000000..546ffb8795
--- /dev/null
+++ b/tags/Postgresql/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Postgresql/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Postgresql/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Postgresql | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Postgresql
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Postgresql%E7%BB%BF%E8%89%B2%E7%89%88%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">Postgresql绿色版使用</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Postgresql/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Postgresql/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Postgresql/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Prettier/index.html b/tags/Prettier/index.html
new file mode 100644
index 0000000000..a4c9c90f94
--- /dev/null
+++ b/tags/Prettier/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Prettier/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Prettier/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Prettier | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Prettier
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-05-28T00:00:00+00:00"
+              content="2020-05-28">
+          05-28
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/05/28/Prettier-Setting/" itemprop="url">
+            <span itemprop="name">Prettier格式化配置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Prettier/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Prettier/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Prettier/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/RESTful/index.html b/tags/RESTful/index.html
new file mode 100644
index 0000000000..6d1e5e032c
--- /dev/null
+++ b/tags/RESTful/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/RESTful/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/RESTful/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: RESTful | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">RESTful
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/restful-architecture/" itemprop="url">
+            <span itemprop="name">NodeJS 下 RESTful 架构的最佳实践（课堂笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/RESTful/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/RESTful/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/RESTful/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/RPM/index.html b/tags/RPM/index.html
new file mode 100644
index 0000000000..d2a21262fc
--- /dev/null
+++ b/tags/RPM/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/RPM/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/RPM/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: RPM | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">RPM
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-07-19T00:00:00+00:00"
+              content="2020-07-19">
+          07-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/07/19/rpm%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">rpm命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/RPM/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/RPM/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/RPM/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/React/index.html b/tags/React/index.html
new file mode 100644
index 0000000000..31b3728694
--- /dev/null
+++ b/tags/React/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/React/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/React/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: React | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">React
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/React/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/React/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/React/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Restful-API/index.html b/tags/Restful-API/index.html
new file mode 100644
index 0000000000..3bef2c16bb
--- /dev/null
+++ b/tags/Restful-API/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Restful-API/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Restful-API/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Restful API | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Restful API
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/Restful%20API%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">Restful API 的设计规范.md</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Restful-API/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Restful-API/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Restful-API/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/SSR/index.html b/tags/SSR/index.html
new file mode 100644
index 0000000000..6f9d18a06c
--- /dev/null
+++ b/tags/SSR/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/SSR/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/SSR/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: SSR | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">SSR
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/SSR/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/SSR/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/SSR/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/SemVer/index.html b/tags/SemVer/index.html
new file mode 100644
index 0000000000..91df1f49ed
--- /dev/null
+++ b/tags/SemVer/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/SemVer/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/SemVer/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: SemVer | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">SemVer
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/SemVer/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/SemVer/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/SemVer/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Squid/index.html b/tags/Squid/index.html
new file mode 100644
index 0000000000..8be963bbb7
--- /dev/null
+++ b/tags/Squid/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Squid/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Squid/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Squid | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Squid
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/squid/" itemprop="url">
+            <span itemprop="name">Squid 服务器学习笔记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Squid/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Squid/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Squid/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Timeout/index.html b/tags/Timeout/index.html
new file mode 100644
index 0000000000..4b5b61d5fb
--- /dev/null
+++ b/tags/Timeout/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Timeout/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Timeout/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Timeout | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Timeout
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-30T00:00:00+00:00"
+              content="2022-06-30">
+          06-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/30/nginx-timeout/" itemprop="url">
+            <span itemprop="name">nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Timeout/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Timeout/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Timeout/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/UglifyJsPlugin/index.html b/tags/UglifyJsPlugin/index.html
new file mode 100644
index 0000000000..fd8a833bb7
--- /dev/null
+++ b/tags/UglifyJsPlugin/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/UglifyJsPlugin/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/UglifyJsPlugin/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: UglifyJsPlugin | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">UglifyJsPlugin
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-07T11:22:00+00:00"
+              content="2020-04-07">
+          04-07
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/07/webpack-uglifyjsplugin/" itemprop="url">
+            <span itemprop="name">Webpack 打包时利用 UglifyJsPlugin 去掉comments 、console 、和 debugger</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/UglifyJsPlugin/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/UglifyJsPlugin/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/UglifyJsPlugin/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/VSCode/index.html b/tags/VSCode/index.html
new file mode 100644
index 0000000000..0aca16f695
--- /dev/null
+++ b/tags/VSCode/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/VSCode/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/VSCode/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: VSCode | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">VSCode
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-10-12T14:42:52+00:00"
+              content="2017-10-12">
+          10-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/10/12/VSCode-ESLint/" itemprop="url">
+            <span itemprop="name">VSCode ESLint JS代码静态检测工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/VSCode/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/VSCode/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/VSCode/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/VSCode\346\217\222\344\273\266/index.html" "b/tags/VSCode\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..298ef479ae
--- /dev/null
+++ "b/tags/VSCode\346\217\222\344\273\266/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/VSCode%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/VSCode%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: VSCode插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">VSCode插件
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/VSCode%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Vue/index.html b/tags/Vue/index.html
new file mode 100644
index 0000000000..ae11921b46
--- /dev/null
+++ b/tags/Vue/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Vue/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Vue/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Vue | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Vue
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-21T23:00:00+00:00"
+              content="2020-02-21">
+          02-21
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/21/Implementation-of-the-vue-response-principle/" itemprop="url">
+            <span itemprop="name">Vue 响应式原理的实现（课程笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T17:03:05+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-basic/" itemprop="url">
+            <span itemprop="name">Vue基础</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Vue/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Vue/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Vue/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/Webpack/index.html b/tags/Webpack/index.html
new file mode 100644
index 0000000000..9821cd8560
--- /dev/null
+++ b/tags/Webpack/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/Webpack/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/Webpack/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: Webpack | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">Webpack
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T20:20:20+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/webpack-learning-1/" itemprop="url">
+            <span itemprop="name">2020年了,再不会webpack敲得代码就不香了(近万字实战)【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/Webpack/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/Webpack/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/Webpack/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/ajax/index.html b/tags/ajax/index.html
new file mode 100644
index 0000000000..cf70dfbe08
--- /dev/null
+++ b/tags/ajax/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/ajax/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/ajax/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: ajax | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">ajax
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/ajax/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/ajax/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/ajax/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/es6/index.html b/tags/es6/index.html
new file mode 100644
index 0000000000..954f076efd
--- /dev/null
+++ b/tags/es6/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/es6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/es6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: es6 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">es6
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T06:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Es6-arrowFunc-arguments/" itemprop="url">
+            <span itemprop="name">es6中箭头函数没了arguments怎么办？</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/es6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/es6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/es6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/get/index.html b/tags/get/index.html
new file mode 100644
index 0000000000..8ad1e4fd73
--- /dev/null
+++ b/tags/get/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/get/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/get/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: get | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">get
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T11:22:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/solve-get-params-so-long-problem/" itemprop="url">
+            <span itemprop="name">解决get请求过长的问题小记</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/get/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/get/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/get/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/index.html b/tags/index.html
new file mode 100644
index 0000000000..ad1f14d478
--- /dev/null
+++ b/tags/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="标签">
+<meta property="og:url" content="https://blog.lifesli.com/tags/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:published_time" content="2017-08-29T09:59:00.000Z">
+<meta property="article:modified_time" content="2019-12-27T10:29:17.041Z">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签 | 李旭光的成长博客
+</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+  
+  
+
+          <div class="content page posts-expand">
+            
+
+    
+    
+    
+    <div class="post-block" lang="zh-CN">
+      <header class="post-header">
+
+<h1 class="post-title" itemprop="name headline">标签
+</h1>
+
+<div class="post-meta">
+  
+
+</div>
+
+</header>
+
+      
+      
+      
+      <div class="post-body">
+          <div class="tag-cloud">
+            <div class="tag-cloud-title">
+              目前共计 90 个标签
+            </div>
+            <div class="tag-cloud-tags">
+              <a href="/tags/Actions/" style="font-size: 12px; color: #ccc">Actions</a> <a href="/tags/CI-CD/" style="font-size: 12px; color: #ccc">CI/CD</a> <a href="/tags/CSS/" style="font-size: 12px; color: #ccc">CSS</a> <a href="/tags/CSS3/" style="font-size: 12px; color: #ccc">CSS3</a> <a href="/tags/CSS%E6%8A%80%E5%B7%A7/" style="font-size: 12px; color: #ccc">CSS技巧</a> <a href="/tags/CodeReview/" style="font-size: 12px; color: #ccc">CodeReview</a> <a href="/tags/Cordova/" style="font-size: 12px; color: #ccc">Cordova</a> <a href="/tags/Docker/" style="font-size: 15px; color: #adadad">Docker</a> <a href="/tags/Docker-Compose/" style="font-size: 12px; color: #ccc">Docker Compose</a> <a href="/tags/DockerFile/" style="font-size: 12px; color: #ccc">DockerFile</a> <a href="/tags/ESLint/" style="font-size: 12px; color: #ccc">ESLint</a> <a href="/tags/Electron/" style="font-size: 15px; color: #adadad">Electron</a> <a href="/tags/EventLoop/" style="font-size: 12px; color: #ccc">EventLoop</a> <a href="/tags/GIT/" style="font-size: 12px; color: #ccc">GIT</a> <a href="/tags/Git/" style="font-size: 12px; color: #ccc">Git</a> <a href="/tags/GitLab/" style="font-size: 12px; color: #ccc">GitLab</a> <a href="/tags/Github/" style="font-size: 12px; color: #ccc">Github</a> <a href="/tags/Go%E8%AF%AD%E8%A8%80/" style="font-size: 12px; color: #ccc">Go语言</a> <a href="/tags/Hexo/" style="font-size: 21px; color: #6f6f6f">Hexo</a> <a href="/tags/HomeBrew/" style="font-size: 12px; color: #ccc">HomeBrew</a> <a href="/tags/Ionic/" style="font-size: 12px; color: #ccc">Ionic</a> <a href="/tags/Linux/" style="font-size: 12px; color: #ccc">Linux</a> <a href="/tags/Mac/" style="font-size: 12px; color: #ccc">Mac</a> <a href="/tags/Nginx/" style="font-size: 15px; color: #adadad">Nginx</a> <a href="/tags/NodeJS/" style="font-size: 18px; color: #8e8e8e">NodeJS</a> <a href="/tags/Postgresql/" style="font-size: 12px; color: #ccc">Postgresql</a> <a href="/tags/Prettier/" style="font-size: 12px; color: #ccc">Prettier</a> <a href="/tags/RESTful/" style="font-size: 12px; color: #ccc">RESTful</a> <a href="/tags/RPM/" style="font-size: 12px; color: #ccc">RPM</a> <a href="/tags/React/" style="font-size: 12px; color: #ccc">React</a> <a href="/tags/Restful-API/" style="font-size: 12px; color: #ccc">Restful API</a> <a href="/tags/SSR/" style="font-size: 12px; color: #ccc">SSR</a> <a href="/tags/SemVer/" style="font-size: 12px; color: #ccc">SemVer</a> <a href="/tags/Squid/" style="font-size: 12px; color: #ccc">Squid</a> <a href="/tags/Timeout/" style="font-size: 12px; color: #ccc">Timeout</a> <a href="/tags/UglifyJsPlugin/" style="font-size: 12px; color: #ccc">UglifyJsPlugin</a> <a href="/tags/VSCode/" style="font-size: 12px; color: #ccc">VSCode</a> <a href="/tags/VSCode%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">VSCode插件</a> <a href="/tags/Vue/" style="font-size: 18px; color: #8e8e8e">Vue</a> <a href="/tags/Webpack/" style="font-size: 12px; color: #ccc">Webpack</a> <a href="/tags/ajax/" style="font-size: 12px; color: #ccc">ajax</a> <a href="/tags/es6/" style="font-size: 12px; color: #ccc">es6</a> <a href="/tags/get/" style="font-size: 12px; color: #ccc">get</a> <a href="/tags/jsonp/" style="font-size: 12px; color: #ccc">jsonp</a> <a href="/tags/kernel/" style="font-size: 12px; color: #ccc">kernel</a> <a href="/tags/npm/" style="font-size: 12px; color: #ccc">npm</a> <a href="/tags/npx/" style="font-size: 12px; color: #ccc">npx</a> <a href="/tags/path-intellisense/" style="font-size: 12px; color: #ccc">path-intellisense</a> <a href="/tags/port/" style="font-size: 12px; color: #ccc">port</a> <a href="/tags/promise/" style="font-size: 12px; color: #ccc">promise</a> <a href="/tags/registry/" style="font-size: 12px; color: #ccc">registry</a> <a href="/tags/rnpm/" style="font-size: 12px; color: #ccc">rnpm</a> <a href="/tags/sass/" style="font-size: 12px; color: #ccc">sass</a> <a href="/tags/scp/" style="font-size: 12px; color: #ccc">scp</a> <a href="/tags/systemctl/" style="font-size: 12px; color: #ccc">systemctl</a> <a href="/tags/vuepress/" style="font-size: 12px; color: #ccc">vuepress</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/" style="font-size: 12px; color: #ccc">事件驱动</a> <a href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">兼容性问题</a> <a href="/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/" style="font-size: 12px; color: #ccc">内存回收</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" style="font-size: 12px; color: #ccc">前后端分离开发指南</a> <a href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" style="font-size: 12px; color: #ccc">前后端分离开发规范</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" style="font-size: 12px; color: #ccc">前端开发插件</a> <a href="/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/" style="font-size: 12px; color: #ccc">同构技术</a> <a href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/" style="font-size: 15px; color: #adadad">奇怪问题</a> <a href="/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" style="font-size: 12px; color: #ccc">容器端口映射</a> <a href="/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/" style="font-size: 12px; color: #ccc">年终总结</a> <a href="/tags/%E5%BE%AE%E4%BF%A1/" style="font-size: 12px; color: #ccc">微信</a> <a href="/tags/%E6%89%93%E5%8C%85/" style="font-size: 12px; color: #ccc">打包</a> <a href="/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/" style="font-size: 12px; color: #ccc">排序算法</a> <a href="/tags/%E6%8F%92%E4%BB%B6/" style="font-size: 15px; color: #adadad">插件</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/" style="font-size: 12px; color: #ccc">数据卷</a> <a href="/tags/%E6%95%B0%E7%BB%84/" style="font-size: 12px; color: #ccc">数组</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" style="font-size: 12px; color: #ccc">服务端渲染</a> <a href="/tags/%E6%9E%B6%E6%9E%84/" style="font-size: 12px; color: #ccc">架构</a> <a href="/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/" style="font-size: 12px; color: #ccc">海外提速</a> <a href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/" style="font-size: 12px; color: #ccc">源码解析</a> <a href="/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" style="font-size: 12px; color: #ccc">版本管理</a> <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" style="font-size: 24px; color: #4f4f4f">知识点</a> <a href="/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" style="font-size: 12px; color: #ccc">组件通信</a> <a href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/" style="font-size: 15px; color: #adadad">经验之谈</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" style="font-size: 15px; color: #adadad">网络安全</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">网络模式</a> <a href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/" style="font-size: 12px; color: #ccc">脚手架</a> <a href="/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/" style="font-size: 12px; color: #ccc">自动构建</a> <a href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/" style="font-size: 27px; color: #303030">自己动手实现系列</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 12px; color: #ccc">设计模式</a> <a href="/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" style="font-size: 12px; color: #ccc">超时设置</a> <a href="/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/" style="font-size: 12px; color: #ccc">路径别名</a> <a href="/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/" style="font-size: 12px; color: #ccc">镜像安全</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 30px; color: #111">面试</a>
+            </div>
+          </div>
+        
+      </div>
+      
+      
+      
+    </div>
+    
+
+    
+    
+    
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/jsonp/index.html b/tags/jsonp/index.html
new file mode 100644
index 0000000000..a3cc2639e9
--- /dev/null
+++ b/tags/jsonp/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/jsonp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/jsonp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: jsonp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">jsonp
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T08:40:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/do-it-yourselfery-jsonp/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- jsonp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/jsonp/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/jsonp/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/jsonp/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/kernel/index.html b/tags/kernel/index.html
new file mode 100644
index 0000000000..ef4ee9f733
--- /dev/null
+++ b/tags/kernel/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/kernel/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/kernel/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: kernel | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">kernel
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/OracleLinux%E5%86%85%E6%A0%B8%E4%BB%8Euek%E5%88%87%E6%8D%A2%E5%88%B0uek/" itemprop="url">
+            <span itemprop="name">OracleLinux内核从uek切换到uek</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/kernel/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/kernel/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/kernel/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/npm/index.html b/tags/npm/index.html
new file mode 100644
index 0000000000..70c407cca1
--- /dev/null
+++ b/tags/npm/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/npm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/npm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: npm | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">npm
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/npm/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/npm/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/npm/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/npx/index.html b/tags/npx/index.html
new file mode 100644
index 0000000000..bdb263895a
--- /dev/null
+++ b/tags/npx/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/npx/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/npx/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: npx | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">npx
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/what-is-npx/" itemprop="url">
+            <span itemprop="name">npx是什么</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/npx/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/npx/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/npx/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/path-intellisense/index.html b/tags/path-intellisense/index.html
new file mode 100644
index 0000000000..edb522af8c
--- /dev/null
+++ b/tags/path-intellisense/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/path-intellisense/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/path-intellisense/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: path-intellisense | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">path-intellisense
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/path-intellisense/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/path-intellisense/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/path-intellisense/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/port/index.html b/tags/port/index.html
new file mode 100644
index 0000000000..897c0009bf
--- /dev/null
+++ b/tags/port/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/port/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/port/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: port | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">port
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%AB%98%E5%8D%B1%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8/" itemprop="url">
+            <span itemprop="name">服务器高危端口列表</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/port/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/port/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/port/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/promise/index.html b/tags/promise/index.html
new file mode 100644
index 0000000000..a41d20b37e
--- /dev/null
+++ b/tags/promise/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/promise/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/promise/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: promise | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">promise
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T00:40:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/do-it-yourselfery-promise/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/promise/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/promise/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/promise/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/registry/index.html b/tags/registry/index.html
new file mode 100644
index 0000000000..a5d6860be9
--- /dev/null
+++ b/tags/registry/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/registry/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/registry/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: registry | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">registry
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/%E6%90%AD%E5%BB%BADocker%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93/" itemprop="url">
+            <span itemprop="name">搭建Docker私有仓库</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/registry/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/registry/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/registry/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/rnpm/index.html b/tags/rnpm/index.html
new file mode 100644
index 0000000000..471e948fc6
--- /dev/null
+++ b/tags/rnpm/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/rnpm/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/rnpm/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: rnpm | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">rnpm
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T12:24:49+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/npm-source/" itemprop="url">
+            <span itemprop="name">npm相关资料</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/rnpm/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/rnpm/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/rnpm/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/sass/index.html b/tags/sass/index.html
new file mode 100644
index 0000000000..68983bf851
--- /dev/null
+++ b/tags/sass/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/sass/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/sass/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: sass | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">sass
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T23:24:49+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/node-sass-slow-problem/" itemprop="url">
+            <span itemprop="name">如何解决npm安装node-sass依赖慢的情况</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/sass/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/sass/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/sass/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/scp/index.html b/tags/scp/index.html
new file mode 100644
index 0000000000..f2f6f2868a
--- /dev/null
+++ b/tags/scp/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/scp/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/scp/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: scp | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">scp
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T00:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/linux-scp/" itemprop="url">
+            <span itemprop="name">在linux之间传输文件的命令scp</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/scp/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/scp/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/scp/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/systemctl/index.html b/tags/systemctl/index.html
new file mode 100644
index 0000000000..56c17bf6e0
--- /dev/null
+++ b/tags/systemctl/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/systemctl/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/systemctl/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: systemctl | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">systemctl
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T18:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/systemctl%20%E5%91%BD%E4%BB%A4/" itemprop="url">
+            <span itemprop="name">systemctl 命令</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/systemctl/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/systemctl/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/systemctl/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git a/tags/vuepress/index.html b/tags/vuepress/index.html
new file mode 100644
index 0000000000..32c5543056
--- /dev/null
+++ b/tags/vuepress/index.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/vuepress/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/vuepress/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: vuepress | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">vuepress
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T17:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-vuepress/" itemprop="url">
+            <span itemprop="name">介绍一个好用的doc展示库 ---- vuepress</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/vuepress/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/vuepress/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/vuepress/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\344\272\213\344\273\266\351\251\261\345\212\250/index.html" "b/tags/\344\272\213\344\273\266\351\251\261\345\212\250/index.html"
new file mode 100644
index 0000000000..577a5d0c7e
--- /dev/null
+++ "b/tags/\344\272\213\344\273\266\351\251\261\345\212\250/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 事件驱动 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">事件驱动
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T08:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%90%9E%E6%87%82EventLoop/" itemprop="url">
+            <span itemprop="name">搞懂EventLoop</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\205\274\345\256\271\346\200\247\351\227\256\351\242\230/index.html" "b/tags/\345\205\274\345\256\271\346\200\247\351\227\256\351\242\230/index.html"
new file mode 100644
index 0000000000..85279fb64d
--- /dev/null
+++ "b/tags/\345\205\274\345\256\271\346\200\247\351\227\256\351\242\230/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 兼容性问题 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">兼容性问题
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-29T17:04:31+00:00"
+              content="2017-08-29">
+          08-29
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/29/browser-incompatibility-problem-solution/" itemprop="url">
+            <span itemprop="name">浏览器兼容性问题解决方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\206\205\345\255\230\345\233\236\346\224\266/index.html" "b/tags/\345\206\205\345\255\230\345\233\236\346\224\266/index.html"
new file mode 100644
index 0000000000..378f67b3da
--- /dev/null
+++ "b/tags/\345\206\205\345\255\230\345\233\236\346\224\266/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 内存回收 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">内存回收
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-23T08:00:00+00:00"
+              content="2020-02-23">
+          02-23
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/23/V8-engine-memory-management-and-optimization/" itemprop="url">
+            <span itemprop="name">v8引擎如何回收内存（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html" "b/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
new file mode 100644
index 0000000000..8a1cfed69a
--- /dev/null
+++ "b/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\346\214\207\345\215\227/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 前后端分离开发指南 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前后端分离开发指南
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/" itemprop="url">
+            <span itemprop="name">前后端分离开发指南</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html" "b/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
new file mode 100644
index 0000000000..e5673016be
--- /dev/null
+++ "b/tags/\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\345\274\200\345\217\221\350\247\204\350\214\203/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 前后端分离开发规范 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前后端分离开发规范
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" itemprop="url">
+            <span itemprop="name">前后端分离开发规范</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html" "b/tags/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..c511e08db4
--- /dev/null
+++ "b/tags/\345\211\215\347\253\257\345\274\200\345\217\221\346\217\222\344\273\266/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 前端开发插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">前端开发插件
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-01T00:00:00+00:00"
+              content="2022-06-01">
+          06-01
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/01/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/" itemprop="url">
+            <span itemprop="name">前端开发插件</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\220\214\346\236\204\346\212\200\346\234\257/index.html" "b/tags/\345\220\214\346\236\204\346\212\200\346\234\257/index.html"
new file mode 100644
index 0000000000..ee9f0b43f2
--- /dev/null
+++ "b/tags/\345\220\214\346\236\204\346\212\200\346\234\257/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 同构技术 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">同构技术
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%90%8C%E6%9E%84%E6%8A%80%E6%9C%AF/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\245\207\346\200\252\351\227\256\351\242\230/index.html" "b/tags/\345\245\207\346\200\252\351\227\256\351\242\230/index.html"
new file mode 100644
index 0000000000..7ddbaef9ba
--- /dev/null
+++ "b/tags/\345\245\207\346\200\252\351\227\256\351\242\230/index.html"
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 奇怪问题 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">奇怪问题
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T09:00:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/vue-proxyTable-problem/" itemprop="url">
+            <span itemprop="name">Could not proxy request XXX from localhost:8080 to localhost:8081</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-12T08:30:00+00:00"
+              content="2020-02-12">
+          02-12
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/12/print-table-problem/" itemprop="url">
+            <span itemprop="name">由打印引起的一点小问题，写table时别忘了写thead和tbody</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%A5%87%E6%80%AA%E9%97%AE%E9%A2%98/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html" "b/tags/\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
new file mode 100644
index 0000000000..0e89bee32e
--- /dev/null
+++ "b/tags/\345\256\271\345\231\250\347\253\257\345\217\243\346\230\240\345\260\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 容器端口映射 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">容器端口映射
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:22:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/" itemprop="url">
+            <span itemprop="name">Docker容器端口映射</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%AE%B9%E5%99%A8%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\271\264\347\273\210\346\200\273\347\273\223/index.html" "b/tags/\345\271\264\347\273\210\346\200\273\347\273\223/index.html"
new file mode 100644
index 0000000000..83f118a3ff
--- /dev/null
+++ "b/tags/\345\271\264\347\273\210\346\200\273\347\273\223/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 年终总结 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">年终总结
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T23:50:59+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/GoodBye-2019/" itemprop="url">
+            <span itemprop="name">再见2019</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\345\276\256\344\277\241/index.html" "b/tags/\345\276\256\344\277\241/index.html"
new file mode 100644
index 0000000000..456528257e
--- /dev/null
+++ "b/tags/\345\276\256\344\277\241/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E5%BE%AE%E4%BF%A1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E5%BE%AE%E4%BF%A1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 微信 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">微信
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T01:37:08+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/weichat-h5-compatibility/" itemprop="url">
+            <span itemprop="name">微信的H5兼容方案</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E5%BE%AE%E4%BF%A1/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\211\223\345\214\205/index.html" "b/tags/\346\211\223\345\214\205/index.html"
new file mode 100644
index 0000000000..d407e734f7
--- /dev/null
+++ "b/tags/\346\211\223\345\214\205/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%89%93%E5%8C%85/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%89%93%E5%8C%85/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 打包 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">打包
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-16T00:00:00+00:00"
+              content="2020-04-16">
+          04-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/16/0-vuecli-3-component/" itemprop="url">
+            <span itemprop="name">从零开始：Vue cli3 库模式搭建组件库并发布到npm【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%89%93%E5%8C%85/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%89%93%E5%8C%85/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%89%93%E5%8C%85/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\216\222\345\272\217\347\256\227\346\263\225/index.html" "b/tags/\346\216\222\345\272\217\347\256\227\346\263\225/index.html"
new file mode 100644
index 0000000000..76e858b182
--- /dev/null
+++ "b/tags/\346\216\222\345\272\217\347\256\227\346\263\225/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 排序算法 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">排序算法
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\217\222\344\273\266/index.html" "b/tags/\346\217\222\344\273\266/index.html"
new file mode 100644
index 0000000000..11a4b4fe24
--- /dev/null
+++ "b/tags/\346\217\222\344\273\266/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%8F%92%E4%BB%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%8F%92%E4%BB%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 插件 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">插件
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-24T22:00:00+00:00"
+              content="2020-02-24">
+          02-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/24/Vue-plug-in-development/" itemprop="url">
+            <span itemprop="name">vue插件开发（笔记）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2017</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2017-08-30T16:23:17+00:00"
+              content="2017-08-30">
+          08-30
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2017/08/30/Vue-VSCode-Snippets/" itemprop="url">
+            <span itemprop="name">Vue VSCode Snippets 自动生成Vue代码片段的VSCode扩展</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%8F%92%E4%BB%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%8F%92%E4%BB%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%8F%92%E4%BB%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\225\260\346\215\256\345\215\267/index.html" "b/tags/\346\225\260\346\215\256\345\215\267/index.html"
new file mode 100644
index 0000000000..aa4b0871a7
--- /dev/null
+++ "b/tags/\346\225\260\346\215\256\345\215\267/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 数据卷 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">数据卷
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:21:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E6%95%B0%E6%8D%AE%E5%8D%B7/" itemprop="url">
+            <span itemprop="name">Docker数据卷</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%95%B0%E6%8D%AE%E5%8D%B7/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\225\260\347\273\204/index.html" "b/tags/\346\225\260\347\273\204/index.html"
new file mode 100644
index 0000000000..e90e613179
--- /dev/null
+++ "b/tags/\346\225\260\347\273\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%95%B0%E7%BB%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%95%B0%E7%BB%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 数组 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">数组
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%95%B0%E7%BB%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%95%B0%E7%BB%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%95%B0%E7%BB%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html" "b/tags/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html"
new file mode 100644
index 0000000000..a00a03bcc1
--- /dev/null
+++ "b/tags/\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 服务端渲染 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">服务端渲染
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-11T16:00:00+00:00"
+              content="2020-02-11">
+          02-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/11/SSR/" itemprop="url">
+            <span itemprop="name">SSR</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\236\266\346\236\204/index.html" "b/tags/\346\236\266\346\236\204/index.html"
new file mode 100644
index 0000000000..ea1c8ad1b0
--- /dev/null
+++ "b/tags/\346\236\266\346\236\204/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%9E%B6%E6%9E%84/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%9E%B6%E6%9E%84/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 架构 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">架构
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-15T14:40:40+00:00"
+              content="2022-06-15">
+          06-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/15/%E6%9E%B6%E6%9E%84%E5%AE%9E%E8%B7%B5/" itemprop="url">
+            <span itemprop="name">架构实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%9E%B6%E6%9E%84/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\265\267\345\244\226\346\217\220\351\200\237/index.html" "b/tags/\346\265\267\345\244\226\346\217\220\351\200\237/index.html"
new file mode 100644
index 0000000000..9f94f9d5b8
--- /dev/null
+++ "b/tags/\346\265\267\345\244\226\346\217\220\351\200\237/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 海外提速 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">海外提速
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-03T22:00:00+00:00"
+              content="2020-03-03">
+          03-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/03/Speeding-up-brew-with-Ali-mirroring/" itemprop="url">
+            <span itemprop="name">使用阿里镜像加速brew（转载）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%B5%B7%E5%A4%96%E6%8F%90%E9%80%9F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\346\272\220\347\240\201\350\247\243\346\236\220/index.html" "b/tags/\346\272\220\347\240\201\350\247\243\346\236\220/index.html"
new file mode 100644
index 0000000000..38bfc46143
--- /dev/null
+++ "b/tags/\346\272\220\347\240\201\350\247\243\346\236\220/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 源码解析 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">源码解析
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-03T12:38:00+00:00"
+              content="2020-04-03">
+          04-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/03/source-code-react-diff/" itemprop="url">
+            <span itemprop="name">React 源码剖析系列 － 不可思议的 react diff【转载】</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\211\210\346\234\254\347\256\241\347\220\206/index.html" "b/tags/\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
new file mode 100644
index 0000000000..c7a14a03ab
--- /dev/null
+++ "b/tags/\347\211\210\346\234\254\347\256\241\347\220\206/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 版本管理 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">版本管理
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-13T07:00:00+00:00"
+              content="2021-05-13">
+          05-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/13/%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" itemprop="url">
+            <span itemprop="name">关于版本管理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\237\245\350\257\206\347\202\271/index.html" "b/tags/\347\237\245\350\257\206\347\202\271/index.html"
new file mode 100644
index 0000000000..ec6a0f63dd
--- /dev/null
+++ "b/tags/\347\237\245\350\257\206\347\202\271/index.html"
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 知识点 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">知识点
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-04-15T15:59:00+00:00"
+              content="2020-04-15">
+          04-15
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/04/15/talk-about-full-stack-big-fd/" itemprop="url">
+            <span itemprop="name">前端全栈和大前端有啥区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\273\204\344\273\266\351\200\232\344\277\241/index.html" "b/tags/\347\273\204\344\273\266\351\200\232\344\277\241/index.html"
new file mode 100644
index 0000000000..f1d4f32fb0
--- /dev/null
+++ "b/tags/\347\273\204\344\273\266\351\200\232\344\277\241/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 组件通信 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">组件通信
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\273\217\351\252\214\344\271\213\350\260\210/index.html" "b/tags/\347\273\217\351\252\214\344\271\213\350\260\210/index.html"
new file mode 100644
index 0000000000..939801a2bc
--- /dev/null
+++ "b/tags/\347\273\217\351\252\214\344\271\213\350\260\210/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 经验之谈 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">经验之谈
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2023</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2023-09-20T18:33:23+00:00"
+              content="2023-09-20">
+          09-20
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2023/09/20/test/" itemprop="url">
+            <span itemprop="name">test</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T16:33:22+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/career/" itemprop="url">
+            <span itemprop="name">如何正确使用时间[转载]</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%BB%8F%E9%AA%8C%E4%B9%8B%E8%B0%88/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html" "b/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
new file mode 100644
index 0000000000..fbecf69f6d
--- /dev/null
+++ "b/tags/\347\275\221\347\273\234\345\256\211\345\205\250/index.html"
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 网络安全 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">网络安全
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-16T14:40:40+00:00"
+              content="2022-06-16">
+          06-16
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/16/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86%20----%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%EF%BC%882%EF%BC%89/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全（2）</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T14:50:21+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/FE-guide-safe/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络安全</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\347\275\221\347\273\234\346\250\241\345\274\217/index.html" "b/tags/\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000000..22160dc233
--- /dev/null
+++ "b/tags/\347\275\221\347\273\234\346\250\241\345\274\217/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 网络模式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">网络模式
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-06-02T11:23:20+00:00"
+              content="2022-06-02">
+          06-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/06/02/Docker%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/" itemprop="url">
+            <span itemprop="name">Docker网络模式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E7%BD%91%E7%BB%9C%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\204\232\346\211\213\346\236\266/index.html" "b/tags/\350\204\232\346\211\213\346\236\266/index.html"
new file mode 100644
index 0000000000..64328db2cc
--- /dev/null
+++ "b/tags/\350\204\232\346\211\213\346\236\266/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 脚手架 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">脚手架
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-02-19T15:00:00+00:00"
+              content="2020-02-19">
+          02-19
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/02/19/develop-custom-cli-tools-using-node/" itemprop="url">
+            <span itemprop="name">使用node开发自定义cli工具</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%84%9A%E6%89%8B%E6%9E%B6/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\207\252\345\212\250\346\236\204\345\273\272/index.html" "b/tags/\350\207\252\345\212\250\346\236\204\345\273\272/index.html"
new file mode 100644
index 0000000000..bad7e407ae
--- /dev/null
+++ "b/tags/\350\207\252\345\212\250\346\236\204\345\273\272/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 自动构建 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自动构建
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-31T08:22:22+00:00"
+              content="2019-12-31">
+          12-31
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/31/gitlab-cicd/" itemprop="url">
+            <span itemprop="name">基于 GitLab CI/CD 的自动化构建、发布实践</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html" "b/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
new file mode 100644
index 0000000000..b74a0a44bf
--- /dev/null
+++ "b/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:54:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-call-apply/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- call、apply、bind</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:50:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-async-await/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- async、await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:45:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-EventEmitter/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- EventEmitter(事件触发器)</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Vue双向绑定</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T15:20:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-map/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.map()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-create/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Object.create()</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T14:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- 事件代理</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-flat/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.flat()函数</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T13:30:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-isArray/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.isArray</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-new/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">2</a><a class="extend next" rel="next" href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html" "b/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
new file mode 100644
index 0000000000..61ae935297
--- /dev/null
+++ "b/tags/\350\207\252\345\267\261\345\212\250\346\211\213\345\256\236\347\216\260\347\263\273\345\210\227/page/2/index.html"
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 自己动手实现系列 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">自己动手实现系列
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-03-24T04:40:22+00:00"
+              content="2020-03-24">
+          03-24
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/03/24/do-it-yourselfery-reduce/" itemprop="url">
+            <span itemprop="name">自己动手实现系列 ---- Array.prototype.reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/">1</a><span class="page-number current">2</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0%E7%B3%BB%E5%88%97/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
new file mode 100644
index 0000000000..01e8a52ee9
--- /dev/null
+++ "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 设计模式 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">设计模式
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T12:22:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/Javascript-Design-Pattern/" itemprop="url">
+            <span itemprop="name">JavaScript 设计模式 Design Pattern</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\266\205\346\227\266\350\256\276\347\275\256/index.html" "b/tags/\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
new file mode 100644
index 0000000000..88d5eb538a
--- /dev/null
+++ "b/tags/\350\266\205\346\227\266\350\256\276\347\275\256/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 超时设置 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">超时设置
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Nginx%E4%B8%AD%E7%9A%84%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/" itemprop="url">
+            <span itemprop="name">Nginx中的超时设置</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%B6%85%E6%97%B6%E8%AE%BE%E7%BD%AE/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\350\267\257\345\276\204\345\210\253\345\220\215/index.html" "b/tags/\350\267\257\345\276\204\345\210\253\345\220\215/index.html"
new file mode 100644
index 0000000000..3a2f0ed8c0
--- /dev/null
+++ "b/tags/\350\267\257\345\276\204\345\210\253\345\220\215/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 路径别名 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">路径别名
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2021</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2021-05-08T08:03:48+00:00"
+              content="2021-05-08">
+          05-08
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2021/05/08/%E5%85%B3%E4%BA%8EVSCode%E4%B8%AD%E5%88%AB%E5%90%8D%EF%BC%88-%EF%BC%89%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">
+            <span itemprop="name">VSCode中既想使用path-intellisense插件，又想使用Webpack别名（@）的方法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\351\225\234\345\203\217\345\256\211\345\205\250/index.html" "b/tags/\351\225\234\345\203\217\345\256\211\345\205\250/index.html"
new file mode 100644
index 0000000000..b3bd30ae1f
--- /dev/null
+++ "b/tags/\351\225\234\345\203\217\345\256\211\345\205\250/index.html"
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 镜像安全 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">镜像安全
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-08-02T19:00:00+00:00"
+              content="2022-08-02">
+          08-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/08/02/Docker%20%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%20/" itemprop="url">
+            <span itemprop="name">在Docker Compose中配置网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E9%95%9C%E5%83%8F%E5%AE%89%E5%85%A8/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\351\235\242\350\257\225/index.html" "b/tags/\351\235\242\350\257\225/index.html"
new file mode 100644
index 0000000000..15c3e81fd0
--- /dev/null
+++ "b/tags/\351\235\242\350\257\225/index.html"
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 面试 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">面试
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2022</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2022-03-11T07:00:00+00:00"
+              content="2022-03-11">
+          03-11
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2022/03/11/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E4%B8%80%E7%9B%AE%E4%BA%86%E7%84%B6/" itemprop="url">
+            <span itemprop="name">数组方法哪些有副作用，一目了然！</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-22T10:38:00+00:00"
+              content="2020-01-22">
+          01-22
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/22/Wepack-Tips/" itemprop="url">
+            <span itemprop="name">webpack中loader和plugin之间的区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-13T03:18:22+00:00"
+              content="2020-01-13">
+          01-13
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/13/FE-guide-inherit2/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承类型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-data-structure/" itemprop="url">
+            <span itemprop="name">计算机通识 ---- 数据结构</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-09T07:35:00+00:00"
+              content="2020-01-09">
+          01-09
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/09/FE-guide-Net/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 网络</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T09:59:22+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-currying/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 柯里化 currying</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T08:55:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-about-reduce/" itemprop="url">
+            <span itemprop="name">reduce函数的妙用 ---- 实现map和filter</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-05T03:05:00+00:00"
+              content="2020-01-05">
+          01-05
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/05/FE-guide-ArrayOprs/" itemprop="url">
+            <span itemprop="name">数组常见操作 ---- 去重、扁平、取最大最小值</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-04T07:18:22+00:00"
+              content="2020-01-04">
+          01-04
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/04/Algorithm/" itemprop="url">
+            <span itemprop="name">JavaScript实现经典排序算法</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:37:22+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-store/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 浏览器存储</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <span class="page-number current">1</span><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/page/2/">2</a><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/page/3/">3</a><a class="extend next" rel="next" href="/tags/%E9%9D%A2%E8%AF%95/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E9%9D%A2%E8%AF%95/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E9%9D%A2%E8%AF%95/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E9%9D%A2%E8%AF%95/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\351\235\242\350\257\225/page/2/index.html" "b/tags/\351\235\242\350\257\225/page/2/index.html"
new file mode 100644
index 0000000000..2e0f2b6c95
--- /dev/null
+++ "b/tags/\351\235\242\350\257\225/page/2/index.html"
@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/page/2/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/page/2/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 面试 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">面试
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:10:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/why-0.1-plus-0.2-not-equals-0.3/" itemprop="url">
+            <span itemprop="name">为什么 0.1 + 0.2 != 0.3</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T04:00:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-Proxy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Proxy</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-async-await/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- async 和 await</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:35:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Map-FlatMap-Reduce/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Map、FlatMap 和 Reduce</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T03:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Generator/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Generator 生成器</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:52:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Promise/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- Promise</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T02:19:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-call-apply-bind/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- call, apply, bind 区别</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:40:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-inherit/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 继承</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T01:04:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-debounce-throttle/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 函数防抖和节流</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:41:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-Module/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 模块化</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/tags/%E9%9D%A2%E8%AF%95/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/">1</a><span class="page-number current">2</span><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/page/3/">3</a><a class="extend next" rel="next" href="/tags/%E9%9D%A2%E8%AF%95/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E9%9D%A2%E8%AF%95/page/2/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E9%9D%A2%E8%AF%95/page/2/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E9%9D%A2%E8%AF%95/page/2/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>
diff --git "a/tags/\351\235\242\350\257\225/page/3/index.html" "b/tags/\351\235\242\350\257\225/page/3/index.html"
new file mode 100644
index 0000000000..e8c74e1be4
--- /dev/null
+++ "b/tags/\351\235\242\350\257\225/page/3/index.html"
@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="zh-CN,en,ja">
+<head>
+  <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+<meta name="theme-color" content="#222">
+<meta name="generator" content="Hexo 5.4.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
+  <link rel="mask-icon" href="/images/logo.svg" color="#222">
+
+<link rel="stylesheet" href="/css/main.css">
+
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
+<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
+
+<script id="hexo-configurations">
+    var NexT = window.NexT || {};
+    var CONFIG = {"hostname":"blog.lifesli.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":220,"display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
+  </script>
+
+  <meta name="description" content="学习 | 生活 | 成长">
+<meta property="og:type" content="website">
+<meta property="og:title" content="李旭光的成长博客">
+<meta property="og:url" content="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/page/3/index.html">
+<meta property="og:site_name" content="李旭光的成长博客">
+<meta property="og:description" content="学习 | 生活 | 成长">
+<meta property="og:locale" content="zh_CN">
+<meta property="article:author" content="李旭光">
+<meta property="article:tag" content="李旭光">
+<meta name="twitter:card" content="summary">
+
+<link rel="canonical" href="https://blog.lifesli.com/tags/%E9%9D%A2%E8%AF%95/page/3/">
+
+
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
+  CONFIG.page = {
+    sidebar: "",
+    isHome : false,
+    isPost : false,
+    lang   : 'zh-CN'
+  };
+</script>
+
+  <title>标签: 面试 | 李旭光的成长博客</title>
+  
+
+
+
+
+
+
+  <noscript>
+  <style>
+  .use-motion .brand,
+  .use-motion .menu-item,
+  .sidebar-inner,
+  .use-motion .post-block,
+  .use-motion .pagination,
+  .use-motion .comments,
+  .use-motion .post-header,
+  .use-motion .post-body,
+  .use-motion .collection-header { opacity: initial; }
+
+  .use-motion .site-title,
+  .use-motion .site-subtitle {
+    opacity: initial;
+    top: initial;
+  }
+
+  .use-motion .logo-line-before i { left: initial; }
+  .use-motion .logo-line-after i { right: initial; }
+  </style>
+</noscript>
+
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+  <div class="container use-motion">
+    <div class="headband"></div>
+
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
+      <div class="header-inner"><div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="切换导航栏">
+      <span class="toggle-line toggle-line-first"></span>
+      <span class="toggle-line toggle-line-middle"></span>
+      <span class="toggle-line toggle-line-last"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+
+    <a href="/" class="brand" rel="start">
+      <span class="logo-line-before"><i></i></span>
+      <h1 class="site-title">李旭光的成长博客</h1>
+      <span class="logo-line-after"><i></i></span>
+    </a>
+      <p class="site-subtitle" itemprop="description">求知若饥，虚心若愚。</p>
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+        <i class="fa fa-search fa-fw fa-lg"></i>
+    </div>
+  </div>
+</div>
+
+
+
+
+<nav class="site-nav">
+  <ul id="menu" class="main-menu menu">
+        <li class="menu-item menu-item-home">
+
+    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
+
+  </li>
+        <li class="menu-item menu-item-about">
+
+    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
+
+  </li>
+        <li class="menu-item menu-item-tags">
+
+    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
+
+  </li>
+        <li class="menu-item menu-item-categories">
+
+    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
+
+  </li>
+        <li class="menu-item menu-item-archives">
+
+    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
+
+  </li>
+      <li class="menu-item menu-item-search">
+        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
+        </a>
+      </li>
+  </ul>
+</nav>
+
+
+
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+        <div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off"
+           placeholder="搜索..." spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div id="search-result">
+  <div id="no-result">
+    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
+  </div>
+</div>
+
+    </div>
+  </div>
+
+</div>
+    </header>
+
+    
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+  <div class="reading-progress-bar"></div>
+
+  <a href="https://github.com/lixuguang" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+
+    <main class="main">
+      <div class="main-inner">
+        <div class="content-wrap">
+          
+
+          <div class="content tag">
+            
+
+  
+  
+  
+  <div class="post-block">
+    <div class="posts-collapse">
+      <div class="collection-title">
+        <h2 class="collection-header">面试
+          <small>标签</small>
+        </h2>
+      </div>
+
+      
+    <div class="collection-year">
+      <span class="collection-header">2020</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-03T00:05:00+00:00"
+              content="2020-01-03">
+          01-03
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/03/FE-guide-copy/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 深浅拷贝</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T20:07:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-new/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- new</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:32:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-Closure/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 闭包</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T13:18:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 执行上下文</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:59:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-this/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- this</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T12:29:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-instanceof/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- instanceof</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T11:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-prototype/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 原型</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2020-01-02T08:22:22+00:00"
+              content="2020-01-02">
+          01-02
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2020/01/02/FE-guide-dataType/" itemprop="url">
+            <span itemprop="name">前端常见知识点整理 ---- 数据类型、类型判断、类型转换、类型比较</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+    <div class="collection-year">
+      <span class="collection-header">2019</span>
+    </div>
+
+  <article itemscope itemtype="http://schema.org/Article">
+    <header class="post-header">
+
+      <div class="post-meta">
+        <time itemprop="dateCreated"
+              datetime="2019-12-27T22:22:22+00:00"
+              content="2019-12-27">
+          12-27
+        </time>
+      </div>
+
+      <div class="post-title">
+          <a class="post-title-link" href="/2019/12/27/Vue-Component-Communication/" itemprop="url">
+            <span itemprop="name">前端面试Vue篇：Vue组件通信的几种方式</span>
+          </a>
+      </div>
+
+    </header>
+  </article>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+  <nav class="pagination">
+    <a class="extend prev" rel="prev" href="/tags/%E9%9D%A2%E8%AF%95/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/">1</a><a class="page-number" href="/tags/%E9%9D%A2%E8%AF%95/page/2/">2</a><span class="page-number current">3</span>
+  </nav>
+
+
+
+          </div>
+          
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let { activeClass } = CONFIG.comments;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
+
+        </div>
+          
+  
+  <div class="toggle sidebar-toggle">
+    <span class="toggle-line toggle-line-first"></span>
+    <span class="toggle-line toggle-line-middle"></span>
+    <span class="toggle-line toggle-line-last"></span>
+  </div>
+
+  <aside class="sidebar">
+    <div class="sidebar-inner">
+
+      <ul class="sidebar-nav motion-element">
+        <li class="sidebar-nav-toc">
+          文章目录
+        </li>
+        <li class="sidebar-nav-overview">
+          站点概览
+        </li>
+      </ul>
+
+      <!--noindex-->
+      <div class="post-toc-wrap sidebar-panel">
+      </div>
+      <!--/noindex-->
+
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+    <img class="site-author-image" itemprop="image" alt="李旭光"
+      src="/images/avatar.jpg">
+  <p class="site-author-name" itemprop="name">李旭光</p>
+  <div class="site-description" itemprop="description">学习 | 生活 | 成长</div>
+</div>
+<div class="site-state-wrap motion-element">
+  <nav class="site-state">
+      <div class="site-state-item site-state-posts">
+          <a href="/archives/">
+        
+          <span class="site-state-item-count">128</span>
+          <span class="site-state-item-name">日志</span>
+        </a>
+      </div>
+      <div class="site-state-item site-state-categories">
+            <a href="/categories/">
+          
+        <span class="site-state-item-count">54</span>
+        <span class="site-state-item-name">分类</span></a>
+      </div>
+      <div class="site-state-item site-state-tags">
+            <a href="/tags/">
+          
+        <span class="site-state-item-count">90</span>
+        <span class="site-state-item-name">标签</span></a>
+      </div>
+  </nav>
+</div>
+  <div class="links-of-author motion-element">
+      <span class="links-of-author-item">
+        <a href="https://github.com/lixuguang" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lixuguang" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
+      </span>
+      <span class="links-of-author-item">
+        <a href="mailto:lixuguang316@gmail.com" title="E-Mail → mailto:lixuguang316@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
+      </span>
+  </div>
+
+
+  <div class="links-of-blogroll motion-element">
+    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
+      Links
+    </div>
+    <ul class="links-of-blogroll-list">
+        <li class="links-of-blogroll-item">
+          <a href="http://he8hepeng.github.io/" title="http:&#x2F;&#x2F;he8hepeng.github.io" rel="noopener" target="_blank">何鹏</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://wangning0916.github.io/" title="https:&#x2F;&#x2F;wangning0916.github.io" rel="noopener" target="_blank">王宁</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://limeii.github.io/" title="https:&#x2F;&#x2F;limeii.github.io&#x2F;" rel="noopener" target="_blank">李梅</a>
+        </li>
+        <li class="links-of-blogroll-item">
+          <a href="https://godbasin.github.io/" title="https:&#x2F;&#x2F;godbasin.github.io&#x2F;" rel="noopener" target="_blank">王被删</a>
+        </li>
+    </ul>
+  </div>
+
+      </div>
+
+    </div>
+  </aside>
+  <div id="sidebar-dimmer"></div>
+
+
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        
+  <div class="languages">
+    <label class="lang-select-label">
+      <i class="fa fa-language"></i>
+      <span>简体中文</span>
+      <i class="fa fa-angle-up" aria-hidden="true"></i>
+    </label>
+    <select class="lang-select" data-canonical="">
+      
+        <option value="zh-CN" data-href="/tags/%E9%9D%A2%E8%AF%95/page/3/index.html" selected="">
+          简体中文
+        </option>
+      
+        <option value="en" data-href="/en/tags/%E9%9D%A2%E8%AF%95/page/3/index.html" selected="">
+          English
+        </option>
+      
+        <option value="ja" data-href="/ja/tags/%E9%9D%A2%E8%AF%95/page/3/index.html" selected="">
+          日本語
+        </option>
+      
+    </select>
+  </div>
+
+        
+
+<div class="copyright">
+  
+  &copy; 2013 – 
+  <span itemprop="copyrightYear">2023</span>
+  <span class="with-love">
+    <i class="fa fa-heart"></i>
+  </span>
+  <span class="author" itemprop="copyrightHolder">李旭光</span>
+</div>
+
+        
+
+
+
+
+
+
+
+
+      </div>
+    </footer>
+  </div>
+
+  
+  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
+  <script src="/lib/anime.min.js"></script>
+  <script src="/lib/velocity/velocity.min.js"></script>
+  <script src="/lib/velocity/velocity.ui.min.js"></script>
+
+<script src="/js/utils.js"></script>
+
+<script src="/js/motion.js"></script>
+
+
+<script src="/js/schemes/pisces.js"></script>
+
+
+<script src="/js/next-boot.js"></script>
+
+
+
+
+  
+
+
+
+
+  
+<script src="/js/local-search.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+  
+
+
+<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
+</html>